@xyd-js/components 0.0.0-build-60554d1-20251028180454 → 0.0.0-build-c7bdbdb-20251129215505

package/dist/PageFirstSlide-DlLBIXez.js

@@ -0,0 +1,2 @@
+import*as e from"react";import t from"react";import{H as n,b as a,G as r,N as l,L as i}from"./VideoGuide-BNPKC79p.js";import"./Icon-CbDEiA4L.js";import{T as o}from"./TabsAnalytics-OQlfG-3q.js";import"./useUXEvents-C4q-ORmz.js";import{B as c}from"./Button-BBxaVRAi.js";function s({posts:t=[],tabs:i=[],initialTab:c,heading:s,subheading:m,prevLink:d,nextLink:u,as:v=""}){var p;const[E,h]=e.useState(c||i&&(null===(p=i[0])||void 0===p?void 0:p.value)||""),g=e.useMemo(()=>"everything"===E?t:null==t?void 0:t.filter(e=>e.tag.toLowerCase()===E),[E,t]);return e.createElement("page-blog-home",{className:"p1evzq73"},e.createElement(n,{size:1,subtitle:m},s),e.createElement(a,{value:E,onChange:h},i.map(t=>e.createElement(a.Item,{as:v,href:t.href,value:t.value},t.label))),e.createElement("div",{part:"posts"},g.map(t=>e.createElement(r,{key:t.id,href:t.href,kind:"secondary",size:"md"},e.createElement("div",{part:"card-content"},e.createElement("div",{part:"card-image"},e.createElement("img",{src:t.image,alt:t.title})),e.createElement(o,{size:"small",kind:"primary",as:"span"},t.tag),e.createElement(r.Title,null,e.createElement(o,{size:"large",weight:"bold",as:"span"},t.title)),e.createElement("div",{part:"card-author-row"},e.createElement("img",{src:t.author.avatar,alt:t.author.name,part:"card-author-avatar"}),e.createElement(o,{size:"small",as:"span"},t.author.name),e.createElement(o,{size:"small",kind:"secondary",as:"span"},t.date)))))),e.createElement("div",{part:"pagination"},e.createElement(l,{prev:d,next:u})))}var m="g1wc20vm";function d({children:e,cols:n}){return t.createElement("xyd-grid-decorator",{className:m,"data-cols":n},e)}function u(t){var a,l,o,s,m;return e.createElement("page-home",{className:"p1liujz1"},e.createElement("div",{part:"hero"},(null===(a=null==t?void 0:t.hero)||void 0===a?void 0:a.image)?e.createElement("img",{src:t.hero.image,alt:t.hero.title}):null,e.createElement(n,{size:1},null===(l=t.hero)||void 0===l?void 0:l.title),e.createElement(n,{size:3,kind:"muted"},null===(o=t.hero)||void 0===o?void 0:o.description),(null===(s=null==t?void 0:t.hero)||void 0===s?void 0:s.button)?e.createElement(c,{size:"lg",href:t.hero.button.href},t.hero.button.title):null),e.createElement("div",{part:"sections"},null===(m=t.sections)||void 0===m?void 0:m.map((t,a)=>{var l,o;return e.createElement(e.Fragment,{key:`${t.title}-${a}`},(null==t?void 0:t.title)?e.createElement("div",{part:"section-title"},e.createElement(n,{size:3},t.title)):null,(null===(l=null==t?void 0:t.cards)||void 0===l?void 0:l.length)?e.createElement("div",{part:"section-cards"},e.createElement(d,{cols:3},e.createElement(i,null,e.createElement(i.Item,null,e.createElement(i,null,null===(o=t.cards)||void 0===o?void 0:o.map((t,n)=>e.createElement(i.Item,{key:`${t.title}-${n}`},e.createElement(r,Object.assign({},t))))))))):null)})))}function v(t){var a,r,l,i;return e.createElement("page-first-slide",{className:"p1s96yum"},e.createElement("div",{part:"left"},(null===(a=t.content)||void 0===a?void 0:a.title)&&e.createElement(n,{size:1},t.content.title),(null===(r=t.content)||void 0===r?void 0:r.description)&&e.createElement(n,{size:4,kind:"muted"},t.content.description),e.createElement("div",{part:"buttons"},(null===(l=t.content)||void 0===l?void 0:l.primaryButton)&&e.createElement(c,{href:t.content.primaryButton.href,kind:t.content.primaryButton.kind||"primary",size:"lg",disabled:t.content.primaryButton.disabled},t.content.primaryButton.title),(null===(i=t.content)||void 0===i?void 0:i.secondaryButton)&&e.createElement(c,{href:t.content.secondaryButton.href,kind:t.content.secondaryButton.kind||"secondary",size:"lg",disabled:t.content.secondaryButton.disabled},t.content.secondaryButton.title))),e.createElement("div",{part:"right"},t.rightContent))}export{d as G,s as P,u as a,v as b};
+//# sourceMappingURL=PageFirstSlide-DlLBIXez.js.map

package/dist/{PageFirstSlide-Cbab4uNo.js.map → PageFirstSlide-DlLBIXez.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PageFirstSlide-Cbab4uNo.js","sources":["../src/pages/PageBlogHome/PageBlogHome.tsx","../src/pages/PageBlogHome/PageBlogHome.styles.tsx","../src/content/GridDecorator.styles.tsx","../src/content/GridDecorator.tsx","../src/pages/PageHome/PageHome.tsx","../src/pages/PageHome/PageHome.styles.tsx","../src/pages/PageFirstSlide/PageFirstSlide.tsx","../src/pages/PageFirstSlide/PageFirstSlide.styles.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { Heading, NavLinks, Tabs, GuideCard, Text } from \"../../writer\"\n\nimport * as cn from \"./PageBlogHome.styles\"\nimport { PageBlogHomeProps, BlogPost, BlogTab } from \"./types\"\n\nexport function PageBlogHome({\n    posts = [],\n    tabs = [],\n    initialTab,\n    heading,\n    subheading,\n    prevLink,\n    nextLink,\n    as = \"\",\n}: PageBlogHomeProps) {\n    const [tab, setTab] = React.useState(initialTab || (tabs && tabs[0]?.value) || \"\")\n\n    const filteredPosts = React.useMemo(() => {\n        if (tab === \"everything\") return posts\n        return posts?.filter(post => post.tag.toLowerCase() === tab)\n    }, [tab, posts])\n\n    return <page-blog-home className={cn.PageBlogHome}>\n        <Heading size={1} subtitle={subheading}>{heading}</Heading>\n        <Tabs value={tab} onChange={setTab}>\n            {tabs.map(t => (\n                <Tabs.Item as={as} href={t.href} value={t.value}>{t.label}</Tabs.Item>\n            ))}\n        </Tabs>\n        <div part=\"posts\">\n            {filteredPosts.map(post => (\n                <GuideCard\n                    key={post.id}\n                    href={post.href}\n                    kind=\"secondary\"\n                    size=\"md\"\n                >\n                    <div part=\"card-content\">\n                        <div part=\"card-image\">\n                            <img src={post.image} alt={post.title} />\n                        </div>\n                        <Text size=\"small\" kind=\"primary\" as=\"span\">{post.tag}</Text>\n                        <GuideCard.Title>\n                            <Text size=\"large\" weight=\"bold\" as=\"span\">{post.title}</Text>\n                        </GuideCard.Title>\n                        <div part=\"card-author-row\">\n                            <img src={post.author.avatar} alt={post.author.name} part=\"card-author-avatar\" />\n                            <Text size=\"small\" as=\"span\">{post.author.name}</Text>\n                            <Text size=\"small\" kind=\"secondary\" as=\"span\">{post.date}</Text>\n                        </div>\n                    </div>\n                </GuideCard>\n            ))}\n        </div>\n        <div part=\"pagination\">\n            <NavLinks\n                prev={prevLink}\n                next={nextLink}\n            />\n        </div>\n    </page-blog-home>\n}","import { css } from \"@linaria/core\"\n\nexport const PageBlogHome = css`\n    --page-blog-home-padding: calc(var(--xyd-nav-item-padding) + var(--xyd-nav-padding));\n    max-width: var(--page-bloghome-max-width, 800px);\n    margin: 0 auto;\n    padding: 48px var(--page-blog-home-padding) 0 var(--page-blog-home-padding);\n    display: flex;\n    flex-direction: column;\n\n    [part=\"posts\"] {\n        --spacing: .25rem;\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(calc(var(--spacing) * 80), 1fr));\n        grid-gap: calc(var(--spacing) * 12) calc(var(--spacing) * 8);\n        min-height: 430px;\n        \n        margin-top: 24px;\n        margin-bottom: 24px;\n    }\n\n    [part=\"pagination\"] {\n        margin-top: 32px;\n    }\n\n    [part=\"card-content\"] {\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n    }\n\n    [part=\"card-image\"] {\n        width: 100%;\n        height: 180px;\n        overflow: hidden;\n        border-radius: 8px;\n        margin-bottom: 16px;\n        img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            display: block;\n        }\n    }\n\n    [part=\"card-author-row\"] {\n        display: flex;\n        align-items: end;\n        flex: 1;\n        gap: 8px;\n        margin-top: 8px;\n    }\n\n    [part=\"card-author-avatar\"] {\n        width: 32px;\n        height: 32px;\n        border-radius: 50%;\n        object-fit: cover;\n        display: block;\n    }\n\n    xyd-guidecard {\n        [part=\"right\"], [part=\"body\"], [part=\"card-content\"] {\n            height: 100%;\n        }\n    }\n`;","import { css } from \"@linaria/core\";\n\nexport default {\n    GridDecoratorHost: css`\n        @layer components {\n            display: grid;\n            gap: 1rem;\n            width: 100%;\n\n            /* First level ul - 1fr */\n            > ul {\n                display: grid;\n                grid-template-columns: 1fr;\n                gap: 1rem;\n                width: 100%;\n            }\n\n            /* Nested ul - 2fr */\n            ul ul {\n                display: grid;\n                grid-template-columns: repeat(2, 1fr);\n                gap: 1rem;\n                width: 100%;\n            }\n\n\n            &[data-cols=\"2\"] { --data-cols: 2; }\n            &[data-cols=\"3\"] { --data-cols: 3; }\n            &[data-cols=\"4\"] { --data-cols: 4; }\n            &[data-cols=\"5\"] { --data-cols: 5; }\n            &[data-cols=\"6\"] { --data-cols: 6; }\n\n            &[data-cols] {\n                --cols: var(--data-cols, 2);\n                ul ul {\n                    grid-template-columns: repeat(var(--cols), 1fr);\n                }\n            }\n\n            @media (max-width: 768px) {\n                > ul {\n                    gap: 0;\n                }\n                ul ul {\n                    grid-template-columns: 1fr;\n                }\n                \n                /* Override data-cols for mobile */\n                &[data-cols] {\n                    --data-cols: 1;\n                }\n            }\n\n            /* Tablet breakpoint for 2 columns */\n            @media (min-width: 769px) and (max-width: 1024px) {\n                ul ul {\n                    grid-template-columns: repeat(2, 1fr);\n                }\n                \n                /* Override data-cols for tablet */\n                &[data-cols] {\n                    --data-cols: 2;\n                }\n            }\n\n\n            ul, ol, li {\n                &::before {\n                    content: none;\n                }\n            }\n\n            ul, ol {\n                display: grid;\n                margin: 0;\n                padding: 0 !important;\n                list-style: none;\n            }\n\n            li {\n                margin-left: 0 !important;\n                padding-left: 0 !important;\n            }\n        }\n    `\n}\n","import React from 'react'\n\nimport cn from \"./GridDecorator.styles\";\n\nexport interface GridDecoratorProps {\n    children: React.ReactNode\n    cols?: 2 | 3 | 4 | 5 | 6\n}\n\n/**\n * A wrapper component that applies grid decoration styling to its children.\n * This component uses a custom element `xyd-grid-decorator` to provide grid-based layout decoration.\n *\n * @category Component\n */\nexport function GridDecorator({ children, cols }: GridDecoratorProps) {\n    return <xyd-grid-decorator\n        className={cn.GridDecoratorHost}\n        data-cols={cols}\n    >\n        {children}\n    </xyd-grid-decorator>\n}\n","import * as React from \"react\"\n\nimport {\n    Heading,\n    GuideCard,\n    List,\n    Button,\n} from \"../../writer\";\n\n\nimport { PageHomeProps } from \"./types\";\nimport { GridDecorator } from \"../../content/GridDecorator\";\n\nimport * as cn from \"./PageHome.styles\"\n\nexport function PageHome(props: PageHomeProps) {\n    return <page-home className={cn.PageHome}>\n        <div part=\"hero\">\n            {props?.hero?.image ? <img src={props.hero.image} alt={props.hero.title} /> : null}\n            <Heading size={1}>\n                {props.hero?.title}\n            </Heading>\n            <Heading size={3} kind=\"muted\">\n                {props.hero?.description}\n            </Heading>\n\n            {props?.hero?.button ? <Button size=\"lg\" href={props.hero.button.href}>{props.hero.button.title}</Button> : null}\n        </div>\n\n        <div part=\"sections\">\n            {\n                props.sections?.map((section, index) => <React.Fragment key={`${section.title}-${index}`}>\n                    {\n                        section?.title ? <div part=\"section-title\">\n                            <Heading size={3}>\n                                {section.title}\n                            </Heading>\n                        </div> : null\n                    }\n\n                    {\n                        section?.cards?.length ? <div part=\"section-cards\">\n                            <GridDecorator cols={3}>\n                                <List>\n                                    <List.Item>\n                                        <List>\n                                            {section.cards?.map((card, index) => (\n                                                <List.Item key={`${card.title}-${index}`}>\n                                                    <GuideCard {...card} />\n                                                </List.Item>\n                                            ))}\n                                        </List>\n                                    </List.Item>\n                                </List>\n                            </GridDecorator>\n                        </div> : null\n                    }\n                </React.Fragment>)\n            }\n        </div>\n    </page-home>\n}","import { css } from \"@linaria/core\";\n\nexport const globals = css`\n    :global() {\n        :root {\n            --page-home-hero-font-size: 50px;\n        }\n    }\n`;\n\nexport const PageHome = css`\n    [part=\"hero\"] {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        padding: 80px 50px;\n        background: var(--page-home-hero-background);\n\n        h1 {\n            font-size: var(--page-home-hero-font-size, 50px);\n            text-align: center;\n        }\n        h1, h2, h3, h4, h5, h6 {\n            font-weight: 400;\n        }\n\n        img {\n            width: auto;\n            max-height: 60px;\n            padding-bottom: 18px;\n        }\n\n        [data-button=\"true\"] {\n            margin-top: var(--xyd-padding-xlarge);\n        }\n    }\n\n    [part=\"sections\"] {\n        max-width: var(--page-home-container-width, 1300px);\n        margin: 0 auto;\n        padding: 30px 100px;\n    }\n\n    @media (max-width: 1024px) {\n        [part=\"sections\"] {\n            padding: 25px;\n            padding-inline: var(--theme-sidebar-padding-total, 25px);\n        }\n    }\n`; ","import * as React from \"react\"\n\nimport {\n    Heading,\n    Button,\n} from \"../../writer\";\n\nimport { PageFirstSlideProps } from \"./types\";\n\nimport * as cn from \"./PageFirstSlide.styles\"\n\nexport function PageFirstSlide(props: PageFirstSlideProps) {\n    return <page-first-slide className={cn.PageFirstSlide}>\n        <div part=\"left\">\n            {props.content?.title && (\n                <Heading size={1}>\n                    {props.content.title}\n                </Heading>\n            )}\n\n            {props.content?.description && (\n                <Heading size={4} kind=\"muted\">\n                    {props.content.description}\n                </Heading>\n            )}\n\n            <div part=\"buttons\">\n                {props.content?.primaryButton && (\n                    <Button\n                        href={props.content.primaryButton.href}\n                        kind={props.content.primaryButton.kind || \"primary\"}\n                        size=\"lg\"\n                        disabled={props.content.primaryButton.disabled}\n                    >\n                        {props.content.primaryButton.title}\n                    </Button>\n                )}\n\n                {props.content?.secondaryButton && (\n                    <Button\n                        href={props.content.secondaryButton.href}\n                        kind={props.content.secondaryButton.kind || \"secondary\"}\n                        size=\"lg\"\n                        disabled={props.content.secondaryButton.disabled}\n                    >\n                        {props.content.secondaryButton.title}\n                    </Button>\n                )}\n            </div>\n        </div>\n\n        <div part=\"right\">\n            {props.rightContent}\n        </div>\n    </page-first-slide>\n} ","import { css } from \"@linaria/core\";\n\nexport const globals = css`\n    :global() {\n        @layer themedecorator {\n            xyd-layout-primary[data-layout=\"page\"] {\n                [part=\"page-article-content\"] {\n                    height: 100%;\n                }\n            }\n            @media (min-width: 1024px) {\n                xyd-layout-primary[data-layout=\"page\"] {\n                    grid-template-rows: auto 1fr auto;\n                    grid-template-columns: 1fr;\n                    width: 100%;\n                    height: max-content;\n                    min-height: 100%;\n                    display: grid;\n                }\n            }\n            \n            body:has(xyd-layout-primary[data-layout=\"page\"]) {\n                height: 100%;\n            }\n            html:has(body xyd-layout-primary[data-layout=\"page\"]) {\n                height: 100%;\n            }\n            \n            [data-color-scheme=\"dark\"] {\n                --page-first-slide-special-text-color: var(--xyd-heading-color, #fff);\n            }\n            @media (prefers-color-scheme: dark) {\n                --page-first-slide-special-text-color: var(--xyd-heading-color, #fff);\n            }\n            @media (prefers-color-scheme: dark) {\n                :root:not([data-color-scheme=\"light\"]):not([data-color-scheme=\"dark\"]) {\n                    --page-first-slide-special-text-color: var(--xyd-heading-color, #fff);\n                }\n            }\n        }\n    }\n`\n\nexport const PageFirstSlide = css`\n    display: grid;\n    grid-template-columns: 2fr 3fr;\n    gap: 60px;\n    align-items: center;\n    max-width: var(--page-first-slide-container-width, var(--page-home-container-width, 1200px));\n    margin: 0 auto;\n    padding: 50px;\n    height: 100%;\n\n    [part=\"left\"] {\n        display: flex;\n        flex-direction: column;\n        gap: 24px;\n\n        h1 {\n            --special-text-color: var(--page-first-slide-special-text-color, #353535);\n            background-image: linear-gradient(180deg, var(--special-text-color) 0%, \n        color-mix(in oklab, var(--special-text-color) 80%, transparent) 100%);\n            background-clip: text;\n            -webkit-text-fill-color: transparent;\n            -webkit-background-clip: text;\n            font-size: var(--xyd-font-size-3xl);\n            line-height: var(--xyd-line-height-3xl);\n        }\n    }\n\n    [part=\"buttons\"] {\n        display: flex;\n        flex-direction: column;\n        gap: 16px;\n        margin-top: 16px;\n\n        [data-button=\"true\"] {\n            width: 100%;\n        }\n    }\n\n    [part=\"right\"] {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        min-height: 400px;\n\n        img {\n            max-width: 100%;\n            height: auto;\n        }\n\n        pre {\n            width: 100%;\n            max-width: 100%;\n            overflow-x: auto;\n        }\n    }\n\n    @media (max-width: 768px) {\n        grid-template-columns: 1fr;\n        gap: 40px;\n        padding: 40px 20px;\n        min-height: auto;\n\n        [part=\"left\"] {\n            order: 1;\n            text-align: center;\n        }\n\n        [part=\"right\"] {\n            order: 2;\n            min-height: 300px;\n        }\n\n        [part=\"buttons\"] {\n            align-items: center;\n\n            [data-button=\"true\"] {\n                width: 100%;\n                max-width: 300px;\n            }\n        }\n    }\n\n    xyd-codetabs {\n        width: 100%;\n    }\n\n    @media (max-width: 480px) {\n        padding: 20px 16px;\n        gap: 32px;\n    }\n`; "],"names":["PageBlogHome","_ref","_ref$posts","posts","_ref$tabs","tabs","initialTab","heading","subheading","prevLink","nextLink","_ref$as","as","_React$useState","React","useState","_a","value","_React$useState2","_slicedToArray","tab","setTab","filteredPosts","useMemo","filter","post","tag","toLowerCase","createElement","className","Heading","size","subtitle","Tabs","onChange","map","t","Item","href","label","part","GuideCard","key","id","kind","src","image","alt","title","Text","Title","weight","author","avatar","name","date","NavLinks","prev","next","cn","GridDecorator","children","cols","PageHome","props","hero","_b","_c","description","_d","button","Button","_e","sections","section","index","Fragment","concat","cards","length","List","card","Object","assign","PageFirstSlide","content","primaryButton","disabled","secondaryButton","rightContent"],"mappings":"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"}
+{"version":3,"file":"PageFirstSlide-DlLBIXez.js","sources":["../src/pages/PageBlogHome/PageBlogHome.tsx","../src/pages/PageBlogHome/PageBlogHome.styles.tsx","../src/content/GridDecorator.styles.tsx","../src/content/GridDecorator.tsx","../src/pages/PageHome/PageHome.tsx","../src/pages/PageHome/PageHome.styles.tsx","../src/pages/PageFirstSlide/PageFirstSlide.tsx","../src/pages/PageFirstSlide/PageFirstSlide.styles.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { Heading, NavLinks, Tabs, GuideCard, Text } from \"../../writer\"\n\nimport * as cn from \"./PageBlogHome.styles\"\nimport { PageBlogHomeProps, BlogPost, BlogTab } from \"./types\"\n\nexport function PageBlogHome({\n    posts = [],\n    tabs = [],\n    initialTab,\n    heading,\n    subheading,\n    prevLink,\n    nextLink,\n    as = \"\",\n}: PageBlogHomeProps) {\n    const [tab, setTab] = React.useState(initialTab || (tabs && tabs[0]?.value) || \"\")\n\n    const filteredPosts = React.useMemo(() => {\n        if (tab === \"everything\") return posts\n        return posts?.filter(post => post.tag.toLowerCase() === tab)\n    }, [tab, posts])\n\n    return <page-blog-home className={cn.PageBlogHome}>\n        <Heading size={1} subtitle={subheading}>{heading}</Heading>\n        <Tabs value={tab} onChange={setTab}>\n            {tabs.map(t => (\n                <Tabs.Item as={as} href={t.href} value={t.value}>{t.label}</Tabs.Item>\n            ))}\n        </Tabs>\n        <div part=\"posts\">\n            {filteredPosts.map(post => (\n                <GuideCard\n                    key={post.id}\n                    href={post.href}\n                    kind=\"secondary\"\n                    size=\"md\"\n                >\n                    <div part=\"card-content\">\n                        <div part=\"card-image\">\n                            <img src={post.image} alt={post.title} />\n                        </div>\n                        <Text size=\"small\" kind=\"primary\" as=\"span\">{post.tag}</Text>\n                        <GuideCard.Title>\n                            <Text size=\"large\" weight=\"bold\" as=\"span\">{post.title}</Text>\n                        </GuideCard.Title>\n                        <div part=\"card-author-row\">\n                            <img src={post.author.avatar} alt={post.author.name} part=\"card-author-avatar\" />\n                            <Text size=\"small\" as=\"span\">{post.author.name}</Text>\n                            <Text size=\"small\" kind=\"secondary\" as=\"span\">{post.date}</Text>\n                        </div>\n                    </div>\n                </GuideCard>\n            ))}\n        </div>\n        <div part=\"pagination\">\n            <NavLinks\n                prev={prevLink}\n                next={nextLink}\n            />\n        </div>\n    </page-blog-home>\n}","import { css } from \"@linaria/core\"\n\nexport const PageBlogHome = css`\n    --page-blog-home-padding: calc(var(--xyd-nav-item-padding) + var(--xyd-nav-padding));\n    max-width: var(--page-bloghome-max-width, 800px);\n    margin: 0 auto;\n    padding: 48px var(--page-blog-home-padding) 0 var(--page-blog-home-padding);\n    display: flex;\n    flex-direction: column;\n\n    [part=\"posts\"] {\n        --spacing: .25rem;\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(calc(var(--spacing) * 80), 1fr));\n        grid-gap: calc(var(--spacing) * 12) calc(var(--spacing) * 8);\n        min-height: 430px;\n        \n        margin-top: 24px;\n        margin-bottom: 24px;\n    }\n\n    [part=\"pagination\"] {\n        margin-top: 32px;\n    }\n\n    [part=\"card-content\"] {\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n    }\n\n    [part=\"card-image\"] {\n        width: 100%;\n        height: 180px;\n        overflow: hidden;\n        border-radius: 8px;\n        margin-bottom: 16px;\n        img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            display: block;\n        }\n    }\n\n    [part=\"card-author-row\"] {\n        display: flex;\n        align-items: end;\n        flex: 1;\n        gap: 8px;\n        margin-top: 8px;\n    }\n\n    [part=\"card-author-avatar\"] {\n        width: 32px;\n        height: 32px;\n        border-radius: 50%;\n        object-fit: cover;\n        display: block;\n    }\n\n    xyd-guidecard {\n        [part=\"right\"], [part=\"body\"], [part=\"card-content\"] {\n            height: 100%;\n        }\n    }\n`;","import { css } from \"@linaria/core\";\n\nexport default {\n    GridDecoratorHost: css`\n        @layer components {\n            display: grid;\n            gap: 1rem;\n            width: 100%;\n\n            /* First level ul - 1fr */\n            > ul {\n                display: grid;\n                grid-template-columns: 1fr;\n                gap: 1rem;\n                width: 100%;\n            }\n\n            /* Nested ul - 2fr */\n            ul ul {\n                display: grid;\n                grid-template-columns: repeat(2, 1fr);\n                gap: 1rem;\n                width: 100%;\n            }\n\n\n            &[data-cols=\"2\"] { --data-cols: 2; }\n            &[data-cols=\"3\"] { --data-cols: 3; }\n            &[data-cols=\"4\"] { --data-cols: 4; }\n            &[data-cols=\"5\"] { --data-cols: 5; }\n            &[data-cols=\"6\"] { --data-cols: 6; }\n\n            &[data-cols] {\n                --cols: var(--data-cols, 2);\n                ul ul {\n                    grid-template-columns: repeat(var(--cols), 1fr);\n                }\n            }\n\n            @media (max-width: 768px) {\n                > ul {\n                    gap: 0;\n                }\n                ul ul {\n                    grid-template-columns: 1fr;\n                }\n                \n                /* Override data-cols for mobile */\n                &[data-cols] {\n                    --data-cols: 1;\n                }\n            }\n\n            /* Tablet breakpoint for 2 columns */\n            @media (min-width: 769px) and (max-width: 1024px) {\n                ul ul {\n                    grid-template-columns: repeat(2, 1fr);\n                }\n                \n                /* Override data-cols for tablet */\n                &[data-cols] {\n                    --data-cols: 2;\n                }\n            }\n\n\n            ul, ol, li {\n                &::before {\n                    content: none;\n                }\n            }\n\n            ul, ol {\n                display: grid;\n                margin: 0;\n                padding: 0 !important;\n                list-style: none;\n            }\n\n            li {\n                margin-left: 0 !important;\n                padding-left: 0 !important;\n            }\n        }\n    `\n}\n","import React from 'react'\n\nimport cn from \"./GridDecorator.styles\";\n\nexport interface GridDecoratorProps {\n    children: React.ReactNode\n    cols?: 2 | 3 | 4 | 5 | 6\n}\n\n/**\n * A wrapper component that applies grid decoration styling to its children.\n * This component uses a custom element `xyd-grid-decorator` to provide grid-based layout decoration.\n *\n * @category Component\n */\nexport function GridDecorator({ children, cols }: GridDecoratorProps) {\n    return <xyd-grid-decorator\n        className={cn.GridDecoratorHost}\n        data-cols={cols}\n    >\n        {children}\n    </xyd-grid-decorator>\n}\n","import * as React from \"react\"\n\nimport {\n    Heading,\n    GuideCard,\n    List,\n    Button,\n} from \"../../writer\";\n\n\nimport { PageHomeProps } from \"./types\";\nimport { GridDecorator } from \"../../content/GridDecorator\";\n\nimport * as cn from \"./PageHome.styles\"\n\nexport function PageHome(props: PageHomeProps) {\n    return <page-home className={cn.PageHome}>\n        <div part=\"hero\">\n            {props?.hero?.image ? <img src={props.hero.image} alt={props.hero.title} /> : null}\n            <Heading size={1}>\n                {props.hero?.title}\n            </Heading>\n            <Heading size={3} kind=\"muted\">\n                {props.hero?.description}\n            </Heading>\n\n            {props?.hero?.button ? <Button size=\"lg\" href={props.hero.button.href}>{props.hero.button.title}</Button> : null}\n        </div>\n\n        <div part=\"sections\">\n            {\n                props.sections?.map((section, index) => <React.Fragment key={`${section.title}-${index}`}>\n                    {\n                        section?.title ? <div part=\"section-title\">\n                            <Heading size={3}>\n                                {section.title}\n                            </Heading>\n                        </div> : null\n                    }\n\n                    {\n                        section?.cards?.length ? <div part=\"section-cards\">\n                            <GridDecorator cols={3}>\n                                <List>\n                                    <List.Item>\n                                        <List>\n                                            {section.cards?.map((card, index) => (\n                                                <List.Item key={`${card.title}-${index}`}>\n                                                    <GuideCard {...card} />\n                                                </List.Item>\n                                            ))}\n                                        </List>\n                                    </List.Item>\n                                </List>\n                            </GridDecorator>\n                        </div> : null\n                    }\n                </React.Fragment>)\n            }\n        </div>\n    </page-home>\n}","import { css } from \"@linaria/core\";\n\nexport const globals = css`\n    :global() {\n        :root {\n            --page-home-hero-font-size: 50px;\n        }\n    }\n`;\n\nexport const PageHome = css`\n    [part=\"hero\"] {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        padding: 80px 50px;\n        background: var(--page-home-hero-background);\n\n        h1 {\n            font-size: var(--page-home-hero-font-size, 50px);\n            text-align: center;\n        }\n        h1, h2, h3, h4, h5, h6 {\n            font-weight: 400;\n        }\n\n        img {\n            width: auto;\n            max-height: 60px;\n            padding-bottom: 18px;\n        }\n\n        [data-button=\"true\"] {\n            margin-top: var(--xyd-padding-xlarge);\n        }\n    }\n\n    [part=\"sections\"] {\n        max-width: var(--page-home-container-width, 1300px);\n        margin: 0 auto;\n        padding: 30px 100px;\n    }\n\n    @media (max-width: 1024px) {\n        [part=\"sections\"] {\n            padding: 25px;\n            padding-inline: var(--theme-sidebar-padding-total, 25px);\n        }\n    }\n`; ","import * as React from \"react\"\n\nimport {\n    Heading,\n    Button,\n} from \"../../writer\";\n\nimport { PageFirstSlideProps } from \"./types\";\n\nimport * as cn from \"./PageFirstSlide.styles\"\n\nexport function PageFirstSlide(props: PageFirstSlideProps) {\n    return <page-first-slide className={cn.PageFirstSlide}>\n        <div part=\"left\">\n            {props.content?.title && (\n                <Heading size={1}>\n                    {props.content.title}\n                </Heading>\n            )}\n\n            {props.content?.description && (\n                <Heading size={4} kind=\"muted\">\n                    {props.content.description}\n                </Heading>\n            )}\n\n            <div part=\"buttons\">\n                {props.content?.primaryButton && (\n                    <Button\n                        href={props.content.primaryButton.href}\n                        kind={props.content.primaryButton.kind || \"primary\"}\n                        size=\"lg\"\n                        disabled={props.content.primaryButton.disabled}\n                    >\n                        {props.content.primaryButton.title}\n                    </Button>\n                )}\n\n                {props.content?.secondaryButton && (\n                    <Button\n                        href={props.content.secondaryButton.href}\n                        kind={props.content.secondaryButton.kind || \"secondary\"}\n                        size=\"lg\"\n                        disabled={props.content.secondaryButton.disabled}\n                    >\n                        {props.content.secondaryButton.title}\n                    </Button>\n                )}\n            </div>\n        </div>\n\n        <div part=\"right\">\n            {props.rightContent}\n        </div>\n    </page-first-slide>\n} ","import { css } from \"@linaria/core\";\n\nexport const globals = css`\n    :global() {\n        @layer themedecorator {\n            xyd-layout-primary[data-layout=\"page\"] {\n                [part=\"page-article-content\"] {\n                    height: 100%;\n                }\n            }\n            @media (min-width: 1024px) {\n                xyd-layout-primary[data-layout=\"page\"] {\n                    grid-template-rows: auto 1fr auto;\n                    grid-template-columns: 1fr;\n                    width: 100%;\n                    height: max-content;\n                    min-height: 100%;\n                    display: grid;\n                }\n            }\n            \n            body:has(xyd-layout-primary[data-layout=\"page\"]) {\n                height: 100%;\n            }\n            html:has(body xyd-layout-primary[data-layout=\"page\"]) {\n                height: 100%;\n            }\n            \n            [data-color-scheme=\"dark\"] {\n                --page-first-slide-special-text-color: var(--xyd-heading-color, #fff);\n            }\n            @media (prefers-color-scheme: dark) {\n                --page-first-slide-special-text-color: var(--xyd-heading-color, #fff);\n            }\n            @media (prefers-color-scheme: dark) {\n                :root:not([data-color-scheme=\"light\"]):not([data-color-scheme=\"dark\"]) {\n                    --page-first-slide-special-text-color: var(--xyd-heading-color, #fff);\n                }\n            }\n        }\n    }\n`\n\nexport const PageFirstSlide = css`\n    display: grid;\n    grid-template-columns: 2fr 3fr;\n    gap: 60px;\n    align-items: center;\n    max-width: var(--page-first-slide-container-width, var(--page-home-container-width, 1200px));\n    margin: 0 auto;\n    padding: 50px;\n    height: 100%;\n\n    [part=\"left\"] {\n        display: flex;\n        flex-direction: column;\n        gap: 24px;\n\n        h1 {\n            --special-text-color: var(--page-first-slide-special-text-color, #353535);\n            background-image: linear-gradient(180deg, var(--special-text-color) 0%, \n        color-mix(in oklab, var(--special-text-color) 80%, transparent) 100%);\n            background-clip: text;\n            -webkit-text-fill-color: transparent;\n            -webkit-background-clip: text;\n            font-size: var(--xyd-font-size-3xl);\n            line-height: var(--xyd-line-height-3xl);\n        }\n    }\n\n    [part=\"buttons\"] {\n        display: flex;\n        flex-direction: column;\n        gap: 16px;\n        margin-top: 16px;\n\n        [data-button=\"true\"] {\n            width: 100%;\n        }\n    }\n\n    [part=\"right\"] {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        min-height: 400px;\n\n        img {\n            max-width: 100%;\n            height: auto;\n        }\n\n        pre {\n            width: 100%;\n            max-width: 100%;\n            overflow-x: auto;\n        }\n    }\n\n    @media (max-width: 768px) {\n        grid-template-columns: 1fr;\n        gap: 40px;\n        padding: 40px 20px;\n        min-height: auto;\n\n        [part=\"left\"] {\n            order: 1;\n            text-align: center;\n        }\n\n        [part=\"right\"] {\n            order: 2;\n            min-height: 300px;\n        }\n\n        [part=\"buttons\"] {\n            align-items: center;\n\n            [data-button=\"true\"] {\n                width: 100%;\n                max-width: 300px;\n            }\n        }\n    }\n\n    xyd-codetabs {\n        width: 100%;\n    }\n\n    @media (max-width: 480px) {\n        padding: 20px 16px;\n        gap: 32px;\n    }\n`; "],"names":["PageBlogHome","posts","tabs","initialTab","heading","subheading","prevLink","nextLink","as","tab","setTab","React","useState","_a","value","filteredPosts","useMemo","filter","post","tag","toLowerCase","createElement","className","Heading","size","subtitle","Tabs","onChange","map","t","Item","href","label","part","GuideCard","key","id","kind","src","image","alt","title","Text","Title","weight","author","avatar","name","date","NavLinks","prev","next","cn","GridDecoratorHost","GridDecorator","children","cols","PageHome","props","hero","_b","_c","description","_d","button","Button","_e","sections","section","index","Fragment","cards","length","List","card","Object","assign","PageFirstSlide","content","primaryButton","disabled","secondaryButton","rightContent"],"mappings":"4QAOM,SAAUA,GAAaC,MACzBA,EAAQ,GAAEC,KACVA,EAAO,GAAEC,WACTA,EAAUC,QACVA,EAAOC,WACPA,EAAUC,SACVA,EAAQC,SACRA,EAAQC,GACRA,EAAK,WAEL,MAAOC,EAAKC,GAAUC,EAAMC,SAAST,GAAeD,IAAe,QAAPW,EAAAX,EAAK,UAAE,IAAAW,OAAA,EAAAA,EAAEC,QAAU,IAEzEC,EAAgBJ,EAAMK,QAAQ,IACpB,eAARP,EAA6BR,EAC1BA,aAAK,EAALA,EAAOgB,OAAOC,GAAQA,EAAKC,IAAIC,gBAAkBX,GACzD,CAACA,EAAKR,IAET,OAAOU,EAAAU,cAAA,iBAAA,CAAgBC,UCtBdtB,YDuBLW,EAAAU,cAACE,EAAO,CAACC,KAAM,EAAGC,SAAUpB,GAAaD,GACzCO,EAAAU,cAACK,GAAKZ,MAAOL,EAAKkB,SAAUjB,GACvBR,EAAK0B,IAAIC,GACNlB,EAAAU,cAACK,EAAKI,MAAKtB,GAAIA,EAAIuB,KAAMF,EAAEE,KAAMjB,MAAOe,EAAEf,OAAQe,EAAEG,SAG5DrB,EAAAU,cAAA,MAAA,CAAKY,KAAK,SACLlB,EAAca,IAAIV,GACfP,EAAAU,cAACa,EAAS,CACNC,IAAKjB,EAAKkB,GACVL,KAAMb,EAAKa,KACXM,KAAK,YACLb,KAAK,MAELb,EAAAU,cAAA,MAAA,CAAKY,KAAK,gBACNtB,EAAAU,cAAA,MAAA,CAAKY,KAAK,cACNtB,EAAAU,cAAA,MAAA,CAAKiB,IAAKpB,EAAKqB,MAAOC,IAAKtB,EAAKuB,SAEpC9B,EAAAU,cAACqB,EAAI,CAAClB,KAAK,QAAQa,KAAK,UAAU7B,GAAG,QAAQU,EAAKC,KAClDR,EAAAU,cAACa,EAAUS,MAAK,KACZhC,EAAAU,cAACqB,EAAI,CAAClB,KAAK,QAAQoB,OAAO,OAAOpC,GAAG,QAAQU,EAAKuB,QAErD9B,EAAAU,cAAA,MAAA,CAAKY,KAAK,mBACNtB,EAAAU,cAAA,MAAA,CAAKiB,IAAKpB,EAAK2B,OAAOC,OAAQN,IAAKtB,EAAK2B,OAAOE,KAAMd,KAAK,uBAC1DtB,EAAAU,cAACqB,EAAI,CAAClB,KAAK,QAAQhB,GAAG,QAAQU,EAAK2B,OAAOE,MAC1CpC,EAAAU,cAACqB,GAAKlB,KAAK,QAAQa,KAAK,YAAY7B,GAAG,QAAQU,EAAK8B,WAMxErC,EAAAU,cAAA,MAAA,CAAKY,KAAK,cACNtB,EAAAU,cAAC4B,EAAQ,CACLC,KAAM5C,EACN6C,KAAM5C,KAItB,CE7DA,IAAA6C,EACIC,oBCYYC,GAAcC,SAAEA,EAAQC,KAAEA,IACtC,OAAO7C,EAAAU,cAAA,qBAAA,CACHC,UAAW8B,EAAoB,YACpBI,GAEVD,EAET,CCPM,SAAUE,EAASC,iBACrB,OAAO/C,EAAAU,cAAA,YAAA,CAAWC,UCNTmC,YDOL9C,EAAAU,cAAA,MAAA,CAAKY,KAAK,SACM,QAAXpB,EAAA6C,eAAAA,EAAOC,YAAI,IAAA9C,OAAA,EAAAA,EAAE0B,OAAQ5B,uBAAK2B,IAAKoB,EAAMC,KAAKpB,MAAOC,IAAKkB,EAAMC,KAAKlB,QAAY,KAC9E9B,EAAAU,cAACE,EAAO,CAACC,KAAM,GACA,QAAVoC,EAAAF,EAAMC,YAAI,IAAAC,OAAA,EAAAA,EAAEnB,OAEjB9B,EAAAU,cAACE,EAAO,CAACC,KAAM,EAAGa,KAAK,SACR,UAAVqB,EAAMC,YAAI,IAAAE,OAAA,EAAAA,EAAEC,cAGL,UAAXJ,aAAK,EAALA,EAAOC,YAAI,IAAAI,OAAA,EAAAA,EAAEC,QAASrD,EAAAU,cAAC4C,GAAOzC,KAAK,KAAKO,KAAM2B,EAAMC,KAAKK,OAAOjC,MAAO2B,EAAMC,KAAKK,OAAOvB,OAAkB,MAGhH9B,EAAAU,cAAA,MAAA,CAAKY,KAAK,YAEY,QAAdiC,EAAAR,EAAMS,gBAAQ,IAAAD,OAAA,EAAAA,EAAEtC,IAAI,CAACwC,EAASC,aAAU,OAAA1D,EAAAU,cAACV,EAAM2D,SAAQ,CAACnC,IAAK,GAAGiC,EAAQ3B,SAAS4B,MAEzED,aAAO,EAAPA,EAAS3B,OAAQ9B,EAAAU,cAAA,MAAA,CAAKY,KAAK,iBACvBtB,EAAAU,cAACE,EAAO,CAACC,KAAM,GACV4C,EAAQ3B,QAER,MAIK,UAAd2B,aAAO,EAAPA,EAASG,aAAK,IAAA1D,OAAA,EAAAA,EAAE2D,QAAS7D,EAAAU,cAAA,MAAA,CAAKY,KAAK,iBAC/BtB,EAAAU,cAACiC,EAAa,CAACE,KAAM,GACjB7C,EAAAU,cAACoD,EAAI,KACD9D,EAAAU,cAACoD,EAAK3C,KAAI,KACNnB,EAAAU,cAACoD,EAAI,KACa,QAAbb,EAAAQ,EAAQG,aAAK,IAAAX,OAAA,EAAAA,EAAEhC,IAAI,CAAC8C,EAAML,IACvB1D,EAAAU,cAACoD,EAAK3C,KAAI,CAACK,IAAK,GAAGuC,EAAKjC,SAAS4B,KAC7B1D,EAAAU,cAACa,EAASyC,OAAAC,OAAA,CAAA,EAAKF,WAOlC,SAMjC,CElDM,SAAUG,EAAenB,eAC3B,OAAO/C,EAAAU,cAAA,mBAAA,CAAkBC,UC+BhBuD,YD9BLlE,EAAAU,cAAA,MAAA,CAAKY,KAAK,iBACLpB,EAAA6C,EAAMoB,8BAASrC,QACZ9B,EAAAU,cAACE,GAAQC,KAAM,GACVkC,EAAMoB,QAAQrC,QAIT,QAAbmB,EAAAF,EAAMoB,eAAO,IAAAlB,OAAA,EAAAA,EAAEE,cACZnD,EAAAU,cAACE,EAAO,CAACC,KAAM,EAAGa,KAAK,SAClBqB,EAAMoB,QAAQhB,aAIvBnD,EAAAU,cAAA,MAAA,CAAKY,KAAK,YACQ,QAAb4B,EAAAH,EAAMoB,eAAO,IAAAjB,OAAA,EAAAA,EAAEkB,gBACZpE,EAAAU,cAAC4C,EAAM,CACHlC,KAAM2B,EAAMoB,QAAQC,cAAchD,KAClCM,KAAMqB,EAAMoB,QAAQC,cAAc1C,MAAQ,UAC1Cb,KAAK,KACLwD,SAAUtB,EAAMoB,QAAQC,cAAcC,UAErCtB,EAAMoB,QAAQC,cAActC,QAIvB,QAAbsB,EAAAL,EAAMoB,eAAO,IAAAf,OAAA,EAAAA,EAAEkB,kBACZtE,EAAAU,cAAC4C,EAAM,CACHlC,KAAM2B,EAAMoB,QAAQG,gBAAgBlD,KACpCM,KAAMqB,EAAMoB,QAAQG,gBAAgB5C,MAAQ,YAC5Cb,KAAK,KACLwD,SAAUtB,EAAMoB,QAAQG,gBAAgBD,UAEvCtB,EAAMoB,QAAQG,gBAAgBxC,SAM/C9B,EAAAU,cAAA,MAAA,CAAKY,KAAK,SACLyB,EAAMwB,cAGnB"}

package/dist/TabsAnalytics-OQlfG-3q.js

@@ -0,0 +1,2 @@
+import e,{useState as a,useRef as t,createContext as n,useContext as l}from"react";function i({size:a="medium",kind:t="default",weight:n="normal",children:l,className:i,id:r,onClick:s,as:u="p"}){const c=u||"p";return e.createElement(c,{className:`tn8a2d4 ${i||""}`,"data-size":a,"data-kind":t,"data-weight":n,onClick:s,id:r},l)}const r=n({value:"",setValue:()=>{},tabsRef:{current:null}});function s({children:n}){const[l,i]=a(""),s=t(null);return e.createElement(r,{value:{value:l,setValue:i,tabsRef:s}},n)}function u(){return l(r)}export{i as T,s as a,u};
+//# sourceMappingURL=TabsAnalytics-OQlfG-3q.js.map

package/dist/TabsAnalytics-OQlfG-3q.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsAnalytics-OQlfG-3q.js","sources":["../src/writer/Text/Text.tsx","../src/writer/Tabs/TabsAnalytics.tsx"],"sourcesContent":["import React from \"react\"\n\nimport * as cn from \"./Text.styles\";\n\n/**\n * Available font sizes for the Text component\n */\nexport type TextFontSizes = \"xsmall\" | \"small\" | \"medium\" | \"large\" | \"xlarge\" | \"xxlarge\" | \"inherit\";\n\n/**\n * Available text styles/kinds for the Text component\n */\nexport type TextKindTypes = \"default\" | \"ghost\" | \"success\" | \"warn\" | \"error\" | \"primary\" | \"secondary\";\n\n/**\n * Available font weights for the Text component\n */\nexport type TextFontWeights = \"normal\" | \"bold\" | \"extra-bold\";\n\n/**\n * Props for the Text component\n */\nexport interface TextProps {\n    /** Font size of the text */\n    size?: TextFontSizes\n\n    /** Visual style/kind of the text */\n    kind?: TextKindTypes\n\n    /** Font weight of the text */\n    weight?: TextFontWeights\n\n    /** Content to be rendered inside the text component */\n    children?: React.ReactNode\n\n    /** Additional CSS class name */\n    className?: string\n\n    /** HTML id attribute */\n    id?: string\n    \n    /** Click event handler */\n    onClick?: () => void\n    \n    /** HTML tag to render the text as */\n    as?: \"span\" | \"p\"\n}\n\n/**\n * A flexible text component that supports different sizes, styles, and weights.\n * \n * @category Component\n */\nexport function Text({\n    size = \"medium\",\n    kind = \"default\",\n    weight = \"normal\",\n    children,\n    className,\n    id,\n    onClick,\n    as = \"p\"\n}: TextProps) {\n    const Tag = as || \"p\";\n\n    return (\n        <Tag\n            className={`${cn.TextHost} ${className || ''}`}\n            data-size={size}\n            data-kind={kind}\n            data-weight={weight}\n            onClick={onClick}\n            id={id}\n        >\n            {children}\n        </Tag>\n    )\n}\n\n","import React, {createContext, useContext, useRef, useState} from \"react\";\n\nconst TabsAnalyticsContext = createContext<{\n    value: string\n    setValue: (value: string) => void\n    tabsRef: React.RefObject<HTMLElement | null>\n}>({\n    value: \"\",\n    setValue: () => {\n    },\n    tabsRef: {current: null}\n})\n\nexport function TabsAnalytics({children}: { children: React.ReactNode }) {\n    const [value, setValue] = useState(\"\")\n    const tabsRef = useRef<HTMLElement | null>(null)\n\n    return <TabsAnalyticsContext value={{value, setValue, tabsRef}}>\n        {children}\n    </TabsAnalyticsContext>\n}\n\nexport function useTabsAnalytics() {\n    return useContext(TabsAnalyticsContext)\n}"],"names":["Text","size","kind","weight","children","className","id","onClick","as","Tag","React","createElement","TabsAnalyticsContext","createContext","value","setValue","tabsRef","current","TabsAnalytics","useState","useRef","useTabsAnalytics","useContext"],"mappings":"mFAqDM,SAAUA,GAAKC,KACjBA,EAAO,SAAQC,KACfA,EAAO,UAASC,OAChBA,EAAS,SAAQC,SACjBA,EAAQC,UACRA,EAASC,GACTA,EAAEC,QACFA,EAAOC,GACPA,EAAK,MAEL,MAAMC,EAAMD,GAAM,IAElB,OACIE,EAAAC,cAACF,EAAG,CACAJ,UAAW,WAAkBA,GAAa,KAAI,YACnCJ,EAAI,YACJC,EAAI,cACFC,EACbI,QAASA,EACTD,GAAIA,GAEHF,EAGb,CC3EA,MAAMQ,EAAuBC,EAI1B,CACCC,MAAO,GACPC,SAAU,OAEVC,QAAS,CAACC,QAAS,QAGjB,SAAUC,GAAcd,SAACA,IAC3B,MAAOU,EAAOC,GAAYI,EAAS,IAC7BH,EAAUI,EAA2B,MAE3C,OAAOV,EAAAC,cAACC,EAAoB,CAACE,MAAO,CAACA,QAAOC,WAAUC,YACjDZ,EAET,UAEgBiB,IACZ,OAAOC,EAAWV,EACtB"}

package/dist/Update-ByqPw65k.js

@@ -0,0 +1,2 @@
+import e,{Fragment as t,useState as r,useEffect as n}from"react";import{a}from"./Icon-CbDEiA4L.js";import{B as l}from"./Button-BBxaVRAi.js";import{T as c}from"./TabsAnalytics-OQlfG-3q.js";import{u as o}from"./useUXClick-DFIG_rVc.js";import{u as i}from"./useUXEvents-C4q-ORmz.js";import{B as s}from"./VideoGuide-BNPKC79p.js";function m({className:t,children:r}){return e.createElement("blockquote",{className:`b1wifk81 ${t||""}`},e.createElement(d,null),e.createElement("div",null,r))}function d(t){return e.createElement("svg",Object.assign({width:15,height:11,viewBox:"0 0 15 11",xmlns:"http://www.w3.org/2000/svg",part:"quote"},t),e.createElement("path",{d:"M15 1.72c-1.96.95-2.94 2.07-2.94 3.36.83.1 1.53.44 2.07 1.02.55.58.82 1.25.82 2.01a2.81 2.81 0 0 1-2.8 2.89c-.9 0-1.68-.36-2.33-1.09a3.78 3.78 0 0 1-1-2.63c0-3.1 1.76-5.53 5.26-7.28L15 1.72zm-8.83 0c-1.97.95-2.96 2.07-2.96 3.36.85.1 1.55.44 2.1 1.02.54.58.82 1.25.82 2.01A2.82 2.82 0 0 1 3.3 11 3 3 0 0 1 .98 9.91 3.8 3.8 0 0 1 0 7.28C0 4.18 1.74 1.75 5.23 0l.94 1.72z",fillRule:"nonzero"}))}function u({className:r,items:n,as:a}){const l=a||p;return e.createElement("xyd-breadcrumbs",{className:`bwgsk4h ${r||""}`},n.map((r,a)=>{const c=a===n.length-1;return e.createElement(t,{key:r.href+r.title},a>0&&e.createElement(h,null),e.createElement("div",{part:"item","data-active":c?"true":"false"},r.href&&!c?e.createElement(l,{href:r.href},r.title):r.title))}))}function h(){return e.createElement("span",{part:"icon"},"/")}function p(t){var{href:r,children:n}=t,l=a(t,["href","children"]);return e.createElement("a",Object.assign({href:r},l),n)}function E({className:t,children:r,kind:n}){let a;switch(n){case"tip":a=e.createElement(v,null);break;case"check":a=e.createElement(w,null);break;case"warning":a=e.createElement(k,null);break;case"danger":a=e.createElement(f,null);break;case"note":a=e.createElement(L,null);break;default:a=e.createElement(g,null)}return e.createElement("xyd-callout",{"data-kind":n,className:`chnegou ${t||""}`},e.createElement("div",{part:"icon"},a),e.createElement("div",{part:"message"},e.createElement("div",{part:"message-body"},r)))}function g(){return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"currentColor",viewBox:"0 0 24 24"},e.createElement("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"}),e.createElement("path",{fillRule:"evenodd",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",clipRule:"evenodd"}))}function v(){return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},e.createElement("g",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5},e.createElement("path",{d:"M17.252 12.49c-.284 2.365-1.833 3.31-2.502 3.996c-.67.688-.55.825-.505 1.834a.916.916 0 0 1-.916.971h-2.658a.92.92 0 0 1-.917-.971c0-.99.092-1.22-.504-1.834c-.76-.76-2.548-1.833-2.548-4.784a5.307 5.307 0 1 1 10.55.788"}),e.createElement("path",{d:"M10.46 19.236v1.512c0 .413.23.752.513.752h2.053c.285 0 .514-.34.514-.752v-1.512m-2.32-10.54a2.227 2.227 0 0 0-2.226 2.227m10.338.981h1.834m-3.68-6.012l1.301-1.301M18.486 17l1.301 1.3M12 2.377V3.86m-6.76.73l1.292 1.302M4.24 18.3L5.532 17m-.864-5.096H2.835"})))}function w(){return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24"},e.createElement("path",{fill:"currentColor",d:"m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"}))}function k(){return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"-2 -3 24 24"},e.createElement("path",{fill:"currentColor",d:"m12.8 1.613l6.701 11.161c.963 1.603.49 3.712-1.057 4.71a3.2 3.2 0 0 1-1.743.516H3.298C1.477 18 0 16.47 0 14.581c0-.639.173-1.264.498-1.807L7.2 1.613C8.162.01 10.196-.481 11.743.517c.428.276.79.651 1.057 1.096m-2.22.839a1.077 1.077 0 0 0-1.514.365L2.365 13.98a1.17 1.17 0 0 0-.166.602c0 .63.492 1.14 1.1 1.14H16.7c.206 0 .407-.06.581-.172a1.164 1.164 0 0 0 .353-1.57L10.933 2.817a1.1 1.1 0 0 0-.352-.365zM10 14a1 1 0 1 1 0-2a1 1 0 0 1 0 2m0-9a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V6a1 1 0 0 1 1-1"}))}function f(){return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24"},e.createElement("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M20.5 15.8V8.2a1.91 1.91 0 0 0-.944-1.645l-6.612-3.8a1.88 1.88 0 0 0-1.888 0l-6.612 3.8A1.9 1.9 0 0 0 3.5 8.2v7.602a1.91 1.91 0 0 0 .944 1.644l6.612 3.8a1.88 1.88 0 0 0 1.888 0l6.612-3.8A1.9 1.9 0 0 0 20.5 15.8M12 7.627v5.5m0 3.246v-.5"}))}function L(){return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24"},e.createElement("g",{className:"pin-outline"},e.createElement("g",{fill:"currentColor",fillRule:"evenodd",className:"Vector",clipRule:"evenodd"},e.createElement("path",{d:"M12 16.143a1 1 0 0 1 1 1V21a1 1 0 0 1-2 0v-3.857a1 1 0 0 1 1-1"}),e.createElement("path",{d:"M8.447 4.223q0 .01.007.033c.05.17.12.344.198.51c.262.549.53 1.246.53 2.027v3.85c0 1.03-.442 1.97-1.109 2.666c-.49.512-.873.979-1.169 1.391c-.114.16-.133.269-.135.321a.25.25 0 0 0 .052.16c.089.126.352.319.83.319h4.985a1 1 0 1 1 0 2H7.652c-.987 0-1.93-.403-2.468-1.17c-.58-.827-.556-1.887.095-2.795c.355-.495.8-1.035 1.35-1.61c.358-.373.553-.833.553-1.282v-3.85c0-.335-.118-.71-.336-1.168a5.5 5.5 0 0 1-.31-.805c-.265-.898.081-1.68.664-2.168C7.736 2.204 8.455 2 9.124 2h3.512a1 1 0 1 1 0 2H9.124c-.303 0-.536.099-.64.186a.2.2 0 0 0-.037.037m-.005.007"}),e.createElement("path",{d:"M15.553 4.223a3.5 3.5 0 0 1-.206.543c-.26.549-.529 1.246-.529 2.027v3.85c0 1.03.442 1.97 1.109 2.666c.49.512.873.979 1.169 1.391c.114.16.133.269.135.321a.25.25 0 0 1-.052.16c-.089.126-.352.319-.83.319h-4.985a1 1 0 1 0 0 2h4.985c.986 0 1.928-.403 2.467-1.17c.58-.827.556-1.887-.095-2.795c-.355-.495-.8-1.035-1.35-1.61c-.358-.373-.553-.833-.553-1.282v-3.85c0-.335.118-.71.335-1.168c.116-.243.226-.515.311-.805c.265-.898-.081-1.68-.664-2.168C16.264 2.204 15.545 2 14.876 2h-3.512a1 1 0 1 0 0 2h3.512c.303 0 .536.099.64.186q.029.026.037.037m.005.007"}))))}function M(t){const{title:r,description:n,imgSrc:a,imgAlt:o,logoSrc:i,logoAlt:s,shadow:m,href:d,link:u,btnText:h}=t,p=u,E=e.createElement("xyd-card",{"data-shadow":m||void 0,className:"c1vswvqd"},a&&e.createElement("div",{part:"image-container"},e.createElement("div",{part:"bg"},e.createElement("img",{src:a,alt:o}),e.createElement("div",{part:"bg-shadow"})),p&&d&&i&&e.createElement("span",{part:"author-link"},e.createElement("img",{src:i,alt:s}))),e.createElement("div",{part:"body"},e.createElement("div",{part:"header"},e.createElement(c,{weight:"bold"},r),h&&e.createElement(l,{size:"md",kind:"secondary"},h)),e.createElement("div",{part:"description"},e.createElement(c,{size:"small"},n))));return!h&&p&&d?e.createElement(p,{href:d},E):E}function b({className:t,children:r}){return e.createElement("code",{className:`c1w59zdn ${t||""}`},e.createElement("span",{part:"content"},r))}function x(){const[t,r]=y();return e.createElement(l,{size:"sm",theme:"ghost",icon:"dark"===t?e.createElement(B,null):e.createElement(N,null),onClick:r})}function y(){const[e,t]=r(null);return n(()=>{const e=()=>{const e=document.querySelector("html");if(e){const r=e.getAttribute("data-color-scheme")||"os";if("os"===r){const e=j()||"light";t(e),C(e)}else{const e=r;t(e),C(e)}}};e();const r=new MutationObserver(e),n=document.querySelector("html");return n&&r.observe(n,{attributes:!0,attributeFilter:["data-color-scheme"]}),()=>r.disconnect()},[]),[e,function(){let e="";const t=j();t&&(e="dark"===t?"light":"dark");const r=document.querySelector("html");if(!r)return;const n=r.getAttribute("data-color-scheme");n&&"os"!==n&&(e="dark"===n?"light":"dark"),e||(e="light"),r.setAttribute("data-color-scheme",e),localStorage.setItem("xyd-color-scheme",e),C(e)}]}function C(e){let t=document.querySelector("style[data-color-scheme-style]");t||(t=document.createElement("style"),t.setAttribute("data-color-scheme-style","true"),document.head.appendChild(t)),t.textContent=`:root { color-scheme: ${e}; }`}function j(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":window.matchMedia("(prefers-color-scheme: light)").matches?"light":null}function N(){return e.createElement("svg",{width:16,height:16,viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",xmlns:"http://www.w3.org/2000/svg"},e.createElement("g",{clipPath:"url(#clip0_2880_7340)"},e.createElement("path",{d:"M8 1.11133V2.00022",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),e.createElement("path",{d:"M12.8711 3.12891L12.2427 3.75735",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),e.createElement("path",{d:"M14.8889 8H14",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),e.createElement("path",{d:"M12.8711 12.8711L12.2427 12.2427",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),e.createElement("path",{d:"M8 14.8889V14",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),e.createElement("path",{d:"M3.12891 12.8711L3.75735 12.2427",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),e.createElement("path",{d:"M1.11133 8H2.00022",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),e.createElement("path",{d:"M3.12891 3.12891L3.75735 3.75735",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),e.createElement("path",{d:"M8.00043 11.7782C10.0868 11.7782 11.7782 10.0868 11.7782 8.00043C11.7782 5.91402 10.0868 4.22266 8.00043 4.22266C5.91402 4.22266 4.22266 5.91402 4.22266 8.00043C4.22266 10.0868 5.91402 11.7782 8.00043 11.7782Z",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"})),e.createElement("defs",null,e.createElement("clipPath",{id:"clip0_2880_7340"},e.createElement("rect",{width:16,height:16,fill:"white"}))))}function B(){return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:16,height:16,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"},e.createElement("path",{d:"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"}))}function W(t){const{children:r,label:n}=t,a=i(),l=o(a.docs.details.open,a.docs.details.close,()=>({label:n}));let c;const s=["secondary","tertiary"].includes(t.kind||"");s&&"title"in t&&(c=t.title);const m=t.kind||"primary";return e.createElement("details",{part:"details",className:`dwmojve ${t.className||""}`,"data-kind":t.kind,onClick:l},e.createElement("summary",{part:"summary"},"primary"===m&&e.createElement(e.Fragment,null,t.icon||e.createElement(z,null),e.createElement("div",{part:"summary-deep-label"},n)),s&&e.createElement("div",null,e.createElement("div",{part:"summary-deep"},t.icon||e.createElement(A,null),e.createElement("div",{part:"summary-deep-text"},c)),e.createElement("div",{part:"summary-deep-label"},n)),s&&e.createElement(z,null)),e.createElement("div",{part:"content"},r))}function z(){return e.createElement("div",{part:"icon"},e.createElement("svg",{"data-icon":"true",xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",fill:"currentColor",viewBox:"0 0 24 24"},e.createElement("path",{fillRule:"evenodd",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",clipRule:"evenodd"})))}function A(){return e.createElement("svg",{width:"1em",height:"1em",viewBox:"0 0 24 24",stroke:"none",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"},e.createElement("g",{clipPath:"url(#clip0_1689_2180)"},e.createElement("path",{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",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"})),e.createElement("defs",null,e.createElement("clipPath",{id:"clip0_1689_2180"},e.createElement("rect",{width:24,height:24,fill:"white"}))))}function q(){return e.createElement("hr",{part:"hr",className:"h1ej4n95"})}function H(t){const{src:r,alt:n,style:l,caption:c,children:o}=t,i=a(t,["src","alt","style","caption","children"]),s=e.createElement("img",Object.assign({src:r,alt:n,style:l,className:"iz14jlg"},i));return c?e.createElement(e.Fragment,null,e.createElement("figure",null,s,e.createElement("figcaption",null,c))):s}function V(t){const{date:r,version:n,children:a}=t;return e.createElement("xyd-update",{className:"u1465cfe"},e.createElement("div",{part:"meta"},r&&e.createElement("div",{part:"date"},e.createElement(s,null,r)),e.createElement("div",{part:"version"},e.createElement(c,{size:"small"},n))),e.createElement("div",{part:"content-container"},e.createElement("div",{part:"content"},a)))}export{m as B,x as C,W as D,q as H,H as I,V as U,E as a,b,u as c,M as d,y as u};
+//# sourceMappingURL=Update-ByqPw65k.js.map

package/dist/Update-ByqPw65k.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Update-ByqPw65k.js","sources":["../src/writer/Blockquote/Blockquote.tsx","../src/writer/Breadcrumbs/Breadcrumbs.tsx","../src/writer/Callout/Callout.tsx","../src/writer/Card/Card.tsx","../src/writer/Card/Card.styles.tsx","../src/writer/Code/Code.tsx","../src/writer/ColorSchemeButton/ColorSchemeButton.tsx","../src/writer/Details/Details.tsx","../src/writer/Hr/Hr.tsx","../src/writer/Hr/Hr.styles.tsx","../src/writer/Image/Image.tsx","../src/writer/Image/Image.styles.tsx","../src/writer/Update/Update.tsx","../src/writer/Update/Update.styles.tsx"],"sourcesContent":["import React from \"react\"\n\nimport * as cn from \"./Blockquote.styles\";\n\nexport interface BlockquoteProps {\n    className?: string;\n    children: React.ReactNode;\n}\n\nexport function Blockquote({ className, children }: BlockquoteProps) {\n    return <blockquote\n        className={`${cn.BlockquoteHost} ${className || ''}`}\n    >\n        <$SVGQuote />\n\n        <div>\n            {children}\n        </div>\n    </blockquote>\n}\n\nfunction $SVGQuote(props: React.SVGProps<SVGSVGElement>) {\n    return (\n        <svg\n            width={15}\n            height={11}\n            viewBox=\"0 0 15 11\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            part=\"quote\"\n            {...props}\n        >\n            <path\n                d=\"M15 1.72c-1.96.95-2.94 2.07-2.94 3.36.83.1 1.53.44 2.07 1.02.55.58.82 1.25.82 2.01a2.81 2.81 0 0 1-2.8 2.89c-.9 0-1.68-.36-2.33-1.09a3.78 3.78 0 0 1-1-2.63c0-3.1 1.76-5.53 5.26-7.28L15 1.72zm-8.83 0c-1.97.95-2.96 2.07-2.96 3.36.85.1 1.55.44 2.1 1.02.54.58.82 1.25.82 2.01A2.82 2.82 0 0 1 3.3 11 3 3 0 0 1 .98 9.91 3.8 3.8 0 0 1 0 7.28C0 4.18 1.74 1.75 5.23 0l.94 1.72z\"\n                fillRule=\"nonzero\"\n            />\n        </svg>\n    )\n}","import React, { Fragment } from 'react'\nimport type { ReactElement } from 'react'\n\nimport * as cn from './Breadcrumbs.styles'\n\nexport interface BreadcrumbsProps {\n    className?: string;\n    items: {\n        title: string\n        href?: string\n    }[]\n\n    as?: React.ElementType\n}\n\nexport function Breadcrumbs({ className, items, as }: BreadcrumbsProps): ReactElement {\n    const Link = as || $Link\n\n    return (\n        <xyd-breadcrumbs\n            className={`${cn.BreadcrumbsHost} ${className || ''}`}\n        >\n            {items.map((item, index) => {\n                const lastActive = index === items.length - 1\n\n                return (\n                    <Fragment key={item.href + item.title}>\n                        {index > 0 && <$BreadcrumbIcon />}\n                        <div\n                            part=\"item\"\n                            data-active={lastActive ? \"true\" : \"false\"}\n                        >\n                            {item.href && !lastActive ? (\n                                <Link href={item.href}>{item.title}</Link>\n                            ) : (\n                                item.title\n                            )}\n                        </div>\n                    </Fragment>\n                )\n            })}\n        </xyd-breadcrumbs>\n    )\n}\n\nfunction $BreadcrumbIcon() {\n    return <span part=\"icon\">/</span>\n}\n\nfunction $Link({ href, children, ...rest }) {\n    return <a\n        href={href}\n        {...rest}\n    >\n        {children}\n    </a>\n}","import React from \"react\"\n\nimport * as cn from \"./Callout.styles\";\n\n/**\n * Props for the Callout component\n */\nexport interface CalloutProps {\n    /** Additional CSS class name to be applied to the callout */\n    className?: string;\n\n    /** Content to be displayed inside the callout */\n    children: React.ReactNode;\n\n    kind?: \"warning\" | \"note\" | \"tip\" | \"check\" | \"danger\"\n}\n\n/**\n * A Callout component that displays important information or notices in a visually distinct way.\n * It includes an info icon and a message area for content.\n * \n * @category Component\n */\nexport function Callout({ className, children, kind }: CalloutProps) {\n    let icon\n\n    switch (kind) {\n        case \"tip\":\n            icon = <$BulbIcon />\n            break\n        case \"check\":\n            icon = <$CheckIcon />\n            break\n        case \"warning\":\n            icon = <$WarningIcon />\n            break\n        case \"danger\":\n            icon = <$DangerIcon />\n            break\n        case \"note\":\n            icon = <$NoteIcon />\n            break\n        default:\n            icon = <$IconInfo />\n            break\n    }\n\n    return <xyd-callout\n        data-kind={kind}\n        className={`${cn.CalloutHost} ${className || ''}`}\n    >\n        <div part=\"icon\">\n            {icon}\n        </div>\n        <div part=\"message\">\n            <div part=\"message-body\">\n                {children}\n            </div>\n        </div>\n    </xyd-callout>\n}\n\nfunction $IconInfo() {\n    return <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\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\nfunction $BulbIcon() {\n    return <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n    >\n        <g\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={1.5}\n        >\n            <path d=\"M17.252 12.49c-.284 2.365-1.833 3.31-2.502 3.996c-.67.688-.55.825-.505 1.834a.916.916 0 0 1-.916.971h-2.658a.92.92 0 0 1-.917-.971c0-.99.092-1.22-.504-1.834c-.76-.76-2.548-1.833-2.548-4.784a5.307 5.307 0 1 1 10.55.788\" />\n            <path d=\"M10.46 19.236v1.512c0 .413.23.752.513.752h2.053c.285 0 .514-.34.514-.752v-1.512m-2.32-10.54a2.227 2.227 0 0 0-2.226 2.227m10.338.981h1.834m-3.68-6.012l1.301-1.301M18.486 17l1.301 1.3M12 2.377V3.86m-6.76.73l1.292 1.302M4.24 18.3L5.532 17m-.864-5.096H2.835\" />\n        </g>\n    </svg>\n}\n\nfunction $CheckIcon() {\n    return <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={24}\n        height={24}\n        viewBox=\"0 0 24 24\"\n    >\n        <path\n            fill=\"currentColor\"\n            d=\"m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z\"\n        />\n    </svg>\n}\n\nfunction $WarningIcon() {\n    return <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={24}\n        height={24}\n        viewBox=\"-2 -3 24 24\"\n    >\n        <path\n            fill=\"currentColor\"\n            d=\"m12.8 1.613l6.701 11.161c.963 1.603.49 3.712-1.057 4.71a3.2 3.2 0 0 1-1.743.516H3.298C1.477 18 0 16.47 0 14.581c0-.639.173-1.264.498-1.807L7.2 1.613C8.162.01 10.196-.481 11.743.517c.428.276.79.651 1.057 1.096m-2.22.839a1.077 1.077 0 0 0-1.514.365L2.365 13.98a1.17 1.17 0 0 0-.166.602c0 .63.492 1.14 1.1 1.14H16.7c.206 0 .407-.06.581-.172a1.164 1.164 0 0 0 .353-1.57L10.933 2.817a1.1 1.1 0 0 0-.352-.365zM10 14a1 1 0 1 1 0-2a1 1 0 0 1 0 2m0-9a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V6a1 1 0 0 1 1-1\"\n        />\n    </svg>\n}\n\nfunction $DangerIcon() {\n    return <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={24}\n        height={24}\n        viewBox=\"0 0 24 24\"\n    >\n        <path\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={1.5}\n            d=\"M20.5 15.8V8.2a1.91 1.91 0 0 0-.944-1.645l-6.612-3.8a1.88 1.88 0 0 0-1.888 0l-6.612 3.8A1.9 1.9 0 0 0 3.5 8.2v7.602a1.91 1.91 0 0 0 .944 1.644l6.612 3.8a1.88 1.88 0 0 0 1.888 0l6.612-3.8A1.9 1.9 0 0 0 20.5 15.8M12 7.627v5.5m0 3.246v-.5\"\n        />\n    </svg>\n}\n\nfunction $NoteIcon() {\n    return <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={24}\n        height={24}\n        viewBox=\"0 0 24 24\"\n    >\n        <g className=\"pin-outline\">\n            <g\n                fill=\"currentColor\"\n                fillRule=\"evenodd\"\n                className=\"Vector\"\n                clipRule=\"evenodd\"\n            >\n                <path d=\"M12 16.143a1 1 0 0 1 1 1V21a1 1 0 0 1-2 0v-3.857a1 1 0 0 1 1-1\" />\n                <path d=\"M8.447 4.223q0 .01.007.033c.05.17.12.344.198.51c.262.549.53 1.246.53 2.027v3.85c0 1.03-.442 1.97-1.109 2.666c-.49.512-.873.979-1.169 1.391c-.114.16-.133.269-.135.321a.25.25 0 0 0 .052.16c.089.126.352.319.83.319h4.985a1 1 0 1 1 0 2H7.652c-.987 0-1.93-.403-2.468-1.17c-.58-.827-.556-1.887.095-2.795c.355-.495.8-1.035 1.35-1.61c.358-.373.553-.833.553-1.282v-3.85c0-.335-.118-.71-.336-1.168a5.5 5.5 0 0 1-.31-.805c-.265-.898.081-1.68.664-2.168C7.736 2.204 8.455 2 9.124 2h3.512a1 1 0 1 1 0 2H9.124c-.303 0-.536.099-.64.186a.2.2 0 0 0-.037.037m-.005.007\" />\n                <path d=\"M15.553 4.223a3.5 3.5 0 0 1-.206.543c-.26.549-.529 1.246-.529 2.027v3.85c0 1.03.442 1.97 1.109 2.666c.49.512.873.979 1.169 1.391c.114.16.133.269.135.321a.25.25 0 0 1-.052.16c-.089.126-.352.319-.83.319h-4.985a1 1 0 1 0 0 2h4.985c.986 0 1.928-.403 2.467-1.17c.58-.827.556-1.887-.095-2.795c-.355-.495-.8-1.035-1.35-1.61c-.358-.373-.553-.833-.553-1.282v-3.85c0-.335.118-.71.335-1.168c.116-.243.226-.515.311-.805c.265-.898-.081-1.68-.664-2.168C16.264 2.204 15.545 2 14.876 2h-3.512a1 1 0 1 0 0 2h3.512c.303 0 .536.099.64.186q.029.026.037.037m.005.007\" />\n            </g>\n        </g>\n    </svg>\n}","import React from \"react\"\n\nimport { Button } from \"../Button\"\nimport { Text } from \"../Text\"\n\nimport * as cn from \"./Card.styles\"\n\ninterface CardProps {\n    title: string\n    href?: string\n    link?: React.ElementType\n\n    description?: string\n    btnText?: string\n\n    imgSrc?: string\n    imgAlt?: string\n\n    logoSrc?: string\n    logoAlt?: string\n\n    shadow?: \"md\"\n}\n\nexport function Card(props: CardProps) {\n    const {\n        title,\n        description,\n        imgSrc,\n        imgAlt,\n        logoSrc,\n        logoAlt,\n        shadow,\n        href,\n        link,\n        btnText,\n    } = props\n\n    const Link = link\n\n    const cardContent = (\n        <xyd-card\n            data-shadow={shadow || undefined}\n            className={cn.CardHost}\n        >\n            {imgSrc && (\n                <div part=\"image-container\">\n                    <div part=\"bg\">\n                        <img src={imgSrc} alt={imgAlt} />\n                        <div part=\"bg-shadow\" />\n                    </div>\n\n                    {\n                        Link && href && logoSrc && <span\n                            part=\"author-link\"\n                        >\n                            <img\n                                src={logoSrc}\n                                alt={logoAlt}\n                            />\n                        </span>\n                    }\n\n                </div>\n            )}\n\n            <div part=\"body\">\n                <div part=\"header\">\n                    <Text weight=\"bold\">\n                        {title}\n                    </Text>\n                    {\n                        btnText && <Button size=\"md\" kind=\"secondary\">\n                            {btnText}\n                        </Button>\n                    }\n                </div>\n                <div part=\"description\">\n                    <Text size=\"small\">\n                        {description}\n                    </Text>\n                </div>\n            </div>\n        </xyd-card>\n    )\n\n    // If no imgSrc and we have Link and href, wrap the entire card in a link\n    if (!btnText && Link && href) {\n        return (\n            <Link href={href}>\n                {cardContent}\n            </Link>\n        )\n    }\n\n    return cardContent\n}\n\n","import { css } from \"@linaria/core\"\n\nexport const CardHost = css`\n    --card-shadow-atom-color: color-mix(\n        in srgb,\n        var(--black) 10%,\n        transparent 90%\n    );\n    --card-shadow: 0 1px 3px 0 var(--card-shadow-atom-color), 0 1px 2px -1px var(--card-shadow-atom-color);\n    --card-ring-offset-shadow: 0 0 var(--black);\n    --card-ring-shadow: 0 0 var(--black);\n\n    box-shadow: var(--card-ring-offset-shadow, 0 0 var(--black)), var(--card-ring-shadow, 0 0 var(--black)), var(--card-shadow);\n    /* box-shadow: 0 1px 2px 0 var(--xyd-card-shadow-color); */\n    \n    border-radius: 8px;\n    background-color: var(--xyd-card-bgcolor);\n    flex-direction: column;\n    display: flex;\n    overflow: hidden;\n    position: relative;\n    height: 100%;\n\n    /* &[data-shadow=\"md\"] {\n        box-shadow: 0 5px 40px var(--xyd-card-shadow-color);\n    } */\n\n    &:hover {\n        --card-shadow: 0 10px 15px -3px var(--card-shadow-atom-color), 0 4px 6px -4px var(--card-shadow-atom-color);\n        box-shadow: var(--card-ring-offset-shadow, 0 0 var(--black)), var(--card-ring-shadow, 0 0 var(--black)), var(--card-shadow);\n    }\n\n    [part=\"image-container\"] {\n        border-bottom: 2px solid var(--xyd-card-border-color);\n        height: 200px;\n        /* overflow: hidden; */\n        position: relative;\n        transition: transform 0.1s ease-in;\n\n        &:hover {\n            transform: scale(1.02);\n        }\n\n        [part=\"bg\"] {\n            background-size: cover;\n            background-repeat: no-repeat;\n            position: relative;\n            height: 100%;\n        }\n\n        [part=\"bg-shadow\"] {\n            --card-gradient-from: hsla(0, 0%, 4%, 0) var(--xyd-gradient-from-position);\n            --card-gradient-to: hsla(0, 0%, 4%, .2) var(--xyd-gradient-to-position);\n            --card-gradient-stops: var(--card-gradient-from), hsla(0, 0%, 4%, .1) var(--xyd-gradient-via-position), var(--card-gradient-to);\n            background-repeat: no-repeat;\n            background-size: cover;\n            height: 100%;\n            position: absolute;\n            top: 0;\n            width: 100%;\n            background-image: linear-gradient(to bottom, var(--card-gradient-stops));\n            pointer-events: none;\n        }\n        img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            margin-bottom: -4px;\n        }\n    }\n\n    [part=\"author-link\"] {\n        --card-shadow: 0 4px 6px -1px var(--card-shadow-atom-color), 0 2px 4px -2px var(--card-shadow-atom-color);\n        --card-bg-opacity: 1;\n\n        box-shadow: var(--card-ring-offset-shadow, 0 0 var(--black)), var(--card-ring-shadow, 0 0 var(--black)), var(--card-shadow);\n        background-color: rgb(245 245 245 / var(--card-bg-opacity));\n        border-width: 1px;\n        border-color: var(--dark8);\n        border-radius: 9999px;\n        overflow: hidden;\n        width: 4rem;\n        height: 4rem;\n        z-index: 2;\n        left: 1.25rem;\n        bottom: -2rem;\n        position: absolute;\n\n        img {\n            width: 100%;\n            height: 100%;\n            display: block;\n            max-width: 100%;\n        }\n    }\n\n    [part=\"body\"] {\n        /* padding: 16px; */\n\n        padding: 50px 1.25rem;\n\n        [part=\"header\"] {\n            margin-right: 4px;\n            align-items: center;\n            justify-content: space-between;\n            /* margin-bottom: 12px; */\n            display: flex;\n        }\n    }\n`","import React from \"react\"\n\nimport * as cn from \"./Code.styles\";\n\nexport interface CodeProps {\n    className?: string;\n    children: React.ReactNode;\n}\n\nexport function Code({ className, children }: CodeProps) {\n    return <code className={`${cn.CodeHost} ${className || ''}`}>\n        <span part=\"content\">\n            {children}\n        </span>\n    </code>\n}","import React, { useEffect, useState } from \"react\";\n\nimport { Button } from \"../Button\";\n\nexport function ColorSchemeButton() {\n    const [currentScheme, changeColorScheme] = useColorScheme() as [string, () => void]\n\n    return <Button\n        size=\"sm\"\n        theme=\"ghost\"\n        icon={currentScheme === \"dark\" ? <IconDarkMode /> : <IconLightMode />}\n        onClick={changeColorScheme}\n    />\n}\n\nexport function useColorScheme(): [\"dark\" | \"light\" | null, () => void] {\n    const [currentScheme, setCurrentScheme] = useState<\"dark\" | \"light\" | null>(null)\n\n    // TODO: context \n    useEffect(() => {\n        const updateScheme = () => {\n            const html = document.querySelector(\"html\");\n            if (html) {\n                const scheme = html.getAttribute(\"data-color-scheme\") || \"os\";\n                if (scheme === \"os\") {\n                    const preferred = getPreferredColorScheme();\n                    const finalScheme = preferred || \"light\";\n                    setCurrentScheme(finalScheme);\n                    updateColorSchemeInHead(finalScheme);\n                } else {\n                    const finalScheme = scheme as \"dark\" | \"light\";\n                    setCurrentScheme(finalScheme);\n                    updateColorSchemeInHead(finalScheme);\n                }\n            }\n        };\n\n        updateScheme();\n\n        // Listen for changes to the color scheme\n        const observer = new MutationObserver(updateScheme);\n        const html = document.querySelector(\"html\");\n        if (html) {\n            observer.observe(html, { attributes: true, attributeFilter: ['data-color-scheme'] });\n        }\n\n        return () => observer.disconnect();\n    }, []);\n\n    function changeColorScheme() {\n        let colorScheme = \"\"\n\n        const preferredColorScheme = getPreferredColorScheme()\n        if (preferredColorScheme) {\n            colorScheme = preferredColorScheme === \"dark\" ? \"light\" : \"dark\"\n        }\n\n        const html = document.querySelector(\"html\");\n        if (!html) return;\n\n        const currentScheme = html.getAttribute(\"data-color-scheme\");\n        if (currentScheme && currentScheme !== \"os\") {\n            colorScheme = currentScheme === \"dark\" ? \"light\" : \"dark\";\n        }\n        if (!colorScheme) {\n            colorScheme = \"light\"\n        }\n\n        html.setAttribute(\"data-color-scheme\", colorScheme);\n        localStorage.setItem(\"xyd-color-scheme\", colorScheme);\n        updateColorSchemeInHead(colorScheme as \"dark\" | \"light\");\n    }\n\n    return [currentScheme, changeColorScheme]\n}\n\n\n// Function to update color-scheme in document head\nfunction updateColorSchemeInHead(scheme: \"dark\" | \"light\") {\n    let styleElement = document.querySelector('style[data-color-scheme-style]');\n\n    if (!styleElement) {\n        styleElement = document.createElement('style');\n        styleElement.setAttribute('data-color-scheme-style', 'true');\n        document.head.appendChild(styleElement);\n    }\n\n    styleElement.textContent = `:root { color-scheme: ${scheme}; }`;\n}\n\nfunction getPreferredColorScheme() {\n    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {\n        return 'dark';\n    }\n\n    if (window.matchMedia('(prefers-color-scheme: light)').matches) {\n        return 'light';\n    }\n\n    return null\n}\n\n\nfunction IconLightMode() {\n    return <svg\n        width={16}\n        height={16}\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n    >\n        <g clipPath=\"url(#clip0_2880_7340)\">\n            <path\n                d=\"M8 1.11133V2.00022\"\n                strokeWidth={1.5}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n            <path\n                d=\"M12.8711 3.12891L12.2427 3.75735\"\n                strokeWidth={1.5}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n            <path\n                d=\"M14.8889 8H14\"\n                strokeWidth={1.5}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n            <path\n                d=\"M12.8711 12.8711L12.2427 12.2427\"\n                strokeWidth={1.5}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n            <path\n                d=\"M8 14.8889V14\"\n                strokeWidth={1.5}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n            <path\n                d=\"M3.12891 12.8711L3.75735 12.2427\"\n                strokeWidth={1.5}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n            <path\n                d=\"M1.11133 8H2.00022\"\n                strokeWidth={1.5}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n            <path\n                d=\"M3.12891 3.12891L3.75735 3.75735\"\n                strokeWidth={1.5}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n            <path\n                d=\"M8.00043 11.7782C10.0868 11.7782 11.7782 10.0868 11.7782 8.00043C11.7782 5.91402 10.0868 4.22266 8.00043 4.22266C5.91402 4.22266 4.22266 5.91402 4.22266 8.00043C4.22266 10.0868 5.91402 11.7782 8.00043 11.7782Z\"\n                strokeWidth={1.5}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </g>\n        <defs>\n            <clipPath id=\"clip0_2880_7340\">\n                <rect width={16} height={16} fill=\"white\" />\n            </clipPath>\n        </defs>\n    </svg>\n}\n\nfunction IconDarkMode() {\n    return <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width={16}\n        height={16}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={2}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n    >\n        <path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\" />\n    </svg>\n}\n","import React, {} from \"react\"\n\nimport * as cn from \"./Details.styles\";\nimport {useUXClick, useUXEvents} from \"../../uxsdk\";\n\n/**\n * Base interface for all Details component variants\n */\nexport interface BaseDetailsProps {\n    /** Content to be displayed inside the details element */\n    children: React.ReactNode;\n\n    /** Label text displayed in the summary */\n    label: string;\n\n    /** Optional icon element to be displayed in the summary */\n    icon?: React.ReactElement;\n\n    /** Optional CSS class name for custom styling */\n    className?: string;\n}\n\n/**\n * Props for the tertiary variant of the Details component\n */\nexport interface TertiaryDetailsProps extends BaseDetailsProps {\n    /** Specifies the tertiary variant */\n    kind: \"tertiary\";\n\n    /** Title text or element displayed in the summary */\n    title: string | React.ReactNode;\n}\n\n/**\n * Props for the secondary variant of the Details component\n */\nexport interface SecondaryDetailsProps extends BaseDetailsProps {\n    /** Specifies the secondary variant */\n    kind: \"secondary\";\n\n    /** Title text or element displayed in the summary */\n    title: string | React.ReactNode;\n}\n\n/**\n * Props for the primary variant of the Details component\n */\nexport interface PrimaryDetailsProps extends BaseDetailsProps {\n    /** Specifies the primary variant (default) */\n    kind?: \"primary\";\n}\n\n/** Union type of all possible Details component variants */\nexport type DetailsProps = PrimaryDetailsProps | SecondaryDetailsProps | TertiaryDetailsProps\n\n/**\n * A collapsible details component that supports three variants: primary, secondary, and tertiary.\n * Each variant has a different visual style and structure.\n *\n * @param props - The component props\n * @returns A details element with collapsible content\n *\n * @category Component\n */\nexport function Details(props: DetailsProps): React.ReactElement {\n    const {children, label} = props;\n\n    const ux = useUXEvents();\n    const uxClick = useUXClick(\n        ux.docs.details.open,\n        ux.docs.details.close,\n        () => ({label})\n    )\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\n        part=\"details\"\n        className={`${cn.DetailsHost} ${props.className || \"\"}`}\n        data-kind={props.kind}\n        onClick={uxClick}\n    >\n        <summary part=\"summary\">\n            {kind === \"primary\" && (\n                <>\n                    {props.icon || <$Icon/>}\n                    <div part=\"summary-deep-label\">\n                        {label}\n                    </div>\n                </>\n            )}\n\n            {isDeepKind && (\n                <div>\n                    <div part=\"summary-deep\">\n                        {props.icon || <$IconDeep/>}\n                        <div part=\"summary-deep-text\">\n                            {title}\n                        </div>\n                    </div>\n                    <div part=\"summary-deep-label\">\n                        {label}\n                    </div>\n                </div>\n            )}\n            {isDeepKind && <$Icon/>}\n        </summary>\n\n        <div part=\"content\">\n            {children}\n        </div>\n    </details>\n}\n\nfunction $Icon() {\n    return <div part=\"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=\"currentColor\"\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=\"currentColor\"\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\n","import React from \"react\"\n\nimport * as cn from \"./Hr.styles\";\n\nexport interface HrProps {\n}\n\nexport function Hr() {\n    return <hr part=\"hr\" className={cn.HrHost}/>\n}","import {css} from \"@linaria/core\";\n\nexport const HrHost = css`\n    @layer defaults {\n        border: 0.5px solid var(--xyd-hr-border-color);\n    }\n`;","\n\nimport React from 'react';\n\nimport * as cn from \"./Image.styles\"\n\nexport interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n    src: string\n    alt: string\n    style?: React.CSSProperties\n    caption?: string\n}\n\nexport function Image(props: ImageProps) {\n    const { src, alt, style, caption, children, ...rest } = props\n\n    const img = <img\n        src={src}\n        alt={alt}\n        style={style}\n        className={cn.ImageHost}\n        {...rest}\n    />\n\n    if (!caption) {\n        return img\n    }\n\n    return <>\n        <figure>\n            {img}\n            <figcaption>{caption}</figcaption>\n        </figure>\n    </>\n}","import { css } from \"@linaria/core\"\n\nexport const ImageHost = css`\n    @layer defaults {\n        width: 100%;\n        border-radius: 16px;\n        box-shadow: 0 2px 16px rgba(0,0,0,0.06);\n    }\n`;","import React from 'react';\n\nimport { Badge } from '../Badge';\nimport { Text } from '../Text';\n\nimport * as cn from \"./Update.styles\"\n\ninterface UpdateProps {\n    children: React.ReactNode\n\n    version: string\n\n    date?: string\n}\n\nexport function Update(props: UpdateProps) {\n    const { date, version, children } = props;\n    return (\n        <xyd-update className={cn.UpdateHost}>\n            <div part=\"meta\">\n                {date && <div part=\"date\">\n                    <Badge>\n                        {date}\n                    </Badge>\n                </div>}\n                <div part=\"version\">\n                    <Text size=\"small\">\n                        {version}\n                    </Text>\n                </div>\n            </div>\n            <div part=\"content-container\">\n                <div part=\"content\">{children}</div>\n            </div>\n        </xyd-update>\n    );\n}\n","import { css } from \"@linaria/core\"\n\nexport const UpdateHost = css`\n    @layer defaults {\n        gap: 24px;\n        flex-direction: row;\n        padding-top: 32px;\n        padding-bottom: 32px;\n        align-items: flex-start;\n        width: 100%;\n        display: flex;\n        position: relative;\n\n        [part=\"meta\"] {\n            width: 160px;\n            position: sticky;\n            justify-content: flex-start;\n            align-items: flex-start;\n            flex-direction: column;\n            flex-shrink: 0;\n            display: flex;\n            gap: 10px;\n        }\n\n        [part=\"content-container\"] {\n            padding-left: 2px;\n            padding-right: 2px;\n            overflow: hidden;\n            flex: 1 1 0%;\n            max-width: 100%;\n        }\n    }\n`;"],"names":["Blockquote","className","children","React","createElement","$SVGQuote","props","width","height","viewBox","xmlns","part","d","fillRule","Breadcrumbs","items","as","Link","$Link","map","item","index","lastActive","length","Fragment","key","href","title","$BreadcrumbIcon","_a","rest","__rest","Object","assign","Callout","kind","icon","$BulbIcon","$CheckIcon","$WarningIcon","$DangerIcon","$NoteIcon","$IconInfo","fill","clipRule","stroke","strokeLinecap","strokeLinejoin","strokeWidth","Card","description","imgSrc","imgAlt","logoSrc","logoAlt","shadow","link","btnText","cardContent","undefined","CardHost","src","alt","Text","weight","Button","size","Code","ColorSchemeButton","currentScheme","changeColorScheme","useColorScheme","theme","IconDarkMode","IconLightMode","onClick","setCurrentScheme","useState","useEffect","updateScheme","html","document","querySelector","scheme","getAttribute","finalScheme","getPreferredColorScheme","updateColorSchemeInHead","observer","MutationObserver","observe","attributes","attributeFilter","disconnect","colorScheme","preferredColorScheme","setAttribute","localStorage","setItem","styleElement","head","appendChild","textContent","window","matchMedia","matches","clipPath","id","Details","label","ux","useUXEvents","uxClick","useUXClick","docs","details","open","close","isDeepKind","includes","$Icon","$IconDeep","Hr","HrHost","Image","style","caption","img","ImageHost","Update","date","version","UpdateHost","Badge"],"mappings":"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"}

package/dist/VideoGuide-BNPKC79p.js

@@ -0,0 +1,2 @@
+import e,{forwardRef as t,useState as n,useEffect as r,useRef as l,createContext as c,useContext as a}from"react";import{a as i,I as o}from"./Icon-CbDEiA4L.js";import{B as s}from"./Button-BBxaVRAi.js";import{E as d}from"./useUXEvents-C4q-ORmz.js";import{u as m,a as u}from"./TabsAnalytics-OQlfG-3q.js";import{Tabs as h}from"radix-ui";import{ChevronLeft as v,ChevronRight as E}from"lucide-react";const f="a1cbq3a5",p=t(function(t,n){var{href:r="",children:l,newWindow:c,as:a}=t,o=i(t,["href","children","newWindow","as"]);const s=a||g;return c?e.createElement(s,Object.assign({ref:n,href:r,target:"_blank",rel:"noreferrer",className:f},o),l):e.createElement(s,Object.assign({ref:n,className:f,href:r||void 0},o),l)});function g(t){var{children:n}=t,r=i(t,["children"]);return e.createElement("a",Object.assign({},r),n)}p.displayName="Anchor";function w({className:t,children:n,size:r="sm",kind:l="default",pre:c=!1}){return e.createElement("xyd-badge",{className:`butvd2b ${t||""}`,"data-size":r,"data-kind":l,"data-pre":c?"true":void 0},e.createElement("span",{part:"child"},n))}function b(t){const{isVisible:n,handleClose:r}=C(t.store,t.label),l=()=>{var e;r(),null===(e=t.onClose)||void 0===e||e.call(t)};if(!n)return null;if("secondary"===t.kind)return e.createElement(b.Secondary,Object.assign({},t,{onClose:l}));let c=null;return t.icon&&(c="string"==typeof t.icon?e.createElement(o,{name:t.icon,size:16}):t.icon),e.createElement("xyd-banner",{className:"bacjk89"},e.createElement("div",{part:"content"},e.createElement("a",{href:t.href,target:"_blank"},c,t.children,t.label?e.createElement("span",{part:"info"},t.label):null,t.href?e.createElement("svg",{viewBox:"0 0 20 20",style:{width:20,height:20}},e.createElement("path",{fillRule:"evenodd",d:"M3.5 10a.75.75 0 0 1 .75-.75h9.69l-2.72-2.72a.75.75 0 1 1 1.06-1.06l4 4a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06-1.06l2.72-2.72h-9.69a.75.75 0 0 1-.75-.75Z"})):null)),t.store?e.createElement("div",{part:"close"},e.createElement(y,{onClick:l})):null)}function C(e,t){const[l,c]=n(!0);r(()=>{if(e){const e=`xyd-banner-closed-${t||"default"}`,n=localStorage.getItem(e);if(n){const e=Date.now(),t=parseInt(n)<=e;c(t)}}},[e,t]);return{isVisible:l,handleClose:()=>{if(e){const n=`xyd-banner-closed-${t||"default"}`,r=Date.now()+1e3*e;localStorage.setItem(n,r.toString())}c(!1)}}}function y(t){return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:16,height:16,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",onClick:t.onClick},e.createElement("path",{d:"M18 6 6 18"}),e.createElement("path",{d:"m6 6 12 12"}))}b.Secondary=function(t){const{isVisible:n,handleClose:r}=C(t.store,t.label);if(!n)return null;let l=null;return t.label&&(l=e.createElement(s,{size:"sm",kind:"secondary"},t.label)),e.createElement("xyd-banner",{"data-kind":"secondary",className:"b1wuahng"},t.children,l,e.createElement("div",{part:"close"},e.createElement(y,{onClick:()=>{var e;r(),null===(e=t.onClose)||void 0===e||e.call(t)}})))};function k({children:t,href:n,icon:r,title:l,kind:c,size:a,className:i,as:s}){const d=s||z,m=r&&"string"==typeof r?e.createElement(o,{name:r}):r;return e.createElement("xyd-guidecard",{className:`gh34a3o ${i||""}`,"data-kind":c,"data-size":a},e.createElement(d,{part:"link",href:n},e.createElement("div",{part:"item"},m&&e.createElement("div",{part:"icon"},m),e.createElement("div",{part:"content"},l&&e.createElement(k.Title,null,l),e.createElement("div",{part:"body"},t)))))}function x(){return e.createElement("div",{part:"pointer"},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",viewBox:"0 0 24 24"},e.createElement("path",{fillRule:"evenodd",d:"M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z",clipRule:"evenodd"})))}function z(t){var{href:n,children:r}=t,l=i(t,["href","children"]);return e.createElement("a",Object.assign({href:n},l),r)}k.Title=function({children:t}){return e.createElement("div",{part:"title"},e.createElement("div",{part:"title-body"},t),e.createElement(x,null))},k.List=function({children:t}){return e.createElement("xyd-guidecard-list",{className:"gilz89t"},t)};function j(t){const{children:n,size:r=1,as:l,id:c,onClick:a,className:i,kind:o,active:s,label:d,subtitle:m,noanchor:u,ref:h,style:v}=t;let E=l||`h${r}`;return e.createElement(e.Fragment,null,e.createElement(E,{style:v||void 0,className:` h1tn40xd  ${i||""}`,"data-size":r,"data-kind":o,"data-has-label":String(d?"true":"false"),"data-noanchor":String(u||"false"),"data-active":String(s||"false"),onClick:u?void 0:a,id:c,ref:h},n,d&&e.createElement(w,{size:"sm"},d),c&&!u&&e.createElement(N,null)),m?e.createElement(j,Object.assign({},t,{size:4,kind:"muted",subtitle:void 0,label:void 0}),m):null)}function N(){return e.createElement("svg",{part:"icon",xmlns:"http://www.w3.org/2000/svg",width:15,height:15,fill:"currentColor",viewBox:"0 0 24 24",role:"presentation"},e.createElement("path",{fillRule:"evenodd",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",clipRule:"evenodd"}))}function O(t){var{kind:n}=t,r=i(t,["kind"]);switch(n){case"x":return e.createElement(O.Twitter,Object.assign({},r));case"facebook":return e.createElement(O.Facebook,Object.assign({},r));case"youtube":return e.createElement(O.Youtube,Object.assign({},r));case"discord":return e.createElement(O.Discord,Object.assign({},r));case"slack":return e.createElement(O.Slack,Object.assign({},r));case"github":return e.createElement(O.Github,Object.assign({},r));case"linkedin":return e.createElement(O.Linkedin,Object.assign({},r));case"instagram":return e.createElement(O.Intagram,Object.assign({},r));case"hackernews":return e.createElement(O.HackerNews,Object.assign({},r));case"medium":return e.createElement(O.Medium,Object.assign({},r));case"telegram":return e.createElement(O.Telegram,Object.assign({},r));case"bluesky":return e.createElement(O.Bluesky,Object.assign({},r));case"reddit":return e.createElement(O.Reddit,Object.assign({},r))}return null}O.Twitter=function(t){return e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",color:"currentColor",width:"24",height:"24",viewBox:"0 0 512 512",style:{color:"currentcolor",fill:"currentcolor"}},t),e.createElement("path",{d:"M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"}))},O.Facebook=function(t){return e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",color:"currentColor",width:"24",height:"24",viewBox:"0 0 512 512",style:{color:"currentcolor",fill:"currentcolor"}},t),e.createElement("path",{d:"M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"}))},O.Youtube=function(t){return e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",color:"currentColor",width:"24",height:"24",viewBox:"0 0 576 512",style:{color:"currentcolor",fill:"currentcolor"}},t),e.createElement("path",{d:"M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"}))},O.Discord=function(t){return e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",color:"currentColor",width:"24",height:"24",viewBox:"0 0 640 512",style:{color:"currentcolor",fill:"currentcolor"}},t),e.createElement("path",{d:"M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"}))},O.Slack=function(t){return e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",color:"currentColor",width:"24",height:"24",viewBox:"0 0 448 512",style:{color:"currentcolor",fill:"currentcolor"}},t),e.createElement("path",{d:"M94.12 315.1c0 25.9-21.16 47.06-47.06 47.06S0 341 0 315.1c0-25.9 21.16-47.06 47.06-47.06h47.06v47.06zm23.72 0c0-25.9 21.16-47.06 47.06-47.06s47.06 21.16 47.06 47.06v117.84c0 25.9-21.16 47.06-47.06 47.06s-47.06-21.16-47.06-47.06V315.1zm47.06-188.98c-25.9 0-47.06-21.16-47.06-47.06S139 32 164.9 32s47.06 21.16 47.06 47.06v47.06H164.9zm0 23.72c25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06H47.06C21.16 243.96 0 222.8 0 196.9s21.16-47.06 47.06-47.06H164.9zm188.98 47.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06h-47.06V196.9zm-23.72 0c0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06V79.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06V196.9zM283.1 385.88c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06v-47.06h47.06zm0-23.72c-25.9 0-47.06-21.16-47.06-47.06 0-25.9 21.16-47.06 47.06-47.06h117.84c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06H283.1z"}))},O.Github=function(t){return e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",color:"currentColor",width:"24",height:"24",viewBox:"0 0 496 512",style:{color:"currentcolor",fill:"currentcolor"}},t),e.createElement("path",{d:"M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"}))},O.Linkedin=function(t){return e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",color:"currentColor",width:"24",height:"24",viewBox:"0 0 448 512",style:{color:"currentcolor",fill:"currentcolor"}},t),e.createElement("path",{d:"M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"}))},O.Intagram=function(t){return e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",color:"currentColor",width:"24",height:"24",viewBox:"0 0 448 512",style:{color:"currentcolor",fill:"currentcolor"}},t),e.createElement("path",{d:"M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"}))},O.HackerNews=function(t){return e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",color:"currentColor",width:"24",height:"24",viewBox:"0 0 448 512",style:{color:"currentcolor",fill:"currentcolor"}},t),e.createElement("path",{d:"M0 32v448h448V32H0zm21.2 197.2H21c.1-.1.2-.3.3-.4 0 .1 0 .3-.1.4zm218 53.9V384h-31.4V281.3L128 128h37.3c52.5 98.3 49.2 101.2 59.3 125.6 12.3-27 5.8-24.4 60.6-125.6H320l-80.8 155.1z"}))},O.Medium=function(t){return e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",color:"currentColor",width:"24",height:"24",viewBox:"0 0 640 512",style:{color:"currentcolor",fill:"currentcolor"}},t),e.createElement("path",{d:"M180.5,74.262C80.813,74.262,0,155.633,0,256S80.819,437.738,180.5,437.738,361,356.373,361,256,280.191,74.262,180.5,74.262Zm288.25,10.646c-49.845,0-90.245,76.619-90.245,171.095s40.406,171.1,90.251,171.1,90.251-76.619,90.251-171.1H559C559,161.5,518.6,84.908,468.752,84.908Zm139.506,17.821c-17.526,0-31.735,68.628-31.735,153.274s14.2,153.274,31.735,153.274S640,340.631,640,256C640,171.351,625.785,102.729,608.258,102.729Z"}))},O.Telegram=function(t){return e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",color:"currentColor",width:"24",height:"24",viewBox:"0 0 496 512",style:{color:"currentcolor",fill:"currentcolor"}},t),e.createElement("path",{d:"M248,8C111.033,8,0,119.033,0,256S111.033,504,248,504,496,392.967,496,256,384.967,8,248,8ZM362.952,176.66c-3.732,39.215-19.881,134.378-28.1,178.3-3.476,18.584-10.322,24.816-16.948,25.425-14.4,1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25,5.342-39.5,3.652-3.793,67.107-61.51,68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608,69.142-14.845,10.194-26.894,9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7,18.45-13.7,108.446-47.248,144.628-62.3c68.872-28.647,83.183-33.623,92.511-33.789,2.052-.034,6.639.474,9.61,2.885a10.452,10.452,0,0,1,3.53,6.716A43.765,43.765,0,0,1,362.952,176.66Z"}))},O.Bluesky=function(t){return e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",color:"currentColor",width:"24",height:"24",viewBox:"0 0 576 512",style:{color:"currentcolor",fill:"currentcolor"}},t),e.createElement("path",{d:"M407.8 294.7c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3zM288 227.1C261.9 176.4 190.9 81.9 124.9 35.3C61.6-9.4 37.5-1.7 21.6 5.5C3.3 13.8 0 41.9 0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7c3.3-.5 6.6-.9 10-1.4c-3.3 .5-6.6 1-10 1.4C74.3 308.6-9.1 342.8 100.3 464.5C220.6 589.1 265.1 437.8 288 361.1c22.9 76.7 49.2 222.5 185.6 103.4c102.4-103.4 28.1-156-65.8-169.9c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3c64.1 7.1 133.6-15.1 153.2-80.7C566.9 194 576 75 576 58.4s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8C385.1 81.9 314.1 176.4 288 227.1z"}))},O.Reddit=function(t){return e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",color:"currentColor",width:"24",height:"24",viewBox:"0 0 512 512",style:{color:"currentcolor",fill:"currentcolor"}},t),e.createElement("path",{d:"M0 256C0 114.6 114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256L37.1 512c-13.7 0-20.5-16.5-10.9-26.2L75 437C28.7 390.7 0 326.7 0 256zM349.6 153.6c23.6 0 42.7-19.1 42.7-42.7s-19.1-42.7-42.7-42.7c-20.6 0-37.8 14.6-41.8 34c-34.5 3.7-61.4 33-61.4 68.4l0 .2c-37.5 1.6-71.8 12.3-99 29.1c-10.1-7.8-22.8-12.5-36.5-12.5c-33 0-59.8 26.8-59.8 59.8c0 24 14.1 44.6 34.4 54.1c2 69.4 77.6 125.2 170.6 125.2s168.7-55.9 170.6-125.3c20.2-9.6 34.1-30.2 34.1-54c0-33-26.8-59.8-59.8-59.8c-13.7 0-26.3 4.6-36.4 12.4c-27.4-17-62.1-27.7-100-29.1l0-.2c0-25.4 18.9-46.5 43.4-49.9l0 0c4.4 18.8 21.3 32.8 41.5 32.8zM177.1 246.9c16.7 0 29.5 17.6 28.5 39.3s-13.5 29.6-30.3 29.6s-31.4-8.8-30.4-30.5s15.4-38.3 32.1-38.3zm190.1 38.3c1 21.7-13.7 30.5-30.4 30.5s-29.3-7.9-30.3-29.6c-1-21.7 11.8-39.3 28.5-39.3s31.2 16.6 32.1 38.3zm-48.1 56.7c-10.3 24.6-34.6 41.9-63 41.9s-52.7-17.3-63-41.9c-1.2-2.9 .8-6.2 3.9-6.5c18.4-1.9 38.3-2.9 59.1-2.9s40.7 1 59.1 2.9c3.1 .3 5.1 3.6 3.9 6.5z"}))};var V="labae1k",M="i13ytyvq";function L({children:t}){return e.createElement("ul",{className:V},t)}function B({children:t}){return e.createElement("ol",{className:V},t)}L.Item=function({children:t}){return e.createElement("li",{className:M},t)};function I(t){const n=t.as||S;return e.createElement("xyd-navlinks",{className:`n1xhrk1 ${t.className||""}`},e.Children.count(t.children)>0?e.createElement("div",{part:"children-slot"},t.children):null,e.createElement("div",{part:"links"},t.prev?e.createElement(n,{href:t.prev.href,title:t.prev.title,part:"link"},e.createElement(T,{part:"icon"}),t.prev.title):e.createElement("div",null),t.next&&e.createElement(n,{href:t.next.href,title:t.next.title,part:"link"},t.next.title,e.createElement(H,{part:"icon"}))))}function S(t){var{children:n}=t,r=i(t,["children"]);return e.createElement("a",Object.assign({},r),n)}function H(t){return e.createElement("svg",Object.assign({width:15,height:15,viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t),e.createElement("path",{d:"M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"}))}function T(t){return e.createElement("svg",Object.assign({width:15,height:15,viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t),e.createElement("path",{d:"M6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355L3.70711 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H3.70711L6.85355 11.1464C7.04882 11.3417 7.04882 11.6583 6.85355 11.8536C6.65829 12.0488 6.34171 12.0488 6.14645 11.8536L2.14645 7.85355C1.95118 7.65829 1.95118 7.34171 2.14645 7.14645L6.14645 3.14645C6.34171 2.95118 6.65829 2.95118 6.85355 3.14645Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"}))}function $({children:t,className:n,kind:r}){return e.createElement("xyd-steps",{"data-kind":r,className:`s3kfd8c ${n||""}`},e.createElement("ol",null,t))}$.Item=function({children:t,icon:n,title:r,className:l}){const c="string"==typeof n?e.createElement(o,{name:n}):n;return e.createElement("xyd-steps-item",{className:`s1et872q ${l||""}`,"data-numeric":n?void 0:"true"},e.createElement("li",null,r&&e.createElement("span",{part:"title"},r),t,c&&e.createElement("span",{part:"step"},c)))};var R="h14vj3ri",Z="t1l6tz9b",A="thzxr0l",q="t1g1altt",W="tdsg57t",_="th2d3qd",D="c8pe5i8";function G({children:t,kind:n,className:r}){return e.createElement("table",{"data-kind":n||void 0,className:`${R} ${r||""}`},t)}G.Head=function({children:t}){return e.createElement("thead",{className:Z},t)},G.Th=function({children:t,numeric:n}){return e.createElement("th",{className:`${q} ${n?"numeric":""}`},t)},G.Tr=function({children:t}){return e.createElement("tr",{className:W},t)},G.Body=function({children:t}){return e.createElement("tbody",{className:A},t)},G.Td=function({children:t,numeric:n,muted:r}){return e.createElement("td",{className:`${_} ${n?"numeric":""} ${r?"muted":""}`},t)},G.Cell=function({children:t}){return e.createElement("xyd-table-cell",{className:D},e.createElement("div",{part:"child"},t))};function P(t,r,c){const a=m().tabsRef,i=void 0!==t&&void 0!==r,[o,s]=n(c.length>0&&e.isValidElement(c[0])?c[0].props.value:""),u=i?t:o,h=l(u),[v,E]=n("forward");return[v,u,t=>{const n=c.findIndex(t=>e.isValidElement(t)&&t.props.value===h.current),l=c.findIndex(n=>e.isValidElement(n)&&n.props.value===t)>n?"forward":"backward";if(E(l),h.current=t,i||s(t),r&&r(t),null==a?void 0:a.current){const e={value:t,previousValue:h.current,direction:l},n=new CustomEvent(d,{detail:e,bubbles:!0});a.current.dispatchEvent(n)}}]}const F=c({direction:"forward"});function Y({children:t,value:n,onChange:l,slide:c=!0,className:a}){const i=m(),o=e.Children.toArray(t),s=o.filter(t=>e.isValidElement(t)&&(t.type===Y.Item||"function"==typeof t.type&&"displayName"in t.type&&"Tabs.Item"===t.type.displayName)),d=o.filter(t=>!e.isValidElement(t)||t.type!==Y.Item&&!("function"==typeof t.type&&"displayName"in t.type&&"Tabs.Item"===t.type.displayName)),[u,v,E]=P(n,l,s);return r(()=>{i.setValue(v)},[v]),e.createElement(F.Provider,{value:{direction:u}},e.createElement(h.Root,{value:v,onValueChange:E},e.createElement("xyd-tabs",{ref:i.tabsRef,className:`tk0mvkq ${a||""}`},e.createElement("nav",{part:"nav"},e.createElement(h.List,{asChild:!0},e.createElement("ul",{part:"list"},s))),e.createElement("div",{part:"content","data-slide":c?"true":"false"},d))))}function U(t){var n=i(t,[]);return e.createElement("a",Object.assign({},n),n.children)}Y.Item=function({children:t,value:l,href:c,as:a,defaultActive:i}){const o=a||U,s="boolean"==typeof i,[d,m]=n(s?i?"active":"inactive":void 0);let u=s&&null!=d?{"data-state":d}:void 0;return r(()=>{s&&m(void 0)},[]),e.createElement(h.Trigger,Object.assign({value:l,asChild:!0},u),e.createElement("li",{part:"item"},e.createElement(o,{part:"link",href:c},t)))},Y.Content=function({children:t,value:l,defaultActive:c}){const{direction:i}=a(F),o="boolean"==typeof c,[s,d]=n(o?c?"active":"inactive":void 0);let m=o&&null!=s?{"data-state":s}:void 0;return r(()=>{o&&d(void 0)},[]),e.createElement(h.Content,Object.assign({value:l,forceMount:!0,asChild:!0},m),e.createElement("div",{className:"t1o9m54","data-direction":i},e.createElement("div",{part:"child"},t)))};function X({children:t,value:c,onChange:a,className:i}){const o=m(),[s,d]=n(!1),[u,f]=n(!1),p=l(null),g=e.Children.toArray(t),w=g.filter(t=>e.isValidElement(t)&&(t.type===X.Item||"function"==typeof t.type&&"displayName"in t.type&&"Tabs.Item"===t.type.displayName)),b=g.filter(t=>!e.isValidElement(t)||t.type!==X.Item&&!("function"==typeof t.type&&"displayName"in t.type&&"Tabs.Item"===t.type.displayName)),[C,y,k]=P(c,a,w);r(()=>{o.setValue(y)},[y]);const x=()=>{if(p.current){const{scrollLeft:e,scrollWidth:t,clientWidth:n}=p.current;d(e>0),f(e<t-n)}};r(()=>(x(),window.addEventListener("resize",x),()=>window.removeEventListener("resize",x)),[]);const z=e=>{if(p.current){const t="left"===e?-200:200;p.current.scrollBy({left:t,behavior:"smooth"})}};return e.createElement(h.Root,{asChild:!0,value:y,onValueChange:k},e.createElement("xyd-tabs",{ref:o.tabsRef,"data-kind":"secondary",className:`t1gurlv3 ${i||""}`},e.createElement("div",{part:"buttons"},s&&e.createElement("button",{onClick:()=>z("left"),part:"arrow"},e.createElement(v,{part:"arrow-icon"})),e.createElement("div",{ref:p,onScroll:x,part:"scroller"},e.createElement("div",{part:"scroller-container"},e.createElement(h.List,null,w))),u&&e.createElement("button",{onClick:()=>z("right"),part:"arrow"},e.createElement(E,{part:"arrow-icon"}))),e.createElement("div",{part:"content"},b)))}function J(t){var n=i(t,[]);return e.createElement("a",Object.assign({},n),n.children)}X.Item=function({children:t,value:l,href:c,as:a,defaultActive:i}){const o=a||J,s="boolean"==typeof i,[d,m]=n(s?i?"active":"inactive":void 0);let u=s&&null!=d?{"data-state":d}:void 0;return r(()=>{s&&m(void 0)},[]),e.createElement(h.Trigger,Object.assign({className:"tulm1r6",value:l,asChild:!0},u),e.createElement("div",null,e.createElement(o,{href:c},t)))},X.Content=function({children:t,value:n}){return e.createElement(h.Content,{asChild:!0,value:n},e.createElement("div",null,t))};const K=c({kind:null});function Q(t){let n;return n="secondary"===t.kind?e.createElement(K.Provider,{value:{kind:"secondary"}},e.createElement(X,Object.assign({},t))):e.createElement(K.Provider,{value:{kind:null}},e.createElement(Y,Object.assign({},t))),e.createElement(u,null,n)}Q.Item=function(t){const{kind:n}=a(K);return"secondary"===n?e.createElement(X.Item,Object.assign({},t)):e.createElement(Y.Item,Object.assign({},t))},Q.Item.displayName="Tabs.Item",Q.Content=function(t){const{kind:n}=a(K);return"secondary"===n?e.createElement(X.Content,Object.assign({},t)):e.createElement(Y.Content,Object.assign({},t))},Q.Content.displayName="Tabs.Content";var ee="VideoGuide-module_VideoPlayerHost__wcML-";function te(){return null}function ne(){return e.createElement("svg",{"aria-hidden":"true",height:32,width:32,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M8 14.25A6.25 6.25 0 0 0 14.25 8 6.242 6.242 0 0 0 8 1.75 6.25 6.25 0 0 0 1.75 8 6.25 6.25 0 0 0 8 14.25ZM8 16a8 8 0 0 0 8-8c0-4.419-3.57-8-8-8a8 8 0 0 0-8 8 8 8 0 0 0 8 8Z"}),e.createElement("path",{d:"M10.817 7.659A.415.415 0 0 1 11 8a.415.415 0 0 1-.183.341L7.242 10.91c-.305.218-.742.02-.742-.34V5.431c0-.36.437-.56.742-.341l3.575 2.568Z"}))}te.Miniature=function(t){const{videoSrc:n,description:r="Watch the video guide"}=t;return e.createElement("xyd-videoguide-miniature",{className:`${ee} ${t.className||""}`},e.createElement("div",{part:"shape"},e.createElement("div",{part:"frame"},e.createElement("iframe",{width:"100%",height:"100%",allow:"autoplay; fullscreen",src:n}),e.createElement("div",{part:"thumbnail"})),e.createElement("div",{part:"cover"},e.createElement("div",{part:"controls"},e.createElement("button",{part:"button",type:"button"},e.createElement("div",{"aria-hidden":"true",part:"icon"},e.createElement(ne,null)),e.createElement("div",{part:"description-container"},e.createElement("span",{part:"description"},r)))))))};export{p as A,w as B,k as G,j as H,O as I,L,I as N,$ as S,G as T,te as V,B as a,Q as b,b as c};
+//# sourceMappingURL=VideoGuide-BNPKC79p.js.map