@xyd-js/components 0.1.0-build.179 → 0.1.0-build.181

package/dist/PageFirstSlide-BHvh0uQZ.js

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

package/dist/PageFirstSlide-BHvh0uQZ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageFirstSlide-BHvh0uQZ.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 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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"}

package/dist/PageFirstSlide-BkRyYpvn.js

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

package/dist/PageFirstSlide-BkRyYpvn.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageFirstSlide-BkRyYpvn.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 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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"}

package/dist/PageFirstSlide-BpZ42bEU.js

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

package/dist/PageFirstSlide-BpZ42bEU.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageFirstSlide-BpZ42bEU.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 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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"}

package/dist/PageFirstSlide-Bunxk4c7.js

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

package/dist/PageFirstSlide-Bunxk4c7.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageFirstSlide-Bunxk4c7.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 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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"}

package/dist/PageFirstSlide-C0NlaEB8.js

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

package/dist/PageFirstSlide-C0NlaEB8.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageFirstSlide-C0NlaEB8.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 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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"}

package/dist/PageFirstSlide-CJHlB1hw.js

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

package/dist/PageFirstSlide-CJHlB1hw.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageFirstSlide-CJHlB1hw.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 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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"}

package/dist/PageFirstSlide-CT-gxRGW.js

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

package/dist/PageFirstSlide-CT-gxRGW.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageFirstSlide-CT-gxRGW.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 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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"}

package/dist/PageFirstSlide-Ca4YEsLz.js

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

package/dist/PageFirstSlide-Ca4YEsLz.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageFirstSlide-Ca4YEsLz.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 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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"}