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

package/dist/components/Stepper/styles.css.js

@@ -1,22 +1,104 @@
-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";
-import "src/components/Stepper/styles.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/components/Stepper/styles.css.ts.vanilla.css\",\"source\":\"#H4sIAAAAAAAAA61VzY7aMBC-8xRzWWlRZeQA2XbNZd-kMskkcevYkW0gUPHuFY5TTAhs1Fac8Hi-v7GdD8mPaCDTdaMVKmc3s8W-0tW7fINfM4Atz36WRu9UTjIttWGw5-aVkO9raavyxOebGcBYJfGVrTY5GgbLpgWrpcjv28894dcphOlDwtUUwjRsaomteK4PDKj_rZv2dmMdK_s2RRn-mzL0hB_DcXjmIIP6PwC5sI3kRwaFxHbjl7gUpSLCYW27ZWIdN64rHkTuKgYJpS-XhfMVMQmIviMXBjMntGJg9KFr_bGzThRHkmnlUDkGtuEZki26A6IaoC0foGVa7mrVAZa8YZAYrAe9q8fensHd-M5QOTRdodFWBC8ouRN7vIIxSAbs689yeJrvI09pQA35Lxdp2ANQoSgrd7vWHRBieC52lkHaTevzcce27-YVFwutHDkE5jdKo1UrTsggWTeBwBmu-gC5lEAXKwvIbUjxRITKx4J8_89jrLkphSJONwxolJXD1hHfFe-PhPAg5OngbtDvgSUWbgC77Q_KJbSC10IeB5d9P38S6_gExt4MOo8lBnmRkCwWEmiWPc3j93iY6PIaac1b0p9USjuoiDAPhNeLxbdWy50LR8IDJjHgJT4GGZfZa0pf4AskfoBBh-lC8GUyUv9zQ3pTk75E0dEcJobBwKRnPOorphiP73Hn-yaKPtfeS2_Ou7-8yxf3V-9_afX8GyunabPNBwAA\"}!../../../../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.25_webpack@5.104.1/node_modules/@vanilla-extract/webpack-plugin/extracted.js";
-var step = 'vhoh9l3';
-var stepperContainer = 'vhoh9l0';
-var stepContent = 'vhoh9l9';
-var stepContentVertical = 'vhoh9la';
-var stepDescription = 'vhoh9lc';
-var stepIndicator = 'vhoh9l5';
-var stepConnectorCompleted = 'vhoh9le';
-var stepIndicatorVariants = {
-    pending: 'vhoh9l6',
-    current: 'vhoh9l7',
-    completed: 'vhoh9l8'
-};
-var stepConnector = 'vhoh9ld';
-var stepperVertical = 'vhoh9l2';
-var stepperHorizontal = 'vhoh9l1';
-var stepConnectorVertical = 'vhoh9lf';
-var stepTitle = 'vhoh9lb';
-var stepVertical = 'vhoh9l4';
-export { step, stepConnector, stepConnectorCompleted, stepConnectorVertical, stepContent, stepContentVertical, stepDescription, stepIndicator, stepIndicatorVariants, stepTitle, stepVertical, stepperContainer, stepperHorizontal, stepperVertical };
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+export const stepperContainer = styleWithLayer({
+    display: 'flex',
+    alignItems: 'flex-start',
+    width: '100%',
+});
+export const stepperHorizontal = styleWithLayer({
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+});
+export const stepperVertical = styleWithLayer({
+    flexDirection: 'column',
+    gap: '1rem',
+});
+export const step = styleWithLayer({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    position: 'relative',
+    flex: 1,
+});
+export const stepVertical = styleWithLayer({
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: '1rem',
+});
+export const stepIndicator = styleWithLayer({
+    width: '2.5rem',
+    height: '2.5rem',
+    borderRadius: '50%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '600',
+    fontSize: '14px',
+    transition: 'all 0.3s ease',
+    zIndex: 1,
+});
+export const stepIndicatorVariants = styleVariants({
+    pending: {
+        backgroundColor: vars.colors.borderMuted,
+        color: vars.colors.textSecondary,
+        border: `2px solid ${vars.colors.borderMuted}`,
+    },
+    current: {
+        backgroundColor: vars.colors.buttonBackgroundPrimary,
+        color: vars.colors.buttonTextPrimary,
+        border: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+        boxShadow: `0 0 0 4px ${vars.colors.alertInfoBackground}`,
+    },
+    completed: {
+        backgroundColor: vars.colors.alertSuccessBorder,
+        color: vars.colors.buttonTextPrimary,
+        border: `2px solid ${vars.colors.alertSuccessBorder}`,
+    },
+});
+export const stepContent = styleWithLayer({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginTop: '0.5rem',
+    textAlign: 'center',
+});
+export const stepContentVertical = styleWithLayer({
+    alignItems: 'flex-start',
+    marginTop: 0,
+    textAlign: 'left',
+});
+export const stepTitle = styleWithLayer({
+    fontFamily: vars.fontFamily.heading,
+    fontSize: '14px',
+    fontWeight: '600',
+    color: vars.colors.textPrimary,
+    margin: 0,
+});
+export const stepDescription = styleWithLayer({
+    fontSize: '12px',
+    color: vars.colors.textSecondary,
+    marginTop: '0.25rem',
+    maxWidth: '200px',
+});
+export const stepConnector = styleWithLayer({
+    position: 'absolute',
+    top: '1.25rem',
+    left: 'calc(50% + 1.5rem)',
+    right: 'calc(-50% + 1.5rem)',
+    height: '2px',
+    backgroundColor: vars.colors.borderMuted,
+    zIndex: 0,
+});
+export const stepConnectorCompleted = styleWithLayer({
+    backgroundColor: vars.colors.alertSuccessBorder,
+});
+export const stepConnectorVertical = styleWithLayer({
+    position: 'absolute',
+    top: '2.5rem',
+    left: '1.25rem',
+    width: '2px',
+    height: 'calc(100% + 1rem)',
+    backgroundColor: vars.colors.borderMuted,
+    zIndex: 0,
+});

package/dist/components/Table/Table.d.ts

@@ -31,12 +31,12 @@ type TdProps = {
     colSpan?: number;
     rowSpan?: number;
 };
-declare const Table: (({ children, className, striped, containerClassName, }: TableProps) => React.JSX.Element) & {
-    Thead: ({ children, className }: TheadProps) => React.JSX.Element;
-    Tbody: ({ children, className }: TbodyProps) => React.JSX.Element;
-    Tfoot: ({ children, className }: TfootProps) => React.JSX.Element;
-    Tr: ({ children, className }: TrProps) => React.JSX.Element;
-    Th: ({ children, className }: ThProps) => React.JSX.Element;
-    Td: ({ children, className, colSpan, rowSpan }: TdProps) => React.JSX.Element;
+declare const Table: (({ children, className, striped, containerClassName, }: TableProps) => import("react/jsx-runtime").JSX.Element) & {
+    Thead: ({ children, className }: TheadProps) => import("react/jsx-runtime").JSX.Element;
+    Tbody: ({ children, className }: TbodyProps) => import("react/jsx-runtime").JSX.Element;
+    Tfoot: ({ children, className }: TfootProps) => import("react/jsx-runtime").JSX.Element;
+    Tr: ({ children, className }: TrProps) => import("react/jsx-runtime").JSX.Element;
+    Th: ({ children, className }: ThProps) => import("react/jsx-runtime").JSX.Element;
+    Td: ({ children, className, colSpan, rowSpan }: TdProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Table;

package/dist/components/Table/Table.js

@@ -1,65 +1,39 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { createContext, useContext } from "react";
-import { table, tableContainer, tbody, td, tfoot, th, thead, tr } from "./styles.css.js";
-import Box from "../Box/index.js";
-const TableContext = /*#__PURE__*/ createContext({});
-const TableComponent = ({ children, className, striped = false, containerClassName })=>/*#__PURE__*/ jsx(TableContext.Provider, {
-        value: {
-            striped
-        },
-        children: /*#__PURE__*/ jsx(Box, {
-            className: clsx(tableContainer, containerClassName),
-            width: "100%",
-            children: /*#__PURE__*/ jsx(Box, {
-                as: "table",
-                className: clsx(table, className),
-                children: children
-            })
-        })
-    });
-const Thead = ({ children, className })=>/*#__PURE__*/ jsx(Box, {
-        as: "thead",
-        className: clsx(thead, className),
-        children: children
-    });
-const Tbody = ({ children, className })=>/*#__PURE__*/ jsx(Box, {
-        as: "tbody",
-        className: clsx(tbody, className),
-        children: children
-    });
-const Tfoot = ({ children, className })=>/*#__PURE__*/ jsx(Box, {
-        as: "tfoot",
-        className: clsx(tfoot, className),
-        children: children
-    });
-const Tr = ({ children, className })=>{
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { createContext, useContext } from 'react';
+import { table, thead, tbody, tfoot, tr, th, td, tableContainer, } from './styles.css';
+import Box from '../Box';
+// Context to pass striping info to rows
+const TableContext = createContext({});
+const TableComponent = ({ children, className, striped = false, containerClassName, }) => {
+    return (_jsx(TableContext.Provider, { value: { striped }, children: _jsx(Box, { className: clsx(tableContainer, containerClassName), width: "100%", children: _jsx(Box, { as: "table", className: clsx(table, className), children: children }) }) }));
+};
+const Thead = ({ children, className }) => {
+    return _jsx(Box, { as: "thead", className: clsx(thead, className), children: children });
+};
+const Tbody = ({ children, className }) => {
+    return _jsx(Box, { as: "tbody", className: clsx(tbody, className), children: children });
+};
+const Tfoot = ({ children, className }) => {
+    return _jsx(Box, { as: "tfoot", className: clsx(tfoot, className), children: children });
+};
+const Tr = ({ children, className }) => {
     const { striped } = useContext(TableContext);
-    return /*#__PURE__*/ jsx(Box, {
-        as: "tr",
-        className: clsx(tr[striped ? 'striped' : 'default'], className),
-        children: children
-    });
+    return (_jsx(Box, { as: "tr", className: clsx(tr[striped ? 'striped' : 'default'], className), children: children }));
+};
+const Th = ({ children, className }) => {
+    return _jsx(Box, { as: "th", className: clsx(th, className), children: children });
+};
+const Td = ({ children, className, colSpan, rowSpan }) => {
+    return (_jsx(Box, { as: "td", className: clsx(td, className), colSpan: colSpan, rowSpan: rowSpan, children: children }));
 };
-const Th = ({ children, className })=>/*#__PURE__*/ jsx(Box, {
-        as: "th",
-        className: clsx(th, className),
-        children: children
-    });
-const Td = ({ children, className, colSpan, rowSpan })=>/*#__PURE__*/ jsx(Box, {
-        as: "td",
-        className: clsx(td, className),
-        colSpan: colSpan,
-        rowSpan: rowSpan,
-        children: children
-    });
+// Attach sub-components
 const Table = Object.assign(TableComponent, {
     Thead,
     Tbody,
     Tfoot,
     Tr,
     Th,
-    Td
+    Td,
 });
-const Table_Table = Table;
-export { Table_Table as default };
+export default Table;

package/dist/components/Table/index.js

@@ -1,2 +1 @@
-import Table from "./Table.js";
-export { Table };
+export { default as Table } from './Table';

package/dist/components/Table/styles.css.js

@@ -1,15 +1,49 @@
-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";
-import "src/components/Table/styles.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/components/Table/styles.css.ts.vanilla.css\",\"source\":\"QGxheWVyIGNvbXBvbmVudHM7Ci5fMXh6YnFpNDQgewogIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCB2YXIoLS1fNGxzaGd6YSk7Cn0KLl8xeHpicWk0NDpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tXzRsc2hnemMpOwp9Ci5fMXh6YnFpNDUgewogIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCB2YXIoLS1fNGxzaGd6YSk7Cn0KQGxheWVyIGNvbXBvbmVudHMgewogIC5fMXh6YnFpNDAgewogICAgd2lkdGg6IDEwMCU7CiAgICBib3JkZXItY29sbGFwc2U6IGNvbGxhcHNlOwogICAgYm9yZGVyLXNwYWNpbmc6IDA7CiAgICBmb250LWZhbWlseTogdmFyKC0tXzRsc2hnenUpOwogIH0KICAuXzF4emJxaTQxIHsKICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLV80bHNoZ3piKTsKICAgIGJvcmRlci1ib3R0b206IDJweCBzb2xpZCB2YXIoLS1fNGxzaGd6OSk7CiAgfQogIC5fMXh6YnFpNDIgewogICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7CiAgfQogIC5fMXh6YnFpNDMgewogICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tXzRsc2hnemMpOwogICAgYm9yZGVyLXRvcDogMnB4IHNvbGlkIHZhcigtLV80bHNoZ3o5KTsKICAgIGZvbnQtd2VpZ2h0OiBib2xkOwogIH0KICAuXzF4emJxaTQ2IHsKICAgIHBhZGRpbmc6IDEycHggMTZweDsKICAgIHRleHQtYWxpZ246IGxlZnQ7CiAgICBmb250LXdlaWdodDogNjAwOwogICAgY29sb3I6IHZhcigtLV80bHNoZ3owKTsKICAgIHdoaXRlLXNwYWNlOiBub3dyYXA7CiAgfQogIC5fMXh6YnFpNDcgewogICAgcGFkZGluZzogMTJweCAxNnB4OwogICAgY29sb3I6IHZhcigtLV80bHNoZ3owKTsKICAgIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCB2YXIoLS1fNGxzaGd6YSk7CiAgfQogIC5fMXh6YnFpNDggewogICAgb3ZlcmZsb3cteDogYXV0bzsKICAgIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLV80bHNoZ3o5KTsKICAgIGJvcmRlci1yYWRpdXM6IDhweDsKICB9Cn0\"}!../../../../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.25_webpack@5.104.1/node_modules/@vanilla-extract/webpack-plugin/extracted.js";
-var tbody = '_1xzbqi42';
-var tfoot = '_1xzbqi43';
-var tr = {
-    default: '_1xzbqi44',
-    striped: '_1xzbqi45'
-};
-var th = '_1xzbqi46';
-var table = '_1xzbqi40';
-var thead = '_1xzbqi41';
-var td = '_1xzbqi47';
-var tableContainer = '_1xzbqi48';
-export { table, tableContainer, tbody, td, tfoot, th, thead, tr };
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+export const table = styleWithLayer({
+    width: '100%',
+    borderCollapse: 'collapse',
+    borderSpacing: 0,
+    fontFamily: vars.fontFamily.body,
+});
+export const thead = styleWithLayer({
+    backgroundColor: vars.colors.backgroundDefault,
+    borderBottom: `2px solid ${vars.colors.borderDefault}`,
+});
+export const tbody = styleWithLayer({
+    backgroundColor: 'transparent',
+});
+export const tfoot = styleWithLayer({
+    backgroundColor: vars.colors.backgroundMuted,
+    borderTop: `2px solid ${vars.colors.borderDefault}`,
+    fontWeight: 'bold',
+});
+export const tr = styleVariants({
+    default: {
+        borderBottom: `1px solid ${vars.colors.borderMuted}`,
+        ':hover': {
+            backgroundColor: vars.colors.backgroundMuted,
+        },
+    },
+    striped: {
+        borderBottom: `1px solid ${vars.colors.borderMuted}`,
+    },
+});
+export const th = styleWithLayer({
+    padding: '12px 16px',
+    textAlign: 'left',
+    fontWeight: '600',
+    color: vars.colors.textPrimary,
+    whiteSpace: 'nowrap',
+});
+export const td = styleWithLayer({
+    padding: '12px 16px',
+    color: vars.colors.textPrimary,
+    borderBottom: `1px solid ${vars.colors.borderMuted}`,
+});
+export const tableContainer = styleWithLayer({
+    overflowX: 'auto',
+    border: `1px solid ${vars.colors.borderDefault}`,
+    borderRadius: '8px',
+});

package/dist/components/Tabs/Tabs.d.ts

@@ -21,9 +21,9 @@ type TabPanelProps = {
     children: React.ReactNode;
     className?: string;
 };
-declare const TabsComponent: (({ children, defaultValue, orientation, className, onChange, }: TabsProps) => React.JSX.Element) & {
-    List: ({ children, className }: TabListProps) => React.JSX.Element;
-    Tab: ({ value, children, disabled, className }: TabProps) => React.JSX.Element;
-    Panel: ({ value, children, className }: TabPanelProps) => React.JSX.Element | null;
+declare const TabsComponent: (({ children, defaultValue, orientation, className, onChange, }: TabsProps) => import("react/jsx-runtime").JSX.Element) & {
+    List: ({ children, className }: TabListProps) => import("react/jsx-runtime").JSX.Element;
+    Tab: ({ value, children, disabled, className }: TabProps) => import("react/jsx-runtime").JSX.Element;
+    Panel: ({ value, children, className }: TabPanelProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default TabsComponent;

package/dist/components/Tabs/Tabs.js

@@ -1,71 +1,52 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { createContext, useContext, useState } from "react";
-import { tabContent, tabItem, tabsContainer, tabsList, tabsListHorizontal, tabsListVertical } from "./styles.css.js";
-import Box from "../Box/index.js";
-const TabsContext = /*#__PURE__*/ createContext({
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { createContext, useContext, useState } from 'react';
+import { tabsContainer, tabsList, tabsListHorizontal, tabsListVertical, tabItem, tabContent, } from './styles.css';
+import Box from '../Box';
+const TabsContext = createContext({
     activeTab: '',
-    setActiveTab: ()=>{}
+    setActiveTab: () => { },
 });
-const Tabs = ({ children, defaultValue = '', orientation = 'horizontal', className, onChange })=>{
+const Tabs = ({ children, defaultValue = '', orientation = 'horizontal', className, onChange, }) => {
     const [activeTab, setActiveTab] = useState(defaultValue);
-    const handleTabChange = (value)=>{
+    const handleTabChange = (value) => {
         setActiveTab(value);
-        if (onChange) onChange(value);
+        if (onChange) {
+            onChange(value);
+        }
     };
-    return /*#__PURE__*/ jsx(TabsContext.Provider, {
-        value: {
-            activeTab,
-            setActiveTab: handleTabChange,
-            orientation
-        },
-        children: /*#__PURE__*/ jsx(Box, {
-            className: clsx(tabsContainer, className),
-            width: "100%",
-            children: children
-        })
-    });
+    return (_jsx(TabsContext.Provider, { value: { activeTab, setActiveTab: handleTabChange, orientation }, children: _jsx(Box, { className: clsx(tabsContainer, className), width: "100%", children: children }) }));
 };
-const TabList = ({ children, className })=>{
+const TabList = ({ children, className }) => {
     const { orientation } = useContext(TabsContext);
-    return /*#__PURE__*/ jsx(Box, {
-        as: "div",
-        role: "tablist",
-        className: clsx(tabsList, 'vertical' === orientation ? tabsListVertical : tabsListHorizontal, className),
-        children: children
-    });
+    return (_jsx(Box, { as: "div", role: "tablist", className: clsx(tabsList, orientation === 'vertical' ? tabsListVertical : tabsListHorizontal, className), children: children }));
 };
-const Tab = ({ value, children, disabled = false, className })=>{
+const Tab = ({ value, children, disabled = false, className }) => {
     const { activeTab, setActiveTab, orientation } = useContext(TabsContext);
     const isActive = activeTab === value;
-    const handleClick = ()=>{
-        if (!disabled) setActiveTab(value);
+    const handleClick = () => {
+        if (!disabled) {
+            setActiveTab(value);
+        }
     };
-    return /*#__PURE__*/ jsx(Box, {
-        as: "button",
-        role: "tab",
-        "aria-selected": isActive,
-        disabled: disabled,
-        onClick: handleClick,
-        className: clsx(tabItem['vertical' === orientation ? isActive ? 'verticalActive' : 'base' : isActive ? 'active' : 'base'], className),
-        children: children
-    });
+    return (_jsx(Box, { as: "button", role: "tab", "aria-selected": isActive, disabled: disabled, onClick: handleClick, className: clsx(tabItem[orientation === 'vertical'
+            ? isActive
+                ? 'verticalActive'
+                : 'base'
+            : isActive
+                ? 'active'
+                : 'base'], className), children: children }));
 };
-const TabPanel = ({ value, children, className })=>{
+const TabPanel = ({ value, children, className }) => {
     const { activeTab } = useContext(TabsContext);
     const isActive = activeTab === value;
-    if (!isActive) return null;
-    return /*#__PURE__*/ jsx(Box, {
-        as: "div",
-        role: "tabpanel",
-        className: clsx(tabContent, className),
-        children: children
-    });
+    if (!isActive)
+        return null;
+    return (_jsx(Box, { as: "div", role: "tabpanel", className: clsx(tabContent, className), children: children }));
 };
 const TabsComponent = Object.assign(Tabs, {
     List: TabList,
     Tab,
-    Panel: TabPanel
+    Panel: TabPanel,
 });
-const Tabs_Tabs = TabsComponent;
-export { Tabs_Tabs as default };
+export default TabsComponent;

package/dist/components/Tabs/index.js

@@ -1,2 +1 @@
-import Tabs from "./Tabs.js";
-export { Tabs };
+export { default as Tabs } from './Tabs';

package/dist/components/Tabs/styles.css.js

@@ -1,14 +1,100 @@
-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";
-import "src/components/Tabs/styles.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/components/Tabs/styles.css.ts.vanilla.css\",\"source\":\"#H4sIAAAAAAAAA91VwW6jMBC98xVzWak5OAI2pKpz6Z9UBg9grfFYtglJq_x7hSFR02S72V1FK-0JMTy_eTPzxjxrsUcHFXWWDJrgN8nyJSvDNpdmBW8JgBVSKtNwSJePhcMOsuX42CQANZnAvHpFDtnK7k6hAVXTBg5Fmo6xijQ5DlvhHhh7WWnfNq_ZIn7pnR8_WVImoBtDJTmJjoMhg_FdVD8aR72RbOYJThhvhUMTRsDQqoDMW1HheGpwwo7hiFJBkeEgtIZ0mXtA4SMpb2mLjhsKD1wqL0qNchGrva42jWqviTmDVRF2SA4feshrqnrPtsqrUmPMQX3QyiCH3O7Ak1bynKaINDOKUV17DBG8OWc-Ko-kx1YaCkxoTQPKyGJFpcJ-nF5xdry443CLfzrcKQkrKQTqftHkTrhGmROW5VOhX_nj9z1Q3M0Dxd95YP2_e8BNMm-xwAy9jwPWd3PA-o8c8Pz51o-HT6TpXOigZGg5ZGn6bSrpAyabMVJ5q8WeQ61xN92SjbAcZrvcuo5P8w0b7VWLTun9p7b2iwsN-axhTM2kclhNdnA0TGzjDGtNA9txEH2gC4bvP2GoSPeduVrA0bc3muzpUvbjnPS0eNPCQXpbC66u5Vf_rUNyeAd6nDUw5wcAAA\"}!../../../../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.25_webpack@5.104.1/node_modules/@vanilla-extract/webpack-plugin/extracted.js";
-var tabContent = '_1btv2dn7';
-var tabsContainer = '_1btv2dn0';
-var tabsList = '_1btv2dn1';
-var tabsListVertical = '_1btv2dn3';
-var tabsListHorizontal = '_1btv2dn2';
-var tabItem = {
-    base: '_1btv2dn4',
-    active: '_1btv2dn5',
-    verticalActive: '_1btv2dn6'
-};
-export { tabContent, tabItem, tabsContainer, tabsList, tabsListHorizontal, tabsListVertical };
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+export const tabsContainer = styleWithLayer({
+    width: '100%',
+});
+export const tabsList = styleWithLayer({
+    display: 'flex',
+    gap: '4px',
+    borderBottom: `2px solid ${vars.colors.borderDefault}`,
+    fontFamily: vars.fontFamily.body,
+});
+export const tabsListHorizontal = styleWithLayer({
+    flexDirection: 'row',
+    overflowX: 'auto',
+});
+export const tabsListVertical = styleWithLayer({
+    flexDirection: 'column',
+    borderBottom: 'none',
+    borderRight: `2px solid ${vars.colors.borderDefault}`,
+});
+export const tabItem = styleVariants({
+    base: {
+        padding: '0.75rem 1.5rem',
+        fontSize: '14px',
+        fontWeight: '500',
+        color: vars.colors.textSecondary,
+        cursor: 'pointer',
+        border: 'none',
+        backgroundColor: 'transparent',
+        whiteSpace: 'nowrap',
+        transition: 'all 0.2s ease',
+        ':focus-visible': {
+            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+            outlineOffset: '2px',
+        },
+        ':hover:not(:disabled)': {
+            color: vars.colors.textPrimary,
+            backgroundColor: vars.colors.backgroundMuted,
+        },
+        ':disabled': {
+            cursor: 'not-allowed',
+            opacity: 0.5,
+        },
+    },
+    active: {
+        padding: '0.75rem 1.5rem',
+        fontSize: '14px',
+        fontWeight: '500',
+        color: vars.colors.buttonBackgroundPrimary,
+        cursor: 'pointer',
+        border: 'none',
+        backgroundColor: 'transparent',
+        whiteSpace: 'nowrap',
+        transition: 'all 0.2s ease',
+        borderBottom: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+        marginBottom: '-2px',
+        ':focus-visible': {
+            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+            outlineOffset: '2px',
+        },
+        ':hover:not(:disabled)': {
+            backgroundColor: vars.colors.backgroundMuted,
+        },
+        ':disabled': {
+            cursor: 'not-allowed',
+            opacity: 0.5,
+        },
+    },
+    verticalActive: {
+        padding: '0.75rem 1.5rem',
+        fontSize: '14px',
+        fontWeight: '500',
+        color: vars.colors.buttonBackgroundPrimary,
+        cursor: 'pointer',
+        border: 'none',
+        backgroundColor: 'transparent',
+        whiteSpace: 'nowrap',
+        transition: 'all 0.2s ease',
+        borderRight: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+        marginRight: '-2px',
+        ':focus-visible': {
+            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+            outlineOffset: '2px',
+        },
+        ':hover:not(:disabled)': {
+            backgroundColor: vars.colors.backgroundMuted,
+        },
+        ':disabled': {
+            cursor: 'not-allowed',
+            opacity: 0.5,
+        },
+    },
+});
+export const tabContent = styleWithLayer({
+    padding: '1.5rem 0',
+    fontFamily: vars.fontFamily.body,
+    fontSize: '14px',
+    color: vars.colors.textPrimary,
+});

package/dist/components/Tag/Tag.d.ts

@@ -10,7 +10,7 @@ type TagGroupProps = {
     children: React.ReactNode;
     className?: string;
 };
-declare const TagComponent: (({ children, variant, onRemove, removable, className, }: TagProps) => React.JSX.Element) & {
-    Group: ({ children, className }: TagGroupProps) => React.JSX.Element;
+declare const TagComponent: (({ children, variant, onRemove, removable, className, }: TagProps) => import("react/jsx-runtime").JSX.Element) & {
+    Group: ({ children, className }: TagGroupProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default TagComponent;