@xyd-js/components 0.1.0-xyd.8 → 0.1.0-xyd.94

package/dist/HomeView-O_lj2c2t.js

@@ -1,2 +0,0 @@
-import e from"react";function o(o){var n=o.header,t=o.body,m=o.footer;return e.createElement("div",{className:"XydComponents-Component-views-HomeView__HomeViewHost"},n,t,m)}o.Body=function(o){var n=o.children,t=o.kind;return e.createElement("div",{className:"\n        ".concat("XydComponents-Component-views-HomeView__HomeViewBodyHost","\n        ").concat("secondary"===t?"XydComponents-Component-views-HomeView__HomeViewBodyHostSecondary":"","\n    ")},e.createElement("div",{className:"XydComponents-Component-views-HomeView__HomeViewBodyContent"},n))};export{o as H};
-//# sourceMappingURL=HomeView-O_lj2c2t.js.map

package/dist/HomeView-O_lj2c2t.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HomeView-O_lj2c2t.js","sources":["../src/views/HomeView/HomeView.tsx","../src/views/HomeView/HomeView.styles.tsx"],"sourcesContent":["import React from \"react\"\nimport * as cn from \"./HomeView.styles\";\n\nexport interface HomeViewProps {\n    header: React.ReactNode\n    body: React.ReactNode\n    footer: React.ReactNode\n}\n\nexport function HomeView({header, body, footer}: HomeViewProps) {\n    return <div className={cn.HomeViewHost}>\n        {header}\n        {body}\n        {footer}\n    </div>\n}\n\nexport interface HomeViewBodyProps {\n    children: React.ReactNode\n    kind?: \"secondary\"\n}\n\nHomeView.Body = function HomeViewBody({children, kind}: HomeViewBodyProps) {\n    return <div className={`\n        ${cn.HomeViewBodyHost}\n        ${kind === \"secondary\" ? cn.HomeViewBodyHostSecondary : \"\"}\n    `}>\n        <div className={cn.HomeViewBodyContent}>\n            {children}\n        </div>\n    </div>\n}\n\n\n","import {css} from \"@linaria/core\";\n\nexport const HomeViewHost = css`\n    display: flex;\n    flex-direction: column;\n    min-height: 100vh;\n`;\n\nexport const HomeViewBodyHost = css`\n    background: radial-gradient(circle, hsl(0 0% 9% / .3) 1px, transparent 1px);\n    backdrop-filter: sepia(10%);\n    background-size: 30px 30px;\n    padding: 60px;\n    flex: 1;\n`;\n\nexport const HomeViewBodyHostSecondary = css`\n    background: repeating-linear-gradient(to right, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px), repeating-linear-gradient(to bottom, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px);\n`;\n\nexport const HomeViewBodyContent = css`\n    width: 1200px;\n    margin: 0 auto;\n    display: flex;\n    flex-direction: column;\n    gap: 80px;\n\n    @media (max-width: 1200px) {\n        width: 100%;\n        padding: 0 20px;\n    }\n\n    @media (max-width: 768px) {\n        width: 100%;\n        padding: 0 10px;\n    }\n`; "],"names":["HomeView","_ref","header","body","footer","React","createElement","className","Body","_ref2","children","kind","concat"],"mappings":"qBASM,SAAUA,EAAQC,GAAsC,IAApCC,EAAMD,EAANC,OAAQC,EAAIF,EAAJE,KAAMC,EAAMH,EAANG,OACpC,OAAOC,EAAKC,cAAA,MAAA,CAAAC,UCJf,wDDKQL,EACAC,EACAC,EAET,CAOAJ,EAASQ,KAAO,SAAqBC,GAAoC,IAAlCC,EAAQD,EAARC,SAAUC,EAAIF,EAAJE,KAC7C,OAAON,EAAAC,cAAA,MAAA,CAAKC,uBAASK,OCTxB,2DDU4BA,cAAAA,OACV,cAATD,ECPT,oEDO+D,GAAE,WAE1DN,EAAKC,cAAA,MAAA,CAAAC,UCSZ,+DDRYG,GAGb"}

package/dist/HomeView-_Nu2RcOM.js

@@ -1,2 +0,0 @@
-import e from"react";function o(o){var n=o.header,t=o.body,m=o.footer;return e.createElement("div",{className:"XydComponents-Component-views-HomeView__HomeViewHost"},n,t,m)}o.Body=function(o){var n=o.children,t=o.kind;return e.createElement("div",{className:"\n        ".concat("XydComponents-Component-views-HomeView__HomeViewBodyHost","\n        ").concat("secondary"===t?"XydComponents-Component-views-HomeView__HomeViewBodyHostSecondary":"","\n    ")},e.createElement("div",{className:"XydComponents-Component-views-HomeView__HomeViewBodyContent"},n))};export{o as H};
-//# sourceMappingURL=HomeView-_Nu2RcOM.js.map

package/dist/HomeView-_Nu2RcOM.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HomeView-_Nu2RcOM.js","sources":["../src/views/HomeView/HomeView.tsx","../src/views/HomeView/HomeView.styles.tsx"],"sourcesContent":["import React from \"react\"\nimport * as cn from \"./HomeView.styles\";\n\nexport interface HomeViewProps {\n    header: React.ReactNode\n    body: React.ReactNode\n    footer: React.ReactNode\n}\n\nexport function HomeView({header, body, footer}: HomeViewProps) {\n    return <div className={cn.HomeViewHost}>\n        {header}\n        {body}\n        {footer}\n    </div>\n}\n\nexport interface HomeViewBodyProps {\n    children: React.ReactNode\n    kind?: \"secondary\"\n}\n\nHomeView.Body = function HomeViewBody({children, kind}: HomeViewBodyProps) {\n    return <div className={`\n        ${cn.HomeViewBodyHost}\n        ${kind === \"secondary\" ? cn.HomeViewBodyHostSecondary : \"\"}\n    `}>\n        <div className={cn.HomeViewBodyContent}>\n            {children}\n        </div>\n    </div>\n}\n\n\n","import {css} from \"@linaria/core\";\n\nexport const HomeViewHost = css`\n    display: flex;\n    flex-direction: column;\n    min-height: 100vh;\n`;\n\nexport const HomeViewBodyHost = css`\n    background: radial-gradient(circle, hsl(0 0% 9% / .3) 1px, transparent 1px);\n    backdrop-filter: sepia(10%);\n    background-size: 30px 30px;\n    padding: 60px;\n    flex: 1;\n`;\n\nexport const HomeViewBodyHostSecondary = css`\n    background: repeating-linear-gradient(to right, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px), repeating-linear-gradient(to bottom, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px);\n`;\n\nexport const HomeViewBodyContent = css`\n    width: 1200px;\n    margin: 0 auto;\n    display: flex;\n    flex-direction: column;\n    gap: 80px;\n\n    @media (max-width: 1200px) {\n        width: 100%;\n        padding: 0 20px;\n    }\n\n    @media (max-width: 768px) {\n        width: 100%;\n        padding: 0 10px;\n    }\n`; "],"names":["HomeView","_ref","header","body","footer","React","createElement","className","Body","_ref2","children","kind","concat"],"mappings":"qBASM,SAAUA,EAAQC,GAAsC,IAApCC,EAAMD,EAANC,OAAQC,EAAIF,EAAJE,KAAMC,EAAMH,EAANG,OACpC,OAAOC,EAAKC,cAAA,MAAA,CAAAC,UCJf,wDDKQL,EACAC,EACAC,EAET,CAOAJ,EAASQ,KAAO,SAAqBC,GAAoC,IAAlCC,EAAQD,EAARC,SAAUC,EAAIF,EAAJE,KAC7C,OAAON,EAAAC,cAAA,MAAA,CAAKC,uBAASK,OCTxB,2DDU4BA,cAAAA,OACV,cAATD,ECPT,oEDO+D,GAAE,WAE1DN,EAAKC,cAAA,MAAA,CAAAC,UCSZ,+DDRYG,GAGb"}

package/dist/UnderlineNav-BCyB0G5d.js

@@ -1,2 +0,0 @@
-import e,{useState as n,useRef as t,useEffect as r}from"react";import{a}from"./_rollupPluginBabelHelpers-Bunpz22T.js";import*as o from"@radix-ui/react-tabs";import{ChevronLeft as l,ChevronRight as c}from"lucide-react";var i="XydComponents-Component-writer-GuideCard__GuideTitle";function m(n){var t=n.children,r=n.href,a=n.icon,o=n.title,l=n.kind,c=n.size;return e.createElement("div",{className:"\n        ".concat("XydComponents-Component-writer-GuideCard__GuideHost","\n        ").concat("secondary"===l&&"XydComponents-Component-writer-GuideCard__GuideHostSecondary","\n        ").concat("secondary"===l&&"md"==c&&"XydComponents-Component-writer-GuideCard__GuideHostSecondaryMd","\n    ")},e.createElement("a",{className:"XydComponents-Component-writer-GuideCard__GuideLink",href:r},e.createElement("div",{className:"\n                ".concat("XydComponents-Component-writer-GuideCard__GuideItem","\n                ").concat("secondary"===l&&"XydComponents-Component-writer-GuideCard__GuideItemSecondary","\n            ")},a&&e.createElement("div",{className:"XydComponents-Component-writer-GuideCard__GuideIcon"},a),e.createElement("div",{className:"XydComponents-Component-writer-GuideCard__GuideRight"},e.createElement("div",{className:i},e.createElement("div",{className:"\n                            ".concat(i," \n                            ").concat("XydComponents-Component-writer-GuideCard__GuideTitleBody","\n                            ").concat("md"==c&&"XydComponents-Component-writer-GuideCard__GuideTitleBodyMd","\n                        ")},o),e.createElement(s,null)),e.createElement("div",{className:"\n                        ".concat("XydComponents-Component-writer-GuideCard__GuideBody","\n                        ").concat("md"==c&&"XydComponents-Component-writer-GuideCard__GuideBodyMd","\n                    ")},t)))))}function s(){return e.createElement("div",{"data-pointer":"true",className:"XydComponents-Component-writer-GuideCard__GuidePointer"},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"})))}m.List=function(n){var t=n.children;return e.createElement("div",{className:"XydComponents-Component-writer-GuideCard__GuideListHost"},t)};function d(n){var t=n.children;return e.createElement("ol",{className:"XydComponents-Component-writer-Steps__StepsHost"},t)}d.Item=function(n){var t=n.children;return e.createElement("li",{className:"XydComponents-Component-writer-Steps__StepsLi"},t)};function C(n){var t=n.children;return e.createElement("table",{className:"XydComponents-Component-writer-Table__TableHost"},t)}C.Th=function(n){var t=n.children;return e.createElement("th",{className:"XydComponents-Component-writer-Table__TableTh"},t)},C.Tr=function(n){var t=n.children;return e.createElement("tr",{className:"XydComponents-Component-writer-Table__TableTr"},t)},C.Td=function(n){var t=n.children;return e.createElement("td",{className:"XydComponents-Component-writer-Table__TableTd"},t)};var u={Host:"XydComponents-Component-writer-Table__Host",Table:"XydComponents-Component-writer-Table__Table",Thead:"XydComponents-Component-writer-Table__Thead",Th:"XydComponents-Component-writer-Table__Th",Tr:"XydComponents-Component-writer-Table__Tr",Td:"XydComponents-Component-writer-Table__Td",Cell:"XydComponents-Component-writer-Table__Cell",CellContent:"XydComponents-Component-writer-Table__CellContent",ModelCell:"XydComponents-Component-writer-Table__ModelCell"};function p(n){var t=n.children,r=n.className;return e.createElement("div",{className:u.Host},e.createElement("table",{className:"".concat(u.Table," ").concat(r||"")},t))}p.Head=function(n){var t=n.children;return e.createElement("thead",{className:u.Thead},t)},p.Th=function(n){var t=n.children,r=n.numeric;return e.createElement("th",{className:"".concat(u.Th," ").concat(r?"numeric":"")},t)},p.Tr=function(n){var t=n.children;return e.createElement("tr",{className:u.Tr},t)},p.Td=function(n){var t=n.children,r=n.numeric,a=n.muted;return e.createElement("td",{className:"".concat(u.Td," ").concat(r?"numeric":""," ").concat(a?"muted":"")},t)},p.Cell=function(n){var t=n.children;return e.createElement("div",{className:u.Cell},e.createElement("div",{className:u.CellContent},t))},p.ModelCell=function(n){var t=n.children;return e.createElement("div",{className:u.ModelCell},t)};var _="XydComponents-Component-writer-Tabs__TabsArrowHost",v="XydComponents-Component-writer-Tabs__TabsArrowIcon";function T(i){var m=i.children,s=i.items,d=i.tabIndex,C=n(!1),u=a(C,2),p=u[0],T=u[1],w=n(!1),y=a(w,2),E=y[0],N=y[1],b=t(null),f=n(s[d||0]||""),X=a(f,2),G=X[0],H=X[1],g=function(){if(b.current){var e=b.current,n=e.scrollLeft,t=e.scrollWidth,r=e.clientWidth;T(n>0),N(n<t-r)}};r((function(){return g(),window.addEventListener("resize",g),function(){return window.removeEventListener("resize",g)}}),[]);var S=function(e){if(b.current){var n="left"===e?-200:200;b.current.scrollBy({left:n,behavior:"smooth"})}};return e.createElement(o.Root,{asChild:!0,value:G,onValueChange:H},e.createElement("div",{className:"XydComponents-Component-writer-Tabs__TabsSampleHost"},e.createElement("div",{className:"XydComponents-Component-writer-Tabs__TabsSampleButtons"},p&&e.createElement("button",{onClick:function(){return S("left")},className:_},e.createElement(l,{className:v})),e.createElement("div",{ref:b,onScroll:g,className:"XydComponents-Component-writer-Tabs__TabsScrollerHost"},e.createElement("div",{className:"XydComponents-Component-writer-Tabs__TabsScrollerContainer"},e.createElement(o.List,null,s.map((function(n,t){return e.createElement(h,{key:t,value:n},n)}))))),E&&e.createElement("button",{onClick:function(){return S("right")},className:_},e.createElement(c,{className:v}))),e.createElement("div",{className:"XydComponents-Component-writer-Tabs__TabsSampleContent"},m)))}function h(n){var t=n.children,r=n.value;return e.createElement(o.Trigger,{asChild:!0,value:r},e.createElement("button",{className:"".concat("XydComponents-Component-writer-Tabs__TabsButtonHost")},t))}T.Content=function(n){var t=n.children,r=n.value;return e.createElement(o.Content,{asChild:!0,value:r},t)};function w(n){var t=n.children,r=n.value,a=n.onChange;return e.createElement(o.Root,{asChild:!0,value:r,onValueChange:a},e.createElement("nav",{className:"XydComponents-Component-writer-UnderlineNav__UnderlineNavHost"},e.createElement(o.List,{asChild:!0},e.createElement("ul",{className:"XydComponents-Component-writer-UnderlineNav__UnderlineNavUl"},t))))}w.Item=function(n){var t=n.children,r=n.value,a=n.href;return e.createElement(o.Trigger,{asChild:!0,value:r},e.createElement("li",{className:"XydComponents-Component-writer-UnderlineNav__UnderlineNavItem"},e.createElement("a",{href:a,className:"".concat("XydComponents-Component-writer-UnderlineNav__UnderlineNavItemLink")},t)))};export{m as G,d as S,C as T,w as U,p as a,T as b};
-//# sourceMappingURL=UnderlineNav-BCyB0G5d.js.map

package/dist/UnderlineNav-BCyB0G5d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"UnderlineNav-BCyB0G5d.js","sources":["../src/writer/GuideCard/GuideCard.styles.tsx","../src/writer/GuideCard/GuideCard.tsx","../src/writer/Steps/Steps.tsx","../src/writer/Steps/Steps.styles.tsx","../src/writer/Table/Table.tsx","../src/writer/Table/Table.styles.tsx","../src/writer/Table/TableV2.styles.tsx","../src/writer/Table/TableV2.tsx","../src/writer/Tabs/Tabs.styles.tsx","../src/writer/Tabs/Tabs.tsx","../src/writer/UnderlineNav/UnderlineNav.tsx","../src/writer/UnderlineNav/UnderlineNav.styles.tsx"],"sourcesContent":["import {css} from \"@linaria/core\";\nimport colors from \"@livesession/design-system-colors\"\n\nexport const GuideHost = css``;\n\nexport const GuideHostSecondary = css`\n    //flex-grow: 1;\n    //width: 100%;\n    display: flex;\n    position: relative;\n    overflow: hidden;\n    border: 1px solid ${colors.dark16};\n    background: ${colors.dark8};\n    border-radius: 8px;\n    padding: 24px;\n    z-index: 0;\n    transition: box-shadow .2s ease-in-out, background-image .2s ease;\n\n    &:hover {\n        background: ${colors.white};\n    }\n`;\n\nexport const GuideHostSecondaryMd = css`\n    padding: 21px 25px 25px;\n`;\n\nexport const GuideLink = css`\n    width: 100%;\n    height: 100%;\n`;\n\nexport const GuideItem = 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\nexport const GuideItemSecondary = css`\n    width: 100%;\n    height: 100%;\n`;\n\nexport const GuideIcon = css`\n    line-height: 0px;\n    font-size: 24px;\n    height: 32px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: #000;\n    transition: background .2s ease;\n    box-sizing: border-box;\n    flex-shrink: 0;\n`;\n\nexport const GuideRight = css`\n    padding-left: 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n`;\n\nexport const GuideTitle = css`\n    display: flex;\n    color: #000;\n    font-weight: 600;\n    align-items: center;\n    transition: color .15s;\n`;\n\nexport const GuideTitleBody = css`\n    font-size: 16px;\n    line-height: 20px;\n`;\n\nexport const GuideTitleBodyMd = css`\n    font-size: 18px;\n`;\n\nexport const GuideBody = css`\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 20px;\n\n    color: ${colors.dark80};\n    white-space: normal;\n    overflow: hidden;\n    text-overflow: ellipsis;\n`;\n\nexport const GuideBodyMd = css`\n    font-size: 16px;\n`;\n\nexport const GuidePointer = 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\nexport const GuideListHost = css`\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    justify-content: center;\n    gap: 24px;\n`;","import React from \"react\"\n\nimport * as cn 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        ${cn.GuideHost}\n        ${kind === \"secondary\" && cn.GuideHostSecondary}\n        ${kind === \"secondary\" && size == \"md\" && cn.GuideHostSecondaryMd}\n    `}>\n        <a className={cn.GuideLink} href={href}>\n            <div className={`\n                ${cn.GuideItem}\n                ${kind === \"secondary\" && cn.GuideItemSecondary}\n            `}>\n                {icon && <div className={cn.GuideIcon}>\n                    {icon}\n                </div>}\n                <div className={cn.GuideRight}>\n                    <div className={cn.GuideTitle}>\n                        <div className={`\n                            ${cn.GuideTitle} \n                            ${cn.GuideTitleBody}\n                            ${size == \"md\" && cn.GuideTitleBodyMd}\n                        `}>\n                            {title}\n                        </div>\n                        <Pointer/>\n                    </div>\n                    <div className={`\n                        ${cn.GuideBody}\n                        ${size == \"md\" && cn.GuideBodyMd}\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={cn.GuideListHost}>\n        {children}\n    </div>\n}\n\nfunction Pointer() {\n    return <div data-pointer=\"true\" className={cn.GuidePointer}>\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 React from \"react\"\n\nimport * as cn from \"./Steps.styles\";\n\nexport interface StepsProps {\n    children: React.ReactNode;\n}\n\nexport function Steps({children}: StepsProps) {\n    return <ol className={cn.StepsHost}>\n        {children}\n    </ol>\n}\n\nexport interface StepsItemProps {\n    children: React.ReactNode;\n}\n\nSteps.Item = function StepsItem({children}: StepsItemProps) {\n    return <li className={cn.StepsLi}>\n        {children}\n    </li>\n}","import {css} from \"@linaria/core\";\n\nexport const StepsHost = 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\nexport const StepsLi = 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`;","import React from \"react\"\n\nimport * as cn from \"./Table.styles\";\n\nexport interface TableProps {\n    children: React.ReactNode;\n}\n\nexport function Table({children}: TableProps) {\n    return <table className={cn.TableHost}>\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={cn.TableTh}>\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={cn.TableTr}>\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={cn.TableTd}>\n        {children}\n    </td>\n\n}","import {css} from \"@linaria/core\";\n\nconst colors = {\n    primary: \"#D1D5DB\"\n}\n\nexport const TableHost = css`\n    display: block;\n    overflow-x: scroll;\n\n    border-collapse: collapse;\n    border-radius: 3px;\n`;\n\nexport const TableTh = 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\nexport const TableTr = css`\n    padding: 0;\n    margin: 0;\n    border-top-width: 1px;\n    border-color: ${colors.primary};\n`;\n\nexport const TableTd = css`\n    padding: 0.5rem 1rem;\n    margin: 0;\n\n    border-width: 1px;\n    border-color: ${colors.primary};\n`;\n\n\n","import {css} from \"@linaria/core\";\n\nconst colors = {\n    primary: \"#D1D5DB\",\n    gray: {\n        50: \"#F7F7F8\",\n        100: \"#ECECF1\",\n        600: \"#6E6E80\",\n        800: \"#353740\",\n        900: \"#202123\"\n    }\n}\n\nconst TableV2 = {\n    Host: css`\n        width: 100%;\n        overflow-x: auto;\n        -webkit-overflow-scrolling: touch;\n    `,\n    Table: css`\n        display: table;\n        width: 100%;\n        min-width: 640px; // Ensures table doesn't get too squished\n        border-collapse: separate;\n        border-spacing: 0;\n        border: 1px solid ${colors.gray[100]};\n        border-radius: 8px;\n        font-size: 0.875rem;\n        line-height: 1.25rem;\n        margin-top: 1rem;\n        overflow: hidden;\n    `,\n    Thead: css`\n        background: ${colors.gray[50]};\n    `,\n    Th: css`\n        text-align: left;\n        font-weight: 500;\n        padding: 0.5rem 1rem;\n        color: ${colors.gray[800]};\n        vertical-align: middle;\n        border-bottom: 1px solid ${colors.gray[100]};\n        white-space: nowrap;\n\n        &:first-child {\n            width: 24rem;\n            max-width: 40%;\n            border-right: 1px solid ${colors.gray[100]};\n\n            @media (max-width: 768px) {\n                width: auto;\n                min-width: 12rem;\n            }\n        }\n\n        &.numeric {\n            text-align: right;\n            font-weight: 400;\n            min-width: 5rem;\n            \n            @media (max-width: 768px) {\n                min-width: 4rem;\n            }\n        }\n    `,\n    Tr: css`\n        &:not(:last-child) {\n            border-bottom: 1px solid ${colors.gray[100]};\n        }\n    `,\n    Td: css`\n        padding: 0.5rem 1rem;\n        vertical-align: middle;\n        border-top: 1px solid ${colors.gray[100]};\n\n        &:first-child {\n            border-right: 1px solid ${colors.gray[100]};\n        }\n\n        &.numeric {\n            text-align: right;\n        }\n\n        &.muted {\n            color: ${colors.gray[600]};\n        }\n\n        @media (max-width: 768px) {\n            padding: 0.5rem;\n        }\n    `,\n    Cell: css`\n        display: flex;\n        align-items: baseline;\n        width: 100%;\n        gap: 0.5rem;\n    `,\n    CellContent: css`\n        flex: 1;\n        text-align: right;\n    `,\n    ModelCell: css`\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        white-space: nowrap;\n        color: ${colors.gray[900]};\n        \n        @media (max-width: 768px) {\n            font-size: 0.8125rem;\n        }\n    `\n} \n\nexport default {\n    TableV2\n}","import React from \"react\"\n\nimport cn from \"./TableV2.styles\";\n\nexport interface TableV2Props {\n    children: React.ReactNode;\n    className?: string;\n}\n\nexport function TableV2({children, className}: TableV2Props) {\n    return (\n        <div className={cn.TableV2.Host}>\n            <table className={`${cn.TableV2.Table} ${className || ''}`}>\n                {children}\n            </table>\n        </div>\n    );\n}\n\nexport interface TableHeadProps {\n    children: React.ReactNode;\n}\n\nTableV2.Head = function TableHead({children}: TableHeadProps) {\n    return <thead className={cn.TableV2.Thead}>\n        {children}\n    </thead>\n}\n\nexport interface TableThProps {\n    children: React.ReactNode;\n    numeric?: boolean;\n}\n\nTableV2.Th = function TableTh({children, numeric}: TableThProps) {\n    return <th className={`${cn.TableV2.Th} ${numeric ? 'numeric' : ''}`}>\n        {children}\n    </th>\n}\n\nexport interface TableTrProps {\n    children: React.ReactNode;\n}\n\nTableV2.Tr = function TableTr({children}: TableTrProps) {\n    return <tr className={cn.TableV2.Tr}>\n        {children}\n    </tr>\n}\n\nexport interface TableTdProps {\n    children: React.ReactNode;\n    numeric?: boolean;\n    muted?: boolean;\n}\n\nTableV2.Td = function TableTd({children, numeric, muted}: TableTdProps) {\n    return <td className={`${cn.TableV2.Td} ${numeric ? 'numeric' : ''} ${muted ? 'muted' : ''}`}>\n        {children}\n    </td>\n}\n\nexport interface TableCellProps {\n    children: React.ReactNode;\n}\n\nTableV2.Cell = function TableCell({children}: TableCellProps) {\n    return <div className={cn.TableV2.Cell}>\n        <div className={cn.TableV2.CellContent}>\n            {children}\n        </div>\n    </div>\n}\n\nexport interface TableModelCellProps {\n    children: React.ReactNode;\n}\n\nTableV2.ModelCell = function TableModelCell({children}: TableModelCellProps) {\n    return <div className={cn.TableV2.ModelCell}>\n        {children}\n    </div>\n} ","import {css} from \"@linaria/core\";\n\nexport const TabsSampleHost = css`\n    position: relative;\n    max-width: 100%;\n`;\n\nexport const TabsSampleButtons = css`\n    display: flex;\n    align-items: center;\n`;\n\nexport const TabsSampleContent = css`\n    margin-top: 16px;\n`;\n\nexport const TabsArrowHost = css`\n    padding: 8px;\n    background-color: #ffffff;\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n`;\n\nexport const TabsArrowIcon = css`\n    width: 16px;\n    height: 16px;\n`;\n\nexport const TabsScrollerHost = css`\n    overflow-x: auto;\n    flex-grow: 1;\n`;\n\nexport const TabsScrollerContainer = 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\nexport const TabsButtonHost = 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\nexport const TabsButtonActive = css`\n    color: #111827;\n    background-color: #ffffff;\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n`;","import React, {useState, useRef, useEffect} from 'react'\nimport * as RadixTabs from \"@radix-ui/react-tabs\"\nimport {ChevronLeft, ChevronRight} from \"lucide-react\"\n\nimport * as cn 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={cn.TabsSampleHost}>\n                <div className={cn.TabsSampleButtons}>\n                    {showLeftArrow && (\n                        <button\n                            onClick={() => scroll('left')}\n                            className={cn.TabsArrowHost}\n                        >\n                            <ChevronLeft className={cn.TabsArrowIcon}/>\n                        </button>\n                    )}\n\n                    <div\n                        ref={scrollContainerRef}\n                        onScroll={handleScroll}\n                        className={cn.TabsScrollerHost}\n                    >\n                        <div className={cn.TabsScrollerContainer}>\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={cn.TabsArrowHost}\n                        >\n                            <ChevronRight className={cn.TabsArrowIcon}/>\n                        </button>\n                    )}\n                </div>\n\n                <div className={cn.TabsSampleContent}>\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={`${cn.TabsButtonHost}`}>\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 React from \"react\"\nimport * as RadixTabs from \"@radix-ui/react-tabs\";\n\nimport * as cn 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={cn.UnderlineNavHost}>\n            <RadixTabs.List asChild>\n                <ul className={cn.UnderlineNavUl}>\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={cn.UnderlineNavItem}>\n            <a href={href} className={`${cn.UnderlineNavItemLink}`}>\n                {children}\n            </a>\n        </li>\n    </RadixTabs.Trigger>\n}","import {css} from \"@linaria/core\"\n\nexport const UnderlineNavHost = 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\nexport const UnderlineNavUl = 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\nexport const UnderlineNavItem = 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\nexport const UnderlineNavItemLink = css`\n    display: inline-flex;\n    border-bottom: 3px solid transparent;\n    text-decoration: none;\n\n    height: 100%;\n    padding: 10px;\n`;\n\nexport const UnderlineNavItemLinkActive = css`\n`;"],"names":["GuideTitle","GuideCard","_ref","children","href","icon","title","kind","size","React","createElement","className","concat","cn","Pointer","xmlns","width","height","fill","viewBox","fillRule","d","clipRule","List","_ref2","Steps","Item","Table","Th","Tr","_ref3","Td","_ref4","Host","Thead","Cell","CellContent","ModelCell","TableV2","Head","numeric","_ref5","muted","_ref6","_ref7","TabsArrowHost","TabsArrowIcon","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","UnderlineNav","onChange"],"mappings":"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"}

package/dist/UnderlineNav-BEhDJk0H.js

@@ -1,2 +0,0 @@
-import e,{useState as n,useRef as t,useEffect as r}from"react";import{a}from"./_rollupPluginBabelHelpers-BEouSrrZ.js";import*as o from"@radix-ui/react-tabs";import{ChevronLeft as l,ChevronRight as c}from"lucide-react";var i="XydComponents-Component-writer-GuideCard__GuideTitle";function m(n){var t=n.children,r=n.href,a=n.icon,o=n.title,l=n.kind,c=n.size;return e.createElement("div",{className:"\n        ".concat("XydComponents-Component-writer-GuideCard__GuideHost","\n        ").concat("secondary"===l&&"XydComponents-Component-writer-GuideCard__GuideHostSecondary","\n        ").concat("secondary"===l&&"md"==c&&"XydComponents-Component-writer-GuideCard__GuideHostSecondaryMd","\n    ")},e.createElement("a",{className:"XydComponents-Component-writer-GuideCard__GuideLink",href:r},e.createElement("div",{className:"\n                ".concat("XydComponents-Component-writer-GuideCard__GuideItem","\n                ").concat("secondary"===l&&"XydComponents-Component-writer-GuideCard__GuideItemSecondary","\n            ")},a&&e.createElement("div",{className:"XydComponents-Component-writer-GuideCard__GuideIcon"},a),e.createElement("div",{className:"XydComponents-Component-writer-GuideCard__GuideRight"},e.createElement("div",{className:i},e.createElement("div",{className:"\n                            ".concat(i," \n                            ").concat("XydComponents-Component-writer-GuideCard__GuideTitleBody","\n                            ").concat("md"==c&&"XydComponents-Component-writer-GuideCard__GuideTitleBodyMd","\n                        ")},o),e.createElement(s,null)),e.createElement("div",{className:"\n                        ".concat("XydComponents-Component-writer-GuideCard__GuideBody","\n                        ").concat("md"==c&&"XydComponents-Component-writer-GuideCard__GuideBodyMd","\n                    ")},t)))))}function s(){return e.createElement("div",{"data-pointer":"true",className:"XydComponents-Component-writer-GuideCard__GuidePointer"},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"})))}m.List=function(n){var t=n.children;return e.createElement("div",{className:"XydComponents-Component-writer-GuideCard__GuideListHost"},t)};function d(n){var t=n.children;return e.createElement("ol",{className:"XydComponents-Component-writer-Steps__StepsHost"},t)}d.Item=function(n){var t=n.children;return e.createElement("li",{className:"XydComponents-Component-writer-Steps__StepsLi"},t)};function C(n){var t=n.children;return e.createElement("table",{className:"XydComponents-Component-writer-Table__TableHost"},t)}C.Th=function(n){var t=n.children;return e.createElement("th",{className:"XydComponents-Component-writer-Table__TableTh"},t)},C.Tr=function(n){var t=n.children;return e.createElement("tr",{className:"XydComponents-Component-writer-Table__TableTr"},t)},C.Td=function(n){var t=n.children;return e.createElement("td",{className:"XydComponents-Component-writer-Table__TableTd"},t)};var u={Host:"XydComponents-Component-writer-Table__Host",Table:"XydComponents-Component-writer-Table__Table",Thead:"XydComponents-Component-writer-Table__Thead",Th:"XydComponents-Component-writer-Table__Th",Tr:"XydComponents-Component-writer-Table__Tr",Td:"XydComponents-Component-writer-Table__Td",Cell:"XydComponents-Component-writer-Table__Cell",CellContent:"XydComponents-Component-writer-Table__CellContent",ModelCell:"XydComponents-Component-writer-Table__ModelCell"};function p(n){var t=n.children,r=n.className;return e.createElement("div",{className:u.Host},e.createElement("table",{className:"".concat(u.Table," ").concat(r||"")},t))}p.Head=function(n){var t=n.children;return e.createElement("thead",{className:u.Thead},t)},p.Th=function(n){var t=n.children,r=n.numeric;return e.createElement("th",{className:"".concat(u.Th," ").concat(r?"numeric":"")},t)},p.Tr=function(n){var t=n.children;return e.createElement("tr",{className:u.Tr},t)},p.Td=function(n){var t=n.children,r=n.numeric,a=n.muted;return e.createElement("td",{className:"".concat(u.Td," ").concat(r?"numeric":""," ").concat(a?"muted":"")},t)},p.Cell=function(n){var t=n.children;return e.createElement("div",{className:u.Cell},e.createElement("div",{className:u.CellContent},t))},p.ModelCell=function(n){var t=n.children;return e.createElement("div",{className:u.ModelCell},t)};var _="XydComponents-Component-writer-Tabs__TabsArrowHost",v="XydComponents-Component-writer-Tabs__TabsArrowIcon";function T(i){var m=i.children,s=i.items,d=i.tabIndex,C=n(!1),u=a(C,2),p=u[0],T=u[1],w=n(!1),y=a(w,2),E=y[0],N=y[1],b=t(null),f=n(s[d||0]||""),X=a(f,2),G=X[0],H=X[1],g=function(){if(b.current){var e=b.current,n=e.scrollLeft,t=e.scrollWidth,r=e.clientWidth;T(n>0),N(n<t-r)}};r((function(){return g(),window.addEventListener("resize",g),function(){return window.removeEventListener("resize",g)}}),[]);var S=function(e){if(b.current){var n="left"===e?-200:200;b.current.scrollBy({left:n,behavior:"smooth"})}};return e.createElement(o.Root,{asChild:!0,value:G,onValueChange:H},e.createElement("div",{className:"XydComponents-Component-writer-Tabs__TabsSampleHost"},e.createElement("div",{className:"XydComponents-Component-writer-Tabs__TabsSampleButtons"},p&&e.createElement("button",{onClick:function(){return S("left")},className:_},e.createElement(l,{className:v})),e.createElement("div",{ref:b,onScroll:g,className:"XydComponents-Component-writer-Tabs__TabsScrollerHost"},e.createElement("div",{className:"XydComponents-Component-writer-Tabs__TabsScrollerContainer"},e.createElement(o.List,null,s.map((function(n,t){return e.createElement(h,{key:t,value:n},n)}))))),E&&e.createElement("button",{onClick:function(){return S("right")},className:_},e.createElement(c,{className:v}))),e.createElement("div",{className:"XydComponents-Component-writer-Tabs__TabsSampleContent"},m)))}function h(n){var t=n.children,r=n.value;return e.createElement(o.Trigger,{asChild:!0,value:r},e.createElement("button",{className:"".concat("XydComponents-Component-writer-Tabs__TabsButtonHost")},t))}T.Content=function(n){var t=n.children,r=n.value;return e.createElement(o.Content,{asChild:!0,value:r},t)};function w(n){var t=n.children,r=n.value,a=n.onChange;return e.createElement(o.Root,{asChild:!0,value:r,onValueChange:a},e.createElement("nav",{className:"XydComponents-Component-writer-UnderlineNav__UnderlineNavHost"},e.createElement(o.List,{asChild:!0},e.createElement("ul",{className:"XydComponents-Component-writer-UnderlineNav__UnderlineNavUl"},t))))}w.Item=function(n){var t=n.children,r=n.value,a=n.href;return e.createElement(o.Trigger,{asChild:!0,value:r},e.createElement("li",{className:"XydComponents-Component-writer-UnderlineNav__UnderlineNavItem"},e.createElement("a",{href:a,className:"".concat("XydComponents-Component-writer-UnderlineNav__UnderlineNavItemLink")},t)))};export{m as G,d as S,C as T,w as U,p as a,T as b};
-//# sourceMappingURL=UnderlineNav-BEhDJk0H.js.map

package/dist/UnderlineNav-BEhDJk0H.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"UnderlineNav-BEhDJk0H.js","sources":["../src/writer/GuideCard/GuideCard.styles.tsx","../src/writer/GuideCard/GuideCard.tsx","../src/writer/Steps/Steps.tsx","../src/writer/Steps/Steps.styles.tsx","../src/writer/Table/Table.tsx","../src/writer/Table/Table.styles.tsx","../src/writer/Table/TableV2.styles.tsx","../src/writer/Table/TableV2.tsx","../src/writer/Tabs/Tabs.styles.tsx","../src/writer/Tabs/Tabs.tsx","../src/writer/UnderlineNav/UnderlineNav.tsx","../src/writer/UnderlineNav/UnderlineNav.styles.tsx"],"sourcesContent":["import {css} from \"@linaria/core\";\n\nexport const GuideHost = css``;\n\nexport const GuideHostSecondary = 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\nexport const GuideHostSecondaryMd = css`\n    padding: 21px 25px 25px;\n`;\n\nexport const GuideLink = css`\n    width: 100%;\n    height: 100%;\n`;\n\nexport const GuideItem = 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\nexport const GuideItemSecondary = css`\n    width: 100%;\n    height: 100%;\n`;\n\nexport const GuideIcon = 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\nexport const GuideRight = css`\n    padding-left: 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n`;\n\nexport const GuideTitle = css`\n    display: flex;\n    color: #202123;\n    font-weight: 400;\n    align-items: center;\n    transition: color .15s;\n`;\n\nexport const GuideTitleBody = css`\n    font-size: 16px;\n    line-height: 20px;\n`;\n\nexport const GuideTitleBodyMd = css`\n    font-size: 18px;\n`;\n\nexport const GuideBody = 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\nexport const GuideBodyMd = css`\n    font-size: 16px;\n`;\n\nexport const GuidePointer = 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\nexport const GuideListHost = css`\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    justify-content: center;\n    gap: 30px;\n`;","import React from \"react\"\n\nimport * as cn 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        ${cn.GuideHost}\n        ${kind === \"secondary\" && cn.GuideHostSecondary}\n        ${kind === \"secondary\" && size == \"md\" && cn.GuideHostSecondaryMd}\n    `}>\n        <a className={cn.GuideLink} href={href}>\n            <div className={`\n                ${cn.GuideItem}\n                ${kind === \"secondary\" && cn.GuideItemSecondary}\n            `}>\n                {icon && <div className={cn.GuideIcon}>\n                    {icon}\n                </div>}\n                <div className={cn.GuideRight}>\n                    <div className={cn.GuideTitle}>\n                        <div className={`\n                            ${cn.GuideTitle} \n                            ${cn.GuideTitleBody}\n                            ${size == \"md\" && cn.GuideTitleBodyMd}\n                        `}>\n                            {title}\n                        </div>\n                        <Pointer/>\n                    </div>\n                    <div className={`\n                        ${cn.GuideBody}\n                        ${size == \"md\" && cn.GuideBodyMd}\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={cn.GuideListHost}>\n        {children}\n    </div>\n}\n\nfunction Pointer() {\n    return <div data-pointer=\"true\" className={cn.GuidePointer}>\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 React from \"react\"\n\nimport * as cn from \"./Steps.styles\";\n\nexport interface StepsProps {\n    children: React.ReactNode;\n}\n\nexport function Steps({children}: StepsProps) {\n    return <ol className={cn.StepsHost}>\n        {children}\n    </ol>\n}\n\nexport interface StepsItemProps {\n    children: React.ReactNode;\n}\n\nSteps.Item = function StepsItem({children}: StepsItemProps) {\n    return <li className={cn.StepsLi}>\n        {children}\n    </li>\n}","import {css} from \"@linaria/core\";\n\nexport const StepsHost = 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\nexport const StepsLi = 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`;","import React from \"react\"\n\nimport * as cn from \"./Table.styles\";\n\nexport interface TableProps {\n    children: React.ReactNode;\n}\n\nexport function Table({children}: TableProps) {\n    return <table className={cn.TableHost}>\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={cn.TableTh}>\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={cn.TableTr}>\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={cn.TableTd}>\n        {children}\n    </td>\n\n}","import {css} from \"@linaria/core\";\n\nconst colors = {\n    primary: \"#D1D5DB\"\n}\n\nexport const TableHost = css`\n    display: block;\n    overflow-x: scroll;\n\n    border-collapse: collapse;\n    border-radius: 3px;\n`;\n\nexport const TableTh = 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\nexport const TableTr = css`\n    padding: 0;\n    margin: 0;\n    border-top-width: 1px;\n    border-color: ${colors.primary};\n`;\n\nexport const TableTd = css`\n    padding: 0.5rem 1rem;\n    margin: 0;\n\n    border-width: 1px;\n    border-color: ${colors.primary};\n`;\n\n\n","import {css} from \"@linaria/core\";\n\nconst colors = {\n    primary: \"#D1D5DB\",\n    gray: {\n        50: \"#F7F7F8\",\n        100: \"#ECECF1\",\n        600: \"#6E6E80\",\n        800: \"#353740\",\n        900: \"#202123\"\n    }\n}\n\nconst TableV2 = {\n    Host: css`\n        width: 100%;\n        overflow-x: auto;\n        -webkit-overflow-scrolling: touch;\n    `,\n    Table: css`\n        display: table;\n        width: 100%;\n        min-width: 640px; // Ensures table doesn't get too squished\n        border-collapse: separate;\n        border-spacing: 0;\n        border: 1px solid ${colors.gray[100]};\n        border-radius: 8px;\n        font-size: 0.875rem;\n        line-height: 1.25rem;\n        margin-top: 1rem;\n        overflow: hidden;\n    `,\n    Thead: css`\n        background: ${colors.gray[50]};\n    `,\n    Th: css`\n        text-align: left;\n        font-weight: 500;\n        padding: 0.5rem 1rem;\n        color: ${colors.gray[800]};\n        vertical-align: middle;\n        border-bottom: 1px solid ${colors.gray[100]};\n        white-space: nowrap;\n\n        &:first-child {\n            width: 24rem;\n            max-width: 40%;\n            border-right: 1px solid ${colors.gray[100]};\n\n            @media (max-width: 768px) {\n                width: auto;\n                min-width: 12rem;\n            }\n        }\n\n        &.numeric {\n            text-align: right;\n            font-weight: 400;\n            min-width: 5rem;\n            \n            @media (max-width: 768px) {\n                min-width: 4rem;\n            }\n        }\n    `,\n    Tr: css`\n        &:not(:last-child) {\n            border-bottom: 1px solid ${colors.gray[100]};\n        }\n    `,\n    Td: css`\n        padding: 0.5rem 1rem;\n        vertical-align: middle;\n        border-top: 1px solid ${colors.gray[100]};\n\n        &:first-child {\n            border-right: 1px solid ${colors.gray[100]};\n        }\n\n        &.numeric {\n            text-align: right;\n        }\n\n        &.muted {\n            color: ${colors.gray[600]};\n        }\n\n        @media (max-width: 768px) {\n            padding: 0.5rem;\n        }\n    `,\n    Cell: css`\n        display: flex;\n        align-items: baseline;\n        width: 100%;\n        gap: 0.5rem;\n    `,\n    CellContent: css`\n        flex: 1;\n        text-align: right;\n    `,\n    ModelCell: css`\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        white-space: nowrap;\n        color: ${colors.gray[900]};\n        \n        @media (max-width: 768px) {\n            font-size: 0.8125rem;\n        }\n    `\n} \n\nexport default {\n    TableV2\n}","import React from \"react\"\n\nimport cn from \"./TableV2.styles\";\n\nexport interface TableV2Props {\n    children: React.ReactNode;\n    className?: string;\n}\n\nexport function TableV2({children, className}: TableV2Props) {\n    return (\n        <div className={cn.TableV2.Host}>\n            <table className={`${cn.TableV2.Table} ${className || ''}`}>\n                {children}\n            </table>\n        </div>\n    );\n}\n\nexport interface TableHeadProps {\n    children: React.ReactNode;\n}\n\nTableV2.Head = function TableHead({children}: TableHeadProps) {\n    return <thead className={cn.TableV2.Thead}>\n        {children}\n    </thead>\n}\n\nexport interface TableThProps {\n    children: React.ReactNode;\n    numeric?: boolean;\n}\n\nTableV2.Th = function TableTh({children, numeric}: TableThProps) {\n    return <th className={`${cn.TableV2.Th} ${numeric ? 'numeric' : ''}`}>\n        {children}\n    </th>\n}\n\nexport interface TableTrProps {\n    children: React.ReactNode;\n}\n\nTableV2.Tr = function TableTr({children}: TableTrProps) {\n    return <tr className={cn.TableV2.Tr}>\n        {children}\n    </tr>\n}\n\nexport interface TableTdProps {\n    children: React.ReactNode;\n    numeric?: boolean;\n    muted?: boolean;\n}\n\nTableV2.Td = function TableTd({children, numeric, muted}: TableTdProps) {\n    return <td className={`${cn.TableV2.Td} ${numeric ? 'numeric' : ''} ${muted ? 'muted' : ''}`}>\n        {children}\n    </td>\n}\n\nexport interface TableCellProps {\n    children: React.ReactNode;\n}\n\nTableV2.Cell = function TableCell({children}: TableCellProps) {\n    return <div className={cn.TableV2.Cell}>\n        <div className={cn.TableV2.CellContent}>\n            {children}\n        </div>\n    </div>\n}\n\nexport interface TableModelCellProps {\n    children: React.ReactNode;\n}\n\nTableV2.ModelCell = function TableModelCell({children}: TableModelCellProps) {\n    return <div className={cn.TableV2.ModelCell}>\n        {children}\n    </div>\n} ","import {css} from \"@linaria/core\";\n\nexport const TabsSampleHost = css`\n    position: relative;\n    max-width: 100%;\n`;\n\nexport const TabsSampleButtons = css`\n    display: flex;\n    align-items: center;\n`;\n\nexport const TabsSampleContent = css`\n    margin-top: 16px;\n`;\n\nexport const TabsArrowHost = css`\n    padding: 8px;\n    background-color: #ffffff;\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n`;\n\nexport const TabsArrowIcon = css`\n    width: 16px;\n    height: 16px;\n`;\n\nexport const TabsScrollerHost = css`\n    overflow-x: auto;\n    flex-grow: 1;\n`;\n\nexport const TabsScrollerContainer = 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\nexport const TabsButtonHost = 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\nexport const TabsButtonActive = css`\n    color: #111827;\n    background-color: #ffffff;\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n`;","import React, {useState, useRef, useEffect} from 'react'\nimport * as RadixTabs from \"@radix-ui/react-tabs\"\nimport {ChevronLeft, ChevronRight} from \"lucide-react\"\n\nimport * as cn 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={cn.TabsSampleHost}>\n                <div className={cn.TabsSampleButtons}>\n                    {showLeftArrow && (\n                        <button\n                            onClick={() => scroll('left')}\n                            className={cn.TabsArrowHost}\n                        >\n                            <ChevronLeft className={cn.TabsArrowIcon}/>\n                        </button>\n                    )}\n\n                    <div\n                        ref={scrollContainerRef}\n                        onScroll={handleScroll}\n                        className={cn.TabsScrollerHost}\n                    >\n                        <div className={cn.TabsScrollerContainer}>\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={cn.TabsArrowHost}\n                        >\n                            <ChevronRight className={cn.TabsArrowIcon}/>\n                        </button>\n                    )}\n                </div>\n\n                <div className={cn.TabsSampleContent}>\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={`${cn.TabsButtonHost}`}>\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 React from \"react\"\nimport * as RadixTabs from \"@radix-ui/react-tabs\";\n\nimport * as cn 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={cn.UnderlineNavHost}>\n            <RadixTabs.List asChild>\n                <ul className={cn.UnderlineNavUl}>\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={cn.UnderlineNavItem}>\n            <a href={href} className={`${cn.UnderlineNavItemLink}`}>\n                {children}\n            </a>\n        </li>\n    </RadixTabs.Trigger>\n}","import {css} from \"@linaria/core\"\n\nexport const UnderlineNavHost = 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\nexport const UnderlineNavUl = 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\nexport const UnderlineNavItem = 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\nexport const UnderlineNavItemLink = css`\n    display: inline-flex;\n    border-bottom: 3px solid transparent;\n    text-decoration: none;\n\n    height: 100%;\n    padding: 10px;\n`;\n\nexport const UnderlineNavItemLinkActive = css`\n`;"],"names":["GuideTitle","GuideCard","_ref","children","href","icon","title","kind","size","React","createElement","className","concat","cn","Pointer","xmlns","width","height","fill","viewBox","fillRule","d","clipRule","List","_ref2","Steps","Item","Table","Th","Tr","_ref3","Td","_ref4","Host","Thead","Cell","CellContent","ModelCell","TableV2","Head","numeric","_ref5","muted","_ref6","_ref7","TabsArrowHost","TabsArrowIcon","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","UnderlineNav","onChange"],"mappings":"0NAEO,IA0EMA,EAMZ,uDCrEe,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,ODpBK,sDCqBRA,cAAAA,OACH,cAATL,GDJT,+DCIsDK,cAAAA,OACpC,cAATL,GAAgC,MAARC,GDDjC,iECCwE,WAEjEC,EAAGC,cAAA,IAAA,CAAAC,UDEV,sDCFmCP,KAAMA,GAC9BK,EAAAC,cAAA,MAAA,CAAKC,UAASC,qBAAAA,ODiBzB,sDChB6B,sBAAAA,OACH,cAATL,GDoBjB,+DCpB8D,mBAE9CF,GAAQI,uBAAKE,UDmC7B,uDClCoBN,GAELI,EAAAC,cAAA,MAAA,CAAKC,UDuCpB,wDCtCmBF,EAAAC,cAAA,MAAA,CAAKC,UAAWE,GACZJ,EAAAC,cAAA,MAAA,CAAKC,UAAS,iCAAAC,OACRC,EAAa,mCAAAD,ODiD1C,2DChD8C,kCAAAA,OACT,MAARJ,GDmD7B,6DCnDgE,+BAEpCF,GAELG,EAACC,cAAAI,SAELL,EAAAC,cAAA,MAAA,CAAKC,UAASC,6BAAAA,ODwDjC,sDCvDqC,8BAAAA,OACJ,MAARJ,GD0DzB,wDC1DuD,2BAE/BL,MAMzB,CAQA,SAASW,IACL,OAAOL,sCAAkB,OAAOE,UDiDnC,0DChDOF,EAAAC,cAAA,MAAA,CACIK,MAAM,6BACNC,MAAO,GACPC,OAAQ,GACRC,KAAK,eACLC,QAAQ,aAERV,EAAAC,cAAA,OAAA,CACIU,SAAS,UACTC,EAAE,2HACFC,SAAS,aAIzB,CAtBArB,EAAUsB,KAAO,SAAsBC,GAA0C,IAAxCrB,EAAQqB,EAARrB,SACrC,OAAOM,EAAAC,cAAA,MAAA,CAAKC,UD8Df,2DC7DQR,EAET,ECtDgB,SAAAsB,EAAKvB,GAAuB,IAArBC,EAAQD,EAARC,SACnB,OAAOM,EAAAC,cAAA,KAAA,CAAIC,UCCd,mDDAQR,EAET,CAMAsB,EAAMC,KAAO,SAAkBF,GAA2B,IAAzBrB,EAAQqB,EAARrB,SAC7B,OAAOM,EAAAC,cAAA,KAAA,CAAIC,UCed,iDDdQR,EAET,EEdgB,SAAAwB,EAAKzB,GAAuB,IAArBC,EAAQD,EAARC,SACnB,OAAOM,EAAAC,cAAA,QAAA,CAAOC,UCGjB,mDDFQR,EAET,CAMAwB,EAAMC,GAAK,SAAgBJ,GAAyB,IAAvBrB,EAAQqB,EAARrB,SACzB,OAAOM,EAAAC,cAAA,KAAA,CAAIC,UCGd,iDDFQR,EAET,EAMAwB,EAAME,GAAK,SAAgBC,GAAyB,IAAvB3B,EAAQ2B,EAAR3B,SACzB,OAAOM,EAAAC,cAAA,KAAA,CAAIC,UCAd,iDDCQR,EAGT,EAMAwB,EAAMI,GAAK,SAAgBC,GAAyB,IAAvB7B,EAAQ6B,EAAR7B,SACzB,OAAOM,EAAAC,cAAA,KAAA,CAAIC,UCHd,iDDIQR,EAGT,EE/BA,IAqGeU,EArGC,CACZoB,KAIC,6CACDN,MAYC,8CACDO,MAEC,8CACDN,GA6BC,2CACDC,GAIC,2CACDE,GAoBC,2CACDI,KAKC,6CACDC,YAGC,oDACDC,UAAS,4DC5FGC,EAAOpC,GAAoC,IAAlCC,EAAQD,EAARC,SAAUQ,EAAST,EAATS,UAC/B,OACIF,uBAAKE,UAAWE,EAAWoB,MACvBxB,EAAAC,cAAA,QAAA,CAAOC,UAASC,GAAAA,OAAKC,EAAWc,MAAKf,KAAAA,OAAID,GAAa,KACjDR,GAIjB,CAMAmC,EAAQC,KAAO,SAAkBf,GAA2B,IAAzBrB,EAAQqB,EAARrB,SAC/B,OAAOM,EAAAC,cAAA,QAAA,CAAOC,UAAWE,EAAWqB,OAC/B/B,EAET,EAOAmC,EAAQV,GAAK,SAAgBE,GAAkC,IAAhC3B,EAAQ2B,EAAR3B,SAAUqC,EAAOV,EAAPU,QACrC,OAAO/B,EAAAC,cAAA,KAAA,CAAIC,UAASC,GAAAA,OAAKC,EAAWe,GAAE,KAAAhB,OAAI4B,EAAU,UAAY,KAC3DrC,EAET,EAMAmC,EAAQT,GAAK,SAAgBG,GAAyB,IAAvB7B,EAAQ6B,EAAR7B,SAC3B,OAAOM,EAAAC,cAAA,KAAA,CAAIC,UAAWE,EAAWgB,IAC5B1B,EAET,EAQAmC,EAAQP,GAAK,SAAgBU,GAAyC,IAAvCtC,EAAQsC,EAARtC,SAAUqC,EAAOC,EAAPD,QAASE,EAAKD,EAALC,MAC9C,OAAOjC,EAAIC,cAAA,KAAA,CAAAC,UAAS,GAAAC,OAAKC,EAAWkB,GAAE,KAAAnB,OAAI4B,EAAU,UAAY,GAAE5B,KAAAA,OAAI8B,EAAQ,QAAU,KACnFvC,EAET,EAMAmC,EAAQH,KAAO,SAAkBQ,GAA2B,IAAzBxC,EAAQwC,EAARxC,SAC/B,OAAOM,uBAAKE,UAAWE,EAAWsB,MAC9B1B,EAAKC,cAAA,MAAA,CAAAC,UAAWE,EAAWuB,aACtBjC,GAGb,EAMAmC,EAAQD,UAAY,SAAuBO,GAAgC,IAA9BzC,EAAQyC,EAARzC,SACzC,OAAOM,EAAAC,cAAA,MAAA,CAAKC,UAAWE,EAAWwB,WAC7BlC,EAET,EChFO,IAcM0C,EAIZ,qDAEYC,EAGZ,qDCbK,SAAUC,EAAI7C,GAAuC,IAArCC,EAAQD,EAARC,SAAU6C,EAAK9C,EAAL8C,MAAOC,EAAQ/C,EAAR+C,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,OACIxE,EAAAC,cAACwE,EAAUC,KAAK,CAAAC,SAAQ,EAAApB,MAAOA,EAAOqB,cAAepB,GACjDxD,EAAAC,cAAA,MAAA,CAAKC,UDrChB,uDCsCeF,EAAAC,cAAA,MAAA,CAAKC,UDjCpB,0DCkCoB2C,GACG7C,EAAAC,cAAA,SAAA,CACI4E,QAAS,WAAF,OAAQV,EAAO,OAAO,EAC7BjE,UAAWE,GAEXJ,EAACC,cAAA6E,GAAY5E,UAAWE,KAIhCJ,EAAAC,cAAA,MAAA,CACI8E,IAAK5B,EACL6B,SAAUvB,EACVvD,UD1BvB,yDC4BuBF,EAAAC,cAAA,MAAA,CAAKC,UDjB5B,8DCkB2BF,EAAAC,cAACwE,EAAU3D,KAAI,KACVyB,EAAM0C,KAAI,SAACC,EAAMC,GAAK,OAAKnF,EAACC,cAAAmF,EAAS,CAAAC,IAAKF,EAAO5B,MAAO2B,GAChDA,SAOpBjC,GACGjD,EAAAC,cAAA,SAAA,CACI4E,QAAS,WAAF,OAAQV,EAAO,QAAQ,EAC9BjE,UAAWE,GAEXJ,EAACC,cAAAqF,EAAa,CAAApF,UAAWE,MAKrCJ,EAAKC,cAAA,MAAA,CAAAC,UDhEpB,0DCiEoBR,IAKrB,CAEA,SAAS0F,EAAQrE,GAAkB,IAAhBrB,EAAQqB,EAARrB,SAAU6D,EAAKxC,EAALwC,MACzB,OAAOvD,EAAAC,cAACwE,EAAUc,SAAQZ,SAAO,EAACpB,MAAOA,GACrCvD,EAAQC,cAAA,SAAA,CAAAC,UAASC,GAAAA,ODrBxB,wDCsBYT,GAGb,CAEA4C,EAAKkD,QAAU,SAAoBnE,GAAkB,IAAhB3B,EAAQ2B,EAAR3B,SAAU6D,EAAKlC,EAALkC,MAC3C,OAAOvD,EAACC,cAAAwE,EAAUe,QAAQ,CAAAb,SAAQ,EAAApB,MAAOA,GACpC7D,EAET,ECvFM,SAAU+F,EAAYhG,GAAuC,IAArCC,EAAQD,EAARC,SAAU6D,EAAK9D,EAAL8D,MAAOmC,EAAQjG,EAARiG,SAC3C,OAAO1F,EAACC,cAAAwE,EAAUC,KAAK,CAAAC,SAAQ,EAAApB,MAAOA,EAAOqB,cAAec,GACxD1F,EAAAC,cAAA,MAAA,CAAKC,UCDZ,iEDEWF,EAAAC,cAACwE,EAAU3D,KAAI,CAAC6D,SAAO,GACnB3E,EAAIC,cAAA,KAAA,CAAAC,UCSnB,+DDRoBR,KAKrB,CAQA+F,EAAaxE,KAAO,SAAyBF,GAA+C,IAA7CrB,EAAQqB,EAARrB,SAAU6D,EAAKxC,EAALwC,MAAO5D,EAAIoB,EAAJpB,KAC5D,OAAOK,EAAAC,cAACwE,EAAUc,SAAQZ,SAAO,EAACpB,MAAOA,GACrCvD,EAAAC,cAAA,KAAA,CAAIC,UCGX,iEDFWF,EAAAC,cAAA,IAAA,CAAGN,KAAMA,EAAMO,UAASC,GAAAA,OCWnC,sEDVgBT,IAIjB"}

package/dist/UnderlineNav-BqZ2xAp7.js

@@ -1,2 +0,0 @@
-import e,{useState as n,useRef as t,useEffect as r}from"react";import{a}from"./_rollupPluginBabelHelpers-DQJTK9EO.js";import*as o from"@radix-ui/react-tabs";import{ChevronLeft as l,ChevronRight as c}from"lucide-react";var i="XydComponents-Component-writer-GuideCard__GuideTitle";function m(n){var t=n.children,r=n.href,a=n.icon,o=n.title,l=n.kind,c=n.size;return e.createElement("div",{className:"\n        ".concat("XydComponents-Component-writer-GuideCard__GuideHost","\n        ").concat("secondary"===l&&"XydComponents-Component-writer-GuideCard__GuideHostSecondary","\n        ").concat("secondary"===l&&"md"==c&&"XydComponents-Component-writer-GuideCard__GuideHostSecondaryMd","\n    ")},e.createElement("a",{className:"XydComponents-Component-writer-GuideCard__GuideLink",href:r},e.createElement("div",{className:"\n                ".concat("XydComponents-Component-writer-GuideCard__GuideItem","\n                ").concat("secondary"===l&&"XydComponents-Component-writer-GuideCard__GuideItemSecondary","\n            ")},a&&e.createElement("div",{className:"XydComponents-Component-writer-GuideCard__GuideIcon"},a),e.createElement("div",{className:"XydComponents-Component-writer-GuideCard__GuideRight"},e.createElement("div",{className:i},e.createElement("div",{className:"\n                            ".concat(i," \n                            ").concat("XydComponents-Component-writer-GuideCard__GuideTitleBody","\n                            ").concat("md"==c&&"XydComponents-Component-writer-GuideCard__GuideTitleBodyMd","\n                        ")},o),e.createElement(s,null)),e.createElement("div",{className:"\n                        ".concat("XydComponents-Component-writer-GuideCard__GuideBody","\n                        ").concat("md"==c&&"XydComponents-Component-writer-GuideCard__GuideBodyMd","\n                    ")},t)))))}function s(){return e.createElement("div",{"data-pointer":"true",className:"XydComponents-Component-writer-GuideCard__GuidePointer"},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"})))}m.List=function(n){var t=n.children;return e.createElement("div",{className:"XydComponents-Component-writer-GuideCard__GuideListHost"},t)};function d(n){var t=n.children;return e.createElement("ol",{className:"XydComponents-Component-writer-Steps__StepsHost"},t)}d.Item=function(n){var t=n.children;return e.createElement("li",{className:"XydComponents-Component-writer-Steps__StepsLi"},t)};function C(n){var t=n.children;return e.createElement("table",{className:"XydComponents-Component-writer-Table__TableHost"},t)}C.Th=function(n){var t=n.children;return e.createElement("th",{className:"XydComponents-Component-writer-Table__TableTh"},t)},C.Tr=function(n){var t=n.children;return e.createElement("tr",{className:"XydComponents-Component-writer-Table__TableTr"},t)},C.Td=function(n){var t=n.children;return e.createElement("td",{className:"XydComponents-Component-writer-Table__TableTd"},t)};var u={Host:"XydComponents-Component-writer-Table__Host",Table:"XydComponents-Component-writer-Table__Table",Thead:"XydComponents-Component-writer-Table__Thead",Th:"XydComponents-Component-writer-Table__Th",Tr:"XydComponents-Component-writer-Table__Tr",Td:"XydComponents-Component-writer-Table__Td",Cell:"XydComponents-Component-writer-Table__Cell",CellContent:"XydComponents-Component-writer-Table__CellContent",ModelCell:"XydComponents-Component-writer-Table__ModelCell"};function p(n){var t=n.children,r=n.className;return e.createElement("div",{className:u.Host},e.createElement("table",{className:"".concat(u.Table," ").concat(r||"")},t))}p.Head=function(n){var t=n.children;return e.createElement("thead",{className:u.Thead},t)},p.Th=function(n){var t=n.children,r=n.numeric;return e.createElement("th",{className:"".concat(u.Th," ").concat(r?"numeric":"")},t)},p.Tr=function(n){var t=n.children;return e.createElement("tr",{className:u.Tr},t)},p.Td=function(n){var t=n.children,r=n.numeric,a=n.muted;return e.createElement("td",{className:"".concat(u.Td," ").concat(r?"numeric":""," ").concat(a?"muted":"")},t)},p.Cell=function(n){var t=n.children;return e.createElement("div",{className:u.Cell},e.createElement("div",{className:u.CellContent},t))},p.ModelCell=function(n){var t=n.children;return e.createElement("div",{className:u.ModelCell},t)};var _="XydComponents-Component-writer-Tabs__TabsArrowHost",v="XydComponents-Component-writer-Tabs__TabsArrowIcon";function T(i){var m=i.children,s=i.items,d=i.tabIndex,C=n(!1),u=a(C,2),p=u[0],T=u[1],w=n(!1),y=a(w,2),E=y[0],N=y[1],b=t(null),f=n(s[d||0]||""),X=a(f,2),G=X[0],H=X[1],g=function(){if(b.current){var e=b.current,n=e.scrollLeft,t=e.scrollWidth,r=e.clientWidth;T(n>0),N(n<t-r)}};r((function(){return g(),window.addEventListener("resize",g),function(){return window.removeEventListener("resize",g)}}),[]);var S=function(e){if(b.current){var n="left"===e?-200:200;b.current.scrollBy({left:n,behavior:"smooth"})}};return e.createElement(o.Root,{asChild:!0,value:G,onValueChange:H},e.createElement("div",{className:"XydComponents-Component-writer-Tabs__TabsSampleHost"},e.createElement("div",{className:"XydComponents-Component-writer-Tabs__TabsSampleButtons"},p&&e.createElement("button",{onClick:function(){return S("left")},className:_},e.createElement(l,{className:v})),e.createElement("div",{ref:b,onScroll:g,className:"XydComponents-Component-writer-Tabs__TabsScrollerHost"},e.createElement("div",{className:"XydComponents-Component-writer-Tabs__TabsScrollerContainer"},e.createElement(o.List,null,s.map((function(n,t){return e.createElement(h,{key:t,value:n},n)}))))),E&&e.createElement("button",{onClick:function(){return S("right")},className:_},e.createElement(c,{className:v}))),e.createElement("div",{className:"XydComponents-Component-writer-Tabs__TabsSampleContent"},m)))}function h(n){var t=n.children,r=n.value;return e.createElement(o.Trigger,{asChild:!0,value:r},e.createElement("button",{className:"".concat("XydComponents-Component-writer-Tabs__TabsButtonHost")},t))}T.Content=function(n){var t=n.children,r=n.value;return e.createElement(o.Content,{asChild:!0,value:r},t)};function w(n){var t=n.children,r=n.value,a=n.onChange;return e.createElement(o.Root,{asChild:!0,value:r,onValueChange:a},e.createElement("nav",{className:"XydComponents-Component-writer-UnderlineNav__UnderlineNavHost"},e.createElement(o.List,{asChild:!0},e.createElement("ul",{className:"XydComponents-Component-writer-UnderlineNav__UnderlineNavUl"},t))))}w.Item=function(n){var t=n.children,r=n.value,a=n.href;return e.createElement(o.Trigger,{asChild:!0,value:r},e.createElement("li",{className:"XydComponents-Component-writer-UnderlineNav__UnderlineNavItem"},e.createElement("a",{href:a,className:"".concat("XydComponents-Component-writer-UnderlineNav__UnderlineNavItemLink")},t)))};export{m as G,d as S,C as T,w as U,p as a,T as b};
-//# sourceMappingURL=UnderlineNav-BqZ2xAp7.js.map

package/dist/UnderlineNav-BqZ2xAp7.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"UnderlineNav-BqZ2xAp7.js","sources":["../src/writer/GuideCard/GuideCard.styles.tsx","../src/writer/GuideCard/GuideCard.tsx","../src/writer/Steps/Steps.tsx","../src/writer/Steps/Steps.styles.tsx","../src/writer/Table/Table.tsx","../src/writer/Table/Table.styles.tsx","../src/writer/Table/TableV2.styles.tsx","../src/writer/Table/TableV2.tsx","../src/writer/Tabs/Tabs.styles.tsx","../src/writer/Tabs/Tabs.tsx","../src/writer/UnderlineNav/UnderlineNav.tsx","../src/writer/UnderlineNav/UnderlineNav.styles.tsx"],"sourcesContent":["import {css} from \"@linaria/core\";\n\nexport const GuideHost = css``;\n\nexport const GuideHostSecondary = 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\nexport const GuideHostSecondaryMd = css`\n    padding: 21px 25px 25px;\n`;\n\nexport const GuideLink = css`\n    width: 100%;\n    height: 100%;\n`;\n\nexport const GuideItem = 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\nexport const GuideItemSecondary = css`\n    width: 100%;\n    height: 100%;\n`;\n\nexport const GuideIcon = 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\nexport const GuideRight = css`\n    padding-left: 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n`;\n\nexport const GuideTitle = css`\n    display: flex;\n    color: #202123;\n    font-weight: 400;\n    align-items: center;\n    transition: color .15s;\n`;\n\nexport const GuideTitleBody = css`\n    font-size: 16px;\n    line-height: 20px;\n`;\n\nexport const GuideTitleBodyMd = css`\n    font-size: 18px;\n`;\n\nexport const GuideBody = 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\nexport const GuideBodyMd = css`\n    font-size: 16px;\n`;\n\nexport const GuidePointer = 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\nexport const GuideListHost = css`\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    justify-content: center;\n    gap: 30px;\n`;","import React from \"react\"\n\nimport * as cn 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        ${cn.GuideHost}\n        ${kind === \"secondary\" && cn.GuideHostSecondary}\n        ${kind === \"secondary\" && size == \"md\" && cn.GuideHostSecondaryMd}\n    `}>\n        <a className={cn.GuideLink} href={href}>\n            <div className={`\n                ${cn.GuideItem}\n                ${kind === \"secondary\" && cn.GuideItemSecondary}\n            `}>\n                {icon && <div className={cn.GuideIcon}>\n                    {icon}\n                </div>}\n                <div className={cn.GuideRight}>\n                    <div className={cn.GuideTitle}>\n                        <div className={`\n                            ${cn.GuideTitle} \n                            ${cn.GuideTitleBody}\n                            ${size == \"md\" && cn.GuideTitleBodyMd}\n                        `}>\n                            {title}\n                        </div>\n                        <Pointer/>\n                    </div>\n                    <div className={`\n                        ${cn.GuideBody}\n                        ${size == \"md\" && cn.GuideBodyMd}\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={cn.GuideListHost}>\n        {children}\n    </div>\n}\n\nfunction Pointer() {\n    return <div data-pointer=\"true\" className={cn.GuidePointer}>\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 React from \"react\"\n\nimport * as cn from \"./Steps.styles\";\n\nexport interface StepsProps {\n    children: React.ReactNode;\n}\n\nexport function Steps({children}: StepsProps) {\n    return <ol className={cn.StepsHost}>\n        {children}\n    </ol>\n}\n\nexport interface StepsItemProps {\n    children: React.ReactNode;\n}\n\nSteps.Item = function StepsItem({children}: StepsItemProps) {\n    return <li className={cn.StepsLi}>\n        {children}\n    </li>\n}","import {css} from \"@linaria/core\";\n\nexport const StepsHost = 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\nexport const StepsLi = 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`;","import React from \"react\"\n\nimport * as cn from \"./Table.styles\";\n\nexport interface TableProps {\n    children: React.ReactNode;\n}\n\nexport function Table({children}: TableProps) {\n    return <table className={cn.TableHost}>\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={cn.TableTh}>\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={cn.TableTr}>\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={cn.TableTd}>\n        {children}\n    </td>\n\n}","import {css} from \"@linaria/core\";\n\nconst colors = {\n    primary: \"#D1D5DB\"\n}\n\nexport const TableHost = css`\n    display: block;\n    overflow-x: scroll;\n\n    border-collapse: collapse;\n    border-radius: 3px;\n`;\n\nexport const TableTh = 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\nexport const TableTr = css`\n    padding: 0;\n    margin: 0;\n    border-top-width: 1px;\n    border-color: ${colors.primary};\n`;\n\nexport const TableTd = css`\n    padding: 0.5rem 1rem;\n    margin: 0;\n\n    border-width: 1px;\n    border-color: ${colors.primary};\n`;\n\n\n","import {css} from \"@linaria/core\";\n\nconst colors = {\n    primary: \"#D1D5DB\",\n    gray: {\n        50: \"#F7F7F8\",\n        100: \"#ECECF1\",\n        600: \"#6E6E80\",\n        800: \"#353740\",\n        900: \"#202123\"\n    }\n}\n\nconst TableV2 = {\n    Host: css`\n        width: 100%;\n        overflow-x: auto;\n        -webkit-overflow-scrolling: touch;\n    `,\n    Table: css`\n        display: table;\n        width: 100%;\n        min-width: 640px; // Ensures table doesn't get too squished\n        border-collapse: separate;\n        border-spacing: 0;\n        border: 1px solid ${colors.gray[100]};\n        border-radius: 8px;\n        font-size: 0.875rem;\n        line-height: 1.25rem;\n        margin-top: 1rem;\n        overflow: hidden;\n    `,\n    Thead: css`\n        background: ${colors.gray[50]};\n    `,\n    Th: css`\n        text-align: left;\n        font-weight: 500;\n        padding: 0.5rem 1rem;\n        color: ${colors.gray[800]};\n        vertical-align: middle;\n        border-bottom: 1px solid ${colors.gray[100]};\n        white-space: nowrap;\n\n        &:first-child {\n            width: 24rem;\n            max-width: 40%;\n            border-right: 1px solid ${colors.gray[100]};\n\n            @media (max-width: 768px) {\n                width: auto;\n                min-width: 12rem;\n            }\n        }\n\n        &.numeric {\n            text-align: right;\n            font-weight: 400;\n            min-width: 5rem;\n            \n            @media (max-width: 768px) {\n                min-width: 4rem;\n            }\n        }\n    `,\n    Tr: css`\n        &:not(:last-child) {\n            border-bottom: 1px solid ${colors.gray[100]};\n        }\n    `,\n    Td: css`\n        padding: 0.5rem 1rem;\n        vertical-align: middle;\n        border-top: 1px solid ${colors.gray[100]};\n\n        &:first-child {\n            border-right: 1px solid ${colors.gray[100]};\n        }\n\n        &.numeric {\n            text-align: right;\n        }\n\n        &.muted {\n            color: ${colors.gray[600]};\n        }\n\n        @media (max-width: 768px) {\n            padding: 0.5rem;\n        }\n    `,\n    Cell: css`\n        display: flex;\n        align-items: baseline;\n        width: 100%;\n        gap: 0.5rem;\n    `,\n    CellContent: css`\n        flex: 1;\n        text-align: right;\n    `,\n    ModelCell: css`\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        white-space: nowrap;\n        color: ${colors.gray[900]};\n        \n        @media (max-width: 768px) {\n            font-size: 0.8125rem;\n        }\n    `\n} \n\nexport default {\n    TableV2\n}","import React from \"react\"\n\nimport cn from \"./TableV2.styles\";\n\nexport interface TableV2Props {\n    children: React.ReactNode;\n    className?: string;\n}\n\nexport function TableV2({children, className}: TableV2Props) {\n    return (\n        <div className={cn.TableV2.Host}>\n            <table className={`${cn.TableV2.Table} ${className || ''}`}>\n                {children}\n            </table>\n        </div>\n    );\n}\n\nexport interface TableHeadProps {\n    children: React.ReactNode;\n}\n\nTableV2.Head = function TableHead({children}: TableHeadProps) {\n    return <thead className={cn.TableV2.Thead}>\n        {children}\n    </thead>\n}\n\nexport interface TableThProps {\n    children: React.ReactNode;\n    numeric?: boolean;\n}\n\nTableV2.Th = function TableTh({children, numeric}: TableThProps) {\n    return <th className={`${cn.TableV2.Th} ${numeric ? 'numeric' : ''}`}>\n        {children}\n    </th>\n}\n\nexport interface TableTrProps {\n    children: React.ReactNode;\n}\n\nTableV2.Tr = function TableTr({children}: TableTrProps) {\n    return <tr className={cn.TableV2.Tr}>\n        {children}\n    </tr>\n}\n\nexport interface TableTdProps {\n    children: React.ReactNode;\n    numeric?: boolean;\n    muted?: boolean;\n}\n\nTableV2.Td = function TableTd({children, numeric, muted}: TableTdProps) {\n    return <td className={`${cn.TableV2.Td} ${numeric ? 'numeric' : ''} ${muted ? 'muted' : ''}`}>\n        {children}\n    </td>\n}\n\nexport interface TableCellProps {\n    children: React.ReactNode;\n}\n\nTableV2.Cell = function TableCell({children}: TableCellProps) {\n    return <div className={cn.TableV2.Cell}>\n        <div className={cn.TableV2.CellContent}>\n            {children}\n        </div>\n    </div>\n}\n\nexport interface TableModelCellProps {\n    children: React.ReactNode;\n}\n\nTableV2.ModelCell = function TableModelCell({children}: TableModelCellProps) {\n    return <div className={cn.TableV2.ModelCell}>\n        {children}\n    </div>\n} ","import {css} from \"@linaria/core\";\n\nexport const TabsSampleHost = css`\n    position: relative;\n    max-width: 100%;\n`;\n\nexport const TabsSampleButtons = css`\n    display: flex;\n    align-items: center;\n`;\n\nexport const TabsSampleContent = css`\n    margin-top: 16px;\n`;\n\nexport const TabsArrowHost = css`\n    padding: 8px;\n    background-color: #ffffff;\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n`;\n\nexport const TabsArrowIcon = css`\n    width: 16px;\n    height: 16px;\n`;\n\nexport const TabsScrollerHost = css`\n    overflow-x: auto;\n    flex-grow: 1;\n`;\n\nexport const TabsScrollerContainer = 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\nexport const TabsButtonHost = 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\nexport const TabsButtonActive = css`\n    color: #111827;\n    background-color: #ffffff;\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n`;","import React, {useState, useRef, useEffect} from 'react'\nimport * as RadixTabs from \"@radix-ui/react-tabs\"\nimport {ChevronLeft, ChevronRight} from \"lucide-react\"\n\nimport * as cn 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={cn.TabsSampleHost}>\n                <div className={cn.TabsSampleButtons}>\n                    {showLeftArrow && (\n                        <button\n                            onClick={() => scroll('left')}\n                            className={cn.TabsArrowHost}\n                        >\n                            <ChevronLeft className={cn.TabsArrowIcon}/>\n                        </button>\n                    )}\n\n                    <div\n                        ref={scrollContainerRef}\n                        onScroll={handleScroll}\n                        className={cn.TabsScrollerHost}\n                    >\n                        <div className={cn.TabsScrollerContainer}>\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={cn.TabsArrowHost}\n                        >\n                            <ChevronRight className={cn.TabsArrowIcon}/>\n                        </button>\n                    )}\n                </div>\n\n                <div className={cn.TabsSampleContent}>\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={`${cn.TabsButtonHost}`}>\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 React from \"react\"\nimport * as RadixTabs from \"@radix-ui/react-tabs\";\n\nimport * as cn 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={cn.UnderlineNavHost}>\n            <RadixTabs.List asChild>\n                <ul className={cn.UnderlineNavUl}>\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={cn.UnderlineNavItem}>\n            <a href={href} className={`${cn.UnderlineNavItemLink}`}>\n                {children}\n            </a>\n        </li>\n    </RadixTabs.Trigger>\n}","import {css} from \"@linaria/core\"\n\nexport const UnderlineNavHost = 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\nexport const UnderlineNavUl = 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\nexport const UnderlineNavItem = 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\nexport const UnderlineNavItemLink = css`\n    display: inline-flex;\n    border-bottom: 3px solid transparent;\n    text-decoration: none;\n\n    height: 100%;\n    padding: 10px;\n`;\n\nexport const UnderlineNavItemLinkActive = css`\n`;"],"names":["GuideTitle","GuideCard","_ref","children","href","icon","title","kind","size","React","createElement","className","concat","cn","Pointer","xmlns","width","height","fill","viewBox","fillRule","d","clipRule","List","_ref2","Steps","Item","Table","Th","Tr","_ref3","Td","_ref4","Host","Thead","Cell","CellContent","ModelCell","TableV2","Head","numeric","_ref5","muted","_ref6","_ref7","TabsArrowHost","TabsArrowIcon","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","UnderlineNav","onChange"],"mappings":"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"}

package/dist/UnderlineNav-C2-4Vyj8.js

@@ -1,2 +0,0 @@
-import e,{useState as n,useRef as t,useEffect as r}from"react";import{a}from"./_rollupPluginBabelHelpers-CVblpRvU.js";import*as o from"@radix-ui/react-tabs";import{ChevronLeft as l,ChevronRight as c}from"lucide-react";var i="XydComponents-Component-writer-GuideCard__GuideTitle";function m(n){var t=n.children,r=n.href,a=n.icon,o=n.title,l=n.kind,c=n.size;return e.createElement("div",{className:"\n        ".concat("XydComponents-Component-writer-GuideCard__GuideHost","\n        ").concat("secondary"===l&&"XydComponents-Component-writer-GuideCard__GuideHostSecondary","\n        ").concat("secondary"===l&&"md"==c&&"XydComponents-Component-writer-GuideCard__GuideHostSecondaryMd","\n    ")},e.createElement("a",{className:"XydComponents-Component-writer-GuideCard__GuideLink",href:r},e.createElement("div",{className:"\n                ".concat("XydComponents-Component-writer-GuideCard__GuideItem","\n                ").concat("secondary"===l&&"XydComponents-Component-writer-GuideCard__GuideItemSecondary","\n            ")},a&&e.createElement("div",{className:"XydComponents-Component-writer-GuideCard__GuideIcon"},a),e.createElement("div",{className:"XydComponents-Component-writer-GuideCard__GuideRight"},e.createElement("div",{className:i},e.createElement("div",{className:"\n                            ".concat(i," \n                            ").concat("XydComponents-Component-writer-GuideCard__GuideTitleBody","\n                            ").concat("md"==c&&"XydComponents-Component-writer-GuideCard__GuideTitleBodyMd","\n                        ")},o),e.createElement(s,null)),e.createElement("div",{className:"\n                        ".concat("XydComponents-Component-writer-GuideCard__GuideBody","\n                        ").concat("md"==c&&"XydComponents-Component-writer-GuideCard__GuideBodyMd","\n                    ")},t)))))}function s(){return e.createElement("div",{"data-pointer":"true",className:"XydComponents-Component-writer-GuideCard__GuidePointer"},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"})))}m.List=function(n){var t=n.children;return e.createElement("div",{className:"XydComponents-Component-writer-GuideCard__GuideListHost"},t)};function d(n){var t=n.children;return e.createElement("ol",{className:"XydComponents-Component-writer-Steps__StepsHost"},t)}d.Item=function(n){var t=n.children;return e.createElement("li",{className:"XydComponents-Component-writer-Steps__StepsLi"},t)};function C(n){var t=n.children;return e.createElement("table",{className:"XydComponents-Component-writer-Table__TableHost"},t)}C.Th=function(n){var t=n.children;return e.createElement("th",{className:"XydComponents-Component-writer-Table__TableTh"},t)},C.Tr=function(n){var t=n.children;return e.createElement("tr",{className:"XydComponents-Component-writer-Table__TableTr"},t)},C.Td=function(n){var t=n.children;return e.createElement("td",{className:"XydComponents-Component-writer-Table__TableTd"},t)};var u={Host:"XydComponents-Component-writer-Table__Host",Table:"XydComponents-Component-writer-Table__Table",Thead:"XydComponents-Component-writer-Table__Thead",Th:"XydComponents-Component-writer-Table__Th",Tr:"XydComponents-Component-writer-Table__Tr",Td:"XydComponents-Component-writer-Table__Td",Cell:"XydComponents-Component-writer-Table__Cell",CellContent:"XydComponents-Component-writer-Table__CellContent",ModelCell:"XydComponents-Component-writer-Table__ModelCell"};function p(n){var t=n.children,r=n.className;return e.createElement("div",{className:u.Host},e.createElement("table",{className:"".concat(u.Table," ").concat(r||"")},t))}p.Head=function(n){var t=n.children;return e.createElement("thead",{className:u.Thead},t)},p.Th=function(n){var t=n.children,r=n.numeric;return e.createElement("th",{className:"".concat(u.Th," ").concat(r?"numeric":"")},t)},p.Tr=function(n){var t=n.children;return e.createElement("tr",{className:u.Tr},t)},p.Td=function(n){var t=n.children,r=n.numeric,a=n.muted;return e.createElement("td",{className:"".concat(u.Td," ").concat(r?"numeric":""," ").concat(a?"muted":"")},t)},p.Cell=function(n){var t=n.children;return e.createElement("div",{className:u.Cell},e.createElement("div",{className:u.CellContent},t))},p.ModelCell=function(n){var t=n.children;return e.createElement("div",{className:u.ModelCell},t)};var _="XydComponents-Component-writer-Tabs__TabsArrowHost",v="XydComponents-Component-writer-Tabs__TabsArrowIcon";function T(i){var m=i.children,s=i.items,d=i.tabIndex,C=n(!1),u=a(C,2),p=u[0],T=u[1],w=n(!1),y=a(w,2),E=y[0],N=y[1],b=t(null),f=n(s[d||0]||""),X=a(f,2),G=X[0],H=X[1],g=function(){if(b.current){var e=b.current,n=e.scrollLeft,t=e.scrollWidth,r=e.clientWidth;T(n>0),N(n<t-r)}};r((function(){return g(),window.addEventListener("resize",g),function(){return window.removeEventListener("resize",g)}}),[]);var S=function(e){if(b.current){var n="left"===e?-200:200;b.current.scrollBy({left:n,behavior:"smooth"})}};return e.createElement(o.Root,{asChild:!0,value:G,onValueChange:H},e.createElement("div",{className:"XydComponents-Component-writer-Tabs__TabsSampleHost"},e.createElement("div",{className:"XydComponents-Component-writer-Tabs__TabsSampleButtons"},p&&e.createElement("button",{onClick:function(){return S("left")},className:_},e.createElement(l,{className:v})),e.createElement("div",{ref:b,onScroll:g,className:"XydComponents-Component-writer-Tabs__TabsScrollerHost"},e.createElement("div",{className:"XydComponents-Component-writer-Tabs__TabsScrollerContainer"},e.createElement(o.List,null,s.map((function(n,t){return e.createElement(h,{key:t,value:n},n)}))))),E&&e.createElement("button",{onClick:function(){return S("right")},className:_},e.createElement(c,{className:v}))),e.createElement("div",{className:"XydComponents-Component-writer-Tabs__TabsSampleContent"},m)))}function h(n){var t=n.children,r=n.value;return e.createElement(o.Trigger,{asChild:!0,value:r},e.createElement("button",{className:"".concat("XydComponents-Component-writer-Tabs__TabsButtonHost")},t))}T.Content=function(n){var t=n.children,r=n.value;return e.createElement(o.Content,{asChild:!0,value:r},t)};function w(n){var t=n.children,r=n.value,a=n.onChange;return e.createElement(o.Root,{asChild:!0,value:r,onValueChange:a},e.createElement("nav",{className:"XydComponents-Component-writer-UnderlineNav__UnderlineNavHost"},e.createElement(o.List,{asChild:!0},e.createElement("ul",{className:"XydComponents-Component-writer-UnderlineNav__UnderlineNavUl"},t))))}w.Item=function(n){var t=n.children,r=n.value,a=n.href;return e.createElement(o.Trigger,{asChild:!0,value:r},e.createElement("li",{className:"XydComponents-Component-writer-UnderlineNav__UnderlineNavItem"},e.createElement("a",{href:a,className:"".concat("XydComponents-Component-writer-UnderlineNav__UnderlineNavItemLink")},t)))};export{m as G,d as S,C as T,w as U,p as a,T as b};
-//# sourceMappingURL=UnderlineNav-C2-4Vyj8.js.map

package/dist/UnderlineNav-C2-4Vyj8.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"UnderlineNav-C2-4Vyj8.js","sources":["../src/writer/GuideCard/GuideCard.styles.tsx","../src/writer/GuideCard/GuideCard.tsx","../src/writer/Steps/Steps.tsx","../src/writer/Steps/Steps.styles.tsx","../src/writer/Table/Table.tsx","../src/writer/Table/Table.styles.tsx","../src/writer/Table/TableV2.styles.tsx","../src/writer/Table/TableV2.tsx","../src/writer/Tabs/Tabs.styles.tsx","../src/writer/Tabs/Tabs.tsx","../src/writer/UnderlineNav/UnderlineNav.tsx","../src/writer/UnderlineNav/UnderlineNav.styles.tsx"],"sourcesContent":["import {css} from \"@linaria/core\";\nimport colors from \"@livesession/design-system-colors\"\n\nexport const GuideHost = css``;\n\nexport const GuideHostSecondary = css`\n    //flex-grow: 1;\n    //width: 100%;\n    display: flex;\n    position: relative;\n    overflow: hidden;\n    border: 1px solid ${colors.dark16};\n    background: ${colors.dark8};\n    border-radius: 8px;\n    padding: 24px;\n    z-index: 0;\n    transition: box-shadow .2s ease-in-out, background-image .2s ease;\n\n    &:hover {\n        background: ${colors.white};\n    }\n`;\n\nexport const GuideHostSecondaryMd = css`\n    padding: 21px 25px 25px;\n`;\n\nexport const GuideLink = css`\n    width: 100%;\n    height: 100%;\n`;\n\nexport const GuideItem = 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\nexport const GuideItemSecondary = css`\n    width: 100%;\n    height: 100%;\n`;\n\nexport const GuideIcon = css`\n    line-height: 0px;\n    font-size: 24px;\n    height: 32px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: #000;\n    transition: background .2s ease;\n    box-sizing: border-box;\n    flex-shrink: 0;\n`;\n\nexport const GuideRight = css`\n    padding-left: 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n`;\n\nexport const GuideTitle = css`\n    display: flex;\n    color: #000;\n    font-weight: 600;\n    align-items: center;\n    transition: color .15s;\n`;\n\nexport const GuideTitleBody = css`\n    font-size: 16px;\n    line-height: 20px;\n`;\n\nexport const GuideTitleBodyMd = css`\n    font-size: 18px;\n`;\n\nexport const GuideBody = css`\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 20px;\n\n    color: ${colors.dark80};\n    white-space: normal;\n    overflow: hidden;\n    text-overflow: ellipsis;\n`;\n\nexport const GuideBodyMd = css`\n    font-size: 16px;\n`;\n\nexport const GuidePointer = 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\nexport const GuideListHost = css`\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    justify-content: center;\n    gap: 24px;\n`;","import React from \"react\"\n\nimport * as cn 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        ${cn.GuideHost}\n        ${kind === \"secondary\" && cn.GuideHostSecondary}\n        ${kind === \"secondary\" && size == \"md\" && cn.GuideHostSecondaryMd}\n    `}>\n        <a className={cn.GuideLink} href={href}>\n            <div className={`\n                ${cn.GuideItem}\n                ${kind === \"secondary\" && cn.GuideItemSecondary}\n            `}>\n                {icon && <div className={cn.GuideIcon}>\n                    {icon}\n                </div>}\n                <div className={cn.GuideRight}>\n                    <div className={cn.GuideTitle}>\n                        <div className={`\n                            ${cn.GuideTitle} \n                            ${cn.GuideTitleBody}\n                            ${size == \"md\" && cn.GuideTitleBodyMd}\n                        `}>\n                            {title}\n                        </div>\n                        <Pointer/>\n                    </div>\n                    <div className={`\n                        ${cn.GuideBody}\n                        ${size == \"md\" && cn.GuideBodyMd}\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={cn.GuideListHost}>\n        {children}\n    </div>\n}\n\nfunction Pointer() {\n    return <div data-pointer=\"true\" className={cn.GuidePointer}>\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 React from \"react\"\n\nimport * as cn from \"./Steps.styles\";\n\nexport interface StepsProps {\n    children: React.ReactNode;\n}\n\nexport function Steps({children}: StepsProps) {\n    return <ol className={cn.StepsHost}>\n        {children}\n    </ol>\n}\n\nexport interface StepsItemProps {\n    children: React.ReactNode;\n}\n\nSteps.Item = function StepsItem({children}: StepsItemProps) {\n    return <li className={cn.StepsLi}>\n        {children}\n    </li>\n}","import {css} from \"@linaria/core\";\n\nexport const StepsHost = 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\nexport const StepsLi = 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`;","import React from \"react\"\n\nimport * as cn from \"./Table.styles\";\n\nexport interface TableProps {\n    children: React.ReactNode;\n}\n\nexport function Table({children}: TableProps) {\n    return <table className={cn.TableHost}>\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={cn.TableTh}>\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={cn.TableTr}>\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={cn.TableTd}>\n        {children}\n    </td>\n\n}","import {css} from \"@linaria/core\";\n\nconst colors = {\n    primary: \"#D1D5DB\"\n}\n\nexport const TableHost = css`\n    display: block;\n    overflow-x: scroll;\n\n    border-collapse: collapse;\n    border-radius: 3px;\n`;\n\nexport const TableTh = 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\nexport const TableTr = css`\n    padding: 0;\n    margin: 0;\n    border-top-width: 1px;\n    border-color: ${colors.primary};\n`;\n\nexport const TableTd = css`\n    padding: 0.5rem 1rem;\n    margin: 0;\n\n    border-width: 1px;\n    border-color: ${colors.primary};\n`;\n\n\n","import {css} from \"@linaria/core\";\n\nconst colors = {\n    primary: \"#D1D5DB\",\n    gray: {\n        50: \"#F7F7F8\",\n        100: \"#ECECF1\",\n        600: \"#6E6E80\",\n        800: \"#353740\",\n        900: \"#202123\"\n    }\n}\n\nconst TableV2 = {\n    Host: css`\n        width: 100%;\n        overflow-x: auto;\n        -webkit-overflow-scrolling: touch;\n    `,\n    Table: css`\n        display: table;\n        width: 100%;\n        min-width: 640px; // Ensures table doesn't get too squished\n        border-collapse: separate;\n        border-spacing: 0;\n        border: 1px solid ${colors.gray[100]};\n        border-radius: 8px;\n        font-size: 0.875rem;\n        line-height: 1.25rem;\n        margin-top: 1rem;\n        overflow: hidden;\n    `,\n    Thead: css`\n        background: ${colors.gray[50]};\n    `,\n    Th: css`\n        text-align: left;\n        font-weight: 500;\n        padding: 0.5rem 1rem;\n        color: ${colors.gray[800]};\n        vertical-align: middle;\n        border-bottom: 1px solid ${colors.gray[100]};\n        white-space: nowrap;\n\n        &:first-child {\n            width: 24rem;\n            max-width: 40%;\n            border-right: 1px solid ${colors.gray[100]};\n\n            @media (max-width: 768px) {\n                width: auto;\n                min-width: 12rem;\n            }\n        }\n\n        &.numeric {\n            text-align: right;\n            font-weight: 400;\n            min-width: 5rem;\n            \n            @media (max-width: 768px) {\n                min-width: 4rem;\n            }\n        }\n    `,\n    Tr: css`\n        &:not(:last-child) {\n            border-bottom: 1px solid ${colors.gray[100]};\n        }\n    `,\n    Td: css`\n        padding: 0.5rem 1rem;\n        vertical-align: middle;\n        border-top: 1px solid ${colors.gray[100]};\n\n        &:first-child {\n            border-right: 1px solid ${colors.gray[100]};\n        }\n\n        &.numeric {\n            text-align: right;\n        }\n\n        &.muted {\n            color: ${colors.gray[600]};\n        }\n\n        @media (max-width: 768px) {\n            padding: 0.5rem;\n        }\n    `,\n    Cell: css`\n        display: flex;\n        align-items: baseline;\n        width: 100%;\n        gap: 0.5rem;\n    `,\n    CellContent: css`\n        flex: 1;\n        text-align: right;\n    `,\n    ModelCell: css`\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        white-space: nowrap;\n        color: ${colors.gray[900]};\n        \n        @media (max-width: 768px) {\n            font-size: 0.8125rem;\n        }\n    `\n} \n\nexport default {\n    TableV2\n}","import React from \"react\"\n\nimport cn from \"./TableV2.styles\";\n\nexport interface TableV2Props {\n    children: React.ReactNode;\n    className?: string;\n}\n\nexport function TableV2({children, className}: TableV2Props) {\n    return (\n        <div className={cn.TableV2.Host}>\n            <table className={`${cn.TableV2.Table} ${className || ''}`}>\n                {children}\n            </table>\n        </div>\n    );\n}\n\nexport interface TableHeadProps {\n    children: React.ReactNode;\n}\n\nTableV2.Head = function TableHead({children}: TableHeadProps) {\n    return <thead className={cn.TableV2.Thead}>\n        {children}\n    </thead>\n}\n\nexport interface TableThProps {\n    children: React.ReactNode;\n    numeric?: boolean;\n}\n\nTableV2.Th = function TableTh({children, numeric}: TableThProps) {\n    return <th className={`${cn.TableV2.Th} ${numeric ? 'numeric' : ''}`}>\n        {children}\n    </th>\n}\n\nexport interface TableTrProps {\n    children: React.ReactNode;\n}\n\nTableV2.Tr = function TableTr({children}: TableTrProps) {\n    return <tr className={cn.TableV2.Tr}>\n        {children}\n    </tr>\n}\n\nexport interface TableTdProps {\n    children: React.ReactNode;\n    numeric?: boolean;\n    muted?: boolean;\n}\n\nTableV2.Td = function TableTd({children, numeric, muted}: TableTdProps) {\n    return <td className={`${cn.TableV2.Td} ${numeric ? 'numeric' : ''} ${muted ? 'muted' : ''}`}>\n        {children}\n    </td>\n}\n\nexport interface TableCellProps {\n    children: React.ReactNode;\n}\n\nTableV2.Cell = function TableCell({children}: TableCellProps) {\n    return <div className={cn.TableV2.Cell}>\n        <div className={cn.TableV2.CellContent}>\n            {children}\n        </div>\n    </div>\n}\n\nexport interface TableModelCellProps {\n    children: React.ReactNode;\n}\n\nTableV2.ModelCell = function TableModelCell({children}: TableModelCellProps) {\n    return <div className={cn.TableV2.ModelCell}>\n        {children}\n    </div>\n} ","import {css} from \"@linaria/core\";\n\nexport const TabsSampleHost = css`\n    position: relative;\n    max-width: 100%;\n`;\n\nexport const TabsSampleButtons = css`\n    display: flex;\n    align-items: center;\n`;\n\nexport const TabsSampleContent = css`\n    margin-top: 16px;\n`;\n\nexport const TabsArrowHost = css`\n    padding: 8px;\n    background-color: #ffffff;\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n`;\n\nexport const TabsArrowIcon = css`\n    width: 16px;\n    height: 16px;\n`;\n\nexport const TabsScrollerHost = css`\n    overflow-x: auto;\n    flex-grow: 1;\n`;\n\nexport const TabsScrollerContainer = 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\nexport const TabsButtonHost = 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\nexport const TabsButtonActive = css`\n    color: #111827;\n    background-color: #ffffff;\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n`;","import React, {useState, useRef, useEffect} from 'react'\nimport * as RadixTabs from \"@radix-ui/react-tabs\"\nimport {ChevronLeft, ChevronRight} from \"lucide-react\"\n\nimport * as cn 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={cn.TabsSampleHost}>\n                <div className={cn.TabsSampleButtons}>\n                    {showLeftArrow && (\n                        <button\n                            onClick={() => scroll('left')}\n                            className={cn.TabsArrowHost}\n                        >\n                            <ChevronLeft className={cn.TabsArrowIcon}/>\n                        </button>\n                    )}\n\n                    <div\n                        ref={scrollContainerRef}\n                        onScroll={handleScroll}\n                        className={cn.TabsScrollerHost}\n                    >\n                        <div className={cn.TabsScrollerContainer}>\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={cn.TabsArrowHost}\n                        >\n                            <ChevronRight className={cn.TabsArrowIcon}/>\n                        </button>\n                    )}\n                </div>\n\n                <div className={cn.TabsSampleContent}>\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={`${cn.TabsButtonHost}`}>\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 React from \"react\"\nimport * as RadixTabs from \"@radix-ui/react-tabs\";\n\nimport * as cn 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={cn.UnderlineNavHost}>\n            <RadixTabs.List asChild>\n                <ul className={cn.UnderlineNavUl}>\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={cn.UnderlineNavItem}>\n            <a href={href} className={`${cn.UnderlineNavItemLink}`}>\n                {children}\n            </a>\n        </li>\n    </RadixTabs.Trigger>\n}","import {css} from \"@linaria/core\"\n\nexport const UnderlineNavHost = 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\nexport const UnderlineNavUl = 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\nexport const UnderlineNavItem = 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\nexport const UnderlineNavItemLink = css`\n    display: inline-flex;\n    border-bottom: 3px solid transparent;\n    text-decoration: none;\n\n    height: 100%;\n    padding: 10px;\n`;\n\nexport const UnderlineNavItemLinkActive = css`\n`;"],"names":["GuideTitle","GuideCard","_ref","children","href","icon","title","kind","size","React","createElement","className","concat","cn","Pointer","xmlns","width","height","fill","viewBox","fillRule","d","clipRule","List","_ref2","Steps","Item","Table","Th","Tr","_ref3","Td","_ref4","Host","Thead","Cell","CellContent","ModelCell","TableV2","Head","numeric","_ref5","muted","_ref6","_ref7","TabsArrowHost","TabsArrowIcon","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","UnderlineNav","onChange"],"mappings":"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"}

package/dist/UnderlineNav-Co08Gykm.js

@@ -1,2 +0,0 @@
-import e,{useState as n,useRef as t,useEffect as r}from"react";import{a}from"./_rollupPluginBabelHelpers-BHehKRBq.js";import*as o from"@radix-ui/react-tabs";import{ChevronLeft as l,ChevronRight as c}from"lucide-react";var i="XydComponents-Component-writer-GuideCard__GuideTitle";function m(n){var t=n.children,r=n.href,a=n.icon,o=n.title,l=n.kind,c=n.size;return e.createElement("div",{className:"\n        ".concat("XydComponents-Component-writer-GuideCard__GuideHost","\n        ").concat("secondary"===l&&"XydComponents-Component-writer-GuideCard__GuideHostSecondary","\n        ").concat("secondary"===l&&"md"==c&&"XydComponents-Component-writer-GuideCard__GuideHostSecondaryMd","\n    ")},e.createElement("a",{className:"XydComponents-Component-writer-GuideCard__GuideLink",href:r},e.createElement("div",{className:"\n                ".concat("XydComponents-Component-writer-GuideCard__GuideItem","\n                ").concat("secondary"===l&&"XydComponents-Component-writer-GuideCard__GuideItemSecondary","\n            ")},a&&e.createElement("div",{className:"XydComponents-Component-writer-GuideCard__GuideIcon"},a),e.createElement("div",{className:"XydComponents-Component-writer-GuideCard__GuideRight"},e.createElement("div",{className:i},e.createElement("div",{className:"\n                            ".concat(i," \n                            ").concat("XydComponents-Component-writer-GuideCard__GuideTitleBody","\n                            ").concat("md"==c&&"XydComponents-Component-writer-GuideCard__GuideTitleBodyMd","\n                        ")},o),e.createElement(s,null)),e.createElement("div",{className:"\n                        ".concat("XydComponents-Component-writer-GuideCard__GuideBody","\n                        ").concat("md"==c&&"XydComponents-Component-writer-GuideCard__GuideBodyMd","\n                    ")},t)))))}function s(){return e.createElement("div",{"data-pointer":"true",className:"XydComponents-Component-writer-GuideCard__GuidePointer"},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"})))}m.List=function(n){var t=n.children;return e.createElement("div",{className:"XydComponents-Component-writer-GuideCard__GuideListHost"},t)};function d(n){var t=n.children;return e.createElement("ol",{className:"XydComponents-Component-writer-Steps__StepsHost"},t)}d.Item=function(n){var t=n.children;return e.createElement("li",{className:"XydComponents-Component-writer-Steps__StepsLi"},t)};function C(n){var t=n.children;return e.createElement("table",{className:"XydComponents-Component-writer-Table__TableHost"},t)}C.Th=function(n){var t=n.children;return e.createElement("th",{className:"XydComponents-Component-writer-Table__TableTh"},t)},C.Tr=function(n){var t=n.children;return e.createElement("tr",{className:"XydComponents-Component-writer-Table__TableTr"},t)},C.Td=function(n){var t=n.children;return e.createElement("td",{className:"XydComponents-Component-writer-Table__TableTd"},t)};var u={Host:"XydComponents-Component-writer-Table__Host",Table:"XydComponents-Component-writer-Table__Table",Thead:"XydComponents-Component-writer-Table__Thead",Th:"XydComponents-Component-writer-Table__Th",Tr:"XydComponents-Component-writer-Table__Tr",Td:"XydComponents-Component-writer-Table__Td",Cell:"XydComponents-Component-writer-Table__Cell",CellContent:"XydComponents-Component-writer-Table__CellContent",ModelCell:"XydComponents-Component-writer-Table__ModelCell"};function p(n){var t=n.children,r=n.className;return e.createElement("div",{className:u.Host},e.createElement("table",{className:"".concat(u.Table," ").concat(r||"")},t))}p.Head=function(n){var t=n.children;return e.createElement("thead",{className:u.Thead},t)},p.Th=function(n){var t=n.children,r=n.numeric;return e.createElement("th",{className:"".concat(u.Th," ").concat(r?"numeric":"")},t)},p.Tr=function(n){var t=n.children;return e.createElement("tr",{className:u.Tr},t)},p.Td=function(n){var t=n.children,r=n.numeric,a=n.muted;return e.createElement("td",{className:"".concat(u.Td," ").concat(r?"numeric":""," ").concat(a?"muted":"")},t)},p.Cell=function(n){var t=n.children;return e.createElement("div",{className:u.Cell},e.createElement("div",{className:u.CellContent},t))},p.ModelCell=function(n){var t=n.children;return e.createElement("div",{className:u.ModelCell},t)};var _="XydComponents-Component-writer-Tabs__TabsArrowHost",v="XydComponents-Component-writer-Tabs__TabsArrowIcon";function T(i){var m=i.children,s=i.items,d=i.tabIndex,C=n(!1),u=a(C,2),p=u[0],T=u[1],w=n(!1),y=a(w,2),E=y[0],N=y[1],b=t(null),f=n(s[d||0]||""),X=a(f,2),G=X[0],H=X[1],g=function(){if(b.current){var e=b.current,n=e.scrollLeft,t=e.scrollWidth,r=e.clientWidth;T(n>0),N(n<t-r)}};r((function(){return g(),window.addEventListener("resize",g),function(){return window.removeEventListener("resize",g)}}),[]);var S=function(e){if(b.current){var n="left"===e?-200:200;b.current.scrollBy({left:n,behavior:"smooth"})}};return e.createElement(o.Root,{asChild:!0,value:G,onValueChange:H},e.createElement("div",{className:"XydComponents-Component-writer-Tabs__TabsSampleHost"},e.createElement("div",{className:"XydComponents-Component-writer-Tabs__TabsSampleButtons"},p&&e.createElement("button",{onClick:function(){return S("left")},className:_},e.createElement(l,{className:v})),e.createElement("div",{ref:b,onScroll:g,className:"XydComponents-Component-writer-Tabs__TabsScrollerHost"},e.createElement("div",{className:"XydComponents-Component-writer-Tabs__TabsScrollerContainer"},e.createElement(o.List,null,s.map((function(n,t){return e.createElement(h,{key:t,value:n},n)}))))),E&&e.createElement("button",{onClick:function(){return S("right")},className:_},e.createElement(c,{className:v}))),e.createElement("div",{className:"XydComponents-Component-writer-Tabs__TabsSampleContent"},m)))}function h(n){var t=n.children,r=n.value;return e.createElement(o.Trigger,{asChild:!0,value:r},e.createElement("button",{className:"".concat("XydComponents-Component-writer-Tabs__TabsButtonHost")},t))}T.Content=function(n){var t=n.children,r=n.value;return e.createElement(o.Content,{asChild:!0,value:r},t)};function w(n){var t=n.children,r=n.value,a=n.onChange;return e.createElement(o.Root,{asChild:!0,value:r,onValueChange:a},e.createElement("nav",{className:"XydComponents-Component-writer-UnderlineNav__UnderlineNavHost"},e.createElement(o.List,{asChild:!0},e.createElement("ul",{className:"XydComponents-Component-writer-UnderlineNav__UnderlineNavUl"},t))))}w.Item=function(n){var t=n.children,r=n.value,a=n.href;return e.createElement(o.Trigger,{asChild:!0,value:r},e.createElement("li",{className:"XydComponents-Component-writer-UnderlineNav__UnderlineNavItem"},e.createElement("a",{href:a,className:"".concat("XydComponents-Component-writer-UnderlineNav__UnderlineNavItemLink")},t)))};export{m as G,d as S,C as T,w as U,p as a,T as b};
-//# sourceMappingURL=UnderlineNav-Co08Gykm.js.map

package/dist/UnderlineNav-Co08Gykm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"UnderlineNav-Co08Gykm.js","sources":["../src/writer/GuideCard/GuideCard.styles.tsx","../src/writer/GuideCard/GuideCard.tsx","../src/writer/Steps/Steps.tsx","../src/writer/Steps/Steps.styles.tsx","../src/writer/Table/Table.tsx","../src/writer/Table/Table.styles.tsx","../src/writer/Table/TableV2.styles.tsx","../src/writer/Table/TableV2.tsx","../src/writer/Tabs/Tabs.styles.tsx","../src/writer/Tabs/Tabs.tsx","../src/writer/UnderlineNav/UnderlineNav.tsx","../src/writer/UnderlineNav/UnderlineNav.styles.tsx"],"sourcesContent":["import {css} from \"@linaria/core\";\n\nexport const GuideHost = css``;\n\nexport const GuideHostSecondary = 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\nexport const GuideHostSecondaryMd = css`\n    padding: 21px 25px 25px;\n`;\n\nexport const GuideLink = css`\n    width: 100%;\n    height: 100%;\n`;\n\nexport const GuideItem = 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\nexport const GuideItemSecondary = css`\n    width: 100%;\n    height: 100%;\n`;\n\nexport const GuideIcon = 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\nexport const GuideRight = css`\n    padding-left: 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n`;\n\nexport const GuideTitle = css`\n    display: flex;\n    color: #202123;\n    font-weight: 400;\n    align-items: center;\n    transition: color .15s;\n`;\n\nexport const GuideTitleBody = css`\n    font-size: 16px;\n    line-height: 20px;\n`;\n\nexport const GuideTitleBodyMd = css`\n    font-size: 18px;\n`;\n\nexport const GuideBody = 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\nexport const GuideBodyMd = css`\n    font-size: 16px;\n`;\n\nexport const GuidePointer = 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\nexport const GuideListHost = css`\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    justify-content: center;\n    gap: 30px;\n`;","import React from \"react\"\n\nimport * as cn 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        ${cn.GuideHost}\n        ${kind === \"secondary\" && cn.GuideHostSecondary}\n        ${kind === \"secondary\" && size == \"md\" && cn.GuideHostSecondaryMd}\n    `}>\n        <a className={cn.GuideLink} href={href}>\n            <div className={`\n                ${cn.GuideItem}\n                ${kind === \"secondary\" && cn.GuideItemSecondary}\n            `}>\n                {icon && <div className={cn.GuideIcon}>\n                    {icon}\n                </div>}\n                <div className={cn.GuideRight}>\n                    <div className={cn.GuideTitle}>\n                        <div className={`\n                            ${cn.GuideTitle} \n                            ${cn.GuideTitleBody}\n                            ${size == \"md\" && cn.GuideTitleBodyMd}\n                        `}>\n                            {title}\n                        </div>\n                        <Pointer/>\n                    </div>\n                    <div className={`\n                        ${cn.GuideBody}\n                        ${size == \"md\" && cn.GuideBodyMd}\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={cn.GuideListHost}>\n        {children}\n    </div>\n}\n\nfunction Pointer() {\n    return <div data-pointer=\"true\" className={cn.GuidePointer}>\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 React from \"react\"\n\nimport * as cn from \"./Steps.styles\";\n\nexport interface StepsProps {\n    children: React.ReactNode;\n}\n\nexport function Steps({children}: StepsProps) {\n    return <ol className={cn.StepsHost}>\n        {children}\n    </ol>\n}\n\nexport interface StepsItemProps {\n    children: React.ReactNode;\n}\n\nSteps.Item = function StepsItem({children}: StepsItemProps) {\n    return <li className={cn.StepsLi}>\n        {children}\n    </li>\n}","import {css} from \"@linaria/core\";\n\nexport const StepsHost = 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\nexport const StepsLi = 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`;","import React from \"react\"\n\nimport * as cn from \"./Table.styles\";\n\nexport interface TableProps {\n    children: React.ReactNode;\n}\n\nexport function Table({children}: TableProps) {\n    return <table className={cn.TableHost}>\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={cn.TableTh}>\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={cn.TableTr}>\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={cn.TableTd}>\n        {children}\n    </td>\n\n}","import {css} from \"@linaria/core\";\n\nconst colors = {\n    primary: \"#D1D5DB\"\n}\n\nexport const TableHost = css`\n    display: block;\n    overflow-x: scroll;\n\n    border-collapse: collapse;\n    border-radius: 3px;\n`;\n\nexport const TableTh = 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\nexport const TableTr = css`\n    padding: 0;\n    margin: 0;\n    border-top-width: 1px;\n    border-color: ${colors.primary};\n`;\n\nexport const TableTd = css`\n    padding: 0.5rem 1rem;\n    margin: 0;\n\n    border-width: 1px;\n    border-color: ${colors.primary};\n`;\n\n\n","import {css} from \"@linaria/core\";\n\nconst colors = {\n    primary: \"#D1D5DB\",\n    gray: {\n        50: \"#F7F7F8\",\n        100: \"#ECECF1\",\n        600: \"#6E6E80\",\n        800: \"#353740\",\n        900: \"#202123\"\n    }\n}\n\nconst TableV2 = {\n    Host: css`\n        width: 100%;\n        overflow-x: auto;\n        -webkit-overflow-scrolling: touch;\n    `,\n    Table: css`\n        display: table;\n        width: 100%;\n        min-width: 640px; // Ensures table doesn't get too squished\n        border-collapse: separate;\n        border-spacing: 0;\n        border: 1px solid ${colors.gray[100]};\n        border-radius: 8px;\n        font-size: 0.875rem;\n        line-height: 1.25rem;\n        margin-top: 1rem;\n        overflow: hidden;\n    `,\n    Thead: css`\n        background: ${colors.gray[50]};\n    `,\n    Th: css`\n        text-align: left;\n        font-weight: 500;\n        padding: 0.5rem 1rem;\n        color: ${colors.gray[800]};\n        vertical-align: middle;\n        border-bottom: 1px solid ${colors.gray[100]};\n        white-space: nowrap;\n\n        &:first-child {\n            width: 24rem;\n            max-width: 40%;\n            border-right: 1px solid ${colors.gray[100]};\n\n            @media (max-width: 768px) {\n                width: auto;\n                min-width: 12rem;\n            }\n        }\n\n        &.numeric {\n            text-align: right;\n            font-weight: 400;\n            min-width: 5rem;\n            \n            @media (max-width: 768px) {\n                min-width: 4rem;\n            }\n        }\n    `,\n    Tr: css`\n        &:not(:last-child) {\n            border-bottom: 1px solid ${colors.gray[100]};\n        }\n    `,\n    Td: css`\n        padding: 0.5rem 1rem;\n        vertical-align: middle;\n        border-top: 1px solid ${colors.gray[100]};\n\n        &:first-child {\n            border-right: 1px solid ${colors.gray[100]};\n        }\n\n        &.numeric {\n            text-align: right;\n        }\n\n        &.muted {\n            color: ${colors.gray[600]};\n        }\n\n        @media (max-width: 768px) {\n            padding: 0.5rem;\n        }\n    `,\n    Cell: css`\n        display: flex;\n        align-items: baseline;\n        width: 100%;\n        gap: 0.5rem;\n    `,\n    CellContent: css`\n        flex: 1;\n        text-align: right;\n    `,\n    ModelCell: css`\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        white-space: nowrap;\n        color: ${colors.gray[900]};\n        \n        @media (max-width: 768px) {\n            font-size: 0.8125rem;\n        }\n    `\n} \n\nexport default {\n    TableV2\n}","import React from \"react\"\n\nimport cn from \"./TableV2.styles\";\n\nexport interface TableV2Props {\n    children: React.ReactNode;\n    className?: string;\n}\n\nexport function TableV2({children, className}: TableV2Props) {\n    return (\n        <div className={cn.TableV2.Host}>\n            <table className={`${cn.TableV2.Table} ${className || ''}`}>\n                {children}\n            </table>\n        </div>\n    );\n}\n\nexport interface TableHeadProps {\n    children: React.ReactNode;\n}\n\nTableV2.Head = function TableHead({children}: TableHeadProps) {\n    return <thead className={cn.TableV2.Thead}>\n        {children}\n    </thead>\n}\n\nexport interface TableThProps {\n    children: React.ReactNode;\n    numeric?: boolean;\n}\n\nTableV2.Th = function TableTh({children, numeric}: TableThProps) {\n    return <th className={`${cn.TableV2.Th} ${numeric ? 'numeric' : ''}`}>\n        {children}\n    </th>\n}\n\nexport interface TableTrProps {\n    children: React.ReactNode;\n}\n\nTableV2.Tr = function TableTr({children}: TableTrProps) {\n    return <tr className={cn.TableV2.Tr}>\n        {children}\n    </tr>\n}\n\nexport interface TableTdProps {\n    children: React.ReactNode;\n    numeric?: boolean;\n    muted?: boolean;\n}\n\nTableV2.Td = function TableTd({children, numeric, muted}: TableTdProps) {\n    return <td className={`${cn.TableV2.Td} ${numeric ? 'numeric' : ''} ${muted ? 'muted' : ''}`}>\n        {children}\n    </td>\n}\n\nexport interface TableCellProps {\n    children: React.ReactNode;\n}\n\nTableV2.Cell = function TableCell({children}: TableCellProps) {\n    return <div className={cn.TableV2.Cell}>\n        <div className={cn.TableV2.CellContent}>\n            {children}\n        </div>\n    </div>\n}\n\nexport interface TableModelCellProps {\n    children: React.ReactNode;\n}\n\nTableV2.ModelCell = function TableModelCell({children}: TableModelCellProps) {\n    return <div className={cn.TableV2.ModelCell}>\n        {children}\n    </div>\n} ","import {css} from \"@linaria/core\";\n\nexport const TabsSampleHost = css`\n    position: relative;\n    max-width: 100%;\n`;\n\nexport const TabsSampleButtons = css`\n    display: flex;\n    align-items: center;\n`;\n\nexport const TabsSampleContent = css`\n    margin-top: 16px;\n`;\n\nexport const TabsArrowHost = css`\n    padding: 8px;\n    background-color: #ffffff;\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n`;\n\nexport const TabsArrowIcon = css`\n    width: 16px;\n    height: 16px;\n`;\n\nexport const TabsScrollerHost = css`\n    overflow-x: auto;\n    flex-grow: 1;\n`;\n\nexport const TabsScrollerContainer = 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\nexport const TabsButtonHost = 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\nexport const TabsButtonActive = css`\n    color: #111827;\n    background-color: #ffffff;\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n`;","import React, {useState, useRef, useEffect} from 'react'\nimport * as RadixTabs from \"@radix-ui/react-tabs\"\nimport {ChevronLeft, ChevronRight} from \"lucide-react\"\n\nimport * as cn 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={cn.TabsSampleHost}>\n                <div className={cn.TabsSampleButtons}>\n                    {showLeftArrow && (\n                        <button\n                            onClick={() => scroll('left')}\n                            className={cn.TabsArrowHost}\n                        >\n                            <ChevronLeft className={cn.TabsArrowIcon}/>\n                        </button>\n                    )}\n\n                    <div\n                        ref={scrollContainerRef}\n                        onScroll={handleScroll}\n                        className={cn.TabsScrollerHost}\n                    >\n                        <div className={cn.TabsScrollerContainer}>\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={cn.TabsArrowHost}\n                        >\n                            <ChevronRight className={cn.TabsArrowIcon}/>\n                        </button>\n                    )}\n                </div>\n\n                <div className={cn.TabsSampleContent}>\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={`${cn.TabsButtonHost}`}>\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 React from \"react\"\nimport * as RadixTabs from \"@radix-ui/react-tabs\";\n\nimport * as cn 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={cn.UnderlineNavHost}>\n            <RadixTabs.List asChild>\n                <ul className={cn.UnderlineNavUl}>\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={cn.UnderlineNavItem}>\n            <a href={href} className={`${cn.UnderlineNavItemLink}`}>\n                {children}\n            </a>\n        </li>\n    </RadixTabs.Trigger>\n}","import {css} from \"@linaria/core\"\n\nexport const UnderlineNavHost = 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\nexport const UnderlineNavUl = 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\nexport const UnderlineNavItem = 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\nexport const UnderlineNavItemLink = css`\n    display: inline-flex;\n    border-bottom: 3px solid transparent;\n    text-decoration: none;\n\n    height: 100%;\n    padding: 10px;\n`;\n\nexport const UnderlineNavItemLinkActive = css`\n`;"],"names":["GuideTitle","GuideCard","_ref","children","href","icon","title","kind","size","React","createElement","className","concat","cn","Pointer","xmlns","width","height","fill","viewBox","fillRule","d","clipRule","List","_ref2","Steps","Item","Table","Th","Tr","_ref3","Td","_ref4","Host","Thead","Cell","CellContent","ModelCell","TableV2","Head","numeric","_ref5","muted","_ref6","_ref7","TabsArrowHost","TabsArrowIcon","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","UnderlineNav","onChange"],"mappings":"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"}

package/dist/UnderlineNav-DC3UVmnZ.js

@@ -1,2 +0,0 @@
-import e,{useState as n,useRef as t,useEffect as r}from"react";import{a}from"./_rollupPluginBabelHelpers-CxmswfqM.js";import*as o from"@radix-ui/react-tabs";import{ChevronLeft as l,ChevronRight as c}from"lucide-react";var i="XydComponents-Component-writer-GuideCard__GuideTitle";function m(n){var t=n.children,r=n.href,a=n.icon,o=n.title,l=n.kind,c=n.size;return e.createElement("div",{className:"\n        ".concat("XydComponents-Component-writer-GuideCard__GuideHost","\n        ").concat("secondary"===l&&"XydComponents-Component-writer-GuideCard__GuideHostSecondary","\n        ").concat("secondary"===l&&"md"==c&&"XydComponents-Component-writer-GuideCard__GuideHostSecondaryMd","\n    ")},e.createElement("a",{className:"XydComponents-Component-writer-GuideCard__GuideLink",href:r},e.createElement("div",{className:"\n                ".concat("XydComponents-Component-writer-GuideCard__GuideItem","\n                ").concat("secondary"===l&&"XydComponents-Component-writer-GuideCard__GuideItemSecondary","\n            ")},a&&e.createElement("div",{className:"XydComponents-Component-writer-GuideCard__GuideIcon"},a),e.createElement("div",{className:"XydComponents-Component-writer-GuideCard__GuideRight"},e.createElement("div",{className:i},e.createElement("div",{className:"\n                            ".concat(i," \n                            ").concat("XydComponents-Component-writer-GuideCard__GuideTitleBody","\n                            ").concat("md"==c&&"XydComponents-Component-writer-GuideCard__GuideTitleBodyMd","\n                        ")},o),e.createElement(s,null)),e.createElement("div",{className:"\n                        ".concat("XydComponents-Component-writer-GuideCard__GuideBody","\n                        ").concat("md"==c&&"XydComponents-Component-writer-GuideCard__GuideBodyMd","\n                    ")},t)))))}function s(){return e.createElement("div",{"data-pointer":"true",className:"XydComponents-Component-writer-GuideCard__GuidePointer"},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"})))}m.List=function(n){var t=n.children;return e.createElement("div",{className:"XydComponents-Component-writer-GuideCard__GuideListHost"},t)};function d(n){var t=n.children;return e.createElement("ol",{className:"XydComponents-Component-writer-Steps__StepsHost"},t)}d.Item=function(n){var t=n.children;return e.createElement("li",{className:"XydComponents-Component-writer-Steps__StepsLi"},t)};function C(n){var t=n.children;return e.createElement("table",{className:"XydComponents-Component-writer-Table__TableHost"},t)}C.Th=function(n){var t=n.children;return e.createElement("th",{className:"XydComponents-Component-writer-Table__TableTh"},t)},C.Tr=function(n){var t=n.children;return e.createElement("tr",{className:"XydComponents-Component-writer-Table__TableTr"},t)},C.Td=function(n){var t=n.children;return e.createElement("td",{className:"XydComponents-Component-writer-Table__TableTd"},t)};var u={Host:"XydComponents-Component-writer-Table__Host",Table:"XydComponents-Component-writer-Table__Table",Thead:"XydComponents-Component-writer-Table__Thead",Th:"XydComponents-Component-writer-Table__Th",Tr:"XydComponents-Component-writer-Table__Tr",Td:"XydComponents-Component-writer-Table__Td",Cell:"XydComponents-Component-writer-Table__Cell",CellContent:"XydComponents-Component-writer-Table__CellContent",ModelCell:"XydComponents-Component-writer-Table__ModelCell"};function p(n){var t=n.children,r=n.className;return e.createElement("div",{className:u.Host},e.createElement("table",{className:"".concat(u.Table," ").concat(r||"")},t))}p.Head=function(n){var t=n.children;return e.createElement("thead",{className:u.Thead},t)},p.Th=function(n){var t=n.children,r=n.numeric;return e.createElement("th",{className:"".concat(u.Th," ").concat(r?"numeric":"")},t)},p.Tr=function(n){var t=n.children;return e.createElement("tr",{className:u.Tr},t)},p.Td=function(n){var t=n.children,r=n.numeric,a=n.muted;return e.createElement("td",{className:"".concat(u.Td," ").concat(r?"numeric":""," ").concat(a?"muted":"")},t)},p.Cell=function(n){var t=n.children;return e.createElement("div",{className:u.Cell},e.createElement("div",{className:u.CellContent},t))},p.ModelCell=function(n){var t=n.children;return e.createElement("div",{className:u.ModelCell},t)};var _="XydComponents-Component-writer-Tabs__TabsArrowHost",v="XydComponents-Component-writer-Tabs__TabsArrowIcon";function T(i){var m=i.children,s=i.items,d=i.tabIndex,C=n(!1),u=a(C,2),p=u[0],T=u[1],w=n(!1),y=a(w,2),E=y[0],N=y[1],b=t(null),f=n(s[d||0]||""),X=a(f,2),G=X[0],H=X[1],g=function(){if(b.current){var e=b.current,n=e.scrollLeft,t=e.scrollWidth,r=e.clientWidth;T(n>0),N(n<t-r)}};r((function(){return g(),window.addEventListener("resize",g),function(){return window.removeEventListener("resize",g)}}),[]);var S=function(e){if(b.current){var n="left"===e?-200:200;b.current.scrollBy({left:n,behavior:"smooth"})}};return e.createElement(o.Root,{asChild:!0,value:G,onValueChange:H},e.createElement("div",{className:"XydComponents-Component-writer-Tabs__TabsSampleHost"},e.createElement("div",{className:"XydComponents-Component-writer-Tabs__TabsSampleButtons"},p&&e.createElement("button",{onClick:function(){return S("left")},className:_},e.createElement(l,{className:v})),e.createElement("div",{ref:b,onScroll:g,className:"XydComponents-Component-writer-Tabs__TabsScrollerHost"},e.createElement("div",{className:"XydComponents-Component-writer-Tabs__TabsScrollerContainer"},e.createElement(o.List,null,s.map((function(n,t){return e.createElement(h,{key:t,value:n},n)}))))),E&&e.createElement("button",{onClick:function(){return S("right")},className:_},e.createElement(c,{className:v}))),e.createElement("div",{className:"XydComponents-Component-writer-Tabs__TabsSampleContent"},m)))}function h(n){var t=n.children,r=n.value;return e.createElement(o.Trigger,{asChild:!0,value:r},e.createElement("button",{className:"".concat("XydComponents-Component-writer-Tabs__TabsButtonHost")},t))}T.Content=function(n){var t=n.children,r=n.value;return e.createElement(o.Content,{asChild:!0,value:r},t)};function w(n){var t=n.children,r=n.value,a=n.onChange;return e.createElement(o.Root,{asChild:!0,value:r,onValueChange:a},e.createElement("nav",{className:"XydComponents-Component-writer-UnderlineNav__UnderlineNavHost"},e.createElement(o.List,{asChild:!0},e.createElement("ul",{className:"XydComponents-Component-writer-UnderlineNav__UnderlineNavUl"},t))))}w.Item=function(n){var t=n.children,r=n.value,a=n.href;return e.createElement(o.Trigger,{asChild:!0,value:r},e.createElement("li",{className:"XydComponents-Component-writer-UnderlineNav__UnderlineNavItem"},e.createElement("a",{href:a,className:"".concat("XydComponents-Component-writer-UnderlineNav__UnderlineNavItemLink")},t)))};export{m as G,d as S,C as T,w as U,p as a,T as b};
-//# sourceMappingURL=UnderlineNav-DC3UVmnZ.js.map