@xyd-js/components 0.1.0-build.168

package/src/system/Baseline/Baseline.styles.tsx

@@ -0,0 +1,128 @@
+
+import { css } from "@linaria/core";
+
+import checkUrl from "./check.svg"
+import bunUrl from "./bun.svg"
+import logoUrl from "./logo.svg"
+import pnpmUrl from "./pnpm.svg"
+import nodeUrl from "./node.svg"
+import npmUrl from "./npm.svg"
+
+export const BaselineHost = css`
+    --baseline-logo-bun: url(${bunUrl});
+    --baseline-logo-node: url(${nodeUrl});
+    --baseline-logo-npm: url(${npmUrl});
+
+    --baseline-high-bg: #e6f4ea;
+    --baseline-high-engine-bg: #ceead6;
+    --baseline-high-img: url(${logoUrl});
+    --baseline-high-check: #099949;
+
+    --baseline-bg: var(--baseline-high-bg);
+    --baseline-engine-bg: var(--baseline-high-engine-bg);
+    --baseline-img: var(--baseline-high-img);
+    --baseline-check: var(--baseline-high-check);
+
+    --baseline-cross: var(--baseline-limited-cross);
+    --feedback-link-icon: var(--icon-primary);
+    background: var(--baseline-bg);
+    border-radius: .25rem;
+    margin: 1rem 0;
+    padding-left: 3.8125rem;
+
+    summary {
+        --chevron-size: 0.6875rem;
+        --chevron-padding-left: 0.75rem;
+        --chevron-padding-right: 1.25rem;
+        align-items: center;
+        cursor: pointer;
+        display: flex;
+        flex-wrap: wrap;
+        gap: .5rem;
+        justify-content: space-between;
+        padding: 1rem 0;
+        padding-right: calc(var(--chevron-padding-left) + var(--chevron-size) + var(--chevron-padding-right));
+        position: relative;
+    }
+
+    [part="icon"] {
+        --width: 2.3125rem;
+        background-image: var(--baseline-img);
+        background-position: 50%;
+        background-repeat: no-repeat;
+        background-size: contain;
+        display: block;
+        height: 2.25rem;
+        left: calc(-.5rem - var(--width));
+        position: absolute;
+        top: 1rem;
+        width: var(--width);
+    }
+
+    [part="title"] {
+        font-size: 1rem;
+        font-weight: 600;
+        letter-spacing: 0;
+        line-height: 1.5;
+        margin: 0;
+        padding: .375rem 0;
+    }
+
+    [part="compatibility"] {
+        display: flex;
+        flex-wrap: wrap;
+        gap: .5rem;
+    }
+
+    [part="tools"] {
+        background: var(--baseline-engine-bg);
+        border-radius: 2rem;
+        display: flex;
+        flex-wrap: wrap;
+        gap: .5rem;
+        padding: .5rem .625rem;
+
+        [data-tool] {
+            display: flex;
+            --baseline-tool-image: none;
+        }
+        [data-tool="bun"] {
+            --baseline-tool-image: var(--baseline-logo-bun);
+        }
+        [data-tool="node"] {
+            --baseline-tool-image: var(--baseline-logo-node);
+        }
+        [data-tool="npm"] {
+            --baseline-tool-image: var(--baseline-logo-npm);
+        }
+        [data-tool="pnpm"] {
+            --baseline-tool-image: url(${pnpmUrl});
+        }
+
+        [data-tool]::before {
+            background-repeat: no-repeat;
+            background-size: contain;
+            content: "";
+            display: block;
+            height: 1.25rem;
+            width: 1.25rem;
+            background-image: var(--baseline-tool-image);
+        }
+
+        [data-tool]::after {
+            background-color: var(--baseline-check);
+            mask-image: url(${checkUrl});
+            -webkit-mask-image: url(${checkUrl});
+
+            content: "";
+            display: block;
+            height: 1.25rem;
+            -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+            -webkit-mask-size: contain;
+            mask-size: contain;
+            width: 1rem;
+        }
+    }
+
+`;

package/src/system/Baseline/Baseline.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+import * as cn from './Baseline.styles';
+
+export interface BaselineTool {
+    tool: 'bun' | 'node' | 'npm' | 'pnpm' | string
+    supported: boolean;
+    label?: React.ReactNode;
+}
+
+export interface BaselineProps extends React.HTMLAttributes<HTMLDetailsElement> {
+    title: string;
+    toolGroups: BaselineTool[][];
+}
+
+export function Baseline({ title, toolGroups, ...props }: BaselineProps) {
+    return (
+        <details className={cn.BaselineHost} {...props}>
+            <summary>
+                <span part="icon" />
+                <div part="title">{title}</div>
+                <div part="compatibility">
+                    {toolGroups.map((group, i) => (
+                        <span part="tools" key={i}>
+                            {group.map((tool, j) => (
+                                <span
+                                    key={tool.tool + (tool.label ?? '') + j}
+                                    data-tool={tool.tool}
+                                    data-supported={tool.supported ? true : undefined}
+                                >
+                                    {tool.label ? tool.label : null}
+                                </span>
+                            ))}
+                        </span>
+                    ))}
+                </div>
+            </summary>
+        </details>
+    );
+}

package/src/system/Baseline/bun.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="Bun" viewBox="0 0 80 70"><title>Bun Logo</title><path id="Shadow" d="M71.09,20.74c-.16-.17-.33-.34-.5-.5s-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5A26.46,26.46,0,0,1,75.5,35.7c0,16.57-16.82,30.05-37.5,30.05-11.58,0-21.94-4.23-28.83-10.86l.5.5.5.5.5.5.5.5.5.5.5.5.5.5C19.55,65.3,30.14,69.75,42,69.75c20.68,0,37.5-13.48,37.5-30C79.5,32.69,76.46,26,71.09,20.74Z"/><g id="Body"><path id="Background" d="M73,35.7c0,15.21-15.67,27.54-35,27.54S3,50.91,3,35.7C3,26.27,9,17.94,18.22,13S33.18,3,38,3s8.94,4.13,19.78,10C67,17.94,73,26.27,73,35.7Z" style="fill:#fbf0df"/><path id="Bottom_Shadow" data-name="Bottom Shadow" d="M73,35.7a21.67,21.67,0,0,0-.8-5.78c-2.73,33.3-43.35,34.9-59.32,24.94A40,40,0,0,0,38,63.24C57.3,63.24,73,50.89,73,35.7Z" style="fill:#f6dece"/><path id="Light_Shine" data-name="Light Shine" d="M24.53,11.17C29,8.49,34.94,3.46,40.78,3.45A9.29,9.29,0,0,0,38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7c0,.4,0,.8,0,1.19C9.06,15.48,20.07,13.85,24.53,11.17Z" style="fill:#fffefc"/><path id="Top" d="M35.12,5.53A16.41,16.41,0,0,1,29.49,18c-.28.25-.06.73.3.59,3.37-1.31,7.92-5.23,6-13.14C35.71,5,35.12,5.12,35.12,5.53Zm2.27,0A16.24,16.24,0,0,1,39,19c-.12.35.31.65.55.36C41.74,16.56,43.65,11,37.93,5,37.64,4.74,37.19,5.14,37.39,5.49Zm2.76-.17A16.42,16.42,0,0,1,47,17.12a.33.33,0,0,0,.65.11c.92-3.49.4-9.44-7.17-12.53C40.08,4.54,39.82,5.08,40.15,5.32ZM21.69,15.76a16.94,16.94,0,0,0,10.47-9c.18-.36.75-.22.66.18-1.73,8-7.52,9.67-11.12,9.45C21.32,16.4,21.33,15.87,21.69,15.76Z" style="fill:#ccbea7;fill-rule:evenodd"/><path id="Outline" d="M38,65.75C17.32,65.75.5,52.27.5,35.7c0-10,6.18-19.33,16.53-24.92,3-1.6,5.57-3.21,7.86-4.62,1.26-.78,2.45-1.51,3.6-2.19C32,1.89,35,.5,38,.5s5.62,1.2,8.9,3.14c1,.57,2,1.19,3.07,1.87,2.49,1.54,5.3,3.28,9,5.27C69.32,16.37,75.5,25.69,75.5,35.7,75.5,52.27,58.68,65.75,38,65.75ZM38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7,3,50.89,18.7,63.25,38,63.25S73,50.89,73,35.7C73,26.62,67.31,18.13,57.78,13,54,11,51.05,9.12,48.66,7.64c-1.09-.67-2.09-1.29-3-1.84C42.63,4,40.42,3,38,3Z"/></g><g id="Mouth"><g id="Background-2" data-name="Background"><path d="M45.05,43a8.93,8.93,0,0,1-2.92,4.71,6.81,6.81,0,0,1-4,1.88A6.84,6.84,0,0,1,34,47.71,8.93,8.93,0,0,1,31.12,43a.72.72,0,0,1,.8-.81H44.26A.72.72,0,0,1,45.05,43Z" style="fill:#b71422"/></g><g id="Tongue"><path id="Background-3" data-name="Background" d="M34,47.79a6.91,6.91,0,0,0,4.12,1.9,6.91,6.91,0,0,0,4.11-1.9,10.63,10.63,0,0,0,1-1.07,6.83,6.83,0,0,0-4.9-2.31,6.15,6.15,0,0,0-5,2.78C33.56,47.4,33.76,47.6,34,47.79Z" style="fill:#ff6164"/><path id="Outline-2" data-name="Outline" d="M34.16,47a5.36,5.36,0,0,1,4.19-2.08,6,6,0,0,1,4,1.69c.23-.25.45-.51.66-.77a7,7,0,0,0-4.71-1.93,6.36,6.36,0,0,0-4.89,2.36A9.53,9.53,0,0,0,34.16,47Z"/></g><path id="Outline-3" data-name="Outline" d="M38.09,50.19a7.42,7.42,0,0,1-4.45-2,9.52,9.52,0,0,1-3.11-5.05,1.2,1.2,0,0,1,.26-1,1.41,1.41,0,0,1,1.13-.51H44.26a1.44,1.44,0,0,1,1.13.51,1.19,1.19,0,0,1,.25,1h0a9.52,9.52,0,0,1-3.11,5.05A7.42,7.42,0,0,1,38.09,50.19Zm-6.17-7.4c-.16,0-.2.07-.21.09a8.29,8.29,0,0,0,2.73,4.37A6.23,6.23,0,0,0,38.09,49a6.28,6.28,0,0,0,3.65-1.73,8.3,8.3,0,0,0,2.72-4.37.21.21,0,0,0-.2-.09Z"/></g><g id="Face"><ellipse id="Right_Blush" data-name="Right Blush" cx="53.22" cy="40.18" rx="5.85" ry="3.44" style="fill:#febbd0"/><ellipse id="Left_Bluch" data-name="Left Bluch" cx="22.95" cy="40.18" rx="5.85" ry="3.44" style="fill:#febbd0"/><path id="Eyes" d="M25.7,38.8a5.51,5.51,0,1,0-5.5-5.51A5.51,5.51,0,0,0,25.7,38.8Zm24.77,0A5.51,5.51,0,1,0,45,33.29,5.5,5.5,0,0,0,50.47,38.8Z" style="fill-rule:evenodd"/><path id="Iris" d="M24,33.64a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,24,33.64Zm24.77,0a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,48.75,33.64Z" style="fill:#fff;fill-rule:evenodd"/></g></svg>

package/src/system/Baseline/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 79.301 98"><g fill="#099949"><path fill-rule="evenodd" d="M30.3 6a42.82 42.82 0 0 0-26.616 9.226A59.25 59.25 0 0 0 0 10.489 48.787 48.787 0 0 1 30.3 0c27.063 0 49 21.938 49 49s-21.937 49-49 49A48.786 48.786 0 0 1 0 87.511a59.307 59.307 0 0 0 3.684-4.737A42.823 42.823 0 0 0 30.3 92c23.748 0 43-19.252 43-43S54.049 6 30.3 6Z" clip-rule="evenodd"/><path d="M33.78 58.149 53.3 38.827 48.426 34l-19.52 19.322-9.728-9.629L14.3 48.52 28.929 63l4.876-4.827Z"/></g></svg>

package/src/system/Baseline/index.ts

@@ -0,0 +1 @@
+export {Baseline} from './Baseline';

package/src/system/Baseline/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 111 62"><path d="m86.333 6.2-6.166 6.2 18.5 18.6-18.5 18.6-12.334-12.4-6.166 6.2 18.5 18.6L111 31 86.333 6.2ZM30.833 0 6.167 24.8l6.166 6.2 18.5-18.6 12.334 12.4 6.166-6.2L30.833 0Z" fill="#B9D8BF"/><path d="m80.167 0 6.166 6.2-55.5 55.8L0 31l6.167-6.2 24.666 24.8L80.167 0Z" fill="#148936"/></svg>

package/src/system/Baseline/node.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="800px" viewBox="-16.5 0 289 289" version="1.1" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M127.999999,288.463771 C124.024844,288.463771 120.314699,287.403728 116.869564,285.548656 L81.6231884,264.612838 C76.32298,261.697724 78.9730854,260.637682 80.5631458,260.107661 C87.7184259,257.72257 89.0434775,257.192547 96.4637688,252.952381 C97.2587979,252.422361 98.3188405,252.687372 99.1138718,253.217392 L126.144927,269.383024 C127.20497,269.913045 128.530021,269.913045 129.325053,269.383024 L235.064182,208.165634 C236.124225,207.635611 236.654245,206.575571 236.654245,205.250519 L236.654245,83.0807467 C236.654245,81.7556929 236.124225,80.6956526 235.064182,80.1656324 L129.325053,19.2132506 C128.26501,18.6832305 126.939959,18.6832305 126.144927,19.2132506 L20.4057954,80.1656324 C19.3457551,80.6956526 18.8157349,82.0207041 18.8157349,83.0807467 L18.8157349,205.250519 C18.8157349,206.31056 19.3457551,207.635611 20.4057954,208.165634 L49.2919247,224.861286 C64.9275364,232.811595 74.7329196,223.536234 74.7329196,214.260871 L74.7329196,93.681159 C74.7329196,92.0910985 76.0579711,90.5010358 77.9130428,90.5010358 L91.4285716,90.5010358 C93.0186343,90.5010358 94.6086948,91.8260873 94.6086948,93.681159 L94.6086948,214.260871 C94.6086948,235.196689 83.2132512,247.387164 63.3374737,247.387164 C57.2422362,247.387164 52.4720502,247.387164 38.9565214,240.761906 L11.1304347,224.861286 C4.24016581,220.886129 5.68434189e-14,213.46584 5.68434189e-14,205.515528 L5.68434189e-14,83.3457557 C5.68434189e-14,75.3954465 4.24016581,67.9751552 11.1304347,64.0000006 L116.869564,2.78260752 C123.494824,-0.927535841 132.505176,-0.927535841 139.130436,2.78260752 L244.869565,64.0000006 C251.759834,67.9751552 256,75.3954465 256,83.3457557 L256,205.515528 C256,213.46584 251.759834,220.886129 244.869565,224.861286 L139.130436,286.078676 C135.685299,287.668739 131.710145,288.463771 127.999999,288.463771 L127.999999,288.463771 Z M160.596274,204.455488 C114.219461,204.455488 104.679089,183.254659 104.679089,165.233955 C104.679089,163.643893 106.004141,162.053832 107.859212,162.053832 L121.639752,162.053832 C123.229813,162.053832 124.554864,163.113872 124.554864,164.703935 C126.674947,178.749484 132.770187,185.639753 160.861283,185.639753 C183.122154,185.639753 192.662526,180.604556 192.662526,168.67909 C192.662526,161.788821 190.012423,156.753624 155.296065,153.308489 C126.409938,150.393375 108.389235,144.033126 108.389235,120.977226 C108.389235,99.5113875 126.409938,86.7908901 156.621119,86.7908901 C190.542443,86.7908901 207.238095,98.4513472 209.358178,123.89234 C209.358178,124.687371 209.093167,125.482403 208.563147,126.277434 C208.033127,126.807454 207.238095,127.337474 206.443064,127.337474 L192.662526,127.337474 C191.337475,127.337474 190.012423,126.277434 189.747412,124.952382 C186.567289,110.376813 178.351966,105.606625 156.621119,105.606625 C132.240165,105.606625 129.325053,114.086957 129.325053,120.447205 C129.325053,128.132506 132.770187,130.5176 165.631471,134.757766 C198.227744,138.997931 213.598344,145.093169 213.598344,167.884058 C213.333333,191.20497 194.252589,204.455488 160.596274,204.455488 L160.596274,204.455488 Z" fill="#000">
+
+</path>
+    </g>
+</svg>

package/src/system/Baseline/npm.svg

@@ -0,0 +1,5 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" fill="#D40001" width="800px" height="800px" viewBox="0 0 32 32" version="1.1">
+<title>npm</title>
+<path d="M7.415 7.656l17.291 0.024-0.011 17.29h-4.329l0.012-12.974h-4.319l-0.010 12.964h-8.656zM3.207 1.004c-0.002 0-0.003 0-0.005 0-1.214 0-2.198 0.984-2.198 2.198 0 0.002 0 0.004 0 0.006v-0 25.585c0 0.002 0 0.003 0 0.005 0 1.214 0.984 2.198 2.198 2.198 0.002 0 0.004 0 0.006 0h25.585c0.002 0 0.003 0 0.005 0 1.214 0 2.198-0.984 2.198-2.198 0-0.002 0-0.004 0-0.006v0-25.585c0-0.002 0-0.003 0-0.005 0-1.214-0.984-2.198-2.198-2.198-0.002 0-0.004 0-0.006 0h0z"/>
+</svg>

package/src/system/Baseline/pnpm.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="xMidYMid meet" viewBox="76.58987244897958 44 164.00775510204068 164" width="160.01" height="160"><defs><path d="M237.6 95L187.6 95L187.6 45L237.6 45L237.6 95Z" id="arNRoK435"/><path d="M182.59 95L132.59 95L132.59 45L182.59 45L182.59 95Z" id="a3H2WU7Px"/><path d="M127.59 95L77.59 95L77.59 45L127.59 45L127.59 95Z" id="b1DInM56vl"/><path d="M237.6 150L187.6 150L187.6 100L237.6 100L237.6 150Z" id="a7LFlgQIwu"/><path d="M182.59 150L132.59 150L132.59 100L182.59 100L182.59 150Z" id="amwLiZcuo"/><path d="M182.59 205L132.59 205L132.59 155L182.59 155L182.59 205Z" id="f3Peu5RWan"/><path d="M237.6 205L187.6 205L187.6 155L237.6 155L237.6 205Z" id="a6DXBfqPa"/><path d="M127.59 205L77.59 205L77.59 155L127.59 155L127.59 205Z" id="c1GWSTH1z7"/></defs><g><g><use xlink:href="#arNRoK435" opacity="1" fill="#f9ad00" fill-opacity="1"/></g><g><use xlink:href="#a3H2WU7Px" opacity="1" fill="#f9ad00" fill-opacity="1"/></g><g><use xlink:href="#b1DInM56vl" opacity="1" fill="#f9ad00" fill-opacity="1"/></g><g><use xlink:href="#a7LFlgQIwu" opacity="1" fill="#f9ad00" fill-opacity="1"/></g><g><use xlink:href="#amwLiZcuo" opacity="1" fill="#4e4e4e" fill-opacity="1"/></g><g><use xlink:href="#f3Peu5RWan" opacity="1" fill="#4e4e4e" fill-opacity="1"/></g><g><use xlink:href="#a6DXBfqPa" opacity="1" fill="#4e4e4e" fill-opacity="1"/></g><g><use xlink:href="#c1GWSTH1z7" opacity="1" fill="#4e4e4e" fill-opacity="1"/></g></g></svg>

package/src/system/Footer/Footer.styles.tsx

@@ -0,0 +1,213 @@
+import { css } from "@linaria/core";
+
+export const Footer = css`
+  /* transform: translateY(-100%); */
+
+  border-top: 1px solid var(--dark32);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  p {
+    color: var(--text-primary);
+    font-weight: bold;
+  }
+  hr {
+    background: var(--dark32);
+    width: 100%;
+    height: 1px;
+  }
+
+  a {
+    color: var(--dark48);
+    font-weight: var(--xyd-font-weight-medium);
+
+    &:hover {
+        color: var(--dark80);
+    }
+  }
+
+  [part="container"] {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    gap: 24px;
+    justify-content: space-between;
+    max-width: 1050px;
+    width: 100%;
+
+    padding: 100px 25px
+  }
+  &[data-kind="minimal"] [part="container"] {
+    max-width: 100%;
+    padding: 20px;
+  }
+
+  [part="content"] {
+    display: flex;
+    flex-direction: row;
+    gap: 32px;
+    justify-content: space-between;
+    width: 100%;
+
+    @media (max-width: 768px) {
+        flex-direction: column;
+        gap: 24px;
+    }
+  }
+
+  [part="first-column"] {
+    display: flex;
+    height: 24px;
+
+    img, svg {
+      height: 28px;
+      width: auto;
+    }
+
+    @media (min-width: 1024px) {
+        min-width: 140px;
+    }
+
+    @media (max-width: 768px) {
+        align-self: flex-start;
+    }
+  }
+
+  [part="columns"] {
+    display: grid;
+    gap: 32px;
+    grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
+    flex: 1 1 0%;
+
+    @media (max-width: 768px) {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 24px;
+        width: 100%;
+    }
+
+    @media (max-width: 680px) {
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+        gap: 20px;
+    }
+
+    &[data-cols="1"] {
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    &[data-cols="2"] {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        
+        @media (max-width: 680px) {
+            grid-template-columns: repeat(1, minmax(0, 1fr));
+        }
+    }
+
+    &[data-cols="3"] {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        
+        @media (max-width: 768px) {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+        
+        @media (max-width: 680px) {
+            grid-template-columns: repeat(1, minmax(0, 1fr));
+        }
+    }
+
+    &[data-cols="4"] {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+        
+        @media (max-width: 768px) {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+        
+        @media (max-width: 680px) {
+            grid-template-columns: repeat(1, minmax(0, 1fr));
+        }
+    }
+
+    &[data-cols="5"] {
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+        
+        @media (max-width: 768px) {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+        
+        @media (max-width: 680px) {
+            grid-template-columns: repeat(1, minmax(0, 1fr));
+        }
+    }
+  }
+  &[data-kind="minimal"] [part="columns"] {
+    display: flex;
+  }
+
+  [part="col"] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    white-space: nowrap;
+    gap: 16px;
+
+    @media (max-width: 768px) {
+        align-items: flex-start;
+        white-space: normal;
+    }
+  }
+
+  [part="col-items"] {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    align-items: flex-start;
+
+    @media (max-width: 768px) {
+        align-items: flex-start;
+    }
+  }
+  &[data-kind="minimal"] [part="col-items"] {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  [part="social-links"] {
+    display: flex;
+    gap: 16px;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    max-width: 492px;
+    min-width: 140px;
+
+    @media (max-width: 768px) {
+        justify-content: flex-start;
+        max-width: 100%;
+        min-width: auto;
+    }
+
+    svg {
+        width: 24px;
+        height: 24px;
+
+        color: var(--dark48);
+        fill: var(--dark48);
+
+        &:hover {
+            color: var(--dak80);
+            fill: var(--dak80);
+        }
+    }
+  }
+
+  [part="footnote"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    @media (max-width: 768px) {
+        flex-direction: column;
+        gap: 16px;
+        align-items: flex-start;
+    }
+  }
+`;

package/src/system/Footer/Footer.tsx

@@ -0,0 +1,105 @@
+import React from "react";
+
+import { Button } from "../../writer/Button"
+import * as cn from "./Footer.styles";
+
+export interface FooterLinkItemsProps {
+    label: string;
+    href: string;
+}
+
+export interface FooterProps {
+    footnote: React.ReactNode;
+
+    kind?: "minimal"
+
+    logo?: React.ReactNode;
+
+    socials?: {
+        logo: React.ReactNode;
+        href: string
+    }[]
+
+    links?: {
+        header: string;
+        items?: FooterLinkItemsProps[]
+    }[] | FooterLinkItemsProps[]
+}
+
+export function Footer(props: FooterProps) {
+    if (props.kind === "minimal") {
+        return <Footer.Minimal {...props} />
+    }
+
+    return <footer className={cn.Footer}>
+        <div part="container">
+            <div part="content">
+                {
+                    props.logo && <div part="first-column">
+                        {props.logo}
+                    </div>
+                }
+
+                {props.links?.length && <div part="columns" data-cols={props.links?.length}>
+                    {props.links?.map((link, index) => (
+                        <div part="col" key={`${link.header}-${index}`}>
+                            <div part="col-items">
+                                <p>{link.header}</p>
+                                {link.items?.map((item) => (
+                                    <a key={`${item.label}-${index}`} target="_blank" href={item.href}>{item.label}</a>
+                                ))}
+                            </div>
+                        </div>
+                    ))}
+                </div>}
+
+
+                <div part="social-links">
+                    {props.socials?.map((social, index) => (
+                        <a target="_blank" href={social.href} key={`${social.href}-${index}`}>{social.logo}</a>
+                    ))}
+                </div>
+            </div>
+
+            {props.footnote && <hr />}
+
+            <div part="footnote">
+                {props.footnote}
+            </div>
+        </div>
+    </footer>
+}
+
+Footer.Minimal = function MinimalFooter(props: FooterProps) {
+    return <footer className={cn.Footer} data-kind="minimal">
+        <div part="container">
+            <div part="content">
+                {
+                    props.links?.length && <div part="columns" data-cols={props.links?.length}>
+                        <div part="col">
+                            <div part="col-items">
+                                {props.links?.map((item, index) => (
+                                    <Button
+                                        key={`${item.label}-${index}`} kind="tertiary" href={item.href}>
+                                        {item.label}
+                                    </Button>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                }
+
+                <div part="social-links">
+                    {props.socials?.map((social, index) => (
+                        <Button
+                            key={`${social.href}-${index}`}
+                            kind="tertiary"
+                            href={social.href}
+                            icon={social.logo}
+                        />
+                    ))}
+                </div>
+            </div>
+        </div>
+    </footer>
+}

package/src/system/Footer/index.ts

@@ -0,0 +1 @@
+export { Footer } from "./Footer";

package/src/system/SearchButton/SearchButton.styles.tsx

@@ -0,0 +1,89 @@
+import { css } from "@linaria/core";
+
+export const SearchButton = css`
+    @layer defaults {
+        background-color: transparent;
+        border-radius: var(--xyd-border-radius-large);
+        border: 1px solid var(--dark32);
+        color: var(--text-primary);
+        background: var(--dark16);
+        font-size: var(--xyd-font-size-small);
+        font-weight: var(--xyd-font-weight-semibold);
+        height: 36px;
+        justify-content: space-between;
+        display: flex;
+        align-items: center;
+        flex: 1;
+
+        padding: 0 8px;
+        margin: 12px 0 0;
+        user-select: none;
+        width: 100%;
+        transition: border-color .15s ease;
+
+        max-width: var(--xyd-search-width, 300px);
+        margin: 0;
+
+        cursor: pointer;
+
+        &[data-fullWidth] {
+            max-width: 100%;
+        }
+
+        &:hover {
+            background: var(--dark16);
+            box-shadow: none;
+            color: var(--dark48);
+            outline: none;
+
+            box-shadow: none;
+            border-color: var(--dark48);
+        }
+        
+        [part="container"] {
+            align-items: center;
+            display: flex;
+        }
+
+        [part="placeholder"] {
+            display: block !important;
+            font-size: var(--xyd-font-size-small);
+            color: var(--dark48);
+            font-weight: var(--xyd-font-weight-normal);
+        }
+
+        [part="icon"] {
+            stroke-width: 1.4;
+            color: var(--dark48) !important;
+            height: 15px;
+            transition: color .15s var(--cubic-enter);
+        }
+        
+
+        [part="keys"] {
+            display: flex;
+            gap: 4px;
+            min-width: auto;
+        }
+
+        [part="key"] {
+            align-items: center;
+            background: var(--dark16);
+            border-radius: var(--xyd-border-radius-small);
+            box-shadow: none;
+            color: var(--dark48);
+            display: flex;
+            height: 18px;
+            line-height: 18px;
+            justify-content: center;
+            font-size: 12px;
+            letter-spacing: 1px;
+            position: relative;
+            padding: 0;
+            margin: 0;
+            border: 0px;
+            top: 0;
+            width: 20px;
+        }
+    }
+`