paris 0.0.1 → 0.2.0

package/public/graphik/graphik.css

@@ -0,0 +1,174 @@
+/*
+        This font software is the property of Commercial Type.
+
+        You may not modify the font software, use it on another website, or install it on a computer.
+
+        License information is available at http://commercialtype.com/eula
+        For more information please visit Commercial Type at http://commercialtype.com or email us at info[at]commercialtype.com
+
+        Copyright (C) 2022 Schwartzco Inc.
+        License: 2203-CJKSFW
+*/
+
+
+@font-face {
+    font-family: 'Graphik Web';
+    src: url('GraphikSS-BlackItalic.woff2') format('woff2'),
+    url('GraphikSS-BlackItalic.woff') format('woff');
+    font-weight: 900;
+    font-style: italic;
+    font-stretch: normal;
+}
+
+@font-face {
+    font-family: 'Graphik Web';
+    src: url('GraphikSS-Black.woff2') format('woff2'),
+    url('GraphikSS-Black.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-stretch: normal;
+}
+
+@font-face {
+    font-family: 'Graphik Web';
+    src: url('GraphikSS-BoldItalic.woff2') format('woff2'),
+    url('GraphikSS-BoldItalic.woff') format('woff');
+    font-weight: 800;
+    font-style: italic;
+    font-stretch: normal;
+}
+
+@font-face {
+    font-family: 'Graphik Web';
+    src: url('GraphikSS-Bold.woff2') format('woff2'),
+    url('GraphikSS-Bold.woff') format('woff');
+    font-weight: 800;
+    font-style: normal;
+    font-stretch: normal;
+}
+
+@font-face {
+    font-family: 'Graphik Web';
+    src: url('GraphikSS-SemiboldItalic.woff2') format('woff2'),
+    url('GraphikSS-SemiboldItalic.woff') format('woff');
+    font-weight: 700;
+    font-style: italic;
+    font-stretch: normal;
+}
+
+@font-face {
+    font-family: 'Graphik Web';
+    src: url('GraphikSS-Semibold.woff2') format('woff2'),
+    url('GraphikSS-Semibold.woff') format('woff');
+    font-weight: 700;
+    font-style: normal;
+    font-stretch: normal;
+}
+
+@font-face {
+    font-family: 'Graphik Web';
+    src: url('GraphikSS-SemiboldItalic.woff2') format('woff2'),
+    url('GraphikSS-SemiboldItalic.woff') format('woff');
+    font-weight: 600;
+    font-style: italic;
+    font-stretch: normal;
+}
+
+@font-face {
+    font-family: 'Graphik Web';
+    src: url('GraphikSS-Semibold.woff2') format('woff2'),
+    url('GraphikSS-Semibold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-stretch: normal;
+}
+
+@font-face {
+    font-family: 'Graphik Web';
+    src: url('GraphikSS-MediumItalic.woff2') format('woff2'),
+    url('GraphikSS-MediumItalic.woff') format('woff');
+    font-weight: 500;
+    font-style: italic;
+    font-stretch: normal;
+}
+
+@font-face {
+    font-family: 'Graphik Web';
+    src: url('GraphikSS-Medium.woff2') format('woff2'),
+    url('GraphikSS-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-stretch: normal;
+}
+
+@font-face {
+    font-family: 'Graphik Web';
+    src: url('GraphikSS-RegularItalic.woff2') format('woff2'),
+    url('GraphikSS-RegularItalic.woff') format('woff');
+    font-weight: 400;
+    font-style: italic;
+    font-stretch: normal;
+}
+
+@font-face {
+    font-family: 'Graphik Web';
+    src: url('GraphikSS-Regular.woff2') format('woff2'),
+    url('GraphikSS-Regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+    font-stretch: normal;
+}
+
+@font-face {
+    font-family: 'Graphik Web';
+    src: url('GraphikSS-LightItalic.woff2') format('woff2'),
+    url('GraphikSS-LightItalic.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+    font-stretch: normal;
+}
+
+@font-face {
+    font-family: 'Graphik Web';
+    src: url('GraphikSS-Light.woff2') format('woff2'),
+    url('GraphikSS-Light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-stretch: normal;
+}
+
+@font-face {
+    font-family: 'Graphik Web';
+    src: url('GraphikSS-ExtralightItalic.woff2') format('woff2'),
+    url('GraphikSS-ExtralightItalic.woff') format('woff');
+    font-weight: 200;
+    font-style: italic;
+    font-stretch: normal;
+}
+
+@font-face {
+    font-family: 'Graphik Web';
+    src: url('GraphikSS-Extralight.woff2') format('woff2'),
+    url('GraphikSS-Extralight.woff') format('woff');
+    font-weight: 200;
+    font-style: normal;
+    font-stretch: normal;
+}
+
+@font-face {
+    font-family: 'Graphik Web';
+    src: url('GraphikSS-ThinItalic.woff2') format('woff2'),
+    url('GraphikSS-ThinItalic.woff') format('woff');
+    font-weight: 100;
+    font-style: italic;
+    font-stretch: normal;
+}
+
+@font-face {
+    font-family: 'Graphik Web';
+    src: url('GraphikSS-Thin.woff2') format('woff2'),
+    url('GraphikSS-Thin.woff') format('woff');
+    font-weight: 100;
+    font-style: normal;
+    font-stretch: normal;
+}

package/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

package/public/pte.css

@@ -0,0 +1,219 @@
+/* Theme variables, generated by `pte` */
+/* This is automatically generated. Do not edit directly. */
+
+:root {
+    --pte-tokens-colors-black: #060606;
+    --pte-tokens-colors-white: #ffffff;
+    --pte-tokens-colors-teal: #1deecd;
+    --pte-tokens-colors-orange: #ff9426;
+    --pte-tokens-colors-pink: #fb46be;
+    --pte-tokens-colors-red: #fd4d2e;
+    --pte-tokens-colors-yellow: #ffc043;
+    --pte-tokens-colors-green: #08c94e;
+    --pte-tokens-colors-grey1050: #121212;
+    --pte-tokens-colors-grey1000: #171717;
+    --pte-tokens-colors-grey950: #1f1f1f;
+    --pte-tokens-colors-grey900: #252525;
+    --pte-tokens-colors-grey800: #2e2e2e;
+    --pte-tokens-colors-grey750: #3c3c3c;
+    --pte-tokens-colors-grey700: #4a4a4a;
+    --pte-tokens-colors-grey600: #545454;
+    --pte-tokens-colors-grey500: #757575;
+    --pte-tokens-colors-grey400: #afafaf;
+    --pte-tokens-colors-grey300: #c9c9c9;
+    --pte-tokens-colors-grey200: #e2e2e2;
+    --pte-tokens-colors-grey100: #eeeeee;
+    --pte-tokens-colors-grey50: #f6f6f6;
+    --pte-tokens-colors-teal600: #18b199;
+    --pte-tokens-colors-teal500: #1ad4b6;
+    --pte-tokens-colors-teal400: #1deecd;
+    --pte-tokens-colors-teal300: #8ef7e6;
+    --pte-tokens-colors-teal200: #d9fcf7;
+    --pte-tokens-colors-teal100: #ecfefb;
+    --pte-tokens-colors-red700: #331611;
+    --pte-tokens-colors-red600: #541a0f;
+    --pte-tokens-colors-red500: #a9331f;
+    --pte-tokens-colors-red400: #fd4d2e;
+    --pte-tokens-colors-red300: #fea697;
+    --pte-tokens-colors-red200: #ffe1dc;
+    --pte-tokens-colors-red100: #fff0ee;
+    --pte-tokens-colors-yellow600: #554016;
+    --pte-tokens-colors-yellow500: #aa802d;
+    --pte-tokens-colors-yellow450: #eba417;
+    --pte-tokens-colors-yellow400: #ffc043;
+    --pte-tokens-colors-yellow300: #ffe0a1;
+    --pte-tokens-colors-yellow200: #fff5e0;
+    --pte-tokens-colors-yellow100: #fff8e8;
+    --pte-tokens-colors-green700: #063717;
+    --pte-tokens-colors-green600: #0a4820;
+    --pte-tokens-colors-green500: #148f41;
+    --pte-tokens-colors-green400: #08c94e;
+    --pte-tokens-colors-green300: #8febb0;
+    --pte-tokens-colors-green200: #daf8e5;
+    --pte-tokens-colors-green100: #edfcf2;
+    --pte-tokens-colors-gradientTeal: linear-gradient(95.14deg, #26EDED 0%, #14EFAC 100%);
+    --pte-tokens-colors-gradientOrange: linear-gradient(95.14deg, #FF814A 0%, #FFA800 100%);
+    --pte-tokens-colors-gradientPink: linear-gradient(90deg, #FF4BED 0%, #F7418D 100%);
+    --pte-colors-black: #060606;
+    --pte-colors-white: #ffffff;
+    --pte-colors-accent: #1deecd;
+    --pte-colors-negative: #fd4d2e;
+    --pte-colors-warning: #ffc043;
+    --pte-colors-positive: #08c94e;
+    --pte-colors-contentPrimary: #121212;
+    --pte-colors-contentSecondary: #545454;
+    --pte-colors-contentTertiary: #757575;
+    --pte-colors-contentDisabled: #afafaf;
+    --pte-colors-contentAccent: #1deecd;
+    --pte-colors-contentNegative: #fd4d2e;
+    --pte-colors-contentWarning: #ffc043;
+    --pte-colors-contentPositive: #08c94e;
+    --pte-colors-contentInversePrimary: #ffffff;
+    --pte-colors-contentInverseSecondary: #e2e2e2;
+    --pte-colors-contentInverseTertiary: #afafaf;
+    --pte-colors-contentInverseDisabled: #757575;
+    --pte-colors-backgroundSidebar: #060606;
+    --pte-colors-backgroundPrimary: #ffffff;
+    --pte-colors-backgroundSecondary: #f6f6f6;
+    --pte-colors-backgroundTertiary: #eeeeee;
+    --pte-colors-backgroundAccent: #ecfefb;
+    --pte-colors-backgroundNegative: #fff0ee;
+    --pte-colors-backgroundWarning: #fff8e8;
+    --pte-colors-backgroundPositive: #edfcf2;
+    --pte-colors-backgroundInverseSidebar: #121212;
+    --pte-colors-backgroundInversePrimary: #060606;
+    --pte-colors-backgroundInverseSecondary: #252525;
+    --pte-colors-backgroundInverseTertiary: #2e2e2e;
+    --pte-colors-backgroundInverseNegative: #331611;
+    --pte-colors-backgroundInversePositive: #063717;
+    --pte-colors-backgroundOverlayLight: rgba(255, 255, 255, 0.07);
+    --pte-colors-backgroundOverlayXLight: rgba(255, 255, 255, 0.1);
+    --pte-colors-backgroundOverlayGrey: rgba(175, 175, 175, 0.8);
+    --pte-colors-backgroundOverlayTeal: rgba(29, 238, 205, 0.1);
+    --pte-colors-borderOpaque: #e2e2e2;
+    --pte-colors-borderSelected: #757575;
+    --pte-colors-borderAccent: #1deecd;
+    --pte-colors-borderNegative: #fd4d2e;
+    --pte-colors-borderWarning: #ffc043;
+    --pte-colors-borderPositive: #08c94e;
+    --pte-colors-borderInverseOpaque: #3c3c3c;
+    --pte-colors-borderInverseSelected: #e2e2e2;
+    --pte-typography-fontFamily: "Graphik Web", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
+    --pte-typography-boldFontWeight: 500;
+    --pte-typography-italicLetterSpacing: -0.01em;
+    --pte-typography-styles-displayLarge-fontStyle: normal;
+    --pte-typography-styles-displayLarge-letterSpacing: -0.01em;
+    --pte-typography-styles-displayLarge-fontWeight: 600;
+    --pte-typography-styles-displayLarge-textTransform: none;
+    --pte-typography-styles-displayLarge-fontSize: 72px;
+    --pte-typography-styles-displayLarge-lineHeight: 86px;
+    --pte-typography-styles-displayMedium-fontStyle: normal;
+    --pte-typography-styles-displayMedium-letterSpacing: -0.01em;
+    --pte-typography-styles-displayMedium-fontWeight: 600;
+    --pte-typography-styles-displayMedium-textTransform: none;
+    --pte-typography-styles-displayMedium-fontSize: 52px;
+    --pte-typography-styles-displayMedium-lineHeight: 62px;
+    --pte-typography-styles-displaySmall-fontStyle: normal;
+    --pte-typography-styles-displaySmall-letterSpacing: -0.01em;
+    --pte-typography-styles-displaySmall-fontWeight: 600;
+    --pte-typography-styles-displaySmall-textTransform: none;
+    --pte-typography-styles-displaySmall-fontSize: 34px;
+    --pte-typography-styles-displaySmall-lineHeight: 41px;
+    --pte-typography-styles-headingLarge-fontStyle: normal;
+    --pte-typography-styles-headingLarge-letterSpacing: normal;
+    --pte-typography-styles-headingLarge-fontWeight: 600;
+    --pte-typography-styles-headingLarge-textTransform: none;
+    --pte-typography-styles-headingLarge-fontSize: 32px;
+    --pte-typography-styles-headingLarge-lineHeight: 38px;
+    --pte-typography-styles-headingMedium-fontStyle: normal;
+    --pte-typography-styles-headingMedium-letterSpacing: normal;
+    --pte-typography-styles-headingMedium-fontWeight: 600;
+    --pte-typography-styles-headingMedium-textTransform: none;
+    --pte-typography-styles-headingMedium-fontSize: 28px;
+    --pte-typography-styles-headingMedium-lineHeight: 34px;
+    --pte-typography-styles-headingSmall-fontStyle: normal;
+    --pte-typography-styles-headingSmall-letterSpacing: normal;
+    --pte-typography-styles-headingSmall-fontWeight: 600;
+    --pte-typography-styles-headingSmall-textTransform: none;
+    --pte-typography-styles-headingSmall-fontSize: 24px;
+    --pte-typography-styles-headingSmall-lineHeight: 29px;
+    --pte-typography-styles-headingXSmall-fontStyle: normal;
+    --pte-typography-styles-headingXSmall-letterSpacing: normal;
+    --pte-typography-styles-headingXSmall-fontWeight: 600;
+    --pte-typography-styles-headingXSmall-textTransform: none;
+    --pte-typography-styles-headingXSmall-fontSize: 20px;
+    --pte-typography-styles-headingXSmall-lineHeight: 24px;
+    --pte-typography-styles-headingXXSmall-fontStyle: normal;
+    --pte-typography-styles-headingXXSmall-letterSpacing: normal;
+    --pte-typography-styles-headingXXSmall-fontWeight: 600;
+    --pte-typography-styles-headingXXSmall-textTransform: none;
+    --pte-typography-styles-headingXXSmall-fontSize: 18px;
+    --pte-typography-styles-headingXXSmall-lineHeight: 22px;
+    --pte-typography-styles-labelXLarge-fontStyle: normal;
+    --pte-typography-styles-labelXLarge-letterSpacing: 0.1em;
+    --pte-typography-styles-labelXLarge-fontWeight: 600;
+    --pte-typography-styles-labelXLarge-textTransform: uppercase;
+    --pte-typography-styles-labelXLarge-fontSize: 18px;
+    --pte-typography-styles-labelXLarge-lineHeight: 22px;
+    --pte-typography-styles-labelLarge-fontStyle: normal;
+    --pte-typography-styles-labelLarge-letterSpacing: 0.1em;
+    --pte-typography-styles-labelLarge-fontWeight: 600;
+    --pte-typography-styles-labelLarge-textTransform: uppercase;
+    --pte-typography-styles-labelLarge-fontSize: 16px;
+    --pte-typography-styles-labelLarge-lineHeight: 19px;
+    --pte-typography-styles-labelMedium-fontStyle: normal;
+    --pte-typography-styles-labelMedium-letterSpacing: 0.1em;
+    --pte-typography-styles-labelMedium-fontWeight: 600;
+    --pte-typography-styles-labelMedium-textTransform: uppercase;
+    --pte-typography-styles-labelMedium-fontSize: 14px;
+    --pte-typography-styles-labelMedium-lineHeight: 17px;
+    --pte-typography-styles-labelSmall-fontStyle: normal;
+    --pte-typography-styles-labelSmall-letterSpacing: 0.1em;
+    --pte-typography-styles-labelSmall-fontWeight: 600;
+    --pte-typography-styles-labelSmall-textTransform: uppercase;
+    --pte-typography-styles-labelSmall-fontSize: 12px;
+    --pte-typography-styles-labelSmall-lineHeight: 14px;
+    --pte-typography-styles-labelXSmall-fontStyle: normal;
+    --pte-typography-styles-labelXSmall-letterSpacing: 0.1em;
+    --pte-typography-styles-labelXSmall-fontWeight: 600;
+    --pte-typography-styles-labelXSmall-textTransform: uppercase;
+    --pte-typography-styles-labelXSmall-fontSize: 10px;
+    --pte-typography-styles-labelXSmall-lineHeight: 12px;
+    --pte-typography-styles-paragraphLarge-fontStyle: normal;
+    --pte-typography-styles-paragraphLarge-letterSpacing: normal;
+    --pte-typography-styles-paragraphLarge-fontWeight: 400;
+    --pte-typography-styles-paragraphLarge-textTransform: none;
+    --pte-typography-styles-paragraphLarge-fontSize: 18px;
+    --pte-typography-styles-paragraphLarge-lineHeight: 150%;
+    --pte-typography-styles-paragraphMedium-fontStyle: normal;
+    --pte-typography-styles-paragraphMedium-letterSpacing: normal;
+    --pte-typography-styles-paragraphMedium-fontWeight: 400;
+    --pte-typography-styles-paragraphMedium-textTransform: none;
+    --pte-typography-styles-paragraphMedium-fontSize: 16px;
+    --pte-typography-styles-paragraphMedium-lineHeight: 150%;
+    --pte-typography-styles-paragraphSmall-fontStyle: normal;
+    --pte-typography-styles-paragraphSmall-letterSpacing: normal;
+    --pte-typography-styles-paragraphSmall-fontWeight: 400;
+    --pte-typography-styles-paragraphSmall-textTransform: none;
+    --pte-typography-styles-paragraphSmall-fontSize: 14px;
+    --pte-typography-styles-paragraphSmall-lineHeight: 150%;
+    --pte-typography-styles-paragraphXSmall-fontStyle: normal;
+    --pte-typography-styles-paragraphXSmall-letterSpacing: normal;
+    --pte-typography-styles-paragraphXSmall-fontWeight: 400;
+    --pte-typography-styles-paragraphXSmall-textTransform: none;
+    --pte-typography-styles-paragraphXSmall-fontSize: 12px;
+    --pte-typography-styles-paragraphXSmall-lineHeight: 150%;
+    --pte-typography-styles-paragraphXXSmall-fontStyle: normal;
+    --pte-typography-styles-paragraphXXSmall-letterSpacing: normal;
+    --pte-typography-styles-paragraphXXSmall-fontWeight: 400;
+    --pte-typography-styles-paragraphXXSmall-textTransform: none;
+    --pte-typography-styles-paragraphXXSmall-fontSize: 10px;
+    --pte-typography-styles-paragraphXXSmall-lineHeight: 150%;
+    --pte-borders-radius-pill: 1000px;
+    --pte-borders-radius-circle: 100%;
+    --pte-borders-radius-rectangle: 0px;
+    --pte-borders-radius-rounded: 8px;
+    --pte-borders-radius-roundedSmall: 4px;
+    --pte-borders-radius-roundedLarge: 12px;
+    --pte-animations-interaction: 0.2s cubic-bezier(0.25, 1, 0.5, 1);
+}

package/public/thirteen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="31" fill="none"><g opacity=".9"><path fill="url(#a)" d="M13 .4v29.3H7V6.3h-.2L0 10.5V5L7.2.4H13Z"/><path fill="url(#b)" d="M28.8 30.1c-2.2 0-4-.3-5.7-1-1.7-.8-3-1.8-4-3.1a7.7 7.7 0 0 1-1.4-4.6h6.2c0 .8.3 1.4.7 2 .4.5 1 .9 1.7 1.2.7.3 1.6.4 2.5.4 1 0 1.7-.2 2.5-.5.7-.3 1.3-.8 1.7-1.4.4-.6.6-1.2.6-2s-.2-1.5-.7-2.1c-.4-.6-1-1-1.8-1.4-.8-.4-1.8-.5-2.9-.5h-2.7v-4.6h2.7a6 6 0 0 0 2.5-.5 4 4 0 0 0 1.7-1.3c.4-.6.6-1.3.6-2a3.5 3.5 0 0 0-2-3.3 5.6 5.6 0 0 0-4.5 0 4 4 0 0 0-1.7 1.2c-.4.6-.6 1.2-.6 2h-6c0-1.7.6-3.2 1.5-4.5 1-1.3 2.2-2.3 3.8-3C25 .4 26.8 0 28.8 0s3.8.4 5.3 1.1c1.5.7 2.7 1.7 3.6 3a7.2 7.2 0 0 1 1.2 4.2c0 1.6-.5 3-1.5 4a7 7 0 0 1-4 2.2v.2c2.2.3 3.8 1 5 2.2a6.4 6.4 0 0 1 1.6 4.6c0 1.7-.5 3.1-1.4 4.4a9.7 9.7 0 0 1-4 3.1c-1.7.8-3.7 1.1-5.8 1.1Z"/></g><defs><linearGradient id="a" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient><linearGradient id="b" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient></defs></svg>

package/public/vercel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

package/scripts/createComponent.js

@@ -0,0 +1,100 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require('fs');
+const path = require('path');
+
+if (!process.argv[2]) {
+    console.error('❌  Please provide a component name, e.g. pnpm create:component Button');
+    process.exit(1);
+}
+
+const componentNameInput = process.argv[2];
+
+if (!/[A-Za-z]+/.test(componentNameInput)) {
+    console.error('❌  Please provide a alphabet only component name in CamelCase, e.g. pnpm create:component Button');
+    process.exit(1);
+}
+
+// Capitalize the first letter of the component name
+const componentName = componentNameInput.charAt(0).toUpperCase() + componentNameInput.slice(1);
+
+const baseDir = path.resolve(process.cwd());
+const componentDirectory = `${baseDir}/src/stories/${componentName.toLocaleLowerCase()}`;
+
+const componentFile = `${componentDirectory}/${componentName}.tsx`;
+const cssModuleFile = `${componentDirectory}/${componentName}.module.scss`;
+const storyFile = `${componentDirectory}/${componentName}.stories.ts`;
+const indexFile = `${componentDirectory}/index.ts`;
+
+const componentCode = `import type { FC } from 'react';
+import styles from './${componentName}.module.scss';
+
+export type ${componentName}Props = {
+    /** The contents of the ${componentName}. */
+    children?: string;
+};
+
+export const ${componentName}: FC<${componentName}Props> = ({ children }) => (
+    <div className={styles.content}>
+        <p>{children || 'Replace this area with your component.'}</p>
+    </div>
+);
+`;
+
+const indexCode = `export * from './${componentName}';
+`;
+
+const cssModuleCode = `.content {
+    background-color: pink;
+    color: white;
+    height: 2rem;
+}
+`;
+
+const storyCode = `import type { Meta, StoryObj } from '@storybook/react';
+import { ${componentName} } from './${componentName}';
+
+const meta: Meta<typeof ${componentName}> = {
+    title: 'Uncategorized/${componentName}',
+    component: ${componentName},
+    tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ${componentName}>;
+
+export const Default: Story = {
+    args: {
+        children: 'Hello world! This is a new ${componentName} component.',
+    },
+};
+
+export const Secondary: Story = {
+    args: {
+        children: 'Hello world! This is a secondary component.',
+    },
+};
+`;
+
+const run = async () => {
+    const componentExists = await fs.promises
+        .access(indexFile)
+        .then(() => true)
+        .catch(() => false);
+
+    if (componentExists) {
+        throw new Error(`❌  Component ${componentName} already exists.`);
+    }
+
+    const success = await fs.promises.mkdir(componentDirectory)
+        .then(() => Promise.all([
+            fs.promises.writeFile(componentFile, componentCode, { encoding: 'utf8' }),
+            fs.promises.writeFile(cssModuleFile, cssModuleCode, { encoding: 'utf8' }),
+            fs.promises.writeFile(storyFile, storyCode, { encoding: 'utf8' }),
+            fs.promises.writeFile(indexFile, indexCode, { encoding: 'utf8' }),
+        ]))
+        .then(() => `✅  Component ${componentName} created!`);
+
+    return success;
+};
+
+run().then(console.log).catch(console.error);

package/scripts/generateEntry.js

@@ -0,0 +1,35 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require('path');
+const fs = require('fs');
+
+const baseDir = path.resolve(process.cwd());
+
+const componentDirectory = `${baseDir}/src/stories`;
+
+// Directories to intentionally ignore
+const ignoreDirectories = [
+    'assets',
+];
+
+const run = async () => {
+    // Iterate through the directory and get a list of subdirectories
+    const subDirectories = fs
+        .readdirSync(componentDirectory, { withFileTypes: true })
+        .filter((dirent) => dirent.isDirectory())
+        .map((dirent) => dirent.name)
+        .filter((directory) => !ignoreDirectories.includes(directory));
+
+    // Generate entry point file
+    const entryPointFile = `${baseDir}/index.ts`;
+    const entryPointCode = subDirectories
+        .map((subDirectory) => `export * from './src/stories/${subDirectory}';`)
+        .join('\n')
+        .concat('\n');
+
+    // Write the entry point file
+    await fs.promises.writeFile(entryPointFile, entryPointCode, { encoding: 'utf8' });
+
+    return '✅  Entry point file generated.';
+};
+
+run().then(console.log).catch(console.error);