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

package/src/writer/Steps/Steps.styles.tsx

@@ -1,36 +1,35 @@
 import {css} from "@linaria/core";
 
-export const $steps = {
-    host: css`
-        padding-left: 0;
-        list-style: none;
-        counter-reset: ordered-listitem;
+export const StepsHost = css`
+    padding-left: 0;
+    list-style: none;
+    counter-reset: ordered-listitem;
 
-        display: flex;
-        flex-direction: column;
-        gap: 6px;
-    `,
-    li: css`
-        padding-left: 32px;
-        position: relative;
-        line-height: 1.5;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+`;
 
-        &::after {
-            position: absolute;
-            top: 0;
-            left: 0;
-            counter-increment: ordered-listitem;
-            content: counter(ordered-listitem);
+export const StepsLi = css`
+    padding-left: 32px;
+    position: relative;
+    line-height: 1.5;
 
-            background: #ececf1;
-            color: #353740;
-            font-size: 12px;
-            line-height: 24px;
-            font-weight: 500;
-            text-align: center;
-            height: 24px;
-            width: 24px;
-            border-radius: 12px;
-        }
-    `,
-}
+    &::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        counter-increment: ordered-listitem;
+        content: counter(ordered-listitem);
+
+        background: #ececf1;
+        color: #353740;
+        font-size: 12px;
+        line-height: 24px;
+        font-weight: 500;
+        text-align: center;
+        height: 24px;
+        width: 24px;
+        border-radius: 12px;
+    }
+`;

package/src/writer/Steps/Steps.tsx

@@ -1,16 +1,15 @@
 import React from "react"
 
-import {$steps} from "./Steps.styles";
+import * as cn from "./Steps.styles";
 
 export interface StepsProps {
     children: React.ReactNode;
 }
 
 export function Steps({children}: StepsProps) {
-    return <ol className={$steps.host}>
+    return <ol className={cn.StepsHost}>
         {children}
     </ol>
-
 }
 
 export interface StepsItemProps {
@@ -18,7 +17,7 @@ export interface StepsItemProps {
 }
 
 Steps.Item = function StepsItem({children}: StepsItemProps) {
-    return <li className={$steps.li}>
+    return <li className={cn.StepsLi}>
         {children}
     </li>
 }

package/src/writer/Table/Table.styles.tsx

@@ -4,36 +4,37 @@ const colors = {
     primary: "#D1D5DB"
 }
 
-export const $table = {
-    host: css`
-        display: block;
-        overflow-x: scroll;
-
-        border-collapse: collapse;
-        border-radius: 3px;
-    `,
-    th: css`
-        padding: 0.5rem 1rem;
-        margin: 0;
-
-        font-weight: 600;
-        border-width: 1px;
-        border-color: ${colors.primary};
-        background: rgba(234, 238, 242, 0.5);
-    `,
-    tr: css`
-        padding: 0;
-        margin: 0;
-        border-top-width: 1px;
-        border-color: ${colors.primary};
-    `,
-    td: css`
-        padding: 0.5rem 1rem;
-        margin: 0;
-
-        border-width: 1px;
-        border-color: ${colors.primary};
-    `
-}
+export const TableHost = css`
+    display: block;
+    overflow-x: scroll;
+
+    border-collapse: collapse;
+    border-radius: 3px;
+`;
+
+export const TableTh = css`
+    padding: 0.5rem 1rem;
+    margin: 0;
+
+    font-weight: 600;
+    border-width: 1px;
+    border-color: ${colors.primary};
+    background: rgba(234, 238, 242, 0.5);
+`;
+
+export const TableTr = css`
+    padding: 0;
+    margin: 0;
+    border-top-width: 1px;
+    border-color: ${colors.primary};
+`;
+
+export const TableTd = css`
+    padding: 0.5rem 1rem;
+    margin: 0;
+
+    border-width: 1px;
+    border-color: ${colors.primary};
+`;
 
 

package/src/writer/Table/Table.tsx

@@ -1,13 +1,13 @@
 import React from "react"
 
-import {$table} from "./Table.styles";
+import * as cn from "./Table.styles";
 
 export interface TableProps {
     children: React.ReactNode;
 }
 
 export function Table({children}: TableProps) {
-    return <table className={$table.host}>
+    return <table className={cn.TableHost}>
         {children}
     </table>
 }
@@ -17,7 +17,7 @@ export interface TableThProps {
 }
 
 Table.Th = function TableTh({children}: TableThProps) {
-    return <th className={$table.th}>
+    return <th className={cn.TableTh}>
         {children}
     </th>
 }
@@ -27,7 +27,7 @@ export interface TableTrProps {
 }
 
 Table.Tr = function TableTr({children}: TableTrProps) {
-    return <tr className={$table.tr}>
+    return <tr className={cn.TableTr}>
         {children}
     </tr>
 
@@ -38,7 +38,7 @@ export interface TableTdProps {
 }
 
 Table.Td = function TableTd({children}: TableTdProps) {
-    return <td className={$table.td}>
+    return <td className={cn.TableTd}>
         {children}
     </td>
 

package/src/writer/Tabs/Tabs.styles.tsx

@@ -1,77 +1,74 @@
 import {css} from "@linaria/core";
 
-export const $sample = {
-    host: css`
-        position: relative;
-        max-width: 100%;
-    `,
-    buttons: css`
-        display: flex;
-        align-items: center;
-    `,
-    content: css`
-        margin-top: 16px;
-    `
-}
+export const TabsSampleHost = css`
+    position: relative;
+    max-width: 100%;
+`;
 
-export const $arrow = {
-    host: css`
-        padding: 8px;
-        background-color: #ffffff;
-        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    `,
-    icon: css`
-        width: 16px;
-        height: 16px;
-    `
-}
+export const TabsSampleButtons = css`
+    display: flex;
+    align-items: center;
+`;
+
+export const TabsSampleContent = css`
+    margin-top: 16px;
+`;
+
+export const TabsArrowHost = css`
+    padding: 8px;
+    background-color: #ffffff;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+`;
 
-export const $scroller = {
-    host: css`
-        overflow-x: auto;
-        flex-grow: 1;
-    `,
-    container: css`
-        display: inline-flex;
-        gap: 4px;
+export const TabsArrowIcon = css`
+    width: 16px;
+    height: 16px;
+`;
 
-        border-radius: 8px;
-        background-color: #F3F4F6;
-        
-        padding: 4px;
-        margin-left: 4px;
-    `
-}
+export const TabsScrollerHost = css`
+    overflow-x: auto;
+    flex-grow: 1;
+`;
 
-export const $button = {
-    host: css`
-        padding: 0.5rem 1rem;
+export const TabsScrollerContainer = css`
+    display: inline-flex;
+    gap: 4px;
 
-        border-radius: 0.375rem;
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        font-weight: 500;
-        white-space: nowrap;
+    border-radius: 8px;
+    background-color: #F3F4F6;
+    
+    padding: 4px;
+    margin-left: 4px;
+`;
 
-        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 300ms;
+export const TabsButtonHost = css`
+    padding: 0.5rem 1rem;
 
-        color: #6B7280;
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    white-space: nowrap;
 
-        &:hover {
-            color: #111827;
-        }
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
 
-        &[data-state="active"] {
-            color: #111827;
-            background-color: #ffffff;
-            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-        }
-    `,
-    $$active: css`
+    color: #6B7280;
+
+    &:hover {
+        color: #111827;
+    }
+
+    &[data-state="active"] {
         color: #111827;
         background-color: #ffffff;
         box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    `
-}
+    }
+`;
+
+export const TabsButtonActive = css`
+    color: #111827;
+    background-color: #ffffff;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+`;

package/src/writer/Tabs/Tabs.tsx

@@ -2,12 +2,7 @@ import React, {useState, useRef, useEffect} from 'react'
 import * as RadixTabs from "@radix-ui/react-tabs"
 import {ChevronLeft, ChevronRight} from "lucide-react"
 
-import {
-    $sample,
-    $arrow,
-    $scroller,
-    $button
-} from "./Tabs.styles";
+import * as cn from "./Tabs.styles";
 
 export interface TabsProps {
     children: React.ReactNode;
@@ -45,23 +40,23 @@ export function Tabs({children, items, tabIndex}: TabsProps) {
 
     return (
         <RadixTabs.Root asChild value={value} onValueChange={setActiveTab}>
-            <div className={$sample.host}>
-                <div className={$sample.buttons}>
+            <div className={cn.TabsSampleHost}>
+                <div className={cn.TabsSampleButtons}>
                     {showLeftArrow && (
                         <button
                             onClick={() => scroll('left')}
-                            className={$arrow.host}
+                            className={cn.TabsArrowHost}
                         >
-                            <ChevronLeft className={$arrow.icon}/>
+                            <ChevronLeft className={cn.TabsArrowIcon}/>
                         </button>
                     )}
 
                     <div
                         ref={scrollContainerRef}
                         onScroll={handleScroll}
-                        className={$scroller.host}
+                        className={cn.TabsScrollerHost}
                     >
-                        <div className={$scroller.container}>
+                        <div className={cn.TabsScrollerContainer}>
                             <RadixTabs.List>
                                 {items.map((item, index) => <TabsItem key={index} value={item}>
                                         {item}
@@ -74,14 +69,14 @@ export function Tabs({children, items, tabIndex}: TabsProps) {
                     {showRightArrow && (
                         <button
                             onClick={() => scroll('right')}
-                            className={$arrow.host}
+                            className={cn.TabsArrowHost}
                         >
-                            <ChevronRight className={$arrow.icon}/>
+                            <ChevronRight className={cn.TabsArrowIcon}/>
                         </button>
                     )}
                 </div>
 
-                <div className={$sample.content}>
+                <div className={cn.TabsSampleContent}>
                     {children}
                 </div>
             </div>
@@ -91,7 +86,7 @@ export function Tabs({children, items, tabIndex}: TabsProps) {
 
 function TabsItem({children, value}) {
     return <RadixTabs.Trigger asChild value={value}>
-        <button className={`${$button.host}`}>
+        <button className={`${cn.TabsButtonHost}`}>
             {children}
         </button>
     </RadixTabs.Trigger>

package/src/writer/UnderlineNav/UnderlineNav.styles.tsx

@@ -1,45 +1,47 @@
 import {css} from "@linaria/core"
 
-export const $nav = {
-    host: css`
-        align-items: center;
-        display: flex;
-
-        height: 42px;
-
-        background-color: #fff;
-        border-bottom: 1px solid hsl(212, 15%, calc(96% - 12% * 1));
-
-        z-index: 99;
-    `,
-    ul: css`
-        display: flex;
-        gap: 10px;
-
-        height: 100%;
-        color: hsl(212, 15%, calc(96% - 12% * 4));
-
-        list-style: none;
-        padding: 0;
-        white-space: nowrap;
-    `,
-    item: css`
-        height: 100%;
-
-        &[data-state="active"] { // TODO: in the future it should not be possible
-            a {
-                border-bottom-color: rgb(112, 81, 212);
-            }
+export const UnderlineNavHost = css`
+    align-items: center;
+    display: flex;
+
+    height: 42px;
+
+    background-color: #fff;
+    border-bottom: 1px solid hsl(212, 15%, calc(96% - 12% * 1));
+
+    z-index: 99;
+`;
+
+export const UnderlineNavUl = css`
+    display: flex;
+    gap: 10px;
+
+    height: 100%;
+    color: hsl(212, 15%, calc(96% - 12% * 4));
+
+    list-style: none;
+    padding: 0;
+    white-space: nowrap;
+`;
+
+export const UnderlineNavItem = css`
+    height: 100%;
+
+    &[data-state="active"] { // TODO: in the future it should not be possible
+        a {
+            border-bottom-color: rgb(112, 81, 212);
         }
-    `,
-    itemLink: css`
-        display: inline-flex;
-        border-bottom: 3px solid transparent;
-        text-decoration: none;
-
-        height: 100%;
-        padding: 10px;
-    `,
-    itemLink$$active: css`
-    `
-}
+    }
+`;
+
+export const UnderlineNavItemLink = css`
+    display: inline-flex;
+    border-bottom: 3px solid transparent;
+    text-decoration: none;
+
+    height: 100%;
+    padding: 10px;
+`;
+
+export const UnderlineNavItemLinkActive = css`
+`;

package/src/writer/UnderlineNav/UnderlineNav.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import * as RadixTabs from "@radix-ui/react-tabs";
 
-import {$nav} from "./UnderlineNav.styles"
+import * as cn from "./UnderlineNav.styles"
 
 export interface TabsProps {
     children: React.ReactNode
@@ -11,9 +11,9 @@ export interface TabsProps {
 
 export function UnderlineNav({children, value, onChange}: TabsProps) {
     return <RadixTabs.Root asChild value={value} onValueChange={onChange}>
-        <nav className={$nav.host}>
+        <nav className={cn.UnderlineNavHost}>
             <RadixTabs.List asChild>
-                <ul className={$nav.ul}>
+                <ul className={cn.UnderlineNavUl}>
                     {children}
                 </ul>
             </RadixTabs.List>
@@ -29,8 +29,8 @@ export interface UnderlineNavItemProps {
 
 UnderlineNav.Item = function UnderlineNavItem({children, value, href}: UnderlineNavItemProps) {
     return <RadixTabs.Trigger asChild value={value}>
-        <li className={$nav.item}>
-            <a href={href} className={`${$nav.itemLink}`}>
+        <li className={cn.UnderlineNavItem}>
+            <a href={href} className={`${cn.UnderlineNavItemLink}`}>
                 {children}
             </a>
         </li>

package/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "module": "esnext",
     "esModuleInterop": true,
-    "moduleResolution": "bundler", // Update this line
+    "moduleResolution": "bundler",
     "target": "ES6",
     "lib": [
       "dom",
@@ -12,7 +12,7 @@
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
-    "noEmit": true,
+    "noEmit": false,
     "incremental": false,
     "resolveJsonModule": true,
     "isolatedModules": true,
@@ -23,7 +23,6 @@
       }
     ],
     "strictNullChecks": true,
-    "allowImportingTsExtensions": true,
     "baseUrl": ".",
     "paths": {
       "*": ["*", "*.ts"]

package/dist/CTABanner-BrdYlhnD.js

@@ -1,2 +0,0 @@
-import e from"react";var a="hn2r3b2",n="hgvnekf";function t(t){var r=t.children,c=t.kind;return e.createElement("button",{className:"\n        ".concat(a,"\n        ").concat("secondary"===c&&n,"\n    ")},r)}var r="h1vbgqbd",c="c1qluffv",l="h7zyorj",s="h10nnuqu";function m(a){var n=a.children;return e.createElement("div",{className:r},e.createElement("div",{className:c},e.createElement("div",{className:l},n)))}var i="h1xgyvqe",v="t1rx1fna",u="s9nduqh";m.Heading=function(a){var n=a.title,t=a.subtitle,r=a.headingEffect;return e.createElement("div",{className:i},e.createElement("h1",{className:v},r?e.createElement("span",{className:s},n):n),e.createElement("p",{className:u},t))};var o="hth6on8";m.ButtonGroup=function(a){var n=a.children;return e.createElement("div",{className:o},n)};export{t as B,m as C};
-//# sourceMappingURL=CTABanner-BrdYlhnD.js.map

package/dist/CTABanner-BrdYlhnD.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CTABanner-BrdYlhnD.js","sources":["../src/brand/Button/Button.tsx","../src/brand/CTABanner/CTABanner.tsx"],"sourcesContent":["import React from \"react\";\nimport {css} from \"@linaria/core\";\n\nconst $button = {\n    host: css`\n        display: inline-block;\n        border: 1px solid transparent;\n        text-align: center;\n        font-weight: 600;\n        white-space: nowrap;\n        border-radius: 20px;\n        padding: 0 20px;\n        line-height: 38px;\n        font-size: 14px;\n        border-color: transparent;\n        color: #3c3c43;\n        background-color: #f7f7f8;\n\n        transition: color .25s, border-color .25s, background-color .25s;\n\n        &:hover {\n            background: #e3e3e6;\n        }\n    `,\n\n    host$$secondary: css`\n        color: #fff;\n        background-color: rgb(112, 81, 212);\n\n        &:hover {\n            background-color: rgb(95, 59, 211)\n        }\n    `\n}\n\nexport interface ButtonProps {\n    children: React.ReactNode\n    kind?: \"secondary\"\n}\n\nexport function Button({children, kind}: ButtonProps) {\n    return <button className={`\n        ${$button.host}\n        ${kind === \"secondary\" && $button.host$$secondary}\n    `}>\n        {children}\n    </button>\n}","import React from \"react\"\nimport {css} from \"@linaria/core\";\n\nconst $banner = {\n    host: css`\n        padding: 20px;\n    `,\n    container: css`\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 80px;\n    `,\n    hero: css`\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        gap: 40px;\n    `,\n    headingEffect: css`\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n\n        background: -webkit-linear-gradient(\n                120deg,\n                var(--headingEffect-color-tertiary) 20%,\n                var(--headingEffect-color-tertiary) 30%,\n                var(--headingEffect-color-secondary) 60%,\n                var(--headingEffect-color-primary) 75%,\n                var(--headingEffect-color-primary) 85%\n        );\n        background-clip: text;\n        -webkit-text-fill-color: transparent;\n        animation: wave 5s infinite;\n        background-size: 200% 200%;\n        background-position: 50% 50%; // Start with all colors visible\n\n        @keyframes wave {\n            0% {\n                background-position: 50% 50%;\n            }\n            50% {\n                background-position: 0% 50%;\n            }\n            100% {\n                background-position: 50% 50%;\n            }\n        }\n    `\n}\n\nexport interface CTABannerProps {\n    children: React.ReactNode\n}\n\nexport function CTABanner({children}: CTABannerProps) {\n    return <div className={$banner.host}>\n        <div className={$banner.container}>\n            <div className={$banner.hero}>\n                {children}\n            </div>\n        </div>\n    </div>\n}\n\nconst $heading = {\n    host: css`\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n    `,\n    title: css`\n        font-size: 76px;\n        font-weight: 900;\n        text-align: center;\n        letter-spacing: 3px;\n        margin: 0;\n    `,\n    subtitle: css`\n        color: #3c3c43;\n        font-size: 46px;\n        font-weight: 600;\n        text-align: center;\n    `\n}\n\nexport interface CTABannerHeadingProps {\n    title: string\n    subtitle: string | React.ReactNode\n    headingEffect?: boolean\n}\n\nCTABanner.Heading = function CTABannerHeading({title, subtitle, headingEffect}: CTABannerHeadingProps) {\n    return <div className={$heading.host}>\n        <h1 className={$heading.title}>\n            {\n                headingEffect\n                    ? <span className={$banner.headingEffect}>\n                        {title}\n                      </span>\n                    : title\n            }\n        </h1>\n        <p className={$heading.subtitle}>\n            {subtitle}\n        </p>\n    </div>\n}\n\nconst $btnGroup = {\n    host: css`\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 10px;\n    `\n}\n\nCTABanner.ButtonGroup = function CTABannerButtonGroup({children}) {\n    return <div className={$btnGroup.host}>\n        {children}\n    </div>\n}"],"names":["$button","Button","children","_ref","kind","React","createElement","className","concat","$banner","CTABanner","$heading","Heading","CTABannerHeading","title","_ref2","subtitle","headingEffect","$btnGroup","ButtonGroup","CTABannerButtonGroup"],"mappings":"qBAGA,IAAMA,EAoBD,UApBCA,EAsBa,mBAeHC,EAAMA,GAA8B,IAA5BC,EAAQC,EAARD,SAAUE,EAAAA,EAAAA,KAC9B,OAAOC,EAAAC,cAAA,SAAA,CAAQC,UAASC,aAAAA,OAClBR,EAAY,cAAAQ,OACH,cAATJ,GAAwBJ,EAAuB,WAEhDE,EAET,CC5CA,IAAMO,EAGD,WAHCA,EASD,WATCA,EAgBD,UAhBCA,EAiBW,WAsCD,SAAAC,EAASA,GAA2B,IAAzBR,EAAAA,EAAAA,SACvB,OAAOG,EAAKC,cAAA,MAAA,CAAAC,UAAWE,GACnBJ,EAAAC,cAAA,MAAA,CAAKC,UAAWE,GACZJ,EAAKC,cAAA,MAAA,CAAAC,UAAWE,GACXP,IAIjB,CAEA,IAAMS,EAMD,WANCA,EAaD,WAbCA,EAcM,UAcZD,EAAUE,QAAU,SAAyBC,GAAwD,IAAtDC,EAAKC,EAALD,MAAOE,EAAQD,EAARC,SAAUC,EAAAA,EAAAA,cAC5D,OAAOZ,EAAKC,cAAA,MAAA,CAAAC,UAAWI,GACnBN,EAAAC,cAAA,KAAA,CAAIC,UAAWI,GAEPM,EACMZ,wBAAME,UAAWE,GACdK,GAEHA,GAGdT,EAAGC,cAAA,IAAA,CAAAC,UAAWI,GACTK,GAGb,EAEA,IAAME,EACE,UAQRR,EAAUS,YAAc,SAA6BC,GAAW,IAATlB,EAAAA,EAAAA,SACnD,OAAOG,EAAAC,cAAA,MAAA,CAAKC,UAAWW,GAClBhB,EAET"}

package/dist/CTABanner-XQNnnpUx.js

@@ -1,2 +0,0 @@
-import e from"react";var a="hn2r3b2",n="hgvnekf";function t(t){var r=t.children,c=t.kind;return e.createElement("button",{className:"\n        ".concat(a,"\n        ").concat("secondary"===c&&n,"\n    ")},r)}var r="h1vbgqbd",c="c1qluffv",l="h7zyorj",s="h10nnuqu";function m(a){var n=a.children;return e.createElement("div",{className:r},e.createElement("div",{className:c},e.createElement("div",{className:l},n)))}var i="h1xgyvqe",v="t1rx1fna",u="s9nduqh";m.Heading=function(a){var n=a.title,t=a.subtitle,r=a.headingEffect;return e.createElement("div",{className:i},e.createElement("h1",{className:v},r?e.createElement("span",{className:s},n):n),e.createElement("p",{className:u},t))};var o="hth6on8";m.ButtonGroup=function(a){var n=a.children;return e.createElement("div",{className:o},n)};export{t as B,m as C};
-//# sourceMappingURL=CTABanner-XQNnnpUx.js.map

package/dist/CTABanner-XQNnnpUx.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CTABanner-XQNnnpUx.js","sources":["../src/brand/Button/Button.tsx","../src/brand/CTABanner/CTABanner.tsx"],"sourcesContent":["import React from \"react\";\nimport {css} from \"@linaria/core\";\n\nconst $button = {\n    host: css`\n        display: inline-block;\n        border: 1px solid transparent;\n        text-align: center;\n        font-weight: 600;\n        white-space: nowrap;\n        border-radius: 20px;\n        padding: 0 20px;\n        line-height: 38px;\n        font-size: 14px;\n        border-color: transparent;\n        color: #3c3c43;\n        background-color: #f7f7f8;\n\n        transition: color .25s, border-color .25s, background-color .25s;\n\n        &:hover {\n            background: #e3e3e6;\n        }\n    `,\n\n    host$$secondary: css`\n        color: #fff;\n        background-color: rgb(112, 81, 212);\n\n        &:hover {\n            background-color: rgb(95, 59, 211)\n        }\n    `\n}\n\nexport interface ButtonProps {\n    children: React.ReactNode\n    kind?: \"secondary\"\n}\n\nexport function Button({children, kind}: ButtonProps) {\n    return <button className={`\n        ${$button.host}\n        ${kind === \"secondary\" && $button.host$$secondary}\n    `}>\n        {children}\n    </button>\n}","import React from \"react\"\nimport {css} from \"@linaria/core\";\n\nconst $banner = {\n    host: css`\n        padding: 20px;\n    `,\n    container: css`\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 80px;\n    `,\n    hero: css`\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        gap: 40px;\n    `,\n    headingEffect: css`\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n\n        background: -webkit-linear-gradient(\n                120deg,\n                var(--headingEffect-color-tertiary) 20%,\n                var(--headingEffect-color-tertiary) 30%,\n                var(--headingEffect-color-secondary) 60%,\n                var(--headingEffect-color-primary) 75%,\n                var(--headingEffect-color-primary) 85%\n        );\n        background-clip: text;\n        -webkit-text-fill-color: transparent;\n        animation: wave 5s infinite;\n        background-size: 200% 200%;\n        background-position: 50% 50%; // Start with all colors visible\n\n        @keyframes wave {\n            0% {\n                background-position: 50% 50%;\n            }\n            50% {\n                background-position: 0% 50%;\n            }\n            100% {\n                background-position: 50% 50%;\n            }\n        }\n    `\n}\n\nexport interface CTABannerProps {\n    children: React.ReactNode\n}\n\nexport function CTABanner({children}: CTABannerProps) {\n    return <div className={$banner.host}>\n        <div className={$banner.container}>\n            <div className={$banner.hero}>\n                {children}\n            </div>\n        </div>\n    </div>\n}\n\nconst $heading = {\n    host: css`\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n    `,\n    title: css`\n        font-size: 76px;\n        font-weight: 900;\n        text-align: center;\n        letter-spacing: 3px;\n        margin: 0;\n    `,\n    subtitle: css`\n        color: #3c3c43;\n        font-size: 46px;\n        font-weight: 600;\n        text-align: center;\n    `\n}\n\nexport interface CTABannerHeadingProps {\n    title: string\n    subtitle: string | React.ReactNode\n    headingEffect?: boolean\n}\n\nCTABanner.Heading = function CTABannerHeading({title, subtitle, headingEffect}: CTABannerHeadingProps) {\n    return <div className={$heading.host}>\n        <h1 className={$heading.title}>\n            {\n                headingEffect\n                    ? <span className={$banner.headingEffect}>\n                        {title}\n                      </span>\n                    : title\n            }\n        </h1>\n        <p className={$heading.subtitle}>\n            {subtitle}\n        </p>\n    </div>\n}\n\nconst $btnGroup = {\n    host: css`\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 10px;\n    `\n}\n\nCTABanner.ButtonGroup = function CTABannerButtonGroup({children}) {\n    return <div className={$btnGroup.host}>\n        {children}\n    </div>\n}"],"names":["$button","Button","children","_ref","kind","React","createElement","className","concat","$banner","CTABanner","$heading","Heading","CTABannerHeading","title","_ref2","subtitle","headingEffect","$btnGroup","ButtonGroup","CTABannerButtonGroup"],"mappings":"qBAGA,IAAMA,EAoBD,UApBCA,EAsBa,mBAeHC,EAAMA,GAA8B,IAA5BC,EAAQC,EAARD,SAAUE,EAAAA,EAAAA,KAC9B,OAAOC,EAAAC,cAAA,SAAA,CAAQC,UAASC,aAAAA,OAClBR,EAAY,cAAAQ,OACH,cAATJ,GAAwBJ,EAAuB,WAEhDE,EAET,CC5CA,IAAMO,EAGD,WAHCA,EASD,WATCA,EAgBD,UAhBCA,EAiBW,WAsCD,SAAAC,EAASA,GAA2B,IAAzBR,EAAAA,EAAAA,SACvB,OAAOG,EAAKC,cAAA,MAAA,CAAAC,UAAWE,GACnBJ,EAAAC,cAAA,MAAA,CAAKC,UAAWE,GACZJ,EAAKC,cAAA,MAAA,CAAAC,UAAWE,GACXP,IAIjB,CAEA,IAAMS,EAMD,WANCA,EAaD,WAbCA,EAcM,UAcZD,EAAUE,QAAU,SAAyBC,GAAwD,IAAtDC,EAAKC,EAALD,MAAOE,EAAQD,EAARC,SAAUC,EAAAA,EAAAA,cAC5D,OAAOZ,EAAKC,cAAA,MAAA,CAAAC,UAAWI,GACnBN,EAAAC,cAAA,KAAA,CAAIC,UAAWI,GAEPM,EACMZ,wBAAME,UAAWE,GACdK,GAEHA,GAGdT,EAAGC,cAAA,IAAA,CAAAC,UAAWI,GACTK,GAGb,EAEA,IAAME,EACE,UAQRR,EAAUS,YAAc,SAA6BC,GAAW,IAATlB,EAAAA,EAAAA,SACnD,OAAOG,EAAAC,cAAA,MAAA,CAAKC,UAAWW,GAClBhB,EAET"}