gaesup-world 0.0.6 → 0.0.62

package/README.md

@@ -2,50 +2,126 @@
 
 Web 3D Character Controller and World Platform Library
 
-[![npm (tag)](https://img.shields.io/npm/v/leva?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/leva)
+[![Version](https://img.shields.io/npm/v/gaesup-world?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/zustand)
+[![Downloads](https://img.shields.io/npm/dt/gaesup-world.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/gaesup-world)
 
-@react-three/fiber
-@react-three/drei
-three @types/three
-@react-three/rapier
+---
 
-Gaesup World는 @react/three-fiber, @react/three-drei, rapier 를 사용하여 웹 3D 환경에서 캐릭터, 비행기, 자동자 등의 컨트롤 도구를 제공하는 라이브러리입니다.
+## introduction
 
-이 컨트롤러는 캐릭터의 움직임, 애니메이션, 상호작용을 쉽게 관리할 수 있도록 설계되었습니다. 가상의 세계에서 캐릭터를 움직이거나 탈것을 쉽게 활용할 수 있고, 미니맵이나 조이스틱 등의 유틸 등도 설계되어 있습니다
+Gaesup World is a library that uses @react/three-fiber, @react/three-drei, and rapier to provide control tools for characters, airplanes, cars, and more in a web 3D environment. This controller is designed to easily manage character movement, animation, and interaction. It allows for easy manipulation of characters or vehicles in a virtual world, and is also equipped with utilities like minimaps and joysticks.
 
-## 특징
+### Features
 
-- React Three Fiber를 기반으로 하는 3D 캐릭터 컨트롤
-- 간단한 API를 통한 캐릭터 움직임 및 애니메이션 제어
-- 확장 가능한 구조로 다양한 커스터마이징 지원
-- 가벼운 라이브러리로 빠른 로딩 및 성능 최적화
+- 3D character control based on React Three Fiber.
+- Simple API for controlling character movement and animation.
+- Extensible structure for various customizations.
+- Lightweight library for fast loading and performance optimization.
 
-## 설치 방법
+### Installation
 
 ```bash
 npm install @react-three/fiber @react-three/drei three @types/three @react-three/rapier gaesup-world
 ```
 
-또는
+Or
 
 ```bash
 yarn add @react-three/fiber @react-three/drei three @types/three @react-three/rapier gaesup-world
 ```
 
-## 문서
+### Documentation
 
-더 자세한 사용 방법 및 API 문서는 [여기](#)를 참조하세요.
+it is detailed usage methods and API documentation
 
-## 기여 방법
+- [how to contribute](#how-to-contribute)
 
-이 프로젝트에 기여하고 싶으시다면, 다음 단계를 따라주세요:
+### How to Contribute
 
-1. 프로젝트를 Fork합니다.
-2. 새로운 Feature 브랜치를 생성합니다 (`git checkout -b feature/AmazingFeature`).
-3. 변경사항을 Commit합니다 (`git commit -m 'Add some AmazingFeature'`).
-4. 브랜치에 Push합니다 (`git push origin feature/AmazingFeature`).
-5. Pull Request를 생성합니다.
+If you would like to contribute to this project, please follow these steps:
 
-## 라이센스
+1. Fork the project.
+2. Create a new Feature branch (`git checkout -b feature/AmazingFeature`).
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`).
+4. Push to the branch (`git push origin feature/AmazingFeature`).
+5. Create a Pull Request.
 
-이 프로젝트는 [MIT 라이센스](LICENSE) 하에 배포됩니다.
+### License
+
+This project is distributed under the MIT License.
+
+---
+
+## Controller
+
+#### [Controller](#controller)
+
+- [Character](#character)
+- [Vehicle](#vehicle)
+- [Airplane](#airplane)
+
+## Character
+
+This is the character control in Gaesup World.
+
+- Possible Camera Types
+
+| Name   | Camera              | Control       | Info                                                                                          |
+| ------ | ------------------- | ------------- | --------------------------------------------------------------------------------------------- |
+| Normal | Perspective Camera  | Orbit Control | Positioned parallel to the Z-axis from the character's location and not affected by rotation. |
+| Orbit  | Perspective Camera  | Orbit Control | Moves with the character and rotates according to the character's direction.                  |
+| Map    | Orthographic Camera | Map Control   | A top-down control view.                                                                      |
+
+- Controller Tools
+
+| Name     | Info                                                                    |
+| -------- | ----------------------------------------------------------------------- |
+| Keyboard | A standard keyboard tool. You can see where on the keyboard is clicked. |
+| Joystick | A joystick implementation tool. It works on mobile devices.             |
+| Gameboy  | A Gameboy implementation tool. It works on mobile devices.              |
+
+## Vehicle
+
+This is the vehicle control in Gaesup World. Characters can board the vehicle.
+
+- Possible Camera Types
+
+| Name   | Camera              | Control       | Info                                                                                          |
+| ------ | ------------------- | ------------- | --------------------------------------------------------------------------------------------- |
+| Normal | Perspective Camera  | Orbit Control | Positioned parallel to the Z-axis from the character's location and not affected by rotation. |
+| Orbit  | Perspective Camera  | Orbit Control | Moves with the character and rotates according to the character's direction.                  |
+| Map    | Orthographic Camera | Map Control   | A top-down control view.                                                                      |
+
+- Controller Tools
+
+| Name     | Info                                                                    |
+| -------- | ----------------------------------------------------------------------- |
+| Keyboard | A standard keyboard tool. You can see where on the keyboard is clicked. |
+| Joystick | A joystick implementation tool. It works on mobile devices.             |
+| Gameboy  | A Gameboy implementation tool. It works on mobile devices.              |
+
+## Airplane
+
+This is the airplane control in Gaesup World. Characters can board the airplane.
+
+- Possible Camera Types
+
+| Name   | Camera              | Control       | Info                                                                                          |
+| ------ | ------------------- | ------------- | --------------------------------------------------------------------------------------------- |
+| Normal | Perspective Camera  | Orbit Control | Positioned parallel to the Z-axis from the character's location and not affected by rotation. |
+| Orbit  | Perspective Camera  | Orbit Control | Moves with the character and rotates according to the character's direction.                  |
+| Map    | Orthographic Camera | Map Control   | A top-down control view.                                                                      |
+
+- Controller Tools
+
+| Name     | Info                                                                    |
+| -------- | ----------------------------------------------------------------------- |
+| Keyboard | A standard keyboard tool. You can see where on the keyboard is clicked. |
+| Joystick | A joystick implementation tool. It works on mobile devices.             |
+| Gameboy  | A Gameboy implementation tool. It works on mobile devices.              |
+
+---
+
+## Tools
+
+#### [Tools](#tools)

package/dist/examples/select/platform/ControlledInput.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -23,18 +12,18 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import * as style from "./style.css";
-export var ControlledInput = function (props) {
-    var value = props.value, onChange = props.onChange, rest = __rest(props, ["value", "onChange"]);
-    var _a = useState(null), cursor = _a[0], setCursor = _a[1];
-    var ref = useRef(null);
-    useEffect(function () {
-        var input = ref.current;
+export const ControlledInput = (props) => {
+    const { value, onChange } = props, rest = __rest(props, ["value", "onChange"]);
+    const [cursor, setCursor] = useState(null);
+    const ref = useRef(null);
+    useEffect(() => {
+        const input = ref.current;
         if (input)
             input.setSelectionRange(cursor, cursor);
     }, [ref, cursor, value]);
-    var handleChange = function (e) {
+    const handleChange = (e) => {
         setCursor(e.target.selectionStart);
         onChange && onChange(e);
     };
-    return (_jsx("input", __assign({ ref: ref, value: value, onChange: handleChange }, rest, { className: style.input })));
+    return (_jsx("input", Object.assign({ ref: ref, value: value, onChange: handleChange }, rest, { className: style.input })));
 };

package/dist/examples/select/platform/DynamicPlatforms.js

@@ -7,12 +7,12 @@ import { useMemo, useRef } from "react";
 import GaeSupProps from "../../../src/gaesup/gaesupProps";
 import { Qt, V3 } from "../../../src/gaesup/utils/vector";
 export default function DynamicPlatforms() {
-    var sideMovePlatformRef = useRef(null);
-    var verticalMovePlatformRef = useRef(null);
-    var rotatePlatformRef = useRef(null);
-    var rotationDrumRef = useRef(null);
+    const sideMovePlatformRef = useRef(null);
+    const verticalMovePlatformRef = useRef(null);
+    const rotatePlatformRef = useRef(null);
+    const rotationDrumRef = useRef(null);
     // Initializ animation settings
-    var dynamic = useMemo(function () {
+    const dynamic = useMemo(() => {
         return {
             time: null,
             X: V3(1, 0, 0),
@@ -20,10 +20,10 @@ export default function DynamicPlatforms() {
             Qt: Qt(),
         };
     }, []);
-    useFrame(function (state) {
+    useFrame((state) => {
         var _a, _b, _c, _d, _e;
         dynamic.time = state.clock.elapsedTime;
-        var time = dynamic.time, Qt = dynamic.Qt, X = dynamic.X, Y = dynamic.Y;
+        const { time, Qt, X, Y } = dynamic;
         if (dynamic.time) {
             // Move platform
             (_a = sideMovePlatformRef.current) === null || _a === void 0 ? void 0 : _a.setNextKinematicTranslation({

package/dist/examples/select/platform/FloatMove.js

@@ -5,10 +5,10 @@ import { useEffect, useMemo, useRef } from "react";
 import GaeSupProps from "../../../src/gaesup/gaesupProps";
 export default function FloatMove() {
     // Preset
-    var cuboidColliderRef = useRef(null);
-    var rigidBodyRef = useRef(null);
-    var _a = useRapier(), rapier = _a.rapier, world = _a.world;
-    var ray = useMemo(function () {
+    const cuboidColliderRef = useRef(null);
+    const rigidBodyRef = useRef(null);
+    const { rapier, world } = useRapier();
+    const ray = useMemo(() => {
         return {
             origin: vec3(),
             dir: vec3({ x: 0, y: -1, z: 0 }),
@@ -22,14 +22,14 @@ export default function FloatMove() {
         };
     }, []);
     ray.rayCast = new rapier.Ray(ray.origin, ray.dir);
-    var movingDir = 1;
-    useEffect(function () {
+    let movingDir = 1;
+    useEffect(() => {
         if (rigidBodyRef.current) {
             rigidBodyRef.current.setEnabledRotations(false, true, false, false);
             rigidBodyRef.current.setEnabledTranslations(true, true, false, false);
         }
     }, []);
-    useFrame(function () {
+    useFrame(() => {
         // Ray cast for moving platform
         if (rigidBodyRef.current && ray.rayCast && cuboidColliderRef.current) {
             ray.origin.set(rigidBodyRef.current.translation().x, rigidBodyRef.current.translation().y, rigidBodyRef.current.translation().z);
@@ -51,7 +51,7 @@ export default function FloatMove() {
         // Ray for moving platform
         if (ray.hit && rigidBodyRef.current) {
             if (ray.hit.collider.parent()) {
-                var floatingForceMove = 2.5 * (0.8 - ray.hit.toi) - rigidBodyRef.current.linvel().y * 0.15;
+                const floatingForceMove = 2.5 * (0.8 - ray.hit.toi) - rigidBodyRef.current.linvel().y * 0.15;
                 rigidBodyRef.current.applyImpulse(vec3().set(0, floatingForceMove, 0), true);
             }
         }

package/dist/examples/select/platform/RoughPlane.js

@@ -7,9 +7,9 @@ import * as THREE from "three";
 import GaeSupProps from "../../../src/gaesup/gaesupProps";
 import { S3 } from "../../../src/gaesup/utils/constant";
 export default function RoughPlane() {
-    var roughPlane = useGLTF(S3 + "/roughPlane.glb");
-    useEffect(function () {
-        roughPlane.scene.traverse(function (child) {
+    const roughPlane = useGLTF(S3 + "/roughPlane.glb");
+    useEffect(() => {
+        roughPlane.scene.traverse((child) => {
             if (child instanceof THREE.Mesh &&
                 child.material instanceof THREE.MeshStandardMaterial) {
                 child.receiveShadow = true;

package/dist/examples/select/platform/Slopes.js

@@ -9,19 +9,17 @@ import { S3 } from "../../../src/gaesup/utils/constant";
 import { ControlledInput } from "./ControlledInput";
 export default function Slopes() {
     // Load models
-    var slopes = useGLTF(S3 + "/slopes.glb");
-    var _a = useState(25), angle = _a[0], setAngle = _a[1];
-    var rigidBodyRef = useRef(null);
-    useEffect(function () {
+    const slopes = useGLTF(S3 + "/slopes.glb");
+    const [angle, setAngle] = useState(25);
+    const rigidBodyRef = useRef(null);
+    useEffect(() => {
         // Receive Shadows
-        slopes.scene.traverse(function (child) {
+        slopes.scene.traverse((child) => {
             if (child instanceof THREE.Mesh &&
                 child.material instanceof THREE.MeshStandardMaterial) {
                 child.receiveShadow = true;
             }
         });
     }, []);
-    return (_jsxs(GaeSupProps, { text: "Slopes", jumpPoint: true, position: [-15, -0.8, 15], children: [_jsx(RigidBody, { type: "fixed", colliders: "hull", ref: rigidBodyRef, rotation: [-(angle * Math.PI) / 180, 0, 0], children: _jsxs("mesh", { receiveShadow: true, castShadow: true, children: [_jsx("boxGeometry", { args: [10, 1, 10] }), _jsx("meshBasicMaterial", { transparent: true, opacity: 0.9 })] }) }), _jsx(Html, { zIndexRange: [1, 0], children: _jsx(ControlledInput, { type: angle, onChange: function (e) {
-                        return setAngle(e.target.value);
-                    }, value: angle }) })] }));
+    return (_jsxs(GaeSupProps, { text: "Slopes", jumpPoint: true, position: [-15, -0.8, 15], children: [_jsx(RigidBody, { type: "fixed", colliders: "hull", ref: rigidBodyRef, rotation: [-(angle * Math.PI) / 180, 0, 0], children: _jsxs("mesh", { receiveShadow: true, castShadow: true, children: [_jsx("boxGeometry", { args: [10, 1, 10] }), _jsx("meshBasicMaterial", { transparent: true, opacity: 0.9 })] }) }), _jsx(Html, { zIndexRange: [1, 0], children: _jsx(ControlledInput, { type: angle, onChange: (e) => setAngle(e.target.value), value: angle }) })] }));
 }

package/dist/examples/select/platform/style.css.js

@@ -1,5 +1,5 @@
 import { style } from "@vanilla-extract/css";
-export var input = style([
+export const input = style([
     {
         width: "20rem",
         borderRadius: "1rem",

package/dist/examples/select/src/index.js

@@ -1,15 +1,4 @@
 "use client";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Environment, KeyboardControls } from "@react-three/drei";
 import { Canvas } from "@react-three/fiber";
@@ -26,7 +15,7 @@ import RigidObjects from "../platform/RigidObjects";
 import RoughPlane from "../platform/RoughPlane";
 import * as style from "./style.css";
 import { button } from "./style.css";
-export var keyboardMap = [
+export const keyboardMap = [
     { name: "forward", keys: ["ArrowUp", "KeyW"] },
     { name: "backward", keys: ["ArrowDown", "KeyS"] },
     { name: "leftward", keys: ["ArrowLeft", "KeyA"] },
@@ -36,92 +25,81 @@ export var keyboardMap = [
     { name: "keyZ", keys: ["KeyZ"] },
 ];
 export default function Selected() {
-    var CHARACTER_URL = "./gaesupyee.glb";
-    var AIRPLANE_URL = "./airplane.glb";
-    var VEHICLE_URL = S3 + "/kart2.glb";
-    var _a = useState({
+    const CHARACTER_URL = "./gaesupyee.glb";
+    const AIRPLANE_URL = "./airplane.glb";
+    const VEHICLE_URL = S3 + "/kart2.glb";
+    const [mode, changeMode] = useState({
         type: "character",
         controller: isMobile ? "joystick" : "joystick",
-    }), mode = _a[0], changeMode = _a[1];
-    var _b = useState({
+    });
+    const [camera, changeCamera] = useState({
         cameraType: "perspective",
         controlType: "orbit",
-    }), camera = _b[0], changeCamera = _b[1];
-    return (_jsxs(GaesupWorld, { debug: true, mode: __assign({}, mode), url: {
+    });
+    return (_jsxs(GaesupWorld, { debug: true, mode: Object.assign({}, mode), url: {
             characterUrl: CHARACTER_URL,
             vehicleUrl: VEHICLE_URL,
             airplaneUrl: AIRPLANE_URL,
         }, children: [_jsx(GaeSupTools, {}), _jsxs("div", { className: style.mainButtonContainer, children: [_jsx("button", { className: button({
                             selected: mode.type === "character",
-                        }), onClick: function () {
-                            return changeMode(function (mode) { return ({
-                                type: "character",
-                                controller: mode.controller,
-                            }); });
-                        }, children: "CHARACTER" }), _jsx("button", { className: button({
+                        }), onClick: () => changeMode((mode) => ({
+                            type: "character",
+                            controller: mode.controller,
+                        })), children: "CHARACTER" }), _jsx("button", { className: button({
                             selected: mode.type === "vehicle",
-                        }), onClick: function () {
-                            return changeMode(function (mode) { return ({
-                                type: "vehicle",
-                                controller: mode.controller,
-                            }); });
-                        }, children: "VEHICLE" }), _jsx("button", { className: button({
+                        }), onClick: () => changeMode((mode) => ({
+                            type: "vehicle",
+                            controller: mode.controller,
+                        })), children: "VEHICLE" }), _jsx("button", { className: button({
                             selected: mode.type === "airplane",
-                        }), onClick: function () {
-                            return changeMode(function (mode) { return ({
-                                type: "airplane",
-                                controller: mode.controller,
-                            }); });
-                        }, children: "AIRPLANE" }), _jsx("button", { className: button({
+                        }), onClick: () => changeMode((mode) => ({
+                            type: "airplane",
+                            controller: mode.controller,
+                        })), children: "AIRPLANE" }), _jsx("button", { className: button({
                             selected: camera.controlType === "normal",
-                        }), onClick: function () {
-                            return changeCamera(function () { return ({
-                                cameraType: "perspective",
-                                controlType: "normal",
-                            }); });
-                        }, children: "NORMAL" }), _jsx("button", { className: button({
+                        }), onClick: () => changeCamera(() => ({
+                            cameraType: "perspective",
+                            controlType: "normal",
+                        })), children: "NORMAL" }), _jsx("button", { className: button({
                             selected: camera.controlType === "orbit" &&
                                 camera.cameraType === "perspective",
-                        }), onClick: function () {
-                            return changeCamera(function () { return ({
-                                cameraType: "perspective",
-                                controlType: "orbit",
-                            }); });
-                        }, children: "ORBIT" }), _jsx("button", { className: button({
+                        }), onClick: () => changeCamera(() => ({
+                            cameraType: "perspective",
+                            controlType: "orbit",
+                        })), children: "ORBIT" }), _jsx("button", { className: button({
                             selected: camera.cameraType === "orthographic",
-                        }), onClick: function () {
-                            changeCamera(function () { return ({
+                        }), onClick: () => {
+                            changeCamera(() => ({
                                 cameraType: "orthographic",
                                 controlType: "orbit",
-                            }); });
+                            }));
                         }, children: "MAP" }), !isMobile && (_jsx("button", { className: button({
                             selected: mode.controller === "keyboard",
-                        }), onClick: function () {
-                            changeMode(function (mode) { return ({
+                        }), onClick: () => {
+                            changeMode((mode) => ({
                                 type: mode.type,
                                 controller: "keyboard",
-                            }); });
+                            }));
                         }, children: "\uD0A4\uBCF4\uB4DC" })), _jsx("button", { className: button({
                             selected: mode.controller === "joystick",
-                        }), onClick: function () {
-                            changeMode(function (mode) { return ({
+                        }), onClick: () => {
+                            changeMode((mode) => ({
                                 type: mode.type,
                                 controller: "joystick",
-                            }); });
+                            }));
                         }, children: "\uC870\uC774\uC2A4\uD2F1" }), _jsx("button", { className: button({
                             selected: mode.controller === "gameboy",
-                        }), onClick: function () {
-                            changeMode(function (mode) { return ({
+                        }), onClick: () => {
+                            changeMode((mode) => ({
                                 type: mode.type,
                                 controller: "gameboy",
-                            }); });
-                        }, children: "\uAC8C\uC784\uBCF4\uC774" })] }), _jsxs(Canvas, { shadows: true, dpr: [1, 2], style: { width: "100dvw", height: "100dvh" }, children: [_jsx(Environment, { background: true, preset: "sunset", blur: 0.8 }), _jsx("directionalLight", { castShadow: true, "shadow-normalBias": 0.06, position: [20, 30, 10], intensity: 0.5, "shadow-mapSize": [1024, 1024], "shadow-camera-near": 1, "shadow-camera-far": 50, "shadow-camera-top": 50, "shadow-camera-right": 50, "shadow-camera-bottom": -50, "shadow-camera-left": -50 }), _jsx("ambientLight", { intensity: 0.5 }), _jsxs(Physics, { debug: true, children: [_jsx(KeyboardControls, { map: keyboardMap, children: _jsx(GaesupController, { isRider: mode.type === "vehicle" ? true : false, cameraMode: __assign({}, camera), orthographicCamera: {
+                            }));
+                        }, children: "\uAC8C\uC784\uBCF4\uC774" })] }), _jsxs(Canvas, { shadows: true, dpr: [1, 2], style: { width: "100dvw", height: "100dvh" }, children: [_jsx(Environment, { background: true, preset: "sunset", blur: 0.8 }), _jsx("directionalLight", { castShadow: true, "shadow-normalBias": 0.06, position: [20, 30, 10], intensity: 0.5, "shadow-mapSize": [1024, 1024], "shadow-camera-near": 1, "shadow-camera-far": 50, "shadow-camera-top": 50, "shadow-camera-right": 50, "shadow-camera-bottom": -50, "shadow-camera-left": -50 }), _jsx("ambientLight", { intensity: 0.5 }), _jsxs(Physics, { debug: true, children: [_jsx(KeyboardControls, { map: keyboardMap, children: _jsx(GaesupController, { isRider: mode.type === "vehicle" ? true : false, cameraMode: Object.assign({}, camera), orthographicCamera: {
                                         zoom: 80,
                                     }, groupProps: {
                                         rotation: [0, Math.PI, 0],
-                                    }, onAnimate: function (_a) {
-                                        var control = _a.control, states = _a.states, playAnimation = _a.playAnimation;
-                                        var keyZ = control.keyZ;
+                                    }, onAnimate: ({ control, states, playAnimation }) => {
+                                        const { keyZ } = control;
                                         if (keyZ) {
                                             states.isAnimationOuter = true;
                                             playAnimation("greet");

package/dist/examples/select/src/keyboardMap/character.js

@@ -1,4 +1,4 @@
-export var characterKeyboardMap = [
+export const characterKeyboardMap = [
     { name: "forward", keys: ["ArrowUp", "KeyW"] },
     { name: "backward", keys: ["ArrowDown", "KeyS"] },
     { name: "leftward", keys: ["ArrowLeft", "KeyA"] },
@@ -7,7 +7,7 @@ export var characterKeyboardMap = [
     { name: "run", keys: ["Shift"] },
     { name: "greet", keys: ["KeyZ"] },
 ];
-export var vehicleKeyboardMap = [
+export const vehicleKeyboardMap = [
     { name: "forward", keys: ["ArrowUp", "KeyW"] },
     { name: "backward", keys: ["ArrowDown", "KeyS"] },
     { name: "leftward", keys: ["ArrowLeft", "KeyA"] },

package/dist/examples/select/src/keyboardMap/vehicle.js

@@ -1,4 +1,4 @@
-export var vehicleKeyboardMap = [
+export const vehicleKeyboardMap = [
     { name: "forward", keys: ["ArrowUp", "KeyW"] },
     { name: "backward", keys: ["ArrowDown", "KeyS"] },
     { name: "leftward", keys: ["ArrowLeft", "KeyA"] },

package/dist/examples/select/src/style.css.js

@@ -1,13 +1,13 @@
 import { fontFace, style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 import { vars } from "../../../src/styles/theme.css";
-var BlackHanSans = fontFace({
+const BlackHanSans = fontFace({
     src: 'local("/public/fonts/BlackHanSans-Regular.ttf")',
 });
-export var blackHanSans = style({
+export const blackHanSans = style({
     fontFamily: BlackHanSans,
 });
-export var main = style([
+export const main = style([
     {
         display: "flex",
         flexDirection: "column",
@@ -18,7 +18,7 @@ export var main = style([
         fontFamily: blackHanSans,
     },
 ]);
-export var mainButtonContainer = style([
+export const mainButtonContainer = style([
     {
         position: "fixed",
         zIndex: 100,
@@ -30,7 +30,7 @@ export var mainButtonContainer = style([
         gridTemplateRows: "repeat(3, 1fr)",
     },
 ]);
-export var button = recipe({
+export const button = recipe({
     base: [
         {
             boxSizing: "border-box",