@jordan-mace/chaser-design-system 1.2.2 → 1.2.4

package/dist/styles/theme.css.js

@@ -1,41 +1,51 @@
-import "src/styles/sprinkles.css.ts.vanilla.css!=!../../../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.25_webpack@5.104.1/node_modules/@vanilla-extract/webpack-plugin/virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js?{\"fileName\":\"src/styles/sprinkles.css.ts.vanilla.css\",\"source\":\"#H4sIAAAAAAAAA5Wc227jVhJF3_srBAwGyDw4EG-HpPMSSpR-Y0CRh6Rs3ZqS23YP-t8HaZItn127SDfylqyyVdIqWrsC1N-H4t12i_J8vJxP9nS7_vXlz_9678H1W3eMXxb_-7JYlOfDuXtc_GsbbbPt5q8vPz4Qrw6R55vNNneJd4dYbfPtdu0QydIhMpMHSPgOkSTrEInQIcxmFSNhHCIKsxUSiUMEYbqGbpPCIbwsXW63LlE6xNJLvG3qEtYlgjjM3XcsaVwiNOEKXsceiCjOQpd4dokozJLMJY7wM4LMwPtxBsLPo8AlvkIvXh5ELnF1Cd9betCtcEy86-jY1oBjCTq2QcdSdGyTIoGObdDCFB3LcyTQsTxBAh3Lfeg2RcfWOTiWomPrABxL0bFsA46l6FhqwLEUHUs8cCxFx0wOjqXoWBSBYyk6FvrgWIqO-Rk4lgrHYnAsFY6l-K6L59gKHEtdx9bLPIPPtgDH4vV6u3IJcCxdZUi4jsXLTPwMcMykORLgmEnW-ErBsXWcQ7cFOBaafGtcAhwzxs_hdYBjJopW8DrAMRNmme8S4JgJtkniEkckPAOvAxyLfBPBbxHPsRQcK9Cx5caDXsCxZCs-W9exTbJZb13XC9exPMxXG7fbnevYOljnuft02LmOZdtVnru97FzH0n9Edj_9netYkmfe2p39netYHKfLldvtznXMmMRfue_6znUsCmM_cx3buY6FaxOn8Dpcx0I_SpOlS7iOBVmYG3f2d65jgRd6ERCuY34chKH7xN25jnkbPwngk3Md80Iv86EXcGy13HhAgGPZP_-4BDiWb9Yb6AUcy_P1xn3HStexfLne5O7rKF3H1svVZu1-cqXr2CpYLVfuKy1dx7Io8zP3lZauY6lJ_QxeqetYkiYh-FG6jsVpHCbwSl3HTG6S2P3kStexaBNlBgjXscgLNxF06zoWRqEfus-P0nUsiIMocCeqdB3zMz_14R0Dx1Ze5gEBjm2XGw_e096xXVE-N9355VTxL_7lq8TIt__yXWIkAlRLiZEcUPkSI2GgCiVGEkFlJEZiQZVIjGSDqpAYCQhVKTGSEipLMBkVqoZgMi9Ue4aJ0FA9E0wmh-rIfpqID9WZYSJDVF9ZpyJIVFeCyTRRcXvFh0XtFbmiovaKcGGpvSJhWGqviBmW2iuyhqX2isBhqb0idVhqr4geltor8oel9ooQYqm9IolYaq-II5baKzKJpfaKYGKpvSKdWGqviCiW24s5xXJ7MaxY_uzFxGKJvSS21MxemV1qZq8MMDWxl6SYmtkro0zN7JV5pmb2ylBTM3tlsqmZvTLe1MxemXFqZq8MOjWzV6admtkrI0_N7JW5p-bPXgw_NbVXJKCa2StjUE3sJVmoJvaSQNQQe0kqaoi9JBo1xF6SjxpiLwlJDbGXJKWG2EviUkPsJZmpIfaS4NQQe0l6aoi9JEI1xF6SoxpiLwlTDbGXJKqG2EtiVcPsldmqYfbKgNUwe2XKapi9Mmq1xF6St1piLwldLbGXJK-W2EviV0vsJRmsJfaSINYSe0kaa4m9JJK1xF6Sy1piLwlnLbGXJLSW2EtiWkvsJVmtZfbKwNYye3-ltr_xf978hH8V93YtFtX-ejkU74-L0_lk__qyWPz4SAVI1Qf7JiiD1O5wLp8FliK2Px325JeWA_e6r27t46J4uZ0FU7uMt1z-WzB7l4kIcnARP5LIeUBau2_am_JyOoDo63kBiL2gN2DYK_LGz-6fD-Oh2ne2vO3Pp8dFd36VcKDA5fnwcjxJfvwwn16ut339_lCeTzd7uj0urrfO3spWVqRaxc9feb0V3U0WlVpRaU8328mCevK32FMlS_ZqK5eitA_Fz6GRZYfpsp29vVpL3rnRlOKwb04P-5s9XifetY7RU-_YCyvQ3q039aezd8ofjboUVbU_NQ-38-VxsZRcwLjwIh8JvmFkwsiUkZ5haMlQOpB-DejufLudj7SpvYLSvg4KTFs7KzDvrlNo3uAL0Adb32h7bxRkzQWoQY-y1gI0oUdpYwG60LO0rQBt6PrnoOwrQBkGkjaGNgws7Qx1GFjeGurQTfyRCEYdjkXX7E_qJxZ0jKN9vTCSdvXGSNpTuGQo7SgMXFT9sEJDQdZTmFKUNRWWFOVd1ZTlbe1dVnkahgeC0ZbOBKQNdQTk7bwQkjcDn7z-IIyWnGQtRQFnWVeR4SxtLEo5THuLRgF2566ynTpRUc042teekbSrAyN5T2eG8o46F1UnKnqhIO3pjaKsKbOkKO3KBJSlbRnjsspEmZRgrCVTEpA2VBOQt7MnJG8GPnl9osyZk7SljrO0qxfO8sbeOEx7i1GAotq_XFlvMX78A8l6iw1nWW9xylnaW1xymPc2utAU1L54__G_0z4OHwn66s8fCf6au4_Ix1f699FW-2JxLTtrT4viVC3-OO5PD0M4jU1yefvPUHv_pj_8C5Lk-x_68U-BZMc8L9hYsr9SvYALCd-zvaCrXzQkfEE2SI65WpBPSEYKeERwSNgCvPwCMfkL9CpQ9XV-E6j2Qt8Fqb1S7-6AshGQJaFact8LyKq7FFPbAVlX6HVu4pWllV56z76yrJn5jUMKloVPEy3C1kAWH-eKP-wOZPXdOG2DIGuuvGbuXf3Gy6be0feJ36S9m_7dTLlZkHTI6eFJLPmY84nGF5wfn9KyoOIF6oPAb0SB8-VAFjypBWrXR7VEbfyilui9X9Uavf1voubDN3KJvyu41nogdXK-n8sCaZT7NV1WSKfcb-uyQlr18Uu75KVU7nd3WSGtcr_CywqpFXyTlyVSq27mz15w10puNCR95bTa9TfOqz2_c17tOPR4gdpvGGLB5AcdxgqudRwWSoHWclgpBXrPjVKhN_2EFRNP8PBIYbVhIdDk8zsUBk0_vkNh0PTTOxQGTT-8IyHQ3LM7EgbNPbojIdHskzsSGs0-uKO7SHKTIumG02rXT5xXez5yXu_4wgv0fq9YMDnJ0TcFVzt-Vwq0lo2nFKg9m1CpUJs2MVZMTLIpKKw1bIRAk5NshEHTk2yEQdOTbIRB05NshEBzk2yEQXOTbIREs5NshEazkxxLkT5ucCQvNXL3OLJCaATbHFkhXMKdjiwRPuFmR5bcnbrvdyT15FJql0eXU3u7uJze0dUF3T7mtz_e0g_J-sf_jfVP9Bvrn-R31j-731r_2E-vf9pPr3-eP7v-OX12_fP18-uf2-fXP6-fXv98__z65-7Ap9c_kVoytf65S_F765-dXje3qLB66dSyop35jer653mixdn1z2mueHL9czfu8-ufG6-Ze1dfednUO_p94jep65-7mZ9Z_0ScVhchCefVLciO8_oKxPICff_RioKZ9c-zWqB2fVJL1Ma_qiV67ze1Rm__VdRMrn--K7i6EZA6zawEpFFz6x_p1Nz6R1o1vf6RUs2tf6RVc-sfqdXs-kdqNbv-uWv1mfXPjdNq16-cV3v-znl9O-DzAn09EGHB9PonUXB1G7JTCtR9iFUK9J5bpUJv-hkrptY_JwqrDQuBptc_wqCZ9Y8waGb9IwyaWf8IgWbXP8Kg2fWPkGh-_SM0ml__3EX6zPqn5bTa9TPn1Z5PnNc7_soL9H5vWDC9_nlVcLXj70qBuhvwlQJ9NRApFfpOJMGKqfXPjsLqNkQINL3-EQbNrH-EQTPrH2HQzPpHCDS7_hEGza5_hETz6x-h0fz6R4o0vf6RGs2tf4RGs-sf4dL8-kf4NL_-uTs1tf55dim1y5PLqb19dTm9o5sL4vrnx5dh_fPHpbO17a4PP-8wPFzL1h7t46Iquud--XP_keNCEW-w9T_zzr0BN95iQO47cOMxBuASD7jxGgNyAXDjOQbkIuDGewzIxcCNBxmQS4EbLzIgtwNuPMmAXAXceJMBuRq54SgDci1yw1UG5J4E159lQO6A3HCXAbmT-Hn9YQbkLoLrLzMg14l--9MMyN2QG24zIEd8pp-b9Lm_zoCc9HnDfE6lz_19BuSkzxvmfSp97i80ICd97k80ICd97m80ICd97o80ICd97q80ICd97s80ICd97u80ICd97g81ICd97i81ICd97k81ICd97m81ICd97o81IEd8jonPKfE5ZZ8beT6viM8p-jwebACuED4PFxuQEz4PJxuQQ5_Hmw3ICZ-How3ICZ-Hqw3ICZ-Hsw3ICZ-Huw3ICZ-Hww3ICZ-Hyw3ICZ-H0w3ICZ-H2w3ICZ-H4w3ICZ-H6w3IkedzSnwupM_9_QbkhM_DAQfk0OfxggNy6PN4wgG4Hfo83nBADn0ejzgghz6PVxyQQ5_HMw7Ioc_jHQfk0OfxkANy6PN4yQE59Hk85YAc-jzeckAOfR6POSCHPo_XHJBDn8dzDsihz-M9B-TQ5_GgA3LC5-GiA3LC5-GkA3LC5-GmA3LC5-GoA3Al-jxedUAOfR7POiCHPo93HZBDn8fDDsihz-NlB-TQ5_G0A3Lo83jbATn0eTzugBz6PF53QA59Hs87IIc-j_cdkEOfxwMPyKHP44UH5ITPw4kH5ITPw40H5Eaf6X0-hN8YrCTD8juDlXhYeQxWMmIVMFgJilXEYCUtVjGDlchYpQxWcmO1Y7ASHquKwUqCrGoK8xhZtRTmWbJ64jANlNWBwjxVVif-k2m0rC4cpvmy6vi7QUNmdaMwT5qVNin041YmhWbOSpkUGjytMik0fVplUmgEtcqk0BxqlUmhYdQqk0ITqVUmhcZSq0wKzaZWmRQaUK0yKTSlWmVSaFS1yqTQvGqVSaGh1SqTQpOrVSaFxlerTQrLsFabFBZkrfY3haVZSydFibQ1nxSea2s-KTzc1nRSlIRb80nhMbfmk8Kzbs0nhQfemk8KT701nxQefWs-KTz_1nxSeAiu-aTwJFzzSeFxuOaTwjNxrf1NYcG4ViaFpuOaTwqPyDWdFCUn13RSlLDc0ElREnNDJ0WJzQ2dFCU7N3RSlADd0ElRUnRDJ0WJ0g2dFCVPN3RSlFDd0ElRknVDJ0WJ1w2dFCVjN3RSlKDd0ElR0nZDJ0WJ3A2fFJ67Gz4pPHw3fFJ4Am_4pPAY3tJJUbJ4SydFCeQtnRQllbd0UpRo3tJJUfJ5SydFCektnRQlqbd0UpS43tJJUTJ7SydFCe4tnRQlvbd0UpQI39JJUXJ8yyeFh_mWT8qHRP_j__OspDh2awAA\"}!../../../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.25_webpack@5.104.1/node_modules/@vanilla-extract/webpack-plugin/extracted.js";
-import "src/styles/theme.css.ts.vanilla.css!=!../../../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.25_webpack@5.104.1/node_modules/@vanilla-extract/webpack-plugin/virtualFileLoader/dist/vanilla-extract-webpack-plugin-virtualFileLoader.cjs.js?{\"fileName\":\"src/styles/theme.css.ts.vanilla.css\",\"source\":\"QGxheWVyIHRoZW1lOwpib2R5IHsKICBmb250LWZhbWlseTogJ0ludGVyJywgc2Fucy1zZXJpZjsKfQpoMSwgaDIsIGgzLCBoNCwgaDUsIGg2IHsKICBmb250LWZhbWlseTogJ1BvcHBpbnMnLCBzYW5zLXNlcmlmOwp9CkBsYXllciB0aGVtZSB7CiAgOnJvb3QgewogICAgLS1fNGxzaGd6MDogIzJBMjkyRTsKICAgIC0tXzRsc2hnejE6ICM3OTc0ODY7CiAgICAtLV80bHNoZ3oyOiAjQTVBMkFFOwogICAgLS1fNGxzaGd6MzogI0Y1RkFGRTsKICAgIC0tXzRsc2hnejQ6ICMwMjEwMUQ7CiAgICAtLV80bHNoZ3o1OiAjMDQ2NEJFOwogICAgLS1fNGxzaGd6NjogIzAxODFGOTsKICAgIC0tXzRsc2hnejc6ICNEREVFRkQ7CiAgICAtLV80bHNoZ3o4OiAjQTZEM0ZDOwogICAgLS1fNGxzaGd6OTogI0MzQ0RERjsKICAgIC0tXzRsc2hnemE6ICNFOEVDRjM7CiAgICAtLV80bHNoZ3piOiAjRjhGQUZCOwogICAgLS1fNGxzaGd6YzogI0Y4RkFGQjsKICAgIC0tXzRsc2hnemQ6ICNGNUZDRkU7CiAgICAtLV80bHNoZ3plOiAjMDFDM0Y5OwogICAgLS1fNGxzaGd6ZjogIzA0NDI1MzsKICAgIC0tXzRsc2hnemc6ICNGNUY5RkU7CiAgICAtLV80bHNoZ3poOiAjMDQ2REY2OwogICAgLS1fNGxzaGd6aTogIzA1MjY1MjsKICAgIC0tXzRsc2hnemo6ICNGOEZBRkI7CiAgICAtLV80bHNoZ3prOiAjNTQ3MkE2OwogICAgLS1fNGxzaGd6bDogIzFFMjgzODsKICAgIC0tXzRsc2hnem06ICNGNUZBRkU7CiAgICAtLV80bHNoZ3puOiAjMDE4MUY5OwogICAgLS1fNGxzaGd6bzogIzA0MkQ1MzsKICAgIC0tXzRsc2hnenA6ICNGOEZBRkI7CiAgICAtLV80bHNoZ3pxOiAjQzNDRERGOwogICAgLS1fNGxzaGd6cjogIzAxODFGOTsKICAgIC0tXzRsc2hnenM6ICNBNUEyQUU7CiAgICAtLV80bHNoZ3p0OiAjRThFQ0YzOwogICAgLS1fNGxzaGd6dTogJ0ludGVyJywgc2Fucy1zZXJpZjsKICAgIC0tXzRsc2hnenY6ICdQb3BwaW5zJywgc2Fucy1zZXJpZjsKICB9Cn0\"}!../../../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.25_webpack@5.104.1/node_modules/@vanilla-extract/webpack-plugin/extracted.js";
-var vars = {
+import { createGlobalTheme, globalStyle } from '@vanilla-extract/css';
+import { colors } from './sprinkles.css';
+import { themeLayer } from './layers.css';
+// Import Google Fonts
+globalStyle('@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap");', {});
+// Apply global font styles
+globalStyle('body', {
+    fontFamily: "'Inter', sans-serif",
+});
+globalStyle('h1, h2, h3, h4, h5, h6', {
+    fontFamily: "'Poppins', sans-serif",
+});
+export const vars = createGlobalTheme(':root', {
+    '@layer': themeLayer,
     colors: {
-        textPrimary: 'var(--_4lshgz0)',
-        textSecondary: 'var(--_4lshgz1)',
-        textDisabled: 'var(--_4lshgz2)',
-        buttonTextPrimary: 'var(--_4lshgz3)',
-        buttonTextSecondary: 'var(--_4lshgz4)',
-        buttonBackgroundPrimary: 'var(--_4lshgz5)',
-        buttonBackgroundFocusedPrimary: 'var(--_4lshgz6)',
-        buttonBackgroundFocusedSecondary: 'var(--_4lshgz7)',
-        buttonBackgroundSecondary: 'var(--_4lshgz8)',
-        borderDefault: 'var(--_4lshgz9)',
-        borderMuted: 'var(--_4lshgza)',
-        backgroundDefault: 'var(--_4lshgzb)',
-        backgroundMuted: 'var(--_4lshgzc)',
-        alertSuccessBackground: 'var(--_4lshgzd)',
-        alertSuccessBorder: 'var(--_4lshgze)',
-        alertSuccessText: 'var(--_4lshgzf)',
-        alertWarningBackground: 'var(--_4lshgzg)',
-        alertWarningBorder: 'var(--_4lshgzh)',
-        alertWarningText: 'var(--_4lshgzi)',
-        alertErrorBackground: 'var(--_4lshgzj)',
-        alertErrorBorder: 'var(--_4lshgzk)',
-        alertErrorText: 'var(--_4lshgzl)',
-        alertInfoBackground: 'var(--_4lshgzm)',
-        alertInfoBorder: 'var(--_4lshgzn)',
-        alertInfoText: 'var(--_4lshgzo)',
-        inputBackground: 'var(--_4lshgzp)',
-        inputBorder: 'var(--_4lshgzq)',
-        inputBorderFocused: 'var(--_4lshgzr)',
-        inputPlaceholder: 'var(--_4lshgzs)',
-        listBorder: 'var(--_4lshgzt)'
+        textPrimary: colors['c5-800'],
+        textSecondary: colors['c5-500'],
+        textDisabled: colors['c5-350'],
+        buttonTextPrimary: colors['c1-50'],
+        buttonTextSecondary: colors['c1-900'],
+        buttonBackgroundPrimary: colors['c1-600'],
+        buttonBackgroundFocusedPrimary: colors['c1-500'],
+        buttonBackgroundFocusedSecondary: colors['c1-100'],
+        buttonBackgroundSecondary: colors['c1-200'],
+        borderDefault: colors['c4-200'],
+        borderMuted: colors['c4-100'],
+        backgroundDefault: colors['c4-50'],
+        backgroundMuted: colors['c4-50'],
+        alertSuccessBackground: colors['c2-50'],
+        alertSuccessBorder: colors['c2-500'],
+        alertSuccessText: colors['c2-800'],
+        alertWarningBackground: colors['c3-50'],
+        alertWarningBorder: colors['c3-500'],
+        alertWarningText: colors['c3-800'],
+        alertErrorBackground: colors['c4-50'],
+        alertErrorBorder: colors['c4-500'],
+        alertErrorText: colors['c4-800'],
+        alertInfoBackground: colors['c1-50'],
+        alertInfoBorder: colors['c1-500'],
+        alertInfoText: colors['c1-800'],
+        inputBackground: colors['c4-50'],
+        inputBorder: colors['c4-200'],
+        inputBorderFocused: colors['c1-500'],
+        inputPlaceholder: colors['c5-350'],
+        listBorder: colors['c4-100'],
     },
     fontFamily: {
-        body: 'var(--_4lshgzu)',
-        heading: 'var(--_4lshgzv)'
-    }
-};
-export { vars };
+        body: "'Inter', sans-serif",
+        heading: "'Poppins', sans-serif",
+    },
+});

package/dist/styles/utils.js

@@ -1,8 +1,7 @@
-import { style } from "@vanilla-extract/css";
-import { componentsLayer } from "./layers.css.js";
-const styleWithLayer = (rule)=>style({
-        '@layer': {
-            [componentsLayer]: rule
-        }
-    });
-export { styleWithLayer };
+import { style } from '@vanilla-extract/css';
+import { componentsLayer } from './layers.css';
+export const styleWithLayer = (rule) => style({
+    '@layer': {
+        [componentsLayer]: rule,
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jordan-mace/chaser-design-system",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "type": "module",
   "sideEffects": [
     "*.css.js"
@@ -14,21 +14,13 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./cssReset.css": {
-      "import": "./dist/styles/reset.css.js",
-      "types": "./dist/styles/reset.css.d.ts"
-    },
-    "./layers.css": {
-      "import": "./dist/styles/layers.css.js",
-      "types": "./dist/styles/layers.css.d.ts"
-    },
-    "./theme.css": {
-      "import": "./dist/styles/theme.css.js",
-      "types": "./dist/styles/theme.css.d.ts"
-    }
+    "./cssReset.css": "./src/styles/reset.css.ts",
+    "./layers.css": "./src/styles/layers.css.ts",
+    "./theme.css": "./src/styles/theme.css.ts"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "devDependencies": {
     "@eslint/js": "^9.39.0",
@@ -44,11 +36,14 @@
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.6",
     "@types/react-dom": "^19.2.3",
+    "@vanilla-extract/esbuild-plugin": "^2.3.21",
+    "@vanilla-extract/integration": "^8.0.7",
     "@vanilla-extract/vite-plugin": "^5.1.1",
     "@vanilla-extract/webpack-plugin": "^2.3.22",
     "@vitejs/plugin-react": "^5.1.1",
     "@vitest/browser-playwright": "^4.0.10",
     "css-loader": "^7.1.2",
+    "esbuild": "^0.27.3",
     "eslint": "^9.39.0",
     "eslint-plugin-storybook": "^10.0.8",
     "globals": "^16.4.0",
@@ -58,6 +53,7 @@
     "storybook": "^10.1.8",
     "storybook-addon-rslib": "^3.1.0",
     "storybook-react-rsbuild": "^3.1.0",
+    "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.46.2",
     "vitest": "^4.0.10",
@@ -74,8 +70,8 @@
     "@rsbuild/core": "^1.6.14"
   },
   "scripts": {
-    "build": "rslib build",
-    "dev": "rslib build --watch",
+    "build": "rm -rf dist && tsc --project tsconfig.build.json --noCheck --skipLibCheck || true",
+    "dev": "tsc --project tsconfig.build.json --watch --noCheck --skipLibCheck || true",
     "format": "prettier --write .",
     "lint": "eslint .",
     "test": "vitest --config=vitest.browser.config.ts",

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Accordion } from '.';
+import React from 'react';
+
+const meta = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Accordion>
+      <Accordion.Item value="section1" title="What is the design system?">
+        <p>
+          A design system is a collection of reusable components, guided by clear
+          standards, that can be assembled to build any number of interfaces.
+        </p>
+      </Accordion.Item>
+      <Accordion.Item value="section2" title="Why use it?">
+        <p>
+          It helps teams build products faster, ensures consistency across products,
+          and makes it easier to maintain and scale the UI.
+        </p>
+      </Accordion.Item>
+      <Accordion.Item value="section3" title="How to get started?">
+        <p>
+          Install the package, import the components you need, and start
+          building your application with consistent styling.
+        </p>
+      </Accordion.Item>
+    </Accordion>
+  ),
+};
+
+export const WithDefaultExpanded: Story = {
+  render: () => (
+    <Accordion>
+      <Accordion.Item value="section1" title="Getting Started" defaultExpanded>
+        <p>Follow these steps to begin using the design system.</p>
+      </Accordion.Item>
+      <Accordion.Item value="section2" title="Components">
+        <p>Browse through all available components in the library.</p>
+      </Accordion.Item>
+      <Accordion.Item value="section3" title="Theming">
+        <p>Customize colors, fonts, and spacing to match your brand.</p>
+      </Accordion.Item>
+    </Accordion>
+  ),
+};
+
+export const AllowMultiple: Story = {
+  render: () => (
+    <Accordion allowMultiple>
+      <Accordion.Item value="section1" title="Installation">
+        <p>npm install @jordan-mace/chaser-design-system</p>
+      </Accordion.Item>
+      <Accordion.Item value="section2" title="Usage">
+        <p>Import components and use them in your React app.</p>
+      </Accordion.Item>
+      <Accordion.Item value="section3" title="Configuration">
+        <p>Set up the theme and global styles.</p>
+      </Accordion.Item>
+    </Accordion>
+  ),
+};

package/src/components/Accordion/Accordion.test.tsx

@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Accordion from './Accordion';
+import React from 'react';
+
+describe('Accordion', () => {
+  it('renders accordion correctly', async () => {
+    const { container } = await render(
+      <Accordion>
+        <Accordion.Item value="item1" title="Item 1">
+          <div>Content 1</div>
+        </Accordion.Item>
+        <Accordion.Item value="item2" title="Item 2">
+          <div>Content 2</div>
+        </Accordion.Item>
+        <Accordion.Item value="item3" title="Item 3">
+          <div>Content 3</div>
+        </Accordion.Item>
+      </Accordion>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders accordion with default expanded item correctly', async () => {
+    const { container } = await render(
+      <Accordion>
+        <Accordion.Item value="item1" title="Item 1" defaultExpanded>
+          <div>Content 1</div>
+        </Accordion.Item>
+        <Accordion.Item value="item2" title="Item 2">
+          <div>Content 2</div>
+        </Accordion.Item>
+      </Accordion>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders multiple accordion items correctly', async () => {
+    const { container } = await render(
+      <Accordion allowMultiple>
+        <Accordion.Item value="item1" title="Section 1">
+          <div>Content 1</div>
+        </Accordion.Item>
+        <Accordion.Item value="item2" title="Section 2">
+          <div>Content 2</div>
+        </Accordion.Item>
+        <Accordion.Item value="item3" title="Section 3">
+          <div>Content 3</div>
+        </Accordion.Item>
+      </Accordion>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,146 @@
+import clsx from 'clsx';
+import React, { createContext, useContext, useState, useCallback } from 'react';
+import {
+  accordionItem,
+  accordionHeader,
+  accordionContent,
+  accordionIcon,
+  accordionIconExpanded,
+  accordionGroup,
+} from './styles.css';
+import Box from '../Box';
+
+type AccordionContextType = {
+  allowMultiple?: boolean;
+  expandedItems: Set<string>;
+  toggleItem: (value: string) => void;
+};
+
+const AccordionContext = createContext<AccordionContextType>({
+  allowMultiple: false,
+  expandedItems: new Set(),
+  toggleItem: () => {},
+});
+
+type AccordionProps = {
+  children: React.ReactNode;
+  allowMultiple?: boolean;
+  className?: string;
+};
+
+const Accordion = ({
+  children,
+  allowMultiple = false,
+  className,
+}: AccordionProps) => {
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+
+  const toggleItem = (value: string) => {
+    setExpandedItems((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(value)) {
+        newSet.delete(value);
+      } else {
+        if (allowMultiple) {
+          newSet.add(value);
+        } else {
+          return new Set([value]);
+        }
+      }
+      return newSet;
+    });
+  };
+
+  return (
+    <AccordionContext.Provider value={{ allowMultiple, expandedItems, toggleItem }}>
+      <Box
+        className={clsx(accordionGroup, className)}
+        width="100%"
+      >
+        {children}
+      </Box>
+    </AccordionContext.Provider>
+  );
+};
+
+type AccordionItemProps = {
+  value: string;
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+};
+
+const AccordionItem = ({
+  value,
+  title,
+  children,
+  className,
+}: AccordionItemProps) => {
+  const { expandedItems, toggleItem } = useContext(AccordionContext);
+  const isExpanded = expandedItems.has(value);
+
+  const toggleExpanded = useCallback(() => {
+    toggleItem(value);
+  }, [value, toggleItem]);
+
+  return (
+    <Box
+      as="div"
+      className={clsx(accordionItem, className)}
+      width="100%"
+      marginBottom="small"
+      border="small"
+      borderRadius="large"
+      overflow="hidden"
+    >
+      <Box
+        as="button"
+        onClick={toggleExpanded}
+        className={accordionHeader}
+        display="flex"
+        alignItems="center"
+        justifyContent="space-between"
+        padding="small"
+        cursor="pointer"
+        style={{ userSelect: 'none' }}
+        fontSize="14px"
+        fontWeight="500"
+        color="c5-700"
+        aria-expanded={isExpanded}
+        aria-controls={`accordion-content-${value}`}
+      >
+        <Box as="span">{title}</Box>
+        <Box
+          as="span"
+          className={clsx(accordionIcon, isExpanded && accordionIconExpanded)}
+          fontSize="12px"
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          aria-hidden="true"
+        >
+          ▼
+        </Box>
+      </Box>
+      <Box
+        as="div"
+        id={`accordion-content-${value}`}
+        className={clsx(
+          accordionContent[isExpanded ? 'expanded' : 'collapsed'],
+        )}
+        padding="small"
+        fontSize="14px"
+        color="c5-700"
+        role="region"
+      >
+        {children}
+      </Box>
+    </Box>
+  );
+};
+
+const AccordionComponent = Object.assign(Accordion, {
+  Item: AccordionItem,
+});
+
+export default AccordionComponent;

package/src/components/Accordion/index.ts

@@ -0,0 +1 @@
+export { default as Accordion } from './Accordion';

package/src/components/Accordion/styles.css.ts

@@ -0,0 +1,72 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const accordion = styleWithLayer({
+  width: '100%',
+  fontFamily: vars.fontFamily.body,
+});
+
+export const accordionItem = style({
+  width: '100%',
+  marginBottom: '4px',
+  border: `1px solid ${vars.colors.borderDefault}`,
+  borderRadius: '8px',
+  overflow: 'hidden',
+});
+
+export const accordionHeader = style({
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '12px 16px',
+  backgroundColor: vars.colors.backgroundMuted,
+  cursor: 'pointer',
+  userSelect: 'none',
+  fontSize: '14px',
+  fontWeight: '500',
+  color: vars.colors.textPrimary,
+  transition: 'background-color 0.2s ease',
+  ':hover': {
+    backgroundColor: vars.colors.backgroundDefault,
+  },
+  ':focus-visible': {
+    outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+    outlineOffset: '-2px',
+  },
+});
+
+export const accordionContent = styleVariants({
+  collapsed: {
+    display: 'none',
+    padding: '0 16px',
+    fontSize: '14px',
+    color: vars.colors.textPrimary,
+    backgroundColor: vars.colors.backgroundDefault,
+  },
+  expanded: {
+    display: 'block',
+    padding: '12px 16px',
+    fontSize: '14px',
+    color: vars.colors.textPrimary,
+    backgroundColor: vars.colors.backgroundDefault,
+    animation: 'slideDown 0.2s ease',
+  },
+});
+
+export const accordionIcon = style({
+  fontSize: '12px',
+  transition: 'transform 0.2s ease',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const accordionIconExpanded = style({
+  transform: 'rotate(180deg)',
+});
+
+export const accordionGroup = styleWithLayer({
+  width: '100%',
+});

package/src/components/Alert/Alert.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Alert } from '.';
+import React from 'react';
+import { fn } from 'storybook/test';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Components/Alert',
+  component: Alert,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          width: '100vw',
+          maxWidth: '500px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  args: { onDismiss: fn() },
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Success: Story = {
+  args: {
+    severity: 'success',
+    children: 'This is a success alert — check it out!',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    severity: 'warning',
+    children: 'This is a warning alert — check it out!',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    severity: 'error',
+    children: 'This is an error alert — check it out!',
+  },
+};
+
+export const Info: Story = {
+  args: {
+    severity: 'info',
+    children: 'This is an info alert — check it out!',
+  },
+};
+
+export const Dismissible: Story = {
+  args: {
+    severity: 'info',
+    dismissible: true,
+    children: 'This alert can be dismissed. Click the × button.',
+  },
+};
+
+export const LongContent: Story = {
+  args: {
+    severity: 'warning',
+    dismissible: true,
+    children:
+      'This is a longer alert message that demonstrates how the component handles multiple lines of text. It should wrap nicely and maintain proper spacing throughout.',
+  },
+};