@upv/react-ui-core
Version:
**USHI Design System — Modern UI Component Library**
413 lines (373 loc) • 1.36 MB
JavaScript
import*as React from"react";import React__default,{createContext,useContext,useState,useEffect,forwardRef,createElement,useRef,useLayoutEffect,useId,useInsertionEffect,useCallback,useMemo,Children,isValidElement,Fragment as Fragment$1,Component,useImperativeHandle,useReducer}from"react";import styled,{ThemeProvider as ThemeProvider$1,createGlobalStyle,keyframes as keyframes$1,css,useTheme as useTheme$1}from"styled-components";function getDefaultExportFromCjs$1(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var jsxRuntime={exports:{}},reactJsxRuntime_production={},hasRequiredReactJsxRuntime_production;function requireReactJsxRuntime_production(){if(hasRequiredReactJsxRuntime_production)return reactJsxRuntime_production;hasRequiredReactJsxRuntime_production=1;var e=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function i(t,i,r){var s=null;if(void 0!==r&&(s=""+r),void 0!==i.key&&(s=""+i.key),"key"in i)for(var n in r={},i)"key"!==n&&(r[n]=i[n]);else r=i;return i=r.ref,{$$typeof:e,type:t,key:s,ref:void 0!==i?i:null,props:r}}return reactJsxRuntime_production.Fragment=t,reactJsxRuntime_production.jsx=i,reactJsxRuntime_production.jsxs=i,reactJsxRuntime_production}var reactJsxRuntime_development={},hasRequiredReactJsxRuntime_development,hasRequiredJsxRuntime;
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/function requireReactJsxRuntime_development(){return hasRequiredReactJsxRuntime_development||(hasRequiredReactJsxRuntime_development=1,"production"!==process.env.NODE_ENV&&function(){function e(t){if(null==t)return null;if("function"==typeof t)return t.$$typeof===F?null:t.displayName||t.name||null;if("string"==typeof t)return t;switch(t){case T:return"Fragment";case S:return"Portal";case C:return"Profiler";case A:return"StrictMode";case R:return"Suspense";case D:return"SuspenseList"}if("object"==typeof t)switch("number"==typeof t.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),t.$$typeof){case w:return(t.displayName||"Context")+".Provider";case P:return(t._context.displayName||"Context")+".Consumer";case k:var i=t.render;return(t=t.displayName)||(t=""!==(t=i.displayName||i.name||"")?"ForwardRef("+t+")":"ForwardRef"),t;case I:return null!==(i=t.displayName||null)?i:e(t.type)||"Memo";case L:i=t._payload,t=t._init;try{return e(t(i))}catch(e){}}return null}function t(e){return""+e}function i(e){try{t(e);var i=!1}catch(e){i=!0}if(i){var r=(i=console).error,s="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return r.call(i,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",s),t(e)}}function r(){}function s(e){if(void 0===U)try{throw Error()}catch(e){var t=e.stack.trim().match(/\n( *(at )?)/);U=t&&t[1]||"",G=-1<e.stack.indexOf("\n at")?" (<anonymous>)":-1<e.stack.indexOf("@")?"@unknown:0:0":""}return"\n"+U+e+G}function n(e,t){if(!e||H)return"";var i=W.get(e);if(void 0!==i)return i;H=!0,i=Error.prepareStackTrace,Error.prepareStackTrace=void 0;var n;n=O.H,O.H=null,function(){if(0===V){p=console.log,m=console.info,f=console.warn,g=console.error,y=console.group,v=console.groupCollapsed,x=console.groupEnd;var e={configurable:!0,enumerable:!0,value:r,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}V++}();try{var a={DetermineComponentFrameRoot:function(){try{if(t){var i=function(){throw Error()};if(Object.defineProperty(i.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(i,[])}catch(e){var r=e}Reflect.construct(e,[],i)}else{try{i.call()}catch(e){r=e}e.call(i.prototype)}}else{try{throw Error()}catch(e){r=e}(i=e())&&"function"==typeof i.catch&&i.catch((function(){}))}}catch(e){if(e&&r&&"string"==typeof e.stack)return[e.stack,r.stack]}return[null,null]}};a.DetermineComponentFrameRoot.displayName="DetermineComponentFrameRoot";var o=Object.getOwnPropertyDescriptor(a.DetermineComponentFrameRoot,"name");o&&o.configurable&&Object.defineProperty(a.DetermineComponentFrameRoot,"name",{value:"DetermineComponentFrameRoot"});var l=a.DetermineComponentFrameRoot(),c=l[0],d=l[1];if(c&&d){var h=c.split("\n"),u=d.split("\n");for(l=o=0;o<h.length&&!h[o].includes("DetermineComponentFrameRoot");)o++;for(;l<u.length&&!u[l].includes("DetermineComponentFrameRoot");)l++;if(o===h.length||l===u.length)for(o=h.length-1,l=u.length-1;1<=o&&0<=l&&h[o]!==u[l];)l--;for(;1<=o&&0<=l;o--,l--)if(h[o]!==u[l]){if(1!==o||1!==l)do{if(o--,0>--l||h[o]!==u[l]){var E="\n"+h[o].replace(" at new "," at ");return e.displayName&&E.includes("<anonymous>")&&(E=E.replace("<anonymous>",e.displayName)),"function"==typeof e&&W.set(e,E),E}}while(1<=o&&0<=l);break}}}finally{H=!1,O.H=n,function(){if(0==--V){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:B({},e,{value:p}),info:B({},e,{value:m}),warn:B({},e,{value:f}),error:B({},e,{value:g}),group:B({},e,{value:y}),groupCollapsed:B({},e,{value:v}),groupEnd:B({},e,{value:x})})}0>V&&console.error("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}(),Error.prepareStackTrace=i}return h=(h=e?e.displayName||e.name:"")?s(h):"","function"==typeof e&&W.set(e,h),h}function a(e){if(null==e)return"";if("function"==typeof e){var t=e.prototype;return n(e,!(!t||!t.isReactComponent))}if("string"==typeof e)return s(e);switch(e){case R:return s("Suspense");case D:return s("SuspenseList")}if("object"==typeof e)switch(e.$$typeof){case k:return e=n(e.render,!1);case I:return a(e.type);case L:t=e._payload,e=e._init;try{return a(e(t))}catch(e){}}return""}function o(){var e=O.A;return null===e?null:e.getOwner()}function l(){var t=e(this.type);return q[t]||(q[t]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),void 0!==(t=this.props.ref)?t:null}function c(t,r,s,n,a,c){if("string"==typeof t||"function"==typeof t||t===T||t===C||t===A||t===R||t===D||t===_||"object"==typeof t&&null!==t&&(t.$$typeof===L||t.$$typeof===I||t.$$typeof===w||t.$$typeof===P||t.$$typeof===k||t.$$typeof===N||void 0!==t.getModuleId)){var h=r.children;if(void 0!==h)if(n)if(j(h)){for(n=0;n<h.length;n++)d(h[n],t);Object.freeze&&Object.freeze(h)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else d(h,t)}else h="",(void 0===t||"object"==typeof t&&null!==t&&0===Object.keys(t).length)&&(h+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."),null===t?n="null":j(t)?n="array":void 0!==t&&t.$$typeof===b?(n="<"+(e(t.type)||"Unknown")+" />",h=" Did you accidentally export a JSX literal instead of a component?"):n=typeof t,console.error("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",n,h);if($.call(r,"key")){h=e(t);var u=Object.keys(r).filter((function(e){return"key"!==e}));n=0<u.length?"{key: someKey, "+u.join(": ..., ")+": ...}":"{key: someKey}",Y[h+n]||(u=0<u.length?"{"+u.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',n,h,u,h),Y[h+n]=!0)}if(h=null,void 0!==s&&(i(s),h=""+s),function(e){if($.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}(r)&&(i(r.key),h=""+r.key),"key"in r)for(var p in s={},r)"key"!==p&&(s[p]=r[p]);else s=r;return h&&function(e,t){function i(){z||(z=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}i.isReactWarning=!0,Object.defineProperty(e,"key",{get:i,configurable:!0})}(s,"function"==typeof t?t.displayName||t.name||"Unknown":t),function(e,t,i,r,s,n){return i=n.ref,e={$$typeof:b,type:e,key:t,props:n,_owner:s},null!==(void 0!==i?i:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:l}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(t,h,c,0,o(),s)}function d(e,t){if("object"==typeof e&&e&&e.$$typeof!==K)if(j(e))for(var i=0;i<e.length;i++){var r=e[i];h(r)&&u(r,t)}else if(h(e))e._store&&(e._store.validated=1);else if(null===e||"object"!=typeof e?i=null:i="function"==typeof(i=M&&e[M]||e["@@iterator"])?i:null,"function"==typeof i&&i!==e.entries&&(i=i.call(e))!==e)for(;!(e=i.next()).done;)h(e.value)&&u(e.value,t)}function h(e){return"object"==typeof e&&null!==e&&e.$$typeof===b}function u(t,i){if(t._store&&!t._store.validated&&null==t.key&&(t._store.validated=1,i=function(t){var i="",r=o();return r&&(r=e(r.type))&&(i="\n\nCheck the render method of `"+r+"`."),i||(t=e(t))&&(i="\n\nCheck the top-level render call using <"+t+">."),i}(i),!X[i])){X[i]=!0;var r="";t&&null!=t._owner&&t._owner!==o()&&(r=null,"number"==typeof t._owner.tag?r=e(t._owner.type):"string"==typeof t._owner.name&&(r=t._owner.name),r=" It was passed a child from "+r+".");var s=O.getCurrentStack;O.getCurrentStack=function(){var e=a(t.type);return s&&(e+=s()||""),e},console.error('Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.',i,r),O.getCurrentStack=s}}var p,m,f,g,y,v,x,E=React__default,b=Symbol.for("react.transitional.element"),S=Symbol.for("react.portal"),T=Symbol.for("react.fragment"),A=Symbol.for("react.strict_mode"),C=Symbol.for("react.profiler"),P=Symbol.for("react.consumer"),w=Symbol.for("react.context"),k=Symbol.for("react.forward_ref"),R=Symbol.for("react.suspense"),D=Symbol.for("react.suspense_list"),I=Symbol.for("react.memo"),L=Symbol.for("react.lazy"),_=Symbol.for("react.offscreen"),M=Symbol.iterator,F=Symbol.for("react.client.reference"),O=E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,$=Object.prototype.hasOwnProperty,B=Object.assign,N=Symbol.for("react.client.reference"),j=Array.isArray,V=0;r.__reactDisabledLog=!0;var U,G,z,H=!1,W=new("function"==typeof WeakMap?WeakMap:Map),K=Symbol.for("react.client.reference"),q={},Y={},X={};reactJsxRuntime_development.Fragment=T,reactJsxRuntime_development.jsx=function(e,t,i,r,s){return c(e,t,i,!1,0,s)},reactJsxRuntime_development.jsxs=function(e,t,i,r,s){return c(e,t,i,!0,0,s)}}()),reactJsxRuntime_development}function requireJsxRuntime(){return hasRequiredJsxRuntime||(hasRequiredJsxRuntime=1,"production"===process.env.NODE_ENV?jsxRuntime.exports=requireReactJsxRuntime_production():jsxRuntime.exports=requireReactJsxRuntime_development()),jsxRuntime.exports}var jsxRuntimeExports=requireJsxRuntime();const fonts={fontFamily:"'Inter', sans-serif",fontSize:"14px",fontWeightLight:"300",fontWeightRegular:"400",fontWeightMedium:"500",fontWeightBold:"700",fontWeightExtraBold:"800"},border={sm:"0.5px",md:"1px",lg:"2px"},typography={default:{fontFamily:fonts.fontFamily,fontSize:"16px",fontWeight:fonts.fontWeightRegular,lineHeight:"24px",mobileSize:"14px",mobileLineHeight:"22px",letterSpacing:"normal"},hero:{fontSize:"clamp(36px, 5vw, 48px)",fontWeight:fonts.fontWeightExtraBold,lineHeight:"clamp(44px, 6vw, 56px)",letterSpacing:"-0.5px",mobileSize:"32px",mobileLineHeight:"40px"},display:{fontSize:"clamp(32px, 4.5vw, 40px)",fontWeight:fonts.fontWeightBold,lineHeight:"clamp(40px, 5vw, 48px)",letterSpacing:"-0.4px",mobileSize:"28px",mobileLineHeight:"36px"},title:{fontSize:"clamp(28px, 3.5vw, 32px)",fontWeight:fonts.fontWeightBold,lineHeight:"40px",letterSpacing:"-0.3px",mobileSize:"24px",mobileLineHeight:"32px"},heading1:{fontSize:"clamp(28px, 3.5vw, 32px)",fontWeight:fonts.fontWeightBold,lineHeight:"40px",letterSpacing:"-0.3px",mobileSize:"24px",mobileLineHeight:"32px"},heading2:{fontSize:"clamp(22px, 2.5vw, 24px)",fontWeight:fonts.fontWeightMedium,lineHeight:"32px",letterSpacing:"-0.2px",mobileSize:"20px",mobileLineHeight:"28px"},heading3:{fontSize:"clamp(18px, 2vw, 20px)",fontWeight:fonts.fontWeightMedium,lineHeight:"28px",letterSpacing:"-0.1px",mobileSize:"18px",mobileLineHeight:"26px"},heading4:{fontSize:"clamp(18px, 2vw, 20px)",fontWeight:fonts.fontWeightMedium,lineHeight:"20px",letterSpacing:"-0.1px",mobileSize:"16px",mobileLineHeight:"22px"},bodyLarge:{fontSize:"18px",fontWeight:fonts.fontWeightRegular,lineHeight:"26px",mobileSize:"16px",mobileLineHeight:"24px",letterSpacing:"normal"},body:{fontSize:"16px",fontWeight:fonts.fontWeightRegular,lineHeight:"24px",mobileSize:"14px",mobileLineHeight:"22px",letterSpacing:"normal"},bodySmall:{fontSize:"14px",fontWeight:fonts.fontWeightRegular,lineHeight:"18px",mobileSize:"12px",mobileLineHeight:"16px",letterSpacing:"normal"},caption:{fontSize:"13px",fontWeight:fonts.fontWeightRegular,lineHeight:"18px",mobileSize:"12px",mobileLineHeight:"16px",letterSpacing:"normal"},quote:{fontSize:"13px",fontWeight:fonts.fontWeightRegular,lineHeight:"18px",mobileSize:"12px",mobileLineHeight:"16px",letterSpacing:"normal"},overline:{fontSize:"10px",fontWeight:fonts.fontWeightBold,textTransform:"uppercase",lineHeight:"14px",mobileSize:"10px",mobileLineHeight:"14px",letterSpacing:"normal"},disclaimer:{fontSize:"12px",fontWeight:fonts.fontWeightLight,lineHeight:"16px",mobileSize:"12px",mobileLineHeight:"16px",letterSpacing:"normal"},legalText:{fontSize:"10px",fontWeight:fonts.fontWeightLight,lineHeight:"14px",mobileSize:"10px",mobileLineHeight:"14px",letterSpacing:"normal"},error:{fontSize:"10px",fontWeight:fonts.fontWeightLight,lineHeight:"14px",mobileSize:"10px",mobileLineHeight:"14px",letterSpacing:"normal"}},zIndices={navbar:10,sidebar:9,drawer:9},spacing={xxs:"2px",xs:"4px",sm:"8px",md:"16px",lg:"24px",xl:"32px",xxl:"40px",sidebarWidth:"200px"},radii={sm:"4px",md:"8px",lg:"12px",rounded:"100px"},elevations={low:"0px 1px 3px rgba(0, 0, 0, 0.1)",md:"0px 3px 6px rgba(0, 0, 0, 0.15)",high:"0px 6px 12px rgba(0, 0, 0, 0.2)"},transitions={default:"all 0.3s ease-in-out",fast:"all 0.2s ease-in-out"},breakpoints={mobile:"480px",tablet:"835px",laptop:"1024px",desktop:"1440px",ultraWide:"1920px"},gradients=e=>({primary:`linear-gradient(135deg, ${e.primary}, ${e.primarySelected})`,secondary:`linear-gradient(135deg, ${e.secondary}, ${e.secondarySelected})`,accent:`linear-gradient(135deg, ${e.accent}, ${e.accentSelected})`,success:`linear-gradient(135deg, ${e.success}, ${e.success})`,warning:`linear-gradient(135deg, ${e.warning}, ${e.warning})`,error:`linear-gradient(135deg, ${e.error}, ${e.error})`,info:`linear-gradient(135deg, ${e.info}, ${e.info})`,radialPrimary:`radial-gradient(circle, ${e.primary} 0%, ${e.primarySelected} 100%)`,radialSecondary:`radial-gradient(circle, ${e.secondary} 0%, ${e.secondarySelected} 100%)`,conicAccent:`conic-gradient(from 180deg at 50% 50%, ${e.accent}, ${e.accentSelected}, ${e.accent})`}),lightColors={primary:"#B7C92F",primaryHover:"#9EC42E",primarySelected:"#7CA22A",secondary:"#F26B5A",secondaryHover:"#E05545",secondarySelected:"#C94739",accent:"#F4A259",accentHover:"#E6934F",accentSelected:"#D98245",background:"#F8FAF9",backgroundHover:"#FFFFFF",surface:"#FEFEFE",surfaceHover:"#FFFFFF",surfaceDisabled:"rgba(255, 255, 255, 0.5)",surfaceEntry:"#FEFEFE",surfaceAlt:"#eef2f9",surfaceGlass:"rgba(255, 255, 255, 0.05)",borderGlass:"rgba(255, 255, 255, 0.2)",overlay:"rgba(0, 0, 0, 0.5)",textPrimary:"#1A1A1A",textonPrimary:"#F8FAF9",textSecondary:"#4E4E4E",textonSecondary:"#F8FAF9",textDisabled:"#A8A8A8",muted:"#A8A8A8",border:"#DADADA",divider:"#E0E0E0",buttonBackground:"#C2D540",buttonText:"#FFFFFF",buttonDisabled:"#E0E0E0",buttonDisabledText:"#A0A0A0",pill:"#FFFFFF",success:"#66BB6A",warning:"#FFAB00",error:"#E53935",info:"#29B6F6"},lightTheme={fonts:fonts,typography:typography,zIndices:zIndices,spacing:spacing,radii:radii,elevations:elevations,transitions:transitions,breakpoints:breakpoints,border:border,colors:lightColors,gradients:gradients(lightColors),shadow:"rgba(0, 0, 0, 0.1) 0px 0px 0px"},darkColors={...lightTheme.colors,primary:"#C13E80",primaryHover:"#A8376E",primarySelected:"#8F2D5C",secondary:"#C2D540",secondaryHover:"#AABF35",secondarySelected:"#8CA12B",background:"#121212",surface:"#1E1E1E",overlay:"rgba(255, 255, 255, 0.05)",textPrimary:"#F0F0F0",textSecondary:"#B0B0B0",textDisabled:"#6E6E6E",border:"#3A3A3A",divider:"#444444",buttonBackground:"#C2D540",buttonText:"#F0F0F0",buttonDisabled:"#3E3E3E",buttonDisabledText:"#A0A0A0",success:"#66BB6A",warning:"#FFAB00",error:"#CF6679",info:"#80D44A"},darkTheme={...lightTheme,colors:{...lightColors,...darkColors},gradients:gradients(darkColors)},getColorVariant=(e,t,i)=>{const r=`${e}${t}`;return i[r]||console.warn(`Missing color variant: ${r}`),i[r]},themeUtils={getColorVariant:getColorVariant},isValidColorKey=(e,t)=>e in t,ThemeContext=createContext(void 0),useTheme=()=>{const e=useContext(ThemeContext);if(!e)throw new Error("useTheme must be used within ThemeProvider");return e},ThemeProvider=({children:e,defaultTheme:t="light",customTheme:i})=>{const[r,s]=useState(t);useEffect((()=>{const e=localStorage.getItem("theme");e&&s(e)}),[]);const n=i||("light"===r?lightTheme:darkTheme);return jsxRuntimeExports.jsx(ThemeContext.Provider,{value:{theme:r,setTheme:s,toggleTheme:()=>{const e="light"===r?"dark":"light";s(e),localStorage.setItem("theme",e)}},children:jsxRuntimeExports.jsx(ThemeProvider$1,{theme:n,children:e})})},GlobalStyles=createGlobalStyle`
/* Global Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Responsive Font Sizing */
html {
font-size: 16px;
scroll-behavior: smooth;
@media (max-width: 1024px) {
font-size: 15px; /* Slightly smaller for tablets */
}
@media (max-width: 768px) {
font-size: 14px; /* Mobile optimized */
}
}
/* Body Styles */
body {
font-family: ${({theme:e})=>e.typography.default.fontFamily};
font-size: ${({theme:e})=>e.typography.default.fontSize};
line-height: ${({theme:e})=>e.typography.default.lineHeight};
font-weight: ${({theme:e})=>e.typography.default.fontWeight};
color: ${({theme:e})=>e.colors.textPrimary};
background: ${({theme:e})=>e.colors.background};
transition: ${({theme:e})=>e.transitions.default};
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.2;
}
p {
font-size: 1rem;
margin-bottom: 1rem;
}
/* Responsive Container */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
@media (max-width: 1024px) {
max-width: 960px;
}
@media (max-width: 768px) {
max-width: 100%;
padding: 0 12px;
}
}
/* Links */
a {
text-decoration: none;
color: ${({theme:e})=>e.linkText};
transition: color 0.2s ease-in-out;
&:hover {
color: ${({theme:e})=>e.primary};
}
}
/* Buttons */
button {
font-family: inherit;
cursor: pointer;
border: none;
outline: none;
padding: 12px 20px;
border-radius: 6px;
font-size: 1rem;
font-weight: 600;
background-color: ${({theme:e})=>e.primary};
color: ${({theme:e})=>e.buttonText};
transition: background-color 0.3s ease-in-out;
&:hover {
background-color: ${({theme:e})=>e.primarySelected};
}
&:disabled {
background-color: ${({theme:e})=>e.buttonDisabledBackground};
color: ${({theme:e})=>e.buttonDisabledText};
cursor: not-allowed;
}
@media (max-width: 768px) {
padding: 10px 16px;
font-size: 0.9rem;
}
}
/* Forms & Inputs */
input, textarea {
font-family: inherit;
width: 100%;
padding: 12px;
border-radius: 6px;
border: 1px solid ${({theme:e})=>e.inputBorder};
background-color: ${({theme:e})=>e.inputBackground};
color: ${({theme:e})=>e.inputText};
transition: border-color 0.2s ease-in-out;
&:focus {
border-color: ${({theme:e})=>e.inputFocusedBorder};
outline: none;
}
@media (max-width: 768px) {
padding: 10px;
}
}
/* Responsive Grid */
.grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
@media (max-width: 1024px) {
gap: 16px;
}
@media (max-width: 768px) {
gap: 12px;
grid-template-columns: 1fr;
}
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
body {
background-color: ${({theme:e})=>e.background};
color: ${({theme:e})=>e.textPrimary};
}
}
`,fadeIn$3=keyframes$1`
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
`,StyledTypography=styled.p`
font-family: ${({theme:e})=>e.fonts.fontFamily};
text-align: ${({align:e})=>e||"left"};
display: ${({as:e})=>"span"===e||"button"===e?"inline-flex":"block"};
align-items: center;
${({variant:e="default",theme:t})=>css`
font-size: ${t.typography[e]?.fontSize||"19px"};
line-height: ${t.typography[e]?.lineHeight||"20px"};
letter-spacing: ${t.typography[e]?.letterSpacing||"normal"};
@media (max-width: ${t.breakpoints.mobile}) {
font-size: ${t.typography[e]?.mobileSize||t.typography[e]?.fontSize||"14px"};
line-height: ${t.typography[e]?.mobileLineHeight||t.typography[e]?.lineHeight||"20px"};
}
`}
font-weight: ${({weight:e="regular",theme:t})=>({light:t.fonts.fontWeightLight,medium:t.fonts.fontWeightMedium,bold:t.fonts.fontWeightBold,extraBold:t.fonts.fontWeightExtraBold,regular:t.fonts.fontWeightRegular}[e])};
text-transform: ${({textTransform:e})=>e||"none"};
font-style: ${({variant:e})=>"quote"===e?"italic":"normal"};
color: ${({color:e,colorScheme:t,theme:i})=>e||(t?i.colors[t]:i.colors.textPrimary)};
${({ellipsis:e})=>e&&css`
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`}
${({multiLineEllipsis:e})=>e&&css`
display: -webkit-box;
-webkit-line-clamp: ${e};
-webkit-box-orient: vertical;
overflow: hidden;
`}
${({hoverEffect:e,theme:t})=>e&&css`
transition: color 0.2s ease-in-out;
&:hover {
color: ${t.colors.primaryHover};
}
`}
${({animated:e})=>e&&css`
animation: ${fadeIn$3} 0.3s ease-in-out;
`}
`,Typography=({children:e,as:t="p",className:i,style:r,...s})=>jsxRuntimeExports.jsx(StyledTypography,{className:i,as:t,style:r,...s,children:e}),Wrapper$6=styled.div`
display: flex;
flex-direction: column;
width: ${({fullWidth:e})=>e?"100%":"auto"};
`,InputContainer=styled.div`
position: relative;
display: flex;
align-items: center;
`,StyledInput=styled.input`
width: 100%;
padding: ${({theme:e})=>e.spacing.sm};
border: 1px solid ${({theme:e})=>e.colors.border};
border-radius: ${({theme:e})=>e.radii.md};
background-color: ${({theme:e})=>e.colors.surfaceEntry};
color: ${({theme:e})=>e.colors.textPrimary};
outline: none;
`,StyledTextarea=styled.textarea`
width: 100%;
padding: ${({theme:e})=>e.spacing.sm};
border: 1px solid ${({theme:e})=>e.colors.border};
border-radius: ${({theme:e})=>e.radii.md};
background-color: ${({theme:e})=>e.colors.surfaceEntry};
color: ${({theme:e})=>e.colors.textPrimary};
resize: none;
`,IconWrapper$2=styled.div`
position: absolute;
right: ${({theme:e})=>e.spacing.md};
display: flex;
align-items: center;
cursor: pointer;
`,HelperMessage$1=styled(Typography)`
color: ${({theme:e})=>e.colors.textSecondary};
font-size: ${({theme:e})=>e.typography.caption.fontSize};
margin-top: ${({theme:e})=>e.spacing.xxs};
`,ErrorMessage$2=styled(Typography)`
color: ${({theme:e})=>e.colors.error};
margin-top: ${({theme:e})=>e.spacing.xxs};
`,MessageContainer$1=styled.div`
min-height: ${({theme:e})=>e.spacing.lg};
display: flex;
align-items: center;
`,TextField=forwardRef((({id:e,label:t,placeholder:i,type:r="text",fullWidth:s=!1,disabled:n=!1,value:a="",required:o=!1,helperText:l,error:c,overline:d,validation:h,minLength:u,maxLength:p,multiline:m=!1,minRows:f=2,maxRows:g=5,icon:y,onIconClick:v,mask:x,onBlur:E,onFocus:b,onChange:S,onKeyDown:T,autoComplete:A=!0},C)=>{const[P,w]=useState(a||""),[k,R]=useState(null);useEffect((()=>{w(a||"")}),[a]);const D=e=>{let t=e.target.value;x&&(t=x(t)),w(t),R(h?h(t):null),S?.(e)},I=e=>{h&&R(h(P)),E?.(e)},L=e=>{b?.(e)};return jsxRuntimeExports.jsxs(Wrapper$6,{fullWidth:s,children:[t&&jsxRuntimeExports.jsx(Typography,{as:"span",variant:"body",children:t}),d&&jsxRuntimeExports.jsx(Typography,{as:"span",variant:"overline",colorScheme:"textSecondary",children:d}),jsxRuntimeExports.jsxs(InputContainer,{children:[m?jsxRuntimeExports.jsx(StyledTextarea,{id:e,ref:C,placeholder:i,value:P,onChange:D,onBlur:I,onFocus:L,disabled:n,required:o,minLength:u,maxLength:p,rows:f,autoComplete:A?"on":"off"}):jsxRuntimeExports.jsx(StyledInput,{id:e,ref:C,type:r,placeholder:i,value:P,onChange:D,onBlur:I,onKeyDown:T,onFocus:L,disabled:n,required:o,minLength:u,maxLength:p,autoComplete:A?r:"off"}),y&&jsxRuntimeExports.jsx(IconWrapper$2,{onClick:v,"aria-label":"icon-action",children:jsxRuntimeExports.jsx(y,{size:20})})]}),jsxRuntimeExports.jsxs(MessageContainer$1,{children:[!c&&!k&&l&&jsxRuntimeExports.jsx(HelperMessage$1,{children:l}),(c||k)&&jsxRuntimeExports.jsx(ErrorMessage$2,{variant:"caption",children:c||k})]})]})}));TextField.displayName="TextField";
/**
* @license lucide-react v0.477.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const toKebabCase=e=>e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase(),mergeClasses=(...e)=>e.filter(((e,t,i)=>Boolean(e)&&""!==e.trim()&&i.indexOf(e)===t)).join(" ").trim()
/**
* @license lucide-react v0.477.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/;var defaultAttributes={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"};
/**
* @license lucide-react v0.477.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/const Icon$1=forwardRef((({color:e="currentColor",size:t=24,strokeWidth:i=2,absoluteStrokeWidth:r,className:s="",children:n,iconNode:a,...o},l)=>createElement("svg",{ref:l,...defaultAttributes,width:t,height:t,stroke:e,strokeWidth:r?24*Number(i)/Number(t):i,className:mergeClasses("lucide",s),...o},[...a.map((([e,t])=>createElement(e,t))),...Array.isArray(n)?n:[n]]))),createLucideIcon=(e,t)=>{const i=forwardRef((({className:i,...r},s)=>createElement(Icon$1,{ref:s,iconNode:t,className:mergeClasses(`lucide-${toKebabCase(e)}`,i),...r})));return i.displayName=`${e}`,i},__iconNode$D=[["path",{d:"M10.268 21a2 2 0 0 0 3.464 0",key:"vwvbt9"}],["path",{d:"M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326",key:"11g9vi"}]],Bell=createLucideIcon("Bell",__iconNode$D),__iconNode$C=[["path",{d:"M8 2v4",key:"1cmpym"}],["path",{d:"M16 2v4",key:"4m81vk"}],["rect",{width:"18",height:"18",x:"3",y:"4",rx:"2",key:"1hopcy"}],["path",{d:"M3 10h18",key:"8toen8"}]],Calendar=createLucideIcon("Calendar",__iconNode$C),__iconNode$B=[["path",{d:"M20 6 9 17l-5-5",key:"1gmf2c"}]],Check=createLucideIcon("Check",__iconNode$B),__iconNode$A=[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]],ChevronDown=createLucideIcon("ChevronDown",__iconNode$A),__iconNode$z=[["path",{d:"m9 18 6-6-6-6",key:"mthhwq"}]],ChevronRight=createLucideIcon("ChevronRight",__iconNode$z),__iconNode$y=[["path",{d:"m18 15-6-6-6 6",key:"153udz"}]],ChevronUp=createLucideIcon("ChevronUp",__iconNode$y),__iconNode$x=[["path",{d:"M21.801 10A10 10 0 1 1 17 3.335",key:"yps3ct"}],["path",{d:"m9 11 3 3L22 4",key:"1pflzl"}]],CircleCheckBig=createLucideIcon("CircleCheckBig",__iconNode$x),__iconNode$w=[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M8 12h8",key:"1wcyev"}],["path",{d:"M12 8v8",key:"napkw2"}]],CirclePlus=createLucideIcon("CirclePlus",__iconNode$w),__iconNode$v=[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"m15 9-6 6",key:"1uzhvr"}],["path",{d:"m9 9 6 6",key:"z0biqf"}]],CircleX=createLucideIcon("CircleX",__iconNode$v),__iconNode$u=[["path",{d:"M12 13v8",key:"1l5pq0"}],["path",{d:"M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242",key:"1pljnt"}],["path",{d:"m8 17 4-4 4 4",key:"1quai1"}]],CloudUpload=createLucideIcon("CloudUpload",__iconNode$u),__iconNode$t=[["rect",{width:"20",height:"14",x:"2",y:"5",rx:"2",key:"ynyp8z"}],["line",{x1:"2",x2:"22",y1:"10",y2:"10",key:"1b3vmo"}]],CreditCard=createLucideIcon("CreditCard",__iconNode$t),__iconNode$s=[["path",{d:"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49",key:"ct8e1f"}],["path",{d:"M14.084 14.158a3 3 0 0 1-4.242-4.242",key:"151rxh"}],["path",{d:"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143",key:"13bj9a"}],["path",{d:"m2 2 20 20",key:"1ooewy"}]],EyeOff=createLucideIcon("EyeOff",__iconNode$s),__iconNode$r=[["path",{d:"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0",key:"1nclc0"}],["circle",{cx:"12",cy:"12",r:"3",key:"1v7zrd"}]],Eye=createLucideIcon("Eye",__iconNode$r),__iconNode$q=[["polygon",{points:"13 19 22 12 13 5 13 19",key:"587y9g"}],["polygon",{points:"2 19 11 12 2 5 2 19",key:"3pweh0"}]],FastForward=createLucideIcon("FastForward",__iconNode$q),__iconNode$p=[["path",{d:"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z",key:"1rqfz7"}],["path",{d:"M14 2v4a2 2 0 0 0 2 2h4",key:"tnqrlb"}],["path",{d:"M10 9H8",key:"b1mrlr"}],["path",{d:"M16 13H8",key:"t4e002"}],["path",{d:"M16 17H8",key:"z1uh3a"}]],FileText=createLucideIcon("FileText",__iconNode$p),__iconNode$o=[["path",{d:"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z",key:"c3ymky"}]],Heart=createLucideIcon("Heart",__iconNode$o),__iconNode$n=[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M12 16v-4",key:"1dtifu"}],["path",{d:"M12 8h.01",key:"e9boi3"}]],Info=createLucideIcon("Info",__iconNode$n),__iconNode$m=[["path",{d:"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4",key:"1uf3rs"}],["polyline",{points:"16 17 21 12 16 7",key:"1gabdz"}],["line",{x1:"21",x2:"9",y1:"12",y2:"12",key:"1uyos4"}]],LogOut=createLucideIcon("LogOut",__iconNode$m),__iconNode$l=[["rect",{width:"20",height:"16",x:"2",y:"4",rx:"2",key:"18n3k1"}],["path",{d:"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7",key:"1ocrg3"}]],Mail=createLucideIcon("Mail",__iconNode$l),__iconNode$k=[["path",{d:"M8 3H5a2 2 0 0 0-2 2v3",key:"1dcmit"}],["path",{d:"M21 8V5a2 2 0 0 0-2-2h-3",key:"1e4gt3"}],["path",{d:"M3 16v3a2 2 0 0 0 2 2h3",key:"wsl5sc"}],["path",{d:"M16 21h3a2 2 0 0 0 2-2v-3",key:"18trek"}]],Maximize=createLucideIcon("Maximize",__iconNode$k),__iconNode$j=[["line",{x1:"4",x2:"20",y1:"12",y2:"12",key:"1e0a9i"}],["line",{x1:"4",x2:"20",y1:"6",y2:"6",key:"1owob3"}],["line",{x1:"4",x2:"20",y1:"18",y2:"18",key:"yk5zj1"}]],Menu=createLucideIcon("Menu",__iconNode$j),__iconNode$i=[["path",{d:"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z",key:"1lielz"}]],MessageSquare=createLucideIcon("MessageSquare",__iconNode$i),__iconNode$h=[["path",{d:"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z",key:"131961"}],["path",{d:"M19 10v2a7 7 0 0 1-14 0v-2",key:"1vc78b"}],["line",{x1:"12",x2:"12",y1:"19",y2:"22",key:"x3vr5v"}]],Mic=createLucideIcon("Mic",__iconNode$h),__iconNode$g=[["path",{d:"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z",key:"a7tn18"}]],Moon=createLucideIcon("Moon",__iconNode$g),__iconNode$f=[["path",{d:"m18 8 4 4-4 4",key:"1ak13k"}],["path",{d:"M2 12h20",key:"9i4pu4"}],["path",{d:"m6 8-4 4 4 4",key:"15zrgr"}]],MoveHorizontal=createLucideIcon("MoveHorizontal",__iconNode$f),__iconNode$e=[["rect",{x:"14",y:"4",width:"4",height:"16",rx:"1",key:"zuxfzm"}],["rect",{x:"6",y:"4",width:"4",height:"16",rx:"1",key:"1okwgv"}]],Pause=createLucideIcon("Pause",__iconNode$e),__iconNode$d=[["path",{d:"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z",key:"foiqr5"}]],Phone=createLucideIcon("Phone",__iconNode$d),__iconNode$c=[["polygon",{points:"6 3 20 12 6 21 6 3",key:"1oa8hb"}]],Play=createLucideIcon("Play",__iconNode$c),__iconNode$b=[["path",{d:"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8",key:"v9h5vc"}],["path",{d:"M21 3v5h-5",key:"1q7to0"}],["path",{d:"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16",key:"3uifl3"}],["path",{d:"M8 16H3v5",key:"1cv678"}]],RefreshCw=createLucideIcon("RefreshCw",__iconNode$b),__iconNode$a=[["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}],["path",{d:"m21 21-4.3-4.3",key:"1qie3q"}]],Search=createLucideIcon("Search",__iconNode$a),__iconNode$9=[["path",{d:"M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z",key:"1ffxy3"}],["path",{d:"m21.854 2.147-10.94 10.939",key:"12cjpa"}]],Send=createLucideIcon("Send",__iconNode$9),__iconNode$8=[["circle",{cx:"18",cy:"5",r:"3",key:"gq8acd"}],["circle",{cx:"6",cy:"12",r:"3",key:"w7nqdw"}],["circle",{cx:"18",cy:"19",r:"3",key:"1xt0gg"}],["line",{x1:"8.59",x2:"15.42",y1:"13.51",y2:"17.49",key:"47mynk"}],["line",{x1:"15.41",x2:"8.59",y1:"6.51",y2:"10.49",key:"1n3mei"}]],Share2=createLucideIcon("Share2",__iconNode$8),__iconNode$7=[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M8 14s1.5 2 4 2 4-2 4-2",key:"1y1vjs"}],["line",{x1:"9",x2:"9.01",y1:"9",y2:"9",key:"yxxnd0"}],["line",{x1:"15",x2:"15.01",y1:"9",y2:"9",key:"1p4y9e"}]],Smile=createLucideIcon("Smile",__iconNode$7),__iconNode$6=[["path",{d:"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z",key:"4pj2yx"}],["path",{d:"M20 3v4",key:"1olli1"}],["path",{d:"M22 5h-4",key:"1gvqau"}],["path",{d:"M4 17v2",key:"vumght"}],["path",{d:"M5 18H3",key:"zchphs"}]],Sparkles=createLucideIcon("Sparkles",__iconNode$6),__iconNode$5=[["circle",{cx:"12",cy:"12",r:"4",key:"4exip2"}],["path",{d:"M12 2v2",key:"tus03m"}],["path",{d:"M12 20v2",key:"1lh1kg"}],["path",{d:"m4.93 4.93 1.41 1.41",key:"149t6j"}],["path",{d:"m17.66 17.66 1.41 1.41",key:"ptbguv"}],["path",{d:"M2 12h2",key:"1t8f8n"}],["path",{d:"M20 12h2",key:"1q8mjw"}],["path",{d:"m6.34 17.66-1.41 1.41",key:"1m8zz5"}],["path",{d:"m19.07 4.93-1.41 1.41",key:"1shlcs"}]],Sun=createLucideIcon("Sun",__iconNode$5),__iconNode$4=[["path",{d:"M17 14V2",key:"8ymqnk"}],["path",{d:"M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z",key:"m61m77"}]],ThumbsDown=createLucideIcon("ThumbsDown",__iconNode$4),__iconNode$3=[["path",{d:"M7 10v12",key:"1qc93n"}],["path",{d:"M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z",key:"emmmcr"}]],ThumbsUp=createLucideIcon("ThumbsUp",__iconNode$3),__iconNode$2=[["path",{d:"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",key:"wmoenq"}],["path",{d:"M12 9v4",key:"juzpu7"}],["path",{d:"M12 17h.01",key:"p32p05"}]],TriangleAlert=createLucideIcon("TriangleAlert",__iconNode$2),__iconNode$1=[["path",{d:"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2",key:"975kel"}],["circle",{cx:"12",cy:"7",r:"4",key:"17ys0d"}]],User=createLucideIcon("User",__iconNode$1),__iconNode=[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]],X$1=createLucideIcon("X",__iconNode),StrengthBar=styled.div`
height: 6px;
width: 100%;
margin-top: ${({theme:e})=>e.spacing.xs};
background: ${({strength:e,theme:t})=>e<2?t.colors.error:e<4?t.colors.warning:t.colors.success};
border-radius: ${({theme:e})=>e.radii.sm};
transition: 0.3s ease-in-out;
`,PasswordField=e=>{const[t,i]=useState(!1),[r,s]=useState(!1),[n,a]=useState(void 0),[o,l]=useState(0),[c,d]=useState(e.value||"");return useEffect((()=>{const e=(e=>{if(!r)return;if(!e)return"Password is required";let t=0;return e.length>=8&&t++,e.length>=12&&t++,/[A-Z]/.test(e)&&t++,/[0-9]/.test(e)&&t++,/[^A-Za-z0-9]/.test(e)&&t++,l(t),t<2?"Password is too weak":t<4?"Consider making it stronger":void 0})(c);a(e)}),[c]),jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(TextField,{...e,type:t?"text":"password",value:c,onChange:e=>d(e.target.value),onBlur:()=>s(!0),error:n,icon:t?EyeOff:Eye,onIconClick:()=>i((e=>!e))}),r&&c&&jsxRuntimeExports.jsx(StrengthBar,{strength:o})," "]})},validateEmail=e=>{if(!e)return null;return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e)?null:"Invalid email format"},EmailField=e=>{const[t,i]=useState(e.value||""),[r,s]=useState(e.error||null),[n,a]=useState(!1);useEffect((()=>{i(e.value||""),s(e.error||null)}),[e.value,e.error]);return jsxRuntimeExports.jsx(TextField,{...e,type:"email",icon:Mail,placeholder:"name@example.com",autoComplete:"on",value:t,onChange:t=>{const r=t.target.value.trim();i(r),n&&s(validateEmail(r)),e.onChange?.(t)},onBlur:i=>{a(!0),s(validateEmail(t)),e.onBlur?.(i)},multiline:!1,error:n&&r?r:void 0})},CodeFieldContainer=styled.div`
display: flex;
flex-direction: column;
align-items: center;
`,OTPContainer$1=styled.div`
display: flex;
gap: ${({theme:e})=>e.spacing.xs};
justify-content: center;
margin-bottom: ${({theme:e})=>e.spacing.xxs};
@media (max-width: ${({theme:e})=>e.breakpoints.mobile}) {
gap: ${({theme:e})=>e.spacing.xxs}; // ✅ Smaller gaps for mobile
}
`,OTPInput=styled.input`
width: 48px;
height: 56px;
text-align: center;
font-size: ${({theme:e})=>e.typography.bodyLarge.fontSize};
font-weight: ${({theme:e})=>e.typography.bodyLarge.fontWeight};
line-height: ${({theme:e})=>e.typography.bodyLarge.lineHeight};
border: ${({theme:e})=>e.border.sm} solid ${({theme:e,hasError:t})=>t?e.colors.error:e.colors.border};
border-radius: ${({theme:e})=>e.radii.md};
background-color: ${({theme:e})=>e.colors.surfaceEntry};
color: ${({theme:e})=>e.colors.textPrimary};
transition: ${({theme:e})=>e.transitions.default};
&:focus {
border-color: ${({theme:e})=>e.colors.primarySelected};
outline: none;
}
@media (max-width: ${({theme:e})=>e.breakpoints.mobile}) {
width: 40px;
height: 50px;
font-size: ${({theme:e})=>e.typography.body.fontSize};
}
`,ActionContainer=styled.div`
display: flex;
justify-content: flex-end;
align-items: center;
gap: ${({theme:e})=>e.spacing.sm};
width: 100%;
max-width: 300px; /* ✅ Matches OTP width */
margin-top: ${({theme:e})=>e.spacing.xs};
`,ActionButton=styled.button`
background: none;
border: none;
color: ${({theme:e})=>e.colors.primary};
font-size: ${({theme:e})=>e.typography.overline.fontSize};
font-weight: ${({theme:e})=>e.typography.overline.fontWeight};
cursor: pointer;
display: flex;
align-items: flex-end;
gap: ${({theme:e})=>e.spacing.xxs};
transition: ${({theme:e})=>e.transitions.fast};
&:hover {
color: ${({theme:e})=>e.colors.primaryHover};
}
`,ErrorMessage$1=styled.p`
color: ${({theme:e})=>e.colors.error};
font-size: ${({theme:e})=>e.typography.caption.fontSize};
text-align: center;
margin-top: ${({theme:e})=>e.spacing.xxs};
`,ErrorWrapper=styled.div`
height: 18px;
width: 100%;
max-width: 300px;
display: flex;
justify-content: center; /* ✅ Center error under OTP */
`,CodeField=({length:e=6,minLength:t=4,maxLength:i=6,validateCode:r,resendCode:s=null,resendText:n="Resend",clear:a=null,...o})=>{const[l,c]=useState(new Array(e).fill("")),[d,h]=useState(null),[u,p]=useState(!1),m=useRef(new Array(e).fill(null)),f=()=>{p(!0);const e=l.join("");if(e.length<t)h(`Code must be at least ${t} digits`);else if(e.length>i)h(`Code must be at most ${i} digits`);else if(r){const t=r(e);h("string"==typeof t?t:null)}else h(null)},g=t=>{const i=t.clipboardData.getData("text").replace(/\D/g,"").slice(0,e);if(i.length>0){const t=i.split("").slice(0,e);c(t.concat(new Array(e-t.length).fill(""))),m.current[i.length-1]?.focus()}t.preventDefault()};return jsxRuntimeExports.jsxs(CodeFieldContainer,{children:[jsxRuntimeExports.jsx(OTPContainer$1,{children:l.map(((t,i)=>jsxRuntimeExports.jsx(OTPInput,{type:"text",maxLength:1,value:t,onChange:t=>((t,i)=>{if(!/^\d*$/.test(i))return;const r=[...l];r[t]=i,c(r),i&&t<e-1&&m.current[t+1]?.focus()})(i,t.target.value),onKeyDown:e=>((e,t)=>{"Backspace"===t.key&&!l[e]&&e>0&&m.current[e-1]?.focus()})(i,e),onBlur:f,onPaste:g,ref:e=>{m.current[i]=e},hasError:!!d},i)))}),jsxRuntimeExports.jsx(ErrorWrapper,{children:d&&jsxRuntimeExports.jsx(ErrorMessage$1,{children:d})}),jsxRuntimeExports.jsxs(ActionContainer,{children:[s&&jsxRuntimeExports.jsxs(ActionButton,{onClick:s,children:[jsxRuntimeExports.jsx(RefreshCw,{size:16})," ",n]}),a&&jsxRuntimeExports.jsx(ActionButton,{onClick:()=>{c(new Array(e).fill("")),h(null),m.current[0]?.focus()},children:jsxRuntimeExports.jsx(CircleX,{size:16})})]})]})},detectCardType=e=>{const t=e.replace(/\D/g,""),i={visa:/^4/,mastercard:/^5[1-5]/,amex:/^3[47]/,discover:/^6(?:011|5)/};for(const[e,r]of Object.entries(i))if(r.test(t))return e;return null},formatCreditCardNumber=e=>{const t=e.replace(/\D/g,"").slice(0,16);let i="";return i="amex"===detectCardType(t)?t.replace(/(\d{4})(\d{6})?(\d{5})?/,((e,t,i,r)=>[t,i,r].filter(Boolean).join(" "))):t.replace(/(\d{4})(\d{4})?(\d{4})?(\d{4})?/,((e,t,i,r,s)=>[t,i,r,s].filter(Boolean).join(" "))),i},validateCreditCard=e=>{const t=e.replace(/\D/g,"");return 0===t.length?null:t.length<13?"Credit card must be 13+ digits":luhnCheck(t)?null:"Invalid credit card number"},luhnCheck=e=>{let t=0,i=!1;for(let r=e.length-1;r>=0;r--){let s=parseInt(e[r],10);i&&(s*=2,s>9&&(s-=9)),t+=s,i=!i}return t%10==0},CreditCardField=e=>{const[t,i]=useState(""),[r,s]=useState(e.error??null),[n,a]=useState(!1);return jsxRuntimeExports.jsx(TextField,{...e,type:"text",icon:CreditCard,placeholder:"1234 5678 9012 3456",value:formatCreditCardNumber(t),maxLength:19,onChange:e=>{let t=e.target.value.replace(/\D/g,"");t.length<=16&&i(t),n&&s(validateCreditCard(t))},onBlur:()=>{a(!0),s(validateCreditCard(t))},error:void 0!==e.error&&null!==e.error?e.error:n?r:null})},formatDate=e=>{const t=e.replace(/\D/g,"");return t.length<=4?t:t.length<=6?`${t.slice(0,4)}-${t.slice(4)}`:`${t.slice(0,4)}-${t.slice(4,6)}-${t.slice(6,8)}`},validateDate=(e,t,i)=>{if(!e)return null;if(!/^\d{4}-\d{2}-\d{2}$/.test(e))return"Invalid date format (YYYY-MM-DD)";const r=new Date(e);return isNaN(r.getTime())?"Invalid date":t&&r<new Date(t)?`Date must be after ${t}`:i&&r>new Date(i)?`Date must be before ${i}`:null},DateField=({minDate:e,maxDate:t,startDate:i,...r})=>{const[s,n]=useState(i||""),[a,o]=useState(null),[l,c]=useState(!1);return jsxRuntimeExports.jsx(TextField,{...r,type:"date",icon:Calendar,placeholder:"YYYY-MM-DD",value:s,min:e,max:t,onChange:i=>{const r=formatDate(i.target.value);n(r),l&&o(validateDate(r,e,t))},onBlur:()=>{c(!0),o(validateDate(s,e,t))},error:l?a:void 0})},useSpeechRecognition=({lang:e="en-US",continuous:t=!0,interimResults:i=!0,onResult:r,onEnd:s})=>{const[n,a]=useState(!1),o=useRef(null),l=useRef("");useEffect((()=>{const n=window.SpeechRecognition||window.webkitSpeechRecognition;if(!n)return;const c=new n;c.continuous=t,c.interimResults=i,c.lang=e,c.onresult=e=>{let t="";for(let i=e.resultIndex;i<e.results.length;i++){const r=e.results[i][0].transcript.trim();e.results[i].isFinal&&(t+=r+" ")}t&&t!==l.current&&(l.current=t,r?.(t.trim()))},c.onend=()=>{a(!1),l.current="",s?.()},o.current=c}),[e,t,i,r,s]);return{isListening:n,start:()=>{o.current?.start(),a(!0)},stop:()=>{o.current?.stop(),a(!1)}}},sanitizeAutoComplete=e=>"boolean"==typeof e?e?"on":"off":e,TextArea$1=styled.textarea`
width: 100%;
padding: ${({theme:e})=>e.spacing.sm};
font-size: ${({theme:e})=>e.fonts.fontSize};
border: 1px solid ${({theme:e})=>e.colors.border};
border-radius: ${({theme:e})=>e.radii.md};
background-color: ${({theme:e})=>e.colors.surfaceEntry};
color: ${({theme:e})=>e.colors.textPrimary};
transition: ${({theme:e})=>e.transitions.default};
resize: none;
overflow-y: auto;
min-height: ${({minRows:e})=>24*e}px;
max-height: ${({maxRows:e})=>24*e}px;
&:hover {
border-color: ${({theme:e})=>e.colors.primaryHover};
}
&:focus {
border-color: ${({theme:e})=>e.colors.primarySelected};
outline: none;
}
&:disabled {
background-color: ${({theme:e})=>e.colors.buttonDisabled};
color: ${({theme:e})=>e.colors.textDisabled};
cursor: not-allowed;
}
`,InputWrapper$1=styled.div`
position: relative;
display: flex;
flex-direction: column;
width: ${({fullWidth:e})=>e?"100%":"auto"};
`,IconButton$1=styled.button`
position: absolute;
bottom: 10px;
right: 10px;
background: none;
border: none;
cursor: pointer;
color: ${({theme:e})=>e.colors.textSecondary};
transition: ${({theme:e})=>e.transitions.fast};
&:hover {
color: ${({theme:e})=>e.colors.primary};
}
`,CharCounter=styled.span`
position: absolute;
bottom: 10px;
right: 50px;
font-size: 12px;
color: ${({theme:e})=>e.colors.textSecondary};
`,MessageContainer=styled.div`
min-height: ${({theme:e})=>e.spacing.lg};
display: flex;
align-items: center;
`,ErrorMessage=styled(Typography)`
color: ${({theme:e})=>e.colors.error};
margin-top: ${({theme:e})=>e.spacing.xxs};
`,HelperMessage=styled(Typography)`
color: ${({theme:e})=>e.colors.textSecondary};
font-size: ${({theme:e})=>e.typography.caption.fontSize};
margin-top: ${({theme:e})=>e.spacing.xxs};
`,MultiLineField=({label:e,placeholder:t,minRows:i=3,maxRows:r=8,maxLength:s,dictation:n=!1,value:a="",overline:o,onChange:l,error:c,helperText:d,fullWidth:h,...u})=>{const[p,m]=useState(a||""),{isListening:f,start:g,stop:y}=useSpeechRecognition({lang:"en-US",onResult:e=>{m((t=>{const i=t.trim()+" "+e;return s?i.slice(0,s):i}))}});return jsxRuntimeExports.jsxs(InputWrapper$1,{fullWidth:h,children:[e&&jsxRuntimeExports.jsx(Typography,{as:"label",variant:"body",children:e}),o&&jsxRuntimeExports.jsx(Typography,{variant:"overline",colorScheme:"textSecondary",children:o}),jsxRuntimeExports.jsx(TextArea$1,{...u,placeholder:t,value:p,onChange:e=>{const t=e.target.value.slice(0,s);m(t),l?.(e)},minRows:i,maxRows:r,autoComplete:sanitizeAutoComplete(u.autoComplete)}),s&&jsxRuntimeExports.jsxs(CharCounter,{children:[p.length," / ",s]}),n&&jsxRuntimeExports.jsx(IconButton$1,{onClick:()=>{f?y():g()},title:f?"Stop Dictation":"Start Dictation",children:f?jsxRuntimeExports.jsx(X$1,{size:18}):jsxRuntimeExports.jsx(Mic,{size:18})}),jsxRuntimeExports.jsxs(MessageContainer,{children:[!c&&d&&jsxRuntimeExports.jsx(HelperMessage,{children:d}),c&&jsxRuntimeExports.jsx(ErrorMessage,{variant:"caption",colorScheme:"error",children:c})]})]})},formatPhoneNumber=e=>{const t=e.replace(/\D/g,"").slice(0,10);let i="";return t.length>0&&(i=`(${t.slice(0,3)}`),t.length>3&&(i+=`) ${t.slice(3,6)}`),t.length>6&&(i+=`-${t.slice(6,10)}`),i},validatePhoneNumber=e=>{const t=e.replace(/\D/g,"");return 0===t.length?null:t.length<10?"Phone number must be 10 digits":null},PhoneField=e=>{const[t,i]=useState(""),[r,s]=useState(null),[n,a]=useState(!1);return jsxRuntimeExports.jsx(TextField,{...e,type:"tel",icon:Phone,placeholder:"(123) 456-7890",value:formatPhoneNumber(t),maxLength:14,onChange:e=>{let t=e.target.value.replace(/\D/g,"");t.length<=10&&i(t),n&&s(validatePhoneNumber(t))},onBlur:()=>{a(!0),s(validatePhoneNumber(t))},error:n?r:void 0})},SearchField=({onChange:e,...t})=>{const[i,r]=useState("");return jsxRuntimeExports.jsx(TextField,{...t,type:"text",icon:i?X$1:Search,onIconClick:()=>r(""),debounce:300,value:i,onChange:t=>{r(t.target.value),e?.(t)}})},LayoutGroupContext=createContext({});
/**
* @license lucide-react v0.477.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/function useConstant(e){const t=useRef(null);return null===t.current&&(t.current=e()),t.current}const isBrowser="undefined"!=typeof window,useIsomorphicLayoutEffect=isBrowser?useLayoutEffect:useEffect,PresenceContext=createContext(null),MotionConfigContext=createContext({transformPagePoint:e=>e,isStatic:!1,reducedMotion:"never"});class PopChildMeasure extends React.Component{getSnapshotBeforeUpdate(e){const t=this.props.childRef.current;if(t&&e.isPresent&&!this.props.isPresent){const e=t.offsetParent,i=e instanceof HTMLElement&&e.offsetWidth||0,r=this.props.sizeRef.current;r.height=t.offsetHeight||0,r.width=t.offsetWidth||0,r.top=t.offsetTop,r.left=t.offsetLeft,r.right=i-r.width-r.left}return null}componentDidUpdate(){}render(){return this.props.children}}function PopChi