@iwer/devui 0.2.0 → 1.0.0

package/lib/components/styled.js

@@ -6,69 +6,159 @@
  */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { styled } from 'styled-components';
+export const Colors = {
+    textWhite: 'rgba(223, 223, 223, 1)',
+    textGrey: 'rgba(156, 156, 156, 1)',
+    dangerRed: 'rgba(243, 151, 143, 1)',
+    dangerRedPressed: 'rgba(240, 97, 84,1)',
+    panelBackground: 'rgba(38, 38, 38, 0.7)',
+    panelBorder: 'rgba(61, 61, 63, 0.7)',
+    buttonBackground: 'rgba(61, 61, 63, 0.6)',
+    buttonHovered: 'rgba(61, 61, 63, 0.8)',
+    buttonPressed: 'rgba(61, 61, 63, 1)',
+    gradientGrey: 'linear-gradient(to bottom, #343434, #393939)',
+    gradientGreyTranslucent: 'linear-gradient(to bottom, rgba(52, 52, 52, 0.75), rgba(57, 57, 57, 0.75))',
+    gradientLightGreyTranslucent: 'linear-gradient(to bottom, rgba(75, 75, 75, 0.75), rgba(80, 80, 80, 0.75))',
+};
+export const ControlButtonStyles = {
+    height: '30px',
+    minWidth: '30px',
+    fontSize: '14px',
+    radiusMiddle: '3px',
+    radiusSolo: '10px',
+    radiusFirst: '10px 3px 3px 10px',
+    radiusLast: '3px 10px 10px 3px',
+    widthLong: '70px',
+    widthShort: '30px',
+    gap: '3px',
+};
 export const Button = styled.button `
-	background-color: rgba(255, 255, 255, 0.3);
+	background: ${Colors.gradientGreyTranslucent};
 	border: none;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	cursor: pointer;
-	color: white;
-	border-radius: 2px;
-	font-size: 14px;
+	color: ${Colors.textWhite};
+	border: 1px solid transparent;
+	border-radius: ${ControlButtonStyles.radiusMiddle};
+	font-size: ${ControlButtonStyles.fontSize};
+	height: ${ControlButtonStyles.height};
+	min-width: ${ControlButtonStyles.minWidth};
+	transition: all 0.2s ease-in-out;
+	text-transform: none;
+	box-shadow: none;
+	font-family: Arial, sans-serif;
+
+	&:first-child {
+		border-radius: ${({ $reverse }) => $reverse
+    ? ControlButtonStyles.radiusLast
+    : ControlButtonStyles.radiusFirst};
+	}
+
+	&:last-child {
+		border-radius: ${({ $reverse }) => $reverse
+    ? ControlButtonStyles.radiusFirst
+    : ControlButtonStyles.radiusLast};
+	}
+
+	&:first-child:last-child {
+		border-radius: ${ControlButtonStyles.radiusSolo};
+	}
+`;
+Button.defaultProps = { $reverse: false };
+export const HeaderButtonsContainer = styled.div `
+	padding: 2px;
+	display: flex;
+	background-color: ${Colors.panelBackground};
+	border: 1px solid ${Colors.panelBorder};
+	backdrop-filter: blur(40px);
+	-webkit-backdrop-filter: blur(40px);
+	justify-content: center;
+	pointer-events: all;
+	border-radius: 14px;
+	align-items: center;
+	height: 24px;
+`;
+export const HeaderButton = styled.button `
+	background-color: transparent;
+	border: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	color: ${Colors.textWhite};
+	border-radius: 4px;
+	font-size: 16px;
 	height: 24px;
 	min-width: 24px;
 	transition: all 0.2s ease-in-out;
-	margin: 0 1px;
 	text-transform: none;
 	box-shadow: none;
+	padding: 1px 5px;
 	font-family: Arial, sans-serif;
 
 	&:hover {
-		background-color: rgba(255, 255, 255, 0.5);
+		background-color: ${Colors.buttonPressed};
 	}
 
 	&:active {
-		background-color: rgba(255, 255, 255, 0.6);
+		background-color: ${Colors.buttonPressed};
+	}
+
+	&:focus {
+		outline: none;
 	}
 
 	&:first-child {
-		border-radius: ${({ $reverse }) => $reverse ? '2px 8px 8px 2px' : '8px 2px 2px 8px'};
+		border-radius: 12px 4px 4px 12px;
 	}
 
 	&:last-child {
-		border-radius: ${({ $reverse }) => $reverse ? '8px 2px 2px 8px' : '2px 8px 8px 2px'};
+		border-radius: 4px 12px 12px 4px;
+	}
+
+	&:first-child:last-child {
+		border-radius: 12px;
 	}
 `;
 export const MappedKeyBlock = styled.div `
-	background-color: ${({ $pressed }) => $pressed ? 'rgba(255, 255, 255, 0.6)' : 'rgba(255, 255, 255, 0.3)'};
+	background-color: ${({ $pressed }) => $pressed ? Colors.buttonPressed : Colors.buttonBackground};
 	border: none;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	color: white;
-	border-radius: 5px;
+	color: ${Colors.textWhite};
+	border-radius: 8px;
 	font-size: 14px;
 	font-family: Arial, sans-serif;
-	height: 20px;
-	width: 20px;
+	height: 30px;
+	width: 30px;
 	transition: all 0.2s ease-in-out;
 `;
 export const ButtonContainer = styled.div `
 	display: flex;
 	align-items: center;
-	height: 24px;
-	margin-bottom: 2px;
+	height: 30px;
+	margin-bottom: 3px;
 	justify-content: flex-start;
 	flex-direction: ${({ $reverse }) => ($reverse ? 'row-reverse' : 'row')};
+
+	&:last-child {
+		margin-bottom: 0;
+	}
 `;
+ButtonContainer.defaultProps = { $reverse: false };
 export const ButtonGroup = styled.div `
 	display: flex;
 	flex-direction: ${({ $reverse }) => ($reverse ? 'row-reverse' : 'row')};
 	height: 100%;
 	justify-content: space-between;
 	align-items: center;
+	margin: ${({ $reverse }) => ($reverse ? '0 5px 0 0' : '0 0 0 5px')};
+	gap: 3px;
 `;
+ButtonGroup.defaultProps = { $reverse: false };
 export const JoystickButton = styled.button `
 	background-color: rgba(255, 255, 255, 0.3);
 	border: none;
@@ -87,7 +177,7 @@ export const JoystickButton = styled.button `
 `;
 export const JoystickInner = styled.div `
 	position: absolute;
-	background-color: white;
+	background-color: ${Colors.textWhite};
 	border-radius: 50%;
 	width: 36px;
 	height: 36px;
@@ -97,38 +187,41 @@ export const JoystickInner = styled.div `
 export const RangeSelector = styled.input.attrs({ type: 'range' }) `
 	-webkit-appearance: none;
 	appearance: none;
-	background-color: rgba(255, 255, 255, 0.3);
+	background: ${Colors.gradientGreyTranslucent};
 	border: none;
 	height: 100%;
-	width: 49px;
+	width: ${ControlButtonStyles.widthLong};
 	cursor: pointer;
-	margin: 0 1px;
+	margin: 0;
 	transition: all 0.2s ease-in-out;
-	border-radius: ${({ $reverse }) => $reverse ? '8px 2px 2px 8px' : '2px 8px 8px 2px'};
+	border-radius: ${({ $reverse }) => $reverse
+    ? ControlButtonStyles.radiusFirst
+    : ControlButtonStyles.radiusLast};
 
 	&::-webkit-slider-thumb {
 		-webkit-appearance: none;
 		appearance: none;
 		width: 8px;
-		height: 24px;
-		background-color: white;
-		border-radius: 3px;
+		height: 30px;
+		background-color: ${Colors.textWhite};
+		border-radius: ${ControlButtonStyles.radiusMiddle};
 	}
 
 	&::-moz-range-thumb {
-		width: 8px;
-		height: 24px;
-		background-color: white;
-		border-radius: 3px;
+		width: 10px;
+		height: 30px;
+		background-color: ${Colors.textWhite};
+		border-radius: ${ControlButtonStyles.radiusMiddle};
 	}
 
 	&::-ms-thumb {
 		width: 8px;
 		height: 24px;
-		background-color: white;
-		border-radius: 3px;
+		background-color: ${Colors.textWhite};
+		border-radius: ${ControlButtonStyles.radiusMiddle};
 	}
 `;
+RangeSelector.defaultProps = { $reverse: false };
 export const KeyBlockContainer = styled.div `
 	display: flex;
 	flex-direction: column;
@@ -149,11 +242,97 @@ export const ButtonGroupColumn = styled.div `
 	justify-content: space-between;
 `;
 export const FAIcon = styled(FontAwesomeIcon) `
-	height: 14px;
-	min-height: 14px;
-	max-height: 14px;
-	width: 14px;
-	min-width: 14px;
-	max-width: 14px;
+	height: ${({ $size }) => `${$size}px`};
+	min-height: ${({ $size }) => `${$size}px`};
+	max-height: ${({ $size }) => `${$size}px`};
+	width: ${({ $size }) => `${$size}px`};
+	min-width: ${({ $size }) => `${$size}px`};
+	max-width: ${({ $size }) => `${$size}px`};
+`;
+FAIcon.defaultProps = { $size: 14 };
+export const ControlPanel = styled.div `
+	position: fixed;
+	padding: 5px;
+	font-family: Arial, sans-serif;
+	color: ${Colors.textWhite};
+	pointer-events: all;
+	background-color: ${Colors.panelBackground};
+	border: 1px solid ${Colors.panelBorder};
+	backdrop-filter: blur(40px);
+	-webkit-backdrop-filter: blur(40px);
+	border-radius: 12px;
+	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+`;
+export const SectionBreak = styled.hr `
+	width: ${({ $horizontal }) => ($horizontal ? 'unset' : '1px')};
+	height: ${({ $horizontal }) => ($horizontal ? '1px' : 'unset')};
+	background-color: ${Colors.panelBorder};
+	margin: 5px 3px;
+	border: none;
+`;
+SectionBreak.defaultProps = { $horizontal: true };
+export const PanelHeaderButton = styled.button `
+	background-color: transparent;
+	border: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	color: ${({ $isRed }) => ($isRed ? Colors.dangerRed : Colors.textWhite)};
+	font-size: 12px;
+	padding: 3px;
+	text-transform: none;
+	box-shadow: none;
+
+	&:hover {
+		color: ${({ $isRed }) => ($isRed ? Colors.dangerRedPressed : '#ffffff')};
+	}
+
+	&:active {
+		color: ${({ $isRed }) => ($isRed ? Colors.dangerRedPressed : '#ffffff')};
+	}
+
+	&:focus {
+		outline: none;
+	}
+`;
+PanelHeaderButton.defaultProps = { $isRed: false };
+export const ValuesContainer = styled.div `
+	display: flex;
+	flex-direction: row;
+	gap: ${ControlButtonStyles.gap};
+	height: 25px;
+`;
+export const ValueInput = styled.input.attrs({ type: 'text' }) `
+	width: 50px;
+	outline: none;
+	background: ${Colors.gradientGrey};
+	border: 1px solid transparent;
+	border-radius: 5px;
+	height: 25px;
+	color: ${Colors.textWhite};
+	padding: 0 10px 0 5px;
+	box-sizing: border-box;
+	font-size: 10px;
+
+	&:read-only {
+		background: ${Colors.gradientGreyTranslucent};
+	}
+
+	&:invalid {
+		background-color: ${Colors.dangerRed};
+	}
+`;
+export const InputSuffix = styled.span `
+	position: absolute;
+	right: 5px;
+	top: 50%;
+	transform: translateY(-50%);
+	pointer-events: none;
+	color: var(--panel-light-grey);
+	font-size: 10px;
 `;
 //# sourceMappingURL=styled.js.map

package/lib/components/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../src/components/styled.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA2BvC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB;;;;mBAIhC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB;;CAElD,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAuB;qBAC1C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACpC,QAAQ,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,0BAA0B;;;;;;;;;;;;CAYnE,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAuB;;;;;;mBAM7C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;CACtE,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAuB;;mBAEzC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;;;;CAItE,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;;;;;;;CAe1C,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;CAQtC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAEhE;;;;;;;;;;kBAUgB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;CAwBjD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAuB;;;gBAGlD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC;;WAE7D,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC;CAC1E,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAuB;;mBAEpC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;;;CAGtE,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK1C,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC,CAAA;;;;;;;CAO5C,CAAC"}
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../src/components/styled.tsx"],"names":[],"mappings":"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"}

package/lib/components/vec3.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+export declare function round(number: number, decimalPlaces: number): number;
+type Vector3Like = {
+    x: number;
+    y: number;
+    z: number;
+};
+interface Vector3InputProps {
+    vector: Vector3Like;
+    label?: string;
+    icon?: IconDefinition;
+    multiplier?: number;
+    precision?: number;
+    onValidInput?: () => void;
+    marginBottom?: string;
+}
+export declare const Vector3Input: ({ vector, label, icon, multiplier, precision, onValidInput, marginBottom, }: Vector3InputProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=vec3.d.ts.map

package/lib/components/vec3.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vec3.d.ts","sourceRoot":"","sources":["../../src/components/vec3.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE,wBAAgB,KAAK,CAAC,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,UAG1D;AAID,KAAK,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACV,CAAC;AAEF,UAAU,iBAAiB;IAC1B,MAAM,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB;AAYD,eAAO,MAAM,YAAY,gFAQtB,iBAAiB,4CAyGnB,CAAC"}

package/lib/components/vec3.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { FAIcon, InputSuffix, ValueInput, ValuesContainer } from './styled.js';
+import { useEffect, useRef, useState } from 'react';
+import { styled } from 'styled-components';
+export function round(number, decimalPlaces) {
+    const factor = Math.pow(10, decimalPlaces);
+    return Math.round(number * factor) / factor;
+}
+const Vector3Container = styled.div `
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	margin: 0;
+	font-size: 12px;
+`;
+export const Vector3Input = ({ vector, label = '', icon, multiplier = 1, precision = 2, onValidInput = () => { }, marginBottom = '0', }) => {
+    const [displayValues, setDisplayValues] = useState({
+        x: (vector.x / multiplier).toFixed(precision),
+        y: (vector.y / multiplier).toFixed(precision),
+        z: (vector.z / multiplier).toFixed(precision),
+    });
+    const actualValuesRef = useRef({
+        x: round(vector.x / multiplier, precision),
+        y: round(vector.y / multiplier, precision),
+        z: round(vector.z / multiplier, precision),
+    });
+    const animationFrameId = useRef(null);
+    // Sync display values with actual values (optimized)
+    const syncValues = () => {
+        const currentActualValues = {
+            x: round(vector.x / multiplier, precision),
+            y: round(vector.y / multiplier, precision),
+            z: round(vector.z / multiplier, precision),
+        };
+        const { x, y, z } = actualValuesRef.current;
+        // Only update state if actual values have changed
+        if (currentActualValues.x !== x ||
+            currentActualValues.y !== y ||
+            currentActualValues.z !== z) {
+            actualValuesRef.current = currentActualValues;
+            setDisplayValues({
+                x: currentActualValues.x.toFixed(precision),
+                y: currentActualValues.y.toFixed(precision),
+                z: currentActualValues.z.toFixed(precision),
+            });
+        }
+        // Schedule the next frame
+        animationFrameId.current = requestAnimationFrame(syncValues);
+    };
+    useEffect(() => {
+        // Start the synchronization loop
+        animationFrameId.current = requestAnimationFrame(syncValues);
+        return () => {
+            // Cleanup the animation frame on unmount
+            if (animationFrameId.current) {
+                cancelAnimationFrame(animationFrameId.current);
+            }
+        };
+    }, [vector, multiplier, precision]);
+    // Handle user input changes
+    const handleInputChange = (axis) => (event) => {
+        const newValue = event.target.value;
+        const parsedValue = parseFloat(newValue);
+        // Update display values immediately
+        setDisplayValues((prev) => ({ ...prev, [axis]: newValue }));
+        // If valid, update the actual values and the vector
+        if (!isNaN(parsedValue)) {
+            actualValuesRef.current[axis] = parsedValue;
+            vector[axis] = parsedValue * multiplier;
+            onValidInput();
+        }
+    };
+    return (_jsxs(Vector3Container, { style: { marginBottom }, children: [icon ? (_jsx(FAIcon, { icon: icon, style: { marginRight: '5px' } })) : (_jsx("span", { style: { marginRight: '5px' }, children: label })), _jsx(ValuesContainer, { children: ['x', 'y', 'z'].map((axis) => (_jsxs("div", { style: {
+                        position: 'relative',
+                        display: 'inline-block',
+                        height: '25px',
+                    }, children: [_jsx(ValueInput, { value: displayValues[axis], onChange: handleInputChange(axis), className: parseFloat(displayValues[axis]) !==
+                                actualValuesRef.current[axis]
+                                ? 'invalid'
+                                : undefined }), _jsx(InputSuffix, { children: axis.toUpperCase() })] }, `${label}-${axis}`))) })] }));
+};
+//# sourceMappingURL=vec3.js.map

package/lib/components/vec3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vec3.js","sourceRoot":"","sources":["../../src/components/vec3.tsx"],"names":[],"mappings":"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"}

package/lib/index.d.ts

@@ -4,19 +4,15 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { InputLayer } from './scene.js';
+import { VERSION } from './version.js';
 import { XRDevice } from 'iwer';
-declare const PRIVATE: unique symbol;
-type DevUIConfig = {
-    buttonPressDuration: number;
-};
-export declare const useDevUIConfig: () => DevUIConfig;
 export declare class DevUI {
-    [PRIVATE]: {
-        xrDevice: XRDevice;
-        inputLayer: InputLayer;
-    };
-    constructor(xrDevice: XRDevice, options?: Partial<DevUIConfig>);
+    private inputLayer;
+    devUIContainer: HTMLDivElement;
+    readonly version = "1.0.0";
+    constructor(xrDevice: XRDevice);
+    render(time: number): void;
+    get devUICanvas(): HTMLCanvasElement;
 }
-export {};
+export { VERSION };
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAQH,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AAGhC,QAAA,MAAM,OAAO,eAA+B,CAAC;AAE7C,KAAK,WAAW,GAAG;IAClB,mBAAmB,EAAE,MAAM,CAAC;CAC5B,CAAC;AAQF,eAAO,MAAM,cAAc,mBAE1B,CAAC;AAEF,qBAAa,KAAK;IACjB,CAAC,OAAO,CAAC,EAAE;QACV,QAAQ,EAAE,QAAQ,CAAC;QACnB,UAAU,EAAE,UAAU,CAAC;KACvB,CAAC;gBAEU,QAAQ,EAAE,QAAQ,EAAE,OAAO,GAAE,OAAO,CAAC,WAAW,CAAM;CAkClE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAUH,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AAGhC,qBAAa,KAAK;IACjB,OAAO,CAAC,UAAU,CAAa;IACxB,cAAc,EAAE,cAAc,CAAC;IACtC,SAAgB,OAAO,WAAW;gBAEtB,QAAQ,EAAE,QAAQ;IA4B9B,MAAM,CAAC,IAAI,EAAE,MAAM;IAInB,IAAI,WAAW,sBAEd;CACD;AAgID,OAAO,EAAE,OAAO,EAAE,CAAC"}