@xyd-js/components 0.1.0-dev.0

package/dist/UnderlineNav--5kHQVtF.js

@@ -0,0 +1,2 @@
+import e,{useState as t,useRef as a,useEffect as n}from"react";import{_ as r}from"./_rollupPluginBabelHelpers-D_RxUajo.js";import*as c from"@radix-ui/react-tabs";import{ChevronLeft as l,ChevronRight as i}from"lucide-react";var s="hh34a3o",m="hilz89t",o="h1rnhmpa",u="lajci2p",d="iezrce7",v="i1vhi0b8",h="i1m2lps9",f="r1new93p",E="t1u3d3ty",N="t4udf3g",p="t1icpluq",b="badgd67",g="bcjznmh",w="p13ekkiz",C="h15733ml";function k(t){var a=t.children,n=t.href,r=t.icon,c=t.title,l=t.kind,i=t.size;return e.createElement("div",{className:"\n        ".concat(s,"\n        ").concat("secondary"===l&&m,"\n        ").concat("secondary"===l&&"md"==i&&o,"\n    ")},e.createElement("a",{className:u,href:n},e.createElement("div",{className:"\n                ".concat(d,"\n                ").concat("secondary"===l&&v,"\n            ")},r&&e.createElement("div",{className:h},r),e.createElement("div",{className:f},e.createElement("div",{className:E},e.createElement("div",{className:"\n                            ".concat(E," \n                            ").concat(N,"\n                            ").concat("md"==i&&p,"\n                        ")},c),e.createElement(z,null)),e.createElement("div",{className:"\n                        ".concat(b,"\n                        ").concat("md"==i&&g,"\n                    ")},a)))))}function z(){return e.createElement("div",{"data-pointer":"true",className:w},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",viewBox:"0 0 24 24"},e.createElement("path",{fillRule:"evenodd",d:"M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z",clipRule:"evenodd"})))}k.List=function(t){var a=t.children;return e.createElement("div",{className:C},a)};var x="h3kfd8c",L="l1et872q";function y(t){var a=t.children;return e.createElement("ol",{className:x},a)}y.Item=function(t){var a=t.children;return e.createElement("li",{className:L},a)};var T="h14vj3ri",j="t1l6tz9b",R="thzxr0l",B="t1g1altt";function I(t){var a=t.children;return e.createElement("table",{className:T},a)}I.Th=function(t){var a=t.children;return e.createElement("th",{className:j},a)},I.Tr=function(t){var a=t.children;return e.createElement("tr",{className:R},a)},I.Td=function(t){var a=t.children;return e.createElement("td",{className:B},a)};var q="hh8vcxa",S="b2p5907",V="coeb6fw",W="h196u2m6",_="i1hlflsk",G="hownbu8",H="cuwerl2",M="hlivi01";function P(s){var m=s.children,o=s.items,u=s.tabIndex,d=t(!1),v=r(d,2),h=v[0],f=v[1],E=t(!1),N=r(E,2),p=N[0],b=N[1],g=a(null),w=t(o[u||0]||""),C=r(w,2),k=C[0],z=C[1],x=function(){if(g.current){var e=g.current,t=e.scrollLeft,a=e.scrollWidth,n=e.clientWidth;f(t>0),b(t<a-n)}};n((function(){return x(),window.addEventListener("resize",x),function(){return window.removeEventListener("resize",x)}}),[]);var L=function(e){if(g.current){var t="left"===e?-200:200;g.current.scrollBy({left:t,behavior:"smooth"})}};return e.createElement(c.Root,{asChild:!0,value:k,onValueChange:z},e.createElement("div",{className:q},e.createElement("div",{className:S},h&&e.createElement("button",{onClick:function(){return L("left")},className:W},e.createElement(l,{className:_})),e.createElement("div",{ref:g,onScroll:x,className:G},e.createElement("div",{className:H},e.createElement(c.List,null,o.map((function(t,a){return e.createElement(U,{key:a,value:t},t)}))))),p&&e.createElement("button",{onClick:function(){return L("right")},className:W},e.createElement(i,{className:_}))),e.createElement("div",{className:V},m)))}function U(t){var a=t.children,n=t.value;return e.createElement(c.Trigger,{asChild:!0,value:n},e.createElement("button",{className:"".concat(M)},a))}P.Content=function(t){var a=t.children,n=t.value;return e.createElement(c.Content,{asChild:!0,value:n},a)};var Z="h1bta36o",A="uxs4bf1",D="ifn7ecb",F="i441kmn";function J(t){var a=t.children,n=t.value,r=t.onChange;return e.createElement(c.Root,{asChild:!0,value:n,onValueChange:r},e.createElement("nav",{className:Z},e.createElement(c.List,{asChild:!0},e.createElement("ul",{className:A},a))))}J.Item=function(t){var a=t.children,n=t.value,r=t.href;return e.createElement(c.Trigger,{asChild:!0,value:n},e.createElement("li",{className:D},e.createElement("a",{href:r,className:"".concat(F)},a)))};export{k as G,y as S,I as T,J as U,P as a};
+//# sourceMappingURL=UnderlineNav--5kHQVtF.js.map

package/dist/UnderlineNav--5kHQVtF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnderlineNav--5kHQVtF.js","sources":["../src/writer/GuideCard/GuideCard.styles.tsx","../src/writer/GuideCard/GuideCard.tsx","../src/writer/Steps/Steps.styles.tsx","../src/writer/Steps/Steps.tsx","../src/writer/Table/Table.styles.tsx","../src/writer/Table/Table.tsx","../src/writer/Tabs/Tabs.styles.tsx","../src/writer/Tabs/Tabs.tsx","../src/writer/UnderlineNav/UnderlineNav.styles.tsx","../src/writer/UnderlineNav/UnderlineNav.tsx"],"sourcesContent":["import {css} from \"@linaria/core\";\n\nexport const $guide = {\n    host: css`\n    `,\n    host$$secondary: css`\n        //flex-grow: 1;\n        //width: 100%;\n        display: flex;\n        position: relative;\n        overflow: hidden;\n        border: .5px solid #ececf1;\n        background: linear-gradient(238deg, rgba(247, 247, 248, .5) 0%, rgba(247, 247, 248, 1) 100%);\n        border-radius: 8px;\n        padding: 16px 20px 20px;\n        z-index: 0;\n        transition: box-shadow .2s ease-in-out, background-image .2s ease;\n\n        &:hover {\n            background: linear-gradient(238deg, rgba(255, 255, 255, .5) 0%, rgba(250, 250, 250, 1) 100%);\n        }\n    `,\n    host$$secondary$$md: css`\n        padding: 21px 25px 25px;\n    `,\n    link: css`\n        width: 100%;\n        height: 100%;\n    `,\n    item: css`\n        border-radius: 8px;\n        display: flex;\n\n        align-items: flex-start;\n        cursor: pointer;\n        transition: opacity .15s;\n\n        &:hover {\n            [data-pointer=\"true\"] {\n                opacity: 1;\n                transform: translate(0);\n            }\n        }\n    `,\n    item$$secondary: css`\n        width: 100%;\n        height: 100%;\n    `,\n    icon: css`\n        line-height: 0px;\n        font-size: 24px;\n        border-radius: 8px;\n        width: 48px;\n        height: 48px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        color: #353740;\n        border: 1px solid #ececf1;\n        background: linear-gradient(238deg, rgba(255, 255, 255, .5) 0%, rgba(250, 250, 250, 1) 100%);\n        transition: background .2s ease;\n        box-sizing: border-box;\n        flex-shrink: 0;\n    `,\n    right: css`\n        padding-left: 16px;\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n    `,\n    title: css`\n        display: flex;\n        color: #202123;\n        font-weight: 400;\n        align-items: center;\n        transition: color .15s;\n    `,\n    titleBody: css`\n        font-size: 16px;\n        line-height: 20px;\n    `,\n    titleBody$$md: css`\n        font-size: 18px;\n    `,\n    body: css`\n        font-weight: 400;\n        font-size: 14px;\n        line-height: 20px;\n\n        color: #6e6e80;\n        white-space: normal;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    `,\n    body$$md: css`\n        font-size: 16px;\n    `,\n    pointer: css`\n        opacity: 0;\n        transform: translate(-4px);\n        display: flex;\n        justify-content: center;\n        transition: opacity .15s ease-in-out, transform .15s ease-in-out;\n    `\n}\n\n\nexport const $list = {\n    host: css`\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        justify-content: center;\n        gap: 30px;\n    `\n}","import React from \"react\"\n\nimport {$guide, $list} from \"./GuideCard.styles\";\n\nexport interface GuideCardProps {\n    children: React.ReactNode;\n    href: string\n    title: string;\n    icon?: React.ReactNode;\n    kind?: \"secondary\"\n    size?: \"sm\" | \"md\"\n}\n\nexport function GuideCard({\n                              children,\n                              href,\n                              icon,\n                              title,\n                              kind,\n                              size,\n\n                          }: GuideCardProps) {\n    return <div className={`\n        ${$guide.host}\n        ${kind === \"secondary\" && $guide.host$$secondary}\n        ${kind === \"secondary\" && size == \"md\" && $guide.host$$secondary$$md}\n    `}>\n        <a className={$guide.link} href={href}>\n            <div className={`\n                ${$guide.item}\n                ${kind === \"secondary\" && $guide.item$$secondary}\n            `}>\n                {icon && <div className={$guide.icon}>\n                    {icon}\n                </div>}\n                <div className={$guide.right}>\n                    <div className={$guide.title}>\n                        <div className={`\n                            ${$guide.title} \n                            ${$guide.titleBody}\n                            ${size == \"md\" && $guide.titleBody$$md}\n                        `}>\n                            {title}\n                        </div>\n                        <$Pointer/>\n                    </div>\n                    <div className={`\n                        ${$guide.body}\n                        ${size == \"md\" && $guide.body$$md}\n                    `}>\n                        {children}\n                    </div>\n                </div>\n            </div>\n        </a>\n    </div>\n}\n\nGuideCard.List = function GuideCardList({children}: { children: React.ReactNode }) {\n    return <div className={$list.host}>\n        {children}\n    </div>\n}\n\nfunction $Pointer() {\n    return <div data-pointer=\"true\" className={$guide.pointer}>\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width={24}\n            height={24}\n            fill=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n        >\n            <path\n                fillRule=\"evenodd\"\n                d=\"M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    </div>\n}","import {css} from \"@linaria/core\";\n\nexport const $steps = {\n    host: css`\n        padding-left: 0;\n        list-style: none;\n        counter-reset: ordered-listitem;\n\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n    `,\n    li: css`\n        padding-left: 32px;\n        position: relative;\n        line-height: 1.5;\n\n        &::after {\n            position: absolute;\n            top: 0;\n            left: 0;\n            counter-increment: ordered-listitem;\n            content: counter(ordered-listitem);\n\n            background: #ececf1;\n            color: #353740;\n            font-size: 12px;\n            line-height: 24px;\n            font-weight: 500;\n            text-align: center;\n            height: 24px;\n            width: 24px;\n            border-radius: 12px;\n        }\n    `,\n}","import React from \"react\"\n\nimport {$steps} from \"./Steps.styles\";\n\nexport interface StepsProps {\n    children: React.ReactNode;\n}\n\nexport function Steps({children}: StepsProps) {\n    return <ol className={$steps.host}>\n        {children}\n    </ol>\n\n}\n\nexport interface StepsItemProps {\n    children: React.ReactNode;\n}\n\nSteps.Item = function StepsItem({children}: StepsItemProps) {\n    return <li className={$steps.li}>\n        {children}\n    </li>\n}","import {css} from \"@linaria/core\";\n\nconst colors = {\n    primary: \"#D1D5DB\"\n}\n\nexport const $table = {\n    host: css`\n        display: block;\n        overflow-x: scroll;\n\n        border-collapse: collapse;\n        border-radius: 3px;\n    `,\n    th: css`\n        padding: 0.5rem 1rem;\n        margin: 0;\n\n        font-weight: 600;\n        border-width: 1px;\n        border-color: ${colors.primary};\n        background: rgba(234, 238, 242, 0.5);\n    `,\n    tr: css`\n        padding: 0;\n        margin: 0;\n        border-top-width: 1px;\n        border-color: ${colors.primary};\n    `,\n    td: css`\n        padding: 0.5rem 1rem;\n        margin: 0;\n\n        border-width: 1px;\n        border-color: ${colors.primary};\n    `\n}\n\n\n","import React from \"react\"\n\nimport {$table} from \"./Table.styles\";\n\nexport interface TableProps {\n    children: React.ReactNode;\n}\n\nexport function Table({children}: TableProps) {\n    return <table className={$table.host}>\n        {children}\n    </table>\n}\n\nexport interface TableThProps {\n    children: React.ReactNode;\n}\n\nTable.Th = function TableTh({children}: TableThProps) {\n    return <th className={$table.th}>\n        {children}\n    </th>\n}\n\nexport interface TableTrProps {\n    children: React.ReactNode;\n}\n\nTable.Tr = function TableTr({children}: TableTrProps) {\n    return <tr className={$table.tr}>\n        {children}\n    </tr>\n\n}\n\nexport interface TableTdProps {\n    children: React.ReactNode;\n}\n\nTable.Td = function TableTd({children}: TableTdProps) {\n    return <td className={$table.td}>\n        {children}\n    </td>\n\n}","import {css} from \"@linaria/core\";\n\nexport const $sample = {\n    host: css`\n        position: relative;\n        max-width: 100%;\n    `,\n    buttons: css`\n        display: flex;\n        align-items: center;\n    `,\n    content: css`\n        margin-top: 16px;\n    `\n}\n\nexport const $arrow = {\n    host: css`\n        padding: 8px;\n        background-color: #ffffff;\n        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n    `,\n    icon: css`\n        width: 16px;\n        height: 16px;\n    `\n}\n\nexport const $scroller = {\n    host: css`\n        overflow-x: auto;\n        flex-grow: 1;\n    `,\n    container: css`\n        display: inline-flex;\n        gap: 4px;\n\n        border-radius: 8px;\n        background-color: #F3F4F6;\n        \n        padding: 4px;\n        margin-left: 4px;\n    `\n}\n\nexport const $button = {\n    host: css`\n        padding: 0.5rem 1rem;\n\n        border-radius: 0.375rem;\n        font-size: 0.875rem;\n        line-height: 1.25rem;\n        font-weight: 500;\n        white-space: nowrap;\n\n        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 300ms;\n\n        color: #6B7280;\n\n        &:hover {\n            color: #111827;\n        }\n\n        &[data-state=\"active\"] {\n            color: #111827;\n            background-color: #ffffff;\n            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n        }\n    `,\n    $$active: css`\n        color: #111827;\n        background-color: #ffffff;\n        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n    `\n}","import React, {useState, useRef, useEffect} from 'react'\nimport * as RadixTabs from \"@radix-ui/react-tabs\"\nimport {ChevronLeft, ChevronRight} from \"lucide-react\"\n\nimport {\n    $sample,\n    $arrow,\n    $scroller,\n    $button\n} from \"./Tabs.styles\";\n\nexport interface TabsProps {\n    children: React.ReactNode;\n    items: string[];\n    tabIndex?: number;\n}\n\nexport function Tabs({children, items, tabIndex}: TabsProps) {\n    const [showLeftArrow, setShowLeftArrow] = useState(false)\n    const [showRightArrow, setShowRightArrow] = useState(false)\n    const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n    const [value, setActiveTab] = useState(items[tabIndex || 0] || \"\")\n\n    const handleScroll = () => {\n        if (scrollContainerRef.current) {\n            const {scrollLeft, scrollWidth, clientWidth} = scrollContainerRef.current\n            setShowLeftArrow(scrollLeft > 0)\n            setShowRightArrow(scrollLeft < scrollWidth - clientWidth)\n        }\n    }\n\n    useEffect(() => {\n        handleScroll()\n        window.addEventListener('resize', handleScroll)\n        return () => window.removeEventListener('resize', handleScroll)\n    }, [])\n\n    const scroll = (direction: 'left' | 'right') => {\n        if (scrollContainerRef.current) {\n            const scrollAmount = direction === 'left' ? -200 : 200\n            scrollContainerRef.current.scrollBy({left: scrollAmount, behavior: 'smooth'})\n        }\n    }\n\n    return (\n        <RadixTabs.Root asChild value={value} onValueChange={setActiveTab}>\n            <div className={$sample.host}>\n                <div className={$sample.buttons}>\n                    {showLeftArrow && (\n                        <button\n                            onClick={() => scroll('left')}\n                            className={$arrow.host}\n                        >\n                            <ChevronLeft className={$arrow.icon}/>\n                        </button>\n                    )}\n\n                    <div\n                        ref={scrollContainerRef}\n                        onScroll={handleScroll}\n                        className={$scroller.host}\n                    >\n                        <div className={$scroller.container}>\n                            <RadixTabs.List>\n                                {items.map((item, index) => <TabsItem key={index} value={item}>\n                                        {item}\n                                    </TabsItem>\n                                )}\n                            </RadixTabs.List>\n                        </div>\n                    </div>\n\n                    {showRightArrow && (\n                        <button\n                            onClick={() => scroll('right')}\n                            className={$arrow.host}\n                        >\n                            <ChevronRight className={$arrow.icon}/>\n                        </button>\n                    )}\n                </div>\n\n                <div className={$sample.content}>\n                    {children}\n                </div>\n            </div>\n        </RadixTabs.Root>\n    )\n}\n\nfunction TabsItem({children, value}) {\n    return <RadixTabs.Trigger asChild value={value}>\n        <button className={`${$button.host}`}>\n            {children}\n        </button>\n    </RadixTabs.Trigger>\n}\n\nTabs.Content = function TabsContent({children, value}) {\n    return <RadixTabs.Content asChild value={value}>\n        {children}\n    </RadixTabs.Content>\n}","import {css} from \"@linaria/core\"\n\nexport const $nav = {\n    host: css`\n        align-items: center;\n        display: flex;\n\n        height: 42px;\n\n        background-color: #fff;\n        border-bottom: 1px solid hsl(212, 15%, calc(96% - 12% * 1));\n\n        z-index: 99;\n    `,\n    ul: css`\n        display: flex;\n        gap: 10px;\n\n        height: 100%;\n        color: hsl(212, 15%, calc(96% - 12% * 4));\n\n        list-style: none;\n        padding: 0;\n        white-space: nowrap;\n    `,\n    item: css`\n        height: 100%;\n\n        &[data-state=\"active\"] { // TODO: in the future it should not be possible\n            a {\n                border-bottom-color: rgb(112, 81, 212);\n            }\n        }\n    `,\n    itemLink: css`\n        display: inline-flex;\n        border-bottom: 3px solid transparent;\n        text-decoration: none;\n\n        height: 100%;\n        padding: 10px;\n    `,\n    itemLink$$active: css`\n    `\n}","import React from \"react\"\nimport * as RadixTabs from \"@radix-ui/react-tabs\";\n\nimport {$nav} from \"./UnderlineNav.styles\"\n\nexport interface TabsProps {\n    children: React.ReactNode\n    value: string\n    onChange: (value: string) => void\n}\n\nexport function UnderlineNav({children, value, onChange}: TabsProps) {\n    return <RadixTabs.Root asChild value={value} onValueChange={onChange}>\n        <nav className={$nav.host}>\n            <RadixTabs.List asChild>\n                <ul className={$nav.ul}>\n                    {children}\n                </ul>\n            </RadixTabs.List>\n        </nav>\n    </RadixTabs.Root>\n}\n\nexport interface UnderlineNavItemProps {\n    children: React.ReactNode\n    value: string\n    href?: string\n}\n\nUnderlineNav.Item = function UnderlineNavItem({children, value, href}: UnderlineNavItemProps) {\n    return <RadixTabs.Trigger asChild value={value}>\n        <li className={$nav.item}>\n            <a href={href} className={`${$nav.itemLink}`}>\n                {children}\n            </a>\n        </li>\n    </RadixTabs.Trigger>\n}"],"names":["$guide","$list","GuideCard","_ref","children","href","icon","title","kind","size","React","createElement","className","concat","$Pointer","xmlns","width","height","fill","viewBox","fillRule","d","clipRule","List","_ref2","$steps","Steps","Item","$table","Table","Th","Tr","_ref3","Td","_ref4","$sample","$arrow","$scroller","$button","Tabs","items","tabIndex","_useState","useState","_useState2","_slicedToArray","showLeftArrow","setShowLeftArrow","_useState3","_useState4","showRightArrow","setShowRightArrow","scrollContainerRef","useRef","_useState5","_useState6","value","setActiveTab","handleScroll","current","_scrollContainerRef$c","scrollLeft","scrollWidth","clientWidth","useEffect","window","addEventListener","removeEventListener","scroll","direction","scrollAmount","scrollBy","left","behavior","RadixTabs","Root","asChild","onValueChange","onClick","ChevronLeft","ref","onScroll","map","item","index","TabsItem","key","ChevronRight","Trigger","Content","$nav","UnderlineNav","onChange"],"mappings":"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"}

package/dist/UnderlineNav-1GwOkn9f.js

@@ -0,0 +1,2 @@
+import e,{useState as t,useRef as a,useEffect as n}from"react";import{_ as r}from"./_rollupPluginBabelHelpers-D0ht1KWA.js";import*as c from"@radix-ui/react-tabs";import{ChevronLeft as l,ChevronRight as i}from"lucide-react";var s="hh34a3o",m="hilz89t",o="h1rnhmpa",u="lajci2p",d="iezrce7",v="i1vhi0b8",h="i1m2lps9",f="r1new93p",E="t1u3d3ty",N="t4udf3g",p="t1icpluq",b="badgd67",g="bcjznmh",w="p13ekkiz",C="h15733ml";function k(t){var a=t.children,n=t.href,r=t.icon,c=t.title,l=t.kind,i=t.size;return e.createElement("div",{className:"\n        ".concat(s,"\n        ").concat("secondary"===l&&m,"\n        ").concat("secondary"===l&&"md"==i&&o,"\n    ")},e.createElement("a",{className:u,href:n},e.createElement("div",{className:"\n                ".concat(d,"\n                ").concat("secondary"===l&&v,"\n            ")},r&&e.createElement("div",{className:h},r),e.createElement("div",{className:f},e.createElement("div",{className:E},e.createElement("div",{className:"\n                            ".concat(E," \n                            ").concat(N,"\n                            ").concat("md"==i&&p,"\n                        ")},c),e.createElement(z,null)),e.createElement("div",{className:"\n                        ".concat(b,"\n                        ").concat("md"==i&&g,"\n                    ")},a)))))}function z(){return e.createElement("div",{"data-pointer":"true",className:w},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",viewBox:"0 0 24 24"},e.createElement("path",{fillRule:"evenodd",d:"M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z",clipRule:"evenodd"})))}k.List=function(t){var a=t.children;return e.createElement("div",{className:C},a)};var x="h3kfd8c",L="l1et872q";function y(t){var a=t.children;return e.createElement("ol",{className:x},a)}y.Item=function(t){var a=t.children;return e.createElement("li",{className:L},a)};var T="h14vj3ri",j="t1l6tz9b",R="thzxr0l",B="t1g1altt";function I(t){var a=t.children;return e.createElement("table",{className:T},a)}I.Th=function(t){var a=t.children;return e.createElement("th",{className:j},a)},I.Tr=function(t){var a=t.children;return e.createElement("tr",{className:R},a)},I.Td=function(t){var a=t.children;return e.createElement("td",{className:B},a)};var q="hh8vcxa",S="b2p5907",V="coeb6fw",W="h196u2m6",_="i1hlflsk",G="hownbu8",H="cuwerl2",M="hlivi01";function P(s){var m=s.children,o=s.items,u=s.tabIndex,d=t(!1),v=r(d,2),h=v[0],f=v[1],E=t(!1),N=r(E,2),p=N[0],b=N[1],g=a(null),w=t(o[u||0]||""),C=r(w,2),k=C[0],z=C[1],x=function(){if(g.current){var e=g.current,t=e.scrollLeft,a=e.scrollWidth,n=e.clientWidth;f(t>0),b(t<a-n)}};n((function(){return x(),window.addEventListener("resize",x),function(){return window.removeEventListener("resize",x)}}),[]);var L=function(e){if(g.current){var t="left"===e?-200:200;g.current.scrollBy({left:t,behavior:"smooth"})}};return e.createElement(c.Root,{asChild:!0,value:k,onValueChange:z},e.createElement("div",{className:q},e.createElement("div",{className:S},h&&e.createElement("button",{onClick:function(){return L("left")},className:W},e.createElement(l,{className:_})),e.createElement("div",{ref:g,onScroll:x,className:G},e.createElement("div",{className:H},e.createElement(c.List,null,o.map((function(t,a){return e.createElement(U,{key:a,value:t},t)}))))),p&&e.createElement("button",{onClick:function(){return L("right")},className:W},e.createElement(i,{className:_}))),e.createElement("div",{className:V},m)))}function U(t){var a=t.children,n=t.value;return e.createElement(c.Trigger,{asChild:!0,value:n},e.createElement("button",{className:"".concat(M)},a))}P.Content=function(t){var a=t.children,n=t.value;return e.createElement(c.Content,{asChild:!0,value:n},a)};var Z="h1bta36o",A="uxs4bf1",D="ifn7ecb",F="i441kmn";function J(t){var a=t.children,n=t.value,r=t.onChange;return e.createElement(c.Root,{asChild:!0,value:n,onValueChange:r},e.createElement("nav",{className:Z},e.createElement(c.List,{asChild:!0},e.createElement("ul",{className:A},a))))}J.Item=function(t){var a=t.children,n=t.value,r=t.href;return e.createElement(c.Trigger,{asChild:!0,value:n},e.createElement("li",{className:D},e.createElement("a",{href:r,className:"".concat(F)},a)))};export{k as G,y as S,I as T,J as U,P as a};
+//# sourceMappingURL=UnderlineNav-1GwOkn9f.js.map

package/dist/UnderlineNav-1GwOkn9f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnderlineNav-1GwOkn9f.js","sources":["../src/writer/GuideCard/GuideCard.styles.tsx","../src/writer/GuideCard/GuideCard.tsx","../src/writer/Steps/Steps.styles.tsx","../src/writer/Steps/Steps.tsx","../src/writer/Table/Table.styles.tsx","../src/writer/Table/Table.tsx","../src/writer/Tabs/Tabs.styles.tsx","../src/writer/Tabs/Tabs.tsx","../src/writer/UnderlineNav/UnderlineNav.styles.tsx","../src/writer/UnderlineNav/UnderlineNav.tsx"],"sourcesContent":["import {css} from \"@linaria/core\";\n\nexport const $guide = {\n    host: css`\n    `,\n    host$$secondary: css`\n        //flex-grow: 1;\n        //width: 100%;\n        display: flex;\n        position: relative;\n        overflow: hidden;\n        border: .5px solid #ececf1;\n        background: linear-gradient(238deg, rgba(247, 247, 248, .5) 0%, rgba(247, 247, 248, 1) 100%);\n        border-radius: 8px;\n        padding: 16px 20px 20px;\n        z-index: 0;\n        transition: box-shadow .2s ease-in-out, background-image .2s ease;\n\n        &:hover {\n            background: linear-gradient(238deg, rgba(255, 255, 255, .5) 0%, rgba(250, 250, 250, 1) 100%);\n        }\n    `,\n    host$$secondary$$md: css`\n        padding: 21px 25px 25px;\n    `,\n    link: css`\n        width: 100%;\n        height: 100%;\n    `,\n    item: css`\n        border-radius: 8px;\n        display: flex;\n\n        align-items: flex-start;\n        cursor: pointer;\n        transition: opacity .15s;\n\n        &:hover {\n            [data-pointer=\"true\"] {\n                opacity: 1;\n                transform: translate(0);\n            }\n        }\n    `,\n    item$$secondary: css`\n        width: 100%;\n        height: 100%;\n    `,\n    icon: css`\n        line-height: 0px;\n        font-size: 24px;\n        border-radius: 8px;\n        width: 48px;\n        height: 48px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        color: #353740;\n        border: 1px solid #ececf1;\n        background: linear-gradient(238deg, rgba(255, 255, 255, .5) 0%, rgba(250, 250, 250, 1) 100%);\n        transition: background .2s ease;\n        box-sizing: border-box;\n        flex-shrink: 0;\n    `,\n    right: css`\n        padding-left: 16px;\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n    `,\n    title: css`\n        display: flex;\n        color: #202123;\n        font-weight: 400;\n        align-items: center;\n        transition: color .15s;\n    `,\n    titleBody: css`\n        font-size: 16px;\n        line-height: 20px;\n    `,\n    titleBody$$md: css`\n        font-size: 18px;\n    `,\n    body: css`\n        font-weight: 400;\n        font-size: 14px;\n        line-height: 20px;\n\n        color: #6e6e80;\n        white-space: normal;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    `,\n    body$$md: css`\n        font-size: 16px;\n    `,\n    pointer: css`\n        opacity: 0;\n        transform: translate(-4px);\n        display: flex;\n        justify-content: center;\n        transition: opacity .15s ease-in-out, transform .15s ease-in-out;\n    `\n}\n\n\nexport const $list = {\n    host: css`\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        justify-content: center;\n        gap: 30px;\n    `\n}","import React from \"react\"\n\nimport {$guide, $list} from \"./GuideCard.styles\";\n\nexport interface GuideCardProps {\n    children: React.ReactNode;\n    href: string\n    title: string;\n    icon?: React.ReactNode;\n    kind?: \"secondary\"\n    size?: \"sm\" | \"md\"\n}\n\nexport function GuideCard({\n                              children,\n                              href,\n                              icon,\n                              title,\n                              kind,\n                              size,\n\n                          }: GuideCardProps) {\n    return <div className={`\n        ${$guide.host}\n        ${kind === \"secondary\" && $guide.host$$secondary}\n        ${kind === \"secondary\" && size == \"md\" && $guide.host$$secondary$$md}\n    `}>\n        <a className={$guide.link} href={href}>\n            <div className={`\n                ${$guide.item}\n                ${kind === \"secondary\" && $guide.item$$secondary}\n            `}>\n                {icon && <div className={$guide.icon}>\n                    {icon}\n                </div>}\n                <div className={$guide.right}>\n                    <div className={$guide.title}>\n                        <div className={`\n                            ${$guide.title} \n                            ${$guide.titleBody}\n                            ${size == \"md\" && $guide.titleBody$$md}\n                        `}>\n                            {title}\n                        </div>\n                        <$Pointer/>\n                    </div>\n                    <div className={`\n                        ${$guide.body}\n                        ${size == \"md\" && $guide.body$$md}\n                    `}>\n                        {children}\n                    </div>\n                </div>\n            </div>\n        </a>\n    </div>\n}\n\nGuideCard.List = function GuideCardList({children}: { children: React.ReactNode }) {\n    return <div className={$list.host}>\n        {children}\n    </div>\n}\n\nfunction $Pointer() {\n    return <div data-pointer=\"true\" className={$guide.pointer}>\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width={24}\n            height={24}\n            fill=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n        >\n            <path\n                fillRule=\"evenodd\"\n                d=\"M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    </div>\n}","import {css} from \"@linaria/core\";\n\nexport const $steps = {\n    host: css`\n        padding-left: 0;\n        list-style: none;\n        counter-reset: ordered-listitem;\n\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n    `,\n    li: css`\n        padding-left: 32px;\n        position: relative;\n        line-height: 1.5;\n\n        &::after {\n            position: absolute;\n            top: 0;\n            left: 0;\n            counter-increment: ordered-listitem;\n            content: counter(ordered-listitem);\n\n            background: #ececf1;\n            color: #353740;\n            font-size: 12px;\n            line-height: 24px;\n            font-weight: 500;\n            text-align: center;\n            height: 24px;\n            width: 24px;\n            border-radius: 12px;\n        }\n    `,\n}","import React from \"react\"\n\nimport {$steps} from \"./Steps.styles\";\n\nexport interface StepsProps {\n    children: React.ReactNode;\n}\n\nexport function Steps({children}: StepsProps) {\n    return <ol className={$steps.host}>\n        {children}\n    </ol>\n\n}\n\nexport interface StepsItemProps {\n    children: React.ReactNode;\n}\n\nSteps.Item = function StepsItem({children}: StepsItemProps) {\n    return <li className={$steps.li}>\n        {children}\n    </li>\n}","import {css} from \"@linaria/core\";\n\nconst colors = {\n    primary: \"#D1D5DB\"\n}\n\nexport const $table = {\n    host: css`\n        display: block;\n        overflow-x: scroll;\n\n        border-collapse: collapse;\n        border-radius: 3px;\n    `,\n    th: css`\n        padding: 0.5rem 1rem;\n        margin: 0;\n\n        font-weight: 600;\n        border-width: 1px;\n        border-color: ${colors.primary};\n        background: rgba(234, 238, 242, 0.5);\n    `,\n    tr: css`\n        padding: 0;\n        margin: 0;\n        border-top-width: 1px;\n        border-color: ${colors.primary};\n    `,\n    td: css`\n        padding: 0.5rem 1rem;\n        margin: 0;\n\n        border-width: 1px;\n        border-color: ${colors.primary};\n    `\n}\n\n\n","import React from \"react\"\n\nimport {$table} from \"./Table.styles\";\n\nexport interface TableProps {\n    children: React.ReactNode;\n}\n\nexport function Table({children}: TableProps) {\n    return <table className={$table.host}>\n        {children}\n    </table>\n}\n\nexport interface TableThProps {\n    children: React.ReactNode;\n}\n\nTable.Th = function TableTh({children}: TableThProps) {\n    return <th className={$table.th}>\n        {children}\n    </th>\n}\n\nexport interface TableTrProps {\n    children: React.ReactNode;\n}\n\nTable.Tr = function TableTr({children}: TableTrProps) {\n    return <tr className={$table.tr}>\n        {children}\n    </tr>\n\n}\n\nexport interface TableTdProps {\n    children: React.ReactNode;\n}\n\nTable.Td = function TableTd({children}: TableTdProps) {\n    return <td className={$table.td}>\n        {children}\n    </td>\n\n}","import {css} from \"@linaria/core\";\n\nexport const $sample = {\n    host: css`\n        position: relative;\n        max-width: 100%;\n    `,\n    buttons: css`\n        display: flex;\n        align-items: center;\n    `,\n    content: css`\n        margin-top: 16px;\n    `\n}\n\nexport const $arrow = {\n    host: css`\n        padding: 8px;\n        background-color: #ffffff;\n        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n    `,\n    icon: css`\n        width: 16px;\n        height: 16px;\n    `\n}\n\nexport const $scroller = {\n    host: css`\n        overflow-x: auto;\n        flex-grow: 1;\n    `,\n    container: css`\n        display: inline-flex;\n        gap: 4px;\n\n        border-radius: 8px;\n        background-color: #F3F4F6;\n        \n        padding: 4px;\n        margin-left: 4px;\n    `\n}\n\nexport const $button = {\n    host: css`\n        padding: 0.5rem 1rem;\n\n        border-radius: 0.375rem;\n        font-size: 0.875rem;\n        line-height: 1.25rem;\n        font-weight: 500;\n        white-space: nowrap;\n\n        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 300ms;\n\n        color: #6B7280;\n\n        &:hover {\n            color: #111827;\n        }\n\n        &[data-state=\"active\"] {\n            color: #111827;\n            background-color: #ffffff;\n            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n        }\n    `,\n    $$active: css`\n        color: #111827;\n        background-color: #ffffff;\n        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n    `\n}","import React, {useState, useRef, useEffect} from 'react'\nimport * as RadixTabs from \"@radix-ui/react-tabs\"\nimport {ChevronLeft, ChevronRight} from \"lucide-react\"\n\nimport {\n    $sample,\n    $arrow,\n    $scroller,\n    $button\n} from \"./Tabs.styles\";\n\nexport interface TabsProps {\n    children: React.ReactNode;\n    items: string[];\n    tabIndex?: number;\n}\n\nexport function Tabs({children, items, tabIndex}: TabsProps) {\n    const [showLeftArrow, setShowLeftArrow] = useState(false)\n    const [showRightArrow, setShowRightArrow] = useState(false)\n    const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n    const [value, setActiveTab] = useState(items[tabIndex || 0] || \"\")\n\n    const handleScroll = () => {\n        if (scrollContainerRef.current) {\n            const {scrollLeft, scrollWidth, clientWidth} = scrollContainerRef.current\n            setShowLeftArrow(scrollLeft > 0)\n            setShowRightArrow(scrollLeft < scrollWidth - clientWidth)\n        }\n    }\n\n    useEffect(() => {\n        handleScroll()\n        window.addEventListener('resize', handleScroll)\n        return () => window.removeEventListener('resize', handleScroll)\n    }, [])\n\n    const scroll = (direction: 'left' | 'right') => {\n        if (scrollContainerRef.current) {\n            const scrollAmount = direction === 'left' ? -200 : 200\n            scrollContainerRef.current.scrollBy({left: scrollAmount, behavior: 'smooth'})\n        }\n    }\n\n    return (\n        <RadixTabs.Root asChild value={value} onValueChange={setActiveTab}>\n            <div className={$sample.host}>\n                <div className={$sample.buttons}>\n                    {showLeftArrow && (\n                        <button\n                            onClick={() => scroll('left')}\n                            className={$arrow.host}\n                        >\n                            <ChevronLeft className={$arrow.icon}/>\n                        </button>\n                    )}\n\n                    <div\n                        ref={scrollContainerRef}\n                        onScroll={handleScroll}\n                        className={$scroller.host}\n                    >\n                        <div className={$scroller.container}>\n                            <RadixTabs.List>\n                                {items.map((item, index) => <TabsItem key={index} value={item}>\n                                        {item}\n                                    </TabsItem>\n                                )}\n                            </RadixTabs.List>\n                        </div>\n                    </div>\n\n                    {showRightArrow && (\n                        <button\n                            onClick={() => scroll('right')}\n                            className={$arrow.host}\n                        >\n                            <ChevronRight className={$arrow.icon}/>\n                        </button>\n                    )}\n                </div>\n\n                <div className={$sample.content}>\n                    {children}\n                </div>\n            </div>\n        </RadixTabs.Root>\n    )\n}\n\nfunction TabsItem({children, value}) {\n    return <RadixTabs.Trigger asChild value={value}>\n        <button className={`${$button.host}`}>\n            {children}\n        </button>\n    </RadixTabs.Trigger>\n}\n\nTabs.Content = function TabsContent({children, value}) {\n    return <RadixTabs.Content asChild value={value}>\n        {children}\n    </RadixTabs.Content>\n}","import {css} from \"@linaria/core\"\n\nexport const $nav = {\n    host: css`\n        align-items: center;\n        display: flex;\n\n        height: 42px;\n\n        background-color: #fff;\n        border-bottom: 1px solid hsl(212, 15%, calc(96% - 12% * 1));\n\n        z-index: 99;\n    `,\n    ul: css`\n        display: flex;\n        gap: 10px;\n\n        height: 100%;\n        color: hsl(212, 15%, calc(96% - 12% * 4));\n\n        list-style: none;\n        padding: 0;\n        white-space: nowrap;\n    `,\n    item: css`\n        height: 100%;\n\n        &[data-state=\"active\"] { // TODO: in the future it should not be possible\n            a {\n                border-bottom-color: rgb(112, 81, 212);\n            }\n        }\n    `,\n    itemLink: css`\n        display: inline-flex;\n        border-bottom: 3px solid transparent;\n        text-decoration: none;\n\n        height: 100%;\n        padding: 10px;\n    `,\n    itemLink$$active: css`\n    `\n}","import React from \"react\"\nimport * as RadixTabs from \"@radix-ui/react-tabs\";\n\nimport {$nav} from \"./UnderlineNav.styles\"\n\nexport interface TabsProps {\n    children: React.ReactNode\n    value: string\n    onChange: (value: string) => void\n}\n\nexport function UnderlineNav({children, value, onChange}: TabsProps) {\n    return <RadixTabs.Root asChild value={value} onValueChange={onChange}>\n        <nav className={$nav.host}>\n            <RadixTabs.List asChild>\n                <ul className={$nav.ul}>\n                    {children}\n                </ul>\n            </RadixTabs.List>\n        </nav>\n    </RadixTabs.Root>\n}\n\nexport interface UnderlineNavItemProps {\n    children: React.ReactNode\n    value: string\n    href?: string\n}\n\nUnderlineNav.Item = function UnderlineNavItem({children, value, href}: UnderlineNavItemProps) {\n    return <RadixTabs.Trigger asChild value={value}>\n        <li className={$nav.item}>\n            <a href={href} className={`${$nav.itemLink}`}>\n                {children}\n            </a>\n        </li>\n    </RadixTabs.Trigger>\n}"],"names":["$guide","$list","GuideCard","_ref","children","href","icon","title","kind","size","React","createElement","className","concat","$Pointer","xmlns","width","height","fill","viewBox","fillRule","d","clipRule","List","_ref2","$steps","Steps","Item","$table","Table","Th","Tr","_ref3","Td","_ref4","$sample","$arrow","$scroller","$button","Tabs","items","tabIndex","_useState","useState","_useState2","_slicedToArray","showLeftArrow","setShowLeftArrow","_useState3","_useState4","showRightArrow","setShowRightArrow","scrollContainerRef","useRef","_useState5","_useState6","value","setActiveTab","handleScroll","current","_scrollContainerRef$c","scrollLeft","scrollWidth","clientWidth","useEffect","window","addEventListener","removeEventListener","scroll","direction","scrollAmount","scrollBy","left","behavior","RadixTabs","Root","asChild","onValueChange","onClick","ChevronLeft","ref","onScroll","map","item","index","TabsItem","key","ChevronRight","Trigger","Content","$nav","UnderlineNav","onChange"],"mappings":"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"}

package/dist/UnderlineNav-3PdFx7Bh.js

@@ -0,0 +1,2 @@
+import e,{useState as t,useRef as a,useEffect as n}from"react";import{_ as r}from"./_rollupPluginBabelHelpers-CEDPXRO4.js";import*as c from"@radix-ui/react-tabs";import{ChevronLeft as l,ChevronRight as i}from"lucide-react";var s="hh34a3o",m="hilz89t",o="h1rnhmpa",u="lajci2p",d="iezrce7",v="i1vhi0b8",h="i1m2lps9",f="r1new93p",E="t1u3d3ty",N="t4udf3g",p="t1icpluq",b="badgd67",g="bcjznmh",w="p13ekkiz",C="h15733ml";function k(t){var a=t.children,n=t.href,r=t.icon,c=t.title,l=t.kind,i=t.size;return e.createElement("div",{className:"\n        ".concat(s,"\n        ").concat("secondary"===l&&m,"\n        ").concat("secondary"===l&&"md"==i&&o,"\n    ")},e.createElement("a",{className:u,href:n},e.createElement("div",{className:"\n                ".concat(d,"\n                ").concat("secondary"===l&&v,"\n            ")},r&&e.createElement("div",{className:h},r),e.createElement("div",{className:f},e.createElement("div",{className:E},e.createElement("div",{className:"\n                            ".concat(E," \n                            ").concat(N,"\n                            ").concat("md"==i&&p,"\n                        ")},c),e.createElement(z,null)),e.createElement("div",{className:"\n                        ".concat(b,"\n                        ").concat("md"==i&&g,"\n                    ")},a)))))}function z(){return e.createElement("div",{"data-pointer":"true",className:w},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",viewBox:"0 0 24 24"},e.createElement("path",{fillRule:"evenodd",d:"M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z",clipRule:"evenodd"})))}k.List=function(t){var a=t.children;return e.createElement("div",{className:C},a)};var x="h3kfd8c",L="l1et872q";function y(t){var a=t.children;return e.createElement("ol",{className:x},a)}y.Item=function(t){var a=t.children;return e.createElement("li",{className:L},a)};var T="h14vj3ri",j="t1l6tz9b",R="thzxr0l",B="t1g1altt";function I(t){var a=t.children;return e.createElement("table",{className:T},a)}I.Th=function(t){var a=t.children;return e.createElement("th",{className:j},a)},I.Tr=function(t){var a=t.children;return e.createElement("tr",{className:R},a)},I.Td=function(t){var a=t.children;return e.createElement("td",{className:B},a)};var q="hh8vcxa",S="b2p5907",V="coeb6fw",W="h196u2m6",_="i1hlflsk",G="hownbu8",H="cuwerl2",M="hlivi01";function P(s){var m=s.children,o=s.items,u=s.tabIndex,d=t(!1),v=r(d,2),h=v[0],f=v[1],E=t(!1),N=r(E,2),p=N[0],b=N[1],g=a(null),w=t(o[u||0]||""),C=r(w,2),k=C[0],z=C[1],x=function(){if(g.current){var e=g.current,t=e.scrollLeft,a=e.scrollWidth,n=e.clientWidth;f(t>0),b(t<a-n)}};n((function(){return x(),window.addEventListener("resize",x),function(){return window.removeEventListener("resize",x)}}),[]);var L=function(e){if(g.current){var t="left"===e?-200:200;g.current.scrollBy({left:t,behavior:"smooth"})}};return e.createElement(c.Root,{asChild:!0,value:k,onValueChange:z},e.createElement("div",{className:q},e.createElement("div",{className:S},h&&e.createElement("button",{onClick:function(){return L("left")},className:W},e.createElement(l,{className:_})),e.createElement("div",{ref:g,onScroll:x,className:G},e.createElement("div",{className:H},e.createElement(c.List,null,o.map((function(t,a){return e.createElement(U,{key:a,value:t},t)}))))),p&&e.createElement("button",{onClick:function(){return L("right")},className:W},e.createElement(i,{className:_}))),e.createElement("div",{className:V},m)))}function U(t){var a=t.children,n=t.value;return e.createElement(c.Trigger,{asChild:!0,value:n},e.createElement("button",{className:"".concat(M)},a))}P.Content=function(t){var a=t.children,n=t.value;return e.createElement(c.Content,{asChild:!0,value:n},a)};var Z="h1bta36o",A="uxs4bf1",D="ifn7ecb",F="i441kmn";function J(t){var a=t.children,n=t.value,r=t.onChange;return e.createElement(c.Root,{asChild:!0,value:n,onValueChange:r},e.createElement("nav",{className:Z},e.createElement(c.List,{asChild:!0},e.createElement("ul",{className:A},a))))}J.Item=function(t){var a=t.children,n=t.value,r=t.href;return e.createElement(c.Trigger,{asChild:!0,value:n},e.createElement("li",{className:D},e.createElement("a",{href:r,className:"".concat(F)},a)))};export{k as G,y as S,I as T,J as U,P as a};
+//# sourceMappingURL=UnderlineNav-3PdFx7Bh.js.map

package/dist/UnderlineNav-3PdFx7Bh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnderlineNav-3PdFx7Bh.js","sources":["../src/writer/GuideCard/GuideCard.styles.tsx","../src/writer/GuideCard/GuideCard.tsx","../src/writer/Steps/Steps.styles.tsx","../src/writer/Steps/Steps.tsx","../src/writer/Table/Table.styles.tsx","../src/writer/Table/Table.tsx","../src/writer/Tabs/Tabs.styles.tsx","../src/writer/Tabs/Tabs.tsx","../src/writer/UnderlineNav/UnderlineNav.styles.tsx","../src/writer/UnderlineNav/UnderlineNav.tsx"],"sourcesContent":["import {css} from \"@linaria/core\";\n\nexport const $guide = {\n    host: css`\n    `,\n    host$$secondary: css`\n        //flex-grow: 1;\n        //width: 100%;\n        display: flex;\n        position: relative;\n        overflow: hidden;\n        border: .5px solid #ececf1;\n        background: linear-gradient(238deg, rgba(247, 247, 248, .5) 0%, rgba(247, 247, 248, 1) 100%);\n        border-radius: 8px;\n        padding: 16px 20px 20px;\n        z-index: 0;\n        transition: box-shadow .2s ease-in-out, background-image .2s ease;\n\n        &:hover {\n            background: linear-gradient(238deg, rgba(255, 255, 255, .5) 0%, rgba(250, 250, 250, 1) 100%);\n        }\n    `,\n    host$$secondary$$md: css`\n        padding: 21px 25px 25px;\n    `,\n    link: css`\n        width: 100%;\n        height: 100%;\n    `,\n    item: css`\n        border-radius: 8px;\n        display: flex;\n\n        align-items: flex-start;\n        cursor: pointer;\n        transition: opacity .15s;\n\n        &:hover {\n            [data-pointer=\"true\"] {\n                opacity: 1;\n                transform: translate(0);\n            }\n        }\n    `,\n    item$$secondary: css`\n        width: 100%;\n        height: 100%;\n    `,\n    icon: css`\n        line-height: 0px;\n        font-size: 24px;\n        border-radius: 8px;\n        width: 48px;\n        height: 48px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        color: #353740;\n        border: 1px solid #ececf1;\n        background: linear-gradient(238deg, rgba(255, 255, 255, .5) 0%, rgba(250, 250, 250, 1) 100%);\n        transition: background .2s ease;\n        box-sizing: border-box;\n        flex-shrink: 0;\n    `,\n    right: css`\n        padding-left: 16px;\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n    `,\n    title: css`\n        display: flex;\n        color: #202123;\n        font-weight: 400;\n        align-items: center;\n        transition: color .15s;\n    `,\n    titleBody: css`\n        font-size: 16px;\n        line-height: 20px;\n    `,\n    titleBody$$md: css`\n        font-size: 18px;\n    `,\n    body: css`\n        font-weight: 400;\n        font-size: 14px;\n        line-height: 20px;\n\n        color: #6e6e80;\n        white-space: normal;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    `,\n    body$$md: css`\n        font-size: 16px;\n    `,\n    pointer: css`\n        opacity: 0;\n        transform: translate(-4px);\n        display: flex;\n        justify-content: center;\n        transition: opacity .15s ease-in-out, transform .15s ease-in-out;\n    `\n}\n\n\nexport const $list = {\n    host: css`\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        justify-content: center;\n        gap: 30px;\n    `\n}","import React from \"react\"\n\nimport {$guide, $list} from \"./GuideCard.styles\";\n\nexport interface GuideCardProps {\n    children: React.ReactNode;\n    href: string\n    title: string;\n    icon?: React.ReactNode;\n    kind?: \"secondary\"\n    size?: \"sm\" | \"md\"\n}\n\nexport function GuideCard({\n                              children,\n                              href,\n                              icon,\n                              title,\n                              kind,\n                              size,\n\n                          }: GuideCardProps) {\n    return <div className={`\n        ${$guide.host}\n        ${kind === \"secondary\" && $guide.host$$secondary}\n        ${kind === \"secondary\" && size == \"md\" && $guide.host$$secondary$$md}\n    `}>\n        <a className={$guide.link} href={href}>\n            <div className={`\n                ${$guide.item}\n                ${kind === \"secondary\" && $guide.item$$secondary}\n            `}>\n                {icon && <div className={$guide.icon}>\n                    {icon}\n                </div>}\n                <div className={$guide.right}>\n                    <div className={$guide.title}>\n                        <div className={`\n                            ${$guide.title} \n                            ${$guide.titleBody}\n                            ${size == \"md\" && $guide.titleBody$$md}\n                        `}>\n                            {title}\n                        </div>\n                        <$Pointer/>\n                    </div>\n                    <div className={`\n                        ${$guide.body}\n                        ${size == \"md\" && $guide.body$$md}\n                    `}>\n                        {children}\n                    </div>\n                </div>\n            </div>\n        </a>\n    </div>\n}\n\nGuideCard.List = function GuideCardList({children}: { children: React.ReactNode }) {\n    return <div className={$list.host}>\n        {children}\n    </div>\n}\n\nfunction $Pointer() {\n    return <div data-pointer=\"true\" className={$guide.pointer}>\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width={24}\n            height={24}\n            fill=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n        >\n            <path\n                fillRule=\"evenodd\"\n                d=\"M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    </div>\n}","import {css} from \"@linaria/core\";\n\nexport const $steps = {\n    host: css`\n        padding-left: 0;\n        list-style: none;\n        counter-reset: ordered-listitem;\n\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n    `,\n    li: css`\n        padding-left: 32px;\n        position: relative;\n        line-height: 1.5;\n\n        &::after {\n            position: absolute;\n            top: 0;\n            left: 0;\n            counter-increment: ordered-listitem;\n            content: counter(ordered-listitem);\n\n            background: #ececf1;\n            color: #353740;\n            font-size: 12px;\n            line-height: 24px;\n            font-weight: 500;\n            text-align: center;\n            height: 24px;\n            width: 24px;\n            border-radius: 12px;\n        }\n    `,\n}","import React from \"react\"\n\nimport {$steps} from \"./Steps.styles\";\n\nexport interface StepsProps {\n    children: React.ReactNode;\n}\n\nexport function Steps({children}: StepsProps) {\n    return <ol className={$steps.host}>\n        {children}\n    </ol>\n\n}\n\nexport interface StepsItemProps {\n    children: React.ReactNode;\n}\n\nSteps.Item = function StepsItem({children}: StepsItemProps) {\n    return <li className={$steps.li}>\n        {children}\n    </li>\n}","import {css} from \"@linaria/core\";\n\nconst colors = {\n    primary: \"#D1D5DB\"\n}\n\nexport const $table = {\n    host: css`\n        display: block;\n        overflow-x: scroll;\n\n        border-collapse: collapse;\n        border-radius: 3px;\n    `,\n    th: css`\n        padding: 0.5rem 1rem;\n        margin: 0;\n\n        font-weight: 600;\n        border-width: 1px;\n        border-color: ${colors.primary};\n        background: rgba(234, 238, 242, 0.5);\n    `,\n    tr: css`\n        padding: 0;\n        margin: 0;\n        border-top-width: 1px;\n        border-color: ${colors.primary};\n    `,\n    td: css`\n        padding: 0.5rem 1rem;\n        margin: 0;\n\n        border-width: 1px;\n        border-color: ${colors.primary};\n    `\n}\n\n\n","import React from \"react\"\n\nimport {$table} from \"./Table.styles\";\n\nexport interface TableProps {\n    children: React.ReactNode;\n}\n\nexport function Table({children}: TableProps) {\n    return <table className={$table.host}>\n        {children}\n    </table>\n}\n\nexport interface TableThProps {\n    children: React.ReactNode;\n}\n\nTable.Th = function TableTh({children}: TableThProps) {\n    return <th className={$table.th}>\n        {children}\n    </th>\n}\n\nexport interface TableTrProps {\n    children: React.ReactNode;\n}\n\nTable.Tr = function TableTr({children}: TableTrProps) {\n    return <tr className={$table.tr}>\n        {children}\n    </tr>\n\n}\n\nexport interface TableTdProps {\n    children: React.ReactNode;\n}\n\nTable.Td = function TableTd({children}: TableTdProps) {\n    return <td className={$table.td}>\n        {children}\n    </td>\n\n}","import {css} from \"@linaria/core\";\n\nexport const $sample = {\n    host: css`\n        position: relative;\n        max-width: 100%;\n    `,\n    buttons: css`\n        display: flex;\n        align-items: center;\n    `,\n    content: css`\n        margin-top: 16px;\n    `\n}\n\nexport const $arrow = {\n    host: css`\n        padding: 8px;\n        background-color: #ffffff;\n        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n    `,\n    icon: css`\n        width: 16px;\n        height: 16px;\n    `\n}\n\nexport const $scroller = {\n    host: css`\n        overflow-x: auto;\n        flex-grow: 1;\n    `,\n    container: css`\n        display: inline-flex;\n        gap: 4px;\n\n        border-radius: 8px;\n        background-color: #F3F4F6;\n        \n        padding: 4px;\n        margin-left: 4px;\n    `\n}\n\nexport const $button = {\n    host: css`\n        padding: 0.5rem 1rem;\n\n        border-radius: 0.375rem;\n        font-size: 0.875rem;\n        line-height: 1.25rem;\n        font-weight: 500;\n        white-space: nowrap;\n\n        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 300ms;\n\n        color: #6B7280;\n\n        &:hover {\n            color: #111827;\n        }\n\n        &[data-state=\"active\"] {\n            color: #111827;\n            background-color: #ffffff;\n            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n        }\n    `,\n    $$active: css`\n        color: #111827;\n        background-color: #ffffff;\n        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n    `\n}","import React, {useState, useRef, useEffect} from 'react'\nimport * as RadixTabs from \"@radix-ui/react-tabs\"\nimport {ChevronLeft, ChevronRight} from \"lucide-react\"\n\nimport {\n    $sample,\n    $arrow,\n    $scroller,\n    $button\n} from \"./Tabs.styles\";\n\nexport interface TabsProps {\n    children: React.ReactNode;\n    items: string[];\n    tabIndex?: number;\n}\n\nexport function Tabs({children, items, tabIndex}: TabsProps) {\n    const [showLeftArrow, setShowLeftArrow] = useState(false)\n    const [showRightArrow, setShowRightArrow] = useState(false)\n    const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n    const [value, setActiveTab] = useState(items[tabIndex || 0] || \"\")\n\n    const handleScroll = () => {\n        if (scrollContainerRef.current) {\n            const {scrollLeft, scrollWidth, clientWidth} = scrollContainerRef.current\n            setShowLeftArrow(scrollLeft > 0)\n            setShowRightArrow(scrollLeft < scrollWidth - clientWidth)\n        }\n    }\n\n    useEffect(() => {\n        handleScroll()\n        window.addEventListener('resize', handleScroll)\n        return () => window.removeEventListener('resize', handleScroll)\n    }, [])\n\n    const scroll = (direction: 'left' | 'right') => {\n        if (scrollContainerRef.current) {\n            const scrollAmount = direction === 'left' ? -200 : 200\n            scrollContainerRef.current.scrollBy({left: scrollAmount, behavior: 'smooth'})\n        }\n    }\n\n    return (\n        <RadixTabs.Root asChild value={value} onValueChange={setActiveTab}>\n            <div className={$sample.host}>\n                <div className={$sample.buttons}>\n                    {showLeftArrow && (\n                        <button\n                            onClick={() => scroll('left')}\n                            className={$arrow.host}\n                        >\n                            <ChevronLeft className={$arrow.icon}/>\n                        </button>\n                    )}\n\n                    <div\n                        ref={scrollContainerRef}\n                        onScroll={handleScroll}\n                        className={$scroller.host}\n                    >\n                        <div className={$scroller.container}>\n                            <RadixTabs.List>\n                                {items.map((item, index) => <TabsItem key={index} value={item}>\n                                        {item}\n                                    </TabsItem>\n                                )}\n                            </RadixTabs.List>\n                        </div>\n                    </div>\n\n                    {showRightArrow && (\n                        <button\n                            onClick={() => scroll('right')}\n                            className={$arrow.host}\n                        >\n                            <ChevronRight className={$arrow.icon}/>\n                        </button>\n                    )}\n                </div>\n\n                <div className={$sample.content}>\n                    {children}\n                </div>\n            </div>\n        </RadixTabs.Root>\n    )\n}\n\nfunction TabsItem({children, value}) {\n    return <RadixTabs.Trigger asChild value={value}>\n        <button className={`${$button.host}`}>\n            {children}\n        </button>\n    </RadixTabs.Trigger>\n}\n\nTabs.Content = function TabsContent({children, value}) {\n    return <RadixTabs.Content asChild value={value}>\n        {children}\n    </RadixTabs.Content>\n}","import {css} from \"@linaria/core\"\n\nexport const $nav = {\n    host: css`\n        align-items: center;\n        display: flex;\n\n        height: 42px;\n\n        background-color: #fff;\n        border-bottom: 1px solid hsl(212, 15%, calc(96% - 12% * 1));\n\n        z-index: 99;\n    `,\n    ul: css`\n        display: flex;\n        gap: 10px;\n\n        height: 100%;\n        color: hsl(212, 15%, calc(96% - 12% * 4));\n\n        list-style: none;\n        padding: 0;\n        white-space: nowrap;\n    `,\n    item: css`\n        height: 100%;\n\n        &[data-state=\"active\"] { // TODO: in the future it should not be possible\n            a {\n                border-bottom-color: rgb(112, 81, 212);\n            }\n        }\n    `,\n    itemLink: css`\n        display: inline-flex;\n        border-bottom: 3px solid transparent;\n        text-decoration: none;\n\n        height: 100%;\n        padding: 10px;\n    `,\n    itemLink$$active: css`\n    `\n}","import React from \"react\"\nimport * as RadixTabs from \"@radix-ui/react-tabs\";\n\nimport {$nav} from \"./UnderlineNav.styles\"\n\nexport interface TabsProps {\n    children: React.ReactNode\n    value: string\n    onChange: (value: string) => void\n}\n\nexport function UnderlineNav({children, value, onChange}: TabsProps) {\n    return <RadixTabs.Root asChild value={value} onValueChange={onChange}>\n        <nav className={$nav.host}>\n            <RadixTabs.List asChild>\n                <ul className={$nav.ul}>\n                    {children}\n                </ul>\n            </RadixTabs.List>\n        </nav>\n    </RadixTabs.Root>\n}\n\nexport interface UnderlineNavItemProps {\n    children: React.ReactNode\n    value: string\n    href?: string\n}\n\nUnderlineNav.Item = function UnderlineNavItem({children, value, href}: UnderlineNavItemProps) {\n    return <RadixTabs.Trigger asChild value={value}>\n        <li className={$nav.item}>\n            <a href={href} className={`${$nav.itemLink}`}>\n                {children}\n            </a>\n        </li>\n    </RadixTabs.Trigger>\n}"],"names":["$guide","$list","GuideCard","_ref","children","href","icon","title","kind","size","React","createElement","className","concat","$Pointer","xmlns","width","height","fill","viewBox","fillRule","d","clipRule","List","_ref2","$steps","Steps","Item","$table","Table","Th","Tr","_ref3","Td","_ref4","$sample","$arrow","$scroller","$button","Tabs","items","tabIndex","_useState","useState","_useState2","_slicedToArray","showLeftArrow","setShowLeftArrow","_useState3","_useState4","showRightArrow","setShowRightArrow","scrollContainerRef","useRef","_useState5","_useState6","value","setActiveTab","handleScroll","current","_scrollContainerRef$c","scrollLeft","scrollWidth","clientWidth","useEffect","window","addEventListener","removeEventListener","scroll","direction","scrollAmount","scrollBy","left","behavior","RadixTabs","Root","asChild","onValueChange","onClick","ChevronLeft","ref","onScroll","map","item","index","TabsItem","key","ChevronRight","Trigger","Content","$nav","UnderlineNav","onChange"],"mappings":"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"}

package/dist/UnderlineNav-4Y6uJRPh.js

@@ -0,0 +1,2 @@
+import e,{useState as t,useRef as a,useEffect as n}from"react";import{_ as r}from"./_rollupPluginBabelHelpers-cR2Z0Ahm.js";import*as c from"@radix-ui/react-tabs";import{ChevronLeft as l,ChevronRight as i}from"lucide-react";var s="hh34a3o",m="hilz89t",o="h1rnhmpa",u="lajci2p",d="iezrce7",v="i1vhi0b8",h="i1m2lps9",f="r1new93p",E="t1u3d3ty",N="t4udf3g",p="t1icpluq",b="badgd67",g="bcjznmh",w="p13ekkiz",C="h15733ml";function k(t){var a=t.children,n=t.href,r=t.icon,c=t.title,l=t.kind,i=t.size;return e.createElement("div",{className:"\n        ".concat(s,"\n        ").concat("secondary"===l&&m,"\n        ").concat("secondary"===l&&"md"==i&&o,"\n    ")},e.createElement("a",{className:u,href:n},e.createElement("div",{className:"\n                ".concat(d,"\n                ").concat("secondary"===l&&v,"\n            ")},r&&e.createElement("div",{className:h},r),e.createElement("div",{className:f},e.createElement("div",{className:E},e.createElement("div",{className:"\n                            ".concat(E," \n                            ").concat(N,"\n                            ").concat("md"==i&&p,"\n                        ")},c),e.createElement(z,null)),e.createElement("div",{className:"\n                        ".concat(b,"\n                        ").concat("md"==i&&g,"\n                    ")},a)))))}function z(){return e.createElement("div",{"data-pointer":"true",className:w},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",viewBox:"0 0 24 24"},e.createElement("path",{fillRule:"evenodd",d:"M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z",clipRule:"evenodd"})))}k.List=function(t){var a=t.children;return e.createElement("div",{className:C},a)};var x="h3kfd8c",L="l1et872q";function y(t){var a=t.children;return e.createElement("ol",{className:x},a)}y.Item=function(t){var a=t.children;return e.createElement("li",{className:L},a)};var T="h14vj3ri",j="t1l6tz9b",R="thzxr0l",B="t1g1altt";function I(t){var a=t.children;return e.createElement("table",{className:T},a)}I.Th=function(t){var a=t.children;return e.createElement("th",{className:j},a)},I.Tr=function(t){var a=t.children;return e.createElement("tr",{className:R},a)},I.Td=function(t){var a=t.children;return e.createElement("td",{className:B},a)};var q="hh8vcxa",S="b2p5907",V="coeb6fw",W="h196u2m6",_="i1hlflsk",G="hownbu8",H="cuwerl2",M="hlivi01";function P(s){var m=s.children,o=s.items,u=s.tabIndex,d=t(!1),v=r(d,2),h=v[0],f=v[1],E=t(!1),N=r(E,2),p=N[0],b=N[1],g=a(null),w=t(o[u||0]||""),C=r(w,2),k=C[0],z=C[1],x=function(){if(g.current){var e=g.current,t=e.scrollLeft,a=e.scrollWidth,n=e.clientWidth;f(t>0),b(t<a-n)}};n((function(){return x(),window.addEventListener("resize",x),function(){return window.removeEventListener("resize",x)}}),[]);var L=function(e){if(g.current){var t="left"===e?-200:200;g.current.scrollBy({left:t,behavior:"smooth"})}};return e.createElement(c.Root,{asChild:!0,value:k,onValueChange:z},e.createElement("div",{className:q},e.createElement("div",{className:S},h&&e.createElement("button",{onClick:function(){return L("left")},className:W},e.createElement(l,{className:_})),e.createElement("div",{ref:g,onScroll:x,className:G},e.createElement("div",{className:H},e.createElement(c.List,null,o.map((function(t,a){return e.createElement(U,{key:a,value:t},t)}))))),p&&e.createElement("button",{onClick:function(){return L("right")},className:W},e.createElement(i,{className:_}))),e.createElement("div",{className:V},m)))}function U(t){var a=t.children,n=t.value;return e.createElement(c.Trigger,{asChild:!0,value:n},e.createElement("button",{className:"".concat(M)},a))}P.Content=function(t){var a=t.children,n=t.value;return e.createElement(c.Content,{asChild:!0,value:n},a)};var Z="h1bta36o",A="uxs4bf1",D="ifn7ecb",F="i441kmn";function J(t){var a=t.children,n=t.value,r=t.onChange;return e.createElement(c.Root,{asChild:!0,value:n,onValueChange:r},e.createElement("nav",{className:Z},e.createElement(c.List,{asChild:!0},e.createElement("ul",{className:A},a))))}J.Item=function(t){var a=t.children,n=t.value,r=t.href;return e.createElement(c.Trigger,{asChild:!0,value:n},e.createElement("li",{className:D},e.createElement("a",{href:r,className:"".concat(F)},a)))};export{k as G,y as S,I as T,J as U,P as a};
+//# sourceMappingURL=UnderlineNav-4Y6uJRPh.js.map

package/dist/UnderlineNav-4Y6uJRPh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnderlineNav-4Y6uJRPh.js","sources":["../src/writer/GuideCard/GuideCard.styles.tsx","../src/writer/GuideCard/GuideCard.tsx","../src/writer/Steps/Steps.styles.tsx","../src/writer/Steps/Steps.tsx","../src/writer/Table/Table.styles.tsx","../src/writer/Table/Table.tsx","../src/writer/Tabs/Tabs.styles.tsx","../src/writer/Tabs/Tabs.tsx","../src/writer/UnderlineNav/UnderlineNav.styles.tsx","../src/writer/UnderlineNav/UnderlineNav.tsx"],"sourcesContent":["import {css} from \"@linaria/core\";\n\nexport const $guide = {\n    host: css`\n    `,\n    host$$secondary: css`\n        //flex-grow: 1;\n        //width: 100%;\n        display: flex;\n        position: relative;\n        overflow: hidden;\n        border: .5px solid #ececf1;\n        background: linear-gradient(238deg, rgba(247, 247, 248, .5) 0%, rgba(247, 247, 248, 1) 100%);\n        border-radius: 8px;\n        padding: 16px 20px 20px;\n        z-index: 0;\n        transition: box-shadow .2s ease-in-out, background-image .2s ease;\n\n        &:hover {\n            background: linear-gradient(238deg, rgba(255, 255, 255, .5) 0%, rgba(250, 250, 250, 1) 100%);\n        }\n    `,\n    host$$secondary$$md: css`\n        padding: 21px 25px 25px;\n    `,\n    link: css`\n        width: 100%;\n        height: 100%;\n    `,\n    item: css`\n        border-radius: 8px;\n        display: flex;\n\n        align-items: flex-start;\n        cursor: pointer;\n        transition: opacity .15s;\n\n        &:hover {\n            [data-pointer=\"true\"] {\n                opacity: 1;\n                transform: translate(0);\n            }\n        }\n    `,\n    item$$secondary: css`\n        width: 100%;\n        height: 100%;\n    `,\n    icon: css`\n        line-height: 0px;\n        font-size: 24px;\n        border-radius: 8px;\n        width: 48px;\n        height: 48px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        color: #353740;\n        border: 1px solid #ececf1;\n        background: linear-gradient(238deg, rgba(255, 255, 255, .5) 0%, rgba(250, 250, 250, 1) 100%);\n        transition: background .2s ease;\n        box-sizing: border-box;\n        flex-shrink: 0;\n    `,\n    right: css`\n        padding-left: 16px;\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n    `,\n    title: css`\n        display: flex;\n        color: #202123;\n        font-weight: 400;\n        align-items: center;\n        transition: color .15s;\n    `,\n    titleBody: css`\n        font-size: 16px;\n        line-height: 20px;\n    `,\n    titleBody$$md: css`\n        font-size: 18px;\n    `,\n    body: css`\n        font-weight: 400;\n        font-size: 14px;\n        line-height: 20px;\n\n        color: #6e6e80;\n        white-space: normal;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    `,\n    body$$md: css`\n        font-size: 16px;\n    `,\n    pointer: css`\n        opacity: 0;\n        transform: translate(-4px);\n        display: flex;\n        justify-content: center;\n        transition: opacity .15s ease-in-out, transform .15s ease-in-out;\n    `\n}\n\n\nexport const $list = {\n    host: css`\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        justify-content: center;\n        gap: 30px;\n    `\n}","import React from \"react\"\n\nimport {$guide, $list} from \"./GuideCard.styles\";\n\nexport interface GuideCardProps {\n    children: React.ReactNode;\n    href: string\n    title: string;\n    icon?: React.ReactNode;\n    kind?: \"secondary\"\n    size?: \"sm\" | \"md\"\n}\n\nexport function GuideCard({\n                              children,\n                              href,\n                              icon,\n                              title,\n                              kind,\n                              size,\n\n                          }: GuideCardProps) {\n    return <div className={`\n        ${$guide.host}\n        ${kind === \"secondary\" && $guide.host$$secondary}\n        ${kind === \"secondary\" && size == \"md\" && $guide.host$$secondary$$md}\n    `}>\n        <a className={$guide.link} href={href}>\n            <div className={`\n                ${$guide.item}\n                ${kind === \"secondary\" && $guide.item$$secondary}\n            `}>\n                {icon && <div className={$guide.icon}>\n                    {icon}\n                </div>}\n                <div className={$guide.right}>\n                    <div className={$guide.title}>\n                        <div className={`\n                            ${$guide.title} \n                            ${$guide.titleBody}\n                            ${size == \"md\" && $guide.titleBody$$md}\n                        `}>\n                            {title}\n                        </div>\n                        <$Pointer/>\n                    </div>\n                    <div className={`\n                        ${$guide.body}\n                        ${size == \"md\" && $guide.body$$md}\n                    `}>\n                        {children}\n                    </div>\n                </div>\n            </div>\n        </a>\n    </div>\n}\n\nGuideCard.List = function GuideCardList({children}: { children: React.ReactNode }) {\n    return <div className={$list.host}>\n        {children}\n    </div>\n}\n\nfunction $Pointer() {\n    return <div data-pointer=\"true\" className={$guide.pointer}>\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width={24}\n            height={24}\n            fill=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n        >\n            <path\n                fillRule=\"evenodd\"\n                d=\"M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    </div>\n}","import {css} from \"@linaria/core\";\n\nexport const $steps = {\n    host: css`\n        padding-left: 0;\n        list-style: none;\n        counter-reset: ordered-listitem;\n\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n    `,\n    li: css`\n        padding-left: 32px;\n        position: relative;\n        line-height: 1.5;\n\n        &::after {\n            position: absolute;\n            top: 0;\n            left: 0;\n            counter-increment: ordered-listitem;\n            content: counter(ordered-listitem);\n\n            background: #ececf1;\n            color: #353740;\n            font-size: 12px;\n            line-height: 24px;\n            font-weight: 500;\n            text-align: center;\n            height: 24px;\n            width: 24px;\n            border-radius: 12px;\n        }\n    `,\n}","import React from \"react\"\n\nimport {$steps} from \"./Steps.styles\";\n\nexport interface StepsProps {\n    children: React.ReactNode;\n}\n\nexport function Steps({children}: StepsProps) {\n    return <ol className={$steps.host}>\n        {children}\n    </ol>\n\n}\n\nexport interface StepsItemProps {\n    children: React.ReactNode;\n}\n\nSteps.Item = function StepsItem({children}: StepsItemProps) {\n    return <li className={$steps.li}>\n        {children}\n    </li>\n}","import {css} from \"@linaria/core\";\n\nconst colors = {\n    primary: \"#D1D5DB\"\n}\n\nexport const $table = {\n    host: css`\n        display: block;\n        overflow-x: scroll;\n\n        border-collapse: collapse;\n        border-radius: 3px;\n    `,\n    th: css`\n        padding: 0.5rem 1rem;\n        margin: 0;\n\n        font-weight: 600;\n        border-width: 1px;\n        border-color: ${colors.primary};\n        background: rgba(234, 238, 242, 0.5);\n    `,\n    tr: css`\n        padding: 0;\n        margin: 0;\n        border-top-width: 1px;\n        border-color: ${colors.primary};\n    `,\n    td: css`\n        padding: 0.5rem 1rem;\n        margin: 0;\n\n        border-width: 1px;\n        border-color: ${colors.primary};\n    `\n}\n\n\n","import React from \"react\"\n\nimport {$table} from \"./Table.styles\";\n\nexport interface TableProps {\n    children: React.ReactNode;\n}\n\nexport function Table({children}: TableProps) {\n    return <table className={$table.host}>\n        {children}\n    </table>\n}\n\nexport interface TableThProps {\n    children: React.ReactNode;\n}\n\nTable.Th = function TableTh({children}: TableThProps) {\n    return <th className={$table.th}>\n        {children}\n    </th>\n}\n\nexport interface TableTrProps {\n    children: React.ReactNode;\n}\n\nTable.Tr = function TableTr({children}: TableTrProps) {\n    return <tr className={$table.tr}>\n        {children}\n    </tr>\n\n}\n\nexport interface TableTdProps {\n    children: React.ReactNode;\n}\n\nTable.Td = function TableTd({children}: TableTdProps) {\n    return <td className={$table.td}>\n        {children}\n    </td>\n\n}","import {css} from \"@linaria/core\";\n\nexport const $sample = {\n    host: css`\n        position: relative;\n        max-width: 100%;\n    `,\n    buttons: css`\n        display: flex;\n        align-items: center;\n    `,\n    content: css`\n        margin-top: 16px;\n    `\n}\n\nexport const $arrow = {\n    host: css`\n        padding: 8px;\n        background-color: #ffffff;\n        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n    `,\n    icon: css`\n        width: 16px;\n        height: 16px;\n    `\n}\n\nexport const $scroller = {\n    host: css`\n        overflow-x: auto;\n        flex-grow: 1;\n    `,\n    container: css`\n        display: inline-flex;\n        gap: 4px;\n\n        border-radius: 8px;\n        background-color: #F3F4F6;\n        \n        padding: 4px;\n        margin-left: 4px;\n    `\n}\n\nexport const $button = {\n    host: css`\n        padding: 0.5rem 1rem;\n\n        border-radius: 0.375rem;\n        font-size: 0.875rem;\n        line-height: 1.25rem;\n        font-weight: 500;\n        white-space: nowrap;\n\n        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 300ms;\n\n        color: #6B7280;\n\n        &:hover {\n            color: #111827;\n        }\n\n        &[data-state=\"active\"] {\n            color: #111827;\n            background-color: #ffffff;\n            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n        }\n    `,\n    $$active: css`\n        color: #111827;\n        background-color: #ffffff;\n        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n    `\n}","import React, {useState, useRef, useEffect} from 'react'\nimport * as RadixTabs from \"@radix-ui/react-tabs\"\nimport {ChevronLeft, ChevronRight} from \"lucide-react\"\n\nimport {\n    $sample,\n    $arrow,\n    $scroller,\n    $button\n} from \"./Tabs.styles\";\n\nexport interface TabsProps {\n    children: React.ReactNode;\n    items: string[];\n    tabIndex?: number;\n}\n\nexport function Tabs({children, items, tabIndex}: TabsProps) {\n    const [showLeftArrow, setShowLeftArrow] = useState(false)\n    const [showRightArrow, setShowRightArrow] = useState(false)\n    const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n    const [value, setActiveTab] = useState(items[tabIndex || 0] || \"\")\n\n    const handleScroll = () => {\n        if (scrollContainerRef.current) {\n            const {scrollLeft, scrollWidth, clientWidth} = scrollContainerRef.current\n            setShowLeftArrow(scrollLeft > 0)\n            setShowRightArrow(scrollLeft < scrollWidth - clientWidth)\n        }\n    }\n\n    useEffect(() => {\n        handleScroll()\n        window.addEventListener('resize', handleScroll)\n        return () => window.removeEventListener('resize', handleScroll)\n    }, [])\n\n    const scroll = (direction: 'left' | 'right') => {\n        if (scrollContainerRef.current) {\n            const scrollAmount = direction === 'left' ? -200 : 200\n            scrollContainerRef.current.scrollBy({left: scrollAmount, behavior: 'smooth'})\n        }\n    }\n\n    return (\n        <RadixTabs.Root asChild value={value} onValueChange={setActiveTab}>\n            <div className={$sample.host}>\n                <div className={$sample.buttons}>\n                    {showLeftArrow && (\n                        <button\n                            onClick={() => scroll('left')}\n                            className={$arrow.host}\n                        >\n                            <ChevronLeft className={$arrow.icon}/>\n                        </button>\n                    )}\n\n                    <div\n                        ref={scrollContainerRef}\n                        onScroll={handleScroll}\n                        className={$scroller.host}\n                    >\n                        <div className={$scroller.container}>\n                            <RadixTabs.List>\n                                {items.map((item, index) => <TabsItem key={index} value={item}>\n                                        {item}\n                                    </TabsItem>\n                                )}\n                            </RadixTabs.List>\n                        </div>\n                    </div>\n\n                    {showRightArrow && (\n                        <button\n                            onClick={() => scroll('right')}\n                            className={$arrow.host}\n                        >\n                            <ChevronRight className={$arrow.icon}/>\n                        </button>\n                    )}\n                </div>\n\n                <div className={$sample.content}>\n                    {children}\n                </div>\n            </div>\n        </RadixTabs.Root>\n    )\n}\n\nfunction TabsItem({children, value}) {\n    return <RadixTabs.Trigger asChild value={value}>\n        <button className={`${$button.host}`}>\n            {children}\n        </button>\n    </RadixTabs.Trigger>\n}\n\nTabs.Content = function TabsContent({children, value}) {\n    return <RadixTabs.Content asChild value={value}>\n        {children}\n    </RadixTabs.Content>\n}","import {css} from \"@linaria/core\"\n\nexport const $nav = {\n    host: css`\n        align-items: center;\n        display: flex;\n\n        height: 42px;\n\n        background-color: #fff;\n        border-bottom: 1px solid hsl(212, 15%, calc(96% - 12% * 1));\n\n        z-index: 99;\n    `,\n    ul: css`\n        display: flex;\n        gap: 10px;\n\n        height: 100%;\n        color: hsl(212, 15%, calc(96% - 12% * 4));\n\n        list-style: none;\n        padding: 0;\n        white-space: nowrap;\n    `,\n    item: css`\n        height: 100%;\n\n        &[data-state=\"active\"] { // TODO: in the future it should not be possible\n            a {\n                border-bottom-color: rgb(112, 81, 212);\n            }\n        }\n    `,\n    itemLink: css`\n        display: inline-flex;\n        border-bottom: 3px solid transparent;\n        text-decoration: none;\n\n        height: 100%;\n        padding: 10px;\n    `,\n    itemLink$$active: css`\n    `\n}","import React from \"react\"\nimport * as RadixTabs from \"@radix-ui/react-tabs\";\n\nimport {$nav} from \"./UnderlineNav.styles\"\n\nexport interface TabsProps {\n    children: React.ReactNode\n    value: string\n    onChange: (value: string) => void\n}\n\nexport function UnderlineNav({children, value, onChange}: TabsProps) {\n    return <RadixTabs.Root asChild value={value} onValueChange={onChange}>\n        <nav className={$nav.host}>\n            <RadixTabs.List asChild>\n                <ul className={$nav.ul}>\n                    {children}\n                </ul>\n            </RadixTabs.List>\n        </nav>\n    </RadixTabs.Root>\n}\n\nexport interface UnderlineNavItemProps {\n    children: React.ReactNode\n    value: string\n    href?: string\n}\n\nUnderlineNav.Item = function UnderlineNavItem({children, value, href}: UnderlineNavItemProps) {\n    return <RadixTabs.Trigger asChild value={value}>\n        <li className={$nav.item}>\n            <a href={href} className={`${$nav.itemLink}`}>\n                {children}\n            </a>\n        </li>\n    </RadixTabs.Trigger>\n}"],"names":["$guide","$list","GuideCard","_ref","children","href","icon","title","kind","size","React","createElement","className","concat","$Pointer","xmlns","width","height","fill","viewBox","fillRule","d","clipRule","List","_ref2","$steps","Steps","Item","$table","Table","Th","Tr","_ref3","Td","_ref4","$sample","$arrow","$scroller","$button","Tabs","items","tabIndex","_useState","useState","_useState2","_slicedToArray","showLeftArrow","setShowLeftArrow","_useState3","_useState4","showRightArrow","setShowRightArrow","scrollContainerRef","useRef","_useState5","_useState6","value","setActiveTab","handleScroll","current","_scrollContainerRef$c","scrollLeft","scrollWidth","clientWidth","useEffect","window","addEventListener","removeEventListener","scroll","direction","scrollAmount","scrollBy","left","behavior","RadixTabs","Root","asChild","onValueChange","onClick","ChevronLeft","ref","onScroll","map","item","index","TabsItem","key","ChevronRight","Trigger","Content","$nav","UnderlineNav","onChange"],"mappings":"+NAEO,IAAMA,EAER,UAFQA,EAmBR,UAnBQA,EAsBR,WAtBQA,EA0BR,UA1BQA,EAyCR,UAzCQA,EA6CR,WA7CQA,EA6DR,WA7DQA,EAmER,WAnEQA,EA0ER,WA1EQA,EA8ER,UA9EQA,EAiFR,WAjFQA,EA2FR,UA3FQA,EA8FR,UA9FQA,EA+FF,WAUEC,EACL,WC/FQ,SAAAC,EAASC,GAQkB,IAPbC,EAAQD,EAARC,SACAC,EAAIF,EAAJE,KACAC,EAAIH,EAAJG,KACAC,EAAKJ,EAALI,MACAC,EAAIL,EAAJK,KACAC,EAAIN,EAAJM,KAG1B,OAAOC,EAAAC,cAAA,MAAA,CAAKC,UAASC,aAAAA,OACfb,EAAWa,cAAAA,OACF,cAATL,GAAwBR,EAAsBa,cAAAA,OACrC,cAATL,GAAgC,MAARC,GAAgBT,EAA0B,WAEpEU,EAAGC,cAAA,IAAA,CAAAC,UAAWZ,EAAaK,KAAMA,GAC7BK,EAAAC,cAAA,MAAA,CAAKC,UAASC,qBAAAA,OACRb,EAAW,sBAAAa,OACF,cAATL,GAAwBR,EAAsB,mBAE/CM,GAAQI,uBAAKE,UAAWZ,GACpBM,GAELI,EAAAC,cAAA,MAAA,CAAKC,UAAWZ,GACZU,EAAAC,cAAA,MAAA,CAAKC,UAAWZ,GACZU,EAAAC,cAAA,MAAA,CAAKC,UAAS,iCAAAC,OACRb,EAAY,mCAAAa,OACZb,EAAgB,kCAAAa,OACR,MAARJ,GAAgBT,EAAoB,+BAErCO,GAELG,EAACC,cAAAG,SAELJ,EAAAC,cAAA,MAAA,CAAKC,UAASC,6BAAAA,OACRb,EAAW,8BAAAa,OACH,MAARJ,GAAgBT,EAAe,2BAEhCI,MAMzB,CAQA,SAASU,IACL,OAAOJ,sCAAkB,OAAOE,UAAWZ,GACvCU,EAAAC,cAAA,MAAA,CACII,MAAM,6BACNC,MAAO,GACPC,OAAQ,GACRC,KAAK,eACLC,QAAQ,aAERT,EAAAC,cAAA,OAAA,CACIS,SAAS,UACTC,EAAE,2HACFC,SAAS,aAIzB,CAtBApB,EAAUqB,KAAO,SAAsBC,GAA0C,IAAxCpB,EAAQoB,EAARpB,SACrC,OAAOM,EAAAC,cAAA,MAAA,CAAKC,UAAWX,GAClBG,EAET,EC5DO,IAAMqB,EASR,UATQA,EAUP,WCJU,SAAAC,EAAKvB,GAAuB,IAArBC,EAAQD,EAARC,SACnB,OAAOM,EAAAC,cAAA,KAAA,CAAIC,UAAWa,GACjBrB,EAGT,CAMAsB,EAAMC,KAAO,SAAkBH,GAA2B,IAAzBpB,EAAQoB,EAARpB,SAC7B,OAAOM,EAAAC,cAAA,KAAA,CAAIC,UAAWa,GACjBrB,EAET,ECjBO,IAAMwB,EAOR,WAPQA,EAgBR,WAhBQA,EAsBR,UAtBQA,EAuBP,WCrBU,SAAAC,EAAK1B,GAAuB,IAArBC,EAAQD,EAARC,SACnB,OAAOM,EAAAC,cAAA,QAAA,CAAOC,UAAWgB,GACpBxB,EAET,CAMAyB,EAAMC,GAAK,SAAgBN,GAAyB,IAAvBpB,EAAQoB,EAARpB,SACzB,OAAOM,EAAAC,cAAA,KAAA,CAAIC,UAAWgB,GACjBxB,EAET,EAMAyB,EAAME,GAAK,SAAgBC,GAAyB,IAAvB5B,EAAQ4B,EAAR5B,SACzB,OAAOM,EAAAC,cAAA,KAAA,CAAIC,UAAWgB,GACjBxB,EAGT,EAMAyB,EAAMI,GAAK,SAAgBC,GAAyB,IAAvB9B,EAAQ8B,EAAR9B,SACzB,OAAOM,EAAAC,cAAA,KAAA,CAAIC,UAAWgB,GACjBxB,EAGT,EC1CO,IAAM+B,EAIR,UAJQA,EAQR,UARQA,EASF,UAKEC,EAKR,WALQA,EAML,WAMKC,EAIR,UAJQA,EAKA,UAYAC,EAyBR,UCrDC,SAAUC,EAAIpC,GAAuC,IAArCC,EAAQD,EAARC,SAAUoC,EAAKrC,EAALqC,MAAOC,EAAQtC,EAARsC,SACnCC,EAA0CC,GAAS,GAAMC,EAAAC,EAAAH,EAAA,GAAlDI,EAAaF,EAAA,GAAEG,EAAgBH,EAAA,GACtCI,EAA4CL,GAAS,GAAMM,EAAAJ,EAAAG,EAAA,GAApDE,EAAcD,EAAA,GAAEE,EAAiBF,EAAA,GAClCG,EAAqBC,EAAuB,MAElDC,EAA8BX,EAASH,EAAMC,GAAY,IAAM,IAAGc,EAAAV,EAAAS,EAAA,GAA3DE,EAAKD,EAAA,GAAEE,EAAYF,EAAA,GAEpBG,EAAe,WACjB,GAAIN,EAAmBO,QAAS,CAC5B,IAAAC,EAA+CR,EAAmBO,QAA3DE,EAAUD,EAAVC,WAAYC,EAAWF,EAAXE,YAAaC,EAAWH,EAAXG,YAChChB,EAAiBc,EAAa,GAC9BV,EAAkBU,EAAaC,EAAcC,EACjD,CACH,EAEDC,GAAU,WAGN,OAFAN,IACAO,OAAOC,iBAAiB,SAAUR,GAC3B,WAAA,OAAMO,OAAOE,oBAAoB,SAAUT,EAAa,CAClE,GAAE,IAEH,IAAMU,EAAS,SAACC,GACZ,GAAIjB,EAAmBO,QAAS,CAC5B,IAAMW,EAA6B,SAAdD,GAA2B,IAAG,IACnDjB,EAAmBO,QAAQY,SAAS,CAACC,KAAMF,EAAcG,SAAU,UACvE,CACH,EAED,OACI/D,EAAAC,cAAC+D,EAAUC,KAAK,CAAAC,SAAQ,EAAApB,MAAOA,EAAOqB,cAAepB,GACjD/C,EAAAC,cAAA,MAAA,CAAKC,UAAWuB,GACZzB,EAAAC,cAAA,MAAA,CAAKC,UAAWuB,GACXW,GACGpC,EAAAC,cAAA,SAAA,CACImE,QAAS,WAAF,OAAQV,EAAO,OAAO,EAC7BxD,UAAWwB,GAEX1B,EAACC,cAAAoE,GAAYnE,UAAWwB,KAIhC1B,EAAAC,cAAA,MAAA,CACIqE,IAAK5B,EACL6B,SAAUvB,EACV9C,UAAWyB,GAEX3B,EAAAC,cAAA,MAAA,CAAKC,UAAWyB,GACZ3B,EAAAC,cAAC+D,EAAUnD,KAAI,KACViB,EAAM0C,KAAI,SAACC,EAAMC,GAAK,OAAK1E,EAACC,cAAA0E,EAAS,CAAAC,IAAKF,EAAO5B,MAAO2B,GAChDA,SAOpBjC,GACGxC,EAAAC,cAAA,SAAA,CACImE,QAAS,WAAF,OAAQV,EAAO,QAAQ,EAC9BxD,UAAWwB,GAEX1B,EAACC,cAAA4E,EAAa,CAAA3E,UAAWwB,MAKrC1B,EAAKC,cAAA,MAAA,CAAAC,UAAWuB,GACX/B,IAKrB,CAEA,SAASiF,EAAQ7D,GAAkB,IAAhBpB,EAAQoB,EAARpB,SAAUoD,EAAKhC,EAALgC,MACzB,OAAO9C,EAAAC,cAAC+D,EAAUc,SAAQZ,SAAO,EAACpB,MAAOA,GACrC9C,EAAQC,cAAA,SAAA,CAAAC,UAASC,GAAAA,OAAKyB,IACjBlC,GAGb,CAEAmC,EAAKkD,QAAU,SAAoBzD,GAAkB,IAAhB5B,EAAQ4B,EAAR5B,SAAUoD,EAAKxB,EAALwB,MAC3C,OAAO9C,EAACC,cAAA+D,EAAUe,QAAQ,CAAAb,SAAQ,EAAApB,MAAOA,GACpCpD,EAET,ECrGO,IAAMsF,EAWR,WAXQA,EAsBR,UAtBQA,EA+BR,UA/BQA,EAuCR,UC9BC,SAAUC,EAAYxF,GAAuC,IAArCC,EAAQD,EAARC,SAAUoD,EAAKrD,EAALqD,MAAOoC,EAAQzF,EAARyF,SAC3C,OAAOlF,EAACC,cAAA+D,EAAUC,KAAK,CAAAC,SAAQ,EAAApB,MAAOA,EAAOqB,cAAee,GACxDlF,EAAAC,cAAA,MAAA,CAAKC,UAAW8E,GACZhF,EAAAC,cAAC+D,EAAUnD,KAAI,CAACqD,SAAO,GACnBlE,EAAIC,cAAA,KAAA,CAAAC,UAAW8E,GACVtF,KAKrB,CAQAuF,EAAahE,KAAO,SAAyBH,GAA+C,IAA7CpB,EAAQoB,EAARpB,SAAUoD,EAAKhC,EAALgC,MAAOnD,EAAImB,EAAJnB,KAC5D,OAAOK,EAAAC,cAAC+D,EAAUc,SAAQZ,SAAO,EAACpB,MAAOA,GACrC9C,EAAAC,cAAA,KAAA,CAAIC,UAAW8E,GACXhF,EAAAC,cAAA,IAAA,CAAGN,KAAMA,EAAMO,UAASC,GAAAA,OAAK6E,IACxBtF,IAIjB"}

package/dist/UnderlineNav-6W7b9_Iv.js

@@ -0,0 +1,2 @@
+import e,{useState as t,useRef as a,useEffect as n}from"react";import{_ as r}from"./_rollupPluginBabelHelpers-d8Wlqyrf.js";import*as c from"@radix-ui/react-tabs";import{ChevronLeft as l,ChevronRight as i}from"lucide-react";var s="hh34a3o",m="hilz89t",o="h1rnhmpa",u="lajci2p",d="iezrce7",v="i1vhi0b8",h="i1m2lps9",f="r1new93p",E="t1u3d3ty",N="t4udf3g",p="t1icpluq",b="badgd67",g="bcjznmh",w="p13ekkiz",C="h15733ml";function k(t){var a=t.children,n=t.href,r=t.icon,c=t.title,l=t.kind,i=t.size;return e.createElement("div",{className:"\n        ".concat(s,"\n        ").concat("secondary"===l&&m,"\n        ").concat("secondary"===l&&"md"==i&&o,"\n    ")},e.createElement("a",{className:u,href:n},e.createElement("div",{className:"\n                ".concat(d,"\n                ").concat("secondary"===l&&v,"\n            ")},r&&e.createElement("div",{className:h},r),e.createElement("div",{className:f},e.createElement("div",{className:E},e.createElement("div",{className:"\n                            ".concat(E," \n                            ").concat(N,"\n                            ").concat("md"==i&&p,"\n                        ")},c),e.createElement(z,null)),e.createElement("div",{className:"\n                        ".concat(b,"\n                        ").concat("md"==i&&g,"\n                    ")},a)))))}function z(){return e.createElement("div",{"data-pointer":"true",className:w},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",viewBox:"0 0 24 24"},e.createElement("path",{fillRule:"evenodd",d:"M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z",clipRule:"evenodd"})))}k.List=function(t){var a=t.children;return e.createElement("div",{className:C},a)};var x="h3kfd8c",L="l1et872q";function y(t){var a=t.children;return e.createElement("ol",{className:x},a)}y.Item=function(t){var a=t.children;return e.createElement("li",{className:L},a)};var T="h14vj3ri",j="t1l6tz9b",R="thzxr0l",B="t1g1altt";function I(t){var a=t.children;return e.createElement("table",{className:T},a)}I.Th=function(t){var a=t.children;return e.createElement("th",{className:j},a)},I.Tr=function(t){var a=t.children;return e.createElement("tr",{className:R},a)},I.Td=function(t){var a=t.children;return e.createElement("td",{className:B},a)};var q="hh8vcxa",S="b2p5907",V="coeb6fw",W="h196u2m6",_="i1hlflsk",G="hownbu8",H="cuwerl2",M="hlivi01";function P(s){var m=s.children,o=s.items,u=s.tabIndex,d=t(!1),v=r(d,2),h=v[0],f=v[1],E=t(!1),N=r(E,2),p=N[0],b=N[1],g=a(null),w=t(o[u||0]||""),C=r(w,2),k=C[0],z=C[1],x=function(){if(g.current){var e=g.current,t=e.scrollLeft,a=e.scrollWidth,n=e.clientWidth;f(t>0),b(t<a-n)}};n((function(){return x(),window.addEventListener("resize",x),function(){return window.removeEventListener("resize",x)}}),[]);var L=function(e){if(g.current){var t="left"===e?-200:200;g.current.scrollBy({left:t,behavior:"smooth"})}};return e.createElement(c.Root,{asChild:!0,value:k,onValueChange:z},e.createElement("div",{className:q},e.createElement("div",{className:S},h&&e.createElement("button",{onClick:function(){return L("left")},className:W},e.createElement(l,{className:_})),e.createElement("div",{ref:g,onScroll:x,className:G},e.createElement("div",{className:H},e.createElement(c.List,null,o.map((function(t,a){return e.createElement(U,{key:a,value:t},t)}))))),p&&e.createElement("button",{onClick:function(){return L("right")},className:W},e.createElement(i,{className:_}))),e.createElement("div",{className:V},m)))}function U(t){var a=t.children,n=t.value;return e.createElement(c.Trigger,{asChild:!0,value:n},e.createElement("button",{className:"".concat(M)},a))}P.Content=function(t){var a=t.children,n=t.value;return e.createElement(c.Content,{asChild:!0,value:n},a)};var Z="h1bta36o",A="uxs4bf1",D="ifn7ecb",F="i441kmn";function J(t){var a=t.children,n=t.value,r=t.onChange;return e.createElement(c.Root,{asChild:!0,value:n,onValueChange:r},e.createElement("nav",{className:Z},e.createElement(c.List,{asChild:!0},e.createElement("ul",{className:A},a))))}J.Item=function(t){var a=t.children,n=t.value,r=t.href;return e.createElement(c.Trigger,{asChild:!0,value:n},e.createElement("li",{className:D},e.createElement("a",{href:r,className:"".concat(F)},a)))};export{k as G,y as S,I as T,J as U,P as a};
+//# sourceMappingURL=UnderlineNav-6W7b9_Iv.js.map

package/dist/UnderlineNav-6W7b9_Iv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnderlineNav-6W7b9_Iv.js","sources":["../src/writer/GuideCard/GuideCard.styles.tsx","../src/writer/GuideCard/GuideCard.tsx","../src/writer/Steps/Steps.styles.tsx","../src/writer/Steps/Steps.tsx","../src/writer/Table/Table.styles.tsx","../src/writer/Table/Table.tsx","../src/writer/Tabs/Tabs.styles.tsx","../src/writer/Tabs/Tabs.tsx","../src/writer/UnderlineNav/UnderlineNav.styles.tsx","../src/writer/UnderlineNav/UnderlineNav.tsx"],"sourcesContent":["import {css} from \"@linaria/core\";\n\nexport const $guide = {\n    host: css`\n    `,\n    host$$secondary: css`\n        //flex-grow: 1;\n        //width: 100%;\n        display: flex;\n        position: relative;\n        overflow: hidden;\n        border: .5px solid #ececf1;\n        background: linear-gradient(238deg, rgba(247, 247, 248, .5) 0%, rgba(247, 247, 248, 1) 100%);\n        border-radius: 8px;\n        padding: 16px 20px 20px;\n        z-index: 0;\n        transition: box-shadow .2s ease-in-out, background-image .2s ease;\n\n        &:hover {\n            background: linear-gradient(238deg, rgba(255, 255, 255, .5) 0%, rgba(250, 250, 250, 1) 100%);\n        }\n    `,\n    host$$secondary$$md: css`\n        padding: 21px 25px 25px;\n    `,\n    link: css`\n        width: 100%;\n        height: 100%;\n    `,\n    item: css`\n        border-radius: 8px;\n        display: flex;\n\n        align-items: flex-start;\n        cursor: pointer;\n        transition: opacity .15s;\n\n        &:hover {\n            [data-pointer=\"true\"] {\n                opacity: 1;\n                transform: translate(0);\n            }\n        }\n    `,\n    item$$secondary: css`\n        width: 100%;\n        height: 100%;\n    `,\n    icon: css`\n        line-height: 0px;\n        font-size: 24px;\n        border-radius: 8px;\n        width: 48px;\n        height: 48px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        color: #353740;\n        border: 1px solid #ececf1;\n        background: linear-gradient(238deg, rgba(255, 255, 255, .5) 0%, rgba(250, 250, 250, 1) 100%);\n        transition: background .2s ease;\n        box-sizing: border-box;\n        flex-shrink: 0;\n    `,\n    right: css`\n        padding-left: 16px;\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n    `,\n    title: css`\n        display: flex;\n        color: #202123;\n        font-weight: 400;\n        align-items: center;\n        transition: color .15s;\n    `,\n    titleBody: css`\n        font-size: 16px;\n        line-height: 20px;\n    `,\n    titleBody$$md: css`\n        font-size: 18px;\n    `,\n    body: css`\n        font-weight: 400;\n        font-size: 14px;\n        line-height: 20px;\n\n        color: #6e6e80;\n        white-space: normal;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    `,\n    body$$md: css`\n        font-size: 16px;\n    `,\n    pointer: css`\n        opacity: 0;\n        transform: translate(-4px);\n        display: flex;\n        justify-content: center;\n        transition: opacity .15s ease-in-out, transform .15s ease-in-out;\n    `\n}\n\n\nexport const $list = {\n    host: css`\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        justify-content: center;\n        gap: 30px;\n    `\n}","import React from \"react\"\n\nimport {$guide, $list} from \"./GuideCard.styles\";\n\nexport interface GuideCardProps {\n    children: React.ReactNode;\n    href: string\n    title: string;\n    icon?: React.ReactNode;\n    kind?: \"secondary\"\n    size?: \"sm\" | \"md\"\n}\n\nexport function GuideCard({\n                              children,\n                              href,\n                              icon,\n                              title,\n                              kind,\n                              size,\n\n                          }: GuideCardProps) {\n    return <div className={`\n        ${$guide.host}\n        ${kind === \"secondary\" && $guide.host$$secondary}\n        ${kind === \"secondary\" && size == \"md\" && $guide.host$$secondary$$md}\n    `}>\n        <a className={$guide.link} href={href}>\n            <div className={`\n                ${$guide.item}\n                ${kind === \"secondary\" && $guide.item$$secondary}\n            `}>\n                {icon && <div className={$guide.icon}>\n                    {icon}\n                </div>}\n                <div className={$guide.right}>\n                    <div className={$guide.title}>\n                        <div className={`\n                            ${$guide.title} \n                            ${$guide.titleBody}\n                            ${size == \"md\" && $guide.titleBody$$md}\n                        `}>\n                            {title}\n                        </div>\n                        <$Pointer/>\n                    </div>\n                    <div className={`\n                        ${$guide.body}\n                        ${size == \"md\" && $guide.body$$md}\n                    `}>\n                        {children}\n                    </div>\n                </div>\n            </div>\n        </a>\n    </div>\n}\n\nGuideCard.List = function GuideCardList({children}: { children: React.ReactNode }) {\n    return <div className={$list.host}>\n        {children}\n    </div>\n}\n\nfunction $Pointer() {\n    return <div data-pointer=\"true\" className={$guide.pointer}>\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width={24}\n            height={24}\n            fill=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n        >\n            <path\n                fillRule=\"evenodd\"\n                d=\"M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    </div>\n}","import {css} from \"@linaria/core\";\n\nexport const $steps = {\n    host: css`\n        padding-left: 0;\n        list-style: none;\n        counter-reset: ordered-listitem;\n\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n    `,\n    li: css`\n        padding-left: 32px;\n        position: relative;\n        line-height: 1.5;\n\n        &::after {\n            position: absolute;\n            top: 0;\n            left: 0;\n            counter-increment: ordered-listitem;\n            content: counter(ordered-listitem);\n\n            background: #ececf1;\n            color: #353740;\n            font-size: 12px;\n            line-height: 24px;\n            font-weight: 500;\n            text-align: center;\n            height: 24px;\n            width: 24px;\n            border-radius: 12px;\n        }\n    `,\n}","import React from \"react\"\n\nimport {$steps} from \"./Steps.styles\";\n\nexport interface StepsProps {\n    children: React.ReactNode;\n}\n\nexport function Steps({children}: StepsProps) {\n    return <ol className={$steps.host}>\n        {children}\n    </ol>\n\n}\n\nexport interface StepsItemProps {\n    children: React.ReactNode;\n}\n\nSteps.Item = function StepsItem({children}: StepsItemProps) {\n    return <li className={$steps.li}>\n        {children}\n    </li>\n}","import {css} from \"@linaria/core\";\n\nconst colors = {\n    primary: \"#D1D5DB\"\n}\n\nexport const $table = {\n    host: css`\n        display: block;\n        overflow-x: scroll;\n\n        border-collapse: collapse;\n        border-radius: 3px;\n    `,\n    th: css`\n        padding: 0.5rem 1rem;\n        margin: 0;\n\n        font-weight: 600;\n        border-width: 1px;\n        border-color: ${colors.primary};\n        background: rgba(234, 238, 242, 0.5);\n    `,\n    tr: css`\n        padding: 0;\n        margin: 0;\n        border-top-width: 1px;\n        border-color: ${colors.primary};\n    `,\n    td: css`\n        padding: 0.5rem 1rem;\n        margin: 0;\n\n        border-width: 1px;\n        border-color: ${colors.primary};\n    `\n}\n\n\n","import React from \"react\"\n\nimport {$table} from \"./Table.styles\";\n\nexport interface TableProps {\n    children: React.ReactNode;\n}\n\nexport function Table({children}: TableProps) {\n    return <table className={$table.host}>\n        {children}\n    </table>\n}\n\nexport interface TableThProps {\n    children: React.ReactNode;\n}\n\nTable.Th = function TableTh({children}: TableThProps) {\n    return <th className={$table.th}>\n        {children}\n    </th>\n}\n\nexport interface TableTrProps {\n    children: React.ReactNode;\n}\n\nTable.Tr = function TableTr({children}: TableTrProps) {\n    return <tr className={$table.tr}>\n        {children}\n    </tr>\n\n}\n\nexport interface TableTdProps {\n    children: React.ReactNode;\n}\n\nTable.Td = function TableTd({children}: TableTdProps) {\n    return <td className={$table.td}>\n        {children}\n    </td>\n\n}","import {css} from \"@linaria/core\";\n\nexport const $sample = {\n    host: css`\n        position: relative;\n        max-width: 100%;\n    `,\n    buttons: css`\n        display: flex;\n        align-items: center;\n    `,\n    content: css`\n        margin-top: 16px;\n    `\n}\n\nexport const $arrow = {\n    host: css`\n        padding: 8px;\n        background-color: #ffffff;\n        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n    `,\n    icon: css`\n        width: 16px;\n        height: 16px;\n    `\n}\n\nexport const $scroller = {\n    host: css`\n        overflow-x: auto;\n        flex-grow: 1;\n    `,\n    container: css`\n        display: inline-flex;\n        gap: 4px;\n\n        border-radius: 8px;\n        background-color: #F3F4F6;\n        \n        padding: 4px;\n        margin-left: 4px;\n    `\n}\n\nexport const $button = {\n    host: css`\n        padding: 0.5rem 1rem;\n\n        border-radius: 0.375rem;\n        font-size: 0.875rem;\n        line-height: 1.25rem;\n        font-weight: 500;\n        white-space: nowrap;\n\n        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 300ms;\n\n        color: #6B7280;\n\n        &:hover {\n            color: #111827;\n        }\n\n        &[data-state=\"active\"] {\n            color: #111827;\n            background-color: #ffffff;\n            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n        }\n    `,\n    $$active: css`\n        color: #111827;\n        background-color: #ffffff;\n        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n    `\n}","import React, {useState, useRef, useEffect} from 'react'\nimport * as RadixTabs from \"@radix-ui/react-tabs\"\nimport {ChevronLeft, ChevronRight} from \"lucide-react\"\n\nimport {\n    $sample,\n    $arrow,\n    $scroller,\n    $button\n} from \"./Tabs.styles\";\n\nexport interface TabsProps {\n    children: React.ReactNode;\n    items: string[];\n    tabIndex?: number;\n}\n\nexport function Tabs({children, items, tabIndex}: TabsProps) {\n    const [showLeftArrow, setShowLeftArrow] = useState(false)\n    const [showRightArrow, setShowRightArrow] = useState(false)\n    const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n    const [value, setActiveTab] = useState(items[tabIndex || 0] || \"\")\n\n    const handleScroll = () => {\n        if (scrollContainerRef.current) {\n            const {scrollLeft, scrollWidth, clientWidth} = scrollContainerRef.current\n            setShowLeftArrow(scrollLeft > 0)\n            setShowRightArrow(scrollLeft < scrollWidth - clientWidth)\n        }\n    }\n\n    useEffect(() => {\n        handleScroll()\n        window.addEventListener('resize', handleScroll)\n        return () => window.removeEventListener('resize', handleScroll)\n    }, [])\n\n    const scroll = (direction: 'left' | 'right') => {\n        if (scrollContainerRef.current) {\n            const scrollAmount = direction === 'left' ? -200 : 200\n            scrollContainerRef.current.scrollBy({left: scrollAmount, behavior: 'smooth'})\n        }\n    }\n\n    return (\n        <RadixTabs.Root asChild value={value} onValueChange={setActiveTab}>\n            <div className={$sample.host}>\n                <div className={$sample.buttons}>\n                    {showLeftArrow && (\n                        <button\n                            onClick={() => scroll('left')}\n                            className={$arrow.host}\n                        >\n                            <ChevronLeft className={$arrow.icon}/>\n                        </button>\n                    )}\n\n                    <div\n                        ref={scrollContainerRef}\n                        onScroll={handleScroll}\n                        className={$scroller.host}\n                    >\n                        <div className={$scroller.container}>\n                            <RadixTabs.List>\n                                {items.map((item, index) => <TabsItem key={index} value={item}>\n                                        {item}\n                                    </TabsItem>\n                                )}\n                            </RadixTabs.List>\n                        </div>\n                    </div>\n\n                    {showRightArrow && (\n                        <button\n                            onClick={() => scroll('right')}\n                            className={$arrow.host}\n                        >\n                            <ChevronRight className={$arrow.icon}/>\n                        </button>\n                    )}\n                </div>\n\n                <div className={$sample.content}>\n                    {children}\n                </div>\n            </div>\n        </RadixTabs.Root>\n    )\n}\n\nfunction TabsItem({children, value}) {\n    return <RadixTabs.Trigger asChild value={value}>\n        <button className={`${$button.host}`}>\n            {children}\n        </button>\n    </RadixTabs.Trigger>\n}\n\nTabs.Content = function TabsContent({children, value}) {\n    return <RadixTabs.Content asChild value={value}>\n        {children}\n    </RadixTabs.Content>\n}","import {css} from \"@linaria/core\"\n\nexport const $nav = {\n    host: css`\n        align-items: center;\n        display: flex;\n\n        height: 42px;\n\n        background-color: #fff;\n        border-bottom: 1px solid hsl(212, 15%, calc(96% - 12% * 1));\n\n        z-index: 99;\n    `,\n    ul: css`\n        display: flex;\n        gap: 10px;\n\n        height: 100%;\n        color: hsl(212, 15%, calc(96% - 12% * 4));\n\n        list-style: none;\n        padding: 0;\n        white-space: nowrap;\n    `,\n    item: css`\n        height: 100%;\n\n        &[data-state=\"active\"] { // TODO: in the future it should not be possible\n            a {\n                border-bottom-color: rgb(112, 81, 212);\n            }\n        }\n    `,\n    itemLink: css`\n        display: inline-flex;\n        border-bottom: 3px solid transparent;\n        text-decoration: none;\n\n        height: 100%;\n        padding: 10px;\n    `,\n    itemLink$$active: css`\n    `\n}","import React from \"react\"\nimport * as RadixTabs from \"@radix-ui/react-tabs\";\n\nimport {$nav} from \"./UnderlineNav.styles\"\n\nexport interface TabsProps {\n    children: React.ReactNode\n    value: string\n    onChange: (value: string) => void\n}\n\nexport function UnderlineNav({children, value, onChange}: TabsProps) {\n    return <RadixTabs.Root asChild value={value} onValueChange={onChange}>\n        <nav className={$nav.host}>\n            <RadixTabs.List asChild>\n                <ul className={$nav.ul}>\n                    {children}\n                </ul>\n            </RadixTabs.List>\n        </nav>\n    </RadixTabs.Root>\n}\n\nexport interface UnderlineNavItemProps {\n    children: React.ReactNode\n    value: string\n    href?: string\n}\n\nUnderlineNav.Item = function UnderlineNavItem({children, value, href}: UnderlineNavItemProps) {\n    return <RadixTabs.Trigger asChild value={value}>\n        <li className={$nav.item}>\n            <a href={href} className={`${$nav.itemLink}`}>\n                {children}\n            </a>\n        </li>\n    </RadixTabs.Trigger>\n}"],"names":["$guide","$list","GuideCard","_ref","children","href","icon","title","kind","size","React","createElement","className","concat","$Pointer","xmlns","width","height","fill","viewBox","fillRule","d","clipRule","List","_ref2","$steps","Steps","Item","$table","Table","Th","Tr","_ref3","Td","_ref4","$sample","$arrow","$scroller","$button","Tabs","items","tabIndex","_useState","useState","_useState2","_slicedToArray","showLeftArrow","setShowLeftArrow","_useState3","_useState4","showRightArrow","setShowRightArrow","scrollContainerRef","useRef","_useState5","_useState6","value","setActiveTab","handleScroll","current","_scrollContainerRef$c","scrollLeft","scrollWidth","clientWidth","useEffect","window","addEventListener","removeEventListener","scroll","direction","scrollAmount","scrollBy","left","behavior","RadixTabs","Root","asChild","onValueChange","onClick","ChevronLeft","ref","onScroll","map","item","index","TabsItem","key","ChevronRight","Trigger","Content","$nav","UnderlineNav","onChange"],"mappings":"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"}

package/dist/UnderlineNav-8Ro4ycic.js

@@ -0,0 +1,2 @@
+import e,{useState as t,useRef as a,useEffect as n}from"react";import{_ as r}from"./_rollupPluginBabelHelpers-plpsYG3q.js";import*as c from"@radix-ui/react-tabs";import{ChevronLeft as l,ChevronRight as i}from"lucide-react";var s="hh34a3o",m="hilz89t",o="h1rnhmpa",u="lajci2p",d="iezrce7",v="i1vhi0b8",h="i1m2lps9",f="r1new93p",E="t1u3d3ty",N="t4udf3g",p="t1icpluq",b="badgd67",g="bcjznmh",w="p13ekkiz",C="h15733ml";function k(t){var a=t.children,n=t.href,r=t.icon,c=t.title,l=t.kind,i=t.size;return e.createElement("div",{className:"\n        ".concat(s,"\n        ").concat("secondary"===l&&m,"\n        ").concat("secondary"===l&&"md"==i&&o,"\n    ")},e.createElement("a",{className:u,href:n},e.createElement("div",{className:"\n                ".concat(d,"\n                ").concat("secondary"===l&&v,"\n            ")},r&&e.createElement("div",{className:h},r),e.createElement("div",{className:f},e.createElement("div",{className:E},e.createElement("div",{className:"\n                            ".concat(E," \n                            ").concat(N,"\n                            ").concat("md"==i&&p,"\n                        ")},c),e.createElement(z,null)),e.createElement("div",{className:"\n                        ".concat(b,"\n                        ").concat("md"==i&&g,"\n                    ")},a)))))}function z(){return e.createElement("div",{"data-pointer":"true",className:w},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",viewBox:"0 0 24 24"},e.createElement("path",{fillRule:"evenodd",d:"M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z",clipRule:"evenodd"})))}k.List=function(t){var a=t.children;return e.createElement("div",{className:C},a)};var x="h3kfd8c",L="l1et872q";function y(t){var a=t.children;return e.createElement("ol",{className:x},a)}y.Item=function(t){var a=t.children;return e.createElement("li",{className:L},a)};var T="h14vj3ri",j="t1l6tz9b",R="thzxr0l",B="t1g1altt";function I(t){var a=t.children;return e.createElement("table",{className:T},a)}I.Th=function(t){var a=t.children;return e.createElement("th",{className:j},a)},I.Tr=function(t){var a=t.children;return e.createElement("tr",{className:R},a)},I.Td=function(t){var a=t.children;return e.createElement("td",{className:B},a)};var q="hh8vcxa",S="b2p5907",V="coeb6fw",W="h196u2m6",_="i1hlflsk",G="hownbu8",H="cuwerl2",M="hlivi01";function P(s){var m=s.children,o=s.items,u=s.tabIndex,d=t(!1),v=r(d,2),h=v[0],f=v[1],E=t(!1),N=r(E,2),p=N[0],b=N[1],g=a(null),w=t(o[u||0]||""),C=r(w,2),k=C[0],z=C[1],x=function(){if(g.current){var e=g.current,t=e.scrollLeft,a=e.scrollWidth,n=e.clientWidth;f(t>0),b(t<a-n)}};n((function(){return x(),window.addEventListener("resize",x),function(){return window.removeEventListener("resize",x)}}),[]);var L=function(e){if(g.current){var t="left"===e?-200:200;g.current.scrollBy({left:t,behavior:"smooth"})}};return e.createElement(c.Root,{asChild:!0,value:k,onValueChange:z},e.createElement("div",{className:q},e.createElement("div",{className:S},h&&e.createElement("button",{onClick:function(){return L("left")},className:W},e.createElement(l,{className:_})),e.createElement("div",{ref:g,onScroll:x,className:G},e.createElement("div",{className:H},e.createElement(c.List,null,o.map((function(t,a){return e.createElement(U,{key:a,value:t},t)}))))),p&&e.createElement("button",{onClick:function(){return L("right")},className:W},e.createElement(i,{className:_}))),e.createElement("div",{className:V},m)))}function U(t){var a=t.children,n=t.value;return e.createElement(c.Trigger,{asChild:!0,value:n},e.createElement("button",{className:"".concat(M)},a))}P.Content=function(t){var a=t.children,n=t.value;return e.createElement(c.Content,{asChild:!0,value:n},a)};var Z="h1bta36o",A="uxs4bf1",D="ifn7ecb",F="i441kmn";function J(t){var a=t.children,n=t.value,r=t.onChange;return e.createElement(c.Root,{asChild:!0,value:n,onValueChange:r},e.createElement("nav",{className:Z},e.createElement(c.List,{asChild:!0},e.createElement("ul",{className:A},a))))}J.Item=function(t){var a=t.children,n=t.value,r=t.href;return e.createElement(c.Trigger,{asChild:!0,value:n},e.createElement("li",{className:D},e.createElement("a",{href:r,className:"".concat(F)},a)))};export{k as G,y as S,I as T,J as U,P as a};
+//# sourceMappingURL=UnderlineNav-8Ro4ycic.js.map

package/dist/UnderlineNav-8Ro4ycic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnderlineNav-8Ro4ycic.js","sources":["../src/writer/GuideCard/GuideCard.styles.tsx","../src/writer/GuideCard/GuideCard.tsx","../src/writer/Steps/Steps.styles.tsx","../src/writer/Steps/Steps.tsx","../src/writer/Table/Table.styles.tsx","../src/writer/Table/Table.tsx","../src/writer/Tabs/Tabs.styles.tsx","../src/writer/Tabs/Tabs.tsx","../src/writer/UnderlineNav/UnderlineNav.styles.tsx","../src/writer/UnderlineNav/UnderlineNav.tsx"],"sourcesContent":["import {css} from \"@linaria/core\";\n\nexport const $guide = {\n    host: css`\n    `,\n    host$$secondary: css`\n        //flex-grow: 1;\n        //width: 100%;\n        display: flex;\n        position: relative;\n        overflow: hidden;\n        border: .5px solid #ececf1;\n        background: linear-gradient(238deg, rgba(247, 247, 248, .5) 0%, rgba(247, 247, 248, 1) 100%);\n        border-radius: 8px;\n        padding: 16px 20px 20px;\n        z-index: 0;\n        transition: box-shadow .2s ease-in-out, background-image .2s ease;\n\n        &:hover {\n            background: linear-gradient(238deg, rgba(255, 255, 255, .5) 0%, rgba(250, 250, 250, 1) 100%);\n        }\n    `,\n    host$$secondary$$md: css`\n        padding: 21px 25px 25px;\n    `,\n    link: css`\n        width: 100%;\n        height: 100%;\n    `,\n    item: css`\n        border-radius: 8px;\n        display: flex;\n\n        align-items: flex-start;\n        cursor: pointer;\n        transition: opacity .15s;\n\n        &:hover {\n            [data-pointer=\"true\"] {\n                opacity: 1;\n                transform: translate(0);\n            }\n        }\n    `,\n    item$$secondary: css`\n        width: 100%;\n        height: 100%;\n    `,\n    icon: css`\n        line-height: 0px;\n        font-size: 24px;\n        border-radius: 8px;\n        width: 48px;\n        height: 48px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        color: #353740;\n        border: 1px solid #ececf1;\n        background: linear-gradient(238deg, rgba(255, 255, 255, .5) 0%, rgba(250, 250, 250, 1) 100%);\n        transition: background .2s ease;\n        box-sizing: border-box;\n        flex-shrink: 0;\n    `,\n    right: css`\n        padding-left: 16px;\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n    `,\n    title: css`\n        display: flex;\n        color: #202123;\n        font-weight: 400;\n        align-items: center;\n        transition: color .15s;\n    `,\n    titleBody: css`\n        font-size: 16px;\n        line-height: 20px;\n    `,\n    titleBody$$md: css`\n        font-size: 18px;\n    `,\n    body: css`\n        font-weight: 400;\n        font-size: 14px;\n        line-height: 20px;\n\n        color: #6e6e80;\n        white-space: normal;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    `,\n    body$$md: css`\n        font-size: 16px;\n    `,\n    pointer: css`\n        opacity: 0;\n        transform: translate(-4px);\n        display: flex;\n        justify-content: center;\n        transition: opacity .15s ease-in-out, transform .15s ease-in-out;\n    `\n}\n\n\nexport const $list = {\n    host: css`\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        justify-content: center;\n        gap: 30px;\n    `\n}","import React from \"react\"\n\nimport {$guide, $list} from \"./GuideCard.styles\";\n\nexport interface GuideCardProps {\n    children: React.ReactNode;\n    href: string\n    title: string;\n    icon?: React.ReactNode;\n    kind?: \"secondary\"\n    size?: \"sm\" | \"md\"\n}\n\nexport function GuideCard({\n                              children,\n                              href,\n                              icon,\n                              title,\n                              kind,\n                              size,\n\n                          }: GuideCardProps) {\n    return <div className={`\n        ${$guide.host}\n        ${kind === \"secondary\" && $guide.host$$secondary}\n        ${kind === \"secondary\" && size == \"md\" && $guide.host$$secondary$$md}\n    `}>\n        <a className={$guide.link} href={href}>\n            <div className={`\n                ${$guide.item}\n                ${kind === \"secondary\" && $guide.item$$secondary}\n            `}>\n                {icon && <div className={$guide.icon}>\n                    {icon}\n                </div>}\n                <div className={$guide.right}>\n                    <div className={$guide.title}>\n                        <div className={`\n                            ${$guide.title} \n                            ${$guide.titleBody}\n                            ${size == \"md\" && $guide.titleBody$$md}\n                        `}>\n                            {title}\n                        </div>\n                        <$Pointer/>\n                    </div>\n                    <div className={`\n                        ${$guide.body}\n                        ${size == \"md\" && $guide.body$$md}\n                    `}>\n                        {children}\n                    </div>\n                </div>\n            </div>\n        </a>\n    </div>\n}\n\nGuideCard.List = function GuideCardList({children}: { children: React.ReactNode }) {\n    return <div className={$list.host}>\n        {children}\n    </div>\n}\n\nfunction $Pointer() {\n    return <div data-pointer=\"true\" className={$guide.pointer}>\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width={24}\n            height={24}\n            fill=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n        >\n            <path\n                fillRule=\"evenodd\"\n                d=\"M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    </div>\n}","import {css} from \"@linaria/core\";\n\nexport const $steps = {\n    host: css`\n        padding-left: 0;\n        list-style: none;\n        counter-reset: ordered-listitem;\n\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n    `,\n    li: css`\n        padding-left: 32px;\n        position: relative;\n        line-height: 1.5;\n\n        &::after {\n            position: absolute;\n            top: 0;\n            left: 0;\n            counter-increment: ordered-listitem;\n            content: counter(ordered-listitem);\n\n            background: #ececf1;\n            color: #353740;\n            font-size: 12px;\n            line-height: 24px;\n            font-weight: 500;\n            text-align: center;\n            height: 24px;\n            width: 24px;\n            border-radius: 12px;\n        }\n    `,\n}","import React from \"react\"\n\nimport {$steps} from \"./Steps.styles\";\n\nexport interface StepsProps {\n    children: React.ReactNode;\n}\n\nexport function Steps({children}: StepsProps) {\n    return <ol className={$steps.host}>\n        {children}\n    </ol>\n\n}\n\nexport interface StepsItemProps {\n    children: React.ReactNode;\n}\n\nSteps.Item = function StepsItem({children}: StepsItemProps) {\n    return <li className={$steps.li}>\n        {children}\n    </li>\n}","import {css} from \"@linaria/core\";\n\nconst colors = {\n    primary: \"#D1D5DB\"\n}\n\nexport const $table = {\n    host: css`\n        display: block;\n        overflow-x: scroll;\n\n        border-collapse: collapse;\n        border-radius: 3px;\n    `,\n    th: css`\n        padding: 0.5rem 1rem;\n        margin: 0;\n\n        font-weight: 600;\n        border-width: 1px;\n        border-color: ${colors.primary};\n        background: rgba(234, 238, 242, 0.5);\n    `,\n    tr: css`\n        padding: 0;\n        margin: 0;\n        border-top-width: 1px;\n        border-color: ${colors.primary};\n    `,\n    td: css`\n        padding: 0.5rem 1rem;\n        margin: 0;\n\n        border-width: 1px;\n        border-color: ${colors.primary};\n    `\n}\n\n\n","import React from \"react\"\n\nimport {$table} from \"./Table.styles\";\n\nexport interface TableProps {\n    children: React.ReactNode;\n}\n\nexport function Table({children}: TableProps) {\n    return <table className={$table.host}>\n        {children}\n    </table>\n}\n\nexport interface TableThProps {\n    children: React.ReactNode;\n}\n\nTable.Th = function TableTh({children}: TableThProps) {\n    return <th className={$table.th}>\n        {children}\n    </th>\n}\n\nexport interface TableTrProps {\n    children: React.ReactNode;\n}\n\nTable.Tr = function TableTr({children}: TableTrProps) {\n    return <tr className={$table.tr}>\n        {children}\n    </tr>\n\n}\n\nexport interface TableTdProps {\n    children: React.ReactNode;\n}\n\nTable.Td = function TableTd({children}: TableTdProps) {\n    return <td className={$table.td}>\n        {children}\n    </td>\n\n}","import {css} from \"@linaria/core\";\n\nexport const $sample = {\n    host: css`\n        position: relative;\n        max-width: 100%;\n    `,\n    buttons: css`\n        display: flex;\n        align-items: center;\n    `,\n    content: css`\n        margin-top: 16px;\n    `\n}\n\nexport const $arrow = {\n    host: css`\n        padding: 8px;\n        background-color: #ffffff;\n        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n    `,\n    icon: css`\n        width: 16px;\n        height: 16px;\n    `\n}\n\nexport const $scroller = {\n    host: css`\n        overflow-x: auto;\n        flex-grow: 1;\n    `,\n    container: css`\n        display: inline-flex;\n        gap: 4px;\n\n        border-radius: 8px;\n        background-color: #F3F4F6;\n        \n        padding: 4px;\n        margin-left: 4px;\n    `\n}\n\nexport const $button = {\n    host: css`\n        padding: 0.5rem 1rem;\n\n        border-radius: 0.375rem;\n        font-size: 0.875rem;\n        line-height: 1.25rem;\n        font-weight: 500;\n        white-space: nowrap;\n\n        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 300ms;\n\n        color: #6B7280;\n\n        &:hover {\n            color: #111827;\n        }\n\n        &[data-state=\"active\"] {\n            color: #111827;\n            background-color: #ffffff;\n            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n        }\n    `,\n    $$active: css`\n        color: #111827;\n        background-color: #ffffff;\n        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n    `\n}","import React, {useState, useRef, useEffect} from 'react'\nimport * as RadixTabs from \"@radix-ui/react-tabs\"\nimport {ChevronLeft, ChevronRight} from \"lucide-react\"\n\nimport {\n    $sample,\n    $arrow,\n    $scroller,\n    $button\n} from \"./Tabs.styles\";\n\nexport interface TabsProps {\n    children: React.ReactNode;\n    items: string[];\n    tabIndex?: number;\n}\n\nexport function Tabs({children, items, tabIndex}: TabsProps) {\n    const [showLeftArrow, setShowLeftArrow] = useState(false)\n    const [showRightArrow, setShowRightArrow] = useState(false)\n    const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n    const [value, setActiveTab] = useState(items[tabIndex || 0] || \"\")\n\n    const handleScroll = () => {\n        if (scrollContainerRef.current) {\n            const {scrollLeft, scrollWidth, clientWidth} = scrollContainerRef.current\n            setShowLeftArrow(scrollLeft > 0)\n            setShowRightArrow(scrollLeft < scrollWidth - clientWidth)\n        }\n    }\n\n    useEffect(() => {\n        handleScroll()\n        window.addEventListener('resize', handleScroll)\n        return () => window.removeEventListener('resize', handleScroll)\n    }, [])\n\n    const scroll = (direction: 'left' | 'right') => {\n        if (scrollContainerRef.current) {\n            const scrollAmount = direction === 'left' ? -200 : 200\n            scrollContainerRef.current.scrollBy({left: scrollAmount, behavior: 'smooth'})\n        }\n    }\n\n    return (\n        <RadixTabs.Root asChild value={value} onValueChange={setActiveTab}>\n            <div className={$sample.host}>\n                <div className={$sample.buttons}>\n                    {showLeftArrow && (\n                        <button\n                            onClick={() => scroll('left')}\n                            className={$arrow.host}\n                        >\n                            <ChevronLeft className={$arrow.icon}/>\n                        </button>\n                    )}\n\n                    <div\n                        ref={scrollContainerRef}\n                        onScroll={handleScroll}\n                        className={$scroller.host}\n                    >\n                        <div className={$scroller.container}>\n                            <RadixTabs.List>\n                                {items.map((item, index) => <TabsItem key={index} value={item}>\n                                        {item}\n                                    </TabsItem>\n                                )}\n                            </RadixTabs.List>\n                        </div>\n                    </div>\n\n                    {showRightArrow && (\n                        <button\n                            onClick={() => scroll('right')}\n                            className={$arrow.host}\n                        >\n                            <ChevronRight className={$arrow.icon}/>\n                        </button>\n                    )}\n                </div>\n\n                <div className={$sample.content}>\n                    {children}\n                </div>\n            </div>\n        </RadixTabs.Root>\n    )\n}\n\nfunction TabsItem({children, value}) {\n    return <RadixTabs.Trigger asChild value={value}>\n        <button className={`${$button.host}`}>\n            {children}\n        </button>\n    </RadixTabs.Trigger>\n}\n\nTabs.Content = function TabsContent({children, value}) {\n    return <RadixTabs.Content asChild value={value}>\n        {children}\n    </RadixTabs.Content>\n}","import {css} from \"@linaria/core\"\n\nexport const $nav = {\n    host: css`\n        align-items: center;\n        display: flex;\n\n        height: 42px;\n\n        background-color: #fff;\n        border-bottom: 1px solid hsl(212, 15%, calc(96% - 12% * 1));\n\n        z-index: 99;\n    `,\n    ul: css`\n        display: flex;\n        gap: 10px;\n\n        height: 100%;\n        color: hsl(212, 15%, calc(96% - 12% * 4));\n\n        list-style: none;\n        padding: 0;\n        white-space: nowrap;\n    `,\n    item: css`\n        height: 100%;\n\n        &[data-state=\"active\"] { // TODO: in the future it should not be possible\n            a {\n                border-bottom-color: rgb(112, 81, 212);\n            }\n        }\n    `,\n    itemLink: css`\n        display: inline-flex;\n        border-bottom: 3px solid transparent;\n        text-decoration: none;\n\n        height: 100%;\n        padding: 10px;\n    `,\n    itemLink$$active: css`\n    `\n}","import React from \"react\"\nimport * as RadixTabs from \"@radix-ui/react-tabs\";\n\nimport {$nav} from \"./UnderlineNav.styles\"\n\nexport interface TabsProps {\n    children: React.ReactNode\n    value: string\n    onChange: (value: string) => void\n}\n\nexport function UnderlineNav({children, value, onChange}: TabsProps) {\n    return <RadixTabs.Root asChild value={value} onValueChange={onChange}>\n        <nav className={$nav.host}>\n            <RadixTabs.List asChild>\n                <ul className={$nav.ul}>\n                    {children}\n                </ul>\n            </RadixTabs.List>\n        </nav>\n    </RadixTabs.Root>\n}\n\nexport interface UnderlineNavItemProps {\n    children: React.ReactNode\n    value: string\n    href?: string\n}\n\nUnderlineNav.Item = function UnderlineNavItem({children, value, href}: UnderlineNavItemProps) {\n    return <RadixTabs.Trigger asChild value={value}>\n        <li className={$nav.item}>\n            <a href={href} className={`${$nav.itemLink}`}>\n                {children}\n            </a>\n        </li>\n    </RadixTabs.Trigger>\n}"],"names":["$guide","$list","GuideCard","_ref","children","href","icon","title","kind","size","React","createElement","className","concat","$Pointer","xmlns","width","height","fill","viewBox","fillRule","d","clipRule","List","_ref2","$steps","Steps","Item","$table","Table","Th","Tr","_ref3","Td","_ref4","$sample","$arrow","$scroller","$button","Tabs","items","tabIndex","_useState","useState","_useState2","_slicedToArray","showLeftArrow","setShowLeftArrow","_useState3","_useState4","showRightArrow","setShowRightArrow","scrollContainerRef","useRef","_useState5","_useState6","value","setActiveTab","handleScroll","current","_scrollContainerRef$c","scrollLeft","scrollWidth","clientWidth","useEffect","window","addEventListener","removeEventListener","scroll","direction","scrollAmount","scrollBy","left","behavior","RadixTabs","Root","asChild","onValueChange","onClick","ChevronLeft","ref","onScroll","map","item","index","TabsItem","key","ChevronRight","Trigger","Content","$nav","UnderlineNav","onChange"],"mappings":"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"}

package/dist/UnderlineNav-ATK8E49w.js

@@ -0,0 +1,2 @@
+import e,{useState as t,useRef as a,useEffect as n}from"react";import{_ as r}from"./_rollupPluginBabelHelpers-BEBrONrp.js";import*as c from"@radix-ui/react-tabs";import{ChevronLeft as l,ChevronRight as i}from"lucide-react";var s="hh34a3o",m="hilz89t",o="h1rnhmpa",u="lajci2p",d="iezrce7",v="i1vhi0b8",h="i1m2lps9",f="r1new93p",E="t1u3d3ty",N="t4udf3g",p="t1icpluq",b="badgd67",g="bcjznmh",w="p13ekkiz",C="h15733ml";function k(t){var a=t.children,n=t.href,r=t.icon,c=t.title,l=t.kind,i=t.size;return e.createElement("div",{className:"\n        ".concat(s,"\n        ").concat("secondary"===l&&m,"\n        ").concat("secondary"===l&&"md"==i&&o,"\n    ")},e.createElement("a",{className:u,href:n},e.createElement("div",{className:"\n                ".concat(d,"\n                ").concat("secondary"===l&&v,"\n            ")},r&&e.createElement("div",{className:h},r),e.createElement("div",{className:f},e.createElement("div",{className:E},e.createElement("div",{className:"\n                            ".concat(E," \n                            ").concat(N,"\n                            ").concat("md"==i&&p,"\n                        ")},c),e.createElement(z,null)),e.createElement("div",{className:"\n                        ".concat(b,"\n                        ").concat("md"==i&&g,"\n                    ")},a)))))}function z(){return e.createElement("div",{"data-pointer":"true",className:w},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",viewBox:"0 0 24 24"},e.createElement("path",{fillRule:"evenodd",d:"M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z",clipRule:"evenodd"})))}k.List=function(t){var a=t.children;return e.createElement("div",{className:C},a)};var x="h3kfd8c",L="l1et872q";function y(t){var a=t.children;return e.createElement("ol",{className:x},a)}y.Item=function(t){var a=t.children;return e.createElement("li",{className:L},a)};var T="h14vj3ri",j="t1l6tz9b",R="thzxr0l",B="t1g1altt";function I(t){var a=t.children;return e.createElement("table",{className:T},a)}I.Th=function(t){var a=t.children;return e.createElement("th",{className:j},a)},I.Tr=function(t){var a=t.children;return e.createElement("tr",{className:R},a)},I.Td=function(t){var a=t.children;return e.createElement("td",{className:B},a)};var q="hh8vcxa",S="b2p5907",V="coeb6fw",W="h196u2m6",_="i1hlflsk",G="hownbu8",H="cuwerl2",M="hlivi01";function P(s){var m=s.children,o=s.items,u=s.tabIndex,d=t(!1),v=r(d,2),h=v[0],f=v[1],E=t(!1),N=r(E,2),p=N[0],b=N[1],g=a(null),w=t(o[u||0]||""),C=r(w,2),k=C[0],z=C[1],x=function(){if(g.current){var e=g.current,t=e.scrollLeft,a=e.scrollWidth,n=e.clientWidth;f(t>0),b(t<a-n)}};n((function(){return x(),window.addEventListener("resize",x),function(){return window.removeEventListener("resize",x)}}),[]);var L=function(e){if(g.current){var t="left"===e?-200:200;g.current.scrollBy({left:t,behavior:"smooth"})}};return e.createElement(c.Root,{asChild:!0,value:k,onValueChange:z},e.createElement("div",{className:q},e.createElement("div",{className:S},h&&e.createElement("button",{onClick:function(){return L("left")},className:W},e.createElement(l,{className:_})),e.createElement("div",{ref:g,onScroll:x,className:G},e.createElement("div",{className:H},e.createElement(c.List,null,o.map((function(t,a){return e.createElement(U,{key:a,value:t},t)}))))),p&&e.createElement("button",{onClick:function(){return L("right")},className:W},e.createElement(i,{className:_}))),e.createElement("div",{className:V},m)))}function U(t){var a=t.children,n=t.value;return e.createElement(c.Trigger,{asChild:!0,value:n},e.createElement("button",{className:"".concat(M)},a))}P.Content=function(t){var a=t.children,n=t.value;return e.createElement(c.Content,{asChild:!0,value:n},a)};var Z="h1bta36o",A="uxs4bf1",D="ifn7ecb",F="i441kmn";function J(t){var a=t.children,n=t.value,r=t.onChange;return e.createElement(c.Root,{asChild:!0,value:n,onValueChange:r},e.createElement("nav",{className:Z},e.createElement(c.List,{asChild:!0},e.createElement("ul",{className:A},a))))}J.Item=function(t){var a=t.children,n=t.value,r=t.href;return e.createElement(c.Trigger,{asChild:!0,value:n},e.createElement("li",{className:D},e.createElement("a",{href:r,className:"".concat(F)},a)))};export{k as G,y as S,I as T,J as U,P as a};
+//# sourceMappingURL=UnderlineNav-ATK8E49w.js.map

package/dist/UnderlineNav-ATK8E49w.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnderlineNav-ATK8E49w.js","sources":["../src/writer/GuideCard/GuideCard.styles.tsx","../src/writer/GuideCard/GuideCard.tsx","../src/writer/Steps/Steps.styles.tsx","../src/writer/Steps/Steps.tsx","../src/writer/Table/Table.styles.tsx","../src/writer/Table/Table.tsx","../src/writer/Tabs/Tabs.styles.tsx","../src/writer/Tabs/Tabs.tsx","../src/writer/UnderlineNav/UnderlineNav.styles.tsx","../src/writer/UnderlineNav/UnderlineNav.tsx"],"sourcesContent":["import {css} from \"@linaria/core\";\n\nexport const $guide = {\n    host: css`\n    `,\n    host$$secondary: css`\n        //flex-grow: 1;\n        //width: 100%;\n        display: flex;\n        position: relative;\n        overflow: hidden;\n        border: .5px solid #ececf1;\n        background: linear-gradient(238deg, rgba(247, 247, 248, .5) 0%, rgba(247, 247, 248, 1) 100%);\n        border-radius: 8px;\n        padding: 16px 20px 20px;\n        z-index: 0;\n        transition: box-shadow .2s ease-in-out, background-image .2s ease;\n\n        &:hover {\n            background: linear-gradient(238deg, rgba(255, 255, 255, .5) 0%, rgba(250, 250, 250, 1) 100%);\n        }\n    `,\n    host$$secondary$$md: css`\n        padding: 21px 25px 25px;\n    `,\n    link: css`\n        width: 100%;\n        height: 100%;\n    `,\n    item: css`\n        border-radius: 8px;\n        display: flex;\n\n        align-items: flex-start;\n        cursor: pointer;\n        transition: opacity .15s;\n\n        &:hover {\n            [data-pointer=\"true\"] {\n                opacity: 1;\n                transform: translate(0);\n            }\n        }\n    `,\n    item$$secondary: css`\n        width: 100%;\n        height: 100%;\n    `,\n    icon: css`\n        line-height: 0px;\n        font-size: 24px;\n        border-radius: 8px;\n        width: 48px;\n        height: 48px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        color: #353740;\n        border: 1px solid #ececf1;\n        background: linear-gradient(238deg, rgba(255, 255, 255, .5) 0%, rgba(250, 250, 250, 1) 100%);\n        transition: background .2s ease;\n        box-sizing: border-box;\n        flex-shrink: 0;\n    `,\n    right: css`\n        padding-left: 16px;\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n    `,\n    title: css`\n        display: flex;\n        color: #202123;\n        font-weight: 400;\n        align-items: center;\n        transition: color .15s;\n    `,\n    titleBody: css`\n        font-size: 16px;\n        line-height: 20px;\n    `,\n    titleBody$$md: css`\n        font-size: 18px;\n    `,\n    body: css`\n        font-weight: 400;\n        font-size: 14px;\n        line-height: 20px;\n\n        color: #6e6e80;\n        white-space: normal;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    `,\n    body$$md: css`\n        font-size: 16px;\n    `,\n    pointer: css`\n        opacity: 0;\n        transform: translate(-4px);\n        display: flex;\n        justify-content: center;\n        transition: opacity .15s ease-in-out, transform .15s ease-in-out;\n    `\n}\n\n\nexport const $list = {\n    host: css`\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        justify-content: center;\n        gap: 30px;\n    `\n}","import React from \"react\"\n\nimport {$guide, $list} from \"./GuideCard.styles\";\n\nexport interface GuideCardProps {\n    children: React.ReactNode;\n    href: string\n    title: string;\n    icon?: React.ReactNode;\n    kind?: \"secondary\"\n    size?: \"sm\" | \"md\"\n}\n\nexport function GuideCard({\n                              children,\n                              href,\n                              icon,\n                              title,\n                              kind,\n                              size,\n\n                          }: GuideCardProps) {\n    return <div className={`\n        ${$guide.host}\n        ${kind === \"secondary\" && $guide.host$$secondary}\n        ${kind === \"secondary\" && size == \"md\" && $guide.host$$secondary$$md}\n    `}>\n        <a className={$guide.link} href={href}>\n            <div className={`\n                ${$guide.item}\n                ${kind === \"secondary\" && $guide.item$$secondary}\n            `}>\n                {icon && <div className={$guide.icon}>\n                    {icon}\n                </div>}\n                <div className={$guide.right}>\n                    <div className={$guide.title}>\n                        <div className={`\n                            ${$guide.title} \n                            ${$guide.titleBody}\n                            ${size == \"md\" && $guide.titleBody$$md}\n                        `}>\n                            {title}\n                        </div>\n                        <$Pointer/>\n                    </div>\n                    <div className={`\n                        ${$guide.body}\n                        ${size == \"md\" && $guide.body$$md}\n                    `}>\n                        {children}\n                    </div>\n                </div>\n            </div>\n        </a>\n    </div>\n}\n\nGuideCard.List = function GuideCardList({children}: { children: React.ReactNode }) {\n    return <div className={$list.host}>\n        {children}\n    </div>\n}\n\nfunction $Pointer() {\n    return <div data-pointer=\"true\" className={$guide.pointer}>\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width={24}\n            height={24}\n            fill=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n        >\n            <path\n                fillRule=\"evenodd\"\n                d=\"M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z\"\n                clipRule=\"evenodd\"\n            />\n        </svg>\n    </div>\n}","import {css} from \"@linaria/core\";\n\nexport const $steps = {\n    host: css`\n        padding-left: 0;\n        list-style: none;\n        counter-reset: ordered-listitem;\n\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n    `,\n    li: css`\n        padding-left: 32px;\n        position: relative;\n        line-height: 1.5;\n\n        &::after {\n            position: absolute;\n            top: 0;\n            left: 0;\n            counter-increment: ordered-listitem;\n            content: counter(ordered-listitem);\n\n            background: #ececf1;\n            color: #353740;\n            font-size: 12px;\n            line-height: 24px;\n            font-weight: 500;\n            text-align: center;\n            height: 24px;\n            width: 24px;\n            border-radius: 12px;\n        }\n    `,\n}","import React from \"react\"\n\nimport {$steps} from \"./Steps.styles\";\n\nexport interface StepsProps {\n    children: React.ReactNode;\n}\n\nexport function Steps({children}: StepsProps) {\n    return <ol className={$steps.host}>\n        {children}\n    </ol>\n\n}\n\nexport interface StepsItemProps {\n    children: React.ReactNode;\n}\n\nSteps.Item = function StepsItem({children}: StepsItemProps) {\n    return <li className={$steps.li}>\n        {children}\n    </li>\n}","import {css} from \"@linaria/core\";\n\nconst colors = {\n    primary: \"#D1D5DB\"\n}\n\nexport const $table = {\n    host: css`\n        display: block;\n        overflow-x: scroll;\n\n        border-collapse: collapse;\n        border-radius: 3px;\n    `,\n    th: css`\n        padding: 0.5rem 1rem;\n        margin: 0;\n\n        font-weight: 600;\n        border-width: 1px;\n        border-color: ${colors.primary};\n        background: rgba(234, 238, 242, 0.5);\n    `,\n    tr: css`\n        padding: 0;\n        margin: 0;\n        border-top-width: 1px;\n        border-color: ${colors.primary};\n    `,\n    td: css`\n        padding: 0.5rem 1rem;\n        margin: 0;\n\n        border-width: 1px;\n        border-color: ${colors.primary};\n    `\n}\n\n\n","import React from \"react\"\n\nimport {$table} from \"./Table.styles\";\n\nexport interface TableProps {\n    children: React.ReactNode;\n}\n\nexport function Table({children}: TableProps) {\n    return <table className={$table.host}>\n        {children}\n    </table>\n}\n\nexport interface TableThProps {\n    children: React.ReactNode;\n}\n\nTable.Th = function TableTh({children}: TableThProps) {\n    return <th className={$table.th}>\n        {children}\n    </th>\n}\n\nexport interface TableTrProps {\n    children: React.ReactNode;\n}\n\nTable.Tr = function TableTr({children}: TableTrProps) {\n    return <tr className={$table.tr}>\n        {children}\n    </tr>\n\n}\n\nexport interface TableTdProps {\n    children: React.ReactNode;\n}\n\nTable.Td = function TableTd({children}: TableTdProps) {\n    return <td className={$table.td}>\n        {children}\n    </td>\n\n}","import {css} from \"@linaria/core\";\n\nexport const $sample = {\n    host: css`\n        position: relative;\n        max-width: 100%;\n    `,\n    buttons: css`\n        display: flex;\n        align-items: center;\n    `,\n    content: css`\n        margin-top: 16px;\n    `\n}\n\nexport const $arrow = {\n    host: css`\n        padding: 8px;\n        background-color: #ffffff;\n        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n    `,\n    icon: css`\n        width: 16px;\n        height: 16px;\n    `\n}\n\nexport const $scroller = {\n    host: css`\n        overflow-x: auto;\n        flex-grow: 1;\n    `,\n    container: css`\n        display: inline-flex;\n        gap: 4px;\n\n        border-radius: 8px;\n        background-color: #F3F4F6;\n        \n        padding: 4px;\n        margin-left: 4px;\n    `\n}\n\nexport const $button = {\n    host: css`\n        padding: 0.5rem 1rem;\n\n        border-radius: 0.375rem;\n        font-size: 0.875rem;\n        line-height: 1.25rem;\n        font-weight: 500;\n        white-space: nowrap;\n\n        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        transition-duration: 300ms;\n\n        color: #6B7280;\n\n        &:hover {\n            color: #111827;\n        }\n\n        &[data-state=\"active\"] {\n            color: #111827;\n            background-color: #ffffff;\n            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n        }\n    `,\n    $$active: css`\n        color: #111827;\n        background-color: #ffffff;\n        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n    `\n}","import React, {useState, useRef, useEffect} from 'react'\nimport * as RadixTabs from \"@radix-ui/react-tabs\"\nimport {ChevronLeft, ChevronRight} from \"lucide-react\"\n\nimport {\n    $sample,\n    $arrow,\n    $scroller,\n    $button\n} from \"./Tabs.styles\";\n\nexport interface TabsProps {\n    children: React.ReactNode;\n    items: string[];\n    tabIndex?: number;\n}\n\nexport function Tabs({children, items, tabIndex}: TabsProps) {\n    const [showLeftArrow, setShowLeftArrow] = useState(false)\n    const [showRightArrow, setShowRightArrow] = useState(false)\n    const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n    const [value, setActiveTab] = useState(items[tabIndex || 0] || \"\")\n\n    const handleScroll = () => {\n        if (scrollContainerRef.current) {\n            const {scrollLeft, scrollWidth, clientWidth} = scrollContainerRef.current\n            setShowLeftArrow(scrollLeft > 0)\n            setShowRightArrow(scrollLeft < scrollWidth - clientWidth)\n        }\n    }\n\n    useEffect(() => {\n        handleScroll()\n        window.addEventListener('resize', handleScroll)\n        return () => window.removeEventListener('resize', handleScroll)\n    }, [])\n\n    const scroll = (direction: 'left' | 'right') => {\n        if (scrollContainerRef.current) {\n            const scrollAmount = direction === 'left' ? -200 : 200\n            scrollContainerRef.current.scrollBy({left: scrollAmount, behavior: 'smooth'})\n        }\n    }\n\n    return (\n        <RadixTabs.Root asChild value={value} onValueChange={setActiveTab}>\n            <div className={$sample.host}>\n                <div className={$sample.buttons}>\n                    {showLeftArrow && (\n                        <button\n                            onClick={() => scroll('left')}\n                            className={$arrow.host}\n                        >\n                            <ChevronLeft className={$arrow.icon}/>\n                        </button>\n                    )}\n\n                    <div\n                        ref={scrollContainerRef}\n                        onScroll={handleScroll}\n                        className={$scroller.host}\n                    >\n                        <div className={$scroller.container}>\n                            <RadixTabs.List>\n                                {items.map((item, index) => <TabsItem key={index} value={item}>\n                                        {item}\n                                    </TabsItem>\n                                )}\n                            </RadixTabs.List>\n                        </div>\n                    </div>\n\n                    {showRightArrow && (\n                        <button\n                            onClick={() => scroll('right')}\n                            className={$arrow.host}\n                        >\n                            <ChevronRight className={$arrow.icon}/>\n                        </button>\n                    )}\n                </div>\n\n                <div className={$sample.content}>\n                    {children}\n                </div>\n            </div>\n        </RadixTabs.Root>\n    )\n}\n\nfunction TabsItem({children, value}) {\n    return <RadixTabs.Trigger asChild value={value}>\n        <button className={`${$button.host}`}>\n            {children}\n        </button>\n    </RadixTabs.Trigger>\n}\n\nTabs.Content = function TabsContent({children, value}) {\n    return <RadixTabs.Content asChild value={value}>\n        {children}\n    </RadixTabs.Content>\n}","import {css} from \"@linaria/core\"\n\nexport const $nav = {\n    host: css`\n        align-items: center;\n        display: flex;\n\n        height: 42px;\n\n        background-color: #fff;\n        border-bottom: 1px solid hsl(212, 15%, calc(96% - 12% * 1));\n\n        z-index: 99;\n    `,\n    ul: css`\n        display: flex;\n        gap: 10px;\n\n        height: 100%;\n        color: hsl(212, 15%, calc(96% - 12% * 4));\n\n        list-style: none;\n        padding: 0;\n        white-space: nowrap;\n    `,\n    item: css`\n        height: 100%;\n\n        &[data-state=\"active\"] { // TODO: in the future it should not be possible\n            a {\n                border-bottom-color: rgb(112, 81, 212);\n            }\n        }\n    `,\n    itemLink: css`\n        display: inline-flex;\n        border-bottom: 3px solid transparent;\n        text-decoration: none;\n\n        height: 100%;\n        padding: 10px;\n    `,\n    itemLink$$active: css`\n    `\n}","import React from \"react\"\nimport * as RadixTabs from \"@radix-ui/react-tabs\";\n\nimport {$nav} from \"./UnderlineNav.styles\"\n\nexport interface TabsProps {\n    children: React.ReactNode\n    value: string\n    onChange: (value: string) => void\n}\n\nexport function UnderlineNav({children, value, onChange}: TabsProps) {\n    return <RadixTabs.Root asChild value={value} onValueChange={onChange}>\n        <nav className={$nav.host}>\n            <RadixTabs.List asChild>\n                <ul className={$nav.ul}>\n                    {children}\n                </ul>\n            </RadixTabs.List>\n        </nav>\n    </RadixTabs.Root>\n}\n\nexport interface UnderlineNavItemProps {\n    children: React.ReactNode\n    value: string\n    href?: string\n}\n\nUnderlineNav.Item = function UnderlineNavItem({children, value, href}: UnderlineNavItemProps) {\n    return <RadixTabs.Trigger asChild value={value}>\n        <li className={$nav.item}>\n            <a href={href} className={`${$nav.itemLink}`}>\n                {children}\n            </a>\n        </li>\n    </RadixTabs.Trigger>\n}"],"names":["$guide","$list","GuideCard","_ref","children","href","icon","title","kind","size","React","createElement","className","concat","$Pointer","xmlns","width","height","fill","viewBox","fillRule","d","clipRule","List","_ref2","$steps","Steps","Item","$table","Table","Th","Tr","_ref3","Td","_ref4","$sample","$arrow","$scroller","$button","Tabs","items","tabIndex","_useState","useState","_useState2","_slicedToArray","showLeftArrow","setShowLeftArrow","_useState3","_useState4","showRightArrow","setShowRightArrow","scrollContainerRef","useRef","_useState5","_useState6","value","setActiveTab","handleScroll","current","_scrollContainerRef$c","scrollLeft","scrollWidth","clientWidth","useEffect","window","addEventListener","removeEventListener","scroll","direction","scrollAmount","scrollBy","left","behavior","RadixTabs","Root","asChild","onValueChange","onClick","ChevronLeft","ref","onScroll","map","item","index","TabsItem","key","ChevronRight","Trigger","Content","$nav","UnderlineNav","onChange"],"mappings":"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"}

package/dist/UnderlineNav-B06C3N9f.js

@@ -0,0 +1,2 @@
+import e,{useState as t,useRef as a,useEffect as n}from"react";import{_ as r}from"./_rollupPluginBabelHelpers-BTuCV7fc.js";import*as c from"@radix-ui/react-tabs";import{ChevronLeft as l,ChevronRight as i}from"lucide-react";var s="hh34a3o",m="hilz89t",o="h1rnhmpa",u="lajci2p",d="iezrce7",v="i1vhi0b8",h="i1m2lps9",f="r1new93p",E="t1u3d3ty",N="t4udf3g",p="t1icpluq",b="badgd67",g="bcjznmh",w="p13ekkiz",C="h15733ml";function k(t){var a=t.children,n=t.href,r=t.icon,c=t.title,l=t.kind,i=t.size;return e.createElement("div",{className:"\n        ".concat(s,"\n        ").concat("secondary"===l&&m,"\n        ").concat("secondary"===l&&"md"==i&&o,"\n    ")},e.createElement("a",{className:u,href:n},e.createElement("div",{className:"\n                ".concat(d,"\n                ").concat("secondary"===l&&v,"\n            ")},r&&e.createElement("div",{className:h},r),e.createElement("div",{className:f},e.createElement("div",{className:E},e.createElement("div",{className:"\n                            ".concat(E," \n                            ").concat(N,"\n                            ").concat("md"==i&&p,"\n                        ")},c),e.createElement(z,null)),e.createElement("div",{className:"\n                        ".concat(b,"\n                        ").concat("md"==i&&g,"\n                    ")},a)))))}function z(){return e.createElement("div",{"data-pointer":"true",className:w},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",viewBox:"0 0 24 24"},e.createElement("path",{fillRule:"evenodd",d:"M9.293 7.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 0 1 0-1.414Z",clipRule:"evenodd"})))}k.List=function(t){var a=t.children;return e.createElement("div",{className:C},a)};var x="h3kfd8c",L="l1et872q";function y(t){var a=t.children;return e.createElement("ol",{className:x},a)}y.Item=function(t){var a=t.children;return e.createElement("li",{className:L},a)};var T="h14vj3ri",j="t1l6tz9b",R="thzxr0l",B="t1g1altt";function I(t){var a=t.children;return e.createElement("table",{className:T},a)}I.Th=function(t){var a=t.children;return e.createElement("th",{className:j},a)},I.Tr=function(t){var a=t.children;return e.createElement("tr",{className:R},a)},I.Td=function(t){var a=t.children;return e.createElement("td",{className:B},a)};var q="hh8vcxa",S="b2p5907",V="coeb6fw",W="h196u2m6",_="i1hlflsk",G="hownbu8",H="cuwerl2",M="hlivi01";function P(s){var m=s.children,o=s.items,u=s.tabIndex,d=t(!1),v=r(d,2),h=v[0],f=v[1],E=t(!1),N=r(E,2),p=N[0],b=N[1],g=a(null),w=t(o[u||0]||""),C=r(w,2),k=C[0],z=C[1],x=function(){if(g.current){var e=g.current,t=e.scrollLeft,a=e.scrollWidth,n=e.clientWidth;f(t>0),b(t<a-n)}};n((function(){return x(),window.addEventListener("resize",x),function(){return window.removeEventListener("resize",x)}}),[]);var L=function(e){if(g.current){var t="left"===e?-200:200;g.current.scrollBy({left:t,behavior:"smooth"})}};return e.createElement(c.Root,{asChild:!0,value:k,onValueChange:z},e.createElement("div",{className:q},e.createElement("div",{className:S},h&&e.createElement("button",{onClick:function(){return L("left")},className:W},e.createElement(l,{className:_})),e.createElement("div",{ref:g,onScroll:x,className:G},e.createElement("div",{className:H},e.createElement(c.List,null,o.map((function(t,a){return e.createElement(U,{key:a,value:t},t)}))))),p&&e.createElement("button",{onClick:function(){return L("right")},className:W},e.createElement(i,{className:_}))),e.createElement("div",{className:V},m)))}function U(t){var a=t.children,n=t.value;return e.createElement(c.Trigger,{asChild:!0,value:n},e.createElement("button",{className:"".concat(M)},a))}P.Content=function(t){var a=t.children,n=t.value;return e.createElement(c.Content,{asChild:!0,value:n},a)};var Z="h1bta36o",A="uxs4bf1",D="ifn7ecb",F="i441kmn";function J(t){var a=t.children,n=t.value,r=t.onChange;return e.createElement(c.Root,{asChild:!0,value:n,onValueChange:r},e.createElement("nav",{className:Z},e.createElement(c.List,{asChild:!0},e.createElement("ul",{className:A},a))))}J.Item=function(t){var a=t.children,n=t.value,r=t.href;return e.createElement(c.Trigger,{asChild:!0,value:n},e.createElement("li",{className:D},e.createElement("a",{href:r,className:"".concat(F)},a)))};export{k as G,y as S,I as T,J as U,P as a};
+//# sourceMappingURL=UnderlineNav-B06C3N9f.js.map