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

package/dist/index-jxd3nv2J.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-jxd3nv2J.js","sources":["../src/writer/Badge/Badge.styles.tsx","../src/writer/Badge/Badge.tsx","../src/writer/Blockquote/Blockquote.styles.tsx","../src/writer/Blockquote/Blockquote.tsx","../src/writer/Callout/Callout.styles.tsx","../src/writer/Callout/Callout.tsx","../src/writer/Code/Code.styles.tsx","../src/writer/Code/Code.tsx","../src/writer/Details/Details.styles.tsx","../src/writer/Details/Details.tsx","../src/writer/Heading/Heading.styles.tsx","../src/writer/Heading/Heading.tsx","../src/writer/Hr/Hr.styles.tsx","../src/writer/Hr/Hr.tsx","../src/writer/Icon/index.tsx"],"sourcesContent":["import {css} from \"@linaria/core\";\n\nexport const $badge = {\n    host: css`\n        display: inline-flex;\n        align-items: center;\n        line-height: 1rem;\n        font-style: normal;\n        font-weight: 500;\n        letter-spacing: normal;\n        white-space: nowrap;\n        text-transform: none;\n    `,\n    host$$warning: css`\n        color: #434e4e;\n        background-color: #ffffe1\n    `,\n    host$$info: css`\n        color: #fff;\n        background-color: #1971a8;\n    `,\n    host$$sm: css`\n        font-size: 12px;\n        height: 18px;\n        padding: 0 6px;\n        gap: 3px;\n        border-radius: 6px;\n    `,\n\n    item: css`\n        position: relative;\n    `\n}","import React from \"react\"\n\nimport {$badge} from \"./Badge.styles\";\n\nexport interface BadgeProps {\n    children: React.ReactNode;\n\n    size?: \"sm\"\n    kind?: \"warning\" | \"info\"\n}\n\nexport function Badge({\n                          children,\n                          size = \"sm\",\n                          kind = \"warning\"\n                      }: BadgeProps) {\n    return <div className={`\n        ${$badge.host}\n        \n        ${size === \"sm\" && $badge.host$$sm}\n        \n        ${kind === \"warning\" && $badge.host$$warning}\n        \n        ${kind === \"info\" && $badge.host$$info}\n    `}>\n        <span className={$badge.item}>\n            {children}\n        </span>\n    </div>\n}","import {css} from \"@linaria/core\";\n\nexport const $blockquote = {\n    host: css`\n        color: rgb(55 65 81 / 1);\n        font-style: italic;\n        border-color: rgb(209 213 219 / 1);\n        margin: 0;\n    `\n}","import React from \"react\"\n\nimport {$blockquote} from \"./Blockquote.styles\";\n\nexport interface BlockquoteProps {\n    children: React.ReactNode;\n}\n\nexport function Blockquote({children}: BlockquoteProps) {\n    return <blockquote className={$blockquote.host}>\n        {children}\n    </blockquote>\n}","import {css} from \"@linaria/core\";\n\nexport const $callout = {\n    host: css`\n        display: inline-flex;\n        align-items: center;\n\n        position: relative;\n        width: 100%;\n        min-width: 275px;\n        padding: 8px 12px;\n\n        border-radius: 8px;\n\n        text-align: center;\n\n        border: 1px solid #ececf1;\n    `,\n    $$neutral: css`\n        background-color: #f7f7f8;\n\n        border-color: #ececf1;\n    `\n}\n\nexport const $icon = {\n    host: css`\n        display: inline-flex;\n        margin-right: 14px;\n        flex: 0 0 auto;\n        align-self: flex-start;\n\n        color: #6e6e80;\n        font-size: 20px;\n        margin-top: 2px;\n    `\n}\n\nexport const $message = {\n    host: css`\n        color: #353740;\n        text-align: left;\n\n        flex: 1 1 auto;\n    `,\n    body: css`\n        font-size: 14px;\n        line-height: 20px;\n    `\n}\n","import React from \"react\"\n\nimport {$callout, $icon, $message} from \"./Callout.styles\";\n\nexport interface CalloutProps {\n    children: React.ReactNode;\n}\n\nfunction InfoIcon() {\n    return <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"1em\"\n        height=\"1em\"\n        fill=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n    >\n        <path d=\"M13 12a1 1 0 1 0-2 0v4a1 1 0 1 0 2 0v-4Zm-1-2.5A1.25 1.25 0 1 0 12 7a1.25 1.25 0 0 0 0 2.5Z\"/>\n        <path\n            fillRule=\"evenodd\"\n            d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Z\"\n            clipRule=\"evenodd\"\n        />\n    </svg>\n}\n\nexport function Callout({children}: CalloutProps) {\n    return <div className={`${$callout.host} ${$callout.$$neutral}`}>\n        <div className={$icon.host}>\n            <InfoIcon/>\n        </div>\n        <div className={$message.host}>\n            <div className={$message.body}>\n                {children}\n            </div>\n        </div>\n    </div>\n}","import {css} from \"@linaria/core\";\n\nexport const $code = {\n    host: css`\n        display: inline-block;\n        padding: 0 .3em;\n        border-radius: 6px;\n        margin: 0 3px;\n        border: .5px solid #ececf1;\n\n        font-size: 14px;\n        font-weight: 500;\n        line-height: 1.6em;\n\n        background: linear-gradient(45deg, #f7f7f8 0%, rgba(247, 247, 248, 1) 100%);\n    `\n}","import React from \"react\"\n\nimport {$code} from \"./Code.styles\";\n\nexport interface CodeProps {\n    children: React.ReactNode;\n}\n\nexport function Code({children}: CodeProps) {\n    return <code className={$code.host}>\n        {children}\n    </code>\n}","import {css} from \"@linaria/core\";\n\nexport const $details = {\n    host: css`\n        border-top: 1px solid #ececf1;\n\n        &[open] summary svg[data-icon=\"true\"] { // TODO: bad solution\n            transform: rotate(90deg);\n        }\n    `,\n    host$$secondary: css`\n        background-color: #f7f7f8;\n        border: 1px solid #ececf1;\n        border-radius: 8px;\n    `,\n    summary: css`\n        padding: 16px 14px 16px 0;\n        font-size: 18px;\n        cursor: pointer;\n        font-weight: 500;\n        font-variant-numeric: tabular-nums;\n        line-height: 1.4;\n        transition: color 0.3s;\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        justify-content: flex-start;\n        list-style: none;\n\n        &:hover {\n            color: #565869;\n        }\n    `,\n    summary$$secondary: css`\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        cursor: pointer;\n        padding: 20px 24px;\n    `,\n    summary$$tertiary: css`\n        padding: 10px 24px;\n    `,\n    summaryDeep: css`\n        display: flex;\n        align-items: center;\n        margin-bottom: 8px;\n    `,\n    summaryDeep$text: css`\n        color: #6e6e80;\n        text-transform: uppercase;\n        font-size: 12px;\n        line-height: 16px;\n        letter-spacing: .08em;\n        margin-left: 8px;\n        font-weight: 700;\n    `,\n    summaryDeep$text$$tertiary: css`\n        text-transform: none;\n        \n        code {\n            background: white;\n        }\n    `,\n    label: css`\n        flex: 1 1 auto;\n    `,\n    label$$tertriary: css`\n        padding: 10px;\n    `,\n    icon: css`\n        flex: 0 0 auto;\n        font-size: 16px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding-right: 6px;\n    `,\n    content: css`\n        padding: 0 24px 20px;\n    `,\n    content$$secondary: css`\n        // TODO: also bad\n\n        code {\n            background: white;\n        }\n    `,\n    content$$tertiary: css`\n        background: white;\n        padding-top: 20px;\n    `\n}","import React from \"react\"\n\nimport {$details} from \"./Details.styles\";\n\ninterface BaseDetailsProps {\n    children: React.ReactNode;\n    label: string;\n\n    icon?: React.SVGProps<SVGSVGElement>;\n}\n\ninterface TertiaryDetailsProps extends BaseDetailsProps {\n    kind: \"tertiary\";\n    title: string | React.ReactNode;\n}\n\ninterface SecondaryDetailsProps extends BaseDetailsProps {\n    kind: \"secondary\";\n    title: string | React.ReactNode;\n}\n\ninterface PrimaryDetailsProps extends BaseDetailsProps {\n    kind?: \"primary\";\n}\n\nexport type DetailsProps = PrimaryDetailsProps | SecondaryDetailsProps | TertiaryDetailsProps\n\nexport function Details(props: DetailsProps) {\n    const {children, label} = props;\n\n    let title\n\n    const isDeepKind = [\"secondary\", \"tertiary\"].includes(props.kind || \"\");\n\n    if (isDeepKind && \"title\" in props) {\n        title = props.title;\n    }\n\n    const kind = props.kind || \"primary\";\n\n    return <details className={`\n        ${$details.host} \n        ${isDeepKind && $details.host$$secondary}\n   `}>\n        <summary className={`\n        ${$details.summary} \n        ${isDeepKind && $details.summary$$secondary}\n        ${kind === \"tertiary\" ? $details.summary$$tertiary : \"\"}\n   `}>\n            {kind === \"primary\" && <>\n                    {props.icon ? props.icon : <$Icon/>}\n                <$Label>\n                    {label}\n                </$Label>\n            </>}\n            {isDeepKind && <>\n                <div>\n                    <div className={$details.summaryDeep}>\n                        <>\n                            {props.icon ? props.icon : <$IconDeep/>}\n                        </>\n                        <div className={`\n                            ${$details.summaryDeep$text}\n                            ${$details.summaryDeep$text$$tertiary}\n                        `}>\n                            {title}\n                        </div>\n                    </div>\n                    <$Label>\n                        {label}\n                    </$Label>\n                </div>\n                <$Icon/>\n            </>}\n        </summary>\n\n        <div className={`\n            ${$details.content}\n            ${isDeepKind && $details.content$$secondary}\n            ${kind === \"tertiary\" && $details.content$$tertiary}\n        `}>\n            {children}\n        </div>\n    </details>\n}\n\nfunction $Icon() {\n    return <div className={$details.icon}>\n        <svg\n            // TODO: bad solution\n            data-icon=\"true\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"1em\"\n            height=\"1em\"\n            fill=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n        >\n            <path\n                fillRule=\"evenodd\"\n                d=\"M8.293 4.293a1 1 0 0 1 1.414 0l7 7a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414-1.414L14.586 12 8.293 5.707a1 1 0 0 1 0-1.414Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    </div>\n}\n\nfunction $IconDeep() {\n    return <svg\n        width=\"1em\"\n        height=\"1em\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"none\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n    >\n        <g clipPath=\"url(#clip0_1689_2180)\">\n            <path\n                d=\"M4.3 4.3L7.1 7.1M10.6 5.7V1.5M14.8 7.8L17.6 5M5.7 11.3H1.5M7.1 14.8L4.3 17.6M15.5 22.5L9.9 9.9L22.5 14.8L16.9 16.2L15.5 22.5Z\"\n                stroke=\"black\"\n                strokeWidth={2}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </g>\n        <defs>\n            <clipPath id=\"clip0_1689_2180\">\n                <rect width={24} height={24} fill=\"white\"/>\n            </clipPath>\n        </defs>\n    </svg>\n}\n\nfunction $Label({children}: {\n    children?: React.ReactNode\n}) {\n    return <div className={$details.label}>\n        {children}\n    </div>\n}","import {css} from \"@linaria/core\";\n\nexport const $heading = {\n    host: css`\n        line-height: 40px;\n        font-weight: 300;\n        color: #202123;\n\n        position: relative;\n        display: inline-block;\n        margin: 0;\n        padding: 0 24px 0 0;\n        scroll-margin-top: 30px;\n        cursor: pointer;\n\n        &:hover {\n            svg {\n                opacity: 1;\n            }\n        }\n    `,\n    h1: css`\n        font-size: 36px;\n\n        code {\n            font-size: 30px;\n        }\n    `,\n    h2: css`\n        font-size: 30px;\n\n        code {\n            font-size: 24px;\n        }\n    `,\n    h3: css`\n        font-size: 26px;\n\n        code {\n            font-size: 22px;\n        }\n    `,\n    h4: css`\n        font-size: 22px;\n\n        code {\n            font-size: 18px;\n        }\n    `,\n    h5: css`\n        font-size: 18px;\n\n        code {\n            font-size: 14px;\n        }\n    `,\n    h6: css`\n        font-size: 16px;\n\n        code {\n            font-size: 12px;\n        }\n    `,\n    link: css`\n        position: absolute;\n        top: 50%;\n        right: 0;\n        margin-top: -6px;\n        opacity: 0;\n        color: #7051d4;\n        transition: opacity .15s ease;\n    `\n}","import React, {useRef} from \"react\"\n\nimport {$heading} from \"./Heading.styles\";\n\nexport interface HeadingProps {\n    children: React.ReactNode\n    size: 1 | 2 | 3 | 4 | 5 | 6\n    as?: \"div\" | \"span\"\n    id?: string\n    onClick?: () => void\n}\n\nexport function Heading({children, size = 1, as, id, onClick}: HeadingProps) {\n    let HeadingComponent = as ? as : `h${size}` as \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"\n\n    const obRef = useRef<HTMLAnchorElement>(null)\n\n    return <HeadingComponent\n        className={`\n            ${$heading.host}\n            ${size === 1 && $heading.h1}\n            ${size === 2 && $heading.h2}\n            ${size === 3 && $heading.h3}\n            ${size === 4 && $heading.h4}\n            ${size === 5 && $heading.h5}\n            ${size === 6 && $heading.h6}\n            xyd_comp-comp-heading\n        `}\n        onClick={onClick}\n    >\n        {children}\n\n        {id && <$Anchor/>}\n    </HeadingComponent>\n}\n\nfunction $Anchor() {\n    return <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={15}\n        height={15}\n        fill=\"currentColor\"\n        viewBox=\"0 0 24 24\"\n        className={$heading.link}\n        role=\"presentation\"\n    >\n        <path\n            fillRule=\"evenodd\"\n            d=\"M18.293 5.707a4.657 4.657 0 0 0-6.586 0l-1 1a1 1 0 1 1-1.414-1.414l1-1a6.657 6.657 0 1 1 9.414 9.414l-1 1a1 1 0 0 1-1.414-1.414l1-1a4.657 4.657 0 0 0 0-6.586Zm-2.586 2.586a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414l6-6a1 1 0 0 1 1.414 0Zm-9 1a1 1 0 0 1 0 1.414l-1 1a4.657 4.657 0 0 0 6.586 6.586l1-1a1 1 0 0 1 1.414 1.414l-1 1a6.657 6.657 0 1 1-9.414-9.414l1-1a1 1 0 0 1 1.414 0Z\"\n            clipRule=\"evenodd\"\n        />\n    </svg>\n}","import {css} from \"@linaria/core\";\n\nexport const $hr = {\n    host: css`\n        border-color: rgb(229 229 229 / 0.7);\n    `\n}","import React from \"react\"\n\nimport {$hr} from \"./Hr.styles\";\n\nexport interface HrProps {\n    children: React.ReactNode;\n}\n\nexport function Hr({children}: HrProps) {\n    return <hr className={$hr.host}>\n        {children}\n    </hr>\n}","import React from \"react\";\n\n// TODO: better icon system\n\nexport function IconSessionReplay() {\n    return <svg\n        width={24}\n        height={24}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n    >\n        <path\n            d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n            stroke=\"black\"\n            strokeWidth={2}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n        />\n        <path\n            d=\"M10 8L16 12L10 16V8Z\"\n            stroke=\"black\"\n            strokeWidth={2}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n        />\n    </svg>\n}\n\nexport function IconMetrics() {\n    return <svg\n        width={24}\n        height={24}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n    >\n        <path\n            d=\"M21 7L13.2273 14.9167L9.13636 10.75L3 17\"\n            stroke=\"black\"\n            strokeWidth={2}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n        />\n        <path\n            d=\"M16 7H21V12\"\n            stroke=\"black\"\n            strokeWidth={2}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n        />\n    </svg>\n}\n\nexport function IconFunnels() {\n    return <svg\n        width={24}\n        height={24}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n    >\n        <path\n            d=\"M12 20L12 10\"\n            stroke=\"black\"\n            strokeWidth={2}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n        />\n        <path\n            d=\"M6 20L6 4\"\n            stroke=\"black\"\n            strokeWidth={2}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n        />\n        <path\n            d=\"M18 20L18 16\"\n            stroke=\"black\"\n            strokeWidth={2}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n        />\n    </svg>\n}\n\nexport function IconCode() {\n    return <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width={24} height={24}>\n        <path\n            fillRule=\"evenodd\"\n            d=\"M14.447 7.106a1 1 0 0 1 .447 1.341l-4 8a1 1 0 1 1-1.788-.894l4-8a1 1 0 0 1 1.341-.447ZM6.6 7.2a1 1 0 0 1 .2 1.4L4.25 12l2.55 3.4a1 1 0 0 1-1.6 1.2l-3-4a1 1 0 0 1 0-1.2l3-4a1 1 0 0 1 1.4-.2Zm10.8 0a1 1 0 0 1 1.4.2l3 4a1 1 0 0 1 0 1.2l-3 4a1 1 0 0 1-1.6-1.2l2.55-3.4-2.55-3.4a1 1 0 0 1 .2-1.4Z\"\n            clipRule=\"evenodd\"\n        />\n    </svg>\n}\n\nexport function IconCustomEvent() {\n    return <svg\n        width={24}\n        height={24}\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n    >\n        <path\n            d=\"M3.66179 8.03142L6.54954 1.79004C6.63136 1.6132 6.80847 1.5 7.00333 1.5H10.7236C11.0872 1.5 11.3292 1.87581 11.1788 2.20685L9.18871 6.58625C9.03827 6.9173 9.28029 7.2931 9.64391 7.2931L11.589 7.2931C12.0146 7.2931 12.2456 7.79098 11.9708 8.11596L6.77738 14.2573C6.4593 14.6334 5.84636 14.3715 5.89839 13.8816L6.3857 9.2942C6.41708 8.99882 6.18554 8.74138 5.8885 8.74138H4.11558C3.75048 8.74138 3.50848 8.36278 3.66179 8.03142Z\"\n            stroke=\"black\"\n            strokeWidth={1.2}\n            strokeLinejoin=\"round\"\n        />\n    </svg>\n}\n\nexport function IconAlert() {\n    return <svg\n        width={24}\n        height={24}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n    >\n        <path\n            d=\"M18 8C18 6.4087 17.3679 4.88258 16.2426 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.88258 2.63214 7.75736 3.75736C6.63214 4.88258 6 6.4087 6 8C6 15 3 17 3 17H21C21 17 18 15 18 8Z\"\n            stroke=\"black\"\n            strokeWidth={2}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n        />\n        <path\n            d=\"M13.73 21C13.5542 21.3031 13.3019 21.5547 12.9982 21.7295C12.6946 21.9044 12.3504 21.9965 12 21.9965C11.6496 21.9965 11.3054 21.9044 11.0018 21.7295C10.6982 21.5547 10.4458 21.3031 10.27 21\"\n            stroke=\"black\"\n            strokeWidth={2}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n        />\n    </svg>\n}\n\nexport function IconBrowser() {\n    return <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={24}\n        height={24}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n    >\n        <path\n            d=\"M22 9H2M2 7.8L2 16.2C2 17.8802 2 18.7202 2.32698 19.362C2.6146 19.9265 3.07354 20.3854 3.63803 20.673C4.27976 21 5.11984 21 6.8 21H17.2C18.8802 21 19.7202 21 20.362 20.673C20.9265 20.3854 21.3854 19.9265 21.673 19.362C22 18.7202 22 17.8802 22 16.2V7.8C22 6.11984 22 5.27977 21.673 4.63803C21.3854 4.07354 20.9265 3.6146 20.362 3.32698C19.7202 3 18.8802 3 17.2 3L6.8 3C5.11984 3 4.27976 3 3.63803 3.32698C3.07354 3.6146 2.6146 4.07354 2.32698 4.63803C2 5.27976 2 6.11984 2 7.8Z\"\n            stroke=\"#000000\"\n            strokeWidth={2}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n        />\n    </svg>\n}\n\nexport function IconREST() {\n    return <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={24}\n        height={24}\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n    >\n        <path\n            fill=\"#000000\"\n            fillRule=\"evenodd\"\n            d=\"M.5 2.75a2.25 2.25 0 114.28.97l1.345 1.344.284-.284a2.25 2.25 0 013.182 0l.284.284 1.344-1.344a2.25 2.25 0 111.06 1.06l-1.343 1.345.284.284a2.25 2.25 0 010 3.182l-.284.284 1.344 1.344a2.25 2.25 0 11-1.06 1.06l-1.345-1.343-.284.284a2.25 2.25 0 01-3.182 0l-.284-.284-1.344 1.344a2.25 2.25 0 11-1.06-1.06l1.343-1.345-.284-.284a2.25 2.25 0 010-3.182l.284-.284L3.72 4.781A2.25 2.25 0 01.5 2.75zM2.75 2a.75.75 0 100 1.5.75.75 0 000-1.5zm0 10.5a.75.75 0 100 1.5.75.75 0 000-1.5zm9.75.75a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM13.25 2a.75.75 0 100 1.5.75.75 0 000-1.5zM7.47 5.841a.75.75 0 011.06 0L10.16 7.47a.75.75 0 010 1.06L8.53 10.16a.75.75 0 01-1.06 0L5.84 8.53a.75.75 0 010-1.06L7.47 5.84z\"\n            clipRule=\"evenodd\"\n        />\n    </svg>\n}\n\nexport function IconGraphQL() {\n    return <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"#000\"\n        width={24}\n        height={24}\n        viewBox=\"0 0 32 32\"\n    >\n        <path\n            d=\"M18.734 3.667l6.578 3.802c1.089-1.146 2.901-1.193 4.047-0.104 0.193 0.188 0.365 0.401 0.5 0.635 0.786 1.37 0.313 3.12-1.063 3.906-0.229 0.13-0.479 0.234-0.745 0.297v7.599c1.531 0.365 2.474 1.896 2.109 3.427-0.063 0.271-0.172 0.531-0.307 0.771-0.792 1.365-2.536 1.833-3.906 1.042-0.26-0.146-0.5-0.344-0.698-0.568l-6.542 3.776c0.495 1.495-0.318 3.109-1.813 3.604-0.292 0.099-0.594 0.146-0.896 0.146-1.573 0-2.854-1.271-2.854-2.849 0-0.271 0.042-0.547 0.12-0.813l-6.583-3.797c-1.089 1.141-2.896 1.188-4.036 0.094-1.135-1.089-1.177-2.891-0.094-4.031 0.38-0.396 0.865-0.677 1.396-0.807v-7.599c-1.531-0.365-2.479-1.906-2.109-3.443 0.063-0.266 0.167-0.521 0.302-0.755 0.786-1.365 2.536-1.833 3.901-1.042 0.234 0.135 0.453 0.302 0.641 0.5l6.583-3.797c-0.448-1.51 0.417-3.099 1.922-3.542 0.26-0.083 0.536-0.12 0.813-0.12 1.573 0 2.854 1.271 2.854 2.844 0 0.281-0.042 0.557-0.12 0.823zM18.047 4.839c-0.026 0.026-0.047 0.052-0.078 0.078l8.615 14.917c0.036-0.010 0.078-0.021 0.109-0.031v-7.609c-1.526-0.375-2.453-1.922-2.073-3.448 0.005-0.031 0.016-0.068 0.021-0.099zM14.026 4.917l-0.078-0.078-6.594 3.802c0.438 1.51-0.438 3.089-1.948 3.526-0.036 0.010-0.068 0.016-0.104 0.026v7.609l0.115 0.031 8.615-14.917zM16.797 5.594c-0.521 0.146-1.073 0.146-1.589 0l-8.615 14.917c0.391 0.375 0.667 0.859 0.802 1.391h17.214c0.13-0.531 0.406-1.016 0.802-1.396zM18.109 27.229l6.552-3.786c-0.021-0.063-0.036-0.125-0.052-0.188h-17.219l-0.031 0.109 6.589 3.802c0.516-0.536 1.245-0.87 2.052-0.87 0.839 0 1.589 0.359 2.109 0.932z\"/>\n    </svg>\n}\n\nexport function IconWebhooks() {\n    return <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n        width={24}\n        height={24}\n        viewBox=\"-10 -5 1034 1034\"\n    >\n        <path\n            fill=\"#000000\"\n            d=\"M482 226h-1l-10 2q-33 4 -64.5 18.5t-55.5 38.5q-41 37 -57 91q-9 30 -8 63t12 63q17 45 52 78l13 12l-83 135q-26 -1 -45 7q-30 13 -45 40q-7 15 -9 31t2 32q8 30 33 48q15 10 33 14.5t36 2t34.5 -12.5t27.5 -25q12 -17 14.5 -39t-5.5 -41q-1 -5 -7 -14l-3 -6l118 -192 q6 -9 8 -14l-10 -3q-9 -2 -13 -4q-23 -10 -41.5 -27.5t-28.5 -39.5q-17 -36 -9 -75q4 -23 17 -43t31 -34q37 -27 82 -27q27 -1 52.5 9.5t44.5 30.5q17 16 26.5 38.5t10.5 45.5q0 17 -6 42l70 19l8 1q14 -43 7 -86q-4 -33 -19.5 -63.5t-39.5 -53.5q-42 -42 -103 -56 q-6 -2 -18 -4l-14 -2h-37zM500 350q-17 0 -34 7t-30.5 20.5t-19.5 31.5q-8 20 -4 44q3 18 14 34t28 25q24 15 56 13q3 4 5 8l112 191q3 6 6 9q27 -26 58.5 -35.5t65 -3.5t58.5 26q32 25 43.5 61.5t0.5 73.5q-8 28 -28.5 50t-48.5 33q-31 13 -66.5 8.5t-63.5 -24.5 q-4 -3 -13 -10l-5 -6q-4 3 -11 10l-47 46q23 23 52 38.5t61 21.5l22 4h39l28 -5q64 -13 110 -60q22 -22 36.5 -50.5t19.5 -59.5q5 -36 -2 -71.5t-25 -64.5t-44 -51t-57 -35q-34 -14 -70.5 -16t-71.5 7l-17 5l-81 -137q13 -19 16 -37q5 -32 -13 -60q-16 -25 -44 -35 q-17 -6 -35 -6zM218 614q-58 13 -100 53q-47 44 -61 105l-4 24v37l2 11q2 13 4 20q7 31 24.5 59t42.5 49q50 41 115 49q38 4 76 -4.5t70 -28.5q53 -34 78 -91q7 -17 14 -45q6 -1 18 0l125 2q14 0 20 1q11 20 25 31t31.5 16t35.5 4q28 -3 50 -20q27 -21 32 -54 q2 -17 -1.5 -33t-13.5 -30q-16 -22 -41 -32q-17 -7 -35.5 -6.5t-35.5 7.5q-28 12 -43 37l-3 6q-14 0 -42 -1l-113 -1q-15 -1 -43 -1l-50 -1l3 17q8 43 -13 81q-14 27 -40 45t-57 22q-35 6 -70 -7.5t-57 -42.5q-28 -35 -27 -79q1 -37 23 -69q13 -19 32 -32t41 -19l9 -3z\"\n        />\n    </svg>\n}\n\nexport function IconJSBrowser() {\n    return <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 448 512\"\n        width={24}\n        height={24}\n    >\n        <path\n            d=\"M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM243.8 381.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z\"/>\n    </svg>\n}\n\nexport function IconJSNode() {\n    return <svg\n        width={24}\n        height={24}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        data-name=\"Layer 1\"\n        viewBox=\"0 0 109 122.88\"\n    >\n        <defs>\n            <style>{\".cls-1{fill-rule:evenodd;}\"}</style>\n        </defs>\n        <title>{\"node-js-black\"}</title>\n        <path\n            className=\"cls-1\"\n            d=\"M68.43,87.08c-19.7,0-23.83-9-23.83-16.63a1.3,1.3,0,0,1,1.3-1.3h5.82A1.3,1.3,0,0,1,53,70.25c.88,5.93,3.49,8.92,15.41,8.92C77.9,79.17,81.93,77,81.93,72c0-2.9-1.15-5-15.89-6.49-12.33-1.22-20-3.93-20-13.8,0-9.08,7.66-14.49,20.5-14.49,14.42,0,21.56,5,22.46,15.76a1.31,1.31,0,0,1-.35,1,1.35,1.35,0,0,1-1,.42H81.9a1.29,1.29,0,0,1-1.26-1c-1.41-6.23-4.81-8.23-14.07-8.23C56.21,45.15,55,48.76,55,51.46c0,3.28,1.42,4.24,15.4,6.09S90.82,62,90.82,71.71,82.64,87.14,68.37,87.14l.06-.06Zm-13.91,35.8a9.45,9.45,0,0,1-4.72-1.26l-15-8.9c-2.25-1.26-1.15-1.7-.41-2a30.38,30.38,0,0,0,6.8-3.1,1.15,1.15,0,0,1,1.12.08l11.55,6.85a1.51,1.51,0,0,0,1.4,0l45-26a1.42,1.42,0,0,0,.69-1.22V35.43a1.44,1.44,0,0,0-.7-1.24l-45-26a1.38,1.38,0,0,0-1.39,0l-45,26a1.42,1.42,0,0,0-.71,1.23v52a1.39,1.39,0,0,0,.7,1.21l12.33,7.12C27.85,99.06,32,95.11,32,91.15V39.86a1.29,1.29,0,0,1,1.31-1.3H39a1.29,1.29,0,0,1,1.3,1.3V91.17c0,8.93-4.87,14-13.33,14-2.6,0-4.66,0-10.38-2.82L4.72,95.59A9.51,9.51,0,0,1,0,87.38v-52a9.47,9.47,0,0,1,4.72-8.21l45.07-26a9.89,9.89,0,0,1,9.47,0l45,26A9.49,9.49,0,0,1,109,35.43v52a9.54,9.54,0,0,1-4.72,8.21l-45,26a9.5,9.5,0,0,1-4.74,1.26v0Zm0,0Z\"\n        />\n    </svg>\n}\n\nexport function IconStorybook() {\n    return <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"#000000\"\n        width={24}\n        height={24}\n        viewBox=\"0 0 32 32\"\n    >\n        <path\n            d=\"M21.786 0.318l-0.161 3.615c-0.005 0.203 0.229 0.328 0.391 0.203l1.411-1.068 1.198 0.932c0.156 0.104 0.365 0 0.375-0.188l-0.135-3.677 1.776-0.135c0.922-0.063 1.708 0.672 1.708 1.599v28.802c0 0.917-0.766 1.646-1.682 1.599l-21.469-0.958c-0.833-0.036-1.505-0.708-1.531-1.547l-1-26.401c-0.052-0.885 0.62-1.646 1.505-1.693l17.599-1.109zM17.693 12.401c0 0.625 4.214 0.318 4.786-0.109 0-4.266-2.292-6.521-6.479-6.521-4.198 0-6.531 2.297-6.531 5.724 0 5.932 8 6.036 8 9.276 0 0.938-0.427 1.469-1.401 1.469-1.281 0-1.802-0.651-1.734-2.88 0-0.479-4.865-0.641-5.026 0-0.359 5.375 2.974 6.932 6.797 6.932 3.724 0 6.63-1.984 6.63-5.573 0-6.359-8.135-6.188-8.135-9.333 0-1.292 0.964-1.464 1.505-1.464 0.604 0 1.667 0.094 1.589 2.49z\"/>\n    </svg>\n}\n\nexport function IconReactRouter() {\n    return <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={24}\n        height={24}\n        viewBox=\"0 0 602 360\"\n        fill=\"none\"\n    >\n        <path\n            d=\"M480.96 180C480.96 196.572 474.239 211.572 463.357 222.42C452.475 233.28 437.445 240 420.84 240C404.235 240 389.205 246.708 378.335 257.568C367.453 268.428 360.72 283.428 360.72 300C360.72 316.572 353.999 331.572 343.117 342.42C332.235 353.28 317.205 360 300.6 360C283.995 360 268.965 353.28 258.095 342.42C247.213 331.572 240.48 316.572 240.48 300C240.48 283.428 247.213 268.428 258.095 257.568C268.965 246.708 283.995 240 300.6 240C317.205 240 332.235 233.28 343.117 222.42C353.999 211.572 360.72 196.572 360.72 180C360.72 146.856 333.81 120 300.6 120C283.995 120 268.965 113.28 258.095 102.42C247.213 91.572 240.48 76.572 240.48 60C240.48 43.428 247.213 28.428 258.095 17.568C268.965 6.708 283.995 0 300.6 0C333.81 0 360.72 26.856 360.72 60C360.72 76.572 367.453 91.572 378.335 102.42C389.205 113.28 404.235 120 420.84 120C454.05 120 480.96 146.856 480.96 180Z\"\n            fill=\"#121212\"\n        />\n        <path\n            d=\"M240.48 180C240.48 146.862 213.563 120 180.36 120C147.157 120 120.24 146.862 120.24 180C120.24 213.137 147.157 240 180.36 240C213.563 240 240.48 213.137 240.48 180Z\"\n            fill=\"#121212\"\n        />\n        <path\n            d=\"M120.24 300C120.24 266.863 93.3234 240 60.12 240C26.9166 240 0 266.863 0 300C0 333.138 26.9166 360 60.12 360C93.3234 360 120.24 333.138 120.24 300Z\"\n            fill=\"#121212\"\n        />\n        <path\n            d=\"M601.2 300C601.2 266.863 574.283 240 541.08 240C507.877 240 480.96 266.863 480.96 300C480.96 333.138 507.877 360 541.08 360C574.283 360 601.2 333.138 601.2 300Z\"\n            fill=\"#121212\"\n        />\n    </svg>\n}\n\nexport function IconNextJS() {\n    return <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={24}\n        height={24}\n        viewBox=\"0 0 15 15\"\n        fill=\"none\"\n    >\n        <path\n            d=\"M4.5 4.5L4.90534 4.20725C4.77836 4.03144 4.55252 3.95753 4.34617 4.02425C4.13981 4.09098 4 4.28313 4 4.5H4.5ZM7.5 14C3.91015 14 1 11.0899 1 7.5H0C0 11.6421 3.35786 15 7.5 15V14ZM14 7.5C14 11.0899 11.0899 14 7.5 14V15C11.6421 15 15 11.6421 15 7.5H14ZM7.5 1C11.0899 1 14 3.91015 14 7.5H15C15 3.35786 11.6421 0 7.5 0V1ZM7.5 0C3.35786 0 0 3.35786 0 7.5H1C1 3.91015 3.91015 1 7.5 1V0ZM5 12V4.5H4V12H5ZM4.09466 4.79275L10.5947 13.7927L11.4053 13.2073L4.90534 4.20725L4.09466 4.79275ZM10 4V10H11V4H10Z\"\n            fill=\"#000000\"\n        />\n    </svg>\n}\n\nexport function IconAppTemplate() {\n    return <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 80 80\"\n        fill=\"none\"\n    >\n        <g clipPath=\"url(#clip0_202_147)\">\n            <path d=\"M0 55.3333H80\" stroke=\"black\" strokeWidth={0.506667}/>\n            <path d=\"M0 40H80\" stroke=\"black\" strokeWidth={0.506667}/>\n            <path d=\"M0 24.6667H80\" stroke=\"black\" strokeWidth={0.506667}/>\n            <path d=\"M55.3334 80V0\" stroke=\"black\" strokeWidth={0.506667}/>\n            <path d=\"M40 80V0\" stroke=\"black\" strokeWidth={0.506667}/>\n            <path d=\"M24.6666 80V0\" stroke=\"black\" strokeWidth={0.506667}/>\n            <path d=\"M80 80L0 0\" stroke=\"black\" strokeWidth={0.506667}/>\n            <path d=\"M0 80L80 0\" stroke=\"black\" strokeWidth={0.506667}/>\n            <rect\n                x={5.33337}\n                y={5.33333}\n                width={69.3333}\n                height={69.3333}\n                stroke=\"black\"\n                strokeWidth={0.506667}\n            />\n            <circle\n                cx={40}\n                cy={40}\n                r={15.3333}\n                stroke=\"black\"\n                strokeWidth={0.506667}\n            />\n            <circle cx={40} cy={40} r={22} stroke=\"black\" strokeWidth={0.506667}/>\n            <circle\n                cx={40}\n                cy={40}\n                r={34.6667}\n                stroke=\"black\"\n                strokeWidth={0.506667}\n            />\n        </g>\n        <rect\n            x={0.253333}\n            y={0.253333}\n            width={79.4933}\n            height={79.4933}\n            rx={17.08}\n            stroke=\"black\"\n            strokeWidth={0.506667}\n        />\n        <defs>\n            <clipPath id=\"clip0_202_147\">\n                <rect width={80} height={80} rx={17.3333} fill=\"white\"/>\n            </clipPath>\n        </defs>\n    </svg>\n}\n\nexport function IconQuote() {\n    return <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        width=\"1em\"\n        height=\"1em\"\n        stroke=\"currentColor\"\n        fill=\"currentColor\"\n    >\n        <path d=\"M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3z\"/>\n    </svg>\n}"],"names":["$badge","Badge","_ref","children","_ref$size","size","_ref$kind","kind","React","createElement","className","concat","$blockquote","Blockquote","$callout","$icon","$message","InfoIcon","xmlns","width","height","fill","viewBox","d","fillRule","clipRule","Callout","$code","Code","$details","Details","props","title","label","isDeepKind","includes","Fragment","icon","$Icon","$Label","$IconDeep","stroke","clipPath","strokeWidth","strokeLinecap","strokeLinejoin","id","$heading","Heading","as","onClick","HeadingComponent","useRef","$Anchor","role","$hr","Hr","IconSessionReplay","IconMetrics","IconFunnels","IconCode","IconCustomEvent","IconAlert","IconBrowser","IconREST","IconGraphQL","IconWebhooks","xmlnsXlink","IconJSBrowser","IconJSNode","IconStorybook","IconReactRouter","IconNextJS","IconAppTemplate","x","y","cx","cy","r","rx","IconQuote"],"mappings":"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"}

package/dist/index.css

@@ -5,10 +5,6 @@
 @media (max-width: 1200px){.broqp2l{width:100%;padding:0 20px;}}
 @media (max-width: 768px){.broqp2l{width:100%;padding:0 10px;}}
 
-.hfe0p8m{display:grid;grid-template-columns:repeat(2, 500px);justify-content:center;gap:30px;}@media (max-width: 1200px){.hfe0p8m{grid-template-columns:repeat(2, 1fr);}}@media (max-width: 768px){.hfe0p8m{grid-template-columns:1fr;}}
-
-.hn2r3b2{display:inline-block;border:1px solid transparent;text-align:center;font-weight:600;white-space:nowrap;border-radius:20px;padding:0 20px;line-height:38px;font-size:14px;border-color:transparent;color:#3c3c43;background-color:#f7f7f8;transition:color .25s,border-color .25s,background-color .25s;}.hn2r3b2:hover{background:#e3e3e6;}.hgvnekf{color:#fff;background-color:rgb(112, 81, 212);}.hgvnekf:hover{background-color:rgb(95, 59, 211);}
-
 .h1vbgqbd{padding:20px;}
 .c1qluffv{display:flex;align-items:center;justify-content:center;gap:80px;}
 .h7zyorj{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:40px;}
@@ -30,58 +26,81 @@
 .c1ny3ybl{margin:0 auto;max-width:1200px;text-align:center;}
 .t1ahtzu3{line-height:24px;font-size:14px;font-weight:500;color:rgba(60, 60, 67, .78);}
 
-.hwgsk4h{display:flex;overflow:hidden;margin-top:0.375rem;gap:0.25rem;align-items:center;font-size:0.875rem;line-height:1.25rem;color:#6B7280;}
-.i1b95bxl{shrink:0;width:0.875rem;}
-.i1a3fa93{white-space:nowrap;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;}
-.i1dl7ywj{color:#000;font-weight:bold;}
+.hfe0p8m{display:grid;grid-template-columns:repeat(2, 500px);justify-content:center;gap:30px;}@media (max-width: 1200px){.hfe0p8m{grid-template-columns:repeat(2, 1fr);}}@media (max-width: 768px){.hfe0p8m{grid-template-columns:1fr;}}
 
-.h1w59zdn{display:inline-block;padding:0 .3em;border-radius:6px;margin:0 3px;border:.5px solid #ececf1;font-size:14px;font-weight:500;line-height:1.6em;background:linear-gradient(45deg, #f7f7f8 0%, rgba(247, 247, 248, 1) 100%);}
+.hn2r3b2{display:inline-block;border:1px solid transparent;text-align:center;font-weight:600;white-space:nowrap;border-radius:20px;padding:0 20px;line-height:38px;font-size:14px;border-color:transparent;color:#3c3c43;background-color:#f7f7f8;transition:color .25s,border-color .25s,background-color .25s;}.hn2r3b2:hover{background:#e3e3e6;}.hgvnekf{color:#fff;background-color:rgb(112, 81, 212);}.hgvnekf:hover{background-color:rgb(95, 59, 211);}
 
 .hutvd2b{display:inline-flex;align-items:center;line-height:1rem;font-style:normal;font-weight:500;letter-spacing:normal;white-space:nowrap;text-transform:none;}
-.hg9oorb{color:#000;background-color:#f8d047;}
-.h6jev6x{color:#fff;background-color:#1FA6F2;}
+.hg9oorb{color:#434e4e;background-color:#ffffe1;}
+.h6jev6x{color:#fff;background-color:#1971a8;}
 .h1uvewli{font-size:12px;height:18px;padding:0 6px;gap:3px;border-radius:6px;}
 .i1mcrm8o{position:relative;}
 
+.h1wifk81{color:rgb(55 65 81 / 1);font-style:italic;border-color:rgb(209 213 219 / 1);margin:0;}
+
+.hwmojve{border-top:1px solid #ececf1;}.hwmojve[open] summary svg[data-icon="true"]{transform:rotate(90deg);}.h1an07j0{background-color:#f7f7f8;border:1px solid #ececf1;border-radius:8px;}.sbneplt{padding:16px 14px 16px 0;font-size:18px;cursor:pointer;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.4;transition:color 0.3s;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;list-style:none;}.sbneplt:hover{color:#565869;}.s1d31n8s{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:20px 24px;}.s2p0kpw{padding:10px 24px;}.snk81qf{display:flex;align-items:center;margin-bottom:8px;}.syq3zec{color:#6e6e80;text-transform:uppercase;font-size:12px;line-height:16px;letter-spacing:.08em;margin-left:8px;font-weight:700;}.sq0a0s6{text-transform:none;}.sq0a0s6 code{background:white;}.l1ligx2c{flex:1 1 auto;}.l89yndk{padding:10px;}.iynkbu3{flex:0 0 auto;font-size:16px;display:flex;align-items:center;justify-content:center;padding-right:6px;}.c16kc3w3{padding:0 24px 20px;}.c15ahw9d code{background:white;}.cw7uaxe{background:white;padding-top:20px;}
+
+.h1w59zdn{display:inline-block;padding:0 .3em;border-radius:6px;margin:0 3px;border:.5px solid #ececf1;font-size:14px;font-weight:500;line-height:1.6em;background:linear-gradient(45deg, #f7f7f8 0%, rgba(247, 247, 248, 1) 100%);}
+
+.h3kfd8c{padding-left:0;list-style:none;counter-reset:ordered-listitem;display:flex;flex-direction:column;gap:6px;}
+.l1et872q{padding-left:32px;position:relative;line-height:1.5;}
+.l1et872q::after{position:absolute;top:0;left:0;counter-increment:ordered-listitem;content:counter(ordered-listitem);background:#ececf1;color:#353740;font-size:12px;line-height:24px;font-weight:500;text-align:center;height:24px;width:24px;border-radius:12px;}
+
+.h1tn40xd{line-height:40px;font-weight:300;color:#202123;position:relative;display:inline-block;margin:0;padding:0 24px 0 0;scroll-snap-margin-top:30px;scroll-margin-top:30px;cursor:pointer;}.h1tn40xd:hover svg{opacity:1;}.hnf4kng{font-size:36px;}.hnf4kng code{font-size:30px;}.h1vdtsi8{font-size:30px;}.h1vdtsi8 code{font-size:24px;}.hz5xehg{font-size:26px;}.hz5xehg code{font-size:22px;}.hptgzam{font-size:22px;}.hptgzam code{font-size:18px;}.h11bbv2f{font-size:18px;}.h11bbv2f code{font-size:14px;}.hcoksa6{font-size:16px;}.hcoksa6 code{font-size:12px;}.l17d6dy1{position:absolute;top:50%;right:0;margin-top:-6px;opacity:0;color:#7051d4;transition:opacity .15s ease;}
+
 .hhnegou{display:inline-flex;align-items:center;position:relative;width:100%;min-width:275px;padding:8px 12px;border-radius:8px;text-align:center;border:1px solid #ececf1;}
 ._1ja9964{background-color:#f7f7f8;border-color:#ececf1;}
 .h1lyih3m{display:inline-flex;margin-right:14px;flex:0 0 auto;align-self:flex-start;color:#6e6e80;font-size:20px;margin-top:2px;}
 .h1gzjc3x{color:#353740;text-align:left;flex:1 1 auto;}
 .boe1v8p{font-size:14px;line-height:20px;}
 
-.h3kfd8c{padding-left:0;list-style:none;counter-reset:ordered-listitem;display:flex;flex-direction:column;gap:6px;}
-.l1et872q{padding-left:32px;position:relative;line-height:1.5;}
-.l1et872q::after{position:absolute;top:0;left:0;counter-increment:ordered-listitem;content:counter(ordered-listitem);background:#ececf1;color:#353740;font-size:12px;line-height:24px;font-weight:500;text-align:center;height:24px;width:24px;border-radius:12px;}
+.h161qd82{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
+.t15ayd0k{display:table;width:100%;min-width:640px;border-collapse:separate;border-spacing:0;border:1px solid #ECECF1;border-radius:8px;font-size:0.875rem;line-height:1.25rem;margin-top:1rem;overflow:hidden;}
+.ttmbsix{background:#F7F7F8;}
+.t1pid2qp{text-align:left;font-weight:500;padding:0.5rem 1rem;color:#353740;vertical-align:middle;border-bottom:1px solid #ECECF1;white-space:nowrap;}
+.t1pid2qp:first-child{width:24rem;max-width:40%;border-right:1px solid #ECECF1;}
+@media (max-width: 768px){.t1pid2qp:first-child{width:auto;min-width:12rem;}}
+.t1pid2qp.numeric{text-align:right;font-weight:400;min-width:5rem;}
+@media (max-width: 768px){.t1pid2qp.numeric{min-width:4rem;}}
+.t1bzojtj:not(:last-child){border-bottom:1px solid #ECECF1;}
+.t1qcq3w1{padding:0.5rem 1rem;vertical-align:middle;border-top:1px solid #ECECF1;}
+.t1qcq3w1:first-child{border-right:1px solid #ECECF1;}
+.t1qcq3w1.numeric{text-align:right;}
+.t1qcq3w1.muted{color:#6E6E80;}
+@media (max-width: 768px){.t1qcq3w1{padding:0.5rem;}}
+.cz9thgl{display:flex;align-items:baseline;width:100%;gap:0.5rem;}
+.coblcjj{flex:1;text-align:right;}
+.mrvy6t5{display:flex;align-items:center;gap:0.5rem;white-space:nowrap;color:#202123;}
+@media (max-width: 768px){.mrvy6t5{font-size:0.8125rem;}}
 
-.h1tn40xd{line-height:40px;font-weight:300;color:#202123;position:relative;display:inline-block;margin:0;padding:0 24px 0 0;scroll-snap-margin-top:30px;scroll-margin-top:30px;cursor:pointer;}.h1tn40xd:hover svg{opacity:1;}.hnf4kng{font-size:36px;}.hnf4kng code{font-size:30px;}.h1vdtsi8{font-size:30px;}.h1vdtsi8 code{font-size:24px;}.hz5xehg{font-size:26px;}.hz5xehg code{font-size:22px;}.hptgzam{font-size:22px;}.hptgzam code{font-size:18px;}.h11bbv2f{font-size:18px;}.h11bbv2f code{font-size:14px;}.hcoksa6{font-size:16px;}.hcoksa6 code{font-size:12px;}.l17d6dy1{position:absolute;top:50%;right:0;margin-top:-6px;opacity:0;color:#7051d4;transition:opacity .15s ease;}
 
-.h1wifk81{color:rgb(55 65 81 / 1);font-style:italic;border-color:rgb(209 213 219 / 1);margin:0;}
+.hilz89t{display:flex;position:relative;overflow:hidden;border:.5px solid #ececf1;background:linear-gradient(238deg, rgba(247, 247, 248, .5) 0%, rgba(247, 247, 248, 1) 100%);border-radius:8px;padding:16px 20px 20px;z-index:0;transition:box-shadow .2s ease-in-out,background-image .2s ease;}.hilz89t:hover{background:linear-gradient(238deg, rgba(255, 255, 255, .5) 0%, rgba(250, 250, 250, 1) 100%);}.h1rnhmpa{padding:21px 25px 25px;}.lajci2p{width:100%;height:100%;}.iezrce7{border-radius:8px;display:flex;align-items:flex-start;cursor:pointer;transition:opacity .15s;}.iezrce7:hover [data-pointer="true"]{opacity:1;transform:translate(0);}.i1vhi0b8{width:100%;height:100%;}.i1m2lps9{line-height:0px;font-size:24px;border-radius:8px;width:48px;height:48px;display:flex;justify-content:center;align-items:center;color:#353740;border:1px solid #ececf1;background:linear-gradient(238deg, rgba(255, 255, 255, .5) 0%, rgba(250, 250, 250, 1) 100%);transition:background .2s ease;box-sizing:border-box;flex-shrink:0;}.r1new93p{padding-left:16px;display:flex;flex-direction:column;gap:4px;}.t1u3d3ty{display:flex;color:#202123;font-weight:400;align-items:center;transition:color .15s;}.t4udf3g{font-size:16px;line-height:20px;}.t1icpluq{font-size:18px;}.badgd67{font-weight:400;font-size:14px;line-height:20px;color:#6e6e80;white-space:normal;overflow:hidden;text-overflow:ellipsis;}.bcjznmh{font-size:16px;}.p13ekkiz{opacity:0;transform:translate(-4px);display:flex;justify-content:center;transition:opacity .15s ease-in-out,transform .15s ease-in-out;}.h15733ml{display:grid;grid-template-columns:1fr 1fr;justify-content:center;gap:30px;}
+
+.hwgsk4h{display:flex;overflow:hidden;margin-top:0.375rem;gap:0.25rem;align-items:center;font-size:0.875rem;line-height:1.25rem;color:#6B7280;}
+.i1b95bxl{shrink:0;width:0.875rem;}
+.i1a3fa93{white-space:nowrap;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;}
+.i1dl7ywj{color:#000;font-weight:bold;}
 
 .h1ej4n95{border-color:rgb(229 229 229 / 0.7);}
 
 .h1vb39qj{margin-top:0;border-radius:6px;padding:16px;border:0;background-color:rgb(246, 248, 250);overflow:auto;}
 
-.hwmojve{border-top:1px solid #ececf1;}.hwmojve[open] summary svg[data-icon="true"]{transform:rotate(90deg);}.h1an07j0{background-color:#f7f7f8;border:1px solid #ececf1;border-radius:8px;}.sbneplt{padding:16px 14px 16px 0;font-size:18px;cursor:pointer;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.4;transition:color 0.3s;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;list-style:none;}.sbneplt:hover{color:#565869;}.s1d31n8s{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:20px 24px;}.s2p0kpw{display:flex;align-items:center;margin-bottom:8px;}.snk81qf{color:#6e6e80;text-transform:uppercase;font-size:12px;line-height:16px;letter-spacing:.08em;margin-left:8px;font-weight:700;}.lyq3zec{flex:1 1 auto;}.iq0a0s6{flex:0 0 auto;font-size:16px;display:flex;align-items:center;justify-content:center;padding-right:6px;}.c1ligx2c{padding:0 24px 20px;}.c89yndk code{background:white;}
+.h1bta36o{align-items:center;display:flex;height:42px;background-color:#fff;border-bottom:1px solid hsl(212, 15%, calc(96% - 12% * 1));z-index:99;}
+.uxs4bf1{display:flex;gap:10px;height:100%;color:hsl(212, 15%, calc(96% - 12% * 4));list-style:none;padding:0;white-space:nowrap;}
+.ifn7ecb{height:100%;}
+.ifn7ecb[data-state="active"] a{border-bottom-color:rgb(112, 81, 212);}
+.i441kmn{display:inline-flex;border-bottom:3px solid transparent;-webkit-text-decoration:none;text-decoration:none;height:100%;padding:10px;}
+
 
-.h1xhrk1{display:flex;padding-top:2rem;margin-top:2rem;margin-bottom:2rem;justify-content:space-between;align-items:center;border-top-width:1px;}
+.h1xhrk1{display:flex;padding-top:2rem;margin-top:2rem;margin-bottom:2rem;justify-content:space-between;align-items:center;border-top-width:1px;border-color:#ececf1;}
 .l1elq7ab{display:flex;padding-top:1rem;padding-bottom:1rem;gap:0.25rem;align-items:center;font-size:1rem;line-height:1.5rem;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;max-width:50%;}
 .i1mmatje{display:inline;height:1.25rem;flex-shrink:0;}
 
-
-.hilz89t{display:flex;position:relative;overflow:hidden;border:.5px solid #ececf1;background:linear-gradient(238deg, rgba(247, 247, 248, .5) 0%, rgba(247, 247, 248, 1) 100%);border-radius:8px;padding:16px 20px 20px;z-index:0;transition:box-shadow .2s ease-in-out,background-image .2s ease;}.hilz89t:hover{background:linear-gradient(238deg, rgba(255, 255, 255, .5) 0%, rgba(250, 250, 250, 1) 100%);}.h1rnhmpa{padding:21px 25px 25px;}.lajci2p{width:100%;height:100%;}.iezrce7{border-radius:8px;display:flex;align-items:flex-start;cursor:pointer;transition:opacity .15s;}.iezrce7:hover [data-pointer="true"]{opacity:1;transform:translate(0);}.i1vhi0b8{width:100%;height:100%;}.i1m2lps9{line-height:0px;font-size:24px;border-radius:8px;width:48px;height:48px;display:flex;justify-content:center;align-items:center;color:#353740;border:1px solid #ececf1;background:linear-gradient(238deg, rgba(255, 255, 255, .5) 0%, rgba(250, 250, 250, 1) 100%);transition:background .2s ease;box-sizing:border-box;flex-shrink:0;}.r1new93p{padding-left:16px;display:flex;flex-direction:column;gap:4px;}.t1u3d3ty{display:flex;color:#202123;font-weight:400;align-items:center;transition:color .15s;}.t4udf3g{font-size:16px;line-height:20px;}.t1icpluq{font-size:18px;}.badgd67{font-weight:400;font-size:14px;line-height:20px;color:#6e6e80;white-space:normal;overflow:hidden;text-overflow:ellipsis;}.bcjznmh{font-size:16px;}.p13ekkiz{opacity:0;transform:translate(-4px);display:flex;justify-content:center;transition:opacity .15s ease-in-out,transform .15s ease-in-out;}.h15733ml{display:grid;grid-template-columns:1fr 1fr;justify-content:center;gap:30px;}
-
 .h14vj3ri{display:block;overflow-x:scroll;border-collapse:collapse;border-radius:3px;}
 .t1l6tz9b{padding:0.5rem 1rem;margin:0;font-weight:600;border-width:1px;border-color:#D1D5DB;background:rgba(234, 238, 242, 0.5);}
 .thzxr0l{padding:0;margin:0;border-top-width:1px;border-color:#D1D5DB;}
 .t1g1altt{padding:0.5rem 1rem;margin:0;border-width:1px;border-color:#D1D5DB;}
 
-.h1bta36o{align-items:center;display:flex;height:42px;background-color:#fff;border-bottom:1px solid hsl(212, 15%, calc(96% - 12% * 1));z-index:99;}
-.uxs4bf1{display:flex;gap:10px;height:100%;color:hsl(212, 15%, calc(96% - 12% * 4));list-style:none;padding:0;white-space:nowrap;}
-.ifn7ecb{height:100%;}
-.ifn7ecb[data-state="active"] a{border-bottom-color:rgb(112, 81, 212);}
-.i441kmn{display:inline-flex;border-bottom:3px solid transparent;-webkit-text-decoration:none;text-decoration:none;height:100%;padding:10px;}
-
-
 .hh8vcxa{position:relative;max-width:100%;}
 .b2p5907{display:flex;align-items:center;}
 .coeb6fw{margin-top:16px;}
@@ -111,10 +130,73 @@
 .c1cmkhbs{flex:1 1 0;overflow:hidden;}
 .n1rrfk2r{position:sticky;top:30px;width:180px;margin-top:0;margin-left:50px;padding-left:16px;flex:none;}
 
-.hmi9h9e{margin-top:-18px;font-size:18px;color:#7051d4;font-weight:300;}
+:root {--xyd-navbar-height:46px;--xyd-global-page-gutter:8px;--xyd-sidebar-width:300px;}
+.hbl2zih{width:100%;overflow-x:hidden;background:#fff;}
+.h115et6c{display:flex;justify-content:space-between;align-items:center;position:fixed;top:0px;right:8px;left:8px;height:46px;z-index:20;background:#fff;}
+@media (max-width: 768px){.h115et6c{padding:0;}}
+.pqur9bs{display:flex;align-items:center;width:100%;}
+.h1ca28gw{flex-direction:column;height:90px;transition:transform 200ms;}
+.h1wej3bq{transform:translateY(calc(-46px + 3px));}
+.h10slvux{display:none;}
+@media (max-width: 768px){.h10slvux{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:none;cursor:pointer;padding:0;}}
+.hs9zvag{width:24px;height:24px;position:relative;display:flex;flex-direction:column;justify-content:space-between;}
+.hwo9ypt{width:100%;height:2px;background:#000;transition:transform 0.3s cubic-bezier(.65, 0, .35, 1);}
+.hx2yh06:first-child{transform:translateY(11px) rotate(45deg);}
+.hx2yh06:nth-child(2){opacity:0;}
+.hx2yh06:last-child{transform:translateY(-11px) rotate(-45deg);}
+.m1tsopzt{position:fixed;display:flex;top:calc(46px + 0px);bottom:8px;left:8px;right:8px;margin-top:8px;}
+.mrptvy0{top:calc(90px + 0px);transition:top 200ms;}
+.s15p97dz{flex:none;width:300px;background:#fff;display:flex;flex-direction:column;overflow:hidden;position:relative;}
+@media (max-width: 768px){.s15p97dz{display:none;}}
+.m1g98ss5{display:none;}
+@media (max-width: 768px){.m1g98ss5{display:flex;position:fixed;top:0;bottom:0;left:0;width:300px;background:#fff;flex-direction:column;overflow:hidden;z-index:50;transform:translateX(-100%);transition:transform .3s cubic-bezier(.65, 0, .35, 1);box-shadow:4px 0 8px rgba(0, 0, 0, 0.1);}}
+.m12tfx9{transform:translateX(0);}
+.s1l70vy0{flex:1;overflow-y:auto;}
+.c1xrwn4u{position:absolute;top:12px;right:12px;width:32px;height:32px;border:none;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;}
+.sx6vufc{width:100%;height:40px;padding:0 12px;border:1px solid #eaeaea;border-radius:6px;font-size:14px;outline:none;transition:border-color 0.2s;}
+.sx6vufc:focus{border-color:#666;}
+.c1k5z9a4{width:20px;height:20px;position:relative;}
+.c1k5z9a4::before,.c1k5z9a4::after{content:'';position:absolute;top:50%;left:0;width:100%;height:2px;background:#666;transform-origin:center;}
+.c1k5z9a4::before{transform:rotate(45deg);}
+.c1k5z9a4::after{transform:rotate(-45deg);}
+.o2vyfys{display:none;}
+@media (max-width: 768px){.o2vyfys{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0, 0, 0, 0.6);transition:opacity .3s;opacity:0;pointer-events:none;z-index:40;}}
+.o3fargz{opacity:1;pointer-events:auto;}
+.h178wvkm{position:relative;top:12px;flex:1;background:#fff;overflow:hidden;min-width:0;}
+.s56lisa{overflow-y:auto;height:100%;-webkit-overflow-scrolling:touch;padding:0 48px;}
+@media (max-width: 1024px){.s56lisa{padding:0 32px;}}
+@media (max-width: 768px){.s56lisa{padding:0 24px;}}
+.cr72phr{padding:40px 0;width:100%;max-width:965px;margin:0 auto;font-size:15px;line-height:24px;}
+@media (max-width: 768px){.cr72phr{padding:24px 0;}}
+.cjrmmxf{max-width:1200px;}
+.aqmdmmp{width:100%;max-width:100%;margin:0 auto;box-sizing:border-box;}
+.h1scre76{display:flex;gap:64px;width:100%;align-items:flex-start;box-sizing:border-box;}
+@media (max-width: 1024px){.h1scre76{gap:48px;}}
+@media (max-width: 768px){.h1scre76{flex-direction:column;gap:32px;}}
+.cw4g864{flex:1;min-width:0;max-width:100%;}
+.nj90fwq{position:sticky;top:24px;width:200px;min-width:200px;flex:none;padding-left:24px;}
+@media (max-width: 1024px){.nj90fwq{display:none;width:180px;min-width:180px;padding-left:16px;}}
+@media (max-width: 768px){.nj90fwq{display:block;position:static;width:100%;min-width:100%;padding-left:0;padding-top:24px;border-top:1px solid #eaeaea;}}
+
+.hmi9h9e{margin-top:-18px;font-size:18px;color:#6e6e80;font-weight:300;}
 
 .h1seqss5{display:flex;flex-direction:column;gap:24px;}
 
+.htyux6{color:#7051d4;}
+
+.h1dmvxug{overflow:hidden;min-width:0;border:1px solid rgb(236, 236, 241);border-radius:16px;}
+.p1pb9ov9{border:none!important;}
+.haeqccf{display:flex;flex:1 1 0%;background:linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%)!important;border-top-right-radius:10px;border-top-left-radius:10px;border-bottom:0px;min-width:0;}
+.hrmq4h0{height:0;}
+.lht44{display:flex;flex-grow:1;justify-content:end;gap:8px;padding:0 10px;}
+.b3qz0ka{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;padding:6px;font-size:14px;color:rgb(53, 55, 64);}
+.b3qz0ka[data-state="active"]{color:rgb(112, 81, 212);border-bottom:1px solid rgb(112, 81, 212);border-bottom-left-radius:0px;border-bottom-right-radius:0px;}
+.b3qz0ka:hover{transition:ease-in 0.1s;background:#e3e3eb;}
+.djcdygz{display:flex;align-items:center;gap:4px;font-size:14px;color:rgb(53, 55, 64);margin-left:4px;margin-right:4px;}
+.dng3elc{display:flex;padding-left:16px;padding-right:16px;flex:1 1 0%;gap:16px;border-radius:4px;}
+.c1kyo2f4{display:flex;padding-left:8px;padding-right:8px;align-items:center;}
+.ccv4xf3{top:17px;position:relative;right:5px;}
+
 .hyawwu4{display:flex;border-left-width:4px;border-color:transparent;margin:4px 0;}
 .l1i5ism5{flex:1 1 0%;}
 ._1fnx2sm{border-color:#60A5FA;background-color:#EEF2FF;}
@@ -122,16 +204,13 @@
 .hwih9s3{max-height:400px;background:linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%)!important;margin:0;padding:8px 16px;border-top:1px solid rgb(236, 236, 241);border-bottom-left-radius:10px;border-bottom-right-radius:10px;font-size:12px;line-height:20px;white-space:pre-wrap;word-break:break-all;overflow-y:scroll;}
 .h1sbwmbs{max-height:100%;}
 
-.h1dmvxug{overflow:hidden;min-width:0;border:1px solid rgb(236, 236, 241);border-radius:16px;}
-.h1pb9ov9{display:flex;flex:1 1 0%;background:linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%)!important;border-top-right-radius:10px;border-top-left-radius:10px;border-bottom:0px;min-width:0;}
-.laeqccf{display:flex;flex-grow:1;justify-content:end;gap:8px;padding:0 10px;}
-.brmq4h0{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;padding:6px;font-size:14px;color:rgb(53, 55, 64);}
-.brmq4h0[data-state="active"]{color:rgb(112, 81, 212);border-bottom:1px solid rgb(112, 81, 212);border-bottom-left-radius:0px;border-bottom-right-radius:0px;}
-.brmq4h0:hover{transition:ease-in 0.1s;background:#e3e3eb;}
-.dht44{display:flex;align-items:center;gap:4px;font-size:14px;color:rgb(53, 55, 64);margin-left:4px;margin-right:4px;}
-.d3qz0ka{display:flex;padding-left:16px;padding-right:16px;flex:1 1 0%;gap:16px;border-radius:4px;}
-.cjcdygz{display:flex;padding-left:8px;padding-right:8px;align-items:center;}
-
-.htyux6{color:#7051d4;}
+.h1q2kcy0{display:inline-flex;align-items:center;justify-content:center;}
+.dse1ken{display:flex;gap:4px;}
+.d38bb27{width:8px;height:8px;background-color:currentColor;border-radius:50%;animation:pulse-d38bb27 1.4s infinite ease-in-out;opacity:0.6;}
+.d38bb27:nth-of-type(2){animation-delay:0.2s;}
+.d38bb27:nth-of-type(3){animation-delay:0.4s;}
+@keyframes pulse-d38bb27{0%,80%,100%{transform:scale(0.6);opacity:0.4;}40%{transform:scale(1);opacity:1;}}
+._8rdt3l .d38bb27{width:6px;height:6px;}
+._1f7km1o .d38bb27{width:12px;height:12px;}
 
 .h1hvsyfb{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;padding:6px;}.h1hvsyfb:hover{transition:ease-in 0.1s;background:#e3e3eb;}

package/dist/layouts.d.ts

@@ -1,5 +1,15 @@
 import React from 'react';
 
+interface LayoutPrimaryProps {
+    header: React.ReactNode;
+    aside: React.ReactNode;
+    content: React.ReactNode;
+    contentNav: React.ReactNode;
+    subheader?: React.ReactNode;
+    layoutSize?: "large";
+}
+declare function LayoutPrimary(props: LayoutPrimaryProps): React.JSX.Element;
+
 interface LayoutProps {
     header: React.ReactNode;
     aside: React.ReactNode;
@@ -16,5 +26,5 @@ declare namespace Layout {
     }) => React.JSX.Element;
 }
 
-export { Layout };
-export type { LayoutProps };
+export { Layout, LayoutPrimary };
+export type { LayoutPrimaryProps, LayoutProps };

package/dist/layouts.js

@@ -1,2 +1,2 @@
-import{a as e}from"./_rollupPluginBabelHelpers-Dyp77Dty.js";import n,{useState as a,useEffect as t}from"react";var c="h8dr7e",r="h1ezaz84",l="h17wz13c",o="h1bgh3rd",s="mxu2emt",m="mslox5x",i="s1i19hnd",d="h13sn67b",u="s1k9r3in",v="c1t0msup",h="apqkghd",E="a10qws06",f="h3zl32q",N="c1cmkhbs",p="n1rrfk2r";function b(r){var g=a(!1),q=e(g,2),L=q[0],k=q[1],x=a(0),H=e(x,2),y=H[0],z=H[1],S=a(0),T=e(S,2),w=T[0],M=T[1];function j(e){var n;if(e.target instanceof HTMLElement){var a=null===(n=e.target)||void 0===n?void 0:n.scrollTop;z(a)}}function B(e){var n;e.target instanceof HTMLElement&&M(null===(n=e.target)||void 0===n?void 0:n.scrollTop)}return t((function(){if(y!==w){var e=parseInt("46px",10)/2,n=y-w,a=Math.abs(y-w);n>e?k(!0):a>e&&k(!1)}}),[y,w]),t((function(){var e,n;if(r.subheader)return null===(e=document.querySelector(".".concat(u)))||void 0===e||e.addEventListener("scroll",j),null===(n=document.querySelector(".".concat(u)))||void 0===n||n.addEventListener("scrollend",B),function(){var e,n;null===(e=document.querySelector(".".concat(u)))||void 0===e||e.removeEventListener("scroll",j),null===(n=document.querySelector(".".concat(u)))||void 0===n||n.removeEventListener("scrollend",B)}}),[]),n.createElement("div",{className:c},n.createElement(b.Header,{className:"\n            ".concat(r.subheader&&l,"\n            ").concat(L&&o,"\n        ")},r.header),n.createElement("main",{className:"\n            ".concat(s,"\n            ").concat(!L&&r.subheader&&m,"\n        ")},n.createElement("aside",{className:i},r.aside),n.createElement("div",{className:d},n.createElement("div",{className:u},n.createElement("div",{className:v},n.createElement("div",{className:"\n                            ".concat(h,"\n                            ").concat("fullwidth"==r.kind&&E,"\n                        ")},n.createElement("article",{className:f},n.createElement("section",{className:N},r.content),r.contentNav&&n.createElement("nav",{className:"\n                                    ".concat(p,"\n                                ")},r.contentNav))))))))}b.Header=function(e){var a=e.className,t=e.children;return n.createElement("header",{className:"\n            ".concat(r,"\n            ").concat(a,"\n        ")},t)};export{b as Layout};
+import{a as e}from"./_rollupPluginBabelHelpers-DsEzE6Ab.js";import a,{useState as n,useEffect as t}from"react";var c="46px",r="hbl2zih",l="h115et6c",s="pqur9bs",o="h1ca28gw",m="h1wej3bq",i="h10slvux",d="hs9zvag",v="hwo9ypt",u="hx2yh06",E="m1tsopzt",h="mrptvy0",N="s15p97dz",f="m1g98ss5",p="m12tfx9",g="s1l70vy0",b="c1xrwn4u",q="c1k5z9a4",y="o2vyfys",L="o3fargz",x="h178wvkm",z="s56lisa",k="cr72phr",w="cjrmmxf",H="aqmdmmp",M="h1scre76",S="cw4g864",T="nj90fwq";function j(j){var C=n(!1),I=e(C,2),B=I[0],P=I[1],_=j.subheader?function(){var a=n(!1),r=e(a,2),l=r[0],s=r[1],o=n(0),m=e(o,2),i=m[0],d=m[1],v=n(0),u=e(v,2),E=u[0],h=u[1];function N(e){var a;if(e.target instanceof HTMLElement){var n=null===(a=e.target)||void 0===a?void 0:a.scrollTop;d(n)}}function f(e){var a;e.target instanceof HTMLElement&&h(null===(a=e.target)||void 0===a?void 0:a.scrollTop)}return t((function(){if(i!==E){var e=parseInt(c,10)/2,a=i-E,n=Math.abs(i-E);a>e?s(!0):n>e&&s(!1)}}),[i,E]),t((function(){var e,a;return null===(e=document.querySelector(".".concat(z)))||void 0===e||e.addEventListener("scroll",N),null===(a=document.querySelector(".".concat(z)))||void 0===a||a.addEventListener("scrollend",f),function(){var e,a;null===(e=document.querySelector(".".concat(z)))||void 0===e||e.removeEventListener("scroll",N),null===(a=document.querySelector(".".concat(z)))||void 0===a||a.removeEventListener("scrollend",f)}}),[]),{hideMainHeader:l}}():{hideMainHeader:!1},A=_.hideMainHeader;return a.createElement("div",{className:r},a.createElement("header",{className:" \n            ".concat(l,"\n            ").concat(j.subheader&&o,"\n            ").concat(A&&m,"\n        ")},a.createElement("div",{className:s},j.header,a.createElement("button",{className:i,onClick:function(){return P(!B)},"aria-label":"Toggle navigation menu"},a.createElement("div",{className:d},a.createElement("span",{className:"".concat(v," ").concat(B?u:"")}),a.createElement("span",{className:"".concat(v," ").concat(B?u:"")}),a.createElement("span",{className:"".concat(v," ").concat(B?u:"")})))),j.subheader),a.createElement("div",{className:"".concat(y," ").concat(B?L:""),onClick:function(){return P(!1)}}),a.createElement("aside",{className:"\n            ".concat(f,"\n            ").concat(B?p:"","\n        ")},a.createElement("div",{className:g},j.aside),a.createElement("button",{className:b,onClick:function(){return P(!1)},"aria-label":"Close navigation menu"},a.createElement("div",{className:q}))),a.createElement("main",{className:"\n            ".concat(E,"\n            ").concat(!A&&j.subheader&&h,"\n        ")},a.createElement("aside",{className:N},j.aside),a.createElement("div",{className:x},a.createElement("div",{className:z},a.createElement("div",{className:"\n                        ".concat(k,"\n                        ").concat("large"==j.layoutSize&&w,"\n                    ")},a.createElement("div",{className:"\n                            ".concat(H,"\n                        ")},a.createElement("article",{className:M},a.createElement("section",{className:S},j.content),j.contentNav&&a.createElement("nav",{className:"\n                                    ".concat(T,"\n                                ")},j.contentNav))))))))}var C="h8dr7e",I="h1ezaz84",B="h17wz13c",P="h1bgh3rd",_="mxu2emt",A="mslox5x",D="s1i19hnd",F="h13sn67b",G="s1k9r3in",J="c1t0msup",K="apqkghd",O="a10qws06",Q="h3zl32q",R="c1cmkhbs",U="n1rrfk2r";function V(c){var r=n(!1),l=e(r,2),s=l[0],o=l[1],m=n(0),i=e(m,2),d=i[0],v=i[1],u=n(0),E=e(u,2),h=E[0],N=E[1];function f(e){var a;if(e.target instanceof HTMLElement){var n=null===(a=e.target)||void 0===a?void 0:a.scrollTop;v(n)}}function p(e){var a;e.target instanceof HTMLElement&&N(null===(a=e.target)||void 0===a?void 0:a.scrollTop)}return t((function(){if(d!==h){var e=parseInt("46px",10)/2,a=d-h,n=Math.abs(d-h);a>e?o(!0):n>e&&o(!1)}}),[d,h]),t((function(){var e,a;if(c.subheader)return null===(e=document.querySelector(".".concat(G)))||void 0===e||e.addEventListener("scroll",f),null===(a=document.querySelector(".".concat(G)))||void 0===a||a.addEventListener("scrollend",p),function(){var e,a;null===(e=document.querySelector(".".concat(G)))||void 0===e||e.removeEventListener("scroll",f),null===(a=document.querySelector(".".concat(G)))||void 0===a||a.removeEventListener("scrollend",p)}}),[]),a.createElement("div",{className:C},a.createElement(V.Header,{className:"\n            ".concat(c.subheader&&B,"\n            ").concat(s&&P,"\n        ")},c.header),a.createElement("main",{className:"\n            ".concat(_,"\n            ").concat(!s&&c.subheader&&A,"\n        ")},a.createElement("aside",{className:D},c.aside),a.createElement("div",{className:F},a.createElement("div",{className:G},a.createElement("div",{className:J},a.createElement("div",{className:"\n                            ".concat(K,"\n                            ").concat("fullwidth"==c.kind&&O,"\n                        ")},a.createElement("article",{className:Q},a.createElement("section",{className:R},c.content),c.contentNav&&a.createElement("nav",{className:"\n                                    ".concat(U,"\n                                ")},c.contentNav))))))))}V.Header=function(e){var n=e.className,t=e.children;return a.createElement("header",{className:"\n            ".concat(I,"\n            ").concat(n,"\n        ")},t)};export{V as Layout,j as LayoutPrimary};
 //# sourceMappingURL=layouts.js.map

package/dist/layouts.js.map

@@ -1 +1 @@
-{"version":3,"file":"layouts.js","sources":["../src/layouts/Layout.styles.tsx","../src/layouts/Layout.tsx"],"sourcesContent":["import {css} from \"@linaria/core\";\n\nconst globalPageGutter = '8px';\nexport const globalHeaderHeight = '46px';\nconst globalHeaderWarningHeight = \"0px\";\nconst contentTopSpace = \"12px\";\n\nconst globalHeaderHeightWithSub = '90px';\n\nconst cubicMove = \"cubic-bezier(.65, 0, .35, 1)\";\nconst sidebarWidth = \"210px\";\n\n// TODO: better solution - design tokens\nexport const globals = css`\n    :global() {\n        :root {\n            --xyd-navbar-height: ${globalHeaderHeight};\n            --xyd-global-page-gutter: ${globalPageGutter};\n        }\n    }\n`;\n\nexport const $layout = {\n    host: css`\n        width: 100%;\n    `,\n    header: css`\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n\n        position: fixed;\n        top: ${globalHeaderWarningHeight};\n        right: ${globalPageGutter};\n        left: ${globalPageGutter};\n\n        height: ${globalHeaderHeight};\n    `,\n    header$$sub: css`\n        flex-direction: column;\n        height: ${globalHeaderHeightWithSub};\n        transition: transform 200ms;\n    `,\n    header$$hideMain: css`\n        transform: translateY(calc(-${globalHeaderHeight} + 3px));\n    `,\n    main: css`\n        position: fixed;\n        top: calc(${globalHeaderHeight} + ${globalHeaderWarningHeight});\n        bottom: ${globalPageGutter};\n        left: ${globalPageGutter};\n        right: ${globalPageGutter};\n    }`,\n    main$$sub: css`\n        top: calc(${globalHeaderHeightWithSub} + ${globalHeaderWarningHeight});\n        transition: top 200ms;\n    `,\n    sidebar: css`\n        flex-direction: column;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        z-index: 101;\n        width: ${sidebarWidth};\n        border: 0;\n        padding: ${contentTopSpace} 0 0;\n        overflow: visible;\n        background: none;\n        border-radius: 0;\n        opacity: 1;\n        visibility: visible;\n        transition: opacity .3s ${cubicMove};\n    `,\n}\n\nexport const $page = {\n    host: css`\n        position: absolute;\n        top: ${contentTopSpace};\n        right: 0;\n        bottom: 0;\n        z-index: 201;\n        background: #fff;\n\n        //border-radius: 8px;\n        //border: 1px solid #ececf1;\n\n        overflow: hidden;\n        transition: opacity .3s ${cubicMove};\n\n        left: ${sidebarWidth};\n    `,\n    scroll: css`\n        //position: absolute;\n        //top: 0;\n        //right: 0;\n        //bottom: 0;\n        //left: 0;\n        //overflow: auto;\n\n        overflow: scroll;\n        height: 100%;\n        \n    `,\n    container: css`\n        padding: 0;\n        width: 100%;\n        //position: relative; TODO: unset if during client render?\n        min-height: 100%;\n\n        max-width: 100%;\n        margin: 0 auto;\n        font-size: 15px;\n        line-height: 24px;\n    `,\n    articleContainer: css`\n        width: 980px;\n        padding: 40px 56px;\n        padding-top: 20px;\n        max-width: 100%;\n        margin: 0 auto;\n    `,\n    articleContainer$$fullWidth: css`\n        width: 1200px;\n    `,\n\n}\n\nexport const $article = {\n    host: css`\n        display: flex;\n        gap: 30px;\n        width: 100%;\n        align-items: flex-start;;\n    `,\n    content: css`\n        flex: 1 1 0;\n        overflow: hidden;\n    `,\n    nav: css`\n        position: sticky;\n        top: 30px;\n        width: 180px;\n        margin-top: 0;\n        margin-left: 50px;\n        padding-left: 16px;\n        flex: none;\n    `\n}","import React, {useEffect, useState} from \"react\"\n\nimport {$layout, $page, $article, globalHeaderHeight} from \"./Layout.styles\"\n\nexport interface LayoutProps {\n    header: React.ReactNode;\n    aside: React.ReactNode;\n    content: React.ReactNode;\n    contentNav: React.ReactNode;\n    subheader?: boolean;\n    kind?: \"fullwidth\"\n}\n\nexport function Layout(props: LayoutProps) {\n    const [hideMainHeader, setHideMainHeader] = useState(false)\n    const [scrollTop, setScrollTop] = useState(0)\n    const [controlScrollPos, setControlScrollPos] = useState(0)\n\n    useEffect(() => {\n        if (scrollTop === controlScrollPos) {\n            return\n        }\n\n        const checkpoint = parseInt(globalHeaderHeight, 10) / 2\n        const diff = scrollTop - controlScrollPos\n        const reversePosDiff = Math.abs(scrollTop - controlScrollPos)\n\n        if (diff > checkpoint) {\n            setHideMainHeader(true)\n        } else if (reversePosDiff > checkpoint) {\n            setHideMainHeader(false)\n        }\n    }, [\n        scrollTop,\n        controlScrollPos,\n    ]);\n\n    function onScroll(e: Event) {\n        if (!(e.target instanceof HTMLElement)) {\n            return\n        }\n\n        const scroll = e.target?.scrollTop\n        setScrollTop(scroll)\n    }\n\n    function onScrollFinish(e: Event) {\n        if (!(e.target instanceof HTMLElement)) {\n            return\n        }\n\n        setControlScrollPos(e.target?.scrollTop)\n    }\n\n    // TODO: by ref?\n    // TODO: MOVE SOMEWHERE ELSE BECAUSE IT DECREASE PERFORMANCE (RERENDER)\n    useEffect(() => {\n        // return // TODO: UNCOMMENT\n\n        if (!props.subheader) {\n            return\n        }\n\n        document.querySelector(`.${$page.scroll}`)?.addEventListener(\"scroll\", onScroll)\n        document.querySelector(`.${$page.scroll}`)?.addEventListener(\"scrollend\", onScrollFinish)\n\n        return () => {\n            document.querySelector(`.${$page.scroll}`)?.removeEventListener(\"scroll\", onScroll)\n            document.querySelector(`.${$page.scroll}`)?.removeEventListener(\"scrollend\", onScrollFinish)\n        }\n    }, []);\n\n    return <div className={$layout.host}>\n        <Layout.Header className={`\n            ${props.subheader && $layout.header$$sub}\n            ${hideMainHeader && $layout.header$$hideMain}\n        `}>\n            {props.header}\n        </Layout.Header>\n        <main className={`\n            ${$layout.main}\n            ${!hideMainHeader && props.subheader && $layout.main$$sub}\n        `}>\n            <aside className={$layout.sidebar}>\n                {props.aside}\n            </aside>\n            <div className={$page.host}>\n                <div className={$page.scroll}>\n                    <div className={$page.container}>\n                        <div className={`\n                            ${$page.articleContainer}\n                            ${props.kind == \"fullwidth\" && $page.articleContainer$$fullWidth}\n                        `}>\n                            <article className={$article.host}>\n                                <section className={$article.content}>\n                                    {props.content}\n                                </section>\n                                {\n                                    props.contentNav && <nav className={`\n                                    ${$article.nav}\n                                `}>\n                                        {props.contentNav}\n                                    </nav>\n                                }\n                            </article>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </main>\n    </div>\n}\n\nLayout.Header = function LayoutHeader({className, children}: { className?: string, children: React.ReactNode }) {\n    return <header className={`\n            ${$layout.header}\n            ${className}\n        `}>\n        {children}\n    </header>\n}\n"],"names":["$layout","$page","$article","Layout","props","_useState","useState","_useState2","_slicedToArray","hideMainHeader","setHideMainHeader","_useState3","_useState4","scrollTop","setScrollTop","_useState5","_useState6","controlScrollPos","setControlScrollPos","onScroll","e","target","HTMLElement","scroll","_a","onScrollFinish","useEffect","checkpoint","parseInt","diff","reversePosDiff","Math","abs","subheader","document","querySelector","concat","addEventListener","_b","removeEventListener","React","createElement","className","Header","header","aside","kind","content","contentNav","_ref","children"],"mappings":"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"}
+{"version":3,"file":"layouts.js","sources":["../src/layouts/LayoutPrimary/LayoutPrimary.styles.tsx","../src/layouts/LayoutPrimary/LayoutPrimary.tsx","../src/layouts/Layout.styles.tsx","../src/layouts/Layout.tsx"],"sourcesContent":["import {css} from \"@linaria/core\";\n\nconst globalPageGutter = '8px';\nexport const globalHeaderHeight = '46px';\nconst globalHeaderWarningHeight = \"0px\";\nconst contentTopSpace = \"12px\";\n\nconst globalHeaderHeightWithSub = '90px';\n\nconst cubicMove = \"cubic-bezier(.65, 0, .35, 1)\";\nconst sidebarWidth = \"300px\";\n\n// TODO: better solution - design tokens\nexport const globals = css`\n    :global() {\n        :root {\n            --xyd-navbar-height: ${globalHeaderHeight};\n            --xyd-global-page-gutter: ${globalPageGutter};\n            --xyd-sidebar-width: ${sidebarWidth};\n        }\n    }\n`;\n\nexport const $layout = {\n    host: css`\n        width: 100%;\n        overflow-x: hidden;\n        background: #fff;\n    `,\n    header: css`\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        position: fixed;\n        top: ${globalHeaderWarningHeight};\n        right: ${globalPageGutter};\n        left: ${globalPageGutter};\n        height: ${globalHeaderHeight};\n        z-index: 20;\n        background: #fff;\n\n        @media (max-width: 768px) {\n            padding: 0;\n        }\n    `,\n    primaryHeaderContent: css`\n        display: flex;\n        align-items: center;\n        width: 100%;\n    `,\n    header$$sub: css`\n        flex-direction: column;\n        height: ${globalHeaderHeightWithSub};\n        transition: transform 200ms;\n    `,\n    header$$hideMain: css`\n        transform: translateY(calc(-${globalHeaderHeight} + 3px));\n    `,\n    hamburgerButton: css`\n        display: none;\n\n        @media (max-width: 768px) {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 40px;\n            height: 40px;\n            border: none;\n            background: none;\n            cursor: pointer;\n            padding: 0;\n        }\n    `,\n    hamburgerIcon: css`\n        width: 24px;\n        height: 24px;\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n    `,\n    hamburgerLine: css`\n        width: 100%;\n        height: 2px;\n        background: #000;\n        transition: transform 0.3s ${cubicMove};\n    `,\n    hamburgerLine$$open: css`\n        &:first-child {\n            transform: translateY(11px) rotate(45deg);\n        }\n        &:nth-child(2) {\n            opacity: 0;\n        }\n        &:last-child {\n            transform: translateY(-11px) rotate(-45deg);\n        }\n    `,\n    main: css`\n        position: fixed;\n        display: flex;\n        top: calc(${globalHeaderHeight} + ${globalHeaderWarningHeight});\n        bottom: ${globalPageGutter};\n        left: ${globalPageGutter};\n        right: ${globalPageGutter};\n        margin-top: ${globalPageGutter};\n    `,\n    main$$sub: css`\n        top: calc(${globalHeaderHeightWithSub} + ${globalHeaderWarningHeight});\n        transition: top 200ms;\n    `,\n    staticSidebar: css`\n        flex: none;\n        width: ${sidebarWidth};\n        background: #fff;\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n        position: relative;\n        \n        @media (max-width: 768px) {\n            display: none;\n        }\n    `,\n    mobileSidebar: css`\n        display: none;\n\n        @media (max-width: 768px) {\n            display: flex;\n            position: fixed;\n            top: 0;\n            bottom: 0;\n            left: 0;\n            width: ${sidebarWidth};\n            background: #fff;\n            flex-direction: column;\n            overflow: hidden;\n            z-index: 50;\n            transform: translateX(-100%);\n            transition: transform .3s ${cubicMove};\n            box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);\n        }\n    `,\n    mobileSidebar$$open: css`\n        transform: translateX(0);\n    `,\n    sidebarContent: css`\n        flex: 1;\n        overflow-y: auto;\n    `,\n    closeButton: css`\n        position: absolute;\n        top: 12px;\n        right: 12px;\n        width: 32px;\n        height: 32px;\n        border: none;\n        background: none;\n        padding: 0;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    `,\n    searchInput: css`\n        width: 100%;\n        height: 40px;\n        padding: 0 12px;\n        border: 1px solid #eaeaea;\n        border-radius: 6px;\n        font-size: 14px;\n        outline: none;\n        transition: border-color 0.2s;\n\n        &:focus {\n            border-color: #666;\n        }\n    `,\n    closeIcon: css`\n        width: 20px;\n        height: 20px;\n        position: relative;\n\n        &::before,\n        &::after {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 0;\n            width: 100%;\n            height: 2px;\n            background: #666;\n            transform-origin: center;\n        }\n\n        &::before {\n            transform: rotate(45deg);\n        }\n\n        &::after {\n            transform: rotate(-45deg);\n        }\n    `,\n    overlay: css`\n        display: none;\n\n        @media (max-width: 768px) {\n            display: block;\n            position: fixed;\n            top: 0;\n            right: 0;\n            bottom: 0;\n            left: 0;\n            background: rgba(0, 0, 0, 0.6);\n            transition: opacity .3s;\n            opacity: 0;\n            pointer-events: none;\n            z-index: 40;\n        }\n    `,\n    overlay$$visible: css`\n        opacity: 1;\n        pointer-events: auto;\n    `\n}\n\nexport const $page = {\n    host: css`\n        position: relative;\n        top: ${contentTopSpace};\n        flex: 1;\n        background: #fff;\n        overflow: hidden;\n        min-width: 0;\n    `,\n    scroll: css`\n        overflow-y: auto;\n        height: 100%;\n        -webkit-overflow-scrolling: touch;\n        padding: 0 48px;\n\n        @media (max-width: 1024px) {\n            padding: 0 32px;\n        }\n\n        @media (max-width: 768px) {\n            padding: 0 24px;\n        }\n    `,\n    container: css`\n        padding: 40px 0;\n        width: 100%;\n        max-width: 965px;\n        margin: 0 auto;\n        font-size: 15px;\n        line-height: 24px;\n\n        @media (max-width: 768px) {\n            padding: 24px 0;\n        }\n    `,\n    container$$large: css`\n        max-width: 1200px;\n    `,\n    articleContainer: css`\n        width: 100%;\n        max-width: 100%;\n        margin: 0 auto;\n        box-sizing: border-box;\n    `,\n}\n\nexport const $article = {\n    host: css`\n        display: flex;\n        gap: 64px;\n        width: 100%;\n        align-items: flex-start;\n        box-sizing: border-box;\n\n        @media (max-width: 1024px) {\n            gap: 48px;\n        }\n\n        @media (max-width: 768px) {\n            flex-direction: column;\n            gap: 32px;\n        }\n    `,\n    content: css`\n        flex: 1;\n        min-width: 0;\n        max-width: 100%;\n    `,\n    nav: css`\n        position: sticky;\n        top: 24px;\n        width: 200px;\n        min-width: 200px;\n        flex: none;\n        padding-left: 24px;\n\n        @media (max-width: 1024px) {\n            display: none;\n            width: 180px;\n            min-width: 180px;\n            padding-left: 16px;\n        }\n\n        @media (max-width: 768px) {\n            display: block;\n            position: static;\n            width: 100%;\n            min-width: 100%;\n            padding-left: 0;\n            padding-top: 24px;\n            border-top: 1px solid #eaeaea;\n        }\n    `\n}","import React, {useEffect, useState} from \"react\"\n\nimport {$layout, $page, $article, globalHeaderHeight} from \"./LayoutPrimary.styles.tsx\"\n\nexport interface LayoutPrimaryProps {\n    header: React.ReactNode;\n    aside: React.ReactNode;\n    content: React.ReactNode;\n    contentNav: React.ReactNode;\n\n    subheader?: React.ReactNode;\n    layoutSize?: \"large\"\n}\n\n// TODO: move scroller to xyd-foo\nexport function LayoutPrimary(props: LayoutPrimaryProps) {\n    const [isMobileNavOpen, setIsMobileNavOpen] = useState(false)\n\n    const {hideMainHeader} = props.subheader ? useSubHeader() : {hideMainHeader: false}\n\n    return <div className={$layout.host}>\n        <header className={` \n            ${$layout.header}\n            ${props.subheader && $layout.header$$sub}\n            ${hideMainHeader && $layout.header$$hideMain}\n        `}>\n            <div className={$layout.primaryHeaderContent}>\n                {props.header}\n                <button\n                    className={$layout.hamburgerButton}\n                    onClick={() => setIsMobileNavOpen(!isMobileNavOpen)}\n                    aria-label=\"Toggle navigation menu\"\n                >\n                    <div className={$layout.hamburgerIcon}>\n                        <span className={`${$layout.hamburgerLine} ${isMobileNavOpen ? $layout.hamburgerLine$$open : ''}`}/>\n                        <span className={`${$layout.hamburgerLine} ${isMobileNavOpen ? $layout.hamburgerLine$$open : ''}`}/>\n                        <span className={`${$layout.hamburgerLine} ${isMobileNavOpen ? $layout.hamburgerLine$$open : ''}`}/>\n                    </div>\n                </button>\n            </div>\n            {props.subheader}\n        </header>\n\n        {/* Mobile Drawer Sidebar */}\n        <div\n            className={`${$layout.overlay} ${isMobileNavOpen ? $layout.overlay$$visible : ''}`}\n            onClick={() => setIsMobileNavOpen(false)}\n        />\n        <aside className={`\n            ${$layout.mobileSidebar}\n            ${isMobileNavOpen ? $layout.mobileSidebar$$open : ''}\n        `}>\n            <div className={$layout.sidebarContent}>\n                {props.aside}\n            </div>\n            <button\n                className={$layout.closeButton}\n                onClick={() => setIsMobileNavOpen(false)}\n                aria-label=\"Close navigation menu\"\n            >\n                <div className={$layout.closeIcon}/>\n            </button>\n        </aside>\n\n        <main className={`\n            ${$layout.main}\n            ${!hideMainHeader && props.subheader && $layout.main$$sub}\n        `}>\n            {/* Desktop Static Sidebar */}\n            <aside className={$layout.staticSidebar}>\n                {props.aside}\n            </aside>\n\n            <div className={$page.host}>\n                <div className={$page.scroll}>\n                    <div className={`\n                        ${$page.container}\n                        ${props.layoutSize == \"large\" && $page.container$$large}\n                    `}>\n                        <div className={`\n                            ${$page.articleContainer}\n                        `}>\n                            <article className={$article.host}>\n                                <section className={$article.content}>\n                                    {props.content}\n                                </section>\n                                {\n                                    props.contentNav && <nav className={`\n                                    ${$article.nav}\n                                `}>\n                                        {props.contentNav}\n                                    </nav>\n                                }\n                            </article>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </main>\n    </div>\n}\n\n// TODO: move to `xyd-foo` or somewhere else\nfunction useSubHeader() {\n    const [hideMainHeader, setHideMainHeader] = useState(false)\n    const [scrollTop, setScrollTop] = useState(0)\n    const [controlScrollPos, setControlScrollPos] = useState(0)\n\n    useEffect(() => {\n        if (scrollTop === controlScrollPos) {\n            return\n        }\n\n        const checkpoint = parseInt(globalHeaderHeight, 10) / 2\n        const diff = scrollTop - controlScrollPos\n        const reversePosDiff = Math.abs(scrollTop - controlScrollPos)\n\n        if (diff > checkpoint) {\n            setHideMainHeader(true)\n        } else if (reversePosDiff > checkpoint) {\n            setHideMainHeader(false)\n        }\n    }, [\n        scrollTop,\n        controlScrollPos,\n    ]);\n\n    function onScroll(e: Event) {\n        if (!(e.target instanceof HTMLElement)) {\n            return\n        }\n\n        const scroll = e.target?.scrollTop\n        setScrollTop(scroll)\n    }\n\n    function onScrollFinish(e: Event) {\n        if (!(e.target instanceof HTMLElement)) {\n            return\n        }\n\n        setControlScrollPos(e.target?.scrollTop)\n    }\n\n    // TODO: by ref?\n    // TODO: MOVE SOMEWHERE ELSE BECAUSE IT DECREASE PERFORMANCE (RERENDER)\n    useEffect(() => {\n        document.querySelector(`.${$page.scroll}`)?.addEventListener(\"scroll\", onScroll)\n        document.querySelector(`.${$page.scroll}`)?.addEventListener(\"scrollend\", onScrollFinish)\n\n        return () => {\n            document.querySelector(`.${$page.scroll}`)?.removeEventListener(\"scroll\", onScroll)\n            document.querySelector(`.${$page.scroll}`)?.removeEventListener(\"scrollend\", onScrollFinish)\n        }\n    }, []);\n\n    return {\n        hideMainHeader,\n    }\n}","import {css} from \"@linaria/core\";\n\nconst globalPageGutter = '8px';\nexport const globalHeaderHeight = '46px';\nconst globalHeaderWarningHeight = \"0px\";\nconst contentTopSpace = \"12px\";\n\nconst globalHeaderHeightWithSub = '90px';\n\nconst cubicMove = \"cubic-bezier(.65, 0, .35, 1)\";\nconst sidebarWidth = \"210px\";\n\n// TODO: better solution - design tokens\nexport const globals = css`\n    :global() {\n        :root {\n            --xyd-navbar-height: ${globalHeaderHeight};\n            --xyd-global-page-gutter: ${globalPageGutter};\n        }\n    }\n`;\n\nexport const $layout = {\n    host: css`\n        width: 100%;\n    `,\n    header: css`\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n\n        position: fixed;\n        top: ${globalHeaderWarningHeight};\n        right: ${globalPageGutter};\n        left: ${globalPageGutter};\n\n        height: ${globalHeaderHeight};\n    `,\n    header$$sub: css`\n        flex-direction: column;\n        height: ${globalHeaderHeightWithSub};\n        transition: transform 200ms;\n    `,\n    header$$hideMain: css`\n        transform: translateY(calc(-${globalHeaderHeight} + 3px));\n    `,\n    main: css`\n        position: fixed;\n        top: calc(${globalHeaderHeight} + ${globalHeaderWarningHeight});\n        bottom: ${globalPageGutter};\n        left: ${globalPageGutter};\n        right: ${globalPageGutter};\n    }`,\n    main$$sub: css`\n        top: calc(${globalHeaderHeightWithSub} + ${globalHeaderWarningHeight});\n        transition: top 200ms;\n    `,\n    sidebar: css`\n        flex-direction: column;\n        position: absolute;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        z-index: 101;\n        width: ${sidebarWidth};\n        border: 0;\n        padding: ${contentTopSpace} 0 0;\n        overflow: visible;\n        background: none;\n        border-radius: 0;\n        opacity: 1;\n        visibility: visible;\n        transition: opacity .3s ${cubicMove};\n    `,\n}\n\nexport const $page = {\n    host: css`\n        position: absolute;\n        top: ${contentTopSpace};\n        right: 0;\n        bottom: 0;\n        z-index: 201;\n        background: #fff;\n\n        //border-radius: 8px;\n        //border: 1px solid #ececf1;\n\n        overflow: hidden;\n        transition: opacity .3s ${cubicMove};\n\n        left: ${sidebarWidth};\n    `,\n    scroll: css`\n        //position: absolute;\n        //top: 0;\n        //right: 0;\n        //bottom: 0;\n        //left: 0;\n        //overflow: auto;\n\n        overflow: scroll;\n        height: 100%;\n        \n    `,\n    container: css`\n        padding: 0;\n        width: 100%;\n        //position: relative; TODO: unset if during client render?\n        min-height: 100%;\n\n        max-width: 100%;\n        margin: 0 auto;\n        font-size: 15px;\n        line-height: 24px;\n    `,\n    articleContainer: css`\n        width: 980px;\n        padding: 40px 56px;\n        padding-top: 20px;\n        max-width: 100%;\n        margin: 0 auto;\n    `,\n    articleContainer$$fullWidth: css`\n        width: 1200px;\n    `,\n\n}\n\nexport const $article = {\n    host: css`\n        display: flex;\n        gap: 30px;\n        width: 100%;\n        align-items: flex-start;;\n    `,\n    content: css`\n        flex: 1 1 0;\n        overflow: hidden;\n    `,\n    nav: css`\n        position: sticky;\n        top: 30px;\n        width: 180px;\n        margin-top: 0;\n        margin-left: 50px;\n        padding-left: 16px;\n        flex: none;\n    `\n}","import React, {useEffect, useState} from \"react\"\n\nimport {$layout, $page, $article, globalHeaderHeight} from \"./Layout.styles\"\n\nexport interface LayoutProps {\n    header: React.ReactNode;\n    aside: React.ReactNode;\n    content: React.ReactNode;\n    contentNav: React.ReactNode;\n    subheader?: boolean;\n    kind?: \"fullwidth\"\n}\n\nexport function Layout(props: LayoutProps) {\n    const [hideMainHeader, setHideMainHeader] = useState(false)\n    const [scrollTop, setScrollTop] = useState(0)\n    const [controlScrollPos, setControlScrollPos] = useState(0)\n\n    useEffect(() => {\n        if (scrollTop === controlScrollPos) {\n            return\n        }\n\n        const checkpoint = parseInt(globalHeaderHeight, 10) / 2\n        const diff = scrollTop - controlScrollPos\n        const reversePosDiff = Math.abs(scrollTop - controlScrollPos)\n\n        if (diff > checkpoint) {\n            setHideMainHeader(true)\n        } else if (reversePosDiff > checkpoint) {\n            setHideMainHeader(false)\n        }\n    }, [\n        scrollTop,\n        controlScrollPos,\n    ]);\n\n    function onScroll(e: Event) {\n        if (!(e.target instanceof HTMLElement)) {\n            return\n        }\n\n        const scroll = e.target?.scrollTop\n        setScrollTop(scroll)\n    }\n\n    function onScrollFinish(e: Event) {\n        if (!(e.target instanceof HTMLElement)) {\n            return\n        }\n\n        setControlScrollPos(e.target?.scrollTop)\n    }\n\n    // TODO: by ref?\n    // TODO: MOVE SOMEWHERE ELSE BECAUSE IT DECREASE PERFORMANCE (RERENDER)\n    useEffect(() => {\n        // return // TODO: UNCOMMENT\n\n        if (!props.subheader) {\n            return\n        }\n\n        document.querySelector(`.${$page.scroll}`)?.addEventListener(\"scroll\", onScroll)\n        document.querySelector(`.${$page.scroll}`)?.addEventListener(\"scrollend\", onScrollFinish)\n\n        return () => {\n            document.querySelector(`.${$page.scroll}`)?.removeEventListener(\"scroll\", onScroll)\n            document.querySelector(`.${$page.scroll}`)?.removeEventListener(\"scrollend\", onScrollFinish)\n        }\n    }, []);\n\n    return <div className={$layout.host}>\n        <Layout.Header className={`\n            ${props.subheader && $layout.header$$sub}\n            ${hideMainHeader && $layout.header$$hideMain}\n        `}>\n            {props.header}\n        </Layout.Header>\n        <main className={`\n            ${$layout.main}\n            ${!hideMainHeader && props.subheader && $layout.main$$sub}\n        `}>\n            <aside className={$layout.sidebar}>\n                {props.aside}\n            </aside>\n            <div className={$page.host}>\n                <div className={$page.scroll}>\n                    <div className={$page.container}>\n                        <div className={`\n                            ${$page.articleContainer}\n                            ${props.kind == \"fullwidth\" && $page.articleContainer$$fullWidth}\n                        `}>\n                            <article className={$article.host}>\n                                <section className={$article.content}>\n                                    {props.content}\n                                </section>\n                                {\n                                    props.contentNav && <nav className={`\n                                    ${$article.nav}\n                                `}>\n                                        {props.contentNav}\n                                    </nav>\n                                }\n                            </article>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </main>\n    </div>\n}\n\nLayout.Header = function LayoutHeader({className, children}: { className?: string, children: React.ReactNode }) {\n    return <header className={`\n            ${$layout.header}\n            ${className}\n        `}>\n        {children}\n    </header>\n}\n"],"names":["globalHeaderHeight","$layout","$page","$article","LayoutPrimary","props","_useState","useState","_useState2","_slicedToArray","isMobileNavOpen","setIsMobileNavOpen","_ref","subheader","_useState3","_useState4","hideMainHeader","setHideMainHeader","_useState5","_useState6","scrollTop","setScrollTop","_useState7","_useState8","controlScrollPos","setControlScrollPos","onScroll","e","target","HTMLElement","scroll","_a","onScrollFinish","useEffect","checkpoint","parseInt","diff","reversePosDiff","Math","abs","document","querySelector","concat","addEventListener","_b","removeEventListener","useSubHeader","React","createElement","className","header","onClick","aside","layoutSize","content","contentNav","Layout","Header","kind","children"],"mappings":"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"}

package/dist/pages.js

@@ -1,2 +1,2 @@
-import e from"react";import"./tslib.es6-BJOaQ_lJ.js";import"@radix-ui/react-icons";import{G as t}from"./UnderlineNav-3vpnAIF7.js";import{C as r,B as n}from"./CTABanner-B-metiuR.js";import{H as i}from"./HomeView-C70Vzl0K.js";import"./_rollupPluginBabelHelpers-Dyp77Dty.js";import"@radix-ui/react-tabs";import"lucide-react";var o="hfe0p8m";function l(t){var r;return e.createElement(i,{header:t.header,body:e.createElement(i.Body,null,e.createElement(a,Object.assign({},t)),(null===(r=t.hero)||void 0===r?void 0:r.actions)&&e.createElement(c,Object.assign({},t)),t.children),footer:t.footer})}function a(t){var i,o,l,a,c;return e.createElement(r,null,e.createElement(r.Heading,{title:(null===(i=t.hero)||void 0===i?void 0:i.text)||"",headingEffect:null===(o=t.hero)||void 0===o?void 0:o.textEffect,subtitle:null===(l=t.hero)||void 0===l?void 0:l.subtitle}),(null===(a=null==t?void 0:t.hero)||void 0===a?void 0:a.actions)&&e.createElement(r.ButtonGroup,null,null===(c=null==t?void 0:t.hero)||void 0===c?void 0:c.actions.map((function(t,r){return e.createElement("a",{href:t.href},e.createElement(n,{key:t.text+r,kind:t.kind},t.text))}))))}function c(r){var n;return e.createElement("div",{className:"\n            ".concat(o,"\n            xyd_page-comp-homepage-cards\n        ")},null===(n=r.features)||void 0===n?void 0:n.map((function(r,n){return e.createElement(t,{key:r.title+n,href:r.href||"",title:r.title,icon:r.icon,kind:"secondary",size:"md"},r.description)})))}export{l as HomePage};
+import e from"react";import"./tslib.es6-DUrRPhZd.js";import"@radix-ui/react-icons";import{G as t}from"./UnderlineNav-C2aEVraN.js";import{C as r,B as n}from"./CTABanner-XQNnnpUx.js";import{H as i}from"./HomeView-BVaaV0uE.js";import"./_rollupPluginBabelHelpers-DsEzE6Ab.js";import"@radix-ui/react-tabs";import"lucide-react";var o="hfe0p8m";function l(t){var r;return e.createElement(i,{header:t.header,body:e.createElement(i.Body,null,e.createElement(a,Object.assign({},t)),(null===(r=t.hero)||void 0===r?void 0:r.actions)&&e.createElement(c,Object.assign({},t)),t.children),footer:t.footer})}function a(t){var i,o,l,a,c;return e.createElement(r,null,e.createElement(r.Heading,{title:(null===(i=t.hero)||void 0===i?void 0:i.text)||"",headingEffect:null===(o=t.hero)||void 0===o?void 0:o.textEffect,subtitle:null===(l=t.hero)||void 0===l?void 0:l.subtitle}),(null===(a=null==t?void 0:t.hero)||void 0===a?void 0:a.actions)&&e.createElement(r.ButtonGroup,null,null===(c=null==t?void 0:t.hero)||void 0===c?void 0:c.actions.map((function(t,r){return e.createElement("a",{href:t.href},e.createElement(n,{key:t.text+r,kind:t.kind},t.text))}))))}function c(r){var n;return e.createElement("div",{className:"\n            ".concat(o,"\n            xyd_page-comp-homepage-cards\n        ")},null===(n=r.features)||void 0===n?void 0:n.map((function(r,n){return e.createElement(t,{key:r.title+n,href:r.href||"",title:r.title,icon:r.icon,kind:"secondary",size:"md"},r.description)})))}export{l as HomePage};
 //# sourceMappingURL=pages.js.map

package/dist/{tslib.es6-BJOaQ_lJ.js → tslib.es6-DDIOdJiV.js}

@@ -1,2 +1,2 @@
 function t(t,n){var e={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&n.indexOf(r)<0&&(e[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(t);o<r.length;o++)n.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(t,r[o])&&(e[r[o]]=t[r[o]])}return e}function n(t,n,e,r){return new(e||(e=Promise))((function(o,c){function p(t){try{f(r.next(t))}catch(t){c(t)}}function a(t){try{f(r.throw(t))}catch(t){c(t)}}function f(t){var n;t.done?o(t.value):(n=t.value,n instanceof e?n:new e((function(t){t(n)}))).then(p,a)}f((r=r.apply(t,n||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;export{t as _,n as a};
-//# sourceMappingURL=tslib.es6-BJOaQ_lJ.js.map
+//# sourceMappingURL=tslib.es6-DDIOdJiV.js.map