UNPKG

@frank-auth/react

Version:

Flexible and customizable React UI components for Frank Authentication

github.com/frank-auth/react

frank-auth/react

1 lines • 17.4 kB
1
{"version":3,"file":"sign-in-card.cjs","sources":["../../../../../src/components/auth/sign-in/sign-in-card.tsx"],"sourcesContent":["/**\n * @frank-auth/react - Sign In Card Component\n *\n * Card wrapper for sign-in form with customizable styling and layout.\n */\n\n\"use client\";\n\nimport {\n\tCard,\n\tCardBody,\n\tCardFooter,\n\tCardHeader,\n\tDivider,\n} from \"@/components/ui\";\nimport { motion } from \"framer-motion\";\nimport type React from \"react\";\n\nimport { useConfig } from \"@/hooks\";\nimport { useTheme } from \"@/hooks\";\nimport { SignInForm } from \"./sign-in-form\";\n\n// ============================================================================\n// Sign In Card Types\n// ============================================================================\n\nexport interface SignInCardProps {\n\t/**\n\t * Card variant\n\t */\n\tvariant?: \"shadow\" | \"bordered\" | \"flat\";\n\n\t/**\n\t * Custom className\n\t */\n\tclassName?: string;\n\n\t/**\n\t * Card padding\n\t */\n\tpadding?: \"none\" | \"sm\" | \"md\" | \"lg\";\n\n\t/**\n\t * Card radius\n\t */\n\tradius?: \"none\" | \"sm\" | \"md\" | \"lg\";\n\n\t/**\n\t * Whether card has shadow\n\t */\n\tshadow?: \"none\" | \"sm\" | \"md\" | \"lg\";\n\n\t/**\n\t * Whether card is blurred\n\t */\n\tisBlurred?: boolean;\n\n\t/**\n\t * Sign-in methods to show\n\t */\n\tmethods?: (\"password\" | \"oauth\" | \"magic-link\" | \"passkey\" | \"sso\")[];\n\n\t/**\n\t * Initial email value\n\t */\n\temail?: string;\n\n\t/**\n\t * Initial organization ID\n\t */\n\torganizationId?: string;\n\n\t/**\n\t * Redirect URL after successful sign-in\n\t */\n\tredirectUrl?: string;\n\n\t/**\n\t * Success callback\n\t */\n\tonSuccess?: (result: any) => void;\n\n\t/**\n\t * Error callback\n\t */\n\tonError?: (error: Error) => void;\n\n\t/**\n\t * Custom title\n\t */\n\ttitle?: string;\n\n\t/**\n\t * Custom subtitle\n\t */\n\tsubtitle?: string;\n\n\t/**\n\t * Form size\n\t */\n\tsize?: \"sm\" | \"md\" | \"lg\";\n\n\t/**\n\t * Whether to show branding\n\t */\n\tshowBranding?: boolean;\n\n\t/**\n\t * Disabled state\n\t */\n\tdisabled?: boolean;\n\n\t/**\n\t * Custom footer content\n\t */\n\tfooter?: React.ReactNode;\n\n\t/**\n\t * Custom header content\n\t */\n\theader?: React.ReactNode;\n\n\t/**\n\t * Card background image\n\t */\n\tbackgroundImage?: string;\n\n\t/**\n\t * Card background gradient\n\t */\n\tbackgroundGradient?: string;\n\n\t/**\n\t * Animation on mount\n\t */\n\tanimated?: boolean;\n\n\t/**\n\t * Card max width\n\t */\n\tmaxWidth?: string | number;\n\n\t/**\n\t * Center the card\n\t */\n\tcentered?: boolean;\n\n\t/**\n\t * Full height card\n\t */\n\tfullHeight?: boolean;\n\n\t/**\n\t * Show organization branding\n\t */\n\tshowOrganizationBranding?: boolean;\n\n\t/**\n\t * Custom card header\n\t */\n\tcardHeader?: React.ReactNode;\n\n\t/**\n\t * Custom card footer\n\t */\n\tcardFooter?: React.ReactNode;\n\n\t/**\n\t * Hide card header\n\t */\n\thideCardHeader?: boolean;\n\n\t/**\n\t * Hide card footer\n\t */\n\thideCardFooter?: boolean;\n}\n\n// ============================================================================\n// Sign In Card Component\n// ============================================================================\n\nexport function SignInCard({\n\tvariant = \"shadow\",\n\tclassName = \"\",\n\tpadding = \"lg\",\n\tradius = \"lg\",\n\tshadow = \"md\",\n\tisBlurred = false,\n\tmethods = [\"password\", \"oauth\", \"magic-link\"],\n\temail,\n\torganizationId,\n\tredirectUrl,\n\tonSuccess,\n\tonError,\n\ttitle,\n\tsubtitle,\n\tsize = \"md\",\n\tshowBranding = true,\n\tdisabled = false,\n\tfooter,\n\theader,\n\tbackgroundImage,\n\tbackgroundGradient,\n\tanimated = true,\n\tmaxWidth = 400,\n\tcentered = false,\n\tfullHeight = false,\n\tshowOrganizationBranding = true,\n\tcardHeader,\n\tcardFooter,\n\thideCardHeader = false,\n\thideCardFooter = false,\n}: SignInCardProps) {\n\tconst { components, organizationSettings } = useConfig();\n\tconst { getColorValue } = useTheme();\n\n\t// Custom component override\n\tconst CustomSignInCard = components.SignInCard;\n\tif (CustomSignInCard) {\n\t\treturn (\n\t\t\t<CustomSignInCard\n\t\t\t\t{...{\n\t\t\t\t\tvariant,\n\t\t\t\t\tclassName,\n\t\t\t\t\tpadding,\n\t\t\t\t\tradius,\n\t\t\t\t\tshadow,\n\t\t\t\t\tisBlurred,\n\t\t\t\t\tmethods,\n\t\t\t\t\temail,\n\t\t\t\t\torganizationId,\n\t\t\t\t\tredirectUrl,\n\t\t\t\t\tonSuccess,\n\t\t\t\t\tonError,\n\t\t\t\t\ttitle,\n\t\t\t\t\tsubtitle,\n\t\t\t\t\tsize,\n\t\t\t\t\tshowBranding,\n\t\t\t\t\tdisabled,\n\t\t\t\t\tfooter,\n\t\t\t\t\theader,\n\t\t\t\t\tbackgroundImage,\n\t\t\t\t\tbackgroundGradient,\n\t\t\t\t\tanimated,\n\t\t\t\t\tmaxWidth,\n\t\t\t\t\tcentered,\n\t\t\t\t\tfullHeight,\n\t\t\t\t\tshowOrganizationBranding,\n\t\t\t\t\tcardHeader,\n\t\t\t\t\tcardFooter,\n\t\t\t\t\thideCardHeader,\n\t\t\t\t\thideCardFooter,\n\t\t\t\t}}\n\t\t\t/>\n\t\t);\n\t}\n\n\t// Animation variants\n\tconst cardVariants = {\n\t\thidden: {\n\t\t\topacity: 0,\n\t\t\ty: 20,\n\t\t\tscale: 0.95,\n\t\t},\n\t\tvisible: {\n\t\t\topacity: 1,\n\t\t\ty: 0,\n\t\t\tscale: 1,\n\t\t\ttransition: {\n\t\t\t\tduration: 0.3,\n\t\t\t\tease: \"easeOut\",\n\t\t\t},\n\t\t},\n\t};\n\n\t// Card styles\n\tconst cardStyles: React.CSSProperties = {};\n\n\tif (backgroundImage) {\n\t\tcardStyles.backgroundImage = `url(${backgroundImage})`;\n\t\tcardStyles.backgroundSize = \"cover\";\n\t\tcardStyles.backgroundPosition = \"center\";\n\t}\n\n\tif (backgroundGradient) {\n\t\tcardStyles.background = backgroundGradient;\n\t}\n\n\tif (maxWidth) {\n\t\tcardStyles.maxWidth =\n\t\t\ttypeof maxWidth === \"number\" ? `${maxWidth}px` : maxWidth;\n\t}\n\n\t// Organization branding\n\tconst orgBranding =\n\t\tshowOrganizationBranding && organizationSettings?.branding;\n\n\t// Container classes\n\tconst containerClasses = [\n\t\tcentered ? \"flex items-center justify-center min-h-screen p-4\" : \"\",\n\t\tfullHeight ? \"h-full\" : \"\",\n\t]\n\t\t.filter(Boolean)\n\t\t.join(\" \");\n\n\t// Card component\n\tconst cardContent = (\n\t\t<Card\n\t\t\tclassName={`${className} ${centered ? \"w-full\" : \"\"}`}\n\t\t\tstyle={cardStyles}\n\t\t\tshadow={shadow}\n\t\t\tradius={radius}\n\t\t\tisBlurred={isBlurred}\n\t\t>\n\t\t\t{/* Card Header */}\n\t\t\t{!hideCardHeader && (cardHeader || title || subtitle || orgBranding) && (\n\t\t\t\t<CardHeader\n\t\t\t\t\tclassName={`flex flex-col items-center text-center gap-2 p-${padding}`}\n\t\t\t\t>\n\t\t\t\t\t{cardHeader || (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{/* Organization Logo */}\n\t\t\t\t\t\t\t{orgBranding?.logoUrl && (\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tsrc={orgBranding.logoUrl}\n\t\t\t\t\t\t\t\t\talt=\"Organization Logo\"\n\t\t\t\t\t\t\t\t\tclassName=\"h-12 w-auto mb-2\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t{/* Title */}\n\t\t\t\t\t\t\t{title && (\n\t\t\t\t\t\t\t\t<h1 className=\"text-2xl font-bold text-foreground\">{title}</h1>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t{/* Subtitle */}\n\t\t\t\t\t\t\t{subtitle && (\n\t\t\t\t\t\t\t\t<p className=\"text-default-500 text-sm max-w-sm\">{subtitle}</p>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t{/* Custom Header */}\n\t\t\t\t\t\t\t{header}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</CardHeader>\n\t\t\t)}\n\n\t\t\t{/* Divider */}\n\t\t\t{!hideCardHeader &&\n\t\t\t\t(cardHeader || title || subtitle || orgBranding) &&\n\t\t\t\t!hideCardFooter && <Divider />}\n\n\t\t\t{/* Card Body */}\n\t\t\t<CardBody className={`p-${padding}`}>\n\t\t\t\t<SignInForm\n\t\t\t\t\tmethods={methods}\n\t\t\t\t\temail={email}\n\t\t\t\t\torganizationId={organizationId}\n\t\t\t\t\tredirectUrl={redirectUrl}\n\t\t\t\t\tonSuccess={onSuccess}\n\t\t\t\t\tonError={onError}\n\t\t\t\t\ttitle={hideCardHeader ? title : undefined}\n\t\t\t\t\tsubtitle={hideCardHeader ? subtitle : undefined}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tshowBranding={hideCardHeader ? showBranding : false}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tvariant=\"minimal\"\n\t\t\t\t\tclassName=\"space-y-4\"\n\t\t\t\t/>\n\t\t\t</CardBody>\n\n\t\t\t{/* Card Footer */}\n\t\t\t{!hideCardFooter && (cardFooter || footer) && (\n\t\t\t\t<>\n\t\t\t\t\t<Divider />\n\t\t\t\t\t<CardFooter className={`p-${padding} text-center`}>\n\t\t\t\t\t\t{cardFooter || footer}\n\t\t\t\t\t</CardFooter>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</Card>\n\t);\n\n\t// Wrap with animation if enabled\n\tconst animatedCard = animated ? (\n\t\t<motion.div\n\t\t\tinitial=\"hidden\"\n\t\t\tanimate=\"visible\"\n\t\t\tvariants={cardVariants}\n\t\t\tstyle={{ maxWidth }}\n\t\t\tclassName={centered ? \"w-full\" : \"\"}\n\t\t>\n\t\t\t{cardContent}\n\t\t</motion.div>\n\t) : (\n\t\t<div style={{ maxWidth }} className={centered ? \"w-full\" : \"\"}>\n\t\t\t{cardContent}\n\t\t</div>\n\t);\n\n\t// Wrap with container if centered\n\treturn centered ? (\n\t\t<div className={containerClasses}>{animatedCard}</div>\n\t) : (\n\t\tanimatedCard\n\t);\n}\n\n// ============================================================================\n// Sign In Card Variants\n// ============================================================================\n\n/**\n * Bordered Sign In Card\n */\nexport function BorderedSignInCard(props: Omit<SignInCardProps, \"variant\">) {\n\treturn <SignInCard {...props} variant=\"bordered\" />;\n}\n\n/**\n * Flat Sign In Card\n */\nexport function FlatSignInCard(props: Omit<SignInCardProps, \"variant\">) {\n\treturn <SignInCard {...props} variant=\"flat\" />;\n}\n\n/**\n * Compact Sign In Card\n */\nexport function CompactSignInCard(props: SignInCardProps) {\n\treturn <SignInCard {...props} padding=\"sm\" size=\"sm\" maxWidth={320} />;\n}\n\n/**\n * Large Sign In Card\n */\nexport function LargeSignInCard(props: SignInCardProps) {\n\treturn <SignInCard {...props} padding=\"lg\" size=\"lg\" maxWidth={500} />;\n}\n\n/**\n * Centered Sign In Card (for full-page layouts)\n */\nexport function CenteredSignInCard(props: Omit<SignInCardProps, \"centered\">) {\n\treturn <SignInCard {...props} centered />;\n}\n\n/**\n * Blurred Glass Sign In Card\n */\nexport function GlassSignInCard(props: SignInCardProps) {\n\treturn (\n\t\t<SignInCard\n\t\t\t{...props}\n\t\t\tvariant=\"shadow\"\n\t\t\tisBlurred\n\t\t\tbackgroundGradient=\"rgba(255, 255, 255, 0.1)\"\n\t\t\tclassName=\"backdrop-blur-md border border-white/20\"\n\t\t/>\n\t);\n}\n\n/**\n * Gradient Sign In Card\n */\nexport function GradientSignInCard({\n\tbackgroundGradient = \"linear-gradient(135deg, #667eea 0%, #764ba2 100%)\",\n\t...props\n}: SignInCardProps) {\n\treturn (\n\t\t<SignInCard\n\t\t\t{...props}\n\t\t\tvariant=\"shadow\"\n\t\t\tbackgroundGradient={backgroundGradient}\n\t\t\tclassName=\"text-white\"\n\t\t/>\n\t);\n}\n\n/**\n * Minimal Sign In Card\n */\nexport function MinimalSignInCard(props: SignInCardProps) {\n\treturn (\n\t\t<SignInCard\n\t\t\t{...props}\n\t\t\tvariant=\"flat\"\n\t\t\tshadow=\"none\"\n\t\t\tpadding=\"md\"\n\t\t\thideCardHeader\n\t\t\thideCardFooter\n\t\t/>\n\t);\n}\n\n// ============================================================================\n// Branded Sign In Card\n// ============================================================================\n\nexport interface BrandedSignInCardProps extends SignInCardProps {\n\t/**\n\t * Brand logo URL\n\t */\n\tlogo?: string;\n\n\t/**\n\t * Brand name\n\t */\n\tbrandName?: string;\n\n\t/**\n\t * Brand colors\n\t */\n\tbrandColors?: {\n\t\tprimary?: string;\n\t\tsecondary?: string;\n\t\taccent?: string;\n\t};\n\n\t/**\n\t * Brand fonts\n\t */\n\tbrandFonts?: {\n\t\theading?: string;\n\t\tbody?: string;\n\t};\n}\n\nexport function BrandedSignInCard({\n\tlogo,\n\tbrandName,\n\tbrandColors,\n\tbrandFonts,\n\ttitle,\n\tsubtitle,\n\tclassName = \"\",\n\tcardHeader,\n\t...props\n}: BrandedSignInCardProps) {\n\tconst customHeader = cardHeader || (\n\t\t<div className=\"flex flex-col items-center gap-4\">\n\t\t\t{logo && (\n\t\t\t\t<img src={logo} alt={`${brandName} Logo`} className=\"h-16 w-auto\" />\n\t\t\t)}\n\n\t\t\t{title && (\n\t\t\t\t<h1\n\t\t\t\t\tclassName=\"text-3xl font-bold\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: brandColors?.primary,\n\t\t\t\t\t\tfontFamily: brandFonts?.heading,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{title}\n\t\t\t\t</h1>\n\t\t\t)}\n\n\t\t\t{subtitle && (\n\t\t\t\t<p\n\t\t\t\t\tclassName=\"text-default-500 max-w-sm text-center\"\n\t\t\t\t\tstyle={{ fontFamily: brandFonts?.body }}\n\t\t\t\t>\n\t\t\t\t\t{subtitle}\n\t\t\t\t</p>\n\t\t\t)}\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<SignInCard\n\t\t\t{...props}\n\t\t\ttitle={undefined} // Override since we handle in custom header\n\t\t\tsubtitle={undefined}\n\t\t\tcardHeader={customHeader}\n\t\t\tclassName={`${className} branded-card`}\n\t\t\tstyle={\n\t\t\t\t{\n\t\t\t\t\t\"--brand-primary\": brandColors?.primary,\n\t\t\t\t\t\"--brand-secondary\": brandColors?.secondary,\n\t\t\t\t\t\"--brand-accent\": brandColors?.accent,\n\t\t\t\t} as React.CSSProperties\n\t\t\t}\n\t\t/>\n\t);\n}\n\n// ============================================================================\n// Organization-themed Sign In Card\n// ============================================================================\n\nexport function OrganizationSignInCard(props: SignInCardProps) {\n\tconst { organizationSettings } = useConfig();\n\n\tif (!organizationSettings) {\n\t\treturn <SignInCard {...props} />;\n\t}\n\n\tconst branding = organizationSettings.branding;\n\n\treturn (\n\t\t<BrandedSignInCard\n\t\t\t{...props}\n\t\t\tlogo={branding?.logoUrl}\n\t\t\tbrandName={organizationSettings.name}\n\t\t\tbrandColors={{\n\t\t\t\tprimary: branding?.primaryColor,\n\t\t\t\tsecondary: branding?.secondaryColor,\n\t\t\t}}\n\t\t\tbackgroundGradient={\n\t\t\t\tbranding?.primaryColor\n\t\t\t\t\t? `linear-gradient(135deg, ${branding.primaryColor}20 0%, ${branding.secondaryColor || branding.primaryColor}20 100%)`\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t);\n}\n\n// ============================================================================\n// Export\n// ============================================================================\n\nexport default SignInCard;\n"],"names":["SignInCard","variant","className","padding","radius","shadow","isBlurred","methods","email","organizationId","redirectUrl","onSuccess","onError","title","subtitle","size","showBranding","disabled","footer","header","backgroundImage","backgroundGradient","animated","maxWidth","centered","fullHeight","showOrganizationBranding","cardHeader","cardFooter","hideCardHeader","hideCardFooter","components","organizationSettings","useConfig","getColorValue","useTheme","CustomSignInCard","jsx","cardVariants","cardStyles","orgBranding","containerClasses","cardContent","jsxs","Card","CardHeader","Fragment","Divider","CardBody","SignInForm","CardFooter","animatedCard","motion"],"mappings":"oXAsLO,SAASA,EAAW,CAC1B,QAAAC,EAAU,SACV,UAAAC,EAAY,GACZ,QAAAC,EAAU,KACV,OAAAC,EAAS,KACT,OAAAC,EAAS,KACT,UAAAC,EAAY,GACZ,QAAAC,EAAU,CAAC,WAAY,QAAS,YAAY,EAC5C,MAAAC,EACA,eAAAC,EACA,YAAAC,EACA,UAAAC,EACA,QAAAC,EACA,MAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,KACP,aAAAC,EAAe,GACf,SAAAC,EAAW,GACX,OAAAC,EACA,OAAAC,EACA,gBAAAC,EACA,mBAAAC,EACA,SAAAC,EAAW,GACX,SAAAC,EAAW,IACX,SAAAC,EAAW,GACX,WAAAC,EAAa,GACb,yBAAAC,EAA2B,GAC3B,WAAAC,EACA,WAAAC,EACA,eAAAC,EAAiB,GACjB,eAAAC,EAAiB,EAClB,EAAoB,CACnB,KAAM,CAAE,WAAAC,EAAY,qBAAAC,CAAqB,EAAIC,YAAU,EACjD,CAAE,cAAAC,CAAc,EAAIC,WAAS,EAG7BC,EAAmBL,EAAW,WACpC,GAAIK,EAEF,OAAAC,EAAA,IAACD,EAAA,CAEC,QAAAnC,EACA,UAAAC,EACA,QAAAC,EACA,OAAAC,EACA,OAAAC,EACA,UAAAC,EACA,QAAAC,EACA,MAAAC,EACA,eAAAC,EACA,YAAAC,EACA,UAAAC,EACA,QAAAC,EACA,MAAAC,EACA,SAAAC,EACA,KAAAC,EACA,aAAAC,EACA,SAAAC,EACA,OAAAC,EACA,OAAAC,EACA,gBAAAC,EACA,mBAAAC,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,WAAAC,EACA,yBAAAC,EACA,WAAAC,EACA,WAAAC,EACA,eAAAC,EACA,eAAAC,CACD,CACD,EAKF,MAAMQ,EAAe,CACpB,OAAQ,CACP,QAAS,EACT,EAAG,GACH,MAAO,GACR,EACA,QAAS,CACR,QAAS,EACT,EAAG,EACH,MAAO,EACP,WAAY,CACX,SAAU,GACV,KAAM,SAAA,CACP,CAEF,EAGMC,EAAkC,CAAC,EAErCnB,IACQmB,EAAA,gBAAkB,OAAOnB,CAAe,IACnDmB,EAAW,eAAiB,QAC5BA,EAAW,mBAAqB,UAG7BlB,IACHkB,EAAW,WAAalB,GAGrBE,IACHgB,EAAW,SACV,OAAOhB,GAAa,SAAW,GAAGA,CAAQ,KAAOA,GAI7C,MAAAiB,EACLd,GAA4BM,GAAsB,SAG7CS,EAAmB,CACxBjB,EAAW,oDAAsD,GACjEC,EAAa,SAAW,EAEvB,EAAA,OAAO,OAAO,EACd,KAAK,GAAG,EAGJiB,EACLC,EAAA,KAACC,EAAA,KAAA,CACA,UAAW,GAAG1C,CAAS,IAAIsB,EAAW,SAAW,EAAE,GACnD,MAAOe,EACP,OAAAlC,EACA,OAAAD,EACA,UAAAE,EAGC,SAAA,CAAA,CAACuB,IAAmBF,GAAcd,GAASC,GAAY0B,IACvDH,EAAA,IAACQ,EAAA,WAAA,CACA,UAAW,kDAAkD1C,CAAO,GAEnE,YAGEwC,EAAAA,KAAAG,EAAA,SAAA,CAAA,SAAA,CAAAN,GAAa,SACbH,EAAA,IAAC,MAAA,CACA,IAAKG,EAAY,QACjB,IAAI,oBACJ,UAAU,kBAAA,CACX,EAIA3B,GACAwB,EAAA,IAAC,KAAG,CAAA,UAAU,qCAAsC,SAAMxB,EAAA,EAI1DC,GACAuB,EAAA,IAAC,IAAE,CAAA,UAAU,oCAAqC,SAASvB,EAAA,EAI3DK,CAAA,CACF,CAAA,CAAA,CAEF,EAIA,CAACU,IACAF,GAAcd,GAASC,GAAY0B,IACpC,CAACV,GAAkBO,EAAAA,IAACU,EAAQ,QAAA,EAAA,EAG5BV,MAAAW,EAAAA,SAAA,CAAS,UAAW,KAAK7C,CAAO,GAChC,SAAAkC,EAAA,IAACY,EAAA,WAAA,CACA,QAAA1C,EACA,MAAAC,EACA,eAAAC,EACA,YAAAC,EACA,UAAAC,EACA,QAAAC,EACA,MAAOiB,EAAiBhB,EAAQ,OAChC,SAAUgB,EAAiBf,EAAW,OACtC,KAAAC,EACA,aAAcc,EAAiBb,EAAe,GAC9C,SAAAC,EACA,QAAQ,UACR,UAAU,WAAA,CAAA,EAEZ,EAGC,CAACa,IAAmBF,GAAcV,IAEjCyB,EAAAA,KAAAG,EAAAA,SAAA,CAAA,SAAA,CAAAT,EAAA,IAACU,EAAQ,QAAA,EAAA,QACRG,EAAW,WAAA,CAAA,UAAW,KAAK/C,CAAO,eACjC,YAAce,CAChB,CAAA,CAAA,CACD,CAAA,CAAA,CAAA,CAEF,EAIKiC,EAAe7B,EACpBe,EAAA,IAACe,EAAAA,OAAO,IAAP,CACA,QAAQ,SACR,QAAQ,UACR,SAAUd,EACV,MAAO,CAAE,SAAAf,CAAS,EAClB,UAAWC,EAAW,SAAW,GAEhC,SAAAkB,CAAA,CACF,EAECL,EAAA,IAAA,MAAA,CAAI,MAAO,CAAE,SAAAd,CAAS,EAAG,UAAWC,EAAW,SAAW,GACzD,SACFkB,CAAA,CAAA,EAID,OAAOlB,EACLa,MAAA,MAAA,CAAI,UAAWI,EAAmB,UAAa,CAAA,EAEhDU,CAEF"}