@xyd-js/components 0.1.0-xyd.5 → 0.1.0-xyd.7

package/src/layouts/LayoutPrimary/LayoutPrimary.tsx

@@ -0,0 +1,160 @@
+import React, {useEffect, useState} from "react"
+
+import {$layout, $page, $article, globalHeaderHeight} from "./LayoutPrimary.styles.tsx"
+
+export interface LayoutPrimaryProps {
+    header: React.ReactNode;
+    aside: React.ReactNode;
+    content: React.ReactNode;
+    contentNav: React.ReactNode;
+
+    subheader?: React.ReactNode;
+    layoutSize?: "large"
+}
+
+// TODO: move scroller to xyd-foo
+export function LayoutPrimary(props: LayoutPrimaryProps) {
+    const [isMobileNavOpen, setIsMobileNavOpen] = useState(false)
+
+    const {hideMainHeader} = props.subheader ? useSubHeader() : {hideMainHeader: false}
+
+    return <div className={$layout.host}>
+        <header className={` 
+            ${$layout.header}
+            ${props.subheader && $layout.header$$sub}
+            ${hideMainHeader && $layout.header$$hideMain}
+        `}>
+            <div className={$layout.primaryHeaderContent}>
+                {props.header}
+                <button
+                    className={$layout.hamburgerButton}
+                    onClick={() => setIsMobileNavOpen(!isMobileNavOpen)}
+                    aria-label="Toggle navigation menu"
+                >
+                    <div className={$layout.hamburgerIcon}>
+                        <span className={`${$layout.hamburgerLine} ${isMobileNavOpen ? $layout.hamburgerLine$$open : ''}`}/>
+                        <span className={`${$layout.hamburgerLine} ${isMobileNavOpen ? $layout.hamburgerLine$$open : ''}`}/>
+                        <span className={`${$layout.hamburgerLine} ${isMobileNavOpen ? $layout.hamburgerLine$$open : ''}`}/>
+                    </div>
+                </button>
+            </div>
+            {props.subheader}
+        </header>
+
+        {/* Mobile Drawer Sidebar */}
+        <div
+            className={`${$layout.overlay} ${isMobileNavOpen ? $layout.overlay$$visible : ''}`}
+            onClick={() => setIsMobileNavOpen(false)}
+        />
+        <aside className={`
+            ${$layout.mobileSidebar}
+            ${isMobileNavOpen ? $layout.mobileSidebar$$open : ''}
+        `}>
+            <div className={$layout.sidebarContent}>
+                {props.aside}
+            </div>
+            <button
+                className={$layout.closeButton}
+                onClick={() => setIsMobileNavOpen(false)}
+                aria-label="Close navigation menu"
+            >
+                <div className={$layout.closeIcon}/>
+            </button>
+        </aside>
+
+        <main className={`
+            ${$layout.main}
+            ${!hideMainHeader && props.subheader && $layout.main$$sub}
+        `}>
+            {/* Desktop Static Sidebar */}
+            <aside className={$layout.staticSidebar}>
+                {props.aside}
+            </aside>
+
+            <div className={$page.host}>
+                <div className={$page.scroll}>
+                    <div className={`
+                        ${$page.container}
+                        ${props.layoutSize == "large" && $page.container$$large}
+                    `}>
+                        <div className={`
+                            ${$page.articleContainer}
+                        `}>
+                            <article className={$article.host}>
+                                <section className={$article.content}>
+                                    {props.content}
+                                </section>
+                                {
+                                    props.contentNav && <nav className={`
+                                    ${$article.nav}
+                                `}>
+                                        {props.contentNav}
+                                    </nav>
+                                }
+                            </article>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+}
+
+// TODO: move to `xyd-foo` or somewhere else
+function useSubHeader() {
+    const [hideMainHeader, setHideMainHeader] = useState(false)
+    const [scrollTop, setScrollTop] = useState(0)
+    const [controlScrollPos, setControlScrollPos] = useState(0)
+
+    useEffect(() => {
+        if (scrollTop === controlScrollPos) {
+            return
+        }
+
+        const checkpoint = parseInt(globalHeaderHeight, 10) / 2
+        const diff = scrollTop - controlScrollPos
+        const reversePosDiff = Math.abs(scrollTop - controlScrollPos)
+
+        if (diff > checkpoint) {
+            setHideMainHeader(true)
+        } else if (reversePosDiff > checkpoint) {
+            setHideMainHeader(false)
+        }
+    }, [
+        scrollTop,
+        controlScrollPos,
+    ]);
+
+    function onScroll(e: Event) {
+        if (!(e.target instanceof HTMLElement)) {
+            return
+        }
+
+        const scroll = e.target?.scrollTop
+        setScrollTop(scroll)
+    }
+
+    function onScrollFinish(e: Event) {
+        if (!(e.target instanceof HTMLElement)) {
+            return
+        }
+
+        setControlScrollPos(e.target?.scrollTop)
+    }
+
+    // TODO: by ref?
+    // TODO: MOVE SOMEWHERE ELSE BECAUSE IT DECREASE PERFORMANCE (RERENDER)
+    useEffect(() => {
+        document.querySelector(`.${$page.scroll}`)?.addEventListener("scroll", onScroll)
+        document.querySelector(`.${$page.scroll}`)?.addEventListener("scrollend", onScrollFinish)
+
+        return () => {
+            document.querySelector(`.${$page.scroll}`)?.removeEventListener("scroll", onScroll)
+            document.querySelector(`.${$page.scroll}`)?.removeEventListener("scrollend", onScrollFinish)
+        }
+    }, []);
+
+    return {
+        hideMainHeader,
+    }
+}

package/src/layouts/LayoutPrimary/index.ts

@@ -0,0 +1,5 @@
+export {
+    LayoutPrimary
+} from "./LayoutPrimary";
+
+export type {LayoutPrimaryProps} from "./LayoutPrimary";

package/src/layouts/index.ts

@@ -1,7 +1,13 @@
 // TODO: move this pkg @xyd-js/layouts ?
 
+export {
+    LayoutPrimary,
+    type LayoutPrimaryProps
+} from "./LayoutPrimary";
+
 export {
     Layout
 } from "./Layout";
 
-export type {LayoutProps} from "./Layout";
+export type {LayoutProps} from "./Layout";
+

package/src/ui/Loader/Loader.styles.tsx

@@ -0,0 +1,52 @@
+import {css} from "@linaria/core";
+
+export const $loader = {
+    host: css`
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    `,
+    dots: css`
+        display: flex;
+        gap: 4px;
+    `,
+    dot: css`
+        width: 8px;
+        height: 8px;
+        background-color: currentColor;
+        border-radius: 50%;
+        animation: pulse 1.4s infinite ease-in-out;
+        opacity: 0.6;
+
+        &:nth-of-type(2) {
+            animation-delay: 0.2s;
+        }
+
+        &:nth-of-type(3) {
+            animation-delay: 0.4s;
+        }
+
+        @keyframes pulse {
+            0%, 80%, 100% { 
+                transform: scale(0.6);
+                opacity: 0.4;
+            }
+            40% { 
+                transform: scale(1);
+                opacity: 1;
+            }
+        }
+    `,
+    $$small: css`
+        .${$loader.dot} {
+            width: 6px;
+            height: 6px;
+        }
+    `,
+    $$large: css`
+        .${$loader.dot} {
+            width: 12px;
+            height: 12px;
+        }
+    `
+} 

package/src/ui/Loader/Loader.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import {$loader} from "./Loader.styles.tsx";
+
+export interface LoaderProps {
+  size?: "small" | "medium" | "large";
+  className?: string;
+}
+
+export function Loader({ size = "medium", className }: LoaderProps) {
+  return (
+    <div 
+      className={`
+        ${$loader.host}
+        ${size === "small" && $loader.$$small}
+        ${size === "large" && $loader.$$large}
+        ${className}
+      `}
+    >
+      <div className={$loader.dots}>
+        <div className={$loader.dot} />
+        <div className={$loader.dot} />
+        <div className={$loader.dot} />
+      </div>
+    </div>
+  );
+} 

package/src/ui/index.ts

@@ -0,0 +1 @@
+export * from "./Loader/Loader"; 

package/src/writer/Badge/Badge.styles.tsx

@@ -12,12 +12,12 @@ export const $badge = {
         text-transform: none;
     `,
     host$$warning: css`
-        color: #000;
-        background-color: #f8d047;
+        color: #434e4e;
+        background-color: #ffffe1
     `,
     host$$info: css`
         color: #fff;
-        background-color: #1FA6F2;
+        background-color: #1971a8;
     `,
     host$$sm: css`
         font-size: 12px;

package/src/writer/Details/Details.styles.tsx

@@ -38,6 +38,9 @@ export const $details = {
         cursor: pointer;
         padding: 20px 24px;
     `,
+    summary$$tertiary: css`
+        padding: 10px 24px;
+    `,
     summaryDeep: css`
         display: flex;
         align-items: center;
@@ -52,9 +55,19 @@ export const $details = {
         margin-left: 8px;
         font-weight: 700;
     `,
+    summaryDeep$text$$tertiary: css`
+        text-transform: none;
+        
+        code {
+            background: white;
+        }
+    `,
     label: css`
         flex: 1 1 auto;
     `,
+    label$$tertriary: css`
+        padding: 10px;
+    `,
     icon: css`
         flex: 0 0 auto;
         font-size: 16px;
@@ -72,5 +85,9 @@ export const $details = {
         code {
             background: white;
         }
+    `,
+    content$$tertiary: css`
+        background: white;
+        padding-top: 20px;
     `
 }

package/src/writer/Details/Details.tsx

@@ -5,24 +5,34 @@ import {$details} from "./Details.styles";
 interface BaseDetailsProps {
     children: React.ReactNode;
     label: string;
+
+    icon?: React.SVGProps<SVGSVGElement>;
+}
+
+interface TertiaryDetailsProps extends BaseDetailsProps {
+    kind: "tertiary";
+    title: string | React.ReactNode;
 }
 
 interface SecondaryDetailsProps extends BaseDetailsProps {
     kind: "secondary";
-    title: string;
+    title: string | React.ReactNode;
 }
 
 interface PrimaryDetailsProps extends BaseDetailsProps {
     kind?: "primary";
 }
 
-export type DetailsProps = PrimaryDetailsProps | SecondaryDetailsProps;
+export type DetailsProps = PrimaryDetailsProps | SecondaryDetailsProps | TertiaryDetailsProps
 
 export function Details(props: DetailsProps) {
-    let title = "";
     const {children, label} = props;
 
-    if (props.kind === "secondary") {
+    let title
+
+    const isDeepKind = ["secondary", "tertiary"].includes(props.kind || "");
+
+    if (isDeepKind && "title" in props) {
         title = props.title;
     }
 
@@ -30,23 +40,29 @@ export function Details(props: DetailsProps) {
 
     return <details className={`
         ${$details.host} 
-        ${kind === "secondary" && $details.host$$secondary}
+        ${isDeepKind && $details.host$$secondary}
    `}>
         <summary className={`
         ${$details.summary} 
-        ${kind === "secondary" && $details.summary$$secondary}
+        ${isDeepKind && $details.summary$$secondary}
+        ${kind === "tertiary" ? $details.summary$$tertiary : ""}
    `}>
             {kind === "primary" && <>
-                <$Icon/>
+                    {props.icon ? props.icon : <$Icon/>}
                 <$Label>
                     {label}
                 </$Label>
             </>}
-            {kind === "secondary" && <>
+            {isDeepKind && <>
                 <div>
                     <div className={$details.summaryDeep}>
-                        <$IconDeep/>
-                        <div className={$details.summaryDeep$text}>
+                        <>
+                            {props.icon ? props.icon : <$IconDeep/>}
+                        </>
+                        <div className={`
+                            ${$details.summaryDeep$text}
+                            ${$details.summaryDeep$text$$tertiary}
+                        `}>
                             {title}
                         </div>
                     </div>
@@ -60,7 +76,8 @@ export function Details(props: DetailsProps) {
 
         <div className={`
             ${$details.content}
-            ${kind === "secondary" && $details.content$$secondary}
+            ${isDeepKind && $details.content$$secondary}
+            ${kind === "tertiary" && $details.content$$tertiary}
         `}>
             {children}
         </div>

package/src/writer/Icon/index.tsx

@@ -339,4 +339,17 @@ export function IconAppTemplate() {
             </clipPath>
         </defs>
     </svg>
+}
+
+export function IconQuote() {
+    return <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="1em"
+        height="1em"
+        stroke="currentColor"
+        fill="currentColor"
+    >
+        <path d="M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3z"/>
+    </svg>
 }

package/src/writer/NavLinks/NavLinks.styles.ts

@@ -9,6 +9,7 @@ export const $navLinks = {
         justify-content: space-between;
         align-items: center;
         border-top-width: 1px;
+        border-color: #ececf1;
     `,
     link: css`
         display: flex;

package/src/writer/Table/TableV2.styles.tsx

@@ -0,0 +1,117 @@
+import {css} from "@linaria/core";
+
+const colors = {
+    primary: "#D1D5DB",
+    gray: {
+        50: "#F7F7F8",
+        100: "#ECECF1",
+        600: "#6E6E80",
+        800: "#353740",
+        900: "#202123"
+    }
+}
+
+const TableV2 = {
+    Host: css`
+        width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    `,
+    Table: css`
+        display: table;
+        width: 100%;
+        min-width: 640px; // Ensures table doesn't get too squished
+        border-collapse: separate;
+        border-spacing: 0;
+        border: 1px solid ${colors.gray[100]};
+        border-radius: 8px;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        margin-top: 1rem;
+        overflow: hidden;
+    `,
+    Thead: css`
+        background: ${colors.gray[50]};
+    `,
+    Th: css`
+        text-align: left;
+        font-weight: 500;
+        padding: 0.5rem 1rem;
+        color: ${colors.gray[800]};
+        vertical-align: middle;
+        border-bottom: 1px solid ${colors.gray[100]};
+        white-space: nowrap;
+
+        &:first-child {
+            width: 24rem;
+            max-width: 40%;
+            border-right: 1px solid ${colors.gray[100]};
+
+            @media (max-width: 768px) {
+                width: auto;
+                min-width: 12rem;
+            }
+        }
+
+        &.numeric {
+            text-align: right;
+            font-weight: 400;
+            min-width: 5rem;
+            
+            @media (max-width: 768px) {
+                min-width: 4rem;
+            }
+        }
+    `,
+    Tr: css`
+        &:not(:last-child) {
+            border-bottom: 1px solid ${colors.gray[100]};
+        }
+    `,
+    Td: css`
+        padding: 0.5rem 1rem;
+        vertical-align: middle;
+        border-top: 1px solid ${colors.gray[100]};
+
+        &:first-child {
+            border-right: 1px solid ${colors.gray[100]};
+        }
+
+        &.numeric {
+            text-align: right;
+        }
+
+        &.muted {
+            color: ${colors.gray[600]};
+        }
+
+        @media (max-width: 768px) {
+            padding: 0.5rem;
+        }
+    `,
+    Cell: css`
+        display: flex;
+        align-items: baseline;
+        width: 100%;
+        gap: 0.5rem;
+    `,
+    CellContent: css`
+        flex: 1;
+        text-align: right;
+    `,
+    ModelCell: css`
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        white-space: nowrap;
+        color: ${colors.gray[900]};
+        
+        @media (max-width: 768px) {
+            font-size: 0.8125rem;
+        }
+    `
+} 
+
+export default {
+    TableV2
+}

package/src/writer/Table/TableV2.tsx

@@ -0,0 +1,83 @@
+import React from "react"
+
+import cn from "./TableV2.styles";
+
+export interface TableV2Props {
+    children: React.ReactNode;
+    className?: string;
+}
+
+export function TableV2({children, className}: TableV2Props) {
+    return (
+        <div className={cn.TableV2.Host}>
+            <table className={`${cn.TableV2.Table} ${className || ''}`}>
+                {children}
+            </table>
+        </div>
+    );
+}
+
+export interface TableHeadProps {
+    children: React.ReactNode;
+}
+
+TableV2.Head = function TableHead({children}: TableHeadProps) {
+    return <thead className={cn.TableV2.Thead}>
+        {children}
+    </thead>
+}
+
+export interface TableThProps {
+    children: React.ReactNode;
+    numeric?: boolean;
+}
+
+TableV2.Th = function TableTh({children, numeric}: TableThProps) {
+    return <th className={`${cn.TableV2.Th} ${numeric ? 'numeric' : ''}`}>
+        {children}
+    </th>
+}
+
+export interface TableTrProps {
+    children: React.ReactNode;
+}
+
+TableV2.Tr = function TableTr({children}: TableTrProps) {
+    return <tr className={cn.TableV2.Tr}>
+        {children}
+    </tr>
+}
+
+export interface TableTdProps {
+    children: React.ReactNode;
+    numeric?: boolean;
+    muted?: boolean;
+}
+
+TableV2.Td = function TableTd({children, numeric, muted}: TableTdProps) {
+    return <td className={`${cn.TableV2.Td} ${numeric ? 'numeric' : ''} ${muted ? 'muted' : ''}`}>
+        {children}
+    </td>
+}
+
+export interface TableCellProps {
+    children: React.ReactNode;
+}
+
+TableV2.Cell = function TableCell({children}: TableCellProps) {
+    return <div className={cn.TableV2.Cell}>
+        <div className={cn.TableV2.CellContent}>
+            {children}
+        </div>
+    </div>
+}
+
+export interface TableModelCellProps {
+    children: React.ReactNode;
+}
+
+TableV2.ModelCell = function TableModelCell({children}: TableModelCellProps) {
+    return <div className={cn.TableV2.ModelCell}>
+        {children}
+    </div>
+} 

package/src/writer/Table/index.ts

@@ -8,3 +8,7 @@ export type {
     TableTrProps,
     TableTdProps
 } from "./Table"
+
+export {
+    TableV2
+} from "./TableV2"

package/dist/CTABanner-BytLRAOg.js

@@ -1,2 +0,0 @@
-import e from"react";var a="hn2r3b2",n="hgvnekf";function t(t){var r=t.children,c=t.kind;return e.createElement("button",{className:"\n        ".concat(a,"\n        ").concat("secondary"===c&&n,"\n    ")},r)}var r="h1vbgqbd",c="c1qluffv",l="h7zyorj",s="h10nnuqu";function m(a){var n=a.children;return e.createElement("div",{className:r},e.createElement("div",{className:c},e.createElement("div",{className:l},n)))}var i="h1xgyvqe",v="t1rx1fna",u="s9nduqh";m.Heading=function(a){var n=a.title,t=a.subtitle,r=a.headingEffect;return e.createElement("div",{className:i},e.createElement("h1",{className:v},r?e.createElement("span",{className:s},n):n),e.createElement("p",{className:u},t))};var o="hth6on8";m.ButtonGroup=function(a){var n=a.children;return e.createElement("div",{className:o},n)};export{t as B,m as C};
-//# sourceMappingURL=CTABanner-BytLRAOg.js.map

package/dist/CTABanner-BytLRAOg.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CTABanner-BytLRAOg.js","sources":["../src/brand/Button/Button.tsx","../src/brand/CTABanner/CTABanner.tsx"],"sourcesContent":["import React from \"react\";\nimport {css} from \"@linaria/core\";\n\nconst $button = {\n    host: css`\n        display: inline-block;\n        border: 1px solid transparent;\n        text-align: center;\n        font-weight: 600;\n        white-space: nowrap;\n        border-radius: 20px;\n        padding: 0 20px;\n        line-height: 38px;\n        font-size: 14px;\n        border-color: transparent;\n        color: #3c3c43;\n        background-color: #f7f7f8;\n\n        transition: color .25s, border-color .25s, background-color .25s;\n\n        &:hover {\n            background: #e3e3e6;\n        }\n    `,\n\n    host$$secondary: css`\n        color: #fff;\n        background-color: rgb(112, 81, 212);\n\n        &:hover {\n            background-color: rgb(95, 59, 211)\n        }\n    `\n}\n\nexport interface ButtonProps {\n    children: React.ReactNode\n    kind?: \"secondary\"\n}\n\nexport function Button({children, kind}: ButtonProps) {\n    return <button className={`\n        ${$button.host}\n        ${kind === \"secondary\" && $button.host$$secondary}\n    `}>\n        {children}\n    </button>\n}","import React from \"react\"\nimport {css} from \"@linaria/core\";\n\nconst $banner = {\n    host: css`\n        padding: 20px;\n    `,\n    container: css`\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 80px;\n    `,\n    hero: css`\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        gap: 40px;\n    `,\n    headingEffect: css`\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n\n        background: -webkit-linear-gradient(\n                120deg,\n                var(--headingEffect-color-tertiary) 20%,\n                var(--headingEffect-color-tertiary) 30%,\n                var(--headingEffect-color-secondary) 60%,\n                var(--headingEffect-color-primary) 75%,\n                var(--headingEffect-color-primary) 85%\n        );\n        background-clip: text;\n        -webkit-text-fill-color: transparent;\n        animation: wave 5s infinite;\n        background-size: 200% 200%;\n        background-position: 50% 50%; // Start with all colors visible\n\n        @keyframes wave {\n            0% {\n                background-position: 50% 50%;\n            }\n            50% {\n                background-position: 0% 50%;\n            }\n            100% {\n                background-position: 50% 50%;\n            }\n        }\n    `\n}\n\nexport interface CTABannerProps {\n    children: React.ReactNode\n}\n\nexport function CTABanner({children}: CTABannerProps) {\n    return <div className={$banner.host}>\n        <div className={$banner.container}>\n            <div className={$banner.hero}>\n                {children}\n            </div>\n        </div>\n    </div>\n}\n\nconst $heading = {\n    host: css`\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n    `,\n    title: css`\n        font-size: 76px;\n        font-weight: 900;\n        text-align: center;\n        letter-spacing: 3px;\n        margin: 0;\n    `,\n    subtitle: css`\n        color: #3c3c43;\n        font-size: 46px;\n        font-weight: 600;\n        text-align: center;\n    `\n}\n\nexport interface CTABannerHeadingProps {\n    title: string\n    subtitle: string | React.ReactNode\n    headingEffect?: boolean\n}\n\nCTABanner.Heading = function CTABannerHeading({title, subtitle, headingEffect}: CTABannerHeadingProps) {\n    return <div className={$heading.host}>\n        <h1 className={$heading.title}>\n            {\n                headingEffect\n                    ? <span className={$banner.headingEffect}>\n                        {title}\n                      </span>\n                    : title\n            }\n        </h1>\n        <p className={$heading.subtitle}>\n            {subtitle}\n        </p>\n    </div>\n}\n\nconst $btnGroup = {\n    host: css`\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 10px;\n    `\n}\n\nCTABanner.ButtonGroup = function CTABannerButtonGroup({children}) {\n    return <div className={$btnGroup.host}>\n        {children}\n    </div>\n}"],"names":["$button","Button","children","_ref","kind","React","createElement","className","concat","$banner","CTABanner","$heading","Heading","CTABannerHeading","title","_ref2","subtitle","headingEffect","$btnGroup","ButtonGroup","CTABannerButtonGroup"],"mappings":"qBAGA,IAAMA,EAoBD,UApBCA,EAsBa,mBAeHC,EAAMA,GAA8B,IAA5BC,EAAQC,EAARD,SAAUE,EAAAA,EAAAA,KAC9B,OAAOC,EAAAC,cAAA,SAAA,CAAQC,UAASC,aAAAA,OAClBR,EAAY,cAAAQ,OACH,cAATJ,GAAwBJ,EAAuB,WAEhDE,EAET,CC5CA,IAAMO,EAGD,WAHCA,EASD,WATCA,EAgBD,UAhBCA,EAiBW,WAsCD,SAAAC,EAASA,GAA2B,IAAzBR,EAAAA,EAAAA,SACvB,OAAOG,EAAKC,cAAA,MAAA,CAAAC,UAAWE,GACnBJ,EAAAC,cAAA,MAAA,CAAKC,UAAWE,GACZJ,EAAKC,cAAA,MAAA,CAAAC,UAAWE,GACXP,IAIjB,CAEA,IAAMS,EAMD,WANCA,EAaD,WAbCA,EAcM,UAcZD,EAAUE,QAAU,SAAyBC,GAAwD,IAAtDC,EAAKC,EAALD,MAAOE,EAAQD,EAARC,SAAUC,EAAAA,EAAAA,cAC5D,OAAOZ,EAAKC,cAAA,MAAA,CAAAC,UAAWI,GACnBN,EAAAC,cAAA,KAAA,CAAIC,UAAWI,GAEPM,EACMZ,wBAAME,UAAWE,GACdK,GAEHA,GAGdT,EAAGC,cAAA,IAAA,CAAAC,UAAWI,GACTK,GAGb,EAEA,IAAME,EACE,UAQRR,EAAUS,YAAc,SAA6BC,GAAW,IAATlB,EAAAA,EAAAA,SACnD,OAAOG,EAAAC,cAAA,MAAA,CAAKC,UAAWW,GAClBhB,EAET"}