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

package/dist/components/Combobox/Combobox.js

@@ -1,171 +1,104 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { useEffect, useRef, useState } from "react";
-import { comboboxArrow, comboboxClearButton, comboboxContainer, comboboxDropdown, comboboxErrorMessage, comboboxHint, comboboxInput, comboboxInputVariants, comboboxLabel, comboboxNoResults, comboboxOption, comboboxOptionDisabled, comboboxOptionSelected } from "./styles.css.js";
-import Box from "../Box/index.js";
-const defaultFilterFn = (option, inputValue)=>option.label.toLowerCase().includes(inputValue.toLowerCase());
-const Combobox = ({ label, options, value, onChange, onInputChange, placeholder = 'Search...', hint, error = false, errorMessage, fullWidth = true, clearable = true, disabled = false, filterFn = defaultFilterFn, className, ...props })=>{
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useState, useRef, useEffect } from 'react';
+import { comboboxContainer, comboboxInput, comboboxInputVariants, comboboxLabel, comboboxDropdown, comboboxOption, comboboxOptionSelected, comboboxOptionDisabled, comboboxClearButton, comboboxArrow, comboboxNoResults, comboboxHint, comboboxErrorMessage, } from './styles.css';
+import Box from '../Box';
+const defaultFilterFn = (option, inputValue) => {
+    return option.label.toLowerCase().includes(inputValue.toLowerCase());
+};
+const Combobox = ({ label, options, value, onChange, onInputChange, placeholder = 'Search...', hint, error = false, errorMessage, fullWidth = true, clearable = true, disabled = false, filterFn = defaultFilterFn, className, ...props }) => {
     const [inputValue, setInputValue] = useState('');
     const [isOpen, setIsOpen] = useState(false);
     const [highlightedIndex, setHighlightedIndex] = useState(-1);
     const containerRef = useRef(null);
     const inputRef = useRef(null);
-    const selectedOption = options.find((opt)=>opt.value === value);
-    useEffect(()=>{
-        if (selectedOption) setInputValue(selectedOption.label);
-        else if (!isOpen) setInputValue('');
-    }, [
-        selectedOption,
-        isOpen
-    ]);
-    const filteredOptions = options.filter((option)=>filterFn(option, inputValue));
-    useEffect(()=>{
-        const handleClickOutside = (event)=>{
+    const selectedOption = options.find(opt => opt.value === value);
+    useEffect(() => {
+        if (selectedOption) {
+            setInputValue(selectedOption.label);
+        }
+        else if (!isOpen) {
+            setInputValue('');
+        }
+    }, [selectedOption, isOpen]);
+    const filteredOptions = options.filter(option => filterFn(option, inputValue));
+    useEffect(() => {
+        const handleClickOutside = (event) => {
             if (containerRef.current && !containerRef.current.contains(event.target)) {
                 setIsOpen(false);
-                selectedOption ? setInputValue(selectedOption.label) : setInputValue('');
+                if (selectedOption) {
+                    setInputValue(selectedOption.label);
+                }
+                else {
+                    setInputValue('');
+                }
             }
         };
         document.addEventListener('mousedown', handleClickOutside);
-        return ()=>document.removeEventListener('mousedown', handleClickOutside);
-    }, [
-        selectedOption
-    ]);
-    const handleInputChange = (e)=>{
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [selectedOption]);
+    const handleInputChange = (e) => {
         const newValue = e.target.value;
         setInputValue(newValue);
         setIsOpen(true);
         setHighlightedIndex(-1);
         onInputChange?.(newValue);
-        if (!newValue) onChange?.('', null);
+        if (!newValue) {
+            onChange?.('', null);
+        }
     };
-    const handleOptionClick = (option)=>{
-        if (option.disabled) return;
+    const handleOptionClick = (option) => {
+        if (option.disabled)
+            return;
         setInputValue(option.label);
         setIsOpen(false);
         onChange?.(option.value, option);
     };
-    const handleClear = (e)=>{
+    const handleClear = (e) => {
         e.stopPropagation();
         setInputValue('');
         setIsOpen(false);
         onChange?.('', null);
         inputRef.current?.focus();
     };
-    const handleKeyDown = (e)=>{
-        if (disabled) return;
-        switch(e.key){
+    const handleKeyDown = (e) => {
+        if (disabled)
+            return;
+        switch (e.key) {
             case 'ArrowDown':
                 e.preventDefault();
-                if (!isOpen) setIsOpen(true);
-                setHighlightedIndex((prev)=>prev < filteredOptions.length - 1 ? prev + 1 : prev);
+                if (!isOpen) {
+                    setIsOpen(true);
+                }
+                setHighlightedIndex(prev => prev < filteredOptions.length - 1 ? prev + 1 : prev);
                 break;
             case 'ArrowUp':
                 e.preventDefault();
-                setHighlightedIndex((prev)=>prev > 0 ? prev - 1 : prev);
+                setHighlightedIndex(prev => (prev > 0 ? prev - 1 : prev));
                 break;
             case 'Enter':
                 e.preventDefault();
-                if (isOpen && highlightedIndex >= 0 && filteredOptions[highlightedIndex]) handleOptionClick(filteredOptions[highlightedIndex]);
-                else setIsOpen(!isOpen);
+                if (isOpen && highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
+                    handleOptionClick(filteredOptions[highlightedIndex]);
+                }
+                else {
+                    setIsOpen(!isOpen);
+                }
                 break;
             case 'Escape':
                 setIsOpen(false);
-                selectedOption ? setInputValue(selectedOption.label) : setInputValue('');
+                if (selectedOption) {
+                    setInputValue(selectedOption.label);
+                }
+                else {
+                    setInputValue('');
+                }
                 break;
         }
     };
     const displayValue = selectedOption && !isOpen ? selectedOption.label : inputValue;
-    return /*#__PURE__*/ jsxs(Box, {
-        className: comboboxContainer,
-        ref: containerRef,
-        width: fullWidth ? '100%' : void 0,
-        children: [
-            label && /*#__PURE__*/ jsx(Box, {
-                as: "label",
-                className: comboboxLabel,
-                children: label
-            }),
-            /*#__PURE__*/ jsxs(Box, {
-                position: "relative",
-                children: [
-                    /*#__PURE__*/ jsx(Box, {
-                        as: "input",
-                        ref: inputRef,
-                        type: "text",
-                        value: displayValue,
-                        onChange: handleInputChange,
-                        onKeyDown: handleKeyDown,
-                        onFocus: ()=>setIsOpen(true),
-                        placeholder: placeholder,
-                        disabled: disabled,
-                        className: clsx(comboboxInput, comboboxInputVariants[error ? 'error' : 'default'], className),
-                        role: "combobox",
-                        "aria-expanded": isOpen,
-                        "aria-autocomplete": "list",
-                        "aria-controls": isOpen ? 'combobox-listbox' : void 0,
-                        "aria-activedescendant": highlightedIndex >= 0 ? `option-${filteredOptions[highlightedIndex]?.value}` : void 0,
-                        ...props
-                    }),
-                    clearable && inputValue && !disabled && /*#__PURE__*/ jsx(Box, {
-                        as: "button",
-                        className: comboboxClearButton,
-                        onClick: handleClear,
-                        type: "button",
-                        "aria-label": "Clear selection",
-                        children: "\xd7"
-                    }),
-                    /*#__PURE__*/ jsx(Box, {
-                        className: comboboxArrow,
-                        "aria-hidden": "true",
-                        children: /*#__PURE__*/ jsx("svg", {
-                            width: "12",
-                            height: "12",
-                            viewBox: "0 0 12 12",
-                            fill: "currentColor",
-                            children: /*#__PURE__*/ jsx("path", {
-                                d: "M6 8L1 3h10z"
-                            })
-                        })
-                    })
-                ]
-            }),
-            isOpen && /*#__PURE__*/ jsx(Box, {
-                as: "ul",
-                id: "combobox-listbox",
-                className: comboboxDropdown,
-                role: "listbox",
-                children: 0 === filteredOptions.length ? /*#__PURE__*/ jsx(Box, {
-                    as: "li",
-                    className: comboboxNoResults,
-                    children: "No results found"
-                }) : filteredOptions.map((option, index)=>/*#__PURE__*/ jsx(Box, {
-                        as: "li",
-                        id: `option-${option.value}`,
-                        className: clsx(comboboxOption, option.value === value && comboboxOptionSelected, option.disabled && comboboxOptionDisabled),
-                        onClick: ()=>handleOptionClick(option),
-                        role: "option",
-                        "aria-selected": option.value === value,
-                        "aria-disabled": option.disabled,
-                        style: {
-                            backgroundColor: index === highlightedIndex ? 'var(--highlight-color, #f3f4f6)' : void 0
-                        },
-                        children: option.label
-                    }, option.value))
-            }),
-            error && errorMessage && /*#__PURE__*/ jsx(Box, {
-                as: "div",
-                className: comboboxErrorMessage,
-                role: "alert",
-                children: errorMessage
-            }),
-            hint && !error && /*#__PURE__*/ jsx(Box, {
-                as: "div",
-                className: comboboxHint,
-                children: hint
-            })
-        ]
-    });
+    return (_jsxs(Box, { className: comboboxContainer, ref: containerRef, width: fullWidth ? '100%' : undefined, children: [label && (_jsx(Box, { as: "label", className: comboboxLabel, children: label })), _jsxs(Box, { position: "relative", children: [_jsx(Box, { as: "input", ref: inputRef, type: "text", value: displayValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: () => setIsOpen(true), placeholder: placeholder, disabled: disabled, className: clsx(comboboxInput, comboboxInputVariants[error ? 'error' : 'default'], className), role: "combobox", "aria-expanded": isOpen, "aria-autocomplete": "list", "aria-controls": isOpen ? 'combobox-listbox' : undefined, "aria-activedescendant": highlightedIndex >= 0 ? `option-${filteredOptions[highlightedIndex]?.value}` : undefined, ...props }), clearable && inputValue && !disabled && (_jsx(Box, { as: "button", className: comboboxClearButton, onClick: handleClear, type: "button", "aria-label": "Clear selection", children: "\u00D7" })), _jsx(Box, { className: comboboxArrow, "aria-hidden": "true", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor", children: _jsx("path", { d: "M6 8L1 3h10z" }) }) })] }), isOpen && (_jsx(Box, { as: "ul", id: "combobox-listbox", className: comboboxDropdown, role: "listbox", children: filteredOptions.length === 0 ? (_jsx(Box, { as: "li", className: comboboxNoResults, children: "No results found" })) : (filteredOptions.map((option, index) => (_jsx(Box, { as: "li", id: `option-${option.value}`, className: clsx(comboboxOption, option.value === value && comboboxOptionSelected, option.disabled && comboboxOptionDisabled), onClick: () => handleOptionClick(option), role: "option", "aria-selected": option.value === value, "aria-disabled": option.disabled, style: {
+                        backgroundColor: index === highlightedIndex ? 'var(--highlight-color, #f3f4f6)' : undefined,
+                    }, children: option.label }, option.value)))) })), error && errorMessage && (_jsx(Box, { as: "div", className: comboboxErrorMessage, role: "alert", children: errorMessage })), hint && !error && (_jsx(Box, { as: "div", className: comboboxHint, children: hint }))] }));
 };
-const Combobox_Combobox = Combobox;
-export { Combobox_Combobox as default };
+export default Combobox;

package/dist/components/Combobox/index.js

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

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

@@ -1,20 +1,142 @@
-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/Combobox/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/Combobox/styles.css.ts.vanilla.css\",\"source\":\"#H4sIAAAAAAAAA51W226jMBR871ecl0qNtI5MGtLWfelv7FNlwIC3xnZtk5Cu-u8riEkgEKArRYpizs1zZoa8CXpkBmJVaCWZdPb1bv0eVDnn7vMR_t4BRMokzBAIdAVWCZ7AnpoHhN63wubZ18fq9e67k0NSFZcW7bnlkWBNBVU6wSUjsFlYIld7ZjrNUayEMmQs6-16_ibtXAs3PwG0stxxJQkYJqjje_banB944nICAcb39cF3NzfwuVcxAJomCZcZAbx-Cg0rYLNuvtqfgWHFKTJV0iHLvxiBYKurzmFKCy6OV1cqV6eIseti_yyi8UdmVCmTUVR0Gza9tc9eGDI04aUl8NzOeF6ZVNJD5QyVLYjdtQBebywwatkQQUK0oDHLlUj8QscvZ1cjuUMizVPJrHrzI5WmlrkmfKTDhWeTTDNj0yXc0kiwpL1VaWydKJVDVAh1YImfRNOYu2NNlnDRBuOpbktH_hwW2fqshFst6JFAJFT8McfTA-NZ7giEGM9zs6Am4xJFyjlVnNnUmyIcCJJGVonStSxTuis1wVJHwLc2p1HwIhijZUJ4mRFCpCpkc5qoAwEMAdYVBKGuAD3qCkwW0Qf8C_xnHax-AYatrmBXh2xGQnB4xqpCuQd3g_FZeHtmUqEO6EiAlk6dTr8Qlwmr6jX0kG7Q2o7AvGthvraqize1jNWKS8fMBBGmVt5zhauN1IiEN6xh12fyjyWxm7aHi239vPTTsqHCCbN-HKn6kwvvhvnP7RUHfnLDevrZM92bNWpqmHSD3JcZyXpZnl6CHRWHrYib4qkyhe8jqGO_H1CI7wfvtN7mvHIvJ6OU7VB8c5lgDNVgNST5riX52RZTwfwRFTyTiDtWWAIxu7T8U1rH0yOKlXRMuu7DPnI91G_LqJdEl8HtBf1feHv8ENvX_5h6CN-ErTdjNG8vi52k3YpjVc1fnsmbeMa-bbf2ZkntObtMflpYTBX-_geM39bIVQsAAA\"}!../../../../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.25_webpack@5.104.1/node_modules/@vanilla-extract/webpack-plugin/extracted.js";
-var comboboxInput = '_1xhiitq1';
-var comboboxDropdown = '_1xhiitq5';
-var comboboxHint = '_1xhiitqc';
-var comboboxInputVariants = {
-    default: '_1xhiitq2',
-    error: '_1xhiitq3'
-};
-var comboboxLabel = '_1xhiitq4';
-var comboboxOptionSelected = '_1xhiitq7';
-var comboboxClearButton = '_1xhiitq9';
-var comboboxArrow = '_1xhiitqa';
-var comboboxOption = '_1xhiitq6';
-var comboboxErrorMessage = '_1xhiitqd';
-var comboboxNoResults = '_1xhiitqb';
-var comboboxContainer = '_1xhiitq0';
-var comboboxOptionDisabled = '_1xhiitq8';
-export { comboboxArrow, comboboxClearButton, comboboxContainer, comboboxDropdown, comboboxErrorMessage, comboboxHint, comboboxInput, comboboxInputVariants, comboboxLabel, comboboxNoResults, comboboxOption, comboboxOptionDisabled, comboboxOptionSelected };
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+export const comboboxContainer = styleWithLayer({
+    position: 'relative',
+    width: '100%',
+});
+export const comboboxInput = styleWithLayer({
+    width: '100%',
+    padding: '0.75rem 2.5rem 0.75rem 1rem',
+    fontSize: '14px',
+    fontFamily: vars.fontFamily.body,
+    color: vars.colors.textPrimary,
+    backgroundColor: vars.colors.inputBackground,
+    border: `1px solid ${vars.colors.inputBorder}`,
+    borderRadius: '8px',
+    outline: 'none',
+    transition: 'border-color 0.2s ease',
+    '::placeholder': {
+        color: vars.colors.inputPlaceholder,
+    },
+    ':focus-visible': {
+        outline: `2px solid ${vars.colors.inputBorderFocused}`,
+        outlineOffset: '2px',
+    },
+    ':hover': {
+        borderColor: vars.colors.inputBorderFocused,
+    },
+    selectors: {
+        '&:disabled': {
+            cursor: 'not-allowed',
+            opacity: 0.5,
+            backgroundColor: vars.colors.backgroundMuted,
+        },
+        '&:disabled:hover': {
+            borderColor: vars.colors.inputBorder,
+        },
+    },
+});
+export const comboboxInputVariants = styleVariants({
+    default: {},
+    error: {
+        border: `1px solid ${vars.colors.alertErrorBorder}`,
+        ':focus-visible': {
+            outline: `2px solid ${vars.colors.alertErrorBorder}`,
+        },
+        ':hover': {
+            borderColor: vars.colors.alertErrorBorder,
+        },
+    },
+});
+export const comboboxLabel = styleWithLayer({
+    display: 'block',
+    fontSize: '14px',
+    fontWeight: '500',
+    color: vars.colors.textPrimary,
+    marginBottom: '8px',
+});
+export const comboboxDropdown = styleWithLayer({
+    position: 'absolute',
+    top: '100%',
+    left: 0,
+    right: 0,
+    backgroundColor: vars.colors.backgroundDefault,
+    border: `1px solid ${vars.colors.borderDefault}`,
+    borderRadius: '8px',
+    boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+    maxHeight: '200px',
+    overflowY: 'auto',
+    zIndex: 50,
+    marginTop: '4px',
+});
+export const comboboxOption = styleWithLayer({
+    padding: '0.75rem 1rem',
+    cursor: 'pointer',
+    fontSize: '14px',
+    color: vars.colors.textPrimary,
+    transition: 'background-color 0.15s ease',
+    ':hover': {
+        backgroundColor: vars.colors.backgroundMuted,
+    },
+    ':focus-visible': {
+        outline: 'none',
+        backgroundColor: vars.colors.backgroundMuted,
+    },
+});
+export const comboboxOptionSelected = styleWithLayer({
+    backgroundColor: vars.colors.buttonBackgroundPrimary,
+    color: vars.colors.buttonTextPrimary,
+    ':hover': {
+        backgroundColor: vars.colors.buttonBackgroundFocusedPrimary,
+    },
+});
+export const comboboxOptionDisabled = styleWithLayer({
+    opacity: 0.5,
+    cursor: 'not-allowed',
+    ':hover': {
+        backgroundColor: 'transparent',
+    },
+});
+export const comboboxClearButton = styleWithLayer({
+    position: 'absolute',
+    right: '2.5rem',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    padding: '0.25rem',
+    color: vars.colors.textSecondary,
+    fontSize: '16px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    ':hover': {
+        color: vars.colors.textPrimary,
+    },
+});
+export const comboboxArrow = styleWithLayer({
+    position: 'absolute',
+    right: '0.75rem',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    pointerEvents: 'none',
+    color: vars.colors.textSecondary,
+});
+export const comboboxNoResults = styleWithLayer({
+    padding: '0.75rem 1rem',
+    fontSize: '14px',
+    color: vars.colors.textSecondary,
+    textAlign: 'center',
+});
+export const comboboxHint = styleWithLayer({
+    fontSize: '12px',
+    color: vars.colors.textSecondary,
+    marginTop: '4px',
+});
+export const comboboxErrorMessage = styleWithLayer({
+    fontSize: '12px',
+    color: vars.colors.alertErrorText,
+    marginTop: '4px',
+});

package/dist/components/Container/Container.js

@@ -1,31 +1,21 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import Box from "../Box/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import Box from '../Box';
 const sizeMap = {
     sm: '640px',
     md: '768px',
     lg: '1024px',
     xl: '1280px',
-    full: '100%'
+    full: '100%',
 };
-const Container = /*#__PURE__*/ forwardRef(({ size = 'lg', centerContent = true, children, className, style }, ref)=>{
+const Container = forwardRef(({ size = 'lg', centerContent = true, children, className, style }, ref) => {
     const sizeValue = size;
     const containerStyle = {
         maxWidth: sizeMap[sizeValue],
-        marginLeft: centerContent ? 'auto' : void 0,
-        marginRight: centerContent ? 'auto' : void 0
+        marginLeft: centerContent ? 'auto' : undefined,
+        marginRight: centerContent ? 'auto' : undefined,
     };
-    return /*#__PURE__*/ jsx(Box, {
-        ref: ref,
-        width: "100%",
-        className: className,
-        style: {
-            ...containerStyle,
-            ...style
-        },
-        children: children
-    });
+    return (_jsx(Box, { ref: ref, width: "100%", className: className, style: { ...containerStyle, ...style }, children: children }));
 });
 Container.displayName = 'Container';
-const Container_Container = Container;
-export { Container_Container as default };
+export default Container;

package/dist/components/Container/index.js

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

package/dist/components/Divider/Divider.d.ts

@@ -5,5 +5,5 @@ export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
     orientation?: DividerOrientation;
     size?: DividerSize;
 }
-declare const Divider: ({ orientation, size, ...props }: DividerProps) => React.JSX.Element;
+declare const Divider: ({ orientation, size, ...props }: DividerProps) => import("react/jsx-runtime").JSX.Element;
 export default Divider;

package/dist/components/Divider/Divider.js

@@ -1,14 +1,8 @@
-import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { divider, dividerOrientations, dividerSizes, dividerVerticalSizes } from "./styles.css.js";
-import "react";
-import Box from "../Box/index.js";
-const Divider = ({ orientation = 'horizontal', size = 'medium', ...props })=>/*#__PURE__*/ jsx(Box, {
-        as: "hr",
-        className: clsx(divider, dividerOrientations[orientation], 'vertical' === orientation ? dividerVerticalSizes[size] : dividerSizes[size], props.className),
-        role: "separator",
-        "aria-orientation": orientation,
-        ...props
-    });
-const Divider_Divider = Divider;
-export { Divider_Divider as default };
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { divider, dividerOrientations, dividerSizes, dividerVerticalSizes, } from './styles.css';
+import Box from '../Box';
+const Divider = ({ orientation = 'horizontal', size = 'medium', ...props }) => {
+    return (_jsx(Box, { as: "hr", className: clsx(divider, dividerOrientations[orientation], orientation === 'vertical' ? dividerVerticalSizes[size] : dividerSizes[size], props.className), role: "separator", "aria-orientation": orientation, ...props }));
+};
+export default Divider;

package/dist/components/Divider/index.js

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

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

@@ -1,19 +1,41 @@
-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/Divider/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/Divider/styles.css.ts.vanilla.css\",\"source\":\"QGxheWVyIGNvbXBvbmVudHM7Ci5xMjBhdm0wIHsKICB3aWR0aDogMTAwJTsKICBoZWlnaHQ6IDFweDsKICBib3JkZXItdG9wOiAxcHggc29saWQgdmFyKC0tXzRsc2hnemEpOwp9Ci5xMjBhdm0xIHsKICB3aWR0aDogMXB4OwogIGhlaWdodDogMTAwJTsKICBib3JkZXItbGVmdDogMXB4IHNvbGlkIHZhcigtLV80bHNoZ3phKTsKfQoucTIwYXZtMiB7CiAgbWFyZ2luOiAwLjVyZW0gMDsKfQoucTIwYXZtMyB7CiAgbWFyZ2luOiAxcmVtIDA7Cn0KLnEyMGF2bTQgewogIG1hcmdpbjogMS41cmVtIDA7Cn0KLnEyMGF2bTYgewogIG1hcmdpbjogMCAwLjVyZW07Cn0KLnEyMGF2bTcgewogIG1hcmdpbjogMCAxcmVtOwp9Ci5xMjBhdm04IHsKICBtYXJnaW46IDAgMS41cmVtOwp9CkBsYXllciBjb21wb25lbnRzIHsKICAucTIwYXZtNSB7CiAgICBib3JkZXI6IG5vbmU7CiAgICBmbGV4LXNocmluazogMDsKICB9Cn0\"}!../../../../../node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.3.25_webpack@5.104.1/node_modules/@vanilla-extract/webpack-plugin/extracted.js";
-var divider = 'q20avm5';
-var dividerOrientations = {
-    horizontal: 'q20avm0',
-    vertical: 'q20avm1'
-};
-var dividerSizes = {
-    small: 'q20avm2',
-    medium: 'q20avm3',
-    large: 'q20avm4'
-};
-var dividerVerticalSizes = {
-    small: 'q20avm6',
-    medium: 'q20avm7',
-    large: 'q20avm8'
-};
-export { divider, dividerOrientations, dividerSizes, dividerVerticalSizes };
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+export const dividerOrientations = styleVariants({
+    horizontal: {
+        width: '100%',
+        height: '1px',
+        borderTop: `1px solid ${vars.colors.borderMuted}`,
+    },
+    vertical: {
+        width: '1px',
+        height: '100%',
+        borderLeft: `1px solid ${vars.colors.borderMuted}`,
+    },
+});
+export const dividerSizes = styleVariants({
+    small: {
+        margin: '0.5rem 0',
+    },
+    medium: {
+        margin: '1rem 0',
+    },
+    large: {
+        margin: '1.5rem 0',
+    },
+});
+export const divider = styleWithLayer({
+    border: 'none',
+    flexShrink: 0,
+});
+export const dividerVerticalSizes = styleVariants({
+    small: {
+        margin: '0 0.5rem',
+    },
+    medium: {
+        margin: '0 1rem',
+    },
+    large: {
+        margin: '0 1.5rem',
+    },
+});

package/dist/components/Drawer/Drawer.d.ts

@@ -12,5 +12,5 @@ export interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
     showCloseButton?: boolean;
     closeOnOverlayClick?: boolean;
 }
-declare const Drawer: ({ isOpen, onClose, title, position, size, children, footer, showCloseButton, closeOnOverlayClick, className, ...props }: DrawerProps) => React.JSX.Element | null;
+declare const Drawer: ({ isOpen, onClose, title, position, size, children, footer, showCloseButton, closeOnOverlayClick, className, ...props }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
 export default Drawer;