@vtx-ui/react 0.0.1-beta.13 → 0.0.1-beta.15

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 (58) hide show
  1. package/README.md +865 -103
  2. package/dist/index.cjs.js +1 -1
  3. package/dist/index.cjs.js.map +1 -1
  4. package/dist/index.esm.js +1 -1
  5. package/dist/index.esm.js.map +1 -1
  6. package/dist/types/components/Autocomplete/Autocomplete.d.ts +173 -0
  7. package/dist/types/components/Autocomplete/index.d.ts +2 -0
  8. package/dist/types/components/Image/Image.d.ts +14 -0
  9. package/dist/types/components/Image/index.d.ts +2 -0
  10. package/dist/types/components/Link/Link.d.ts +5 -0
  11. package/dist/types/components/Navbar/Navbar.d.ts +236 -0
  12. package/dist/types/components/Navbar/index.d.ts +2 -0
  13. package/dist/types/components/Text/Text.d.ts +9 -3
  14. package/dist/types/components/Widget/renderers/CarouselWidget.d.ts +2 -1
  15. package/dist/types/components/Widget/renderers/ContentBlockWidget.d.ts +56 -0
  16. package/dist/types/components/Widget/renderers/ContentBlockWidget.stories.d.ts +24 -0
  17. package/dist/types/components/Widget/renderers/HeaderWidget.d.ts +8 -2
  18. package/dist/types/components/Widget/renderers/ImageWidget.d.ts +69 -0
  19. package/dist/types/components/Widget/renderers/ImageWidget.stories.d.ts +11 -0
  20. package/dist/types/components/Widget/renderers/InfoWidget.d.ts +8 -2
  21. package/dist/types/components/Widget/renderers/ListWidget.d.ts +8 -2
  22. package/dist/types/components/Widget/renderers/MetricWidget.d.ts +8 -2
  23. package/dist/types/components/Widget/renderers/NavbarWidget.d.ts +16 -0
  24. package/dist/types/components/Widget/renderers/OrderWidget.d.ts +2 -6
  25. package/dist/types/components/Widget/renderers/ProductWidget.d.ts +2 -6
  26. package/dist/types/components/Widget/renderers/TextWidget.d.ts +8 -2
  27. package/dist/types/components/Widget/types.d.ts +388 -14
  28. package/dist/types/icons/IconComponents.d.ts +3 -0
  29. package/dist/types/index.d.ts +10 -6
  30. package/dist/types/stories/components/Autocomplete.stories.d.ts +20 -0
  31. package/dist/types/stories/components/ContentBlockWidget.stories.d.ts +24 -0
  32. package/dist/types/stories/components/HeaderWidget.stories.d.ts +10 -0
  33. package/dist/types/stories/components/InfoWidget.stories.d.ts +24 -0
  34. package/dist/types/stories/components/ListWidget.stories.d.ts +10 -0
  35. package/dist/types/stories/components/MetricWidget.stories.d.ts +12 -0
  36. package/dist/types/stories/components/OrderWidget.stories.d.ts +12 -0
  37. package/dist/types/stories/components/ProductWidget.stories.d.ts +13 -0
  38. package/dist/types/stories/components/TextWidget.stories.d.ts +10 -0
  39. package/dist/types/stories/widgets/DashboardCard.stories.d.ts +59 -0
  40. package/dist/types/stories/widgets/InfoCard.stories.d.ts +1 -4
  41. package/dist/types/stories/widgets/InfoListCard.stories.d.ts +3 -15
  42. package/dist/types/stories/widgets/InfoText.stories.d.ts +1 -19
  43. package/dist/types/stories/widgets/MetricCard.stories.d.ts +27 -0
  44. package/dist/types/stories/widgets/OrderCard.stories.d.ts +3 -9
  45. package/dist/types/stories/widgets/OrderConfirmation.stories.d.ts +1 -24
  46. package/dist/types/stories/widgets/OrderDetails.stories.d.ts +3 -7
  47. package/dist/types/stories/widgets/ProductCard.stories.d.ts +1 -15
  48. package/dist/types/theme/ThemeProvider.d.ts +7 -0
  49. package/dist/types/utils/parseClass.d.ts +2 -0
  50. package/dist/types/widgets/DashboardCard/DashboardCard.d.ts +275 -0
  51. package/dist/types/widgets/DashboardCard/index.d.ts +2 -0
  52. package/dist/types/widgets/MetricCard/MetricCard.d.ts +106 -0
  53. package/dist/types/widgets/MetricCard/index.d.ts +2 -0
  54. package/dist/types/widgets/Navbar/Navbar.d.ts +308 -0
  55. package/dist/types/widgets/Navbar/Navbar.stories.d.ts +23 -0
  56. package/dist/types/widgets/Navbar/index.d.ts +2 -0
  57. package/dist/types/widgets/OrderCard/OrderCard.d.ts +1 -0
  58. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react/jsx-runtime"),n=require("react"),e=require("react-dom"),t=require("react-icons/fi");function a(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}function o(r){if(r&&r.__esModule)return r;var n=Object.create(null);return r&&Object.keys(r).forEach(function(e){if("default"!==e){var t=Object.getOwnPropertyDescriptor(r,e);Object.defineProperty(n,e,t.get?t:{enumerable:!0,get:function(){return r[e]}})}}),n.default=r,Object.freeze(n)}var i=a(n),l=o(n);function s(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,s;l>0?(r=Math.round(e+(255-e)*l),i=Math.round(t+(255-t)*l),s=Math.round(a+(255-a)*l)):(r=Math.round(e*(1+l)),i=Math.round(t*(1+l)),s=Math.round(a*(1+l))),r=Math.max(0,Math.min(255,r)),i=Math.max(0,Math.min(255,i)),s=Math.max(0,Math.min(255,s));const d=`#${r.toString(16).padStart(2,"0")}${i.toString(16).padStart(2,"0")}${s.toString(16).padStart(2,"0")}`;o[Number(n)]=d}return o}function d(r){const n={};for(const[e,t]of Object.entries(r))if("string"==typeof t)n[e]=s(t);else if("object"==typeof t&&null!==t)if(t[500]){const r=s(t[500]);n[e]={...r,...t}}else n[e]=t;return n}const c={colors:{primary:s("#0c6b58"),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 x(r){const n=r||c,e=[];return Object.entries(n.colors).forEach(([r,n])=>{"object"==typeof n?Object.entries(n).forEach(([n,t])=>{e.push(` --vtx-color-${r}-${n}: ${t};`)}):e.push(` --vtx-color-${r}: ${n};`)}),Object.entries(n.spacing).forEach(([r,n])=>{e.push(` --vtx-spacing-${r}: ${n};`)}),Object.entries(n.typography.fontFamily).forEach(([r,n])=>{e.push(` --vtx-font-family-${r}: ${n};`)}),Object.entries(n.typography.fontSize).forEach(([r,n])=>{e.push(` --vtx-font-size-${r}: ${n};`)}),Object.entries(n.typography.fontWeight).forEach(([r,n])=>{e.push(` --vtx-font-weight-${r}: ${n};`)}),Object.entries(n.typography.lineHeight).forEach(([r,n])=>{e.push(` --vtx-line-height-${r}: ${n};`)}),Object.entries(n.typography.letterSpacing).forEach(([r,n])=>{e.push(` --vtx-letter-spacing-${r}: ${n};`)}),Object.entries(n.typography.textVariants).forEach(([r,n])=>{Object.entries(n).forEach(([n,t])=>{const a=n.replace(/([A-Z])/g,"-$1").toLowerCase();e.push(` --vtx-text-${r}-${a}: ${t};`)})}),Object.entries(n.borderRadius).forEach(([r,n])=>{e.push(` --vtx-radius-${r}: ${n};`)}),Object.entries(n.shadows).forEach(([r,n])=>{e.push(` --vtx-shadow-${r}: ${n};`)}),Object.entries(n.transitions).forEach(([r,n])=>{e.push(` --vtx-transition-${r}: ${n};`)}),Object.entries(n.zIndex).forEach(([r,n])=>{e.push(` --vtx-z-${r}: ${n};`)}),e.join("\n")}function v(r){if("undefined"==typeof document)return;const n="vtx-ui-variables";let e=document.getElementById(n);e||(e=document.createElement("style"),e.id=n,document.head.appendChild(e));const t=x(r);e.textContent=`:root {\n${t}\n}`}const m=n=>r.jsxs("svg",{className:"vtx-multiselect-icon-spinner",width:n.size||16,height:n.size||16,viewBox:"0 0 16 16",fill:"none",children:[r.jsx("circle",{className:"vtx-multiselect-icon-spinner-track",cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"2"}),r.jsx("path",{className:"vtx-multiselect-icon-spinner-path",fill:"currentColor",d:"M8 2C4.686 2 2 4.686 2 8h2c0-2.21 1.79-4 4-4V2z"})]}),p=t.FiCheck,h=n=>r.jsx("svg",{width:n.size||16,height:n.size||16,viewBox:"0 0 16 16",fill:"none",className:"vtx-icon-close",children:r.jsx("path",{d:"M12 4L4 12M4 4L12 12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),u=t.FiCalendar,g=t.FiChevronDown,f=t.FiPlus,b=t.FiMinus,w=t.FiBell,y=t.FiMenu,k=t.FiChevronUp,j=t.FiChevronLeft,N=t.FiChevronRight,_=t.FiCheckCircle,z=t.FiAlertCircle,C=t.FiAlertTriangle,S=t.FiInfo,M=t.FiMinusCircle,$=t.FiDownload,T=t.FiPackage,D=t.FiShoppingBag,I=t.FiShare2,L=t.FiEye,R=t.FiCreditCard,F=t.FiMessageCircle,A=t.FiMapPin,E=t.FiPhone,B=t.FiTruck,O=t.FiX,W=t.FiCornerUpLeft,P=t.FiRefreshCw,H=t.FiStar,V=t.FiSearch,Y=t.FiUser,q=t.FiHeart,U=t.FiTrendingUp,G=t.FiArrowUp,X=t.FiArrowDown,K=t.FiChevronsLeft,Q=t.FiChevronsRight,J="dynamic-styles";function Z(){let r=document.getElementById(J);return r||(r=document.createElement("style"),r.id=J,document.head.appendChild(r)),r}const rr=new Set,nr={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"},er={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 tr(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=er[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}; }`,rr.has(n)||(Z().appendChild(document.createTextNode(n)),rr.add(n)),t}}if(n=r.match(/^([a-z]+)-(.+)$/),n){const r=n[1],e=n[2],t=er[r],a=nr[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}; }`,rr.has(o)||(Z().appendChild(document.createTextNode(o)),rr.add(o)),n}}return r}(r)).join(" ");return r.jsx(n,{...e,className:t})};return e.displayName=n.displayName||n.name||"Component",e}function ar(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))}}ar("/* ===== 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 or={success:r.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm-2 15l-5-5 1.414-1.414L8 12.172l7.586-7.586L17 6l-9 9z",fill:"currentColor"})}),error:r.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm5 13.59L13.59 15 10 11.41 6.41 15 5 13.59 8.59 10 5 6.41 6.41 5 10 8.59 13.59 5 15 6.41 11.41 10 15 13.59z",fill:"currentColor"})}),warning:r.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm1 15H9v-2h2v2zm0-4H9V5h2v6z",fill:"currentColor"})}),info:r.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm1 15H9V9h2v6zm0-8H9V5h2v2z",fill:"currentColor"})}),default:r.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm1 15H9V9h2v6zm0-8H9V5h2v2z",fill:"currentColor"})}),primary:r.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm1 15H9v-6h2v6zm0-8H9V5h2v2z",fill:"currentColor"})})},ir=i.default.forwardRef(({children:e,onDismiss:t,id:a,variant:o="default",autoClose:l=5e3,closeButton:s=!0,progressBar:d=!0,pauseOnHover:c=!0,pauseOnFocusLoss:x=!0,icon:v,action:m,className:p="",style:u,title:g,description:f,animationDuration:b=300,isVisible:w,createdAt:y,onClose:k,onOpen:j,toastId:N,..._},z)=>{const[C,S]=n.useState(!1),[M,$]=n.useState(!1),[T,D]=n.useState(100),I=n.useRef(null),L=n.useRef(Date.now()),R=n.useRef(0),F=i.default.useCallback(()=>{S(!0),setTimeout(()=>{t()},b)},[t,b]);n.useEffect(()=>{if(!1===l||M)return;return I.current=setInterval(()=>{const r=Date.now()-L.current-R.current,n=Math.max(0,l-r);D(n/l*100),n<=0&&F()},16),()=>{I.current&&clearInterval(I.current)}},[l,M,F]);const A=["vtx-toast",`vtx-toast--${o}`,C&&"vtx-toast--exiting",p].filter(Boolean).join(" ");return r.jsxs("div",{ref:z,className:A,style:{...u,"--vtx-toast-animation-duration":`${b}ms`},onMouseEnter:()=>{c&&!M&&($(!0),R.current=Date.now())},onMouseLeave:()=>{if(c&&M){$(!1);const r=Date.now()-R.current;L.current+=r}},onFocus:()=>{if(x&&M){$(!1);const r=Date.now()-R.current;L.current+=r}},onBlur:()=>{x&&!M&&($(!0),R.current=Date.now())},role:"alert","aria-live":"polite","data-toast-id":a,..._,children:[r.jsxs("div",{className:"vtx-toast__wrapper",children:[!1===v?null:v?r.jsx("div",{className:"vtx-toast__icon",children:v}):r.jsx("div",{className:"vtx-toast__icon",children:or[o]}),g||f?r.jsxs("div",{className:"vtx-toast__content",children:[g&&r.jsx("div",{className:"vtx-toast__title",children:g}),f&&r.jsx("div",{className:"vtx-toast__description",children:f}),e&&r.jsx("div",{className:"vtx-toast__body",children:e})]}):r.jsx("div",{className:"vtx-toast__content",children:e}),r.jsxs("div",{className:"vtx-toast__actions",children:[m&&r.jsx("button",{className:"vtx-toast__action",onClick:m.onClick,type:"button",children:m.label}),s&&r.jsx("button",{className:"vtx-toast__close",onClick:F,type:"button","aria-label":"Close notification",children:r.jsx(h,{size:16})})]})]}),d&&!1!==l&&r.jsx("div",{className:"vtx-toast__progress-container",children:r.jsx("div",{className:"vtx-toast__progress",style:{transform:`scaleX(${T/100})`,animationPlayState:M?"paused":"running"}})})]})});ir.displayName="Toast";const lr=tr(ir),sr=n.createContext(null),dr=()=>{const r=n.useContext(sr);if(!r)throw new Error("useToast must be used within a ToastProvider");return r},cr=({children:e})=>{const[t,a]=n.useState([]),o=n.useCallback(r=>{a(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)})},[]),i=n.useCallback((r,n={})=>{var e;const t=n.toastId||Date.now()+Math.random(),i={id:t,content:r,createdAt:Date.now(),isVisible:!0,autoClose:5e3,closeButton:!0,progressBar:!0,pauseOnHover:!0,pauseOnFocusLoss:!0,variant:"default",animationDuration:300,...n};return a(r=>{const n=r.filter(r=>r.id!==t);return[i,...n]}),!1!==i.autoClose&&setTimeout(()=>{o(t)},i.autoClose),null===(e=n.onOpen)||void 0===e||e.call(n),t},[o]),l=n.useCallback(()=>{a([])},[]),s=n.useCallback((r,n)=>{a(e=>e.map(e=>e.id===r?{...e,...n}:e))},[]),d={toasts:t,addToast:i,removeToast:o,clearAllToasts:l,updateToast:s};return r.jsx(sr.Provider,{value:d,children:e})};class xr{constructor(){this.addToastFn=null,this.removeToastFn=null,this.clearAllToastsFn=null,this.updateToastFn=null}static getInstance(){return xr.instance||(xr.instance=new xr),xr.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 vr=xr.getInstance();ar("/* ===== 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 mr=({position:t="top-right",limit:a=5,gap:o=12,margin:i=16,className:l="",style:s,stacked:d=!0,theme:c="auto"})=>{const{toasts:x,removeToast:v,addToast:m,clearAllToasts:p,updateToast:h}=dr(),u=n.useRef(null);n.useEffect(()=>{vr.setMethods(m,v,p,h)},[m,v,p,h]),n.useEffect(()=>{if("auto"===c){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",c)},[c]);const g=x.slice(0,a),f=Math.max(0,x.length-a),b=["vtx-toast-container",`vtx-toast-container--${t}`,d&&"vtx-toast-container--stacked",l].filter(Boolean).join(" ");return 0===g.length?null:e.createPortal(r.jsxs("div",{ref:u,className:b,style:{...(r=>{const n={position:"fixed",zIndex:"var(--vtx-z-notification, 1400)",pointerEvents:"none"};switch(r){case"top-left":return{...n,top:i,left:i};case"top-center":return{...n,top:i,left:"50%",transform:"translateX(-50%)"};case"top-right":default:return{...n,top:i,right:i};case"bottom-left":return{...n,bottom:i,left:i};case"bottom-center":return{...n,bottom:i,left:"50%",transform:"translateX(-50%)"};case"bottom-right":return{...n,bottom:i,right:i}}})(t),"--vtx-toast-gap":`${o}px`,...s},"aria-live":"polite","aria-label":"Notifications",children:[f>0&&r.jsxs("div",{className:"vtx-toast-container__hidden-count",children:["+",f," more"]}),r.jsx("div",{className:"vtx-toast-container__list",children:g.map((n,e)=>r.jsx(lr,{id:n.id,isVisible:n.isVisible,onDismiss:()=>v(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)},pr=({children:n,...e})=>r.jsxs(cr,{children:[n,r.jsx(mr,{...e})]}),hr=i.default.createContext(void 0),ur=i.default.forwardRef(({children:n,initialMode:e="light",customTokens:t,defaultSize:a="md",colorContrast:o,toastPosition:l="top-right",toastLimit:s=5,disableToasts:x=!1,...m},p)=>{const[h,u]=i.default.useState(e),[g,f]=i.default.useState(a),b={primary:"dark",secondary:"dark",outline:"light",ghost:"light",danger:"dark",success:"dark",warning:"dark"},w=i.default.useMemo(()=>{const r={...b,...o};if(!t)return{tokens:c,mode:h,defaultSize:g,colorContrast:r};let n={...c,...t};return t.colors&&(n.colors={...c.colors,...d(t.colors)}),{tokens:n,mode:h,defaultSize:g,colorContrast:r}},[t,h,g,o]);i.default.useEffect(()=>{document.documentElement.setAttribute("data-theme",h),t&&v(w.tokens)},[h,t,w.tokens]);const y=i.default.useMemo(()=>({theme:w,setMode:u,setDefaultSize:f}),[w]);return r.jsx(hr.Provider,{value:y,children:r.jsx(pr,{position:l,limit:s,children:r.jsx("div",{ref:p,...m,children:n})})})});ur.displayName="ThemeProvider";const gr=()=>{const r=i.default.useContext(hr);if(!r)throw new Error("useThemeContext must be used within a ThemeProvider");return r};ar(".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 fr=i.default.forwardRef(({children:n,variant:e="primary",size:t,fullWidth:a=!1,loading:o=!1,disabled:i=!1,leftIcon:l,rightIcon:s,iconOnly:d=!1,loadingText:c,asLink:x=!1,href:v,target:m,rel:p,className:h="",type:u="button",...g},f)=>{const{theme:b}=gr(),w=t||b.defaultSize||"md",y=["vtx-button",`vtx-button--${e}`,`vtx-button--${w}`,a&&"vtx-button--full-width",o&&"vtx-button--loading",d&&"vtx-button--icon-only",(()=>{if(!0===g.darkText)return"vtx-button--dark-text";if(!1===g.darkText)return"vtx-button--light-text";const r=b.colorContrast[e];return"light"===r?"vtx-button--dark-text":"dark"===r?"vtx-button--light-text":null})(),h].filter(Boolean).join(" "),k=g.style?{...g.style}:{};g.textColor&&(k.color=g.textColor);const j=r.jsxs(r.Fragment,{children:[o&&r.jsx("span",{className:"vtx-button__spinner",role:"status","aria-label":"Loading",children:r.jsx("svg",{className:"vtx-button__spinner-icon",viewBox:"0 0 24 24",children:r.jsx("circle",{className:"vtx-button__spinner-circle",cx:"12",cy:"12",r:"10",fill:"none",strokeWidth:"3"})})}),!o&&l&&r.jsx("span",{className:"vtx-button__icon-left",children:l}),!d&&r.jsx("span",{className:"vtx-button__content",children:o&&c?c:n}),d&&!o&&n,!o&&s&&r.jsx("span",{className:"vtx-button__icon-right",children:s})]});return x&&v?r.jsx("a",{ref:f,href:v,target:m,rel:"_blank"===m?"noopener noreferrer":p,className:y,"aria-disabled":i||o,style:k,...g,children:j}):r.jsx("button",{ref:f,type:u,className:y,disabled:i||o,"aria-busy":o,"aria-disabled":i||o,style:k,...g,children:j})});fr.displayName="Button";const br=tr(fr);ar("/* 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 wr=i.default.forwardRef(({checked:e,indeterminate:t=!1,disabled:a=!1,label:o,size:i,variant:l="primary",error:s=!1,helperText:d,onChange:c,className:x="",inputClassName:v="",id:m,...p},h)=>{const{theme:u}=gr(),g=i||u.defaultSize||"md",f=n.useId(),b=m||f,w=["vtx-checkbox",`vtx-checkbox--${g}`,`vtx-checkbox--${l}`,a&&"vtx-checkbox--disabled",s&&"vtx-checkbox--error",x].filter(Boolean).join(" "),y=["vtx-checkbox-input",v].filter(Boolean).join(" "),k=n.useRef(null);return n.useImperativeHandle(h,()=>k.current),n.useEffect(()=>{k.current&&(k.current.indeterminate=t)},[t]),r.jsxs("div",{className:w,children:[r.jsxs("label",{className:"vtx-checkbox-label",htmlFor:b,children:[r.jsxs("span",{className:"vtx-checkbox-wrapper",children:[r.jsx("input",{ref:k,type:"checkbox",id:b,className:y,checked:e,disabled:a,onChange:c,...p}),r.jsxs("span",{className:"vtx-checkbox-box",children:[r.jsx("svg",{className:"vtx-checkbox-icon vtx-checkbox-icon--check",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",children:r.jsx("path",{d:"M20 6L9 17L4 12",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round"})}),r.jsx("svg",{className:"vtx-checkbox-icon vtx-checkbox-icon--indeterminate",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",children:r.jsx("path",{d:"M5 12H19",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round"})})]})]}),o&&r.jsx("span",{className:"vtx-checkbox-label-text",children:o})]}),d&&r.jsx("div",{className:"vtx-checkbox-helper-text",children:d})]})});wr.displayName="Checkbox";const yr=tr(wr);ar("/* 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 kr=i.default.forwardRef(({label:e,options:t,value:a,defaultValue:o,onChange:i,disabled:l=!1,error:s=!1,helperText:d,orientation:c="vertical",size:x,className:v="",...m},p)=>{const{theme:h}=gr(),u=x||h.defaultSize||"md",[g,f]=n.useState(o||[]),b=void 0!==a,w=b?a:g,y=["vtx-checkbox-group",`vtx-checkbox-group--${c}`,s&&"vtx-checkbox-group--error",l&&"vtx-checkbox-group--disabled",v].filter(Boolean).join(" ");return r.jsxs("div",{ref:p,className:y,...m,children:[e&&r.jsx("div",{className:"vtx-checkbox-group-label",children:e}),r.jsx("div",{className:"vtx-checkbox-group-options",children:t.map(n=>{const e=w.includes(n.value),t=l||n.disabled;return r.jsx(yr,{label:n.label,checked:e,disabled:t,error:s,size:u,onChange:r=>((r,n)=>{const e=n?[...w,r]:w.filter(n=>n!==r);b||f(e),null==i||i(e)})(n.value,r.target.checked)},n.value)})}),d&&r.jsx("div",{className:"vtx-checkbox-group-helper-text",children:d})]})});kr.displayName="CheckboxGroup";const jr=tr(kr),Nr=(r,e)=>{n.useEffect(()=>{if(!e)return;const n=r.current;if(!n)return;const t=n.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(),n.addEventListener("keydown",i),()=>{n.removeEventListener("keydown",i)}},[r,e])},_r=r=>{n.useEffect(()=>{const n=n=>{"Escape"===n.key&&r()};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[r])},zr=r=>{n.useEffect(()=>{if(!r)return;const n=window.getComputedStyle(document.body).overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=n}},[r])};let Cr=0;const Sr=(r="vtx")=>{const[e]=n.useState(()=>`${r}-${++Cr}`);return e};ar(".vtx-form-control {\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n}\r\n\r\n.vtx-form-control--full-width {\r\n width: 100%;\r\n}\r\n\r\n/* Spacing between form controls */\r\n.vtx-form-control--spacing-none {\r\n margin-bottom: 0;\r\n}\r\n\r\n.vtx-form-control--spacing-sm {\r\n margin-bottom: var(--vtx-spacing-3);\r\n}\r\n\r\n.vtx-form-control--spacing-md {\r\n margin-bottom: var(--vtx-spacing-4);\r\n}\r\n\r\n.vtx-form-control--spacing-lg {\r\n margin-bottom: var(--vtx-spacing-6);\r\n}\r\n\r\n/* Inner container */\r\n.vtx-form-control__inner {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--vtx-spacing-2);\r\n}\r\n\r\n/* Label position: top (default) */\r\n.vtx-form-control--label-top .vtx-form-control__inner {\r\n flex-direction: column;\r\n}\r\n\r\n/* Label position: left (horizontal) */\r\n.vtx-form-control--label-left .vtx-form-control__inner {\r\n flex-direction: row;\r\n align-items: flex-start;\r\n gap: var(--vtx-spacing-3);\r\n}\r\n\r\n.vtx-form-control--label-left .vtx-form-control__label {\r\n min-width: 120px;\r\n padding-top: var(--vtx-spacing-2);\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-form-control--label-left .vtx-form-control__field {\r\n flex: 1;\r\n}\r\n\r\n/* Label */\r\n.vtx-form-control__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 display: block;\r\n}\r\n\r\n.vtx-form-control__label-required {\r\n color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-form-control--disabled .vtx-form-control__label {\r\n color: var(--vtx-color-neutral-500);\r\n cursor: not-allowed;\r\n}\r\n\r\n/* Field wrapper */\r\n.vtx-form-control__field {\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n}\r\n\r\n/* Ensure children take full width if form control is full width */\r\n.vtx-form-control--full-width .vtx-form-control__field > * {\r\n width: 100%;\r\n}\r\n\r\n/* Messages */\r\n.vtx-form-control__messages {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--vtx-spacing-1);\r\n margin-top: var(--vtx-spacing-1);\r\n}\r\n\r\n.vtx-form-control__helper,\r\n.vtx-form-control__error,\r\n.vtx-form-control__success {\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 margin: 0;\r\n}\r\n\r\n.vtx-form-control__helper {\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n.vtx-form-control__error {\r\n color: var(--vtx-color-error-600);\r\n font-weight: var(--vtx-font-weight-medium);\r\n}\r\n\r\n.vtx-form-control__success {\r\n color: var(--vtx-color-success-600);\r\n font-weight: var(--vtx-font-weight-medium);\r\n}\r\n\r\n/* State styles */\r\n.vtx-form-control--error .vtx-form-control__label {\r\n color: var(--vtx-color-error-700);\r\n}\r\n\r\n.vtx-form-control--success .vtx-form-control__label {\r\n color: var(--vtx-color-success-700);\r\n}\r\n\r\n/* Responsive adjustments */\r\n@media (max-width: 640px) {\r\n .vtx-form-control--label-left .vtx-form-control__inner {\r\n flex-direction: column;\r\n gap: var(--vtx-spacing-2);\r\n }\r\n\r\n .vtx-form-control--label-left .vtx-form-control__label {\r\n min-width: auto;\r\n padding-top: 0;\r\n }\r\n}\r\n");const Mr=i.default.forwardRef(({label:n,helperText:e,error:t,success:a,size:o,fullWidth:i=!0,required:l=!1,disabled:s=!1,wrapperClassName:d="",labelClassName:c="",spacing:x="md",children:v,id:m,labelPosition:p="top",className:h="",...u},g)=>{const f=Sr("form-control"),b=m||f,w=`${b}-helper`,y=`${b}-error`,k=`${b}-success`,j=Boolean(t),N=["vtx-form-control",`vtx-form-control--spacing-${x}`,`vtx-form-control--label-${p}`,i&&"vtx-form-control--full-width",j&&"vtx-form-control--error",Boolean(a)&&!j&&"vtx-form-control--success",s&&"vtx-form-control--disabled",d,h].filter(Boolean).join(" ");return r.jsxs("div",{ref:g,className:N,...u,children:[r.jsxs("div",{className:"vtx-form-control__inner",children:[n&&r.jsxs("label",{htmlFor:`${b}-input`,className:`vtx-form-control__label ${c}`.trim(),children:[n,l&&r.jsxs("span",{className:"vtx-form-control__label-required","aria-label":"required",children:[" ","*"]})]}),r.jsx("div",{className:"vtx-form-control__field",children:v})]}),(e||t||a)&&r.jsxs("div",{className:"vtx-form-control__messages",children:[e&&!t&&!a&&r.jsx("p",{id:w,className:"vtx-form-control__helper",children:e}),t&&r.jsx("p",{id:y,className:"vtx-form-control__error",role:"alert",children:t}),a&&r.jsx("p",{id:k,className:"vtx-form-control__success",role:"status",children:a})]})]})});Mr.displayName="FormControl";const $r=tr(Mr);ar("/**\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");ar(".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 Tr=i.default.forwardRef(({label:n,helperText:e,error:t,success:a,size:o,fullWidth:i=!1,leftIcon:l,rightIcon:s,clearable:d=!1,onClear:c,showCount:x=!1,className:v="",wrapperClassName:m="",labelClassName:p="",inputClassName:u="",prefix:g,suffix:f,id:b,disabled:w=!1,required:y=!1,value:k,maxLength:j,...N},_)=>{const{theme:z}=gr(),C=o||z.defaultSize,S=Sr("input"),M=b||S,$=`${M}-helper`,T=`${M}-error`,D=`${M}-success`,I=Boolean(t),L=Boolean(a)&&!I,R=d&&k&&String(k).length>0&&!w,F=[e&&!t&&!a&&$,t&&T,a&&D].filter(Boolean).join(" "),A=["vtx-input-wrapper",i&&"vtx-input-wrapper--full-width",m].filter(Boolean).join(" "),E=["vtx-input-container",`vtx-input-container--${C}`,I&&"vtx-input-container--error",L&&"vtx-input-container--success",w&&"vtx-input-container--disabled",(l||g)&&"vtx-input-container--with-left-element",(s||f||R)&&"vtx-input-container--with-right-element",v].filter(Boolean).join(" "),B=k?String(k).length:0,O=x&&j;return r.jsxs("div",{className:A,children:[n&&r.jsxs("label",{htmlFor:M,className:`vtx-input-label ${p}`.trim(),children:[n,y&&r.jsxs("span",{className:"vtx-input-label__required","aria-label":"required",children:[" ","*"]})]}),r.jsxs("div",{className:E,children:[l&&r.jsx("span",{className:"vtx-input-icon vtx-input-icon--left","aria-hidden":"true",children:l}),g&&r.jsx("span",{className:"vtx-input-prefix","aria-hidden":"true",children:g}),r.jsx("input",{ref:_,id:M,className:`vtx-input ${u}`.trim(),disabled:w,required:y,value:k,maxLength:j,"aria-invalid":I,"aria-describedby":F||void 0,...N}),f&&r.jsx("span",{className:"vtx-input-suffix","aria-hidden":"true",children:f}),R&&r.jsx("button",{type:"button",className:"vtx-input-clear",onClick:()=>{null==c||c()},"aria-label":"Clear input",tabIndex:-1,children:r.jsx(h,{size:16})}),s&&!R&&r.jsx("span",{className:"vtx-input-icon vtx-input-icon--right","aria-hidden":"true",children:s})]}),e&&!t&&!a&&r.jsx("p",{id:$,className:"vtx-input-helper",children:e}),t&&r.jsx("p",{id:T,className:"vtx-input-error",role:"alert",children:t}),a&&r.jsx("p",{id:D,className:"vtx-input-success",role:"status",children:a}),O&&r.jsxs("p",{className:"vtx-input-counter","aria-live":"polite",children:[B," / ",j]})]})});Tr.displayName="Input";const Dr=tr(Tr);ar("/* 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--sm .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--lg .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--sm .vtx-chip__icon svg {\r\n width: 0.875rem;\r\n height: 0.875rem;\r\n}\r\n\r\n.vtx-chip--md .vtx-chip__icon svg {\r\n width: 1rem;\r\n height: 1rem;\r\n}\r\n\r\n.vtx-chip--lg .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--sm .vtx-chip__delete {\r\n margin-right: -0.125rem;\r\n}\r\n\r\n.vtx-chip--lg .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--sm .vtx-chip__delete svg {\r\n width: 0.875rem;\r\n height: 0.875rem;\r\n}\r\n\r\n.vtx-chip--md .vtx-chip__delete svg {\r\n width: 1rem;\r\n height: 1rem;\r\n}\r\n\r\n.vtx-chip--lg .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 Ir=i.default.forwardRef(({label:n,size:e="md",variant:t="filled",color:a="default",icon:o,avatar:i,onDelete:l,onClick:s,disabled:d=!1,className:c="","aria-label":x,"data-testid":v},m)=>{const p=["vtx-chip",`vtx-chip--${e}`,`vtx-chip--${t}`,`vtx-chip--${a}`,s&&!d&&"vtx-chip--clickable",d&&"vtx-chip--disabled",c].filter(Boolean).join(" ");return r.jsxs("div",{ref:m,className:p,onClick:r=>{!d&&s&&s(r)},onKeyDown:r=>{d||!s||"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),s(r))},role:s?"button":void 0,tabIndex:s&&!d?0:void 0,"aria-label":x||n,"aria-disabled":d,"data-testid":v,children:[i&&r.jsx("img",{src:i,alt:"",className:"vtx-chip__avatar","aria-hidden":"true"}),o&&!i&&r.jsx("span",{className:"vtx-chip__icon","aria-hidden":"true",children:o}),r.jsx("span",{className:"vtx-chip__label",children:n}),l&&r.jsx("button",{type:"button",className:"vtx-chip__delete",onClick:r=>{r.stopPropagation(),!d&&l&&l(r)},onKeyDown:r=>{"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),r.stopPropagation(),!d&&l&&l(r))},disabled:d,"aria-label":`Remove ${n}`,tabIndex:-1,children:r.jsx(h,{size:16})})]})});Ir.displayName="Chip";const Lr=tr(Ir);ar("/* 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 Rr=i.default.forwardRef(({label:e,helperText:t,error:a,success:o,size:i,fullWidth:l=!1,options:s,value:d,defaultValue:c=[],placeholder:x="Select...",className:v="",grouped:h=!1,getOptionLabel:u="label",getOptionValue:f="value",getOptionDisabled:b="disabled",getOptionGroup:w="group",onChange:y,disabled:k=!1,required:j=!1,id:N,name:_,selectionStyle:z="checkbox",searchable:C=!1,showSelectAll:S=!1,maxChipsDisplay:M,chipColor:$="primary",chipVariant:T="light",loading:D=!1},I)=>{const{theme:L}=gr(),R=Sr("multiselect"),F=N||R,A=`${F}-helper`,E=`${F}-error`,B=`${F}-success`,[O,W]=n.useState(!1),[P,H]=n.useState(""),[V,Y]=n.useState(c),q=n.useRef(null),U=n.useRef(null),G=void 0!==d?d:V,X=(r,n)=>"function"==typeof n?n(r):"object"==typeof r?r[n]:r,K=Boolean(a),Q=Boolean(o)&&!K,J=[t&&!a&&!o&&A,a&&E,o&&B].filter(Boolean).join(" ");n.useEffect(()=>{const r=r=>{q.current&&!q.current.contains(r.target)&&U.current&&!U.current.contains(r.target)&&(W(!1),H(""))};if(O)return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[O]);const Z=r=>{if(k)return;const n=G.includes(r)?G.filter(n=>n!==r):[...G,r];if(void 0===d&&Y(n),y){const r=s.filter(r=>n.includes(X(r,f)));y(n,r)}},rr=P?s.filter(r=>X(r,u).toLowerCase().includes(P.toLowerCase())):s,nr=h?rr.reduce((r,n)=>{const e=X(n,w)||"Other";return r[e]||(r[e]=[]),r[e].push(n),r},{}):{"":rr},er=s.filter(r=>G.includes(X(r,f))),tr=M?er.slice(0,M):er,ar=M?er.length-M:0,or=["vtx-multiselect-wrapper",l&&"vtx-multiselect-wrapper--full-width",v].filter(Boolean).join(" "),ir=i||(null==L?void 0:L.defaultSize)||"md",lr=["vtx-multiselect-container",`vtx-multiselect-container--${ir}`,K&&"vtx-multiselect-container--error",Q&&"vtx-multiselect-container--success",k&&"vtx-multiselect-container--disabled",O&&"vtx-multiselect-container--open"].filter(Boolean).join(" "),sr=ir;return r.jsxs("div",{className:or,ref:I,children:[e&&r.jsxs("label",{htmlFor:F,className:"vtx-multiselect-label",children:[e,j&&r.jsxs("span",{className:"vtx-multiselect-label__required","aria-label":"required",children:[" ","*"]})]}),r.jsxs("div",{ref:q,className:lr,"aria-expanded":O,"aria-haspopup":"listbox","aria-labelledby":e?`${F}-label`:void 0,"aria-describedby":J||void 0,"aria-disabled":k,children:[r.jsx("div",{className:"vtx-multiselect-input-area",onClick:()=>!k&&W(!O),role:"button",tabIndex:k?-1:0,onKeyDown:r=>{k||"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),W(!O))},children:0===er.length?r.jsx("span",{className:"vtx-multiselect-placeholder",children:x}):r.jsxs("div",{className:"vtx-multiselect-chips",children:[tr.map(n=>{const e=X(n,f),t=X(n,u);return r.jsx(Lr,{label:t,size:sr,color:$,variant:T,onDelete:r=>{r.stopPropagation(),(r=>{if(k)return;const n=G.filter(n=>n!==r);if(void 0===d&&Y(n),y){const r=s.filter(r=>n.includes(X(r,f)));y(n,r)}})(e)}},e)}),ar>0&&r.jsx(Lr,{label:`+${ar} more`,size:sr,color:"default",variant:"outlined"})]})}),r.jsx("span",{className:"vtx-multiselect-icon","aria-hidden":"true",children:D?r.jsx(m,{size:16}):r.jsx(g,{size:16})}),O&&r.jsxs("div",{ref:U,className:"vtx-multiselect-dropdown",role:"listbox",children:[C&&r.jsx("div",{className:"vtx-multiselect-search",children:r.jsx("input",{type:"text",placeholder:"Search...",value:P,onChange:r=>H(r.target.value),onClick:r=>r.stopPropagation()})}),S&&r.jsxs("div",{className:"vtx-multiselect-actions",children:[r.jsx("button",{type:"button",className:"vtx-multiselect-action-button",onClick:r=>{r.stopPropagation(),(()=>{const r=s.filter(r=>!X(r,b)).map(r=>X(r,f));void 0===d&&Y(r),y&&y(r,s.filter(r=>!X(r,b)))})()},children:"Select All"}),r.jsx("button",{type:"button",className:"vtx-multiselect-action-button",onClick:r=>{r.stopPropagation(),void 0===d&&Y([]),y&&y([],[])},children:"Clear All"})]}),r.jsx("div",{className:"vtx-multiselect-options",children:0===rr.length?r.jsx("div",{className:"vtx-multiselect-empty",children:"No options found"}):Object.entries(nr).map(([n,e])=>r.jsxs("div",{children:[h&&n&&r.jsx("div",{className:"vtx-multiselect-optgroup",children:n}),e.map(n=>{const e=X(n,f),t=X(n,u),a=X(n,b),o=G.includes(e),i=["vtx-multiselect-option",o&&"vtx-multiselect-option--selected",a&&"vtx-multiselect-option--disabled"].filter(Boolean).join(" ");return r.jsxs("div",{className:i,onClick:()=>!a&&Z(e),role:"option","aria-selected":o,"aria-disabled":a,tabIndex:a?-1:0,onKeyDown:r=>{a||"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),Z(e))},children:["checkbox"===z&&r.jsx("div",{className:"vtx-multiselect-checkbox "+(o?"vtx-multiselect-checkbox--checked":""),children:o&&r.jsx(p,{size:16})}),r.jsx("span",{className:"vtx-multiselect-option-label",children:t}),"checkmark"===z&&r.jsx("div",{className:"vtx-multiselect-checkmark",children:o&&r.jsx(p,{size:20})})]},e)})]},n))})]})]}),_&&r.jsx("select",{multiple:!0,name:_,value:G.map(String),onChange:()=>{},className:"vtx-multiselect-hidden-select",required:j,disabled:k,tabIndex:-1,"aria-hidden":"true",children:s.map(n=>{const e=X(n,f);return r.jsx("option",{value:String(e),children:X(n,u)},e)})}),t&&!a&&!o&&r.jsx("p",{id:A,className:"vtx-multiselect-helper",children:t}),a&&r.jsx("p",{id:E,className:"vtx-multiselect-error",role:"alert",children:a}),o&&r.jsx("p",{id:B,className:"vtx-multiselect-success",role:"status",children:o})]})});Rr.displayName="MultiSelect";const Fr=tr(Rr);ar("/* 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 Ar=i.default.forwardRef(({checked:e,disabled:t=!1,label:a,size:o,variant:i="primary",error:l=!1,helperText:s,onChange:d,className:c="",inputClassName:x="",id:v,...m},p)=>{const{theme:h}=gr(),u=o||h.defaultSize,g=n.useId(),f=v||g,b=s?`${f}-helper-text`:void 0,w=["vtx-radio",`vtx-radio--${u}`,`vtx-radio--${i}`,t&&"vtx-radio--disabled",l&&"vtx-radio--error",c].filter(Boolean).join(" "),y=["vtx-radio-input",x].filter(Boolean).join(" "),k=r.jsxs("div",{className:"vtx-radio-wrapper",children:[r.jsx("input",{ref:p,type:"radio",id:f,className:y,checked:e,disabled:t,onChange:d,"aria-describedby":b,...m}),r.jsx("span",{className:"vtx-radio-circle",children:r.jsx("span",{className:"vtx-radio-dot"})})]});return a?r.jsxs("div",{className:w,children:[r.jsxs("label",{htmlFor:f,className:"vtx-radio-label",children:[k,r.jsx("span",{className:"vtx-radio-label-text",children:a})]}),s&&r.jsx("span",{id:b,className:"vtx-radio-helper-text",children:s})]}):r.jsxs("div",{className:w,children:[k,s&&r.jsx("span",{id:b,className:"vtx-radio-helper-text",children:s})]})});Ar.displayName="Radio";const Er=tr(Ar);ar("/* 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 Br=i.default.forwardRef(({name:e,label:t,options:a,value:o,defaultValue:i,onChange:l,disabled:s=!1,error:d=!1,helperText:c,orientation:x="vertical",size:v,variant:m="primary",className:p="",...h},u)=>{const{theme:g}=gr(),f=v||g.defaultSize,[b,w]=n.useState(i),y=void 0!==o,k=y?o:b,j=["vtx-radio-group",`vtx-radio-group--${x}`,d&&"vtx-radio-group--error",s&&"vtx-radio-group--disabled",p].filter(Boolean).join(" ");return r.jsxs("div",{ref:u,className:j,role:"radiogroup","aria-label":"string"==typeof t?t:void 0,...h,children:[t&&r.jsx("div",{className:"vtx-radio-group-label",children:t}),r.jsx("div",{className:"vtx-radio-group-options",children:a.map(n=>{const t=k===n.value,a=s||n.disabled;return r.jsx(Er,{name:e,value:n.value,label:n.label,checked:t,disabled:a,error:d,size:f,variant:m,onChange:()=>{return r=n.value,y||w(r),void(null==l||l(r));var r}},n.value)})}),c&&r.jsx("div",{className:"vtx-radio-group-helper-text",children:c})]})});Br.displayName="RadioGroup";const Or=tr(Br);ar(".vtx-richtext-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--vtx-spacing-1);\r\n width: 100%;\r\n}\r\n\r\n.vtx-richtext-wrapper--inline {\r\n display: inline-flex;\r\n width: auto;\r\n}\r\n\r\n.vtx-richtext-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-richtext-label__required {\r\n color: var(--vtx-color-error-600);\r\n margin-left: var(--vtx-spacing-1);\r\n}\r\n\r\n.vtx-richtext-container {\r\n display: flex;\r\n flex-direction: column;\r\n background-color: white;\r\n border: 1px solid var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-radius-md);\r\n transition: all var(--vtx-transition-base);\r\n overflow: hidden;\r\n}\r\n\r\n.vtx-richtext-container--focused {\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.vtx-richtext-container--error {\r\n border-color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-richtext-container--error.vtx-richtext-container--focused {\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-richtext-container--success {\r\n border-color: var(--vtx-color-success-600);\r\n}\r\n\r\n.vtx-richtext-container--success.vtx-richtext-container--focused {\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-richtext-container--disabled {\r\n background-color: var(--vtx-color-neutral-100);\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n}\r\n\r\n/* Toolbar */\r\n.vtx-richtext-toolbar {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-1);\r\n padding: var(--vtx-spacing-2);\r\n background-color: var(--vtx-color-neutral-50);\r\n border-bottom: 1px solid var(--vtx-color-neutral-200);\r\n flex-wrap: wrap;\r\n}\r\n\r\n.vtx-richtext-toolbar-button {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-width: 32px;\r\n height: 32px;\r\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\r\n background-color: white;\r\n border: 1px solid var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-radius-sm);\r\n color: var(--vtx-color-neutral-700);\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-semibold);\r\n cursor: pointer;\r\n transition: all var(--vtx-transition-fast);\r\n user-select: none;\r\n}\r\n\r\n.vtx-richtext-toolbar-button:hover:not(:disabled) {\r\n background-color: var(--vtx-color-neutral-100);\r\n border-color: var(--vtx-color-neutral-400);\r\n}\r\n\r\n.vtx-richtext-toolbar-button:active:not(:disabled) {\r\n background-color: var(--vtx-color-neutral-200);\r\n transform: scale(0.98);\r\n}\r\n\r\n.vtx-richtext-toolbar-button:disabled {\r\n cursor: not-allowed;\r\n opacity: 0.5;\r\n}\r\n\r\n.vtx-richtext-toolbar-button:focus {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 1px;\r\n}\r\n\r\n.vtx-richtext-toolbar-clear {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-width: 32px;\r\n height: 32px;\r\n padding: var(--vtx-spacing-1);\r\n margin-left: auto;\r\n background-color: var(--vtx-color-error-100);\r\n border: 1px solid var(--vtx-color-error-300);\r\n border-radius: var(--vtx-radius-sm);\r\n color: var(--vtx-color-error-700);\r\n cursor: pointer;\r\n transition: all var(--vtx-transition-fast);\r\n}\r\n\r\n.vtx-richtext-toolbar-clear:hover:not(:disabled) {\r\n background-color: var(--vtx-color-error-200);\r\n border-color: var(--vtx-color-error-400);\r\n}\r\n\r\n.vtx-richtext-toolbar-clear:active:not(:disabled) {\r\n transform: scale(0.98);\r\n}\r\n\r\n/* Editor */\r\n.vtx-richtext-editor {\r\n flex: 1;\r\n width: 100%;\r\n min-width: 0;\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-base);\r\n color: var(--vtx-color-neutral-900);\r\n line-height: var(--vtx-line-height-relaxed);\r\n padding: var(--vtx-spacing-3);\r\n outline: none;\r\n overflow-y: auto;\r\n word-wrap: break-word;\r\n}\r\n\r\n.vtx-richtext-container--sm .vtx-richtext-editor {\r\n padding: var(--vtx-spacing-2);\r\n font-size: var(--vtx-font-size-sm);\r\n}\r\n\r\n.vtx-richtext-container--lg .vtx-richtext-editor {\r\n padding: var(--vtx-spacing-4);\r\n font-size: var(--vtx-font-size-lg);\r\n}\r\n\r\n.vtx-richtext-editor[contenteditable='true']:empty:before {\r\n content: attr(data-placeholder);\r\n color: var(--vtx-color-neutral-400);\r\n pointer-events: none;\r\n}\r\n\r\n.vtx-richtext-editor[contenteditable='false'] {\r\n cursor: not-allowed;\r\n color: var(--vtx-color-neutral-500);\r\n}\r\n\r\n/* Editor content styling */\r\n.vtx-richtext-editor h1 {\r\n font-size: var(--vtx-font-size-3xl);\r\n font-weight: var(--vtx-font-weight-bold);\r\n margin: var(--vtx-spacing-2) 0;\r\n line-height: var(--vtx-line-height-tight);\r\n}\r\n\r\n.vtx-richtext-editor h2 {\r\n font-size: var(--vtx-font-size-2xl);\r\n font-weight: var(--vtx-font-weight-bold);\r\n margin: var(--vtx-spacing-2) 0;\r\n line-height: var(--vtx-line-height-tight);\r\n}\r\n\r\n.vtx-richtext-editor h3 {\r\n font-size: var(--vtx-font-size-xl);\r\n font-weight: var(--vtx-font-weight-semibold);\r\n margin: var(--vtx-spacing-2) 0;\r\n line-height: var(--vtx-line-height-tight);\r\n}\r\n\r\n.vtx-richtext-editor p {\r\n margin: var(--vtx-spacing-2) 0;\r\n}\r\n\r\n.vtx-richtext-editor ul,\r\n.vtx-richtext-editor ol {\r\n margin: var(--vtx-spacing-2) 0;\r\n padding-left: var(--vtx-spacing-6);\r\n}\r\n\r\n.vtx-richtext-editor li {\r\n margin: var(--vtx-spacing-1) 0;\r\n}\r\n\r\n.vtx-richtext-editor a {\r\n color: var(--vtx-color-primary-600);\r\n text-decoration: underline;\r\n}\r\n\r\n.vtx-richtext-editor a:hover {\r\n color: var(--vtx-color-primary-700);\r\n}\r\n\r\n.vtx-richtext-editor pre {\r\n background-color: var(--vtx-color-neutral-100);\r\n border: 1px solid var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-radius-sm);\r\n padding: var(--vtx-spacing-2);\r\n margin: var(--vtx-spacing-2) 0;\r\n font-family: var(--vtx-font-family-mono);\r\n font-size: var(--vtx-font-size-sm);\r\n overflow-x: auto;\r\n}\r\n\r\n.vtx-richtext-editor b,\r\n.vtx-richtext-editor strong {\r\n font-weight: var(--vtx-font-weight-bold);\r\n}\r\n\r\n.vtx-richtext-editor i,\r\n.vtx-richtext-editor em {\r\n font-style: italic;\r\n}\r\n\r\n.vtx-richtext-editor u {\r\n text-decoration: underline;\r\n}\r\n\r\n.vtx-richtext-editor s,\r\n.vtx-richtext-editor strike {\r\n text-decoration: line-through;\r\n}\r\n\r\n/* Footer */\r\n.vtx-richtext-footer {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n gap: var(--vtx-spacing-2);\r\n min-height: 20px;\r\n}\r\n\r\n.vtx-richtext-footer-left {\r\n flex: 1;\r\n}\r\n\r\n/* Helper, error, and success text */\r\n.vtx-richtext-helper,\r\n.vtx-richtext-error,\r\n.vtx-richtext-success {\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 margin: 0;\r\n}\r\n\r\n.vtx-richtext-helper {\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n.vtx-richtext-error {\r\n color: var(--vtx-color-error-600);\r\n font-weight: var(--vtx-font-weight-medium);\r\n}\r\n\r\n.vtx-richtext-success {\r\n color: var(--vtx-color-success-600);\r\n font-weight: var(--vtx-font-weight-medium);\r\n}\r\n\r\n/* Character counter */\r\n.vtx-richtext-counter {\r\n font-family: var(--vtx-font-family-mono);\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-500);\r\n margin: 0;\r\n white-space: nowrap;\r\n font-weight: var(--vtx-font-weight-medium);\r\n transition: color var(--vtx-transition-fast);\r\n}\r\n\r\n.vtx-richtext-counter--near-limit {\r\n color: var(--vtx-color-warning-600);\r\n}\r\n\r\n.vtx-richtext-counter--at-limit {\r\n color: var(--vtx-color-error-600);\r\n}\r\n\r\n/* Responsive adjustments */\r\n@media (max-width: 640px) {\r\n .vtx-richtext-footer {\r\n flex-direction: column;\r\n align-items: stretch;\r\n }\r\n\r\n .vtx-richtext-counter {\r\n align-self: flex-end;\r\n }\r\n\r\n .vtx-richtext-toolbar {\r\n gap: var(--vtx-spacing-0_5);\r\n }\r\n\r\n .vtx-richtext-toolbar-button {\r\n min-width: 28px;\r\n height: 28px;\r\n padding: var(--vtx-spacing-0_5);\r\n font-size: var(--vtx-font-size-xs);\r\n }\r\n}\r\n");const Wr=["bold","italic","underline","strikethrough","h1","h2","h3","orderedList","unorderedList","link","alignLeft","alignCenter","alignRight","code","clearFormat","undo","redo"],Pr=i.default.forwardRef(({label:e,helperText:t,error:a,success:o,size:i,fullWidth:l=!0,clearable:s=!1,onClear:d,showCount:c=!1,maxLength:x,wrapperClassName:v="",labelClassName:m="",editorClassName:p="",toolbarClassName:u="",required:g=!1,disabled:f=!1,placeholder:b="Start typing...",value:w,defaultValue:y,onChange:k,minHeight:j=200,id:N,hideToolbar:_=!1,toolbarButtons:z=Wr},C)=>{const{theme:S}=gr(),M=i||S.defaultSize,$=Sr("richtext"),T=N||$,D=`${T}-helper`,I=`${T}-error`,L=`${T}-success`,R=n.useRef(null),[F,A]=n.useState(!1),[E,B]=n.useState(0),O=Boolean(a),W=Boolean(o)&&!O,P=s&&E>0&&!f,H=[t&&!a&&!o&&D,a&&I,o&&L].filter(Boolean).join(" "),V=["vtx-richtext-wrapper",!l&&"vtx-richtext-wrapper--inline",v].filter(Boolean).join(" "),Y=["vtx-richtext-container",`vtx-richtext-container--${M}`,O&&"vtx-richtext-container--error",W&&"vtx-richtext-container--success",f&&"vtx-richtext-container--disabled",F&&"vtx-richtext-container--focused"].filter(Boolean).join(" "),q=["vtx-richtext-editor",p].filter(Boolean).join(" "),U=["vtx-richtext-toolbar",u].filter(Boolean).join(" ");n.useEffect(()=>{if(R.current&&!R.current.innerHTML){const r=w||y||"";R.current.innerHTML=r,G()}},[]),n.useEffect(()=>{if(void 0!==w&&R.current){R.current.innerHTML!==w&&(R.current.innerHTML=w,G())}},[w]);const G=()=>{if(R.current){const r=R.current.innerText||"";B(r.length)}},X=()=>{if(!R.current)return;const r=R.current.innerHTML,n=R.current.innerText||"";x&&n.length>x||(G(),null==k||k(r,n))},K=(r,n=void 0)=>{var e;document.execCommand(r,!1,n),null===(e=R.current)||void 0===e||e.focus()},Q=(c||x)&&void 0!==x,J=x&&E>=.9*x,Z=x&&E>=x,rr=r=>({bold:"B",italic:"I",underline:"U",strikethrough:"S",h1:"H1",h2:"H2",h3:"H3",orderedList:"1.",unorderedList:"•",link:"🔗",alignLeft:"⬅",alignCenter:"⬌",alignRight:"➡",code:"<>",clearFormat:"✕",undo:"↶",redo:"↷"}[r]),nr=r=>({bold:"Bold",italic:"Italic",underline:"Underline",strikethrough:"Strikethrough",h1:"Heading 1",h2:"Heading 2",h3:"Heading 3",orderedList:"Ordered List",unorderedList:"Unordered List",link:"Insert Link",alignLeft:"Align Left",alignCenter:"Align Center",alignRight:"Align Right",code:"Code Block",clearFormat:"Clear Formatting",undo:"Undo",redo:"Redo"}[r]);return r.jsxs("div",{className:V,children:[e&&r.jsxs("label",{htmlFor:T,className:`vtx-richtext-label ${m}`.trim(),children:[e,g&&r.jsxs("span",{className:"vtx-richtext-label__required","aria-label":"required",children:[" ","*"]})]}),r.jsxs("div",{className:Y,children:[!_&&r.jsxs("div",{className:U,role:"toolbar","aria-label":"Text formatting toolbar",children:[z.map(n=>r.jsx("button",{type:"button",className:"vtx-richtext-toolbar-button",onClick:()=>(r=>{if(!f){switch(r){case"bold":K("bold");break;case"italic":K("italic");break;case"underline":K("underline");break;case"strikethrough":K("strikeThrough");break;case"h1":K("formatBlock","<h1>");break;case"h2":K("formatBlock","<h2>");break;case"h3":K("formatBlock","<h3>");break;case"orderedList":K("insertOrderedList");break;case"unorderedList":K("insertUnorderedList");break;case"link":const r=prompt("Enter URL:");r&&K("createLink",r);break;case"alignLeft":K("justifyLeft");break;case"alignCenter":K("justifyCenter");break;case"alignRight":K("justifyRight");break;case"code":K("formatBlock","<pre>");break;case"clearFormat":K("removeFormat");break;case"undo":K("undo");break;case"redo":K("redo")}X()}})(n),disabled:f,title:nr(n),"aria-label":nr(n),tabIndex:-1,children:rr(n)},n)),P&&r.jsx("button",{type:"button",className:"vtx-richtext-toolbar-clear",onClick:()=>{var r;R.current&&(R.current.innerHTML="",G(),null==k||k("","")),null==d||d(),null===(r=R.current)||void 0===r||r.focus()},disabled:f,title:"Clear all content","aria-label":"Clear all content",tabIndex:-1,children:r.jsx(h,{size:14})})]}),r.jsx("div",{ref:r=>{R.current=r,"function"==typeof C?C(r):C&&(C.current=r)},id:T,className:q,contentEditable:!f,onInput:X,onFocus:()=>A(!0),onBlur:()=>A(!1),role:"textbox","aria-multiline":"true","aria-invalid":O,"aria-describedby":H||void 0,"aria-required":g,"data-placeholder":b,style:{minHeight:`${j}px`},suppressContentEditableWarning:!0})]}),r.jsxs("div",{className:"vtx-richtext-footer",children:[r.jsxs("div",{className:"vtx-richtext-footer-left",children:[t&&!a&&!o&&r.jsx("p",{id:D,className:"vtx-richtext-helper",children:t}),a&&r.jsx("p",{id:I,className:"vtx-richtext-error",role:"alert",children:a}),o&&r.jsx("p",{id:L,className:"vtx-richtext-success",role:"status",children:o})]}),Q&&r.jsxs("p",{className:("vtx-richtext-counter "+(Z?"vtx-richtext-counter--at-limit":J?"vtx-richtext-counter--near-limit":"")).trim(),"aria-live":"polite",children:[E," / ",x]})]})]})});Pr.displayName="RichTextEditor";ar(".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 Hr=i.default.forwardRef(({label:n,helperText:e,error:t,success:a,size:o,fullWidth:i=!1,options:l,placeholder:s,className:d="",wrapperClassName:c="",id:x,disabled:v=!1,required:m=!1,grouped:p=!1,getOptionLabel:h="label",getOptionValue:u="value",getOptionDisabled:g="disabled",getOptionGroup:f="group",onSelectChange:b,onChange:w,loading:y=!1,...k},j)=>{const{theme:N}=gr(),_=o||N.defaultSize,z=Sr("select"),C=x||z,S=`${C}-helper`,M=`${C}-error`,$=`${C}-success`,T=(r,n)=>"function"==typeof n?n(r):"object"==typeof r?r[n]:r,D=Boolean(t),I=Boolean(a)&&!D,L=[e&&!t&&!a&&S,t&&M,a&&$].filter(Boolean).join(" "),R=["vtx-select-wrapper",i&&"vtx-select-wrapper--full-width",c].filter(Boolean).join(" "),F=["vtx-select-container",`vtx-select-container--${_}`,D&&"vtx-select-container--error",I&&"vtx-select-container--success",v&&"vtx-select-container--disabled",d].filter(Boolean).join(" ");return r.jsxs("div",{className:R,children:[n&&r.jsxs("label",{htmlFor:C,className:"vtx-select-label",children:[n,m&&r.jsxs("span",{className:"vtx-select-label__required","aria-label":"required",children:[" ","*"]})]}),r.jsxs("div",{className:F,children:[r.jsxs("select",{ref:j,id:C,className:"vtx-select",disabled:v,required:m,"aria-invalid":D,"aria-describedby":L||void 0,onChange:r=>{if(null==w||w(r),b){const n=l.find(n=>String(T(n,u))===r.target.value);b(r.target.value,n)}},...k,children:[s&&r.jsx("option",{value:"",disabled:!0,children:s}),(()=>{if(!p)return l.map((n,e)=>{const t=T(n,u),a=T(n,h),o=T(n,g);return r.jsx("option",{value:t,disabled:o,children:a},t||e)});const n=l.reduce((r,n)=>{const e=T(n,f)||"Other";return r[e]||(r[e]=[]),r[e].push(n),r},{});return Object.entries(n).map(([n,e])=>r.jsx("optgroup",{label:n,children:e.map((n,e)=>{const t=T(n,u),a=T(n,h),o=T(n,g);return r.jsx("option",{value:t,disabled:o,children:a},t||e)})},n))})()]}),r.jsx("span",{className:"vtx-select-icon","aria-hidden":"true",children:y?r.jsxs("svg",{className:"vtx-select-icon-spinner",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[r.jsx("circle",{className:"vtx-select-icon-spinner-track",cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"2"}),r.jsx("path",{className:"vtx-select-icon-spinner-path",fill:"currentColor",d:"M8 2C4.686 2 2 4.686 2 8h2c0-2.21 1.79-4 4-4V2z"})]}):r.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:r.jsx("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]}),e&&!t&&!a&&r.jsx("p",{id:S,className:"vtx-select-helper",children:e}),t&&r.jsx("p",{id:M,className:"vtx-select-error",role:"alert",children:t}),a&&r.jsx("p",{id:$,className:"vtx-select-success",role:"status",children:a})]})});Hr.displayName="Select";const Vr=tr(Hr);ar(".vtx-textarea-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--vtx-spacing-1);\r\n width: 100%;\r\n}\r\n\r\n.vtx-textarea-wrapper--inline {\r\n display: inline-flex;\r\n width: auto;\r\n}\r\n\r\n.vtx-textarea-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-textarea-label__required {\r\n color: var(--vtx-color-error-600);\r\n margin-left: var(--vtx-spacing-1);\r\n}\r\n\r\n.vtx-textarea-container {\r\n position: relative;\r\n display: flex;\r\n background-color: white;\r\n border: 1px solid var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-radius-md);\r\n transition: all var(--vtx-transition-base);\r\n}\r\n\r\n.vtx-textarea-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.vtx-textarea-container--error {\r\n border-color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-textarea-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-textarea-container--success {\r\n border-color: var(--vtx-color-success-600);\r\n}\r\n\r\n.vtx-textarea-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-textarea-container--disabled {\r\n background-color: var(--vtx-color-neutral-100);\r\n cursor: not-allowed;\r\n}\r\n\r\n/* Sizes */\r\n.vtx-textarea-container--sm .vtx-textarea {\r\n padding: var(--vtx-spacing-1_5) var(--vtx-spacing-2);\r\n font-size: var(--vtx-font-size-sm);\r\n line-height: var(--vtx-line-height-normal);\r\n}\r\n\r\n.vtx-textarea-container--md .vtx-textarea {\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\r\n font-size: var(--vtx-font-size-base);\r\n line-height: var(--vtx-line-height-normal);\r\n}\r\n\r\n.vtx-textarea-container--lg .vtx-textarea {\r\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\r\n font-size: var(--vtx-font-size-lg);\r\n line-height: var(--vtx-line-height-relaxed);\r\n}\r\n\r\n.vtx-textarea {\r\n flex: 1;\r\n width: 100%;\r\n min-width: 0;\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-base);\r\n color: var(--vtx-color-neutral-900);\r\n background: transparent;\r\n border: none;\r\n outline: none;\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\r\n resize: vertical;\r\n line-height: var(--vtx-line-height-normal);\r\n}\r\n\r\n.vtx-textarea--auto-resize {\r\n resize: none;\r\n overflow-y: hidden;\r\n}\r\n\r\n.vtx-textarea::placeholder {\r\n color: var(--vtx-color-neutral-400);\r\n}\r\n\r\n.vtx-textarea:disabled {\r\n cursor: not-allowed;\r\n color: var(--vtx-color-neutral-500);\r\n resize: none;\r\n}\r\n\r\n.vtx-textarea-container--with-clear .vtx-textarea {\r\n padding-right: var(--vtx-spacing-10);\r\n}\r\n\r\n/* Clear button */\r\n.vtx-textarea-clear {\r\n position: absolute;\r\n top: var(--vtx-spacing-2);\r\n right: var(--vtx-spacing-2);\r\n display: inline-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 background-color: var(--vtx-color-neutral-200);\r\n border: none;\r\n border-radius: var(--vtx-radius-full);\r\n color: var(--vtx-color-neutral-600);\r\n cursor: pointer;\r\n transition: all var(--vtx-transition-fast);\r\n opacity: 0.8;\r\n}\r\n\r\n.vtx-textarea-clear:hover {\r\n background-color: var(--vtx-color-neutral-300);\r\n opacity: 1;\r\n}\r\n\r\n.vtx-textarea-clear:focus {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 1px;\r\n}\r\n\r\n.vtx-textarea-clear:active {\r\n transform: scale(0.95);\r\n}\r\n\r\n/* Footer with helper text and counter */\r\n.vtx-textarea-footer {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n gap: var(--vtx-spacing-2);\r\n min-height: 20px;\r\n}\r\n\r\n.vtx-textarea-footer-left {\r\n flex: 1;\r\n}\r\n\r\n/* Helper, error, and success text */\r\n.vtx-textarea-helper,\r\n.vtx-textarea-error,\r\n.vtx-textarea-success {\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 margin: 0;\r\n}\r\n\r\n.vtx-textarea-helper {\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n.vtx-textarea-error {\r\n color: var(--vtx-color-error-600);\r\n font-weight: var(--vtx-font-weight-medium);\r\n}\r\n\r\n.vtx-textarea-success {\r\n color: var(--vtx-color-success-600);\r\n font-weight: var(--vtx-font-weight-medium);\r\n}\r\n\r\n/* Character counter */\r\n.vtx-textarea-counter {\r\n font-family: var(--vtx-font-family-mono);\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-500);\r\n margin: 0;\r\n white-space: nowrap;\r\n font-weight: var(--vtx-font-weight-medium);\r\n transition: color var(--vtx-transition-fast);\r\n}\r\n\r\n.vtx-textarea-counter--near-limit {\r\n color: var(--vtx-color-warning-600);\r\n}\r\n\r\n.vtx-textarea-counter--at-limit {\r\n color: var(--vtx-color-error-600);\r\n}\r\n\r\n/* Responsive adjustments */\r\n@media (max-width: 640px) {\r\n .vtx-textarea-footer {\r\n flex-direction: column;\r\n align-items: stretch;\r\n }\r\n \r\n .vtx-textarea-counter {\r\n align-self: flex-end;\r\n }\r\n}\r\n");const Yr=i.default.forwardRef(({label:n,helperText:e,error:t,success:a,size:o,fullWidth:l=!0,clearable:s=!1,onClear:d,showCount:c=!1,className:x="",wrapperClassName:v="",labelClassName:m="",textareaClassName:p="",id:u,disabled:g=!1,required:f=!1,value:b,maxLength:w,autoResize:y=!1,minRows:k=3,maxRows:j,rows:N,onChange:_,...z},C)=>{const{theme:S}=gr(),M=o||S.defaultSize,$=Sr("textarea"),T=u||$,D=`${T}-helper`,I=`${T}-error`,L=`${T}-success`,R=i.default.useRef(null),F=Boolean(t),A=Boolean(a)&&!F,E=s&&b&&String(b).length>0&&!g,B=[e&&!t&&!a&&D,t&&I,a&&L].filter(Boolean).join(" "),O=["vtx-textarea-wrapper",!l&&"vtx-textarea-wrapper--inline",v].filter(Boolean).join(" "),W=["vtx-textarea-container",`vtx-textarea-container--${M}`,F&&"vtx-textarea-container--error",A&&"vtx-textarea-container--success",g&&"vtx-textarea-container--disabled",E&&"vtx-textarea-container--with-clear",x].filter(Boolean).join(" "),P=["vtx-textarea",y&&"vtx-textarea--auto-resize",p].filter(Boolean).join(" "),H=b?String(b).length:0,V=(c||w)&&void 0!==w;i.default.useEffect(()=>{if(y&&R.current){const r=R.current;r.style.height="auto";let n=r.scrollHeight;const e=parseInt(getComputedStyle(r).lineHeight);if(k){const r=e*k;n=Math.max(n,r)}if(j){const r=e*j;n=Math.min(n,r)}r.style.height=`${n}px`}},[b,y,k,j]);const Y=y?k:N||k,q=w&&H>=.9*w,U=w&&H>=w;return r.jsxs("div",{className:O,children:[n&&r.jsxs("label",{htmlFor:T,className:`vtx-textarea-label ${m}`.trim(),children:[n,f&&r.jsxs("span",{className:"vtx-textarea-label__required","aria-label":"required",children:[" ","*"]})]}),r.jsxs("div",{className:W,children:[r.jsx("textarea",{ref:r=>{R.current=r,"function"==typeof C?C(r):C&&(C.current=r)},id:T,className:P,disabled:g,required:f,value:b,maxLength:w,rows:Y,"aria-invalid":F,"aria-describedby":B||void 0,onChange:r=>{null==_||_(r)},...z}),E&&r.jsx("button",{type:"button",className:"vtx-textarea-clear",onClick:()=>{null==d||d(),R.current&&R.current.focus()},"aria-label":"Clear textarea",tabIndex:-1,children:r.jsx(h,{size:16})})]}),r.jsxs("div",{className:"vtx-textarea-footer",children:[r.jsxs("div",{className:"vtx-textarea-footer-left",children:[e&&!t&&!a&&r.jsx("p",{id:D,className:"vtx-textarea-helper",children:e}),t&&r.jsx("p",{id:I,className:"vtx-textarea-error",role:"alert",children:t}),a&&r.jsx("p",{id:L,className:"vtx-textarea-success",role:"status",children:a})]}),V&&r.jsxs("p",{className:("vtx-textarea-counter "+(U?"vtx-textarea-counter--at-limit":q?"vtx-textarea-counter--near-limit":"")).trim(),"aria-live":"polite",children:[H," / ",w]})]})]})});Yr.displayName="Textarea";const qr=tr(Yr),Ur=["Su","Mo","Tu","We","Th","Fr","Sa"],Gr=["January","February","March","April","May","June","July","August","September","October","November","December"],Xr=({value:n,onChange:e,minDate:t,maxDate:a,disabledDates:o=[],currentMonth:l,onMonthChange:s,isDateDisabled:d,rangeValue:c,onRangeChange:x,isRangeMode:v=!1})=>{const m=new Date,[p,h]=i.default.useState(l||n||m);i.default.useEffect(()=>{l&&h(l)},[l]);const u=r=>{const n=new Date(p.getFullYear(),p.getMonth()+r,1);h(n),null==s||s(n)},g=r=>!!(t&&r<t)||(!!(a&&r>a)||!!o.some(n=>f(n,r))),f=(r,n)=>r.getFullYear()===n.getFullYear()&&r.getMonth()===n.getMonth()&&r.getDate()===n.getDate(),b=(()=>{const r=p.getFullYear(),n=p.getMonth(),e=new Date(r,n,1),t=new Date(e);t.setDate(t.getDate()-e.getDay());const a=[],o=new Date(t);o.setDate(o.getDate()+41);const i=new Date(t);for(;i<=o;)a.push(new Date(i)),i.setDate(i.getDate()+1);return a})();return r.jsxs("div",{className:"vtx-datepicker__calendar",children:[r.jsxs("div",{className:"vtx-datepicker__header",children:[r.jsx("button",{className:"vtx-datepicker__nav-button",onClick:()=>u(-1),type:"button","aria-label":"Previous month",children:r.jsx(j,{size:16})}),r.jsxs("div",{className:"vtx-datepicker__month-year",children:[Gr[p.getMonth()]," ",p.getFullYear()]}),r.jsx("button",{className:"vtx-datepicker__nav-button",onClick:()=>u(1),type:"button","aria-label":"Next month",children:r.jsx(N,{size:16})})]}),r.jsx("div",{className:"vtx-datepicker__weekdays",children:Ur.map(n=>r.jsx("div",{className:"vtx-datepicker__weekday",children:n},n))}),r.jsx("div",{className:"vtx-datepicker__days",children:b.map((t,a)=>{const o=!!n&&f(t,n),i=f(t,m),l=!(r=>r.getMonth()===p.getMonth()&&r.getFullYear()===p.getFullYear())(t),s=g(t)||(null==d?void 0:d(t))||!1,h=(r=>{if(!v||!c)return!1;const[n,e]=c;return!(!n||!e)&&r>=n&&r<=e})(t),u=(r=>{if(!v||!c)return!1;const[n]=c;return!!n&&f(r,n)})(t),b=(r=>{if(!v||!c)return!1;const[,n]=c;return!!n&&f(r,n)})(t);return r.jsx("button",{className:["vtx-datepicker__day",o&&"vtx-datepicker__day--selected",i&&"vtx-datepicker__day--today",l&&"vtx-datepicker__day--other-month",s&&"vtx-datepicker__day--disabled",h&&"vtx-datepicker__day--in-range",u&&"vtx-datepicker__day--range-start",b&&"vtx-datepicker__day--range-end"].filter(Boolean).join(" "),onClick:()=>(r=>{if(!(null==d?void 0:d(r))&&!g(r))if(v&&x){const[n,e]=c||[null,null];!n||n&&e?x([r,null]):n&&!e&&x(r>=n?[n,r]:[r,n])}else null==e||e(r)})(t),disabled:s,type:"button","aria-label":t.toLocaleDateString(),children:t.getDate()},a)})})]})};ar(".vtx-datepicker {\r\n position: relative;\r\n}\r\n\r\n.vtx-datepicker__input {\r\n cursor: pointer;\r\n}\r\n\r\n.vtx-datepicker__input:read-only {\r\n cursor: pointer;\r\n}\r\n\r\n.vtx-datepicker__input .vtx-icon-calendar {\r\n color: var(--vtx-color-neutral-500);\r\n transition: color var(--vtx-transition-base);\r\n}\r\n\r\n.vtx-datepicker__input:hover .vtx-icon-calendar,\r\n.vtx-datepicker__input:focus-within .vtx-icon-calendar {\r\n color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-datepicker__input .vtx-icon-close {\r\n color: var(--vtx-color-neutral-400);\r\n transition: color var(--vtx-transition-base);\r\n}\r\n\r\n.vtx-datepicker__input .vtx-icon-close:hover {\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n.vtx-datepicker__dropdown {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n z-index: 1000;\r\n margin-top: var(--vtx-spacing-1);\r\n background: white;\r\n border: 1px solid var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-radius-lg);\r\n box-shadow: var(--vtx-shadow-lg);\r\n min-width: 320px;\r\n animation: vtx-datepicker-dropdown-enter 150ms ease-out;\r\n}\r\n\r\n@keyframes vtx-datepicker-dropdown-enter {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-4px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n.vtx-datepicker__calendar {\r\n padding: var(--vtx-spacing-3);\r\n}\r\n\r\n.vtx-datepicker__header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n margin-bottom: var(--vtx-spacing-3);\r\n}\r\n\r\n.vtx-datepicker__nav-button {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 32px;\r\n height: 32px;\r\n border: none;\r\n background: none;\r\n border-radius: var(--vtx-radius-md);\r\n cursor: pointer;\r\n color: var(--vtx-color-neutral-600);\r\n transition: all var(--vtx-transition-base);\r\n}\r\n\r\n.vtx-datepicker__nav-button:hover {\r\n background-color: var(--vtx-color-neutral-100);\r\n color: var(--vtx-color-neutral-900);\r\n}\r\n\r\n.vtx-datepicker__nav-button:focus {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 1px;\r\n}\r\n\r\n.vtx-datepicker__month-year {\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-base);\r\n font-weight: var(--vtx-font-weight-semibold);\r\n color: var(--vtx-color-neutral-900);\r\n}\r\n\r\n.vtx-datepicker__weekdays {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n gap: 1px;\r\n margin-bottom: var(--vtx-spacing-2);\r\n}\r\n\r\n.vtx-datepicker__weekday {\r\n padding: var(--vtx-spacing-2);\r\n text-align: center;\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-xs);\r\n font-weight: var(--vtx-font-weight-medium);\r\n color: var(--vtx-color-neutral-500);\r\n text-transform: uppercase;\r\n}\r\n\r\n.vtx-datepicker__days {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n gap: 1px;\r\n}\r\n\r\n.vtx-datepicker__day {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 36px;\r\n height: 36px;\r\n border: none;\r\n background: none;\r\n border-radius: var(--vtx-radius-md);\r\n cursor: pointer;\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-700);\r\n transition: all var(--vtx-transition-base);\r\n position: relative;\r\n}\r\n\r\n.vtx-datepicker__day:hover:not(:disabled) {\r\n background-color: var(--vtx-color-primary-50);\r\n color: var(--vtx-color-primary-700);\r\n}\r\n\r\n.vtx-datepicker__day:focus {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 1px;\r\n}\r\n\r\n.vtx-datepicker__day--selected {\r\n background-color: var(--vtx-color-primary-600);\r\n color: white;\r\n}\r\n\r\n.vtx-datepicker__day--selected:hover {\r\n background-color: var(--vtx-color-primary-700);\r\n color: white;\r\n}\r\n\r\n.vtx-datepicker__day--today {\r\n font-weight: var(--vtx-font-weight-semibold);\r\n}\r\n\r\n.vtx-datepicker__day--today:not(.vtx-datepicker__day--selected)::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 2px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 4px;\r\n height: 4px;\r\n border-radius: 50%;\r\n background-color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-datepicker__day--other-month {\r\n color: var(--vtx-color-neutral-300);\r\n}\r\n\r\n.vtx-datepicker__day--disabled {\r\n color: var(--vtx-color-neutral-300);\r\n cursor: not-allowed;\r\n}\r\n\r\n.vtx-datepicker__day--in-range {\r\n background-color: var(--vtx-color-primary-100);\r\n color: var(--vtx-color-primary-700);\r\n}\r\n\r\n.vtx-datepicker__day--range-start,\r\n.vtx-datepicker__day--range-end {\r\n background-color: var(--vtx-color-primary-600);\r\n color: white;\r\n}\r\n\r\n.vtx-datepicker__day--range-start:hover,\r\n.vtx-datepicker__day--range-end:hover {\r\n background-color: var(--vtx-color-primary-700);\r\n}\r\n\r\n.vtx-datepicker__footer {\r\n border-top: 1px solid var(--vtx-color-neutral-200);\r\n padding: var(--vtx-spacing-3);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n\r\n.vtx-datepicker__actions {\r\n display: flex;\r\n gap: var(--vtx-spacing-2);\r\n}\r\n\r\n.vtx-datepicker__today-button {\r\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\r\n font-size: var(--vtx-font-size-sm);\r\n color: var(--vtx-color-primary-600);\r\n border: none;\r\n background: none;\r\n border-radius: var(--vtx-radius-sm);\r\n cursor: pointer;\r\n transition: all var(--vtx-transition-base);\r\n}\r\n\r\n.vtx-datepicker__today-button:hover {\r\n background-color: var(--vtx-color-primary-50);\r\n color: var(--vtx-color-primary-700);\r\n}\r\n\r\n.vtx-datepicker__range-input {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-2);\r\n}\r\n\r\n.vtx-datepicker__range-separator {\r\n color: var(--vtx-color-neutral-400);\r\n font-size: var(--vtx-font-size-sm);\r\n}\r\n\r\n.vtx-datepicker__preset-button {\r\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\r\n margin-bottom: var(--vtx-spacing-1);\r\n width: 100%;\r\n text-align: left;\r\n font-size: var(--vtx-font-size-sm);\r\n color: var(--vtx-color-neutral-700);\r\n border: none;\r\n background: none;\r\n border-radius: var(--vtx-radius-sm);\r\n cursor: pointer;\r\n transition: all var(--vtx-transition-base);\r\n}\r\n\r\n.vtx-datepicker__preset-button:hover {\r\n background-color: var(--vtx-color-neutral-100);\r\n}\r\n\r\n.vtx-datepicker__preset-button--active {\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-datepicker__presets {\r\n border-right: 1px solid var(--vtx-color-neutral-200);\r\n padding: var(--vtx-spacing-3);\r\n min-width: 140px;\r\n}\r\n\r\n.vtx-datepicker__content {\r\n display: flex;\r\n}\r\n\r\n.vtx-datepicker__calendar-container {\r\n flex: 1;\r\n}");const Kr=(r,n="MM/DD/YYYY")=>{if(!r)return"";const e=(r.getMonth()+1).toString().padStart(2,"0"),t=r.getDate().toString().padStart(2,"0"),a=r.getFullYear().toString();return n.replace("MM",e).replace("DD",t).replace("YYYY",a).replace("M",(r.getMonth()+1).toString()).replace("D",r.getDate().toString()).replace("YY",a.slice(-2))},Qr=r=>{if(!r)return null;try{const n=r.split("/");if(3===n.length){const r=parseInt(n[0],10)-1,e=parseInt(n[1],10),t=parseInt(n[2],10),a=new Date(t,r,e);if(a.getMonth()===r&&a.getDate()===e&&a.getFullYear()===t)return a}return null}catch{return null}},Jr=i.default.forwardRef(({value:e=null,onChange:t,label:a,placeholder:o="Select date",helperText:i,error:l,success:s,size:d,fullWidth:c=!1,disabled:x=!1,required:v=!1,minDate:m,maxDate:p,disabledDates:h,isDateDisabled:g,format:f="MM/DD/YYYY",showToday:b=!0,className:w="",inputClassName:y="",dropdownClassName:k="",clearable:j=!1,...N},_)=>{const[z,C]=n.useState(!1),[S,M]=n.useState(()=>Kr(e,f)),[$,T]=n.useState(()=>e||new Date),D=n.useRef(null),I=n.useRef(null);n.useEffect(()=>{M(Kr(e,f)),e&&T(e)},[e,f]),n.useEffect(()=>{const r=r=>{D.current&&!D.current.contains(r.target)&&C(!1)},n=r=>{"Escape"===r.key&&C(!1)};return z&&(document.addEventListener("mousedown",r),document.addEventListener("keydown",n)),()=>{document.removeEventListener("mousedown",r),document.removeEventListener("keydown",n)}},[z]);const L=r=>{null==t||t(r),M(Kr(r,f)),C(!1)};return r.jsxs("div",{ref:D,className:`vtx-datepicker ${w}`.trim(),children:[r.jsx(Dr,{ref:_,label:a,value:S,onChange:r=>{const n=r.target.value;M(n);const e=Qr(n);e&&(null==t||t(e),T(e))},onBlur:()=>{const r=Qr(S);r?M(Kr(r,f)):S&&!r&&M(Kr(e,f))},onClick:()=>{x||C(!z)},placeholder:o,helperText:i,error:l,success:s,size:d,fullWidth:c,disabled:x,required:v,readOnly:!1,rightIcon:r.jsx(u,{size:16}),className:`vtx-datepicker__input ${y}`.trim(),clearable:j,onClear:()=>{null==t||t(null),M(""),C(!1)},...N}),z&&r.jsxs("div",{ref:I,className:`vtx-datepicker__dropdown ${k}`.trim(),children:[r.jsx(Xr,{value:e,onChange:L,currentMonth:$,onMonthChange:T,minDate:m,maxDate:p,disabledDates:h,isDateDisabled:g}),b&&r.jsx("div",{className:"vtx-datepicker__footer",children:r.jsx("button",{type:"button",className:"vtx-datepicker__today-button",onClick:()=>{const r=new Date;L(r)},children:"Today"})})]})]})});Jr.displayName="DatePicker";const Zr=tr(Jr),rn=(r,n="MM/DD/YYYY")=>{if(!r)return"";const e=(r.getMonth()+1).toString().padStart(2,"0"),t=r.getDate().toString().padStart(2,"0"),a=r.getFullYear().toString();return n.replace("MM",e).replace("DD",t).replace("YYYY",a).replace("M",(r.getMonth()+1).toString()).replace("D",r.getDate().toString()).replace("YY",a.slice(-2))},nn=(r,n,e)=>{const t=rn(r.start,n),a=rn(r.end,n);return t&&a?`${t} ${e} ${a}`:t||""},en=()=>{const r=new Date,n=new Date(r);n.setDate(n.getDate()-1);const e=new Date(r);e.setDate(r.getDate()-r.getDay());const t=new Date(e);t.setDate(e.getDate()-7);const a=new Date(e);a.setDate(e.getDate()-1);const o=new Date(r.getFullYear(),r.getMonth(),1),i=new Date(r.getFullYear(),r.getMonth()-1,1),l=new Date(r.getFullYear(),r.getMonth(),0),s=new Date(r);s.setDate(r.getDate()-6);const d=new Date(r);return d.setDate(r.getDate()-29),[{label:"Today",range:{start:new Date(r),end:new Date(r)}},{label:"Yesterday",range:{start:new Date(n),end:new Date(n)}},{label:"Last 7 days",range:{start:new Date(s),end:new Date(r)}},{label:"Last 30 days",range:{start:new Date(d),end:new Date(r)}},{label:"This week",range:{start:new Date(e),end:new Date(r)}},{label:"Last week",range:{start:new Date(t),end:new Date(a)}},{label:"This month",range:{start:new Date(o),end:new Date(r)}},{label:"Last month",range:{start:new Date(i),end:new Date(l)}}]},tn=i.default.forwardRef(({value:e={start:null,end:null},onChange:t,label:a,startPlaceholder:o="Start date",endPlaceholder:i="End date",helperText:l,error:s,success:d,size:c,fullWidth:x=!1,disabled:v=!1,required:m=!1,minDate:p,maxDate:h,disabledDates:g,isDateDisabled:f,format:b="MM/DD/YYYY",separator:w="to",presets:y=en(),className:k="",inputClassName:j="",dropdownClassName:N="",clearable:_=!1,...z},C)=>{const[S,M]=n.useState(!1),[$,T]=n.useState(()=>nn(e,b,w)),[D,I]=n.useState(()=>e.start||new Date),[L,R]=n.useState(null),F=n.useRef(null),A=n.useRef(null);n.useEffect(()=>{T(nn(e,b,w)),e.start&&I(e.start);const r=y.find(r=>{var n,t,a,o;return(null===(n=r.range.start)||void 0===n?void 0:n.getTime())===(null===(t=e.start)||void 0===t?void 0:t.getTime())&&(null===(a=r.range.end)||void 0===a?void 0:a.getTime())===(null===(o=e.end)||void 0===o?void 0:o.getTime())});R((null==r?void 0:r.label)||null)},[e,b,w,y]),n.useEffect(()=>{const r=r=>{F.current&&!F.current.contains(r.target)&&M(!1)},n=r=>{"Escape"===r.key&&M(!1)};return S&&(document.addEventListener("mousedown",r),document.addEventListener("keydown",n)),()=>{document.removeEventListener("mousedown",r),document.removeEventListener("keydown",n)}},[S]);return r.jsxs("div",{ref:F,className:`vtx-datepicker ${k}`.trim(),children:[r.jsx(Dr,{ref:C,label:a,value:$,onClick:()=>{v||M(!S)},placeholder:`${o} ${w} ${i}`,helperText:l,error:s,success:d,size:c,fullWidth:x,disabled:v,required:m,readOnly:!0,rightIcon:r.jsx(u,{size:16}),className:`vtx-datepicker__input ${j}`.trim(),clearable:_,onClear:()=>{null==t||t({start:null,end:null}),T(""),R(null),M(!1)},...z}),S&&r.jsx("div",{ref:A,className:`vtx-datepicker__dropdown ${N}`.trim(),children:r.jsxs("div",{className:"vtx-datepicker__content",children:[y.length>0&&r.jsx("div",{className:"vtx-datepicker__presets",children:y.map(n=>r.jsx("button",{type:"button",className:["vtx-datepicker__preset-button",L===n.label&&"vtx-datepicker__preset-button--active"].filter(Boolean).join(" "),onClick:()=>(r=>{null==t||t(r.range),R(r.label),M(!1)})(n),children:n.label},n.label))}),r.jsx("div",{className:"vtx-datepicker__calendar-container",children:r.jsx(Xr,{rangeValue:[e.start,e.end],onRangeChange:r=>{const[n,e]=r;null==t||t({start:n,end:e}),n&&e&&M(!1)},currentMonth:D,onMonthChange:I,minDate:p,maxDate:h,disabledDates:g,isDateDisabled:f,isRangeMode:!0,onChange:()=>{}})})]})})]})});tn.displayName="DateRangePicker";const an=tr(tn),on=i.default.forwardRef(({item:e,isOpen:t,onToggle:a,variant:o="default",size:i="md",showChevron:l=!0,chevronPosition:s="right",expandedIcon:d,collapsedIcon:c,iconType:x="chevron",loading:v=!1,disabled:m=!1,disableAnimations:p=!1},h)=>{const u=n.useRef(null),{id:w,header:y,children:k,disabled:j,className:N,loading:_,status:z="default",icon:C,dataTestId:S}=e,M=m||j,$=v||_,T=()=>{M||$||a()},D=()=>C?r.jsx("div",{className:"accordion-item-chevron "+(t?"open":""),"data-testid":`${S||w}-custom-icon`,children:t?C.expanded:C.collapsed}):"custom"===x&&d&&c?r.jsx("div",{className:"accordion-item-chevron "+(t?"open":""),"data-testid":`${S||w}-custom-icon`,children:t?d:c}):"plus-minus"===x?r.jsx("div",{className:"accordion-item-chevron accordion-item-chevron--plus-minus "+(t?"open":""),"data-testid":`${S||w}-plus-minus-icon`,children:t?r.jsx(b,{size:16,"aria-hidden":"true"}):r.jsx(r.Fragment,{children:r.jsx(f,{size:16,"aria-hidden":"true"})})}):r.jsx("div",{className:"accordion-item-chevron "+(t?"open":""),"data-testid":`${S||w}-chevron-icon`,children:r.jsx(g,{size:16,"aria-hidden":"true",style:{transform:t?"rotate(180deg)":void 0,transition:"transform 0.2s"}})});return r.jsxs("div",{ref:h,className:`\n accordion-item\n accordion-item--${o}\n accordion-item--${i}\n ${t?"accordion-item--open":""}\n ${M?"accordion-item--disabled":""}\n ${$?"accordion-item--loading":""}\n ${"default"!==z?`accordion-item--${z}`:""}\n ${N||""}\n `.trim(),"data-testid":S,"aria-expanded":t,"aria-disabled":M,"aria-busy":$,children:[r.jsxs("div",{className:"accordion-item-header",role:"button",tabIndex:M||$?-1:0,"aria-expanded":t,"aria-controls":`accordion-content-${w}`,"aria-disabled":M,"aria-busy":$,"aria-describedby":"default"!==z?`accordion-status-${w}`:void 0,onClick:T,onKeyDown:r=>{"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),T())},"data-testid":`${S||w}-header`,children:["left"===s&&l&&D(),r.jsx("div",{className:"accordion-item-header-content",children:y}),"right"===s&&l&&D()]}),r.jsx("div",{id:`accordion-content-${w}`,className:"accordion-item-content "+(t?"accordion-item-content--open":""),role:"region","aria-labelledby":`accordion-header-${w}`,ref:u,style:{maxHeight:p?t?"none":"0":t?"500px":"0",transition:p?"none":void 0},"data-testid":`${S||w}-content`,children:r.jsxs("div",{className:"accordion-item-body",children:["default"!==z&&r.jsx("div",{id:`accordion-status-${w}`,className:`accordion-status accordion-status--${z}`,"aria-live":"polite",children:r.jsxs("span",{className:"visually-hidden",children:["Status: ",z]})}),k]})})]})});on.displayName="AccordionItem";ar("/* =============================================================================\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 ln=i.default.forwardRef(({items:e,children:t,allowMultiple:a=!1,defaultOpenItems:o=[],openItems:i,onToggle:l,variant:s="default",size:d="md",className:c="",style:x,showChevron:v=!0,chevronPosition:m="right",expandedIcon:p,collapsedIcon:h,iconType:u="chevron",showDivider:g=!0,collapsible:f=!0,loading:b=!1,disabled:w=!1,spacing:y="default",disableAnimations:k=!1,...j},N)=>{const[_,z]=n.useState(o),C=void 0!==i?i:_,S=void 0!==i,M=e||n.Children.toArray(t).filter(r=>n.isValidElement(r)).map((r,e)=>{if(n.isValidElement(r)&&r.props){const n=r;return{id:n.props.id||`accordion-item-${e}`,header:n.props.header||`Item ${e+1}`,children:n.props.children,disabled:n.props.disabled,className:n.props.className}}return{id:`accordion-item-${e}`,header:`Item ${e+1}`,children:r}}),$=n.useCallback(r=>{let n;n=a?C.includes(r)?C.filter(n=>n!==r):[...C,r]:C.includes(r)?f?[]:C:[r],S||z(n),null==l||l(n)},[a,f,C,S,l]);return r.jsx("div",{ref:N,className:`\n accordion\n accordion--${s}\n accordion--${d}\n ${g?"accordion--divider":""}\n ${"compact"===y?"accordion--compact":""}\n ${"spacious"===y?"accordion--spacious":""}\n ${k?"accordion--no-animation":""}\n ${b?"accordion--loading":""}\n ${w?"accordion--disabled":""}\n ${c}\n `.trim(),style:x,role:"presentation","aria-busy":b,...j,children:M.map(n=>r.jsx(on,{item:n,isOpen:C.includes(n.id),onToggle:()=>$(n.id),variant:s,size:d,showChevron:v,chevronPosition:m,expandedIcon:p,collapsedIcon:h,iconType:u,loading:b,disabled:w,spacing:y,disableAnimations:k},n.id))})});ln.displayName="Accordion";ar("/* 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 sn=i.default.forwardRef(({children:n,direction:e="row",wrap:t="nowrap",justify:a="start",align:o="stretch",alignContent:i,gap:l,rowGap:s,columnGap:d,inline:c=!1,fullWidth:x=!1,grow:v,shrink:m,basis:p,className:h="",as:u="div",style:g,...f},b)=>{const w=u,y=["vtx-flex",c&&"vtx-flex--inline",x&&"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={...g};return void 0!==l&&(k["--vtx-flex-gap"]="number"==typeof l?`${l}px`:l),void 0!==s&&(k["--vtx-flex-row-gap"]="number"==typeof s?`${s}px`:s),void 0!==d&&(k["--vtx-flex-column-gap"]="number"==typeof d?`${d}px`:d),void 0!==v&&(k.flexGrow=v),void 0!==m&&(k.flexShrink=m),void 0!==p&&(k.flexBasis="number"==typeof p?`${p}px`:p),r.jsx(w,{ref:b,className:y,style:k,...f,children:n})});sn.displayName="Flex";const dn=tr(sn);ar("/* ===== 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=l.forwardRef(({variant:r="body1",as:n,align:e,color:t,weight:a,transform:o,decoration:i,truncate:s=!1,lineClamp:d,breakWord:c=!1,italic:x=!1,underline:v=!1,strikethrough:m=!1,gradient:p,noSelect:h=!1,size:u,lineHeight:g,letterSpacing:f,noMargin:b=!1,noPadding:w=!1,className:y="",style:k,children:j,...N},_)=>{const z=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),C=["vtx-text",`vtx-text--${r}`,e&&`vtx-text--align-${e}`,a&&"string"==typeof a&&`vtx-text--weight-${a}`,o&&`vtx-text--transform-${o}`,i&&`vtx-text--decoration-${i}`,s&&"vtx-text--truncate",d&&"vtx-text--line-clamp",c&&"vtx-text--break-word",x&&"vtx-text--italic",v&&"vtx-text--underline",m&&"vtx-text--strikethrough",p&&"vtx-text--gradient",h&&"vtx-text--no-select",b&&"vtx-text--no-margin",w&&"vtx-text--no-padding",y].filter(Boolean).join(" "),S={...k};if(t)if(t.includes(".")){const[r,n]=t.split(".");S.color=`var(--vtx-color-${r}-${n})`}else S.color=t;if(a&&"number"==typeof a&&(S.fontWeight=a),d&&(S.WebkitLineClamp=d),p&&p.length>0){const r=1===p.length?p[0]:`linear-gradient(135deg, ${p.join(", ")})`;S.backgroundImage=r}return u&&(S.fontSize="number"==typeof u?`${u}px`:u),g&&(S.lineHeight="number"==typeof g?`${g}`:g),f&&(S.letterSpacing="number"==typeof f?`${f}px`:f),l.createElement(z,{ref:_,className:C,style:S,...N},j)});cn.displayName="Text";const xn=tr(cn);ar("/* 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 vn=({isOpen:n})=>n?r.jsx(k,{size:16}):r.jsx(g,{size:16}),mn=i.default.forwardRef(({label:e,onClick:t,icon:a,rightIcon:o,disabled:i=!1,active:l=!1,variant:s="default",shortcut:d,divider:c=!1,items:x},v)=>{const[m,p]=n.useState(!1),h=n.useRef(null),u=x&&x.length>0,g=o||(u?r.jsx(vn,{isOpen:m}):null);return r.jsxs(r.Fragment,{children:[r.jsx("div",{ref:v||h,className:["vtx-menu-item",l&&"vtx-menu-item--active",i&&"vtx-menu-item--disabled","default"!==s&&`vtx-menu-item--${s}`,u&&"vtx-menu-item--has-submenu",m&&"vtx-menu-item--submenu-open"].filter(Boolean).join(" "),onClick:()=>{i||(u?p(!m):t&&t())},onKeyDown:r=>{i||("Enter"===r.key||" "===r.key?(r.preventDefault(),u?p(!m):null==t||t()):"ArrowDown"===r.key&&u&&!m?(r.preventDefault(),p(!0)):"ArrowUp"===r.key&&u&&m&&(r.preventDefault(),p(!1)))},role:"menuitem",tabIndex:i?-1:0,"aria-disabled":i,"aria-haspopup":u?"menu":void 0,"aria-expanded":u?m:void 0,children:r.jsxs(dn,{align:"center",gap:8,style:{flex:1},children:[a&&r.jsx("span",{className:"vtx-menu-item-icon",children:a}),r.jsx(xn,{variant:"body2",noMargin:!0,style:{flex:1},children:e}),d&&r.jsx(xn,{variant:"caption",color:"neutral.500",noMargin:!0,className:"vtx-menu-item-shortcut",children:d}),g&&r.jsx("span",{className:"vtx-menu-item-right-icon",children:g})]})}),u&&m&&r.jsx("div",{className:"vtx-submenu",role:"menu",children:x.map((n,e)=>r.jsx(mn,{...n},e))}),c&&r.jsx("div",{className:"vtx-menu-divider",role:"separator"})]})});mn.displayName="MenuItem";const pn=i.default.forwardRef(({items:e,children:t,orientation:a="vertical",responsive:o=!0,className:i="",width:l},s)=>{const[d,c]=n.useState(!1),x=n.useRef(null);n.useEffect(()=>{if(!o||!d)return;const r=r=>{x.current&&!x.current.contains(r.target)&&c(!1)};return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[o,d]),n.useEffect(()=>{if(!o||!d)return;const r=r=>{"Escape"===r.key&&c(!1)};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[o,d]);const v=e?e.map((n,e)=>r.jsx(mn,{...n},e)):t,m=["vtx-menu",`vtx-menu--${a}`,o&&"vtx-menu--responsive",d&&"vtx-menu--mobile-open",i].filter(Boolean).join(" "),p={width:"vertical"===a&&l?"number"==typeof l?`${l}px`:l:void 0};return r.jsxs("div",{ref:x,className:"vtx-menu-container",children:[o&&r.jsx("button",{className:"vtx-menu-toggle",onClick:()=>c(!d),"aria-label":"Toggle menu","aria-expanded":d,children:d?r.jsx(O,{size:24}):r.jsx(y,{size:24})}),r.jsx("div",{ref:s,className:m,role:"menu",style:p,children:v})]})});pn.displayName="Menu";const hn=tr(pn);ar("/* ActionMenu Component Styles */\r\n\r\n.vtx-action-menu-container {\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.vtx-action-menu-trigger-wrapper {\r\n display: inline-block;\r\n}\r\n\r\n/* Trigger Button */\r\n.vtx-action-menu-trigger {\r\n display: inline-flex;\r\n align-items: center;\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\r\n background: var(--vtx-background-primary);\r\n border: 1px solid var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-radius-md);\r\n color: var(--vtx-text-primary);\r\n cursor: pointer;\r\n transition: all var(--vtx-transition-normal);\r\n font-size: var(--vtx-font-size-sm);\r\n font-weight: var(--vtx-font-weight-medium);\r\n user-select: none;\r\n}\r\n\r\n.vtx-action-menu-trigger:hover {\r\n background: var(--vtx-background-hover);\r\n border-color: var(--vtx-color-neutral-400);\r\n}\r\n\r\n.vtx-action-menu-trigger:active {\r\n background: var(--vtx-background-active);\r\n}\r\n\r\n.vtx-action-menu-trigger:focus-visible {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 2px;\r\n}\r\n\r\n.vtx-action-menu-trigger--open {\r\n background: var(--vtx-background-active);\r\n border-color: var(--vtx-color-primary-500);\r\n box-shadow: 0 0 0 1px var(--vtx-color-primary-500);\r\n}\r\n\r\n.vtx-action-menu-trigger--disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n.vtx-action-menu-trigger-icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--vtx-text-secondary);\r\n}\r\n\r\n/* Dropdown Menu */\r\n.vtx-action-menu {\r\n position: absolute;\r\n z-index: 1000;\r\n min-width: 200px;\r\n margin-top: var(--vtx-spacing-1);\r\n padding: var(--vtx-spacing-2);\r\n background: var(--vtx-background-primary);\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-lg);\r\n animation: slideDown 0.15s ease-out;\r\n}\r\n\r\n/* Position variants */\r\n.vtx-action-menu--bottom-start {\r\n top: 100%;\r\n left: 0;\r\n}\r\n\r\n.vtx-action-menu--bottom-end {\r\n top: 100%;\r\n right: 0;\r\n}\r\n\r\n.vtx-action-menu--top-start {\r\n bottom: 100%;\r\n left: 0;\r\n margin-top: 0;\r\n margin-bottom: var(--vtx-spacing-1);\r\n animation: slideUp 0.15s ease-out;\r\n}\r\n\r\n.vtx-action-menu--top-end {\r\n bottom: 100%;\r\n right: 0;\r\n margin-top: 0;\r\n margin-bottom: var(--vtx-spacing-1);\r\n animation: slideUp 0.15s ease-out;\r\n}\r\n\r\n/* Animations */\r\n@keyframes slideDown {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-8px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n@keyframes slideUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(8px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n/* Dark Mode */\r\n[data-theme='dark'] .vtx-action-menu-trigger {\r\n background: var(--vtx-color-neutral-800);\r\n border-color: var(--vtx-color-neutral-600);\r\n color: var(--vtx-color-neutral-100);\r\n}\r\n\r\n[data-theme='dark'] .vtx-action-menu-trigger:hover {\r\n background: var(--vtx-color-neutral-700);\r\n border-color: var(--vtx-color-neutral-500);\r\n}\r\n\r\n[data-theme='dark'] .vtx-action-menu-trigger:active {\r\n background: var(--vtx-color-neutral-600);\r\n}\r\n\r\n[data-theme='dark'] .vtx-action-menu-trigger--open {\r\n background: var(--vtx-color-neutral-700);\r\n border-color: var(--vtx-color-primary-400);\r\n box-shadow: 0 0 0 1px var(--vtx-color-primary-400);\r\n}\r\n\r\n[data-theme='dark'] .vtx-action-menu {\r\n background: var(--vtx-color-neutral-800);\r\n border-color: var(--vtx-color-neutral-700);\r\n}\r\n\r\n/* Reduced Motion */\r\n@media (prefers-reduced-motion: reduce) {\r\n .vtx-action-menu {\r\n animation: none;\r\n }\r\n}\r\n");const un=({isOpen:n})=>n?r.jsx(k,{size:16}):r.jsx(g,{size:16}),gn=i.default.forwardRef(({items:e,trigger:t,triggerLabel:a="Actions",triggerIcon:o,position:l="bottom-start",className:s="",triggerClassName:d="",disabled:c=!1,onOpen:x,onClose:v},m)=>{const[p,h]=n.useState(!1),u=n.useRef(null),g=n.useRef(null),f=()=>{if(c)return;const r=!p;h(r),r&&x?x():!r&&v&&v()};n.useEffect(()=>{if(!p)return;const r=r=>{u.current&&!u.current.contains(r.target)&&(h(!1),null==v||v())};return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[p,v]),n.useEffect(()=>{if(!p)return;const r=r=>{"Escape"===r.key&&(h(!1),null==v||v())};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[p,v]);const b=e.map(r=>({...r,onClick:r.onClick?()=>{var n;null===(n=r.onClick)||void 0===n||n.call(r),h(!1),null==v||v()}:void 0})),w=`vtx-action-menu--${l}`,y="function"==typeof t?t({isOpen:p,toggle:f,disabled:c}):t||r.jsxs(dn,{align:"center",gap:8,children:[o&&r.jsx("span",{className:"vtx-action-menu-trigger-icon",children:o}),r.jsx(xn,{variant:"body2",noMargin:!0,children:a}),r.jsx(un,{isOpen:p})]}),k="function"==typeof t||i.default.isValidElement(t);return r.jsxs("div",{ref:u,className:"vtx-action-menu-container",children:[k?r.jsx("div",{className:"vtx-action-menu-trigger-wrapper",children:"function"==typeof t?y:r.jsx("div",{onClick:f,children:y})}):r.jsx("div",{className:["vtx-action-menu-trigger",c&&"vtx-action-menu-trigger--disabled",p&&"vtx-action-menu-trigger--open",d].filter(Boolean).join(" "),onClick:f,onKeyDown:r=>{"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),f())},role:"button",tabIndex:c?-1:0,"aria-haspopup":"menu","aria-expanded":p,"aria-disabled":c,children:y}),p&&r.jsx("div",{ref:m||g,className:["vtx-action-menu",w,s].filter(Boolean).join(" "),role:"menu",children:b.map((n,e)=>r.jsx(mn,{...n},e))})]})});gn.displayName="ActionMenu";const fn=tr(gn);ar("/* 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 bn={success:r.jsx(_,{size:20}),error:r.jsx(z,{size:20}),warning:r.jsx(C,{size:20}),info:r.jsx(S,{size:20}),neutral:r.jsx(M,{size:20})},wn=i.default.forwardRef(({children:e,title:t,description:a,variant:o="info",alertStyle:i="subtle",size:l,icon:s,dismissible:d=!1,onClose:c,action:x,fullWidth:v=!1,className:m="",style:p,role:h="alert",...u},g)=>{const{theme:f}=gr(),b=l||(null==f?void 0:f.defaultSize)||"md",[w,y]=n.useState(!0);if(!w)return null;const k=!1!==s,j=void 0===s?bn[o]:s,N=e||a;return r.jsxs("div",{ref:g,className:`\n alert\n alert--${o}\n alert--${i}\n alert--${b}\n ${v?"alert--full-width":""}\n ${m}\n `.trim(),style:p,role:h,...u,children:[k&&r.jsx("div",{className:"alert-icon",children:j}),r.jsxs("div",{className:"alert-content",children:[t&&r.jsx("div",{className:"alert-title",children:t}),N&&r.jsx("div",{className:"alert-message",children:null!=e?e:a})]}),x&&r.jsx("div",{className:"alert-action",children:x}),d&&r.jsx("button",{type:"button",className:"alert-close",onClick:()=>{y(!1),null==c||c()},"aria-label":"Close alert",children:r.jsx(O,{size:16})})]})});wn.displayName="Alert";const yn=tr(wn);ar("/* ===== 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 kn=i.default.forwardRef(({isOpen:t,onClose:a,title:o,description:i,children:l,header:s,footer:d,footerButtons:c,size:x,closeOnBackdropClick:v=!0,closeOnEscape:m=!0,showCloseButton:p=!0,transparentBackdrop:h=!1,className:u="",backdropClassName:g="",preventScroll:f=!0,animation:b="fade",onAfterOpen:w,onAfterClose:y,scrollable:k=!1,centered:j=!0},N)=>{const _=n.useRef(null),z=n.useRef(null),{theme:C}=gr();let S="md";if(x?S=x:(null==C?void 0:C.defaultSize)&&(S=C.defaultSize),Nr(_,t),zr(f&&t),_r(()=>{m&&t&&a()}),n.useEffect(()=>{t?(z.current=document.activeElement,null==w||w()):z.current&&(z.current.focus(),null==y||y())},[t,w,y]),!t)return null;const M=["vtx-modal-backdrop",h&&"vtx-modal-backdrop--transparent",j&&"vtx-modal-backdrop--centered",`vtx-modal-backdrop--${b}`,g].filter(Boolean).join(" "),$=["vtx-modal",`vtx-modal--${S}`,k&&"vtx-modal--scrollable",`vtx-modal--${b}`,u].filter(Boolean).join(" "),T=r.jsx("div",{className:M,onClick:r=>{v&&r.target===r.currentTarget&&a()},role:"presentation",children:r.jsxs("div",{ref:r=>{_.current=r,"function"==typeof N?N(r):N&&(N.current=r)},className:$,role:"dialog","aria-modal":"true","aria-labelledby":o?"vtx-modal-title":void 0,"aria-describedby":i?"vtx-modal-description":void 0,children:[s?r.jsx("div",{className:"vtx-modal-header",children:s}):o||p?r.jsxs(dn,{className:"vtx-modal-header",justify:"between",align:"center",gap:8,children:[o&&r.jsxs(dn,{direction:"column",gap:4,className:"vtx-modal-header-content",children:[r.jsx(xn,{as:"h2",variant:"h6",weight:"semibold",id:"vtx-modal-title",noMargin:!0,children:o}),i&&r.jsx(xn,{variant:"body2",color:"neutral.600",id:"vtx-modal-description",noMargin:!0,children:i})]}),p&&r.jsx(br,{variant:"ghost",iconOnly:!0,size:"sm",className:"vtx-modal-close",onClick:a,"aria-label":"Close modal",children:r.jsx(O,{size:20})})]}):null,r.jsx(dn,{direction:"column",className:"vtx-modal-body",children:l}),(d||c)&&r.jsx(dn,{className:"vtx-modal-footer",justify:"end",align:"center",gap:8,children:c?c.map((n,e)=>r.jsx(br,{variant:n.variant||"secondary",size:n.size||(null==C?void 0:C.defaultSize)||"md",loading:n.loading,disabled:n.disabled,onClick:n.onClick,children:n.label},e)):d})]})});return e.createPortal(T,document.body)});kn.displayName="Modal";const jn=tr(kn);ar(".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 Nn=i.default.forwardRef(({content:t,placement:a="top",delay:o=200,hideDelay:i=0,children:l,open:s,disabled:d=!1,arrow:c=!1,maxWidth:x="300px",variant:v="dark",dismissible:m=!1,onShow:p,onHide:u,onDismiss:g,className:f="",...b},w)=>{const[y,k]=n.useState(s||!1),[j,N]=n.useState(!1),[_,z]=n.useState({top:0,left:0}),C=n.useRef(null),S=n.useRef(null),M=n.useRef(null),$=n.useRef(null),T=n.useRef(!1),D=()=>{d||(T.current=!0,M.current&&clearTimeout(M.current),$.current&&clearTimeout($.current),S.current=setTimeout(()=>{if(C.current&&T.current){const r=C.current.getBoundingClientRect(),n=L(r,a);z(n),N(!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{k(!0),null==p||p()})})}},o))},I=()=>{T.current=!1,S.current&&clearTimeout(S.current),M.current=setTimeout(()=>{T.current||(k(!1),null==u||u(),$.current=setTimeout(()=>{N(!1)},150))},i)},L=(r,n)=>{const e=c?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}};n.useEffect(()=>{void 0!==s&&(s?(N(!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{k(!0)})})):(k(!1),$.current=setTimeout(()=>{N(!1)},150)))},[s]),n.useEffect(()=>()=>{S.current&&clearTimeout(S.current),M.current&&clearTimeout(M.current),$.current&&clearTimeout($.current)},[]);const R=["vtx-tooltip",`vtx-tooltip--${a}`,`vtx-tooltip--${v}`,c&&"vtx-tooltip--with-arrow",y&&"vtx-tooltip--visible",f].filter(Boolean).join(" "),F=void 0!==s&&s||j,A=n.cloneElement(l,{ref:r=>{C.current=r;const n=l.ref;"function"==typeof n?n(r):n&&"object"==typeof n&&"current"in n&&(n.current=r)},onMouseEnter:r=>{var n,e;void 0===s&&D(),null===(e=(n=l.props).onMouseEnter)||void 0===e||e.call(n,r)},onMouseLeave:r=>{var n,e;void 0===s&&I(),null===(e=(n=l.props).onMouseLeave)||void 0===e||e.call(n,r)},onFocus:r=>{var n,e;void 0===s&&D(),null===(e=(n=l.props).onFocus)||void 0===e||e.call(n,r)},onBlur:r=>{var n,e;void 0===s&&I(),null===(e=(n=l.props).onBlur)||void 0===e||e.call(n,r)},"aria-describedby":y?"vtx-tooltip-content":void 0});return r.jsxs(r.Fragment,{children:[A,F&&e.createPortal(r.jsxs("div",{ref:w,id:"vtx-tooltip-content",role:"tooltip",className:R,style:{top:`${_.top}px`,left:`${_.left}px`,maxWidth:x},onMouseEnter:()=>{d||void 0!==s||(T.current=!0,M.current&&clearTimeout(M.current))},onMouseLeave:()=>{d||void 0!==s||I()},...b,children:[c&&r.jsx("span",{className:"vtx-tooltip-arrow","aria-hidden":"true"}),r.jsxs("div",{className:"vtx-tooltip-inner",children:[r.jsx("span",{className:"vtx-tooltip-content",children:t}),m&&r.jsx("button",{type:"button",className:"vtx-tooltip-close",onClick:()=>{T.current=!1,k(!1),null==g||g(),null==u||u(),$.current=setTimeout(()=>{N(!1)},150)},"aria-label":"Dismiss tooltip",children:r.jsx(h,{size:14})})]})]}),document.body)]})});Nn.displayName="Tooltip";const _n=({data:n,grid:e,renderItem:t,className:a=""})=>{const o=i.default.useMemo(()=>{if(e&&!e.auto)return{mobile:e.mobile||1,tablet:e.tablet||2,desktop:e.desktop||3,spacing:e.spacing||"md",align:e.align||"stretch"};const r=(t=n.length)<=1?{mobile:1,tablet:1,desktop:1}:2===t?{mobile:1,tablet:2,desktop:2}:3===t?{mobile:1,tablet:2,desktop:3}:4===t?{mobile:1,tablet:2,desktop:4}:t<=6?{mobile:2,tablet:3,desktop:3}:t<=8?{mobile:2,tablet:3,desktop:4}:{mobile:2,tablet:4,desktop:6};var t;return{mobile:(null==e?void 0:e.mobile)||r.mobile,tablet:(null==e?void 0:e.tablet)||r.tablet,desktop:(null==e?void 0:e.desktop)||r.desktop,spacing:(null==e?void 0:e.spacing)||"md",align:(null==e?void 0:e.align)||"stretch"}},[n.length,e]),l=(s=o.mobile,d=o.tablet,c=o.desktop,["vtx-widget-grid",(x=o.spacing)?`gap-${x}`:"gap-md",`mobile-cols-${s}`,`tablet-cols-${d}`,`desktop-cols-${c}`].join(" "));var s,d,c,x;return r.jsx("div",{className:`${l} ${a}`.trim(),style:{alignItems:"stretch"===o.align?"stretch":o.align},children:n.map((n,e)=>r.jsx("div",{className:"vtx-widget-grid-item",children:t(n,e)},(null==n?void 0:n.id)||e))})};ar(".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 zn=i.default.forwardRef(({children:n,variant:e="elevated",size:t,noPadding:a=!1,padding:o,hoverable:i=!1,clickable:l=!1,className:s="",header:d,footer:c,divider:x=!1,style:v,onClick:m,tabIndex:p,...h},u)=>{const{theme:g}=gr(),f=["vtx-card",`vtx-card--${e}`,`vtx-card--${t||(null==g?void 0:g.defaultSize)||"md"}`,i?"vtx-card--hoverable":"",l?"vtx-card--clickable":"",a&&!o?"vtx-card--no-padding":"",s].filter(Boolean).join(" "),b={...v||{},...o?{"--vtx-card-padding":o}:{}},w=l?"number"==typeof p?p:0:p;return r.jsxs("div",{ref:u,className:f,style:b,onClick:m,tabIndex:w,...h,children:[d&&r.jsx("div",{className:"vtx-card-header"+(x?" vtx-card-header--divider":""),children:d}),r.jsx("div",{className:"vtx-card-content",children:n}),c&&r.jsx("div",{className:"vtx-card-footer"+(x?" vtx-card-footer--divider":""),children:c})]})});zn.displayName="Card";const Cn=tr(zn);ar(".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 Sn=i.default.forwardRef(({variant:e="neutral",size:t,pill:a=!1,dot:o=!1,outline:i=!1,maxLength:l,icon:s,children:d,className:c="",onRemove:x,...v},m)=>{const{theme:p}=gr(),u=["vtx-badge",`vtx-badge--${e}`,`vtx-badge--${t||p.defaultSize}`,a&&"vtx-badge--pill",o&&"vtx-badge--with-dot",i&&"vtx-badge--outline",x&&"vtx-badge--removable",c].filter(Boolean).join(" "),g=n.useMemo(()=>l&&"string"==typeof d&&d.length>l?`${d.slice(0,l)}...`:d,[d,l]);return r.jsxs("span",{ref:m,className:u,...v,children:[o&&r.jsx("span",{className:"vtx-badge-dot","aria-hidden":"true"}),s&&r.jsx("span",{className:"vtx-badge-icon","aria-hidden":"true",children:s}),r.jsx("span",{className:"vtx-badge-content",children:g}),x&&r.jsx("button",{type:"button",className:"vtx-badge-remove",onClick:x,"aria-label":"Remove badge",children:r.jsx(h,{})})]})});Sn.displayName="Badge";const Mn=tr(Sn),$n=({data:n,theme:e,variant:t="primary",size:a="md",className:o="",style:i})=>{const l=()=>{if(!n.trend)return null;const{direction:e,value:t,label:a}=n.trend,o="up"===e,i="down"===e,l=o?"success":i?"error":"neutral",s=o||i?U:b;return r.jsxs(dn,{align:"center",gap:"xs",children:[r.jsx(s,{size:12}),r.jsxs(xn,{variant:"caption",className:`text-${l}`,children:[Math.abs(t),"%",a&&` ${a}`]})]})};return r.jsx(Cn,{variant:"elevated",className:["vtx-metric-widget",`vtx-metric-widget--${e}`,`vtx-metric-widget--${a}`,`vtx-metric-widget--${t}`,o].filter(Boolean).join(" "),style:i,padding:"minimal"===e?"lg":"compact"===e?"md":"lg",children:(()=>{switch(e){case"minimal":return r.jsxs(dn,{direction:"column",align:"center",gap:"xs",children:[r.jsx(xn,{variant:"lg"===a?"h2":"sm"===a?"h5":"h3",className:"font-bold",children:n.value}),n.label&&r.jsx(xn,{variant:"caption",className:"text-neutral-500",children:n.label}),l()]});case"modern":return r.jsxs(dn,{direction:"column",gap:"sm",children:[r.jsxs(dn,{justify:"between",align:"start",children:[r.jsxs("div",{children:[n.label&&r.jsx(xn,{variant:"caption",className:"text-neutral-500 mb-1",children:n.label}),r.jsx(xn,{variant:"lg"===a?"h2":"sm"===a?"h5":"h3",className:"font-bold",children:n.value})]}),n.icon&&r.jsx("div",{className:`metric-icon metric-icon--${t} metric-icon--${a}`,children:n.icon})]}),(n.trend||n.badge)&&r.jsxs(dn,{justify:"between",align:"center",children:[l(),n.badge&&r.jsx(Mn,{variant:(o=n.badge.variant,("error"===o?"error":"secondary"===o?"neutral":o)||"neutral"),children:n.badge.text})]})]});case"compact":return r.jsxs(dn,{align:"center",gap:"md",children:[n.icon&&r.jsx("div",{className:`metric-icon metric-icon--${t} metric-icon--${a}`,children:n.icon}),r.jsxs(dn,{direction:"column",gap:"xs",children:[r.jsx(xn,{variant:"lg"===a?"h3":"sm"===a?"h6":"h4",className:"font-bold",children:n.value}),n.label&&r.jsx(xn,{variant:"caption",className:"text-neutral-500",children:n.label}),l()]})]});default:return r.jsxs(dn,{direction:"column",gap:"sm",children:[r.jsx(xn,{variant:"lg"===a?"h2":"sm"===a?"h5":"h3",className:"font-bold",children:n.value}),n.label&&r.jsx(xn,{variant:"caption",className:"text-neutral-500",children:n.label}),l()]})}var o})()})},Tn=({data:n,theme:e,variant:t="primary",size:a="md",className:o="",style:i})=>{const l=r=>"error"===r?"error":"secondary"===r?"neutral":r;return r.jsx(Cn,{variant:"elevated",className:["vtx-info-widget",`vtx-info-widget--${e}`,`vtx-info-widget--${a}`,`vtx-info-widget--${n.status||t}`,o].filter(Boolean).join(" "),style:i,padding:"minimal"===e?"lg":"compact"===e?"md":"lg",children:(()=>{switch(e){case"minimal":return r.jsxs(dn,{direction:"column",align:"center",gap:"sm",children:[n.icon&&r.jsx("div",{className:`info-icon info-icon--${n.status||t} info-icon--${a}`,children:n.icon}),r.jsx(xn,{variant:"lg"===a?"h4":"sm"===a?"body2":"h5",className:"font-medium text-center",children:n.text}),n.subText&&r.jsx(xn,{variant:"caption",className:"text-neutral-500 text-center",children:n.subText})]});case"modern":return r.jsxs(dn,{direction:"column",gap:"md",children:[r.jsxs(dn,{align:"start",gap:"md",children:[n.icon&&r.jsx("div",{className:`info-icon info-icon--${n.status||t} info-icon--${a}`,children:n.icon}),r.jsxs(dn,{direction:"column",gap:"xs",style:{flex:1},children:[n.title&&r.jsx(xn,{variant:"subtitle1",className:"font-semibold",children:n.title}),r.jsx(xn,{variant:"lg"===a?"h5":"sm"===a?"body2":"body1",className:"font-medium",children:n.text}),n.subText&&r.jsx(xn,{variant:"caption",className:"text-neutral-500",children:n.subText})]}),n.badge&&r.jsx(Mn,{variant:l(n.badge.variant||n.status)||"neutral",children:n.badge.text})]}),n.action&&r.jsx(br,{variant:(o=n.action.variant,("outlined"===o?"outline":o)||"ghost"),size:"sm",onClick:n.action.onClick,href:n.action.href,children:n.action.label})]});case"compact":return r.jsxs(dn,{align:"center",gap:"md",children:[n.icon&&r.jsx("div",{className:`info-icon info-icon--${n.status||t} info-icon--sm`,children:n.icon}),r.jsxs(dn,{direction:"column",gap:"xs",style:{flex:1},children:[r.jsx(xn,{variant:"lg"===a?"body1":"sm"===a?"caption":"body2",className:"font-medium",children:n.text}),n.subText&&r.jsx(xn,{variant:"caption",className:"text-neutral-500",children:n.subText})]}),n.badge&&r.jsx(Mn,{variant:l(n.badge.variant||n.status)||"neutral",size:"sm",children:n.badge.text})]});default:return r.jsxs(dn,{direction:"column",gap:"sm",children:[n.icon&&r.jsx("div",{className:`info-icon info-icon--${n.status||t} info-icon--${a}`,children:n.icon}),r.jsx(xn,{variant:"lg"===a?"h4":"sm"===a?"body2":"h5",className:"font-medium",children:n.text}),n.subText&&r.jsx(xn,{variant:"caption",className:"text-neutral-500",children:n.subText})]})}var o})()})},Dn=({data:n,theme:e,variant:t="primary",size:a="md",className:o="",style:i})=>{const l=()=>{const e=n.originalPrice&&n.originalPrice!==n.price;return r.jsxs(dn,{align:"center",gap:"sm",children:[r.jsx(xn,{variant:"lg"===a?"h5":"sm"===a?"body2":"h6",className:"font-bold text-primary-600",children:"string"==typeof n.price?n.price:`$${n.price}`}),e&&r.jsx(xn,{variant:"caption",className:"line-through text-neutral-400",children:"string"==typeof n.originalPrice?n.originalPrice:`$${n.originalPrice}`})]})},s=()=>n.rating?r.jsxs(dn,{align:"center",gap:"xs",children:[r.jsx(dn,{align:"center",children:[...Array(5)].map((e,t)=>r.jsx(H,{size:12,className:t<Math.floor(n.rating)?"text-warning-500":"text-neutral-300"},t))}),r.jsxs(xn,{variant:"caption",className:"text-neutral-500",children:[n.rating,n.reviews&&` (${n.reviews})`]})]}):null;return r.jsx(Cn,{variant:"elevated",className:["vtx-product-widget",`vtx-product-widget--${e}`,`vtx-product-widget--${a}`,`vtx-product-widget--${t}`,!n.inStock&&"vtx-product-widget--out-of-stock",o].filter(Boolean).join(" "),style:i,padding:"minimal"===e?"md":"compact"===e?"sm":"lg",children:(()=>{switch(e){case"minimal":return r.jsxs(dn,{direction:"column",gap:"sm",children:[n.image&&r.jsx("div",{className:"product-image product-image--minimal",children:r.jsx("img",{src:n.image,alt:n.name})}),r.jsxs(dn,{direction:"column",gap:"xs",children:[r.jsx(xn,{variant:"lg"===a?"h6":"sm"===a?"caption":"body2",className:"font-medium",children:n.name}),l(),s()]})]});case"modern":return r.jsxs(dn,{direction:"column",gap:"md",children:[r.jsxs("div",{className:"relative",children:[n.image&&r.jsx("div",{className:"product-image product-image--modern",children:r.jsx("img",{src:n.image,alt:n.name})}),r.jsxs("div",{className:"absolute top-2 right-2 flex gap-1",children:[!n.inStock&&r.jsx(Mn,{variant:"error",size:"sm",children:"Out of Stock"}),n.badge&&r.jsx(Mn,{variant:"error"===n.badge.variant?"error":n.badge.variant||t,size:"sm",children:n.badge.text})]})]}),r.jsxs(dn,{direction:"column",gap:"sm",children:[r.jsxs(dn,{justify:"between",align:"start",children:[r.jsxs(dn,{direction:"column",gap:"xs",children:[n.category&&r.jsx(xn,{variant:"caption",className:"text-neutral-500 uppercase",children:n.category}),r.jsx(xn,{variant:"lg"===a?"h5":"sm"===a?"body2":"h6",className:"font-semibold",children:n.name}),s()]}),r.jsx(br,{variant:"ghost",size:"sm",children:r.jsx(q,{size:16})})]}),l(),n.action&&r.jsx(br,{variant:n.action.variant||"primary",size:"sm",onClick:n.action.onClick,href:n.action.href,disabled:!n.inStock,fullWidth:!0,children:n.action.label})]})]});case"compact":return r.jsxs(dn,{align:"center",gap:"md",children:[n.image&&r.jsx("div",{className:"product-image product-image--compact",children:r.jsx("img",{src:n.image,alt:n.name})}),r.jsxs(dn,{direction:"column",gap:"xs",style:{flex:1},children:[r.jsx(xn,{variant:"lg"===a?"body1":"sm"===a?"caption":"body2",className:"font-medium",children:n.name}),l(),s()]}),!n.inStock&&r.jsx(Mn,{variant:"error",size:"sm",children:"Out of Stock"})]});default:return r.jsxs(dn,{direction:"column",gap:"sm",children:[n.image&&r.jsx("div",{className:"product-image",children:r.jsx("img",{src:n.image,alt:n.name})}),r.jsx(xn,{variant:"body1",className:"font-medium",children:n.name}),l(),s()]})}})()})},In=({data:n,theme:e,variant:t="primary",size:a="md",className:o="",style:i})=>{const l=r=>{switch(r.toLowerCase()){case"completed":case"delivered":return"success";case"pending":case"processing":return"warning";case"cancelled":case"failed":return"error";case"shipped":case"confirmed":return"info";default:return"neutral"}},s=r=>"string"==typeof r?r:`$${r.toFixed(2)}`,d=r=>("string"==typeof r?new Date(r):r).toLocaleDateString("en-US",{month:"short",day:"numeric",year:"numeric"}),c=()=>{if(!n.items||0===n.items.length)return null;const e=n.items.slice(0,3),t=n.items.length-e.length;return r.jsxs(dn,{direction:"column",gap:"xs",children:[e.map((n,e)=>r.jsxs(dn,{justify:"between",align:"center",children:[r.jsxs(xn,{variant:"caption",className:"text-neutral-600",children:[n.name," ",n.quantity&&`× ${n.quantity}`]}),n.price&&r.jsx(xn,{variant:"caption",className:"text-neutral-800 font-medium",children:s(n.price)})]},e)),t>0&&r.jsxs(xn,{variant:"caption",className:"text-neutral-500",children:["+",t," more item",t>1?"s":""]})]})};return r.jsx(Cn,{variant:"elevated",className:["vtx-order-widget",`vtx-order-widget--${e}`,`vtx-order-widget--${a}`,`vtx-order-widget--${t}`,o].filter(Boolean).join(" "),style:i,padding:"minimal"===e?"md":"compact"===e?"sm":"lg",children:(()=>{switch(e){case"minimal":return r.jsxs(dn,{direction:"column",gap:"sm",children:[r.jsxs(dn,{justify:"between",align:"center",children:[r.jsxs(xn,{variant:"lg"===a?"h6":"sm"===a?"body2":"body1",className:"font-semibold",children:["#",n.id]}),r.jsx(Mn,{variant:l(n.status),size:"sm",children:n.status})]}),r.jsx(xn,{variant:"lg"===a?"h5":"sm"===a?"body1":"h6",className:"font-bold",children:s(n.total)}),n.date&&r.jsx(xn,{variant:"caption",className:"text-neutral-500",children:d(n.date)})]});case"modern":return r.jsxs(dn,{direction:"column",gap:"md",children:[r.jsxs(dn,{justify:"between",align:"start",children:[r.jsxs(dn,{direction:"column",gap:"xs",children:[r.jsxs(xn,{variant:"lg"===a?"h5":"sm"===a?"body1":"h6",className:"font-bold",children:["Order #",n.id]}),n.customer&&r.jsxs(dn,{align:"center",gap:"xs",children:[r.jsx(Y,{size:14,className:"text-neutral-400"}),r.jsx(xn,{variant:"caption",className:"text-neutral-600",children:n.customer.name||n.customer.email})]})]}),r.jsx(Mn,{variant:l(n.status),children:n.status})]}),r.jsxs(dn,{justify:"between",align:"center",children:[r.jsx(xn,{variant:"lg"===a?"h4":"sm"===a?"h6":"h5",className:"font-bold",children:s(n.total)}),n.date&&r.jsxs(dn,{align:"center",gap:"xs",children:[r.jsx(u,{size:14,className:"text-neutral-400"}),r.jsx(xn,{variant:"caption",className:"text-neutral-500",children:d(n.date)})]})]}),c(),n.actions&&n.actions.length>0&&r.jsx(dn,{gap:"sm",children:n.actions.slice(0,2).map((n,e)=>r.jsx(br,{variant:n.variant||(0===e?"primary":"ghost"),size:"sm",onClick:n.onClick,href:n.href,style:{flex:1},children:n.label},e))})]});case"compact":return r.jsxs(dn,{align:"center",justify:"between",gap:"md",children:[r.jsxs(dn,{direction:"column",gap:"xs",children:[r.jsxs(xn,{variant:"lg"===a?"body1":"sm"===a?"caption":"body2",className:"font-medium",children:["#",n.id]}),r.jsx(xn,{variant:"lg"===a?"h6":"sm"===a?"body2":"body1",className:"font-bold",children:s(n.total)})]}),r.jsxs(dn,{direction:"column",align:"end",gap:"xs",children:[r.jsx(Mn,{variant:l(n.status),size:"sm",children:n.status}),n.date&&r.jsx(xn,{variant:"caption",className:"text-neutral-500",children:d(n.date)})]})]});default:return r.jsxs(dn,{direction:"column",gap:"sm",children:[r.jsxs(xn,{variant:"h6",className:"font-semibold",children:["Order #",n.id]}),r.jsx(xn,{variant:"h5",className:"font-bold",children:s(n.total)}),r.jsx(Mn,{variant:l(n.status),children:n.status})]})}})()})};ar(".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 Ln=i.default.forwardRef(({src:e,alt:t="",size:a,shape:o="circle",fallback:i="?",onImageError:l,onImageLoad:s,imgProps:d,statusIndicator:c,statusPosition:x="bottom-right",className:v="",...m},p)=>{const{theme:h}=gr(),u=a||h.defaultSize||"md",[g,f]=n.useState(!1),b=["vtx-avatar",`vtx-avatar--${u}`,`vtx-avatar--${o}`,c&&"vtx-avatar--with-status",v].filter(Boolean).join(" "),w=e&&!g,y=i.slice(0,2).toUpperCase();return r.jsxs("div",{ref:p,className:b,role:"img","aria-label":t||i||"Avatar",...m,children:[w?r.jsx("img",{src:e,alt:t,className:"vtx-avatar-image",onError:r=>{f(!0),null==l||l(r)},onLoad:r=>{null==s||s(r)},loading:"lazy",...d}):r.jsx("span",{className:"vtx-avatar-fallback","aria-hidden":"true",children:y}),c&&r.jsx("span",{className:`vtx-avatar-status vtx-avatar-status--${x}`,"aria-label":"Status indicator",children:c})]})});Ln.displayName="Avatar";const Rn=tr(Ln),Fn=({data:n,theme:e,variant:t="primary",size:a="md",className:o="",style:i})=>{const l=n=>n.avatar?r.jsx(Rn,{src:"string"==typeof n.avatar?n.avatar:n.avatar.src,alt:"string"==typeof n.avatar?n.title:n.avatar.alt,size:"lg"===a?"md":"sm"}):null,s=n=>n.actions&&0!==n.actions.length?r.jsx(dn,{gap:"xs",children:n.actions.slice(0,2).map((n,e)=>r.jsx(br,{variant:"error"===n.variant?"danger":n.variant||"ghost",size:"sm",onClick:n.onClick,href:n.href,children:n.label},e))}):null;return r.jsx(Cn,{variant:"elevated",className:["vtx-list-widget",`vtx-list-widget--${e}`,`vtx-list-widget--${a}`,`vtx-list-widget--${t}`,o].filter(Boolean).join(" "),style:i,padding:"lg",children:(()=>{const e=n.maxItems?n.items.slice(0,n.maxItems):n.items;return r.jsxs(dn,{direction:"column",gap:"sm",children:[n.title&&r.jsx(xn,{variant:"h6",className:"font-semibold mb-2",children:n.title}),e.map((t,o)=>r.jsxs("div",{children:[r.jsxs(dn,{align:"start",gap:"md",className:"py-2",children:[l(t),r.jsxs(dn,{direction:"column",gap:"xs",style:{flex:1},children:[r.jsxs(dn,{justify:"between",align:"start",children:[r.jsxs(dn,{direction:"column",gap:"xs",children:[r.jsx(xn,{variant:"lg"===a?"body1":"body2",className:"font-medium",children:t.title}),t.subtitle&&r.jsx(xn,{variant:"caption",className:"text-neutral-600",children:t.subtitle}),t.description&&r.jsx(xn,{variant:"caption",className:"text-neutral-500",children:t.description})]}),r.jsxs(dn,{align:"center",gap:"sm",children:[t.badge&&r.jsx(Mn,{variant:"error"===t.badge.variant?"error":t.badge.variant||"neutral",size:"sm",children:t.badge.text}),s(t)]})]}),t.metadata&&Object.keys(t.metadata).length>0&&r.jsx(dn,{gap:"md",children:Object.entries(t.metadata).map(([n,e])=>r.jsxs(xn,{variant:"caption",className:"text-neutral-500",children:[r.jsxs("span",{className:"font-medium",children:[n,":"]})," ",String(e)]},n))})]})]}),n.showDividers&&o<e.length-1&&r.jsx("div",{className:"border-b border-neutral-200 my-2"})]},t.id||o)),n.maxItems&&n.items.length>n.maxItems&&r.jsxs(xn,{variant:"caption",className:"text-neutral-500 text-center mt-2",children:["+",n.items.length-n.maxItems," more items"]})]})})()})};ar("/* Link Component Styles */\r\n\r\n.vtx-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-1);\r\n font-family: var(--vtx-font-family-sans);\r\n text-decoration: none;\r\n cursor: pointer;\r\n transition: color var(--vtx-transition-base), opacity var(--vtx-transition-base);\r\n position: relative;\r\n}\r\n\r\n.vtx-link:hover {\r\n opacity: 0.8;\r\n text-decoration: underline;\r\n text-underline-offset: 2px;\r\n}\r\n\r\n.vtx-link:active {\r\n opacity: 0.6;\r\n}\r\n\r\n.vtx-link:focus-visible {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 2px;\r\n border-radius: 2px;\r\n}\r\n\r\n/* Disabled state */\r\n.vtx-link--disabled {\r\n cursor: not-allowed;\r\n opacity: 0.5;\r\n pointer-events: none;\r\n}\r\n\r\n/* No underline variant */\r\n.vtx-link--no-underline {\r\n text-decoration: none;\r\n}\r\n\r\n.vtx-link--no-underline:hover {\r\n text-decoration: underline;\r\n}\r\n\r\n/* Color variants */\r\n.vtx-link--primary {\r\n color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-link--primary:hover {\r\n color: var(--vtx-color-primary-700);\r\n}\r\n\r\n.vtx-link--secondary {\r\n color: var(--vtx-color-secondary-600);\r\n}\r\n\r\n.vtx-link--secondary:hover {\r\n color: var(--vtx-color-secondary-700);\r\n}\r\n\r\n.vtx-link--neutral {\r\n color: var(--vtx-color-neutral-700);\r\n}\r\n\r\n.vtx-link--neutral:hover {\r\n color: var(--vtx-color-neutral-900);\r\n}\r\n\r\n.vtx-link--inherit {\r\n color: inherit;\r\n}\r\n\r\n/* Text variants (sizes) */\r\n.vtx-link--h1 {\r\n font-size: var(--vtx-font-size-4xl);\r\n font-weight: var(--vtx-font-weight-bold);\r\n line-height: var(--vtx-line-height-tight);\r\n}\r\n\r\n.vtx-link--h2 {\r\n font-size: var(--vtx-font-size-3xl);\r\n font-weight: var(--vtx-font-weight-bold);\r\n line-height: var(--vtx-line-height-tight);\r\n}\r\n\r\n.vtx-link--h3 {\r\n font-size: var(--vtx-font-size-2xl);\r\n font-weight: var(--vtx-font-weight-semibold);\r\n line-height: var(--vtx-line-height-tight);\r\n}\r\n\r\n.vtx-link--h4 {\r\n font-size: var(--vtx-font-size-xl);\r\n font-weight: var(--vtx-font-weight-semibold);\r\n line-height: var(--vtx-line-height-snug);\r\n}\r\n\r\n.vtx-link--h5 {\r\n font-size: var(--vtx-font-size-lg);\r\n font-weight: var(--vtx-font-weight-semibold);\r\n line-height: var(--vtx-line-height-snug);\r\n}\r\n\r\n.vtx-link--h6 {\r\n font-size: var(--vtx-font-size-base);\r\n font-weight: var(--vtx-font-weight-semibold);\r\n line-height: var(--vtx-line-height-normal);\r\n}\r\n\r\n.vtx-link--body1 {\r\n font-size: var(--vtx-font-size-base);\r\n font-weight: var(--vtx-font-weight-normal);\r\n line-height: var(--vtx-line-height-relaxed);\r\n}\r\n\r\n.vtx-link--body2 {\r\n font-size: var(--vtx-font-size-sm);\r\n font-weight: var(--vtx-font-weight-normal);\r\n line-height: var(--vtx-line-height-relaxed);\r\n}\r\n\r\n.vtx-link--caption {\r\n font-size: var(--vtx-font-size-xs);\r\n font-weight: var(--vtx-font-weight-normal);\r\n line-height: var(--vtx-line-height-normal);\r\n}\r\n\r\n.vtx-link--small {\r\n font-size: var(--vtx-font-size-xs);\r\n font-weight: var(--vtx-font-weight-normal);\r\n line-height: var(--vtx-line-height-tight);\r\n}\r\n\r\n/* Icons */\r\n.vtx-link__icon-left,\r\n.vtx-link__icon-right {\r\n display: inline-flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-link__content {\r\n display: inline-flex;\r\n align-items: center;\r\n}\r\n\r\n/* Dark mode support */\r\n[data-theme='dark'] .vtx-link--primary {\r\n color: var(--vtx-color-primary-400);\r\n}\r\n\r\n[data-theme='dark'] .vtx-link--primary:hover {\r\n color: var(--vtx-color-primary-300);\r\n}\r\n\r\n[data-theme='dark'] .vtx-link--secondary {\r\n color: var(--vtx-color-secondary-400);\r\n}\r\n\r\n[data-theme='dark'] .vtx-link--secondary:hover {\r\n color: var(--vtx-color-secondary-300);\r\n}\r\n\r\n[data-theme='dark'] .vtx-link--neutral {\r\n color: var(--vtx-color-neutral-300);\r\n}\r\n\r\n[data-theme='dark'] .vtx-link--neutral:hover {\r\n color: var(--vtx-color-neutral-100);\r\n}\r\n\r\n/* Reduced motion */\r\n@media (prefers-reduced-motion: reduce) {\r\n .vtx-link {\r\n transition: none;\r\n }\r\n}\r\n");const An=i.default.forwardRef(({children:n,href:e,component:t,componentProps:a={},variant:o="body1",noUnderline:i=!1,disabled:l=!1,color:s="primary",leftIcon:d,rightIcon:c,external:x=!1,className:v="",target:m,rel:p,...h},u)=>{const g=["vtx-link",`vtx-link--${o}`,`vtx-link--${s}`,i&&"vtx-link--no-underline",l&&"vtx-link--disabled",v].filter(Boolean).join(" "),f=r.jsxs(r.Fragment,{children:[d&&r.jsx("span",{className:"vtx-link__icon-left",children:d}),r.jsx("span",{className:"vtx-link__content",children:n}),c&&r.jsx("span",{className:"vtx-link__icon-right",children:c})]});if(t){const n=t;return r.jsx(n,{ref:u,className:g,"aria-disabled":l,...a,...h,children:f})}const b=x?"_blank":m,w=x?"noopener noreferrer":p;return r.jsx("a",{ref:u,href:l?void 0:e,target:b,rel:w,className:g,"aria-disabled":l,onClick:l?r=>r.preventDefault():h.onClick,...h,children:f})});An.displayName="Link";const En=tr(An),Bn=({data:n,theme:e,variant:t="primary",size:a="md",className:o="",style:i})=>{const l=r=>{if("lg"===a)switch(r){case"title":return"h1"===n.variant?"h1":"h2"===n.variant?"h2":"h3"===n.variant?"h3":"h4";case"content":return"body1";case"caption":return"body2"}if("sm"===a)switch(r){case"title":return"h1"===n.variant?"h3":"h2"===n.variant?"h4":"h3"===n.variant?"h5":"h6";case"content":return"body2";case"caption":return"caption"}switch(r){case"title":return"h1"===n.variant?"h2":"h2"===n.variant?"h3":"h3"===n.variant?"h4":"h5";case"content":return"body1";case"caption":return"body2"}};return r.jsx(Cn,{variant:"outlined",className:["vtx-text-widget",`vtx-text-widget--${e}`,`vtx-text-widget--${a}`,`vtx-text-widget--${t}`,n.alignment&&`vtx-text-widget--${n.alignment}`,o].filter(Boolean).join(" "),style:{...i,backgroundColor:n.backgroundColor,textAlign:n.alignment||"left"},padding:"lg",children:r.jsxs(dn,{direction:"column",gap:"md",children:[n.title&&r.jsx(xn,{variant:l("title"),className:"font-bold",style:{color:n.titleColor},children:n.title}),n.content&&r.jsx(xn,{variant:l("content"),className:"text-neutral-700 leading-relaxed",style:{color:n.contentColor},children:n.content}),n.caption&&r.jsx(xn,{variant:l("caption"),className:"text-neutral-500",style:{color:n.captionColor},children:n.caption}),n.actions&&n.actions.length>0&&r.jsx(dn,{gap:"sm",children:n.actions.map((n,e)=>"link"===n.type?r.jsx(En,{href:n.href,variant:n.variant||t,children:n.label},e):r.jsx(br,{variant:"error"===n.variant?"danger":n.variant||(0===e?"primary":"ghost"),size:"lg"===a?"md":"sm",onClick:n.onClick,href:n.href,children:n.label},e))})]})})};ar("/* Breadcrumb Component Styles */\r\n\r\n.vtx-breadcrumb {\r\n display: block;\r\n}\r\n\r\n.vtx-breadcrumb-list {\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n gap: var(--vtx-spacing-1);\r\n list-style: none;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n/* Responsive display */\r\n.vtx-breadcrumb-list--mobile {\r\n display: none;\r\n}\r\n\r\n.vtx-breadcrumb-list--desktop {\r\n display: flex;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .vtx-breadcrumb-list--desktop {\r\n display: none;\r\n }\r\n \r\n .vtx-breadcrumb-list--mobile {\r\n display: flex;\r\n }\r\n}\r\n\r\n/* Breadcrumb Item */\r\n.vtx-breadcrumb-item {\r\n display: inline-flex;\r\n align-items: center;\r\n}\r\n\r\n.vtx-breadcrumb-item-content,\r\n.vtx-breadcrumb-item-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-0-5);\r\n color: var(--vtx-color-neutral-600);\r\n text-decoration: none !important;\r\n transition: color var(--vtx-transition-base);\r\n}\r\n\r\n.vtx-breadcrumb-item-link {\r\n cursor: pointer;\r\n}\r\n\r\n.vtx-breadcrumb-item-link:hover {\r\n color: var(--vtx-color-primary-600);\r\n text-decoration: none !important;\r\n}\r\n\r\n.vtx-breadcrumb-item-link:focus-visible {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 2px;\r\n border-radius: 2px;\r\n}\r\n\r\n/* Active item */\r\n.vtx-breadcrumb-item--active .vtx-breadcrumb-item-content {\r\n color: var(--vtx-color-neutral-900);\r\n font-weight: var(--vtx-font-weight-medium);\r\n}\r\n\r\n/* Ellipsis */\r\n.vtx-breadcrumb-item--ellipsis .vtx-breadcrumb-item-content {\r\n color: var(--vtx-color-neutral-500);\r\n cursor: default;\r\n user-select: none;\r\n}\r\n\r\n/* Icon */\r\n.vtx-breadcrumb-item-icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n line-height: 1;\r\n margin-right: 5px;\r\n}\r\n\r\n/* Label - ensure proper alignment with Text component */\r\n.vtx-breadcrumb-item-label {\r\n display: inline-flex;\r\n align-items: center;\r\n line-height: 1 !important;\r\n margin: 0 !important;\r\n}\r\n\r\n/* Separator */\r\n.vtx-breadcrumb-separator {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--vtx-color-neutral-400);\r\n user-select: none;\r\n line-height: 1;\r\n}\r\n");const On=i.default.forwardRef(({items:n,separator:e=r.jsx(N,{size:16}),linkComponent:t,maxItems:a,size:o,className:l="",separatorClassName:s=""},d)=>{const{theme:c}=gr(),x=o||c.defaultSize,v=i.default.useMemo(()=>{if(!a||n.length<=a)return n;return[n[0],{label:"...",active:!1},...n.slice(-(a-2))]},[n,a]),m=i.default.useMemo(()=>{if(n.length<=2)return n;return[n[0],{label:"...",active:!1},n[n.length-1]]},[n]),p=["vtx-breadcrumb",`vtx-breadcrumb--${x}`,l].filter(Boolean).join(" "),h=["vtx-breadcrumb-separator",s].filter(Boolean).join(" "),u=(n,e)=>{const a=e===v.length-1,o=n.active||a,i="..."===n.label,l=["vtx-breadcrumb-item",o&&"vtx-breadcrumb-item--active",i&&"vtx-breadcrumb-item--ellipsis"].filter(Boolean).join(" "),s=r.jsxs(r.Fragment,{children:[n.icon&&r.jsx("span",{className:"vtx-breadcrumb-item-icon",children:n.icon}),n.label&&r.jsx(xn,{as:"span",variant:"body2",className:"vtx-breadcrumb-item-label",children:n.label})]});if(i)return r.jsx("li",{className:l,children:r.jsx("span",{className:"vtx-breadcrumb-item-content",children:n.label})},e);if(o)return r.jsx("li",{className:l,"aria-current":"page",children:r.jsx("span",{className:"vtx-breadcrumb-item-content",children:s})},e);return n.href||n.linkProps?r.jsx("li",{className:l,children:r.jsx(En,{href:n.href,component:t,componentProps:n.linkProps,className:"vtx-breadcrumb-item-link",color:"inherit",children:s})},e):r.jsx("li",{className:l,children:r.jsx("span",{className:"vtx-breadcrumb-item-content",children:s})},e)};return r.jsxs("nav",{ref:d,className:p,"aria-label":"Breadcrumb",children:[r.jsx("ol",{className:"vtx-breadcrumb-list vtx-breadcrumb-list--desktop",children:v.map((n,t)=>r.jsxs(i.default.Fragment,{children:[u(n,t),t<v.length-1&&r.jsx("li",{className:h,"aria-hidden":"true",children:e})]},t))}),r.jsx("ol",{className:"vtx-breadcrumb-list vtx-breadcrumb-list--mobile",children:m.map((n,t)=>r.jsxs(i.default.Fragment,{children:[u(n,t),t<m.length-1&&r.jsx("li",{className:h,"aria-hidden":"true",children:e})]},t))})]})});On.displayName="Breadcrumb";const Wn=tr(On),Pn=({data:n,theme:e,variant:t="primary",size:a="md",className:o="",style:i})=>{const l=()=>"lg"===a?"h1":"sm"===a?"h3":"h2",s=()=>"lg"===a?"h5":"sm"===a?"body2":"h6",d=()=>n.breadcrumbs&&0!==n.breadcrumbs.length?r.jsx(Wn,{items:n.breadcrumbs.map(r=>({label:String(r.label),href:r.href,onClick:r.onClick})),size:"lg"===a?"md":"sm"}):null,c=()=>n.avatar?r.jsx(Rn,{src:"string"==typeof n.avatar?n.avatar:n.avatar.src,alt:"string"==typeof n.avatar?String(n.title):n.avatar.alt,size:"lg"===a?"lg":"sm"===a?"sm":"md"}):null,x=()=>n.actions&&0!==n.actions.length?r.jsx(dn,{gap:"sm",children:n.actions.map((n,e)=>"link"===n.type?r.jsx(En,{href:n.href,variant:n.variant||t,className:"font-medium",children:n.label},e):r.jsx(br,{variant:"error"===n.variant?"danger":n.variant||(0===e?"primary":"outline"),size:"lg"===a?"lg":"sm"===a?"sm":"md",onClick:n.onClick,href:n.href,children:n.label},e))}):null,v=()=>n.badges&&0!==n.badges.length?r.jsx(dn,{gap:"xs",children:n.badges.map((n,e)=>r.jsx(Mn,{variant:"error"===n.variant?"error":n.variant||t,size:"lg"===a?"md":"sm",children:n.text},e))}):null;return r.jsx(Cn,{variant:"outlined",className:["vtx-header-widget",`vtx-header-widget--${e}`,`vtx-header-widget--${a}`,`vtx-header-widget--${t}`,o].filter(Boolean).join(" "),style:{...i,backgroundColor:n.backgroundColor},padding:"minimal"===e?"md":"compact"===e?"sm":"lg",children:(()=>{switch(e){case"minimal":return r.jsxs(dn,{direction:"column",gap:"sm",children:[d(),r.jsxs(dn,{align:"center",justify:"between",gap:"md",children:[r.jsxs(dn,{align:"center",gap:"sm",children:[c(),r.jsxs(dn,{direction:"column",children:[r.jsx(xn,{variant:l(),className:"font-bold",children:n.title}),n.subtitle&&r.jsx(xn,{variant:s(),className:"text-neutral-600",children:n.subtitle})]})]}),x()]}),v()]});case"modern":return r.jsxs(dn,{direction:"column",gap:"lg",children:[d(),r.jsxs(dn,{align:"start",justify:"between",gap:"lg",children:[r.jsxs(dn,{direction:"column",gap:"md",children:[r.jsxs(dn,{align:"center",gap:"md",children:[c(),r.jsxs(dn,{direction:"column",gap:"xs",children:[r.jsx(xn,{variant:l(),className:"font-bold",children:n.title}),n.subtitle&&r.jsx(xn,{variant:s(),className:"text-neutral-700",children:n.subtitle}),n.description&&r.jsx(xn,{variant:"body2",className:"text-neutral-600",children:n.description})]})]}),v(),n.metadata&&r.jsx(dn,{gap:"lg",children:Object.entries(n.metadata).map(([n,e])=>r.jsxs(dn,{direction:"column",gap:"xs",children:[r.jsx(xn,{variant:"caption",className:"text-neutral-500 uppercase font-medium",children:n}),r.jsx(xn,{variant:"body2",className:"font-medium",children:String(e)})]},n))})]}),x()]})]});case"compact":return r.jsxs(dn,{direction:"column",gap:"xs",children:[d(),r.jsxs(dn,{align:"center",justify:"between",gap:"md",children:[r.jsxs(dn,{align:"center",gap:"sm",children:[c(),r.jsxs(dn,{direction:"column",children:[r.jsx(xn,{variant:l(),className:"font-semibold",children:n.title}),n.subtitle&&r.jsx(xn,{variant:"caption",className:"text-neutral-500",children:n.subtitle})]})]}),r.jsxs(dn,{align:"center",gap:"xs",children:[v(),n.actions&&n.actions.length>0&&r.jsx(br,{variant:"error"===n.actions[0].variant?"danger":n.actions[0].variant||"primary",size:"sm",onClick:n.actions[0].onClick,href:n.actions[0].href,children:n.actions[0].label})]})]})]});default:return r.jsxs(dn,{direction:"column",gap:"md",children:[r.jsx(xn,{variant:l(),className:"font-bold",children:n.title}),n.subtitle&&r.jsx(xn,{variant:s(),className:"text-neutral-600",children:n.subtitle}),v(),x()]})}})()})},Hn=()=>{const{theme:r,setMode:n}=gr();return{tokens:r.tokens,mode:r.mode,setMode:n}},Vn=({data:e,className:t="",style:a,borderRadius:o=!1,carouselComponent:i,slideComponent:l,imageComponent:s="img",carouselProps:d={},imageProps:c={}})=>{var x,v,m,p,h,u,g;const{tokens:f}=Hn(),[b,w]=n.useState(0),{slides:y=[],overlayTheme:k="dark",height:_="60vh",minHeight:z="350px",maxHeight:C="600px",showOverlay:S=!0}=e,M={navigation:{enabled:!0},pagination:{enabled:!0,clickable:!0,type:"bullets"},autoplay:{enabled:!0,delay:5e3,disableOnInteraction:!1,pauseOnMouseEnter:!0},loop:!0,effect:"slide",speed:600,...e.swiperConfig},$=n.useCallback((r,n)=>{var e,t,a,o;return(null===(e=r.seo)||void 0===e?void 0:e.structuredData)?{"@context":"https://schema.org","@type":"ImageObject",url:r.image.src,description:r.image.alt||(null===(t=r.caption)||void 0===t?void 0:t.description),name:null===(a=r.caption)||void 0===a?void 0:a.heading,caption:null===(o=r.caption)||void 0===o?void 0:o.description,position:n+1,...r.seo.structuredData}:null},[]),T=n.useCallback(r=>{r&&window.open(r,"_blank","noopener,noreferrer")},[]);if(!y||0===y.length)return r.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"300px",color:(null===(v=null===(x=null==f?void 0:f.colors)||void 0===x?void 0:x.neutral)||void 0===v?void 0:v[500])||"#666"},children:"No slides available"});const D={width:"100%",height:`clamp(${z}, ${_}, ${C})`,position:"relative",overflow:"hidden",...o&&{borderRadius:(null===(m=null==f?void 0:f.borderRadius)||void 0===m?void 0:m.lg)||"8px"},...a},I={position:"relative",width:"100%",height:"100%",background:(null===(h=null===(p=null==f?void 0:f.colors)||void 0===p?void 0:p.neutral)||void 0===h?void 0:h[50])||"#f5f5f5"},L={width:"100%",height:"100%",objectFit:"cover",userSelect:"none"},R={position:"absolute",top:0,left:0,width:"100%",height:"100%",zIndex:1,pointerEvents:"none",transition:"opacity 0.3s ease",background:"dark"===k?"linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.7) 100%)":"linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.6) 100%)"},F=(r="right")=>{var n;const e=S?{}:{backdropFilter:"blur(8px)",background:"rgba(0, 0, 0, 0.45)",borderRadius:(null===(n=null==f?void 0:f.borderRadius)||void 0===n?void 0:n.lg)||"8px",boxShadow:"0 8px 32px rgba(0, 0, 0, 0.3)"};return{position:"absolute",display:"flex",flexDirection:"column",top:"50%",color:"#fff",maxWidth:"min(90%, 550px)",zIndex:3,padding:"clamp(16px, 3vw, 32px)",transform:"translateY(-50%)",...{left:{textAlign:"left",justifyContent:"flex-start",alignItems:"flex-start",left:"clamp(20px, 8%, 80px)"},center:{textAlign:"center",justifyContent:"center",alignItems:"center",left:"50%",transform:"translate(-50%, -50%)"},right:{textAlign:"right",justifyContent:"flex-end",alignItems:"flex-end",right:"clamp(20px, 8%, 80px)"}}[r],...e}},A=(n,e)=>{const t=$(n,e),a=s;return r.jsxs("div",{style:I,children:[t&&r.jsx("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify(t)}}),r.jsx("div",{style:{position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:r.jsx(a,{src:n.image.src,alt:n.image.alt,style:L,loading:n.image.priority||0===e?"eager":"lazy",...c})}),S&&r.jsx("div",{style:R}),n.caption&&r.jsx("div",{style:F(n.caption.position),children:r.jsxs("div",{style:{width:"100%"},children:[n.caption.heading&&r.jsx("h2",{style:{color:"#fff",textShadow:"2px 2px 8px rgba(0, 0, 0, 0.5)",fontWeight:700,fontSize:"clamp(24px, 5vw, 48px)",lineHeight:1.2,margin:"0 0 clamp(12px, 2vw, 16px) 0"},children:n.caption.heading}),n.caption.subheading&&r.jsx("h3",{style:{color:"#fff",textShadow:"2px 2px 8px rgba(0, 0, 0, 0.5)",fontWeight:500,fontSize:"clamp(18px, 3vw, 32px)",lineHeight:1.3,margin:"0 0 clamp(12px, 2vw, 16px) 0"},children:n.caption.subheading}),n.caption.description&&r.jsx("p",{style:{fontSize:"clamp(14px, 2vw, 18px)",lineHeight:1.6,textShadow:"1px 1px 4px rgba(0, 0, 0, 0.6)",color:"#fff",margin:"0 0 clamp(20px, 2.5vw, 24px) 0"},children:n.caption.description}),n.caption.buttonText&&r.jsx("div",{style:{display:"inline-block"},children:r.jsx(br,{variant:"primary",size:"md",onClick:()=>{var r;return T(null===(r=n.caption)||void 0===r?void 0:r.buttonUrl)},style:{fontSize:"clamp(14px, 1.8vw, 16px)",padding:"clamp(10px, 1.5vw, 14px) clamp(20px, 3vw, 32px)",transition:"all 0.3s ease"},children:n.caption.buttonText})})]})})]},n.id||e)};if(i&&l){const n=i,e=l;return r.jsx("div",{className:t,style:D,children:r.jsx(n,{...d,children:y.map((n,t)=>r.jsx(e,{children:A(n,t)},n.id||t))})})}return r.jsxs("div",{className:t,style:D,children:[r.jsx("div",{style:{position:"relative",width:"100%",height:"100%",transform:`translateX(-${100*b}%)`,transition:"transform 0.3s ease",display:"flex"},children:y.map((n,e)=>r.jsx("div",{style:{minWidth:"100%",height:"100%"},children:A(n,e)},n.id||e))}),y.length>1&&(null===(u=M.navigation)||void 0===u?void 0:u.enabled)&&r.jsxs(r.Fragment,{children:[r.jsx("button",{onClick:()=>{w(r=>(r-1+y.length)%y.length)},style:{position:"absolute",left:"20px",top:"50%",transform:"translateY(-50%)",backgroundColor:"#ffffff",borderRadius:"50%",width:"44px",height:"44px",border:"none",display:"flex",alignItems:"center",justifyContent:"center",color:"#000000",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.15)",cursor:"pointer",zIndex:10,fontSize:"16px",fontWeight:"bold"},"aria-label":"Previous slide",children:r.jsx(j,{size:24})}),r.jsx("button",{onClick:()=>{w(r=>(r+1)%y.length)},style:{position:"absolute",right:"20px",top:"50%",transform:"translateY(-50%)",backgroundColor:"#ffffff",borderRadius:"50%",width:"44px",height:"44px",border:"none",display:"flex",alignItems:"center",justifyContent:"center",color:"#000000",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.15)",cursor:"pointer",zIndex:10,fontSize:"16px",fontWeight:"bold"},"aria-label":"Next slide",children:r.jsx(N,{size:24})})]}),y.length>1&&(null===(g=M.pagination)||void 0===g?void 0:g.enabled)&&r.jsx("div",{style:{position:"absolute",bottom:"20px",left:"50%",transform:"translateX(-50%)",display:"flex",gap:"8px",zIndex:10},children:y.map((n,e)=>r.jsx("button",{onClick:()=>(r=>{w(r)})(e),style:{width:b===e?"32px":"12px",height:"12px",borderRadius:b===e?"6px":"50%",border:"none",backgroundColor:b===e?"#fff":"#bdbdbd",cursor:"pointer",transition:"all 0.3s ease"},"aria-label":`Go to slide ${e+1}`},e))})]})},Yn=({data:e,className:t="",theme:a="card",style:o,autoplay:l=!1,autoplayDelay:s=5e3,borderRadius:d=!0,authorPosition:c="top"})=>{var x,v,m,p,h,u,g,f,b,w,y,k;const{tokens:_}=Hn(),[z,C]=n.useState(0),{testimonials:S,showNavigation:M=!0,showDots:$=!0}=e;i.default.useEffect(()=>{if(!l||S.length<=1)return;const r=setInterval(()=>{C(r=>(r+1)%S.length)},s);return()=>clearInterval(r)},[l,s,S.length]);const T=n.useCallback(()=>{C(r=>(r+1)%S.length)},[S.length]),D=n.useCallback(()=>{C(r=>(r-1+S.length)%S.length)},[S.length]),I=n.useCallback(r=>{C(r)},[]);if(!S||0===S.length)return r.jsx(dn,{justify:"center",align:"center",style:{padding:"48px 24px"},children:r.jsx(xn,{variant:"body1",color:(null===(v=null===(x=null==_?void 0:_.colors)||void 0===x?void 0:x.neutral)||void 0===v?void 0:v[500])||"#666",children:"No testimonials available"})});const L=S[z],R=(()=>{var r,n,e,t,i,l,s;const c={position:"relative",width:"100%",padding:"48px 32px",minHeight:"400px",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden",...d&&{borderRadius:(null===(r=null==_?void 0:_.borderRadius)||void 0===r?void 0:r.xl)||"16px"},transition:"all 0.3s ease",...o};switch(a){case"minimal":return{...c,background:"transparent",padding:"48px 24px"};case"card":return{...c,background:"#ffffff",border:`1px solid ${(null===(e=null===(n=null==_?void 0:_.colors)||void 0===n?void 0:n.neutral)||void 0===e?void 0:e[200])||"#e5e7eb"}`,boxShadow:"0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)"};case"gradient":return{...c,background:"linear-gradient(135deg, #667eea 0%, #764ba2 100%)",color:"#ffffff",boxShadow:"0 10px 40px rgba(102, 126, 234, 0.25)"};case"modern":return{...c,background:(null===(i=null===(t=null==_?void 0:_.colors)||void 0===t?void 0:t.neutral)||void 0===i?void 0:i[900])||"#111827",color:"#ffffff",boxShadow:"0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.08)"};case"professional":return{...c,background:"#ffffff",border:`1px solid ${(null===(s=null===(l=null==_?void 0:_.colors)||void 0===l?void 0:l.neutral)||void 0===s?void 0:s[200])||"#e5e7eb"}`,boxShadow:"0 10px 30px rgba(0, 0, 0, 0.08)"};case"glassmorphism":return{...c,background:"rgba(255, 255, 255, 0.15)",backdropFilter:"blur(20px)",border:"1px solid rgba(255, 255, 255, 0.25)",boxShadow:"0 8px 32px 0 rgba(31, 38, 135, 0.37)"};default:return c}})(),F=(()=>{var r,n;return"gradient"===a||"modern"===a?"#ffffff":"glassmorphism"===a?"#1f2937":(null===(n=null===(r=null==_?void 0:_.colors)||void 0===r?void 0:r.neutral)||void 0===n?void 0:n[900])||"#111827"})(),A=(()=>{var r,n;return"gradient"===a||"modern"===a?"rgba(255, 255, 255, 0.8)":"glassmorphism"===a?"#4b5563":(null===(n=null===(r=null==_?void 0:_.colors)||void 0===r?void 0:r.neutral)||void 0===n?void 0:n[600])||"#4b5563"})(),E=()=>{var n,e;return r.jsxs(dn,{direction:"column",align:"center",gap:"8px",children:[L.author.avatar&&r.jsx(Rn,{src:L.author.avatar,alt:L.author.name,size:"lg",style:{width:"80px",height:"80px",border:"gradient"===a||"modern"===a?"3px solid rgba(255, 255, 255, 0.2)":`3px solid ${(null===(e=null===(n=null==_?void 0:_.colors)||void 0===n?void 0:n.neutral)||void 0===e?void 0:e[200])||"#e5e7eb"}`,boxShadow:"0 4px 12px rgba(0, 0, 0, 0.1)"}}),r.jsx(xn,{variant:"h4",weight:"bold",color:F,align:"center",style:{fontSize:"20px",margin:0,lineHeight:1.3},children:L.author.name}),r.jsxs(dn,{direction:"column",align:"center",gap:"2px",children:[L.author.role&&r.jsx(xn,{variant:"body2",color:A,align:"center",style:{fontSize:"14px",lineHeight:1.4},children:L.author.role}),L.author.company&&r.jsx(xn,{variant:"body2",weight:"medium",color:A,align:"center",style:{fontSize:"14px",lineHeight:1.4},children:L.author.company})]}),L.date&&r.jsx(xn,{variant:"caption",color:A,align:"center",style:{fontSize:"13px",opacity:.7},children:L.date})]})};return r.jsxs("div",{className:t,style:R,children:[r.jsxs(dn,{direction:"column",align:"center",justify:"center",gap:"32px",style:{maxWidth:"800px",width:"100%",margin:"0 auto",position:"relative",zIndex:1},children:["top"===c&&E(),r.jsx("div",{style:{fontSize:"48px",lineHeight:1,color:"gradient"===a||"modern"===a?"rgba(255, 255, 255, 0.2)":(null===(p=null===(m=null==_?void 0:_.colors)||void 0===m?void 0:m.neutral)||void 0===p?void 0:p[300])||"#d1d5db",fontFamily:"Georgia, serif",marginBottom:"-16px"},children:'"'}),L.content&&r.jsx(xn,{variant:"body1",color:F,align:"center",style:{fontSize:"clamp(18px, 2.5vw, 22px)",lineHeight:1.7,fontWeight:400,maxWidth:"700px"},children:L.content}),L.rating&&r.jsx("div",{style:{marginTop:"-8px"},children:(B=L.rating,r.jsx(dn,{gap:"4px",justify:"minimal"===a?"start":"center",children:[1,2,3,4,5].map(n=>r.jsx("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:n<=B?"#fbbf24":"#e5e7eb",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("path",{d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"})},n))}))}),"bottom"===c&&r.jsx("div",{style:{marginTop:"8px"},children:E()})]}),S.length>1&&M&&r.jsxs(r.Fragment,{children:[r.jsx("button",{onClick:D,style:{position:"absolute",left:"24px",top:"50%",transform:"translateY(-50%)",backgroundColor:"gradient"===a||"modern"===a?"rgba(255, 255, 255, 0.15)":"#ffffff",borderRadius:"50%",width:"48px",height:"48px",border:"gradient"===a||"modern"===a?"none":`2px solid ${(null===(u=null===(h=null==_?void 0:_.colors)||void 0===h?void 0:h.neutral)||void 0===u?void 0:u[200])||"#e5e7eb"}`,display:"flex",alignItems:"center",justifyContent:"center",color:"gradient"===a||"modern"===a?"#ffffff":(null===(f=null===(g=null==_?void 0:_.colors)||void 0===g?void 0:g.neutral)||void 0===f?void 0:f[700])||"#374151",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.12)",cursor:"pointer",zIndex:10,transition:"all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",backdropFilter:"blur(8px)"},"aria-label":"Previous testimonial",onMouseEnter:r=>{r.currentTarget.style.transform="translateY(-50%) scale(1.1)",r.currentTarget.style.boxShadow="0 6px 20px rgba(0, 0, 0, 0.18)"},onMouseLeave:r=>{r.currentTarget.style.transform="translateY(-50%) scale(1)",r.currentTarget.style.boxShadow="0 4px 12px rgba(0, 0, 0, 0.12)"},children:r.jsx(j,{size:24})}),r.jsx("button",{onClick:T,style:{position:"absolute",right:"24px",top:"50%",transform:"translateY(-50%)",backgroundColor:"gradient"===a||"modern"===a?"rgba(255, 255, 255, 0.15)":"#ffffff",borderRadius:"50%",width:"48px",height:"48px",border:"gradient"===a||"modern"===a?"none":`2px solid ${(null===(w=null===(b=null==_?void 0:_.colors)||void 0===b?void 0:b.neutral)||void 0===w?void 0:w[200])||"#e5e7eb"}`,display:"flex",alignItems:"center",justifyContent:"center",color:"gradient"===a||"modern"===a?"#ffffff":(null===(k=null===(y=null==_?void 0:_.colors)||void 0===y?void 0:y.neutral)||void 0===k?void 0:k[700])||"#374151",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.12)",cursor:"pointer",zIndex:10,transition:"all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",backdropFilter:"blur(8px)"},"aria-label":"Next testimonial",onMouseEnter:r=>{r.currentTarget.style.transform="translateY(-50%) scale(1.1)",r.currentTarget.style.boxShadow="0 6px 20px rgba(0, 0, 0, 0.18)"},onMouseLeave:r=>{r.currentTarget.style.transform="translateY(-50%) scale(1)",r.currentTarget.style.boxShadow="0 4px 12px rgba(0, 0, 0, 0.12)"},children:r.jsx(N,{size:24})})]}),S.length>1&&$&&r.jsx(dn,{justify:"center",gap:"12px",style:{position:"absolute",bottom:"32px",left:"50%",transform:"translateX(-50%)",zIndex:10},children:S.map((n,e)=>{var t,o,i,l;return r.jsx("button",{onClick:()=>I(e),style:{width:z===e?"40px":"12px",height:"12px",borderRadius:z===e?"6px":"50%",border:"none",backgroundColor:z===e?"gradient"===a||"modern"===a?"#ffffff":(null===(o=null===(t=null==_?void 0:_.colors)||void 0===t?void 0:t.primary)||void 0===o?void 0:o[600])||"#2563eb":"gradient"===a||"modern"===a?"rgba(255, 255, 255, 0.3)":(null===(l=null===(i=null==_?void 0:_.colors)||void 0===i?void 0:i.neutral)||void 0===l?void 0:l[300])||"#d1d5db",cursor:"pointer",transition:"all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",boxShadow:z===e?"0 2px 8px rgba(0, 0, 0, 0.15)":"none"},"aria-label":`Go to testimonial ${e+1}`,onMouseEnter:r=>{z!==e&&(r.currentTarget.style.transform="scale(1.2)")},onMouseLeave:r=>{r.currentTarget.style.transform="scale(1)"}},e)})})]});var B},qn=({items:e=[],className:t="",style:a,borderRadius:o=!0,autoplay:i=!1,autoplayDelay:l=3e3,itemsPerView:s={mobile:1,tablet:2,desktop:3},gap:d="20px",showNavigation:c=!0,showPagination:x=!0,scrollBehavior:v="page"})=>{const{tokens:m}=Hn(),[p,h]=n.useState(0),[u,g]=n.useState(s.desktop||3);n.useEffect(()=>{const r=()=>{const r=window.innerWidth;g(r<768?s.mobile||1:r<1024?s.tablet||2:s.desktop||3)};return r(),window.addEventListener("resize",r),()=>window.removeEventListener("resize",r)},[s]);const f=Math.ceil(e.length/u),b=e.length-u;n.useEffect(()=>{if(!i||0===e.length)return;const r=setInterval(()=>{y()},l);return()=>clearInterval(r)},[i,l,p,u]);const w=n.useCallback(()=>{h("page"===v?r=>Math.max(0,r-u):r=>Math.max(0,r-1))},[u,v]),y=n.useCallback(()=>{h("page"===v?r=>{const n=r+u;return n>b?0:n}:r=>{const n=r+1;return n>b?0:n})},[u,b,v]),k=n.useCallback(r=>{h(r*u)},[u]),_=()=>Math.floor(p/u),z={position:"relative",width:"100%",overflow:"hidden",padding:"clamp(20px, 4vw, 40px)",backgroundColor:m.colors.neutral[50],borderRadius:o?m.borderRadius.lg:"0",boxShadow:m.shadows.sm,...a},C={display:"flex",gap:"number"==typeof d?`${d}px`:d,transition:"transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)",transform:`translateX(-${p*(100/u)}%)`},S={flex:`0 0 calc((100% - (${"number"==typeof d?`${d}px`:d} * ${u-1})) / ${u})`,minWidth:0},M={position:"absolute",top:"50%",transform:"translateY(-50%)",zIndex:10,backgroundColor:"#ffffff",border:`1px solid ${m.colors.neutral[300]}`,borderRadius:m.borderRadius.full,width:"40px",height:"40px",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",boxShadow:m.shadows.md,transition:"all 0.2s ease"};if(0===e.length)return r.jsx("div",{style:z,children:r.jsx("div",{style:{textAlign:"center",padding:"40px",color:m.colors.neutral[500]},children:"No items to display"})});const $=p>0,T=p<b;return r.jsxs("div",{className:t,style:z,children:[c&&r.jsxs(r.Fragment,{children:[r.jsx("button",{onClick:w,disabled:!$,style:{...M,left:"10px",opacity:$?1:.3,cursor:$?"pointer":"not-allowed"},onMouseEnter:r=>{$&&(r.currentTarget.style.transform="translateY(-50%) scale(1.1)",r.currentTarget.style.backgroundColor=m.colors.neutral[100]||"#f5f5f5")},onMouseLeave:r=>{r.currentTarget.style.transform="translateY(-50%) scale(1)",r.currentTarget.style.backgroundColor="#ffffff"},"aria-label":"Previous",children:r.jsx(j,{style:{width:"20px",height:"20px",color:m.colors.neutral[900]}})}),r.jsx("button",{onClick:y,disabled:!T&&!i,style:{...M,right:"10px",opacity:T||i?1:.3,cursor:T||i?"pointer":"not-allowed"},onMouseEnter:r=>{(T||i)&&(r.currentTarget.style.transform="translateY(-50%) scale(1.1)",r.currentTarget.style.backgroundColor=m.colors.neutral[100]||"#f5f5f5")},onMouseLeave:r=>{r.currentTarget.style.transform="translateY(-50%) scale(1)",r.currentTarget.style.backgroundColor="#ffffff"},"aria-label":"Next",children:r.jsx(N,{style:{width:"20px",height:"20px",color:m.colors.neutral[900]}})})]}),r.jsx("div",{style:C,children:e.map((n,e)=>r.jsx("div",{style:S,children:n},e))}),x&&f>1&&r.jsx("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",gap:"8px",marginTop:"24px"},children:Array.from({length:f}).map((n,e)=>{return r.jsx("div",{onClick:()=>k(e),style:(t=_()===e,{width:t?"24px":"8px",height:"8px",borderRadius:m.borderRadius.full,backgroundColor:t?m.colors.primary[500]:m.colors.neutral[300],cursor:"pointer",transition:"all 0.3s ease",opacity:t?1:.5}),onMouseEnter:r=>{_()!==e&&(r.currentTarget.style.opacity="0.8")},onMouseLeave:r=>{_()!==e&&(r.currentTarget.style.opacity="0.5")},role:"button","aria-label":`Go to page ${e+1}`},e);var t})}),r.jsxs("div",{style:{position:"absolute",left:"-9999px"},"aria-live":"polite","aria-atomic":"true",children:["Showing items ",p+1," to ",Math.min(p+u,e.length)," of ",e.length]})]})};ar("/* ===================================\r\n AdminHeader - Professional Admin Panel Header\r\n =================================== */\r\n\r\n/* CSS Variables for Theming */\r\n:root {\r\n /* Light Theme (Default) */\r\n --vtx-admin-header-bg: var(--vtx-color-neutral-50, #fafafa);\r\n --vtx-admin-header-border: var(--vtx-color-neutral-200, #e5e5e5);\r\n --vtx-admin-header-shadow: var(--vtx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));\r\n \r\n --vtx-admin-header-text: var(--vtx-color-neutral-900, #171717);\r\n --vtx-admin-header-text-secondary: var(--vtx-color-neutral-600, #525252);\r\n \r\n --vtx-admin-header-button-hover: var(--vtx-color-neutral-100, #f5f5f5);\r\n --vtx-admin-header-button-active: var(--vtx-color-neutral-200, #e5e5e5);\r\n \r\n --vtx-admin-header-input-bg: var(--vtx-color-neutral-50, #ffffff);\r\n --vtx-admin-header-input-border: var(--vtx-color-neutral-300, #d4d4d4);\r\n --vtx-admin-header-input-focus: var(--vtx-color-primary-500, #3b82f6);\r\n \r\n --vtx-admin-header-dropdown-bg: var(--vtx-color-neutral-50, #ffffff);\r\n --vtx-admin-header-dropdown-shadow: var(--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 \r\n --vtx-admin-header-transition: var(--vtx-transition-base, 200ms);\r\n}\r\n\r\n/* ===================================\r\n Base Header Structure\r\n =================================== */\r\n\r\n.vtx-admin-header {\r\n display: flex;\r\n flex-direction: column;\r\n background-color: var(--vtx-admin-header-bg);\r\n border-bottom: 1px solid var(--vtx-admin-header-border);\r\n z-index: var(--vtx-z-index-sticky, 1100);\r\n transition: all var(--vtx-admin-header-transition) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-admin-header--sticky {\r\n position: sticky;\r\n top: 0;\r\n}\r\n\r\n.vtx-admin-header--blur {\r\n backdrop-filter: blur(8px);\r\n -webkit-backdrop-filter: blur(8px);\r\n background-color: rgba(var(--vtx-admin-header-bg-rgb, 250, 250, 250), 0.8);\r\n}\r\n\r\n.vtx-admin-header-container {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-4, 1rem);\r\n padding: 0 var(--vtx-spacing-6, 1.5rem);\r\n min-height: 64px;\r\n}\r\n\r\n/* ===================================\r\n Left Section\r\n =================================== */\r\n\r\n.vtx-admin-header-left {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-4, 1rem);\r\n flex-shrink: 0;\r\n}\r\n\r\n/* Toggle Button */\r\n.vtx-admin-header-toggle {\r\n display: none; /* Hidden on desktop, shown on mobile */\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 border-radius: var(--vtx-border-radius-lg, 0.5rem);\r\n background: transparent;\r\n color: var(--vtx-admin-header-text);\r\n cursor: pointer;\r\n transition: all var(--vtx-admin-header-transition) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-admin-header-toggle:hover {\r\n background-color: var(--vtx-admin-header-button-hover);\r\n}\r\n\r\n.vtx-admin-header-toggle:active {\r\n background-color: var(--vtx-admin-header-button-active);\r\n transform: scale(0.95);\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .vtx-admin-header-toggle {\r\n display: flex;\r\n }\r\n}\r\n\r\n/* Brand/Logo */\r\n.vtx-admin-header-brand {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-3, 0.75rem);\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-admin-header-logo {\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-admin-header-brand-text {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2px;\r\n}\r\n\r\n.vtx-admin-header-title {\r\n color: var(--vtx-admin-header-text);\r\n font-size: var(--vtx-font-size-lg, 1.125rem);\r\n font-weight: var(--vtx-font-weight-semibold, 600);\r\n line-height: 1.2;\r\n white-space: nowrap;\r\n}\r\n\r\n.vtx-admin-header-subtitle {\r\n color: var(--vtx-admin-header-text-secondary);\r\n font-size: var(--vtx-font-size-xs, 0.75rem);\r\n line-height: 1;\r\n}\r\n\r\n@media (max-width: 640px) {\r\n .vtx-admin-header-brand-text {\r\n display: none;\r\n }\r\n}\r\n\r\n/* ===================================\r\n Center Section - Search\r\n =================================== */\r\n\r\n.vtx-admin-header-center {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 1;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .vtx-admin-header-center {\r\n display: none;\r\n }\r\n}\r\n\r\n/* Search */\r\n.vtx-admin-header-search {\r\n position: relative;\r\n width: 100%;\r\n max-width: 480px;\r\n}\r\n\r\n.vtx-admin-header-search-form {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.vtx-admin-header-search-input {\r\n width: 100%;\r\n height: 40px;\r\n padding: 0 36px 0 38px;\r\n border: 1px solid var(--vtx-admin-header-input-border);\r\n border-radius: var(--vtx-border-radius-lg, 0.5rem);\r\n background-color: var(--vtx-admin-header-input-bg);\r\n color: var(--vtx-admin-header-text);\r\n font-size: var(--vtx-font-size-sm, 0.875rem);\r\n outline: none;\r\n transition: all var(--vtx-admin-header-transition) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-admin-header-search-input::placeholder {\r\n color: var(--vtx-admin-header-text-secondary);\r\n}\r\n\r\n.vtx-admin-header-search-input:focus {\r\n border-color: var(--vtx-admin-header-input-focus);\r\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\r\n}\r\n\r\n.vtx-admin-header-search-icon {\r\n position: absolute;\r\n left: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--vtx-admin-header-text-secondary);\r\n pointer-events: none;\r\n}\r\n\r\n.vtx-admin-header-search-spinner {\r\n width: 16px;\r\n height: 16px;\r\n border: 2px solid var(--vtx-admin-header-text-secondary);\r\n border-top-color: transparent;\r\n border-radius: 50%;\r\n animation: spin 0.6s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n.vtx-admin-header-search-clear {\r\n position: absolute;\r\n right: 8px;\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 border-radius: var(--vtx-border-radius-base, 0.25rem);\r\n background: transparent;\r\n color: var(--vtx-admin-header-text-secondary);\r\n cursor: pointer;\r\n transition: all var(--vtx-admin-header-transition) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-admin-header-search-clear:hover {\r\n background-color: var(--vtx-admin-header-button-hover);\r\n color: var(--vtx-admin-header-text);\r\n}\r\n\r\n/* Search Suggestions Dropdown */\r\n.vtx-admin-header-search-suggestions {\r\n position: absolute;\r\n top: calc(100% + 8px);\r\n left: 0;\r\n right: 0;\r\n max-height: 400px;\r\n overflow-y: auto;\r\n background-color: var(--vtx-admin-header-dropdown-bg);\r\n border: 1px solid var(--vtx-admin-header-border);\r\n border-radius: var(--vtx-border-radius-lg, 0.5rem);\r\n box-shadow: var(--vtx-admin-header-dropdown-shadow);\r\n z-index: 1000;\r\n animation: slideDown 150ms cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n@keyframes slideDown {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-8px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n.vtx-admin-header-search-suggestion {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-3, 0.75rem);\r\n width: 100%;\r\n padding: var(--vtx-spacing-3, 0.75rem) var(--vtx-spacing-4, 1rem);\r\n border: none;\r\n background: transparent;\r\n text-align: left;\r\n cursor: pointer;\r\n transition: background-color var(--vtx-admin-header-transition) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-admin-header-search-suggestion:hover {\r\n background-color: var(--vtx-admin-header-button-hover);\r\n}\r\n\r\n.vtx-admin-header-search-suggestion-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n color: var(--vtx-admin-header-text-secondary);\r\n}\r\n\r\n.vtx-admin-header-search-suggestion-content {\r\n flex: 1;\r\n min-width: 0;\r\n}\r\n\r\n.vtx-admin-header-search-suggestion-label {\r\n display: block;\r\n color: var(--vtx-admin-header-text);\r\n font-size: var(--vtx-font-size-sm, 0.875rem);\r\n font-weight: var(--vtx-font-weight-medium, 500);\r\n}\r\n\r\n.vtx-admin-header-search-suggestion-category {\r\n display: block;\r\n color: var(--vtx-admin-header-text-secondary);\r\n font-size: var(--vtx-font-size-xs, 0.75rem);\r\n margin-top: 2px;\r\n}\r\n\r\n/* ===================================\r\n Right Section\r\n =================================== */\r\n\r\n.vtx-admin-header-right {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-2, 0.5rem);\r\n margin-left: auto;\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-admin-header-divider {\r\n width: 1px;\r\n height: 32px;\r\n background-color: var(--vtx-admin-header-border);\r\n margin: 0 var(--vtx-spacing-2, 0.5rem);\r\n}\r\n\r\n/* Quick Actions */\r\n.vtx-admin-header-quick-actions {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-1, 0.25rem);\r\n}\r\n\r\n@media (max-width: 640px) {\r\n .vtx-admin-header-quick-actions {\r\n display: none;\r\n }\r\n}\r\n\r\n/* Icon Button (Generic) */\r\n.vtx-admin-header-icon-button {\r\n position: relative;\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 border-radius: var(--vtx-border-radius-lg, 0.5rem);\r\n background: transparent;\r\n color: var(--vtx-admin-header-text-secondary);\r\n cursor: pointer;\r\n transition: all var(--vtx-admin-header-transition) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-admin-header-icon-button:hover:not(.vtx-admin-header-icon-button--disabled) {\r\n background-color: var(--vtx-admin-header-button-hover);\r\n color: var(--vtx-admin-header-text);\r\n transform: scale(1.05);\r\n}\r\n\r\n.vtx-admin-header-icon-button:active:not(.vtx-admin-header-icon-button--disabled) {\r\n background-color: var(--vtx-admin-header-button-active);\r\n transform: scale(0.98);\r\n}\r\n\r\n.vtx-admin-header-icon-button--active {\r\n background-color: var(--vtx-admin-header-button-hover);\r\n color: var(--vtx-admin-header-text);\r\n}\r\n\r\n.vtx-admin-header-icon-button--disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n}\r\n\r\n.vtx-admin-header-icon-badge {\r\n position: absolute;\r\n top: 4px;\r\n right: 4px;\r\n min-width: 18px;\r\n height: 18px;\r\n padding: 0 4px;\r\n pointer-events: none;\r\n}\r\n\r\n/* ===================================\r\n Notifications\r\n =================================== */\r\n\r\n.vtx-admin-header-notifications {\r\n position: relative;\r\n}\r\n\r\n.vtx-admin-header-notifications-panel {\r\n position: absolute;\r\n top: calc(100% + 12px);\r\n right: 0;\r\n width: 400px;\r\n max-height: 600px;\r\n display: flex;\r\n flex-direction: column;\r\n background-color: var(--vtx-admin-header-dropdown-bg);\r\n border: 1px solid var(--vtx-admin-header-border);\r\n border-radius: var(--vtx-border-radius-xl, 0.75rem);\r\n box-shadow: var(--vtx-admin-header-dropdown-shadow);\r\n z-index: 1000;\r\n animation: slideDown 200ms cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .vtx-admin-header-notifications-panel {\r\n position: fixed;\r\n top: 64px;\r\n right: 0;\r\n left: 0;\r\n width: 100%;\r\n max-height: calc(100vh - 64px);\r\n border-radius: 0;\r\n border-left: none;\r\n border-right: none;\r\n }\r\n}\r\n\r\n.vtx-admin-header-notifications-header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: var(--vtx-spacing-4, 1rem) var(--vtx-spacing-5, 1.25rem);\r\n border-bottom: 1px solid var(--vtx-admin-header-border);\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-admin-header-notifications-header-title {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.vtx-admin-header-notifications-header-actions {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-2, 0.5rem);\r\n}\r\n\r\n.vtx-admin-header-notifications-action-btn {\r\n padding: 4px 8px;\r\n border: none;\r\n border-radius: var(--vtx-border-radius-base, 0.25rem);\r\n background: transparent;\r\n color: var(--vtx-color-primary-600, #2563eb);\r\n font-size: var(--vtx-font-size-xs, 0.75rem);\r\n font-weight: var(--vtx-font-weight-medium, 500);\r\n cursor: pointer;\r\n transition: all var(--vtx-admin-header-transition) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-admin-header-notifications-action-btn:hover {\r\n background-color: var(--vtx-color-primary-50, #eff6ff);\r\n}\r\n\r\n.vtx-admin-header-notifications-action-btn--danger {\r\n color: var(--vtx-color-error-600, #dc2626);\r\n}\r\n\r\n.vtx-admin-header-notifications-action-btn--danger:hover {\r\n background-color: var(--vtx-color-error-50, #fef2f2);\r\n}\r\n\r\n.vtx-admin-header-notifications-list {\r\n flex: 1;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n}\r\n\r\n.vtx-admin-header-notifications-list::-webkit-scrollbar {\r\n width: 6px;\r\n}\r\n\r\n.vtx-admin-header-notifications-list::-webkit-scrollbar-track {\r\n background: transparent;\r\n}\r\n\r\n.vtx-admin-header-notifications-list::-webkit-scrollbar-thumb {\r\n background: var(--vtx-color-neutral-300, #d4d4d4);\r\n border-radius: 3px;\r\n}\r\n\r\n.vtx-admin-header-notifications-empty {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n padding: var(--vtx-spacing-10, 2.5rem);\r\n color: var(--vtx-admin-header-text-secondary);\r\n}\r\n\r\n.vtx-admin-header-notification-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: var(--vtx-spacing-3, 0.75rem);\r\n padding: var(--vtx-spacing-4, 1rem) var(--vtx-spacing-5, 1.25rem);\r\n border: none;\r\n border-bottom: 1px solid var(--vtx-admin-header-border);\r\n background: transparent;\r\n width: 100%;\r\n text-align: left;\r\n cursor: pointer;\r\n transition: background-color var(--vtx-admin-header-transition) cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n text-decoration: none;\r\n color: inherit;\r\n}\r\n\r\n.vtx-admin-header-notification-item:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.vtx-admin-header-notification-item:hover {\r\n background-color: var(--vtx-admin-header-button-hover);\r\n}\r\n\r\n.vtx-admin-header-notification-item--unread {\r\n background-color: var(--vtx-color-primary-50, #eff6ff);\r\n}\r\n\r\n.vtx-admin-header-notification-item--unread:hover {\r\n background-color: var(--vtx-color-primary-100, #dbeafe);\r\n}\r\n\r\n.vtx-admin-header-notification-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n width: 40px;\r\n height: 40px;\r\n border-radius: var(--vtx-border-radius-lg, 0.5rem);\r\n color: var(--vtx-admin-header-text-secondary);\r\n}\r\n\r\n.vtx-admin-header-notification-item--info .vtx-admin-header-notification-icon {\r\n background-color: var(--vtx-color-info-50, #eff6ff);\r\n color: var(--vtx-color-info-600, #2563eb);\r\n}\r\n\r\n.vtx-admin-header-notification-item--success .vtx-admin-header-notification-icon {\r\n background-color: var(--vtx-color-success-50, #f0fdf4);\r\n color: var(--vtx-color-success-600, #16a34a);\r\n}\r\n\r\n.vtx-admin-header-notification-item--warning .vtx-admin-header-notification-icon {\r\n background-color: var(--vtx-color-warning-50, #fffbeb);\r\n color: var(--vtx-color-warning-600, #d97706);\r\n}\r\n\r\n.vtx-admin-header-notification-item--error .vtx-admin-header-notification-icon {\r\n background-color: var(--vtx-color-error-50, #fef2f2);\r\n color: var(--vtx-color-error-600, #dc2626);\r\n}\r\n\r\n.vtx-admin-header-notification-content {\r\n flex: 1;\r\n min-width: 0;\r\n}\r\n\r\n.vtx-admin-header-notification-dot {\r\n position: absolute;\r\n top: 16px;\r\n right: 16px;\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background-color: var(--vtx-color-primary-600, #2563eb);\r\n}\r\n\r\n.vtx-admin-header-notifications-footer {\r\n padding: var(--vtx-spacing-3, 0.75rem);\r\n border-top: 1px solid var(--vtx-admin-header-border);\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-admin-header-notifications-view-all {\r\n width: 100%;\r\n padding: var(--vtx-spacing-2, 0.5rem);\r\n border: none;\r\n border-radius: var(--vtx-border-radius-base, 0.25rem);\r\n background: transparent;\r\n color: var(--vtx-color-primary-600, #2563eb);\r\n font-size: var(--vtx-font-size-sm, 0.875rem);\r\n font-weight: var(--vtx-font-weight-medium, 500);\r\n cursor: pointer;\r\n transition: background-color var(--vtx-admin-header-transition) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-admin-header-notifications-view-all:hover {\r\n background-color: var(--vtx-color-primary-50, #eff6ff);\r\n}\r\n\r\n/* ===================================\r\n User Menu\r\n =================================== */\r\n\r\n.vtx-admin-header-user {\r\n position: relative;\r\n}\r\n\r\n.vtx-admin-header-user-button {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-2, 0.5rem);\r\n padding: 4px 8px 4px 4px;\r\n border: none;\r\n border-radius: var(--vtx-border-radius-lg, 0.5rem);\r\n background: transparent;\r\n cursor: pointer;\r\n transition: all var(--vtx-admin-header-transition) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-admin-header-user-button:hover {\r\n background-color: var(--vtx-admin-header-button-hover);\r\n}\r\n\r\n.vtx-admin-header-user-button--active {\r\n background-color: var(--vtx-admin-header-button-hover);\r\n}\r\n\r\n.vtx-admin-header-user-avatar {\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-admin-header-user-avatar-fallback {\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n background: var(--vtx-color-primary-600, #2563eb);\r\n color: white;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: var(--vtx-font-size-sm, 0.875rem);\r\n font-weight: var(--vtx-font-weight-semibold, 600);\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-admin-header-user-info {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 2px;\r\n text-align: left;\r\n}\r\n\r\n@media (max-width: 640px) {\r\n .vtx-admin-header-user-info {\r\n display: none;\r\n }\r\n}\r\n\r\n.vtx-admin-header-user-name {\r\n color: var(--vtx-admin-header-text);\r\n font-size: var(--vtx-font-size-sm, 0.875rem);\r\n font-weight: var(--vtx-font-weight-medium, 500);\r\n line-height: 1.2;\r\n}\r\n\r\n.vtx-admin-header-user-role {\r\n color: var(--vtx-admin-header-text-secondary);\r\n font-size: var(--vtx-font-size-xs, 0.75rem);\r\n line-height: 1;\r\n}\r\n\r\n/* User Dropdown */\r\n.vtx-admin-header-user-dropdown {\r\n position: absolute;\r\n top: calc(100% + 8px);\r\n right: 0;\r\n min-width: 220px;\r\n background-color: var(--vtx-admin-header-dropdown-bg);\r\n border: 1px solid var(--vtx-admin-header-border);\r\n border-radius: var(--vtx-border-radius-lg, 0.5rem);\r\n box-shadow: var(--vtx-admin-header-dropdown-shadow);\r\n padding: var(--vtx-spacing-2, 0.5rem);\r\n z-index: 1000;\r\n animation: slideDown 150ms cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-admin-header-user-menu-item {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-3, 0.75rem);\r\n width: 100%;\r\n padding: var(--vtx-spacing-2, 0.5rem) var(--vtx-spacing-3, 0.75rem);\r\n border: none;\r\n border-radius: var(--vtx-border-radius-base, 0.25rem);\r\n background: transparent;\r\n color: var(--vtx-admin-header-text);\r\n font-size: var(--vtx-font-size-sm, 0.875rem);\r\n text-align: left;\r\n cursor: pointer;\r\n text-decoration: none;\r\n transition: background-color var(--vtx-admin-header-transition) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-admin-header-user-menu-item:hover:not(.vtx-admin-header-user-menu-item--disabled) {\r\n background-color: var(--vtx-admin-header-button-hover);\r\n}\r\n\r\n.vtx-admin-header-user-menu-item--danger {\r\n color: var(--vtx-color-error-600, #dc2626);\r\n}\r\n\r\n.vtx-admin-header-user-menu-item--danger:hover:not(.vtx-admin-header-user-menu-item--disabled) {\r\n background-color: var(--vtx-color-error-50, #fef2f2);\r\n}\r\n\r\n.vtx-admin-header-user-menu-item--success {\r\n color: var(--vtx-color-success-600, #16a34a);\r\n}\r\n\r\n.vtx-admin-header-user-menu-item--disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n}\r\n\r\n.vtx-admin-header-user-menu-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 18px;\r\n height: 18px;\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-admin-header-user-menu-label {\r\n flex: 1;\r\n}\r\n\r\n.vtx-admin-header-user-menu-shortcut {\r\n color: var(--vtx-admin-header-text-secondary);\r\n font-size: var(--vtx-font-size-xs, 0.75rem);\r\n margin-left: auto;\r\n}\r\n\r\n.vtx-admin-header-user-menu-badge {\r\n margin-left: auto;\r\n}\r\n\r\n.vtx-admin-header-user-menu-divider {\r\n height: 1px;\r\n background-color: var(--vtx-admin-header-border);\r\n margin: var(--vtx-spacing-2, 0.5rem) 0;\r\n}\r\n\r\n/* ===================================\r\n Breadcrumbs\r\n =================================== */\r\n\r\n.vtx-admin-header-breadcrumbs {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-2, 0.5rem);\r\n padding: var(--vtx-spacing-2, 0.5rem) var(--vtx-spacing-6, 1.5rem);\r\n border-top: 1px solid var(--vtx-admin-header-border);\r\n background-color: var(--vtx-admin-header-bg);\r\n overflow-x: auto;\r\n}\r\n\r\n.vtx-admin-header-breadcrumb {\r\n color: var(--vtx-admin-header-text-secondary);\r\n font-size: var(--vtx-font-size-sm, 0.875rem);\r\n text-decoration: none;\r\n white-space: nowrap;\r\n transition: color var(--vtx-admin-header-transition) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-admin-header-breadcrumb:hover {\r\n color: var(--vtx-admin-header-text);\r\n text-decoration: underline;\r\n}\r\n\r\n.vtx-admin-header-breadcrumb--current {\r\n color: var(--vtx-admin-header-text);\r\n font-weight: var(--vtx-font-weight-medium, 500);\r\n cursor: default;\r\n}\r\n\r\n.vtx-admin-header-breadcrumb--current:hover {\r\n text-decoration: none;\r\n}\r\n\r\n.vtx-admin-header-breadcrumb-separator {\r\n color: var(--vtx-admin-header-text-secondary);\r\n user-select: none;\r\n}\r\n\r\n/* ===================================\r\n VARIANTS\r\n =================================== */\r\n\r\n.vtx-admin-header--elevated {\r\n box-shadow: var(--vtx-admin-header-shadow);\r\n}\r\n\r\n.vtx-admin-header--bordered {\r\n border-bottom-width: 2px;\r\n}\r\n\r\n.vtx-admin-header--minimal {\r\n background-color: transparent;\r\n border-bottom: 1px solid transparent;\r\n}\r\n\r\n.vtx-admin-header--transparent {\r\n background-color: transparent;\r\n border-bottom-color: transparent;\r\n}\r\n\r\n/* ===================================\r\n THEMES\r\n =================================== */\r\n\r\n.vtx-admin-header--dark {\r\n --vtx-admin-header-bg: var(--vtx-color-neutral-900, #171717);\r\n --vtx-admin-header-border: var(--vtx-color-neutral-800, #262626);\r\n --vtx-admin-header-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);\r\n \r\n --vtx-admin-header-text: var(--vtx-color-neutral-50, #fafafa);\r\n --vtx-admin-header-text-secondary: var(--vtx-color-neutral-400, #a3a3a3);\r\n \r\n --vtx-admin-header-button-hover: var(--vtx-color-neutral-800, #262626);\r\n --vtx-admin-header-button-active: var(--vtx-color-neutral-700, #404040);\r\n \r\n --vtx-admin-header-input-bg: var(--vtx-color-neutral-800, #262626);\r\n --vtx-admin-header-input-border: var(--vtx-color-neutral-700, #404040);\r\n \r\n --vtx-admin-header-dropdown-bg: var(--vtx-color-neutral-900, #171717);\r\n}\r\n\r\n.vtx-admin-header--primary {\r\n --vtx-admin-header-bg: var(--vtx-color-primary-600, #2563eb);\r\n --vtx-admin-header-border: var(--vtx-color-primary-700, #1d4ed8);\r\n \r\n --vtx-admin-header-text: var(--vtx-color-neutral-50, #ffffff);\r\n --vtx-admin-header-text-secondary: var(--vtx-color-primary-100, #dbeafe);\r\n \r\n --vtx-admin-header-button-hover: var(--vtx-color-primary-700, #1d4ed8);\r\n --vtx-admin-header-button-active: var(--vtx-color-primary-800, #1e40af);\r\n \r\n --vtx-admin-header-input-bg: var(--vtx-color-primary-700, #1d4ed8);\r\n --vtx-admin-header-input-border: var(--vtx-color-primary-600, #2563eb);\r\n \r\n --vtx-admin-header-dropdown-bg: var(--vtx-color-neutral-50, #ffffff);\r\n}\r\n\r\n.vtx-admin-header--gradient {\r\n background: linear-gradient(135deg, var(--vtx-color-primary-600, #2563eb) 0%, var(--vtx-color-secondary-600, #7c3aed) 100%);\r\n --vtx-admin-header-border: rgba(255, 255, 255, 0.1);\r\n \r\n --vtx-admin-header-text: var(--vtx-color-neutral-50, #ffffff);\r\n --vtx-admin-header-text-secondary: rgba(255, 255, 255, 0.8);\r\n \r\n --vtx-admin-header-button-hover: rgba(255, 255, 255, 0.1);\r\n --vtx-admin-header-button-active: rgba(255, 255, 255, 0.2);\r\n \r\n --vtx-admin-header-input-bg: rgba(255, 255, 255, 0.1);\r\n --vtx-admin-header-input-border: rgba(255, 255, 255, 0.2);\r\n \r\n --vtx-admin-header-dropdown-bg: var(--vtx-color-neutral-50, #ffffff);\r\n}\r\n\r\n/* ===================================\r\n Responsive\r\n =================================== */\r\n\r\n@media (max-width: 768px) {\r\n .vtx-admin-header-container {\r\n gap: var(--vtx-spacing-2, 0.5rem);\r\n padding: 0 var(--vtx-spacing-4, 1rem);\r\n }\r\n \r\n .vtx-admin-header-left {\r\n gap: var(--vtx-spacing-2, 0.5rem);\r\n }\r\n \r\n .vtx-admin-header-right {\r\n gap: var(--vtx-spacing-1, 0.25rem);\r\n }\r\n \r\n .vtx-admin-header-divider {\r\n display: none;\r\n }\r\n}\r\n\r\n/* ===================================\r\n Accessibility\r\n =================================== */\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n .vtx-admin-header,\r\n .vtx-admin-header * {\r\n animation: none !important;\r\n transition: none !important;\r\n }\r\n}\r\n\r\n@media (prefers-contrast: high) {\r\n .vtx-admin-header {\r\n border: 2px solid currentColor;\r\n }\r\n}\r\n");const Un=({value:e="",onChange:t,onSubmit:a,onFocus:o,placeholder:i,loading:l,suggestions:s,icon:d})=>{const[c,x]=n.useState(e),[v,m]=n.useState(!1),p=n.useRef(null);n.useEffect(()=>{x(e)},[e]),n.useEffect(()=>{const r=r=>{p.current&&!p.current.contains(r.target)&&m(!1)};return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[]);return r.jsxs("div",{className:"vtx-admin-header-search",ref:p,children:[r.jsxs("form",{onSubmit:r=>{r.preventDefault(),null==a||a(c),m(!1)},className:"vtx-admin-header-search-form",children:[r.jsx("div",{className:"vtx-admin-header-search-icon",children:l?r.jsx("span",{className:"vtx-admin-header-search-spinner"}):d||r.jsx(V,{})}),r.jsx("input",{type:"text",className:"vtx-admin-header-search-input",placeholder:i||"Search...",value:c,onChange:r=>{const n=r.target.value;x(n),null==t||t(n),m(!0)},onFocus:()=>{null==o||o(),s&&s.length>0&&m(!0)}}),c&&r.jsx("button",{type:"button",className:"vtx-admin-header-search-clear",onClick:()=>{x(""),null==t||t("")},"aria-label":"Clear search",children:r.jsx(O,{})})]}),v&&s&&s.length>0&&r.jsx("div",{className:"vtx-admin-header-search-suggestions",children:s.map(n=>r.jsxs("button",{type:"button",className:"vtx-admin-header-search-suggestion",onClick:()=>{var r;null===(r=n.onClick)||void 0===r||r.call(n),m(!1)},children:[n.icon&&r.jsx("span",{className:"vtx-admin-header-search-suggestion-icon",children:n.icon}),r.jsxs("div",{className:"vtx-admin-header-search-suggestion-content",children:[r.jsx("span",{className:"vtx-admin-header-search-suggestion-label",children:n.label}),n.category&&r.jsx("span",{className:"vtx-admin-header-search-suggestion-category",children:n.category})]})]},n.id))})]})},Gn=({notifications:n,onNotificationClick:e,onMarkAllAsRead:t,onClearAll:a,onViewAll:o,onClose:i,maxNotifications:l=5})=>{const s=n.filter(r=>!r.read).length,d=n.slice(0,l);return r.jsxs("div",{className:"vtx-admin-header-notifications-panel",children:[r.jsxs("div",{className:"vtx-admin-header-notifications-header",children:[r.jsxs("div",{className:"vtx-admin-header-notifications-header-title",children:[r.jsx(xn,{variant:"subtitle2",noMargin:!0,style:{fontWeight:600},children:"Notifications"}),s>0&&r.jsx(Mn,{variant:"primary",size:"sm",style:{marginLeft:"8px"},children:s})]}),r.jsxs("div",{className:"vtx-admin-header-notifications-header-actions",children:[s>0&&t&&r.jsx("button",{className:"vtx-admin-header-notifications-action-btn",onClick:t,title:"Mark all as read",children:"Mark all read"}),n.length>0&&a&&r.jsx("button",{className:"vtx-admin-header-notifications-action-btn vtx-admin-header-notifications-action-btn--danger",onClick:a,title:"Clear all",children:"Clear"})]})]}),r.jsx("div",{className:"vtx-admin-header-notifications-list",children:0===n.length?r.jsxs("div",{className:"vtx-admin-header-notifications-empty",children:[r.jsx("div",{style:{fontSize:"48px",opacity:.3},children:r.jsx(w,{})}),r.jsx(xn,{variant:"body2",noMargin:!0,style:{marginTop:"12px",color:"var(--vtx-color-neutral-500)"},children:"No notifications"})]}):r.jsx(r.Fragment,{children:d.map(n=>{const t=n.href?"a":"button";return r.jsxs(t,{className:`vtx-admin-header-notification-item ${n.read?"":"vtx-admin-header-notification-item--unread"} ${n.type?`vtx-admin-header-notification-item--${n.type}`:""}`,onClick:()=>(r=>{null==e||e(r),i()})(n),href:n.href,type:n.href?void 0:"button",children:[(n.icon||n.avatar)&&r.jsx("div",{className:"vtx-admin-header-notification-icon",children:n.avatar?r.jsx(Rn,{src:n.avatar,size:"sm",alt:"Notification"}):n.icon}),r.jsxs("div",{className:"vtx-admin-header-notification-content",children:[r.jsx(xn,{variant:"body2",noMargin:!0,style:{fontWeight:n.read?400:600},children:n.title}),n.description&&r.jsx(xn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-neutral-600)",marginTop:"2px"},children:n.description}),r.jsx(xn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-neutral-500)",marginTop:"4px"},children:n.time})]}),!n.read&&r.jsx("div",{className:"vtx-admin-header-notification-dot"})]},n.id)})})}),n.length>l&&o&&r.jsx("div",{className:"vtx-admin-header-notifications-footer",children:r.jsxs("button",{className:"vtx-admin-header-notifications-view-all",onClick:()=>{o(),i()},children:["View all ",n.length," notifications"]})})]})},Xn=({items:n,onClose:e})=>r.jsx("div",{className:"vtx-admin-header-user-dropdown",children:n.map((n,t)=>{const a=n.href?"a":"button";return r.jsxs(i.default.Fragment,{children:[r.jsxs(a,{className:`vtx-admin-header-user-menu-item ${n.variant?`vtx-admin-header-user-menu-item--${n.variant}`:""} ${n.disabled?"vtx-admin-header-user-menu-item--disabled":""}`,onClick:()=>(r=>{var n;r.disabled||(null===(n=r.onClick)||void 0===n||n.call(r),e())})(n),href:n.href,type:n.href?void 0:"button",disabled:n.disabled,children:[n.icon&&r.jsx("span",{className:"vtx-admin-header-user-menu-icon",children:n.icon}),r.jsx("span",{className:"vtx-admin-header-user-menu-label",children:n.label}),n.badge&&r.jsx(Mn,{size:"sm",className:"vtx-admin-header-user-menu-badge",children:n.badge}),n.shortcut&&r.jsx("span",{className:"vtx-admin-header-user-menu-shortcut",children:n.shortcut})]}),n.divider&&r.jsx("div",{className:"vtx-admin-header-user-menu-divider"})]},t)})}),Kn=i.default.forwardRef(({logo:e,title:t,subtitle:a,onLogoClick:o,onToggleSidebar:l,showToggleButton:s=!0,toggleIcon:d,showSearch:c=!1,searchPlaceholder:x,searchValue:v,onSearchChange:m,onSearchSubmit:p,onSearchFocus:h,searchSuggestions:u,searchLoading:f,searchIcon:b,notifications:k=[],onNotificationClick:j,onMarkAllAsRead:N,onClearAllNotifications:_,onViewAllNotifications:z,showNotifications:C=!0,notificationIcon:S,quickActions:M=[],userName:$,userRole:T,userAvatar:D,userAvatarFallback:I,userMenuItems:L=[],showUserMenu:R=!0,onUserAvatarClick:F,actions:A,leftContent:E,centerContent:B,rightContent:O,className:W="",style:P,variant:H="default",theme:V="light",sticky:Y=!0,height:q="64px",blur:U=!1,maxNotifications:G=5,showBreadcrumbs:X=!1,breadcrumbs:K=[]},Q)=>{const[J,Z]=n.useState(!1),[rr,nr]=n.useState(!1),er=n.useRef(null),tr=n.useRef(null),ar=k.filter(r=>!r.read).length;n.useEffect(()=>{const r=r=>{er.current&&!er.current.contains(r.target)&&Z(!1),tr.current&&!tr.current.contains(r.target)&&nr(!1)};return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[]),n.useEffect(()=>{const r=r=>{"Escape"===r.key&&(Z(!1),nr(!1))};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[]);const or=["vtx-admin-header",`vtx-admin-header--${H}`,`vtx-admin-header--${V}`,Y&&"vtx-admin-header--sticky",U&&"vtx-admin-header--blur",W].filter(Boolean).join(" "),ir={...P,height:"number"==typeof q?`${q}px`:q};return r.jsxs("header",{ref:Q,className:or,style:ir,children:[r.jsxs("div",{className:"vtx-admin-header-container",children:[r.jsxs("div",{className:"vtx-admin-header-left",children:[s&&l&&r.jsx("button",{className:"vtx-admin-header-toggle",onClick:l,"aria-label":"Toggle sidebar",type:"button",children:d||r.jsx(y,{})}),(e||t)&&r.jsxs("div",{className:"vtx-admin-header-brand",onClick:o,style:{cursor:o?"pointer":"default"},children:[e&&r.jsx("div",{className:"vtx-admin-header-logo",children:e}),t&&r.jsxs("div",{className:"vtx-admin-header-brand-text",children:[r.jsx(xn,{variant:"h6",noMargin:!0,className:"vtx-admin-header-title",children:t}),a&&r.jsx(xn,{variant:"caption",noMargin:!0,className:"vtx-admin-header-subtitle",children:a})]})]}),E]}),r.jsxs("div",{className:"vtx-admin-header-center",children:[c&&r.jsx(Un,{value:v,onChange:m,onSubmit:p,onFocus:h,placeholder:x,loading:f,suggestions:u,icon:b}),B]}),r.jsxs("div",{className:"vtx-admin-header-right",children:[M.length>0&&r.jsx("div",{className:"vtx-admin-header-quick-actions",children:M.map(n=>r.jsxs("button",{className:"vtx-admin-header-icon-button "+(n.disabled?"vtx-admin-header-icon-button--disabled":""),onClick:n.onClick,title:n.tooltip||n.label,disabled:n.disabled,"aria-label":n.label,type:"button",children:[n.icon,n.badge&&r.jsx(Mn,{variant:"error",size:"sm",className:"vtx-admin-header-icon-badge",children:n.badge})]},n.id))}),A,O,(C||R)&&r.jsx("div",{className:"vtx-admin-header-divider"}),C&&k.length>0&&r.jsxs("div",{className:"vtx-admin-header-notifications",ref:er,children:[r.jsxs("button",{className:"vtx-admin-header-icon-button "+(J?"vtx-admin-header-icon-button--active":""),onClick:()=>Z(!J),"aria-label":"Notifications",type:"button",children:[S||r.jsx(w,{}),ar>0&&r.jsx(Mn,{variant:"error",size:"sm",className:"vtx-admin-header-icon-badge",children:ar>9?"9+":ar})]}),J&&r.jsx(Gn,{notifications:k,onNotificationClick:j,onMarkAllAsRead:N,onClearAll:_,onViewAll:z,onClose:()=>Z(!1),maxNotifications:G})]}),R&&$&&r.jsxs("div",{className:"vtx-admin-header-user",ref:tr,children:[r.jsxs("button",{className:"vtx-admin-header-user-button "+(rr?"vtx-admin-header-user-button--active":""),onClick:()=>{L.length>0?nr(!rr):null==F||F()},"aria-label":"User menu",type:"button",children:[D?r.jsx(Rn,{src:D,alt:$,size:"sm",className:"vtx-admin-header-user-avatar"}):r.jsx("div",{className:"vtx-admin-header-user-avatar vtx-admin-header-user-avatar-fallback",children:I||$.charAt(0).toUpperCase()}),r.jsxs("div",{className:"vtx-admin-header-user-info",children:[r.jsx(xn,{variant:"body2",noMargin:!0,className:"vtx-admin-header-user-name",children:$}),T&&r.jsx(xn,{variant:"caption",noMargin:!0,className:"vtx-admin-header-user-role",children:T})]}),L.length>0&&r.jsx(g,{})]}),rr&&L.length>0&&r.jsx(Xn,{items:L,onClose:()=>nr(!1)})]})]})]}),X&&K.length>0&&r.jsx("div",{className:"vtx-admin-header-breadcrumbs",children:K.map((n,e)=>r.jsxs(i.default.Fragment,{children:[e>0&&r.jsx("span",{className:"vtx-admin-header-breadcrumb-separator",children:"/"}),n.href||n.onClick?r.jsx("a",{href:n.href,onClick:r=>{n.onClick&&(r.preventDefault(),n.onClick())},className:"vtx-admin-header-breadcrumb",children:n.label}):r.jsx("span",{className:"vtx-admin-header-breadcrumb vtx-admin-header-breadcrumb--current",children:n.label})]},e))})]})});Kn.displayName="AdminHeader";const Qn=tr(Kn);ar('/* ==========================================\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/* Empty State with Icon & Description */\r\n.vertex-datagrid-empty-state {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 64px 24px;\r\n}\r\n\r\n.vertex-datagrid-empty-state-icon {\r\n font-size: 48px;\r\n color: rgba(0, 0, 0, 0.26);\r\n opacity: 0.6;\r\n}\r\n\r\n.vertex-datagrid-empty-state-message {\r\n font-size: 1.125rem;\r\n font-weight: 600;\r\n color: rgba(0, 0, 0, 0.6);\r\n}\r\n\r\n.vertex-datagrid-empty-state-description {\r\n font-size: 0.875rem;\r\n color: rgba(0, 0, 0, 0.38);\r\n max-width: 400px;\r\n line-height: 1.5;\r\n text-align: center;\r\n}\r\n\r\n/* Skeleton Loader */\r\n.vertex-datagrid-row--skeleton {\r\n animation: vertex-pulse 1.5s ease-in-out infinite;\r\n}\r\n\r\n.vertex-datagrid-skeleton {\r\n height: 16px;\r\n background: linear-gradient(\r\n 90deg,\r\n rgba(224, 224, 224, 1) 25%,\r\n rgba(245, 245, 245, 1) 50%,\r\n rgba(224, 224, 224, 1) 75%\r\n );\r\n background-size: 200% 100%;\r\n border-radius: 4px;\r\n animation: vertex-skeleton-shimmer 1.5s ease-in-out infinite;\r\n}\r\n\r\n.vertex-datagrid-skeleton--text {\r\n width: 100%;\r\n max-width: 180px;\r\n}\r\n\r\n.vertex-datagrid-skeleton--checkbox {\r\n width: 16px;\r\n height: 16px;\r\n border-radius: 2px;\r\n}\r\n\r\n@keyframes vertex-skeleton-shimmer {\r\n 0% {\r\n background-position: 200% 0;\r\n }\r\n 100% {\r\n background-position: -200% 0;\r\n }\r\n}\r\n\r\n@keyframes vertex-pulse {\r\n 0%, 100% {\r\n opacity: 1;\r\n }\r\n 50% {\r\n opacity: 0.7;\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/* ==========================================\r\n Dark Mode Support\r\n ========================================== */\r\n\r\n[data-theme=\'dark\'] .vertex-datagrid {\r\n background: var(--vtx-color-neutral-800);\r\n border-color: var(--vtx-color-neutral-700);\r\n}\r\n\r\n[data-theme=\'dark\'] .vertex-datagrid-container {\r\n background: var(--vtx-color-neutral-800);\r\n}\r\n\r\n[data-theme=\'dark\'] .vertex-datagrid-empty-state-icon {\r\n color: var(--vtx-color-neutral-500);\r\n}\r\n\r\n[data-theme=\'dark\'] .vertex-datagrid-empty-state-message {\r\n color: var(--vtx-color-neutral-200);\r\n}\r\n\r\n[data-theme=\'dark\'] .vertex-datagrid-empty-state-description {\r\n color: var(--vtx-color-neutral-400);\r\n}\r\n\r\n[data-theme=\'dark\'] .vertex-datagrid-skeleton {\r\n background: linear-gradient(\r\n 90deg,\r\n var(--vtx-color-neutral-700) 25%,\r\n var(--vtx-color-neutral-600) 50%,\r\n var(--vtx-color-neutral-700) 75%\r\n );\r\n background-size: 200% 100%;\r\n}');const Jn=(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:e,anchorEl:t,onClose:a,onSort:o,onFilter:i,currentSort:l,hasFilter:s})=>{const d=n.useRef(null);if(n.useEffect(()=>{const r=r=>{d.current&&!d.current.contains(r.target)&&t&&!t.contains(r.target)&&a()};return t&&document.addEventListener("mousedown",r),()=>{document.removeEventListener("mousedown",r)}},[t,a]),!t)return null;const c=t.getBoundingClientRect();return r.jsxs("div",{ref:d,className:"vertex-datagrid-column-menu",style:{position:"fixed",top:c.bottom+4,left:c.left,zIndex:1300},children:[e.sortable&&r.jsxs(r.Fragment,{children:[r.jsxs("button",{className:"vertex-datagrid-column-menu-item",onClick:()=>{o("asc"),a()},children:[r.jsx(G,{size:16}),r.jsx("span",{children:"Sort ascending"}),"asc"===l&&r.jsx("span",{className:"vertex-datagrid-menu-check",children:"✓"})]}),r.jsxs("button",{className:"vertex-datagrid-column-menu-item",onClick:()=>{o("desc"),a()},children:[r.jsx(X,{size:16}),r.jsx("span",{children:"Sort descending"}),"desc"===l&&r.jsx("span",{className:"vertex-datagrid-menu-check",children:"✓"})]}),l&&r.jsxs("button",{className:"vertex-datagrid-column-menu-item",onClick:()=>{o(null),a()},children:[r.jsx("span",{style:{width:16}}),r.jsx("span",{children:"Unsort"})]}),e.filterable&&r.jsx("div",{className:"vertex-datagrid-column-menu-divider"})]}),e.filterable&&r.jsxs("button",{className:"vertex-datagrid-column-menu-item",onClick:()=>{i(),a()},children:[r.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r.jsx("path",{d:"M22 3H2l8 9.46V19l4 2v-8.54L22 3z"})}),r.jsx("span",{children:s?"Edit filter":"Filter"}),s&&r.jsx("span",{className:"vertex-datagrid-menu-badge",children:"●"})]})]})},re=({columns:e,filterModel:t,onFilterModelChange:a,onClose:o,targetColumn:i})=>{const l=e.filter(r=>!1!==r.filterable),s=n.useRef(null);n.useEffect(()=>{const r=r=>{s.current&&!s.current.contains(r.target)&&o()};return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[o]),n.useEffect(()=>{i&&0===t.items.length&&d(i)},[i]);const d=r=>{var n,o;const i=r||(null===(n=l[0])||void 0===n?void 0:n.field)||"",s=e.find(r=>r.field===i),d=(null==s?void 0:s.filterOperators)||Jn(null==s?void 0:s.type),c={id:Date.now(),field:i,operator:(null===(o=d[0])||void 0===o?void 0:o.value)||"contains",value:""};a({...t,items:[...t.items,c]})},c=(r,n)=>{var o;const i=[...t.items],l=i[r];if(i[r]={...l,...n},n.field&&n.field!==l.field){const t=e.find(r=>r.field===n.field),a=(null==t?void 0:t.filterOperators)||Jn(null==t?void 0:t.type);i[r].operator=(null===(o=a[0])||void 0===o?void 0:o.value)||"contains"}a({...t,items:i})},x=()=>{a({...t,logicOperator:"and"===t.logicOperator?"or":"and"})};return r.jsx("div",{className:"vertex-datagrid-filter-panel-overlay",children:r.jsxs("div",{ref:s,className:"vertex-datagrid-filter-panel",children:[r.jsxs("div",{className:"vertex-datagrid-filter-panel-header",children:[r.jsx(xn,{weight:"semibold",size:"sm",children:"Filters"}),r.jsx("button",{className:"vertex-datagrid-filter-close",onClick:o,children:r.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[r.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),r.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]}),r.jsx("div",{className:"vertex-datagrid-filter-panel-body",children:0===t.items.length?r.jsxs("div",{className:"vertex-datagrid-filter-empty",children:[r.jsx("svg",{width:"48",height:"48",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:r.jsx("path",{d:"M22 3H2l8 9.46V19l4 2v-8.54L22 3z"})}),r.jsx(xn,{size:"sm",color:"secondary",children:"No filters applied"}),r.jsx(br,{variant:"outline",size:"sm",onClick:()=>d(),children:"Add filter"})]}):r.jsxs(r.Fragment,{children:[t.items.map((n,o)=>{var i;const s=e.find(r=>r.field===n.field),d=(null==s?void 0:s.filterOperators)||Jn(null==s?void 0:s.type),v=!["isEmpty","isNotEmpty"].includes(n.operator);return r.jsxs("div",{className:"vertex-datagrid-filter-row",children:[o>0&&r.jsx("button",{className:"vertex-datagrid-filter-logic-btn",onClick:x,title:"Toggle AND/OR",children:(null===(i=t.logicOperator)||void 0===i?void 0:i.toUpperCase())||"OR"}),r.jsxs("div",{className:"vertex-datagrid-filter-controls",children:[r.jsx("select",{value:n.field,onChange:r=>c(o,{field:r.target.value}),className:"vertex-datagrid-filter-select",children:l.map(n=>r.jsx("option",{value:n.field,children:n.headerName},n.field))}),r.jsx("select",{value:n.operator,onChange:r=>c(o,{operator:r.target.value}),className:"vertex-datagrid-filter-select",children:d.map(n=>r.jsx("option",{value:n.value,children:n.label},n.value))}),v&&r.jsx(Dr,{value:n.value||"",onChange:r=>c(o,{value:r.target.value}),placeholder:"Value",size:"sm"}),r.jsx("button",{className:"vertex-datagrid-filter-remove",onClick:()=>(r=>{const n=t.items.filter((n,e)=>e!==r);a({...t,items:n})})(o),title:"Remove filter",children:r.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[r.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),r.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]})]},n.id||o)}),r.jsx("div",{className:"vertex-datagrid-filter-actions",children:r.jsx(br,{variant:"ghost",size:"sm",onClick:()=>d(),children:"+ Add filter"})})]})}),t.items.length>0&&r.jsx("div",{className:"vertex-datagrid-filter-panel-footer",children:r.jsx(br,{variant:"ghost",size:"sm",onClick:()=>a({items:[],logicOperator:"or"}),children:"Clear all"})})]})})},ne=({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:s=!1,ignoreDiacritics:d=!1,sortModel:c,onSortModelChange:x,checkboxSelection:v=!1,rowSelectionModel:m,onRowSelectionModelChange:p,pagination:h=!0,pageSize:u=10,pageSizeOptions:g=[5,10,25,50,100],loading:f=!1,skeletonLoader:b=!1,skeletonRows:w=5,loadingContent:y,emptyStateIcon:k,emptyStateTitle:j="No data available",emptyStateDescription:N,autoHeight:_=!1,density:z="standard",disableColumnMenu:C=!1,hideFooter:S=!1,size:M,className:$,...T})=>{var D,I;const{theme:L}=gr(),R=M||L.defaultSize,[F,A]=n.useState((null===(D=null==l?void 0:l.filter)||void 0===D?void 0:D.filterModel)||{items:[],logicOperator:"or"}),[E,B]=n.useState([]),[O,W]=n.useState([]),[P,H]=n.useState(0),[V,Y]=n.useState(u),[q,U]=n.useState(!1),[K,Q]=n.useState(null),[J,Z]=n.useState(),rr=null!=o?o:F,nr=null!=c?c:E,er=null!=m?m:O,tr=n.useCallback(r=>{i?i(r):A(r)},[i]),ar=n.useCallback(r=>{x?x(r):B(r)},[x]),or=n.useCallback(r=>{p?p(r):W(r)},[p]),ir=n.useMemo(()=>s||0===rr.items.length?t:t.filter(r=>{const n=rr.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||Jn(t.type)).find(r=>r.value===n.operator);if(!o)return!0;return o.getApplyFilterFn(n)(a)});return"and"===rr.logicOperator?n.every(r=>r):n.some(r=>r)}),[t,rr,e,s]),lr=n.useMemo(()=>{if(0===nr.length)return ir;const r=[...ir],n=nr[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},[ir,nr,e]),sr=n.useMemo(()=>{if(!h)return lr;const r=P*V,n=r+V;return lr.slice(r,n)},[lr,P,V,h]),dr=n.useCallback((r,n)=>{if(!r.sortable)return;let e;e=null===n?[]:[{field:r.field,sort:n}],ar(e)},[ar]),cr=n.useCallback(r=>{const n=er.includes(r)?er.filter(n=>n!==r):[...er,r];or(n)},[er,or]),xr=n.useCallback(()=>{if(er.length===sr.length)or([]);else{const r=sr.map((r,n)=>a(r,n));or(r)}},[er,sr,or,a]),vr=Math.ceil(lr.length/V),mr=rr.items.length>0,pr=`vertex-datagrid--${z}`,hr=`vertex-datagrid--${R}`,ur=(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=v?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 r.jsxs("div",{className:`vertex-datagrid ${pr} ${hr} ${_?"vertex-datagrid--auto-height":""} ${$||""}`,...T,children:[r.jsx("div",{className:"vertex-datagrid-container",children:r.jsxs("table",{className:"vertex-datagrid-table",children:[r.jsx("thead",{className:"vertex-datagrid-thead",children:r.jsxs("tr",{children:[v&&r.jsx("th",{className:"vertex-datagrid-th vertex-datagrid-checkbox-cell",children:r.jsx(yr,{checked:er.length===sr.length&&sr.length>0,indeterminate:er.length>0&&er.length<sr.length,onChange:xr})}),e.map((n,e)=>{const t=nr.find(r=>r.field===n.field),a=!!t,o=null==t?void 0:t.sort,i=rr.items.some(r=>r.field===n.field),l=ur(n,e,!0);return r.jsx("th",{className:`vertex-datagrid-th ${n.sortable?"vertex-datagrid-th--sortable":""} ${n.pinned?`vertex-datagrid-th--pinned-${n.pinned}`:""}`,style:{width:n.width,minWidth:n.minWidth,maxWidth:n.maxWidth,textAlign:n.headerAlign||n.align||"left",flex:n.flex,...l},children:r.jsxs("div",{className:"vertex-datagrid-th-content",children:[r.jsxs("div",{className:"vertex-datagrid-th-label",onClick:()=>n.sortable&&dr(n,a?"asc"===o?"desc":null:"asc"),children:[r.jsx("span",{className:"vertex-datagrid-th-text",children:n.headerName}),n.sortable&&r.jsx("div",{className:"vertex-datagrid-sort-icon "+(a?"vertex-datagrid-sort-icon--active":""),children:a?"asc"===o?r.jsx(G,{size:18}):r.jsx(X,{size:18}):r.jsx("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",opacity:"0.4",children:r.jsx("path",{d:"M12 5v14M5 12l7 7 7-7"})})})]}),!C&&(n.sortable||n.filterable)&&r.jsxs("button",{className:"vertex-datagrid-column-menu-btn "+(i?"vertex-datagrid-column-menu-btn--filtered":""),onClick:r=>{r.stopPropagation(),Q({column:n,anchorEl:r.currentTarget})},title:"Column options",children:[r.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:[r.jsx("circle",{cx:"12",cy:"5",r:"2"}),r.jsx("circle",{cx:"12",cy:"12",r:"2"}),r.jsx("circle",{cx:"12",cy:"19",r:"2"})]}),i&&r.jsx("span",{className:"vertex-datagrid-filter-badge"})]})]})},n.field)})]})}),r.jsx("tbody",{className:"vertex-datagrid-tbody",children:f?b?Array.from({length:w}).map((n,t)=>r.jsxs("tr",{className:"vertex-datagrid-row vertex-datagrid-row--skeleton",children:[v&&r.jsx("td",{className:"vertex-datagrid-td vertex-datagrid-checkbox-cell",children:r.jsx("div",{className:"vertex-datagrid-skeleton vertex-datagrid-skeleton--checkbox"})}),e.map(n=>r.jsx("td",{className:"vertex-datagrid-td",children:r.jsx("div",{className:"vertex-datagrid-skeleton vertex-datagrid-skeleton--text"})},n.field))]},`skeleton-${t}`)):r.jsx("tr",{children:r.jsx("td",{colSpan:e.length+(v?1:0),className:"vertex-datagrid-loading",children:r.jsx("div",{className:"vertex-datagrid-loading-content",children:y||r.jsxs(r.Fragment,{children:[r.jsx("div",{className:"vertex-datagrid-spinner"}),r.jsx(xn,{size:"sm",color:"secondary",children:"Loading..."})]})})})}):0===sr.length?r.jsx("tr",{children:r.jsx("td",{colSpan:e.length+(v?1:0),className:"vertex-datagrid-empty",children:k||N?r.jsxs("div",{className:"vertex-datagrid-empty-state",children:[k&&r.jsx("div",{className:"vertex-datagrid-empty-state-icon",children:k}),r.jsx("div",{className:"vertex-datagrid-empty-state-message",children:j}),N&&r.jsx("div",{className:"vertex-datagrid-empty-state-description",children:N})]}):r.jsxs("div",{className:"vertex-datagrid-empty-content",children:[r.jsxs("svg",{width:"64",height:"64",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1",opacity:"0.3",children:[r.jsx("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2"}),r.jsx("line",{x1:"3",y1:"9",x2:"21",y2:"9"}),r.jsx("line",{x1:"9",y1:"21",x2:"9",y2:"9"})]}),r.jsx(xn,{size:"sm",color:"secondary",children:j})]})})}):sr.map((n,t)=>{const o=a(n,t),i=er.includes(o);return r.jsxs("tr",{className:"vertex-datagrid-row "+(i?"vertex-datagrid-row--selected":""),children:[v&&r.jsx("td",{className:"vertex-datagrid-td vertex-datagrid-checkbox-cell",children:r.jsx(yr,{checked:i,onChange:()=>cr(o)})}),e.map((e,t)=>{const a=e.valueGetter?e.valueGetter(n):n[e.field],o=e.valueFormatter?e.valueFormatter(a):a,i=e.renderCell?e.renderCell({row:n,value:a,field:e.field}):o,l=ur(e,t,!1);return r.jsx("td",{className:"vertex-datagrid-td "+(e.pinned?`vertex-datagrid-td--pinned-${e.pinned}`:""),style:{textAlign:e.align||"left",...l},children:i},e.field)})]},o)})})]})}),!S&&h&&r.jsxs("div",{className:"vertex-datagrid-footer",children:[r.jsx("div",{className:"vertex-datagrid-footer-left",children:mr&&r.jsxs("button",{className:"vertex-datagrid-filter-chip",onClick:()=>U(!0),children:[r.jsx("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r.jsx("path",{d:"M22 3H2l8 9.46V19l4 2v-8.54L22 3z"})}),r.jsxs("span",{children:[rr.items.length," ",1===rr.items.length?"filter":"filters"]})]})}),r.jsx("div",{className:"vertex-datagrid-footer-center",children:r.jsx(xn,{size:"sm",color:"secondary",children:0===lr.length?"0 rows":`${P*V+1}–${Math.min((P+1)*V,lr.length)} of ${lr.length}`})}),r.jsxs("div",{className:"vertex-datagrid-footer-right",children:[r.jsxs("label",{className:"vertex-datagrid-pagesize-label",children:[r.jsx(xn,{size:"sm",color:"secondary",children:"Rows per page:"}),r.jsx("select",{value:V,onChange:r=>{Y(Number(r.target.value)),H(0)},className:"vertex-datagrid-pagesize-select",children:g.map(n=>r.jsx("option",{value:n,children:n},n))})]}),r.jsxs("div",{className:"vertex-datagrid-pagination",children:[r.jsx("button",{className:"vertex-datagrid-pagination-btn",onClick:()=>H(0),disabled:0===P,title:"First page",children:r.jsx("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r.jsx("path",{d:"M11 17l-5-5 5-5M18 17l-5-5 5-5"})})}),r.jsx("button",{className:"vertex-datagrid-pagination-btn",onClick:()=>H(r=>Math.max(0,r-1)),disabled:0===P,title:"Previous page",children:r.jsx("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r.jsx("path",{d:"M15 18l-6-6 6-6"})})}),r.jsxs(xn,{size:"sm",color:"secondary",children:["Page ",P+1," of ",vr||1]}),r.jsx("button",{className:"vertex-datagrid-pagination-btn",onClick:()=>H(r=>Math.min(vr-1,r+1)),disabled:P>=vr-1,title:"Next page",children:r.jsx("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r.jsx("path",{d:"M9 18l6-6-6-6"})})}),r.jsx("button",{className:"vertex-datagrid-pagination-btn",onClick:()=>H(vr-1),disabled:P>=vr-1,title:"Last page",children:r.jsx("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r.jsx("path",{d:"M13 17l5-5-5-5M6 17l5-5-5-5"})})})]})]})]}),K&&r.jsx(Zn,{column:K.column,anchorEl:K.anchorEl,onClose:()=>Q(null),onSort:r=>dr(K.column,r),onFilter:()=>{Z(K.column.field),U(!0)},currentSort:null===(I=nr.find(r=>r.field===K.column.field))||void 0===I?void 0:I.sort,hasFilter:rr.items.some(r=>r.field===K.column.field)}),q&&r.jsx(re,{columns:e,filterModel:rr,onFilterModelChange:tr,onClose:()=>{U(!1),Z(void 0)},targetColumn:J})]})};ne.displayName="DataGrid";const ee=tr(ne);ar("/* 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 te=i.default.forwardRef(({textAlign:n="center",orientation:e="horizontal",variant:t="fullWidth",light:a=!1,flexItem:o=!1,children:i,component:l,className:s="",role:d,...c},x)=>{const v=l||(i||"vertical"===e?"div":"hr"),m=d||("hr"!==v?"separator":void 0),p=["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}`,s].filter(Boolean).join(" "),h="vertical"===e&&"hr"!==v?{"aria-orientation":"vertical"}:{};return r.jsx(v,{ref:x,className:p,role:m,...h,...c,children:i&&r.jsx("span",{className:"vtx-divider-wrapper",children:i})})});te.displayName="Divider";const ae=tr(te);ar("/* 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 oe=i.default.forwardRef(({notifications:n,onNotificationClick:e,onMarkAllAsRead:t,onClose:a},o)=>{const i=n.filter(r=>!r.read).length;return r.jsxs("div",{ref:o,className:"vtx-header-notifications-panel",children:[r.jsx("div",{className:"vtx-header-notifications-header",children:r.jsxs(dn,{justify:"between",align:"center",children:[r.jsx(xn,{variant:"subtitle2",noMargin:!0,children:"Notifications"}),i>0&&t&&r.jsx("button",{className:"vtx-header-notifications-mark-read",onClick:()=>{t(),a()},children:"Mark all as read"})]})}),r.jsx("div",{className:"vtx-header-notifications-list",children:0===n.length?r.jsxs("div",{className:"vtx-header-notifications-empty",children:[r.jsx(w,{}),r.jsx(xn,{variant:"body2",color:"neutral.500",noMargin:!0,children:"No notifications"})]}):n.map(n=>r.jsxs("div",{className:`vtx-header-notification-item ${n.read?"":"vtx-header-notification-item--unread"} ${n.type?`vtx-header-notification-item--${n.type}`:""}`,onClick:()=>{null==e||e(n),a()},children:[n.icon&&r.jsx("div",{className:"vtx-header-notification-icon",children:n.icon}),r.jsxs("div",{className:"vtx-header-notification-content",children:[r.jsx(xn,{variant:"body2",noMargin:!0,style:{fontWeight:n.read?400:600},children:n.title}),n.description&&r.jsx(xn,{variant:"caption",color:"neutral.600",noMargin:!0,children:n.description}),r.jsx(xn,{variant:"caption",color:"neutral.500",noMargin:!0,style:{marginTop:"4px"},children:n.time})]}),!n.read&&r.jsx("div",{className:"vtx-header-notification-dot"})]},n.id))})]})});oe.displayName="NotificationPanel";const ie=i.default.forwardRef(({logo:e,title:t,onToggleSidebar:a,showToggle:o=!0,notifications:i=[],onNotificationClick:l,onMarkAllAsRead:s,userName:d,userSubtitle:c,userAvatar:x,userMenuItems:v=[],actions:m,className:p="",sticky:h=!0},u)=>{const[f,b]=n.useState(!1),[k,j]=n.useState(!1),N=n.useRef(null),_=n.useRef(null),z=n.useRef(null),C=i.filter(r=>!r.read).length;n.useEffect(()=>{const r=r=>{N.current&&!N.current.contains(r.target)&&z.current&&!z.current.contains(r.target)&&b(!1),_.current&&!_.current.contains(r.target)&&j(!1)};return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[]);const S=["vtx-header",h&&"vtx-header--sticky",p].filter(Boolean).join(" ");return r.jsxs("header",{ref:u,className:S,children:[r.jsxs(dn,{align:"center",gap:16,style:{flex:1},children:[o&&a&&r.jsx("button",{className:"vtx-header-toggle",onClick:a,"aria-label":"Toggle sidebar",children:r.jsx(y,{})}),e&&r.jsx("div",{className:"vtx-header-logo",children:e}),t&&r.jsx(xn,{variant:"h6",noMargin:!0,className:"vtx-header-title",children:t})]}),m&&r.jsx("div",{className:"vtx-header-actions",children:m}),r.jsxs("div",{className:"vtx-header-right",children:[i&&i.length>0&&r.jsxs("div",{className:"vtx-header-notifications",ref:N,children:[r.jsxs("button",{className:"vtx-header-icon-button "+(f?"vtx-header-icon-button--active":""),onClick:()=>b(!f),"aria-label":"Notifications",children:[r.jsx(w,{}),C>0&&r.jsx(Mn,{variant:"error",size:"sm",style:{position:"absolute",top:"4px",right:"4px",minWidth:"18px",height:"18px",padding:"0 4px"},children:C>9?"9+":C})]}),f&&r.jsx(oe,{ref:z,notifications:i,onNotificationClick:l,onMarkAllAsRead:s,onClose:()=>b(!1)})]}),d&&r.jsxs("div",{className:"vtx-header-user-menu",ref:_,children:[r.jsxs("button",{className:"vtx-header-user-button "+(k?"vtx-header-user-button--active":""),onClick:()=>j(!k),"aria-label":"User menu",children:[r.jsx(Rn,{src:x,alt:d,size:"sm"}),!x&&r.jsx("span",{className:"vtx-header-avatar-fallback",children:d.split(" ").map(r=>r[0]).join("").slice(0,2)}),r.jsxs("div",{className:"vtx-header-user-info",children:[r.jsx(xn,{variant:"body2",noMargin:!0,style:{fontWeight:600},children:d}),c&&r.jsx(xn,{variant:"caption",color:"neutral.600",noMargin:!0,children:c})]}),r.jsx(g,{})]}),k&&r.jsx("div",{className:"vtx-header-user-dropdown",children:r.jsx(hn,{items:v,responsive:!1})})]})]})]})});ie.displayName="Header";const le=tr(ie);ar("/* ===================================\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 se=({isOpen:n})=>r.jsx("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.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})}),de=i.default.forwardRef(({label:e,onClick:t,icon:a,disabled:o=!1,active:i=!1,items:l,badge:s,href:d,collapsed:c=!1,level:x=0},v)=>{const[m,p]=n.useState(!1),h=l&&l.length>0,u=r.jsx(r.Fragment,{children:r.jsxs(dn,{align:"center",gap:c?0:12,style:{flex:1,minWidth:0},children:[a&&r.jsx("span",{className:"vtx-sidemenu-item-icon",children:a}),!c&&r.jsxs(r.Fragment,{children:[r.jsx(xn,{variant:"body2",noMargin:!0,style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:e}),s&&r.jsx("span",{className:"vtx-sidemenu-item-badge",children:s}),h&&r.jsx(se,{isOpen:m})]})]})}),g=["vtx-sidemenu-item",i&&"vtx-sidemenu-item--active",o&&"vtx-sidemenu-item--disabled",h&&"vtx-sidemenu-item--has-submenu",c&&"vtx-sidemenu-item--collapsed"].filter(Boolean).join(" "),f=d?"a":"div";return r.jsxs(r.Fragment,{children:[r.jsx(f,{ref:v,className:g,onClick:r=>{o||(h?(r.preventDefault(),p(!m)):t&&(r.preventDefault(),t()))},onKeyDown:r=>{o||"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),h?p(!m):null==t||t())},role:"menuitem",tabIndex:o?-1:0,"aria-disabled":o,"aria-expanded":h?m:void 0,href:d,title:c?e:void 0,"data-label":c?e:void 0,children:u}),h&&m&&!c&&r.jsx("div",{className:"vtx-sidemenu-submenu",children:l.map((n,e)=>r.jsx(de,{...n,collapsed:c,level:x+1},e))})]})});de.displayName="SideMenuItem";const ce=i.default.forwardRef(({items:n,collapsed:e=!1,onCollapseToggle:t,className:a="",width:o="260px",collapsedWidth:i="80px",header:l,footer:s,headerPadding:d,footerPadding:c},x)=>{const v=e?"number"==typeof i?`${i}px`:i:"number"==typeof o?`${o}px`:o,m=["vtx-sidemenu",e&&"vtx-sidemenu--collapsed",a].filter(Boolean).join(" ");return r.jsxs("aside",{ref:x,className:m,style:{width:v},role:"navigation",children:[l&&r.jsx("div",{className:"vtx-sidemenu-header",style:d?{padding:"number"==typeof d?`${d}px`:d}:void 0,children:l}),r.jsx("div",{className:"vtx-sidemenu-content",children:n.map((n,t)=>r.jsx(de,{...n,collapsed:e},t))}),s&&r.jsx("div",{className:"vtx-sidemenu-footer",style:c?{padding:"number"==typeof c?`${c}px`:c}:void 0,children:s})]})});ce.displayName="SideMenu";const xe=tr(ce);function ve({columns:e,data:t,getRowKey:a,striped:o=!1,hoverable:l=!0,bordered:s=!1,size:d,caption:c,emptyMessage:x="No data available",emptyStateIcon:v,emptyStateDescription:m,loading:p=!1,loadingContent:h,skeletonLoader:u=!1,skeletonRows:f=5,scrollable:b=!0,maxHeight:w,onRowClick:y,isRowSelected:_,onRowSelect:z,sortable:C=!1,sortConfig:S,onSortChange:M,className:$="",containerClassName:T="",selectable:D=!1,selectedRows:I=[],onSelectionChange:L,pagination:R=!1,page:F=0,rowsPerPage:A=10,rowsPerPageOptions:E=[5,10,25,50],onPageChange:B,onRowsPerPageChange:O,dense:W=!1,expandableRows:P=!1,renderExpandedRow:H,expandedRows:V=[],onExpandRow:Y,stickyHeader:q=!1,toolbar:U,filterable:J=!1,filters:Z={},onFiltersChange:rr,...nr}){const{theme:er}=gr(),tr=d||er.defaultSize,[ar,or]=n.useState(S||null),[ir,lr]=n.useState(I),[sr,dr]=n.useState(V),[cr,xr]=n.useState(F),[vr,mr]=n.useState(A),[pr,hr]=n.useState(Z),ur=S||ar,fr=I.length>0?I:ir,br=V.length>0?V:sr,wr=B?F:cr,kr=O?A:vr,jr=Object.keys(Z).length>0?Z:pr,Nr=r=>{if(!C)return;const n=(null==ur?void 0:ur.key)===r&&"asc"===ur.direction?"desc":"asc",e={key:r,direction:n};M?M(r,n):or(e)},_r=n.useMemo(()=>{if(!ur||!C)return t;const r=e.find(r=>r.key===ur.key),n=null==r?void 0:r.sortFn;return[...t].sort((r,e)=>{if(n)return"asc"===ur.direction?n(r,e):n(e,r);const t=r[ur.key],a=e[ur.key];if("string"==typeof t&&"string"==typeof a)return"asc"===ur.direction?t.localeCompare(a):a.localeCompare(t);if("number"==typeof t&&"number"==typeof a)return"asc"===ur.direction?t-a:a-t;const o=String(t),i=String(a);return"asc"===ur.direction?o.localeCompare(i):i.localeCompare(o)})},[t,ur,e,C]),zr=n.useMemo(()=>J&&0!==Object.keys(jr).length?_r.filter(r=>Object.entries(jr).every(([n,t])=>{if(!t)return!0;const a=e.find(r=>r.key===n);if(null==a?void 0:a.filterFn)return a.filterFn(r,t);const o=r[n];return String(o||"").toLowerCase().includes(t.toLowerCase())})):_r,[_r,J,jr,e]),Cr=n.useMemo(()=>{if(!R)return zr;const r=wr*kr;return zr.slice(r,r+kr)},[zr,R,wr,kr]),Sr=R?Cr:zr,Mr=n.useCallback(r=>{if(!D)return;const n=r?Sr.map((r,n)=>a(r,n)):[];L?L(n):lr(n)},[D,Sr,a,L]),$r=n.useCallback((r,n)=>{if(!D)return;const e=n?[...fr,r]:fr.filter(n=>n!==r);L?L(e):lr(e)},[D,fr,L]),Tr=D&&Sr.length>0&&Sr.every((r,n)=>fr.includes(a(r,n))),Ir=D&&fr.length>0&&!Tr,Lr=n.useCallback(r=>{if(!P)return;const n=br.includes(r)?br.filter(n=>n!==r):[...br,r];Y?Y(r):dr(n)},[P,br,Y]),Rr=n.useCallback(r=>{B?B(r):xr(r)},[B]),Fr=n.useCallback(r=>{O?O(r):(mr(r),xr(0))},[O]),Ar=n.useCallback((r,n)=>{const e={...jr,[r]:n};n||delete e[r],rr?rr(e):hr(e),R&&(B?B(0):xr(0))},[jr,rr,R,B]),Er=["vtx-table-container",b&&"vtx-table-container--scrollable",w&&"vtx-table-container--fixed-header",q&&"vtx-table-container--sticky-header",T].filter(Boolean).join(" "),Br=["vtx-table",`vtx-table--${tr}`,W&&"vtx-table--dense",o&&"vtx-table--striped",l&&"vtx-table--hoverable",s&&"vtx-table--bordered",(y||D)&&"vtx-table--clickable",q&&"vtx-table--sticky-header",$].filter(Boolean).join(" "),Or=(r,n,e)=>{z&&z(r,n),null==y||y(r,n,e)},Wr=n=>{if(!C)return null;const e=(null==ur?void 0:ur.key)===n,t=null==ur?void 0:ur.direction;return e?r.jsx("span",{className:"vtx-table-sort-icon vtx-table-sort-icon--active",children:"asc"===t?r.jsx(G,{size:14}):r.jsx(X,{size:14})}):r.jsx("span",{className:"vtx-table-sort-icon vtx-table-sort-icon--inactive",children:r.jsx(G,{size:14})})};return r.jsxs("div",{className:"vtx-table-wrapper",children:[U&&r.jsx("div",{className:"vtx-table-toolbar",children:"object"==typeof U&&null!==U&&!i.default.isValidElement(U)&&"title"in U?r.jsxs(dn,{justify:"between",align:"center",style:{width:"100%"},children:[U.title&&r.jsx(xn,{variant:"h6",noMargin:!0,children:U.title}),U.actions&&r.jsx("div",{className:"vtx-table-toolbar-actions",children:U.actions})]}):r.jsx(r.Fragment,{children:U})}),D&&fr.length>0&&r.jsx("div",{className:"vtx-table-selection-toolbar",children:r.jsx(dn,{align:"center",gap:16,children:r.jsxs(xn,{variant:"body2",noMargin:!0,children:[fr.length," selected"]})})}),r.jsx("div",{className:Er,style:{maxHeight:w},children:r.jsxs("table",{className:Br,...nr,children:[c&&r.jsx("caption",{className:"vtx-table-caption",children:c}),r.jsx("thead",{className:"vtx-table-header",children:r.jsxs("tr",{children:[D&&r.jsx("th",{className:"vtx-table-header-cell vtx-table-cell--checkbox",children:r.jsx(yr,{checked:Tr,indeterminate:Ir,onChange:r=>Mr(r.target.checked),"aria-label":"Select all rows"})}),P&&r.jsx("th",{className:"vtx-table-header-cell vtx-table-cell--expand"}),e.map(n=>{const e=C&&!1!==n.sortable,t=J&&!1!==n.filterable,a=["vtx-table-header-cell",e&&"vtx-table-header-cell--sortable",n.sticky&&`vtx-table-header-cell--sticky-${n.sticky}`,n.headerClassName].filter(Boolean).join(" ");return r.jsx("th",{className:a,style:{width:n.width,minWidth:n.minWidth,maxWidth:n.maxWidth,textAlign:n.align||"left"},"aria-sort":(null==ur?void 0:ur.key)===n.key?"asc"===ur.direction?"ascending":"descending":void 0,children:r.jsxs("div",{className:"vtx-table-header-content",children:[r.jsxs("div",{className:"vtx-table-header-label",onClick:()=>e&&Nr(n.key),onKeyDown:r=>{!e||"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),Nr(n.key))},role:e?"button":void 0,tabIndex:e?0:void 0,style:{cursor:e?"pointer":"default"},children:[r.jsx("span",{children:n.header}),e&&Wr(n.key)]}),t&&r.jsx("div",{className:"vtx-table-filter",children:r.jsx(Dr,{size:"sm",placeholder:n.filterPlaceholder||`Filter ${n.header}...`,value:jr[n.key]||"",onChange:r=>Ar(n.key,r.target.value),className:"vtx-table-filter-input"})})]})},n.key)})]})}),r.jsx("tbody",{className:"vtx-table-body",children:p?u?Array.from({length:f}).map((n,t)=>r.jsxs("tr",{className:"vtx-table-row vtx-table-row--skeleton",children:[D&&r.jsx("td",{className:"vtx-table-cell",children:r.jsx("div",{className:"vtx-table-skeleton vtx-table-skeleton--checkbox"})}),P&&r.jsx("td",{className:"vtx-table-cell",children:r.jsx("div",{className:"vtx-table-skeleton vtx-table-skeleton--icon"})}),e.map(n=>r.jsx("td",{className:"vtx-table-cell",children:r.jsx("div",{className:"vtx-table-skeleton vtx-table-skeleton--text"})},n.key))]},`skeleton-${t}`)):r.jsx("tr",{children:r.jsx("td",{colSpan:e.length+(D?1:0)+(P?1:0),className:"vtx-table-loading",children:h||r.jsx("span",{className:"vtx-table-loading-spinner",children:"Loading..."})})}):0===Sr.length?r.jsx("tr",{children:r.jsx("td",{colSpan:e.length+(D?1:0)+(P?1:0),className:"vtx-table-empty",children:v||m?r.jsxs("div",{className:"vtx-table-empty-state",children:[v&&r.jsx("div",{className:"vtx-table-empty-state-icon",children:v}),r.jsx("div",{className:"vtx-table-empty-state-message",children:x}),m&&r.jsx("div",{className:"vtx-table-empty-state-description",children:m})]}):x})}):Sr.map((n,t)=>{const o=a(n,t),l=fr.includes(o),s=br.includes(o),d=["vtx-table-row",l&&"vtx-table-row--selected",s&&"vtx-table-row--expanded"].filter(Boolean).join(" ");return r.jsxs(i.default.Fragment,{children:[r.jsxs("tr",{className:d,onClick:r=>{D&&!r.target.closest("input, button")||Or(n,t,r)},role:y?"button":void 0,tabIndex:y?0:void 0,"aria-selected":l,onKeyDown:r=>{!y||"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),Or(n,t,r))},children:[D&&r.jsx("td",{className:"vtx-table-cell vtx-table-cell--checkbox",children:r.jsx(yr,{checked:l,onChange:r=>{r.stopPropagation(),$r(o,r.target.checked)},"aria-label":`Select row ${t+1}`})}),P&&r.jsx("td",{className:"vtx-table-cell vtx-table-cell--expand",children:r.jsx("button",{className:"vtx-table-expand-button",onClick:r=>{r.stopPropagation(),Lr(o)},"aria-label":s?"Collapse row":"Expand row","aria-expanded":s,children:s?r.jsx(k,{size:16}):r.jsx(g,{size:16})})}),e.map(e=>{const a=["vtx-table-cell",e.sticky&&`vtx-table-cell--sticky-${e.sticky}`,e.className].filter(Boolean).join(" ");return r.jsx("td",{className:a,style:{textAlign:e.align||"left",width:e.width,minWidth:e.minWidth,maxWidth:e.maxWidth},children:e.render?e.render(n,t):n[e.key]},e.key)})]}),P&&s&&H&&r.jsx("tr",{className:"vtx-table-row-expanded",children:r.jsx("td",{colSpan:e.length+(D?1:0)+1,className:"vtx-table-cell-expanded",children:H(n,t)})})]},o)})})]})}),R&&r.jsx("div",{className:"vtx-table-pagination",children:r.jsxs(dn,{align:"center",justify:"between",style:{width:"100%"},children:[r.jsxs(dn,{align:"center",gap:8,children:[r.jsx(xn,{variant:"body2",color:"neutral.600",noMargin:!0,children:"Rows per page:"}),r.jsx("select",{className:"vtx-table-pagination-select",value:kr,onChange:r=>Fr(Number(r.target.value)),"aria-label":"Rows per page",children:E.map(n=>r.jsx("option",{value:n,children:n},n))})]}),r.jsxs(dn,{align:"center",gap:16,children:[r.jsxs(xn,{variant:"body2",color:"neutral.600",noMargin:!0,children:[wr*kr+1,"–",Math.min((wr+1)*kr,zr.length)," of"," ",zr.length]}),r.jsxs(dn,{align:"center",gap:4,children:[r.jsx("button",{className:"vtx-table-pagination-button",onClick:()=>Rr(0),disabled:0===wr,"aria-label":"First page",title:"First page",children:r.jsx(K,{size:18})}),r.jsx("button",{className:"vtx-table-pagination-button",onClick:()=>Rr(wr-1),disabled:0===wr,"aria-label":"Previous page",title:"Previous page",children:r.jsx(j,{size:18})}),r.jsx("button",{className:"vtx-table-pagination-button",onClick:()=>Rr(wr+1),disabled:(wr+1)*kr>=zr.length,"aria-label":"Next page",title:"Next page",children:r.jsx(N,{size:18})}),r.jsx("button",{className:"vtx-table-pagination-button",onClick:()=>Rr(Math.ceil(zr.length/kr)-1),disabled:(wr+1)*kr>=zr.length,"aria-label":"Last page",title:"Last page",children:r.jsx(Q,{size:18})})]})]})]})})]})}ar("/* 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 align-items: center;\n gap: var(--vtx-spacing-1);\n}\n\n.vtx-table-sort-icon {\n display: flex;\n flex-direction: column;\n margin-left: var(--vtx-spacing-1);\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--small .vtx-table-header-cell,\n.vtx-table--small .vtx-table-cell {\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\n font-size: var(--vtx-font-size-sm);\n}\n\n.vtx-table--large .vtx-table-header-cell,\n.vtx-table--large .vtx-table-cell {\n padding: var(--vtx-spacing-4) var(--vtx-spacing-6);\n font-size: var(--vtx-font-size-lg);\n}\n\n.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.vtx-table-empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--vtx-spacing-3);\n padding: var(--vtx-spacing-8) var(--vtx-spacing-4);\n}\n\n.vtx-table-empty-state-icon {\n font-size: 48px;\n color: var(--vtx-color-neutral-400);\n opacity: 0.6;\n}\n\n.vtx-table-empty-state-message {\n font-size: var(--vtx-font-size-lg);\n font-weight: var(--vtx-font-weight-semibold);\n color: var(--vtx-color-neutral-700);\n font-style: normal;\n}\n\n.vtx-table-empty-state-description {\n font-size: var(--vtx-font-size-sm);\n color: var(--vtx-color-neutral-500);\n max-width: 400px;\n line-height: 1.5;\n font-style: normal;\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/* Skeleton loader */\n.vtx-table-row--skeleton {\n animation: vtx-pulse 1.5s ease-in-out infinite;\n}\n\n.vtx-table-skeleton {\n height: 16px;\n background: linear-gradient(\n 90deg,\n var(--vtx-color-neutral-200) 25%,\n var(--vtx-color-neutral-100) 50%,\n var(--vtx-color-neutral-200) 75%\n );\n background-size: 200% 100%;\n border-radius: var(--vtx-radius-sm);\n animation: vtx-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.vtx-table-skeleton--text {\n width: 100%;\n max-width: 180px;\n}\n\n.vtx-table-skeleton--checkbox {\n width: 16px;\n height: 16px;\n border-radius: var(--vtx-radius-xs);\n}\n\n.vtx-table-skeleton--icon {\n width: 20px;\n height: 20px;\n border-radius: var(--vtx-radius-xs);\n}\n\n@keyframes vtx-skeleton-shimmer {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n}\n\n@keyframes vtx-pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.7;\n }\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/* Dark mode */\n[data-theme='dark'] .vtx-table-wrapper {\n background-color: var(--vtx-color-neutral-800);\n border-color: var(--vtx-color-neutral-700);\n}\n\n[data-theme='dark'] .vtx-table {\n background-color: var(--vtx-color-neutral-800);\n color: var(--vtx-color-neutral-100);\n}\n\n[data-theme='dark'] .vtx-table-empty-state-icon {\n color: var(--vtx-color-neutral-500);\n}\n\n[data-theme='dark'] .vtx-table-empty-state-message {\n color: var(--vtx-color-neutral-200);\n}\n\n[data-theme='dark'] .vtx-table-empty-state-description {\n color: var(--vtx-color-neutral-400);\n}\n\n[data-theme='dark'] .vtx-table-skeleton {\n background: linear-gradient(\n 90deg,\n var(--vtx-color-neutral-700) 25%,\n var(--vtx-color-neutral-600) 50%,\n var(--vtx-color-neutral-700) 75%\n );\n background-size: 200% 100%;\n}\n\n[data-theme='dark'] .vtx-table-cell--sticky-left,\n[data-theme='dark'] .vtx-table-header-cell--sticky-left,\n[data-theme='dark'] .vtx-table-cell--sticky-right,\n[data-theme='dark'] .vtx-table-header-cell--sticky-right {\n background-color: var(--vtx-color-neutral-800);\n}\n\n[data-theme='dark'] .vtx-table-header-cell--sticky-left,\n[data-theme='dark'] .vtx-table-header-cell--sticky-right {\n background-color: var(--vtx-color-neutral-700);\n}"),ve.displayName="Table";const me=tr(ve);ar("/* ==================== 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:n,currentStep:e,orientation:t="horizontal",variant:a="default",showCheckmarks:o=!0,color:i="success",size:l="md",className:s="",style:d})=>{const c=n.map(r=>"string"==typeof r?{label:r}:r),x=(n,e,t)=>n.icon?r.jsx("span",{className:"timeline-step-custom-icon",children:n.icon}):"completed"===t&&o?r.jsx("svg",{className:"timeline-step-checkmark",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("path",{d:"M20 6L9 17L4 12",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round"})}):"numbered"===a?r.jsx("span",{className:"timeline-step-number",children:e+1}):r.jsx("span",{className:"timeline-step-dot"});return r.jsx("div",{className:`timeline timeline--${t} timeline--${a} timeline--${i} timeline--${l} ${s}`,style:d,children:c.map((n,t)=>{const a=(r=>r<e?"completed":r===e?"active":"pending")(t),o=t===c.length-1,i=!!n.onClick,l=(r=>r<e)(t);return r.jsxs("div",{className:`timeline-step timeline-step--${a} ${i?"timeline-step--clickable":""}`,onClick:()=>(r=>{r.onClick&&r.onClick()})(n),children:[r.jsx("div",{className:"timeline-step-indicator",children:r.jsx("div",{className:"timeline-step-icon-wrapper",children:x(n,t,a)})}),!o&&r.jsx("div",{className:"timeline-connector "+(l?"timeline-connector--filled":"")}),r.jsxs("div",{className:"timeline-step-content",children:[r.jsx(xn,{variant:"body2",weight:"active"===a?"semibold":"medium",noMargin:!0,className:"timeline-step-label",children:n.label}),n.description&&r.jsx(xn,{variant:"caption",noMargin:!0,className:"timeline-step-description",children:n.description})]})]},t)})})};pe.displayName="Timeline";ar("/* Container Component Styles */\r\n\r\n.vtx-container {\r\n width: 100%;\r\n margin-left: auto;\r\n margin-right: auto;\r\n padding-left: var(--vtx-spacing-4);\r\n padding-right: var(--vtx-spacing-4);\r\n box-sizing: border-box;\r\n}\r\n\r\n/* Fluid container - 100% width */\r\n.vtx-container--fluid {\r\n max-width: 100%;\r\n}\r\n\r\n/* Fixed max-width variants */\r\n.vtx-container--xs {\r\n max-width: 540px;\r\n}\r\n\r\n.vtx-container--sm {\r\n max-width: 720px;\r\n}\r\n\r\n.vtx-container--md {\r\n max-width: 960px;\r\n}\r\n\r\n.vtx-container--lg {\r\n max-width: 1140px;\r\n}\r\n\r\n.vtx-container--xl {\r\n max-width: 1320px;\r\n}\r\n\r\n/* No gutters variant */\r\n.vtx-container--no-gutters {\r\n padding-left: 0;\r\n padding-right: 0;\r\n}\r\n\r\n/* Responsive breakpoints - Bootstrap-like behavior */\r\n@media (min-width: 576px) {\r\n .vtx-container--xs,\r\n .vtx-container--sm,\r\n .vtx-container--md,\r\n .vtx-container--lg,\r\n .vtx-container--xl {\r\n padding-left: var(--vtx-spacing-4);\r\n padding-right: var(--vtx-spacing-4);\r\n }\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .vtx-container--xs,\r\n .vtx-container--sm,\r\n .vtx-container--md,\r\n .vtx-container--lg,\r\n .vtx-container--xl {\r\n padding-left: var(--vtx-spacing-6);\r\n padding-right: var(--vtx-spacing-6);\r\n }\r\n}\r\n\r\n@media (min-width: 992px) {\r\n .vtx-container--xs,\r\n .vtx-container--sm,\r\n .vtx-container--md,\r\n .vtx-container--lg,\r\n .vtx-container--xl {\r\n padding-left: var(--vtx-spacing-6);\r\n padding-right: var(--vtx-spacing-6);\r\n }\r\n}\r\n\r\n@media (min-width: 1200px) {\r\n .vtx-container--xs,\r\n .vtx-container--sm,\r\n .vtx-container--md,\r\n .vtx-container--lg,\r\n .vtx-container--xl {\r\n padding-left: var(--vtx-spacing-8);\r\n padding-right: var(--vtx-spacing-8);\r\n }\r\n}\r\n\r\n/* Dark mode support */\r\n[data-theme='dark'] .vtx-container {\r\n /* Container doesn't have background by default, so nothing to change */\r\n /* If you want to add background colors, do it here */\r\n}\r\n");const he=i.default.forwardRef(({maxWidth:n="lg",disableGutters:e=!1,fluid:t=!1,className:a="",children:o,...i},l)=>{const s=["vtx-container",t||"fluid"===n?"vtx-container--fluid":`vtx-container--${n}`,e&&"vtx-container--no-gutters",a].filter(Boolean).join(" ");return r.jsx("div",{ref:l,className:s,...i,children:o})});he.displayName="Container";const ue=tr(he);ar("/* 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 ge=i.default.forwardRef(({container:n=!1,item:e=!1,spacing:t,rowSpacing:a,columnSpacing:o,xs:i,sm:l,md:s,lg:d,xl:c,justifyContent:x,alignItems:v,alignContent:m,direction:p="row",wrap:h="wrap",className:u="",children:g,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!==s&&"vtx-grid-md"+(!0===s?"":"auto"===s?"-auto":`-${s}`),void 0!==d&&"vtx-grid-lg"+(!0===d?"":"auto"===d?"-auto":`-${d}`),void 0!==c&&"vtx-grid-xl"+(!0===c?"":"auto"===c?"-auto":`-${c}`),n&&"row"!==p&&`vtx-grid-direction-${p}`,n&&"wrap"!==h&&`vtx-grid-wrap-${h}`,u].filter(Boolean).join(" "),k={...f};return n&&(x&&(k.justifyContent=x),v&&(k.alignItems=v),m&&(k.alignContent=m)),r.jsx("div",{ref:w,className:y,style:Object.keys(k).length>0?k:void 0,...b,children:g})});ge.displayName="Grid";const fe=tr(ge);ar(".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 be=i.default.forwardRef(({icon:n,iconVariant:e="primary",text:t,subText:a,className:o="",style:i,...l},s)=>r.jsx(Cn,{variant:"outlined",className:o,style:i,ref:s,...l,children:r.jsxs(fe,{container:!0,spacing:2,alignItems:"center",wrap:"nowrap",justifyContent:"center",children:[r.jsx(fe,{item:!0,xs:"auto",children:r.jsx(dn,{align:"center",justify:"center",children:r.jsx("span",{className:`infocard-icon infocard-icon--${e}`,children:n})})}),r.jsxs(fe,{item:!0,xs:!0,children:[r.jsx(xn,{variant:"caption",children:t}),a&&r.jsx(xn,{variant:"subtitle2",children:a})]})]})}));be.displayName="InfoCardBase";const we=i.default.forwardRef(({value:n,label:e,className:t="",style:a,...o},i)=>r.jsx(Cn,{variant:"outlined",className:t,style:a,ref:i,...o,children:r.jsxs(dn,{direction:"column",align:"center",justify:"center",style:{minHeight:80},children:[r.jsx(xn,{variant:"h4",children:n}),e&&r.jsx(xn,{variant:"caption",children:e})]})}));we.displayName="InfoCardMetric";const ye={Base:tr(be),Metric:tr(we)};ar("/* 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 ke=i.default.forwardRef(({icon:n,iconVariant:e="primary",iconCircle:t=!0,heading:a,subText:o,className:i="",style:l,...s},d)=>r.jsxs(dn,{direction:"row",align:"center",gap:8,className:`infotext-base ${i}`,style:l,ref:d,...s,children:[r.jsx(dn,{align:"center",justify:"center",className:"infotext-icon-wrapper",children:t?r.jsx("span",{className:`infotext-icon infotext-icon--${e}`,children:n}):r.jsx("span",{className:"infotext-icon-plain",children:n})}),r.jsxs(dn,{direction:"column",gap:4,children:[r.jsx(xn,{variant:"body1",weight:"medium",noMargin:!0,children:a}),o&&r.jsx(xn,{variant:"caption",color:"text-secondary",noMargin:!0,children:o})]})]}));ke.displayName="InfoTextBase";const je=i.default.forwardRef(({icon:n,iconVariant:e="primary",iconCircle:t=!0,value:a,label:o,subText:i,className:l="",style:s,...d},c)=>r.jsxs(dn,{direction:"row",align:"center",gap:8,className:`infotext-stat ${l}`,style:s,ref:c,...d,children:[n&&r.jsx(dn,{align:"center",justify:"center",className:"infotext-icon-wrapper",children:t?r.jsx("span",{className:`infotext-icon infotext-icon--${e}`,children:n}):r.jsx("span",{className:"infotext-icon-plain",children:n})}),r.jsxs(dn,{direction:"column",gap:4,children:[r.jsx(xn,{variant:"h5",weight:"bold",noMargin:!0,children:a}),r.jsx(xn,{variant:"body2",weight:"medium",noMargin:!0,children:o}),i&&r.jsx(xn,{variant:"caption",color:"text-secondary",noMargin:!0,children:i})]})]}));je.displayName="InfoTextStat";const Ne=i.default.forwardRef(({icon:n,iconVariant:e="primary",iconCircle:t=!0,title:a,description:o,badge:i,className:l="",style:s,...d},c)=>r.jsxs(dn,{direction:"row",align:"start",gap:8,className:`infotext-feature ${l}`,style:s,ref:c,...d,children:[r.jsx(dn,{align:"center",justify:"center",className:"infotext-icon-wrapper",children:t?r.jsx("span",{className:`infotext-icon infotext-icon--${e}`,children:n}):r.jsx("span",{className:"infotext-icon-plain",children:n})}),r.jsxs(dn,{direction:"column",gap:6,style:{flex:1},children:[r.jsxs(dn,{align:"center",gap:8,children:[r.jsx(xn,{variant:"h6",weight:"semibold",noMargin:!0,children:a}),i&&r.jsx("span",{className:"infotext-badge",children:i})]}),r.jsx(xn,{variant:"body2",color:"text-secondary",noMargin:!0,children:o})]})]}));Ne.displayName="InfoTextFeature";const _e=i.default.forwardRef(({icon:n,iconVariant:e="primary",iconCircle:t=!0,text:a,className:o="",style:i,...l},s)=>r.jsxs(dn,{direction:"row",align:"center",gap:8,className:`infotext-compact ${o}`,style:i,ref:s,...l,children:[t?r.jsx("span",{className:`infotext-icon-small infotext-icon-small--${e}`,children:n}):r.jsx("span",{className:"infotext-icon-small-plain",children:n}),r.jsx(xn,{variant:"body2",noMargin:!0,children:a})]}));_e.displayName="InfoTextCompact";const ze=i.default.forwardRef(({icon:n,iconVariant:e="primary",iconCircle:t=!0,heading:a,subText:o,className:i="",style:l,...s},d)=>r.jsxs(dn,{direction:"column",align:"center",gap:10,className:`infotext-vertical ${i}`,style:l,ref:d,...s,children:[r.jsx(dn,{align:"center",justify:"center",className:"infotext-icon-wrapper",children:t?r.jsx("span",{className:`infotext-icon infotext-icon--${e}`,children:n}):r.jsx("span",{className:"infotext-icon-plain",children:n})}),r.jsxs(dn,{direction:"column",gap:4,align:"center",children:[r.jsx(xn,{variant:"body1",weight:"medium",align:"center",noMargin:!0,children:a}),o&&r.jsx(xn,{variant:"caption",color:"text-secondary",align:"center",noMargin:!0,children:o})]})]}));ze.displayName="InfoTextVertical";const Ce={Base:tr(ke),Stat:tr(je),Feature:tr(Ne),Compact:tr(_e),Vertical:tr(ze)};ar("/* ==================== 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 Se=i.default.forwardRef(({id:e,image:t,imageAlt:a="Product",category:o,name:i,weight:l,units:s,price:d,originalPrice:c,discount:x,rating:v,initialQuantity:m=0,featured:p=!1,featuredText:h="Featured",showWishlist:u=!1,isWishlisted:g=!1,cartIcon:f,wishlistIcon:b,wishlistFilledIcon:w,quickViewIcon:y,onAddToCart:k,onIncrementCart:j,onDecrementCart:N,onWishlist:_,onQuickView:z,onClick:C,loading:S=!1,className:M="",style:$,...T},D)=>{const[I,L]=n.useState(m),[R,F]=n.useState(!1),A=R||S;return r.jsx(Cn,{variant:"outlined",className:`productcard ${M}`,style:{padding:0,...$},ref:D,...T,children:r.jsxs(dn,{direction:"column",children:[r.jsxs("div",{className:"productcard-image-wrapper",onClick:C,style:{cursor:C?"pointer":"default"},children:[r.jsx("img",{src:t,alt:a,className:"productcard-image"}),r.jsxs("div",{className:"productcard-badges",children:[p&&r.jsx("span",{className:"productcard-featured-badge",children:h}),x&&r.jsx("span",{className:"productcard-discount-badge",children:x})]}),u&&_&&r.jsx("button",{className:"productcard-wishlist-btn "+(g?"productcard-wishlist-btn--active":""),onClick:r=>{r.stopPropagation(),_()},"aria-label":g?"Remove from wishlist":"Add to wishlist",children:g?w||b||"♥":b||"♡"}),z&&r.jsx("div",{className:"productcard-hover-overlay",children:r.jsx(br,{variant:"secondary",size:"sm",leftIcon:y||"👁",onClick:r=>{r.stopPropagation(),z()},children:"Quick View"})})]}),r.jsxs(dn,{direction:"column",gap:5,style:{padding:"12px"},children:[o&&r.jsx("div",{style:{display:"inline-flex",alignSelf:"flex-start"},children:r.jsx(Lr,{label:o,variant:"outlined",className:"productcard-category"})}),r.jsx(xn,{variant:"body1",noMargin:!0,onClick:C,style:{cursor:C?"pointer":"default"},children:i}),(void 0!==l||s)&&r.jsx(xn,{variant:"body1",noMargin:!0,className:"productcard-weight",children:void 0!==l&&s?`${l} ${s}`:void 0!==l?l:"-"}),void 0!==v&&r.jsxs(dn,{align:"center",gap:5,className:"productcard-rating-wrapper",children:[r.jsxs("div",{className:"productcard-rating",children:["★".repeat(Math.floor(v)),"☆".repeat(5-Math.floor(v))]}),r.jsx(xn,{variant:"caption",noMargin:!0,children:v})]}),r.jsxs(dn,{align:"center",gap:8,children:[r.jsxs(xn,{variant:"h5",noMargin:!0,className:"productcard-price",children:["$",Number(d).toFixed(2)]}),c&&c>d&&r.jsxs(xn,{variant:"body2",noMargin:!0,className:"productcard-original-price",children:["$",Number(c).toFixed(2)]})]}),A?r.jsx(br,{fullWidth:!0,loading:!0,variant:"primary",children:"Loading"}):0===I?r.jsx(br,{fullWidth:!0,variant:"primary",leftIcon:f,onClick:async()=>{if(k){F(!0);try{await k(e,1),L(1)}catch(r){console.error("Add to cart error:",r)}finally{F(!1)}}},children:"Add to cart"}):r.jsxs(dn,{align:"center",direction:"row",justify:"between",className:"productcard-quantity-selector",children:[r.jsx(br,{variant:"secondary",onClick:async()=>{if(N&&!(I<=0)){F(!0);try{await N(e,I),L(I-1)}catch(r){console.error("Decrement error:",r)}finally{F(!1)}}},children:"-"}),r.jsx(xn,{noMargin:!0,className:"productcard-quantity-value",children:I}),r.jsx(br,{variant:"secondary",onClick:async()=>{if(j){F(!0);try{await j(e,I),L(I+1)}catch(r){console.error("Increment error:",r)}finally{F(!1)}}},children:"+"})]})]})]})})});Se.displayName="ProductCardBase";const Me=i.default.forwardRef(({imagePosition:e="left",...t},a)=>{const{id:o,image:i,imageAlt:l="Product",category:s,name:d,weight:c,units:x,price:v,originalPrice:m,discount:p,rating:h,initialQuantity:u=0,featured:g=!1,featuredText:f="Featured",showWishlist:b=!1,isWishlisted:w=!1,cartIcon:y,wishlistIcon:k,wishlistFilledIcon:j,quickViewIcon:N,onAddToCart:_,onIncrementCart:z,onDecrementCart:C,onWishlist:S,onQuickView:M,onClick:$,loading:T=!1,className:D="",style:I}=t,[L,R]=n.useState(u),[F,A]=n.useState(!1),E=F||T;return r.jsx(Cn,{variant:"outlined",className:`productcard-wide ${D}`,style:{padding:0,...I},ref:a,children:r.jsxs(dn,{direction:"left"===e?"row":"row-reverse",children:[r.jsxs("div",{className:"productcard-wide-image-wrapper",onClick:$,style:{cursor:$?"pointer":"default"},children:[r.jsx("img",{src:i,alt:l,className:"productcard-wide-image"}),r.jsxs("div",{className:"productcard-badges",children:[g&&r.jsx("span",{className:"productcard-featured-badge",children:f}),p&&r.jsx("span",{className:"productcard-discount-badge",children:p})]}),b&&S&&r.jsx("button",{className:"productcard-wishlist-btn "+(w?"productcard-wishlist-btn--active":""),onClick:r=>{r.stopPropagation(),S()},children:w?j||k||"♥":k||"♡"})]}),r.jsxs(dn,{direction:"column",gap:12,style:{padding:"16px 20px",flex:1,minWidth:0},children:[s&&r.jsx("div",{style:{display:"inline-flex",alignSelf:"flex-start"},children:r.jsx(Lr,{label:s,variant:"outlined",className:"productcard-category"})}),r.jsxs(dn,{direction:"column",gap:6,children:[r.jsx(xn,{variant:"h5",weight:"bold",noMargin:!0,onClick:$,style:{cursor:$?"pointer":"default",wordBreak:"break-word"},children:d}),(void 0!==c||x)&&r.jsx(xn,{variant:"body2",noMargin:!0,className:"productcard-weight",children:void 0!==c&&x?`${c} ${x}`:void 0!==c?c:"-"})]}),void 0!==h&&r.jsxs(dn,{align:"center",gap:6,children:[r.jsxs("div",{className:"productcard-rating",children:["★".repeat(Math.floor(h)),"☆".repeat(5-Math.floor(h))]}),r.jsx(xn,{variant:"caption",noMargin:!0,children:h})]}),r.jsxs(dn,{align:"center",gap:8,wrap:"wrap",style:{marginTop:"auto"},children:[r.jsxs(xn,{variant:"h4",weight:"bold",noMargin:!0,className:"productcard-price",children:["$",Number(v).toFixed(2)]}),m&&m>v&&r.jsxs(xn,{variant:"body1",noMargin:!0,className:"productcard-original-price",children:["$",Number(m).toFixed(2)]})]}),r.jsxs(dn,{gap:12,align:"center",direction:"row",wrap:"wrap",children:[r.jsx("div",{style:{flex:"1 1 auto",minWidth:"140px"},children:E?r.jsx(br,{fullWidth:!0,loading:!0,variant:"primary",children:"Loading"}):0===L?r.jsx(br,{fullWidth:!0,variant:"primary",leftIcon:y,onClick:async()=>{if(_){A(!0);try{await _(o,1),R(1)}catch(r){console.error("Add to cart error:",r)}finally{A(!1)}}},children:"Add to cart"}):r.jsxs(dn,{align:"center",direction:"row",justify:"between",className:"productcard-quantity-selector",children:[r.jsx(br,{variant:"secondary",onClick:async()=>{if(C&&!(L<=0)){A(!0);try{await C(o,L),R(L-1)}catch(r){console.error("Decrement error:",r)}finally{A(!1)}}},children:"-"}),r.jsx(xn,{noMargin:!0,className:"productcard-quantity-value",children:L}),r.jsx(br,{variant:"primary",onClick:async()=>{if(z){A(!0);try{await z(o,L),R(L+1)}catch(r){console.error("Increment error:",r)}finally{A(!1)}}},children:"+"})]})}),M&&r.jsx(br,{variant:"outline",size:"md",leftIcon:N||"👁",onClick:M,children:"View"})]})]})]})})});Me.displayName="ProductCardWide";const $e=i.default.forwardRef((e,t)=>{const{id:a,image:o,imageAlt:i="Product",name:l,price:s,originalPrice:d,discount:c,rating:x,initialQuantity:v=0,showWishlist:m=!1,isWishlisted:p=!1,cartIcon:h,wishlistIcon:u,wishlistFilledIcon:g,onAddToCart:f,onIncrementCart:b,onDecrementCart:w,onWishlist:y,onClick:k,loading:j=!1,className:N="",style:_}=e,[z,C]=n.useState(v),[S,M]=n.useState(!1),$=S||j;return r.jsxs("div",{className:`productcard-minimal ${N}`,style:_,ref:t,children:[r.jsxs("div",{className:"productcard-minimal-image-wrapper",onClick:k,style:{cursor:k?"pointer":"default"},children:[r.jsx("img",{src:o,alt:i,className:"productcard-minimal-image"}),c&&r.jsx("span",{className:"productcard-minimal-discount",children:c}),m&&y&&r.jsx("button",{className:"productcard-minimal-wishlist "+(p?"productcard-minimal-wishlist--active":""),onClick:r=>{r.stopPropagation(),y()},children:p?g||u||"♥":u||"♡"})]}),r.jsxs(dn,{direction:"column",gap:8,style:{padding:"12px 0"},children:[r.jsx(xn,{variant:"body1",weight:"medium",noMargin:!0,onClick:k,style:{cursor:k?"pointer":"default"},children:l}),r.jsxs(dn,{align:"center",gap:8,children:[r.jsxs(xn,{variant:"h6",weight:"bold",noMargin:!0,className:"productcard-price",children:["$",Number(s).toFixed(2)]}),d&&d>s&&r.jsxs(xn,{variant:"caption",noMargin:!0,className:"productcard-original-price",children:["$",Number(d).toFixed(2)]})]}),void 0!==x&&r.jsxs("div",{className:"productcard-rating-minimal",children:["★".repeat(Math.floor(x)),"☆".repeat(5-Math.floor(x))]}),$?r.jsx(br,{loading:!0,variant:"primary",size:"sm",children:"Loading"}):0===z?r.jsx(br,{variant:"primary",size:"sm",leftIcon:h,onClick:async()=>{if(f){M(!0);try{await f(a,1),C(1)}catch(r){console.error("Add to cart error:",r)}finally{M(!1)}}},fullWidth:!0,children:"Add"}):r.jsxs(dn,{align:"center",justify:"between",className:"productcard-quantity-selector-minimal",children:[r.jsx(br,{variant:"secondary",size:"sm",onClick:async()=>{if(w&&!(z<=0)){M(!0);try{await w(a,z),C(z-1)}catch(r){console.error("Decrement error:",r)}finally{M(!1)}}},children:"-"}),r.jsx(xn,{variant:"body2",noMargin:!0,weight:"medium",children:z}),r.jsx(br,{variant:"primary",size:"sm",onClick:async()=>{if(b){M(!0);try{await b(a,z),C(z+1)}catch(r){console.error("Increment error:",r)}finally{M(!1)}}},children:"+"})]})]})]})});$e.displayName="ProductCardMinimal";const Te={Base:tr(Se),Wide:tr(Me),Minimal:tr($e)};ar("/* ==================== 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 De=i.default.forwardRef(({orderId:n,orderNumber:e,status:t="pending",statusText:a,items:o,deliveryDate:i,deliveryLabel:l="Delivered on",totalAmount:s,currency:d="₹",onTrackOrder:c,onViewDetails:x,trackButtonText:v="Track Order",className:m="",style:p,...h},u)=>{const g=o[0],f=o.length-1;return r.jsx(Cn,{variant:"outlined",className:`ordercard ${m}`,style:p,onClick:x?()=>x(n):void 0,ref:u,...h,children:r.jsxs(dn,{direction:"column",gap:0,children:[r.jsxs(dn,{align:"center",justify:"between",wrap:"wrap",gap:8,className:"ordercard-header",children:[r.jsx(xn,{variant:"body1",weight:"semibold",noMargin:!0,children:e||`Order #${n}`}),r.jsx(Mn,{variant:(()=>{switch(t){case"delivered":return"success";case"cancelled":return"error";case"processing":case"shipped":return"info";case"pending":return"warning";default:return"neutral"}})(),children:a||t.charAt(0).toUpperCase()+t.slice(1)})]}),r.jsxs(dn,{direction:"row",gap:10,className:"ordercard-content",children:[g.image&&r.jsx("div",{className:"ordercard-image-wrapper",children:r.jsx("img",{src:g.image,alt:g.name,className:"ordercard-image"})}),r.jsxs(dn,{direction:"column",gap:2,style:{flex:1,minWidth:0},children:[r.jsxs(xn,{variant:"body2",weight:"medium",noMargin:!0,className:"ordercard-product-name",children:[g.name,g.quantity&&g.quantity>1&&` × ${g.quantity}`]}),f>0&&r.jsxs(xn,{variant:"caption",noMargin:!0,className:"ordercard-more-items",children:["+ ",f," more ",1===f?"item":"items"]})]})]}),r.jsxs(dn,{direction:"row",align:"center",justify:"between",wrap:"wrap",gap:8,className:"ordercard-footer",children:[r.jsxs(dn,{direction:"column",gap:2,style:{flex:"1 1 auto",minWidth:"140px"},children:[i&&r.jsxs(xn,{variant:"caption",noMargin:!0,className:"ordercard-delivery",children:[l,": ",i]}),r.jsxs(xn,{variant:"body1",weight:"bold",noMargin:!0,className:"ordercard-price",children:[d,s.toLocaleString()]})]}),c&&r.jsx(br,{variant:"primary",size:"sm",onClick:r=>{null==r||r.stopPropagation(),c(n)},className:"ordercard-track-btn",children:v})]})]})})});De.displayName="OrderCard";const Ie=tr(De);ar("/* ==================== 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 Le=i.default.forwardRef(({heading:n,items:e,showDividers:t=!1,compact:a=!1,variant:o="outlined",className:l="",style:s,...d},c)=>{const x=e.filter(r=>!r.hidden);return r.jsxs(Cn,{variant:"flat"===o?"filled":o,className:`info-list-card ${a?"info-list-card--compact":""} ${l}`,style:s,ref:c,...d,children:[n&&r.jsxs(r.Fragment,{children:[r.jsx(xn,{variant:"h6",weight:"semibold",noMargin:!0,className:"info-list-card-heading",children:n}),r.jsx(ae,{style:{margin:"12px 0 16px 0"}})]}),r.jsx("div",{className:"info-list-card-items",children:x.map((n,e)=>r.jsxs(i.default.Fragment,{children:[r.jsxs("div",{className:"info-list-card-item",children:[r.jsx("div",{className:`info-list-card-label ${n.labelClass||""}`,children:"string"==typeof n.label?r.jsx(xn,{variant:"body2",noMargin:!0,children:n.label}):n.label}),r.jsx("div",{className:`info-list-card-value ${n.valueClass||""}`,children:"string"==typeof n.value||"number"==typeof n.value?r.jsx(xn,{variant:"body2",weight:"medium",noMargin:!0,children:n.value}):n.value})]}),t&&e<x.length-1&&r.jsx(ae,{style:{margin:a?"8px 0":"12px 0"}})]},e))})]})});Le.displayName="InfoListCard";const Re=tr(Le);ar(".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 Fe=i.default.forwardRef(({orderId:n,orderNumber:e,orderDate:t,status:a="confirmed",statusText:o,headerText:i="Order Confirmed!",headerSubtitle:l="Thank you for your order. We'll send you a confirmation email shortly.",customerEmail:s,customerPhone:d,shippingAddress:c,billingAddress:x,items:v,subtotal:m,shippingCost:p=0,tax:h=0,discount:u=0,total:g,currency:f="₹",paymentMethod:b,transactionId:w,estimatedDelivery:y,trackingNumber:k,onDownloadInvoice:j,onContinueShopping:N,onTrackOrder:z,onViewDetails:C,onContactSupport:S,onShareOrder:M,downloadInvoiceText:B="Download Invoice",continueShoppingText:O="Continue Shopping",trackOrderText:W="Track Order",viewDetailsText:P="View Details",contactSupportText:H="Contact Support",shareOrderText:V="Share",showActions:Y=!0,hideDownloadInvoice:q=!1,hideContinueShopping:U=!1,hideTrackOrder:G=!1,hideContactSupport:X=!1,className:K="",style:Q,...J},Z)=>{const rr=n=>r.jsxs("div",{className:"orderconfirmation-address",children:[r.jsx("div",{className:"orderconfirmation-address-name",children:n.name}),r.jsx("div",{children:n.addressLine1}),n.addressLine2&&r.jsx("div",{children:n.addressLine2}),r.jsxs("div",{children:[n.city,", ",n.state," ",n.zipCode]}),n.phone&&r.jsxs("div",{children:["Phone: ",n.phone]})]}),nr=[{label:"Order Number",value:e||`#${n}`,valueClass:"value-bold"},t?{label:"Order Date",value:t}:{label:"",value:"",hidden:!0},{label:"Status",value:r.jsx(Mn,{variant:(()=>{switch(a){case"confirmed":case"delivered":return"success";case"cancelled":return"error";case"processing":return"info";case"pending":return"warning";default:return"neutral"}})(),children:o||a.charAt(0).toUpperCase()+a.slice(1)})},y?{label:"Estimated Delivery",value:y,valueClass:"value-primary"}:{label:"",value:"",hidden:!0},k?{label:"Tracking Number",value:k,valueClass:"value-bold"}:{label:"",value:"",hidden:!0}].filter(r=>!r.hidden),er=[s?{label:"Email",value:s}:{label:"",value:"",hidden:!0},d?{label:"Phone",value:d}:{label:"",value:"",hidden:!0}].filter(r=>!r.hidden),tr=[b?{label:"Payment Method",value:b}:{label:"",value:"",hidden:!0},w?{label:"Transaction ID",value:w,valueClass:"value-muted"}:{label:"",value:"",hidden:!0}].filter(r=>!r.hidden);return r.jsx("div",{className:`orderconfirmation ${K}`,style:Q,ref:Z,...J,children:r.jsxs(dn,{direction:"column",gap:20,children:[r.jsx(Cn,{variant:"filled",className:"orderconfirmation-header",children:r.jsxs(dn,{direction:"column",align:"center",gap:12,children:[r.jsx("span",{className:"orderconfirmation-success-icon",children:r.jsx(_,{size:32})}),r.jsx(xn,{variant:"h4",weight:"bold",align:"center",noMargin:!0,children:i}),r.jsx(xn,{variant:"body1",align:"center",noMargin:!0,className:"orderconfirmation-subtitle",children:l}),r.jsxs(Mn,{variant:"success",style:{padding:"8px 20px",borderRadius:"20px",fontWeight:600,marginTop:"8px"},children:["Order ",e||`#${n}`]})]})}),r.jsx(Re,{heading:"Order Details",items:nr,variant:"outlined",showDividers:!0}),er.length>0&&r.jsx(Re,{heading:"Customer Information",items:er,variant:"outlined",showDividers:!0}),r.jsxs(Cn,{variant:"outlined",className:"orderconfirmation-items-card",children:[r.jsxs(xn,{variant:"h6",weight:"semibold",style:{marginBottom:"12px"},children:["Order Items (",v.length,")"]}),r.jsx(dn,{direction:"column",gap:12,children:v.map((n,e)=>r.jsxs("div",{children:[r.jsxs(dn,{direction:"row",gap:12,className:"orderconfirmation-item",children:[n.image&&r.jsx("div",{className:"orderconfirmation-item-image-wrapper",children:r.jsx("img",{src:n.image,alt:n.name,className:"orderconfirmation-item-image"})}),r.jsxs(dn,{direction:"column",gap:4,style:{flex:1,minWidth:0},children:[r.jsx(xn,{variant:"body2",weight:"medium",noMargin:!0,className:"orderconfirmation-item-name",children:n.name}),n.variant&&r.jsx(xn,{variant:"caption",noMargin:!0,className:"orderconfirmation-item-variant",children:n.variant}),r.jsxs(xn,{variant:"caption",noMargin:!0,children:["Qty: ",n.quantity]})]}),r.jsxs(dn,{direction:"column",align:"end",gap:2,children:[r.jsxs(xn,{variant:"body2",weight:"semibold",noMargin:!0,children:[f,(n.price*n.quantity).toLocaleString()]}),r.jsxs(xn,{variant:"caption",noMargin:!0,className:"orderconfirmation-item-unit-price",children:[f,n.price.toLocaleString()," each"]})]})]}),e<v.length-1&&r.jsx(ae,{style:{margin:"12px 0"}})]},n.id))})]}),r.jsxs(Cn,{variant:"outlined",className:"orderconfirmation-summary-card",children:[r.jsx(xn,{variant:"h6",weight:"semibold",style:{marginBottom:"12px"},children:"Payment Summary"}),r.jsxs(dn,{direction:"column",gap:8,children:[r.jsxs(dn,{justify:"between",align:"center",children:[r.jsx(xn,{variant:"body2",noMargin:!0,children:"Subtotal"}),r.jsxs(xn,{variant:"body2",noMargin:!0,children:[f,m.toLocaleString()]})]}),p>0&&r.jsxs(dn,{justify:"between",align:"center",children:[r.jsx(xn,{variant:"body2",noMargin:!0,children:"Shipping"}),r.jsxs(xn,{variant:"body2",noMargin:!0,children:[f,p.toLocaleString()]})]}),h>0&&r.jsxs(dn,{justify:"between",align:"center",children:[r.jsx(xn,{variant:"body2",noMargin:!0,children:"Tax"}),r.jsxs(xn,{variant:"body2",noMargin:!0,children:[f,h.toLocaleString()]})]}),u>0&&r.jsxs(dn,{justify:"between",align:"center",children:[r.jsx(xn,{variant:"body2",noMargin:!0,className:"orderconfirmation-discount",children:"Discount"}),r.jsxs(xn,{variant:"body2",noMargin:!0,className:"orderconfirmation-discount",children:["-",f,u.toLocaleString()]})]}),r.jsx(ae,{style:{margin:"8px 0"}}),r.jsxs(dn,{justify:"between",align:"center",children:[r.jsx(xn,{variant:"body1",weight:"bold",noMargin:!0,children:"Total"}),r.jsxs(xn,{variant:"body1",weight:"bold",noMargin:!0,className:"orderconfirmation-total",children:[f,g.toLocaleString()]})]})]}),tr.length>0&&r.jsxs(r.Fragment,{children:[r.jsx(ae,{style:{margin:"12px 0"}}),r.jsx(dn,{direction:"column",gap:8,children:tr.map((n,e)=>r.jsxs(dn,{justify:"between",align:"center",children:[r.jsx(xn,{variant:"body2",noMargin:!0,children:n.label}),r.jsx(xn,{variant:"body2",noMargin:!0,className:n.valueClass,children:n.value})]},e))})]})]}),r.jsxs(dn,{direction:"row",gap:16,wrap:"wrap",children:[r.jsx(Cn,{variant:"outlined",className:"orderconfirmation-address-card",style:{flex:"1 1 280px"},children:r.jsxs(dn,{direction:"column",gap:12,children:[r.jsxs(dn,{align:"center",gap:8,children:[r.jsx(A,{size:20}),r.jsx(xn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Shipping Address"})]}),r.jsx(ae,{}),rr(c)]})}),x&&r.jsx(Cn,{variant:"outlined",className:"orderconfirmation-address-card",style:{flex:"1 1 280px"},children:r.jsxs(dn,{direction:"column",gap:12,children:[r.jsxs(dn,{align:"center",gap:8,children:[r.jsx(R,{size:20}),r.jsx(xn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Billing Address"})]}),r.jsx(ae,{}),rr(x)]})})]}),Y&&r.jsx(Cn,{variant:"outlined",className:"orderconfirmation-actions-card",children:r.jsxs(dn,{direction:"column",gap:16,children:[r.jsx(xn,{variant:"h6",weight:"semibold",noMargin:!0,children:"What's Next?"}),r.jsx(ae,{}),r.jsxs(dn,{direction:"row",gap:12,wrap:"wrap",children:[!q&&j&&r.jsx(br,{variant:"primary",size:"md",onClick:()=>j(n),leftIcon:r.jsx($,{size:18}),style:{flex:"1 1 auto",minWidth:"170px"},children:B}),!G&&z&&k&&r.jsx(br,{variant:"primary",size:"md",onClick:()=>z(n),leftIcon:r.jsx(T,{size:18}),style:{flex:"1 1 auto",minWidth:"170px"},children:W})]}),r.jsxs(dn,{direction:"row",gap:12,wrap:"wrap",children:[!U&&N&&r.jsx(br,{variant:"outline",size:"md",onClick:N,leftIcon:r.jsx(D,{size:18}),style:{flex:"1 1 auto",minWidth:"170px"},children:O}),C&&r.jsx(br,{variant:"outline",size:"md",onClick:()=>C(n),leftIcon:r.jsx(L,{size:18}),style:{flex:"1 1 auto",minWidth:"170px"},children:P})]}),r.jsxs(dn,{direction:"row",gap:12,wrap:"wrap",justify:"center",children:[!X&&S&&r.jsx(br,{variant:"ghost",size:"md",onClick:()=>S(n),leftIcon:r.jsx(F,{size:18}),children:H}),M&&r.jsx(br,{variant:"ghost",size:"md",onClick:()=>M(n),leftIcon:r.jsx(I,{size:18}),children:V})]})]})}),r.jsx(Cn,{variant:"filled",className:"orderconfirmation-help-card",style:{background:"var(--vtx-color-primary-50)",border:"1px solid var(--vtx-color-primary-100)"},children:r.jsxs(dn,{direction:"column",gap:12,align:"center",children:[r.jsxs(dn,{align:"center",gap:8,children:[r.jsx(F,{size:20}),r.jsx(xn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Need Help?"})]}),r.jsx(xn,{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"}),r.jsxs(dn,{direction:"row",gap:16,wrap:"wrap",justify:"center",style:{marginTop:"4px"},children:[r.jsxs(dn,{align:"center",gap:6,children:[r.jsx(F,{size:16}),r.jsx(xn,{variant:"body2",weight:"medium",noMargin:!0,children:"support@example.com"})]}),r.jsxs(dn,{align:"center",gap:6,children:[r.jsx(E,{size:16}),r.jsx(xn,{variant:"body2",weight:"medium",noMargin:!0,children:"1-800-123-4567"})]})]})]})})]})})});Fe.displayName="OrderConfirmation";const Ae=tr(Fe);ar(".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 Ee=i.default.forwardRef(({orderId:n,orderNumber:e,orderDate:t,status:a,statusText:o,customerName:i,customerEmail:l,customerPhone:s,shippingAddress:d,billingAddress:c,items:x,subtotal:v,shippingCost:m=0,tax:p=0,discount:h=0,total:u,currency:g="₹",couponCode:f,paymentMethod:b,paymentStatus:w,transactionId:y,estimatedDelivery:k,deliveredDate:j,trackingNumber:N,trackingUrl:_,carrier:z,onDownloadInvoice:C,onTrackOrder:S,onCancelOrder:M,onReturnOrder:D,onReorder:I,onContactSupport:L,onWriteReview:V,downloadInvoiceText:Y="Download Invoice",trackOrderText:q="Track Package",cancelOrderText:U="Cancel Order",returnOrderText:G="Return Items",reorderText:X="Reorder",contactSupportText:K="Contact Support",writeReviewText:Q="Write Review",showActions:J=!0,allowCancel:Z=!0,allowReturn:rr=!0,allowReorder:nr=!0,className:er="",style:tr,...ar},or)=>{const ir=()=>{switch(w){case"paid":return"success";case"failed":return"error";case"pending":return"warning";case"refunded":return"info";default:return"neutral"}},lr=n=>r.jsxs("div",{className:"orderdetails-address",children:[r.jsx("div",{className:"orderdetails-address-name",children:n.name}),r.jsx("div",{children:n.addressLine1}),n.addressLine2&&r.jsx("div",{children:n.addressLine2}),r.jsxs("div",{children:[n.city,", ",n.state," ",n.zipCode]}),n.phone&&r.jsxs("div",{children:["Phone: ",n.phone]})]}),sr=Z&&("pending"===a||"processing"===a),dr=rr&&"delivered"===a,cr=N&&("shipped"===a||"delivered"===a),xr=[i?{label:"Name",value:i}:{label:"",value:"",hidden:!0},l?{label:"Email",value:l}:{label:"",value:"",hidden:!0},s?{label:"Phone",value:s}:{label:"",value:"",hidden:!0}].filter(r=>!r.hidden),vr=[b?{label:"Payment Method",value:b}:{label:"",value:"",hidden:!0},w?{label:"Payment Status",value:r.jsx(Mn,{variant:ir(),children:w.charAt(0).toUpperCase()+w.slice(1)})}:{label:"",value:"",hidden:!0},y?{label:"Transaction ID",value:y,valueClass:"value-muted"}:{label:"",value:"",hidden:!0}].filter(r=>!r.hidden);return r.jsx("div",{className:`orderdetails ${er}`,style:tr,ref:or,...ar,children:r.jsxs(dn,{direction:"column",gap:24,children:[r.jsxs(dn,{direction:"column",gap:8,children:[r.jsx(xn,{variant:"h3",weight:"bold",noMargin:!0,children:"Order Details"}),r.jsxs(xn,{variant:"body1",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)"},children:["Placed on ",t]})]}),r.jsx(Cn,{variant:"outlined",style:{padding:"32px 24px"},children:r.jsx(pe,{steps:["Order Placed","Packed","Shipped","Delivered"],currentStep:(()=>{switch(a){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"})}),r.jsxs(dn,{direction:"row",gap:16,wrap:"wrap",children:[r.jsx(Cn,{variant:"outlined",style:{flex:"1 1 200px",minWidth:"200px"},children:r.jsxs(dn,{direction:"column",gap:8,children:[r.jsx(xn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)",textTransform:"uppercase",fontSize:"0.75rem",fontWeight:600},children:"Order Number"}),r.jsx(xn,{variant:"h6",weight:"bold",noMargin:!0,children:e||`#${n}`})]})}),r.jsx(Cn,{variant:"outlined",style:{flex:"1 1 200px",minWidth:"200px"},children:r.jsxs(dn,{direction:"column",gap:8,children:[r.jsx(xn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)",textTransform:"uppercase",fontSize:"0.75rem",fontWeight:600},children:"Status"}),r.jsx(Mn,{variant:(()=>{switch(a){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:o||a.charAt(0).toUpperCase()+a.slice(1)})]})}),(j||k)&&r.jsx(Cn,{variant:"outlined",style:{flex:"1 1 200px",minWidth:"200px"},children:r.jsxs(dn,{direction:"column",gap:8,children:[r.jsx(xn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)",textTransform:"uppercase",fontSize:"0.75rem",fontWeight:600},children:j?"Delivered On":"Estimated Delivery"}),r.jsx(xn,{variant:"h6",weight:"bold",noMargin:!0,style:{color:j?"var(--vtx-color-success-600)":"inherit"},children:j||k})]})}),w&&r.jsx(Cn,{variant:"outlined",style:{flex:"1 1 200px",minWidth:"200px"},children:r.jsxs(dn,{direction:"column",gap:8,children:[r.jsx(xn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)",textTransform:"uppercase",fontSize:"0.75rem",fontWeight:600},children:"Payment"}),r.jsx(Mn,{variant:ir(),style:{alignSelf:"flex-start",padding:"4px 12px"},children:w.charAt(0).toUpperCase()+w.slice(1)})]})})]}),J&&(C||cr&&S)&&r.jsxs(dn,{direction:"row",gap:12,wrap:"wrap",children:[C&&r.jsx(br,{variant:"outline",size:"md",onClick:()=>C(n),leftIcon:r.jsx($,{size:18}),style:{flex:"1 1 auto",minWidth:"180px"},children:Y}),cr&&S&&r.jsx(br,{variant:"primary",size:"md",onClick:()=>S(n),leftIcon:r.jsx(T,{size:18}),style:{flex:"1 1 auto",minWidth:"180px"},children:q})]}),(N||z)&&r.jsx(Cn,{variant:"outlined",children:r.jsxs(dn,{direction:"column",gap:12,children:[r.jsxs(dn,{align:"center",gap:8,children:[r.jsx(B,{size:20}),r.jsx(xn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Shipping Information"})]}),r.jsx(ae,{}),r.jsxs(dn,{direction:"column",gap:12,children:[N&&r.jsxs(dn,{direction:"column",gap:4,children:[r.jsx(xn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)",fontSize:"0.75rem"},children:"Tracking Number"}),_?r.jsx("a",{href:_,target:"_blank",rel:"noopener noreferrer",style:{color:"var(--vtx-color-primary-600)",fontWeight:600,textDecoration:"none"},children:N}):r.jsx(xn,{variant:"body2",weight:"semibold",noMargin:!0,children:N})]}),z&&r.jsxs(dn,{direction:"column",gap:4,children:[r.jsx(xn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)",fontSize:"0.75rem"},children:"Carrier"}),r.jsx(xn,{variant:"body2",weight:"medium",noMargin:!0,children:z})]})]})]})}),r.jsxs(Cn,{variant:"outlined",className:"orderdetails-items-card",children:[r.jsxs(xn,{variant:"h6",weight:"semibold",style:{marginBottom:"12px"},children:["Items (",x.length,")"]}),r.jsx(dn,{direction:"column",gap:12,children:x.map((n,e)=>r.jsxs("div",{children:[r.jsxs(dn,{direction:"row",gap:12,className:"orderdetails-item",children:[n.image&&r.jsx("div",{className:"orderdetails-item-image-wrapper",children:r.jsx("img",{src:n.image,alt:n.name,className:"orderdetails-item-image"})}),r.jsxs(dn,{direction:"column",gap:4,style:{flex:1,minWidth:0},children:[r.jsx(xn,{variant:"body2",weight:"medium",noMargin:!0,className:"orderdetails-item-name",children:n.name}),n.variant&&r.jsx(xn,{variant:"caption",noMargin:!0,className:"orderdetails-item-variant",children:n.variant}),r.jsxs(xn,{variant:"caption",noMargin:!0,children:["Qty: ",n.quantity]})]}),r.jsxs(dn,{direction:"column",align:"end",gap:2,children:[r.jsxs(xn,{variant:"body2",weight:"semibold",noMargin:!0,children:[g,(n.price*n.quantity).toLocaleString()]}),r.jsxs(xn,{variant:"caption",noMargin:!0,className:"orderdetails-item-unit-price",children:[g,n.price.toLocaleString()," each"]})]})]}),e<x.length-1&&r.jsx(ae,{style:{margin:"12px 0"}})]},n.id))})]}),r.jsxs(Cn,{variant:"outlined",className:"orderdetails-summary-card",children:[r.jsx(xn,{variant:"h6",weight:"semibold",style:{marginBottom:"12px"},children:"Order Summary"}),r.jsxs(dn,{direction:"column",gap:8,children:[r.jsxs(dn,{justify:"between",align:"center",children:[r.jsx(xn,{variant:"body2",noMargin:!0,children:"Subtotal"}),r.jsxs(xn,{variant:"body2",noMargin:!0,children:[g,v.toLocaleString()]})]}),m>0&&r.jsxs(dn,{justify:"between",align:"center",children:[r.jsx(xn,{variant:"body2",noMargin:!0,children:"Shipping"}),r.jsxs(xn,{variant:"body2",noMargin:!0,children:[g,m.toLocaleString()]})]}),p>0&&r.jsxs(dn,{justify:"between",align:"center",children:[r.jsx(xn,{variant:"body2",noMargin:!0,children:"Tax"}),r.jsxs(xn,{variant:"body2",noMargin:!0,children:[g,p.toLocaleString()]})]}),f&&r.jsxs(dn,{justify:"between",align:"center",children:[r.jsx(xn,{variant:"body2",noMargin:!0,className:"orderdetails-coupon",children:"Coupon Applied"}),r.jsx(xn,{variant:"body2",noMargin:!0,className:"orderdetails-coupon",children:f})]}),h>0&&r.jsxs(dn,{justify:"between",align:"center",children:[r.jsx(xn,{variant:"body2",noMargin:!0,className:"orderdetails-discount",children:"Discount"}),r.jsxs(xn,{variant:"body2",noMargin:!0,className:"orderdetails-discount",children:["-",g,h.toLocaleString()]})]}),r.jsx(ae,{style:{margin:"8px 0"}}),r.jsxs(dn,{justify:"between",align:"center",children:[r.jsx(xn,{variant:"body1",weight:"bold",noMargin:!0,children:"Total"}),r.jsxs(xn,{variant:"body1",weight:"bold",noMargin:!0,className:"orderdetails-total",children:[g,u.toLocaleString()]})]})]}),vr.length>0&&r.jsxs(r.Fragment,{children:[r.jsx(ae,{style:{margin:"12px 0"}}),r.jsx(dn,{direction:"column",gap:8,children:vr.map((n,e)=>r.jsxs(dn,{justify:"between",align:"center",children:[r.jsx(xn,{variant:"body2",noMargin:!0,children:n.label}),r.jsx(xn,{variant:"body2",noMargin:!0,className:n.valueClass,children:n.value})]},e))})]})]}),xr.length>0&&r.jsx(Re,{heading:"Customer Information",items:xr,variant:"outlined",showDividers:!0}),r.jsxs(dn,{direction:"row",gap:16,wrap:"wrap",children:[r.jsx(Cn,{variant:"outlined",className:"orderdetails-address-card",style:{flex:"1 1 280px"},children:r.jsxs(dn,{direction:"column",gap:12,children:[r.jsxs(dn,{align:"center",gap:8,children:[r.jsx(A,{size:20}),r.jsx(xn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Shipping Address"})]}),r.jsx(ae,{}),lr(d)]})}),c&&r.jsx(Cn,{variant:"outlined",className:"orderdetails-address-card",style:{flex:"1 1 280px"},children:r.jsxs(dn,{direction:"column",gap:12,children:[r.jsxs(dn,{align:"center",gap:8,children:[r.jsx(R,{size:20}),r.jsx(xn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Billing Address"})]}),r.jsx(ae,{}),lr(c)]})})]}),J&&r.jsx(Cn,{variant:"outlined",className:"orderdetails-actions-card",children:r.jsxs(dn,{direction:"column",gap:16,children:[r.jsx(xn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Order Actions"}),r.jsx(ae,{}),r.jsxs(dn,{direction:"row",gap:12,wrap:"wrap",children:[sr&&M&&r.jsx(br,{variant:"outline",size:"md",onClick:()=>M(n),leftIcon:r.jsx(O,{size:18}),style:{flex:"1 1 auto",minWidth:"160px",borderColor:"var(--vtx-color-error-500)",color:"var(--vtx-color-error-600)"},children:U}),dr&&D&&r.jsx(br,{variant:"outline",size:"md",onClick:()=>D(n),leftIcon:r.jsx(W,{size:18}),style:{flex:"1 1 auto",minWidth:"160px"},children:G}),nr&&I&&r.jsx(br,{variant:"outline",size:"md",onClick:()=>I(n),leftIcon:r.jsx(P,{size:18}),style:{flex:"1 1 auto",minWidth:"160px"},children:X})]}),r.jsxs(dn,{direction:"row",gap:12,wrap:"wrap",children:["delivered"===a&&V&&r.jsx(br,{variant:"ghost",size:"md",onClick:()=>V(n),leftIcon:r.jsx(H,{size:18}),style:{flex:"1 1 auto",minWidth:"160px"},children:Q}),L&&r.jsx(br,{variant:"ghost",size:"md",onClick:()=>L(n),leftIcon:r.jsx(F,{size:18}),style:{flex:"1 1 auto",minWidth:"160px"},children:K})]})]})}),r.jsx(Cn,{variant:"filled",className:"orderdetails-help-card",style:{background:"var(--vtx-color-primary-50)",border:"1px solid var(--vtx-color-primary-100)"},children:r.jsxs(dn,{direction:"column",gap:12,align:"center",children:[r.jsxs(dn,{align:"center",gap:8,children:[r.jsx(F,{size:20}),r.jsx(xn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Need Help?"})]}),r.jsx(xn,{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"}),r.jsxs(dn,{direction:"row",gap:16,wrap:"wrap",justify:"center",style:{marginTop:"4px"},children:[r.jsxs(dn,{align:"center",gap:6,children:[r.jsx(F,{size:16}),r.jsx(xn,{variant:"body2",weight:"medium",noMargin:!0,children:"support@example.com"})]}),r.jsxs(dn,{align:"center",gap:6,children:[r.jsx(E,{size:16}),r.jsx(xn,{variant:"body2",weight:"medium",noMargin:!0,children:"1-800-123-4567"})]})]})]})})]})})});Ee.displayName="OrderDetails";const Be=tr(Ee);ar("/* ===================================================================\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 Oe=i.default.forwardRef(({logo:e,navItems:t=[],actions:a,variant:o="primary",elevated:l=!1,sticky:s=!1,fullWidth:d=!1,searchEnabled:c=!1,searchPlaceholder:x="Search...",onSearch:v,onLogoClick:m,layout:p="single-row",twoRowBottomStyle:h="default",topBar:u,scrollBehavior:f,scrollThreshold:b=50,onScrollStateChange:w,className:y="",style:k,...j},N)=>{const[_,z]=n.useState(""),[C,S]=n.useState(null),[M,$]=n.useState(!1),[T,D]=n.useState(!1);i.default.useEffect(()=>{if(!f)return;const r=()=>{const r=window.scrollY>b;D(n=>(n!==r&&(null==w||w(r)),r))};return window.addEventListener("scroll",r,{passive:!0}),()=>window.removeEventListener("scroll",r)},[f,b,w]);const I=["vtx-header","vtx-header--desktop",`vtx-header--${o}`,`vtx-header--layout-${p}`,"two-row"===p&&"default"!==h&&`vtx-header--${h}`,l&&"vtx-header--elevated",s&&"vtx-header--sticky",d&&"vtx-header--full-width",u&&!M&&"vtx-header--has-topbar",f&&"vtx-header--scroll-behavior",f&&T&&"vtx-header--scrolled",y].filter(Boolean).join(" "),L=r=>{r.preventDefault(),v&&v(_)},R=n=>{const e=n.children&&n.children.length>0,t=n.megaMenu&&n.megaMenuColumns&&n.megaMenuColumns.length>0,a=C===n.id;return r.jsxs("div",{className:`vtx-header__nav-item ${e||t?"vtx-header__nav-item--has-dropdown":""} ${t?"vtx-header__nav-item--mega":""}`,onMouseEnter:()=>(e||t)&&S(n.id),onMouseLeave:()=>(e||t)&&S(null),children:[r.jsxs("a",{href:n.href,onClick:r=>{n.onClick&&(r.preventDefault(),n.onClick())},className:`vtx-header__nav-link ${n.active?"vtx-header__nav-link--active":""} ${n.disabled?"vtx-header__nav-link--disabled":""}`,"aria-current":n.active?"page":void 0,"aria-disabled":n.disabled,children:[n.icon&&r.jsx("span",{className:"vtx-header__nav-icon",children:n.icon}),r.jsx("span",{className:"vtx-header__nav-label",children:n.label}),n.badge&&r.jsx(Mn,{size:"sm",variant:"error",className:"vtx-header__nav-badge",children:n.badge}),(e||t)&&r.jsx(g,{className:"vtx-header__nav-chevron",size:16})]}),t&&a&&r.jsx("div",{className:"vtx-header__mega-menu",children:r.jsx("div",{className:"vtx-header__mega-menu-container",children:n.megaMenuColumns.map((n,e)=>r.jsxs("div",{className:"vtx-header__mega-menu-column",children:[n.title&&r.jsx(xn,{variant:"overline",weight:"bold",className:"vtx-header__mega-menu-column-title",children:n.title}),r.jsx("div",{className:"vtx-header__mega-menu-items",children:n.items.map(n=>r.jsxs("a",{href:n.href,onClick:r=>{n.onClick&&(r.preventDefault(),n.onClick())},className:"vtx-header__mega-menu-item "+(n.active?"vtx-header__mega-menu-item--active":""),children:[n.icon&&r.jsx("span",{className:"vtx-header__mega-menu-icon",children:n.icon}),r.jsxs("div",{className:"vtx-header__mega-menu-item-content",children:[r.jsx(xn,{variant:"body2",weight:"semibold",className:"vtx-header__mega-menu-item-label",children:n.label}),n.description&&r.jsx(xn,{variant:"caption",color:"#6b7280",className:"vtx-header__mega-menu-item-description",children:n.description})]}),n.badge&&r.jsx(Mn,{size:"sm",variant:"error",className:"vtx-header__mega-menu-badge",children:n.badge})]},n.id))})]},e))})}),e&&!t&&a&&r.jsx("div",{className:"vtx-header__dropdown",children:n.children.map(n=>r.jsxs("a",{href:n.href,onClick:r=>{n.onClick&&(r.preventDefault(),n.onClick())},className:`vtx-header__dropdown-item ${n.active?"vtx-header__dropdown-item--active":""} ${n.disabled?"vtx-header__dropdown-item--disabled":""}`,children:[n.icon&&r.jsx("span",{className:"vtx-header__dropdown-icon",children:n.icon}),r.jsx("span",{className:"vtx-header__dropdown-label",children:n.label}),n.badge&&r.jsx(Mn,{size:"sm",variant:"error",className:"vtx-header__dropdown-badge",children:n.badge})]},n.id))})]},n.id)},F=()=>{if(!u||M)return null;const n=u.variant||"subtle";return r.jsx("div",{className:`vtx-header__topbar vtx-header__topbar--${n}`,children:r.jsxs("div",{className:"vtx-header__topbar-container",children:[u.leftContent&&r.jsx("div",{className:"vtx-header__topbar-left",children:u.leftContent}),u.content&&r.jsx("div",{className:"vtx-header__topbar-content",children:u.content}),u.rightContent&&r.jsx("div",{className:"vtx-header__topbar-right",children:u.rightContent}),u.dismissible&&r.jsx("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.jsx(O,{size:14})})]})})};return"single-row"===p?r.jsxs("header",{ref:N,className:I,style:k,...j,children:[F(),r.jsxs("div",{className:"vtx-header__container",children:[e&&r.jsx("div",{className:"vtx-header__logo",onClick:m,style:{cursor:m?"pointer":"default"},children:e}),t.length>0&&r.jsx("nav",{className:"vtx-header__nav","aria-label":"Main navigation",children:t.map(R)}),r.jsxs("div",{className:"vtx-header__actions",children:[c&&r.jsxs("form",{onSubmit:L,className:"vtx-header__search",children:[r.jsx(V,{className:"vtx-header__search-icon",size:18}),r.jsx("input",{type:"search",placeholder:x,value:_,onChange:r=>z(r.target.value),className:"vtx-header__search-input","aria-label":"Search"})]}),a&&r.jsx("div",{className:"vtx-header__actions-group",children:a})]})]})]}):"two-row"===p?r.jsxs("header",{ref:N,className:I,style:k,...j,children:[F(),r.jsx("div",{className:"vtx-header__top-row",children:r.jsxs("div",{className:"vtx-header__container",children:[e&&r.jsx("div",{className:"vtx-header__logo",onClick:m,style:{cursor:m?"pointer":"default"},children:e}),c&&r.jsxs("form",{onSubmit:L,className:"vtx-header__search vtx-header__search--expanded",children:[r.jsx(V,{className:"vtx-header__search-icon",size:18}),r.jsx("input",{type:"search",placeholder:x,value:_,onChange:r=>z(r.target.value),className:"vtx-header__search-input","aria-label":"Search"})]}),a&&r.jsx("div",{className:"vtx-header__actions-group",children:a})]})}),t.length>0&&r.jsx("div",{className:"vtx-header__bottom-row",children:r.jsx("div",{className:"vtx-header__container",children:r.jsx("nav",{className:"vtx-header__nav","aria-label":"Main navigation",children:t.map(R)})})})]}):r.jsxs("header",{ref:N,className:I,style:k,...j,children:[F(),r.jsxs("div",{className:"vtx-header__container",children:[e&&r.jsx("div",{className:"vtx-header__logo",onClick:m,style:{cursor:m?"pointer":"default"},children:e}),t.length>0&&r.jsx("nav",{className:"vtx-header__nav","aria-label":"Main navigation",children:t.map(R)}),r.jsxs("div",{className:"vtx-header__actions",children:[c&&r.jsxs("form",{onSubmit:L,className:"vtx-header__search",children:[r.jsx(V,{className:"vtx-header__search-icon",size:18}),r.jsx("input",{type:"search",placeholder:x,value:_,onChange:r=>z(r.target.value),className:"vtx-header__search-input","aria-label":"Search"})]}),a&&r.jsx("div",{className:"vtx-header__actions-group",children:a})]})]})]})});Oe.displayName="HeaderDesktop";const We=i.default.forwardRef(({logo:e,navItems:t=[],actions:a,variant:o="primary",elevated:i=!1,sticky:l=!1,searchEnabled:s=!1,searchPlaceholder:d="Search...",onSearch:c,onLogoClick:x,menuOpen:v,onMenuOpenChange:m,className:p="",style:h,...u},f)=>{const[b,w]=n.useState(!1),[k,j]=n.useState(""),[N,_]=n.useState(new Set),z=void 0!==v,C=z?v:b,S=r=>{z?null==m||m(r):w(r)},M=["vtx-header","vtx-header--mobile",`vtx-header--${o}`,i&&"vtx-header--elevated",l&&"vtx-header--sticky",C&&"vtx-header--menu-open",p].filter(Boolean).join(" "),$=r=>{const n=new Set(N);n.has(r)?n.delete(r):n.add(r),_(n)},T=(n,e=0)=>{const t=n.children&&n.children.length>0,a=N.has(n.id);return r.jsxs("div",{className:`vtx-header__mobile-nav-item vtx-header__mobile-nav-item--level-${e}`,children:[r.jsxs("div",{className:"vtx-header__mobile-nav-link-wrapper",children:[r.jsxs("a",{href:n.href,onClick:r=>{t?(r.preventDefault(),$(n.id)):n.onClick?(r.preventDefault(),n.onClick(),S(!1)):S(!1)},className:`vtx-header__mobile-nav-link ${n.active?"vtx-header__mobile-nav-link--active":""} ${n.disabled?"vtx-header__mobile-nav-link--disabled":""}`,"aria-current":n.active?"page":void 0,"aria-disabled":n.disabled,children:[n.icon&&r.jsx("span",{className:"vtx-header__mobile-nav-icon",children:n.icon}),r.jsx("span",{className:"vtx-header__mobile-nav-label",children:n.label}),n.badge&&r.jsx(Mn,{size:"sm",variant:"error",className:"vtx-header__mobile-nav-badge",children:n.badge})]}),t&&r.jsx("button",{className:"vtx-header__mobile-nav-toggle "+(a?"vtx-header__mobile-nav-toggle--expanded":""),onClick:()=>$(n.id),"aria-label":`Toggle ${n.label} submenu`,"aria-expanded":a,children:r.jsx(g,{size:16})})]}),t&&a&&r.jsx("div",{className:"vtx-header__mobile-nav-children",children:n.children.map(r=>T(r,e+1))})]},n.id)};return r.jsxs(r.Fragment,{children:[r.jsx("header",{ref:f,className:M,style:h,...u,children:r.jsxs("div",{className:"vtx-header__container",children:[r.jsx("button",{className:"vtx-header__menu-toggle",onClick:()=>S(!C),"aria-label":"Toggle menu","aria-expanded":C,children:C?r.jsx(O,{size:24}):r.jsx(y,{size:24})}),e&&r.jsx("div",{className:"vtx-header__logo",onClick:x,style:{cursor:x?"pointer":"default"},children:e}),a&&r.jsx("div",{className:"vtx-header__actions-group",children:a})]})}),C&&r.jsx("div",{className:"vtx-header__overlay",onClick:()=>S(!1),"aria-hidden":"true"}),r.jsx("div",{className:"vtx-header__mobile-menu "+(C?"vtx-header__mobile-menu--open":""),children:r.jsxs("div",{className:"vtx-header__mobile-menu-content",children:[s&&r.jsxs("form",{onSubmit:r=>{r.preventDefault(),c&&c(k)},className:"vtx-header__mobile-search",children:[r.jsx(V,{className:"vtx-header__mobile-search-icon",size:18}),r.jsx("input",{type:"search",placeholder:d,value:k,onChange:r=>j(r.target.value),className:"vtx-header__mobile-search-input","aria-label":"Search"})]}),t.length>0&&r.jsx("nav",{className:"vtx-header__mobile-nav","aria-label":"Mobile navigation",children:t.map(r=>T(r))}),a&&r.jsx("div",{className:"vtx-header__mobile-actions",children:a})]})})]})});We.displayName="HeaderMobile";const Pe=({desktopProps:e,mobileProps:t,breakpoint:a=768})=>{const[o,l]=n.useState(!1);return i.default.useEffect(()=>{const r=()=>{l(window.innerWidth<a)};return r(),window.addEventListener("resize",r),()=>window.removeEventListener("resize",r)},[a]),o?r.jsx(We,{...t}):r.jsx(Oe,{...e})};Pe.displayName="HeaderResponsive";const He={Desktop:tr(Oe),Mobile:tr(We),Responsive:Pe};exports.Accordion=ln,exports.AccordionItem=on,exports.ActionMenu=fn,exports.AdminHeader=Qn,exports.Alert=yn,exports.Avatar=Rn,exports.Badge=Mn,exports.Breadcrumb=Wn,exports.Button=br,exports.Calendar=Xr,exports.Card=Cn,exports.Checkbox=yr,exports.CheckboxGroup=jr,exports.Chip=Lr,exports.Container=ue,exports.DataGrid=ee,exports.DatePicker=Zr,exports.DateRangePicker=an,exports.Divider=ae,exports.Flex=dn,exports.FormControl=$r,exports.Grid=fe,exports.Header=le,exports.HomeHeader=He,exports.InfoCard=ye,exports.InfoListCard=Re,exports.InfoText=Ce,exports.Input=Dr,exports.Link=En,exports.Menu=hn,exports.MenuItem=mn,exports.Modal=jn,exports.MultiSelect=Fr,exports.OrderCard=Ie,exports.OrderConfirmation=Ae,exports.OrderDetails=Be,exports.ProductCard=Te,exports.Radio=Er,exports.RadioGroup=Or,exports.RichTextEditor=Pr,exports.Select=Vr,exports.SideMenu=xe,exports.SideMenuItem=de,exports.Table=me,exports.Text=xn,exports.Textarea=qr,exports.ThemeProvider=ur,exports.Timeline=pe,exports.Toast=lr,exports.ToastContainer=pr,exports.Tooltip=Nn,exports.Widget=({config:n,className:e="",style:t})=>{const a=(n,a,o="modern",i="primary",l="md")=>{const s={theme:o,variant:i,size:l,className:e,style:t};switch(n){case"metric":return r.jsx($n,{data:a,...s});case"info":return r.jsx(Tn,{data:a,...s});case"product":return r.jsx(Dn,{data:a,...s});case"order":return r.jsx(In,{data:a,...s});case"list":return r.jsx(Fn,{data:a,...s});case"text":return r.jsx(Bn,{data:a,...s});case"header":return r.jsx(Pn,{data:a,...s});case"carousel":return r.jsx(Vn,{data:a,...s});case"testimonial":return r.jsx(Yn,{data:a,className:e,style:t});case"gridCarousel":return r.jsx(qn,{...a,className:e,style:t});default:return console.warn(`Unknown widget type: ${n}`),null}};if("grid"===n.type){const t=n.data;return r.jsx(_n,{data:t.widgets,grid:n.grid,renderItem:r=>a(r.type,r.data,r.theme,r.variant,r.size),className:e})}return Array.isArray(n.data)?r.jsx(_n,{data:n.data,grid:n.grid,renderItem:r=>a(n.type,r,n.theme,n.variant,n.size),className:e}):a(n.type,n.data,n.theme,n.variant,n.size)},exports.createCustomTokens=function(r){return r},exports.generateCSSVariables=x,exports.generateColorShades=s,exports.injectCSSVariables=v,exports.normalizeColors=d,exports.toast=vr,exports.tokens=c,exports.useBodyScrollLock=zr,exports.useClickOutside=(r,e)=>{n.useEffect(()=>{const n=n=>{const t=null==r?void 0:r.current;t&&!t.contains(n.target)&&e(n)};return document.addEventListener("mousedown",n),document.addEventListener("touchstart",n),()=>{document.removeEventListener("mousedown",n),document.removeEventListener("touchstart",n)}},[r,e])},exports.useDebounce=(r,e)=>{const[t,a]=n.useState(r);return n.useEffect(()=>{const n=setTimeout(()=>{a(r)},e);return()=>{clearTimeout(n)}},[r,e]),t},exports.useEscapeKey=_r,exports.useFocusTrap=Nr,exports.useId=Sr,exports.useThemeContext=gr,exports.useToast=dr;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react/jsx-runtime"),n=require("react"),e=require("react-dom"),t=require("react-icons/fi");function a(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}function o(r){if(r&&r.__esModule)return r;var n=Object.create(null);return r&&Object.keys(r).forEach(function(e){if("default"!==e){var t=Object.getOwnPropertyDescriptor(r,e);Object.defineProperty(n,e,t.get?t:{enumerable:!0,get:function(){return r[e]}})}}),n.default=r,Object.freeze(n)}var i=a(n),l=o(n);const d=(r,e)=>{n.useEffect(()=>{if(!e)return;const n=r.current;if(!n)return;const t=n.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(),n.addEventListener("keydown",i),()=>{n.removeEventListener("keydown",i)}},[r,e])},s=r=>{n.useEffect(()=>{const n=n=>{"Escape"===n.key&&r()};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[r])},c=r=>{n.useEffect(()=>{if(!r)return;const n=window.getComputedStyle(document.body).overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=n}},[r])};let x=0;const v=(r="vtx")=>{const[e]=n.useState(()=>`${r}-${++x}`);return e},m="dynamic-styles";let p=null,h=!1;function u(){let r=document.getElementById(m);return r||(r=document.createElement("style"),r.id=m,document.head.appendChild(r)),r}const g=new Set,b={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"},f={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 y(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=f[r];if(a){let n;if(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}; }`,!g.has(n)){u().appendChild(document.createTextNode(n)),g.add(n)}return t}}if(n=r.match(/^([a-z]+)-(.+)$/),n){const r=n[1],e=n[2],t=f[r],a=b[e];if(t&&a){const n=`${r}-${e.replace(/[^a-z0-9]/gi,"")}`;let o;if(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}; }`,!g.has(o)){u().appendChild(document.createTextNode(o)),g.add(o)}return n}}return r}function w(r){if(!r.classList||0===r.classList.length)return;const n=Array.from(r.classList),e=n.map(r=>y(r));e.some((r,e)=>r!==n[e])&&(r.className=e.join(" "))}function k(){h||(document.body&&document.querySelectorAll("*").forEach(r=>w(r)),p=new MutationObserver(r=>{r.forEach(r=>{"childList"===r.type?r.addedNodes.forEach(r=>{r.nodeType===Node.ELEMENT_NODE&&(w(r),r.querySelectorAll("*").forEach(r=>w(r)))}):"attributes"===r.type&&"class"===r.attributeName&&w(r.target)})}),p.observe(document.body||document.documentElement,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["class"]}),h=!0)}function j(n){const e=e=>{const t=(e.className||"").split(" ").map(r=>y(r)).join(" ");return r.jsx(n,{...e,className:t})};return e.displayName=n.displayName||n.name||"Component",e}function _(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,d;l>0?(r=Math.round(e+(255-e)*l),i=Math.round(t+(255-t)*l),d=Math.round(a+(255-a)*l)):(r=Math.round(e*(1+l)),i=Math.round(t*(1+l)),d=Math.round(a*(1+l))),r=Math.max(0,Math.min(255,r)),i=Math.max(0,Math.min(255,i)),d=Math.max(0,Math.min(255,d));const s=`#${r.toString(16).padStart(2,"0")}${i.toString(16).padStart(2,"0")}${d.toString(16).padStart(2,"0")}`;o[Number(n)]=s}return o}function N(r){const n={};for(const[e,t]of Object.entries(r))if("string"==typeof t)n[e]=_(t);else if("object"==typeof t&&null!==t)if(t[500]){const r=_(t[500]);n[e]={...r,...t}}else n[e]=t;return n}const z={colors:{primary:_("#0c6b58"),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 C(r){const n=r||z,e=[];return Object.entries(n.colors).forEach(([r,n])=>{"object"==typeof n?Object.entries(n).forEach(([n,t])=>{e.push(` --vtx-color-${r}-${n}: ${t};`)}):e.push(` --vtx-color-${r}: ${n};`)}),Object.entries(n.spacing).forEach(([r,n])=>{e.push(` --vtx-spacing-${r}: ${n};`)}),Object.entries(n.typography.fontFamily).forEach(([r,n])=>{e.push(` --vtx-font-family-${r}: ${n};`)}),Object.entries(n.typography.fontSize).forEach(([r,n])=>{e.push(` --vtx-font-size-${r}: ${n};`)}),Object.entries(n.typography.fontWeight).forEach(([r,n])=>{e.push(` --vtx-font-weight-${r}: ${n};`)}),Object.entries(n.typography.lineHeight).forEach(([r,n])=>{e.push(` --vtx-line-height-${r}: ${n};`)}),Object.entries(n.typography.letterSpacing).forEach(([r,n])=>{e.push(` --vtx-letter-spacing-${r}: ${n};`)}),Object.entries(n.typography.textVariants).forEach(([r,n])=>{Object.entries(n).forEach(([n,t])=>{const a=n.replace(/([A-Z])/g,"-$1").toLowerCase();e.push(` --vtx-text-${r}-${a}: ${t};`)})}),Object.entries(n.borderRadius).forEach(([r,n])=>{e.push(` --vtx-radius-${r}: ${n};`)}),Object.entries(n.shadows).forEach(([r,n])=>{e.push(` --vtx-shadow-${r}: ${n};`)}),Object.entries(n.transitions).forEach(([r,n])=>{e.push(` --vtx-transition-${r}: ${n};`)}),Object.entries(n.zIndex).forEach(([r,n])=>{e.push(` --vtx-z-${r}: ${n};`)}),e.join("\n")}function S(r){if("undefined"==typeof document)return;const n="vtx-ui-variables";let e=document.getElementById(n);e||(e=document.createElement("style"),e.id=n,document.head.appendChild(e));const t=C(r);e.textContent=`:root {\n${t}\n}`}const $=n=>r.jsxs("svg",{className:"vtx-multiselect-icon-spinner",width:n.size||16,height:n.size||16,viewBox:"0 0 16 16",fill:"none",children:[r.jsx("circle",{className:"vtx-multiselect-icon-spinner-track",cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"2"}),r.jsx("path",{className:"vtx-multiselect-icon-spinner-path",fill:"currentColor",d:"M8 2C4.686 2 2 4.686 2 8h2c0-2.21 1.79-4 4-4V2z"})]}),M=t.FiCheck,T=n=>r.jsx("svg",{width:n.size||16,height:n.size||16,viewBox:"0 0 16 16",fill:"none",className:"vtx-icon-close",children:r.jsx("path",{d:"M12 4L4 12M4 4L12 12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),D=t.FiCalendar,I=t.FiChevronDown,L=t.FiPlus,A=t.FiMinus,R=t.FiBell,E=t.FiMenu,F=t.FiChevronUp,B=t.FiChevronLeft,O=t.FiChevronRight,W=t.FiCheckCircle,P=t.FiAlertCircle,H=t.FiAlertTriangle,V=t.FiInfo,Y=t.FiMinusCircle,q=t.FiDownload,U=t.FiPackage,G=t.FiShoppingBag,X=t.FiShare2,K=t.FiEye,Q=t.FiCreditCard,J=t.FiMessageCircle,Z=t.FiMapPin,rr=t.FiPhone,nr=t.FiTruck,er=t.FiX,tr=t.FiCornerUpLeft,ar=t.FiRefreshCw,or=t.FiStar,ir=t.FiSearch,lr=t.FiShoppingCart,dr=t.FiTrendingUp,sr=t.FiArrowUp,cr=t.FiArrowDown,xr=t.FiChevronsLeft,vr=t.FiChevronsRight;function mr(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))}}mr("/* ===== Toast Component Styles ===== */\r\n.vtx-toast {\r\n --vtx-toast-animation-duration: 300ms;\r\n\r\n display: flex;\r\n flex-direction: column;\r\n min-width: 300px;\r\n max-width: 500px;\r\n padding: 0;\r\n margin: 0;\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-lg);\r\n box-shadow: var(--vtx-shadow-lg);\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-900);\r\n pointer-events: auto;\r\n overflow: hidden;\r\n position: relative;\r\n animation: vtx-toast-enter var(--vtx-toast-animation-duration) cubic-bezier(0.4, 0, 0.2, 1)\r\n forwards;\r\n}\r\n\r\n.vtx-toast--exiting {\r\n animation: vtx-toast-exit var(--vtx-toast-animation-duration) cubic-bezier(0.4, 0, 0.2, 1)\r\n forwards;\r\n}\r\n\r\n/* ===== Toast Variants ===== */\r\n.vtx-toast--success {\r\n border-left: 4px solid var(--vtx-color-success-500);\r\n}\r\n\r\n.vtx-toast--error {\r\n border-left: 4px solid var(--vtx-color-error-500);\r\n}\r\n\r\n.vtx-toast--warning {\r\n border-left: 4px solid var(--vtx-color-warning-500);\r\n}\r\n\r\n.vtx-toast--info {\r\n border-left: 4px solid var(--vtx-color-info-500);\r\n}\r\n\r\n.vtx-toast--default {\r\n border-left: 4px solid var(--vtx-color-primary-500);\r\n}\r\n\r\n.vtx-toast--primary {\r\n background: var(--vtx-color-neutral-50);\r\n color: var(--vtx-color-primary-600);\r\n border: 1px solid var(--vtx-color-primary-200);\r\n border-left: 4px solid var(--vtx-color-primary-500);\r\n}\r\n\r\n/* ===== Toast Wrapper ===== */\r\n.vtx-toast__wrapper {\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 min-height: 64px;\r\n}\r\n\r\n/* ===== Toast Icon ===== */\r\n.vtx-toast__icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 20px;\r\n height: 20px;\r\n flex-shrink: 0;\r\n margin-top: 2px;\r\n}\r\n\r\n.vtx-toast--success .vtx-toast__icon {\r\n color: var(--vtx-color-success-600);\r\n}\r\n\r\n.vtx-toast--error .vtx-toast__icon {\r\n color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-toast--warning .vtx-toast__icon {\r\n color: var(--vtx-color-warning-600);\r\n}\r\n\r\n.vtx-toast--info .vtx-toast__icon {\r\n color: var(--vtx-color-info-600);\r\n}\r\n\r\n.vtx-toast--default .vtx-toast__icon {\r\n color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-toast--primary .vtx-toast__icon {\r\n color: var(--vtx-color-primary-600);\r\n}\r\n\r\n/* ===== Toast Content ===== */\r\n.vtx-toast__content {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--vtx-spacing-1);\r\n min-width: 0; /* Allow content to shrink */\r\n}\r\n\r\n.vtx-toast__title {\r\n font-weight: var(--vtx-font-weight-semibold);\r\n font-size: var(--vtx-font-size-sm);\r\n line-height: 1.4;\r\n color: var(--vtx-color-neutral-900);\r\n margin: 0;\r\n}\r\n\r\n.vtx-toast--primary .vtx-toast__title {\r\n color: var(--vtx-color-primary-700);\r\n}\r\n\r\n.vtx-toast__description {\r\n font-size: var(--vtx-font-size-sm);\r\n line-height: 1.5;\r\n color: var(--vtx-color-neutral-700);\r\n margin: 0;\r\n}\r\n\r\n.vtx-toast--primary .vtx-toast__description {\r\n color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-toast__body {\r\n font-size: var(--vtx-font-size-sm);\r\n line-height: 1.5;\r\n color: var(--vtx-color-neutral-800);\r\n margin: 0;\r\n}\r\n\r\n.vtx-toast--primary .vtx-toast__body {\r\n color: var(--vtx-color-primary-700);\r\n}\r\n\r\n/* ===== Toast Actions ===== */\r\n.vtx-toast__actions {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: var(--vtx-spacing-2);\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-toast__action {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: var(--vtx-spacing-1) var(--vtx-spacing-3);\r\n background: transparent;\r\n border: 1px solid var(--vtx-color-primary-500);\r\n border-radius: var(--vtx-radius-base);\r\n color: var(--vtx-color-primary-600);\r\n font-size: var(--vtx-font-size-xs);\r\n font-weight: var(--vtx-font-weight-medium);\r\n line-height: 1;\r\n cursor: pointer;\r\n transition: all var(--vtx-transition-fast);\r\n text-decoration: none;\r\n white-space: nowrap;\r\n}\r\n\r\n.vtx-toast__action:hover {\r\n background: var(--vtx-color-primary-50);\r\n border-color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-toast__action:focus {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 2px;\r\n}\r\n\r\n.vtx-toast--primary .vtx-toast__action {\r\n border-color: var(--vtx-color-primary-500);\r\n color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-toast--primary .vtx-toast__action:hover {\r\n background: var(--vtx-color-primary-50);\r\n border-color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-toast--primary .vtx-toast__action:focus {\r\n outline-color: var(--vtx-color-primary-500);\r\n}\r\n\r\n.vtx-toast__close {\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 background: transparent;\r\n border: none;\r\n border-radius: var(--vtx-radius-base);\r\n color: var(--vtx-color-neutral-500);\r\n cursor: pointer;\r\n transition: all var(--vtx-transition-fast);\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-toast__close:hover {\r\n background: var(--vtx-color-neutral-100);\r\n color: var(--vtx-color-neutral-700);\r\n}\r\n\r\n.vtx-toast__close:focus {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 2px;\r\n}\r\n\r\n.vtx-toast--primary .vtx-toast__close {\r\n color: var(--vtx-color-primary-500);\r\n}\r\n\r\n.vtx-toast--primary .vtx-toast__close:hover {\r\n background: var(--vtx-color-primary-50);\r\n color: var(--vtx-color-primary-700);\r\n}\r\n\r\n.vtx-toast--primary .vtx-toast__close:focus {\r\n outline-color: var(--vtx-color-primary-500);\r\n}\r\n\r\n/* ===== Progress Bar ===== */\r\n.vtx-toast__progress-container {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n height: 4px;\r\n background: var(--vtx-color-neutral-200);\r\n overflow: hidden;\r\n}\r\n\r\n.vtx-toast__progress {\r\n height: 100%;\r\n background: currentColor;\r\n transform-origin: left;\r\n transition: transform 16ms linear;\r\n}\r\n\r\n.vtx-toast--success .vtx-toast__progress {\r\n background: var(--vtx-color-success-500);\r\n}\r\n\r\n.vtx-toast--error .vtx-toast__progress {\r\n background: var(--vtx-color-error-500);\r\n}\r\n\r\n.vtx-toast--warning .vtx-toast__progress {\r\n background: var(--vtx-color-warning-500);\r\n}\r\n\r\n.vtx-toast--info .vtx-toast__progress {\r\n background: var(--vtx-color-info-500);\r\n}\r\n\r\n.vtx-toast--default .vtx-toast__progress {\r\n background: var(--vtx-color-primary-500);\r\n}\r\n\r\n.vtx-toast--primary .vtx-toast__progress {\r\n background: var(--vtx-color-primary-500);\r\n}\r\n\r\n/* ===== Toast Animations ===== */\r\n@keyframes vtx-toast-enter {\r\n from {\r\n opacity: 0;\r\n transform: translateX(100%);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n}\r\n\r\n@keyframes vtx-toast-exit {\r\n from {\r\n opacity: 1;\r\n transform: translateX(0);\r\n max-height: 200px;\r\n margin-bottom: var(--vtx-toast-gap, 12px);\r\n }\r\n to {\r\n opacity: 0;\r\n transform: translateX(100%);\r\n max-height: 0;\r\n margin-bottom: 0;\r\n padding-top: 0;\r\n padding-bottom: 0;\r\n }\r\n}\r\n\r\n/* Position-specific animations */\r\n.vtx-toast-container--top-left .vtx-toast,\r\n.vtx-toast-container--bottom-left .vtx-toast {\r\n animation-name: vtx-toast-enter-left;\r\n}\r\n\r\n.vtx-toast-container--top-left .vtx-toast--exiting,\r\n.vtx-toast-container--bottom-left .vtx-toast--exiting {\r\n animation-name: vtx-toast-exit-left;\r\n}\r\n\r\n@keyframes vtx-toast-enter-left {\r\n from {\r\n opacity: 0;\r\n transform: translateX(-100%);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n}\r\n\r\n@keyframes vtx-toast-exit-left {\r\n from {\r\n opacity: 1;\r\n transform: translateX(0);\r\n max-height: 200px;\r\n margin-bottom: var(--vtx-toast-gap, 12px);\r\n }\r\n to {\r\n opacity: 0;\r\n transform: translateX(-100%);\r\n max-height: 0;\r\n margin-bottom: 0;\r\n padding-top: 0;\r\n padding-bottom: 0;\r\n }\r\n}\r\n\r\n.vtx-toast-container--top-center .vtx-toast,\r\n.vtx-toast-container--bottom-center .vtx-toast {\r\n animation-name: vtx-toast-enter-center;\r\n}\r\n\r\n.vtx-toast-container--top-center .vtx-toast--exiting,\r\n.vtx-toast-container--bottom-center .vtx-toast--exiting {\r\n animation-name: vtx-toast-exit-center;\r\n}\r\n\r\n@keyframes vtx-toast-enter-center {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-100%);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n@keyframes vtx-toast-exit-center {\r\n from {\r\n opacity: 1;\r\n transform: translateY(0);\r\n max-height: 200px;\r\n margin-bottom: var(--vtx-toast-gap, 12px);\r\n }\r\n to {\r\n opacity: 0;\r\n transform: translateY(-100%);\r\n max-height: 0;\r\n margin-bottom: 0;\r\n padding-top: 0;\r\n padding-bottom: 0;\r\n }\r\n}\r\n\r\n/* ===== Dark Theme Support ===== */\r\n[data-vtx-toast-theme='dark'] .vtx-toast {\r\n background: var(--vtx-color-neutral-800);\r\n border-color: var(--vtx-color-neutral-700);\r\n color: var(--vtx-color-neutral-100);\r\n}\r\n\r\n[data-vtx-toast-theme='dark'] .vtx-toast__title {\r\n color: var(--vtx-color-neutral-100);\r\n}\r\n\r\n[data-vtx-toast-theme='dark'] .vtx-toast__description {\r\n color: var(--vtx-color-neutral-300);\r\n}\r\n\r\n[data-vtx-toast-theme='dark'] .vtx-toast__body {\r\n color: var(--vtx-color-neutral-200);\r\n}\r\n\r\n[data-vtx-toast-theme='dark'] .vtx-toast__close {\r\n color: var(--vtx-color-neutral-400);\r\n}\r\n\r\n[data-vtx-toast-theme='dark'] .vtx-toast__close:hover {\r\n background: var(--vtx-color-neutral-700);\r\n color: var(--vtx-color-neutral-200);\r\n}\r\n\r\n[data-vtx-toast-theme='dark'] .vtx-toast__progress-container {\r\n background: var(--vtx-color-neutral-600);\r\n}\r\n\r\n[data-vtx-toast-theme='dark'] .vtx-toast__action {\r\n border-color: var(--vtx-color-primary-400);\r\n color: var(--vtx-color-primary-400);\r\n}\r\n\r\n[data-vtx-toast-theme='dark'] .vtx-toast__action:hover {\r\n background: var(--vtx-color-primary-900);\r\n border-color: var(--vtx-color-primary-300);\r\n}\r\n\r\n[data-vtx-toast-theme='dark'] .vtx-toast--primary {\r\n background: var(--vtx-color-primary-500);\r\n color: white;\r\n border: 1px solid var(--vtx-color-primary-500);\r\n border-left: 4px solid var(--vtx-color-primary-600);\r\n}\r\n\r\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__icon {\r\n color: white;\r\n}\r\n\r\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__title {\r\n color: white;\r\n}\r\n\r\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__description {\r\n color: rgba(255, 255, 255, 0.9);\r\n}\r\n\r\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__body {\r\n color: rgba(255, 255, 255, 0.95);\r\n}\r\n\r\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__close {\r\n color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__close:hover {\r\n background: rgba(255, 255, 255, 0.1);\r\n color: white;\r\n}\r\n\r\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__close:focus {\r\n outline-color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__progress {\r\n background: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__action {\r\n border-color: rgba(255, 255, 255, 0.6);\r\n color: white;\r\n}\r\n\r\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__action:hover {\r\n background: rgba(255, 255, 255, 0.1);\r\n border-color: white;\r\n}\r\n\r\n[data-vtx-toast-theme='dark'] .vtx-toast--primary .vtx-toast__action:focus {\r\n outline-color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n/* ===== Responsive Design ===== */\r\n@media (max-width: 640px) {\r\n .vtx-toast {\r\n min-width: 280px;\r\n max-width: calc(100vw - 32px);\r\n margin: 0;\r\n }\r\n\r\n .vtx-toast__wrapper {\r\n padding: var(--vtx-spacing-3);\r\n }\r\n\r\n .vtx-toast__actions {\r\n gap: var(--vtx-spacing-1);\r\n }\r\n\r\n .vtx-toast__action {\r\n font-size: var(--vtx-font-size-xs);\r\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\r\n }\r\n}\r\n\r\n/* ===== High Contrast Mode ===== */\r\n@media (prefers-contrast: high) {\r\n .vtx-toast {\r\n border-width: 2px;\r\n }\r\n\r\n .vtx-toast__close:focus,\r\n .vtx-toast__action:focus {\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-toast {\r\n animation-duration: 1ms;\r\n }\r\n\r\n .vtx-toast__progress {\r\n transition: none;\r\n }\r\n}\r\n");const pr={success:r.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm-2 15l-5-5 1.414-1.414L8 12.172l7.586-7.586L17 6l-9 9z",fill:"currentColor"})}),error:r.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm5 13.59L13.59 15 10 11.41 6.41 15 5 13.59 8.59 10 5 6.41 6.41 5 10 8.59 13.59 5 15 6.41 11.41 10 15 13.59z",fill:"currentColor"})}),warning:r.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm1 15H9v-2h2v2zm0-4H9V5h2v6z",fill:"currentColor"})}),info:r.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm1 15H9V9h2v6zm0-8H9V5h2v2z",fill:"currentColor"})}),default:r.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm1 15H9V9h2v6zm0-8H9V5h2v2z",fill:"currentColor"})}),primary:r.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("path",{d:"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0zm1 15H9v-6h2v6zm0-8H9V5h2v2z",fill:"currentColor"})})},hr=i.default.forwardRef(({children:e,onDismiss:t,id:a,variant:o="default",autoClose:l=5e3,closeButton:d=!0,progressBar:s=!0,pauseOnHover:c=!0,pauseOnFocusLoss:x=!0,icon:v,action:m,className:p="",style:h,title:u,description:g,animationDuration:b=300,isVisible:f,createdAt:y,onClose:w,onOpen:k,toastId:j,..._},N)=>{const[z,C]=n.useState(!1),[S,$]=n.useState(!1),[M,D]=n.useState(100),I=n.useRef(null),L=n.useRef(Date.now()),A=n.useRef(0),R=i.default.useCallback(()=>{C(!0),setTimeout(()=>{t()},b)},[t,b]);n.useEffect(()=>{if(!1===l||S)return;return I.current=setInterval(()=>{const r=Date.now()-L.current-A.current,n=Math.max(0,l-r);D(n/l*100),n<=0&&R()},16),()=>{I.current&&clearInterval(I.current)}},[l,S,R]);const E=["vtx-toast",`vtx-toast--${o}`,z&&"vtx-toast--exiting",p].filter(Boolean).join(" ");return r.jsxs("div",{ref:N,className:E,style:{...h,"--vtx-toast-animation-duration":`${b}ms`},onMouseEnter:()=>{c&&!S&&($(!0),A.current=Date.now())},onMouseLeave:()=>{if(c&&S){$(!1);const r=Date.now()-A.current;L.current+=r}},onFocus:()=>{if(x&&S){$(!1);const r=Date.now()-A.current;L.current+=r}},onBlur:()=>{x&&!S&&($(!0),A.current=Date.now())},role:"alert","aria-live":"polite","data-toast-id":a,..._,children:[r.jsxs("div",{className:"vtx-toast__wrapper",children:[!1===v?null:v?r.jsx("div",{className:"vtx-toast__icon",children:v}):r.jsx("div",{className:"vtx-toast__icon",children:pr[o]}),u||g?r.jsxs("div",{className:"vtx-toast__content",children:[u&&r.jsx("div",{className:"vtx-toast__title",children:u}),g&&r.jsx("div",{className:"vtx-toast__description",children:g}),e&&r.jsx("div",{className:"vtx-toast__body",children:e})]}):r.jsx("div",{className:"vtx-toast__content",children:e}),r.jsxs("div",{className:"vtx-toast__actions",children:[m&&r.jsx("button",{className:"vtx-toast__action",onClick:m.onClick,type:"button",children:m.label}),d&&r.jsx("button",{className:"vtx-toast__close",onClick:R,type:"button","aria-label":"Close notification",children:r.jsx(T,{size:16})})]})]}),s&&!1!==l&&r.jsx("div",{className:"vtx-toast__progress-container",children:r.jsx("div",{className:"vtx-toast__progress",style:{transform:`scaleX(${M/100})`,animationPlayState:S?"paused":"running"}})})]})});hr.displayName="Toast";const ur=j(hr),gr=n.createContext(null),br=()=>{const r=n.useContext(gr);if(!r)throw new Error("useToast must be used within a ToastProvider");return r},fr=({children:e})=>{const[t,a]=n.useState([]),o=n.useCallback(r=>{a(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)})},[]),i=n.useCallback((r,n={})=>{var e;const t=n.toastId||Date.now()+Math.random(),i={id:t,content:r,createdAt:Date.now(),isVisible:!0,autoClose:5e3,closeButton:!0,progressBar:!0,pauseOnHover:!0,pauseOnFocusLoss:!0,variant:"default",animationDuration:300,...n};return a(r=>{const n=r.filter(r=>r.id!==t);return[i,...n]}),!1!==i.autoClose&&setTimeout(()=>{o(t)},i.autoClose),null===(e=n.onOpen)||void 0===e||e.call(n),t},[o]),l=n.useCallback(()=>{a([])},[]),d=n.useCallback((r,n)=>{a(e=>e.map(e=>e.id===r?{...e,...n}:e))},[]),s={toasts:t,addToast:i,removeToast:o,clearAllToasts:l,updateToast:d};return r.jsx(gr.Provider,{value:s,children:e})};class yr{constructor(){this.addToastFn=null,this.removeToastFn=null,this.clearAllToastsFn=null,this.updateToastFn=null}static getInstance(){return yr.instance||(yr.instance=new yr),yr.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 wr=yr.getInstance();mr("/* ===== Toast Container Styles ===== */\r\n.vtx-toast-container {\r\n --vtx-toast-gap: 12px;\r\n\r\n display: flex;\r\n flex-direction: column;\r\n align-items: stretch;\r\n max-width: 100vw;\r\n pointer-events: none;\r\n}\r\n\r\n.vtx-toast-container__hidden-count {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\r\n margin-bottom: var(--vtx-toast-gap);\r\n background: var(--vtx-color-neutral-100);\r\n border: 1px solid var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-radius-full);\r\n color: var(--vtx-color-neutral-700);\r\n font-size: var(--vtx-font-size-xs);\r\n font-weight: var(--vtx-font-weight-medium);\r\n pointer-events: auto;\r\n backdrop-filter: blur(8px);\r\n animation: vtx-toast-fade-in 200ms ease-out;\r\n}\r\n\r\n.vtx-toast-container__list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--vtx-toast-gap);\r\n align-items: stretch;\r\n}\r\n\r\n/* ===== Position Variants ===== */\r\n.vtx-toast-container--top-left,\r\n.vtx-toast-container--top-center,\r\n.vtx-toast-container--top-right {\r\n flex-direction: column;\r\n}\r\n\r\n.vtx-toast-container--bottom-left,\r\n.vtx-toast-container--bottom-center,\r\n.vtx-toast-container--bottom-right {\r\n flex-direction: column-reverse;\r\n}\r\n\r\n.vtx-toast-container--bottom-left .vtx-toast-container__hidden-count,\r\n.vtx-toast-container--bottom-center .vtx-toast-container__hidden-count,\r\n.vtx-toast-container--bottom-right .vtx-toast-container__hidden-count {\r\n order: -1;\r\n margin-bottom: 0;\r\n margin-top: var(--vtx-toast-gap);\r\n}\r\n\r\n/* ===== Stacked Layout ===== */\r\n.vtx-toast-container--stacked .vtx-toast-container__list {\r\n position: relative;\r\n}\r\n\r\n.vtx-toast-container--stacked .vtx-toast:not(:first-child) {\r\n transform: translateY(-2px) scale(0.98);\r\n opacity: 0.9;\r\n z-index: -1;\r\n}\r\n\r\n.vtx-toast-container--stacked .vtx-toast:nth-child(3) {\r\n transform: translateY(-4px) scale(0.96);\r\n opacity: 0.8;\r\n}\r\n\r\n.vtx-toast-container--stacked .vtx-toast:nth-child(n + 4) {\r\n transform: translateY(-6px) scale(0.94);\r\n opacity: 0.7;\r\n}\r\n\r\n/* ===== Dark Theme Support ===== */\r\n[data-vtx-toast-theme='dark'] .vtx-toast-container__hidden-count {\r\n background: var(--vtx-color-neutral-800);\r\n border-color: var(--vtx-color-neutral-600);\r\n color: var(--vtx-color-neutral-300);\r\n}\r\n\r\n/* ===== Responsive Design ===== */\r\n@media (max-width: 640px) {\r\n .vtx-toast-container {\r\n left: var(--vtx-spacing-4) !important;\r\n right: var(--vtx-spacing-4) !important;\r\n transform: none !important;\r\n }\r\n\r\n .vtx-toast-container--stacked .vtx-toast:not(:first-child) {\r\n transform: translateY(-1px) scale(0.99);\r\n }\r\n\r\n .vtx-toast-container--stacked .vtx-toast:nth-child(3) {\r\n transform: translateY(-2px) scale(0.98);\r\n }\r\n\r\n .vtx-toast-container--stacked .vtx-toast:nth-child(n + 4) {\r\n transform: translateY(-3px) scale(0.97);\r\n }\r\n}\r\n\r\n/* ===== Animations ===== */\r\n@keyframes vtx-toast-fade-in {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-8px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n/* ===== Accessibility ===== */\r\n@media (prefers-reduced-motion: reduce) {\r\n .vtx-toast-container--stacked .vtx-toast:not(:first-child) {\r\n transform: none;\r\n opacity: 1;\r\n }\r\n\r\n .vtx-toast-container__hidden-count {\r\n animation: none;\r\n }\r\n}\r\n\r\n/* ===== Print Styles ===== */\r\n@media print {\r\n .vtx-toast-container {\r\n display: none;\r\n }\r\n}\r\n");const kr=({position:t="top-right",limit:a=5,gap:o=12,margin:i=16,className:l="",style:d,stacked:s=!0,theme:c="auto"})=>{const{toasts:x,removeToast:v,addToast:m,clearAllToasts:p,updateToast:h}=br(),u=n.useRef(null);n.useEffect(()=>{wr.setMethods(m,v,p,h)},[m,v,p,h]),n.useEffect(()=>{if("auto"===c){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",c)},[c]);const g=x.slice(0,a),b=Math.max(0,x.length-a),f=["vtx-toast-container",`vtx-toast-container--${t}`,s&&"vtx-toast-container--stacked",l].filter(Boolean).join(" ");return 0===g.length?null:e.createPortal(r.jsxs("div",{ref:u,className:f,style:{...(r=>{const n={position:"fixed",zIndex:"var(--vtx-z-notification, 1400)",pointerEvents:"none"};switch(r){case"top-left":return{...n,top:i,left:i};case"top-center":return{...n,top:i,left:"50%",transform:"translateX(-50%)"};case"top-right":default:return{...n,top:i,right:i};case"bottom-left":return{...n,bottom:i,left:i};case"bottom-center":return{...n,bottom:i,left:"50%",transform:"translateX(-50%)"};case"bottom-right":return{...n,bottom:i,right:i}}})(t),"--vtx-toast-gap":`${o}px`,...d},"aria-live":"polite","aria-label":"Notifications",children:[b>0&&r.jsxs("div",{className:"vtx-toast-container__hidden-count",children:["+",b," more"]}),r.jsx("div",{className:"vtx-toast-container__list",children:g.map((n,e)=>r.jsx(ur,{id:n.id,isVisible:n.isVisible,onDismiss:()=>v(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)},jr=({children:n,...e})=>r.jsxs(fr,{children:[n,r.jsx(kr,{...e})]}),_r=i.default.createContext(void 0),Nr=i.default.forwardRef(({children:n,initialMode:e="light",customTokens:t,defaultSize:a="md",colorContrast:o,toastPosition:l="top-right",toastLimit:d=5,disableToasts:s=!1,linkComponent:c,imageComponent:x,...v},m)=>{const[p,h]=i.default.useState(e),[u,g]=i.default.useState(a),b={primary:"dark",secondary:"dark",outline:"light",ghost:"light",danger:"dark",success:"dark",warning:"dark",info:"dark"},f=i.default.useMemo(()=>{const r={...b,...o};if(!t)return{tokens:z,mode:p,defaultSize:u,colorContrast:r,linkComponent:c,imageComponent:x||"img"};let n={...z,...t};return t.colors&&(n.colors={...z.colors,...N(t.colors)}),{tokens:n,mode:p,defaultSize:u,colorContrast:r,linkComponent:c,imageComponent:x||"img"}},[t,p,u,o,c,x]);i.default.useEffect(()=>{document.documentElement.setAttribute("data-theme",p),t&&S(f.tokens),k()},[p,t,f.tokens]);const y=i.default.useMemo(()=>({theme:f,setMode:h,setDefaultSize:g}),[f]);return r.jsx(_r.Provider,{value:y,children:r.jsx(jr,{position:l,limit:d,children:r.jsx("div",{ref:m,...v,children:n})})})});Nr.displayName="ThemeProvider";const zr=()=>{const r=i.default.useContext(_r);if(!r)throw new Error("useThemeContext must be used within a ThemeProvider");return r};mr("/**\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");mr("/* Autocomplete Wrapper */\r\n.vtx-autocomplete-wrapper {\r\n position: relative;\r\n display: inline-block;\r\n min-width: 200px;\r\n}\r\n\r\n.vtx-autocomplete-wrapper--full-width {\r\n width: 100%;\r\n display: block;\r\n}\r\n\r\n/* Label */\r\n.vtx-autocomplete-label {\r\n display: block;\r\n font-size: 0.875rem;\r\n font-weight: 500;\r\n margin-bottom: 0.375rem;\r\n color: var(--vtx-text-primary, #1a202c);\r\n line-height: 1.25rem;\r\n}\r\n\r\n.vtx-autocomplete-label__required {\r\n color: var(--vtx-danger-500, #e53e3e);\r\n}\r\n\r\n/* Input Container */\r\n.vtx-autocomplete-container {\r\n position: relative;\r\n display: inline-flex;\r\n align-items: center;\r\n width: 100%;\r\n background-color: var(--vtx-bg-primary, #ffffff);\r\n border: 1px solid var(--vtx-border-color, #e2e8f0);\r\n border-radius: var(--vtx-border-radius, 0.375rem);\r\n transition:\r\n border-color 0.15s ease-in-out,\r\n box-shadow 0.15s ease-in-out;\r\n}\r\n\r\n.vtx-autocomplete-container:hover:not(.vtx-autocomplete-container--disabled) {\r\n border-color: var(--vtx-border-hover, #cbd5e0);\r\n}\r\n\r\n.vtx-autocomplete-container--focused {\r\n border-color: var(--vtx-primary-500, #3182ce);\r\n box-shadow: 0 0 0 3px var(--vtx-primary-100, rgba(49, 130, 206, 0.1));\r\n outline: none;\r\n}\r\n\r\n.vtx-autocomplete-container--error {\r\n border-color: var(--vtx-danger-500, #e53e3e);\r\n}\r\n\r\n.vtx-autocomplete-container--error.vtx-autocomplete-container--focused {\r\n border-color: var(--vtx-danger-500, #e53e3e);\r\n box-shadow: 0 0 0 3px var(--vtx-danger-100, rgba(229, 62, 62, 0.1));\r\n}\r\n\r\n.vtx-autocomplete-container--success {\r\n border-color: var(--vtx-success-500, #38a169);\r\n}\r\n\r\n.vtx-autocomplete-container--success.vtx-autocomplete-container--focused {\r\n border-color: var(--vtx-success-500, #38a169);\r\n box-shadow: 0 0 0 3px var(--vtx-success-100, rgba(56, 161, 105, 0.1));\r\n}\r\n\r\n.vtx-autocomplete-container--disabled {\r\n background-color: var(--vtx-bg-disabled, #f7fafc);\r\n border-color: var(--vtx-border-color, #e2e8f0);\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n}\r\n\r\n/* Size Variants */\r\n.vtx-autocomplete-container--sm {\r\n min-height: 2rem;\r\n}\r\n\r\n.vtx-autocomplete-container--sm .vtx-autocomplete-input {\r\n padding: 0.25rem 0.625rem;\r\n font-size: 0.875rem;\r\n}\r\n\r\n.vtx-autocomplete-container--sm.vtx-autocomplete-container--with-left-icon .vtx-autocomplete-input {\r\n padding-left: 2rem;\r\n}\r\n\r\n.vtx-autocomplete-container--sm.vtx-autocomplete-container--with-right-icon\r\n .vtx-autocomplete-input {\r\n padding-right: 2rem;\r\n}\r\n\r\n.vtx-autocomplete-container--md {\r\n min-height: 2.5rem;\r\n}\r\n\r\n.vtx-autocomplete-container--md .vtx-autocomplete-input {\r\n padding: 0.5rem 0.75rem;\r\n font-size: 0.875rem;\r\n}\r\n\r\n.vtx-autocomplete-container--md.vtx-autocomplete-container--with-left-icon .vtx-autocomplete-input {\r\n padding-left: 2.25rem;\r\n}\r\n\r\n.vtx-autocomplete-container--md.vtx-autocomplete-container--with-right-icon\r\n .vtx-autocomplete-input {\r\n padding-right: 2.25rem;\r\n}\r\n\r\n.vtx-autocomplete-container--lg {\r\n min-height: 3rem;\r\n}\r\n\r\n.vtx-autocomplete-container--lg .vtx-autocomplete-input {\r\n padding: 0.625rem 1rem;\r\n font-size: 1rem;\r\n}\r\n\r\n.vtx-autocomplete-container--lg.vtx-autocomplete-container--with-left-icon .vtx-autocomplete-input {\r\n padding-left: 2.5rem;\r\n}\r\n\r\n.vtx-autocomplete-container--lg.vtx-autocomplete-container--with-right-icon\r\n .vtx-autocomplete-input {\r\n padding-right: 2.5rem;\r\n}\r\n\r\n/* Input */\r\n.vtx-autocomplete-input {\r\n flex: 1;\r\n border: none;\r\n background: transparent;\r\n color: var(--vtx-text-primary, #1a202c);\r\n font-family: inherit;\r\n outline: none;\r\n width: 100%;\r\n min-width: 0;\r\n}\r\n\r\n.vtx-autocomplete-input::placeholder {\r\n color: var(--vtx-text-muted, #a0aec0);\r\n}\r\n\r\n.vtx-autocomplete-input:disabled {\r\n cursor: not-allowed;\r\n}\r\n\r\n/* Icons */\r\n.vtx-autocomplete-icon {\r\n position: absolute;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--vtx-text-muted, #a0aec0);\r\n pointer-events: none;\r\n}\r\n\r\n.vtx-autocomplete-icon--left {\r\n left: 0.625rem;\r\n}\r\n\r\n.vtx-autocomplete-container--sm .vtx-autocomplete-icon--left {\r\n left: 0.5rem;\r\n}\r\n\r\n.vtx-autocomplete-container--lg .vtx-autocomplete-icon--left {\r\n left: 0.75rem;\r\n}\r\n\r\n/* Clear Button */\r\n.vtx-autocomplete-clear {\r\n position: absolute;\r\n right: 0.625rem;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0.25rem;\r\n border: none;\r\n background: transparent;\r\n color: var(--vtx-text-muted, #a0aec0);\r\n cursor: pointer;\r\n border-radius: var(--vtx-border-radius, 0.375rem);\r\n transition: all 0.15s ease-in-out;\r\n}\r\n\r\n.vtx-autocomplete-clear:hover {\r\n color: var(--vtx-text-primary, #1a202c);\r\n background-color: var(--vtx-bg-hover, rgba(0, 0, 0, 0.05));\r\n}\r\n\r\n.vtx-autocomplete-clear:active {\r\n transform: scale(0.95);\r\n}\r\n\r\n.vtx-autocomplete-container--sm .vtx-autocomplete-clear {\r\n right: 0.5rem;\r\n}\r\n\r\n.vtx-autocomplete-container--lg .vtx-autocomplete-clear {\r\n right: 0.75rem;\r\n}\r\n\r\n/* Dropdown */\r\n.vtx-autocomplete-dropdown {\r\n position: absolute;\r\n top: calc(100% + 0.25rem);\r\n left: 0;\r\n right: 0;\r\n z-index: 1000;\r\n background-color: var(--vtx-bg-primary, #ffffff);\r\n border: 1px solid var(--vtx-border-color, #e2e8f0);\r\n border-radius: var(--vtx-border-radius, 0.375rem);\r\n box-shadow:\r\n 0 4px 6px -1px rgba(0, 0, 0, 0.1),\r\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\r\n max-height: 300px;\r\n overflow-y: auto;\r\n opacity: 0;\r\n transform: translateY(-0.5rem);\r\n transition:\r\n opacity 0.2s ease-in-out,\r\n transform 0.2s ease-in-out;\r\n pointer-events: none;\r\n}\r\n\r\n.vtx-autocomplete-dropdown--open {\r\n opacity: 1;\r\n transform: translateY(0);\r\n pointer-events: auto;\r\n}\r\n\r\n/* Custom Scrollbar */\r\n.vtx-autocomplete-dropdown::-webkit-scrollbar {\r\n width: 8px;\r\n}\r\n\r\n.vtx-autocomplete-dropdown::-webkit-scrollbar-track {\r\n background-color: var(--vtx-bg-secondary, #f7fafc);\r\n border-radius: 0 var(--vtx-border-radius, 0.375rem) var(--vtx-border-radius, 0.375rem) 0;\r\n}\r\n\r\n.vtx-autocomplete-dropdown::-webkit-scrollbar-thumb {\r\n background-color: var(--vtx-border-hover, #cbd5e0);\r\n border-radius: 4px;\r\n}\r\n\r\n.vtx-autocomplete-dropdown::-webkit-scrollbar-thumb:hover {\r\n background-color: var(--vtx-text-muted, #a0aec0);\r\n}\r\n\r\n/* Options Container */\r\n.vtx-autocomplete-options {\r\n padding: 0.25rem;\r\n}\r\n\r\n/* Option */\r\n.vtx-autocomplete-option {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 0.75rem;\r\n padding: 0.625rem 0.75rem;\r\n cursor: pointer;\r\n border-radius: calc(var(--vtx-border-radius, 0.375rem) - 2px);\r\n transition: background-color 0.15s ease-in-out;\r\n user-select: none;\r\n}\r\n\r\n.vtx-autocomplete-option:hover:not(.vtx-autocomplete-option--disabled) {\r\n background-color: var(--vtx-bg-hover, #f7fafc);\r\n}\r\n\r\n.vtx-autocomplete-option--highlighted:not(.vtx-autocomplete-option--disabled) {\r\n background-color: var(--vtx-primary-50, #ebf8ff);\r\n}\r\n\r\n.vtx-autocomplete-option--disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n}\r\n\r\n.vtx-autocomplete-option__icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n width: 1.25rem;\r\n height: 1.25rem;\r\n color: var(--vtx-text-muted, #a0aec0);\r\n margin-top: 0.125rem;\r\n}\r\n\r\n.vtx-autocomplete-option--highlighted .vtx-autocomplete-option__icon {\r\n color: var(--vtx-primary-500, #3182ce);\r\n}\r\n\r\n.vtx-autocomplete-option__content {\r\n flex: 1;\r\n min-width: 0;\r\n}\r\n\r\n.vtx-autocomplete-option__label {\r\n font-size: 0.875rem;\r\n font-weight: 500;\r\n color: var(--vtx-text-primary, #1a202c);\r\n line-height: 1.25rem;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n.vtx-autocomplete-option__description {\r\n font-size: 0.75rem;\r\n color: var(--vtx-text-muted, #a0aec0);\r\n line-height: 1rem;\r\n margin-top: 0.125rem;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n/* Empty/Loading Messages */\r\n.vtx-autocomplete-message {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.5rem;\r\n padding: 1.5rem 1rem;\r\n color: var(--vtx-text-muted, #a0aec0);\r\n font-size: 0.875rem;\r\n text-align: center;\r\n}\r\n\r\n.vtx-autocomplete-message--empty {\r\n padding: 2rem 1rem;\r\n}\r\n\r\n/* Spinners */\r\n.vtx-autocomplete-spinner,\r\n.vtx-autocomplete-icon-spinner {\r\n animation: vtx-autocomplete-spin 0.8s linear infinite;\r\n}\r\n\r\n.vtx-autocomplete-spinner__track,\r\n.vtx-autocomplete-icon-spinner__track {\r\n opacity: 0.2;\r\n}\r\n\r\n.vtx-autocomplete-spinner__path,\r\n.vtx-autocomplete-icon-spinner__path {\r\n animation: vtx-autocomplete-spin 0.8s linear infinite;\r\n}\r\n\r\n@keyframes vtx-autocomplete-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 Text */\r\n.vtx-autocomplete-helper {\r\n margin-top: 0.375rem;\r\n font-size: 0.75rem;\r\n color: var(--vtx-text-muted, #a0aec0);\r\n line-height: 1rem;\r\n}\r\n\r\n/* Error Text */\r\n.vtx-autocomplete-error {\r\n margin-top: 0.375rem;\r\n font-size: 0.75rem;\r\n color: var(--vtx-danger-500, #e53e3e);\r\n line-height: 1rem;\r\n}\r\n\r\n/* Success Text */\r\n.vtx-autocomplete-success {\r\n margin-top: 0.375rem;\r\n font-size: 0.75rem;\r\n color: var(--vtx-success-500, #38a169);\r\n line-height: 1rem;\r\n}\r\n\r\n/* Accessibility - Focus Visible */\r\n.vtx-autocomplete-option:focus-visible {\r\n outline: 2px solid var(--vtx-primary-500, #3182ce);\r\n outline-offset: -2px;\r\n}\r\n\r\n.vtx-autocomplete-clear:focus-visible {\r\n outline: 2px solid var(--vtx-primary-500, #3182ce);\r\n outline-offset: 2px;\r\n}\r\n\r\n/* Dark Mode Support */\r\n@media (prefers-color-scheme: dark) {\r\n .vtx-autocomplete-label {\r\n color: var(--vtx-text-primary-dark, #f7fafc);\r\n }\r\n\r\n .vtx-autocomplete-container {\r\n background-color: var(--vtx-bg-primary-dark, #2d3748);\r\n border-color: var(--vtx-border-color-dark, #4a5568);\r\n }\r\n\r\n .vtx-autocomplete-container:hover:not(.vtx-autocomplete-container--disabled) {\r\n border-color: var(--vtx-border-hover-dark, #718096);\r\n }\r\n\r\n .vtx-autocomplete-container--disabled {\r\n background-color: var(--vtx-bg-disabled-dark, #1a202c);\r\n }\r\n\r\n .vtx-autocomplete-input {\r\n color: var(--vtx-text-primary-dark, #f7fafc);\r\n }\r\n\r\n .vtx-autocomplete-input::placeholder {\r\n color: var(--vtx-text-muted-dark, #718096);\r\n }\r\n\r\n .vtx-autocomplete-dropdown {\r\n background-color: var(--vtx-bg-primary-dark, #2d3748);\r\n border-color: var(--vtx-border-color-dark, #4a5568);\r\n }\r\n\r\n .vtx-autocomplete-option:hover:not(.vtx-autocomplete-option--disabled) {\r\n background-color: var(--vtx-bg-hover-dark, #4a5568);\r\n }\r\n\r\n .vtx-autocomplete-option__label {\r\n color: var(--vtx-text-primary-dark, #f7fafc);\r\n }\r\n\r\n .vtx-autocomplete-clear:hover {\r\n background-color: var(--vtx-bg-hover-dark, rgba(255, 255, 255, 0.1));\r\n }\r\n}\r\n");const Cr=i.default.forwardRef(({label:e,helperText:t,error:a,success:o,size:i,fullWidth:l=!1,options:d=[],getOptionLabel:s="label",getOptionValue:c="value",getOptionDisabled:x="disabled",getOptionDescription:m="description",getOptionIcon:p="icon",noOptionsMessage:h="No options",loading:u=!1,loadingMessage:g="Loading...",onChange:b,onSelect:f,showSearchIcon:y=!1,clearable:w=!1,onClear:k,className:j="",wrapperClassName:_="",labelClassName:N="",inputClassName:z="",dropdownClassName:C="",renderOption:S,id:$,disabled:M=!1,required:D=!1,value:I,openOnFocus:L=!0,minSearchLength:A=0,onFocus:R,onBlur:E,...F},B)=>{const{theme:O}=zr(),W=i||O.defaultSize,P=v("autocomplete"),H=$||P,V=`${H}-helper`,Y=`${H}-error`,q=`${H}-success`,U=`${H}-listbox`,[G,X]=n.useState(""),[K,Q]=n.useState(!1),[J,Z]=n.useState(-1),[rr,nr]=n.useState(!1),er=n.useRef(null),tr=n.useRef(null),ar=n.useRef(null),or=void 0!==I,lr=or?I:G,dr=(r,n)=>"function"==typeof n?n(r):"object"==typeof r?r[n]:r,sr=Boolean(a),cr=Boolean(o)&&!sr,xr=w&&lr&&String(lr).length>0&&!M,vr=K&&rr&&!M&&lr.length>=A,mr=[t&&!a&&!o&&V,a&&Y,o&&q].filter(Boolean).join(" "),pr=["vtx-autocomplete-wrapper",l&&"vtx-autocomplete-wrapper--full-width",_].filter(Boolean).join(" "),hr=["vtx-autocomplete-container",`vtx-autocomplete-container--${W}`,sr&&"vtx-autocomplete-container--error",cr&&"vtx-autocomplete-container--success",M&&"vtx-autocomplete-container--disabled",rr&&"vtx-autocomplete-container--focused",vr&&"vtx-autocomplete-container--open",(y||u)&&"vtx-autocomplete-container--with-left-icon",xr&&"vtx-autocomplete-container--with-right-icon",j].filter(Boolean).join(" "),ur=["vtx-autocomplete-dropdown",vr&&"vtx-autocomplete-dropdown--open",C].filter(Boolean).join(" ");n.useEffect(()=>{const r=r=>{ar.current&&!ar.current.contains(r.target)&&(Q(!1),nr(!1))};return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[]),n.useEffect(()=>{Z(-1)},[d]);const gr=r=>{var n;if(dr(r,x))return;const e=String(dr(r,c)),t=String(dr(r,s));or||X(t),Q(!1),nr(!1),null==f||f(e,r),null===(n=er.current)||void 0===n||n.focus()};return r.jsxs("div",{className:pr,ref:ar,children:[e&&r.jsxs("label",{htmlFor:H,className:`vtx-autocomplete-label ${N}`.trim(),children:[e,D&&r.jsxs("span",{className:"vtx-autocomplete-label__required","aria-label":"required",children:[" ","*"]})]}),r.jsxs("div",{className:hr,children:[y&&!u&&r.jsx("span",{className:"vtx-autocomplete-icon vtx-autocomplete-icon--left","aria-hidden":"true",children:r.jsx(ir,{size:16})}),u&&r.jsx("span",{className:"vtx-autocomplete-icon vtx-autocomplete-icon--left","aria-hidden":"true",children:r.jsxs("svg",{className:"vtx-autocomplete-icon-spinner",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[r.jsx("circle",{className:"vtx-autocomplete-icon-spinner__track",cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"2"}),r.jsx("path",{className:"vtx-autocomplete-icon-spinner__path",fill:"currentColor",d:"M8 2C4.686 2 2 4.686 2 8h2c0-2.21 1.79-4 4-4V2z"})]})}),r.jsx("input",{ref:r=>{"function"==typeof B?B(r):B&&(B.current=r),er.current=r},id:H,type:"text",className:`vtx-autocomplete-input ${z}`.trim(),disabled:M,required:D,value:lr,onChange:r=>{const n=r.target.value;or||X(n),Q(!0),Z(-1),null==b||b(n)},onFocus:r=>{nr(!0),L&&Q(!0),null==R||R(r)},onBlur:r=>{setTimeout(()=>{var r;(null===(r=ar.current)||void 0===r?void 0:r.contains(document.activeElement))||(nr(!1),Q(!1))},200),null==E||E(r)},onKeyDown:r=>{if(vr&&0!==d.length)switch(r.key){case"ArrowDown":r.preventDefault(),Z(r=>{const n=r<d.length-1?r+1:0;return dr(d[n],x)?n<d.length-1?n+1:0:n});break;case"ArrowUp":r.preventDefault(),Z(r=>{const n=r>0?r-1:d.length-1;return dr(d[n],x)?n>0?n-1:d.length-1:n});break;case"Enter":r.preventDefault(),J>=0&&J<d.length&&gr(d[J]);break;case"Escape":r.preventDefault(),Q(!1),Z(-1)}},"aria-invalid":sr,"aria-describedby":mr||void 0,"aria-autocomplete":"list","aria-controls":vr?U:void 0,"aria-expanded":vr,role:"combobox",autoComplete:"off",...F}),xr&&r.jsx("button",{type:"button",className:"vtx-autocomplete-clear",onClick:()=>{var r;or||X(""),Q(!1),null==k||k(),null===(r=er.current)||void 0===r||r.focus()},"aria-label":"Clear input",tabIndex:-1,children:r.jsx(T,{size:16})}),vr&&r.jsx("div",{className:ur,children:u?r.jsxs("div",{className:"vtx-autocomplete-message vtx-autocomplete-message--loading",children:[r.jsxs("svg",{className:"vtx-autocomplete-spinner",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:[r.jsx("circle",{className:"vtx-autocomplete-spinner__track",cx:"10",cy:"10",r:"8",stroke:"currentColor",strokeWidth:"2"}),r.jsx("path",{className:"vtx-autocomplete-spinner__path",fill:"currentColor",d:"M10 2C5.582 2 2 5.582 2 10h2c0-3.314 2.686-6 6-6V2z"})]}),r.jsx("span",{children:g})]}):0===d.length?r.jsx("div",{className:"vtx-autocomplete-message vtx-autocomplete-message--empty",children:h}):r.jsx("div",{role:"listbox",id:U,className:"vtx-autocomplete-options",ref:tr,children:d.map((n,e)=>S?S(n,e):((n,e)=>{const t=String(dr(n,s)),a=String(dr(n,c)),o=dr(n,m),i=dr(n,p),l=dr(n,x),d=e===J;return r.jsxs("div",{role:"option","aria-selected":d,"aria-disabled":l,className:["vtx-autocomplete-option",d&&"vtx-autocomplete-option--highlighted",l&&"vtx-autocomplete-option--disabled"].filter(Boolean).join(" "),onClick:()=>gr(n),onMouseEnter:()=>!l&&Z(e),children:[i&&r.jsx("span",{className:"vtx-autocomplete-option__icon",children:i}),r.jsxs("div",{className:"vtx-autocomplete-option__content",children:[r.jsx("div",{className:"vtx-autocomplete-option__label",children:t}),o&&r.jsx("div",{className:"vtx-autocomplete-option__description",children:o})]})]},a||e)})(n,e))})})]}),t&&!a&&!o&&r.jsx("p",{id:V,className:"vtx-autocomplete-helper",children:t}),a&&r.jsx("p",{id:Y,className:"vtx-autocomplete-error",role:"alert",children:a}),o&&r.jsx("p",{id:q,className:"vtx-autocomplete-success",role:"status",children:o})]})});Cr.displayName="Autocomplete";const Sr=j(Cr);mr(".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 $r=i.default.forwardRef(({children:n,variant:e="primary",size:t,fullWidth:a=!1,loading:o=!1,disabled:i=!1,leftIcon:l,rightIcon:d,iconOnly:s=!1,loadingText:c,asLink:x=!1,href:v,target:m,rel:p,className:h="",type:u="button",...g},b)=>{const{theme:f}=zr(),y=t||f.defaultSize||"md",w=["vtx-button",`vtx-button--${e}`,`vtx-button--${y}`,a&&"vtx-button--full-width",o&&"vtx-button--loading",s&&"vtx-button--icon-only",(()=>{if(!0===g.darkText)return"vtx-button--dark-text";if(!1===g.darkText)return"vtx-button--light-text";const r=f.colorContrast[e];return"light"===r?"vtx-button--dark-text":"dark"===r?"vtx-button--light-text":null})(),h].filter(Boolean).join(" "),k=g.style?{...g.style}:{};g.textColor&&(k.color=g.textColor);const j=r.jsxs(r.Fragment,{children:[o&&r.jsx("span",{className:"vtx-button__spinner",role:"status","aria-label":"Loading",children:r.jsx("svg",{className:"vtx-button__spinner-icon",viewBox:"0 0 24 24",children:r.jsx("circle",{className:"vtx-button__spinner-circle",cx:"12",cy:"12",r:"10",fill:"none",strokeWidth:"3"})})}),!o&&l&&r.jsx("span",{className:"vtx-button__icon-left",children:l}),!s&&r.jsx("span",{className:"vtx-button__content",children:o&&c?c:n}),s&&!o&&n,!o&&d&&r.jsx("span",{className:"vtx-button__icon-right",children:d})]});return x&&v?r.jsx("a",{ref:b,href:v,target:m,rel:"_blank"===m?"noopener noreferrer":p,className:w,"aria-disabled":i||o,style:k,...g,children:j}):r.jsx("button",{ref:b,type:u,className:w,disabled:i||o,"aria-busy":o,"aria-disabled":i||o,style:k,...g,children:j})});$r.displayName="Button";const Mr=j($r);mr("/* 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 Tr=i.default.forwardRef(({checked:e,indeterminate:t=!1,disabled:a=!1,label:o,size:i,variant:l="primary",error:d=!1,helperText:s,onChange:c,className:x="",inputClassName:v="",id:m,...p},h)=>{const{theme:u}=zr(),g=i||u.defaultSize||"md",b=n.useId(),f=m||b,y=["vtx-checkbox",`vtx-checkbox--${g}`,`vtx-checkbox--${l}`,a&&"vtx-checkbox--disabled",d&&"vtx-checkbox--error",x].filter(Boolean).join(" "),w=["vtx-checkbox-input",v].filter(Boolean).join(" "),k=n.useRef(null);return n.useImperativeHandle(h,()=>k.current),n.useEffect(()=>{k.current&&(k.current.indeterminate=t)},[t]),r.jsxs("div",{className:y,children:[r.jsxs("label",{className:"vtx-checkbox-label",htmlFor:f,children:[r.jsxs("span",{className:"vtx-checkbox-wrapper",children:[r.jsx("input",{ref:k,type:"checkbox",id:f,className:w,checked:e,disabled:a,onChange:c,...p}),r.jsxs("span",{className:"vtx-checkbox-box",children:[r.jsx("svg",{className:"vtx-checkbox-icon vtx-checkbox-icon--check",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",children:r.jsx("path",{d:"M20 6L9 17L4 12",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round"})}),r.jsx("svg",{className:"vtx-checkbox-icon vtx-checkbox-icon--indeterminate",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",children:r.jsx("path",{d:"M5 12H19",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round"})})]})]}),o&&r.jsx("span",{className:"vtx-checkbox-label-text",children:o})]}),s&&r.jsx("div",{className:"vtx-checkbox-helper-text",children:s})]})});Tr.displayName="Checkbox";const Dr=j(Tr);mr("/* CheckboxGroup Base Styles */\r\n.vtx-checkbox-group {\r\n display: inline-flex;\r\n flex-direction: column;\r\n gap: var(--vtx-spacing-2);\r\n}\r\n\r\n/* Group Label */\r\n.vtx-checkbox-group-label {\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-base);\r\n font-weight: var(--vtx-font-weight-medium);\r\n line-height: var(--vtx-line-height-normal);\r\n color: var(--vtx-color-neutral-900);\r\n margin-bottom: var(--vtx-spacing-1);\r\n}\r\n\r\n.vtx-checkbox-group--disabled .vtx-checkbox-group-label {\r\n color: var(--vtx-color-neutral-500);\r\n}\r\n\r\n.vtx-checkbox-group--error .vtx-checkbox-group-label {\r\n color: var(--vtx-color-error-600);\r\n}\r\n\r\n/* Options Container */\r\n.vtx-checkbox-group-options {\r\n display: flex;\r\n gap: var(--vtx-spacing-3);\r\n}\r\n\r\n.vtx-checkbox-group--vertical .vtx-checkbox-group-options {\r\n flex-direction: column;\r\n}\r\n\r\n.vtx-checkbox-group--horizontal .vtx-checkbox-group-options {\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n}\r\n\r\n/* Helper Text */\r\n.vtx-checkbox-group-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-top: var(--vtx-spacing-1);\r\n}\r\n\r\n.vtx-checkbox-group--error .vtx-checkbox-group-helper-text {\r\n color: var(--vtx-color-error-600);\r\n}\r\n");const Ir=i.default.forwardRef(({label:e,options:t,value:a,defaultValue:o,onChange:i,disabled:l=!1,error:d=!1,helperText:s,orientation:c="vertical",size:x,className:v="",...m},p)=>{const{theme:h}=zr(),u=x||h.defaultSize||"md",[g,b]=n.useState(o||[]),f=void 0!==a,y=f?a:g,w=["vtx-checkbox-group",`vtx-checkbox-group--${c}`,d&&"vtx-checkbox-group--error",l&&"vtx-checkbox-group--disabled",v].filter(Boolean).join(" ");return r.jsxs("div",{ref:p,className:w,...m,children:[e&&r.jsx("div",{className:"vtx-checkbox-group-label",children:e}),r.jsx("div",{className:"vtx-checkbox-group-options",children:t.map(n=>{const e=y.includes(n.value),t=l||n.disabled;return r.jsx(Dr,{label:n.label,checked:e,disabled:t,error:d,size:u,onChange:r=>((r,n)=>{const e=n?[...y,r]:y.filter(n=>n!==r);f||b(e),null==i||i(e)})(n.value,r.target.checked)},n.value)})}),s&&r.jsx("div",{className:"vtx-checkbox-group-helper-text",children:s})]})});Ir.displayName="CheckboxGroup";const Lr=j(Ir);mr(".vtx-form-control {\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n}\r\n\r\n.vtx-form-control--full-width {\r\n width: 100%;\r\n}\r\n\r\n/* Spacing between form controls */\r\n.vtx-form-control--spacing-none {\r\n margin-bottom: 0;\r\n}\r\n\r\n.vtx-form-control--spacing-sm {\r\n margin-bottom: var(--vtx-spacing-3);\r\n}\r\n\r\n.vtx-form-control--spacing-md {\r\n margin-bottom: var(--vtx-spacing-4);\r\n}\r\n\r\n.vtx-form-control--spacing-lg {\r\n margin-bottom: var(--vtx-spacing-6);\r\n}\r\n\r\n/* Inner container */\r\n.vtx-form-control__inner {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--vtx-spacing-2);\r\n}\r\n\r\n/* Label position: top (default) */\r\n.vtx-form-control--label-top .vtx-form-control__inner {\r\n flex-direction: column;\r\n}\r\n\r\n/* Label position: left (horizontal) */\r\n.vtx-form-control--label-left .vtx-form-control__inner {\r\n flex-direction: row;\r\n align-items: flex-start;\r\n gap: var(--vtx-spacing-3);\r\n}\r\n\r\n.vtx-form-control--label-left .vtx-form-control__label {\r\n min-width: 120px;\r\n padding-top: var(--vtx-spacing-2);\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-form-control--label-left .vtx-form-control__field {\r\n flex: 1;\r\n}\r\n\r\n/* Label */\r\n.vtx-form-control__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 display: block;\r\n}\r\n\r\n.vtx-form-control__label-required {\r\n color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-form-control--disabled .vtx-form-control__label {\r\n color: var(--vtx-color-neutral-500);\r\n cursor: not-allowed;\r\n}\r\n\r\n/* Field wrapper */\r\n.vtx-form-control__field {\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n}\r\n\r\n/* Ensure children take full width if form control is full width */\r\n.vtx-form-control--full-width .vtx-form-control__field > * {\r\n width: 100%;\r\n}\r\n\r\n/* Messages */\r\n.vtx-form-control__messages {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--vtx-spacing-1);\r\n margin-top: var(--vtx-spacing-1);\r\n}\r\n\r\n.vtx-form-control__helper,\r\n.vtx-form-control__error,\r\n.vtx-form-control__success {\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 margin: 0;\r\n}\r\n\r\n.vtx-form-control__helper {\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n.vtx-form-control__error {\r\n color: var(--vtx-color-error-600);\r\n font-weight: var(--vtx-font-weight-medium);\r\n}\r\n\r\n.vtx-form-control__success {\r\n color: var(--vtx-color-success-600);\r\n font-weight: var(--vtx-font-weight-medium);\r\n}\r\n\r\n/* State styles */\r\n.vtx-form-control--error .vtx-form-control__label {\r\n color: var(--vtx-color-error-700);\r\n}\r\n\r\n.vtx-form-control--success .vtx-form-control__label {\r\n color: var(--vtx-color-success-700);\r\n}\r\n\r\n/* Responsive adjustments */\r\n@media (max-width: 640px) {\r\n .vtx-form-control--label-left .vtx-form-control__inner {\r\n flex-direction: column;\r\n gap: var(--vtx-spacing-2);\r\n }\r\n\r\n .vtx-form-control--label-left .vtx-form-control__label {\r\n min-width: auto;\r\n padding-top: 0;\r\n }\r\n}\r\n");const Ar=i.default.forwardRef(({label:n,helperText:e,error:t,success:a,size:o,fullWidth:i=!0,required:l=!1,disabled:d=!1,wrapperClassName:s="",labelClassName:c="",spacing:x="md",children:m,id:p,labelPosition:h="top",className:u="",...g},b)=>{const f=v("form-control"),y=p||f,w=`${y}-helper`,k=`${y}-error`,j=`${y}-success`,_=Boolean(t),N=["vtx-form-control",`vtx-form-control--spacing-${x}`,`vtx-form-control--label-${h}`,i&&"vtx-form-control--full-width",_&&"vtx-form-control--error",Boolean(a)&&!_&&"vtx-form-control--success",d&&"vtx-form-control--disabled",s,u].filter(Boolean).join(" ");return r.jsxs("div",{ref:b,className:N,...g,children:[r.jsxs("div",{className:"vtx-form-control__inner",children:[n&&r.jsxs("label",{htmlFor:`${y}-input`,className:`vtx-form-control__label ${c}`.trim(),children:[n,l&&r.jsxs("span",{className:"vtx-form-control__label-required","aria-label":"required",children:[" ","*"]})]}),r.jsx("div",{className:"vtx-form-control__field",children:m})]}),(e||t||a)&&r.jsxs("div",{className:"vtx-form-control__messages",children:[e&&!t&&!a&&r.jsx("p",{id:w,className:"vtx-form-control__helper",children:e}),t&&r.jsx("p",{id:k,className:"vtx-form-control__error",role:"alert",children:t}),a&&r.jsx("p",{id:j,className:"vtx-form-control__success",role:"status",children:a})]})]})});Ar.displayName="FormControl";const Rr=j(Ar);mr(".vtx-input-wrapper {\r\n display: inline-flex;\r\n flex-direction: column;\r\n gap: var(--vtx-spacing-1);\r\n}\r\n\r\n.vtx-input-wrapper--full-width {\r\n width: 100%;\r\n}\r\n\r\n.vtx-input-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-input-label__required {\r\n color: var(--vtx-color-error-600);\r\n margin-left: var(--vtx-spacing-1);\r\n}\r\n\r\n.vtx-input-container {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n background-color: white;\r\n border: 1px solid var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-radius-md);\r\n transition: all var(--vtx-transition-base);\r\n}\r\n\r\n.vtx-input-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.vtx-input-container--error {\r\n border-color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-input-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-input-container--disabled {\r\n background-color: var(--vtx-color-neutral-100);\r\n cursor: not-allowed;\r\n}\r\n\r\n/* Sizes */\r\n.vtx-input-container--sm {\r\n min-height: 32px;\r\n}\r\n\r\n.vtx-input-container--md {\r\n min-height: 40px;\r\n}\r\n\r\n.vtx-input-container--lg {\r\n min-height: 48px;\r\n}\r\n\r\n.vtx-input {\r\n flex: 1;\r\n width: 100%;\r\n min-width: 0;\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-base);\r\n color: var(--vtx-color-neutral-900);\r\n background: transparent;\r\n border: none;\r\n outline: none;\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\r\n}\r\n\r\n.vtx-input::placeholder {\r\n color: var(--vtx-color-neutral-400);\r\n}\r\n\r\n.vtx-input:disabled {\r\n cursor: not-allowed;\r\n color: var(--vtx-color-neutral-500);\r\n}\r\n\r\n.vtx-input-container--sm .vtx-input {\r\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\r\n font-size: var(--vtx-font-size-sm);\r\n}\r\n\r\n.vtx-input-container--lg .vtx-input {\r\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\r\n font-size: var(--vtx-font-size-lg);\r\n}\r\n\r\n/* Icons */\r\n.vtx-input-icon {\r\n display: inline-flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n color: var(--vtx-color-neutral-500);\r\n pointer-events: none;\r\n}\r\n\r\n.vtx-input-icon--left {\r\n padding-left: var(--vtx-spacing-3);\r\n}\r\n\r\n.vtx-input-icon--right {\r\n padding-right: var(--vtx-spacing-3);\r\n}\r\n\r\n.vtx-input-container--with-left-icon .vtx-input {\r\n padding-left: var(--vtx-spacing-1);\r\n}\r\n\r\n.vtx-input-container--with-right-icon .vtx-input {\r\n padding-right: var(--vtx-spacing-1);\r\n}\r\n\r\n/* Helper and error text */\r\n.vtx-input-helper,\r\n.vtx-input-error {\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 margin: 0;\r\n}\r\n\r\n.vtx-input-helper {\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n.vtx-input-error {\r\n color: var(--vtx-color-error-600);\r\n}\r\n");const Er=i.default.forwardRef(({label:n,helperText:e,error:t,success:a,size:o,fullWidth:i=!1,leftIcon:l,rightIcon:d,clearable:s=!1,onClear:c,showCount:x=!1,className:m="",wrapperClassName:p="",labelClassName:h="",inputClassName:u="",prefix:g,suffix:b,id:f,disabled:y=!1,required:w=!1,value:k,maxLength:j,..._},N)=>{const{theme:z}=zr(),C=o||z.defaultSize,S=v("input"),$=f||S,M=`${$}-helper`,D=`${$}-error`,I=`${$}-success`,L=Boolean(t),A=Boolean(a)&&!L,R=s&&k&&String(k).length>0&&!y,E=[e&&!t&&!a&&M,t&&D,a&&I].filter(Boolean).join(" "),F=["vtx-input-wrapper",i&&"vtx-input-wrapper--full-width",p].filter(Boolean).join(" "),B=["vtx-input-container",`vtx-input-container--${C}`,L&&"vtx-input-container--error",A&&"vtx-input-container--success",y&&"vtx-input-container--disabled",(l||g)&&"vtx-input-container--with-left-element",(d||b||R)&&"vtx-input-container--with-right-element",m].filter(Boolean).join(" "),O=k?String(k).length:0,W=x&&j;return r.jsxs("div",{className:F,children:[n&&r.jsxs("label",{htmlFor:$,className:`vtx-input-label ${h}`.trim(),children:[n,w&&r.jsxs("span",{className:"vtx-input-label__required","aria-label":"required",children:[" ","*"]})]}),r.jsxs("div",{className:B,children:[l&&r.jsx("span",{className:"vtx-input-icon vtx-input-icon--left","aria-hidden":"true",children:l}),g&&r.jsx("span",{className:"vtx-input-prefix","aria-hidden":"true",children:g}),r.jsx("input",{ref:N,id:$,className:`vtx-input ${u}`.trim(),disabled:y,required:w,value:k,maxLength:j,"aria-invalid":L,"aria-describedby":E||void 0,..._}),b&&r.jsx("span",{className:"vtx-input-suffix","aria-hidden":"true",children:b}),R&&r.jsx("button",{type:"button",className:"vtx-input-clear",onClick:()=>{null==c||c()},"aria-label":"Clear input",tabIndex:-1,children:r.jsx(T,{size:16})}),d&&!R&&r.jsx("span",{className:"vtx-input-icon vtx-input-icon--right","aria-hidden":"true",children:d})]}),e&&!t&&!a&&r.jsx("p",{id:M,className:"vtx-input-helper",children:e}),t&&r.jsx("p",{id:D,className:"vtx-input-error",role:"alert",children:t}),a&&r.jsx("p",{id:I,className:"vtx-input-success",role:"status",children:a}),W&&r.jsxs("p",{className:"vtx-input-counter","aria-live":"polite",children:[O," / ",j]})]})});Er.displayName="Input";const Fr=j(Er);mr("/* 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--sm .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--lg .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--sm .vtx-chip__icon svg {\r\n width: 0.875rem;\r\n height: 0.875rem;\r\n}\r\n\r\n.vtx-chip--md .vtx-chip__icon svg {\r\n width: 1rem;\r\n height: 1rem;\r\n}\r\n\r\n.vtx-chip--lg .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--sm .vtx-chip__delete {\r\n margin-right: -0.125rem;\r\n}\r\n\r\n.vtx-chip--lg .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--sm .vtx-chip__delete svg {\r\n width: 0.875rem;\r\n height: 0.875rem;\r\n}\r\n\r\n.vtx-chip--md .vtx-chip__delete svg {\r\n width: 1rem;\r\n height: 1rem;\r\n}\r\n\r\n.vtx-chip--lg .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 Br=i.default.forwardRef(({label:n,size:e="md",variant:t="filled",color:a="default",icon:o,avatar:i,onDelete:l,onClick:d,disabled:s=!1,className:c="","aria-label":x,"data-testid":v},m)=>{const p=["vtx-chip",`vtx-chip--${e}`,`vtx-chip--${t}`,`vtx-chip--${a}`,d&&!s&&"vtx-chip--clickable",s&&"vtx-chip--disabled",c].filter(Boolean).join(" ");return r.jsxs("div",{ref:m,className:p,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||n,"aria-disabled":s,"data-testid":v,children:[i&&r.jsx("img",{src:i,alt:"",className:"vtx-chip__avatar","aria-hidden":"true"}),o&&!i&&r.jsx("span",{className:"vtx-chip__icon","aria-hidden":"true",children:o}),r.jsx("span",{className:"vtx-chip__label",children:n}),l&&r.jsx("button",{type:"button",className:"vtx-chip__delete",onClick:r=>{r.stopPropagation(),!s&&l&&l(r)},onKeyDown:r=>{"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),r.stopPropagation(),!s&&l&&l(r))},disabled:s,"aria-label":`Remove ${n}`,tabIndex:-1,children:r.jsx(T,{size:16})})]})});Br.displayName="Chip";const Or=j(Br);mr("/* 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 Wr=i.default.forwardRef(({label:e,helperText:t,error:a,success:o,size:i,fullWidth:l=!1,options:d,value:s,defaultValue:c=[],placeholder:x="Select...",className:m="",grouped:p=!1,getOptionLabel:h="label",getOptionValue:u="value",getOptionDisabled:g="disabled",getOptionGroup:b="group",onChange:f,disabled:y=!1,required:w=!1,id:k,name:j,selectionStyle:_="checkbox",searchable:N=!1,showSelectAll:z=!1,maxChipsDisplay:C,chipColor:S="primary",chipVariant:T="light",loading:D=!1},L)=>{const{theme:A}=zr(),R=v("multiselect"),E=k||R,F=`${E}-helper`,B=`${E}-error`,O=`${E}-success`,[W,P]=n.useState(!1),[H,V]=n.useState(""),[Y,q]=n.useState(c),U=n.useRef(null),G=n.useRef(null),X=void 0!==s?s:Y,K=(r,n)=>"function"==typeof n?n(r):"object"==typeof r?r[n]:r,Q=Boolean(a),J=Boolean(o)&&!Q,Z=[t&&!a&&!o&&F,a&&B,o&&O].filter(Boolean).join(" ");n.useEffect(()=>{const r=r=>{U.current&&!U.current.contains(r.target)&&G.current&&!G.current.contains(r.target)&&(P(!1),V(""))};if(W)return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[W]);const rr=r=>{if(y)return;const n=X.includes(r)?X.filter(n=>n!==r):[...X,r];if(void 0===s&&q(n),f){const r=d.filter(r=>n.includes(K(r,u)));f(n,r)}},nr=H?d.filter(r=>K(r,h).toLowerCase().includes(H.toLowerCase())):d,er=p?nr.reduce((r,n)=>{const e=K(n,b)||"Other";return r[e]||(r[e]=[]),r[e].push(n),r},{}):{"":nr},tr=d.filter(r=>X.includes(K(r,u))),ar=C?tr.slice(0,C):tr,or=C?tr.length-C:0,ir=["vtx-multiselect-wrapper",l&&"vtx-multiselect-wrapper--full-width",m].filter(Boolean).join(" "),lr=i||(null==A?void 0:A.defaultSize)||"md",dr=["vtx-multiselect-container",`vtx-multiselect-container--${lr}`,Q&&"vtx-multiselect-container--error",J&&"vtx-multiselect-container--success",y&&"vtx-multiselect-container--disabled",W&&"vtx-multiselect-container--open"].filter(Boolean).join(" "),sr=lr;return r.jsxs("div",{className:ir,ref:L,children:[e&&r.jsxs("label",{htmlFor:E,className:"vtx-multiselect-label",children:[e,w&&r.jsxs("span",{className:"vtx-multiselect-label__required","aria-label":"required",children:[" ","*"]})]}),r.jsxs("div",{ref:U,className:dr,"aria-expanded":W,"aria-haspopup":"listbox","aria-labelledby":e?`${E}-label`:void 0,"aria-describedby":Z||void 0,"aria-disabled":y,children:[r.jsx("div",{className:"vtx-multiselect-input-area",onClick:()=>!y&&P(!W),role:"button",tabIndex:y?-1:0,onKeyDown:r=>{y||"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),P(!W))},children:0===tr.length?r.jsx("span",{className:"vtx-multiselect-placeholder",children:x}):r.jsxs("div",{className:"vtx-multiselect-chips",children:[ar.map(n=>{const e=K(n,u),t=K(n,h);return r.jsx(Or,{label:t,size:sr,color:S,variant:T,onDelete:r=>{r.stopPropagation(),(r=>{if(y)return;const n=X.filter(n=>n!==r);if(void 0===s&&q(n),f){const r=d.filter(r=>n.includes(K(r,u)));f(n,r)}})(e)}},e)}),or>0&&r.jsx(Or,{label:`+${or} more`,size:sr,color:"default",variant:"outlined"})]})}),r.jsx("span",{className:"vtx-multiselect-icon","aria-hidden":"true",children:D?r.jsx($,{size:16}):r.jsx(I,{size:16})}),W&&r.jsxs("div",{ref:G,className:"vtx-multiselect-dropdown",role:"listbox",children:[N&&r.jsx("div",{className:"vtx-multiselect-search",children:r.jsx("input",{type:"text",placeholder:"Search...",value:H,onChange:r=>V(r.target.value),onClick:r=>r.stopPropagation()})}),z&&r.jsxs("div",{className:"vtx-multiselect-actions",children:[r.jsx("button",{type:"button",className:"vtx-multiselect-action-button",onClick:r=>{r.stopPropagation(),(()=>{const r=d.filter(r=>!K(r,g)).map(r=>K(r,u));void 0===s&&q(r),f&&f(r,d.filter(r=>!K(r,g)))})()},children:"Select All"}),r.jsx("button",{type:"button",className:"vtx-multiselect-action-button",onClick:r=>{r.stopPropagation(),void 0===s&&q([]),f&&f([],[])},children:"Clear All"})]}),r.jsx("div",{className:"vtx-multiselect-options",children:0===nr.length?r.jsx("div",{className:"vtx-multiselect-empty",children:"No options found"}):Object.entries(er).map(([n,e])=>r.jsxs("div",{children:[p&&n&&r.jsx("div",{className:"vtx-multiselect-optgroup",children:n}),e.map(n=>{const e=K(n,u),t=K(n,h),a=K(n,g),o=X.includes(e),i=["vtx-multiselect-option",o&&"vtx-multiselect-option--selected",a&&"vtx-multiselect-option--disabled"].filter(Boolean).join(" ");return r.jsxs("div",{className:i,onClick:()=>!a&&rr(e),role:"option","aria-selected":o,"aria-disabled":a,tabIndex:a?-1:0,onKeyDown:r=>{a||"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),rr(e))},children:["checkbox"===_&&r.jsx("div",{className:"vtx-multiselect-checkbox "+(o?"vtx-multiselect-checkbox--checked":""),children:o&&r.jsx(M,{size:16})}),r.jsx("span",{className:"vtx-multiselect-option-label",children:t}),"checkmark"===_&&r.jsx("div",{className:"vtx-multiselect-checkmark",children:o&&r.jsx(M,{size:20})})]},e)})]},n))})]})]}),j&&r.jsx("select",{multiple:!0,name:j,value:X.map(String),onChange:()=>{},className:"vtx-multiselect-hidden-select",required:w,disabled:y,tabIndex:-1,"aria-hidden":"true",children:d.map(n=>{const e=K(n,u);return r.jsx("option",{value:String(e),children:K(n,h)},e)})}),t&&!a&&!o&&r.jsx("p",{id:F,className:"vtx-multiselect-helper",children:t}),a&&r.jsx("p",{id:B,className:"vtx-multiselect-error",role:"alert",children:a}),o&&r.jsx("p",{id:O,className:"vtx-multiselect-success",role:"status",children:o})]})});Wr.displayName="MultiSelect";const Pr=j(Wr);mr("/* Radio Base Styles */\r\n.vtx-radio {\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-radio-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 radio */\r\n.vtx-radio-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-radio-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 radio circle */\r\n.vtx-radio-circle {\r\n position: relative;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: var(--vtx-radio-size, 20px);\r\n height: var(--vtx-radio-size, 20px);\r\n border: var(--vtx-radio-border-width, 2px) solid var(--vtx-color-neutral-300);\r\n border-radius: 50%;\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/* Inner dot */\r\n.vtx-radio-dot {\r\n width: 50%;\r\n height: 50%;\r\n border-radius: 50%;\r\n background-color: white;\r\n opacity: 0;\r\n transform: scale(0);\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-radio-input:checked + .vtx-radio-circle {\r\n background-color: var(--vtx-radio-color, var(--vtx-color-primary-600));\r\n border-color: var(--vtx-radio-color, var(--vtx-color-primary-600));\r\n}\r\n\r\n.vtx-radio-input:checked + .vtx-radio-circle .vtx-radio-dot {\r\n opacity: 1;\r\n transform: scale(1);\r\n}\r\n\r\n/* Hover state */\r\n.vtx-radio-label:hover .vtx-radio-circle {\r\n border-color: var(--vtx-color-neutral-400);\r\n}\r\n\r\n.vtx-radio-label:hover .vtx-radio-input:checked + .vtx-radio-circle {\r\n background-color: var(--vtx-radio-hover-color, var(--vtx-color-primary-700));\r\n border-color: var(--vtx-radio-hover-color, var(--vtx-color-primary-700));\r\n}\r\n\r\n/* Focus state */\r\n.vtx-radio-input:focus-visible + .vtx-radio-circle {\r\n outline: 2px solid var(--vtx-radio-color, var(--vtx-color-primary-600));\r\n outline-offset: 2px;\r\n}\r\n\r\n/* Label text */\r\n.vtx-radio-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/* Disabled state */\r\n.vtx-radio--disabled .vtx-radio-label {\r\n cursor: not-allowed;\r\n opacity: 0.5;\r\n}\r\n\r\n.vtx-radio--disabled .vtx-radio-circle {\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-radio--disabled .vtx-radio-input:checked + .vtx-radio-circle {\r\n background-color: var(--vtx-color-neutral-400);\r\n border-color: var(--vtx-color-neutral-400);\r\n}\r\n\r\n.vtx-radio--disabled .vtx-radio-label:hover .vtx-radio-circle,\r\n.vtx-radio--disabled .vtx-radio-label:hover .vtx-radio-input:checked + .vtx-radio-circle {\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-radio--disabled .vtx-radio-label:hover .vtx-radio-input:checked + .vtx-radio-circle {\r\n background-color: var(--vtx-color-neutral-400);\r\n border-color: var(--vtx-color-neutral-400);\r\n}\r\n\r\n.vtx-radio--disabled .vtx-radio-label-text {\r\n color: var(--vtx-color-neutral-500);\r\n}\r\n\r\n/* Error state */\r\n.vtx-radio--error .vtx-radio-circle {\r\n border-color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-radio--error .vtx-radio-input:checked + .vtx-radio-circle {\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-radio--error .vtx-radio-label:hover .vtx-radio-input:checked + .vtx-radio-circle {\r\n background-color: var(--vtx-color-error-700);\r\n border-color: var(--vtx-color-error-700);\r\n}\r\n\r\n/* Helper text */\r\n.vtx-radio-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-radio-size, 20px) + var(--vtx-spacing-2));\r\n}\r\n\r\n.vtx-radio--error .vtx-radio-helper-text {\r\n color: var(--vtx-color-error-600);\r\n}\r\n\r\n/* Size variants */\r\n.vtx-radio--sm {\r\n --vtx-radio-size: 16px;\r\n --vtx-radio-border-width: 2px;\r\n}\r\n\r\n.vtx-radio--sm .vtx-radio-label-text {\r\n font-size: var(--vtx-font-size-sm);\r\n}\r\n\r\n.vtx-radio--md {\r\n --vtx-radio-size: 20px;\r\n --vtx-radio-border-width: 2px;\r\n}\r\n\r\n.vtx-radio--lg {\r\n --vtx-radio-size: 24px;\r\n --vtx-radio-border-width: 2px;\r\n}\r\n\r\n.vtx-radio--lg .vtx-radio-label-text {\r\n font-size: var(--vtx-font-size-lg);\r\n}\r\n\r\n/* Variants */\r\n.vtx-radio--primary {\r\n --vtx-radio-color: var(--vtx-color-primary-600);\r\n --vtx-radio-hover-color: var(--vtx-color-primary-700);\r\n}\r\n\r\n.vtx-radio--secondary {\r\n --vtx-radio-color: var(--vtx-color-neutral-600);\r\n --vtx-radio-hover-color: var(--vtx-color-neutral-700);\r\n}\r\n\r\n.vtx-radio--success {\r\n --vtx-radio-color: var(--vtx-color-success-600);\r\n --vtx-radio-hover-color: var(--vtx-color-success-700);\r\n}\r\n\r\n.vtx-radio--error {\r\n --vtx-radio-color: var(--vtx-color-error-600);\r\n --vtx-radio-hover-color: var(--vtx-color-error-700);\r\n}\r\n\r\n.vtx-radio--warning {\r\n --vtx-radio-color: var(--vtx-color-warning-600);\r\n --vtx-radio-hover-color: var(--vtx-color-warning-700);\r\n}\r\n\r\n.vtx-radio--info {\r\n --vtx-radio-color: var(--vtx-color-info-600);\r\n --vtx-radio-hover-color: var(--vtx-color-info-700);\r\n}\r\n");const Hr=i.default.forwardRef(({checked:e,disabled:t=!1,label:a,size:o,variant:i="primary",error:l=!1,helperText:d,onChange:s,className:c="",inputClassName:x="",id:v,...m},p)=>{const{theme:h}=zr(),u=o||h.defaultSize,g=n.useId(),b=v||g,f=d?`${b}-helper-text`:void 0,y=["vtx-radio",`vtx-radio--${u}`,`vtx-radio--${i}`,t&&"vtx-radio--disabled",l&&"vtx-radio--error",c].filter(Boolean).join(" "),w=["vtx-radio-input",x].filter(Boolean).join(" "),k=r.jsxs("div",{className:"vtx-radio-wrapper",children:[r.jsx("input",{ref:p,type:"radio",id:b,className:w,checked:e,disabled:t,onChange:s,"aria-describedby":f,...m}),r.jsx("span",{className:"vtx-radio-circle",children:r.jsx("span",{className:"vtx-radio-dot"})})]});return a?r.jsxs("div",{className:y,children:[r.jsxs("label",{htmlFor:b,className:"vtx-radio-label",children:[k,r.jsx("span",{className:"vtx-radio-label-text",children:a})]}),d&&r.jsx("span",{id:f,className:"vtx-radio-helper-text",children:d})]}):r.jsxs("div",{className:y,children:[k,d&&r.jsx("span",{id:f,className:"vtx-radio-helper-text",children:d})]})});Hr.displayName="Radio";const Vr=j(Hr);mr("/* RadioGroup Base Styles */\r\n.vtx-radio-group {\r\n display: inline-flex;\r\n flex-direction: column;\r\n gap: var(--vtx-spacing-2);\r\n}\r\n\r\n/* Group Label */\r\n.vtx-radio-group-label {\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-base);\r\n font-weight: var(--vtx-font-weight-medium);\r\n line-height: var(--vtx-line-height-normal);\r\n color: var(--vtx-color-neutral-900);\r\n margin-bottom: var(--vtx-spacing-1);\r\n}\r\n\r\n.vtx-radio-group--disabled .vtx-radio-group-label {\r\n color: var(--vtx-color-neutral-500);\r\n}\r\n\r\n.vtx-radio-group--error .vtx-radio-group-label {\r\n color: var(--vtx-color-error-600);\r\n}\r\n\r\n/* Options Container */\r\n.vtx-radio-group-options {\r\n display: flex;\r\n gap: var(--vtx-spacing-3);\r\n}\r\n\r\n.vtx-radio-group--vertical .vtx-radio-group-options {\r\n flex-direction: column;\r\n}\r\n\r\n.vtx-radio-group--horizontal .vtx-radio-group-options {\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n}\r\n\r\n/* Helper Text */\r\n.vtx-radio-group-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-top: var(--vtx-spacing-1);\r\n}\r\n\r\n.vtx-radio-group--error .vtx-radio-group-helper-text {\r\n color: var(--vtx-color-error-600);\r\n}\r\n");const Yr=i.default.forwardRef(({name:e,label:t,options:a,value:o,defaultValue:i,onChange:l,disabled:d=!1,error:s=!1,helperText:c,orientation:x="vertical",size:v,variant:m="primary",className:p="",...h},u)=>{const{theme:g}=zr(),b=v||g.defaultSize,[f,y]=n.useState(i),w=void 0!==o,k=w?o:f,j=["vtx-radio-group",`vtx-radio-group--${x}`,s&&"vtx-radio-group--error",d&&"vtx-radio-group--disabled",p].filter(Boolean).join(" ");return r.jsxs("div",{ref:u,className:j,role:"radiogroup","aria-label":"string"==typeof t?t:void 0,...h,children:[t&&r.jsx("div",{className:"vtx-radio-group-label",children:t}),r.jsx("div",{className:"vtx-radio-group-options",children:a.map(n=>{const t=k===n.value,a=d||n.disabled;return r.jsx(Vr,{name:e,value:n.value,label:n.label,checked:t,disabled:a,error:s,size:b,variant:m,onChange:()=>{return r=n.value,w||y(r),void(null==l||l(r));var r}},n.value)})}),c&&r.jsx("div",{className:"vtx-radio-group-helper-text",children:c})]})});Yr.displayName="RadioGroup";const qr=j(Yr);mr(".vtx-richtext-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--vtx-spacing-1);\r\n width: 100%;\r\n}\r\n\r\n.vtx-richtext-wrapper--inline {\r\n display: inline-flex;\r\n width: auto;\r\n}\r\n\r\n.vtx-richtext-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-richtext-label__required {\r\n color: var(--vtx-color-error-600);\r\n margin-left: var(--vtx-spacing-1);\r\n}\r\n\r\n.vtx-richtext-container {\r\n display: flex;\r\n flex-direction: column;\r\n background-color: white;\r\n border: 1px solid var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-radius-md);\r\n transition: all var(--vtx-transition-base);\r\n overflow: hidden;\r\n}\r\n\r\n.vtx-richtext-container--focused {\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.vtx-richtext-container--error {\r\n border-color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-richtext-container--error.vtx-richtext-container--focused {\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-richtext-container--success {\r\n border-color: var(--vtx-color-success-600);\r\n}\r\n\r\n.vtx-richtext-container--success.vtx-richtext-container--focused {\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-richtext-container--disabled {\r\n background-color: var(--vtx-color-neutral-100);\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n}\r\n\r\n/* Toolbar */\r\n.vtx-richtext-toolbar {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-1);\r\n padding: var(--vtx-spacing-2);\r\n background-color: var(--vtx-color-neutral-50);\r\n border-bottom: 1px solid var(--vtx-color-neutral-200);\r\n flex-wrap: wrap;\r\n}\r\n\r\n.vtx-richtext-toolbar-button {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-width: 32px;\r\n height: 32px;\r\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\r\n background-color: white;\r\n border: 1px solid var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-radius-sm);\r\n color: var(--vtx-color-neutral-700);\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-semibold);\r\n cursor: pointer;\r\n transition: all var(--vtx-transition-fast);\r\n user-select: none;\r\n}\r\n\r\n.vtx-richtext-toolbar-button:hover:not(:disabled) {\r\n background-color: var(--vtx-color-neutral-100);\r\n border-color: var(--vtx-color-neutral-400);\r\n}\r\n\r\n.vtx-richtext-toolbar-button:active:not(:disabled) {\r\n background-color: var(--vtx-color-neutral-200);\r\n transform: scale(0.98);\r\n}\r\n\r\n.vtx-richtext-toolbar-button:disabled {\r\n cursor: not-allowed;\r\n opacity: 0.5;\r\n}\r\n\r\n.vtx-richtext-toolbar-button:focus {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 1px;\r\n}\r\n\r\n.vtx-richtext-toolbar-clear {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-width: 32px;\r\n height: 32px;\r\n padding: var(--vtx-spacing-1);\r\n margin-left: auto;\r\n background-color: var(--vtx-color-error-100);\r\n border: 1px solid var(--vtx-color-error-300);\r\n border-radius: var(--vtx-radius-sm);\r\n color: var(--vtx-color-error-700);\r\n cursor: pointer;\r\n transition: all var(--vtx-transition-fast);\r\n}\r\n\r\n.vtx-richtext-toolbar-clear:hover:not(:disabled) {\r\n background-color: var(--vtx-color-error-200);\r\n border-color: var(--vtx-color-error-400);\r\n}\r\n\r\n.vtx-richtext-toolbar-clear:active:not(:disabled) {\r\n transform: scale(0.98);\r\n}\r\n\r\n/* Editor */\r\n.vtx-richtext-editor {\r\n flex: 1;\r\n width: 100%;\r\n min-width: 0;\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-base);\r\n color: var(--vtx-color-neutral-900);\r\n line-height: var(--vtx-line-height-relaxed);\r\n padding: var(--vtx-spacing-3);\r\n outline: none;\r\n overflow-y: auto;\r\n word-wrap: break-word;\r\n}\r\n\r\n.vtx-richtext-container--sm .vtx-richtext-editor {\r\n padding: var(--vtx-spacing-2);\r\n font-size: var(--vtx-font-size-sm);\r\n}\r\n\r\n.vtx-richtext-container--lg .vtx-richtext-editor {\r\n padding: var(--vtx-spacing-4);\r\n font-size: var(--vtx-font-size-lg);\r\n}\r\n\r\n.vtx-richtext-editor[contenteditable='true']:empty:before {\r\n content: attr(data-placeholder);\r\n color: var(--vtx-color-neutral-400);\r\n pointer-events: none;\r\n}\r\n\r\n.vtx-richtext-editor[contenteditable='false'] {\r\n cursor: not-allowed;\r\n color: var(--vtx-color-neutral-500);\r\n}\r\n\r\n/* Editor content styling */\r\n.vtx-richtext-editor h1 {\r\n font-size: var(--vtx-font-size-3xl);\r\n font-weight: var(--vtx-font-weight-bold);\r\n margin: var(--vtx-spacing-2) 0;\r\n line-height: var(--vtx-line-height-tight);\r\n}\r\n\r\n.vtx-richtext-editor h2 {\r\n font-size: var(--vtx-font-size-2xl);\r\n font-weight: var(--vtx-font-weight-bold);\r\n margin: var(--vtx-spacing-2) 0;\r\n line-height: var(--vtx-line-height-tight);\r\n}\r\n\r\n.vtx-richtext-editor h3 {\r\n font-size: var(--vtx-font-size-xl);\r\n font-weight: var(--vtx-font-weight-semibold);\r\n margin: var(--vtx-spacing-2) 0;\r\n line-height: var(--vtx-line-height-tight);\r\n}\r\n\r\n.vtx-richtext-editor p {\r\n margin: var(--vtx-spacing-2) 0;\r\n}\r\n\r\n.vtx-richtext-editor ul,\r\n.vtx-richtext-editor ol {\r\n margin: var(--vtx-spacing-2) 0;\r\n padding-left: var(--vtx-spacing-6);\r\n}\r\n\r\n.vtx-richtext-editor li {\r\n margin: var(--vtx-spacing-1) 0;\r\n}\r\n\r\n.vtx-richtext-editor a {\r\n color: var(--vtx-color-primary-600);\r\n text-decoration: underline;\r\n}\r\n\r\n.vtx-richtext-editor a:hover {\r\n color: var(--vtx-color-primary-700);\r\n}\r\n\r\n.vtx-richtext-editor pre {\r\n background-color: var(--vtx-color-neutral-100);\r\n border: 1px solid var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-radius-sm);\r\n padding: var(--vtx-spacing-2);\r\n margin: var(--vtx-spacing-2) 0;\r\n font-family: var(--vtx-font-family-mono);\r\n font-size: var(--vtx-font-size-sm);\r\n overflow-x: auto;\r\n}\r\n\r\n.vtx-richtext-editor b,\r\n.vtx-richtext-editor strong {\r\n font-weight: var(--vtx-font-weight-bold);\r\n}\r\n\r\n.vtx-richtext-editor i,\r\n.vtx-richtext-editor em {\r\n font-style: italic;\r\n}\r\n\r\n.vtx-richtext-editor u {\r\n text-decoration: underline;\r\n}\r\n\r\n.vtx-richtext-editor s,\r\n.vtx-richtext-editor strike {\r\n text-decoration: line-through;\r\n}\r\n\r\n/* Footer */\r\n.vtx-richtext-footer {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n gap: var(--vtx-spacing-2);\r\n min-height: 20px;\r\n}\r\n\r\n.vtx-richtext-footer-left {\r\n flex: 1;\r\n}\r\n\r\n/* Helper, error, and success text */\r\n.vtx-richtext-helper,\r\n.vtx-richtext-error,\r\n.vtx-richtext-success {\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 margin: 0;\r\n}\r\n\r\n.vtx-richtext-helper {\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n.vtx-richtext-error {\r\n color: var(--vtx-color-error-600);\r\n font-weight: var(--vtx-font-weight-medium);\r\n}\r\n\r\n.vtx-richtext-success {\r\n color: var(--vtx-color-success-600);\r\n font-weight: var(--vtx-font-weight-medium);\r\n}\r\n\r\n/* Character counter */\r\n.vtx-richtext-counter {\r\n font-family: var(--vtx-font-family-mono);\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-500);\r\n margin: 0;\r\n white-space: nowrap;\r\n font-weight: var(--vtx-font-weight-medium);\r\n transition: color var(--vtx-transition-fast);\r\n}\r\n\r\n.vtx-richtext-counter--near-limit {\r\n color: var(--vtx-color-warning-600);\r\n}\r\n\r\n.vtx-richtext-counter--at-limit {\r\n color: var(--vtx-color-error-600);\r\n}\r\n\r\n/* Responsive adjustments */\r\n@media (max-width: 640px) {\r\n .vtx-richtext-footer {\r\n flex-direction: column;\r\n align-items: stretch;\r\n }\r\n\r\n .vtx-richtext-counter {\r\n align-self: flex-end;\r\n }\r\n\r\n .vtx-richtext-toolbar {\r\n gap: var(--vtx-spacing-0_5);\r\n }\r\n\r\n .vtx-richtext-toolbar-button {\r\n min-width: 28px;\r\n height: 28px;\r\n padding: var(--vtx-spacing-0_5);\r\n font-size: var(--vtx-font-size-xs);\r\n }\r\n}\r\n");const Ur=["bold","italic","underline","strikethrough","h1","h2","h3","orderedList","unorderedList","link","alignLeft","alignCenter","alignRight","code","clearFormat","undo","redo"],Gr=i.default.forwardRef(({label:e,helperText:t,error:a,success:o,size:i,fullWidth:l=!0,clearable:d=!1,onClear:s,showCount:c=!1,maxLength:x,wrapperClassName:m="",labelClassName:p="",editorClassName:h="",toolbarClassName:u="",required:g=!1,disabled:b=!1,placeholder:f="Start typing...",value:y,defaultValue:w,onChange:k,minHeight:j=200,id:_,hideToolbar:N=!1,toolbarButtons:z=Ur},C)=>{const{theme:S}=zr(),$=i||S.defaultSize,M=v("richtext"),D=_||M,I=`${D}-helper`,L=`${D}-error`,A=`${D}-success`,R=n.useRef(null),[E,F]=n.useState(!1),[B,O]=n.useState(0),W=Boolean(a),P=Boolean(o)&&!W,H=d&&B>0&&!b,V=[t&&!a&&!o&&I,a&&L,o&&A].filter(Boolean).join(" "),Y=["vtx-richtext-wrapper",!l&&"vtx-richtext-wrapper--inline",m].filter(Boolean).join(" "),q=["vtx-richtext-container",`vtx-richtext-container--${$}`,W&&"vtx-richtext-container--error",P&&"vtx-richtext-container--success",b&&"vtx-richtext-container--disabled",E&&"vtx-richtext-container--focused"].filter(Boolean).join(" "),U=["vtx-richtext-editor",h].filter(Boolean).join(" "),G=["vtx-richtext-toolbar",u].filter(Boolean).join(" ");n.useEffect(()=>{if(R.current&&!R.current.innerHTML){const r=y||w||"";R.current.innerHTML=r,X()}},[]),n.useEffect(()=>{if(void 0!==y&&R.current){R.current.innerHTML!==y&&(R.current.innerHTML=y,X())}},[y]);const X=()=>{if(R.current){const r=R.current.innerText||"";O(r.length)}},K=()=>{if(!R.current)return;const r=R.current.innerHTML,n=R.current.innerText||"";x&&n.length>x||(X(),null==k||k(r,n))},Q=(r,n=void 0)=>{var e;document.execCommand(r,!1,n),null===(e=R.current)||void 0===e||e.focus()},J=(c||x)&&void 0!==x,Z=x&&B>=.9*x,rr=x&&B>=x,nr=r=>({bold:"B",italic:"I",underline:"U",strikethrough:"S",h1:"H1",h2:"H2",h3:"H3",orderedList:"1.",unorderedList:"•",link:"🔗",alignLeft:"⬅",alignCenter:"⬌",alignRight:"➡",code:"<>",clearFormat:"✕",undo:"↶",redo:"↷"}[r]),er=r=>({bold:"Bold",italic:"Italic",underline:"Underline",strikethrough:"Strikethrough",h1:"Heading 1",h2:"Heading 2",h3:"Heading 3",orderedList:"Ordered List",unorderedList:"Unordered List",link:"Insert Link",alignLeft:"Align Left",alignCenter:"Align Center",alignRight:"Align Right",code:"Code Block",clearFormat:"Clear Formatting",undo:"Undo",redo:"Redo"}[r]);return r.jsxs("div",{className:Y,children:[e&&r.jsxs("label",{htmlFor:D,className:`vtx-richtext-label ${p}`.trim(),children:[e,g&&r.jsxs("span",{className:"vtx-richtext-label__required","aria-label":"required",children:[" ","*"]})]}),r.jsxs("div",{className:q,children:[!N&&r.jsxs("div",{className:G,role:"toolbar","aria-label":"Text formatting toolbar",children:[z.map(n=>r.jsx("button",{type:"button",className:"vtx-richtext-toolbar-button",onClick:()=>(r=>{if(!b){switch(r){case"bold":Q("bold");break;case"italic":Q("italic");break;case"underline":Q("underline");break;case"strikethrough":Q("strikeThrough");break;case"h1":Q("formatBlock","<h1>");break;case"h2":Q("formatBlock","<h2>");break;case"h3":Q("formatBlock","<h3>");break;case"orderedList":Q("insertOrderedList");break;case"unorderedList":Q("insertUnorderedList");break;case"link":const r=prompt("Enter URL:");r&&Q("createLink",r);break;case"alignLeft":Q("justifyLeft");break;case"alignCenter":Q("justifyCenter");break;case"alignRight":Q("justifyRight");break;case"code":Q("formatBlock","<pre>");break;case"clearFormat":Q("removeFormat");break;case"undo":Q("undo");break;case"redo":Q("redo")}K()}})(n),disabled:b,title:er(n),"aria-label":er(n),tabIndex:-1,children:nr(n)},n)),H&&r.jsx("button",{type:"button",className:"vtx-richtext-toolbar-clear",onClick:()=>{var r;R.current&&(R.current.innerHTML="",X(),null==k||k("","")),null==s||s(),null===(r=R.current)||void 0===r||r.focus()},disabled:b,title:"Clear all content","aria-label":"Clear all content",tabIndex:-1,children:r.jsx(T,{size:14})})]}),r.jsx("div",{ref:r=>{R.current=r,"function"==typeof C?C(r):C&&(C.current=r)},id:D,className:U,contentEditable:!b,onInput:K,onFocus:()=>F(!0),onBlur:()=>F(!1),role:"textbox","aria-multiline":"true","aria-invalid":W,"aria-describedby":V||void 0,"aria-required":g,"data-placeholder":f,style:{minHeight:`${j}px`},suppressContentEditableWarning:!0})]}),r.jsxs("div",{className:"vtx-richtext-footer",children:[r.jsxs("div",{className:"vtx-richtext-footer-left",children:[t&&!a&&!o&&r.jsx("p",{id:I,className:"vtx-richtext-helper",children:t}),a&&r.jsx("p",{id:L,className:"vtx-richtext-error",role:"alert",children:a}),o&&r.jsx("p",{id:A,className:"vtx-richtext-success",role:"status",children:o})]}),J&&r.jsxs("p",{className:("vtx-richtext-counter "+(rr?"vtx-richtext-counter--at-limit":Z?"vtx-richtext-counter--near-limit":"")).trim(),"aria-live":"polite",children:[B," / ",x]})]})]})});Gr.displayName="RichTextEditor";mr(".vtx-select-wrapper {\r\n display: inline-flex;\r\n flex-direction: column;\r\n gap: var(--vtx-spacing-1);\r\n}\r\n\r\n.vtx-select-wrapper--full-width {\r\n width: 100%;\r\n}\r\n\r\n.vtx-select-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-select-label__required {\r\n color: var(--vtx-color-error-600);\r\n margin-left: var(--vtx-spacing-1);\r\n}\r\n\r\n.vtx-select-container {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n background-color: white;\r\n border: 1px solid var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-radius-md);\r\n transition: all var(--vtx-transition-base);\r\n}\r\n\r\n.vtx-select-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.vtx-select-container--error {\r\n border-color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-select-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-select-container--disabled {\r\n background-color: var(--vtx-color-neutral-100);\r\n cursor: not-allowed;\r\n}\r\n\r\n/* Sizes */\r\n.vtx-select-container--sm {\r\n min-height: 32px;\r\n}\r\n\r\n.vtx-select-container--md {\r\n min-height: 40px;\r\n}\r\n\r\n.vtx-select-container--lg {\r\n min-height: 48px;\r\n}\r\n\r\n.vtx-select {\r\n flex: 1;\r\n width: 100%;\r\n min-width: 0;\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-base);\r\n color: var(--vtx-color-neutral-900);\r\n background: transparent;\r\n border: none;\r\n outline: none;\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\r\n padding-right: var(--vtx-spacing-8);\r\n cursor: pointer;\r\n appearance: none;\r\n}\r\n\r\n.vtx-select:disabled {\r\n cursor: not-allowed;\r\n color: var(--vtx-color-neutral-500);\r\n}\r\n\r\n.vtx-select-container--sm .vtx-select {\r\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\r\n padding-right: var(--vtx-spacing-6);\r\n font-size: var(--vtx-font-size-sm);\r\n}\r\n\r\n.vtx-select-container--lg .vtx-select {\r\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\r\n padding-right: var(--vtx-spacing-10);\r\n font-size: var(--vtx-font-size-lg);\r\n}\r\n\r\n/* Dropdown icon */\r\n.vtx-select-icon {\r\n position: absolute;\r\n right: var(--vtx-spacing-3);\r\n display: inline-flex;\r\n align-items: center;\r\n color: var(--vtx-color-neutral-500);\r\n pointer-events: none;\r\n}\r\n\r\n.vtx-select-container--disabled .vtx-select-icon {\r\n color: var(--vtx-color-neutral-400);\r\n}\r\n\r\n/* Loading Spinner in Icon Area */\r\n.vtx-select-icon-spinner {\r\n color: var(--vtx-select-loader-color, var(--vtx-color-primary-500));\r\n animation: vtx-select-spin var(--vtx-select-loader-speed, 0.8s) linear infinite;\r\n}\r\n\r\n.vtx-select-icon-spinner-track {\r\n opacity: var(--vtx-select-loader-track-opacity, 0.25);\r\n}\r\n\r\n.vtx-select-icon-spinner-path {\r\n opacity: var(--vtx-select-loader-path-opacity, 1);\r\n}\r\n\r\n@keyframes vtx-select-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 and error text */\r\n.vtx-select-helper,\r\n.vtx-select-error {\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 margin: 0;\r\n}\r\n\r\n.vtx-select-helper {\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n.vtx-select-error {\r\n color: var(--vtx-color-error-600);\r\n}\r\n");const Xr=i.default.forwardRef(({label:n,helperText:e,error:t,success:a,size:o,fullWidth:i=!1,options:l,placeholder:d,className:s="",wrapperClassName:c="",id:x,disabled:m=!1,required:p=!1,grouped:h=!1,getOptionLabel:u="label",getOptionValue:g="value",getOptionDisabled:b="disabled",getOptionGroup:f="group",onSelectChange:y,onChange:w,loading:k=!1,...j},_)=>{const{theme:N}=zr(),z=o||N.defaultSize,C=v("select"),S=x||C,$=`${S}-helper`,M=`${S}-error`,T=`${S}-success`,D=(r,n)=>"function"==typeof n?n(r):"object"==typeof r?r[n]:r,I=Boolean(t),L=Boolean(a)&&!I,A=[e&&!t&&!a&&$,t&&M,a&&T].filter(Boolean).join(" "),R=["vtx-select-wrapper",i&&"vtx-select-wrapper--full-width",c].filter(Boolean).join(" "),E=["vtx-select-container",`vtx-select-container--${z}`,I&&"vtx-select-container--error",L&&"vtx-select-container--success",m&&"vtx-select-container--disabled",s].filter(Boolean).join(" ");return r.jsxs("div",{className:R,children:[n&&r.jsxs("label",{htmlFor:S,className:"vtx-select-label",children:[n,p&&r.jsxs("span",{className:"vtx-select-label__required","aria-label":"required",children:[" ","*"]})]}),r.jsxs("div",{className:E,children:[r.jsxs("select",{ref:_,id:S,className:"vtx-select",disabled:m,required:p,"aria-invalid":I,"aria-describedby":A||void 0,onChange:r=>{if(null==w||w(r),y){const n=l.find(n=>String(D(n,g))===r.target.value);y(r.target.value,n)}},...j,children:[d&&r.jsx("option",{value:"",disabled:!0,children:d}),(()=>{if(!h)return l.map((n,e)=>{const t=D(n,g),a=D(n,u),o=D(n,b);return r.jsx("option",{value:t,disabled:o,children:a},t||e)});const n=l.reduce((r,n)=>{const e=D(n,f)||"Other";return r[e]||(r[e]=[]),r[e].push(n),r},{});return Object.entries(n).map(([n,e])=>r.jsx("optgroup",{label:n,children:e.map((n,e)=>{const t=D(n,g),a=D(n,u),o=D(n,b);return r.jsx("option",{value:t,disabled:o,children:a},t||e)})},n))})()]}),r.jsx("span",{className:"vtx-select-icon","aria-hidden":"true",children:k?r.jsxs("svg",{className:"vtx-select-icon-spinner",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[r.jsx("circle",{className:"vtx-select-icon-spinner-track",cx:"8",cy:"8",r:"6",stroke:"currentColor",strokeWidth:"2"}),r.jsx("path",{className:"vtx-select-icon-spinner-path",fill:"currentColor",d:"M8 2C4.686 2 2 4.686 2 8h2c0-2.21 1.79-4 4-4V2z"})]}):r.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:r.jsx("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]}),e&&!t&&!a&&r.jsx("p",{id:$,className:"vtx-select-helper",children:e}),t&&r.jsx("p",{id:M,className:"vtx-select-error",role:"alert",children:t}),a&&r.jsx("p",{id:T,className:"vtx-select-success",role:"status",children:a})]})});Xr.displayName="Select";const Kr=j(Xr);mr(".vtx-textarea-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--vtx-spacing-1);\r\n width: 100%;\r\n}\r\n\r\n.vtx-textarea-wrapper--inline {\r\n display: inline-flex;\r\n width: auto;\r\n}\r\n\r\n.vtx-textarea-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-textarea-label__required {\r\n color: var(--vtx-color-error-600);\r\n margin-left: var(--vtx-spacing-1);\r\n}\r\n\r\n.vtx-textarea-container {\r\n position: relative;\r\n display: flex;\r\n background-color: white;\r\n border: 1px solid var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-radius-md);\r\n transition: all var(--vtx-transition-base);\r\n}\r\n\r\n.vtx-textarea-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.vtx-textarea-container--error {\r\n border-color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-textarea-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-textarea-container--success {\r\n border-color: var(--vtx-color-success-600);\r\n}\r\n\r\n.vtx-textarea-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-textarea-container--disabled {\r\n background-color: var(--vtx-color-neutral-100);\r\n cursor: not-allowed;\r\n}\r\n\r\n/* Sizes */\r\n.vtx-textarea-container--sm .vtx-textarea {\r\n padding: var(--vtx-spacing-1_5) var(--vtx-spacing-2);\r\n font-size: var(--vtx-font-size-sm);\r\n line-height: var(--vtx-line-height-normal);\r\n}\r\n\r\n.vtx-textarea-container--md .vtx-textarea {\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\r\n font-size: var(--vtx-font-size-base);\r\n line-height: var(--vtx-line-height-normal);\r\n}\r\n\r\n.vtx-textarea-container--lg .vtx-textarea {\r\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\r\n font-size: var(--vtx-font-size-lg);\r\n line-height: var(--vtx-line-height-relaxed);\r\n}\r\n\r\n.vtx-textarea {\r\n flex: 1;\r\n width: 100%;\r\n min-width: 0;\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-base);\r\n color: var(--vtx-color-neutral-900);\r\n background: transparent;\r\n border: none;\r\n outline: none;\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\r\n resize: vertical;\r\n line-height: var(--vtx-line-height-normal);\r\n}\r\n\r\n.vtx-textarea--auto-resize {\r\n resize: none;\r\n overflow-y: hidden;\r\n}\r\n\r\n.vtx-textarea::placeholder {\r\n color: var(--vtx-color-neutral-400);\r\n}\r\n\r\n.vtx-textarea:disabled {\r\n cursor: not-allowed;\r\n color: var(--vtx-color-neutral-500);\r\n resize: none;\r\n}\r\n\r\n.vtx-textarea-container--with-clear .vtx-textarea {\r\n padding-right: var(--vtx-spacing-10);\r\n}\r\n\r\n/* Clear button */\r\n.vtx-textarea-clear {\r\n position: absolute;\r\n top: var(--vtx-spacing-2);\r\n right: var(--vtx-spacing-2);\r\n display: inline-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 background-color: var(--vtx-color-neutral-200);\r\n border: none;\r\n border-radius: var(--vtx-radius-full);\r\n color: var(--vtx-color-neutral-600);\r\n cursor: pointer;\r\n transition: all var(--vtx-transition-fast);\r\n opacity: 0.8;\r\n}\r\n\r\n.vtx-textarea-clear:hover {\r\n background-color: var(--vtx-color-neutral-300);\r\n opacity: 1;\r\n}\r\n\r\n.vtx-textarea-clear:focus {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 1px;\r\n}\r\n\r\n.vtx-textarea-clear:active {\r\n transform: scale(0.95);\r\n}\r\n\r\n/* Footer with helper text and counter */\r\n.vtx-textarea-footer {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n gap: var(--vtx-spacing-2);\r\n min-height: 20px;\r\n}\r\n\r\n.vtx-textarea-footer-left {\r\n flex: 1;\r\n}\r\n\r\n/* Helper, error, and success text */\r\n.vtx-textarea-helper,\r\n.vtx-textarea-error,\r\n.vtx-textarea-success {\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 margin: 0;\r\n}\r\n\r\n.vtx-textarea-helper {\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n.vtx-textarea-error {\r\n color: var(--vtx-color-error-600);\r\n font-weight: var(--vtx-font-weight-medium);\r\n}\r\n\r\n.vtx-textarea-success {\r\n color: var(--vtx-color-success-600);\r\n font-weight: var(--vtx-font-weight-medium);\r\n}\r\n\r\n/* Character counter */\r\n.vtx-textarea-counter {\r\n font-family: var(--vtx-font-family-mono);\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-500);\r\n margin: 0;\r\n white-space: nowrap;\r\n font-weight: var(--vtx-font-weight-medium);\r\n transition: color var(--vtx-transition-fast);\r\n}\r\n\r\n.vtx-textarea-counter--near-limit {\r\n color: var(--vtx-color-warning-600);\r\n}\r\n\r\n.vtx-textarea-counter--at-limit {\r\n color: var(--vtx-color-error-600);\r\n}\r\n\r\n/* Responsive adjustments */\r\n@media (max-width: 640px) {\r\n .vtx-textarea-footer {\r\n flex-direction: column;\r\n align-items: stretch;\r\n }\r\n \r\n .vtx-textarea-counter {\r\n align-self: flex-end;\r\n }\r\n}\r\n");const Qr=i.default.forwardRef(({label:n,helperText:e,error:t,success:a,size:o,fullWidth:l=!0,clearable:d=!1,onClear:s,showCount:c=!1,className:x="",wrapperClassName:m="",labelClassName:p="",textareaClassName:h="",id:u,disabled:g=!1,required:b=!1,value:f,maxLength:y,autoResize:w=!1,minRows:k=3,maxRows:j,rows:_,onChange:N,...z},C)=>{const{theme:S}=zr(),$=o||S.defaultSize,M=v("textarea"),D=u||M,I=`${D}-helper`,L=`${D}-error`,A=`${D}-success`,R=i.default.useRef(null),E=Boolean(t),F=Boolean(a)&&!E,B=d&&f&&String(f).length>0&&!g,O=[e&&!t&&!a&&I,t&&L,a&&A].filter(Boolean).join(" "),W=["vtx-textarea-wrapper",!l&&"vtx-textarea-wrapper--inline",m].filter(Boolean).join(" "),P=["vtx-textarea-container",`vtx-textarea-container--${$}`,E&&"vtx-textarea-container--error",F&&"vtx-textarea-container--success",g&&"vtx-textarea-container--disabled",B&&"vtx-textarea-container--with-clear",x].filter(Boolean).join(" "),H=["vtx-textarea",w&&"vtx-textarea--auto-resize",h].filter(Boolean).join(" "),V=f?String(f).length:0,Y=(c||y)&&void 0!==y;i.default.useEffect(()=>{if(w&&R.current){const r=R.current;r.style.height="auto";let n=r.scrollHeight;const e=parseInt(getComputedStyle(r).lineHeight);if(k){const r=e*k;n=Math.max(n,r)}if(j){const r=e*j;n=Math.min(n,r)}r.style.height=`${n}px`}},[f,w,k,j]);const q=w?k:_||k,U=y&&V>=.9*y,G=y&&V>=y;return r.jsxs("div",{className:W,children:[n&&r.jsxs("label",{htmlFor:D,className:`vtx-textarea-label ${p}`.trim(),children:[n,b&&r.jsxs("span",{className:"vtx-textarea-label__required","aria-label":"required",children:[" ","*"]})]}),r.jsxs("div",{className:P,children:[r.jsx("textarea",{ref:r=>{R.current=r,"function"==typeof C?C(r):C&&(C.current=r)},id:D,className:H,disabled:g,required:b,value:f,maxLength:y,rows:q,"aria-invalid":E,"aria-describedby":O||void 0,onChange:r=>{null==N||N(r)},...z}),B&&r.jsx("button",{type:"button",className:"vtx-textarea-clear",onClick:()=>{null==s||s(),R.current&&R.current.focus()},"aria-label":"Clear textarea",tabIndex:-1,children:r.jsx(T,{size:16})})]}),r.jsxs("div",{className:"vtx-textarea-footer",children:[r.jsxs("div",{className:"vtx-textarea-footer-left",children:[e&&!t&&!a&&r.jsx("p",{id:I,className:"vtx-textarea-helper",children:e}),t&&r.jsx("p",{id:L,className:"vtx-textarea-error",role:"alert",children:t}),a&&r.jsx("p",{id:A,className:"vtx-textarea-success",role:"status",children:a})]}),Y&&r.jsxs("p",{className:("vtx-textarea-counter "+(G?"vtx-textarea-counter--at-limit":U?"vtx-textarea-counter--near-limit":"")).trim(),"aria-live":"polite",children:[V," / ",y]})]})]})});Qr.displayName="Textarea";const Jr=j(Qr),Zr=["Su","Mo","Tu","We","Th","Fr","Sa"],rn=["January","February","March","April","May","June","July","August","September","October","November","December"],nn=({value:n,onChange:e,minDate:t,maxDate:a,disabledDates:o=[],currentMonth:l,onMonthChange:d,isDateDisabled:s,rangeValue:c,onRangeChange:x,isRangeMode:v=!1})=>{const m=new Date,[p,h]=i.default.useState(l||n||m);i.default.useEffect(()=>{l&&h(l)},[l]);const u=r=>{const n=new Date(p.getFullYear(),p.getMonth()+r,1);h(n),null==d||d(n)},g=r=>!!(t&&r<t)||(!!(a&&r>a)||!!o.some(n=>b(n,r))),b=(r,n)=>r.getFullYear()===n.getFullYear()&&r.getMonth()===n.getMonth()&&r.getDate()===n.getDate(),f=(()=>{const r=p.getFullYear(),n=p.getMonth(),e=new Date(r,n,1),t=new Date(e);t.setDate(t.getDate()-e.getDay());const a=[],o=new Date(t);o.setDate(o.getDate()+41);const i=new Date(t);for(;i<=o;)a.push(new Date(i)),i.setDate(i.getDate()+1);return a})();return r.jsxs("div",{className:"vtx-datepicker__calendar",children:[r.jsxs("div",{className:"vtx-datepicker__header",children:[r.jsx("button",{className:"vtx-datepicker__nav-button",onClick:()=>u(-1),type:"button","aria-label":"Previous month",children:r.jsx(B,{size:16})}),r.jsxs("div",{className:"vtx-datepicker__month-year",children:[rn[p.getMonth()]," ",p.getFullYear()]}),r.jsx("button",{className:"vtx-datepicker__nav-button",onClick:()=>u(1),type:"button","aria-label":"Next month",children:r.jsx(O,{size:16})})]}),r.jsx("div",{className:"vtx-datepicker__weekdays",children:Zr.map(n=>r.jsx("div",{className:"vtx-datepicker__weekday",children:n},n))}),r.jsx("div",{className:"vtx-datepicker__days",children:f.map((t,a)=>{const o=!!n&&b(t,n),i=b(t,m),l=!(r=>r.getMonth()===p.getMonth()&&r.getFullYear()===p.getFullYear())(t),d=g(t)||(null==s?void 0:s(t))||!1,h=(r=>{if(!v||!c)return!1;const[n,e]=c;return!(!n||!e)&&r>=n&&r<=e})(t),u=(r=>{if(!v||!c)return!1;const[n]=c;return!!n&&b(r,n)})(t),f=(r=>{if(!v||!c)return!1;const[,n]=c;return!!n&&b(r,n)})(t);return r.jsx("button",{className:["vtx-datepicker__day",o&&"vtx-datepicker__day--selected",i&&"vtx-datepicker__day--today",l&&"vtx-datepicker__day--other-month",d&&"vtx-datepicker__day--disabled",h&&"vtx-datepicker__day--in-range",u&&"vtx-datepicker__day--range-start",f&&"vtx-datepicker__day--range-end"].filter(Boolean).join(" "),onClick:()=>(r=>{if(!(null==s?void 0:s(r))&&!g(r))if(v&&x){const[n,e]=c||[null,null];!n||n&&e?x([r,null]):n&&!e&&x(r>=n?[n,r]:[r,n])}else null==e||e(r)})(t),disabled:d,type:"button","aria-label":t.toLocaleDateString(),children:t.getDate()},a)})})]})};mr(".vtx-datepicker {\r\n position: relative;\r\n}\r\n\r\n.vtx-datepicker__input {\r\n cursor: pointer;\r\n}\r\n\r\n.vtx-datepicker__input:read-only {\r\n cursor: pointer;\r\n}\r\n\r\n.vtx-datepicker__input .vtx-icon-calendar {\r\n color: var(--vtx-color-neutral-500);\r\n transition: color var(--vtx-transition-base);\r\n}\r\n\r\n.vtx-datepicker__input:hover .vtx-icon-calendar,\r\n.vtx-datepicker__input:focus-within .vtx-icon-calendar {\r\n color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-datepicker__input .vtx-icon-close {\r\n color: var(--vtx-color-neutral-400);\r\n transition: color var(--vtx-transition-base);\r\n}\r\n\r\n.vtx-datepicker__input .vtx-icon-close:hover {\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n.vtx-datepicker__dropdown {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n z-index: 1000;\r\n margin-top: var(--vtx-spacing-1);\r\n background: white;\r\n border: 1px solid var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-radius-lg);\r\n box-shadow: var(--vtx-shadow-lg);\r\n min-width: 320px;\r\n animation: vtx-datepicker-dropdown-enter 150ms ease-out;\r\n}\r\n\r\n@keyframes vtx-datepicker-dropdown-enter {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-4px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n.vtx-datepicker__calendar {\r\n padding: var(--vtx-spacing-3);\r\n}\r\n\r\n.vtx-datepicker__header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n margin-bottom: var(--vtx-spacing-3);\r\n}\r\n\r\n.vtx-datepicker__nav-button {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 32px;\r\n height: 32px;\r\n border: none;\r\n background: none;\r\n border-radius: var(--vtx-radius-md);\r\n cursor: pointer;\r\n color: var(--vtx-color-neutral-600);\r\n transition: all var(--vtx-transition-base);\r\n}\r\n\r\n.vtx-datepicker__nav-button:hover {\r\n background-color: var(--vtx-color-neutral-100);\r\n color: var(--vtx-color-neutral-900);\r\n}\r\n\r\n.vtx-datepicker__nav-button:focus {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 1px;\r\n}\r\n\r\n.vtx-datepicker__month-year {\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-base);\r\n font-weight: var(--vtx-font-weight-semibold);\r\n color: var(--vtx-color-neutral-900);\r\n}\r\n\r\n.vtx-datepicker__weekdays {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n gap: 1px;\r\n margin-bottom: var(--vtx-spacing-2);\r\n}\r\n\r\n.vtx-datepicker__weekday {\r\n padding: var(--vtx-spacing-2);\r\n text-align: center;\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-font-size-xs);\r\n font-weight: var(--vtx-font-weight-medium);\r\n color: var(--vtx-color-neutral-500);\r\n text-transform: uppercase;\r\n}\r\n\r\n.vtx-datepicker__days {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n gap: 1px;\r\n}\r\n\r\n.vtx-datepicker__day {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 36px;\r\n height: 36px;\r\n border: none;\r\n background: none;\r\n border-radius: var(--vtx-radius-md);\r\n cursor: pointer;\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-700);\r\n transition: all var(--vtx-transition-base);\r\n position: relative;\r\n}\r\n\r\n.vtx-datepicker__day:hover:not(:disabled) {\r\n background-color: var(--vtx-color-primary-50);\r\n color: var(--vtx-color-primary-700);\r\n}\r\n\r\n.vtx-datepicker__day:focus {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 1px;\r\n}\r\n\r\n.vtx-datepicker__day--selected {\r\n background-color: var(--vtx-color-primary-600);\r\n color: white;\r\n}\r\n\r\n.vtx-datepicker__day--selected:hover {\r\n background-color: var(--vtx-color-primary-700);\r\n color: white;\r\n}\r\n\r\n.vtx-datepicker__day--today {\r\n font-weight: var(--vtx-font-weight-semibold);\r\n}\r\n\r\n.vtx-datepicker__day--today:not(.vtx-datepicker__day--selected)::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 2px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 4px;\r\n height: 4px;\r\n border-radius: 50%;\r\n background-color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-datepicker__day--other-month {\r\n color: var(--vtx-color-neutral-300);\r\n}\r\n\r\n.vtx-datepicker__day--disabled {\r\n color: var(--vtx-color-neutral-300);\r\n cursor: not-allowed;\r\n}\r\n\r\n.vtx-datepicker__day--in-range {\r\n background-color: var(--vtx-color-primary-100);\r\n color: var(--vtx-color-primary-700);\r\n}\r\n\r\n.vtx-datepicker__day--range-start,\r\n.vtx-datepicker__day--range-end {\r\n background-color: var(--vtx-color-primary-600);\r\n color: white;\r\n}\r\n\r\n.vtx-datepicker__day--range-start:hover,\r\n.vtx-datepicker__day--range-end:hover {\r\n background-color: var(--vtx-color-primary-700);\r\n}\r\n\r\n.vtx-datepicker__footer {\r\n border-top: 1px solid var(--vtx-color-neutral-200);\r\n padding: var(--vtx-spacing-3);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n\r\n.vtx-datepicker__actions {\r\n display: flex;\r\n gap: var(--vtx-spacing-2);\r\n}\r\n\r\n.vtx-datepicker__today-button {\r\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\r\n font-size: var(--vtx-font-size-sm);\r\n color: var(--vtx-color-primary-600);\r\n border: none;\r\n background: none;\r\n border-radius: var(--vtx-radius-sm);\r\n cursor: pointer;\r\n transition: all var(--vtx-transition-base);\r\n}\r\n\r\n.vtx-datepicker__today-button:hover {\r\n background-color: var(--vtx-color-primary-50);\r\n color: var(--vtx-color-primary-700);\r\n}\r\n\r\n.vtx-datepicker__range-input {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-2);\r\n}\r\n\r\n.vtx-datepicker__range-separator {\r\n color: var(--vtx-color-neutral-400);\r\n font-size: var(--vtx-font-size-sm);\r\n}\r\n\r\n.vtx-datepicker__preset-button {\r\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\r\n margin-bottom: var(--vtx-spacing-1);\r\n width: 100%;\r\n text-align: left;\r\n font-size: var(--vtx-font-size-sm);\r\n color: var(--vtx-color-neutral-700);\r\n border: none;\r\n background: none;\r\n border-radius: var(--vtx-radius-sm);\r\n cursor: pointer;\r\n transition: all var(--vtx-transition-base);\r\n}\r\n\r\n.vtx-datepicker__preset-button:hover {\r\n background-color: var(--vtx-color-neutral-100);\r\n}\r\n\r\n.vtx-datepicker__preset-button--active {\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-datepicker__presets {\r\n border-right: 1px solid var(--vtx-color-neutral-200);\r\n padding: var(--vtx-spacing-3);\r\n min-width: 140px;\r\n}\r\n\r\n.vtx-datepicker__content {\r\n display: flex;\r\n}\r\n\r\n.vtx-datepicker__calendar-container {\r\n flex: 1;\r\n}");const en=(r,n="MM/DD/YYYY")=>{if(!r)return"";const e=(r.getMonth()+1).toString().padStart(2,"0"),t=r.getDate().toString().padStart(2,"0"),a=r.getFullYear().toString();return n.replace("MM",e).replace("DD",t).replace("YYYY",a).replace("M",(r.getMonth()+1).toString()).replace("D",r.getDate().toString()).replace("YY",a.slice(-2))},tn=r=>{if(!r)return null;try{const n=r.split("/");if(3===n.length){const r=parseInt(n[0],10)-1,e=parseInt(n[1],10),t=parseInt(n[2],10),a=new Date(t,r,e);if(a.getMonth()===r&&a.getDate()===e&&a.getFullYear()===t)return a}return null}catch{return null}},an=i.default.forwardRef(({value:e=null,onChange:t,label:a,placeholder:o="Select date",helperText:i,error:l,success:d,size:s,fullWidth:c=!1,disabled:x=!1,required:v=!1,minDate:m,maxDate:p,disabledDates:h,isDateDisabled:u,format:g="MM/DD/YYYY",showToday:b=!0,className:f="",inputClassName:y="",dropdownClassName:w="",clearable:k=!1,...j},_)=>{const[N,z]=n.useState(!1),[C,S]=n.useState(()=>en(e,g)),[$,M]=n.useState(()=>e||new Date),T=n.useRef(null),I=n.useRef(null);n.useEffect(()=>{S(en(e,g)),e&&M(e)},[e,g]),n.useEffect(()=>{const r=r=>{T.current&&!T.current.contains(r.target)&&z(!1)},n=r=>{"Escape"===r.key&&z(!1)};return N&&(document.addEventListener("mousedown",r),document.addEventListener("keydown",n)),()=>{document.removeEventListener("mousedown",r),document.removeEventListener("keydown",n)}},[N]);const L=r=>{null==t||t(r),S(en(r,g)),z(!1)};return r.jsxs("div",{ref:T,className:`vtx-datepicker ${f}`.trim(),children:[r.jsx(Fr,{ref:_,label:a,value:C,onChange:r=>{const n=r.target.value;S(n);const e=tn(n);e&&(null==t||t(e),M(e))},onBlur:()=>{const r=tn(C);r?S(en(r,g)):C&&!r&&S(en(e,g))},onClick:()=>{x||z(!N)},placeholder:o,helperText:i,error:l,success:d,size:s,fullWidth:c,disabled:x,required:v,readOnly:!1,rightIcon:r.jsx(D,{size:16}),className:`vtx-datepicker__input ${y}`.trim(),clearable:k,onClear:()=>{null==t||t(null),S(""),z(!1)},...j}),N&&r.jsxs("div",{ref:I,className:`vtx-datepicker__dropdown ${w}`.trim(),children:[r.jsx(nn,{value:e,onChange:L,currentMonth:$,onMonthChange:M,minDate:m,maxDate:p,disabledDates:h,isDateDisabled:u}),b&&r.jsx("div",{className:"vtx-datepicker__footer",children:r.jsx("button",{type:"button",className:"vtx-datepicker__today-button",onClick:()=>{const r=new Date;L(r)},children:"Today"})})]})]})});an.displayName="DatePicker";const on=j(an),ln=(r,n="MM/DD/YYYY")=>{if(!r)return"";const e=(r.getMonth()+1).toString().padStart(2,"0"),t=r.getDate().toString().padStart(2,"0"),a=r.getFullYear().toString();return n.replace("MM",e).replace("DD",t).replace("YYYY",a).replace("M",(r.getMonth()+1).toString()).replace("D",r.getDate().toString()).replace("YY",a.slice(-2))},dn=(r,n,e)=>{const t=ln(r.start,n),a=ln(r.end,n);return t&&a?`${t} ${e} ${a}`:t||""},sn=()=>{const r=new Date,n=new Date(r);n.setDate(n.getDate()-1);const e=new Date(r);e.setDate(r.getDate()-r.getDay());const t=new Date(e);t.setDate(e.getDate()-7);const a=new Date(e);a.setDate(e.getDate()-1);const o=new Date(r.getFullYear(),r.getMonth(),1),i=new Date(r.getFullYear(),r.getMonth()-1,1),l=new Date(r.getFullYear(),r.getMonth(),0),d=new Date(r);d.setDate(r.getDate()-6);const s=new Date(r);return s.setDate(r.getDate()-29),[{label:"Today",range:{start:new Date(r),end:new Date(r)}},{label:"Yesterday",range:{start:new Date(n),end:new Date(n)}},{label:"Last 7 days",range:{start:new Date(d),end:new Date(r)}},{label:"Last 30 days",range:{start:new Date(s),end:new Date(r)}},{label:"This week",range:{start:new Date(e),end:new Date(r)}},{label:"Last week",range:{start:new Date(t),end:new Date(a)}},{label:"This month",range:{start:new Date(o),end:new Date(r)}},{label:"Last month",range:{start:new Date(i),end:new Date(l)}}]},cn=i.default.forwardRef(({value:e={start:null,end:null},onChange:t,label:a,startPlaceholder:o="Start date",endPlaceholder:i="End date",helperText:l,error:d,success:s,size:c,fullWidth:x=!1,disabled:v=!1,required:m=!1,minDate:p,maxDate:h,disabledDates:u,isDateDisabled:g,format:b="MM/DD/YYYY",separator:f="to",presets:y=sn(),className:w="",inputClassName:k="",dropdownClassName:j="",clearable:_=!1,...N},z)=>{const[C,S]=n.useState(!1),[$,M]=n.useState(()=>dn(e,b,f)),[T,I]=n.useState(()=>e.start||new Date),[L,A]=n.useState(null),R=n.useRef(null),E=n.useRef(null);n.useEffect(()=>{M(dn(e,b,f)),e.start&&I(e.start);const r=y.find(r=>{var n,t,a,o;return(null===(n=r.range.start)||void 0===n?void 0:n.getTime())===(null===(t=e.start)||void 0===t?void 0:t.getTime())&&(null===(a=r.range.end)||void 0===a?void 0:a.getTime())===(null===(o=e.end)||void 0===o?void 0:o.getTime())});A((null==r?void 0:r.label)||null)},[e,b,f,y]),n.useEffect(()=>{const r=r=>{R.current&&!R.current.contains(r.target)&&S(!1)},n=r=>{"Escape"===r.key&&S(!1)};return C&&(document.addEventListener("mousedown",r),document.addEventListener("keydown",n)),()=>{document.removeEventListener("mousedown",r),document.removeEventListener("keydown",n)}},[C]);return r.jsxs("div",{ref:R,className:`vtx-datepicker ${w}`.trim(),children:[r.jsx(Fr,{ref:z,label:a,value:$,onClick:()=>{v||S(!C)},placeholder:`${o} ${f} ${i}`,helperText:l,error:d,success:s,size:c,fullWidth:x,disabled:v,required:m,readOnly:!0,rightIcon:r.jsx(D,{size:16}),className:`vtx-datepicker__input ${k}`.trim(),clearable:_,onClear:()=>{null==t||t({start:null,end:null}),M(""),A(null),S(!1)},...N}),C&&r.jsx("div",{ref:E,className:`vtx-datepicker__dropdown ${j}`.trim(),children:r.jsxs("div",{className:"vtx-datepicker__content",children:[y.length>0&&r.jsx("div",{className:"vtx-datepicker__presets",children:y.map(n=>r.jsx("button",{type:"button",className:["vtx-datepicker__preset-button",L===n.label&&"vtx-datepicker__preset-button--active"].filter(Boolean).join(" "),onClick:()=>(r=>{null==t||t(r.range),A(r.label),S(!1)})(n),children:n.label},n.label))}),r.jsx("div",{className:"vtx-datepicker__calendar-container",children:r.jsx(nn,{rangeValue:[e.start,e.end],onRangeChange:r=>{const[n,e]=r;null==t||t({start:n,end:e}),n&&e&&S(!1)},currentMonth:T,onMonthChange:I,minDate:p,maxDate:h,disabledDates:u,isDateDisabled:g,isRangeMode:!0,onChange:()=>{}})})]})})]})});cn.displayName="DateRangePicker";const xn=j(cn),vn=i.default.forwardRef(({item:e,isOpen:t,onToggle:a,variant:o="default",size:i="md",showChevron:l=!0,chevronPosition:d="right",expandedIcon:s,collapsedIcon:c,iconType:x="chevron",loading:v=!1,disabled:m=!1,disableAnimations:p=!1},h)=>{const u=n.useRef(null),{id:g,header:b,children:f,disabled:y,className:w,loading:k,status:j="default",icon:_,dataTestId:N}=e,z=m||y,C=v||k,S=()=>{z||C||a()},$=()=>_?r.jsx("div",{className:"accordion-item-chevron "+(t?"open":""),"data-testid":`${N||g}-custom-icon`,children:t?_.expanded:_.collapsed}):"custom"===x&&s&&c?r.jsx("div",{className:"accordion-item-chevron "+(t?"open":""),"data-testid":`${N||g}-custom-icon`,children:t?s:c}):"plus-minus"===x?r.jsx("div",{className:"accordion-item-chevron accordion-item-chevron--plus-minus "+(t?"open":""),"data-testid":`${N||g}-plus-minus-icon`,children:t?r.jsx(A,{size:16,"aria-hidden":"true"}):r.jsx(r.Fragment,{children:r.jsx(L,{size:16,"aria-hidden":"true"})})}):r.jsx("div",{className:"accordion-item-chevron "+(t?"open":""),"data-testid":`${N||g}-chevron-icon`,children:r.jsx(I,{size:16,"aria-hidden":"true",style:{transform:t?"rotate(180deg)":void 0,transition:"transform 0.2s"}})});return r.jsxs("div",{ref:h,className:`\n accordion-item\n accordion-item--${o}\n accordion-item--${i}\n ${t?"accordion-item--open":""}\n ${z?"accordion-item--disabled":""}\n ${C?"accordion-item--loading":""}\n ${"default"!==j?`accordion-item--${j}`:""}\n ${w||""}\n `.trim(),"data-testid":N,"aria-expanded":t,"aria-disabled":z,"aria-busy":C,children:[r.jsxs("div",{className:"accordion-item-header",role:"button",tabIndex:z||C?-1:0,"aria-expanded":t,"aria-controls":`accordion-content-${g}`,"aria-disabled":z,"aria-busy":C,"aria-describedby":"default"!==j?`accordion-status-${g}`:void 0,onClick:S,onKeyDown:r=>{"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),S())},"data-testid":`${N||g}-header`,children:["left"===d&&l&&$(),r.jsx("div",{className:"accordion-item-header-content",children:b}),"right"===d&&l&&$()]}),r.jsx("div",{id:`accordion-content-${g}`,className:"accordion-item-content "+(t?"accordion-item-content--open":""),role:"region","aria-labelledby":`accordion-header-${g}`,ref:u,style:{maxHeight:p?t?"none":"0":t?"500px":"0",transition:p?"none":void 0},"data-testid":`${N||g}-content`,children:r.jsxs("div",{className:"accordion-item-body",children:["default"!==j&&r.jsx("div",{id:`accordion-status-${g}`,className:`accordion-status accordion-status--${j}`,"aria-live":"polite",children:r.jsxs("span",{className:"visually-hidden",children:["Status: ",j]})}),f]})})]})});vn.displayName="AccordionItem";mr("/* =============================================================================\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 mn=i.default.forwardRef(({items:e,children:t,allowMultiple:a=!1,defaultOpenItems:o=[],openItems:i,onToggle:l,variant:d="default",size:s="md",className:c="",style:x,showChevron:v=!0,chevronPosition:m="right",expandedIcon:p,collapsedIcon:h,iconType:u="chevron",showDivider:g=!0,collapsible:b=!0,loading:f=!1,disabled:y=!1,spacing:w="default",disableAnimations:k=!1,...j},_)=>{const[N,z]=n.useState(o),C=void 0!==i?i:N,S=void 0!==i,$=e||n.Children.toArray(t).filter(r=>n.isValidElement(r)).map((r,e)=>{if(n.isValidElement(r)&&r.props){const n=r;return{id:n.props.id||`accordion-item-${e}`,header:n.props.header||`Item ${e+1}`,children:n.props.children,disabled:n.props.disabled,className:n.props.className}}return{id:`accordion-item-${e}`,header:`Item ${e+1}`,children:r}}),M=n.useCallback(r=>{let n;n=a?C.includes(r)?C.filter(n=>n!==r):[...C,r]:C.includes(r)?b?[]:C:[r],S||z(n),null==l||l(n)},[a,b,C,S,l]);return r.jsx("div",{ref:_,className:`\n accordion\n accordion--${d}\n accordion--${s}\n ${g?"accordion--divider":""}\n ${"compact"===w?"accordion--compact":""}\n ${"spacious"===w?"accordion--spacious":""}\n ${k?"accordion--no-animation":""}\n ${f?"accordion--loading":""}\n ${y?"accordion--disabled":""}\n ${c}\n `.trim(),style:x,role:"presentation","aria-busy":f,...j,children:$.map(n=>r.jsx(vn,{item:n,isOpen:C.includes(n.id),onToggle:()=>M(n.id),variant:d,size:s,showChevron:v,chevronPosition:m,expandedIcon:p,collapsedIcon:h,iconType:u,loading:f,disabled:y,spacing:w,disableAnimations:k},n.id))})});mn.displayName="Accordion";mr("/* Flex Component */\r\n.vtx-flex {\r\n display: flex;\r\n gap: var(--vtx-flex-gap, 0);\r\n row-gap: var(--vtx-flex-row-gap, var(--vtx-flex-gap, 0));\r\n column-gap: var(--vtx-flex-column-gap, var(--vtx-flex-gap, 0));\r\n}\r\n\r\n/* Full width modifier */\r\n.vtx-flex--full-width {\r\n width: 100%;\r\n}\r\n\r\n/* Inline variant */\r\n.vtx-flex--inline {\r\n display: inline-flex;\r\n}\r\n\r\n/* Direction variants */\r\n.vtx-flex--column {\r\n flex-direction: column;\r\n}\r\n\r\n.vtx-flex--row-reverse {\r\n flex-direction: row-reverse;\r\n}\r\n\r\n.vtx-flex--column-reverse {\r\n flex-direction: column-reverse;\r\n}\r\n\r\n/* Wrap variants */\r\n.vtx-flex--wrap {\r\n flex-wrap: wrap;\r\n}\r\n\r\n.vtx-flex--wrap-reverse {\r\n flex-wrap: wrap-reverse;\r\n}\r\n\r\n/* Justify content variants */\r\n.vtx-flex--justify-start {\r\n justify-content: flex-start;\r\n}\r\n\r\n.vtx-flex--justify-end {\r\n justify-content: flex-end;\r\n}\r\n\r\n.vtx-flex--justify-center {\r\n justify-content: center;\r\n}\r\n\r\n.vtx-flex--justify-between {\r\n justify-content: space-between;\r\n}\r\n\r\n.vtx-flex--justify-around {\r\n justify-content: space-around;\r\n}\r\n\r\n.vtx-flex--justify-evenly {\r\n justify-content: space-evenly;\r\n}\r\n\r\n/* Align items variants */\r\n.vtx-flex--align-start {\r\n align-items: flex-start;\r\n}\r\n\r\n.vtx-flex--align-end {\r\n align-items: flex-end;\r\n}\r\n\r\n.vtx-flex--align-center {\r\n align-items: center;\r\n}\r\n\r\n.vtx-flex--align-baseline {\r\n align-items: baseline;\r\n}\r\n\r\n.vtx-flex--align-stretch {\r\n align-items: stretch;\r\n}\r\n\r\n/* Align content variants (for multi-line) */\r\n.vtx-flex--align-content-start {\r\n align-content: flex-start;\r\n}\r\n\r\n.vtx-flex--align-content-end {\r\n align-content: flex-end;\r\n}\r\n\r\n.vtx-flex--align-content-center {\r\n align-content: center;\r\n}\r\n\r\n.vtx-flex--align-content-between {\r\n align-content: space-between;\r\n}\r\n\r\n.vtx-flex--align-content-around {\r\n align-content: space-around;\r\n}\r\n\r\n.vtx-flex--align-content-stretch {\r\n align-content: stretch;\r\n}\r\n");const pn=i.default.forwardRef(({children:n,direction:e="row",wrap:t="nowrap",justify:a="start",align:o="stretch",alignContent:i,gap:l,rowGap:d,columnGap:s,inline:c=!1,fullWidth:x=!1,grow:v,shrink:m,basis:p,className:h="",as:u="div",style:g,...b},f)=>{const y=u,w=["vtx-flex",c&&"vtx-flex--inline",x&&"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={...g};return void 0!==l&&(k["--vtx-flex-gap"]="number"==typeof l?`${l}px`:l),void 0!==d&&(k["--vtx-flex-row-gap"]="number"==typeof d?`${d}px`:d),void 0!==s&&(k["--vtx-flex-column-gap"]="number"==typeof s?`${s}px`:s),void 0!==v&&(k.flexGrow=v),void 0!==m&&(k.flexShrink=m),void 0!==p&&(k.flexBasis="number"==typeof p?`${p}px`:p),r.jsx(y,{ref:f,className:w,style:k,...b,children:n})});pn.displayName="Flex";const hn=j(pn);mr("/* ===== Text Component Base Styles ===== */\r\n.vtx-text {\r\n margin: 0;\r\n padding: 0;\r\n font-family: var(--vtx-font-family-sans);\r\n color: inherit;\r\n transition: color var(--vtx-transition-fast);\r\n}\r\n\r\n/* ===== Typography Variants ===== */\r\n\r\n/* ===== Headings with Fluid Typography ===== */\r\n.vtx-text--h1 {\r\n font-size: clamp(2.25rem, 5vw + 1rem, 3.75rem);\r\n font-weight: var(--vtx-text-h1-font-weight, 700);\r\n line-height: var(--vtx-text-h1-line-height, 1.2);\r\n letter-spacing: var(--vtx-text-h1-letter-spacing, -0.025em);\r\n margin-bottom: clamp(1rem, 2vw + 0.5rem, 1.5rem);\r\n}\r\n\r\n.vtx-text--h2 {\r\n font-size: clamp(1.875rem, 4vw + 0.75rem, 3rem);\r\n font-weight: var(--vtx-text-h2-font-weight, 700);\r\n line-height: var(--vtx-text-h2-line-height, 1.25);\r\n letter-spacing: var(--vtx-text-h2-letter-spacing, -0.025em);\r\n margin-bottom: clamp(0.875rem, 1.75vw + 0.5rem, 1.25rem);\r\n}\r\n\r\n.vtx-text--h3 {\r\n font-size: clamp(1.5rem, 3vw + 0.5rem, 2.25rem);\r\n font-weight: var(--vtx-text-h3-font-weight, 600);\r\n line-height: var(--vtx-text-h3-line-height, 1.3);\r\n letter-spacing: var(--vtx-text-h3-letter-spacing, -0.025em);\r\n margin-bottom: clamp(0.75rem, 1.5vw + 0.5rem, 1rem);\r\n}\r\n\r\n.vtx-text--h4 {\r\n font-size: clamp(1.25rem, 2.5vw + 0.5rem, 1.875rem);\r\n font-weight: var(--vtx-text-h4-font-weight, 600);\r\n line-height: var(--vtx-text-h4-line-height, 1.35);\r\n letter-spacing: var(--vtx-text-h4-letter-spacing, 0);\r\n margin-bottom: clamp(0.75rem, 1.5vw + 0.25rem, 1rem);\r\n}\r\n\r\n.vtx-text--h5 {\r\n font-size: clamp(1.125rem, 2vw + 0.25rem, 1.5rem);\r\n font-weight: var(--vtx-text-h5-font-weight, 600);\r\n line-height: var(--vtx-text-h5-line-height, 1.4);\r\n letter-spacing: var(--vtx-text-h5-letter-spacing, 0);\r\n margin-bottom: clamp(0.625rem, 1.25vw + 0.25rem, 0.75rem);\r\n}\r\n\r\n.vtx-text--h6 {\r\n font-size: clamp(1rem, 1.5vw + 0.25rem, 1.25rem);\r\n font-weight: var(--vtx-text-h6-font-weight, 600);\r\n line-height: var(--vtx-text-h6-line-height, 1.5);\r\n letter-spacing: var(--vtx-text-h6-letter-spacing, 0);\r\n margin-bottom: clamp(0.625rem, 1.25vw + 0.25rem, 0.75rem);\r\n}\r\n\r\n/* ===== Body Text with Responsive Sizing ===== */\r\n.vtx-text--body1 {\r\n font-size: clamp(0.9375rem, 1vw + 0.125rem, 1rem);\r\n font-weight: var(--vtx-text-body1-font-weight, 400);\r\n line-height: var(--vtx-text-body1-line-height, 1.6);\r\n letter-spacing: var(--vtx-text-body1-letter-spacing, 0);\r\n margin-bottom: clamp(0.625rem, 1vw + 0.25rem, 0.75rem);\r\n}\r\n\r\n.vtx-text--body2 {\r\n font-size: clamp(0.8125rem, 0.85vw + 0.125rem, 0.875rem);\r\n font-weight: var(--vtx-text-body2-font-weight, 400);\r\n line-height: var(--vtx-text-body2-line-height, 1.6);\r\n letter-spacing: var(--vtx-text-body2-letter-spacing, 0.01em);\r\n margin-bottom: clamp(0.625rem, 1vw + 0.25rem, 0.75rem);\r\n}\r\n\r\n/* ===== Subtitles with Responsive Sizing ===== */\r\n.vtx-text--subtitle1 {\r\n font-size: clamp(1rem, 1.25vw + 0.125rem, 1.125rem);\r\n font-weight: var(--vtx-text-subtitle1-font-weight, 500);\r\n line-height: var(--vtx-text-subtitle1-line-height, 1.5);\r\n letter-spacing: var(--vtx-text-subtitle1-letter-spacing, 0.0075em);\r\n margin-bottom: clamp(0.5rem, 0.75vw + 0.125rem, 0.625rem);\r\n}\r\n\r\n.vtx-text--subtitle2 {\r\n font-size: clamp(0.9375rem, 1vw + 0.0625rem, 1rem);\r\n font-weight: var(--vtx-text-subtitle2-font-weight, 500);\r\n line-height: var(--vtx-text-subtitle2-line-height, 1.5);\r\n letter-spacing: var(--vtx-text-subtitle2-letter-spacing, 0.01em);\r\n margin-bottom: clamp(0.5rem, 0.75vw + 0.125rem, 0.625rem);\r\n}\r\n\r\n/* ===== Caption with Responsive Sizing ===== */\r\n.vtx-text--caption {\r\n font-size: clamp(0.6875rem, 0.75vw + 0.0625rem, 0.75rem);\r\n font-weight: var(--vtx-text-caption-font-weight, 400);\r\n line-height: var(--vtx-text-caption-line-height, 1.5);\r\n letter-spacing: var(--vtx-text-caption-letter-spacing, 0.025em);\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n/* ===== Overline with Responsive Sizing ===== */\r\n.vtx-text--overline {\r\n font-size: clamp(0.6875rem, 0.75vw + 0.0625rem, 0.75rem);\r\n font-weight: var(--vtx-text-overline-font-weight, 600);\r\n line-height: var(--vtx-text-overline-line-height, 1.5);\r\n letter-spacing: var(--vtx-text-overline-letter-spacing, 0.1em);\r\n text-transform: uppercase;\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n/* ===== Button Text with Responsive Sizing ===== */\r\n.vtx-text--button {\r\n font-size: clamp(0.8125rem, 0.85vw + 0.125rem, 0.875rem);\r\n font-weight: var(--vtx-text-button-font-weight, 600);\r\n line-height: var(--vtx-text-button-line-height, 1.5);\r\n letter-spacing: var(--vtx-text-button-letter-spacing, 0.025em);\r\n}\r\n\r\n/* ===== Label with Responsive Sizing ===== */\r\n.vtx-text--label {\r\n font-size: clamp(0.8125rem, 0.85vw + 0.125rem, 0.875rem);\r\n font-weight: var(--vtx-text-label-font-weight, 500);\r\n line-height: var(--vtx-text-label-line-height, 1.5);\r\n letter-spacing: var(--vtx-text-label-letter-spacing, 0.0075em);\r\n display: inline-block;\r\n margin-bottom: clamp(0.375rem, 0.5vw + 0.125rem, 0.5rem);\r\n}\r\n\r\n/* ===== Text Alignment ===== */\r\n.vtx-text--align-left {\r\n text-align: left;\r\n}\r\n\r\n.vtx-text--align-center {\r\n text-align: center;\r\n}\r\n\r\n.vtx-text--align-right {\r\n text-align: right;\r\n}\r\n\r\n.vtx-text--align-justify {\r\n text-align: justify;\r\n}\r\n\r\n/* ===== Semantic Colors ===== */\r\n.vtx-text--color-primary {\r\n color: var(--vtx-color-primary-500);\r\n}\r\n\r\n.vtx-text--color-secondary {\r\n color: var(--vtx-color-secondary-500);\r\n}\r\n\r\n.vtx-text--color-success {\r\n color: var(--vtx-color-success-500);\r\n}\r\n\r\n.vtx-text--color-error {\r\n color: var(--vtx-color-error-500);\r\n}\r\n\r\n.vtx-text--color-warning {\r\n color: var(--vtx-color-warning-500);\r\n}\r\n\r\n.vtx-text--color-info {\r\n color: var(--vtx-color-info-500);\r\n}\r\n\r\n.vtx-text--color-inherit {\r\n color: inherit;\r\n}\r\n\r\n/* ===== Font Weights ===== */\r\n.vtx-text--weight-thin {\r\n font-weight: var(--vtx-font-weight-thin, 100);\r\n}\r\n\r\n.vtx-text--weight-extralight {\r\n font-weight: var(--vtx-font-weight-extralight, 200);\r\n}\r\n\r\n.vtx-text--weight-light {\r\n font-weight: var(--vtx-font-weight-light, 300);\r\n}\r\n\r\n.vtx-text--weight-normal {\r\n font-weight: var(--vtx-font-weight-normal, 400);\r\n}\r\n\r\n.vtx-text--weight-medium {\r\n font-weight: var(--vtx-font-weight-medium, 500);\r\n}\r\n\r\n.vtx-text--weight-semibold {\r\n font-weight: var(--vtx-font-weight-semibold, 600);\r\n}\r\n\r\n.vtx-text--weight-bold {\r\n font-weight: var(--vtx-font-weight-bold, 700);\r\n}\r\n\r\n.vtx-text--weight-extrabold {\r\n font-weight: var(--vtx-font-weight-extrabold, 800);\r\n}\r\n\r\n.vtx-text--weight-black {\r\n font-weight: var(--vtx-font-weight-black, 900);\r\n}\r\n\r\n/* ===== Text Transform ===== */\r\n.vtx-text--transform-none {\r\n text-transform: none;\r\n}\r\n\r\n.vtx-text--transform-uppercase {\r\n text-transform: uppercase;\r\n}\r\n\r\n.vtx-text--transform-lowercase {\r\n text-transform: lowercase;\r\n}\r\n\r\n.vtx-text--transform-capitalize {\r\n text-transform: capitalize;\r\n}\r\n\r\n/* ===== Text Decoration ===== */\r\n.vtx-text--decoration-none {\r\n text-decoration: none;\r\n}\r\n\r\n.vtx-text--decoration-underline {\r\n text-decoration: underline;\r\n}\r\n\r\n.vtx-text--decoration-line-through {\r\n text-decoration: line-through;\r\n}\r\n\r\n.vtx-text--decoration-overline {\r\n text-decoration: overline;\r\n}\r\n\r\n/* ===== Text Utilities ===== */\r\n/* Truncation */\r\n.vtx-text--truncate {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n/* Line Clamp */\r\n.vtx-text--line-clamp {\r\n display: -webkit-box;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n/* Break Word */\r\n.vtx-text--break-word {\r\n word-break: break-word;\r\n overflow-wrap: break-word;\r\n}\r\n\r\n/* Italic */\r\n.vtx-text--italic {\r\n font-style: italic;\r\n}\r\n\r\n/* Underline */\r\n.vtx-text--underline {\r\n text-decoration: underline;\r\n}\r\n\r\n/* Strikethrough */\r\n.vtx-text--strikethrough {\r\n text-decoration: line-through;\r\n}\r\n\r\n/* Gradient Text */\r\n.vtx-text--gradient {\r\n background-clip: text;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-size: 100%;\r\n}\r\n\r\n/* No Select */\r\n.vtx-text--no-select {\r\n user-select: none;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n}\r\n\r\n/* ===== Dark Theme Support ===== */\r\n[data-theme='dark'] .vtx-text--caption,\r\n[data-theme='dark'] .vtx-text--overline {\r\n color: var(--vtx-color-neutral-400);\r\n}\r\n\r\n/* ===== Responsive Breakpoint Adjustments ===== */\r\n\r\n/* Small Mobile: < 480px */\r\n@media (max-width: 479px) {\r\n .vtx-text--h1 {\r\n font-size: clamp(1.875rem, 8vw, 2.5rem);\r\n line-height: 1.15;\r\n margin-bottom: 0.875rem;\r\n }\r\n\r\n .vtx-text--h2 {\r\n font-size: clamp(1.625rem, 7vw, 2.125rem);\r\n line-height: 1.2;\r\n margin-bottom: 0.75rem;\r\n }\r\n\r\n .vtx-text--h3 {\r\n font-size: clamp(1.375rem, 6vw, 1.75rem);\r\n line-height: 1.25;\r\n margin-bottom: 0.625rem;\r\n }\r\n\r\n .vtx-text--h4,\r\n .vtx-text--h5,\r\n .vtx-text--h6 {\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .vtx-text--body1,\r\n .vtx-text--body2 {\r\n line-height: 1.65;\r\n }\r\n}\r\n\r\n/* Mobile: 480px - 767px */\r\n@media (min-width: 480px) and (max-width: 767px) {\r\n .vtx-text--h1 {\r\n line-height: 1.15;\r\n }\r\n\r\n .vtx-text--h2 {\r\n line-height: 1.2;\r\n }\r\n\r\n .vtx-text--body1,\r\n .vtx-text--body2 {\r\n line-height: 1.65;\r\n }\r\n}\r\n/* Enhancements ===== */\r\n.vtx-text:focus-visible {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 2px;\r\n border-radius: var(--vtx-radius-sm);\r\n}\r\n\r\n/* Reduced motion support */\r\n@media (prefers-reduced-motion: reduce) {\r\n .vtx-text {\r\n transition: none;\r\n animation: none;\r\n }\r\n}\r\n\r\n/* High contrast mode */\r\n@media (prefers-contrast: high) {\r\n .vtx-text {\r\n font-weight: 500;\r\n }\r\n\r\n .vtx-text--h1,\r\n .vtx-text--h2,\r\n .vtx-text--h3,\r\n .vtx-text--h4,\r\n .vtx-text--h5,\r\n .vtx-text--h6 {\r\n font-weight: 700;\r\n }\r\n\r\n .vtx-text--caption,\r\n .vtx-text--overline {\r\n opacity: 1;\r\n }\r\n}\r\n\r\n/* ===== Container Query Support (Modern Browsers) ===== */\r\n@supports (container-type: inline-size) {\r\n @container (max-width: 600px) {\r\n .vtx-text--h1 {\r\n font-size: clamp(1.875rem, 6vw, 2.5rem);\r\n }\r\n\r\n .vtx-text--h2 {\r\n font-size: clamp(1.625rem, 5vw, 2.125rem);\r\n }\r\n\r\n .vtx-text--h3 {\r\n font-size: clamp(1.375rem, 4vw, 1.75rem);\r\n }\r\n }\r\n}\r\n\r\n/* ===== Touch Device Optimizations ===== */\r\n@media (hover: none) and (pointer: coarse) {\r\n .vtx-text--body1,\r\n .vtx-text--body2 {\r\n line-height: 1.65;\r\n font-size: clamp(0.9375rem, 1.1vw + 0.125rem, 1.0625rem);\r\n }\r\n\r\n .vtx-text--button,\r\n .vtx-text--label {\r\n font-size: clamp(0.875rem, 1vw + 0.125rem, 0.9375rem);\r\n line-height: 1.6;\r\n }\r\n}\r\n\r\n/* ===== Very Small Screens (<= 320px) ===== */\r\n@media (max-width: 320px) {\r\n .vtx-text--h1 {\r\n font-size: 1.75rem;\r\n line-height: 1.1;\r\n }\r\n\r\n .vtx-text--h2 {\r\n font-size: 1.5rem;\r\n line-height: 1.15;\r\n }\r\n\r\n .vtx-text--h3 {\r\n font-size: 1.25rem;\r\n line-height: 1.2;\r\n }\r\n\r\n .vtx-text--h4 {\r\n font-size: 1.125rem;\r\n }\r\n\r\n .vtx-text--h5,\r\n .vtx-text--h6 {\r\n font-size: 1rem\r\n };\r\n}\r\n\r\n/* Desktop: 1024px - 1439px */\r\n@media (min-width: 1024px) and (max-width: 1439px) {\r\n .vtx-text--h1 {\r\n line-height: 1.2;\r\n }\r\n}\r\n\r\n/* Large Desktop: >= 1440px */\r\n@media (min-width: 1440px) {\r\n .vtx-text--h1 {\r\n letter-spacing: -0.03em;\r\n }\r\n\r\n .vtx-text--h2 {\r\n letter-spacing: -0.03em;\r\n }\r\n\r\n .vtx-text--h3 {\r\n letter-spacing: -0.03em;\r\n }\r\n}\r\n\r\n/* ===== Landscape Mode Adjustments ===== */\r\n@media (max-width: 1023px) and (orientation: landscape) {\r\n .vtx-text--h1,\r\n .vtx-text--h2,\r\n .vtx-text--h3 {\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .vtx-text--body1,\r\n .vtx-text--body2 {\r\n margin-bottom: 0.5rem;\r\n }\r\n}\r\n\r\n/* ===== High Resolution Displays ===== */\r\n@media (min-resolution: 2dppx) {\r\n .vtx-text {\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n text-rendering: optimizeLegibility;\r\n }\r\n}\r\n\r\n/* ===== Print Styles ===== */\r\n@media print {\r\n .vtx-text {\r\n color: #000;\r\n }\r\n\r\n .vtx-text--gradient {\r\n -webkit-text-fill-color: initial;\r\n background-clip: initial;\r\n -webkit-background-clip: initial;\r\n }\r\n}\r\n\r\n/* ===== Utility Classes ===== */\r\n.vtx-text--no-margin {\r\n margin: 0 !important;\r\n}\r\n\r\n.vtx-text--no-padding {\r\n padding: 0 !important;\r\n}\r\n\r\n/* ===== Accessibility ===== */\r\n.vtx-text:focus-visible {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 2px;\r\n border-radius: var(--vtx-radius-sm);\r\n}\r\n\r\n/* Reduced motion support */\r\n@media (prefers-reduced-motion: reduce) {\r\n .vtx-text {\r\n transition: none;\r\n }\r\n}\r\n");const un=l.forwardRef(({variant:r="body1",as:n,align:e,color:t,textColor:a,weight:o,transform:i,decoration:d,truncate:s=!1,lineClamp:c,breakWord:x=!1,italic:v=!1,underline:m=!1,strikethrough:p=!1,gradient:h,noSelect:u=!1,size:g,lineHeight:b,letterSpacing:f,noMargin:y=!1,noPadding:w=!1,className:k="",style:j,children:_,...N},z)=>{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}`,t&&"inherit"!==t&&`vtx-text--color-${t}`,i&&`vtx-text--transform-${i}`,d&&`vtx-text--decoration-${d}`,s&&"vtx-text--truncate",c&&"vtx-text--line-clamp",x&&"vtx-text--break-word",v&&"vtx-text--italic",m&&"vtx-text--underline",p&&"vtx-text--strikethrough",h&&"vtx-text--gradient",u&&"vtx-text--no-select",y&&"vtx-text--no-margin",w&&"vtx-text--no-padding",k].filter(Boolean).join(" "),$={...j};if(a&&($.color=a),o&&"number"==typeof o&&($.fontWeight=o),c&&($.WebkitLineClamp=c),h&&h.length>0){const r=1===h.length?h[0]:`linear-gradient(135deg, ${h.join(", ")})`;$.backgroundImage=r}return g&&($.fontSize="number"==typeof g?`${g}px`:g),b&&($.lineHeight="number"==typeof b?`${b}`:b),f&&($.letterSpacing="number"==typeof f?`${f}px`:f),l.createElement(C,{ref:z,className:S,style:$,...N},_)});un.displayName="Text";const gn=j(un);mr("/* Menu Component Styles */\r\n\r\n.vtx-menu-container {\r\n position: relative;\r\n}\r\n\r\n/* Menu Toggle (Hamburger) */\r\n.vtx-menu-toggle {\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n width: 40px;\r\n height: 40px;\r\n padding: var(--vtx-spacing-2);\r\n background: transparent;\r\n border: none;\r\n border-radius: var(--vtx-radius-md);\r\n color: var(--vtx-text-primary);\r\n cursor: pointer;\r\n transition: all var(--vtx-transition-normal);\r\n}\r\n\r\n.vtx-menu-toggle:hover {\r\n background: var(--vtx-background-hover);\r\n}\r\n\r\n.vtx-menu-toggle:active {\r\n background: var(--vtx-background-active);\r\n}\r\n\r\n.vtx-menu-toggle:focus-visible {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 2px;\r\n}\r\n\r\n/* Menu Container */\r\n.vtx-menu {\r\n display: flex;\r\n flex-direction: column;\r\n background: var(--vtx-background-primary);\r\n border-radius: var(--vtx-radius-lg);\r\n box-shadow: var(--vtx-shadow-sm);\r\n overflow: hidden;\r\n}\r\n\r\n/* Vertical Menu (Default) */\r\n.vtx-menu--vertical {\r\n flex-direction: column;\r\n min-width: 200px;\r\n padding: var(--vtx-spacing-2);\r\n gap: var(--vtx-spacing-1);\r\n}\r\n\r\n/* Horizontal Menu */\r\n.vtx-menu--horizontal {\r\n flex-direction: row;\r\n padding: var(--vtx-spacing-2);\r\n gap: var(--vtx-spacing-1);\r\n box-shadow: none;\r\n border-radius: 0;\r\n}\r\n\r\n/* Menu Item - Professional Sidebar Style */\r\n.vtx-menu-item {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-3);\r\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\r\n margin-bottom: var(--vtx-spacing-1);\r\n border-radius: var(--vtx-radius-md);\r\n color: var(--vtx-color-neutral-700);\r\n background: transparent;\r\n cursor: pointer;\r\n transition: all 0.15s ease-in-out;\r\n user-select: none;\r\n font-size: var(--vtx-font-size-sm);\r\n font-weight: var(--vtx-font-weight-medium);\r\n border-left: 3px solid transparent;\r\n}\r\n\r\n.vtx-menu-item:hover:not(.vtx-menu-item--disabled):not(.vtx-menu-item--active) {\r\n background-color: var(--vtx-color-primary-50);\r\n color: var(--vtx-color-primary-600);\r\n font-weight: 600;\r\n border-left-color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-menu-item:hover:not(.vtx-menu-item--disabled):not(.vtx-menu-item--active) .vtx-menu-item-icon {\r\n color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-menu-item:active:not(.vtx-menu-item--disabled):not(.vtx-menu-item--active) {\r\n background: var(--vtx-color-neutral-200);\r\n transform: scale(0.98);\r\n}\r\n\r\n.vtx-menu-item:focus-visible {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 2px;\r\n}\r\n\r\n/* Active Menu Item - Professional Style */\r\n.vtx-menu-item--active {\r\n background-color: var(--vtx-color-primary-50);\r\n color: var(--vtx-color-primary-600);\r\n font-weight: 600;\r\n border-left-color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-menu-item--active .vtx-menu-item-icon {\r\n color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-menu-item--active:hover {\r\n background-color: var(--vtx-color-primary-100);\r\n color: var(--vtx-color-primary-600);\r\n font-weight: 600;\r\n border-left-color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-menu-item--active:hover .vtx-menu-item-icon {\r\n color: var(--vtx-color-primary-600);\r\n}\r\n\r\n/* Disabled Menu Item */\r\n.vtx-menu-item--disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n}\r\n\r\n/* Danger Variant */\r\n.vtx-menu-item--danger {\r\n color: var(--vtx-color-danger-600);\r\n}\r\n\r\n.vtx-menu-item--danger:hover:not(.vtx-menu-item--disabled) {\r\n background: var(--vtx-color-danger-50);\r\n}\r\n\r\n.vtx-menu-item--danger:active:not(.vtx-menu-item--disabled) {\r\n background: var(--vtx-color-danger-100);\r\n}\r\n\r\n/* Menu Item Icon */\r\n.vtx-menu-item-icon,\r\n.vtx-menu-item-right-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 20px;\r\n height: 20px;\r\n flex-shrink: 0;\r\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-menu-item-icon svg,\r\n.vtx-menu-item-right-icon svg {\r\n width: 100%;\r\n height: 100%;\r\n transition: inherit;\r\n}\r\n\r\n.vtx-menu-item-icon {\r\n color: var(--vtx-color-neutral-600);\r\n transition: color 0.15s ease-in-out;\r\n}\r\n\r\n.vtx-menu-item:hover .vtx-menu-item-icon {\r\n color: var(--vtx-color-primary-600);\r\n}\r\n\r\n/* Shortcut */\r\n.vtx-menu-item-shortcut {\r\n opacity: 0.6;\r\n font-size: var(--vtx-font-size-xs);\r\n white-space: nowrap;\r\n}\r\n\r\n/* Menu Divider */\r\n.vtx-menu-divider {\r\n height: 1px;\r\n margin: var(--vtx-spacing-2) 0;\r\n background: var(--vtx-border-color);\r\n}\r\n\r\n.vtx-menu--horizontal .vtx-menu-divider {\r\n width: 1px;\r\n height: auto;\r\n margin: 0 var(--vtx-spacing-2);\r\n}\r\n\r\n/* Submenu Styles - Inline Expansion for Sidebar */\r\n.vtx-menu-item--has-submenu {\r\n position: relative;\r\n}\r\n\r\n.vtx-submenu {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0;\r\n padding-left: var(--vtx-spacing-5);\r\n margin-top: var(--vtx-spacing-2);\r\n margin-bottom: var(--vtx-spacing-2);\r\n animation: slideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1);\r\n overflow: hidden;\r\n}\r\n\r\n.vtx-submenu .vtx-menu-item {\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-4);\r\n padding-left: var(--vtx-spacing-6);\r\n font-size: var(--vtx-font-size-sm);\r\n font-weight: var(--vtx-font-weight-normal);\r\n margin-bottom: var(--vtx-spacing-1);\r\n}\r\n\r\n.vtx-submenu .vtx-menu-item:hover:not(.vtx-menu-item--disabled):not(.vtx-menu-item--active) {\r\n background-color: var(--vtx-color-primary-50);\r\n color: var(--vtx-color-primary-600);\r\n font-weight: 600;\r\n border-left-color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-submenu .vtx-menu-item--active {\r\n background-color: var(--vtx-color-primary-50);\r\n color: var(--vtx-color-primary-600);\r\n font-weight: 600;\r\n border-left-color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-submenu .vtx-menu-item--active:hover {\r\n background-color: var(--vtx-color-primary-100);\r\n color: var(--vtx-color-primary-600);\r\n font-weight: 600;\r\n border-left-color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-submenu .vtx-menu-item--active .vtx-menu-item-icon {\r\n color: var(--vtx-color-primary-600);\r\n}\r\n\r\n/* Nested submenu - additional indentation */\r\n.vtx-submenu .vtx-submenu {\r\n padding-left: var(--vtx-spacing-4);\r\n}\r\n\r\n/* Submenu Animation */\r\n@keyframes slideDown {\r\n from {\r\n opacity: 0;\r\n max-height: 0;\r\n transform: translateY(-4px);\r\n }\r\n to {\r\n opacity: 1;\r\n max-height: 1000px;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n/* Responsive Styles */\r\n@media (max-width: 768px) {\r\n .vtx-menu--responsive .vtx-menu-toggle {\r\n display: flex;\r\n }\r\n\r\n .vtx-menu--responsive.vtx-menu {\r\n position: absolute;\r\n top: 48px;\r\n left: 0;\r\n right: 0;\r\n z-index: 1000;\r\n display: none;\r\n min-width: 100%;\r\n max-height: calc(100vh - 64px);\r\n overflow-y: auto;\r\n box-shadow: var(--vtx-shadow-lg);\r\n animation: slideDown 0.2s ease-out;\r\n }\r\n\r\n .vtx-menu--responsive.vtx-menu--mobile-open {\r\n display: flex;\r\n }\r\n\r\n /* Force vertical layout on mobile */\r\n .vtx-menu--responsive.vtx-menu--horizontal {\r\n flex-direction: column;\r\n padding: var(--vtx-spacing-2);\r\n gap: var(--vtx-spacing-1);\r\n border-radius: var(--vtx-radius-lg);\r\n }\r\n\r\n .vtx-menu--responsive.vtx-menu--horizontal .vtx-menu-divider {\r\n width: auto;\r\n height: 1px;\r\n margin: var(--vtx-spacing-2) 0;\r\n }\r\n}\r\n\r\n/* Slide Down Animation */\r\n@keyframes slideDown {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-8px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n/* Dark Mode - Professional Style */\r\n[data-theme='dark'] .vtx-menu {\r\n background: var(--vtx-background-primary);\r\n box-shadow: var(--vtx-shadow-lg);\r\n}\r\n\r\n[data-theme='dark'] .vtx-menu-item:hover:not(.vtx-menu-item--disabled):not(.vtx-menu-item--active) {\r\n background-color: var(--vtx-color-primary-900);\r\n color: var(--vtx-color-primary-400);\r\n font-weight: 600;\r\n border-left-color: var(--vtx-color-primary-400);\r\n}\r\n\r\n[data-theme='dark']\r\n .vtx-menu-item:hover:not(.vtx-menu-item--disabled):not(.vtx-menu-item--active)\r\n .vtx-menu-item-icon {\r\n color: var(--vtx-color-primary-300);\r\n}\r\n\r\n[data-theme='dark'] .vtx-menu-item--active {\r\n background-color: var(--vtx-color-primary-900);\r\n color: var(--vtx-color-primary-400);\r\n font-weight: 600;\r\n border-left-color: var(--vtx-color-primary-400);\r\n}\r\n\r\n[data-theme='dark'] .vtx-menu-item--active .vtx-menu-item-icon {\r\n color: var(--vtx-color-primary-400);\r\n}\r\n\r\n[data-theme='dark'] .vtx-menu-item--active:hover {\r\n background-color: var(--vtx-color-primary-800);\r\n color: var(--vtx-color-primary-400);\r\n font-weight: 600;\r\n border-left-color: var(--vtx-color-primary-400);\r\n}\r\n\r\n[data-theme='dark'] .vtx-menu-item--active:hover .vtx-menu-item-icon {\r\n color: var(--vtx-color-primary-400);\r\n}\r\n\r\n[data-theme='dark'] .vtx-menu-item--danger {\r\n color: var(--vtx-color-danger-400);\r\n}\r\n\r\n[data-theme='dark'] .vtx-menu-item--danger:hover:not(.vtx-menu-item--disabled) {\r\n background: rgba(var(--vtx-color-danger-rgb), 0.15);\r\n}\r\n\r\n[data-theme='dark']\r\n .vtx-submenu\r\n .vtx-menu-item:hover:not(.vtx-menu-item--disabled):not(.vtx-menu-item--active) {\r\n background-color: var(--vtx-color-primary-900);\r\n color: var(--vtx-color-primary-400);\r\n font-weight: 600;\r\n border-left-color: var(--vtx-color-primary-400);\r\n}\r\n\r\n[data-theme='dark'] .vtx-submenu .vtx-menu-item--active {\r\n background-color: var(--vtx-color-primary-900);\r\n color: var(--vtx-color-primary-400);\r\n font-weight: 600;\r\n border-left-color: var(--vtx-color-primary-400);\r\n}\r\n\r\n[data-theme='dark'] .vtx-submenu .vtx-menu-item--active:hover {\r\n background-color: var(--vtx-color-primary-800);\r\n color: var(--vtx-color-primary-400);\r\n font-weight: 600;\r\n border-left-color: var(--vtx-color-primary-400);\r\n}\r\n\r\n[data-theme='dark'] .vtx-submenu .vtx-menu-item--active .vtx-menu-item-icon {\r\n color: var(--vtx-color-primary-400);\r\n}\r\n\r\n/* Reduced Motion */\r\n@media (prefers-reduced-motion: reduce) {\r\n .vtx-menu-item,\r\n .vtx-menu-toggle {\r\n transition: none;\r\n }\r\n\r\n .vtx-submenu {\r\n animation: none;\r\n }\r\n\r\n @keyframes slideDown {\r\n from,\r\n to {\r\n opacity: 1;\r\n max-height: 1000px;\r\n transform: translateY(0);\r\n }\r\n }\r\n}\r\n");const bn=({isOpen:n})=>n?r.jsx(F,{size:16}):r.jsx(I,{size:16}),fn=i.default.forwardRef(({label:e,onClick:t,icon:a,rightIcon:o,disabled:i=!1,active:l=!1,variant:d="default",shortcut:s,divider:c=!1,items:x},v)=>{const[m,p]=n.useState(!1),h=n.useRef(null),u=x&&x.length>0,g=o||(u?r.jsx(bn,{isOpen:m}):null);return r.jsxs(r.Fragment,{children:[r.jsx("div",{ref:v||h,className:["vtx-menu-item",l&&"vtx-menu-item--active",i&&"vtx-menu-item--disabled","default"!==d&&`vtx-menu-item--${d}`,u&&"vtx-menu-item--has-submenu",m&&"vtx-menu-item--submenu-open"].filter(Boolean).join(" "),onClick:()=>{i||(u?p(!m):t&&t())},onKeyDown:r=>{i||("Enter"===r.key||" "===r.key?(r.preventDefault(),u?p(!m):null==t||t()):"ArrowDown"===r.key&&u&&!m?(r.preventDefault(),p(!0)):"ArrowUp"===r.key&&u&&m&&(r.preventDefault(),p(!1)))},role:"menuitem",tabIndex:i?-1:0,"aria-disabled":i,"aria-haspopup":u?"menu":void 0,"aria-expanded":u?m:void 0,children:r.jsxs(hn,{align:"center",gap:8,style:{flex:1},children:[a&&r.jsx("span",{className:"vtx-menu-item-icon",children:a}),r.jsx(gn,{variant:"body2",noMargin:!0,style:{flex:1},children:e}),s&&r.jsx(gn,{variant:"caption",textColor:"var(--color-neutral-500)",noMargin:!0,className:"vtx-menu-item-shortcut",children:s}),g&&r.jsx("span",{className:"vtx-menu-item-right-icon",children:g})]})}),u&&m&&r.jsx("div",{className:"vtx-submenu",role:"menu",children:x.map((n,e)=>r.jsx(fn,{...n},e))}),c&&r.jsx("div",{className:"vtx-menu-divider",role:"separator"})]})});fn.displayName="MenuItem";const yn=i.default.forwardRef(({items:e,children:t,orientation:a="vertical",responsive:o=!0,className:i="",width:l},d)=>{const[s,c]=n.useState(!1),x=n.useRef(null);n.useEffect(()=>{if(!o||!s)return;const r=r=>{x.current&&!x.current.contains(r.target)&&c(!1)};return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[o,s]),n.useEffect(()=>{if(!o||!s)return;const r=r=>{"Escape"===r.key&&c(!1)};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[o,s]);const v=e?e.map((n,e)=>r.jsx(fn,{...n},e)):t,m=["vtx-menu",`vtx-menu--${a}`,o&&"vtx-menu--responsive",s&&"vtx-menu--mobile-open",i].filter(Boolean).join(" "),p={width:"vertical"===a&&l?"number"==typeof l?`${l}px`:l:void 0};return r.jsxs("div",{ref:x,className:"vtx-menu-container",children:[o&&r.jsx("button",{className:"vtx-menu-toggle",onClick:()=>c(!s),"aria-label":"Toggle menu","aria-expanded":s,children:s?r.jsx(er,{size:24}):r.jsx(E,{size:24})}),r.jsx("div",{ref:d,className:m,role:"menu",style:p,children:v})]})});yn.displayName="Menu";const wn=j(yn);mr("/* ActionMenu Component Styles */\r\n\r\n.vtx-action-menu-container {\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.vtx-action-menu-trigger-wrapper {\r\n display: inline-block;\r\n}\r\n\r\n/* Trigger Button */\r\n.vtx-action-menu-trigger {\r\n display: inline-flex;\r\n align-items: center;\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\r\n background: var(--vtx-background-primary);\r\n border: 1px solid var(--vtx-color-neutral-300);\r\n border-radius: var(--vtx-radius-md);\r\n color: var(--vtx-text-primary);\r\n cursor: pointer;\r\n transition: all var(--vtx-transition-normal);\r\n font-size: var(--vtx-font-size-sm);\r\n font-weight: var(--vtx-font-weight-medium);\r\n user-select: none;\r\n}\r\n\r\n.vtx-action-menu-trigger:hover {\r\n background: var(--vtx-background-hover);\r\n border-color: var(--vtx-color-neutral-400);\r\n}\r\n\r\n.vtx-action-menu-trigger:active {\r\n background: var(--vtx-background-active);\r\n}\r\n\r\n.vtx-action-menu-trigger:focus-visible {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 2px;\r\n}\r\n\r\n.vtx-action-menu-trigger--open {\r\n background: var(--vtx-background-active);\r\n border-color: var(--vtx-color-primary-500);\r\n box-shadow: 0 0 0 1px var(--vtx-color-primary-500);\r\n}\r\n\r\n.vtx-action-menu-trigger--disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\n.vtx-action-menu-trigger-icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--vtx-text-secondary);\r\n}\r\n\r\n/* Dropdown Menu */\r\n.vtx-action-menu {\r\n position: absolute;\r\n z-index: 1000;\r\n min-width: 200px;\r\n margin-top: var(--vtx-spacing-1);\r\n padding: var(--vtx-spacing-2);\r\n background: var(--vtx-background-primary);\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-lg);\r\n animation: slideDown 0.15s ease-out;\r\n}\r\n\r\n/* Position variants */\r\n.vtx-action-menu--bottom-start {\r\n top: 100%;\r\n left: 0;\r\n}\r\n\r\n.vtx-action-menu--bottom-end {\r\n top: 100%;\r\n right: 0;\r\n}\r\n\r\n.vtx-action-menu--top-start {\r\n bottom: 100%;\r\n left: 0;\r\n margin-top: 0;\r\n margin-bottom: var(--vtx-spacing-1);\r\n animation: slideUp 0.15s ease-out;\r\n}\r\n\r\n.vtx-action-menu--top-end {\r\n bottom: 100%;\r\n right: 0;\r\n margin-top: 0;\r\n margin-bottom: var(--vtx-spacing-1);\r\n animation: slideUp 0.15s ease-out;\r\n}\r\n\r\n/* Animations */\r\n@keyframes slideDown {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-8px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n@keyframes slideUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(8px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n/* Dark Mode */\r\n[data-theme='dark'] .vtx-action-menu-trigger {\r\n background: var(--vtx-color-neutral-800);\r\n border-color: var(--vtx-color-neutral-600);\r\n color: var(--vtx-color-neutral-100);\r\n}\r\n\r\n[data-theme='dark'] .vtx-action-menu-trigger:hover {\r\n background: var(--vtx-color-neutral-700);\r\n border-color: var(--vtx-color-neutral-500);\r\n}\r\n\r\n[data-theme='dark'] .vtx-action-menu-trigger:active {\r\n background: var(--vtx-color-neutral-600);\r\n}\r\n\r\n[data-theme='dark'] .vtx-action-menu-trigger--open {\r\n background: var(--vtx-color-neutral-700);\r\n border-color: var(--vtx-color-primary-400);\r\n box-shadow: 0 0 0 1px var(--vtx-color-primary-400);\r\n}\r\n\r\n[data-theme='dark'] .vtx-action-menu {\r\n background: var(--vtx-color-neutral-800);\r\n border-color: var(--vtx-color-neutral-700);\r\n}\r\n\r\n/* Reduced Motion */\r\n@media (prefers-reduced-motion: reduce) {\r\n .vtx-action-menu {\r\n animation: none;\r\n }\r\n}\r\n");const kn=({isOpen:n})=>n?r.jsx(F,{size:16}):r.jsx(I,{size:16}),jn=i.default.forwardRef(({items:e,trigger:t,triggerLabel:a="Actions",triggerIcon:o,position:l="bottom-start",className:d="",triggerClassName:s="",disabled:c=!1,onOpen:x,onClose:v},m)=>{const[p,h]=n.useState(!1),u=n.useRef(null),g=n.useRef(null),b=()=>{if(c)return;const r=!p;h(r),r&&x?x():!r&&v&&v()};n.useEffect(()=>{if(!p)return;const r=r=>{u.current&&!u.current.contains(r.target)&&(h(!1),null==v||v())};return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[p,v]),n.useEffect(()=>{if(!p)return;const r=r=>{"Escape"===r.key&&(h(!1),null==v||v())};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[p,v]);const f=e.map(r=>({...r,onClick:r.onClick?()=>{var n;null===(n=r.onClick)||void 0===n||n.call(r),h(!1),null==v||v()}:void 0})),y=`vtx-action-menu--${l}`,w="function"==typeof t?t({isOpen:p,toggle:b,disabled:c}):t||r.jsxs(hn,{align:"center",gap:8,children:[o&&r.jsx("span",{className:"vtx-action-menu-trigger-icon",children:o}),r.jsx(gn,{variant:"body2",noMargin:!0,children:a}),r.jsx(kn,{isOpen:p})]}),k="function"==typeof t||i.default.isValidElement(t);return r.jsxs("div",{ref:u,className:"vtx-action-menu-container",children:[k?r.jsx("div",{className:"vtx-action-menu-trigger-wrapper",children:"function"==typeof t?w:r.jsx("div",{onClick:b,children:w})}):r.jsx("div",{className:["vtx-action-menu-trigger",c&&"vtx-action-menu-trigger--disabled",p&&"vtx-action-menu-trigger--open",s].filter(Boolean).join(" "),onClick:b,onKeyDown:r=>{"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),b())},role:"button",tabIndex:c?-1:0,"aria-haspopup":"menu","aria-expanded":p,"aria-disabled":c,children:w}),p&&r.jsx("div",{ref:m||g,className:["vtx-action-menu",y,d].filter(Boolean).join(" "),role:"menu",children:f.map((n,e)=>r.jsx(fn,{...n},e))})]})});jn.displayName="ActionMenu";const _n=j(jn);mr("/* 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 Nn={success:r.jsx(W,{size:20}),error:r.jsx(P,{size:20}),warning:r.jsx(H,{size:20}),info:r.jsx(V,{size:20}),neutral:r.jsx(Y,{size:20})},zn=i.default.forwardRef(({children:e,title:t,description:a,variant:o="info",alertStyle:i="subtle",size:l,icon:d,dismissible:s=!1,onClose:c,action:x,fullWidth:v=!1,className:m="",style:p,role:h="alert",...u},g)=>{const{theme:b}=zr(),f=l||(null==b?void 0:b.defaultSize)||"md",[y,w]=n.useState(!0);if(!y)return null;const k=!1!==d,j=void 0===d?Nn[o]:d,_=e||a;return r.jsxs("div",{ref:g,className:`\n alert\n alert--${o}\n alert--${i}\n alert--${f}\n ${v?"alert--full-width":""}\n ${m}\n `.trim(),style:p,role:h,...u,children:[k&&r.jsx("div",{className:"alert-icon",children:j}),r.jsxs("div",{className:"alert-content",children:[t&&r.jsx("div",{className:"alert-title",children:t}),_&&r.jsx("div",{className:"alert-message",children:null!=e?e:a})]}),x&&r.jsx("div",{className:"alert-action",children:x}),s&&r.jsx("button",{type:"button",className:"alert-close",onClick:()=>{w(!1),null==c||c()},"aria-label":"Close alert",children:r.jsx(er,{size:16})})]})});zn.displayName="Alert";const Cn=j(zn);mr("/* ===== 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 Sn=i.default.forwardRef(({isOpen:t,onClose:a,title:o,description:i,children:l,header:x,footer:v,footerButtons:m,size:p,closeOnBackdropClick:h=!0,closeOnEscape:u=!0,showCloseButton:g=!0,transparentBackdrop:b=!1,className:f="",backdropClassName:y="",preventScroll:w=!0,animation:k="fade",onAfterOpen:j,onAfterClose:_,scrollable:N=!1,centered:z=!0},C)=>{const S=n.useRef(null),$=n.useRef(null),{theme:M}=zr();let T="md";if(p?T=p:(null==M?void 0:M.defaultSize)&&(T=M.defaultSize),d(S,t),c(w&&t),s(()=>{u&&t&&a()}),n.useEffect(()=>{t?($.current=document.activeElement,null==j||j()):$.current&&($.current.focus(),null==_||_())},[t,j,_]),!t)return null;const D=["vtx-modal-backdrop",b&&"vtx-modal-backdrop--transparent",z&&"vtx-modal-backdrop--centered",`vtx-modal-backdrop--${k}`,y].filter(Boolean).join(" "),I=["vtx-modal",`vtx-modal--${T}`,N&&"vtx-modal--scrollable",`vtx-modal--${k}`,f].filter(Boolean).join(" "),L=r.jsx("div",{className:D,onClick:r=>{h&&r.target===r.currentTarget&&a()},role:"presentation",children:r.jsxs("div",{ref:r=>{S.current=r,"function"==typeof C?C(r):C&&(C.current=r)},className:I,role:"dialog","aria-modal":"true","aria-labelledby":o?"vtx-modal-title":void 0,"aria-describedby":i?"vtx-modal-description":void 0,children:[x?r.jsx("div",{className:"vtx-modal-header",children:x}):o||g?r.jsxs(hn,{className:"vtx-modal-header",justify:"between",align:"center",gap:8,children:[o&&r.jsxs(hn,{direction:"column",gap:4,className:"vtx-modal-header-content",children:[r.jsx(gn,{as:"h2",variant:"h6",weight:"semibold",id:"vtx-modal-title",noMargin:!0,children:o}),i&&r.jsx(gn,{variant:"body2",textColor:"var(--color-neutral-600)",id:"vtx-modal-description",noMargin:!0,children:i})]}),g&&r.jsx(Mr,{variant:"ghost",iconOnly:!0,size:"sm",className:"vtx-modal-close",onClick:a,"aria-label":"Close modal",children:r.jsx(er,{size:20})})]}):null,r.jsx(hn,{direction:"column",className:"vtx-modal-body",children:l}),(v||m)&&r.jsx(hn,{className:"vtx-modal-footer",justify:"end",align:"center",gap:8,children:m?m.map((n,e)=>r.jsx(Mr,{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)):v})]})});return e.createPortal(L,document.body)});Sn.displayName="Modal";const $n=j(Sn);mr(".vtx-tooltip {\r\n position: fixed;\r\n z-index: var(--vtx-z-tooltip);\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\r\n background-color: var(--vtx-color-neutral-900);\r\n color: white;\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 border-radius: var(--vtx-radius-md);\r\n max-width: 300px;\r\n word-wrap: break-word;\r\n pointer-events: auto;\r\n box-shadow: var(--vtx-shadow-lg);\r\n opacity: 0;\r\n transition:\r\n opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),\r\n transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\r\n will-change: transform, opacity;\r\n}\r\n\r\n.vtx-tooltip--visible {\r\n opacity: 1;\r\n}\r\n\r\n/* Inner wrapper for content and close button */\r\n.vtx-tooltip-inner {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: var(--vtx-spacing-2);\r\n}\r\n\r\n.vtx-tooltip-content {\r\n flex: 1;\r\n min-width: 0;\r\n}\r\n\r\n/* Close button */\r\n.vtx-tooltip-close {\r\n flex-shrink: 0;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 20px;\r\n height: 20px;\r\n padding: 0;\r\n background: transparent;\r\n border: none;\r\n color: currentColor;\r\n cursor: pointer;\r\n border-radius: var(--vtx-radius-sm);\r\n transition: all var(--vtx-transition-base);\r\n opacity: 0.7;\r\n margin-top: -2px;\r\n}\r\n\r\n.vtx-tooltip-close:hover {\r\n opacity: 1;\r\n background: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.vtx-tooltip-close:active {\r\n transform: scale(0.95);\r\n}\r\n\r\n.vtx-tooltip-close:focus-visible {\r\n outline: 2px solid currentColor;\r\n outline-offset: 2px;\r\n opacity: 1;\r\n}\r\n\r\n/* Placement-specific transforms with entry animations */\r\n.vtx-tooltip--top {\r\n transform: translate(-50%, calc(-100% - 4px)) scale(0.9);\r\n transform-origin: bottom center;\r\n}\r\n\r\n.vtx-tooltip--top.vtx-tooltip--visible {\r\n transform: translate(-50%, -100%) scale(1);\r\n}\r\n\r\n.vtx-tooltip--bottom {\r\n transform: translate(-50%, 4px) scale(0.9);\r\n transform-origin: top center;\r\n}\r\n\r\n.vtx-tooltip--bottom.vtx-tooltip--visible {\r\n transform: translate(-50%, 0) scale(1);\r\n}\r\n\r\n.vtx-tooltip--left {\r\n transform: translate(calc(-100% - 4px), -50%) scale(0.9);\r\n transform-origin: right center;\r\n}\r\n\r\n.vtx-tooltip--left.vtx-tooltip--visible {\r\n transform: translate(-100%, -50%) scale(1);\r\n}\r\n\r\n.vtx-tooltip--right {\r\n transform: translate(4px, -50%) scale(0.9);\r\n transform-origin: left center;\r\n}\r\n\r\n.vtx-tooltip--right.vtx-tooltip--visible {\r\n transform: translate(0, -50%) scale(1);\r\n}\r\n\r\n/* Placement-start and placement-end variants */\r\n.vtx-tooltip--top-start {\r\n transform: translate(0, calc(-100% - 4px)) scale(0.9);\r\n transform-origin: bottom left;\r\n}\r\n\r\n.vtx-tooltip--top-start.vtx-tooltip--visible {\r\n transform: translate(0, -100%) scale(1);\r\n}\r\n\r\n.vtx-tooltip--top-end {\r\n transform: translate(-100%, calc(-100% - 4px)) scale(0.9);\r\n transform-origin: bottom right;\r\n}\r\n\r\n.vtx-tooltip--top-end.vtx-tooltip--visible {\r\n transform: translate(-100%, -100%) scale(1);\r\n}\r\n\r\n.vtx-tooltip--bottom-start {\r\n transform: translate(0, 4px) scale(0.9);\r\n transform-origin: top left;\r\n}\r\n\r\n.vtx-tooltip--bottom-start.vtx-tooltip--visible {\r\n transform: translate(0, 0) scale(1);\r\n}\r\n\r\n.vtx-tooltip--bottom-end {\r\n transform: translate(-100%, 4px) scale(0.9);\r\n transform-origin: top right;\r\n}\r\n\r\n.vtx-tooltip--bottom-end.vtx-tooltip--visible {\r\n transform: translate(-100%, 0) scale(1);\r\n}\r\n\r\n.vtx-tooltip--left-start {\r\n transform: translate(calc(-100% - 4px), 0) scale(0.9);\r\n transform-origin: right top;\r\n}\r\n\r\n.vtx-tooltip--left-start.vtx-tooltip--visible {\r\n transform: translate(-100%, 0) scale(1);\r\n}\r\n\r\n.vtx-tooltip--left-end {\r\n transform: translate(calc(-100% - 4px), -100%) scale(0.9);\r\n transform-origin: right bottom;\r\n}\r\n\r\n.vtx-tooltip--left-end.vtx-tooltip--visible {\r\n transform: translate(-100%, -100%) scale(1);\r\n}\r\n\r\n.vtx-tooltip--right-start {\r\n transform: translate(4px, 0) scale(0.9);\r\n transform-origin: left top;\r\n}\r\n\r\n.vtx-tooltip--right-start.vtx-tooltip--visible {\r\n transform: translate(0, 0) scale(1);\r\n}\r\n\r\n.vtx-tooltip--right-end {\r\n transform: translate(4px, -100%) scale(0.9);\r\n transform-origin: left bottom;\r\n}\r\n\r\n.vtx-tooltip--right-end.vtx-tooltip--visible {\r\n transform: translate(0, -100%) scale(1);\r\n}\r\n\r\n/* Variants */\r\n.vtx-tooltip--dark {\r\n background-color: var(--vtx-color-neutral-900);\r\n color: white;\r\n}\r\n\r\n.vtx-tooltip--light {\r\n background-color: white;\r\n color: var(--vtx-color-neutral-900);\r\n border: 1px solid var(--vtx-color-neutral-200);\r\n}\r\n\r\n.vtx-tooltip--light .vtx-tooltip-close:hover {\r\n background: var(--vtx-color-neutral-100);\r\n}\r\n\r\n.vtx-tooltip--error {\r\n background-color: var(--vtx-color-error-600);\r\n color: white;\r\n}\r\n\r\n.vtx-tooltip--warning {\r\n background-color: var(--vtx-color-warning-500);\r\n color: var(--vtx-color-neutral-900);\r\n}\r\n\r\n.vtx-tooltip--success {\r\n background-color: var(--vtx-color-success-600);\r\n color: white;\r\n}\r\n\r\n.vtx-tooltip--info {\r\n background-color: var(--vtx-color-info-600);\r\n color: white;\r\n}\r\n\r\n/* Arrow */\r\n.vtx-tooltip--with-arrow .vtx-tooltip-arrow {\r\n position: absolute;\r\n width: 8px;\r\n height: 8px;\r\n background-color: inherit;\r\n transform: rotate(45deg);\r\n border: inherit;\r\n}\r\n\r\n.vtx-tooltip--top .vtx-tooltip-arrow {\r\n bottom: -4px;\r\n left: 50%;\r\n margin-left: -4px;\r\n}\r\n\r\n.vtx-tooltip--bottom .vtx-tooltip-arrow {\r\n top: -4px;\r\n left: 50%;\r\n margin-left: -4px;\r\n}\r\n\r\n.vtx-tooltip--left .vtx-tooltip-arrow {\r\n right: -4px;\r\n top: 50%;\r\n margin-top: -4px;\r\n}\r\n\r\n.vtx-tooltip--right .vtx-tooltip-arrow {\r\n left: -4px;\r\n top: 50%;\r\n margin-top: -4px;\r\n}\r\n");const Mn=i.default.forwardRef(({content:t,placement:a="top",delay:o=200,hideDelay:i=0,children:l,open:d,disabled:s=!1,arrow:c=!1,maxWidth:x="300px",variant:v="dark",dismissible:m=!1,onShow:p,onHide:h,onDismiss:u,className:g="",...b},f)=>{const[y,w]=n.useState(d||!1),[k,j]=n.useState(!1),[_,N]=n.useState({top:0,left:0}),z=n.useRef(null),C=n.useRef(null),S=n.useRef(null),$=n.useRef(null),M=n.useRef(!1),D=()=>{s||(M.current=!0,S.current&&clearTimeout(S.current),$.current&&clearTimeout($.current),C.current=setTimeout(()=>{if(z.current&&M.current){const r=z.current.getBoundingClientRect(),n=L(r,a);N(n),j(!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{w(!0),null==p||p()})})}},o))},I=()=>{M.current=!1,C.current&&clearTimeout(C.current),S.current=setTimeout(()=>{M.current||(w(!1),null==h||h(),$.current=setTimeout(()=>{j(!1)},150))},i)},L=(r,n)=>{const e=c?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}};n.useEffect(()=>{void 0!==d&&(d?(j(!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{w(!0)})})):(w(!1),$.current=setTimeout(()=>{j(!1)},150)))},[d]),n.useEffect(()=>()=>{C.current&&clearTimeout(C.current),S.current&&clearTimeout(S.current),$.current&&clearTimeout($.current)},[]);const A=["vtx-tooltip",`vtx-tooltip--${a}`,`vtx-tooltip--${v}`,c&&"vtx-tooltip--with-arrow",y&&"vtx-tooltip--visible",g].filter(Boolean).join(" "),R=void 0!==d&&d||k,E=n.cloneElement(l,{ref:r=>{z.current=r;const n=l.ref;"function"==typeof n?n(r):n&&"object"==typeof n&&"current"in n&&(n.current=r)},onMouseEnter:r=>{var n,e;void 0===d&&D(),null===(e=(n=l.props).onMouseEnter)||void 0===e||e.call(n,r)},onMouseLeave:r=>{var n,e;void 0===d&&I(),null===(e=(n=l.props).onMouseLeave)||void 0===e||e.call(n,r)},onFocus:r=>{var n,e;void 0===d&&D(),null===(e=(n=l.props).onFocus)||void 0===e||e.call(n,r)},onBlur:r=>{var n,e;void 0===d&&I(),null===(e=(n=l.props).onBlur)||void 0===e||e.call(n,r)},"aria-describedby":y?"vtx-tooltip-content":void 0});return r.jsxs(r.Fragment,{children:[E,R&&e.createPortal(r.jsxs("div",{ref:f,id:"vtx-tooltip-content",role:"tooltip",className:A,style:{top:`${_.top}px`,left:`${_.left}px`,maxWidth:x},onMouseEnter:()=>{s||void 0!==d||(M.current=!0,S.current&&clearTimeout(S.current))},onMouseLeave:()=>{s||void 0!==d||I()},...b,children:[c&&r.jsx("span",{className:"vtx-tooltip-arrow","aria-hidden":"true"}),r.jsxs("div",{className:"vtx-tooltip-inner",children:[r.jsx("span",{className:"vtx-tooltip-content",children:t}),m&&r.jsx("button",{type:"button",className:"vtx-tooltip-close",onClick:()=>{M.current=!1,w(!1),null==u||u(),null==h||h(),$.current=setTimeout(()=>{j(!1)},150)},"aria-label":"Dismiss tooltip",children:r.jsx(T,{size:14})})]})]}),document.body)]})});Mn.displayName="Tooltip";const Tn=({data:n,grid:e,renderItem:t,className:a=""})=>{const o=i.default.useMemo(()=>{if(e&&!e.auto)return{mobile:e.mobile||1,tablet:e.tablet||2,desktop:e.desktop||3,spacing:e.spacing||"md",align:e.align||"stretch"};const r=(t=n.length)<=1?{mobile:1,tablet:1,desktop:1}:2===t?{mobile:1,tablet:2,desktop:2}:3===t?{mobile:1,tablet:2,desktop:3}:4===t?{mobile:1,tablet:2,desktop:4}:t<=6?{mobile:2,tablet:3,desktop:3}:t<=8?{mobile:2,tablet:3,desktop:4}:{mobile:2,tablet:4,desktop:6};var t;return{mobile:(null==e?void 0:e.mobile)||r.mobile,tablet:(null==e?void 0:e.tablet)||r.tablet,desktop:(null==e?void 0:e.desktop)||r.desktop,spacing:(null==e?void 0:e.spacing)||"md",align:(null==e?void 0:e.align)||"stretch"}},[n.length,e]),l=(d=o.mobile,s=o.tablet,c=o.desktop,["vtx-widget-grid",(x=o.spacing)?`gap-${x}`:"gap-md",`mobile-cols-${d}`,`tablet-cols-${s}`,`desktop-cols-${c}`].join(" "));var d,s,c,x;return r.jsx("div",{className:`${l} ${a}`.trim(),style:{alignItems:"stretch"===o.align?"stretch":o.align},children:n.map((n,e)=>r.jsx("div",{className:"vtx-widget-grid-item",children:t(n,e)},(null==n?void 0:n.id)||e))})};mr(".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 Dn=i.default.forwardRef(({children:n,variant:e="elevated",size:t,noPadding:a=!1,padding:o,hoverable:i=!1,clickable:l=!1,className:d="",header:s,footer:c,divider:x=!1,style:v,onClick:m,tabIndex:p,...h},u)=>{const{theme:g}=zr(),b=["vtx-card",`vtx-card--${e}`,`vtx-card--${t||(null==g?void 0:g.defaultSize)||"md"}`,i?"vtx-card--hoverable":"",l?"vtx-card--clickable":"",a&&!o?"vtx-card--no-padding":"",d].filter(Boolean).join(" "),f={...v||{},...o?{"--vtx-card-padding":o}:{}},y=l?"number"==typeof p?p:0:p;return r.jsxs("div",{ref:u,className:b,style:f,onClick:m,tabIndex:y,...h,children:[s&&r.jsx("div",{className:"vtx-card-header"+(x?" vtx-card-header--divider":""),children:s}),r.jsx("div",{className:"vtx-card-content",children:n}),c&&r.jsx("div",{className:"vtx-card-footer"+(x?" vtx-card-footer--divider":""),children:c})]})});Dn.displayName="Card";const In=j(Dn);mr(".vtx-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-1);\r\n font-family: var(--vtx-font-family-sans);\r\n font-weight: var(--vtx-font-weight-medium);\r\n line-height: 1;\r\n white-space: nowrap;\r\n border-radius: var(--vtx-radius-base);\r\n transition: all var(--vtx-transition-base);\r\n}\r\n\r\n/* Sizes */\r\n.vtx-badge--sm {\r\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\r\n font-size: var(--vtx-font-size-xs);\r\n}\r\n\r\n.vtx-badge--md {\r\n padding: calc(var(--vtx-spacing-1) + 1px) var(--vtx-spacing-2);\r\n font-size: var(--vtx-font-size-sm);\r\n}\r\n\r\n.vtx-badge--lg {\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\r\n font-size: var(--vtx-font-size-base);\r\n}\r\n\r\n/* Variants */\r\n.vtx-badge--neutral {\r\n background-color: var(--vtx-color-neutral-100);\r\n color: var(--vtx-color-neutral-800);\r\n}\r\n\r\n.vtx-badge--primary {\r\n background-color: var(--vtx-color-primary-100);\r\n color: var(--vtx-color-primary-800);\r\n}\r\n\r\n.vtx-badge--success {\r\n background-color: var(--vtx-color-success-50);\r\n color: var(--vtx-color-success-700);\r\n}\r\n\r\n.vtx-badge--warning {\r\n background-color: var(--vtx-color-warning-50);\r\n color: var(--vtx-color-warning-700);\r\n}\r\n\r\n.vtx-badge--error {\r\n background-color: var(--vtx-color-error-50);\r\n color: var(--vtx-color-error-700);\r\n}\r\n\r\n.vtx-badge--info {\r\n background-color: var(--vtx-color-info-50);\r\n color: var(--vtx-color-info-700);\r\n}\r\n\r\n/* Pill shape */\r\n.vtx-badge--pill {\r\n border-radius: var(--vtx-radius-full);\r\n}\r\n\r\n/* Dot indicator */\r\n.vtx-badge-dot {\r\n width: 6px;\r\n height: 6px;\r\n border-radius: var(--vtx-radius-full);\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-badge--neutral .vtx-badge-dot {\r\n background-color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n.vtx-badge--primary .vtx-badge-dot {\r\n background-color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-badge--success .vtx-badge-dot {\r\n background-color: var(--vtx-color-success-600);\r\n}\r\n\r\n.vtx-badge--warning .vtx-badge-dot {\r\n background-color: var(--vtx-color-warning-600);\r\n}\r\n\r\n.vtx-badge--error .vtx-badge-dot {\r\n background-color: var(--vtx-color-error-600);\r\n}\r\n\r\n.vtx-badge--info .vtx-badge-dot {\r\n background-color: var(--vtx-color-info-600);\r\n}\r\n");const Ln=i.default.forwardRef(({variant:e="neutral",size:t,pill:a=!1,dot:o=!1,outline:i=!1,maxLength:l,icon:d,children:s,className:c="",onRemove:x,...v},m)=>{const{theme:p}=zr(),h=["vtx-badge",`vtx-badge--${e}`,`vtx-badge--${t||p.defaultSize}`,a&&"vtx-badge--pill",o&&"vtx-badge--with-dot",i&&"vtx-badge--outline",x&&"vtx-badge--removable",c].filter(Boolean).join(" "),u=n.useMemo(()=>l&&"string"==typeof s&&s.length>l?`${s.slice(0,l)}...`:s,[s,l]);return r.jsxs("span",{ref:m,className:h,...v,children:[o&&r.jsx("span",{className:"vtx-badge-dot","aria-hidden":"true"}),d&&r.jsx("span",{className:"vtx-badge-icon","aria-hidden":"true",children:d}),r.jsx("span",{className:"vtx-badge-content",children:u}),x&&r.jsx("button",{type:"button",className:"vtx-badge-remove",onClick:x,"aria-label":"Remove badge",children:r.jsx(T,{})})]})});Ln.displayName="Badge";const An=j(Ln),Rn=({data:n,settings:e,theme:t,variant:a,size:o,className:i,style:l})=>{const d=(null==e?void 0:e.theme)||t||"modern",s=(null==e?void 0:e.variant)||a||"primary",c=(null==e?void 0:e.size)||o||"md",x=(null==e?void 0:e.className)||i||"",v=(null==e?void 0:e.style)||l,m=!1!==(null==e?void 0:e.showTrend),p=()=>{if(!n.trend||!m)return null;const{direction:e,value:t,label:a}=n.trend,o="up"===e,i="down"===e,l=o?"success":i?"error":"neutral",d=o||i?dr:A;return r.jsxs(hn,{align:"center",gap:"xs",children:[r.jsx(d,{size:12}),r.jsxs(gn,{variant:"caption",className:`text-${l}`,children:[Math.abs(t),"%",a&&` ${a}`]})]})};return r.jsx(In,{variant:"elevated",className:["vtx-metric-widget",`vtx-metric-widget--${d}`,`vtx-metric-widget--${c}`,`vtx-metric-widget--${s}`,x].filter(Boolean).join(" "),style:v,padding:"minimal"===d?"lg":"compact"===d?"md":"lg",children:(()=>{switch(d){case"minimal":return r.jsxs(hn,{direction:"column",align:"center",gap:"xs",children:[r.jsx(gn,{variant:"lg"===c?"h2":"sm"===c?"h5":"h3",className:"font-bold",children:n.value}),n.label&&r.jsx(gn,{variant:"caption",className:"text-neutral-500",children:n.label}),p()]});case"modern":return r.jsxs(hn,{direction:"column",gap:"sm",children:[r.jsxs(hn,{justify:"between",align:"start",children:[r.jsxs("div",{children:[n.label&&r.jsx(gn,{variant:"caption",className:"text-neutral-500 mb-1",children:n.label}),r.jsx(gn,{variant:"lg"===c?"h2":"sm"===c?"h5":"h3",className:"font-bold",children:n.value})]}),n.icon&&r.jsx("div",{className:`metric-icon metric-icon--${s} metric-icon--${c}`,children:n.icon})]}),(n.trend||n.badge)&&r.jsxs(hn,{justify:"between",align:"center",children:[p(),n.badge&&r.jsx(An,{variant:(e=n.badge.variant,("error"===e?"error":"secondary"===e?"neutral":e)||"neutral"),children:n.badge.text})]})]});case"compact":return r.jsxs(hn,{align:"center",gap:"md",children:[n.icon&&r.jsx("div",{className:`metric-icon metric-icon--${s} metric-icon--${c}`,children:n.icon}),r.jsxs(hn,{direction:"column",gap:"xs",children:[r.jsx(gn,{variant:"lg"===c?"h3":"sm"===c?"h6":"h4",className:"font-bold",children:n.value}),n.label&&r.jsx(gn,{variant:"caption",className:"text-neutral-500",children:n.label}),p()]})]});default:return r.jsxs(hn,{direction:"column",gap:"sm",children:[r.jsx(gn,{variant:"lg"===c?"h2":"sm"===c?"h5":"h3",className:"font-bold",children:n.value}),n.label&&r.jsx(gn,{variant:"caption",className:"text-neutral-500",children:n.label}),p()]})}var e})()})};mr(".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");mr("/* Grid Base Styles */\r\n.vtx-grid {\r\n box-sizing: border-box;\r\n}\r\n\r\n/* Container Styles */\r\n.vtx-grid-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n width: 100%;\r\n box-sizing: border-box;\r\n}\r\n\r\n/* Item Styles */\r\n.vtx-grid-item {\r\n margin: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\n/* Direction */\r\n.vtx-grid-direction-row {\r\n flex-direction: row;\r\n}\r\n\r\n.vtx-grid-direction-row-reverse {\r\n flex-direction: row-reverse;\r\n}\r\n\r\n.vtx-grid-direction-column {\r\n flex-direction: column;\r\n}\r\n\r\n.vtx-grid-direction-column-reverse {\r\n flex-direction: column-reverse;\r\n}\r\n\r\n/* Wrap */\r\n.vtx-grid-wrap-nowrap {\r\n flex-wrap: nowrap;\r\n}\r\n\r\n.vtx-grid-wrap-wrap {\r\n flex-wrap: wrap;\r\n}\r\n\r\n.vtx-grid-wrap-wrap-reverse {\r\n flex-wrap: wrap-reverse;\r\n}\r\n\r\n/* Spacing - Container */\r\n.vtx-grid-spacing-0 {\r\n margin: 0;\r\n}\r\n\r\n.vtx-grid-spacing-0 > .vtx-grid-item {\r\n padding: 0;\r\n}\r\n\r\n.vtx-grid-spacing-1 {\r\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -0.5);\r\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 1);\r\n}\r\n\r\n.vtx-grid-spacing-1 > .vtx-grid-item {\r\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 0.5);\r\n}\r\n\r\n.vtx-grid-spacing-2 {\r\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -1);\r\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 2);\r\n}\r\n\r\n.vtx-grid-spacing-2 > .vtx-grid-item {\r\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 1);\r\n}\r\n\r\n.vtx-grid-spacing-3 {\r\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -1.5);\r\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 3);\r\n}\r\n\r\n.vtx-grid-spacing-3 > .vtx-grid-item {\r\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 1.5);\r\n}\r\n\r\n.vtx-grid-spacing-4 {\r\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -2);\r\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 4);\r\n}\r\n\r\n.vtx-grid-spacing-4 > .vtx-grid-item {\r\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 2);\r\n}\r\n\r\n.vtx-grid-spacing-5 {\r\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -2.5);\r\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 5);\r\n}\r\n\r\n.vtx-grid-spacing-5 > .vtx-grid-item {\r\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 2.5);\r\n}\r\n\r\n.vtx-grid-spacing-6 {\r\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -3);\r\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 6);\r\n}\r\n\r\n.vtx-grid-spacing-6 > .vtx-grid-item {\r\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 3);\r\n}\r\n\r\n.vtx-grid-spacing-7 {\r\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -3.5);\r\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 7);\r\n}\r\n\r\n.vtx-grid-spacing-7 > .vtx-grid-item {\r\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 3.5);\r\n}\r\n\r\n.vtx-grid-spacing-8 {\r\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -4);\r\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 8);\r\n}\r\n\r\n.vtx-grid-spacing-8 > .vtx-grid-item {\r\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 4);\r\n}\r\n\r\n.vtx-grid-spacing-9 {\r\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -4.5);\r\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 9);\r\n}\r\n\r\n.vtx-grid-spacing-9 > .vtx-grid-item {\r\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 4.5);\r\n}\r\n\r\n.vtx-grid-spacing-10 {\r\n margin: calc(var(--vtx-grid-spacing-unit, 8px) * -5);\r\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 10);\r\n}\r\n\r\n.vtx-grid-spacing-10 > .vtx-grid-item {\r\n padding: calc(var(--vtx-grid-spacing-unit, 8px) * 5);\r\n}\r\n\r\n/* Row Spacing */\r\n.vtx-grid-row-spacing-1 {\r\n margin-top: calc(var(--vtx-grid-spacing-unit, 8px) * -0.5);\r\n margin-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * -0.5);\r\n}\r\n\r\n.vtx-grid-row-spacing-1 > .vtx-grid-item {\r\n padding-top: calc(var(--vtx-grid-spacing-unit, 8px) * 0.5);\r\n padding-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * 0.5);\r\n}\r\n\r\n.vtx-grid-row-spacing-2 {\r\n margin-top: calc(var(--vtx-grid-spacing-unit, 8px) * -1);\r\n margin-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * -1);\r\n}\r\n\r\n.vtx-grid-row-spacing-2 > .vtx-grid-item {\r\n padding-top: calc(var(--vtx-grid-spacing-unit, 8px) * 1);\r\n padding-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * 1);\r\n}\r\n\r\n.vtx-grid-row-spacing-3 {\r\n margin-top: calc(var(--vtx-grid-spacing-unit, 8px) * -1.5);\r\n margin-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * -1.5);\r\n}\r\n\r\n.vtx-grid-row-spacing-3 > .vtx-grid-item {\r\n padding-top: calc(var(--vtx-grid-spacing-unit, 8px) * 1.5);\r\n padding-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * 1.5);\r\n}\r\n\r\n.vtx-grid-row-spacing-4 {\r\n margin-top: calc(var(--vtx-grid-spacing-unit, 8px) * -2);\r\n margin-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * -2);\r\n}\r\n\r\n.vtx-grid-row-spacing-4 > .vtx-grid-item {\r\n padding-top: calc(var(--vtx-grid-spacing-unit, 8px) * 2);\r\n padding-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * 2);\r\n}\r\n\r\n.vtx-grid-row-spacing-5 {\r\n margin-top: calc(var(--vtx-grid-spacing-unit, 8px) * -2.5);\r\n margin-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * -2.5);\r\n}\r\n\r\n.vtx-grid-row-spacing-5 > .vtx-grid-item {\r\n padding-top: calc(var(--vtx-grid-spacing-unit, 8px) * 2.5);\r\n padding-bottom: calc(var(--vtx-grid-spacing-unit, 8px) * 2.5);\r\n}\r\n\r\n/* Column Spacing */\r\n.vtx-grid-column-spacing-1 {\r\n margin-left: calc(var(--vtx-grid-spacing-unit, 8px) * -0.5);\r\n margin-right: calc(var(--vtx-grid-spacing-unit, 8px) * -0.5);\r\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 1);\r\n}\r\n\r\n.vtx-grid-column-spacing-1 > .vtx-grid-item {\r\n padding-left: calc(var(--vtx-grid-spacing-unit, 8px) * 0.5);\r\n padding-right: calc(var(--vtx-grid-spacing-unit, 8px) * 0.5);\r\n}\r\n\r\n.vtx-grid-column-spacing-2 {\r\n margin-left: calc(var(--vtx-grid-spacing-unit, 8px) * -1);\r\n margin-right: calc(var(--vtx-grid-spacing-unit, 8px) * -1);\r\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 2);\r\n}\r\n\r\n.vtx-grid-column-spacing-2 > .vtx-grid-item {\r\n padding-left: calc(var(--vtx-grid-spacing-unit, 8px) * 1);\r\n padding-right: calc(var(--vtx-grid-spacing-unit, 8px) * 1);\r\n}\r\n\r\n.vtx-grid-column-spacing-3 {\r\n margin-left: calc(var(--vtx-grid-spacing-unit, 8px) * -1.5);\r\n margin-right: calc(var(--vtx-grid-spacing-unit, 8px) * -1.5);\r\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 3);\r\n}\r\n\r\n.vtx-grid-column-spacing-3 > .vtx-grid-item {\r\n padding-left: calc(var(--vtx-grid-spacing-unit, 8px) * 1.5);\r\n padding-right: calc(var(--vtx-grid-spacing-unit, 8px) * 1.5);\r\n}\r\n\r\n.vtx-grid-column-spacing-4 {\r\n margin-left: calc(var(--vtx-grid-spacing-unit, 8px) * -2);\r\n margin-right: calc(var(--vtx-grid-spacing-unit, 8px) * -2);\r\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 4);\r\n}\r\n\r\n.vtx-grid-column-spacing-4 > .vtx-grid-item {\r\n padding-left: calc(var(--vtx-grid-spacing-unit, 8px) * 2);\r\n padding-right: calc(var(--vtx-grid-spacing-unit, 8px) * 2);\r\n}\r\n\r\n.vtx-grid-column-spacing-5 {\r\n margin-left: calc(var(--vtx-grid-spacing-unit, 8px) * -2.5);\r\n margin-right: calc(var(--vtx-grid-spacing-unit, 8px) * -2.5);\r\n width: calc(100% + var(--vtx-grid-spacing-unit, 8px) * 5);\r\n}\r\n\r\n.vtx-grid-column-spacing-5 > .vtx-grid-item {\r\n padding-left: calc(var(--vtx-grid-spacing-unit, 8px) * 2.5);\r\n padding-right: calc(var(--vtx-grid-spacing-unit, 8px) * 2.5);\r\n}\r\n\r\n/* XS (Extra Small) - 0px and up */\r\n.vtx-grid-xs-auto {\r\n flex-grow: 0;\r\n flex-basis: auto;\r\n max-width: none;\r\n}\r\n\r\n.vtx-grid-xs {\r\n flex-grow: 1;\r\n flex-basis: 0;\r\n max-width: 100%;\r\n}\r\n\r\n.vtx-grid-xs-1 {\r\n flex-grow: 0;\r\n flex-basis: 8.333333%;\r\n max-width: 8.333333%;\r\n}\r\n\r\n.vtx-grid-xs-2 {\r\n flex-grow: 0;\r\n flex-basis: 16.666667%;\r\n max-width: 16.666667%;\r\n}\r\n\r\n.vtx-grid-xs-3 {\r\n flex-grow: 0;\r\n flex-basis: 25%;\r\n max-width: 25%;\r\n}\r\n\r\n.vtx-grid-xs-4 {\r\n flex-grow: 0;\r\n flex-basis: 33.333333%;\r\n max-width: 33.333333%;\r\n}\r\n\r\n.vtx-grid-xs-5 {\r\n flex-grow: 0;\r\n flex-basis: 41.666667%;\r\n max-width: 41.666667%;\r\n}\r\n\r\n.vtx-grid-xs-6 {\r\n flex-grow: 0;\r\n flex-basis: 50%;\r\n max-width: 50%;\r\n}\r\n\r\n.vtx-grid-xs-7 {\r\n flex-grow: 0;\r\n flex-basis: 58.333333%;\r\n max-width: 58.333333%;\r\n}\r\n\r\n.vtx-grid-xs-8 {\r\n flex-grow: 0;\r\n flex-basis: 66.666667%;\r\n max-width: 66.666667%;\r\n}\r\n\r\n.vtx-grid-xs-9 {\r\n flex-grow: 0;\r\n flex-basis: 75%;\r\n max-width: 75%;\r\n}\r\n\r\n.vtx-grid-xs-10 {\r\n flex-grow: 0;\r\n flex-basis: 83.333333%;\r\n max-width: 83.333333%;\r\n}\r\n\r\n.vtx-grid-xs-11 {\r\n flex-grow: 0;\r\n flex-basis: 91.666667%;\r\n max-width: 91.666667%;\r\n}\r\n\r\n.vtx-grid-xs-12 {\r\n flex-grow: 0;\r\n flex-basis: 100%;\r\n max-width: 100%;\r\n}\r\n\r\n/* SM (Small) - 600px and up */\r\n@media (min-width: 600px) {\r\n .vtx-grid-sm-auto {\r\n flex-grow: 0;\r\n flex-basis: auto;\r\n max-width: none;\r\n }\r\n\r\n .vtx-grid-sm {\r\n flex-grow: 1;\r\n flex-basis: 0;\r\n max-width: 100%;\r\n }\r\n\r\n .vtx-grid-sm-1 {\r\n flex-grow: 0;\r\n flex-basis: 8.333333%;\r\n max-width: 8.333333%;\r\n }\r\n\r\n .vtx-grid-sm-2 {\r\n flex-grow: 0;\r\n flex-basis: 16.666667%;\r\n max-width: 16.666667%;\r\n }\r\n\r\n .vtx-grid-sm-3 {\r\n flex-grow: 0;\r\n flex-basis: 25%;\r\n max-width: 25%;\r\n }\r\n\r\n .vtx-grid-sm-4 {\r\n flex-grow: 0;\r\n flex-basis: 33.333333%;\r\n max-width: 33.333333%;\r\n }\r\n\r\n .vtx-grid-sm-5 {\r\n flex-grow: 0;\r\n flex-basis: 41.666667%;\r\n max-width: 41.666667%;\r\n }\r\n\r\n .vtx-grid-sm-6 {\r\n flex-grow: 0;\r\n flex-basis: 50%;\r\n max-width: 50%;\r\n }\r\n\r\n .vtx-grid-sm-7 {\r\n flex-grow: 0;\r\n flex-basis: 58.333333%;\r\n max-width: 58.333333%;\r\n }\r\n\r\n .vtx-grid-sm-8 {\r\n flex-grow: 0;\r\n flex-basis: 66.666667%;\r\n max-width: 66.666667%;\r\n }\r\n\r\n .vtx-grid-sm-9 {\r\n flex-grow: 0;\r\n flex-basis: 75%;\r\n max-width: 75%;\r\n }\r\n\r\n .vtx-grid-sm-10 {\r\n flex-grow: 0;\r\n flex-basis: 83.333333%;\r\n max-width: 83.333333%;\r\n }\r\n\r\n .vtx-grid-sm-11 {\r\n flex-grow: 0;\r\n flex-basis: 91.666667%;\r\n max-width: 91.666667%;\r\n }\r\n\r\n .vtx-grid-sm-12 {\r\n flex-grow: 0;\r\n flex-basis: 100%;\r\n max-width: 100%;\r\n }\r\n}\r\n\r\n/* MD (Medium) - 960px and up */\r\n@media (min-width: 960px) {\r\n .vtx-grid-md-auto {\r\n flex-grow: 0;\r\n flex-basis: auto;\r\n max-width: none;\r\n }\r\n\r\n .vtx-grid-md {\r\n flex-grow: 1;\r\n flex-basis: 0;\r\n max-width: 100%;\r\n }\r\n\r\n .vtx-grid-md-1 {\r\n flex-grow: 0;\r\n flex-basis: 8.333333%;\r\n max-width: 8.333333%;\r\n }\r\n\r\n .vtx-grid-md-2 {\r\n flex-grow: 0;\r\n flex-basis: 16.666667%;\r\n max-width: 16.666667%;\r\n }\r\n\r\n .vtx-grid-md-3 {\r\n flex-grow: 0;\r\n flex-basis: 25%;\r\n max-width: 25%;\r\n }\r\n\r\n .vtx-grid-md-4 {\r\n flex-grow: 0;\r\n flex-basis: 33.333333%;\r\n max-width: 33.333333%;\r\n }\r\n\r\n .vtx-grid-md-5 {\r\n flex-grow: 0;\r\n flex-basis: 41.666667%;\r\n max-width: 41.666667%;\r\n }\r\n\r\n .vtx-grid-md-6 {\r\n flex-grow: 0;\r\n flex-basis: 50%;\r\n max-width: 50%;\r\n }\r\n\r\n .vtx-grid-md-7 {\r\n flex-grow: 0;\r\n flex-basis: 58.333333%;\r\n max-width: 58.333333%;\r\n }\r\n\r\n .vtx-grid-md-8 {\r\n flex-grow: 0;\r\n flex-basis: 66.666667%;\r\n max-width: 66.666667%;\r\n }\r\n\r\n .vtx-grid-md-9 {\r\n flex-grow: 0;\r\n flex-basis: 75%;\r\n max-width: 75%;\r\n }\r\n\r\n .vtx-grid-md-10 {\r\n flex-grow: 0;\r\n flex-basis: 83.333333%;\r\n max-width: 83.333333%;\r\n }\r\n\r\n .vtx-grid-md-11 {\r\n flex-grow: 0;\r\n flex-basis: 91.666667%;\r\n max-width: 91.666667%;\r\n }\r\n\r\n .vtx-grid-md-12 {\r\n flex-grow: 0;\r\n flex-basis: 100%;\r\n max-width: 100%;\r\n }\r\n}\r\n\r\n/* LG (Large) - 1280px and up */\r\n@media (min-width: 1280px) {\r\n .vtx-grid-lg-auto {\r\n flex-grow: 0;\r\n flex-basis: auto;\r\n max-width: none;\r\n }\r\n\r\n .vtx-grid-lg {\r\n flex-grow: 1;\r\n flex-basis: 0;\r\n max-width: 100%;\r\n }\r\n\r\n .vtx-grid-lg-1 {\r\n flex-grow: 0;\r\n flex-basis: 8.333333%;\r\n max-width: 8.333333%;\r\n }\r\n\r\n .vtx-grid-lg-2 {\r\n flex-grow: 0;\r\n flex-basis: 16.666667%;\r\n max-width: 16.666667%;\r\n }\r\n\r\n .vtx-grid-lg-3 {\r\n flex-grow: 0;\r\n flex-basis: 25%;\r\n max-width: 25%;\r\n }\r\n\r\n .vtx-grid-lg-4 {\r\n flex-grow: 0;\r\n flex-basis: 33.333333%;\r\n max-width: 33.333333%;\r\n }\r\n\r\n .vtx-grid-lg-5 {\r\n flex-grow: 0;\r\n flex-basis: 41.666667%;\r\n max-width: 41.666667%;\r\n }\r\n\r\n .vtx-grid-lg-6 {\r\n flex-grow: 0;\r\n flex-basis: 50%;\r\n max-width: 50%;\r\n }\r\n\r\n .vtx-grid-lg-7 {\r\n flex-grow: 0;\r\n flex-basis: 58.333333%;\r\n max-width: 58.333333%;\r\n }\r\n\r\n .vtx-grid-lg-8 {\r\n flex-grow: 0;\r\n flex-basis: 66.666667%;\r\n max-width: 66.666667%;\r\n }\r\n\r\n .vtx-grid-lg-9 {\r\n flex-grow: 0;\r\n flex-basis: 75%;\r\n max-width: 75%;\r\n }\r\n\r\n .vtx-grid-lg-10 {\r\n flex-grow: 0;\r\n flex-basis: 83.333333%;\r\n max-width: 83.333333%;\r\n }\r\n\r\n .vtx-grid-lg-11 {\r\n flex-grow: 0;\r\n flex-basis: 91.666667%;\r\n max-width: 91.666667%;\r\n }\r\n\r\n .vtx-grid-lg-12 {\r\n flex-grow: 0;\r\n flex-basis: 100%;\r\n max-width: 100%;\r\n }\r\n}\r\n\r\n/* XL (Extra Large) - 1920px and up */\r\n@media (min-width: 1920px) {\r\n .vtx-grid-xl-auto {\r\n flex-grow: 0;\r\n flex-basis: auto;\r\n max-width: none;\r\n }\r\n\r\n .vtx-grid-xl {\r\n flex-grow: 1;\r\n flex-basis: 0;\r\n max-width: 100%;\r\n }\r\n\r\n .vtx-grid-xl-1 {\r\n flex-grow: 0;\r\n flex-basis: 8.333333%;\r\n max-width: 8.333333%;\r\n }\r\n\r\n .vtx-grid-xl-2 {\r\n flex-grow: 0;\r\n flex-basis: 16.666667%;\r\n max-width: 16.666667%;\r\n }\r\n\r\n .vtx-grid-xl-3 {\r\n flex-grow: 0;\r\n flex-basis: 25%;\r\n max-width: 25%;\r\n }\r\n\r\n .vtx-grid-xl-4 {\r\n flex-grow: 0;\r\n flex-basis: 33.333333%;\r\n max-width: 33.333333%;\r\n }\r\n\r\n .vtx-grid-xl-5 {\r\n flex-grow: 0;\r\n flex-basis: 41.666667%;\r\n max-width: 41.666667%;\r\n }\r\n\r\n .vtx-grid-xl-6 {\r\n flex-grow: 0;\r\n flex-basis: 50%;\r\n max-width: 50%;\r\n }\r\n\r\n .vtx-grid-xl-7 {\r\n flex-grow: 0;\r\n flex-basis: 58.333333%;\r\n max-width: 58.333333%;\r\n }\r\n\r\n .vtx-grid-xl-8 {\r\n flex-grow: 0;\r\n flex-basis: 66.666667%;\r\n max-width: 66.666667%;\r\n }\r\n\r\n .vtx-grid-xl-9 {\r\n flex-grow: 0;\r\n flex-basis: 75%;\r\n max-width: 75%;\r\n }\r\n\r\n .vtx-grid-xl-10 {\r\n flex-grow: 0;\r\n flex-basis: 83.333333%;\r\n max-width: 83.333333%;\r\n }\r\n\r\n .vtx-grid-xl-11 {\r\n flex-grow: 0;\r\n flex-basis: 91.666667%;\r\n max-width: 91.666667%;\r\n }\r\n\r\n .vtx-grid-xl-12 {\r\n flex-grow: 0;\r\n flex-basis: 100%;\r\n max-width: 100%;\r\n }\r\n}\r\n");const En=i.default.forwardRef(({container:n=!1,item:e=!1,spacing:t,rowSpacing:a,columnSpacing:o,xs:i,sm:l,md:d,lg:s,xl:c,justifyContent:x,alignItems:v,alignContent:m,direction:p="row",wrap:h="wrap",className:u="",children:g,style:b,...f},y)=>{const w=["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!==d&&"vtx-grid-md"+(!0===d?"":"auto"===d?"-auto":`-${d}`),void 0!==s&&"vtx-grid-lg"+(!0===s?"":"auto"===s?"-auto":`-${s}`),void 0!==c&&"vtx-grid-xl"+(!0===c?"":"auto"===c?"-auto":`-${c}`),n&&"row"!==p&&`vtx-grid-direction-${p}`,n&&"wrap"!==h&&`vtx-grid-wrap-${h}`,u].filter(Boolean).join(" "),k={...b};return n&&(x&&(k.justifyContent=x),v&&(k.alignItems=v),m&&(k.alignContent=m)),r.jsx("div",{ref:y,className:w,style:Object.keys(k).length>0?k:void 0,...f,children:g})});En.displayName="Grid";const Fn=j(En),Bn=i.default.forwardRef(({icon:n,iconVariant:e="primary",text:t,subText:a,className:o="",style:i,...l},d)=>r.jsx(In,{variant:"outlined",className:o,style:i,ref:d,...l,children:r.jsxs(Fn,{container:!0,spacing:2,alignItems:"center",wrap:"nowrap",justifyContent:"center",children:[r.jsx(Fn,{item:!0,xs:"auto",children:r.jsx(hn,{align:"center",justify:"center",children:r.jsx("span",{className:`infocard-icon infocard-icon--${e}`,children:n})})}),r.jsxs(Fn,{item:!0,xs:!0,children:[r.jsx(gn,{variant:"caption",children:t}),a&&r.jsx(gn,{variant:"subtitle2",children:a})]})]})}));Bn.displayName="InfoCardBase";const On=i.default.forwardRef(({value:n,label:e,className:t="",style:a,...o},i)=>r.jsx(In,{variant:"outlined",className:t,style:a,ref:i,...o,children:r.jsxs(hn,{direction:"column",align:"center",justify:"center",style:{minHeight:80},children:[r.jsx(gn,{variant:"h4",children:n}),e&&r.jsx(gn,{variant:"caption",children:e})]})}));On.displayName="InfoCardMetric";const Wn={Base:j(Bn),Metric:j(On)};mr("/* 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 Pn=i.default.forwardRef(({icon:n,iconVariant:e="primary",iconCircle:t=!0,heading:a,subText:o,className:i="",style:l,...d},s)=>r.jsxs(hn,{direction:"row",align:"center",gap:8,className:`infotext-base ${i}`,style:l,ref:s,...d,children:[r.jsx(hn,{align:"center",justify:"center",className:"infotext-icon-wrapper",children:t?r.jsx("span",{className:`infotext-icon infotext-icon--${e}`,children:n}):r.jsx("span",{className:"infotext-icon-plain",children:n})}),r.jsxs(hn,{direction:"column",gap:4,children:[r.jsx(gn,{variant:"body1",weight:"medium",noMargin:!0,children:a}),o&&r.jsx(gn,{variant:"caption",textColor:"var(--text-secondary)",noMargin:!0,children:o})]})]}));Pn.displayName="InfoTextBase";const Hn=i.default.forwardRef(({icon:n,iconVariant:e="primary",iconCircle:t=!0,value:a,label:o,subText:i,className:l="",style:d,...s},c)=>r.jsxs(hn,{direction:"row",align:"center",gap:8,className:`infotext-stat ${l}`,style:d,ref:c,...s,children:[n&&r.jsx(hn,{align:"center",justify:"center",className:"infotext-icon-wrapper",children:t?r.jsx("span",{className:`infotext-icon infotext-icon--${e}`,children:n}):r.jsx("span",{className:"infotext-icon-plain",children:n})}),r.jsxs(hn,{direction:"column",gap:4,children:[r.jsx(gn,{variant:"h5",weight:"bold",noMargin:!0,children:a}),r.jsx(gn,{variant:"body2",weight:"medium",noMargin:!0,children:o}),i&&r.jsx(gn,{variant:"caption",textColor:"var(--text-secondary)",noMargin:!0,children:i})]})]}));Hn.displayName="InfoTextStat";const Vn=i.default.forwardRef(({icon:n,iconVariant:e="primary",iconCircle:t=!0,title:a,description:o,badge:i,className:l="",style:d,...s},c)=>r.jsxs(hn,{direction:"row",align:"start",gap:8,className:`infotext-feature ${l}`,style:d,ref:c,...s,children:[r.jsx(hn,{align:"center",justify:"center",className:"infotext-icon-wrapper",children:t?r.jsx("span",{className:`infotext-icon infotext-icon--${e}`,children:n}):r.jsx("span",{className:"infotext-icon-plain",children:n})}),r.jsxs(hn,{direction:"column",gap:6,style:{flex:1},children:[r.jsxs(hn,{align:"center",gap:8,children:[r.jsx(gn,{variant:"h6",weight:"semibold",noMargin:!0,children:a}),i&&r.jsx("span",{className:"infotext-badge",children:i})]}),r.jsx(gn,{variant:"body2",textColor:"var(--text-secondary)",noMargin:!0,children:o})]})]}));Vn.displayName="InfoTextFeature";const Yn=i.default.forwardRef(({icon:n,iconVariant:e="primary",iconCircle:t=!0,text:a,className:o="",style:i,...l},d)=>r.jsxs(hn,{direction:"row",align:"center",gap:8,className:`infotext-compact ${o}`,style:i,ref:d,...l,children:[t?r.jsx("span",{className:`infotext-icon-small infotext-icon-small--${e}`,children:n}):r.jsx("span",{className:"infotext-icon-small-plain",children:n}),r.jsx(gn,{variant:"body2",noMargin:!0,children:a})]}));Yn.displayName="InfoTextCompact";const qn=i.default.forwardRef(({icon:n,iconVariant:e="primary",iconCircle:t=!0,heading:a,subText:o,className:i="",style:l,...d},s)=>r.jsxs(hn,{direction:"column",align:"center",gap:10,className:`infotext-vertical ${i}`,style:l,ref:s,...d,children:[r.jsx(hn,{align:"center",justify:"center",className:"infotext-icon-wrapper",children:t?r.jsx("span",{className:`infotext-icon infotext-icon--${e}`,children:n}):r.jsx("span",{className:"infotext-icon-plain",children:n})}),r.jsxs(hn,{direction:"column",gap:4,align:"center",children:[r.jsx(gn,{variant:"body1",weight:"medium",align:"center",noMargin:!0,children:a}),o&&r.jsx(gn,{variant:"caption",textColor:"var(--text-secondary)",align:"center",noMargin:!0,children:o})]})]}));qn.displayName="InfoTextVertical";const Un={Base:j(Pn),Stat:j(Hn),Feature:j(Vn),Compact:j(Yn),Vertical:j(qn)},Gn=({data:n,settings:e,theme:t,variant:a,className:o,style:i})=>{const l=(null==e?void 0:e.theme)||t||"modern",d=(null==e?void 0:e.variant)||a||"primary",s=(null==e?void 0:e.className)||o||"",c=(null==e?void 0:e.style)||i,x="error"===(v=(null==e?void 0:e.iconVariant)||d)?"danger":"neutral"===v?"secondary":v||"primary";var v;return"minimal"===l||"compact"===l?r.jsx(Un.Base,{icon:n.icon||r.jsx(r.Fragment,{}),iconVariant:x,iconCircle:"compact"!==l,heading:n.text,subText:n.subText,className:s,style:c}):r.jsx(Wn.Base,{icon:n.icon||r.jsx(r.Fragment,{}),iconVariant:x,text:n.text,subText:n.subText,className:s,style:c})};mr("/* ==================== 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 Xn=i.default.forwardRef(({id:e,image:t,imageAlt:a="Product",category:o,name:i,weight:l,units:d,price:s,originalPrice:c,discount:x,rating:v,initialQuantity:m=0,featured:p=!1,featuredText:h="Featured",showWishlist:u=!1,isWishlisted:g=!1,cartIcon:b,wishlistIcon:f,wishlistFilledIcon:y,quickViewIcon:w,onAddToCart:k,onIncrementCart:j,onDecrementCart:_,onWishlist:N,onQuickView:z,onClick:C,loading:S=!1,className:$="",style:M,...T},D)=>{const[I,L]=n.useState(m),[A,R]=n.useState(!1),E=A||S;return r.jsx(In,{variant:"outlined",className:`productcard ${$}`,style:{...M},noPadding:!0,ref:D,...T,children:r.jsxs(hn,{direction:"column",children:[r.jsxs("div",{className:"productcard-image-wrapper",onClick:C,style:{cursor:C?"pointer":"default"},children:[r.jsx("img",{src:t,alt:a,className:"productcard-image"}),r.jsxs("div",{className:"productcard-badges",children:[p&&r.jsx("span",{className:"productcard-featured-badge",children:h}),x&&r.jsx("span",{className:"productcard-discount-badge",children:x})]}),u&&N&&r.jsx("button",{className:"productcard-wishlist-btn "+(g?"productcard-wishlist-btn--active":""),onClick:r=>{r.stopPropagation(),N()},"aria-label":g?"Remove from wishlist":"Add to wishlist",children:g?y||f||"♥":f||"♡"}),z&&r.jsx("div",{className:"productcard-hover-overlay",children:r.jsx(Mr,{variant:"secondary",size:"sm",leftIcon:w||"👁",onClick:r=>{r.stopPropagation(),z()},children:"Quick View"})})]}),r.jsxs(hn,{direction:"column",gap:5,className:"p-3",children:[o&&r.jsx("div",{style:{display:"inline-flex",alignSelf:"flex-start"},children:r.jsx(Or,{label:o,variant:"outlined",className:"productcard-category"})}),r.jsx(gn,{variant:"body1",noMargin:!0,onClick:C,style:{cursor:C?"pointer":"default"},children:i}),(void 0!==l||d)&&r.jsx(gn,{variant:"body1",noMargin:!0,className:"productcard-weight",children:void 0!==l&&d?`${l} ${d}`:void 0!==l?l:"-"}),void 0!==v&&r.jsxs(hn,{align:"center",gap:5,className:"productcard-rating-wrapper",children:[r.jsxs("div",{className:"productcard-rating",children:["★".repeat(Math.floor(v)),"☆".repeat(5-Math.floor(v))]}),r.jsx(gn,{variant:"caption",noMargin:!0,children:v})]}),r.jsxs(hn,{align:"center",gap:8,children:[r.jsxs(gn,{variant:"h5",noMargin:!0,className:"productcard-price",children:["$",Number(s).toFixed(2)]}),c&&c>s&&r.jsxs(gn,{variant:"body2",noMargin:!0,className:"productcard-original-price",children:["$",Number(c).toFixed(2)]})]}),E?r.jsx(Mr,{fullWidth:!0,loading:!0,variant:"primary",children:"Loading"}):0===I?r.jsx(Mr,{fullWidth:!0,variant:"primary",leftIcon:b,onClick:async()=>{if(k){R(!0);try{await k(e,1),L(1)}catch(r){console.error("Add to cart error:",r)}finally{R(!1)}}},children:"Add to cart"}):r.jsxs(hn,{align:"center",direction:"row",justify:"between",className:"productcard-quantity-selector",children:[r.jsx(Mr,{variant:"secondary",onClick:async()=>{if(_&&!(I<=0)){R(!0);try{await _(e,I),L(I-1)}catch(r){console.error("Decrement error:",r)}finally{R(!1)}}},children:"-"}),r.jsx(gn,{noMargin:!0,className:"productcard-quantity-value",children:I}),r.jsx(Mr,{variant:"secondary",onClick:async()=>{if(j){R(!0);try{await j(e,I),L(I+1)}catch(r){console.error("Increment error:",r)}finally{R(!1)}}},children:"+"})]})]})]})})});Xn.displayName="ProductCardBase";const Kn=i.default.forwardRef(({imagePosition:e="left",...t},a)=>{const{id:o,image:i,imageAlt:l="Product",category:d,name:s,weight:c,units:x,price:v,originalPrice:m,discount:p,rating:h,initialQuantity:u=0,featured:g=!1,featuredText:b="Featured",showWishlist:f=!1,isWishlisted:y=!1,cartIcon:w,wishlistIcon:k,wishlistFilledIcon:j,quickViewIcon:_,onAddToCart:N,onIncrementCart:z,onDecrementCart:C,onWishlist:S,onQuickView:$,onClick:M,loading:T=!1,className:D="",style:I}=t,[L,A]=n.useState(u),[R,E]=n.useState(!1),F=R||T;return r.jsx(In,{variant:"outlined",className:`productcard-wide ${D}`,style:{padding:0,...I},ref:a,children:r.jsxs(hn,{direction:"left"===e?"row":"row-reverse",children:[r.jsxs("div",{className:"productcard-wide-image-wrapper",onClick:M,style:{cursor:M?"pointer":"default"},children:[r.jsx("img",{src:i,alt:l,className:"productcard-wide-image"}),r.jsxs("div",{className:"productcard-badges",children:[g&&r.jsx("span",{className:"productcard-featured-badge",children:b}),p&&r.jsx("span",{className:"productcard-discount-badge",children:p})]}),f&&S&&r.jsx("button",{className:"productcard-wishlist-btn "+(y?"productcard-wishlist-btn--active":""),onClick:r=>{r.stopPropagation(),S()},children:y?j||k||"♥":k||"♡"})]}),r.jsxs(hn,{direction:"column",gap:12,style:{padding:"16px 20px",flex:1,minWidth:0},children:[d&&r.jsx("div",{style:{display:"inline-flex",alignSelf:"flex-start"},children:r.jsx(Or,{label:d,variant:"outlined",className:"productcard-category"})}),r.jsxs(hn,{direction:"column",gap:6,children:[r.jsx(gn,{variant:"h5",weight:"bold",noMargin:!0,onClick:M,style:{cursor:M?"pointer":"default",wordBreak:"break-word"},children:s}),(void 0!==c||x)&&r.jsx(gn,{variant:"body2",noMargin:!0,className:"productcard-weight",children:void 0!==c&&x?`${c} ${x}`:void 0!==c?c:"-"})]}),void 0!==h&&r.jsxs(hn,{align:"center",gap:6,children:[r.jsxs("div",{className:"productcard-rating",children:["★".repeat(Math.floor(h)),"☆".repeat(5-Math.floor(h))]}),r.jsx(gn,{variant:"caption",noMargin:!0,children:h})]}),r.jsxs(hn,{align:"center",gap:8,wrap:"wrap",style:{marginTop:"auto"},children:[r.jsxs(gn,{variant:"h4",weight:"bold",noMargin:!0,className:"productcard-price",children:["$",Number(v).toFixed(2)]}),m&&m>v&&r.jsxs(gn,{variant:"body1",noMargin:!0,className:"productcard-original-price",children:["$",Number(m).toFixed(2)]})]}),r.jsxs(hn,{gap:12,align:"center",direction:"row",wrap:"wrap",children:[r.jsx("div",{style:{flex:"1 1 auto",minWidth:"140px"},children:F?r.jsx(Mr,{fullWidth:!0,loading:!0,variant:"primary",children:"Loading"}):0===L?r.jsx(Mr,{fullWidth:!0,variant:"primary",leftIcon:w,onClick:async()=>{if(N){E(!0);try{await N(o,1),A(1)}catch(r){console.error("Add to cart error:",r)}finally{E(!1)}}},children:"Add to cart"}):r.jsxs(hn,{align:"center",direction:"row",justify:"between",className:"productcard-quantity-selector",children:[r.jsx(Mr,{variant:"secondary",onClick:async()=>{if(C&&!(L<=0)){E(!0);try{await C(o,L),A(L-1)}catch(r){console.error("Decrement error:",r)}finally{E(!1)}}},children:"-"}),r.jsx(gn,{noMargin:!0,className:"productcard-quantity-value",children:L}),r.jsx(Mr,{variant:"primary",onClick:async()=>{if(z){E(!0);try{await z(o,L),A(L+1)}catch(r){console.error("Increment error:",r)}finally{E(!1)}}},children:"+"})]})}),$&&r.jsx(Mr,{variant:"outline",size:"md",leftIcon:_||"👁",onClick:$,children:"View"})]})]})]})})});Kn.displayName="ProductCardWide";const Qn=i.default.forwardRef((e,t)=>{const{id:a,image:o,imageAlt:i="Product",name:l,price:d,originalPrice:s,discount:c,rating:x,initialQuantity:v=0,showWishlist:m=!1,isWishlisted:p=!1,cartIcon:h,wishlistIcon:u,wishlistFilledIcon:g,onAddToCart:b,onIncrementCart:f,onDecrementCart:y,onWishlist:w,onClick:k,loading:j=!1,className:_="",style:N}=e,[z,C]=n.useState(v),[S,$]=n.useState(!1),M=S||j;return r.jsxs("div",{className:`productcard-minimal ${_}`,style:N,ref:t,children:[r.jsxs("div",{className:"productcard-minimal-image-wrapper",onClick:k,style:{cursor:k?"pointer":"default"},children:[r.jsx("img",{src:o,alt:i,className:"productcard-minimal-image"}),c&&r.jsx("span",{className:"productcard-minimal-discount",children:c}),m&&w&&r.jsx("button",{className:"productcard-minimal-wishlist "+(p?"productcard-minimal-wishlist--active":""),onClick:r=>{r.stopPropagation(),w()},children:p?g||u||"♥":u||"♡"})]}),r.jsxs(hn,{direction:"column",gap:8,style:{padding:"12px 0"},children:[r.jsx(gn,{variant:"body1",weight:"medium",noMargin:!0,onClick:k,style:{cursor:k?"pointer":"default"},children:l}),r.jsxs(hn,{align:"center",gap:8,children:[r.jsxs(gn,{variant:"h6",weight:"bold",noMargin:!0,className:"productcard-price",children:["$",Number(d).toFixed(2)]}),s&&s>d&&r.jsxs(gn,{variant:"caption",noMargin:!0,className:"productcard-original-price",children:["$",Number(s).toFixed(2)]})]}),void 0!==x&&r.jsxs("div",{className:"productcard-rating-minimal",children:["★".repeat(Math.floor(x)),"☆".repeat(5-Math.floor(x))]}),M?r.jsx(Mr,{loading:!0,variant:"primary",size:"sm",children:"Loading"}):0===z?r.jsx(Mr,{variant:"primary",size:"sm",leftIcon:h,onClick:async()=>{if(b){$(!0);try{await b(a,1),C(1)}catch(r){console.error("Add to cart error:",r)}finally{$(!1)}}},fullWidth:!0,children:"Add"}):r.jsxs(hn,{align:"center",justify:"between",className:"productcard-quantity-selector-minimal",children:[r.jsx(Mr,{variant:"secondary",size:"sm",onClick:async()=>{if(y&&!(z<=0)){$(!0);try{await y(a,z),C(z-1)}catch(r){console.error("Decrement error:",r)}finally{$(!1)}}},children:"-"}),r.jsx(gn,{variant:"body2",noMargin:!0,weight:"medium",children:z}),r.jsx(Mr,{variant:"primary",size:"sm",onClick:async()=>{if(f){$(!0);try{await f(a,z),C(z+1)}catch(r){console.error("Increment error:",r)}finally{$(!1)}}},children:"+"})]})]})]})});Qn.displayName="ProductCardMinimal";const Jn={Base:j(Xn),Wide:j(Kn),Minimal:j(Qn)},Zn=({data:n,settings:e})=>r.jsx(Jn.Base,{id:n.id,name:n.name,price:Number(n.price),originalPrice:n.originalPrice?Number(n.originalPrice):void 0,category:n.category,rating:n.rating,image:n.image||"",...e||{}});mr("/* ==================== 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 re=i.default.forwardRef(({orderId:n,orderNumber:e,status:t="pending",statusText:a,items:o,deliveryDate:i,deliveryLabel:l="Delivered on",totalAmount:d,currency:s="₹",onTrackOrder:c,onViewDetails:x,trackButtonText:v="Track Order",className:m="",style:p,...h},u)=>{const g=o[0],b=o.length-1;return r.jsx(In,{variant:"outlined",className:`ordercard ${m}`,style:p,onClick:x?()=>x(n):void 0,ref:u,...h,children:r.jsxs(hn,{direction:"column",gap:0,children:[r.jsxs(hn,{align:"center",justify:"between",wrap:"wrap",gap:8,className:"ordercard-header",children:[r.jsx(gn,{variant:"body1",weight:"semibold",noMargin:!0,children:e||`Order #${n}`}),r.jsx(An,{variant:(()=>{switch(t){case"delivered":return"success";case"cancelled":return"error";case"processing":case"shipped":return"info";case"pending":return"warning";default:return"neutral"}})(),children:a||t.charAt(0).toUpperCase()+t.slice(1)})]}),r.jsxs(hn,{direction:"row",gap:10,className:"ordercard-content",children:[g.image&&r.jsx("div",{className:"ordercard-image-wrapper",children:r.jsx("img",{src:g.image,alt:g.name,className:"ordercard-image"})}),r.jsxs(hn,{direction:"column",gap:2,style:{flex:1,minWidth:0},children:[r.jsxs(gn,{variant:"body2",weight:"medium",noMargin:!0,className:"ordercard-product-name",children:[g.name,g.quantity&&g.quantity>1&&` × ${g.quantity}`]}),b>0&&r.jsxs(gn,{variant:"caption",noMargin:!0,className:"ordercard-more-items",children:["+ ",b," more ",1===b?"item":"items"]})]})]}),r.jsxs(hn,{direction:"row",align:"center",justify:"between",wrap:"wrap",gap:8,className:"ordercard-footer",children:[r.jsxs(hn,{direction:"column",gap:2,style:{flex:"1 1 auto",minWidth:"140px"},children:[i&&r.jsxs(gn,{variant:"caption",noMargin:!0,className:"ordercard-delivery",children:[l,": ",i]}),r.jsxs(gn,{variant:"body1",weight:"bold",noMargin:!0,className:"ordercard-price",children:[s,d.toLocaleString()]})]}),c&&r.jsx(Mr,{variant:"primary",size:"sm",onClick:r=>{null==r||r.stopPropagation(),c(n)},className:"ordercard-track-btn",children:v})]})]})})});re.displayName="OrderCard";const ne=j(re),ee=({data:n,settings:e})=>{var t,a,o,i,l,d,s,c,x,v;const m=(n.items||[]).map((r,n)=>({id:`item-${n}`,name:r.name,quantity:r.quantity,image:void 0})),p=(null===(a=null===(t=n.actions)||void 0===t?void 0:t[0])||void 0===a?void 0:a.onClick)||(null===(i=null===(o=n.actions)||void 0===o?void 0:o[0])||void 0===i?void 0:i.href)?()=>{var r,e;(null===(e=null===(r=n.actions)||void 0===r?void 0:r[0])||void 0===e?void 0:e.onClick)&&n.actions[0].onClick()}:void 0,h=(null===(d=null===(l=n.actions)||void 0===l?void 0:l[1])||void 0===d?void 0:d.onClick)||(null===(c=null===(s=n.actions)||void 0===s?void 0:s[1])||void 0===c?void 0:c.href)?()=>{var r,e;(null===(e=null===(r=n.actions)||void 0===r?void 0:r[1])||void 0===e?void 0:e.onClick)&&n.actions[1].onClick()}:void 0;return r.jsx(ne,{orderId:n.id,orderNumber:n.id,status:(r=>{const n=r.toLowerCase();return"completed"===n?"delivered":["pending","processing","delivered","cancelled","shipped"].includes(n)?n:"pending"})(n.status),statusText:n.status,items:m.length>0?m:[{id:"1",name:"No items"}],deliveryDate:(r=>{if(!r)return;return("string"==typeof r?new Date(r):r).toLocaleDateString("en-US",{month:"short",day:"numeric",year:"numeric"})})(n.date),totalAmount:(r=>{if("string"==typeof r){const n=parseFloat(r.replace(/[^0-9.-]+/g,""));return isNaN(n)?0:n}return r})(n.total),currency:"$",onTrackOrder:p,onViewDetails:h,trackButtonText:(null===(v=null===(x=n.actions)||void 0===x?void 0:x[0])||void 0===v?void 0:v.label)||"Track Order",className:null==e?void 0:e.className,style:null==e?void 0:e.style})};mr(".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 te=i.default.forwardRef(({src:e,alt:t="",size:a,shape:o="circle",fallback:i="?",onImageError:l,onImageLoad:d,imgProps:s,statusIndicator:c,statusPosition:x="bottom-right",className:v="",...m},p)=>{const{theme:h}=zr(),u=a||h.defaultSize||"md",[g,b]=n.useState(!1),f=["vtx-avatar",`vtx-avatar--${u}`,`vtx-avatar--${o}`,c&&"vtx-avatar--with-status",v].filter(Boolean).join(" "),y=e&&!g,w=i.slice(0,2).toUpperCase();return r.jsxs("div",{ref:p,className:f,role:"img","aria-label":t||i||"Avatar",...m,children:[y?r.jsx("img",{src:e,alt:t,className:"vtx-avatar-image",onError:r=>{b(!0),null==l||l(r)},onLoad:r=>{null==d||d(r)},loading:"lazy",...s}):r.jsx("span",{className:"vtx-avatar-fallback","aria-hidden":"true",children:w}),c&&r.jsx("span",{className:`vtx-avatar-status vtx-avatar-status--${x}`,"aria-label":"Status indicator",children:c})]})});te.displayName="Avatar";const ae=j(te),oe=({data:n,settings:e,theme:t,variant:a,size:o,className:i,style:l})=>{const d=(null==e?void 0:e.theme)||t||"modern",s=(null==e?void 0:e.variant)||a||"primary",c=(null==e?void 0:e.size)||o||"md",x=(null==e?void 0:e.className)||i||"",v=(null==e?void 0:e.style)||l,m=!1!==(null==e?void 0:e.showDividers),p=null==e?void 0:e.maxItems,h=n=>n.avatar?r.jsx(ae,{src:"string"==typeof n.avatar?n.avatar:n.avatar.src,alt:"string"==typeof n.avatar?n.title:n.avatar.alt,size:"lg"===c?"md":"sm"}):null,u=n=>n.actions&&0!==n.actions.length?r.jsx(hn,{gap:"xs",children:n.actions.slice(0,2).map((n,e)=>r.jsx(Mr,{variant:"error"===n.variant?"danger":n.variant||"ghost",size:"sm",onClick:n.onClick,href:n.href,children:n.label},e))}):null;return r.jsx(In,{variant:"elevated",className:["vtx-list-widget",`vtx-list-widget--${d}`,`vtx-list-widget--${c}`,`vtx-list-widget--${s}`,x].filter(Boolean).join(" "),style:v,padding:"lg",children:(()=>{const e=p?n.items.slice(0,p):n.items;return r.jsxs(hn,{direction:"column",gap:"sm",children:[n.title&&r.jsx(gn,{variant:"h6",className:"font-semibold mb-2",children:n.title}),e.map((n,t)=>r.jsxs("div",{children:[r.jsxs(hn,{align:"start",gap:"md",className:"py-2",children:[h(n),r.jsxs(hn,{direction:"column",gap:"xs",style:{flex:1},children:[r.jsxs(hn,{justify:"between",align:"start",children:[r.jsxs(hn,{direction:"column",gap:"xs",children:[r.jsx(gn,{variant:"lg"===c?"body1":"body2",className:"font-medium",children:n.title}),n.subtitle&&r.jsx(gn,{variant:"caption",className:"text-neutral-600",children:n.subtitle}),n.description&&r.jsx(gn,{variant:"caption",className:"text-neutral-500",children:n.description})]}),r.jsxs(hn,{align:"center",gap:"sm",children:[n.badge&&r.jsx(An,{variant:"error"===n.badge.variant?"error":n.badge.variant||"neutral",size:"sm",children:n.badge.text}),u(n)]})]}),n.metadata&&Object.keys(n.metadata).length>0&&r.jsx(hn,{gap:"md",children:Object.entries(n.metadata).map(([n,e])=>r.jsxs(gn,{variant:"caption",className:"text-neutral-500",children:[r.jsxs("span",{className:"font-medium",children:[n,":"]})," ",String(e)]},n))})]})]}),m&&t<e.length-1&&r.jsx("div",{className:"border-b border-neutral-200 my-2"})]},n.id||t)),p&&n.items.length>p&&r.jsxs(gn,{variant:"caption",className:"text-neutral-500 text-center mt-2",children:["+",n.items.length-p," more items"]})]})})()})};mr("/* Link Component Styles */\r\n\r\n.vtx-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-1);\r\n font-family: var(--vtx-font-family-sans);\r\n text-decoration: none;\r\n cursor: pointer;\r\n transition: color var(--vtx-transition-base), opacity var(--vtx-transition-base);\r\n position: relative;\r\n}\r\n\r\n.vtx-link:hover {\r\n opacity: 0.8;\r\n text-decoration: underline;\r\n text-underline-offset: 2px;\r\n}\r\n\r\n.vtx-link:active {\r\n opacity: 0.6;\r\n}\r\n\r\n.vtx-link:focus-visible {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 2px;\r\n border-radius: 2px;\r\n}\r\n\r\n/* Disabled state */\r\n.vtx-link--disabled {\r\n cursor: not-allowed;\r\n opacity: 0.5;\r\n pointer-events: none;\r\n}\r\n\r\n/* No underline variant */\r\n.vtx-link--no-underline {\r\n text-decoration: none;\r\n}\r\n\r\n.vtx-link--no-underline:hover {\r\n text-decoration: underline;\r\n}\r\n\r\n/* Color variants */\r\n.vtx-link--primary {\r\n color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-link--primary:hover {\r\n color: var(--vtx-color-primary-700);\r\n}\r\n\r\n.vtx-link--secondary {\r\n color: var(--vtx-color-secondary-600);\r\n}\r\n\r\n.vtx-link--secondary:hover {\r\n color: var(--vtx-color-secondary-700);\r\n}\r\n\r\n.vtx-link--neutral {\r\n color: var(--vtx-color-neutral-700);\r\n}\r\n\r\n.vtx-link--neutral:hover {\r\n color: var(--vtx-color-neutral-900);\r\n}\r\n\r\n.vtx-link--inherit {\r\n color: inherit;\r\n}\r\n\r\n/* Text variants (sizes) */\r\n.vtx-link--h1 {\r\n font-size: var(--vtx-font-size-4xl);\r\n font-weight: var(--vtx-font-weight-bold);\r\n line-height: var(--vtx-line-height-tight);\r\n}\r\n\r\n.vtx-link--h2 {\r\n font-size: var(--vtx-font-size-3xl);\r\n font-weight: var(--vtx-font-weight-bold);\r\n line-height: var(--vtx-line-height-tight);\r\n}\r\n\r\n.vtx-link--h3 {\r\n font-size: var(--vtx-font-size-2xl);\r\n font-weight: var(--vtx-font-weight-semibold);\r\n line-height: var(--vtx-line-height-tight);\r\n}\r\n\r\n.vtx-link--h4 {\r\n font-size: var(--vtx-font-size-xl);\r\n font-weight: var(--vtx-font-weight-semibold);\r\n line-height: var(--vtx-line-height-snug);\r\n}\r\n\r\n.vtx-link--h5 {\r\n font-size: var(--vtx-font-size-lg);\r\n font-weight: var(--vtx-font-weight-semibold);\r\n line-height: var(--vtx-line-height-snug);\r\n}\r\n\r\n.vtx-link--h6 {\r\n font-size: var(--vtx-font-size-base);\r\n font-weight: var(--vtx-font-weight-semibold);\r\n line-height: var(--vtx-line-height-normal);\r\n}\r\n\r\n.vtx-link--body1 {\r\n font-size: var(--vtx-font-size-base);\r\n font-weight: var(--vtx-font-weight-normal);\r\n line-height: var(--vtx-line-height-relaxed);\r\n}\r\n\r\n.vtx-link--body2 {\r\n font-size: var(--vtx-font-size-sm);\r\n font-weight: var(--vtx-font-weight-normal);\r\n line-height: var(--vtx-line-height-relaxed);\r\n}\r\n\r\n.vtx-link--caption {\r\n font-size: var(--vtx-font-size-xs);\r\n font-weight: var(--vtx-font-weight-normal);\r\n line-height: var(--vtx-line-height-normal);\r\n}\r\n\r\n.vtx-link--small {\r\n font-size: var(--vtx-font-size-xs);\r\n font-weight: var(--vtx-font-weight-normal);\r\n line-height: var(--vtx-line-height-tight);\r\n}\r\n\r\n/* Icons */\r\n.vtx-link__icon-left,\r\n.vtx-link__icon-right {\r\n display: inline-flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-link__content {\r\n display: inline-flex;\r\n align-items: center;\r\n}\r\n\r\n/* Dark mode support */\r\n[data-theme='dark'] .vtx-link--primary {\r\n color: var(--vtx-color-primary-400);\r\n}\r\n\r\n[data-theme='dark'] .vtx-link--primary:hover {\r\n color: var(--vtx-color-primary-300);\r\n}\r\n\r\n[data-theme='dark'] .vtx-link--secondary {\r\n color: var(--vtx-color-secondary-400);\r\n}\r\n\r\n[data-theme='dark'] .vtx-link--secondary:hover {\r\n color: var(--vtx-color-secondary-300);\r\n}\r\n\r\n[data-theme='dark'] .vtx-link--neutral {\r\n color: var(--vtx-color-neutral-300);\r\n}\r\n\r\n[data-theme='dark'] .vtx-link--neutral:hover {\r\n color: var(--vtx-color-neutral-100);\r\n}\r\n\r\n/* Reduced motion */\r\n@media (prefers-reduced-motion: reduce) {\r\n .vtx-link {\r\n transition: none;\r\n }\r\n}\r\n");const ie=i.default.forwardRef(({children:n,href:e,component:t,componentProps:a={},variant:o="body1",noUnderline:i=!1,disabled:l=!1,color:d="primary",leftIcon:s,rightIcon:c,external:x=!1,download:v,className:m="",target:p,rel:h,...u},g)=>{let b;try{b=zr()}catch(r){b=null}const f=x||void 0!==p||void 0!==v?null:t||(null==b?void 0:b.theme.linkComponent),y=["vtx-link",`vtx-link--${o}`,`vtx-link--${d}`,i&&"vtx-link--no-underline",l&&"vtx-link--disabled",m].filter(Boolean).join(" "),w=r.jsxs(r.Fragment,{children:[s&&r.jsx("span",{className:"vtx-link__icon-left",children:s}),r.jsx("span",{className:"vtx-link__content",children:n}),c&&r.jsx("span",{className:"vtx-link__icon-right",children:c})]});if(f){const n=f;return r.jsx(n,{ref:g,className:y,"aria-disabled":l,...a,...u,children:w})}const k=x?"_blank":p,j=x?"noopener noreferrer":h;return r.jsx("a",{ref:g,href:l?void 0:e,target:k,rel:j,className:y,"aria-disabled":l,onClick:l?r=>r.preventDefault():u.onClick,download:v,...u,children:w})});ie.displayName="Link";const le=j(ie),de=({data:n,settings:e,theme:t,variant:a,size:o,className:i,style:l})=>{const d=(null==e?void 0:e.theme)||t||"modern",s=(null==e?void 0:e.variant)||a||"primary",c=(null==e?void 0:e.size)||o||"md",x=(null==e?void 0:e.className)||i||"",v=(null==e?void 0:e.style)||l,m=(null==e?void 0:e.variant)||"body",p=(null==e?void 0:e.alignment)||"left",h=null==e?void 0:e.titleColor,u=null==e?void 0:e.contentColor,g=null==e?void 0:e.captionColor,b=null==e?void 0:e.backgroundColor,f=r=>{if("lg"===c)switch(r){case"title":return"h1"===m?"h1":"h2"===m?"h2":"h3"===m?"h3":"h4";case"content":return"body1";case"caption":return"body2"}if("sm"===c)switch(r){case"title":return"h1"===m?"h3":"h2"===m?"h4":"h3"===m?"h5":"h6";case"content":return"body2";case"caption":return"caption"}switch(r){case"title":return"h1"===m?"h2":"h2"===m?"h3":"h3"===m?"h4":"h5";case"content":return"body1";case"caption":return"body2"}};if(n.icon&&("minimal"===d||"compact"===d))return r.jsx(Un.Stat,{icon:n.icon,value:n.title||n.content||"",label:n.caption,className:x,style:v});return r.jsx(In,{variant:"outlined",className:["vtx-text-widget",`vtx-text-widget--${d}`,`vtx-text-widget--${c}`,`vtx-text-widget--${s}`,p&&`vtx-text-widget--${p}`,x].filter(Boolean).join(" "),style:{...v,backgroundColor:b,textAlign:p||"left"},padding:"lg",children:r.jsxs(hn,{direction:"column",gap:"md",children:[n.title&&r.jsx(gn,{variant:f("title"),className:"font-bold",style:{color:h},children:n.title}),n.content&&r.jsx(gn,{variant:f("content"),className:"text-neutral-700 leading-relaxed",style:{color:u},children:n.content}),n.caption&&r.jsx(gn,{variant:f("caption"),className:"text-neutral-500",style:{color:g},children:n.caption}),n.actions&&n.actions.length>0&&r.jsx(hn,{gap:"sm",children:n.actions.map((n,e)=>"link"===n.type?r.jsx(le,{href:n.href,variant:n.variant||s,children:n.label},e):r.jsx(Mr,{variant:"error"===n.variant?"danger":n.variant||(0===e?"primary":"ghost"),size:"lg"===c?"md":"sm",onClick:n.onClick,href:n.href,children:n.label},e))})]})})};mr("/* Breadcrumb Component Styles */\r\n\r\n.vtx-breadcrumb {\r\n display: block;\r\n}\r\n\r\n.vtx-breadcrumb-list {\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n gap: var(--vtx-spacing-1);\r\n list-style: none;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n/* Responsive display */\r\n.vtx-breadcrumb-list--mobile {\r\n display: none;\r\n}\r\n\r\n.vtx-breadcrumb-list--desktop {\r\n display: flex;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .vtx-breadcrumb-list--desktop {\r\n display: none;\r\n }\r\n \r\n .vtx-breadcrumb-list--mobile {\r\n display: flex;\r\n }\r\n}\r\n\r\n/* Breadcrumb Item */\r\n.vtx-breadcrumb-item {\r\n display: inline-flex;\r\n align-items: center;\r\n}\r\n\r\n.vtx-breadcrumb-item-content,\r\n.vtx-breadcrumb-item-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-0-5);\r\n color: var(--vtx-color-neutral-600);\r\n text-decoration: none !important;\r\n transition: color var(--vtx-transition-base);\r\n}\r\n\r\n.vtx-breadcrumb-item-link {\r\n cursor: pointer;\r\n}\r\n\r\n.vtx-breadcrumb-item-link:hover {\r\n color: var(--vtx-color-primary-600);\r\n text-decoration: none !important;\r\n}\r\n\r\n.vtx-breadcrumb-item-link:focus-visible {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 2px;\r\n border-radius: 2px;\r\n}\r\n\r\n/* Active item */\r\n.vtx-breadcrumb-item--active .vtx-breadcrumb-item-content {\r\n color: var(--vtx-color-neutral-900);\r\n font-weight: var(--vtx-font-weight-medium);\r\n}\r\n\r\n/* Ellipsis */\r\n.vtx-breadcrumb-item--ellipsis .vtx-breadcrumb-item-content {\r\n color: var(--vtx-color-neutral-500);\r\n cursor: default;\r\n user-select: none;\r\n}\r\n\r\n/* Icon */\r\n.vtx-breadcrumb-item-icon {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n line-height: 1;\r\n margin-right: 5px;\r\n}\r\n\r\n/* Label - ensure proper alignment with Text component */\r\n.vtx-breadcrumb-item-label {\r\n display: inline-flex;\r\n align-items: center;\r\n line-height: 1 !important;\r\n margin: 0 !important;\r\n}\r\n\r\n/* Separator */\r\n.vtx-breadcrumb-separator {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--vtx-color-neutral-400);\r\n user-select: none;\r\n line-height: 1;\r\n}\r\n");const se=i.default.forwardRef(({items:n,separator:e=r.jsx(O,{size:16}),linkComponent:t,maxItems:a,size:o,className:l="",separatorClassName:d=""},s)=>{const{theme:c}=zr(),x=o||c.defaultSize,v=i.default.useMemo(()=>{if(!a||n.length<=a)return n;return[n[0],{label:"...",active:!1},...n.slice(-(a-2))]},[n,a]),m=i.default.useMemo(()=>{if(n.length<=2)return n;return[n[0],{label:"...",active:!1},n[n.length-1]]},[n]),p=["vtx-breadcrumb",`vtx-breadcrumb--${x}`,l].filter(Boolean).join(" "),h=["vtx-breadcrumb-separator",d].filter(Boolean).join(" "),u=(n,e)=>{const a=e===v.length-1,o=n.active||a,i="..."===n.label,l=["vtx-breadcrumb-item",o&&"vtx-breadcrumb-item--active",i&&"vtx-breadcrumb-item--ellipsis"].filter(Boolean).join(" "),d=r.jsxs(r.Fragment,{children:[n.icon&&r.jsx("span",{className:"vtx-breadcrumb-item-icon",children:n.icon}),n.label&&r.jsx(gn,{as:"span",variant:"body2",className:"vtx-breadcrumb-item-label",children:n.label})]});if(i)return r.jsx("li",{className:l,children:r.jsx("span",{className:"vtx-breadcrumb-item-content",children:n.label})},e);if(o)return r.jsx("li",{className:l,"aria-current":"page",children:r.jsx("span",{className:"vtx-breadcrumb-item-content",children:d})},e);return n.href||n.linkProps?r.jsx("li",{className:l,children:r.jsx(le,{href:n.href,component:t,componentProps:n.linkProps,className:"vtx-breadcrumb-item-link",color:"inherit",children:d})},e):r.jsx("li",{className:l,children:r.jsx("span",{className:"vtx-breadcrumb-item-content",children:d})},e)};return r.jsxs("nav",{ref:s,className:p,"aria-label":"Breadcrumb",children:[r.jsx("ol",{className:"vtx-breadcrumb-list vtx-breadcrumb-list--desktop",children:v.map((n,t)=>r.jsxs(i.default.Fragment,{children:[u(n,t),t<v.length-1&&r.jsx("li",{className:h,"aria-hidden":"true",children:e})]},t))}),r.jsx("ol",{className:"vtx-breadcrumb-list vtx-breadcrumb-list--mobile",children:m.map((n,t)=>r.jsxs(i.default.Fragment,{children:[u(n,t),t<m.length-1&&r.jsx("li",{className:h,"aria-hidden":"true",children:e})]},t))})]})});se.displayName="Breadcrumb";const ce=j(se),xe=({data:n,settings:e,theme:t,variant:a,size:o,className:i,style:l})=>{const d=(null==e?void 0:e.theme)||t||"modern",s=(null==e?void 0:e.variant)||a||"primary",c=(null==e?void 0:e.size)||o||"md",x=(null==e?void 0:e.className)||i||"",v=(null==e?void 0:e.style)||l,m=!1!==(null==e?void 0:e.showBreadcrumbs),p=!1!==(null==e?void 0:e.showAvatar),h=null==e?void 0:e.backgroundColor,u=()=>"lg"===c?"h1":"sm"===c?"h3":"h2",g=()=>"lg"===c?"h5":"sm"===c?"body2":"h6",b=()=>n.breadcrumbs&&0!==n.breadcrumbs.length&&m?r.jsx(ce,{items:n.breadcrumbs.map(r=>({label:String(r.label),href:r.href,onClick:r.onClick})),size:"lg"===c?"md":"sm"}):null,f=()=>n.avatar&&p?r.jsx(ae,{src:"string"==typeof n.avatar?n.avatar:n.avatar.src,alt:"string"==typeof n.avatar?String(n.title):n.avatar.alt,size:"lg"===c?"lg":"sm"===c?"sm":"md"}):null,y=()=>n.actions&&0!==n.actions.length?r.jsx(hn,{gap:"sm",children:n.actions.map((n,e)=>"link"===n.type?r.jsx(le,{href:n.href,variant:n.variant||s,className:"font-medium",children:n.label},e):r.jsx(Mr,{variant:"error"===n.variant?"danger":n.variant||(0===e?"primary":"outline"),size:"lg"===c?"lg":"sm"===c?"sm":"md",onClick:n.onClick,href:n.href,children:n.label},e))}):null,w=()=>n.badges&&0!==n.badges.length?r.jsx(hn,{gap:"xs",children:n.badges.map((n,e)=>r.jsx(An,{variant:"error"===n.variant?"error":n.variant||s,size:"lg"===c?"md":"sm",children:n.text},e))}):null;return r.jsx(In,{variant:"outlined",className:["vtx-header-widget",`vtx-header-widget--${d}`,`vtx-header-widget--${c}`,`vtx-header-widget--${s}`,x].filter(Boolean).join(" "),style:{...v,backgroundColor:h},padding:"minimal"===d?"md":"compact"===d?"sm":"lg",children:(()=>{switch(d){case"minimal":return r.jsxs(hn,{direction:"column",gap:"sm",children:[b(),r.jsxs(hn,{align:"center",justify:"between",gap:"md",children:[r.jsxs(hn,{align:"center",gap:"sm",children:[f(),r.jsxs(hn,{direction:"column",children:[r.jsx(gn,{variant:u(),className:"font-bold",children:n.title}),n.subtitle&&r.jsx(gn,{variant:g(),className:"text-neutral-600",children:n.subtitle})]})]}),y()]}),w()]});case"modern":return r.jsxs(hn,{direction:"column",gap:"lg",children:[b(),r.jsxs(hn,{align:"start",justify:"between",gap:"lg",children:[r.jsxs(hn,{direction:"column",gap:"md",children:[r.jsxs(hn,{align:"center",gap:"md",children:[f(),r.jsxs(hn,{direction:"column",gap:"xs",children:[r.jsx(gn,{variant:u(),className:"font-bold",children:n.title}),n.subtitle&&r.jsx(gn,{variant:g(),className:"text-neutral-700",children:n.subtitle}),n.description&&r.jsx(gn,{variant:"body2",className:"text-neutral-600",children:n.description})]})]}),w(),n.metadata&&r.jsx(hn,{gap:"lg",children:Object.entries(n.metadata).map(([n,e])=>r.jsxs(hn,{direction:"column",gap:"xs",children:[r.jsx(gn,{variant:"caption",className:"text-neutral-500 uppercase font-medium",children:n}),r.jsx(gn,{variant:"body2",className:"font-medium",children:String(e)})]},n))})]}),y()]})]});case"compact":return r.jsxs(hn,{direction:"column",gap:"xs",children:[b(),r.jsxs(hn,{align:"center",justify:"between",gap:"md",children:[r.jsxs(hn,{align:"center",gap:"sm",children:[f(),r.jsxs(hn,{direction:"column",children:[r.jsx(gn,{variant:u(),className:"font-semibold",children:n.title}),n.subtitle&&r.jsx(gn,{variant:"caption",className:"text-neutral-500",children:n.subtitle})]})]}),r.jsxs(hn,{align:"center",gap:"xs",children:[w(),n.actions&&n.actions.length>0&&r.jsx(Mr,{variant:"error"===n.actions[0].variant?"danger":n.actions[0].variant||"primary",size:"sm",onClick:n.actions[0].onClick,href:n.actions[0].href,children:n.actions[0].label})]})]})]});default:return r.jsxs(hn,{direction:"column",gap:"md",children:[r.jsx(gn,{variant:u(),className:"font-bold",children:n.title}),n.subtitle&&r.jsx(gn,{variant:g(),className:"text-neutral-600",children:n.subtitle}),w(),y()]})}})()})},ve=()=>{const{theme:r,setMode:n}=zr();return{tokens:r.tokens,mode:r.mode,setMode:n}},me=({data:e,settings:t,className:a="",style:o,borderRadius:l=!1,carouselComponent:d,slideComponent:s,imageComponent:c="img",carouselProps:x={},imageProps:v={}})=>{var m,p,h,u,g,b,f,y;const{tokens:w}=ve(),[k,j]=n.useState(0),[_,N]=n.useState(0),[z,C]=n.useState(0),[S,$]=i.default.useState(!1);i.default.useEffect(()=>{const r=()=>{$(window.innerWidth<768)};return r(),window.addEventListener("resize",r),()=>window.removeEventListener("resize",r)},[]);const{slides:M=[]}=e,T=(null==t?void 0:t.overlayTheme)||"dark",D=(null==t?void 0:t.height)||"60vh",I=(null==t?void 0:t.minHeight)||"350px",L=(null==t?void 0:t.maxHeight)||"600px",A=!1!==(null==t?void 0:t.showOverlay),R=(null==t?void 0:t.hideNavigationOnMobile)||!1,E=(null==t?void 0:t.buttonSize)||"md",F=(null==t?void 0:t.buttonVariant)||"primary",W=!R||!S,P={navigation:{enabled:!0},pagination:{enabled:!0,clickable:!0,type:"bullets"},autoplay:{enabled:!0,delay:5e3,disableOnInteraction:!1,pauseOnMouseEnter:!0},loop:!0,effect:"slide",speed:600,...null==t?void 0:t.swiperConfig},H=n.useCallback((r,n)=>{var e,t,a,o;return(null===(e=r.seo)||void 0===e?void 0:e.structuredData)?{"@context":"https://schema.org","@type":"ImageObject",url:r.image.src,description:r.image.alt||(null===(t=r.caption)||void 0===t?void 0:t.description),name:null===(a=r.caption)||void 0===a?void 0:a.heading,caption:null===(o=r.caption)||void 0===o?void 0:o.description,position:n+1,...r.seo.structuredData}:null},[]),V=n.useCallback(r=>{r&&window.open(r,"_blank","noopener,noreferrer")},[]),Y=()=>{j(r=>(r+1)%M.length)},q=()=>{j(r=>(r-1+M.length)%M.length)},U=()=>{if(!_||!z)return;const r=_-z,n=r<-50;r>50?Y():n&&q()};if(!M||0===M.length)return r.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"300px",color:(null===(p=null===(m=null==w?void 0:w.colors)||void 0===m?void 0:m.neutral)||void 0===p?void 0:p[500])||"#666"},children:"No slides available"});const G={width:"100%",height:`clamp(${I}, ${D}, ${L})`,position:"relative",overflow:"visible",...l&&{borderRadius:(null===(h=null==w?void 0:w.borderRadius)||void 0===h?void 0:h.lg)||"8px"},...o},X={position:"relative",width:"100%",height:"100%",background:(null===(g=null===(u=null==w?void 0:w.colors)||void 0===u?void 0:u.neutral)||void 0===g?void 0:g[50])||"#f5f5f5"},K={width:"100%",height:"100%",objectFit:"cover",userSelect:"none"},Q={position:"absolute",top:0,left:0,width:"100%",height:"100%",zIndex:1,pointerEvents:"none",transition:"opacity 0.3s ease",background:"dark"===T?"linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.7) 100%)":"linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.6) 100%)"},J=(r="right")=>{var n;const e=A?{}:{backdropFilter:"blur(8px)",background:"rgba(0, 0, 0, 0.45)",borderRadius:(null===(n=null==w?void 0:w.borderRadius)||void 0===n?void 0:n.lg)||"8px",boxShadow:"0 8px 32px rgba(0, 0, 0, 0.3)"};return{position:"absolute",display:"flex",flexDirection:"column",top:"50%",color:"#fff",maxWidth:"min(90%, 550px)",zIndex:3,padding:"clamp(16px, 3vw, 32px)",transform:"translateY(-50%)",...{left:{textAlign:"left",justifyContent:"flex-start",alignItems:"flex-start",left:"clamp(20px, 8%, 80px)"},center:{textAlign:"center",justifyContent:"center",alignItems:"center",left:"50%",transform:"translate(-50%, -50%)"},right:{textAlign:"right",justifyContent:"flex-end",alignItems:"flex-end",right:"clamp(20px, 8%, 80px)"}}[r],...e}},Z=(n,e)=>{const t=H(n,e),a=c;return r.jsxs("div",{style:X,children:[t&&r.jsx("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify(t)}}),r.jsx("div",{style:{position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:r.jsx(a,{src:n.image.src,alt:n.image.alt,style:K,loading:n.image.priority||0===e?"eager":"lazy",...v})}),A&&r.jsx("div",{style:Q}),n.caption&&r.jsx("div",{style:J(n.caption.position),children:r.jsxs("div",{style:{width:"100%"},children:[n.caption.heading&&r.jsx("div",{style:{marginBottom:"clamp(12px, 2vw, 16px)"},children:r.jsx(gn,{variant:"h2",as:"h2",textColor:"#fff",size:"clamp(24px, 5vw, 48px)",lineHeight:1.2,noMargin:!0,style:{textShadow:"2px 2px 8px rgba(0, 0, 0, 0.5)"},children:n.caption.heading})}),n.caption.subheading&&r.jsx("div",{style:{marginBottom:"clamp(12px, 2vw, 16px)"},children:r.jsx(gn,{variant:"h4",as:"h3",textColor:"#fff",weight:"medium",size:"clamp(18px, 3vw, 32px)",lineHeight:1.3,noMargin:!0,style:{textShadow:"2px 2px 8px rgba(0, 0, 0, 0.5)"},children:n.caption.subheading})}),n.caption.description&&r.jsx("div",{style:{marginBottom:"clamp(20px, 2.5vw, 24px)"},children:r.jsx(gn,{variant:"body1",textColor:"#fff",size:"clamp(14px, 2vw, 18px)",lineHeight:1.6,noMargin:!0,style:{textShadow:"1px 1px 4px rgba(0, 0, 0, 0.6)"},children:n.caption.description})}),n.caption.buttonText&&r.jsx(Mr,{variant:F,size:E,onClick:()=>{var r;return V(null===(r=n.caption)||void 0===r?void 0:r.buttonUrl)},style:{transition:"all 0.3s ease"},children:n.caption.buttonText})]})})]},n.id||e)};if(d&&s){const n=d,e=s;return r.jsx("div",{className:a,style:G,children:r.jsx(n,{...x,children:M.map((n,t)=>r.jsx(e,{children:Z(n,t)},n.id||t))})})}return r.jsxs("div",{className:a,style:G,children:[r.jsx("div",{style:{position:"relative",width:"100%",height:"100%",overflow:"hidden",borderRadius:l?(null===(b=null==w?void 0:w.borderRadius)||void 0===b?void 0:b.lg)||"8px":"0"},children:r.jsx("div",{onTouchStart:r=>{N(r.targetTouches[0].clientX)},onTouchEnd:r=>{C(r.changedTouches[0].clientX),U()},style:{position:"relative",width:"100%",height:"100%",transform:`translateX(-${100*k}%)`,transition:"transform 0.3s ease",display:"flex",touchAction:"pan-y"},children:M.map((n,e)=>r.jsx("div",{style:{minWidth:"100%",height:"100%"},children:Z(n,e)},n.id||e))})}),M.length>1&&(null===(f=P.navigation)||void 0===f?void 0:f.enabled)&&W&&r.jsxs(r.Fragment,{children:[r.jsx(Mr,{variant:"ghost",iconOnly:!0,darkText:!0,onClick:q,"aria-label":"Previous slide",style:{position:"absolute",left:"20px",top:"50%",transform:"translateY(-50%)",width:"44px",height:"44px",backgroundColor:"#ffffff",borderRadius:"50%",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.15)",zIndex:10},children:r.jsx(B,{size:34})}),r.jsx(Mr,{variant:"ghost",iconOnly:!0,darkText:!0,onClick:Y,"aria-label":"Next slide",style:{position:"absolute",right:"20px",top:"50%",transform:"translateY(-50%)",width:"44px",height:"44px",backgroundColor:"#ffffff",borderRadius:"50%",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.15)",zIndex:10},children:r.jsx(O,{size:34})})]}),M.length>1&&(null===(y=P.pagination)||void 0===y?void 0:y.enabled)&&r.jsx("div",{style:{position:"absolute",bottom:"clamp(12px, 3vw, 20px)",left:"50%",transform:"translateX(-50%)",display:"flex",gap:"clamp(6px, 1.5vw, 10px)",zIndex:20,padding:"8px 12px",backgroundColor:"rgba(0, 0, 0, 0.4)",borderRadius:"20px",backdropFilter:"blur(4px)",pointerEvents:"auto"},children:M.map((n,e)=>r.jsx("button",{onClick:()=>(r=>{j(r)})(e),style:{width:k===e?"28px":"10px",height:"10px",borderRadius:k===e?"5px":"50%",border:"none",backgroundColor:k===e?"#fff":"rgba(255, 255, 255, 0.6)",cursor:"pointer",transition:"all 0.3s ease",padding:0,pointerEvents:"auto"},"aria-label":`Go to slide ${e+1}`},e))})]})},pe=({data:e,className:t="",theme:a="card",style:o,autoplay:l=!1,autoplayDelay:d=5e3,borderRadius:s=!0,authorPosition:c="top"})=>{var x,v,m,p,h,u,g,b,f,y,w,k;const{tokens:j}=ve(),[_,N]=n.useState(0),{testimonials:z,showNavigation:C=!0,showDots:S=!0}=e;i.default.useEffect(()=>{if(!l||z.length<=1)return;const r=setInterval(()=>{N(r=>(r+1)%z.length)},d);return()=>clearInterval(r)},[l,d,z.length]);const $=n.useCallback(()=>{N(r=>(r+1)%z.length)},[z.length]),M=n.useCallback(()=>{N(r=>(r-1+z.length)%z.length)},[z.length]),T=n.useCallback(r=>{N(r)},[]);if(!z||0===z.length)return r.jsx(hn,{justify:"center",align:"center",style:{padding:"48px 24px"},children:r.jsx(gn,{variant:"body1",textColor:(null===(v=null===(x=null==j?void 0:j.colors)||void 0===x?void 0:x.neutral)||void 0===v?void 0:v[500])||"#666",children:"No testimonials available"})});const D=z[_],I=(()=>{var r,n,e,t,i,l,d;const c={position:"relative",width:"100%",padding:"48px 32px",minHeight:"400px",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden",...s&&{borderRadius:(null===(r=null==j?void 0:j.borderRadius)||void 0===r?void 0:r.xl)||"16px"},transition:"all 0.3s ease",...o};switch(a){case"minimal":return{...c,background:"transparent",padding:"48px 24px"};case"card":return{...c,background:"#ffffff",border:`1px solid ${(null===(e=null===(n=null==j?void 0:j.colors)||void 0===n?void 0:n.neutral)||void 0===e?void 0:e[200])||"#e5e7eb"}`,boxShadow:"0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)"};case"gradient":return{...c,background:"linear-gradient(135deg, #667eea 0%, #764ba2 100%)",color:"#ffffff",boxShadow:"0 10px 40px rgba(102, 126, 234, 0.25)"};case"modern":return{...c,background:(null===(i=null===(t=null==j?void 0:j.colors)||void 0===t?void 0:t.neutral)||void 0===i?void 0:i[900])||"#111827",color:"#ffffff",boxShadow:"0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.08)"};case"professional":return{...c,background:"#ffffff",border:`1px solid ${(null===(d=null===(l=null==j?void 0:j.colors)||void 0===l?void 0:l.neutral)||void 0===d?void 0:d[200])||"#e5e7eb"}`,boxShadow:"0 10px 30px rgba(0, 0, 0, 0.08)"};case"glassmorphism":return{...c,background:"rgba(255, 255, 255, 0.15)",backdropFilter:"blur(20px)",border:"1px solid rgba(255, 255, 255, 0.25)",boxShadow:"0 8px 32px 0 rgba(31, 38, 135, 0.37)"};default:return c}})(),L=(()=>{var r,n;return"gradient"===a||"modern"===a?"#ffffff":"glassmorphism"===a?"#1f2937":(null===(n=null===(r=null==j?void 0:j.colors)||void 0===r?void 0:r.neutral)||void 0===n?void 0:n[900])||"#111827"})(),A=(()=>{var r,n;return"gradient"===a||"modern"===a?"rgba(255, 255, 255, 0.8)":"glassmorphism"===a?"#4b5563":(null===(n=null===(r=null==j?void 0:j.colors)||void 0===r?void 0:r.neutral)||void 0===n?void 0:n[600])||"#4b5563"})(),R=()=>{var n,e;return r.jsxs(hn,{direction:"column",align:"center",gap:"8px",children:[D.author.avatar&&r.jsx(ae,{src:D.author.avatar,alt:D.author.name,size:"lg",style:{width:"80px",height:"80px",border:"gradient"===a||"modern"===a?"3px solid rgba(255, 255, 255, 0.2)":`3px solid ${(null===(e=null===(n=null==j?void 0:j.colors)||void 0===n?void 0:n.neutral)||void 0===e?void 0:e[200])||"#e5e7eb"}`,boxShadow:"0 4px 12px rgba(0, 0, 0, 0.1)"}}),r.jsx(gn,{variant:"h4",weight:"bold",textColor:L,align:"center",style:{fontSize:"20px",margin:0,lineHeight:1.3},children:D.author.name}),r.jsxs(hn,{direction:"column",align:"center",gap:"2px",children:[D.author.role&&r.jsx(gn,{variant:"body2",textColor:A,align:"center",style:{fontSize:"14px",lineHeight:1.4},children:D.author.role}),D.author.company&&r.jsx(gn,{variant:"body2",weight:"medium",textColor:A,align:"center",style:{fontSize:"14px",lineHeight:1.4},children:D.author.company})]}),D.date&&r.jsx(gn,{variant:"caption",textColor:A,align:"center",style:{fontSize:"13px",opacity:.7},children:D.date})]})};return r.jsxs("div",{className:t,style:I,children:[r.jsxs(hn,{direction:"column",align:"center",justify:"center",gap:"32px",style:{maxWidth:"800px",width:"100%",margin:"0 auto",position:"relative",zIndex:1},children:["top"===c&&R(),r.jsx("div",{style:{fontSize:"48px",lineHeight:1,color:"gradient"===a||"modern"===a?"rgba(255, 255, 255, 0.2)":(null===(p=null===(m=null==j?void 0:j.colors)||void 0===m?void 0:m.neutral)||void 0===p?void 0:p[300])||"#d1d5db",fontFamily:"Georgia, serif",marginBottom:"-16px"},children:'"'}),D.content&&r.jsx(gn,{variant:"body1",textColor:L,align:"center",style:{fontSize:"clamp(18px, 2.5vw, 22px)",lineHeight:1.7,fontWeight:400,maxWidth:"700px"},children:D.content}),D.rating&&r.jsx("div",{style:{marginTop:"-8px"},children:(E=D.rating,r.jsx(hn,{gap:"4px",justify:"minimal"===a?"start":"center",children:[1,2,3,4,5].map(n=>r.jsx("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:n<=E?"#fbbf24":"#e5e7eb",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("path",{d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"})},n))}))}),"bottom"===c&&r.jsx("div",{style:{marginTop:"8px"},children:R()})]}),z.length>1&&C&&r.jsxs(r.Fragment,{children:[r.jsx("button",{onClick:M,style:{position:"absolute",left:"24px",top:"50%",transform:"translateY(-50%)",backgroundColor:"gradient"===a||"modern"===a?"rgba(255, 255, 255, 0.15)":"#ffffff",borderRadius:"50%",width:"48px",height:"48px",border:"gradient"===a||"modern"===a?"none":`2px solid ${(null===(u=null===(h=null==j?void 0:j.colors)||void 0===h?void 0:h.neutral)||void 0===u?void 0:u[200])||"#e5e7eb"}`,display:"flex",alignItems:"center",justifyContent:"center",color:"gradient"===a||"modern"===a?"#ffffff":(null===(b=null===(g=null==j?void 0:j.colors)||void 0===g?void 0:g.neutral)||void 0===b?void 0:b[700])||"#374151",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.12)",cursor:"pointer",zIndex:10,transition:"all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",backdropFilter:"blur(8px)"},"aria-label":"Previous testimonial",onMouseEnter:r=>{r.currentTarget.style.transform="translateY(-50%) scale(1.1)",r.currentTarget.style.boxShadow="0 6px 20px rgba(0, 0, 0, 0.18)"},onMouseLeave:r=>{r.currentTarget.style.transform="translateY(-50%) scale(1)",r.currentTarget.style.boxShadow="0 4px 12px rgba(0, 0, 0, 0.12)"},children:r.jsx(B,{size:24})}),r.jsx("button",{onClick:$,style:{position:"absolute",right:"24px",top:"50%",transform:"translateY(-50%)",backgroundColor:"gradient"===a||"modern"===a?"rgba(255, 255, 255, 0.15)":"#ffffff",borderRadius:"50%",width:"48px",height:"48px",border:"gradient"===a||"modern"===a?"none":`2px solid ${(null===(y=null===(f=null==j?void 0:j.colors)||void 0===f?void 0:f.neutral)||void 0===y?void 0:y[200])||"#e5e7eb"}`,display:"flex",alignItems:"center",justifyContent:"center",color:"gradient"===a||"modern"===a?"#ffffff":(null===(k=null===(w=null==j?void 0:j.colors)||void 0===w?void 0:w.neutral)||void 0===k?void 0:k[700])||"#374151",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.12)",cursor:"pointer",zIndex:10,transition:"all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",backdropFilter:"blur(8px)"},"aria-label":"Next testimonial",onMouseEnter:r=>{r.currentTarget.style.transform="translateY(-50%) scale(1.1)",r.currentTarget.style.boxShadow="0 6px 20px rgba(0, 0, 0, 0.18)"},onMouseLeave:r=>{r.currentTarget.style.transform="translateY(-50%) scale(1)",r.currentTarget.style.boxShadow="0 4px 12px rgba(0, 0, 0, 0.12)"},children:r.jsx(O,{size:24})})]}),z.length>1&&S&&r.jsx(hn,{justify:"center",gap:"12px",style:{position:"absolute",bottom:"32px",left:"50%",transform:"translateX(-50%)",zIndex:10},children:z.map((n,e)=>{var t,o,i,l;return r.jsx("button",{onClick:()=>T(e),style:{width:_===e?"40px":"12px",height:"12px",borderRadius:_===e?"6px":"50%",border:"none",backgroundColor:_===e?"gradient"===a||"modern"===a?"#ffffff":(null===(o=null===(t=null==j?void 0:j.colors)||void 0===t?void 0:t.primary)||void 0===o?void 0:o[600])||"#2563eb":"gradient"===a||"modern"===a?"rgba(255, 255, 255, 0.3)":(null===(l=null===(i=null==j?void 0:j.colors)||void 0===i?void 0:i.neutral)||void 0===l?void 0:l[300])||"#d1d5db",cursor:"pointer",transition:"all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",boxShadow:_===e?"0 2px 8px rgba(0, 0, 0, 0.15)":"none"},"aria-label":`Go to testimonial ${e+1}`,onMouseEnter:r=>{_!==e&&(r.currentTarget.style.transform="scale(1.2)")},onMouseLeave:r=>{r.currentTarget.style.transform="scale(1)"}},e)})})]});var E},he=({items:e=[],className:t="",style:a,borderRadius:o=!0,autoplay:i=!1,autoplayDelay:l=3e3,itemsPerView:d={mobile:1,tablet:2,desktop:3},gap:s="20px",showNavigation:c=!0,showPagination:x=!0,scrollBehavior:v="page"})=>{const{tokens:m}=ve(),[p,h]=n.useState(0),[u,g]=n.useState(d.desktop||3);n.useEffect(()=>{const r=()=>{const r=window.innerWidth;g(r<768?d.mobile||1:r<1024?d.tablet||2:d.desktop||3)};return r(),window.addEventListener("resize",r),()=>window.removeEventListener("resize",r)},[d]);const b=Math.ceil(e.length/u),f=e.length-u;n.useEffect(()=>{if(!i||0===e.length)return;const r=setInterval(()=>{w()},l);return()=>clearInterval(r)},[i,l,p,u]);const y=n.useCallback(()=>{h("page"===v?r=>Math.max(0,r-u):r=>Math.max(0,r-1))},[u,v]),w=n.useCallback(()=>{h("page"===v?r=>{const n=r+u;return n>f?0:n}:r=>{const n=r+1;return n>f?0:n})},[u,f,v]),k=n.useCallback(r=>{h(r*u)},[u]),j=()=>Math.floor(p/u),_={position:"relative",width:"100%",overflow:"hidden",padding:"clamp(20px, 4vw, 40px)",backgroundColor:m.colors.neutral[50],borderRadius:o?m.borderRadius.lg:"0",boxShadow:m.shadows.sm,...a},N={display:"flex",gap:"number"==typeof s?`${s}px`:s,transition:"transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)",transform:`translateX(-${p*(100/u)}%)`},z={flex:`0 0 calc((100% - (${"number"==typeof s?`${s}px`:s} * ${u-1})) / ${u})`,minWidth:0},C={position:"absolute",top:"50%",transform:"translateY(-50%)",zIndex:10,backgroundColor:"#ffffff",border:`1px solid ${m.colors.neutral[300]}`,borderRadius:m.borderRadius.full,width:"40px",height:"40px",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",boxShadow:m.shadows.md,transition:"all 0.2s ease"};if(0===e.length)return r.jsx("div",{style:_,children:r.jsx("div",{style:{textAlign:"center",padding:"40px",color:m.colors.neutral[500]},children:"No items to display"})});const S=p>0,$=p<f;return r.jsxs("div",{className:t,style:_,children:[c&&r.jsxs(r.Fragment,{children:[r.jsx("button",{onClick:y,disabled:!S,style:{...C,left:"10px",opacity:S?1:.3,cursor:S?"pointer":"not-allowed"},onMouseEnter:r=>{S&&(r.currentTarget.style.transform="translateY(-50%) scale(1.1)",r.currentTarget.style.backgroundColor=m.colors.neutral[100]||"#f5f5f5")},onMouseLeave:r=>{r.currentTarget.style.transform="translateY(-50%) scale(1)",r.currentTarget.style.backgroundColor="#ffffff"},"aria-label":"Previous",children:r.jsx(B,{style:{width:"20px",height:"20px",color:m.colors.neutral[900]}})}),r.jsx("button",{onClick:w,disabled:!$&&!i,style:{...C,right:"10px",opacity:$||i?1:.3,cursor:$||i?"pointer":"not-allowed"},onMouseEnter:r=>{($||i)&&(r.currentTarget.style.transform="translateY(-50%) scale(1.1)",r.currentTarget.style.backgroundColor=m.colors.neutral[100]||"#f5f5f5")},onMouseLeave:r=>{r.currentTarget.style.transform="translateY(-50%) scale(1)",r.currentTarget.style.backgroundColor="#ffffff"},"aria-label":"Next",children:r.jsx(O,{style:{width:"20px",height:"20px",color:m.colors.neutral[900]}})})]}),r.jsx("div",{style:N,children:e.map((n,e)=>r.jsx("div",{style:z,children:n},e))}),x&&b>1&&r.jsx("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",gap:"8px",marginTop:"24px"},children:Array.from({length:b}).map((n,e)=>{return r.jsx("div",{onClick:()=>k(e),style:(t=j()===e,{width:t?"24px":"8px",height:"8px",borderRadius:m.borderRadius.full,backgroundColor:t?m.colors.primary[500]:m.colors.neutral[300],cursor:"pointer",transition:"all 0.3s ease",opacity:t?1:.5}),onMouseEnter:r=>{j()!==e&&(r.currentTarget.style.opacity="0.8")},onMouseLeave:r=>{j()!==e&&(r.currentTarget.style.opacity="0.5")},role:"button","aria-label":`Go to page ${e+1}`},e);var t})}),r.jsxs("div",{style:{position:"absolute",left:"-9999px"},"aria-live":"polite","aria-atomic":"true",children:["Showing items ",p+1," to ",Math.min(p+u,e.length)," of ",e.length]})]})},ue=({data:n,settings:e={},theme:t="modern",className:a="",style:o})=>{var i,l,d,s,c,x,v,m,p,h,u,g,b,f,y,w,k,j;let _="md";try{const{useThemeContext:r}=require("../../../theme/ThemeProvider"),{theme:n}=r();_=n.defaultSize}catch{}const N=null!==(i=e.layout)&&void 0!==i?i:"media-left",z=null!==(l=e.variant)&&void 0!==l?l:"minimal",C=null!==(d=e.size)&&void 0!==d?d:_,S=C,$=null!==(s=e.gap)&&void 0!==s?s:"lg",M=null!==(c=e.padding)&&void 0!==c?c:"lg",T=null!==(x=e.contentAlign)&&void 0!==x?x:"left",D=null!==(v=e.verticalAlign)&&void 0!==v?v:"center",I=null!==(m=e.mediaWidth)&&void 0!==m?m:"40%",L=null!==(p=e.rounded)&&void 0!==p&&p,A=null!==(h=e.shadow)&&void 0!==h&&h,R=null!==(u=e.hover)&&void 0!==u?u:{enabled:!1},E=null!==(g=e.responsive)&&void 0!==g?g:{stackOnMobile:!0},F=null!==(b=e.overlay)&&void 0!==b?b:{enabled:!1},B={none:"0",xs:"0.5rem",sm:"1rem",md:"1.5rem",lg:"2rem",xl:"3rem","2xl":"4rem"},O={none:"0",xs:"0.5rem",sm:"1rem",md:"1.5rem",lg:"2rem",xl:"3rem","2xl":"4rem"},W={xs:{eyebrow:"0.7rem",heading:"1.25rem",subheading:"1rem",body:"0.875rem",caption:"0.75rem",scale:.8},sm:{eyebrow:"0.75rem",heading:"1.5rem",subheading:"1.125rem",body:"0.95rem",caption:"0.8rem",scale:.9},md:{eyebrow:"0.8rem",heading:"2rem",subheading:"1.5rem",body:"1rem",caption:"0.875rem",scale:1},lg:{eyebrow:"0.85rem",heading:"2.5rem",subheading:"1.75rem",body:"1.1rem",caption:"0.95rem",scale:1.1},xl:{eyebrow:"0.9rem",heading:"3rem",subheading:"2rem",body:"1.25rem",caption:"1rem",scale:1.2}},P=()=>r.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("path",{d:"M16.6667 5L7.50004 14.1667L3.33337 10",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),H=()=>{if(!n.media)return null;const{type:e="image",src:t,alt:a="",items:o,icon:i,iconSize:l="lg",aspectRatio:d,objectFit:s="cover",rounded:c,shadow:x,border:v,zoom:m}=n.media,p={width:"100%",height:"auto"===d?"auto":void 0,aspectRatio:d&&"auto"!==d?d.replace(":","/"):void 0,objectFit:s,borderRadius:c?"boolean"==typeof c?"0.5rem":`var(--border-radius-${c})`:void 0,boxShadow:x?"boolean"==typeof x?"0 4px 6px rgba(0, 0, 0, 0.1)":`var(--shadow-${x})`:void 0,border:v?"boolean"==typeof v?"1px solid var(--color-border)":`${v} solid var(--color-border)`:void 0,transition:m?"transform 0.3s ease":void 0},h={overflow:m?"hidden":"visible",borderRadius:c?"boolean"==typeof c?"0.5rem":`var(--border-radius-${c})`:void 0},u=m?"vtx-content-block__media--zoom":"";switch(e){case"image":if(t)return r.jsx("div",{className:"vtx-content-block__media-container",style:h,children:r.jsx("img",{src:t,alt:a,className:`vtx-content-block__media ${u}`,style:p})});break;case"avatar":if(t){const n="xl"===l?"lg":l;return r.jsx(ae,{src:t,alt:a,size:n,shape:"circle",className:"vtx-content-block__avatar"})}break;case"icon":if(i){const n={sm:"2rem",md:"3rem",lg:"4rem",xl:"6rem"};return r.jsx("div",{className:"vtx-content-block__icon",style:{fontSize:n[l],width:n[l],height:n[l],display:"flex",alignItems:"center",justifyContent:"center"},children:i})}break;case"gallery":if(o&&o.length>0)return r.jsx("div",{className:"vtx-content-block__gallery",style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(150px, 1fr))",gap:"0.5rem"},children:o.map((n,e)=>r.jsxs("div",{style:h,children:[r.jsx("img",{src:n.src,alt:n.alt,className:"vtx-content-block__gallery-item",style:p}),n.caption&&r.jsx(gn,{variant:"caption",className:"vtx-content-block__gallery-caption",style:{marginTop:"0.5rem"},children:n.caption})]},e))});break;case"logo":case"illustration":if(t)return r.jsx("div",{className:"vtx-content-block__media-container",style:{...h,display:"flex",alignItems:"center",justifyContent:"center"},children:r.jsx("img",{src:t,alt:a,className:"vtx-content-block__media",style:{...p,maxWidth:"100%",height:"auto"}})})}return null},V=()=>{const e=n.content||{},t=n.colors||{};return r.jsxs("div",{className:"vtx-content-block__content",style:{textAlign:T},children:[e.eyebrow&&r.jsx(gn,{variant:e.eyebrowVariant||"overline",className:"vtx-content-block__eyebrow",style:{color:t.eyebrow,marginBottom:B[$]||B.sm,display:"block",textTransform:"uppercase",letterSpacing:"0.05em",fontSize:W[S].eyebrow},children:e.eyebrow}),n.tags&&n.tags.length>0&&r.jsx(hn,{gap:"xs",wrap:"wrap",style:{marginBottom:B[$]||B.md},children:n.tags.map((n,e)=>{const t="danger"===n.variant?"error":"secondary"===n.variant?"primary":n.variant||"primary";return n.href?r.jsx(le,{href:n.href,children:r.jsxs(An,{variant:t,children:[n.icon&&r.jsx("span",{style:{marginRight:"0.25rem"},children:n.icon}),n.text]})},e):r.jsxs(An,{variant:t,children:[n.icon&&r.jsx("span",{style:{marginRight:"0.25rem"},children:n.icon}),n.text]},e)})}),e.heading&&r.jsx(gn,{variant:e.headingVariant||"h2",className:"vtx-content-block__heading",style:{color:t.heading,marginBottom:e.subheading||e.body?B[$]||B.md:"0",fontWeight:"bold",fontSize:W[S].heading},children:e.heading}),e.subheading&&r.jsx(gn,{variant:e.subheadingVariant||"h4",className:"vtx-content-block__subheading",style:{color:t.subheading,marginBottom:e.body?B[$]||B.md:"0",fontSize:W[S].subheading},children:e.subheading}),e.body&&r.jsx(gn,{variant:e.bodyVariant||"body1",className:"vtx-content-block__body",style:{color:t.body,marginBottom:e.list||n.product||n.stats?B[$]||B.md:"0",lineHeight:"1.6",fontSize:W[S].body},children:e.body}),e.list&&e.list.length>0&&r.jsx("ul",{className:"vtx-content-block__list",style:{margin:`${B[$]||B.md} 0`,padding:0,listStyle:"none"},children:e.list.map((n,t)=>r.jsxs("li",{style:{display:"flex",alignItems:"flex-start",marginBottom:B.sm},children:["check"===e.listType&&n.checked&&r.jsx("span",{style:{color:"var(--color-success)",marginRight:"0.5rem",flexShrink:0},children:r.jsx(P,{})}),"icon"===e.listType&&n.icon&&r.jsx("span",{style:{marginRight:"0.5rem",flexShrink:0},children:n.icon}),"bullet"===e.listType&&r.jsx("span",{style:{marginRight:"0.5rem",flexShrink:0},children:"•"}),"number"===e.listType&&r.jsxs("span",{style:{marginRight:"0.5rem",flexShrink:0},children:[t+1,"."]}),r.jsx(gn,{variant:"body1",style:{flex:1,fontSize:W[S].body},children:n.text})]},t))}),n.product&&r.jsxs("div",{className:"vtx-content-block__product",style:{margin:`${B[$]||B.md} 0`},children:[r.jsx(hn,{gap:"sm",align:"center",wrap:"wrap",children:n.product.price&&r.jsxs(hn,{gap:"xs",align:"center",children:[r.jsxs(gn,{variant:"h3",style:{fontWeight:"bold",color:"var(--color-primary)",fontSize:`calc(${W[S].heading} * 0.8)`},children:[n.product.currency||"$",n.product.price]}),n.product.comparePrice&&r.jsxs(gn,{variant:"body1",style:{textDecoration:"line-through",color:"var(--color-text-muted)",fontSize:W[S].body},children:[n.product.currency||"$",n.product.comparePrice]}),n.product.discount&&r.jsx(An,{variant:"error",children:n.product.discount})]})}),r.jsxs(hn,{gap:"sm",align:"center",style:{marginTop:B.sm},wrap:"wrap",children:[n.product.rating&&r.jsxs(hn,{gap:"xs",align:"center",children:[r.jsxs(gn,{variant:"body1",style:{fontSize:W[S].body},children:["⭐ ",n.product.rating]}),n.product.reviewCount&&r.jsxs(gn,{variant:"body2",style:{color:"var(--color-text-muted)",fontSize:W[S].caption},children:["(",n.product.reviewCount," reviews)"]})]}),n.product.stock&&r.jsx(An,{variant:"in-stock"===n.product.stock||"number"==typeof n.product.stock&&n.product.stock>0?"success":"limited"===n.product.stock?"warning":"error",children:"number"==typeof n.product.stock?`${n.product.stock} in stock`:n.product.stock}),n.product.sku&&r.jsxs(gn,{variant:"body2",style:{color:"var(--color-text-muted)",fontSize:W[S].caption},children:["SKU: ",n.product.sku]})]})]}),n.stats&&n.stats.length>0&&r.jsx("div",{className:"vtx-content-block__stats",style:{margin:`${B[$]||B.lg} 0`},children:r.jsx(hn,{gap:"lg",wrap:"wrap",justify:"center"===T?"center":"right"===T?"end":"start",children:n.stats.map((n,e)=>r.jsxs("div",{className:"vtx-content-block__stat-item",children:[n.icon&&r.jsx("div",{style:{marginBottom:B.sm,fontSize:`calc(1.5rem * ${W[S].scale})`},children:n.icon}),r.jsx(gn,{variant:"h3",style:{fontWeight:"bold",marginBottom:B.xs,fontSize:`calc(${W[S].heading} * 0.85)`},children:n.value}),r.jsx(gn,{variant:"body2",style:{color:"var(--color-text-muted)",fontSize:W[S].body},children:n.label})]},e))})}),n.quote&&r.jsxs("div",{className:"vtx-content-block__quote",style:{margin:`${B[$]||B.lg} 0`,padding:`1rem ${B.lg}`,borderLeft:"4px solid var(--color-primary)",backgroundColor:"var(--color-background-subtle)",borderRadius:"0.25rem"},children:[r.jsxs(gn,{variant:"body1",style:{fontStyle:"italic",marginBottom:n.quote.author?B.sm:"0",fontSize:W[S].body},children:['"',n.quote.text,'"']}),n.quote.author&&r.jsxs(gn,{variant:"body2",style:{color:"var(--color-text-muted)",fontWeight:"bold",fontSize:W[S].caption},children:["— ",n.quote.author]})]}),n.metadata&&n.metadata.length>0&&r.jsx("div",{className:"vtx-content-block__metadata",style:{margin:`${B[$]||B.md} 0`},children:r.jsx(hn,{direction:"column",gap:"xs",children:n.metadata.map((n,e)=>r.jsxs(hn,{gap:"sm",align:"center",children:[n.icon&&r.jsx("span",{style:{color:"var(--color-text-muted)"},children:n.icon}),r.jsxs(gn,{variant:"body2",style:{fontSize:W[S].caption},children:[r.jsxs("strong",{children:[n.label,":"]})," ",n.value]})]},e))})}),n.author&&r.jsx("div",{className:"vtx-content-block__author",style:{margin:`${B[$]||B.lg} 0`},children:r.jsxs(hn,{gap:"md",align:"center",children:[n.author.avatar&&r.jsx(ae,{src:n.author.avatar,alt:n.author.name,size:"xs"===C?"sm":"sm"===C?"md":"lg"}),r.jsxs("div",{children:[r.jsx(gn,{variant:"body1",style:{fontWeight:"bold",marginBottom:B.xs,fontSize:W[S].subheading},children:n.author.name}),n.author.role&&r.jsxs(gn,{variant:"body2",style:{color:"var(--color-text-muted)",fontSize:W[S].caption},children:[n.author.role,n.author.company&&` at ${n.author.company}`]}),n.author.social&&n.author.social.length>0&&r.jsx(hn,{gap:"sm",style:{marginTop:B.sm},children:n.author.social.map((n,e)=>r.jsx(le,{href:n.url,target:"_blank",rel:"noopener noreferrer",style:{fontSize:W[S].body},children:n.icon||n.platform},e))})]})]})}),e.caption&&r.jsx(gn,{variant:"caption",className:"vtx-content-block__caption",style:{color:t.caption||"var(--color-text-muted)",marginTop:B[$]||B.md,display:"block",fontSize:W[S].caption},children:e.caption}),e.footnote&&r.jsx(gn,{variant:"caption",className:"vtx-content-block__footnote",style:{color:"var(--color-text-muted)",marginTop:B.sm,fontSize:W[S].caption,display:"block"},children:e.footnote}),n.actions&&n.actions.length>0&&r.jsx(hn,{gap:"md",style:{marginTop:B[$]||B.lg},wrap:"wrap",justify:"center"===T?"center":"right"===T?"end":"start",children:n.actions.map((n,e)=>"link"===n.type?r.jsxs(le,{href:n.href,variant:n.variant,children:["left"===n.iconPosition&&n.icon&&r.jsx("span",{style:{marginRight:"0.5rem"},children:n.icon}),n.label,"right"===n.iconPosition&&n.icon&&r.jsx("span",{style:{marginLeft:"0.5rem"},children:n.icon})]},e):r.jsxs(Mr,{variant:"outline"===n.variant?"outline":"ghost"===n.variant?"ghost":n.variant,size:n.size||"md",onClick:n.onClick,href:n.href,style:{width:n.fullWidth?"100%":"auto"},children:["left"===n.iconPosition&&n.icon&&r.jsx("span",{style:{marginRight:"0.5rem"},children:n.icon}),n.label,"right"===n.iconPosition&&n.icon&&r.jsx("span",{style:{marginLeft:"0.5rem"},children:n.icon})]},e))})]})},Y=(()=>{const r={container:{display:"flex",gap:B[$],alignItems:D},media:{},content:{}};switch(N){case"media-left":return{...r,container:{...r.container,flexDirection:"row"},media:{flex:`0 0 ${I}`,maxWidth:I},content:{flex:"1"}};case"media-right":return{...r,container:{...r.container,flexDirection:"row-reverse"},media:{flex:`0 0 ${I}`,maxWidth:I},content:{flex:"1"}};case"split-equal":return{...r,container:{...r.container,flexDirection:"row"},media:{flex:"1"},content:{flex:"1"}};case"media-top":return{...r,container:{...r.container,flexDirection:"column"},media:{width:"100%"},content:{width:"100%"}};case"media-bottom":return{...r,container:{...r.container,flexDirection:"column-reverse"},media:{width:"100%"},content:{width:"100%"}};case"centered":return{...r,container:{...r.container,flexDirection:"column",alignItems:"center"},media:{maxWidth:"600px"},content:{maxWidth:"800px",textAlign:"center"}};case"centered-media-top":return{...r,container:{...r.container,flexDirection:"column",alignItems:"center"},media:{marginBottom:"1rem"},content:{textAlign:"center"}};case"sidebar-left":return{...r,container:{...r.container,flexDirection:"row"},media:{flex:"0 0 30%",maxWidth:"30%"},content:{flex:"1"}};case"sidebar-right":return{...r,container:{...r.container,flexDirection:"row-reverse"},media:{flex:"0 0 30%",maxWidth:"30%"},content:{flex:"1"}};case"grid-2col":case"grid-3col":const n="grid-2col"===N?2:3;return{...r,container:{display:"grid",gridTemplateColumns:`repeat(${n}, 1fr)`,gap:B[$]},media:{},content:{}};case"media-background":return{...r,container:{position:"relative",minHeight:"400px",display:"flex",alignItems:"center",justifyContent:"center"},media:{position:"absolute",top:0,left:0,width:"100%",height:"100%",zIndex:0},content:{position:"relative",zIndex:2,maxWidth:"800px",padding:O[M],textAlign:"center"}};default:return r}})(),q={...o,background:(null===(f=e.background)||void 0===f?void 0:f.gradient)||(null===(y=e.background)||void 0===y?void 0:y.color)||(null===(w=n.colors)||void 0===w?void 0:w.background),opacity:null===(k=e.background)||void 0===k?void 0:k.opacity,borderRadius:L?"boolean"==typeof L?"0.5rem":`var(--border-radius-${L})`:void 0,boxShadow:A?"boolean"==typeof A?"0 4px 6px rgba(0, 0, 0, 0.1)":`var(--shadow-${A})`:void 0,padding:"minimal"!==z?O[M]:void 0,border:e.border?"boolean"==typeof e.border||"all"===e.border?"1px solid var(--color-border)":"left"===e.border||"right"===e.border||"top"===e.border||"bottom"===e.border?"none":void 0:void 0,borderLeft:"left"===e.border?"4px solid var(--color-primary)":void 0,borderRight:"right"===e.border?"4px solid var(--color-primary)":void 0,borderTop:"top"===e.border?"4px solid var(--color-primary)":void 0,borderBottom:"bottom"===e.border?"4px solid var(--color-primary)":void 0,transition:(null==R?void 0:R.enabled)?"transform 0.3s ease, box-shadow 0.3s ease":void 0},U=(null==R?void 0:R.enabled)?`vtx-content-block--hover-${R.effect||"lift"}`:"",G=["vtx-content-block",`vtx-content-block--${N}`,`vtx-content-block--${t}`,`vtx-content-block--${z}`,U,a].filter(Boolean).join(" ");if("media-background"===N)return r.jsx("div",{className:G,style:q,children:r.jsxs("div",{style:Y.container,children:[r.jsx("div",{style:Y.media,children:H()}),F.enabled&&r.jsx("div",{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",backgroundColor:F.color||"rgba(0, 0, 0, 0.5)",opacity:null!==(j=F.opacity)&&void 0!==j?j:.5,backdropFilter:F.blur?`blur(${F.blur}px)`:void 0,zIndex:1}}),r.jsx("div",{style:Y.content,children:V()})]})});if("grid-2col"===N||"grid-3col"===N)return r.jsx("div",{className:G,style:q,children:r.jsxs("div",{style:Y.container,children:[n.media&&r.jsx("div",{style:Y.media,children:H()}),r.jsx("div",{style:Y.content,children:V()})]})});if("card"===z||"elevated"===z||"outlined"===z||"bordered"===z){const e="card"===z||"elevated"===z?"elevated":"outlined"===z||"bordered"===z?"outlined":void 0;return r.jsx(In,{variant:e,padding:M,className:G,style:q,children:r.jsxs("div",{style:Y.container,children:[n.media&&r.jsx("div",{style:Y.media,children:H()}),r.jsx("div",{style:Y.content,children:V()})]})})}return r.jsxs("div",{className:G,style:q,children:[r.jsxs("div",{style:Y.container,children:[n.media&&r.jsx("div",{style:Y.media,children:H()}),r.jsx("div",{style:Y.content,children:V()})]}),r.jsx("style",{dangerouslySetInnerHTML:{__html:`\n .vtx-content-block--hover-lift:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);\n }\n .vtx-content-block--hover-scale:hover {\n transform: scale(1.02);\n }\n .vtx-content-block--hover-glow:hover {\n box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.3);\n }\n .vtx-content-block__media--zoom:hover {\n transform: scale(1.1);\n }\n\n @media (max-width: 768px) {\n ${E.stackOnMobile?"\n .vtx-content-block__container {\n flex-direction: column !important;\n }\n .vtx-content-block__media,\n .vtx-content-block__content {\n flex: 1 !important;\n max-width: 100% !important;\n width: 100% !important;\n }\n ":""}\n ${E.hideMediaOnMobile?"\n .vtx-content-block__media {\n display: none;\n }\n ":""}\n }\n `}})]})};mr("/* ===================================\r\n AdminHeader - Professional Admin Panel Header\r\n =================================== */\r\n\r\n/* CSS Variables for Theming */\r\n:root {\r\n /* Light Theme (Default) */\r\n --vtx-admin-header-bg: var(--vtx-color-neutral-50, #fafafa);\r\n --vtx-admin-header-border: var(--vtx-color-neutral-200, #e5e5e5);\r\n --vtx-admin-header-shadow: var(--vtx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));\r\n \r\n --vtx-admin-header-text: var(--vtx-color-neutral-900, #171717);\r\n --vtx-admin-header-text-secondary: var(--vtx-color-neutral-600, #525252);\r\n \r\n --vtx-admin-header-button-hover: var(--vtx-color-neutral-100, #f5f5f5);\r\n --vtx-admin-header-button-active: var(--vtx-color-neutral-200, #e5e5e5);\r\n \r\n --vtx-admin-header-input-bg: var(--vtx-color-neutral-50, #ffffff);\r\n --vtx-admin-header-input-border: var(--vtx-color-neutral-300, #d4d4d4);\r\n --vtx-admin-header-input-focus: var(--vtx-color-primary-500, #3b82f6);\r\n \r\n --vtx-admin-header-dropdown-bg: var(--vtx-color-neutral-50, #ffffff);\r\n --vtx-admin-header-dropdown-shadow: var(--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 \r\n --vtx-admin-header-transition: var(--vtx-transition-base, 200ms);\r\n}\r\n\r\n/* ===================================\r\n Base Header Structure\r\n =================================== */\r\n\r\n.vtx-admin-header {\r\n display: flex;\r\n flex-direction: column;\r\n background-color: var(--vtx-admin-header-bg);\r\n border-bottom: 1px solid var(--vtx-admin-header-border);\r\n z-index: var(--vtx-z-index-sticky, 1100);\r\n transition: all var(--vtx-admin-header-transition) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-admin-header--sticky {\r\n position: sticky;\r\n top: 0;\r\n}\r\n\r\n.vtx-admin-header--blur {\r\n backdrop-filter: blur(8px);\r\n -webkit-backdrop-filter: blur(8px);\r\n background-color: rgba(var(--vtx-admin-header-bg-rgb, 250, 250, 250), 0.8);\r\n}\r\n\r\n.vtx-admin-header-container {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-4, 1rem);\r\n padding: 0 var(--vtx-spacing-6, 1.5rem);\r\n min-height: 64px;\r\n}\r\n\r\n/* ===================================\r\n Left Section\r\n =================================== */\r\n\r\n.vtx-admin-header-left {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-4, 1rem);\r\n flex-shrink: 0;\r\n}\r\n\r\n/* Toggle Button */\r\n.vtx-admin-header-toggle {\r\n display: none; /* Hidden on desktop, shown on mobile */\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 border-radius: var(--vtx-border-radius-lg, 0.5rem);\r\n background: transparent;\r\n color: var(--vtx-admin-header-text);\r\n cursor: pointer;\r\n transition: all var(--vtx-admin-header-transition) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-admin-header-toggle:hover {\r\n background-color: var(--vtx-admin-header-button-hover);\r\n}\r\n\r\n.vtx-admin-header-toggle:active {\r\n background-color: var(--vtx-admin-header-button-active);\r\n transform: scale(0.95);\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .vtx-admin-header-toggle {\r\n display: flex;\r\n }\r\n}\r\n\r\n/* Brand/Logo */\r\n.vtx-admin-header-brand {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-3, 0.75rem);\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-admin-header-logo {\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-admin-header-brand-text {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2px;\r\n}\r\n\r\n.vtx-admin-header-title {\r\n color: var(--vtx-admin-header-text);\r\n font-size: var(--vtx-font-size-lg, 1.125rem);\r\n font-weight: var(--vtx-font-weight-semibold, 600);\r\n line-height: 1.2;\r\n white-space: nowrap;\r\n}\r\n\r\n.vtx-admin-header-subtitle {\r\n color: var(--vtx-admin-header-text-secondary);\r\n font-size: var(--vtx-font-size-xs, 0.75rem);\r\n line-height: 1;\r\n}\r\n\r\n@media (max-width: 640px) {\r\n .vtx-admin-header-brand-text {\r\n display: none;\r\n }\r\n}\r\n\r\n/* ===================================\r\n Center Section - Search\r\n =================================== */\r\n\r\n.vtx-admin-header-center {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 1;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .vtx-admin-header-center {\r\n display: none;\r\n }\r\n}\r\n\r\n/* Search */\r\n.vtx-admin-header-search {\r\n position: relative;\r\n width: 100%;\r\n max-width: 480px;\r\n}\r\n\r\n.vtx-admin-header-search-form {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.vtx-admin-header-search-input {\r\n width: 100%;\r\n height: 40px;\r\n padding: 0 36px 0 38px;\r\n border: 1px solid var(--vtx-admin-header-input-border);\r\n border-radius: var(--vtx-border-radius-lg, 0.5rem);\r\n background-color: var(--vtx-admin-header-input-bg);\r\n color: var(--vtx-admin-header-text);\r\n font-size: var(--vtx-font-size-sm, 0.875rem);\r\n outline: none;\r\n transition: all var(--vtx-admin-header-transition) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-admin-header-search-input::placeholder {\r\n color: var(--vtx-admin-header-text-secondary);\r\n}\r\n\r\n.vtx-admin-header-search-input:focus {\r\n border-color: var(--vtx-admin-header-input-focus);\r\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\r\n}\r\n\r\n.vtx-admin-header-search-icon {\r\n position: absolute;\r\n left: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--vtx-admin-header-text-secondary);\r\n pointer-events: none;\r\n}\r\n\r\n.vtx-admin-header-search-spinner {\r\n width: 16px;\r\n height: 16px;\r\n border: 2px solid var(--vtx-admin-header-text-secondary);\r\n border-top-color: transparent;\r\n border-radius: 50%;\r\n animation: spin 0.6s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n.vtx-admin-header-search-clear {\r\n position: absolute;\r\n right: 8px;\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 border-radius: var(--vtx-border-radius-base, 0.25rem);\r\n background: transparent;\r\n color: var(--vtx-admin-header-text-secondary);\r\n cursor: pointer;\r\n transition: all var(--vtx-admin-header-transition) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-admin-header-search-clear:hover {\r\n background-color: var(--vtx-admin-header-button-hover);\r\n color: var(--vtx-admin-header-text);\r\n}\r\n\r\n/* Search Suggestions Dropdown */\r\n.vtx-admin-header-search-suggestions {\r\n position: absolute;\r\n top: calc(100% + 8px);\r\n left: 0;\r\n right: 0;\r\n max-height: 400px;\r\n overflow-y: auto;\r\n background-color: var(--vtx-admin-header-dropdown-bg);\r\n border: 1px solid var(--vtx-admin-header-border);\r\n border-radius: var(--vtx-border-radius-lg, 0.5rem);\r\n box-shadow: var(--vtx-admin-header-dropdown-shadow);\r\n z-index: 1000;\r\n animation: slideDown 150ms cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n@keyframes slideDown {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-8px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n.vtx-admin-header-search-suggestion {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-3, 0.75rem);\r\n width: 100%;\r\n padding: var(--vtx-spacing-3, 0.75rem) var(--vtx-spacing-4, 1rem);\r\n border: none;\r\n background: transparent;\r\n text-align: left;\r\n cursor: pointer;\r\n transition: background-color var(--vtx-admin-header-transition) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-admin-header-search-suggestion:hover {\r\n background-color: var(--vtx-admin-header-button-hover);\r\n}\r\n\r\n.vtx-admin-header-search-suggestion-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n color: var(--vtx-admin-header-text-secondary);\r\n}\r\n\r\n.vtx-admin-header-search-suggestion-content {\r\n flex: 1;\r\n min-width: 0;\r\n}\r\n\r\n.vtx-admin-header-search-suggestion-label {\r\n display: block;\r\n color: var(--vtx-admin-header-text);\r\n font-size: var(--vtx-font-size-sm, 0.875rem);\r\n font-weight: var(--vtx-font-weight-medium, 500);\r\n}\r\n\r\n.vtx-admin-header-search-suggestion-category {\r\n display: block;\r\n color: var(--vtx-admin-header-text-secondary);\r\n font-size: var(--vtx-font-size-xs, 0.75rem);\r\n margin-top: 2px;\r\n}\r\n\r\n/* ===================================\r\n Right Section\r\n =================================== */\r\n\r\n.vtx-admin-header-right {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-2, 0.5rem);\r\n margin-left: auto;\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-admin-header-divider {\r\n width: 1px;\r\n height: 32px;\r\n background-color: var(--vtx-admin-header-border);\r\n margin: 0 var(--vtx-spacing-2, 0.5rem);\r\n}\r\n\r\n/* Quick Actions */\r\n.vtx-admin-header-quick-actions {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-1, 0.25rem);\r\n}\r\n\r\n@media (max-width: 640px) {\r\n .vtx-admin-header-quick-actions {\r\n display: none;\r\n }\r\n}\r\n\r\n/* Icon Button (Generic) */\r\n.vtx-admin-header-icon-button {\r\n position: relative;\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 border-radius: var(--vtx-border-radius-lg, 0.5rem);\r\n background: transparent;\r\n color: var(--vtx-admin-header-text-secondary);\r\n cursor: pointer;\r\n transition: all var(--vtx-admin-header-transition) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-admin-header-icon-button:hover:not(.vtx-admin-header-icon-button--disabled) {\r\n background-color: var(--vtx-admin-header-button-hover);\r\n color: var(--vtx-admin-header-text);\r\n transform: scale(1.05);\r\n}\r\n\r\n.vtx-admin-header-icon-button:active:not(.vtx-admin-header-icon-button--disabled) {\r\n background-color: var(--vtx-admin-header-button-active);\r\n transform: scale(0.98);\r\n}\r\n\r\n.vtx-admin-header-icon-button--active {\r\n background-color: var(--vtx-admin-header-button-hover);\r\n color: var(--vtx-admin-header-text);\r\n}\r\n\r\n.vtx-admin-header-icon-button--disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n}\r\n\r\n.vtx-admin-header-icon-badge {\r\n position: absolute;\r\n top: 4px;\r\n right: 4px;\r\n min-width: 18px;\r\n height: 18px;\r\n padding: 0 4px;\r\n pointer-events: none;\r\n}\r\n\r\n/* ===================================\r\n Notifications\r\n =================================== */\r\n\r\n.vtx-admin-header-notifications {\r\n position: relative;\r\n}\r\n\r\n.vtx-admin-header-notifications-panel {\r\n position: absolute;\r\n top: calc(100% + 12px);\r\n right: 0;\r\n width: 400px;\r\n max-height: 600px;\r\n display: flex;\r\n flex-direction: column;\r\n background-color: var(--vtx-admin-header-dropdown-bg);\r\n border: 1px solid var(--vtx-admin-header-border);\r\n border-radius: var(--vtx-border-radius-xl, 0.75rem);\r\n box-shadow: var(--vtx-admin-header-dropdown-shadow);\r\n z-index: 1000;\r\n animation: slideDown 200ms cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .vtx-admin-header-notifications-panel {\r\n position: fixed;\r\n top: 64px;\r\n right: 0;\r\n left: 0;\r\n width: 100%;\r\n max-height: calc(100vh - 64px);\r\n border-radius: 0;\r\n border-left: none;\r\n border-right: none;\r\n }\r\n}\r\n\r\n.vtx-admin-header-notifications-header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: var(--vtx-spacing-4, 1rem) var(--vtx-spacing-5, 1.25rem);\r\n border-bottom: 1px solid var(--vtx-admin-header-border);\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-admin-header-notifications-header-title {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.vtx-admin-header-notifications-header-actions {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-2, 0.5rem);\r\n}\r\n\r\n.vtx-admin-header-notifications-action-btn {\r\n padding: 4px 8px;\r\n border: none;\r\n border-radius: var(--vtx-border-radius-base, 0.25rem);\r\n background: transparent;\r\n color: var(--vtx-color-primary-600, #2563eb);\r\n font-size: var(--vtx-font-size-xs, 0.75rem);\r\n font-weight: var(--vtx-font-weight-medium, 500);\r\n cursor: pointer;\r\n transition: all var(--vtx-admin-header-transition) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-admin-header-notifications-action-btn:hover {\r\n background-color: var(--vtx-color-primary-50, #eff6ff);\r\n}\r\n\r\n.vtx-admin-header-notifications-action-btn--danger {\r\n color: var(--vtx-color-error-600, #dc2626);\r\n}\r\n\r\n.vtx-admin-header-notifications-action-btn--danger:hover {\r\n background-color: var(--vtx-color-error-50, #fef2f2);\r\n}\r\n\r\n.vtx-admin-header-notifications-list {\r\n flex: 1;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n}\r\n\r\n.vtx-admin-header-notifications-list::-webkit-scrollbar {\r\n width: 6px;\r\n}\r\n\r\n.vtx-admin-header-notifications-list::-webkit-scrollbar-track {\r\n background: transparent;\r\n}\r\n\r\n.vtx-admin-header-notifications-list::-webkit-scrollbar-thumb {\r\n background: var(--vtx-color-neutral-300, #d4d4d4);\r\n border-radius: 3px;\r\n}\r\n\r\n.vtx-admin-header-notifications-empty {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n padding: var(--vtx-spacing-10, 2.5rem);\r\n color: var(--vtx-admin-header-text-secondary);\r\n}\r\n\r\n.vtx-admin-header-notification-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: var(--vtx-spacing-3, 0.75rem);\r\n padding: var(--vtx-spacing-4, 1rem) var(--vtx-spacing-5, 1.25rem);\r\n border: none;\r\n border-bottom: 1px solid var(--vtx-admin-header-border);\r\n background: transparent;\r\n width: 100%;\r\n text-align: left;\r\n cursor: pointer;\r\n transition: background-color var(--vtx-admin-header-transition) cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n text-decoration: none;\r\n color: inherit;\r\n}\r\n\r\n.vtx-admin-header-notification-item:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.vtx-admin-header-notification-item:hover {\r\n background-color: var(--vtx-admin-header-button-hover);\r\n}\r\n\r\n.vtx-admin-header-notification-item--unread {\r\n background-color: var(--vtx-color-primary-50, #eff6ff);\r\n}\r\n\r\n.vtx-admin-header-notification-item--unread:hover {\r\n background-color: var(--vtx-color-primary-100, #dbeafe);\r\n}\r\n\r\n.vtx-admin-header-notification-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n width: 40px;\r\n height: 40px;\r\n border-radius: var(--vtx-border-radius-lg, 0.5rem);\r\n color: var(--vtx-admin-header-text-secondary);\r\n}\r\n\r\n.vtx-admin-header-notification-item--info .vtx-admin-header-notification-icon {\r\n background-color: var(--vtx-color-info-50, #eff6ff);\r\n color: var(--vtx-color-info-600, #2563eb);\r\n}\r\n\r\n.vtx-admin-header-notification-item--success .vtx-admin-header-notification-icon {\r\n background-color: var(--vtx-color-success-50, #f0fdf4);\r\n color: var(--vtx-color-success-600, #16a34a);\r\n}\r\n\r\n.vtx-admin-header-notification-item--warning .vtx-admin-header-notification-icon {\r\n background-color: var(--vtx-color-warning-50, #fffbeb);\r\n color: var(--vtx-color-warning-600, #d97706);\r\n}\r\n\r\n.vtx-admin-header-notification-item--error .vtx-admin-header-notification-icon {\r\n background-color: var(--vtx-color-error-50, #fef2f2);\r\n color: var(--vtx-color-error-600, #dc2626);\r\n}\r\n\r\n.vtx-admin-header-notification-content {\r\n flex: 1;\r\n min-width: 0;\r\n}\r\n\r\n.vtx-admin-header-notification-dot {\r\n position: absolute;\r\n top: 16px;\r\n right: 16px;\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background-color: var(--vtx-color-primary-600, #2563eb);\r\n}\r\n\r\n.vtx-admin-header-notifications-footer {\r\n padding: var(--vtx-spacing-3, 0.75rem);\r\n border-top: 1px solid var(--vtx-admin-header-border);\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-admin-header-notifications-view-all {\r\n width: 100%;\r\n padding: var(--vtx-spacing-2, 0.5rem);\r\n border: none;\r\n border-radius: var(--vtx-border-radius-base, 0.25rem);\r\n background: transparent;\r\n color: var(--vtx-color-primary-600, #2563eb);\r\n font-size: var(--vtx-font-size-sm, 0.875rem);\r\n font-weight: var(--vtx-font-weight-medium, 500);\r\n cursor: pointer;\r\n transition: background-color var(--vtx-admin-header-transition) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-admin-header-notifications-view-all:hover {\r\n background-color: var(--vtx-color-primary-50, #eff6ff);\r\n}\r\n\r\n/* ===================================\r\n User Menu\r\n =================================== */\r\n\r\n.vtx-admin-header-user {\r\n position: relative;\r\n}\r\n\r\n.vtx-admin-header-user-button {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-2, 0.5rem);\r\n padding: 4px 8px 4px 4px;\r\n border: none;\r\n border-radius: var(--vtx-border-radius-lg, 0.5rem);\r\n background: transparent;\r\n cursor: pointer;\r\n transition: all var(--vtx-admin-header-transition) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-admin-header-user-button:hover {\r\n background-color: var(--vtx-admin-header-button-hover);\r\n}\r\n\r\n.vtx-admin-header-user-button--active {\r\n background-color: var(--vtx-admin-header-button-hover);\r\n}\r\n\r\n.vtx-admin-header-user-avatar {\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-admin-header-user-avatar-fallback {\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n background: var(--vtx-color-primary-600, #2563eb);\r\n color: white;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: var(--vtx-font-size-sm, 0.875rem);\r\n font-weight: var(--vtx-font-weight-semibold, 600);\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-admin-header-user-info {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 2px;\r\n text-align: left;\r\n}\r\n\r\n@media (max-width: 640px) {\r\n .vtx-admin-header-user-info {\r\n display: none;\r\n }\r\n}\r\n\r\n.vtx-admin-header-user-name {\r\n color: var(--vtx-admin-header-text);\r\n font-size: var(--vtx-font-size-sm, 0.875rem);\r\n font-weight: var(--vtx-font-weight-medium, 500);\r\n line-height: 1.2;\r\n}\r\n\r\n.vtx-admin-header-user-role {\r\n color: var(--vtx-admin-header-text-secondary);\r\n font-size: var(--vtx-font-size-xs, 0.75rem);\r\n line-height: 1;\r\n}\r\n\r\n/* User Dropdown */\r\n.vtx-admin-header-user-dropdown {\r\n position: absolute;\r\n top: calc(100% + 8px);\r\n right: 0;\r\n min-width: 220px;\r\n background-color: var(--vtx-admin-header-dropdown-bg);\r\n border: 1px solid var(--vtx-admin-header-border);\r\n border-radius: var(--vtx-border-radius-lg, 0.5rem);\r\n box-shadow: var(--vtx-admin-header-dropdown-shadow);\r\n padding: var(--vtx-spacing-2, 0.5rem);\r\n z-index: 1000;\r\n animation: slideDown 150ms cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-admin-header-user-menu-item {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-3, 0.75rem);\r\n width: 100%;\r\n padding: var(--vtx-spacing-2, 0.5rem) var(--vtx-spacing-3, 0.75rem);\r\n border: none;\r\n border-radius: var(--vtx-border-radius-base, 0.25rem);\r\n background: transparent;\r\n color: var(--vtx-admin-header-text);\r\n font-size: var(--vtx-font-size-sm, 0.875rem);\r\n text-align: left;\r\n cursor: pointer;\r\n text-decoration: none;\r\n transition: background-color var(--vtx-admin-header-transition) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-admin-header-user-menu-item:hover:not(.vtx-admin-header-user-menu-item--disabled) {\r\n background-color: var(--vtx-admin-header-button-hover);\r\n}\r\n\r\n.vtx-admin-header-user-menu-item--danger {\r\n color: var(--vtx-color-error-600, #dc2626);\r\n}\r\n\r\n.vtx-admin-header-user-menu-item--danger:hover:not(.vtx-admin-header-user-menu-item--disabled) {\r\n background-color: var(--vtx-color-error-50, #fef2f2);\r\n}\r\n\r\n.vtx-admin-header-user-menu-item--success {\r\n color: var(--vtx-color-success-600, #16a34a);\r\n}\r\n\r\n.vtx-admin-header-user-menu-item--disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n}\r\n\r\n.vtx-admin-header-user-menu-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 18px;\r\n height: 18px;\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-admin-header-user-menu-label {\r\n flex: 1;\r\n}\r\n\r\n.vtx-admin-header-user-menu-shortcut {\r\n color: var(--vtx-admin-header-text-secondary);\r\n font-size: var(--vtx-font-size-xs, 0.75rem);\r\n margin-left: auto;\r\n}\r\n\r\n.vtx-admin-header-user-menu-badge {\r\n margin-left: auto;\r\n}\r\n\r\n.vtx-admin-header-user-menu-divider {\r\n height: 1px;\r\n background-color: var(--vtx-admin-header-border);\r\n margin: var(--vtx-spacing-2, 0.5rem) 0;\r\n}\r\n\r\n/* ===================================\r\n Breadcrumbs\r\n =================================== */\r\n\r\n.vtx-admin-header-breadcrumbs {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-2, 0.5rem);\r\n padding: var(--vtx-spacing-2, 0.5rem) var(--vtx-spacing-6, 1.5rem);\r\n border-top: 1px solid var(--vtx-admin-header-border);\r\n background-color: var(--vtx-admin-header-bg);\r\n overflow-x: auto;\r\n}\r\n\r\n.vtx-admin-header-breadcrumb {\r\n color: var(--vtx-admin-header-text-secondary);\r\n font-size: var(--vtx-font-size-sm, 0.875rem);\r\n text-decoration: none;\r\n white-space: nowrap;\r\n transition: color var(--vtx-admin-header-transition) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-admin-header-breadcrumb:hover {\r\n color: var(--vtx-admin-header-text);\r\n text-decoration: underline;\r\n}\r\n\r\n.vtx-admin-header-breadcrumb--current {\r\n color: var(--vtx-admin-header-text);\r\n font-weight: var(--vtx-font-weight-medium, 500);\r\n cursor: default;\r\n}\r\n\r\n.vtx-admin-header-breadcrumb--current:hover {\r\n text-decoration: none;\r\n}\r\n\r\n.vtx-admin-header-breadcrumb-separator {\r\n color: var(--vtx-admin-header-text-secondary);\r\n user-select: none;\r\n}\r\n\r\n/* ===================================\r\n VARIANTS\r\n =================================== */\r\n\r\n.vtx-admin-header--elevated {\r\n box-shadow: var(--vtx-admin-header-shadow);\r\n}\r\n\r\n.vtx-admin-header--bordered {\r\n border-bottom-width: 2px;\r\n}\r\n\r\n.vtx-admin-header--minimal {\r\n background-color: transparent;\r\n border-bottom: 1px solid transparent;\r\n}\r\n\r\n.vtx-admin-header--transparent {\r\n background-color: transparent;\r\n border-bottom-color: transparent;\r\n}\r\n\r\n/* ===================================\r\n THEMES\r\n =================================== */\r\n\r\n.vtx-admin-header--dark {\r\n --vtx-admin-header-bg: var(--vtx-color-neutral-900, #171717);\r\n --vtx-admin-header-border: var(--vtx-color-neutral-800, #262626);\r\n --vtx-admin-header-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);\r\n \r\n --vtx-admin-header-text: var(--vtx-color-neutral-50, #fafafa);\r\n --vtx-admin-header-text-secondary: var(--vtx-color-neutral-400, #a3a3a3);\r\n \r\n --vtx-admin-header-button-hover: var(--vtx-color-neutral-800, #262626);\r\n --vtx-admin-header-button-active: var(--vtx-color-neutral-700, #404040);\r\n \r\n --vtx-admin-header-input-bg: var(--vtx-color-neutral-800, #262626);\r\n --vtx-admin-header-input-border: var(--vtx-color-neutral-700, #404040);\r\n \r\n --vtx-admin-header-dropdown-bg: var(--vtx-color-neutral-900, #171717);\r\n}\r\n\r\n.vtx-admin-header--primary {\r\n --vtx-admin-header-bg: var(--vtx-color-primary-600, #2563eb);\r\n --vtx-admin-header-border: var(--vtx-color-primary-700, #1d4ed8);\r\n \r\n --vtx-admin-header-text: var(--vtx-color-neutral-50, #ffffff);\r\n --vtx-admin-header-text-secondary: var(--vtx-color-primary-100, #dbeafe);\r\n \r\n --vtx-admin-header-button-hover: var(--vtx-color-primary-700, #1d4ed8);\r\n --vtx-admin-header-button-active: var(--vtx-color-primary-800, #1e40af);\r\n \r\n --vtx-admin-header-input-bg: var(--vtx-color-primary-700, #1d4ed8);\r\n --vtx-admin-header-input-border: var(--vtx-color-primary-600, #2563eb);\r\n \r\n --vtx-admin-header-dropdown-bg: var(--vtx-color-neutral-50, #ffffff);\r\n}\r\n\r\n.vtx-admin-header--gradient {\r\n background: linear-gradient(135deg, var(--vtx-color-primary-600, #2563eb) 0%, var(--vtx-color-secondary-600, #7c3aed) 100%);\r\n --vtx-admin-header-border: rgba(255, 255, 255, 0.1);\r\n \r\n --vtx-admin-header-text: var(--vtx-color-neutral-50, #ffffff);\r\n --vtx-admin-header-text-secondary: rgba(255, 255, 255, 0.8);\r\n \r\n --vtx-admin-header-button-hover: rgba(255, 255, 255, 0.1);\r\n --vtx-admin-header-button-active: rgba(255, 255, 255, 0.2);\r\n \r\n --vtx-admin-header-input-bg: rgba(255, 255, 255, 0.1);\r\n --vtx-admin-header-input-border: rgba(255, 255, 255, 0.2);\r\n \r\n --vtx-admin-header-dropdown-bg: var(--vtx-color-neutral-50, #ffffff);\r\n}\r\n\r\n/* ===================================\r\n Responsive\r\n =================================== */\r\n\r\n@media (max-width: 768px) {\r\n .vtx-admin-header-container {\r\n gap: var(--vtx-spacing-2, 0.5rem);\r\n padding: 0 var(--vtx-spacing-4, 1rem);\r\n }\r\n \r\n .vtx-admin-header-left {\r\n gap: var(--vtx-spacing-2, 0.5rem);\r\n }\r\n \r\n .vtx-admin-header-right {\r\n gap: var(--vtx-spacing-1, 0.25rem);\r\n }\r\n \r\n .vtx-admin-header-divider {\r\n display: none;\r\n }\r\n}\r\n\r\n/* ===================================\r\n Accessibility\r\n =================================== */\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n .vtx-admin-header,\r\n .vtx-admin-header * {\r\n animation: none !important;\r\n transition: none !important;\r\n }\r\n}\r\n\r\n@media (prefers-contrast: high) {\r\n .vtx-admin-header {\r\n border: 2px solid currentColor;\r\n }\r\n}\r\n");const ge=({value:e="",onChange:t,onSubmit:a,onFocus:o,placeholder:i,loading:l,suggestions:d,icon:s})=>{const[c,x]=n.useState(e),[v,m]=n.useState(!1),p=n.useRef(null);n.useEffect(()=>{x(e)},[e]),n.useEffect(()=>{const r=r=>{p.current&&!p.current.contains(r.target)&&m(!1)};return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[]);return r.jsxs("div",{className:"vtx-admin-header-search",ref:p,children:[r.jsxs("form",{onSubmit:r=>{r.preventDefault(),null==a||a(c),m(!1)},className:"vtx-admin-header-search-form",children:[r.jsx("div",{className:"vtx-admin-header-search-icon",children:l?r.jsx("span",{className:"vtx-admin-header-search-spinner"}):s||r.jsx(ir,{})}),r.jsx("input",{type:"text",className:"vtx-admin-header-search-input",placeholder:i||"Search...",value:c,onChange:r=>{const n=r.target.value;x(n),null==t||t(n),m(!0)},onFocus:()=>{null==o||o(),d&&d.length>0&&m(!0)}}),c&&r.jsx("button",{type:"button",className:"vtx-admin-header-search-clear",onClick:()=>{x(""),null==t||t("")},"aria-label":"Clear search",children:r.jsx(er,{})})]}),v&&d&&d.length>0&&r.jsx("div",{className:"vtx-admin-header-search-suggestions",children:d.map(n=>r.jsxs("button",{type:"button",className:"vtx-admin-header-search-suggestion",onClick:()=>{var r;null===(r=n.onClick)||void 0===r||r.call(n),m(!1)},children:[n.icon&&r.jsx("span",{className:"vtx-admin-header-search-suggestion-icon",children:n.icon}),r.jsxs("div",{className:"vtx-admin-header-search-suggestion-content",children:[r.jsx("span",{className:"vtx-admin-header-search-suggestion-label",children:n.label}),n.category&&r.jsx("span",{className:"vtx-admin-header-search-suggestion-category",children:n.category})]})]},n.id))})]})},be=({notifications:n,onNotificationClick:e,onMarkAllAsRead:t,onClearAll:a,onViewAll:o,onClose:i,maxNotifications:l=5})=>{const d=n.filter(r=>!r.read).length,s=n.slice(0,l);return r.jsxs("div",{className:"vtx-admin-header-notifications-panel",children:[r.jsxs("div",{className:"vtx-admin-header-notifications-header",children:[r.jsxs("div",{className:"vtx-admin-header-notifications-header-title",children:[r.jsx(gn,{variant:"subtitle2",noMargin:!0,style:{fontWeight:600},children:"Notifications"}),d>0&&r.jsx(An,{variant:"primary",size:"sm",style:{marginLeft:"8px"},children:d})]}),r.jsxs("div",{className:"vtx-admin-header-notifications-header-actions",children:[d>0&&t&&r.jsx("button",{className:"vtx-admin-header-notifications-action-btn",onClick:t,title:"Mark all as read",children:"Mark all read"}),n.length>0&&a&&r.jsx("button",{className:"vtx-admin-header-notifications-action-btn vtx-admin-header-notifications-action-btn--danger",onClick:a,title:"Clear all",children:"Clear"})]})]}),r.jsx("div",{className:"vtx-admin-header-notifications-list",children:0===n.length?r.jsxs("div",{className:"vtx-admin-header-notifications-empty",children:[r.jsx("div",{style:{fontSize:"48px",opacity:.3},children:r.jsx(R,{})}),r.jsx(gn,{variant:"body2",noMargin:!0,style:{marginTop:"12px",color:"var(--vtx-color-neutral-500)"},children:"No notifications"})]}):r.jsx(r.Fragment,{children:s.map(n=>{const t=n.href?"a":"button";return r.jsxs(t,{className:`vtx-admin-header-notification-item ${n.read?"":"vtx-admin-header-notification-item--unread"} ${n.type?`vtx-admin-header-notification-item--${n.type}`:""}`,onClick:()=>(r=>{null==e||e(r),i()})(n),href:n.href,type:n.href?void 0:"button",children:[(n.icon||n.avatar)&&r.jsx("div",{className:"vtx-admin-header-notification-icon",children:n.avatar?r.jsx(ae,{src:n.avatar,size:"sm",alt:"Notification"}):n.icon}),r.jsxs("div",{className:"vtx-admin-header-notification-content",children:[r.jsx(gn,{variant:"body2",noMargin:!0,style:{fontWeight:n.read?400:600},children:n.title}),n.description&&r.jsx(gn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-neutral-600)",marginTop:"2px"},children:n.description}),r.jsx(gn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-neutral-500)",marginTop:"4px"},children:n.time})]}),!n.read&&r.jsx("div",{className:"vtx-admin-header-notification-dot"})]},n.id)})})}),n.length>l&&o&&r.jsx("div",{className:"vtx-admin-header-notifications-footer",children:r.jsxs("button",{className:"vtx-admin-header-notifications-view-all",onClick:()=>{o(),i()},children:["View all ",n.length," notifications"]})})]})},fe=({items:n,onClose:e})=>r.jsx("div",{className:"vtx-admin-header-user-dropdown",children:n.map((n,t)=>{const a=n.href?"a":"button";return r.jsxs(i.default.Fragment,{children:[r.jsxs(a,{className:`vtx-admin-header-user-menu-item ${n.variant?`vtx-admin-header-user-menu-item--${n.variant}`:""} ${n.disabled?"vtx-admin-header-user-menu-item--disabled":""}`,onClick:()=>(r=>{var n;r.disabled||(null===(n=r.onClick)||void 0===n||n.call(r),e())})(n),href:n.href,type:n.href?void 0:"button",disabled:n.disabled,children:[n.icon&&r.jsx("span",{className:"vtx-admin-header-user-menu-icon",children:n.icon}),r.jsx("span",{className:"vtx-admin-header-user-menu-label",children:n.label}),n.badge&&r.jsx(An,{size:"sm",className:"vtx-admin-header-user-menu-badge",children:n.badge}),n.shortcut&&r.jsx("span",{className:"vtx-admin-header-user-menu-shortcut",children:n.shortcut})]}),n.divider&&r.jsx("div",{className:"vtx-admin-header-user-menu-divider"})]},t)})}),ye=i.default.forwardRef(({logo:e,title:t,subtitle:a,onLogoClick:o,onToggleSidebar:l,showToggleButton:d=!0,toggleIcon:s,showSearch:c=!1,searchPlaceholder:x,searchValue:v,onSearchChange:m,onSearchSubmit:p,onSearchFocus:h,searchSuggestions:u,searchLoading:g,searchIcon:b,notifications:f=[],onNotificationClick:y,onMarkAllAsRead:w,onClearAllNotifications:k,onViewAllNotifications:j,showNotifications:_=!0,notificationIcon:N,quickActions:z=[],userName:C,userRole:S,userAvatar:$,userAvatarFallback:M,userMenuItems:T=[],showUserMenu:D=!0,onUserAvatarClick:L,actions:A,leftContent:F,centerContent:B,rightContent:O,className:W="",style:P,variant:H="default",theme:V="light",sticky:Y=!0,height:q="64px",blur:U=!1,maxNotifications:G=5,showBreadcrumbs:X=!1,breadcrumbs:K=[]},Q)=>{const[J,Z]=n.useState(!1),[rr,nr]=n.useState(!1),er=n.useRef(null),tr=n.useRef(null),ar=f.filter(r=>!r.read).length;n.useEffect(()=>{const r=r=>{er.current&&!er.current.contains(r.target)&&Z(!1),tr.current&&!tr.current.contains(r.target)&&nr(!1)};return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[]),n.useEffect(()=>{const r=r=>{"Escape"===r.key&&(Z(!1),nr(!1))};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[]);const or=["vtx-admin-header",`vtx-admin-header--${H}`,`vtx-admin-header--${V}`,Y&&"vtx-admin-header--sticky",U&&"vtx-admin-header--blur",W].filter(Boolean).join(" "),ir={...P,height:"number"==typeof q?`${q}px`:q};return r.jsxs("header",{ref:Q,className:or,style:ir,children:[r.jsxs("div",{className:"vtx-admin-header-container",children:[r.jsxs("div",{className:"vtx-admin-header-left",children:[d&&l&&r.jsx("button",{className:"vtx-admin-header-toggle",onClick:l,"aria-label":"Toggle sidebar",type:"button",children:s||r.jsx(E,{})}),(e||t)&&r.jsxs("div",{className:"vtx-admin-header-brand",onClick:o,style:{cursor:o?"pointer":"default"},children:[e&&r.jsx("div",{className:"vtx-admin-header-logo",children:e}),t&&r.jsxs("div",{className:"vtx-admin-header-brand-text",children:[r.jsx(gn,{variant:"h6",noMargin:!0,className:"vtx-admin-header-title",children:t}),a&&r.jsx(gn,{variant:"caption",noMargin:!0,className:"vtx-admin-header-subtitle",children:a})]})]}),F]}),r.jsxs("div",{className:"vtx-admin-header-center",children:[c&&r.jsx(ge,{value:v,onChange:m,onSubmit:p,onFocus:h,placeholder:x,loading:g,suggestions:u,icon:b}),B]}),r.jsxs("div",{className:"vtx-admin-header-right",children:[z.length>0&&r.jsx("div",{className:"vtx-admin-header-quick-actions",children:z.map(n=>r.jsxs("button",{className:"vtx-admin-header-icon-button "+(n.disabled?"vtx-admin-header-icon-button--disabled":""),onClick:n.onClick,title:n.tooltip||n.label,disabled:n.disabled,"aria-label":n.label,type:"button",children:[n.icon,n.badge&&r.jsx(An,{variant:"error",size:"sm",className:"vtx-admin-header-icon-badge",children:n.badge})]},n.id))}),A,O,(_||D)&&r.jsx("div",{className:"vtx-admin-header-divider"}),_&&f.length>0&&r.jsxs("div",{className:"vtx-admin-header-notifications",ref:er,children:[r.jsxs("button",{className:"vtx-admin-header-icon-button "+(J?"vtx-admin-header-icon-button--active":""),onClick:()=>Z(!J),"aria-label":"Notifications",type:"button",children:[N||r.jsx(R,{}),ar>0&&r.jsx(An,{variant:"error",size:"sm",className:"vtx-admin-header-icon-badge",children:ar>9?"9+":ar})]}),J&&r.jsx(be,{notifications:f,onNotificationClick:y,onMarkAllAsRead:w,onClearAll:k,onViewAll:j,onClose:()=>Z(!1),maxNotifications:G})]}),D&&C&&r.jsxs("div",{className:"vtx-admin-header-user",ref:tr,children:[r.jsxs("button",{className:"vtx-admin-header-user-button "+(rr?"vtx-admin-header-user-button--active":""),onClick:()=>{T.length>0?nr(!rr):null==L||L()},"aria-label":"User menu",type:"button",children:[$?r.jsx(ae,{src:$,alt:C,size:"sm",className:"vtx-admin-header-user-avatar"}):r.jsx("div",{className:"vtx-admin-header-user-avatar vtx-admin-header-user-avatar-fallback",children:M||C.charAt(0).toUpperCase()}),r.jsxs("div",{className:"vtx-admin-header-user-info",children:[r.jsx(gn,{variant:"body2",noMargin:!0,className:"vtx-admin-header-user-name",children:C}),S&&r.jsx(gn,{variant:"caption",noMargin:!0,className:"vtx-admin-header-user-role",children:S})]}),T.length>0&&r.jsx(I,{})]}),rr&&T.length>0&&r.jsx(fe,{items:T,onClose:()=>nr(!1)})]})]})]}),X&&K.length>0&&r.jsx("div",{className:"vtx-admin-header-breadcrumbs",children:K.map((n,e)=>r.jsxs(i.default.Fragment,{children:[e>0&&r.jsx("span",{className:"vtx-admin-header-breadcrumb-separator",children:"/"}),n.href||n.onClick?r.jsx("a",{href:n.href,onClick:r=>{n.onClick&&(r.preventDefault(),n.onClick())},className:"vtx-admin-header-breadcrumb",children:n.label}):r.jsx("span",{className:"vtx-admin-header-breadcrumb vtx-admin-header-breadcrumb--current",children:n.label})]},e))})]})});ye.displayName="AdminHeader";const we=j(ye);mr('/* ==========================================\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/* Empty State with Icon & Description */\r\n.vertex-datagrid-empty-state {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 64px 24px;\r\n}\r\n\r\n.vertex-datagrid-empty-state-icon {\r\n font-size: 48px;\r\n color: rgba(0, 0, 0, 0.26);\r\n opacity: 0.6;\r\n}\r\n\r\n.vertex-datagrid-empty-state-message {\r\n font-size: 1.125rem;\r\n font-weight: 600;\r\n color: rgba(0, 0, 0, 0.6);\r\n}\r\n\r\n.vertex-datagrid-empty-state-description {\r\n font-size: 0.875rem;\r\n color: rgba(0, 0, 0, 0.38);\r\n max-width: 400px;\r\n line-height: 1.5;\r\n text-align: center;\r\n}\r\n\r\n/* Skeleton Loader */\r\n.vertex-datagrid-row--skeleton {\r\n animation: vertex-pulse 1.5s ease-in-out infinite;\r\n}\r\n\r\n.vertex-datagrid-skeleton {\r\n height: 16px;\r\n background: linear-gradient(\r\n 90deg,\r\n rgba(224, 224, 224, 1) 25%,\r\n rgba(245, 245, 245, 1) 50%,\r\n rgba(224, 224, 224, 1) 75%\r\n );\r\n background-size: 200% 100%;\r\n border-radius: 4px;\r\n animation: vertex-skeleton-shimmer 1.5s ease-in-out infinite;\r\n}\r\n\r\n.vertex-datagrid-skeleton--text {\r\n width: 100%;\r\n max-width: 180px;\r\n}\r\n\r\n.vertex-datagrid-skeleton--checkbox {\r\n width: 16px;\r\n height: 16px;\r\n border-radius: 2px;\r\n}\r\n\r\n@keyframes vertex-skeleton-shimmer {\r\n 0% {\r\n background-position: 200% 0;\r\n }\r\n 100% {\r\n background-position: -200% 0;\r\n }\r\n}\r\n\r\n@keyframes vertex-pulse {\r\n 0%, 100% {\r\n opacity: 1;\r\n }\r\n 50% {\r\n opacity: 0.7;\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/* ==========================================\r\n Dark Mode Support\r\n ========================================== */\r\n\r\n[data-theme=\'dark\'] .vertex-datagrid {\r\n background: var(--vtx-color-neutral-800);\r\n border-color: var(--vtx-color-neutral-700);\r\n}\r\n\r\n[data-theme=\'dark\'] .vertex-datagrid-container {\r\n background: var(--vtx-color-neutral-800);\r\n}\r\n\r\n[data-theme=\'dark\'] .vertex-datagrid-empty-state-icon {\r\n color: var(--vtx-color-neutral-500);\r\n}\r\n\r\n[data-theme=\'dark\'] .vertex-datagrid-empty-state-message {\r\n color: var(--vtx-color-neutral-200);\r\n}\r\n\r\n[data-theme=\'dark\'] .vertex-datagrid-empty-state-description {\r\n color: var(--vtx-color-neutral-400);\r\n}\r\n\r\n[data-theme=\'dark\'] .vertex-datagrid-skeleton {\r\n background: linear-gradient(\r\n 90deg,\r\n var(--vtx-color-neutral-700) 25%,\r\n var(--vtx-color-neutral-600) 50%,\r\n var(--vtx-color-neutral-700) 75%\r\n );\r\n background-size: 200% 100%;\r\n}');const ke=(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()}]}},je=({column:e,anchorEl:t,onClose:a,onSort:o,onFilter:i,currentSort:l,hasFilter:d})=>{const s=n.useRef(null);if(n.useEffect(()=>{const r=r=>{s.current&&!s.current.contains(r.target)&&t&&!t.contains(r.target)&&a()};return t&&document.addEventListener("mousedown",r),()=>{document.removeEventListener("mousedown",r)}},[t,a]),!t)return null;const c=t.getBoundingClientRect();return r.jsxs("div",{ref:s,className:"vertex-datagrid-column-menu",style:{position:"fixed",top:c.bottom+4,left:c.left,zIndex:1300},children:[e.sortable&&r.jsxs(r.Fragment,{children:[r.jsxs("button",{className:"vertex-datagrid-column-menu-item",onClick:()=>{o("asc"),a()},children:[r.jsx(sr,{size:16}),r.jsx("span",{children:"Sort ascending"}),"asc"===l&&r.jsx("span",{className:"vertex-datagrid-menu-check",children:"✓"})]}),r.jsxs("button",{className:"vertex-datagrid-column-menu-item",onClick:()=>{o("desc"),a()},children:[r.jsx(cr,{size:16}),r.jsx("span",{children:"Sort descending"}),"desc"===l&&r.jsx("span",{className:"vertex-datagrid-menu-check",children:"✓"})]}),l&&r.jsxs("button",{className:"vertex-datagrid-column-menu-item",onClick:()=>{o(null),a()},children:[r.jsx("span",{style:{width:16}}),r.jsx("span",{children:"Unsort"})]}),e.filterable&&r.jsx("div",{className:"vertex-datagrid-column-menu-divider"})]}),e.filterable&&r.jsxs("button",{className:"vertex-datagrid-column-menu-item",onClick:()=>{i(),a()},children:[r.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r.jsx("path",{d:"M22 3H2l8 9.46V19l4 2v-8.54L22 3z"})}),r.jsx("span",{children:d?"Edit filter":"Filter"}),d&&r.jsx("span",{className:"vertex-datagrid-menu-badge",children:"●"})]})]})},_e=({columns:e,filterModel:t,onFilterModelChange:a,onClose:o,targetColumn:i})=>{const l=e.filter(r=>!1!==r.filterable),d=n.useRef(null);n.useEffect(()=>{const r=r=>{d.current&&!d.current.contains(r.target)&&o()};return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[o]),n.useEffect(()=>{i&&0===t.items.length&&s(i)},[i]);const s=r=>{var n,o;const i=r||(null===(n=l[0])||void 0===n?void 0:n.field)||"",d=e.find(r=>r.field===i),s=(null==d?void 0:d.filterOperators)||ke(null==d?void 0:d.type),c={id:Date.now(),field:i,operator:(null===(o=s[0])||void 0===o?void 0:o.value)||"contains",value:""};a({...t,items:[...t.items,c]})},c=(r,n)=>{var o;const i=[...t.items],l=i[r];if(i[r]={...l,...n},n.field&&n.field!==l.field){const t=e.find(r=>r.field===n.field),a=(null==t?void 0:t.filterOperators)||ke(null==t?void 0:t.type);i[r].operator=(null===(o=a[0])||void 0===o?void 0:o.value)||"contains"}a({...t,items:i})},x=()=>{a({...t,logicOperator:"and"===t.logicOperator?"or":"and"})};return r.jsx("div",{className:"vertex-datagrid-filter-panel-overlay",children:r.jsxs("div",{ref:d,className:"vertex-datagrid-filter-panel",children:[r.jsxs("div",{className:"vertex-datagrid-filter-panel-header",children:[r.jsx(gn,{weight:"semibold",size:"sm",children:"Filters"}),r.jsx("button",{className:"vertex-datagrid-filter-close",onClick:o,children:r.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[r.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),r.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]}),r.jsx("div",{className:"vertex-datagrid-filter-panel-body",children:0===t.items.length?r.jsxs("div",{className:"vertex-datagrid-filter-empty",children:[r.jsx("svg",{width:"48",height:"48",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:r.jsx("path",{d:"M22 3H2l8 9.46V19l4 2v-8.54L22 3z"})}),r.jsx(gn,{size:"sm",color:"secondary",children:"No filters applied"}),r.jsx(Mr,{variant:"outline",size:"sm",onClick:()=>s(),children:"Add filter"})]}):r.jsxs(r.Fragment,{children:[t.items.map((n,o)=>{var i;const d=e.find(r=>r.field===n.field),s=(null==d?void 0:d.filterOperators)||ke(null==d?void 0:d.type),v=!["isEmpty","isNotEmpty"].includes(n.operator);return r.jsxs("div",{className:"vertex-datagrid-filter-row",children:[o>0&&r.jsx("button",{className:"vertex-datagrid-filter-logic-btn",onClick:x,title:"Toggle AND/OR",children:(null===(i=t.logicOperator)||void 0===i?void 0:i.toUpperCase())||"OR"}),r.jsxs("div",{className:"vertex-datagrid-filter-controls",children:[r.jsx("select",{value:n.field,onChange:r=>c(o,{field:r.target.value}),className:"vertex-datagrid-filter-select",children:l.map(n=>r.jsx("option",{value:n.field,children:n.headerName},n.field))}),r.jsx("select",{value:n.operator,onChange:r=>c(o,{operator:r.target.value}),className:"vertex-datagrid-filter-select",children:s.map(n=>r.jsx("option",{value:n.value,children:n.label},n.value))}),v&&r.jsx(Fr,{value:n.value||"",onChange:r=>c(o,{value:r.target.value}),placeholder:"Value",size:"sm"}),r.jsx("button",{className:"vertex-datagrid-filter-remove",onClick:()=>(r=>{const n=t.items.filter((n,e)=>e!==r);a({...t,items:n})})(o),title:"Remove filter",children:r.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[r.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),r.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]})]},n.id||o)}),r.jsx("div",{className:"vertex-datagrid-filter-actions",children:r.jsx(Mr,{variant:"ghost",size:"sm",onClick:()=>s(),children:"+ Add filter"})})]})}),t.items.length>0&&r.jsx("div",{className:"vertex-datagrid-filter-panel-footer",children:r.jsx(Mr,{variant:"ghost",size:"sm",onClick:()=>a({items:[],logicOperator:"or"}),children:"Clear all"})})]})})},Ne=({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:d=!1,ignoreDiacritics:s=!1,sortModel:c,onSortModelChange:x,checkboxSelection:v=!1,rowSelectionModel:m,onRowSelectionModelChange:p,pagination:h=!0,pageSize:u=10,pageSizeOptions:g=[5,10,25,50,100],loading:b=!1,skeletonLoader:f=!1,skeletonRows:y=5,loadingContent:w,emptyStateIcon:k,emptyStateTitle:j="No data available",emptyStateDescription:_,autoHeight:N=!1,density:z="standard",disableColumnMenu:C=!1,hideFooter:S=!1,size:$,className:M,...T})=>{var D,I;const{theme:L}=zr(),A=$||L.defaultSize,[R,E]=n.useState((null===(D=null==l?void 0:l.filter)||void 0===D?void 0:D.filterModel)||{items:[],logicOperator:"or"}),[F,B]=n.useState([]),[O,W]=n.useState([]),[P,H]=n.useState(0),[V,Y]=n.useState(u),[q,U]=n.useState(!1),[G,X]=n.useState(null),[K,Q]=n.useState(),J=null!=o?o:R,Z=null!=c?c:F,rr=null!=m?m:O,nr=n.useCallback(r=>{i?i(r):E(r)},[i]),er=n.useCallback(r=>{x?x(r):B(r)},[x]),tr=n.useCallback(r=>{p?p(r):W(r)},[p]),ar=n.useMemo(()=>d||0===J.items.length?t:t.filter(r=>{const n=J.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||ke(t.type)).find(r=>r.value===n.operator);if(!o)return!0;return o.getApplyFilterFn(n)(a)});return"and"===J.logicOperator?n.every(r=>r):n.some(r=>r)}),[t,J,e,d]),or=n.useMemo(()=>{if(0===Z.length)return ar;const r=[...ar],n=Z[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},[ar,Z,e]),ir=n.useMemo(()=>{if(!h)return or;const r=P*V,n=r+V;return or.slice(r,n)},[or,P,V,h]),lr=n.useCallback((r,n)=>{if(!r.sortable)return;let e;e=null===n?[]:[{field:r.field,sort:n}],er(e)},[er]),dr=n.useCallback(r=>{const n=rr.includes(r)?rr.filter(n=>n!==r):[...rr,r];tr(n)},[rr,tr]),xr=n.useCallback(()=>{if(rr.length===ir.length)tr([]);else{const r=ir.map((r,n)=>a(r,n));tr(r)}},[rr,ir,tr,a]),vr=Math.ceil(or.length/V),mr=J.items.length>0,pr=`vertex-datagrid--${z}`,hr=`vertex-datagrid--${A}`,ur=(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=v?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 r.jsxs("div",{className:`vertex-datagrid ${pr} ${hr} ${N?"vertex-datagrid--auto-height":""} ${M||""}`,...T,children:[r.jsx("div",{className:"vertex-datagrid-container",children:r.jsxs("table",{className:"vertex-datagrid-table",children:[r.jsx("thead",{className:"vertex-datagrid-thead",children:r.jsxs("tr",{children:[v&&r.jsx("th",{className:"vertex-datagrid-th vertex-datagrid-checkbox-cell",children:r.jsx(Dr,{checked:rr.length===ir.length&&ir.length>0,indeterminate:rr.length>0&&rr.length<ir.length,onChange:xr})}),e.map((n,e)=>{const t=Z.find(r=>r.field===n.field),a=!!t,o=null==t?void 0:t.sort,i=J.items.some(r=>r.field===n.field),l=ur(n,e,!0);return r.jsx("th",{className:`vertex-datagrid-th ${n.sortable?"vertex-datagrid-th--sortable":""} ${n.pinned?`vertex-datagrid-th--pinned-${n.pinned}`:""}`,style:{width:n.width,minWidth:n.minWidth,maxWidth:n.maxWidth,textAlign:n.headerAlign||n.align||"left",flex:n.flex,...l},children:r.jsxs("div",{className:"vertex-datagrid-th-content",children:[r.jsxs("div",{className:"vertex-datagrid-th-label",onClick:()=>n.sortable&&lr(n,a?"asc"===o?"desc":null:"asc"),children:[r.jsx("span",{className:"vertex-datagrid-th-text",children:n.headerName}),n.sortable&&r.jsx("div",{className:"vertex-datagrid-sort-icon "+(a?"vertex-datagrid-sort-icon--active":""),children:a?"asc"===o?r.jsx(sr,{size:18}):r.jsx(cr,{size:18}):r.jsx("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",opacity:"0.4",children:r.jsx("path",{d:"M12 5v14M5 12l7 7 7-7"})})})]}),!C&&(n.sortable||n.filterable)&&r.jsxs("button",{className:"vertex-datagrid-column-menu-btn "+(i?"vertex-datagrid-column-menu-btn--filtered":""),onClick:r=>{r.stopPropagation(),X({column:n,anchorEl:r.currentTarget})},title:"Column options",children:[r.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:[r.jsx("circle",{cx:"12",cy:"5",r:"2"}),r.jsx("circle",{cx:"12",cy:"12",r:"2"}),r.jsx("circle",{cx:"12",cy:"19",r:"2"})]}),i&&r.jsx("span",{className:"vertex-datagrid-filter-badge"})]})]})},n.field)})]})}),r.jsx("tbody",{className:"vertex-datagrid-tbody",children:b?f?Array.from({length:y}).map((n,t)=>r.jsxs("tr",{className:"vertex-datagrid-row vertex-datagrid-row--skeleton",children:[v&&r.jsx("td",{className:"vertex-datagrid-td vertex-datagrid-checkbox-cell",children:r.jsx("div",{className:"vertex-datagrid-skeleton vertex-datagrid-skeleton--checkbox"})}),e.map(n=>r.jsx("td",{className:"vertex-datagrid-td",children:r.jsx("div",{className:"vertex-datagrid-skeleton vertex-datagrid-skeleton--text"})},n.field))]},`skeleton-${t}`)):r.jsx("tr",{children:r.jsx("td",{colSpan:e.length+(v?1:0),className:"vertex-datagrid-loading",children:r.jsx("div",{className:"vertex-datagrid-loading-content",children:w||r.jsxs(r.Fragment,{children:[r.jsx("div",{className:"vertex-datagrid-spinner"}),r.jsx(gn,{size:"sm",color:"secondary",children:"Loading..."})]})})})}):0===ir.length?r.jsx("tr",{children:r.jsx("td",{colSpan:e.length+(v?1:0),className:"vertex-datagrid-empty",children:k||_?r.jsxs("div",{className:"vertex-datagrid-empty-state",children:[k&&r.jsx("div",{className:"vertex-datagrid-empty-state-icon",children:k}),r.jsx("div",{className:"vertex-datagrid-empty-state-message",children:j}),_&&r.jsx("div",{className:"vertex-datagrid-empty-state-description",children:_})]}):r.jsxs("div",{className:"vertex-datagrid-empty-content",children:[r.jsxs("svg",{width:"64",height:"64",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1",opacity:"0.3",children:[r.jsx("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2"}),r.jsx("line",{x1:"3",y1:"9",x2:"21",y2:"9"}),r.jsx("line",{x1:"9",y1:"21",x2:"9",y2:"9"})]}),r.jsx(gn,{size:"sm",color:"secondary",children:j})]})})}):ir.map((n,t)=>{const o=a(n,t),i=rr.includes(o);return r.jsxs("tr",{className:"vertex-datagrid-row "+(i?"vertex-datagrid-row--selected":""),children:[v&&r.jsx("td",{className:"vertex-datagrid-td vertex-datagrid-checkbox-cell",children:r.jsx(Dr,{checked:i,onChange:()=>dr(o)})}),e.map((e,t)=>{const a=e.valueGetter?e.valueGetter(n):n[e.field],o=e.valueFormatter?e.valueFormatter(a):a,i=e.renderCell?e.renderCell({row:n,value:a,field:e.field}):o,l=ur(e,t,!1);return r.jsx("td",{className:"vertex-datagrid-td "+(e.pinned?`vertex-datagrid-td--pinned-${e.pinned}`:""),style:{textAlign:e.align||"left",...l},children:i},e.field)})]},o)})})]})}),!S&&h&&r.jsxs("div",{className:"vertex-datagrid-footer",children:[r.jsx("div",{className:"vertex-datagrid-footer-left",children:mr&&r.jsxs("button",{className:"vertex-datagrid-filter-chip",onClick:()=>U(!0),children:[r.jsx("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r.jsx("path",{d:"M22 3H2l8 9.46V19l4 2v-8.54L22 3z"})}),r.jsxs("span",{children:[J.items.length," ",1===J.items.length?"filter":"filters"]})]})}),r.jsx("div",{className:"vertex-datagrid-footer-center",children:r.jsx(gn,{size:"sm",color:"secondary",children:0===or.length?"0 rows":`${P*V+1}–${Math.min((P+1)*V,or.length)} of ${or.length}`})}),r.jsxs("div",{className:"vertex-datagrid-footer-right",children:[r.jsxs("label",{className:"vertex-datagrid-pagesize-label",children:[r.jsx(gn,{size:"sm",color:"secondary",children:"Rows per page:"}),r.jsx("select",{value:V,onChange:r=>{Y(Number(r.target.value)),H(0)},className:"vertex-datagrid-pagesize-select",children:g.map(n=>r.jsx("option",{value:n,children:n},n))})]}),r.jsxs("div",{className:"vertex-datagrid-pagination",children:[r.jsx("button",{className:"vertex-datagrid-pagination-btn",onClick:()=>H(0),disabled:0===P,title:"First page",children:r.jsx("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r.jsx("path",{d:"M11 17l-5-5 5-5M18 17l-5-5 5-5"})})}),r.jsx("button",{className:"vertex-datagrid-pagination-btn",onClick:()=>H(r=>Math.max(0,r-1)),disabled:0===P,title:"Previous page",children:r.jsx("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r.jsx("path",{d:"M15 18l-6-6 6-6"})})}),r.jsxs(gn,{size:"sm",color:"secondary",children:["Page ",P+1," of ",vr||1]}),r.jsx("button",{className:"vertex-datagrid-pagination-btn",onClick:()=>H(r=>Math.min(vr-1,r+1)),disabled:P>=vr-1,title:"Next page",children:r.jsx("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r.jsx("path",{d:"M9 18l6-6-6-6"})})}),r.jsx("button",{className:"vertex-datagrid-pagination-btn",onClick:()=>H(vr-1),disabled:P>=vr-1,title:"Last page",children:r.jsx("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r.jsx("path",{d:"M13 17l5-5-5-5M6 17l5-5-5-5"})})})]})]})]}),G&&r.jsx(je,{column:G.column,anchorEl:G.anchorEl,onClose:()=>X(null),onSort:r=>lr(G.column,r),onFilter:()=>{Q(G.column.field),U(!0)},currentSort:null===(I=Z.find(r=>r.field===G.column.field))||void 0===I?void 0:I.sort,hasFilter:J.items.some(r=>r.field===G.column.field)}),q&&r.jsx(_e,{columns:e,filterModel:J,onFilterModelChange:nr,onClose:()=>{U(!1),Q(void 0)},targetColumn:K})]})};Ne.displayName="DataGrid";const ze=j(Ne);mr("/* Base divider styles */\r\n.vtx-divider {\r\n margin: 0;\r\n flex-shrink: 0;\r\n border-width: 0;\r\n border-style: solid;\r\n border-color: var(--vtx-divider-color, var(--vtx-color-neutral-200));\r\n border-bottom-width: thin;\r\n}\r\n\r\n/* Light variant */\r\n.vtx-divider--light {\r\n border-color: var(--vtx-divider-color-light, var(--vtx-color-neutral-100));\r\n}\r\n\r\n/* Horizontal orientation (default) */\r\n.vtx-divider--horizontal {\r\n width: 100%;\r\n border-bottom-width: 1px;\r\n}\r\n\r\n/* Vertical orientation */\r\n.vtx-divider--vertical {\r\n height: auto;\r\n align-self: stretch;\r\n border-bottom-width: 0;\r\n border-right-width: 1px;\r\n}\r\n\r\n/* Flex item variant */\r\n.vtx-divider--flex-item {\r\n height: auto;\r\n align-self: stretch;\r\n}\r\n\r\n.vtx-divider--flex-item.vtx-divider--horizontal {\r\n height: 1px;\r\n width: 100%;\r\n align-self: auto;\r\n}\r\n\r\n/* Variants */\r\n.vtx-divider--fullWidth {\r\n width: 100%;\r\n}\r\n\r\n.vtx-divider--inset {\r\n margin-left: var(--vtx-spacing-9);\r\n}\r\n\r\n.vtx-divider--middle {\r\n margin-left: var(--vtx-spacing-3);\r\n margin-right: var(--vtx-spacing-3);\r\n}\r\n\r\n.vtx-divider--vertical.vtx-divider--inset {\r\n margin-left: 0;\r\n margin-top: var(--vtx-spacing-2);\r\n}\r\n\r\n.vtx-divider--vertical.vtx-divider--middle {\r\n margin-left: 0;\r\n margin-right: 0;\r\n margin-top: var(--vtx-spacing-2);\r\n margin-bottom: var(--vtx-spacing-2);\r\n}\r\n\r\n/* With children */\r\n.vtx-divider--with-children {\r\n display: flex;\r\n white-space: nowrap;\r\n text-align: center;\r\n border: 0;\r\n border-color: var(--vtx-divider-color, var(--vtx-color-neutral-200));\r\n font-family: var(--vtx-font-family-sans);\r\n font-size: var(--vtx-divider-text-size, var(--vtx-font-size-sm));\r\n color: var(--vtx-divider-text-color, var(--vtx-color-neutral-600));\r\n font-weight: var(--vtx-divider-text-weight, var(--vtx-font-weight-medium));\r\n}\r\n\r\n.vtx-divider--with-children.vtx-divider--light {\r\n border-color: var(--vtx-divider-color-light, var(--vtx-color-neutral-100));\r\n color: var(--vtx-divider-text-color-light, var(--vtx-color-neutral-500));\r\n}\r\n\r\n.vtx-divider--with-children::before,\r\n.vtx-divider--with-children::after {\r\n content: '';\r\n align-self: center;\r\n border-top: thin solid;\r\n border-color: inherit;\r\n}\r\n\r\n/* Text alignment - horizontal only */\r\n.vtx-divider--with-children.vtx-divider--horizontal.vtx-divider--text-center::before {\r\n width: 100%;\r\n}\r\n\r\n.vtx-divider--with-children.vtx-divider--horizontal.vtx-divider--text-center::after {\r\n width: 100%;\r\n}\r\n\r\n.vtx-divider--with-children.vtx-divider--horizontal.vtx-divider--text-left::before {\r\n width: 5%;\r\n}\r\n\r\n.vtx-divider--with-children.vtx-divider--horizontal.vtx-divider--text-left::after {\r\n width: 100%;\r\n}\r\n\r\n.vtx-divider--with-children.vtx-divider--horizontal.vtx-divider--text-right::before {\r\n width: 100%;\r\n}\r\n\r\n.vtx-divider--with-children.vtx-divider--horizontal.vtx-divider--text-right::after {\r\n width: 5%;\r\n}\r\n\r\n/* Wrapper for children content */\r\n.vtx-divider-wrapper {\r\n display: inline-flex;\r\n align-items: center;\r\n padding-left: var(--vtx-spacing-3);\r\n padding-right: var(--vtx-spacing-3);\r\n}\r\n\r\n/* Vertical divider with children (not commonly used but supported) */\r\n.vtx-divider--with-children.vtx-divider--vertical {\r\n flex-direction: column;\r\n}\r\n\r\n.vtx-divider--with-children.vtx-divider--vertical::before,\r\n.vtx-divider--with-children.vtx-divider--vertical::after {\r\n border-top: 0;\r\n border-left: thin solid;\r\n height: 100%;\r\n width: auto;\r\n}\r\n\r\n.vtx-divider--with-children.vtx-divider--vertical .vtx-divider-wrapper {\r\n padding-left: 0;\r\n padding-right: 0;\r\n padding-top: var(--vtx-spacing-2);\r\n padding-bottom: var(--vtx-spacing-2);\r\n}\r\n");const Ce=i.default.forwardRef(({textAlign:n="center",orientation:e="horizontal",variant:t="fullWidth",light:a=!1,flexItem:o=!1,children:i,component:l,className:d="",role:s,...c},x)=>{const v=l||(i||"vertical"===e?"div":"hr"),m=s||("hr"!==v?"separator":void 0),p=["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}`,d].filter(Boolean).join(" "),h="vertical"===e&&"hr"!==v?{"aria-orientation":"vertical"}:{};return r.jsx(v,{ref:x,className:p,role:m,...h,...c,children:i&&r.jsx("span",{className:"vtx-divider-wrapper",children:i})})});Ce.displayName="Divider";const Se=j(Ce);mr("/* ===================================\r\n SideMenu - Enterprise Sidebar Navigation\r\n =================================== */\r\n\r\n/* CSS Variables for Theming - Using Theme Tokens */\r\n:root {\r\n /* Default/Light Theme - Using theme token colors */\r\n --vtx-sidemenu-bg: var(--vtx-color-neutral-50, #ffffff);\r\n --vtx-sidemenu-border: var(--vtx-color-neutral-200, #e5e5e5);\r\n --vtx-sidemenu-shadow: var(--vtx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));\r\n \r\n --vtx-sidemenu-item-color: var(--vtx-color-neutral-700, #404040);\r\n --vtx-sidemenu-item-hover-bg: var(--vtx-color-neutral-100, #f5f5f5);\r\n --vtx-sidemenu-item-active-bg: var(--vtx-color-primary-50, #eff6ff);\r\n --vtx-sidemenu-item-active-color: var(--vtx-color-primary-600, #2563eb);\r\n --vtx-sidemenu-item-icon-color: var(--vtx-color-neutral-500, #737373);\r\n --vtx-sidemenu-item-icon-active-color: var(--vtx-color-primary-600, #2563eb);\r\n \r\n --vtx-sidemenu-submenu-bg: var(--vtx-color-neutral-50, #fafafa);\r\n --vtx-sidemenu-submenu-border: var(--vtx-color-neutral-100, #f5f5f5);\r\n \r\n --vtx-sidemenu-header-border: var(--vtx-color-neutral-200, #e5e5e5);\r\n --vtx-sidemenu-footer-border: var(--vtx-color-neutral-200, #e5e5e5);\r\n \r\n --vtx-sidemenu-toggle-bg: var(--vtx-color-neutral-100, #f5f5f5);\r\n --vtx-sidemenu-toggle-hover-bg: var(--vtx-color-neutral-200, #e5e5e5);\r\n --vtx-sidemenu-toggle-color: var(--vtx-color-neutral-500, #737373);\r\n \r\n --vtx-sidemenu-badge-bg: var(--vtx-color-error-500, #ef4444);\r\n --vtx-sidemenu-badge-color: var(--vtx-color-neutral-50, #ffffff);\r\n \r\n --vtx-sidemenu-transition-speed: var(--vtx-transition-base, 200ms);\r\n --vtx-sidemenu-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n/* ===================================\r\n Base Sidebar Structure\r\n =================================== */\r\n\r\n.vtx-sidemenu {\r\n display: flex;\r\n flex-direction: column;\r\n background-color: var(--vtx-sidemenu-bg);\r\n height: 100vh;\r\n overflow: hidden;\r\n transition: width var(--vtx-sidemenu-transition-speed) var(--vtx-sidemenu-transition-easing);\r\n position: relative;\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-sidemenu--elevated {\r\n box-shadow: var(--vtx-sidemenu-shadow);\r\n}\r\n\r\n.vtx-sidemenu--bordered {\r\n border-right: 1px solid var(--vtx-sidemenu-border);\r\n}\r\n\r\n.vtx-sidemenu--right {\r\n border-right: none;\r\n border-left: 1px solid var(--vtx-sidemenu-border);\r\n}\r\n\r\n.vtx-sidemenu--collapsed {\r\n transition: width var(--vtx-sidemenu-transition-speed) var(--vtx-sidemenu-transition-easing);\r\n}\r\n\r\n/* ===================================\r\n Header Section\r\n =================================== */\r\n\r\n.vtx-sidemenu-header {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 20px 16px;\r\n border-bottom: 1px solid var(--vtx-sidemenu-header-border);\r\n flex-shrink: 0;\r\n min-height: 72px;\r\n}\r\n\r\n.vtx-sidemenu-header-content {\r\n flex: 1;\r\n min-width: 0;\r\n overflow: hidden;\r\n}\r\n\r\n.vtx-sidemenu--collapsed .vtx-sidemenu-header {\r\n justify-content: center;\r\n padding: 20px 8px;\r\n}\r\n\r\n.vtx-sidemenu--collapsed .vtx-sidemenu-header-content {\r\n display: none;\r\n}\r\n\r\n/* ===================================\r\n Content Section (Scrollable Menu Items)\r\n =================================== */\r\n\r\n.vtx-sidemenu-content {\r\n flex: 1;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n padding: 12px 12px;\r\n}\r\n\r\n.vtx-sidemenu-content::-webkit-scrollbar {\r\n width: 6px;\r\n}\r\n\r\n.vtx-sidemenu-content::-webkit-scrollbar-track {\r\n background: transparent;\r\n}\r\n\r\n.vtx-sidemenu-content::-webkit-scrollbar-thumb {\r\n background: var(--vtx-color-neutral-300, #d4d4d4);\r\n border-radius: var(--vtx-border-radius-sm, 0.125rem);\r\n}\r\n\r\n.vtx-sidemenu-content::-webkit-scrollbar-thumb:hover {\r\n background: var(--vtx-color-neutral-400, #a3a3a3);\r\n}\r\n\r\n.vtx-sidemenu--collapsed .vtx-sidemenu-content {\r\n padding: 12px 8px;\r\n}\r\n\r\n/* ===================================\r\n Footer Section\r\n =================================== */\r\n\r\n.vtx-sidemenu-footer {\r\n border-top: 1px solid var(--vtx-sidemenu-footer-border);\r\n padding: 16px 12px;\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-sidemenu--collapsed .vtx-sidemenu-footer {\r\n padding: 16px 8px;\r\n text-align: center;\r\n}\r\n\r\n/* ===================================\r\n Menu Items - Professional Style (Same as Menu component)\r\n =================================== */\r\n\r\n.vtx-sidemenu-item {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-3);\r\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\r\n margin-bottom: var(--vtx-spacing-1);\r\n border-radius: var(--vtx-radius-md);\r\n color: var(--vtx-color-neutral-700);\r\n background: transparent;\r\n cursor: pointer;\r\n transition: all 0.15s ease-in-out;\r\n user-select: none;\r\n font-size: var(--vtx-font-size-sm);\r\n font-weight: var(--vtx-font-weight-medium);\r\n border-left: 3px solid transparent;\r\n text-decoration: none;\r\n outline: none;\r\n border-right: none;\r\n border-top: none;\r\n border-bottom: none;\r\n text-align: left;\r\n width: 100%;\r\n}\r\n\r\n.vtx-sidemenu-item:hover:not(.vtx-sidemenu-item--disabled):not(.vtx-sidemenu-item--active) {\r\n background-color: var(--vtx-color-primary-50);\r\n color: var(--vtx-color-primary-600);\r\n font-weight: 600;\r\n border-left-color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-sidemenu-item:active:not(.vtx-sidemenu-item--disabled):not(.vtx-sidemenu-item--active) {\r\n background: var(--vtx-color-neutral-200);\r\n transform: scale(0.98);\r\n}\r\n\r\n.vtx-sidemenu-item:focus-visible {\r\n outline: 2px solid var(--vtx-color-primary-500);\r\n outline-offset: 2px;\r\n}\r\n\r\n/* Active Menu Item - Professional Style */\r\n.vtx-sidemenu-item--active {\r\n background-color: var(--vtx-color-primary-50);\r\n color: var(--vtx-color-primary-600);\r\n font-weight: 600;\r\n border-left-color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-sidemenu-item--active:hover {\r\n background-color: var(--vtx-color-primary-100);\r\n}\r\n\r\n/* Disabled Menu Item */\r\n.vtx-sidemenu-item--disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n}\r\n\r\n/* Collapsed State */\r\n.vtx-sidemenu-item--collapsed {\r\n justify-content: center;\r\n padding: var(--vtx-spacing-3);\r\n gap: 0;\r\n}\r\n\r\n/* Icon Styling - Professional (Same as Menu) */\r\n.vtx-sidemenu-item-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 20px;\r\n height: 20px;\r\n flex-shrink: 0;\r\n color: var(--vtx-color-neutral-600);\r\n transition: color 0.15s ease-in-out;\r\n}\r\n\r\n.vtx-sidemenu-item:hover:not(.vtx-sidemenu-item--disabled) .vtx-sidemenu-item-icon {\r\n color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-sidemenu-item--active .vtx-sidemenu-item-icon {\r\n color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-sidemenu-item-icon svg {\r\n width: 100%;\r\n height: 100%;\r\n transition: inherit;\r\n}\r\n\r\n/* Text Content */\r\n.vtx-sidemenu-item-label {\r\n flex: 1;\r\n color: inherit;\r\n font-size: inherit;\r\n font-weight: inherit;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n/* Badge */\r\n.vtx-sidemenu-item-badge {\r\n font-size: var(--vtx-font-size-xs);\r\n font-weight: var(--vtx-font-weight-semibold);\r\n min-width: 20px;\r\n height: 18px;\r\n padding: 0 6px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: var(--vtx-radius-full);\r\n background: var(--vtx-color-error-500);\r\n color: white;\r\n line-height: 1;\r\n top: 8px;\r\n right: 8px;\r\n box-shadow: 0 0 0 2px var(--vtx-sidemenu-bg);\r\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\r\n}\r\n\r\n@keyframes pulse {\r\n 0%, 100% {\r\n opacity: 1;\r\n }\r\n 50% {\r\n opacity: 0.7;\r\n }\r\n}\r\n\r\n/* Chevron Icon */\r\n.vtx-sidemenu-chevron {\r\n display: flex;\r\n align-items: center;\r\n color: var(--vtx-color-neutral-400);\r\n transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-sidemenu-chevron--open {\r\n transform: rotate(180deg);\r\n}\r\n\r\n/* ===================================\r\n Submenu - Professional Style (Same as Menu)\r\n =================================== */\r\n\r\n.vtx-sidemenu-submenu {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0;\r\n padding-left: var(--vtx-spacing-5);\r\n margin-top: var(--vtx-spacing-2);\r\n margin-bottom: var(--vtx-spacing-2);\r\n animation: slideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1);\r\n overflow: hidden;\r\n}\r\n\r\n.vtx-sidemenu-submenu .vtx-sidemenu-item {\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-4);\r\n padding-left: var(--vtx-spacing-6);\r\n font-size: var(--vtx-font-size-sm);\r\n font-weight: var(--vtx-font-weight-normal);\r\n margin-bottom: var(--vtx-spacing-1);\r\n}\r\n\r\n.vtx-sidemenu-submenu .vtx-sidemenu-item:hover:not(.vtx-sidemenu-item--disabled):not(.vtx-sidemenu-item--active) {\r\n background-color: var(--vtx-color-primary-50);\r\n color: var(--vtx-color-primary-600);\r\n font-weight: 600;\r\n border-left-color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-sidemenu-submenu .vtx-sidemenu-item--active {\r\n background-color: var(--vtx-color-primary-50);\r\n color: var(--vtx-color-primary-600);\r\n font-weight: 600;\r\n border-left-color: var(--vtx-color-primary-600);\r\n}\r\n\r\n.vtx-sidemenu-submenu .vtx-sidemenu-item--active:hover {\r\n background-color: var(--vtx-color-primary-100);\r\n}\r\n\r\n.vtx-sidemenu-submenu .vtx-sidemenu-item--active .vtx-sidemenu-item-icon {\r\n color: var(--vtx-color-primary-600);\r\n}\r\n\r\n/* Nested submenu - additional indentation */\r\n.vtx-sidemenu-submenu .vtx-sidemenu-submenu {\r\n padding-left: var(--vtx-spacing-4);\r\n}\r\n\r\n@keyframes slideDown {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-4px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n/* ===================================\r\n Collapse Toggle Button\r\n =================================== */\r\n\r\n.vtx-sidemenu-collapse-wrapper {\r\n padding: 12px 16px;\r\n display: flex;\r\n justify-content: center;\r\n border-top: 1px solid var(--vtx-sidemenu-header-border);\r\n}\r\n\r\n.vtx-sidemenu-toggle {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 8px;\r\n background-color: var(--vtx-sidemenu-toggle-bg);\r\n border: none;\r\n cursor: pointer;\r\n color: var(--vtx-sidemenu-toggle-color);\r\n transition: all var(--vtx-sidemenu-transition-speed) var(--vtx-sidemenu-transition-easing);\r\n outline: none;\r\n}\r\n\r\n.vtx-sidemenu-toggle:hover {\r\n background-color: var(--vtx-sidemenu-toggle-hover-bg);\r\n}\r\n\r\n.vtx-sidemenu-toggle:focus-visible {\r\n outline: 2px solid var(--vtx-color-primary-600, #2563eb);\r\n outline-offset: 2px;\r\n}\r\n\r\n.vtx-sidemenu-toggle-icon {\r\n transition: transform var(--vtx-sidemenu-transition-speed) var(--vtx-sidemenu-transition-easing);\r\n}\r\n\r\n.vtx-sidemenu-toggle-icon--rotated {\r\n transform: rotate(180deg);\r\n}\r\n\r\n/* ===================================\r\n VARIANT: Compact\r\n =================================== */\r\n\r\n.vtx-sidemenu--compact .vtx-sidemenu-item-content {\r\n padding: 8px 12px;\r\n}\r\n\r\n.vtx-sidemenu--compact .vtx-sidemenu-content {\r\n padding: 4px;\r\n}\r\n\r\n.vtx-sidemenu--compact .vtx-sidemenu-header {\r\n padding: 16px 12px;\r\n min-height: 56px;\r\n}\r\n\r\n.vtx-sidemenu--compact .vtx-sidemenu-item-label {\r\n font-size: 13px;\r\n}\r\n\r\n.vtx-sidemenu--compact .vtx-sidemenu-item-icon {\r\n width: 18px;\r\n height: 18px;\r\n}\r\n\r\n/* ===================================\r\n VARIANT: Modern\r\n =================================== */\r\n\r\n.vtx-sidemenu--modern .vtx-sidemenu-item {\r\n border-radius: 12px;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.vtx-sidemenu--modern .vtx-sidemenu-item::before {\r\n content: '';\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n bottom: 0;\r\n width: 3px;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n opacity: 0;\r\n transition: opacity var(--vtx-sidemenu-transition-speed) var(--vtx-sidemenu-transition-easing);\r\n}\r\n\r\n.vtx-sidemenu--modern .vtx-sidemenu-item--active::before {\r\n opacity: 1;\r\n}\r\n\r\n.vtx-sidemenu--modern .vtx-sidemenu-item:hover:not(.vtx-sidemenu-item--disabled) {\r\n transform: translateX(2px);\r\n}\r\n\r\n.vtx-sidemenu--modern .vtx-sidemenu-item-icon {\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n}\r\n\r\n.vtx-sidemenu--modern .vtx-sidemenu-item--active .vtx-sidemenu-item-icon {\r\n animation: pulse 2s infinite;\r\n}\r\n\r\n@keyframes pulse {\r\n 0%, 100% {\r\n opacity: 1;\r\n }\r\n 50% {\r\n opacity: 0.7;\r\n }\r\n}\r\n\r\n/* ===================================\r\n VARIANT: Enterprise\r\n =================================== */\r\n\r\n.vtx-sidemenu--enterprise {\r\n border-right: 1px solid #e5e7eb;\r\n}\r\n\r\n.vtx-sidemenu--enterprise .vtx-sidemenu-item {\r\n border-radius: 6px;\r\n margin-bottom: 2px;\r\n}\r\n\r\n.vtx-sidemenu--enterprise .vtx-sidemenu-item-content {\r\n padding: 12px 16px;\r\n}\r\n\r\n.vtx-sidemenu--enterprise .vtx-sidemenu-item-label {\r\n font-size: 14px;\r\n font-weight: 500;\r\n letter-spacing: -0.01em;\r\n}\r\n\r\n.vtx-sidemenu--enterprise .vtx-sidemenu-item--active {\r\n background-color: var(--vtx-color-primary-50, #eff6ff);\r\n border-left: 3px solid var(--vtx-color-primary-600, #2563eb);\r\n padding-left: 13px;\r\n}\r\n\r\n.vtx-sidemenu--enterprise .vtx-sidemenu-header {\r\n padding: var(--vtx-spacing-6, 1.5rem) var(--vtx-spacing-5, 1.25rem);\r\n border-bottom: 2px solid var(--vtx-color-neutral-200, #e5e5e5);\r\n}\r\n\r\n.vtx-sidemenu--enterprise .vtx-sidemenu-submenu {\r\n background-color: var(--vtx-color-neutral-50, #fafafa);\r\n border-left: 2px solid var(--vtx-color-neutral-200, #e5e5e5);\r\n margin-left: var(--vtx-spacing-3, 0.75rem);\r\n border-radius: 0 var(--vtx-border-radius-lg, 0.5rem) var(--vtx-border-radius-lg, 0.5rem) 0;\r\n}\r\n\r\n/* ===================================\r\n VARIANT: Minimal\r\n =================================== */\r\n\r\n.vtx-sidemenu--minimal {\r\n background-color: transparent;\r\n box-shadow: none;\r\n}\r\n\r\n.vtx-sidemenu--minimal .vtx-sidemenu-item {\r\n border-radius: 4px;\r\n margin-bottom: 0;\r\n}\r\n\r\n.vtx-sidemenu--minimal .vtx-sidemenu-item:hover:not(.vtx-sidemenu-item--disabled) {\r\n background-color: rgba(0, 0, 0, 0.03);\r\n}\r\n\r\n.vtx-sidemenu--minimal .vtx-sidemenu-item--active {\r\n background-color: rgba(37, 99, 235, 0.08);\r\n}\r\n\r\n.vtx-sidemenu--minimal .vtx-sidemenu-header,\r\n.vtx-sidemenu--minimal .vtx-sidemenu-footer {\r\n border-color: transparent;\r\n}\r\n\r\n.vtx-sidemenu--minimal .vtx-sidemenu-submenu {\r\n background-color: transparent;\r\n}\r\n\r\n/* ===================================\r\n THEME: Dark - Using Theme Tokens\r\n =================================== */\r\n\r\n.vtx-sidemenu--dark {\r\n --vtx-sidemenu-bg: var(--vtx-color-neutral-800, #262626);\r\n --vtx-sidemenu-border: var(--vtx-color-neutral-700, #404040);\r\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));\r\n \r\n --vtx-sidemenu-item-color: var(--vtx-color-neutral-200, #e5e5e5);\r\n --vtx-sidemenu-item-hover-bg: var(--vtx-color-neutral-700, #404040);\r\n --vtx-sidemenu-item-active-bg: var(--vtx-color-primary-600, #2563eb);\r\n --vtx-sidemenu-item-active-color: var(--vtx-color-neutral-50, #fafafa);\r\n --vtx-sidemenu-item-icon-color: var(--vtx-color-neutral-400, #a3a3a3);\r\n --vtx-sidemenu-item-icon-active-color: var(--vtx-color-neutral-50, #fafafa);\r\n \r\n --vtx-sidemenu-submenu-bg: var(--vtx-color-neutral-900, #171717);\r\n --vtx-sidemenu-submenu-border: var(--vtx-color-neutral-700, #404040);\r\n \r\n --vtx-sidemenu-header-border: var(--vtx-color-neutral-700, #404040);\r\n --vtx-sidemenu-footer-border: var(--vtx-color-neutral-700, #404040);\r\n \r\n --vtx-sidemenu-toggle-bg: var(--vtx-color-neutral-700, #404040);\r\n --vtx-sidemenu-toggle-hover-bg: var(--vtx-color-neutral-600, #525252);\r\n --vtx-sidemenu-toggle-color: var(--vtx-color-neutral-400, #a3a3a3);\r\n}\r\n\r\n/* ===================================\r\n THEME: Primary - Using Theme Tokens\r\n =================================== */\r\n\r\n.vtx-sidemenu--primary {\r\n --vtx-sidemenu-bg: var(--vtx-color-primary-800, #1e40af);\r\n --vtx-sidemenu-border: var(--vtx-color-primary-900, #1e3a8a);\r\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));\r\n \r\n --vtx-sidemenu-item-color: var(--vtx-color-primary-100, #dbeafe);\r\n --vtx-sidemenu-item-hover-bg: var(--vtx-color-primary-900, #1e3a8a);\r\n --vtx-sidemenu-item-active-bg: var(--vtx-color-primary-500, #3b82f6);\r\n --vtx-sidemenu-item-active-color: var(--vtx-color-neutral-50, #fafafa);\r\n --vtx-sidemenu-item-icon-color: var(--vtx-color-primary-300, #93c5fd);\r\n --vtx-sidemenu-item-icon-active-color: var(--vtx-color-neutral-50, #fafafa);\r\n \r\n --vtx-sidemenu-submenu-bg: var(--vtx-color-primary-900, #1e3a8a);\r\n --vtx-sidemenu-submenu-border: var(--vtx-color-primary-800, #1e40af);\r\n \r\n --vtx-sidemenu-header-border: var(--vtx-color-primary-900, #1e3a8a);\r\n --vtx-sidemenu-footer-border: var(--vtx-color-primary-900, #1e3a8a);\r\n \r\n --vtx-sidemenu-toggle-bg: var(--vtx-color-primary-900, #1e3a8a);\r\n --vtx-sidemenu-toggle-hover-bg: var(--vtx-color-primary-700, #1d4ed8);\r\n --vtx-sidemenu-toggle-color: var(--vtx-color-primary-300, #93c5fd);\r\n}\r\n\r\n/* ===================================\r\n THEME: Gradient\r\n =================================== */\r\n\r\n.vtx-sidemenu--gradient {\r\n background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);\r\n --vtx-sidemenu-bg: transparent;\r\n --vtx-sidemenu-border: rgba(255, 255, 255, 0.1);\r\n --vtx-sidemenu-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);\r\n \r\n --vtx-sidemenu-item-color: rgba(255, 255, 255, 0.9);\r\n --vtx-sidemenu-item-hover-bg: rgba(255, 255, 255, 0.1);\r\n --vtx-sidemenu-item-active-bg: rgba(255, 255, 255, 0.2);\r\n --vtx-sidemenu-item-active-color: #ffffff;\r\n --vtx-sidemenu-item-icon-color: rgba(255, 255, 255, 0.7);\r\n --vtx-sidemenu-item-icon-active-color: #ffffff;\r\n \r\n --vtx-sidemenu-submenu-bg: rgba(0, 0, 0, 0.1);\r\n --vtx-sidemenu-submenu-border: rgba(255, 255, 255, 0.1);\r\n \r\n --vtx-sidemenu-header-border: rgba(255, 255, 255, 0.1);\r\n --vtx-sidemenu-footer-border: rgba(255, 255, 255, 0.1);\r\n \r\n --vtx-sidemenu-toggle-bg: rgba(255, 255, 255, 0.1);\r\n --vtx-sidemenu-toggle-hover-bg: rgba(255, 255, 255, 0.2);\r\n --vtx-sidemenu-toggle-color: rgba(255, 255, 255, 0.9);\r\n}\r\n\r\n/* ===================================\r\n Responsive Adjustments\r\n =================================== */\r\n\r\n/* Mobile Menu Button */\r\n.vtx-mobile-menu-button {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 44px;\r\n height: 44px;\r\n border: none;\r\n border-radius: var(--vtx-border-radius-lg, 0.5rem);\r\n background-color: transparent;\r\n color: var(--vtx-color-neutral-700, #404040);\r\n cursor: pointer;\r\n transition: all var(--vtx-transition-base, 200ms) cubic-bezier(0.4, 0, 0.2, 1);\r\n outline: none;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.vtx-mobile-menu-button::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background-color: var(--vtx-color-neutral-900, #171717);\r\n opacity: 0;\r\n transition: opacity var(--vtx-transition-base, 200ms) cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.vtx-mobile-menu-button:hover::before {\r\n opacity: 0.05;\r\n}\r\n\r\n.vtx-mobile-menu-button:active::before {\r\n opacity: 0.1;\r\n}\r\n\r\n.vtx-mobile-menu-button:focus-visible {\r\n outline: 2px solid var(--vtx-color-primary-600, #2563eb);\r\n outline-offset: 2px;\r\n}\r\n\r\n.vtx-mobile-menu-button svg {\r\n position: relative;\r\n z-index: 1;\r\n}\r\n\r\n/* Button Variants */\r\n.vtx-mobile-menu-button--default {\r\n background-color: var(--vtx-color-neutral-100, #f5f5f5);\r\n}\r\n\r\n.vtx-mobile-menu-button--default:hover {\r\n background-color: var(--vtx-color-neutral-200, #e5e5e5);\r\n}\r\n\r\n.vtx-mobile-menu-button--ghost {\r\n background-color: transparent;\r\n border: 1px solid var(--vtx-color-neutral-300, #d4d4d4);\r\n}\r\n\r\n.vtx-mobile-menu-button--ghost:hover {\r\n border-color: var(--vtx-color-neutral-400, #a3a3a3);\r\n background-color: var(--vtx-color-neutral-50, #fafafa);\r\n}\r\n\r\n.vtx-mobile-menu-button--minimal {\r\n background-color: transparent;\r\n}\r\n\r\n/* Hide on desktop by default */\r\n@media (min-width: 769px) {\r\n .vtx-mobile-menu-button {\r\n display: none;\r\n }\r\n}\r\n\r\n/* Mobile: Overlay Mode */\r\n.vtx-sidemenu--mobile {\r\n position: fixed;\r\n left: 0;\r\n top: 0;\r\n z-index: var(--vtx-z-index-modal, 1200);\r\n transform: translateX(-100%);\r\n transition: transform var(--vtx-sidemenu-transition-speed) var(--vtx-sidemenu-transition-easing);\r\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));\r\n}\r\n\r\n.vtx-sidemenu--mobile.vtx-sidemenu--right {\r\n left: auto;\r\n right: 0;\r\n transform: translateX(100%);\r\n}\r\n\r\n.vtx-sidemenu--mobile.vtx-sidemenu--mobile-open {\r\n transform: translateX(0);\r\n}\r\n\r\n/* Backdrop */\r\n.vtx-sidemenu-backdrop {\r\n position: fixed;\r\n inset: 0;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n z-index: calc(var(--vtx-z-index-modal, 1200) - 1);\r\n animation: fadeIn 200ms var(--vtx-sidemenu-transition-easing);\r\n backdrop-filter: blur(2px);\r\n -webkit-backdrop-filter: blur(2px);\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/* Mobile Close Button */\r\n.vtx-sidemenu-mobile-close {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 40px;\r\n height: 40px;\r\n border-radius: var(--vtx-border-radius-lg, 0.5rem);\r\n background-color: transparent;\r\n border: none;\r\n cursor: pointer;\r\n color: var(--vtx-sidemenu-item-color);\r\n transition: all var(--vtx-sidemenu-transition-speed) var(--vtx-sidemenu-transition-easing);\r\n outline: none;\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-sidemenu-mobile-close:hover {\r\n background-color: var(--vtx-sidemenu-item-hover-bg);\r\n}\r\n\r\n.vtx-sidemenu-mobile-close:focus-visible {\r\n outline: 2px solid var(--vtx-color-primary-600, #2563eb);\r\n outline-offset: 2px;\r\n}\r\n\r\n/* Mobile: Larger touch targets */\r\n.vtx-sidemenu--mobile .vtx-sidemenu-item-content {\r\n padding: 14px 16px;\r\n min-height: 48px;\r\n}\r\n\r\n.vtx-sidemenu--mobile .vtx-sidemenu-item-icon {\r\n width: 24px;\r\n height: 24px;\r\n}\r\n\r\n.vtx-sidemenu--mobile .vtx-sidemenu-toggle {\r\n width: 44px;\r\n height: 44px;\r\n}\r\n\r\n.vtx-sidemenu--mobile .vtx-sidemenu-header {\r\n min-height: 64px;\r\n padding: var(--vtx-spacing-4, 1rem) var(--vtx-spacing-4, 1rem);\r\n}\r\n\r\n/* Desktop: Push Mode */\r\n@media (min-width: 769px) {\r\n .vtx-sidemenu {\r\n position: relative;\r\n transform: none !important;\r\n }\r\n}\r\n\r\n/* Tablet: Adjust for medium screens */\r\n@media (max-width: 1024px) and (min-width: 769px) {\r\n .vtx-sidemenu {\r\n width: 240px !important;\r\n }\r\n \r\n .vtx-sidemenu--collapsed {\r\n width: 64px !important;\r\n }\r\n}\r\n\r\n/* ===================================\r\n Accessibility\r\n =================================== */\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n .vtx-sidemenu,\r\n .vtx-sidemenu-item,\r\n .vtx-sidemenu-toggle,\r\n .vtx-sidemenu-item-icon,\r\n .vtx-sidemenu-item-chevron,\r\n .vtx-sidemenu-submenu {\r\n transition: none;\r\n animation: none;\r\n }\r\n}\r\n\r\n/* High Contrast Mode */\r\n@media (prefers-contrast: high) {\r\n .vtx-sidemenu {\r\n border: 2px solid currentColor;\r\n }\r\n \r\n .vtx-sidemenu-item--active {\r\n outline: 2px solid currentColor;\r\n outline-offset: -2px;\r\n }\r\n}\r\n");const $e=({isOpen:n})=>r.jsx("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.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})}),Me=i.default.forwardRef(({label:e,onClick:t,icon:a,disabled:o=!1,active:i=!1,items:l,badge:d,href:s,collapsed:c=!1,level:x=0},v)=>{const[m,p]=n.useState(!1),h=l&&l.length>0,u=r.jsx(r.Fragment,{children:r.jsxs(hn,{align:"center",gap:c?0:12,style:{flex:1,minWidth:0},children:[a&&r.jsx("span",{className:"vtx-sidemenu-item-icon",children:a}),!c&&r.jsxs(r.Fragment,{children:[r.jsx(gn,{variant:"body2",noMargin:!0,style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:e}),d&&r.jsx("span",{className:"vtx-sidemenu-item-badge",children:d}),h&&r.jsx($e,{isOpen:m})]})]})}),g=["vtx-sidemenu-item",i&&"vtx-sidemenu-item--active",o&&"vtx-sidemenu-item--disabled",h&&"vtx-sidemenu-item--has-submenu",c&&"vtx-sidemenu-item--collapsed"].filter(Boolean).join(" "),b=s?"a":"div";return r.jsxs(r.Fragment,{children:[r.jsx(b,{ref:v,className:g,onClick:r=>{o||(h?(r.preventDefault(),p(!m)):t&&(r.preventDefault(),t()))},onKeyDown:r=>{o||"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),h?p(!m):null==t||t())},role:"menuitem",tabIndex:o?-1:0,"aria-disabled":o,"aria-expanded":h?m:void 0,href:s,title:c?e:void 0,"data-label":c?e:void 0,children:u}),h&&m&&!c&&r.jsx("div",{className:"vtx-sidemenu-submenu",children:l.map((n,e)=>r.jsx(Me,{...n,collapsed:c,level:x+1},e))})]})});Me.displayName="SideMenuItem";const Te=i.default.forwardRef(({items:n,collapsed:e=!1,onCollapseToggle:t,className:a="",width:o="260px",collapsedWidth:i="80px",header:l,footer:d,headerPadding:s,footerPadding:c},x)=>{const v=e?"number"==typeof i?`${i}px`:i:"number"==typeof o?`${o}px`:o,m=["vtx-sidemenu",e&&"vtx-sidemenu--collapsed",a].filter(Boolean).join(" ");return r.jsxs("aside",{ref:x,className:m,style:{width:v},role:"navigation",children:[l&&r.jsx("div",{className:"vtx-sidemenu-header",style:s?{padding:"number"==typeof s?`${s}px`:s}:void 0,children:l}),r.jsx("div",{className:"vtx-sidemenu-content",children:n.map((n,t)=>r.jsx(Me,{...n,collapsed:e},t))}),d&&r.jsx("div",{className:"vtx-sidemenu-footer",style:c?{padding:"number"==typeof c?`${c}px`:c}:void 0,children:d})]})});Te.displayName="SideMenu";const De=j(Te);function Ie({columns:e,data:t,getRowKey:a,striped:o=!1,hoverable:l=!0,bordered:d=!1,size:s,caption:c,emptyMessage:x="No data available",emptyStateIcon:v,emptyStateDescription:m,loading:p=!1,loadingContent:h,skeletonLoader:u=!1,skeletonRows:g=5,scrollable:b=!0,maxHeight:f,onRowClick:y,isRowSelected:w,onRowSelect:k,sortable:j=!1,sortConfig:_,onSortChange:N,className:z="",containerClassName:C="",selectable:S=!1,selectedRows:$=[],onSelectionChange:M,pagination:T=!1,page:D=0,rowsPerPage:L=10,rowsPerPageOptions:A=[5,10,25,50],onPageChange:R,onRowsPerPageChange:E,dense:W=!1,expandableRows:P=!1,renderExpandedRow:H,expandedRows:V=[],onExpandRow:Y,stickyHeader:q=!1,toolbar:U,filterable:G=!1,filters:X={},onFiltersChange:K,...Q}){const{theme:J}=zr(),Z=s||J.defaultSize,[rr,nr]=n.useState(_||null),[er,tr]=n.useState($),[ar,or]=n.useState(V),[ir,lr]=n.useState(D),[dr,mr]=n.useState(L),[pr,hr]=n.useState(X),ur=_||rr,gr=$.length>0?$:er,br=V.length>0?V:ar,fr=R?D:ir,yr=E?L:dr,wr=Object.keys(X).length>0?X:pr,kr=r=>{if(!j)return;const n=(null==ur?void 0:ur.key)===r&&"asc"===ur.direction?"desc":"asc",e={key:r,direction:n};N?N(r,n):nr(e)},jr=n.useMemo(()=>{if(!ur||!j)return t;const r=e.find(r=>r.key===ur.key),n=null==r?void 0:r.sortFn;return[...t].sort((r,e)=>{if(n)return"asc"===ur.direction?n(r,e):n(e,r);const t=r[ur.key],a=e[ur.key];if("string"==typeof t&&"string"==typeof a)return"asc"===ur.direction?t.localeCompare(a):a.localeCompare(t);if("number"==typeof t&&"number"==typeof a)return"asc"===ur.direction?t-a:a-t;const o=String(t),i=String(a);return"asc"===ur.direction?o.localeCompare(i):i.localeCompare(o)})},[t,ur,e,j]),_r=n.useMemo(()=>G&&0!==Object.keys(wr).length?jr.filter(r=>Object.entries(wr).every(([n,t])=>{if(!t)return!0;const a=e.find(r=>r.key===n);if(null==a?void 0:a.filterFn)return a.filterFn(r,t);const o=r[n];return String(o||"").toLowerCase().includes(t.toLowerCase())})):jr,[jr,G,wr,e]),Nr=n.useMemo(()=>{if(!T)return _r;const r=fr*yr;return _r.slice(r,r+yr)},[_r,T,fr,yr]),Cr=T?Nr:_r,Sr=n.useCallback(r=>{if(!S)return;const n=r?Cr.map((r,n)=>a(r,n)):[];M?M(n):tr(n)},[S,Cr,a,M]),$r=n.useCallback((r,n)=>{if(!S)return;const e=n?[...gr,r]:gr.filter(n=>n!==r);M?M(e):tr(e)},[S,gr,M]),Mr=S&&Cr.length>0&&Cr.every((r,n)=>gr.includes(a(r,n))),Tr=S&&gr.length>0&&!Mr,Ir=n.useCallback(r=>{if(!P)return;const n=br.includes(r)?br.filter(n=>n!==r):[...br,r];Y?Y(r):or(n)},[P,br,Y]),Lr=n.useCallback(r=>{R?R(r):lr(r)},[R]),Ar=n.useCallback(r=>{E?E(r):(mr(r),lr(0))},[E]),Rr=n.useCallback((r,n)=>{const e={...wr,[r]:n};n||delete e[r],K?K(e):hr(e),T&&(R?R(0):lr(0))},[wr,K,T,R]),Er=["vtx-table-container",b&&"vtx-table-container--scrollable",f&&"vtx-table-container--fixed-header",q&&"vtx-table-container--sticky-header",C].filter(Boolean).join(" "),Br=["vtx-table",`vtx-table--${Z}`,W&&"vtx-table--dense",o&&"vtx-table--striped",l&&"vtx-table--hoverable",d&&"vtx-table--bordered",(y||S)&&"vtx-table--clickable",q&&"vtx-table--sticky-header",z].filter(Boolean).join(" "),Or=(r,n,e)=>{k&&k(r,n),null==y||y(r,n,e)},Wr=n=>{if(!j)return null;const e=(null==ur?void 0:ur.key)===n,t=null==ur?void 0:ur.direction;return e?r.jsx("span",{className:"vtx-table-sort-icon vtx-table-sort-icon--active",children:"asc"===t?r.jsx(sr,{size:14}):r.jsx(cr,{size:14})}):r.jsx("span",{className:"vtx-table-sort-icon vtx-table-sort-icon--inactive",children:r.jsx(sr,{size:14})})};return r.jsxs("div",{className:"vtx-table-wrapper",children:[U&&r.jsx("div",{className:"vtx-table-toolbar",children:"object"==typeof U&&null!==U&&!i.default.isValidElement(U)&&"title"in U?r.jsxs(hn,{justify:"between",align:"center",style:{width:"100%"},children:[U.title&&r.jsx(gn,{variant:"h6",noMargin:!0,children:U.title}),U.actions&&r.jsx("div",{className:"vtx-table-toolbar-actions",children:U.actions})]}):r.jsx(r.Fragment,{children:U})}),S&&gr.length>0&&r.jsx("div",{className:"vtx-table-selection-toolbar",children:r.jsx(hn,{align:"center",gap:16,children:r.jsxs(gn,{variant:"body2",noMargin:!0,children:[gr.length," selected"]})})}),r.jsx("div",{className:Er,style:{maxHeight:f},children:r.jsxs("table",{className:Br,...Q,children:[c&&r.jsx("caption",{className:"vtx-table-caption",children:c}),r.jsx("thead",{className:"vtx-table-header",children:r.jsxs("tr",{children:[S&&r.jsx("th",{className:"vtx-table-header-cell vtx-table-cell--checkbox",children:r.jsx(Dr,{checked:Mr,indeterminate:Tr,onChange:r=>Sr(r.target.checked),"aria-label":"Select all rows"})}),P&&r.jsx("th",{className:"vtx-table-header-cell vtx-table-cell--expand"}),e.map(n=>{const e=j&&!1!==n.sortable,t=G&&!1!==n.filterable,a=["vtx-table-header-cell",e&&"vtx-table-header-cell--sortable",n.sticky&&`vtx-table-header-cell--sticky-${n.sticky}`,n.headerClassName].filter(Boolean).join(" ");return r.jsx("th",{className:a,style:{width:n.width,minWidth:n.minWidth,maxWidth:n.maxWidth,textAlign:n.align||"left"},"aria-sort":(null==ur?void 0:ur.key)===n.key?"asc"===ur.direction?"ascending":"descending":void 0,children:r.jsxs("div",{className:"vtx-table-header-content",children:[r.jsxs("div",{className:"vtx-table-header-label",onClick:()=>e&&kr(n.key),onKeyDown:r=>{!e||"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),kr(n.key))},role:e?"button":void 0,tabIndex:e?0:void 0,style:{cursor:e?"pointer":"default"},children:[r.jsx("span",{children:n.header}),e&&Wr(n.key)]}),t&&r.jsx("div",{className:"vtx-table-filter",children:r.jsx(Fr,{size:"sm",placeholder:n.filterPlaceholder||`Filter ${n.header}...`,value:wr[n.key]||"",onChange:r=>Rr(n.key,r.target.value),className:"vtx-table-filter-input"})})]})},n.key)})]})}),r.jsx("tbody",{className:"vtx-table-body",children:p?u?Array.from({length:g}).map((n,t)=>r.jsxs("tr",{className:"vtx-table-row vtx-table-row--skeleton",children:[S&&r.jsx("td",{className:"vtx-table-cell",children:r.jsx("div",{className:"vtx-table-skeleton vtx-table-skeleton--checkbox"})}),P&&r.jsx("td",{className:"vtx-table-cell",children:r.jsx("div",{className:"vtx-table-skeleton vtx-table-skeleton--icon"})}),e.map(n=>r.jsx("td",{className:"vtx-table-cell",children:r.jsx("div",{className:"vtx-table-skeleton vtx-table-skeleton--text"})},n.key))]},`skeleton-${t}`)):r.jsx("tr",{children:r.jsx("td",{colSpan:e.length+(S?1:0)+(P?1:0),className:"vtx-table-loading",children:r.jsx("div",{className:"vtx-table-loading-content",children:h||r.jsxs(r.Fragment,{children:[r.jsx("div",{className:"vtx-table-spinner"}),r.jsx(gn,{size:"sm",children:"Loading..."})]})})})}):0===Cr.length?r.jsx("tr",{children:r.jsx("td",{colSpan:e.length+(S?1:0)+(P?1:0),className:"vtx-table-empty",children:v||m?r.jsxs("div",{className:"vtx-table-empty-state",children:[v&&r.jsx("div",{className:"vtx-table-empty-state-icon",children:v}),r.jsx("div",{className:"vtx-table-empty-state-message",children:x}),m&&r.jsx("div",{className:"vtx-table-empty-state-description",children:m})]}):x})}):Cr.map((n,t)=>{const o=a(n,t),l=gr.includes(o),d=br.includes(o),s=["vtx-table-row",l&&"vtx-table-row--selected",d&&"vtx-table-row--expanded"].filter(Boolean).join(" ");return r.jsxs(i.default.Fragment,{children:[r.jsxs("tr",{className:s,onClick:r=>{S&&!r.target.closest("input, button")||Or(n,t,r)},role:y?"button":void 0,tabIndex:y?0:void 0,"aria-selected":l,onKeyDown:r=>{!y||"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),Or(n,t,r))},children:[S&&r.jsx("td",{className:"vtx-table-cell vtx-table-cell--checkbox",children:r.jsx(Dr,{checked:l,onChange:r=>{r.stopPropagation(),$r(o,r.target.checked)},"aria-label":`Select row ${t+1}`})}),P&&r.jsx("td",{className:"vtx-table-cell vtx-table-cell--expand",children:r.jsx("button",{className:"vtx-table-expand-button",onClick:r=>{r.stopPropagation(),Ir(o)},"aria-label":d?"Collapse row":"Expand row","aria-expanded":d,children:d?r.jsx(F,{size:16}):r.jsx(I,{size:16})})}),e.map(e=>{const a=["vtx-table-cell",e.sticky&&`vtx-table-cell--sticky-${e.sticky}`,e.className].filter(Boolean).join(" ");return r.jsx("td",{className:a,style:{textAlign:e.align||"left",width:e.width,minWidth:e.minWidth,maxWidth:e.maxWidth},children:e.render?e.render(n,t):n[e.key]},e.key)})]}),P&&d&&H&&r.jsx("tr",{className:"vtx-table-row-expanded",children:r.jsx("td",{colSpan:e.length+(S?1:0)+1,className:"vtx-table-cell-expanded",children:H(n,t)})})]},o)})})]})}),T&&r.jsx("div",{className:"vtx-table-pagination",children:r.jsxs(hn,{align:"center",justify:"between",style:{width:"100%"},children:[r.jsxs(hn,{align:"center",gap:8,children:[r.jsx(gn,{variant:"body2",textColor:"var(--color-neutral-600)",noMargin:!0,children:"Rows per page:"}),r.jsx("select",{className:"vtx-table-pagination-select",value:yr,onChange:r=>Ar(Number(r.target.value)),"aria-label":"Rows per page",children:A.map(n=>r.jsx("option",{value:n,children:n},n))})]}),r.jsxs(hn,{align:"center",gap:16,children:[r.jsxs(gn,{variant:"body2",textColor:"var(--color-neutral-600)",noMargin:!0,children:[fr*yr+1,"–",Math.min((fr+1)*yr,_r.length)," of"," ",_r.length]}),r.jsxs(hn,{align:"center",gap:4,children:[r.jsx("button",{className:"vtx-table-pagination-button",onClick:()=>Lr(0),disabled:0===fr,"aria-label":"First page",title:"First page",children:r.jsx(xr,{size:18})}),r.jsx("button",{className:"vtx-table-pagination-button",onClick:()=>Lr(fr-1),disabled:0===fr,"aria-label":"Previous page",title:"Previous page",children:r.jsx(B,{size:18})}),r.jsx("button",{className:"vtx-table-pagination-button",onClick:()=>Lr(fr+1),disabled:(fr+1)*yr>=_r.length,"aria-label":"Next page",title:"Next page",children:r.jsx(O,{size:18})}),r.jsx("button",{className:"vtx-table-pagination-button",onClick:()=>Lr(Math.ceil(_r.length/yr)-1),disabled:(fr+1)*yr>=_r.length,"aria-label":"Last page",title:"Last page",children:r.jsx(vr,{size:18})})]})]})]})})]})}mr("/* Table Wrapper & Toolbar */\r\n.vtx-table-wrapper {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n background-color: white;\r\n border-radius: var(--vtx-radius-lg);\r\n border: 1px solid var(--vtx-color-neutral-200);\r\n overflow: hidden;\r\n}\r\n\r\n.vtx-table-toolbar {\r\n padding: var(--vtx-spacing-4) var(--vtx-spacing-6);\r\n border-bottom: 1px solid var(--vtx-color-neutral-200);\r\n background-color: white;\r\n}\r\n\r\n.vtx-table-toolbar-actions {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-2);\r\n}\r\n\r\n.vtx-table-selection-toolbar {\r\n padding: var(--vtx-spacing-3) var(--vtx-spacing-6);\r\n background-color: var(--vtx-color-primary-50);\r\n border-bottom: 1px solid var(--vtx-color-primary-100);\r\n}\r\n\r\n.vtx-table-container {\r\n width: 100%;\r\n overflow-x: auto;\r\n}\r\n\r\n.vtx-table-container--fixed-header,\r\n.vtx-table-container--sticky-header {\r\n overflow-y: auto;\r\n}\r\n\r\n.vtx-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n font-family: var(--vtx-font-family-sans);\r\n background-color: white;\r\n}\r\n\r\n.vtx-table-caption {\r\n padding: var(--vtx-spacing-4);\r\n font-size: var(--vtx-font-size-lg);\r\n font-weight: var(--vtx-font-weight-semibold);\r\n text-align: left;\r\n color: var(--vtx-color-neutral-900);\r\n}\r\n\r\n/* Header */\r\n.vtx-table-header {\r\n background-color: var(--vtx-color-neutral-50);\r\n border-bottom: 2px solid var(--vtx-color-neutral-200);\r\n}\r\n\r\n.vtx-table--sticky-header .vtx-table-header {\r\n position: sticky;\r\n top: 0;\r\n z-index: 10;\r\n}\r\n\r\n.vtx-table-header-cell {\r\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\r\n font-size: var(--vtx-font-size-sm);\r\n font-weight: var(--vtx-font-weight-semibold);\r\n color: var(--vtx-color-neutral-700);\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n white-space: nowrap;\r\n background-color: var(--vtx-color-neutral-50);\r\n}\r\n\r\n.vtx-table-header-cell--sortable {\r\n cursor: pointer;\r\n user-select: none;\r\n transition: background-color var(--vtx-transition-fast);\r\n}\r\n\r\n.vtx-table-header-cell--sortable:hover {\r\n background-color: var(--vtx-color-neutral-100);\r\n}\r\n\r\n.vtx-table-header-content {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-1);\r\n}\r\n\r\n.vtx-table-header-label {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--vtx-spacing-1);\r\n}\r\n\r\n.vtx-table-sort-icon {\r\n display: flex;\r\n align-items: center;\r\n flex-direction: row;\r\n}\r\n\r\n/* Body */\r\n.vtx-table-body {\r\n background-color: white;\r\n}\r\n\r\n.vtx-table-row {\r\n border-bottom: 1px solid var(--vtx-color-neutral-200);\r\n transition: background-color var(--vtx-transition-fast);\r\n}\r\n\r\n.vtx-table-row:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.vtx-table-row--selected {\r\n background-color: var(--vtx-color-primary-50);\r\n}\r\n\r\n.vtx-table-row--expanded {\r\n border-bottom: none;\r\n}\r\n\r\n.vtx-table-row-expanded {\r\n border-bottom: 1px solid var(--vtx-color-neutral-200);\r\n}\r\n\r\n.vtx-table-row-expanded:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.vtx-table-cell-expanded {\r\n padding: var(--vtx-spacing-4);\r\n background-color: var(--vtx-color-neutral-50);\r\n}\r\n\r\n.vtx-table-cell {\r\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\r\n font-size: var(--vtx-font-size-base);\r\n color: var(--vtx-color-neutral-900);\r\n}\r\n\r\n.vtx-table-cell--checkbox {\r\n width: 48px;\r\n padding: var(--vtx-spacing-2);\r\n}\r\n\r\n.vtx-table-cell--expand {\r\n width: 48px;\r\n padding: var(--vtx-spacing-2);\r\n}\r\n\r\n.vtx-table-expand-button {\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 border-radius: var(--vtx-radius-md);\r\n cursor: pointer;\r\n color: var(--vtx-color-neutral-600);\r\n transition: all var(--vtx-transition-fast);\r\n}\r\n\r\n.vtx-table-expand-button:hover {\r\n background-color: var(--vtx-color-neutral-100);\r\n color: var(--vtx-color-neutral-900);\r\n}\r\n\r\n/* Sizes */\r\n.vtx-table--small .vtx-table-header-cell,\r\n.vtx-table--small .vtx-table-cell {\r\n padding: var(--vtx-spacing-2) var(--vtx-spacing-3);\r\n font-size: var(--vtx-font-size-sm);\r\n}\r\n\r\n.vtx-table--large .vtx-table-header-cell,\r\n.vtx-table--large .vtx-table-cell {\r\n padding: var(--vtx-spacing-4) var(--vtx-spacing-6);\r\n font-size: var(--vtx-font-size-lg);\r\n}\r\n\r\n.vtx-table--dense .vtx-table-header-cell,\r\n.vtx-table--dense .vtx-table-cell {\r\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\r\n font-size: var(--vtx-font-size-sm);\r\n}\r\n\r\n/* Striped */\r\n.vtx-table--striped .vtx-table-row:nth-child(even) {\r\n background-color: var(--vtx-color-neutral-50);\r\n}\r\n\r\n/* Hoverable */\r\n.vtx-table--hoverable .vtx-table-row:hover {\r\n background-color: var(--vtx-color-primary-50);\r\n}\r\n\r\n.vtx-table--hoverable .vtx-table-row--selected:hover {\r\n background-color: var(--vtx-color-primary-100);\r\n}\r\n\r\n/* Clickable */\r\n.vtx-table--clickable .vtx-table-row {\r\n cursor: pointer;\r\n}\r\n\r\n/* Bordered */\r\n.vtx-table--bordered .vtx-table-cell,\r\n.vtx-table--bordered .vtx-table-header-cell {\r\n border-right: 1px solid var(--vtx-color-neutral-200);\r\n}\r\n\r\n.vtx-table--bordered .vtx-table-cell:last-child,\r\n.vtx-table--bordered .vtx-table-header-cell:last-child {\r\n border-right: none;\r\n}\r\n\r\n/* Empty state */\r\n.vtx-table-empty {\r\n padding: var(--vtx-spacing-12) var(--vtx-spacing-4);\r\n text-align: center;\r\n color: var(--vtx-color-neutral-500);\r\n font-style: italic;\r\n}\r\n\r\n.vtx-table-empty-state {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: var(--vtx-spacing-3);\r\n padding: var(--vtx-spacing-8) var(--vtx-spacing-4);\r\n}\r\n\r\n.vtx-table-empty-state-icon {\r\n font-size: 48px;\r\n color: var(--vtx-color-neutral-400);\r\n opacity: 0.6;\r\n}\r\n\r\n.vtx-table-empty-state-message {\r\n font-size: var(--vtx-font-size-lg);\r\n font-weight: var(--vtx-font-weight-semibold);\r\n color: var(--vtx-color-neutral-700);\r\n font-style: normal;\r\n}\r\n\r\n.vtx-table-empty-state-description {\r\n font-size: var(--vtx-font-size-sm);\r\n color: var(--vtx-color-neutral-500);\r\n max-width: 400px;\r\n line-height: 1.5;\r\n font-style: normal;\r\n}\r\n\r\n/* Loading state */\r\n.vtx-table-loading,\r\n.vtx-table-empty {\r\n padding: 0;\r\n text-align: center;\r\n border: none;\r\n}\r\n\r\n.vtx-table-loading-content,\r\n.vtx-table-empty-content {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: var(--vtx-spacing-4);\r\n padding: var(--vtx-spacing-16) var(--vtx-spacing-6);\r\n color: var(--vtx-color-neutral-600);\r\n}\r\n\r\n.vtx-table-spinner {\r\n width: 40px;\r\n height: 40px;\r\n border: 3px solid var(--vtx-color-primary-100);\r\n border-top-color: var(--vtx-color-primary-500);\r\n border-radius: 50%;\r\n animation: vtx-spinner-rotate 0.8s linear infinite;\r\n}\r\n\r\n@keyframes vtx-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.vtx-table-loading-spinner {\r\n display: inline-block;\r\n animation: vtx-spin 1s linear infinite;\r\n}\r\n\r\n/* Skeleton loader */\r\n.vtx-table-row--skeleton {\r\n animation: vtx-pulse 1.5s ease-in-out infinite;\r\n}\r\n\r\n.vtx-table-skeleton {\r\n height: 16px;\r\n background: linear-gradient(\r\n 90deg,\r\n var(--vtx-color-neutral-200) 25%,\r\n var(--vtx-color-neutral-100) 50%,\r\n var(--vtx-color-neutral-200) 75%\r\n );\r\n background-size: 200% 100%;\r\n border-radius: var(--vtx-radius-sm);\r\n animation: vtx-skeleton-shimmer 1.5s ease-in-out infinite;\r\n}\r\n\r\n.vtx-table-skeleton--text {\r\n width: 100%;\r\n max-width: 180px;\r\n}\r\n\r\n.vtx-table-skeleton--checkbox {\r\n width: 16px;\r\n height: 16px;\r\n border-radius: var(--vtx-radius-xs);\r\n}\r\n\r\n.vtx-table-skeleton--icon {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: var(--vtx-radius-xs);\r\n}\r\n\r\n@keyframes vtx-skeleton-shimmer {\r\n 0% {\r\n background-position: 200% 0;\r\n }\r\n 100% {\r\n background-position: -200% 0;\r\n }\r\n}\r\n\r\n@keyframes vtx-pulse {\r\n 0%, 100% {\r\n opacity: 1;\r\n }\r\n 50% {\r\n opacity: 0.7;\r\n }\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/* Pagination */\r\n.vtx-table-pagination {\r\n display: flex;\r\n align-items: center;\r\n padding: var(--vtx-spacing-3) var(--vtx-spacing-4);\r\n border-top: 1px solid var(--vtx-color-neutral-200);\r\n background-color: white;\r\n}\r\n\r\n.vtx-table-pagination-select {\r\n padding: var(--vtx-spacing-1) var(--vtx-spacing-2);\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 color: var(--vtx-color-neutral-900);\r\n background-color: white;\r\n cursor: pointer;\r\n transition: border-color var(--vtx-transition-fast);\r\n}\r\n\r\n.vtx-table-pagination-select:hover {\r\n border-color: var(--vtx-color-neutral-400);\r\n}\r\n\r\n.vtx-table-pagination-select:focus {\r\n outline: none;\r\n border-color: var(--vtx-color-primary-500);\r\n box-shadow: 0 0 0 3px var(--vtx-color-primary-100);\r\n}\r\n\r\n.vtx-table-pagination-button {\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 border-radius: var(--vtx-radius-md);\r\n color: var(--vtx-color-neutral-600);\r\n cursor: pointer;\r\n transition: all var(--vtx-transition-fast);\r\n}\r\n\r\n.vtx-table-pagination-button:hover:not(:disabled) {\r\n background-color: var(--vtx-color-neutral-100);\r\n color: var(--vtx-color-neutral-900);\r\n}\r\n\r\n.vtx-table-pagination-button:disabled {\r\n opacity: 0.4;\r\n cursor: not-allowed;\r\n}\r\n\r\n/* Sticky columns */\r\n.vtx-table-cell--sticky-left,\r\n.vtx-table-header-cell--sticky-left {\r\n position: sticky;\r\n left: 0;\r\n z-index: 2;\r\n background-color: white;\r\n box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.vtx-table-cell--sticky-right,\r\n.vtx-table-header-cell--sticky-right {\r\n position: sticky;\r\n right: 0;\r\n z-index: 2;\r\n background-color: white;\r\n box-shadow: -2px 0 4px rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.vtx-table-header-cell--sticky-left,\r\n.vtx-table-header-cell--sticky-right {\r\n z-index: 11;\r\n background-color: var(--vtx-color-neutral-50);\r\n}\r\n/* Dark mode */\r\n[data-theme='dark'] .vtx-table-wrapper {\r\n background-color: var(--vtx-color-neutral-800);\r\n border-color: var(--vtx-color-neutral-700);\r\n}\r\n\r\n[data-theme='dark'] .vtx-table {\r\n background-color: var(--vtx-color-neutral-800);\r\n color: var(--vtx-color-neutral-100);\r\n}\r\n\r\n[data-theme='dark'] .vtx-table-empty-state-icon {\r\n color: var(--vtx-color-neutral-500);\r\n}\r\n\r\n[data-theme='dark'] .vtx-table-empty-state-message {\r\n color: var(--vtx-color-neutral-200);\r\n}\r\n\r\n[data-theme='dark'] .vtx-table-empty-state-description {\r\n color: var(--vtx-color-neutral-400);\r\n}\r\n\r\n[data-theme='dark'] .vtx-table-skeleton {\r\n background: linear-gradient(\r\n 90deg,\r\n var(--vtx-color-neutral-700) 25%,\r\n var(--vtx-color-neutral-600) 50%,\r\n var(--vtx-color-neutral-700) 75%\r\n );\r\n background-size: 200% 100%;\r\n}\r\n\r\n[data-theme='dark'] .vtx-table-cell--sticky-left,\r\n[data-theme='dark'] .vtx-table-header-cell--sticky-left,\r\n[data-theme='dark'] .vtx-table-cell--sticky-right,\r\n[data-theme='dark'] .vtx-table-header-cell--sticky-right {\r\n background-color: var(--vtx-color-neutral-800);\r\n}\r\n\r\n[data-theme='dark'] .vtx-table-header-cell--sticky-left,\r\n[data-theme='dark'] .vtx-table-header-cell--sticky-right {\r\n background-color: var(--vtx-color-neutral-700);\r\n}"),Ie.displayName="Table";const Le=j(Ie);mr("/* ==================== 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 Ae=({steps:n,currentStep:e,orientation:t="horizontal",variant:a="default",showCheckmarks:o=!0,color:i="success",size:l="md",className:d="",style:s})=>{const c=n.map(r=>"string"==typeof r?{label:r}:r),x=(n,e,t)=>n.icon?r.jsx("span",{className:"timeline-step-custom-icon",children:n.icon}):"completed"===t&&o?r.jsx("svg",{className:"timeline-step-checkmark",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("path",{d:"M20 6L9 17L4 12",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round"})}):"numbered"===a?r.jsx("span",{className:"timeline-step-number",children:e+1}):r.jsx("span",{className:"timeline-step-dot"});return r.jsx("div",{className:`timeline timeline--${t} timeline--${a} timeline--${i} timeline--${l} ${d}`,style:s,children:c.map((n,t)=>{const a=(r=>r<e?"completed":r===e?"active":"pending")(t),o=t===c.length-1,i=!!n.onClick,l=(r=>r<e)(t);return r.jsxs("div",{className:`timeline-step timeline-step--${a} ${i?"timeline-step--clickable":""}`,onClick:()=>(r=>{r.onClick&&r.onClick()})(n),children:[r.jsx("div",{className:"timeline-step-indicator",children:r.jsx("div",{className:"timeline-step-icon-wrapper",children:x(n,t,a)})}),!o&&r.jsx("div",{className:"timeline-connector "+(l?"timeline-connector--filled":"")}),r.jsxs("div",{className:"timeline-step-content",children:[r.jsx(gn,{variant:"body2",weight:"active"===a?"semibold":"medium",noMargin:!0,className:"timeline-step-label",children:n.label}),n.description&&r.jsx(gn,{variant:"caption",noMargin:!0,className:"timeline-step-description",children:n.description})]})]},t)})})};Ae.displayName="Timeline";mr("/* Container Component Styles */\r\n\r\n.vtx-container {\r\n width: 100%;\r\n margin-left: auto;\r\n margin-right: auto;\r\n padding-left: var(--vtx-spacing-4);\r\n padding-right: var(--vtx-spacing-4);\r\n box-sizing: border-box;\r\n}\r\n\r\n/* Fluid container - 100% width */\r\n.vtx-container--fluid {\r\n max-width: 100%;\r\n}\r\n\r\n/* Fixed max-width variants */\r\n.vtx-container--xs {\r\n max-width: 540px;\r\n}\r\n\r\n.vtx-container--sm {\r\n max-width: 720px;\r\n}\r\n\r\n.vtx-container--md {\r\n max-width: 960px;\r\n}\r\n\r\n.vtx-container--lg {\r\n max-width: 1140px;\r\n}\r\n\r\n.vtx-container--xl {\r\n max-width: 1320px;\r\n}\r\n\r\n/* No gutters variant */\r\n.vtx-container--no-gutters {\r\n padding-left: 0;\r\n padding-right: 0;\r\n}\r\n\r\n/* Responsive breakpoints - Bootstrap-like behavior */\r\n@media (min-width: 576px) {\r\n .vtx-container--xs,\r\n .vtx-container--sm,\r\n .vtx-container--md,\r\n .vtx-container--lg,\r\n .vtx-container--xl {\r\n padding-left: var(--vtx-spacing-4);\r\n padding-right: var(--vtx-spacing-4);\r\n }\r\n}\r\n\r\n@media (min-width: 768px) {\r\n .vtx-container--xs,\r\n .vtx-container--sm,\r\n .vtx-container--md,\r\n .vtx-container--lg,\r\n .vtx-container--xl {\r\n padding-left: var(--vtx-spacing-6);\r\n padding-right: var(--vtx-spacing-6);\r\n }\r\n}\r\n\r\n@media (min-width: 992px) {\r\n .vtx-container--xs,\r\n .vtx-container--sm,\r\n .vtx-container--md,\r\n .vtx-container--lg,\r\n .vtx-container--xl {\r\n padding-left: var(--vtx-spacing-6);\r\n padding-right: var(--vtx-spacing-6);\r\n }\r\n}\r\n\r\n@media (min-width: 1200px) {\r\n .vtx-container--xs,\r\n .vtx-container--sm,\r\n .vtx-container--md,\r\n .vtx-container--lg,\r\n .vtx-container--xl {\r\n padding-left: var(--vtx-spacing-8);\r\n padding-right: var(--vtx-spacing-8);\r\n }\r\n}\r\n\r\n/* Dark mode support */\r\n[data-theme='dark'] .vtx-container {\r\n /* Container doesn't have background by default, so nothing to change */\r\n /* If you want to add background colors, do it here */\r\n}\r\n");const Re=i.default.forwardRef(({maxWidth:n="lg",disableGutters:e=!1,fluid:t=!1,className:a="",children:o,...i},l)=>{const d=["vtx-container",t||"fluid"===n?"vtx-container--fluid":`vtx-container--${n}`,e&&"vtx-container--no-gutters",a].filter(Boolean).join(" ");return r.jsx("div",{ref:l,className:d,...i,children:o})});Re.displayName="Container";const Ee=j(Re);mr("/* ==================== 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 Fe=i.default.forwardRef(({heading:n,items:e,showDividers:t=!1,compact:a=!1,variant:o="outlined",className:l="",style:d,...s},c)=>{const x=e.filter(r=>!r.hidden);return r.jsxs(In,{variant:"flat"===o?"filled":o,className:`info-list-card ${a?"info-list-card--compact":""} ${l}`,style:d,ref:c,...s,children:[n&&r.jsxs(r.Fragment,{children:[r.jsx(gn,{variant:"h6",weight:"semibold",noMargin:!0,className:"info-list-card-heading",children:n}),r.jsx(Se,{style:{margin:"12px 0 16px 0"}})]}),r.jsx("div",{className:"info-list-card-items",children:x.map((n,e)=>r.jsxs(i.default.Fragment,{children:[r.jsxs("div",{className:"info-list-card-item",children:[r.jsx("div",{className:`info-list-card-label ${n.labelClass||""}`,children:"string"==typeof n.label?r.jsx(gn,{variant:"body2",noMargin:!0,children:n.label}):n.label}),r.jsx("div",{className:`info-list-card-value ${n.valueClass||""}`,children:"string"==typeof n.value||"number"==typeof n.value?r.jsx(gn,{variant:"body2",weight:"medium",noMargin:!0,children:n.value}):n.value})]}),t&&e<x.length-1&&r.jsx(Se,{style:{margin:a?"8px 0":"12px 0"}})]},e))})]})});Fe.displayName="InfoListCard";const Be=j(Fe);mr(".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 Oe=i.default.forwardRef(({orderId:n,orderNumber:e,orderDate:t,status:a="confirmed",statusText:o,headerText:i="Order Confirmed!",headerSubtitle:l="Thank you for your order. We'll send you a confirmation email shortly.",customerEmail:d,customerPhone:s,shippingAddress:c,billingAddress:x,items:v,subtotal:m,shippingCost:p=0,tax:h=0,discount:u=0,total:g,currency:b="₹",paymentMethod:f,transactionId:y,estimatedDelivery:w,trackingNumber:k,onDownloadInvoice:j,onContinueShopping:_,onTrackOrder:N,onViewDetails:z,onContactSupport:C,onShareOrder:S,downloadInvoiceText:$="Download Invoice",continueShoppingText:M="Continue Shopping",trackOrderText:T="Track Order",viewDetailsText:D="View Details",contactSupportText:I="Contact Support",shareOrderText:L="Share",showActions:A=!0,hideDownloadInvoice:R=!1,hideContinueShopping:E=!1,hideTrackOrder:F=!1,hideContactSupport:B=!1,className:O="",style:P,...H},V)=>{const Y=n=>r.jsxs("div",{className:"orderconfirmation-address",children:[r.jsx("div",{className:"orderconfirmation-address-name",children:n.name}),r.jsx("div",{children:n.addressLine1}),n.addressLine2&&r.jsx("div",{children:n.addressLine2}),r.jsxs("div",{children:[n.city,", ",n.state," ",n.zipCode]}),n.phone&&r.jsxs("div",{children:["Phone: ",n.phone]})]}),nr=[{label:"Order Number",value:e||`#${n}`,valueClass:"value-bold"},t?{label:"Order Date",value:t}:{label:"",value:"",hidden:!0},{label:"Status",value:r.jsx(An,{variant:(()=>{switch(a){case"confirmed":case"delivered":return"success";case"cancelled":return"error";case"processing":return"info";case"pending":return"warning";default:return"neutral"}})(),children:o||a.charAt(0).toUpperCase()+a.slice(1)})},w?{label:"Estimated Delivery",value:w,valueClass:"value-primary"}:{label:"",value:"",hidden:!0},k?{label:"Tracking Number",value:k,valueClass:"value-bold"}:{label:"",value:"",hidden:!0}].filter(r=>!r.hidden),er=[d?{label:"Email",value:d}:{label:"",value:"",hidden:!0},s?{label:"Phone",value:s}:{label:"",value:"",hidden:!0}].filter(r=>!r.hidden),tr=[f?{label:"Payment Method",value:f}:{label:"",value:"",hidden:!0},y?{label:"Transaction ID",value:y,valueClass:"value-muted"}:{label:"",value:"",hidden:!0}].filter(r=>!r.hidden);return r.jsx("div",{className:`orderconfirmation ${O}`,style:P,ref:V,...H,children:r.jsxs(hn,{direction:"column",gap:20,children:[r.jsx(In,{variant:"filled",className:"orderconfirmation-header",children:r.jsxs(hn,{direction:"column",align:"center",gap:12,children:[r.jsx("span",{className:"orderconfirmation-success-icon",children:r.jsx(W,{size:32})}),r.jsx(gn,{variant:"h4",weight:"bold",align:"center",noMargin:!0,children:i}),r.jsx(gn,{variant:"body1",align:"center",noMargin:!0,className:"orderconfirmation-subtitle",children:l}),r.jsxs(An,{variant:"success",style:{padding:"8px 20px",borderRadius:"20px",fontWeight:600,marginTop:"8px"},children:["Order ",e||`#${n}`]})]})}),r.jsx(Be,{heading:"Order Details",items:nr,variant:"outlined",showDividers:!0}),er.length>0&&r.jsx(Be,{heading:"Customer Information",items:er,variant:"outlined",showDividers:!0}),r.jsxs(In,{variant:"outlined",className:"orderconfirmation-items-card",children:[r.jsxs(gn,{variant:"h6",weight:"semibold",style:{marginBottom:"12px"},children:["Order Items (",v.length,")"]}),r.jsx(hn,{direction:"column",gap:12,children:v.map((n,e)=>r.jsxs("div",{children:[r.jsxs(hn,{direction:"row",gap:12,className:"orderconfirmation-item",children:[n.image&&r.jsx("div",{className:"orderconfirmation-item-image-wrapper",children:r.jsx("img",{src:n.image,alt:n.name,className:"orderconfirmation-item-image"})}),r.jsxs(hn,{direction:"column",gap:4,style:{flex:1,minWidth:0},children:[r.jsx(gn,{variant:"body2",weight:"medium",noMargin:!0,className:"orderconfirmation-item-name",children:n.name}),n.variant&&r.jsx(gn,{variant:"caption",noMargin:!0,className:"orderconfirmation-item-variant",children:n.variant}),r.jsxs(gn,{variant:"caption",noMargin:!0,children:["Qty: ",n.quantity]})]}),r.jsxs(hn,{direction:"column",align:"end",gap:2,children:[r.jsxs(gn,{variant:"body2",weight:"semibold",noMargin:!0,children:[b,(n.price*n.quantity).toLocaleString()]}),r.jsxs(gn,{variant:"caption",noMargin:!0,className:"orderconfirmation-item-unit-price",children:[b,n.price.toLocaleString()," each"]})]})]}),e<v.length-1&&r.jsx(Se,{style:{margin:"12px 0"}})]},n.id))})]}),r.jsxs(In,{variant:"outlined",className:"orderconfirmation-summary-card",children:[r.jsx(gn,{variant:"h6",weight:"semibold",style:{marginBottom:"12px"},children:"Payment Summary"}),r.jsxs(hn,{direction:"column",gap:8,children:[r.jsxs(hn,{justify:"between",align:"center",children:[r.jsx(gn,{variant:"body2",noMargin:!0,children:"Subtotal"}),r.jsxs(gn,{variant:"body2",noMargin:!0,children:[b,m.toLocaleString()]})]}),p>0&&r.jsxs(hn,{justify:"between",align:"center",children:[r.jsx(gn,{variant:"body2",noMargin:!0,children:"Shipping"}),r.jsxs(gn,{variant:"body2",noMargin:!0,children:[b,p.toLocaleString()]})]}),h>0&&r.jsxs(hn,{justify:"between",align:"center",children:[r.jsx(gn,{variant:"body2",noMargin:!0,children:"Tax"}),r.jsxs(gn,{variant:"body2",noMargin:!0,children:[b,h.toLocaleString()]})]}),u>0&&r.jsxs(hn,{justify:"between",align:"center",children:[r.jsx(gn,{variant:"body2",noMargin:!0,className:"orderconfirmation-discount",children:"Discount"}),r.jsxs(gn,{variant:"body2",noMargin:!0,className:"orderconfirmation-discount",children:["-",b,u.toLocaleString()]})]}),r.jsx(Se,{style:{margin:"8px 0"}}),r.jsxs(hn,{justify:"between",align:"center",children:[r.jsx(gn,{variant:"body1",weight:"bold",noMargin:!0,children:"Total"}),r.jsxs(gn,{variant:"body1",weight:"bold",noMargin:!0,className:"orderconfirmation-total",children:[b,g.toLocaleString()]})]})]}),tr.length>0&&r.jsxs(r.Fragment,{children:[r.jsx(Se,{style:{margin:"12px 0"}}),r.jsx(hn,{direction:"column",gap:8,children:tr.map((n,e)=>r.jsxs(hn,{justify:"between",align:"center",children:[r.jsx(gn,{variant:"body2",noMargin:!0,children:n.label}),r.jsx(gn,{variant:"body2",noMargin:!0,className:n.valueClass,children:n.value})]},e))})]})]}),r.jsxs(hn,{direction:"row",gap:16,wrap:"wrap",children:[r.jsx(In,{variant:"outlined",className:"orderconfirmation-address-card",style:{flex:"1 1 280px"},children:r.jsxs(hn,{direction:"column",gap:12,children:[r.jsxs(hn,{align:"center",gap:8,children:[r.jsx(Z,{size:20}),r.jsx(gn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Shipping Address"})]}),r.jsx(Se,{}),Y(c)]})}),x&&r.jsx(In,{variant:"outlined",className:"orderconfirmation-address-card",style:{flex:"1 1 280px"},children:r.jsxs(hn,{direction:"column",gap:12,children:[r.jsxs(hn,{align:"center",gap:8,children:[r.jsx(Q,{size:20}),r.jsx(gn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Billing Address"})]}),r.jsx(Se,{}),Y(x)]})})]}),A&&r.jsx(In,{variant:"outlined",className:"orderconfirmation-actions-card",children:r.jsxs(hn,{direction:"column",gap:16,children:[r.jsx(gn,{variant:"h6",weight:"semibold",noMargin:!0,children:"What's Next?"}),r.jsx(Se,{}),r.jsxs(hn,{direction:"row",gap:12,wrap:"wrap",children:[!R&&j&&r.jsx(Mr,{variant:"primary",size:"md",onClick:()=>j(n),leftIcon:r.jsx(q,{size:18}),style:{flex:"1 1 auto",minWidth:"170px"},children:$}),!F&&N&&k&&r.jsx(Mr,{variant:"primary",size:"md",onClick:()=>N(n),leftIcon:r.jsx(U,{size:18}),style:{flex:"1 1 auto",minWidth:"170px"},children:T})]}),r.jsxs(hn,{direction:"row",gap:12,wrap:"wrap",children:[!E&&_&&r.jsx(Mr,{variant:"outline",size:"md",onClick:_,leftIcon:r.jsx(G,{size:18}),style:{flex:"1 1 auto",minWidth:"170px"},children:M}),z&&r.jsx(Mr,{variant:"outline",size:"md",onClick:()=>z(n),leftIcon:r.jsx(K,{size:18}),style:{flex:"1 1 auto",minWidth:"170px"},children:D})]}),r.jsxs(hn,{direction:"row",gap:12,wrap:"wrap",justify:"center",children:[!B&&C&&r.jsx(Mr,{variant:"ghost",size:"md",onClick:()=>C(n),leftIcon:r.jsx(J,{size:18}),children:I}),S&&r.jsx(Mr,{variant:"ghost",size:"md",onClick:()=>S(n),leftIcon:r.jsx(X,{size:18}),children:L})]})]})}),r.jsx(In,{variant:"filled",className:"orderconfirmation-help-card",style:{background:"var(--vtx-color-primary-50)",border:"1px solid var(--vtx-color-primary-100)"},children:r.jsxs(hn,{direction:"column",gap:12,align:"center",children:[r.jsxs(hn,{align:"center",gap:8,children:[r.jsx(J,{size:20}),r.jsx(gn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Need Help?"})]}),r.jsx(gn,{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"}),r.jsxs(hn,{direction:"row",gap:16,wrap:"wrap",justify:"center",style:{marginTop:"4px"},children:[r.jsxs(hn,{align:"center",gap:6,children:[r.jsx(J,{size:16}),r.jsx(gn,{variant:"body2",weight:"medium",noMargin:!0,children:"support@example.com"})]}),r.jsxs(hn,{align:"center",gap:6,children:[r.jsx(rr,{size:16}),r.jsx(gn,{variant:"body2",weight:"medium",noMargin:!0,children:"1-800-123-4567"})]})]})]})})]})})});Oe.displayName="OrderConfirmation";const We=j(Oe);mr(".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 Pe=i.default.forwardRef(({orderId:n,orderNumber:e,orderDate:t,status:a,statusText:o,customerName:i,customerEmail:l,customerPhone:d,shippingAddress:s,billingAddress:c,items:x,subtotal:v,shippingCost:m=0,tax:p=0,discount:h=0,total:u,currency:g="₹",couponCode:b,paymentMethod:f,paymentStatus:y,transactionId:w,estimatedDelivery:k,deliveredDate:j,trackingNumber:_,trackingUrl:N,carrier:z,onDownloadInvoice:C,onTrackOrder:S,onCancelOrder:$,onReturnOrder:M,onReorder:T,onContactSupport:D,onWriteReview:I,downloadInvoiceText:L="Download Invoice",trackOrderText:A="Track Package",cancelOrderText:R="Cancel Order",returnOrderText:E="Return Items",reorderText:F="Reorder",contactSupportText:B="Contact Support",writeReviewText:O="Write Review",showActions:W=!0,allowCancel:P=!0,allowReturn:H=!0,allowReorder:V=!0,className:Y="",style:G,...X},K)=>{const ir=()=>{switch(y){case"paid":return"success";case"failed":return"error";case"pending":return"warning";case"refunded":return"info";default:return"neutral"}},lr=n=>r.jsxs("div",{className:"orderdetails-address",children:[r.jsx("div",{className:"orderdetails-address-name",children:n.name}),r.jsx("div",{children:n.addressLine1}),n.addressLine2&&r.jsx("div",{children:n.addressLine2}),r.jsxs("div",{children:[n.city,", ",n.state," ",n.zipCode]}),n.phone&&r.jsxs("div",{children:["Phone: ",n.phone]})]}),dr=P&&("pending"===a||"processing"===a),sr=H&&"delivered"===a,cr=_&&("shipped"===a||"delivered"===a),xr=[i?{label:"Name",value:i}:{label:"",value:"",hidden:!0},l?{label:"Email",value:l}:{label:"",value:"",hidden:!0},d?{label:"Phone",value:d}:{label:"",value:"",hidden:!0}].filter(r=>!r.hidden),vr=[f?{label:"Payment Method",value:f}:{label:"",value:"",hidden:!0},y?{label:"Payment Status",value:r.jsx(An,{variant:ir(),children:y.charAt(0).toUpperCase()+y.slice(1)})}:{label:"",value:"",hidden:!0},w?{label:"Transaction ID",value:w,valueClass:"value-muted"}:{label:"",value:"",hidden:!0}].filter(r=>!r.hidden);return r.jsx("div",{className:`orderdetails ${Y}`,style:G,ref:K,...X,children:r.jsxs(hn,{direction:"column",gap:24,children:[r.jsxs(hn,{direction:"column",gap:8,children:[r.jsx(gn,{variant:"h3",weight:"bold",noMargin:!0,children:"Order Details"}),r.jsxs(gn,{variant:"body1",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)"},children:["Placed on ",t]})]}),r.jsx(In,{variant:"outlined",style:{padding:"32px 24px"},children:r.jsx(Ae,{steps:["Order Placed","Packed","Shipped","Delivered"],currentStep:(()=>{switch(a){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"})}),r.jsxs(hn,{direction:"row",gap:16,wrap:"wrap",children:[r.jsx(In,{variant:"outlined",style:{flex:"1 1 200px",minWidth:"200px"},children:r.jsxs(hn,{direction:"column",gap:8,children:[r.jsx(gn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)",textTransform:"uppercase",fontSize:"0.75rem",fontWeight:600},children:"Order Number"}),r.jsx(gn,{variant:"h6",weight:"bold",noMargin:!0,children:e||`#${n}`})]})}),r.jsx(In,{variant:"outlined",style:{flex:"1 1 200px",minWidth:"200px"},children:r.jsxs(hn,{direction:"column",gap:8,children:[r.jsx(gn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)",textTransform:"uppercase",fontSize:"0.75rem",fontWeight:600},children:"Status"}),r.jsx(An,{variant:(()=>{switch(a){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:o||a.charAt(0).toUpperCase()+a.slice(1)})]})}),(j||k)&&r.jsx(In,{variant:"outlined",style:{flex:"1 1 200px",minWidth:"200px"},children:r.jsxs(hn,{direction:"column",gap:8,children:[r.jsx(gn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)",textTransform:"uppercase",fontSize:"0.75rem",fontWeight:600},children:j?"Delivered On":"Estimated Delivery"}),r.jsx(gn,{variant:"h6",weight:"bold",noMargin:!0,style:{color:j?"var(--vtx-color-success-600)":"inherit"},children:j||k})]})}),y&&r.jsx(In,{variant:"outlined",style:{flex:"1 1 200px",minWidth:"200px"},children:r.jsxs(hn,{direction:"column",gap:8,children:[r.jsx(gn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)",textTransform:"uppercase",fontSize:"0.75rem",fontWeight:600},children:"Payment"}),r.jsx(An,{variant:ir(),style:{alignSelf:"flex-start",padding:"4px 12px"},children:y.charAt(0).toUpperCase()+y.slice(1)})]})})]}),W&&(C||cr&&S)&&r.jsxs(hn,{direction:"row",gap:12,wrap:"wrap",children:[C&&r.jsx(Mr,{variant:"outline",size:"md",onClick:()=>C(n),leftIcon:r.jsx(q,{size:18}),style:{flex:"1 1 auto",minWidth:"180px"},children:L}),cr&&S&&r.jsx(Mr,{variant:"primary",size:"md",onClick:()=>S(n),leftIcon:r.jsx(U,{size:18}),style:{flex:"1 1 auto",minWidth:"180px"},children:A})]}),(_||z)&&r.jsx(In,{variant:"outlined",children:r.jsxs(hn,{direction:"column",gap:12,children:[r.jsxs(hn,{align:"center",gap:8,children:[r.jsx(nr,{size:20}),r.jsx(gn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Shipping Information"})]}),r.jsx(Se,{}),r.jsxs(hn,{direction:"column",gap:12,children:[_&&r.jsxs(hn,{direction:"column",gap:4,children:[r.jsx(gn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)",fontSize:"0.75rem"},children:"Tracking Number"}),N?r.jsx("a",{href:N,target:"_blank",rel:"noopener noreferrer",style:{color:"var(--vtx-color-primary-600)",fontWeight:600,textDecoration:"none"},children:_}):r.jsx(gn,{variant:"body2",weight:"semibold",noMargin:!0,children:_})]}),z&&r.jsxs(hn,{direction:"column",gap:4,children:[r.jsx(gn,{variant:"caption",noMargin:!0,style:{color:"var(--vtx-color-text-secondary)",fontSize:"0.75rem"},children:"Carrier"}),r.jsx(gn,{variant:"body2",weight:"medium",noMargin:!0,children:z})]})]})]})}),r.jsxs(In,{variant:"outlined",className:"orderdetails-items-card",children:[r.jsxs(gn,{variant:"h6",weight:"semibold",style:{marginBottom:"12px"},children:["Items (",x.length,")"]}),r.jsx(hn,{direction:"column",gap:12,children:x.map((n,e)=>r.jsxs("div",{children:[r.jsxs(hn,{direction:"row",gap:12,className:"orderdetails-item",children:[n.image&&r.jsx("div",{className:"orderdetails-item-image-wrapper",children:r.jsx("img",{src:n.image,alt:n.name,className:"orderdetails-item-image"})}),r.jsxs(hn,{direction:"column",gap:4,style:{flex:1,minWidth:0},children:[r.jsx(gn,{variant:"body2",weight:"medium",noMargin:!0,className:"orderdetails-item-name",children:n.name}),n.variant&&r.jsx(gn,{variant:"caption",noMargin:!0,className:"orderdetails-item-variant",children:n.variant}),r.jsxs(gn,{variant:"caption",noMargin:!0,children:["Qty: ",n.quantity]})]}),r.jsxs(hn,{direction:"column",align:"end",gap:2,children:[r.jsxs(gn,{variant:"body2",weight:"semibold",noMargin:!0,children:[g,(n.price*n.quantity).toLocaleString()]}),r.jsxs(gn,{variant:"caption",noMargin:!0,className:"orderdetails-item-unit-price",children:[g,n.price.toLocaleString()," each"]})]})]}),e<x.length-1&&r.jsx(Se,{style:{margin:"12px 0"}})]},n.id))})]}),r.jsxs(In,{variant:"outlined",className:"orderdetails-summary-card",children:[r.jsx(gn,{variant:"h6",weight:"semibold",style:{marginBottom:"12px"},children:"Order Summary"}),r.jsxs(hn,{direction:"column",gap:8,children:[r.jsxs(hn,{justify:"between",align:"center",children:[r.jsx(gn,{variant:"body2",noMargin:!0,children:"Subtotal"}),r.jsxs(gn,{variant:"body2",noMargin:!0,children:[g,v.toLocaleString()]})]}),m>0&&r.jsxs(hn,{justify:"between",align:"center",children:[r.jsx(gn,{variant:"body2",noMargin:!0,children:"Shipping"}),r.jsxs(gn,{variant:"body2",noMargin:!0,children:[g,m.toLocaleString()]})]}),p>0&&r.jsxs(hn,{justify:"between",align:"center",children:[r.jsx(gn,{variant:"body2",noMargin:!0,children:"Tax"}),r.jsxs(gn,{variant:"body2",noMargin:!0,children:[g,p.toLocaleString()]})]}),b&&r.jsxs(hn,{justify:"between",align:"center",children:[r.jsx(gn,{variant:"body2",noMargin:!0,className:"orderdetails-coupon",children:"Coupon Applied"}),r.jsx(gn,{variant:"body2",noMargin:!0,className:"orderdetails-coupon",children:b})]}),h>0&&r.jsxs(hn,{justify:"between",align:"center",children:[r.jsx(gn,{variant:"body2",noMargin:!0,className:"orderdetails-discount",children:"Discount"}),r.jsxs(gn,{variant:"body2",noMargin:!0,className:"orderdetails-discount",children:["-",g,h.toLocaleString()]})]}),r.jsx(Se,{style:{margin:"8px 0"}}),r.jsxs(hn,{justify:"between",align:"center",children:[r.jsx(gn,{variant:"body1",weight:"bold",noMargin:!0,children:"Total"}),r.jsxs(gn,{variant:"body1",weight:"bold",noMargin:!0,className:"orderdetails-total",children:[g,u.toLocaleString()]})]})]}),vr.length>0&&r.jsxs(r.Fragment,{children:[r.jsx(Se,{style:{margin:"12px 0"}}),r.jsx(hn,{direction:"column",gap:8,children:vr.map((n,e)=>r.jsxs(hn,{justify:"between",align:"center",children:[r.jsx(gn,{variant:"body2",noMargin:!0,children:n.label}),r.jsx(gn,{variant:"body2",noMargin:!0,className:n.valueClass,children:n.value})]},e))})]})]}),xr.length>0&&r.jsx(Be,{heading:"Customer Information",items:xr,variant:"outlined",showDividers:!0}),r.jsxs(hn,{direction:"row",gap:16,wrap:"wrap",children:[r.jsx(In,{variant:"outlined",className:"orderdetails-address-card",style:{flex:"1 1 280px"},children:r.jsxs(hn,{direction:"column",gap:12,children:[r.jsxs(hn,{align:"center",gap:8,children:[r.jsx(Z,{size:20}),r.jsx(gn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Shipping Address"})]}),r.jsx(Se,{}),lr(s)]})}),c&&r.jsx(In,{variant:"outlined",className:"orderdetails-address-card",style:{flex:"1 1 280px"},children:r.jsxs(hn,{direction:"column",gap:12,children:[r.jsxs(hn,{align:"center",gap:8,children:[r.jsx(Q,{size:20}),r.jsx(gn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Billing Address"})]}),r.jsx(Se,{}),lr(c)]})})]}),W&&r.jsx(In,{variant:"outlined",className:"orderdetails-actions-card",children:r.jsxs(hn,{direction:"column",gap:16,children:[r.jsx(gn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Order Actions"}),r.jsx(Se,{}),r.jsxs(hn,{direction:"row",gap:12,wrap:"wrap",children:[dr&&$&&r.jsx(Mr,{variant:"outline",size:"md",onClick:()=>$(n),leftIcon:r.jsx(er,{size:18}),style:{flex:"1 1 auto",minWidth:"160px",borderColor:"var(--vtx-color-error-500)",color:"var(--vtx-color-error-600)"},children:R}),sr&&M&&r.jsx(Mr,{variant:"outline",size:"md",onClick:()=>M(n),leftIcon:r.jsx(tr,{size:18}),style:{flex:"1 1 auto",minWidth:"160px"},children:E}),V&&T&&r.jsx(Mr,{variant:"outline",size:"md",onClick:()=>T(n),leftIcon:r.jsx(ar,{size:18}),style:{flex:"1 1 auto",minWidth:"160px"},children:F})]}),r.jsxs(hn,{direction:"row",gap:12,wrap:"wrap",children:["delivered"===a&&I&&r.jsx(Mr,{variant:"ghost",size:"md",onClick:()=>I(n),leftIcon:r.jsx(or,{size:18}),style:{flex:"1 1 auto",minWidth:"160px"},children:O}),D&&r.jsx(Mr,{variant:"ghost",size:"md",onClick:()=>D(n),leftIcon:r.jsx(J,{size:18}),style:{flex:"1 1 auto",minWidth:"160px"},children:B})]})]})}),r.jsx(In,{variant:"filled",className:"orderdetails-help-card",style:{background:"var(--vtx-color-primary-50)",border:"1px solid var(--vtx-color-primary-100)"},children:r.jsxs(hn,{direction:"column",gap:12,align:"center",children:[r.jsxs(hn,{align:"center",gap:8,children:[r.jsx(J,{size:20}),r.jsx(gn,{variant:"h6",weight:"semibold",noMargin:!0,children:"Need Help?"})]}),r.jsx(gn,{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"}),r.jsxs(hn,{direction:"row",gap:16,wrap:"wrap",justify:"center",style:{marginTop:"4px"},children:[r.jsxs(hn,{align:"center",gap:6,children:[r.jsx(J,{size:16}),r.jsx(gn,{variant:"body2",weight:"medium",noMargin:!0,children:"support@example.com"})]}),r.jsxs(hn,{align:"center",gap:6,children:[r.jsx(rr,{size:16}),r.jsx(gn,{variant:"body2",weight:"medium",noMargin:!0,children:"1-800-123-4567"})]})]})]})})]})})});Pe.displayName="OrderDetails";const He=j(Pe);mr("/* ==================== BASE DASHBOARD CARD STYLES ==================== */\r\n\r\n.dashboard-card {\r\n position: relative;\r\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.dashboard-card--clickable {\r\n cursor: pointer;\r\n}\r\n\r\n.dashboard-card--clickable:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.dashboard-card--clickable:active {\r\n transform: translateY(0);\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\r\n}\r\n\r\n/* ==================== FILLED VARIANT STYLES ==================== */\r\n\r\n/* Primary filled */\r\n.dashboard-card--filled.dashboard-card--primary {\r\n background: linear-gradient(135deg, var(--color-primary-600, #2563eb) 0%, var(--color-primary-700, #1d4ed8) 100%);\r\n border-color: var(--color-primary-700, #1d4ed8);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--primary .dashboard-card__label,\r\n.dashboard-card--filled.dashboard-card--primary .dashboard-card__subtitle,\r\n.dashboard-card--filled.dashboard-card--primary .dashboard-card__timestamp,\r\n.dashboard-card--filled.dashboard-card--primary .dashboard-card__activity-label,\r\n.dashboard-card--filled.dashboard-card--primary .dashboard-card__comparison-label,\r\n.dashboard-card--filled.dashboard-card--primary .dashboard-card__detail-label {\r\n color: rgba(255, 255, 255, 0.85);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--primary .dashboard-card__value,\r\n.dashboard-card--filled.dashboard-card--primary .dashboard-card__activity-value,\r\n.dashboard-card--filled.dashboard-card--primary .dashboard-card__user-name,\r\n.dashboard-card--filled.dashboard-card--primary .dashboard-card__label--order {\r\n color: rgba(255, 255, 255, 1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--primary .dashboard-card__activity-item:hover {\r\n background-color: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--primary .dashboard-card__user-role,\r\n.dashboard-card--filled.dashboard-card--primary .dashboard-card__user-department,\r\n.dashboard-card--filled.dashboard-card--primary .dashboard-card__detail-value {\r\n color: rgba(255, 255, 255, 0.9);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--primary .dashboard-card__order-details,\r\n.dashboard-card--filled.dashboard-card--primary .dashboard-card__user-metrics {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n border-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--primary .dashboard-card__metric-label {\r\n color: rgba(255, 255, 255, 0.85);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--primary .dashboard-card__metric-value {\r\n color: rgba(255, 255, 255, 1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--primary .dashboard-card__icon {\r\n background-color: rgba(255, 255, 255, 0.2);\r\n color: rgba(255, 255, 255, 1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--primary .dashboard-card__avatar--filled {\r\n background-color: rgba(255, 255, 255, 0.25);\r\n border: 2px solid rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n/* Success filled */\r\n.dashboard-card--filled.dashboard-card--success {\r\n background: linear-gradient(135deg, var(--color-success-600, #059669) 0%, var(--color-success-700, #047857) 100%);\r\n border-color: var(--color-success-700, #047857);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--success .dashboard-card__label,\r\n.dashboard-card--filled.dashboard-card--success .dashboard-card__subtitle,\r\n.dashboard-card--filled.dashboard-card--success .dashboard-card__timestamp,\r\n.dashboard-card--filled.dashboard-card--success .dashboard-card__activity-label,\r\n.dashboard-card--filled.dashboard-card--success .dashboard-card__comparison-label,\r\n.dashboard-card--filled.dashboard-card--success .dashboard-card__detail-label {\r\n color: rgba(255, 255, 255, 0.85);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--success .dashboard-card__value,\r\n.dashboard-card--filled.dashboard-card--success .dashboard-card__activity-value,\r\n.dashboard-card--filled.dashboard-card--success .dashboard-card__user-name,\r\n.dashboard-card--filled.dashboard-card--success .dashboard-card__label--order {\r\n color: rgba(255, 255, 255, 1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--success .dashboard-card__activity-item:hover {\r\n background-color: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--success .dashboard-card__user-role,\r\n.dashboard-card--filled.dashboard-card--success .dashboard-card__user-department,\r\n.dashboard-card--filled.dashboard-card--success .dashboard-card__detail-value {\r\n color: rgba(255, 255, 255, 0.9);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--success .dashboard-card__order-details,\r\n.dashboard-card--filled.dashboard-card--success .dashboard-card__user-metrics {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n border-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--success .dashboard-card__metric-label {\r\n color: rgba(255, 255, 255, 0.85);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--success .dashboard-card__metric-value {\r\n color: rgba(255, 255, 255, 1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--success .dashboard-card__icon {\r\n background-color: rgba(255, 255, 255, 0.2);\r\n color: rgba(255, 255, 255, 1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--success .dashboard-card__avatar--filled {\r\n background-color: rgba(255, 255, 255, 0.25);\r\n border: 2px solid rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n/* Danger filled */\r\n.dashboard-card--filled.dashboard-card--danger {\r\n background: linear-gradient(135deg, var(--color-danger-600, #dc2626) 0%, var(--color-danger-700, #b91c1c) 100%);\r\n border-color: var(--color-danger-700, #b91c1c);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--danger .dashboard-card__label,\r\n.dashboard-card--filled.dashboard-card--danger .dashboard-card__subtitle,\r\n.dashboard-card--filled.dashboard-card--danger .dashboard-card__timestamp,\r\n.dashboard-card--filled.dashboard-card--danger .dashboard-card__activity-label,\r\n.dashboard-card--filled.dashboard-card--danger .dashboard-card__comparison-label,\r\n.dashboard-card--filled.dashboard-card--danger .dashboard-card__detail-label {\r\n color: rgba(255, 255, 255, 0.85);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--danger .dashboard-card__value,\r\n.dashboard-card--filled.dashboard-card--danger .dashboard-card__activity-value,\r\n.dashboard-card--filled.dashboard-card--danger .dashboard-card__user-name,\r\n.dashboard-card--filled.dashboard-card--danger .dashboard-card__label--order {\r\n color: rgba(255, 255, 255, 1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--danger .dashboard-card__activity-item:hover {\r\n background-color: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--danger .dashboard-card__user-role,\r\n.dashboard-card--filled.dashboard-card--danger .dashboard-card__user-department,\r\n.dashboard-card--filled.dashboard-card--danger .dashboard-card__detail-value {\r\n color: rgba(255, 255, 255, 0.9);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--danger .dashboard-card__order-details,\r\n.dashboard-card--filled.dashboard-card--danger .dashboard-card__user-metrics {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n border-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--danger .dashboard-card__metric-label {\r\n color: rgba(255, 255, 255, 0.85);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--danger .dashboard-card__metric-value {\r\n color: rgba(255, 255, 255, 1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--danger .dashboard-card__icon {\r\n background-color: rgba(255, 255, 255, 0.2);\r\n color: rgba(255, 255, 255, 1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--danger .dashboard-card__avatar--filled {\r\n background-color: rgba(255, 255, 255, 0.25);\r\n border: 2px solid rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n/* Warning filled */\r\n.dashboard-card--filled.dashboard-card--warning {\r\n background: linear-gradient(135deg, var(--color-warning-600, #d97706) 0%, var(--color-warning-700, #b45309) 100%);\r\n border-color: var(--color-warning-700, #b45309);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--warning .dashboard-card__label,\r\n.dashboard-card--filled.dashboard-card--warning .dashboard-card__subtitle,\r\n.dashboard-card--filled.dashboard-card--warning .dashboard-card__timestamp,\r\n.dashboard-card--filled.dashboard-card--warning .dashboard-card__activity-label,\r\n.dashboard-card--filled.dashboard-card--warning .dashboard-card__comparison-label,\r\n.dashboard-card--filled.dashboard-card--warning .dashboard-card__detail-label {\r\n color: rgba(255, 255, 255, 0.85);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--warning .dashboard-card__value,\r\n.dashboard-card--filled.dashboard-card--warning .dashboard-card__activity-value,\r\n.dashboard-card--filled.dashboard-card--warning .dashboard-card__user-name,\r\n.dashboard-card--filled.dashboard-card--warning .dashboard-card__label--order {\r\n color: rgba(255, 255, 255, 1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--warning .dashboard-card__activity-item:hover {\r\n background-color: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--warning .dashboard-card__user-role,\r\n.dashboard-card--filled.dashboard-card--warning .dashboard-card__user-department,\r\n.dashboard-card--filled.dashboard-card--warning .dashboard-card__detail-value {\r\n color: rgba(255, 255, 255, 0.9);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--warning .dashboard-card__order-details,\r\n.dashboard-card--filled.dashboard-card--warning .dashboard-card__user-metrics {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n border-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--warning .dashboard-card__metric-label {\r\n color: rgba(255, 255, 255, 0.85);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--warning .dashboard-card__metric-value {\r\n color: rgba(255, 255, 255, 1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--warning .dashboard-card__icon {\r\n background-color: rgba(255, 255, 255, 0.2);\r\n color: rgba(255, 255, 255, 1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--warning .dashboard-card__avatar--filled {\r\n background-color: rgba(255, 255, 255, 0.25);\r\n border: 2px solid rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n/* Info filled */\r\n.dashboard-card--filled.dashboard-card--info {\r\n background: linear-gradient(135deg, var(--color-info-600, #0284c7) 0%, var(--color-info-700, #0369a1) 100%);\r\n border-color: var(--color-info-700, #0369a1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--info .dashboard-card__label,\r\n.dashboard-card--filled.dashboard-card--info .dashboard-card__subtitle,\r\n.dashboard-card--filled.dashboard-card--info .dashboard-card__timestamp,\r\n.dashboard-card--filled.dashboard-card--info .dashboard-card__activity-label,\r\n.dashboard-card--filled.dashboard-card--info .dashboard-card__comparison-label,\r\n.dashboard-card--filled.dashboard-card--info .dashboard-card__detail-label {\r\n color: rgba(255, 255, 255, 0.85);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--info .dashboard-card__value,\r\n.dashboard-card--filled.dashboard-card--info .dashboard-card__activity-value,\r\n.dashboard-card--filled.dashboard-card--info .dashboard-card__user-name,\r\n.dashboard-card--filled.dashboard-card--info .dashboard-card__label--order {\r\n color: rgba(255, 255, 255, 1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--info .dashboard-card__activity-item:hover {\r\n background-color: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--info .dashboard-card__user-role,\r\n.dashboard-card--filled.dashboard-card--info .dashboard-card__user-department,\r\n.dashboard-card--filled.dashboard-card--info .dashboard-card__detail-value {\r\n color: rgba(255, 255, 255, 0.9);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--info .dashboard-card__order-details,\r\n.dashboard-card--filled.dashboard-card--info .dashboard-card__user-metrics {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n border-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--info .dashboard-card__metric-label {\r\n color: rgba(255, 255, 255, 0.85);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--info .dashboard-card__metric-value {\r\n color: rgba(255, 255, 255, 1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--info .dashboard-card__icon {\r\n background-color: rgba(255, 255, 255, 0.2);\r\n color: rgba(255, 255, 255, 1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--info .dashboard-card__avatar--filled {\r\n background-color: rgba(255, 255, 255, 0.25);\r\n border: 2px solid rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n/* Secondary filled */\r\n.dashboard-card--filled.dashboard-card--secondary {\r\n background: linear-gradient(135deg, var(--color-secondary-600, #4b5563) 0%, var(--color-secondary-700, #374151) 100%);\r\n border-color: var(--color-secondary-700, #374151);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--secondary .dashboard-card__label,\r\n.dashboard-card--filled.dashboard-card--secondary .dashboard-card__subtitle,\r\n.dashboard-card--filled.dashboard-card--secondary .dashboard-card__timestamp,\r\n.dashboard-card--filled.dashboard-card--secondary .dashboard-card__activity-label,\r\n.dashboard-card--filled.dashboard-card--secondary .dashboard-card__comparison-label,\r\n.dashboard-card--filled.dashboard-card--secondary .dashboard-card__detail-label {\r\n color: rgba(255, 255, 255, 0.85);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--secondary .dashboard-card__value,\r\n.dashboard-card--filled.dashboard-card--secondary .dashboard-card__activity-value,\r\n.dashboard-card--filled.dashboard-card--secondary .dashboard-card__user-name,\r\n.dashboard-card--filled.dashboard-card--secondary .dashboard-card__label--order {\r\n color: rgba(255, 255, 255, 1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--secondary .dashboard-card__activity-item:hover {\r\n background-color: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--secondary .dashboard-card__user-role,\r\n.dashboard-card--filled.dashboard-card--secondary .dashboard-card__user-department,\r\n.dashboard-card--filled.dashboard-card--secondary .dashboard-card__detail-value {\r\n color: rgba(255, 255, 255, 0.9);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--secondary .dashboard-card__order-details,\r\n.dashboard-card--filled.dashboard-card--secondary .dashboard-card__user-metrics {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n border-color: rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--secondary .dashboard-card__metric-label {\r\n color: rgba(255, 255, 255, 0.85);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--secondary .dashboard-card__metric-value {\r\n color: rgba(255, 255, 255, 1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--secondary .dashboard-card__icon {\r\n background-color: rgba(255, 255, 255, 0.2);\r\n color: rgba(255, 255, 255, 1);\r\n}\r\n\r\n.dashboard-card--filled.dashboard-card--secondary .dashboard-card__avatar--filled {\r\n background-color: rgba(255, 255, 255, 0.25);\r\n border: 2px solid rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n/* Filled variant hover effects */\r\n.dashboard-card--filled.dashboard-card--clickable:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n/* ==================== TYPOGRAPHY & TEXT ==================== */\r\n\r\n.dashboard-card__label {\r\n color: var(--color-text-secondary, #6b7280);\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n font-size: 11px;\r\n line-height: 1.5;\r\n}\r\n\r\n.dashboard-card__value {\r\n color: var(--color-text-primary, #111827);\r\n font-weight: 700;\r\n line-height: 1.2;\r\n}\r\n\r\n.dashboard-card__subtitle {\r\n color: var(--color-text-tertiary, #9ca3af);\r\n line-height: 1.5;\r\n}\r\n\r\n.dashboard-card__timestamp {\r\n color: var(--color-text-tertiary, #9ca3af);\r\n white-space: nowrap;\r\n font-size: 12px;\r\n line-height: 1.5;\r\n}\r\n\r\n.dashboard-card__more {\r\n color: var(--color-text-secondary, #6b7280);\r\n text-align: center;\r\n font-style: italic;\r\n padding: 4px 0;\r\n}\r\n\r\n/* ==================== ICON WRAPPER ==================== */\r\n\r\n.dashboard-card__icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 50%;\r\n flex-shrink: 0;\r\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.dashboard-card__icon--sm {\r\n width: 36px;\r\n height: 36px;\r\n font-size: 16px;\r\n}\r\n\r\n.dashboard-card__icon--md {\r\n width: 44px;\r\n height: 44px;\r\n font-size: 20px;\r\n}\r\n\r\n.dashboard-card__icon--lg {\r\n width: 52px;\r\n height: 52px;\r\n font-size: 24px;\r\n}\r\n\r\n/* Theme variants */\r\n.dashboard-card__icon--primary {\r\n background-color: var(--color-primary-100, #dbeafe);\r\n color: var(--color-primary-600, #2563eb);\r\n}\r\n\r\n.dashboard-card__icon--secondary {\r\n background-color: var(--color-secondary-100, #f3f4f6);\r\n color: var(--color-secondary-600, #4b5563);\r\n}\r\n\r\n.dashboard-card__icon--success {\r\n background-color: var(--color-success-100, #d1fae5);\r\n color: var(--color-success-600, #059669);\r\n}\r\n\r\n.dashboard-card__icon--danger {\r\n background-color: var(--color-danger-100, #fee2e2);\r\n color: var(--color-danger-600, #dc2626);\r\n}\r\n.dashboard-card__icon--warning {\r\n background-color: var(--color-warning-100, #fef3c7);\r\n color: var(--color-warning-600, #d97706);\r\n}\r\n\r\n.dashboard-card__icon--info {\r\n background-color: var(--color-info-100, #dbeafe);\r\n color: var(--color-info-600, #0284c7);\r\n}\r\n\r\n/* ==================== TREND INDICATOR ==================== */\r\n\r\n.dashboard-card__trend {\r\n display: inline-flex;\r\n padding: 4px 8px;\r\n border-radius: 4px;\r\n font-weight: 600;\r\n width: fit-content;\r\n}\r\n\r\n.dashboard-card__trend--sm {\r\n padding: 2px 6px;\r\n font-size: 12px;\r\n}\r\n\r\n.dashboard-card__trend--md {\r\n padding: 4px 8px;\r\n font-size: 14px;\r\n}\r\n\r\n.dashboard-card__trend--positive {\r\n background-color: var(--color-success-100, #d1fae5);\r\n color: var(--color-success-700, #047857);\r\n}\r\n\r\n.dashboard-card__trend--negative {\r\n background-color: var(--color-danger-100, #fee2e2);\r\n color: var(--color-danger-700, #b91c1c);\r\n}\r\n\r\n.dashboard-card__trend-icon {\r\n font-size: 14px;\r\n font-weight: bold;\r\n}\r\n\r\n.dashboard-card__trend-value {\r\n font-weight: 600;\r\n color: inherit;\r\n}\r\n\r\n.dashboard-card__trend-label {\r\n color: inherit;\r\n opacity: 0.8;\r\n}\r\n\r\n/* ==================== PROGRESS BAR ==================== */\r\n\r\n.dashboard-card__progress-bar-container {\r\n width: 100%;\r\n height: 8px;\r\n background-color: var(--color-gray-200, #e5e7eb);\r\n border-radius: 4px;\r\n overflow: hidden;\r\n}\r\n\r\n.dashboard-card__progress-bar {\r\n height: 100%;\r\n border-radius: 4px;\r\n transition: width 0.3s ease-in-out, background-color 0.2s ease-in-out;\r\n}\r\n\r\n.dashboard-card__progress-bar--primary {\r\n background-color: var(--color-primary-600, #2563eb);\r\n}\r\n\r\n.dashboard-card__progress-bar--secondary {\r\n background-color: var(--color-secondary-600, #4b5563);\r\n}\r\n\r\n.dashboard-card__progress-bar--success {\r\n background-color: var(--color-success-600, #059669);\r\n}\r\n\r\n.dashboard-card__progress-bar--danger {\r\n background-color: var(--color-danger-600, #dc2626);\r\n}\r\n\r\n.dashboard-card__progress-bar--warning {\r\n background-color: var(--color-warning-600, #d97706);\r\n}\r\n\r\n.dashboard-card__progress-bar--info {\r\n background-color: var(--color-info-600, #0284c7);\r\n}\r\n\r\n.dashboard-card__progress-bar--on-track {\r\n background-color: var(--color-success-600, #059669);\r\n}\r\n\r\n.dashboard-card__progress-bar--at-risk {\r\n background-color: var(--color-warning-600, #d97706);\r\n}\r\n\r\n.dashboard-card__progress-bar--exceeded {\r\n background-color: var(--color-primary-600, #2563eb);\r\n}\r\n\r\n.dashboard-card__progress-bar--behind {\r\n background-color: var(--color-danger-600, #dc2626);\r\n}\r\n\r\n.dashboard-card__progress-values {\r\n color: var(--color-text-secondary, #6b7280);\r\n}\r\n\r\n.dashboard-card__percentage {\r\n font-weight: 700;\r\n}\r\n\r\n.dashboard-card__percentage--primary {\r\n color: var(--color-primary-600, #2563eb);\r\n}\r\n\r\n.dashboard-card__percentage--success {\r\n color: var(--color-success-600, #059669);\r\n}\r\n\r\n.dashboard-card__percentage--warning {\r\n color: var(--color-warning-600, #d97706);\r\n}\r\n\r\n.dashboard-card__percentage--danger {\r\n color: var(--color-danger-600, #dc2626);\r\n}\r\n\r\n/* ==================== COMPARISON CARD ==================== */\r\n\r\n.dashboard-card--comparison .dashboard-card__comparison-items {\r\n width: 100%;\r\n}\r\n\r\n.dashboard-card__comparison-label {\r\n color: var(--color-text-secondary, #6b7280);\r\n}\r\n\r\n.dashboard-card__divider {\r\n background-color: var(--color-gray-200, #e5e7eb);\r\n}\r\n\r\n.dashboard-card__divider--horizontal {\r\n width: 1px;\r\n min-height: 60px;\r\n}\r\n\r\n.dashboard-card__divider--vertical {\r\n width: 100%;\r\n height: 1px;\r\n}\r\n\r\n/* ==================== ACTIVITY CARD ==================== */\r\n\r\n/* ==================== ACTIVITY CARD ==================== */\r\n\r\n.dashboard-card--activity .dashboard-card__activity-list {\r\n width: 100%;\r\n}\r\n\r\n.dashboard-card--compact .dashboard-card__activity-item {\r\n padding: 12px 0;\r\n}\r\n\r\n.dashboard-card__activity-item {\r\n padding: 16px 0;\r\n transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);\r\n border-bottom: 1px solid var(--color-gray-100, #f3f4f6);\r\n}\r\n\r\n.dashboard-card__activity-item:last-child {\r\n border-bottom: none;\r\n padding-bottom: 0;\r\n}\r\n\r\n.dashboard-card__activity-item:first-child {\r\n padding-top: 0;\r\n}\r\n\r\n.dashboard-card__activity-item:hover {\r\n opacity: 0.95;\r\n}\r\n\r\n.dashboard-card__activity-label {\r\n color: var(--color-text-primary, #111827);\r\n font-size: 14px;\r\n line-height: 1.5;\r\n font-weight: 500;\r\n}\r\n\r\n.dashboard-card__activity-status-text {\r\n font-size: 12px;\r\n line-height: 1.4;\r\n text-transform: capitalize;\r\n}\r\n\r\n.dashboard-card__activity-value {\r\n color: var(--color-text-primary, #111827);\r\n font-weight: 600;\r\n font-size: 16px;\r\n line-height: 1.4;\r\n white-space: nowrap;\r\n text-align: right;\r\n}\r\n\r\n.dashboard-card__activity-value-secondary {\r\n font-size: 12px;\r\n line-height: 1.4;\r\n white-space: nowrap;\r\n text-align: right;\r\n}\r\n\r\n.dashboard-card__view-all-btn {\r\n background: none;\r\n border: none;\r\n color: var(--color-primary-600, #2563eb);\r\n font-size: 14px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n padding: 4px 8px;\r\n border-radius: 6px;\r\n transition: background-color 0.15s ease;\r\n display: flex;\r\n align-items: center;\r\n gap: 2px;\r\n}\r\n\r\n.dashboard-card__view-all-btn:hover {\r\n background-color: var(--color-primary-50, #eff6ff);\r\n}\r\n\r\n.dashboard-card__view-all-btn:active {\r\n background-color: var(--color-primary-100, #dbeafe);\r\n}\r\n\r\n/* ==================== ORDER CARD ==================== */\r\n\r\n.dashboard-card--order .dashboard-card__order-details {\r\n background-color: var(--color-gray-50, #f9fafb);\r\n padding: 12px 16px;\r\n border-radius: 6px;\r\n border: 1px solid var(--color-gray-100, #f3f4f6);\r\n}\r\n\r\n.dashboard-card__detail-label {\r\n color: var(--color-text-secondary, #6b7280);\r\n font-weight: 600;\r\n font-size: 12px;\r\n line-height: 1.5;\r\n}\r\n\r\n.dashboard-card__detail-value {\r\n color: var(--color-text-primary, #111827);\r\n font-weight: 500;\r\n font-size: 12px;\r\n line-height: 1.5;\r\n}\r\n\r\n/* ==================== USER CARD ==================== */\r\n\r\n.dashboard-card__user-name {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n.dashboard-card__user-role {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n.dashboard-card__user-department {\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n.dashboard-card__user-metrics {\r\n border-top: 1px solid var(--color-gray-100, #f3f4f6);\r\n padding-top: 12px;\r\n}\r\n\r\n.dashboard-card__metric-label {\r\n color: var(--color-text-secondary, #6b7280);\r\n font-weight: 500;\r\n}\r\n\r\n.dashboard-card__metric-value {\r\n color: var(--color-text-primary, #111827);\r\n font-weight: 600;\r\n}\r\n\r\n.dashboard-card__avatar {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n background-color: var(--color-gray-200, #e5e7eb);\r\n flex-shrink: 0;\r\n}\r\n\r\n.dashboard-card__avatar--sm {\r\n width: 40px;\r\n height: 40px;\r\n}\r\n\r\n.dashboard-card__avatar--md {\r\n width: 56px;\r\n height: 56px;\r\n}\r\n\r\n.dashboard-card__avatar--lg {\r\n width: 72px;\r\n height: 72px;\r\n}\r\n\r\n.dashboard-card__avatar img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n/* ==================== REVENUE CARD ==================== */\r\n\r\n.dashboard-card--revenue .dashboard-card__value {\r\n color: var(--color-success-600, #059669);\r\n}\r\n\r\n.dashboard-card__period {\r\n color: var(--color-text-tertiary, #9ca3af);\r\n font-style: italic;\r\n}\r\n\r\n.dashboard-card__breakdown {\r\n background-color: var(--color-gray-50, #f9fafb);\r\n padding: 12px 16px;\r\n border-radius: 6px;\r\n border: 1px solid var(--color-gray-100, #f3f4f6);\r\n}\r\n\r\n.dashboard-card__breakdown-label {\r\n color: var(--color-text-secondary, #6b7280);\r\n font-weight: 500;\r\n font-size: 12px;\r\n}\r\n\r\n.dashboard-card__breakdown-value {\r\n color: var(--color-text-primary, #111827);\r\n font-weight: 600;\r\n}\r\n\r\n.dashboard-card__breakdown-percentage {\r\n color: var(--color-text-tertiary, #9ca3af);\r\n font-size: 12px;\r\n}\r\n\r\n/* ==================== ALERT CARD ==================== */\r\n\r\n.dashboard-card--alert {\r\n border-width: 2px;\r\n}\r\n\r\n.dashboard-card--alert-error {\r\n border-color: var(--color-danger-300, #fca5a5);\r\n background-color: var(--color-danger-50, #fef2f2);\r\n}\r\n\r\n.dashboard-card--alert-warning {\r\n border-color: var(--color-warning-300, #fcd34d);\r\n background-color: var(--color-warning-50, #fffbeb);\r\n}\r\n\r\n.dashboard-card--alert-success {\r\n border-color: var(--color-success-300, #6ee7b7);\r\n background-color: var(--color-success-50, #f0fdf4);\r\n}\r\n\r\n.dashboard-card--alert-info {\r\n border-color: var(--color-info-300, #7dd3fc);\r\n background-color: var(--color-info-50, #f0f9ff);\r\n}\r\n\r\n.dashboard-card__alert-title {\r\n color: var(--color-text-primary, #111827);\r\n font-weight: 600;\r\n}\r\n\r\n.dashboard-card__alert-message {\r\n color: var(--color-text-secondary, #6b7280);\r\n line-height: 1.5;\r\n}\r\n\r\n.dashboard-card__dismiss-btn {\r\n background: none;\r\n border: none;\r\n font-size: 24px;\r\n color: var(--color-text-tertiary, #9ca3af);\r\n cursor: pointer;\r\n padding: 0;\r\n width: 24px;\r\n height: 24px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 4px;\r\n transition: all 0.2s ease-in-out;\r\n}\r\n\r\n.dashboard-card__dismiss-btn:hover {\r\n background-color: var(--color-gray-100, #f3f4f6);\r\n color: var(--color-text-primary, #111827);\r\n}\r\n\r\n.dashboard-card__action-btn {\r\n padding: 6px 12px;\r\n border-radius: 4px;\r\n border: 1px solid transparent;\r\n font-size: 14px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s ease-in-out;\r\n white-space: nowrap;\r\n}\r\n\r\n.dashboard-card__action-btn--primary {\r\n background-color: var(--color-primary-600, #2563eb);\r\n color: white;\r\n}\r\n\r\n.dashboard-card__action-btn--primary:hover {\r\n background-color: var(--color-primary-700, #1d4ed8);\r\n}\r\n\r\n.dashboard-card__action-btn--danger {\r\n background-color: var(--color-danger-600, #dc2626);\r\n color: white;\r\n}\r\n\r\n.dashboard-card__action-btn--danger:hover {\r\n background-color: var(--color-danger-700, #b91c1c);\r\n}\r\n\r\n.dashboard-card__action-btn--warning {\r\n background-color: var(--color-warning-600, #d97706);\r\n color: white;\r\n}\r\n\r\n.dashboard-card__action-btn--warning:hover {\r\n background-color: var(--color-warning-700, #b45309);\r\n}\r\n\r\n.dashboard-card__action-btn--success {\r\n background-color: var(--color-success-600, #059669);\r\n color: white;\r\n}\r\n\r\n.dashboard-card__action-btn--success:hover {\r\n background-color: var(--color-success-700, #047857);\r\n}\r\n\r\n.dashboard-card__action-btn--info {\r\n background-color: var(--color-info-600, #0284c7);\r\n color: white;\r\n}\r\n\r\n.dashboard-card__action-btn--info:hover {\r\n background-color: var(--color-info-700, #0369a1);\r\n}\r\n\r\n/* ==================== RANKING CARD ==================== */\r\n\r\n.dashboard-card--ranking .dashboard-card__ranking-list {\r\n width: 100%;\r\n}\r\n\r\n.dashboard-card__ranking-item {\r\n padding: 8px;\r\n border-radius: 4px;\r\n transition: background-color 0.2s ease-in-out;\r\n}\r\n\r\n.dashboard-card__ranking-item:hover {\r\n background-color: var(--color-gray-50, #f9fafb);\r\n}\r\n\r\n.dashboard-card__ranking-item--highlighted {\r\n background-color: var(--color-gray-50, #f9fafb);\r\n}\r\n\r\n.dashboard-card__rank {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 28px;\r\n height: 28px;\r\n border-radius: 50%;\r\n background-color: var(--color-gray-200, #e5e7eb);\r\n color: var(--color-text-secondary, #6b7280);\r\n font-weight: 700;\r\n font-size: 14px;\r\n flex-shrink: 0;\r\n}\r\n\r\n.dashboard-card__rank--primary {\r\n background-color: var(--color-primary-600, #2563eb);\r\n color: white;\r\n}\r\n\r\n.dashboard-card__rank--success {\r\n background-color: var(--color-success-600, #059669);\r\n color: white;\r\n}\r\n\r\n.dashboard-card__ranking-label {\r\n color: var(--color-text-primary, #111827);\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n\r\n.dashboard-card__ranking-value {\r\n color: var(--color-text-primary, #111827);\r\n font-weight: 700;\r\n white-space: nowrap;\r\n}\r\n\r\n.dashboard-card__ranking-percentage {\r\n color: var(--color-text-tertiary, #9ca3af);\r\n white-space: nowrap;\r\n}\r\n\r\n.dashboard-card__ranking-bar-container {\r\n width: 100%;\r\n height: 4px;\r\n background-color: var(--color-gray-200, #e5e7eb);\r\n border-radius: 2px;\r\n overflow: hidden;\r\n}\r\n\r\n.dashboard-card__ranking-bar {\r\n height: 100%;\r\n background-color: var(--color-gray-400, #9ca3af);\r\n border-radius: 2px;\r\n transition: width 0.3s ease-in-out;\r\n}\r\n\r\n.dashboard-card__ranking-bar--primary {\r\n background-color: var(--color-primary-600, #2563eb);\r\n}\r\n\r\n.dashboard-card__ranking-bar--success {\r\n background-color: var(--color-success-600, #059669);\r\n}\r\n\r\n/* ==================== STATUS CARD ==================== */\r\n\r\n.dashboard-card__service-name {\r\n color: var(--color-text-primary, #111827);\r\n font-weight: 600;\r\n}\r\n\r\n.dashboard-card__status-info {\r\n background-color: var(--color-gray-50, #f9fafb);\r\n padding: 8px 12px;\r\n border-radius: 4px;\r\n}\r\n\r\n.dashboard-card__status-metrics {\r\n background-color: var(--color-gray-50, #f9fafb);\r\n padding: 8px 12px;\r\n border-radius: 4px;\r\n}\r\n\r\n.dashboard-card__metric-label {\r\n color: var(--color-text-secondary, #6b7280);\r\n}\r\n\r\n.dashboard-card__metric-value {\r\n color: var(--color-text-primary, #111827);\r\n font-weight: 600;\r\n}\r\n\r\n/* ==================== METRIC CARD ==================== */\r\n\r\n.dashboard-card--metric {\r\n min-height: 200px;\r\n}\r\n\r\n.dashboard-card__metric-icon {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 10px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 20px;\r\n flex-shrink: 0;\r\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.dashboard-card__metric-icon--primary {\r\n background: rgba(37, 99, 235, 0.1);\r\n color: #2563eb;\r\n}\r\n\r\n.dashboard-card__metric-icon--secondary {\r\n background: rgba(75, 85, 99, 0.1);\r\n color: #4b5563;\r\n}\r\n\r\n.dashboard-card__metric-icon--success {\r\n background: rgba(5, 150, 105, 0.1);\r\n color: #059669;\r\n}\r\n\r\n.dashboard-card__metric-icon--danger {\r\n background: rgba(220, 38, 38, 0.1);\r\n color: #dc2626;\r\n}\r\n\r\n.dashboard-card__metric-icon--warning {\r\n background: rgba(217, 119, 6, 0.1);\r\n color: #d97706;\r\n}\r\n\r\n.dashboard-card__metric-icon--info {\r\n background: rgba(2, 132, 199, 0.1);\r\n color: #0284c7;\r\n}\r\n\r\n.dashboard-card__metric-label {\r\n color: #6b7280;\r\n font-weight: 500;\r\n letter-spacing: 0.01em;\r\n}\r\n\r\n.dashboard-card__metric-trend {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n padding: 4px 8px;\r\n border-radius: 6px;\r\n font-weight: 600;\r\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.dashboard-card__metric-trend--up {\r\n background: rgba(5, 150, 105, 0.1);\r\n color: #059669;\r\n}\r\n\r\n.dashboard-card__metric-trend--down {\r\n background: rgba(220, 38, 38, 0.1);\r\n color: #dc2626;\r\n}\r\n\r\n.dashboard-card__metric-trend-icon {\r\n font-size: 16px;\r\n font-weight: 700;\r\n line-height: 1;\r\n}\r\n\r\n.dashboard-card__metric-trend-value {\r\n font-weight: 600;\r\n font-size: 12px;\r\n}\r\n\r\n.dashboard-card__metric-value {\r\n font-size: 48px;\r\n font-weight: 700;\r\n line-height: 1.1;\r\n letter-spacing: -0.02em;\r\n color: #111827;\r\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.dashboard-card__metric-value--sm {\r\n font-size: 32px;\r\n}\r\n\r\n.dashboard-card__metric-value--md {\r\n font-size: 40px;\r\n}\r\n\r\n.dashboard-card__metric-value--lg {\r\n font-size: 48px;\r\n}\r\n\r\n.dashboard-card__metric-subtitle {\r\n color: #6b7280;\r\n font-weight: 400;\r\n margin-top: 4px;\r\n}\r\n\r\n.dashboard-card__metric-comparison {\r\n padding: 8px 12px;\r\n background: #f9fafb;\r\n border-radius: 8px;\r\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.dashboard-card__metric-comparison-label {\r\n color: #6b7280;\r\n}\r\n\r\n.dashboard-card__metric-comparison-value {\r\n color: #111827;\r\n}\r\n\r\n/* Metric Chart Styles */\r\n\r\n.dashboard-card__metric-chart {\r\n width: 100%;\r\n position: relative;\r\n margin-top: auto;\r\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.dashboard-card__metric-chart-svg {\r\n width: 100%;\r\n height: 100%;\r\n display: block;\r\n}\r\n\r\n.dashboard-card__metric-chart-line {\r\n stroke-width: 2.5;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.dashboard-card__metric-chart-line--primary {\r\n stroke: #2563eb;\r\n}\r\n\r\n.dashboard-card__metric-chart-line--secondary {\r\n stroke: #4b5563;\r\n}\r\n\r\n.dashboard-card__metric-chart-line--success {\r\n stroke: #059669;\r\n}\r\n\r\n.dashboard-card__metric-chart-line--danger {\r\n stroke: #dc2626;\r\n}\r\n\r\n.dashboard-card__metric-chart-line--warning {\r\n stroke: #d97706;\r\n}\r\n\r\n.dashboard-card__metric-chart-line--info {\r\n stroke: #0284c7;\r\n}\r\n\r\n.dashboard-card__metric-chart-area {\r\n opacity: 0.2;\r\n transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.dashboard-card:hover .dashboard-card__metric-chart-area {\r\n opacity: 0.3;\r\n}\r\n\r\n.dashboard-card__metric-gradient-start {\r\n stop-opacity: 0.4;\r\n}\r\n\r\n.dashboard-card__metric-gradient-end {\r\n stop-opacity: 0.05;\r\n}\r\n\r\n/* Theme-specific gradients */\r\n.dashboard-card--theme-primary .dashboard-card__metric-gradient-start {\r\n stop-color: #2563eb;\r\n}\r\n\r\n.dashboard-card--theme-secondary .dashboard-card__metric-gradient-start {\r\n stop-color: #4b5563;\r\n}\r\n\r\n.dashboard-card--theme-success .dashboard-card__metric-gradient-start {\r\n stop-color: #059669;\r\n}\r\n\r\n.dashboard-card--theme-danger .dashboard-card__metric-gradient-start {\r\n stop-color: #dc2626;\r\n}\r\n\r\n.dashboard-card--theme-warning .dashboard-card__metric-gradient-start {\r\n stop-color: #d97706;\r\n}\r\n\r\n.dashboard-card--theme-info .dashboard-card__metric-gradient-start {\r\n stop-color: #0284c7;\r\n}\r\n\r\n.dashboard-card__metric-chart-target {\r\n stroke: #9ca3af;\r\n stroke-width: 1;\r\n opacity: 0.5;\r\n}\r\n\r\n/* Bar Chart Styles */\r\n\r\n.dashboard-card__metric-chart-bars {\r\n display: flex;\r\n align-items: flex-end;\r\n gap: 4px;\r\n height: 100%;\r\n padding: 0;\r\n}\r\n\r\n.dashboard-card__metric-chart-bar-container {\r\n flex: 1;\r\n height: 100%;\r\n display: flex;\r\n align-items: flex-end;\r\n min-width: 2px;\r\n}\r\n\r\n.dashboard-card__metric-chart-bar {\r\n width: 100%;\r\n border-radius: 3px 3px 0 0;\r\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n min-height: 2px;\r\n}\r\n\r\n.dashboard-card__metric-chart-bar--primary {\r\n background: linear-gradient(to top, #2563eb, #60a5fa);\r\n}\r\n\r\n.dashboard-card__metric-chart-bar--secondary {\r\n background: linear-gradient(to top, #4b5563, #9ca3af);\r\n}\r\n\r\n.dashboard-card__metric-chart-bar--success {\r\n background: linear-gradient(to top, #059669, #34d399);\r\n}\r\n\r\n.dashboard-card__metric-chart-bar--danger {\r\n background: linear-gradient(to top, #dc2626, #f87171);\r\n}\r\n\r\n.dashboard-card__metric-chart-bar--warning {\r\n background: linear-gradient(to top, #d97706, #fbbf24);\r\n}\r\n\r\n.dashboard-card__metric-chart-bar--info {\r\n background: linear-gradient(to top, #0284c7, #38bdf8);\r\n}\r\n\r\n.dashboard-card__metric-chart-bar-container:hover .dashboard-card__metric-chart-bar {\r\n opacity: 0.8;\r\n transform: scaleY(1.05);\r\n}\r\n\r\n/* Filled Variant Adjustments for Metric Card */\r\n\r\n.dashboard-card--metric.dashboard-card--filled .dashboard-card__metric-label,\r\n.dashboard-card--metric.dashboard-card--filled .dashboard-card__metric-subtitle,\r\n.dashboard-card--metric.dashboard-card--filled .dashboard-card__metric-comparison-label {\r\n color: rgba(255, 255, 255, 0.9);\r\n}\r\n\r\n.dashboard-card--metric.dashboard-card--filled .dashboard-card__metric-value,\r\n.dashboard-card--metric.dashboard-card--filled .dashboard-card__metric-comparison-value {\r\n color: #ffffff;\r\n}\r\n\r\n.dashboard-card--metric.dashboard-card--filled .dashboard-card__metric-icon {\r\n background: rgba(255, 255, 255, 0.2);\r\n color: #ffffff;\r\n}\r\n\r\n.dashboard-card--metric.dashboard-card--filled .dashboard-card__metric-comparison {\r\n background: rgba(255, 255, 255, 0.15);\r\n backdrop-filter: blur(10px);\r\n}\r\n\r\n.dashboard-card--metric.dashboard-card--filled .dashboard-card__metric-chart-line {\r\n stroke: rgba(255, 255, 255, 0.9);\r\n}\r\n\r\n.dashboard-card--metric.dashboard-card--filled .dashboard-card__metric-chart-area {\r\n opacity: 0.15;\r\n}\r\n\r\n.dashboard-card--metric.dashboard-card--filled:hover .dashboard-card__metric-chart-area {\r\n opacity: 0.25;\r\n}\r\n\r\n.dashboard-card--metric.dashboard-card--filled .dashboard-card__metric-chart-target {\r\n stroke: rgba(255, 255, 255, 0.5);\r\n}\r\n\r\n/* Hover Effects */\r\n\r\n.dashboard-card--metric.dashboard-card--clickable:hover .dashboard-card__metric-icon {\r\n transform: scale(1.05);\r\n}\r\n\r\n.dashboard-card--metric.dashboard-card--clickable:hover .dashboard-card__metric-value {\r\n transform: translateX(2px);\r\n}\r\n\r\n/* ==================== RESPONSIVE DESIGN ==================== */\r\n\r\n@media (max-width: 768px) {\r\n .dashboard-card__icon--lg {\r\n width: 40px;\r\n height: 40px;\r\n font-size: 20px;\r\n }\r\n\r\n .dashboard-card__icon--md {\r\n width: 36px;\r\n height: 36px;\r\n font-size: 18px;\r\n }\r\n\r\n .dashboard-card--comparison.dashboard-card--horizontal .dashboard-card__comparison-items {\r\n flex-direction: column;\r\n }\r\n\r\n .dashboard-card__divider--horizontal {\r\n width: 100%;\r\n height: 1px;\r\n min-height: auto;\r\n }\r\n\r\n .dashboard-card__avatar--lg {\r\n width: 56px;\r\n height: 56px;\r\n }\r\n\r\n .dashboard-card__avatar--md {\r\n width: 48px;\r\n height: 48px;\r\n }\r\n}\r\n\r\n/* ==================== LOADING STATE ==================== */\r\n\r\n.dashboard-card--loading {\r\n opacity: 0.6;\r\n pointer-events: none;\r\n}\r\n\r\n/* ==================== ACCESSIBILITY ==================== */\r\n\r\n.dashboard-card--clickable:focus {\r\n outline: 2px solid var(--color-primary-500, #3b82f6);\r\n outline-offset: 2px;\r\n}\r\n\r\n.dashboard-card__action-btn:focus,\r\n.dashboard-card__dismiss-btn:focus {\r\n outline: 2px solid var(--color-primary-500, #3b82f6);\r\n outline-offset: 2px;\r\n}\r\n\r\n/* ==================== DARK MODE SUPPORT (OPTIONAL) ==================== */\r\n\r\n@media (prefers-color-scheme: dark) {\r\n .dashboard-card__label {\r\n color: var(--color-text-secondary-dark, #9ca3af);\r\n }\r\n\r\n .dashboard-card__value {\r\n color: var(--color-text-primary-dark, #f9fafb);\r\n }\r\n\r\n .dashboard-card__subtitle,\r\n .dashboard-card__timestamp {\r\n color: var(--color-text-tertiary-dark, #6b7280);\r\n }\r\n}\r\n");const Ve=({trend:n,size:e="md"})=>{var t;const a=null!==(t=n.isPositive)&&void 0!==t?t:n.value>0,o=Math.abs(n.value);return r.jsxs(hn,{align:"center",gap:.5,className:`dashboard-card__trend dashboard-card__trend--${a?"positive":"negative"} dashboard-card__trend--${e}`,children:[r.jsx("span",{className:"dashboard-card__trend-icon",children:a?"↑":"↓"}),r.jsxs(gn,{variant:"caption",className:"dashboard-card__trend-value",children:[o,"%"]}),n.label&&r.jsx(gn,{variant:"caption",className:"dashboard-card__trend-label",children:n.label})]})},Ye=({percentage:n,theme:e="primary",status:t})=>{const a=Math.min(Math.max(n,0),100),o=t?`dashboard-card__progress-bar--${t}`:`dashboard-card__progress-bar--${e}`;return r.jsx("div",{className:"dashboard-card__progress-bar-container",children:r.jsx("div",{className:`dashboard-card__progress-bar ${o}`,style:{width:`${a}%`}})})},qe=({icon:n,theme:e="primary",size:t="md"})=>r.jsx("div",{className:`dashboard-card__icon dashboard-card__icon--${e} dashboard-card__icon--${t}`,children:n}),Ue=({status:n,label:e})=>r.jsx(An,{variant:{active:"success",online:"success",delivered:"success",success:"success",pending:"warning",processing:"warning",warning:"warning","at-risk":"warning",away:"warning",degraded:"warning",cancelled:"danger",offline:"danger",error:"danger",danger:"danger",behind:"danger",shipped:"info",info:"info",maintenance:"info"}[n]||"secondary",size:"sm",children:e||n}),Ge=({data:n,settings:e={},className:t="",style:a,onClick:o,loading:i,size:l="md"})=>{const{theme:d="primary",variant:s="outlined",showIcon:c=!0,showTrend:x=!0,valueSize:v="lg",layout:m="vertical"}=e,p=`dashboard-card dashboard-card--stat dashboard-card--${m} dashboard-card--${s} dashboard-card--${d} ${!!o?"dashboard-card--clickable":""} ${t}`;return r.jsx(In,{variant:"filled"===s?"elevated":"outlined",className:p,style:a,onClick:o,children:i?r.jsx(hn,{align:"center",justify:"center",style:{minHeight:120},children:r.jsx(gn,{variant:"body2",children:"Loading..."})}):r.jsxs(hn,{direction:"column",gap:2,children:[r.jsxs(hn,{align:"center",justify:"between",wrap:"nowrap",gap:2,children:[r.jsx(gn,{variant:"overline",weight:"semibold",color:"secondary",className:"dashboard-card__label",style:{flex:1},children:n.label}),c&&n.icon&&r.jsx(qe,{icon:n.icon,theme:d,size:l})]}),r.jsxs(hn,{direction:"column",gap:.5,children:[r.jsx(gn,{variant:"lg"===v?"h2":"md"===v?"h3":"h4",weight:"bold",className:"dashboard-card__value",children:n.value}),n.subtitle&&r.jsx(gn,{variant:"caption",color:"secondary",className:"dashboard-card__subtitle",children:n.subtitle})]}),x&&n.trend&&r.jsx(hn,{children:r.jsx(Ve,{trend:n.trend})})]})})},Xe=({data:n,settings:e={},className:t="",style:a,onClick:o,loading:i,size:l="md"})=>{const{theme:d="primary",variant:s="outlined",showPercentage:c=!0,showValues:x=!0,progressType:v="bar",status:m}=e,p=n.current/n.target*100,h=`dashboard-card dashboard-card--progress dashboard-card--${s} dashboard-card--${d} ${!!o?"dashboard-card--clickable":""} ${t}`;return r.jsx(In,{variant:"filled"===s?"elevated":"outlined",className:h,style:a,onClick:o,children:i?r.jsx(hn,{align:"center",justify:"center",style:{minHeight:120},children:r.jsx(gn,{variant:"body2",children:"Loading..."})}):r.jsxs(hn,{direction:"column",gap:2,children:[r.jsxs(hn,{align:"center",justify:"between",gap:2,children:[r.jsxs(hn,{direction:"column",gap:.5,style:{flex:1},children:[r.jsx(gn,{variant:"overline",weight:"semibold",className:"dashboard-card__label",children:n.label}),n.subtitle&&r.jsx(gn,{variant:"caption",color:"secondary",className:"dashboard-card__subtitle",children:n.subtitle})]}),n.icon&&r.jsx(qe,{icon:n.icon,theme:d,size:l})]}),r.jsxs(hn,{direction:"column",gap:1.5,children:["bar"===v&&r.jsx(Ye,{percentage:p,theme:d,status:m}),r.jsxs(hn,{align:"center",justify:"between",gap:2,children:[x&&r.jsxs(gn,{variant:"body2",weight:"medium",className:"dashboard-card__progress-values",children:[n.current,n.unit&&` ${n.unit}`," / ",n.target,n.unit&&` ${n.unit}`]}),c&&r.jsxs(gn,{variant:"h3",weight:"bold",className:`dashboard-card__percentage dashboard-card__percentage--${d}`,children:[Math.round(p),"%"]})]}),m&&r.jsx(hn,{justify:"end",children:r.jsx(Ue,{status:m})})]})]})})},Ke=({data:n,settings:e={},className:t="",style:a,onClick:o,loading:l,size:d="md"})=>{const{theme:s="primary",variant:c="outlined",layout:x="horizontal",showTrends:v=!0,showDivider:m=!0}=e,p=`dashboard-card dashboard-card--comparison dashboard-card--${x} dashboard-card--${c} dashboard-card--${s} ${!!o?"dashboard-card--clickable":""} ${t}`;return r.jsx(In,{variant:"filled"===c?"elevated":"outlined",className:p,style:a,onClick:o,children:l?r.jsx(hn,{align:"center",justify:"center",style:{minHeight:120},children:r.jsx(gn,{variant:"body2",children:"Loading..."})}):r.jsxs(hn,{direction:"column",gap:2,children:[r.jsx(gn,{variant:"overline",weight:"semibold",className:"dashboard-card__label",children:n.label}),r.jsx(hn,{direction:"vertical"===x?"column":"row",gap:"vertical"===x?2:3,justify:"horizontal"===x?"between":"start",align:"horizontal"===x?"stretch":"start",className:"dashboard-card__comparison-items",children:n.items.map((e,t)=>r.jsxs(i.default.Fragment,{children:[r.jsxs(hn,{direction:"column",gap:1,style:{flex:1,minWidth:0},children:[r.jsxs(hn,{align:"center",gap:1,children:[e.icon&&r.jsx(qe,{icon:e.icon,theme:s,size:d}),r.jsx(gn,{variant:"caption",weight:"medium",color:"secondary",className:"dashboard-card__comparison-label",truncate:!0,children:e.label})]}),r.jsx(gn,{variant:"h3",weight:"bold",className:"dashboard-card__value",children:e.value}),v&&e.trend&&r.jsx(hn,{children:r.jsx(Ve,{trend:e.trend,size:"sm"})})]}),m&&t<n.items.length-1&&r.jsx("div",{className:`dashboard-card__divider dashboard-card__divider--${x}`})]},t))})]})})},Qe=({data:n,settings:e={},className:t="",style:a,onClick:o,loading:i})=>{const{theme:l="primary",variant:d="outlined",maxItems:s=5,showTimestamps:c=!0,compact:x=!1}=e,v=n.activities.slice(0,s),m=`dashboard-card dashboard-card--activity dashboard-card--${d} dashboard-card--${l} ${x?"dashboard-card--compact":""} ${!!o?"dashboard-card--clickable":""} ${t}`;return r.jsx(In,{variant:"filled"===d?"elevated":"outlined",className:m,style:a,onClick:o,children:i?r.jsx(hn,{align:"center",justify:"center",style:{minHeight:120},children:r.jsx(gn,{variant:"body2",children:"Loading..."})}):r.jsxs(hn,{direction:"column",gap:2.5,children:[r.jsxs(hn,{align:"center",justify:"between",children:[r.jsx(gn,{variant:"h6",weight:"semibold",className:"dashboard-card__label",children:n.title}),n.onViewAll&&r.jsxs("button",{className:"dashboard-card__view-all-btn",onClick:r=>{var e;r.stopPropagation(),null===(e=n.onViewAll)||void 0===e||e.call(n)},children:["View All",r.jsx("span",{style:{marginLeft:4},children:"›"})]})]}),r.jsx(hn,{direction:"column",gap:0,className:"dashboard-card__activity-list",children:v.map(n=>r.jsx("div",{className:"dashboard-card__activity-item",children:r.jsxs(hn,{align:"start",justify:"between",gap:2,children:[r.jsxs(hn,{align:"start",gap:1.5,style:{flex:1,minWidth:0},children:[n.status&&r.jsx(hn,{style:{flexShrink:0,paddingTop:2},children:r.jsx(Ue,{status:n.status})}),r.jsxs(hn,{direction:"column",gap:.5,style:{flex:1,minWidth:0},children:[r.jsx(gn,{variant:"body2",weight:"medium",className:"dashboard-card__activity-label",children:n.label}),r.jsxs(hn,{align:"center",gap:1,children:[r.jsx(gn,{variant:"caption",color:"secondary",className:"dashboard-card__activity-status-text",style:{textTransform:"capitalize"},children:n.status||"Pending"}),c&&n.timestamp&&r.jsxs(r.Fragment,{children:[r.jsx("span",{style:{color:"var(--color-text-secondary, #6b7280)",fontSize:"12px"},children:"•"}),r.jsx(gn,{variant:"caption",color:"secondary",className:"dashboard-card__timestamp",children:n.timestamp})]})]})]})]}),n.value&&r.jsxs(hn,{direction:"column",align:"end",gap:.5,style:{flexShrink:0},children:[r.jsx(gn,{variant:"body2",weight:"semibold",className:"dashboard-card__activity-value",children:n.value}),r.jsx(gn,{variant:"caption",color:"secondary",className:"dashboard-card__activity-value-secondary",children:n.value})]})]})},n.id))}),n.activities.length>s&&r.jsxs(gn,{variant:"caption",color:"secondary",className:"dashboard-card__more",style:{textAlign:"center",paddingTop:4},children:["+",n.activities.length-s," more"]})]})})},Je=({data:n,settings:e={},className:t="",style:a,onClick:o,loading:i,size:l="md"})=>{const{theme:d="primary",variant:s="outlined",showCustomer:c=!0,showItems:x=!0,showDate:v=!0,layout:m="detailed"}=e,p=`dashboard-card dashboard-card--order dashboard-card--${m} dashboard-card--${s} dashboard-card--${d} ${!!o?"dashboard-card--clickable":""} ${t}`;return r.jsx(In,{variant:"filled"===s?"elevated":"outlined",className:p,style:a,onClick:o,children:i?r.jsx(hn,{align:"center",justify:"center",style:{minHeight:120},children:r.jsx(gn,{variant:"body2",children:"Loading..."})}):r.jsxs(hn,{direction:"column",gap:2,children:[r.jsxs(hn,{align:"center",justify:"between",gap:2,children:[r.jsxs(hn,{align:"center",gap:1,children:[n.icon&&r.jsx(qe,{icon:n.icon,theme:d,size:l}),r.jsxs(gn,{variant:"body2",weight:"medium",className:"dashboard-card__label dashboard-card__label--order",children:["Order #",n.orderId]})]}),r.jsx(Ue,{status:n.status})]}),r.jsxs(hn,{direction:"column",gap:1.5,children:[r.jsx(gn,{variant:"h3",weight:"bold",className:"dashboard-card__value",children:((r,n="USD")=>new Intl.NumberFormat("en-US",{style:"currency",currency:n}).format(r))(n.amount,n.currency)}),(c&&n.customer||x&&n.items||v&&n.date)&&r.jsxs(hn,{direction:"column",gap:.75,className:"dashboard-card__order-details",children:[c&&n.customer&&r.jsxs(hn,{align:"center",gap:1,children:[r.jsx(gn,{variant:"caption",weight:"medium",color:"secondary",className:"dashboard-card__detail-label",children:"Customer:"}),r.jsx(gn,{variant:"caption",className:"dashboard-card__detail-value",children:n.customer})]}),x&&n.items&&r.jsxs(hn,{align:"center",gap:1,children:[r.jsx(gn,{variant:"caption",weight:"medium",color:"secondary",className:"dashboard-card__detail-label",children:"Items:"}),r.jsx(gn,{variant:"caption",className:"dashboard-card__detail-value",children:n.items})]}),v&&n.date&&r.jsxs(hn,{align:"center",gap:1,children:[r.jsx(gn,{variant:"caption",weight:"medium",color:"secondary",className:"dashboard-card__detail-label",children:"Date:"}),r.jsx(gn,{variant:"caption",className:"dashboard-card__detail-value",children:n.date})]})]})]})]})})},Ze=({data:n,settings:e={},className:t="",style:a,onClick:o,loading:i,size:l="md"})=>{const{theme:d="primary",variant:s="outlined",showStatus:c=!0,showMetrics:x=!0,layout:v="horizontal",avatarSize:m}=e,p=m||l,h=`dashboard-card dashboard-card--user dashboard-card--${v} dashboard-card--${s} dashboard-card--${d} ${!!o?"dashboard-card--clickable":""} ${t}`;return r.jsx(In,{variant:"filled"===s?"elevated":"outlined",className:h,style:a,onClick:o,children:i?r.jsx(hn,{align:"center",justify:"center",style:{minHeight:120},children:r.jsx(gn,{variant:"body2",children:"Loading..."})}):r.jsxs(hn,{direction:"column",gap:2,children:[r.jsxs(hn,{align:"center",gap:2,children:[n.avatar&&r.jsx("div",{className:`dashboard-card__avatar dashboard-card__avatar--${p} ${"filled"===s?"dashboard-card__avatar--filled":""}`,children:n.avatar}),r.jsxs(hn,{direction:"column",gap:.5,style:{flex:1,minWidth:0},children:[r.jsxs(hn,{align:"center",gap:1,wrap:"wrap",children:[r.jsx(gn,{variant:"h4",weight:"semibold",className:"dashboard-card__user-name",truncate:!0,children:n.name}),c&&n.status&&r.jsx(Ue,{status:n.status})]}),n.role&&r.jsx(gn,{variant:"body2",color:"secondary",className:"dashboard-card__user-role",truncate:!0,children:n.role}),n.department&&r.jsx(gn,{variant:"caption",color:"secondary",className:"dashboard-card__user-department",truncate:!0,children:n.department})]})]}),x&&n.metrics&&n.metrics.length>0&&r.jsx(hn,{direction:"column",gap:1,className:"dashboard-card__user-metrics",children:n.metrics.map((n,e)=>r.jsxs(hn,{align:"center",justify:"between",gap:2,children:[r.jsx(gn,{variant:"caption",weight:"medium",color:"secondary",className:"dashboard-card__metric-label",children:n.label}),r.jsx(gn,{variant:"body2",weight:"semibold",className:"dashboard-card__metric-value",children:n.value})]},e))})]})})},rt=({data:n,settings:e={},className:t="",style:a,onClick:o,loading:i,size:l="md"})=>{const{theme:d="primary",variant:s="outlined",showTrend:c=!0,showBreakdown:x=!0,showPeriod:v=!0,format:m="detailed"}=e,p=`dashboard-card dashboard-card--revenue dashboard-card--${m} ${!!o?"dashboard-card--clickable":""} ${t}`,h=(r,n="USD")=>new Intl.NumberFormat("en-US",{style:"currency",currency:n,minimumFractionDigits:0,maximumFractionDigits:0}).format(r);return r.jsx(In,{variant:"filled"===s?"elevated":"outlined",className:p,style:a,onClick:o,children:i?r.jsx(hn,{align:"center",justify:"center",style:{minHeight:120},children:r.jsx(gn,{variant:"body2",children:"Loading..."})}):r.jsxs(hn,{direction:"column",gap:1.5,children:[r.jsxs(hn,{align:"center",justify:"between",children:[r.jsx(gn,{variant:"body2",className:"dashboard-card__label",children:n.label}),n.icon&&r.jsx(qe,{icon:n.icon,theme:d,size:l})]}),r.jsxs(hn,{direction:"column",gap:.5,children:[r.jsx(gn,{variant:"h2",className:"dashboard-card__value",children:h(n.amount,n.currency)}),v&&n.period&&r.jsx(gn,{variant:"caption",className:"dashboard-card__period",children:n.period})]}),c&&n.trend&&r.jsx(Ve,{trend:n.trend}),x&&n.breakdown&&n.breakdown.length>0&&r.jsx(hn,{direction:"column",gap:.5,className:"dashboard-card__breakdown",children:n.breakdown.map((e,t)=>r.jsxs(hn,{align:"center",justify:"between",children:[r.jsx(gn,{variant:"caption",className:"dashboard-card__breakdown-label",children:e.label}),r.jsxs(hn,{align:"center",gap:1,children:[r.jsx(gn,{variant:"body2",className:"dashboard-card__breakdown-value",children:h(e.value,n.currency)}),void 0!==e.percentage&&r.jsxs(gn,{variant:"caption",className:"dashboard-card__breakdown-percentage",children:["(",e.percentage,"%)"]})]})]},t))})]})})},nt=({data:n,settings:e={},className:t="",style:a,onClick:o,loading:i,size:l="md"})=>{const{theme:d,variant:s="outlined",showIcon:c=!0,showTimestamp:x=!0,dismissible:v=!1,onDismiss:m}=e,p=d||("error"===n.severity?"danger":"warning"===n.severity?"warning":"success"===n.severity?"success":"info"),h=!!o,u=`dashboard-card dashboard-card--alert dashboard-card--alert-${n.severity} ${h?"dashboard-card--clickable":""} ${t}`;return r.jsx(In,{variant:"filled"===s?"elevated":"outlined",className:u,style:a,onClick:o,children:i?r.jsx(hn,{align:"center",justify:"center",style:{minHeight:120},children:r.jsx(gn,{variant:"body2",children:"Loading..."})}):r.jsxs(hn,{direction:"column",gap:1.5,children:[r.jsxs(hn,{align:"center",justify:"between",children:[r.jsxs(hn,{align:"center",gap:1,children:[c&&n.icon&&r.jsx(qe,{icon:n.icon,theme:p,size:l}),r.jsx(gn,{variant:"h4",className:"dashboard-card__alert-title",children:n.title})]}),v&&r.jsx("button",{className:"dashboard-card__dismiss-btn",onClick:r=>{r.stopPropagation(),null==m||m()},children:"×"})]}),r.jsx(gn,{variant:"body2",className:"dashboard-card__alert-message",children:n.message}),r.jsxs(hn,{align:"center",justify:"between",children:[x&&n.timestamp&&r.jsx(gn,{variant:"caption",className:"dashboard-card__timestamp",children:n.timestamp}),n.actionLabel&&r.jsx("button",{className:`dashboard-card__action-btn dashboard-card__action-btn--${p}`,onClick:r=>{var e;r.stopPropagation(),null===(e=n.onAction)||void 0===e||e.call(n)},children:n.actionLabel})]})]})})},et=({data:n,settings:e={},className:t="",style:a,onClick:o,loading:i,size:l="md"})=>{const{theme:d="primary",variant:s="outlined",maxItems:c=5,showPercentages:x=!0,showBars:v=!0,highlightTop:m=3}=e,p=n.items.slice(0,c),h=Math.max(...p.map(r=>"number"==typeof r.value?r.value:0)),u=`dashboard-card dashboard-card--ranking ${!!o?"dashboard-card--clickable":""} ${t}`;return r.jsx(In,{variant:"filled"===s?"elevated":"outlined",className:u,style:a,onClick:o,children:i?r.jsx(hn,{align:"center",justify:"center",style:{minHeight:120},children:r.jsx(gn,{variant:"body2",children:"Loading..."})}):r.jsxs(hn,{direction:"column",gap:1.5,children:[r.jsx(gn,{variant:"body2",className:"dashboard-card__label",children:n.title}),r.jsx(hn,{direction:"column",gap:1,className:"dashboard-card__ranking-list",children:p.map(n=>{const e=n.rank<=m,t="number"==typeof n.value&&h>0?n.value/h*100:0;return r.jsxs(hn,{direction:"column",gap:.5,className:"dashboard-card__ranking-item "+(e?"dashboard-card__ranking-item--highlighted":""),children:[r.jsxs(hn,{align:"center",justify:"between",children:[r.jsxs(hn,{align:"center",gap:1,style:{flex:1,minWidth:0},children:[r.jsx("div",{className:"dashboard-card__rank "+(e?`dashboard-card__rank--${d}`:""),children:n.rank}),n.icon&&r.jsx(qe,{icon:n.icon,theme:d,size:l}),r.jsx(gn,{variant:"body2",className:"dashboard-card__ranking-label",style:{flex:1},children:n.label})]}),r.jsxs(hn,{align:"center",gap:1,children:[r.jsx(gn,{variant:"h4",className:"dashboard-card__ranking-value",children:n.value}),x&&void 0!==n.percentage&&r.jsxs(gn,{variant:"caption",className:"dashboard-card__ranking-percentage",children:["(",n.percentage,"%)"]})]})]}),v&&r.jsx("div",{className:"dashboard-card__ranking-bar-container",children:r.jsx("div",{className:"dashboard-card__ranking-bar "+(e?`dashboard-card__ranking-bar--${d}`:""),style:{width:`${t}%`}})})]},n.rank)})}),n.items.length>c&&r.jsxs(gn,{variant:"caption",className:"dashboard-card__more",children:["+",n.items.length-c," more items"]})]})})},tt=({data:n,settings:e={},className:t="",style:a,onClick:o,loading:i,size:l="md"})=>{const{theme:d="primary",variant:s="outlined",showChart:c=!0,showTrend:x=!0,showComparison:v=!1,chartHeight:m=60,valueSize:p="lg"}=e,h=`dashboard-card dashboard-card--metric dashboard-card--${s} dashboard-card--theme-${d} ${!!o?"dashboard-card--clickable":""} ${t}`,u=n.chartData||[],g=c&&u.length>0,b=n.chartType||"line",f=Math.max(...u,1),y=Math.min(...u,0),w=f-y||1,k=u.map(r=>(r-y)/w*100),j=()=>{if(0===k.length)return"";const r=100/(k.length-1||1);return k.map((n,e)=>({x:e*r,y:100-n})).map((r,n)=>`${0===n?"M":"L"} ${r.x} ${r.y}`).join(" ")};return r.jsx(In,{className:h,size:l,style:a,onClick:o,padding:"lg",children:i?r.jsx(hn,{direction:"column",gap:2,align:"center",justify:"center",style:{minHeight:"200px"},children:r.jsx(gn,{variant:"body2",className:"dashboard-card__loading",children:"Loading..."})}):r.jsxs(hn,{direction:"column",gap:2,style:{height:"100%"},children:[r.jsxs(hn,{align:"center",justify:"between",gap:2,children:[r.jsxs(hn,{align:"center",gap:1.5,children:[n.icon&&r.jsx("div",{className:`dashboard-card__metric-icon dashboard-card__metric-icon--${d}`,children:n.icon}),r.jsx(gn,{variant:"body2",className:"dashboard-card__metric-label",children:n.label})]}),x&&n.trend&&r.jsxs("div",{className:"dashboard-card__metric-trend "+(n.trend.isPositive?"dashboard-card__metric-trend--up":"dashboard-card__metric-trend--down"),children:[r.jsx("span",{className:"dashboard-card__metric-trend-icon",children:n.trend.isPositive?"↑":"↓"}),r.jsxs(gn,{variant:"caption",className:"dashboard-card__metric-trend-value",children:[Math.abs(n.trend.value),"%"]})]})]}),r.jsxs(hn,{direction:"column",gap:.5,children:[r.jsx(gn,{variant:"h1",className:`dashboard-card__metric-value dashboard-card__metric-value--${p}`,children:n.value}),n.subtitle&&r.jsx(gn,{variant:"caption",className:"dashboard-card__metric-subtitle",children:n.subtitle})]}),v&&(n.comparisonValue||n.comparisonLabel)&&r.jsxs(hn,{align:"center",gap:1,className:"dashboard-card__metric-comparison",children:[r.jsxs(gn,{variant:"caption",className:"dashboard-card__metric-comparison-label",children:[n.comparisonLabel||"vs previous",":"]}),r.jsx(gn,{variant:"caption",weight:"semibold",className:"dashboard-card__metric-comparison-value",children:n.comparisonValue})]}),g&&r.jsx("div",{className:"dashboard-card__metric-chart",style:{height:`${m}px`},children:"line"===b?r.jsxs("svg",{viewBox:"0 0 100 100",preserveAspectRatio:"none",className:`dashboard-card__metric-chart-svg dashboard-card__metric-chart-svg--${d}`,children:[r.jsx("defs",{children:r.jsxs("linearGradient",{id:`gradient-${d}`,x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[r.jsx("stop",{offset:"0%",className:"dashboard-card__metric-gradient-start"}),r.jsx("stop",{offset:"100%",className:"dashboard-card__metric-gradient-end"})]})}),r.jsx("path",{d:`${j()} L 100 100 L 0 100 Z`,className:"dashboard-card__metric-chart-area",fill:`url(#gradient-${d})`}),r.jsx("path",{d:j(),className:`dashboard-card__metric-chart-line dashboard-card__metric-chart-line--${d}`,fill:"none"}),n.targetValue&&r.jsx("line",{x1:"0",y1:100-(n.targetValue-y)/w*100,x2:"100",y2:100-(n.targetValue-y)/w*100,className:"dashboard-card__metric-chart-target",strokeDasharray:"2,2"})]}):r.jsx("div",{className:"dashboard-card__metric-chart-bars",children:k.map((n,e)=>r.jsx("div",{className:"dashboard-card__metric-chart-bar-container",children:r.jsx("div",{className:`dashboard-card__metric-chart-bar dashboard-card__metric-chart-bar--${d}`,style:{height:`${n}%`}})},e))})})]})})},at=({data:n,settings:e={},className:t="",style:a,onClick:o,loading:i,size:l="md"})=>{const{theme:d="primary",variant:s="outlined",showMetrics:c=!0,showUptime:x=!0,showLastChecked:v=!0,layout:m="detailed"}=e,p=`dashboard-card dashboard-card--status dashboard-card--${m} ${!!o?"dashboard-card--clickable":""} ${t}`;return r.jsx(In,{variant:"filled"===s?"elevated":"outlined",className:p,style:a,onClick:o,children:i?r.jsx(hn,{align:"center",justify:"center",style:{minHeight:120},children:r.jsx(gn,{variant:"body2",children:"Loading..."})}):r.jsxs(hn,{direction:"column",gap:1.5,children:[r.jsxs(hn,{align:"center",justify:"between",children:[r.jsxs(hn,{align:"center",gap:1,children:[n.icon&&r.jsx(qe,{icon:n.icon,theme:d,size:l}),r.jsx(gn,{variant:"h4",className:"dashboard-card__service-name",children:n.service})]}),r.jsx(Ue,{status:n.status})]}),r.jsxs(hn,{direction:"column",gap:.5,className:"dashboard-card__status-info",children:[x&&n.uptime&&r.jsxs(hn,{align:"center",gap:.5,children:[r.jsx(gn,{variant:"caption",className:"dashboard-card__detail-label",children:"Uptime:"}),r.jsx(gn,{variant:"caption",className:"dashboard-card__detail-value",children:n.uptime})]}),v&&n.lastChecked&&r.jsxs(hn,{align:"center",gap:.5,children:[r.jsx(gn,{variant:"caption",className:"dashboard-card__detail-label",children:"Last checked:"}),r.jsx(gn,{variant:"caption",className:"dashboard-card__detail-value",children:n.lastChecked})]})]}),c&&n.metrics&&n.metrics.length>0&&r.jsx(hn,{direction:"column",gap:.5,className:"dashboard-card__status-metrics",children:n.metrics.map((n,e)=>r.jsxs(hn,{align:"center",justify:"between",children:[r.jsx(gn,{variant:"caption",className:"dashboard-card__metric-label",children:n.label}),r.jsx(gn,{variant:"body2",className:"dashboard-card__metric-value",children:n.value})]},e))})]})})},ot=i.default.forwardRef((n,e)=>{const t={ref:e,className:n.className,style:n.style,onClick:n.onClick,loading:n.loading,size:n.size,variant:n.variant};switch(n.type){case"stat":return r.jsx(Ge,{...n,...t});case"progress":return r.jsx(Xe,{...n,...t});case"comparison":return r.jsx(Ke,{...n,...t});case"activity":return r.jsx(Qe,{...n,...t});case"order":return r.jsx(Je,{...n,...t});case"user":return r.jsx(Ze,{...n,...t});case"revenue":return r.jsx(rt,{...n,...t});case"alert":return r.jsx(nt,{...n,...t});case"ranking":return r.jsx(et,{...n,...t});case"metric":return r.jsx(tt,{...n,...t});case"status":return r.jsx(at,{...n,...t});default:return null}});ot.displayName="DashboardCard";const it=j(ot);mr("/* Navbar Base */\r\n.vtx-navbar {\r\n position: relative;\r\n width: 100%;\r\n background-color: var(--vtx-bg-primary, #ffffff);\r\n border-bottom: 1px solid var(--vtx-border-color, #e2e8f0);\r\n z-index: 100;\r\n}\r\n\r\n.vtx-navbar--sticky {\r\n position: sticky;\r\n top: 0;\r\n}\r\n\r\n.vtx-navbar--shadow {\r\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\r\n}\r\n\r\n/* Top Bar */\r\n.vtx-navbar__topbar {\r\n background-color: var(--vtx-bg-secondary, #f7fafc);\r\n border-bottom: 1px solid var(--vtx-border-color, #e2e8f0);\r\n padding: 0.5rem 0;\r\n font-size: 0.875rem;\r\n}\r\n\r\n.vtx-navbar__topbar-content {\r\n gap: 1rem;\r\n}\r\n\r\n.vtx-navbar__topbar-left,\r\n.vtx-navbar__topbar-right {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n}\r\n\r\n/* Desktop Navbar */\r\n.vtx-navbar--desktop {\r\n padding: 1rem 0;\r\n}\r\n\r\n.vtx-navbar__row {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n width: 100%;\r\n}\r\n\r\n.vtx-navbar__row--top {\r\n padding-bottom: 1rem;\r\n border-bottom: 1px solid var(--vtx-border-color, #e2e8f0);\r\n}\r\n\r\n.vtx-navbar__row--bottom {\r\n padding-top: 1rem;\r\n justify-content: center;\r\n}\r\n\r\n.vtx-navbar__row--centered {\r\n justify-content: center;\r\n}\r\n\r\n.vtx-navbar__row-end {\r\n display: flex;\r\n align-items: center;\r\n gap: 1.5rem;\r\n margin-left: auto;\r\n}\r\n\r\n/* Logo */\r\n.vtx-navbar__logo {\r\n display: flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n.vtx-navbar__logo-image {\r\n height: 2.5rem;\r\n width: auto;\r\n cursor: pointer;\r\n}\r\n\r\n.vtx-navbar__brand-text {\r\n font-size: 1.25rem;\r\n font-weight: 700;\r\n color: var(--vtx-text-primary, #1a202c);\r\n cursor: pointer;\r\n}\r\n\r\n/* Navigation */\r\n.vtx-navbar__nav {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n}\r\n\r\n.vtx-navbar__nav-item-wrapper {\r\n position: relative;\r\n}\r\n\r\n.vtx-navbar__nav-item {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n padding: 0.5rem 1rem;\r\n font-size: 0.9375rem;\r\n font-weight: 500;\r\n color: var(--vtx-text-primary, #1a202c);\r\n text-decoration: none;\r\n background: transparent;\r\n border: none;\r\n border-radius: var(--vtx-border-radius, 0.375rem);\r\n cursor: pointer;\r\n transition: all 0.15s ease-in-out;\r\n white-space: nowrap;\r\n}\r\n\r\n.vtx-navbar__nav-item:hover:not(.vtx-navbar__nav-item--disabled) {\r\n background-color: var(--vtx-bg-hover, #f7fafc);\r\n color: var(--vtx-primary-500, #3182ce);\r\n}\r\n\r\n.vtx-navbar__nav-item--active {\r\n color: var(--vtx-primary-500, #3182ce);\r\n background-color: var(--vtx-primary-50, #ebf8ff);\r\n}\r\n\r\n.vtx-navbar__nav-item--disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n}\r\n\r\n.vtx-navbar__nav-item-icon {\r\n display: inline-flex;\r\n align-items: center;\r\n}\r\n\r\n.vtx-navbar__nav-item-arrow {\r\n transition: transform 0.2s ease-in-out;\r\n}\r\n\r\n.vtx-navbar__nav-item-arrow--open {\r\n transform: rotate(180deg);\r\n}\r\n\r\n/* Submenu */\r\n.vtx-navbar__submenu {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n margin-top: 0.5rem;\r\n min-width: 200px;\r\n background-color: var(--vtx-bg-primary, #ffffff);\r\n border: 1px solid var(--vtx-border-color, #e2e8f0);\r\n border-radius: var(--vtx-border-radius, 0.375rem);\r\n box-shadow:\r\n 0 10px 15px -3px rgba(0, 0, 0, 0.1),\r\n 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n padding: 0.5rem;\r\n z-index: 1000;\r\n}\r\n\r\n.vtx-navbar__submenu .vtx-navbar__nav-item {\r\n display: flex;\r\n width: 100%;\r\n text-align: left;\r\n}\r\n\r\n/* Mega Menu */\r\n.vtx-navbar__megamenu {\r\n position: absolute;\r\n top: 100%;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n margin-top: 0.5rem;\r\n background-color: var(--vtx-bg-primary, #ffffff);\r\n border: 1px solid var(--vtx-border-color, #e2e8f0);\r\n border-radius: var(--vtx-border-radius, 0.375rem);\r\n box-shadow:\r\n 0 10px 15px -3px rgba(0, 0, 0, 0.1),\r\n 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n padding: 1.5rem;\r\n z-index: 1000;\r\n}\r\n\r\n.vtx-navbar__megamenu-content {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 2rem;\r\n min-width: 600px;\r\n}\r\n\r\n.vtx-navbar__megamenu-column {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.5rem;\r\n}\r\n\r\n.vtx-navbar__megamenu-title {\r\n font-size: 0.875rem;\r\n font-weight: 700;\r\n color: var(--vtx-text-primary, #1a202c);\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n margin-bottom: 0.5rem;\r\n}\r\n\r\n.vtx-navbar__megamenu-items {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.25rem;\r\n}\r\n\r\n/* Search */\r\n.vtx-navbar__search {\r\n flex: 0 1 400px;\r\n max-width: 400px;\r\n}\r\n\r\n.vtx-navbar--two-row .vtx-navbar__search {\r\n flex: 1;\r\n max-width: 600px;\r\n}\r\n\r\n.vtx-navbar__search-input {\r\n width: 100%;\r\n}\r\n\r\n/* Icons */\r\n.vtx-navbar__icons {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n}\r\n\r\n.vtx-navbar__icon-button {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0.5rem;\r\n background: transparent;\r\n border: none;\r\n border-radius: var(--vtx-border-radius, 0.375rem);\r\n color: var(--vtx-text-primary, #1a202c);\r\n cursor: pointer;\r\n transition: background-color 0.15s ease-in-out;\r\n}\r\n\r\n.vtx-navbar__icon-button:hover {\r\n background-color: var(--vtx-bg-hover, #f7fafc);\r\n}\r\n\r\n/* User */\r\n.vtx-navbar__user-button {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n padding: 0.375rem 0.75rem;\r\n background: transparent;\r\n border: 1px solid var(--vtx-border-color, #e2e8f0);\r\n border-radius: var(--vtx-border-radius, 0.375rem);\r\n color: var(--vtx-text-primary, #1a202c);\r\n cursor: pointer;\r\n transition: all 0.15s ease-in-out;\r\n}\r\n\r\n.vtx-navbar__user-button:hover {\r\n background-color: var(--vtx-bg-hover, #f7fafc);\r\n border-color: var(--vtx-border-hover, #cbd5e0);\r\n}\r\n\r\n.vtx-navbar__user-name {\r\n font-size: 0.875rem;\r\n font-weight: 500;\r\n}\r\n\r\n/* Actions */\r\n.vtx-navbar__actions {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n}\r\n\r\n/* Mobile Navbar */\r\n.vtx-navbar--mobile {\r\n padding: 0.75rem 0;\r\n}\r\n\r\n.vtx-navbar__mobile-header {\r\n height: 100%;\r\n}\r\n\r\n.vtx-navbar__mobile-icons {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n}\r\n\r\n.vtx-navbar__menu-button {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0.5rem;\r\n background: transparent;\r\n border: none;\r\n color: var(--vtx-text-primary, #1a202c);\r\n cursor: pointer;\r\n}\r\n\r\n/* Mobile Drawer */\r\n.vtx-navbar__drawer {\r\n position: fixed;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n width: 100%;\r\n max-width: 320px;\r\n background-color: var(--vtx-bg-primary, #ffffff);\r\n box-shadow: -4px 0 6px -1px rgba(0, 0, 0, 0.1);\r\n transform: translateX(100%);\r\n transition: transform 0.3s ease-in-out;\r\n z-index: 1000;\r\n overflow-y: auto;\r\n}\r\n\r\n.vtx-navbar__drawer--open {\r\n transform: translateX(0);\r\n}\r\n\r\n.vtx-navbar__drawer-content {\r\n padding: 1.5rem;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1.5rem;\r\n}\r\n\r\n.vtx-navbar__drawer-search {\r\n padding-bottom: 1rem;\r\n border-bottom: 1px solid var(--vtx-border-color, #e2e8f0);\r\n}\r\n\r\n.vtx-navbar__drawer-nav {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.25rem;\r\n}\r\n\r\n.vtx-navbar__mobile-nav-item-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.vtx-navbar__nav-item--mobile {\r\n width: 100%;\r\n justify-content: flex-start;\r\n text-align: left;\r\n padding: 0.75rem 1rem;\r\n}\r\n\r\n.vtx-navbar__mobile-submenu {\r\n margin-left: 1rem;\r\n margin-top: 0.25rem;\r\n border-left: 2px solid var(--vtx-border-color, #e2e8f0);\r\n padding-left: 0.5rem;\r\n}\r\n\r\n.vtx-navbar__mobile-megamenu-column {\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.vtx-navbar__mobile-megamenu-title {\r\n font-size: 0.75rem;\r\n font-weight: 700;\r\n color: var(--vtx-text-muted, #a0aec0);\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n padding: 0.5rem 1rem;\r\n}\r\n\r\n.vtx-navbar__drawer-user {\r\n padding-top: 1rem;\r\n border-top: 1px solid var(--vtx-border-color, #e2e8f0);\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1rem;\r\n}\r\n\r\n.vtx-navbar__drawer-user-name {\r\n font-size: 0.9375rem;\r\n font-weight: 600;\r\n color: var(--vtx-text-primary, #1a202c);\r\n}\r\n\r\n.vtx-navbar__drawer-user-email {\r\n font-size: 0.875rem;\r\n color: var(--vtx-text-muted, #a0aec0);\r\n}\r\n\r\n.vtx-navbar__drawer-user-menu {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.25rem;\r\n}\r\n\r\n.vtx-navbar__drawer-actions {\r\n padding-top: 1rem;\r\n border-top: 1px solid var(--vtx-border-color, #e2e8f0);\r\n}\r\n\r\n/* Overlay */\r\n.vtx-navbar__overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-color: rgba(0, 0, 0, 0.5);\r\n z-index: 999;\r\n animation: fadeIn 0.3s ease-in-out;\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/* Dark Mode Support */\r\n@media (prefers-color-scheme: dark) {\r\n .vtx-navbar {\r\n background-color: var(--vtx-bg-primary-dark, #2d3748);\r\n border-color: var(--vtx-border-color-dark, #4a5568);\r\n }\r\n\r\n .vtx-navbar__topbar {\r\n background-color: var(--vtx-bg-secondary-dark, #1a202c);\r\n border-color: var(--vtx-border-color-dark, #4a5568);\r\n }\r\n\r\n .vtx-navbar__brand-text,\r\n .vtx-navbar__nav-item {\r\n color: var(--vtx-text-primary-dark, #f7fafc);\r\n }\r\n\r\n .vtx-navbar__nav-item:hover:not(.vtx-navbar__nav-item--disabled) {\r\n background-color: var(--vtx-bg-hover-dark, #4a5568);\r\n }\r\n\r\n .vtx-navbar__submenu,\r\n .vtx-navbar__megamenu,\r\n .vtx-navbar__drawer {\r\n background-color: var(--vtx-bg-primary-dark, #2d3748);\r\n border-color: var(--vtx-border-color-dark, #4a5568);\r\n }\r\n\r\n .vtx-navbar__user-button {\r\n border-color: var(--vtx-border-color-dark, #4a5568);\r\n color: var(--vtx-text-primary-dark, #f7fafc);\r\n }\r\n\r\n .vtx-navbar__icon-button {\r\n color: var(--vtx-text-primary-dark, #f7fafc);\r\n }\r\n}\r\n\r\n/* Responsive */\r\n@media (max-width: 768px) {\r\n .vtx-navbar--desktop {\r\n display: none;\r\n }\r\n}\r\n\r\n@media (min-width: 769px) {\r\n .vtx-navbar--mobile {\r\n display: none;\r\n }\r\n}\r\n");const lt=({item:e,mobile:t=!1,onItemClick:a})=>{const[o,i]=n.useState(!1),l=e.children&&e.children.length>0,d=e.megaMenu&&e.megaMenu.length>0,s=()=>{e.onClick?(e.onClick(),null==a||a()):l||d?i(!o):e.href&&(null==a||a())},c=["vtx-navbar__nav-item",e.active&&"vtx-navbar__nav-item--active",e.disabled&&"vtx-navbar__nav-item--disabled",(l||d)&&"vtx-navbar__nav-item--with-submenu",t&&"vtx-navbar__nav-item--mobile"].filter(Boolean).join(" "),x=r.jsxs(r.Fragment,{children:[e.icon&&r.jsx("span",{className:"vtx-navbar__nav-item-icon",children:e.icon}),r.jsx("span",{className:"vtx-navbar__nav-item-label",children:e.label}),e.badge&&r.jsx(An,{size:"sm",variant:e.badgeVariant||"primary",children:e.badge}),(l||d)&&r.jsx(I,{size:16,className:"vtx-navbar__nav-item-arrow "+(o?"vtx-navbar__nav-item-arrow--open":"")})]});return t?r.jsxs("div",{className:"vtx-navbar__mobile-nav-item-wrapper",children:[!e.href||l||d?r.jsx("button",{className:c,onClick:s,disabled:e.disabled,children:x}):r.jsx(le,{href:e.href,className:c,onClick:s,children:x}),(l||d)&&o&&r.jsxs("div",{className:"vtx-navbar__mobile-submenu",children:[l&&e.children.map((n,e)=>r.jsx(lt,{item:n,mobile:!0,onItemClick:a},e)),d&&e.megaMenu.map((n,e)=>r.jsxs("div",{className:"vtx-navbar__mobile-megamenu-column",children:[n.title&&r.jsx("div",{className:"vtx-navbar__mobile-megamenu-title",children:n.title}),n.items.map((n,e)=>r.jsx(lt,{item:n,mobile:!0,onItemClick:a},e))]},e))]})]}):r.jsxs("div",{className:"vtx-navbar__nav-item-wrapper",onMouseLeave:()=>i(!1),children:[!e.href||l||d?r.jsx("button",{className:c,onClick:s,onMouseEnter:()=>(l||d)&&i(!0),disabled:e.disabled,children:x}):r.jsx(le,{href:e.href,className:c,onClick:s,children:x}),l&&o&&r.jsx("div",{className:"vtx-navbar__submenu",children:e.children.map((n,e)=>r.jsx(lt,{item:n,onItemClick:()=>i(!1)},e))}),d&&o&&r.jsx("div",{className:"vtx-navbar__megamenu",children:r.jsx("div",{className:"vtx-navbar__megamenu-content",children:e.megaMenu.map((n,e)=>r.jsxs("div",{className:"vtx-navbar__megamenu-column",children:[n.title&&r.jsx("div",{className:"vtx-navbar__megamenu-title",children:n.title}),r.jsx("div",{className:"vtx-navbar__megamenu-items",children:n.items.map((n,e)=>r.jsx(lt,{item:n,onItemClick:()=>i(!1)},e))})]},e))})})]})},dt=({config:n,containerized:e=!0})=>{const t=n=>n?i.default.isValidElement(n)?n:Array.isArray(n)?n.map((n,e)=>r.jsx(lt,{item:n},e)):n:null,a={};n.backgroundColor&&(a.backgroundColor=n.backgroundColor),n.textColor&&(a.color=n.textColor);const o=r.jsxs(hn,{justify:"between",align:"center",className:"vtx-navbar__topbar-content",children:[r.jsx("div",{className:"vtx-navbar__topbar-left",children:t(n.left)}),r.jsx("div",{className:"vtx-navbar__topbar-right",children:t(n.right)})]});return r.jsx("div",{className:"vtx-navbar__topbar",style:a,children:e?r.jsx(Ee,{children:o}):o})},st=({logo:e,logoAlt:t="Logo",onLogoClick:a,brandText:o,navigationItems:i=[],sticky:l=!1,shadow:d=!0,backgroundColor:s,className:c="",topBar:x,user:v,search:m,searchOptions:p=[],searchGetOptionLabel:h,searchGetOptionValue:u,searchGetOptionDescription:g,searchGetOptionIcon:b,searchNoOptionsMessage:f,searchLoading:y,onSearchSelect:w,notificationCount:k,onNotificationClick:j,cartCount:_,onCartClick:N,actions:z,containerized:C=!0,layout:S="single-row"})=>{const[$,M]=n.useState(""),T=["vtx-navbar","vtx-navbar--desktop",`vtx-navbar--${S}`,l&&"vtx-navbar--sticky",d&&"vtx-navbar--shadow",c].filter(Boolean).join(" "),D={};s&&(D.backgroundColor=s);const L=r.jsx("div",{className:"vtx-navbar__logo",children:e?r.jsx("img",{src:e,alt:t,className:"vtx-navbar__logo-image",onClick:a,style:{cursor:a?"pointer":"default"}}):o?r.jsx("span",{className:"vtx-navbar__brand-text",onClick:a,children:o}):null}),A=i.length>0&&r.jsx("nav",{className:"vtx-navbar__nav",children:i.map((n,e)=>r.jsx(lt,{item:n},e))}),E=(m||p.length>0)&&r.jsx("div",{className:"vtx-navbar__search",children:r.jsx(Sr,{placeholder:(null==m?void 0:m.placeholder)||"Search...",value:$,onChange:r=>{var n;M(r),null===(n=null==m?void 0:m.onSearch)||void 0===n||n.call(m,r)},options:p,getOptionLabel:h,getOptionValue:u,getOptionDescription:g,getOptionIcon:b,noOptionsMessage:f||"No results found",loading:y,onSelect:(r,n)=>{null==w||w(r,n),M("")},showSearchIcon:!0,clearable:!0,size:"sm",className:"vtx-navbar__search-input"})}),F=r.jsxs("div",{className:"vtx-navbar__icons",children:[void 0!==k&&r.jsx("button",{className:"vtx-navbar__icon-button",onClick:j,children:r.jsx(An,{content:k>0?String(k):"",variant:"error",size:"sm",children:r.jsx(R,{size:20})})}),void 0!==_&&r.jsx("button",{className:"vtx-navbar__icon-button",onClick:N,children:r.jsx(An,{content:_>0?String(_):"",variant:"error",size:"sm",children:r.jsx(lr,{size:20})})})]}),B=v&&r.jsxs("button",{className:"vtx-navbar__user-button",children:[r.jsx(ae,{src:v.avatar,alt:v.name,size:"sm"}),v.name&&r.jsx("span",{className:"vtx-navbar__user-name",children:v.name}),r.jsx(I,{size:16})]}),O=z&&r.jsx("div",{className:"vtx-navbar__actions",children:z}),W=()=>"two-row"===S?r.jsxs(r.Fragment,{children:[r.jsxs("div",{className:"vtx-navbar__row vtx-navbar__row--top",children:[L,E,r.jsxs("div",{className:"vtx-navbar__row-end",children:[F,B,O]})]}),r.jsx("div",{className:"vtx-navbar__row vtx-navbar__row--bottom",children:A})]}):"centered"===S?r.jsxs("div",{className:"vtx-navbar__row vtx-navbar__row--centered",children:[L,A,r.jsxs("div",{className:"vtx-navbar__row-end",children:[E,F,B,O]})]}):r.jsxs("div",{className:"vtx-navbar__row",children:[L,A,r.jsxs("div",{className:"vtx-navbar__row-end",children:[E,F,B,O]})]});return r.jsxs(r.Fragment,{children:[x&&r.jsx(dt,{config:x,containerized:C}),r.jsx("div",{className:T,style:D,children:C?r.jsx(Ee,{children:W()}):W()})]})},ct=({logo:e,logoAlt:t="Logo",onLogoClick:a,brandText:o,navigationItems:i=[],sticky:l=!1,shadow:d=!0,backgroundColor:s,className:c="",topBar:x,user:v,search:m,searchOptions:p=[],searchGetOptionLabel:h,searchGetOptionValue:u,searchGetOptionDescription:g,searchGetOptionIcon:b,searchNoOptionsMessage:f,searchLoading:y,onSearchSelect:w,notificationCount:k,onNotificationClick:j,cartCount:_,onCartClick:N,actions:z,containerized:C=!0,isOpen:S,onOpenChange:$})=>{const[M,T]=n.useState(!1),[D,I]=n.useState(""),L=void 0!==S,A=L?S:M,F=()=>{L||T(!1),null==$||$(!1)},B=["vtx-navbar","vtx-navbar--mobile",l&&"vtx-navbar--sticky",d&&"vtx-navbar--shadow",c].filter(Boolean).join(" "),O={};return s&&(O.backgroundColor=s),r.jsxs(r.Fragment,{children:[x&&r.jsx(dt,{config:x,containerized:C}),r.jsx("div",{className:B,style:O,children:C?r.jsx(Ee,{children:r.jsxs(hn,{justify:"between",align:"center",className:"vtx-navbar__mobile-header",children:[r.jsx("div",{className:"vtx-navbar__logo",children:e?r.jsx("img",{src:e,alt:t,className:"vtx-navbar__logo-image",onClick:a}):o?r.jsx("span",{className:"vtx-navbar__brand-text",onClick:a,children:o}):null}),r.jsxs("div",{className:"vtx-navbar__mobile-icons",children:[void 0!==k&&r.jsx("button",{className:"vtx-navbar__icon-button",onClick:j,children:r.jsx(An,{content:k>0?String(k):"",variant:"error",size:"sm",children:r.jsx(R,{size:20})})}),void 0!==_&&r.jsx("button",{className:"vtx-navbar__icon-button",onClick:N,children:r.jsx(An,{content:_>0?String(_):"",variant:"error",size:"sm",children:r.jsx(lr,{size:20})})}),r.jsx("button",{className:"vtx-navbar__menu-button",onClick:()=>{const r=!A;L||T(r),null==$||$(r)},children:A?r.jsx(er,{size:24}):r.jsx(E,{size:24})})]})]})}):r.jsx(hn,{justify:"between",align:"center",className:"vtx-navbar__mobile-header"})}),r.jsx("div",{className:"vtx-navbar__drawer "+(A?"vtx-navbar__drawer--open":""),children:r.jsxs("div",{className:"vtx-navbar__drawer-content",children:[(m||p.length>0)&&r.jsx("div",{className:"vtx-navbar__drawer-search",children:r.jsx(Sr,{placeholder:(null==m?void 0:m.placeholder)||"Search...",value:D,onChange:r=>{var n;I(r),null===(n=null==m?void 0:m.onSearch)||void 0===n||n.call(m,r)},options:p,getOptionLabel:h,getOptionValue:u,getOptionDescription:g,getOptionIcon:b,noOptionsMessage:f||"No results found",loading:y,onSelect:(r,n)=>{null==w||w(r,n),I(""),F()},showSearchIcon:!0,clearable:!0,fullWidth:!0,size:"md"})}),i.length>0&&r.jsx("nav",{className:"vtx-navbar__drawer-nav",children:i.map((n,e)=>r.jsx(lt,{item:n,mobile:!0,onItemClick:F},e))}),v&&r.jsxs("div",{className:"vtx-navbar__drawer-user",children:[r.jsxs(hn,{align:"center",gap:3,children:[r.jsx(ae,{src:v.avatar,alt:v.name,size:"md"}),r.jsxs("div",{children:[v.name&&r.jsx("div",{className:"vtx-navbar__drawer-user-name",children:v.name}),v.email&&r.jsx("div",{className:"vtx-navbar__drawer-user-email",children:v.email})]})]}),v.menuItems&&v.menuItems.length>0&&r.jsx("div",{className:"vtx-navbar__drawer-user-menu",children:v.menuItems.map((n,e)=>r.jsx(lt,{item:n,mobile:!0,onItemClick:F},e))})]}),z&&r.jsx("div",{className:"vtx-navbar__drawer-actions",children:z})]})}),A&&r.jsx("div",{className:"vtx-navbar__overlay",onClick:F})]})},xt=({desktopLayout:e="single-row",mobileBreakpoint:t=768,...a})=>{const[o,i]=n.useState(!1);return n.useEffect(()=>{const r=()=>{i(window.innerWidth<t)};return r(),window.addEventListener("resize",r),()=>window.removeEventListener("resize",r)},[t]),o?r.jsx(ct,{...a}):r.jsx(st,{...a,layout:e})},vt=Object.assign(xt,{Desktop:j(st),Mobile:j(ct),Responsive:j(xt)});exports.Accordion=mn,exports.AccordionItem=vn,exports.ActionMenu=_n,exports.AdminHeader=we,exports.Alert=Cn,exports.Autocomplete=Sr,exports.Avatar=ae,exports.Badge=An,exports.Breadcrumb=ce,exports.Button=Mr,exports.Calendar=nn,exports.Card=In,exports.Checkbox=Dr,exports.CheckboxGroup=Lr,exports.Chip=Or,exports.Container=Ee,exports.DashboardCard=it,exports.DataGrid=ze,exports.DatePicker=on,exports.DateRangePicker=xn,exports.Divider=Se,exports.Flex=hn,exports.FormControl=Rr,exports.Grid=Fn,exports.Header=vt,exports.InfoCard=Wn,exports.InfoListCard=Be,exports.InfoText=Un,exports.Input=Fr,exports.Link=le,exports.Menu=wn,exports.MenuItem=fn,exports.Modal=$n,exports.MultiSelect=Pr,exports.Navbar=vt,exports.OrderCard=ne,exports.OrderConfirmation=We,exports.OrderDetails=He,exports.ProductCard=Jn,exports.Radio=Vr,exports.RadioGroup=qr,exports.RichTextEditor=Gr,exports.Select=Kr,exports.SideMenu=De,exports.SideMenuItem=Me,exports.Table=Le,exports.Text=gn,exports.Textarea=Jr,exports.ThemeProvider=Nr,exports.Timeline=Ae,exports.Toast=ur,exports.ToastContainer=jr,exports.Tooltip=Mn,exports.Widget=({config:n,className:e="",style:t})=>{const a=(n,a,o,i,l,d)=>{const s=o||{theme:i||"modern",variant:l||"primary",size:d||"md",className:e,style:t};switch(n){case"metric":return r.jsx(Rn,{data:a,settings:s});case"info":return r.jsx(Gn,{data:a,settings:s});case"product":return r.jsx(Zn,{data:a,settings:s});case"order":return r.jsx(ee,{data:a,settings:s});case"list":return r.jsx(oe,{data:a,settings:s});case"text":return r.jsx(de,{data:a,settings:s});case"header":return r.jsx(xe,{data:a,settings:s});case"carousel":return r.jsx(me,{data:a,settings:s});case"testimonial":return r.jsx(pe,{data:a,className:e,style:t});case"gridCarousel":return r.jsx(he,{...a,className:e,style:t});case"contentBlock":return r.jsx(ue,{data:a,settings:s});default:return console.warn(`Unknown widget type: ${n}`),null}};if("grid"===n.type){const t=n.data,o=n.settings||{};return r.jsx(Tn,{data:t.widgets,grid:n.grid||o.grid,renderItem:r=>a(r.type,r.data,r.settings,r.theme,r.variant,r.size),className:e})}if(Array.isArray(n.data)){const t=n.settings||{};return r.jsx(Tn,{data:n.data,grid:n.grid||t.grid,renderItem:r=>a(n.type,r,n.settings,n.theme,n.variant,n.size),className:e})}return a(n.type,n.data,n.settings,n.theme,n.variant,n.size)},exports.createCustomTokens=function(r){return r},exports.generateCSSVariables=C,exports.generateColorShades=_,exports.injectCSSVariables=S,exports.normalizeColors=N,exports.toast=wr,exports.tokens=z,exports.useBodyScrollLock=c,exports.useClickOutside=(r,e)=>{n.useEffect(()=>{const n=n=>{const t=null==r?void 0:r.current;t&&!t.contains(n.target)&&e(n)};return document.addEventListener("mousedown",n),document.addEventListener("touchstart",n),()=>{document.removeEventListener("mousedown",n),document.removeEventListener("touchstart",n)}},[r,e])},exports.useDebounce=(r,e)=>{const[t,a]=n.useState(r);return n.useEffect(()=>{const n=setTimeout(()=>{a(r)},e);return()=>{clearTimeout(n)}},[r,e]),t},exports.useEscapeKey=s,exports.useFocusTrap=d,exports.useId=v,exports.useThemeContext=zr,exports.useToast=br;
2
2
  //# sourceMappingURL=index.cjs.js.map