sate-lib 1.0.0

package/.husky/commit-msg

@@ -0,0 +1 @@
+pnpm --no -- commitlint --edit $1

package/.husky/pre-commit

@@ -0,0 +1 @@
+pnpm run lint

package/.storybook/main.ts

@@ -0,0 +1,11 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: ["@storybook/addon-a11y", "storybook-design-token", "@storybook/addon-docs"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,17 @@
+import type { Preview } from "@storybook/react-vite";
+
+import "../src/assets/styles/base.scss";
+import "../src/assets/styles/tokens.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/README.md

@@ -0,0 +1,26 @@
+# SATE - Lib
+
+<!-- ![Light](./public/placeholder.jpg) -->
+
+## Tech Stack
+
+- [Vite](https://vite.dev/guide/)
+- [React](https://react.dev/)
+- [Typescript](https://www.typescriptlang.org/)
+- [Storybook](https://storybook.js.org/)
+- [Sass](https://sass-lang.com/)
+
+## Installation
+
+```bash
+  pnpm install
+  pnpm dev
+```
+
+## Commit etiquette
+
+- [Commit Etiquette](https://www.conventionalcommits.org/en/v1.0.0/)
+
+```bash
+  [build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test] : message
+```

package/commitlint.config.js

@@ -0,0 +1 @@
+export default { extends: ["@commitlint/config-conventional"] };

package/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "sate-lib",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "lint": "eslint ./src",
+    "prepare": "husky",
+    "build": "storybook build"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "sass": "^1.89.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "19.8.0",
+    "@commitlint/config-conventional": "19.8.0",
+    "@eslint/js": "^9.25.0",
+    "@storybook/addon-a11y": "^9.0.11",
+    "@storybook/addon-docs": "^9.0.11",
+    "@storybook/builder-vite": "^9.0.11",
+    "@storybook/react-vite": "^9.0.11",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^4.4.1",
+    "eslint": "^9.25.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-storybook": "^9.0.11",
+    "globals": "^16.0.0",
+    "husky": "^9.1.7",
+    "storybook": "^9.0.11",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.30.1",
+    "vite": "^6.3.5"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}

package/src/assets/icons/Bed.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.25 6.75H3V4.5C3 4.30109 2.92098 4.11032 2.78033 3.96967C2.63968 3.82902 2.44891 3.75 2.25 3.75C2.05109 3.75 1.86032 3.82902 1.71967 3.96967C1.57902 4.11032 1.5 4.30109 1.5 4.5V19.5C1.5 19.6989 1.57902 19.8897 1.71967 20.0303C1.86032 20.171 2.05109 20.25 2.25 20.25C2.44891 20.25 2.63968 20.171 2.78033 20.0303C2.92098 19.8897 3 19.6989 3 19.5V16.5H22.5V19.5C22.5 19.6989 22.579 19.8897 22.7197 20.0303C22.8603 20.171 23.0511 20.25 23.25 20.25C23.4489 20.25 23.6397 20.171 23.7803 20.0303C23.921 19.8897 24 19.6989 24 19.5V10.5C24 9.50544 23.6049 8.55161 22.9016 7.84835C22.1984 7.14509 21.2446 6.75 20.25 6.75ZM3 8.25H9.75V15H3V8.25ZM11.25 15V8.25H20.25C20.8467 8.25 21.419 8.48705 21.841 8.90901C22.2629 9.33097 22.5 9.90326 22.5 10.5V15H11.25Z"/>
+</svg>

package/src/assets/styles/animations.scss

@@ -0,0 +1,37 @@
+@keyframes slideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes modalEaseIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes modalFadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}

package/src/assets/styles/base.scss

@@ -0,0 +1,21 @@
+@use "./reset.scss";
+@use "./variables.scss";
+
+// @font-face {
+//   font-family: "Inter";
+//   font-weight: 400;
+//   src: url("../../assets/fonts/inter-regular-400.woff2") format("woff2");
+// }
+
+// @font-face {
+//   font-family: "Inter";
+//   font-weight: 500;
+//   src: url("../../assets/fonts/inter-medium-500.woff2") format("woff2");
+// }
+
+@font-face {
+  font-family: "Bebas Neue";
+  font-weight: 400;
+  src: url("../../assets/fonts/bebas-neue-v14-latin-regular.woff2")
+    format("woff2");
+}

package/src/assets/styles/reset.scss

@@ -0,0 +1,87 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  outline: none;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+  color: inherit;
+}
+
+img,
+picture,
+svg,
+video,
+canvas {
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+  border: none;
+  background: none;
+  outline: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+    transition: none;
+  }
+}
+
+body,
+html {
+  height: 100%;
+  scroll-behavior: smooth;
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+button {
+  cursor: pointer;
+}

package/src/assets/styles/tokens.css

@@ -0,0 +1,336 @@
+:root {
+  /**
+	* @tokens Shadow
+	* @presenter Shadow
+	*/
+  --box-shadow-1: 0px 1px 0px 0px rgba(17, 17, 26, 0.1);
+  --box-shadow-2: 0px 1px 0px rgba(17, 17, 26, 0.05),
+    0px 0px 8px rgba(17, 17, 26, 0.1);
+  --box-shadow-3: 0px 0px 16px 0px rgba(17, 17, 26, 0.1);
+  --box-shadow-4: 0px 8px 32px 0px rgba(17, 17, 26, 0.05),
+    0px 4px 16px 0px rgba(17, 17, 26, 0.05);
+  --box-shadow-5: 0px 8px 32px 0px rgba(17, 17, 26, 0.05),
+    0px 4px 16px 0px rgba(17, 17, 26, 0.1);
+  --box-shadow-6: 0px 16px 48px 0px rgba(17, 17, 26, 0.1),
+    0px 8px 24px 0px rgba(17, 17, 26, 0.1),
+    0px 1px 0px 0px rgba(17, 17, 26, 0.1);
+  --box-shadow-7: 0px 16px 56px 0px rgba(17, 17, 26, 0.1),
+    0px 8px 24px 0px rgba(17, 17, 26, 0.1),
+    0px 4px 16px 0px rgba(17, 17, 26, 0.1);
+  --box-shadow-8: 0px 24px 80px 0px rgba(17, 17, 26, 0.1),
+    0px 16px 56px 0px rgba(17, 17, 26, 0.1),
+    0px 8px 24px 0px rgba(17, 17, 26, 0.1);
+  /**
+	* @tokens Opacity
+	* @presenter Opacity
+	*/
+  --opacity-disabled: 0.38;
+  /**
+	* @tokens Color
+	* @presenter Color
+	*/
+  --color-theme-core-bright: #317c6c;
+  --color-theme-core-dark: #b80f0f;
+  --color-system-content-primary: #0e0e0e;
+  --color-system-content-secondary: #474747;
+  --color-system-content-tertiary: #767676;
+  --color-theme-content-link: #317c6c;
+  --color-theme-content-link-hover: #236859;
+  --color-theme-content-link-active: #1d5347;
+  --color-theme-interactive-primary: #317c6c;
+  --color-theme-interactive-primary-hover: #236859;
+  --color-theme-interactive-primary-active: #1d5347;
+  --color-system-interactive-secondary: #c6c6c6;
+  --color-system-interactive-secondary-active: #939da0;
+  --color-system-interactive-secondary-hover: #aeb8bb;
+  --color-theme-interactive-accent: #317c6c;
+  --color-theme-interactive-accent-hover: #236859;
+  --color-theme-interactive-accent-active: #1d5347;
+  --color-theme-interactive-control: #ffffff;
+  --color-theme-interactive-control-hover: #ffffff;
+  --color-theme-interactive-control-active: #ffffff;
+  --color-theme-interactive-contrast: #002c5b;
+  --color-theme-interactive-contrast-hover: #081b36;
+  --color-theme-interactive-contrast-active: #0e0f0c;
+  --color-system-border-neutral: #efefef;
+  --color-system-border-overlay: rgba(14, 15, 12, 0.12);
+  --color-theme-background-screen: #f5f7f7;
+  --color-theme-background-screen-hover: rgba(55, 53, 53, 0.04);
+  --color-theme-background-screen-active: rgba(55, 53, 53, 0.08);
+  --color-theme-background-elevated: #ffffff;
+  --color-theme-background-neutral: rgba(55, 53, 53, 0.04);
+  --color-theme-background-neutral-hover: rgba(55, 53, 53, 0.08);
+  --color-theme-background-neutral-active: rgba(55, 53, 53, 0.12);
+  --color-theme-background-overlay: rgba(55, 53, 53, 0.08);
+  --color-system-sentiment-negative: #b4280c;
+  --color-system-sentiment-warning: #ffcc00;
+  --color-system-sentiment-positive: #006e37;
+  --color-system-color-contrast: #ffffff;
+  --color-system-color-light: #ffffff;
+  --color-system-color-dark: #121511;
+  --color-system-color-contrast-overlay: #ffffff;
+  --color-system-color-contrast-theme: #121511;
+  --color-system-background-negative: rgba(255, 191, 189, 0.12);
+  --color-theme-background-input: #ffffff;
+  --color-system-sentiment-negative-hover: #950000;
+  --color-system-sentiment-negative-active: #850000;
+  --color-system-black: #000000;
+  --color-system-white: #ffffff;
+  --color-theme-accent: #b80f0f;
+  --color-theme-accent-hover: #a90d0d;
+  --color-theme-accent-active: #8b0c0c;
+  --color-theme-background-demo: #ff4d00;
+  --color-theme-background-demo-hover: rgba(255, 77, 0, 0.06);
+  --color-theme-background-demo-active: rgba(255, 77, 0, 0.09);
+  --color-system-user-red-light: #fff4ee;
+  --color-system-user-red-mid: #ffa98f;
+  --color-system-user-red-dark: #d40000;
+  --color-system-user-orange-dark: #a53e00;
+  --color-system-user-orange-mid: #ffc950;
+  --color-system-user-orange-light: #fff6e8;
+  --color-system-user-yellow-dark: #7b5a00;
+  --color-system-user-yellow-mid: #ffdd3a;
+  --color-system-user-yellow-light: #fff8e6;
+  --color-system-user-green-dark: #007500;
+  --color-system-user-green-mid: #7bfe7b;
+  --color-system-user-green-light: #effded;
+  --color-system-user-mint-dark: #255d3a;
+  --color-system-user-mint-mid: #d1f4de;
+  --color-system-user-mint-light: #e9fff1;
+  --color-system-user-cyan-dark: #007cd5;
+  --color-system-user-cyan-mid: #77e2ff;
+  --color-system-user-cyan-light: #f3f9ff;
+  --color-system-user-blue-dark: #005bff;
+  --color-system-user-blue-mid: #a5dcff;
+  --color-system-user-blue-light: #f6f8ff;
+  --color-system-user-indigo-dark: #7530df;
+  --color-system-user-indigo-mid: #e2ceff;
+  --color-system-user-indigo-light: #fbf7ff;
+  --color-system-user-purple-dark: #354682;
+  --color-system-user-purple-mid: #d4deff;
+  --color-system-user-purple-light: #ecf0ff;
+  --color-system-user-brown-dark: #954c00;
+  --color-system-user-brown-mid: #ffd244;
+  --color-system-user-brown-light: #fff7e7;
+  --color-system-user-pink-dark: #65203a;
+  --color-system-user-pink-mid: #fad9da;
+  --color-system-user-pink-light: #fff0f0;
+  --color-system-user-grey-dark: #5e5e5e;
+  --color-system-user-grey-mid: #e2e2e2;
+  --color-system-user-grey-light: #f9f9f9;
+  --color-system-modal-overlay: rgba(0, 0, 0, 0.5);
+  /**
+	* @tokens Animation
+	* @presenter Animation
+	*/
+
+  /**
+	* @tokens Border
+	* @presenter Border
+	*/
+
+  /**
+	* @tokens BorderRadius
+	* @presenter BorderRadius
+	*/
+  --radius-radii-10: 0.625rem;
+  --radius-radii-16: 1rem;
+  --radius-radii-24: 1.5rem;
+  --radius-radii-full: 62.5rem;
+  --radius-radii-32: 2rem;
+  --radius-radii-40: 2.5rem;
+  --radius-radii-64: 4rem;
+  --radius-radii-8: 0.5rem;
+  --radius-radii-4: 0.25rem;
+  --radius-radii-12: 0.75rem;
+  --radius-button: 0.25rem;
+  --radius-input: 0.25rem;
+  --radius-small-container: 0.5rem;
+  --radius-large-container: 1rem;
+  --radius-chip: 0.5rem;
+  --radius-medium-container: 0.75rem;
+  /**
+	* @tokens Easing
+	* @presenter Easing
+	*/
+
+  /**
+	* @tokens FontFamily
+	* @presenter FontFamily
+	*/
+  --typeface-theme: "Bebas Neue";
+  --typeface-system: Inter;
+  --typescale-display-large-font: "Bebas Neue";
+  --typescale-display-medium-font: "Bebas Neue";
+  --typescale-display-small-font: "Bebas Neue";
+  --typescale-title-screen-font: "Bebas Neue";
+  --typescale-title-section-font: Inter;
+  --typescale-title-subsection-font: Inter;
+  --typescale-title-body-font: Inter;
+  --typescale-title-group-font: Inter;
+  --typescale-body-large-font: Inter;
+  --typescale-body-large-emphasis-font: Inter;
+  --typescale-body-default-font: Inter;
+  --typescale-body-default-emphasis-font: Inter;
+  --typescale-body-small-font: Inter;
+  --typescale-body-small-emphasis-font: Inter;
+  --typescale-link-large-font: Inter;
+  --typescale-link-default-font: Inter;
+  --typescale-text-field-font: Inter;
+  /**
+	* @tokens FontSize
+	* @presenter FontSize
+	*/
+  --typescale-display-large-font-size: 6rem;
+  --typescale-display-medium-font-size: 4rem;
+  --typescale-display-small-font-size: 2.5rem;
+  --typescale-title-screen-font-size: 2.5rem;
+  --typescale-title-section-font-size: 1.625rem;
+  --typescale-title-subsection-font-size: 1.375rem;
+  --typescale-title-body-font-size: 1.125rem;
+  --typescale-title-group-font-size: 0.875rem;
+  --typescale-body-large-font-size: 1rem;
+  --typescale-body-large-emphasis-font-size: 1rem;
+  --typescale-body-default-font-size: 0.875rem;
+  --typescale-body-default-emphasis-font-size: 0.875rem;
+  --typescale-body-small-font-size: 0.75rem;
+  --typescale-body-small-emphasis-font-size: 0.75rem;
+  --typescale-link-large-font-size: 1rem;
+  --typescale-link-default-font-size: 0.875rem;
+  --typescale-text-field-font-size: 1rem;
+  /**
+	* @tokens FontWeight
+	* @presenter FontWeight
+	*/
+  --typeface-weight-regular: 400;
+  --typeface-weight-medium: 500;
+  --typeface-weight-semi-bold: 600;
+  --typeface-weight-bold: 700;
+  --typescale-display-large-weight: 400;
+  --typescale-display-medium-weight: 400;
+  --typescale-display-small-weight: 400;
+  --typescale-title-screen-weight: 400;
+  --typescale-title-section-weight: 600;
+  --typescale-title-subsection-weight: 600;
+  --typescale-title-body-weight: 600;
+  --typescale-title-group-weight: 500;
+  --typescale-body-large-weight: 400;
+  --typescale-body-large-emphasis-weight: 600;
+  --typescale-body-default-weight: 400;
+  --typescale-body-default-emphasis-weight: 600;
+  --typescale-body-small-weight: 400;
+  --typescale-body-small-emphasis-weight: 500;
+  --typescale-link-large-weight: 600;
+  --typescale-link-default-weight: 600;
+  --typescale-text-field-weight: 400;
+  /**
+	* @tokens LetterSpacing
+	* @presenter LetterSpacing
+	*/
+  --typescale-display-large-letter-spacing: 0;
+  --typescale-display-medium-letter-spacing: 0;
+  --typescale-display-small-letter-spacing: 0;
+  --typescale-title-screen-letter-spacing: 0;
+  --typescale-title-section-letter-spacing: -0.02500000037252903rem;
+  --typescale-title-subsection-letter-spacing: -0.01875000074505806rem;
+  --typescale-title-body-letter-spacing: -0.012500000186264515rem;
+  --typescale-title-group-letter-spacing: -0.0062500000931322575rem;
+  --typescale-body-large-letter-spacing: -0.012500000186264515rem;
+  --typescale-body-large-emphasis-letter-spacing: -0.012500000186264515rem;
+  --typescale-body-default-letter-spacing: 0;
+  --typescale-body-default-emphasis-letter-spacing: 0;
+  --typescale-body-small-letter-spacing: -0.012500000186264515rem;
+  --typescale-body-small-emphasis-letter-spacing: -0.012500000186264515rem;
+  --typescale-link-large-letter-spacing: -0.012500000186264515rem;
+  --typescale-link-default-letter-spacing: 0;
+  --typescale-text-field-letter-spacing: -0.012500000186264515rem;
+  /**
+	* @tokens LineHeight
+	* @presenter LineHeight
+	*/
+  --typescale-display-large-line-height: 5.125rem;
+  --typescale-display-medium-line-height: 3.375rem;
+  --typescale-display-small-line-height: 2.125rem;
+  --typescale-title-screen-line-height: 2.125rem;
+  --typescale-title-section-line-height: 2rem;
+  --typescale-title-subsection-line-height: 1.75rem;
+  --typescale-title-body-line-height: 1.5rem;
+  --typescale-title-group-line-height: 1.25rem;
+  --typescale-body-large-line-height: 1.5rem;
+  --typescale-body-large-emphasis-line-height: 1.5rem;
+  --typescale-body-default-line-height: 1.375rem;
+  --typescale-body-default-emphasis-line-height: 1.375rem;
+  --typescale-body-small-line-height: 1rem;
+  --typescale-body-small-emphasis-line-height: 1rem;
+  --typescale-link-large-line-height: 1.5rem;
+  --typescale-link-default-line-height: 1.375rem;
+  --typescale-text-field-line-height: 1.25rem;
+  /**
+	* @tokens Spacing
+	* @presenter Spacing
+	*/
+  --spacing-size-4: 0.25rem;
+  --spacing-size-8: 0.5rem;
+  --spacing-size-12: 0.75rem;
+  --spacing-size-16: 1rem;
+  --spacing-size-24: 1.5rem;
+  --spacing-size-32: 2rem;
+  --spacing-size-40: 2.5rem;
+  --spacing-size-48: 3rem;
+  --spacing-size-56: 3.5rem;
+  --spacing-size-64: 4rem;
+  --spacing-size-72: 4.5rem;
+  --spacing-size-80: 5rem;
+  --spacing-size-88: 5.5rem;
+  --spacing-size-96: 6rem;
+  --spacing-size-104: 6.5rem;
+  --spacing-size-112: 7rem;
+  --spacing-size-120: 7.5rem;
+  --spacing-size-128: 8rem;
+  --spacing-size-146: 9.125rem;
+  --spacing-size-154: 9.625rem;
+  --spacing-size-0: 0;
+  --padding-x-small: 0.5rem;
+  --padding-small: 1rem;
+  --padding-medium: 1.5rem;
+  --padding-large: 2rem;
+  --size-x-small: 1.5rem;
+  --size-medium: 2.5rem;
+  --size-large: 3rem;
+  --size-x-large: 3.5rem;
+  --size-small: 2rem;
+  --size-2x-large: 4.5rem;
+  --size-2x-small: 1rem;
+  --spacing-column-gap-cards: 0.75rem;
+  --spacing-column-gap-chips: 0.5rem;
+  --spacing-column-margin-screen-mobile: 1.5rem;
+  --spacing-column-gap-default: 1rem;
+  --spacing-row-gap-text: 0.5rem;
+  --spacing-row-gap-image-bottom: 0.5rem;
+  --spacing-row-gap-display-text-bottom: 1rem;
+  --spacing-row-gap-text-to-component: 1rem;
+  --spacing-row-gap-content-to-button: 1.5rem;
+  --spacing-row-gap-sections: 2rem;
+  --spacing-row-gap-default: 1rem;
+  --spacing-row-gap-options: 0;
+  --spacing-row-gap-fields: 1rem;
+  --spacing-column-gap-fields: 0.5rem;
+  --spacing-column-gap-words: 0.25rem;
+  /**
+	* @tokens PARAGRAPH_SPACING
+	*/
+  --typescale-title-screen-paragraph-spacing: 0.5rem;
+  --typescale-title-section-paragraph-spacing: 0.5rem;
+  --typescale-title-subsection-paragraph-spacing: 0.5rem;
+  --typescale-title-body-paragraph-spacing: 0.5rem;
+  --typescale-title-group-paragraph-spacing: 0.5rem;
+  --typescale-body-large-paragraph-spacing: 0.5rem;
+  --typescale-body-large-emphasis-paragraph-spacing: 0.5rem;
+  --typescale-body-default-paragraph-spacing: 0.5rem;
+  --typescale-body-default-emphasis-paragraph-spacing: 0.5rem;
+  --typescale-body-small-paragraph-spacing: 0.5rem;
+  --typescale-body-small-emphasis-paragraph-spacing: 0.5rem;
+  --typescale-link-large-paragraph-spacing: 0.5rem;
+  --typescale-link-default-paragraph-spacing: 0.5rem;
+  --typescale-text-field-paragraph-spacing: 0.5rem;
+}

package/src/assets/styles/typography.scss

@@ -0,0 +1,21 @@
+@mixin typescale-display-large {
+  font-family: var(--typescale-display-large-font, Inter);
+  font-size: var(--typescale-display-large-font-size, 6rem);
+  font-weight: var(--typescale-display-large-weight, 700);
+  line-height: var(
+    --typescale-display-large-line-height,
+    5.125rem
+  ); /* 85.417% */
+  letter-spacing: var(--typescale-display-large-letter-spacing, 0rem);
+}
+
+@mixin typescale-display-medium {
+  font-family: var(--typescale-display-medium-font, Inter);
+  font-size: var(--typescale-display-medium-font-size, 4rem);
+  font-weight: var(--typescale-display-medium-weight, 700);
+  line-height: var(
+    --typescale-display-medium-line-height,
+    3.375rem
+  ); /* 84.375% */
+  letter-spacing: var(--typescale-display-medium-letter-spacing, 0rem);
+}

package/src/assets/styles/variables.scss

@@ -0,0 +1,8 @@
+html {
+  --zindex-input: 1;
+  --zindex-input-hover: 2;
+  --zindex-input-focus: 3;
+  --zindex-input-active: 4;
+  --zindex-input-clear-button: 5;
+  --zindex-modal: 50;
+}

package/src/components/badge/badge.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { expect, within } from "storybook/test";
+import { Badge } from "./badge";
+
+const meta: Meta<typeof Badge> = {
+  title: "Components/Badge",
+  component: Badge,
+  tags: ["autodocs"],
+  args: {
+    children: "Label",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  play: ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const text = canvas.getByText(args.children as string);
+
+    expect(text).toBeInTheDocument();
+  },
+};

package/src/components/badge/badge.styles.scss

@@ -0,0 +1,7 @@
+.c-badge {
+  padding: var(--spacing-size-4, 0.25rem) var(--spacing-size-8, 0.5rem);
+  color: var(--color-system-content-secondary, #474747);
+  border-radius: 0.25rem;
+  border: 1px solid var(--color-system-border-neutral, rgba(14, 15, 12, 0.04));
+  background: var(--color-theme-background-neutral, rgba(5, 48, 91, 0.04));
+}

package/src/components/badge/badge.tsx

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import classNames from "classnames";
+import "./badge.styles.scss";
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  children: ReactNode;
+}
+
+export function Badge({ className, children, ...props }: BadgeProps) {
+  return (
+    <span className={classNames(className, "c-badge")} {...props}>
+      {children}
+    </span>
+  );
+}

package/src/components/test/test.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { expect, within } from "storybook/test";
+import { Test } from "./test";
+
+const meta: Meta<typeof Test> = {
+  title: "Components/Test",
+  component: Test,
+  tags: ["autodocs"],
+  args: {
+    children: "Label",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  play: ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const text = canvas.getByText(args.children as string);
+
+    expect(text).toBeInTheDocument();
+  },
+};

package/src/components/test/test.styles.scss

@@ -0,0 +1,3 @@
+.c-test {
+  border-radius: 0.25rem;
+}

package/src/components/test/test.tsx

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import classNames from "classnames";
+import "./test.styles.scss";
+
+export interface TestProps extends HTMLAttributes<HTMLSpanElement> {
+  children: ReactNode;
+}
+
+export function Test({ className, children, ...props }: TestProps) {
+  return (
+    <span className={classNames(className, "c-test")} {...props}>
+      {children}
+    </span>
+  );
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+import "./assets/styles/base.scss";
+
+export { Badge } from "./components/badge/badge";
+export { Test } from "./components/test/test";

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.app.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})