jy-headless 0.1.1 → 0.1.5

package/dist/index.js

@@ -787,230 +787,14 @@ const Input = (_a) => {
                 (typeof error === 'string' ? (jsxRuntimeExports.jsx("span", { className: 'error-message', style: { position: 'absolute', top: '100%', left: 0 }, children: error })) : (error))] }));
 };
 
-const functionRow = [
-    [
-        { code: 'Escape', label: 'Esc', key: 'Escape' },
-        { code: null, label: '', key: '' },
-    ],
-    [
-        { code: 'F1', label: 'F1', key: 'F1' },
-        { code: 'F2', label: 'F2', key: 'F2' },
-        { code: 'F3', label: 'F3', key: 'F3' },
-        { code: 'F4', label: 'F4', key: 'F4' },
-        { code: null, label: '', key: '' },
-    ],
-    [
-        { code: 'F5', label: 'F5', key: 'F5' },
-        { code: 'F6', label: 'F6', key: 'F6' },
-        { code: 'F7', label: 'F7', key: 'F7' },
-        { code: 'F8', label: 'F8', key: 'F8' },
-        { code: null, label: '', key: '' },
-    ],
-    [
-        { code: 'F9', label: 'F9', key: 'F9' },
-        { code: 'F10', label: 'F10', key: 'F10' },
-        { code: 'F11', label: 'F11', key: 'F11' },
-        { code: 'F12', label: 'F12', key: 'F12' },
-        { code: null, label: '', key: '' },
-    ],
-    [
-        { code: 'PrintScreen', label: 'Print Screen', key: 'PrintScreen' },
-        { code: 'ScrollLock', label: 'Scroll Lock', key: 'ScrollLock' },
-        { code: 'Pause', label: 'Pause', key: 'Pause' },
-    ],
-];
-const numberRow = [
-    { code: 'Backquote', label: '~', shiftLabel: '¡', key: '`' },
-    { code: 'Digit1', label: '1', shiftLabel: '!', key: '1' },
-    { code: 'Digit2', label: '2', shiftLabel: '@', key: '2' },
-    { code: 'Digit3', label: '3', shiftLabel: '#', key: '3' },
-    { code: 'Digit4', label: '4', shiftLabel: '$', key: '4' },
-    { code: 'Digit5', label: '5', shiftLabel: '%', key: '5' },
-    { code: 'Digit6', label: '6', shiftLabel: '^', key: '6' },
-    { code: 'Digit7', label: '7', shiftLabel: '&', key: '7' },
-    { code: 'Digit8', label: '8', shiftLabel: '*', key: '8' },
-    { code: 'Digit9', label: '9', shiftLabel: '(', key: '9' },
-    { code: 'Digit0', label: '0', shiftLabel: ')', key: '0' },
-    { code: 'Minus', label: '-', shiftLabel: '_', key: '-' },
-    { code: 'Equal', label: '=', shiftLabel: '+', key: '=' },
-    { code: 'Backspace', label: 'Backspace', key: 'Backspace' },
-];
-const qwertyRow = [
-    { code: 'Tab', label: 'Tab', key: 'Tab' },
-    { code: 'KeyQ', label: 'q', shiftLabel: 'Q', kor: 'ㅂ', korShift: 'ㅃ', key: 'q' },
-    { code: 'KeyW', label: 'w', shiftLabel: 'W', kor: 'ㅈ', korShift: 'ㅉ', key: 'w' },
-    { code: 'KeyE', label: 'e', shiftLabel: 'E', kor: 'ㄷ', korShift: 'ㄸ', key: 'e' },
-    { code: 'KeyR', label: 'r', shiftLabel: 'R', kor: 'ㄱ', korShift: 'ㄲ', key: 'r' },
-    { code: 'KeyT', label: 't', shiftLabel: 'T', kor: 'ㅅ', korShift: 'ㅆ', key: 't' },
-    { code: 'KeyY', label: 'y', shiftLabel: 'Y', kor: 'ㅛ', korShift: 'ㅕ', key: 'y' },
-    { code: 'KeyU', label: 'u', shiftLabel: 'U', kor: 'ㅕ', korShift: 'ㅕ', key: 'u' },
-    { code: 'KeyI', label: 'i', shiftLabel: 'I', kor: 'ㅑ', korShift: 'ㅑ', key: 'i' },
-    { code: 'KeyO', label: 'o', shiftLabel: 'O', kor: 'ㅐ', korShift: 'ㅒ', key: 'o' },
-    { code: 'KeyP', label: 'p', shiftLabel: 'P', kor: 'ㅔ', korShift: 'ㅖ', key: 'p' },
-    { code: 'BracketLeft', label: '[', shiftLabel: '{', kor: null, korShift: null, key: '[' },
-    { code: 'BracketRight', label: ']', shiftLabel: '}', kor: null, korShift: null, key: ']' },
-    { code: 'Backslash', label: '\\', shiftLabel: '|', kor: null, korShift: null, key: '\\' },
-];
-const homeRow = [
-    { code: 'CapsLock', label: 'Caps Lock', kor: null, korShift: null, key: 'CapsLock' },
-    { code: 'KeyA', label: 'a', shiftLabel: 'A', kor: 'ㅁ', korShift: 'ㅁ', key: 'a' },
-    { code: 'KeyS', label: 's', shiftLabel: 'S', kor: 'ㄴ', korShift: 'ㄴ', key: 's' },
-    { code: 'KeyD', label: 'd', shiftLabel: 'D', kor: 'ㅇ', korShift: 'ㅇ', key: 'd' },
-    { code: 'KeyF', label: 'f', shiftLabel: 'F', kor: 'ㄹ', korShift: 'ㄹ', key: 'f' },
-    { code: 'KeyG', label: 'g', shiftLabel: 'G', kor: 'ㅎ', korShift: 'ㅎ', key: 'g' },
-    { code: 'KeyH', label: 'h', shiftLabel: 'H', kor: 'ㅗ', korShift: 'ㅗ', key: 'h' },
-    { code: 'KeyJ', label: 'j', shiftLabel: 'J', kor: 'ㅓ', korShift: 'ㅓ', key: 'j' },
-    { code: 'KeyK', label: 'k', shiftLabel: 'K', kor: 'ㅏ', korShift: 'ㅏ', key: 'k' },
-    { code: 'KeyL', label: 'l', shiftLabel: 'L', kor: 'ㅣ', korShift: 'ㅣ', key: 'l' },
-    { code: 'Semicolon', label: ';', shiftLabel: ':', kor: null, korShift: null, key: ';' },
-    { code: 'Quote', label: "'", shiftLabel: '"', kor: null, korShift: null, key: "'" },
-    { code: 'Enter', label: 'Enter', kor: null, korShift: null, key: 'Enter' },
-];
-const bottomRow = [
-    { code: 'ShiftLeft', label: 'Shift', kor: null, key: 'Shift' },
-    { code: 'KeyZ', label: 'z', shiftLabel: 'Z', kor: 'ㅋ', key: 'z' },
-    { code: 'KeyX', label: 'x', shiftLabel: 'X', kor: 'ㅌ', key: 'x' },
-    { code: 'KeyC', label: 'c', shiftLabel: 'C', kor: 'ㅊ', key: 'c' },
-    { code: 'KeyV', label: 'v', shiftLabel: 'V', kor: 'ㅍ', key: 'v' },
-    { code: 'KeyB', label: 'b', shiftLabel: 'B', kor: 'ㅠ', key: 'b' },
-    { code: 'KeyN', label: 'n', shiftLabel: 'N', kor: 'ㅜ', key: 'n' },
-    { code: 'KeyM', label: 'm', shiftLabel: 'M', kor: 'ㅡ', key: 'm' },
-    { code: 'Comma', label: ',', shiftLabel: '<', kor: null, key: ',' },
-    { code: 'Period', label: '.', shiftLabel: '>', kor: null, key: '.' },
-    { code: 'Slash', label: '/', shiftLabel: '?', kor: null, key: '/' },
-    { code: 'ShiftRight', label: 'Shift', kor: null, key: 'Shift' },
-];
-const spaceRow = [
-    { code: 'ControlLeft', label: 'Ctrl', key: 'Control' },
-    { code: 'MetaLeft', label: 'Win', key: 'Meta' },
-    { code: 'AltLeft', label: 'Alt', key: 'Alt' },
-    { code: 'Space', label: 'Space', key: ' ' },
-    { code: 'AltRight', label: 'Alt', key: 'Alt' },
-    { code: 'Fn', label: 'Fn', key: 'Fn' },
-    { code: 'ContextMenu', label: 'Menu', key: 'ContextMenu' },
-    { code: 'ControlRight', label: 'Ctrl', key: 'Control' },
-];
-const DesktopKeyboardInput = ({ type = 'full-size', hasFunction = true, hasNumpad = true, cellStyle = {}, cellClassName = '', activeCellStyle = {}, activeCellClassName = '', style = {}, className = '', onKeyDown, onKeyUp, }) => {
-    const [inputKey, setInputKey] = React.useState([]);
-    const [isShift, setIsShift] = React.useState(false);
-    const [isHangulMode, setIsHangulMode] = React.useState(false);
-    const getKeyFromEvent = (keyCode) => {
-        var _a, _b;
-        let row = null;
-        const allRows = [
-            ...functionRow.flat(),
-            ...numberRow,
-            ...qwertyRow,
-            ...homeRow,
-            ...bottomRow,
-            ...spaceRow,
-        ];
-        row = allRows.find((row) => row.code === keyCode);
-        return {
-            code: (_a = row.code) !== null && _a !== undefined ? _a : '',
-            label: (_b = getLabel(row)) !== null && _b !== undefined ? _b : '',
-        };
-    };
-    const getLabel = (key) => {
-        if (isHangulMode) {
-            if (isShift) {
-                return key.korShift || key.kor || key.shiftLabel || key.label;
-            }
-            return key.kor || key.label;
-        }
-        if (isShift) {
-            return key.shiftLabel || key.label;
-        }
-        return key.label;
-    };
-    React.useEffect(() => {
-        const keyDown = (e) => {
-            e.preventDefault();
-            setInputKey((prevState) => [...prevState, e.code]);
-            if (e.key === 'Shift')
-                setIsShift(true);
-            onKeyDown === null || onKeyDown === undefined ? undefined : onKeyDown(getKeyFromEvent(e.code));
-        };
-        const keyUp = (e) => {
-            e.preventDefault();
-            if (e.key === 'HangulMode') {
-                setIsHangulMode((prev) => !prev);
-            }
-            setInputKey((prevState) => prevState.filter((it) => it !== e.code));
-            if (e.key === 'Shift')
-                setIsShift(false);
-            onKeyUp === null || onKeyUp === undefined ? undefined : onKeyUp(getKeyFromEvent(e.code));
-        };
-        window.addEventListener('keydown', keyDown);
-        window.addEventListener('keyup', keyUp);
-        return () => {
-            window.removeEventListener('keydown', keyDown);
-            window.removeEventListener('keyup', keyUp);
-        };
-    }, [onKeyDown, onKeyUp, isShift, isHangulMode]);
-    const renderRow = (row, rowType) => {
-        const getCellStyle = (key) => {
-            var _a;
-            if (key.code === null)
-                return;
-            const isActive = inputKey.map((it) => it === null || it === undefined ? undefined : it.toUpperCase()).includes((_a = key.code) === null || _a === undefined ? undefined : _a.toUpperCase()) ||
-                (inputKey.includes('HangulMode') && key.code === 'AltRight');
-            let gridColumn = '';
-            switch (key.code) {
-                case 'Space':
-                    gridColumn = '4/12';
-                    break;
-                case 'ShiftRight':
-                    gridColumn = '13/15';
-                    break;
-                case 'Backspace':
-                    gridColumn = '14/16';
-                    break;
-                case 'Tab':
-                case 'ShiftLeft':
-                case 'CapsLock':
-                    gridColumn = '1/3';
-                    break;
-                case 'Backslash':
-                    gridColumn = '15/17';
-                    break;
-                case 'Enter':
-                    gridColumn = '14/16';
-                    break;
-            }
-            return {
-                style: Object.assign({ gridColumn }, (isActive ? activeCellStyle : cellStyle)),
-                className: isActive ? activeCellClassName : cellClassName,
-            };
-        };
-        const onMouseDown = (key) => {
-            if (!key.code)
-                return;
-            setInputKey([key.code]);
-            if (['ShiftRight', 'ShiftLeft'].includes(key.code))
-                setIsShift(true);
-            onKeyDown === null || onKeyDown === undefined ? undefined : onKeyDown(getKeyFromEvent(key.code));
-        };
-        const onMouseUp = (key) => {
-            if (!key.code)
-                return;
-            if (key.code === 'AltRight') {
-                setIsHangulMode((prev) => !prev);
-            }
-            setInputKey((prevState) => prevState.filter((it) => it !== key.code));
-            if (['ShiftRight', 'ShiftLeft'].includes(key.code))
-                setIsShift(false);
-            onKeyUp === null || onKeyUp === undefined ? undefined : onKeyUp(getKeyFromEvent(key.code));
-        };
-        return row.map((key, idx) => (jsxRuntimeExports.jsx("div", Object.assign({ onMouseDown: () => onMouseDown(key), onMouseUp: () => onMouseUp(key) }, getCellStyle(key), { children: getLabel(key) }), `${key.code}-${idx}`)));
-    };
-    return (jsxRuntimeExports.jsxs("div", { style: style, className: className, children: [['full-size', 'tenkeyless'].includes(type) && hasFunction && (jsxRuntimeExports.jsx("div", { style: { display: 'grid', gridTemplateColumns: `repeat(20, 1fr)`, gap: '2px' }, children: renderRow(functionRow.flat()) })), jsxRuntimeExports.jsx("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(15, 1fr)', gap: '2px' }, children: renderRow(numberRow) }), jsxRuntimeExports.jsx("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(16, 1fr)', gap: '2px' }, children: renderRow(qwertyRow) }), jsxRuntimeExports.jsx("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(15, 1fr)', gap: '2px' }, children: renderRow(homeRow) }), jsxRuntimeExports.jsx("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(14, 1fr)', gap: '2px' }, children: renderRow(bottomRow) }), jsxRuntimeExports.jsx("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(15, 1fr)', gap: '2px' }, children: renderRow(spaceRow) })] }));
+const generateHash = () => {
+    return Math.random().toString(36).substr(2, 9) + Date.now().toString(36);
 };
 
 const RadioInput = (_a) => {
     var { clearable = false, children = '', checked = false, onChange, onToggle, style, className, id, defaultChecked, readOnly, showError = false, error = null } = _a, restProps = __rest(_a, ["clearable", "children", "checked", "onChange", "onToggle", "style", "className", "id", "defaultChecked", "readOnly", "showError", "error"]);
     const [selected, setSelected] = React.useState(checked || false);
-    const uniqueId = React.useMemo(() => id || `radio-${crypto.randomUUID()}`, [id]);
+    const uniqueId = React.useMemo(() => id || `radio-${generateHash()}`, [id]);
     React.useEffect(() => {
         setSelected(checked || false);
     }, [checked]);
@@ -1066,7 +850,7 @@ const RadioGroup = ({ title, style, className, children, value = [], onChange, c
 };
 const RadioGroupItem = (_a) => {
     var { selectedValues, onToggle, clearable, readOnly, disabled } = _a, restProps = __rest(_a, ["selectedValues", "onToggle", "clearable", "readOnly", "disabled"]);
-    const uniqueId = React.useMemo(() => { var _a; return (_a = restProps.id) !== null && _a !== undefined ? _a : `radio-${crypto.randomUUID()}`; }, [restProps.id]);
+    const uniqueId = React.useMemo(() => { var _a; return (_a = restProps.id) !== null && _a !== undefined ? _a : `radio-${generateHash()}`; }, [restProps.id]);
     return (jsxRuntimeExports.jsx(RadioInput, Object.assign({}, restProps, { clearable: clearable, readOnly: readOnly, disabled: disabled, id: uniqueId, checked: selectedValues === null || selectedValues === undefined ? undefined : selectedValues.includes(uniqueId), onToggle: (e) => {
             if (readOnly || disabled)
                 return;
@@ -1131,8 +915,8 @@ const TabItem = (_a) => {
 };
 Tab.Item = TabItem;
 
-const DownArrowIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill = 'none', }) => {
-    return (jsxRuntimeExports.jsxs("svg", { "data-testid": 'down-arrow-icon', width: size, height: size, fill: color, style: { backgroundColor: bgColor }, viewBox: "0 0 24 24", transform: "matrix(1, 0, 0, -1, 0, 0)", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntimeExports.jsx("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_iconCarrier", children: jsxRuntimeExports.jsx("path", { d: "M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19z" }) })] }));
+const DownArrowIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill = 'none', style, }) => {
+    return (jsxRuntimeExports.jsxs("svg", { "data-testid": 'down-arrow-icon', width: size, height: size, fill: color, style: Object.assign({ backgroundColor: bgColor }, style), viewBox: "0 0 24 24", transform: "matrix(1, 0, 0, -1, 0, 0)", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntimeExports.jsx("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_iconCarrier", children: jsxRuntimeExports.jsx("path", { d: "M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19z" }) })] }));
 };
 
 const Accordion = (_a) => {
@@ -1201,34 +985,63 @@ const DropdownItem = (_a) => {
 };
 Dropdown.Item = DropdownItem;
 
-const CloseIcon = ({ color = '#000', size = '1em', bgColor = 'transparent' }) => {
-    return (jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", width: size, height: size, fill: "none", style: { backgroundColor: bgColor }, xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntimeExports.jsx("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_iconCarrier", children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z", fill: color }) })] }));
+const ImagePlusIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill = 'none', style, }) => {
+    return (jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", width: size, height: size, fill: fill, style: Object.assign({ backgroundColor: bgColor }, style), xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntimeExports.jsx("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_iconCarrier", children: jsxRuntimeExports.jsx("path", { d: "M14.2647 15.9377L12.5473 14.2346C11.758 13.4519 11.3633 13.0605 10.9089 12.9137C10.5092 12.7845 10.079 12.7845 9.67922 12.9137C9.22485 13.0605 8.83017 13.4519 8.04082 14.2346L4.04193 18.2622M14.2647 15.9377L14.606 15.5991C15.412 14.7999 15.8149 14.4003 16.2773 14.2545C16.6839 14.1262 17.1208 14.1312 17.5244 14.2688C17.9832 14.4253 18.3769 14.834 19.1642 15.6515L20 16.5001M14.2647 15.9377L18.22 19.9628M18.22 19.9628C17.8703 20 17.4213 20 16.8 20H7.2C6.07989 20 5.51984 20 5.09202 19.782C4.7157 19.5903 4.40973 19.2843 4.21799 18.908C4.12583 18.7271 4.07264 18.5226 4.04193 18.2622M18.22 19.9628C18.5007 19.9329 18.7175 19.8791 18.908 19.782C19.2843 19.5903 19.5903 19.2843 19.782 18.908C20 18.4802 20 17.9201 20 16.8V13M11 4H7.2C6.07989 4 5.51984 4 5.09202 4.21799C4.7157 4.40973 4.40973 4.71569 4.21799 5.09202C4 5.51984 4 6.0799 4 7.2V16.8C4 17.4466 4 17.9066 4.04193 18.2622M18 9V6M18 6V3M18 6H21M18 6H15", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })] }));
+};
+
+const ImageInput = ({ id = generateHash(), preview, defaultElement = (jsxRuntimeExports.jsx(ImagePlusIcon, { style: { borderRadius: '10px' }, bgColor: '#cecece', color: '#919191', size: '120px' })), onFileChange, onChange, style, className, children, }) => {
+    const onFileInput = (e) => {
+        var _a;
+        const file = (_a = e.target.files) === null || _a === undefined ? undefined : _a[0];
+        const reader = new FileReader();
+        if (file) {
+            reader.onload = (fileEvent) => {
+                var _a;
+                if (fileEvent) {
+                    onFileChange((_a = fileEvent.target) === null || _a === undefined ? undefined : _a.result);
+                    reader.readAsDataURL(file);
+                }
+            };
+        }
+        onChange === null || onChange === undefined ? undefined : onChange(e);
+    };
+    return (jsxRuntimeExports.jsxs("span", { "data-testid": 'image-input-wrapper', children: [jsxRuntimeExports.jsx("label", { htmlFor: id, children: preview ? (jsxRuntimeExports.jsx("span", { "data-testid": 'image-input-preview', style: Object.assign({ display: 'inline-block', background: `url(${preview}) no-repeat center/cover` }, style), className: className, children: children })) : (defaultElement) }), jsxRuntimeExports.jsx("input", { id: id, "data-testid": 'image-input', type: "file", style: { display: 'none' }, accept: 'image/*', onChange: onFileInput })] }));
+};
+
+const CloseIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', style }) => {
+    return (jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", width: size, height: size, fill: "none", style: Object.assign({ backgroundColor: bgColor }, style), xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntimeExports.jsx("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_iconCarrier", children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z", fill: color }) })] }));
+};
+
+const CallIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill = 'none', style, }) => {
+    return (jsxRuntimeExports.jsxs("svg", { viewBox: "0 -0.5 25 25", width: size, height: size, fill: fill, style: Object.assign({ backgroundColor: bgColor }, style), xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntimeExports.jsx("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_iconCarrier", children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.36343 6.36195C7.24343 5.43495 7.55443 5.17495 7.92943 5.05395C8.18895 4.98595 8.46112 4.98217 8.72243 5.04295C9.06643 5.14295 9.15743 5.21895 10.2854 6.34295C11.2764 7.32995 11.3754 7.43695 11.4704 7.62995C11.6521 7.96873 11.6805 8.36894 11.5484 8.72995C11.4484 9.00495 11.3064 9.18695 10.7054 9.78995L10.3134 10.183C10.2105 10.2876 10.1863 10.4464 10.2534 10.577C11.1244 12.0628 12.36 13.3019 13.8434 14.177C14.0142 14.2684 14.2245 14.2389 14.3634 14.104L14.7404 13.733C14.9734 13.4941 15.2202 13.2691 15.4794 13.059C15.8866 12.809 16.3939 12.7867 16.8214 13C17.0304 13.1 17.0994 13.162 18.1214 14.182C19.1754 15.233 19.2054 15.266 19.3214 15.507C19.5397 15.9059 19.5374 16.3891 19.3154 16.786C19.2024 17.01 19.1334 17.091 18.5404 17.697C18.1824 18.063 17.8454 18.397 17.7914 18.446C17.3022 18.851 16.6746 19.0497 16.0414 19C14.883 18.8944 13.7617 18.5363 12.7564 17.951C10.5296 16.7711 8.63383 15.0521 7.24243 12.951C6.93937 12.5112 6.66994 12.0492 6.43643 11.569C5.81001 10.4953 5.48653 9.27189 5.50043 8.02895C5.54825 7.37871 5.86008 6.77637 6.36343 6.36195Z", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }));
 };
 
-const CallIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill = 'none', }) => {
-    return (jsxRuntimeExports.jsxs("svg", { viewBox: "0 -0.5 25 25", width: size, height: size, fill: fill, style: { backgroundColor: bgColor }, xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntimeExports.jsx("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_iconCarrier", children: jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.36343 6.36195C7.24343 5.43495 7.55443 5.17495 7.92943 5.05395C8.18895 4.98595 8.46112 4.98217 8.72243 5.04295C9.06643 5.14295 9.15743 5.21895 10.2854 6.34295C11.2764 7.32995 11.3754 7.43695 11.4704 7.62995C11.6521 7.96873 11.6805 8.36894 11.5484 8.72995C11.4484 9.00495 11.3064 9.18695 10.7054 9.78995L10.3134 10.183C10.2105 10.2876 10.1863 10.4464 10.2534 10.577C11.1244 12.0628 12.36 13.3019 13.8434 14.177C14.0142 14.2684 14.2245 14.2389 14.3634 14.104L14.7404 13.733C14.9734 13.4941 15.2202 13.2691 15.4794 13.059C15.8866 12.809 16.3939 12.7867 16.8214 13C17.0304 13.1 17.0994 13.162 18.1214 14.182C19.1754 15.233 19.2054 15.266 19.3214 15.507C19.5397 15.9059 19.5374 16.3891 19.3154 16.786C19.2024 17.01 19.1334 17.091 18.5404 17.697C18.1824 18.063 17.8454 18.397 17.7914 18.446C17.3022 18.851 16.6746 19.0497 16.0414 19C14.883 18.8944 13.7617 18.5363 12.7564 17.951C10.5296 16.7711 8.63383 15.0521 7.24243 12.951C6.93937 12.5112 6.66994 12.0492 6.43643 11.569C5.81001 10.4953 5.48653 9.27189 5.50043 8.02895C5.54825 7.37871 5.86008 6.77637 6.36343 6.36195Z", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }));
+const HomeIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill = 'none', style, }) => {
+    return (jsxRuntimeExports.jsxs("svg", { viewBox: "0 -0.5 25 25", width: size, height: size, fill: fill, style: Object.assign({ backgroundColor: bgColor }, style), xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntimeExports.jsx("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntimeExports.jsxs("g", { id: "SVGRepo_iconCarrier", children: [jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.867 15.8321L18.873 10.0391L14.75 5.92908C13.5057 4.69031 11.4942 4.69031 10.25 5.92908L6.13599 10.0291V15.8291C6.1393 17.5833 7.56377 19.0028 9.31799 19.0001H15.685C17.438 19.0029 18.862 17.5851 18.867 15.8321Z", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntimeExports.jsx("path", { d: "M19.624 6.01807C19.624 5.60385 19.2882 5.26807 18.874 5.26807C18.4598 5.26807 18.124 5.60385 18.124 6.01807H19.624ZM18.874 10.0391H18.124C18.124 10.2384 18.2033 10.4295 18.3445 10.5702L18.874 10.0391ZM19.9705 12.1912C20.2638 12.4837 20.7387 12.4829 21.0311 12.1896C21.3236 11.8962 21.3229 11.4214 21.0295 11.1289L19.9705 12.1912ZM6.66552 10.5602C6.95886 10.2678 6.95959 9.79289 6.66714 9.49955C6.3747 9.20621 5.89982 9.20548 5.60648 9.49793L6.66552 10.5602ZM3.97048 11.1289C3.67714 11.4214 3.67641 11.8962 3.96886 12.1896C4.2613 12.4829 4.73618 12.4837 5.02952 12.1912L3.97048 11.1289ZM13.75 19.0001C13.75 19.4143 14.0858 19.7501 14.5 19.7501C14.9142 19.7501 15.25 19.4143 15.25 19.0001H13.75ZM9.75 19.0001C9.75 19.4143 10.0858 19.7501 10.5 19.7501C10.9142 19.7501 11.25 19.4143 11.25 19.0001H9.75ZM18.124 6.01807V10.0391H19.624V6.01807H18.124ZM18.3445 10.5702L19.9705 12.1912L21.0295 11.1289L19.4035 9.50792L18.3445 10.5702ZM5.60648 9.49793L3.97048 11.1289L5.02952 12.1912L6.66552 10.5602L5.60648 9.49793ZM15.25 19.0001V17.2201H13.75V19.0001H15.25ZM15.25 17.2201C15.25 15.7013 14.0188 14.4701 12.5 14.4701V15.9701C13.1904 15.9701 13.75 16.5297 13.75 17.2201H15.25ZM12.5 14.4701C10.9812 14.4701 9.75 15.7013 9.75 17.2201H11.25C11.25 16.5297 11.8096 15.9701 12.5 15.9701V14.4701ZM9.75 17.2201V19.0001H11.25V17.2201H9.75Z", fill: color })] })] }));
 };
 
-const HomeIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill = 'none', }) => {
-    return (jsxRuntimeExports.jsxs("svg", { viewBox: "0 -0.5 25 25", width: size, height: size, fill: fill, style: { backgroundColor: bgColor }, xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntimeExports.jsx("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntimeExports.jsxs("g", { id: "SVGRepo_iconCarrier", children: [jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.867 15.8321L18.873 10.0391L14.75 5.92908C13.5057 4.69031 11.4942 4.69031 10.25 5.92908L6.13599 10.0291V15.8291C6.1393 17.5833 7.56377 19.0028 9.31799 19.0001H15.685C17.438 19.0029 18.862 17.5851 18.867 15.8321Z", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntimeExports.jsx("path", { d: "M19.624 6.01807C19.624 5.60385 19.2882 5.26807 18.874 5.26807C18.4598 5.26807 18.124 5.60385 18.124 6.01807H19.624ZM18.874 10.0391H18.124C18.124 10.2384 18.2033 10.4295 18.3445 10.5702L18.874 10.0391ZM19.9705 12.1912C20.2638 12.4837 20.7387 12.4829 21.0311 12.1896C21.3236 11.8962 21.3229 11.4214 21.0295 11.1289L19.9705 12.1912ZM6.66552 10.5602C6.95886 10.2678 6.95959 9.79289 6.66714 9.49955C6.3747 9.20621 5.89982 9.20548 5.60648 9.49793L6.66552 10.5602ZM3.97048 11.1289C3.67714 11.4214 3.67641 11.8962 3.96886 12.1896C4.2613 12.4829 4.73618 12.4837 5.02952 12.1912L3.97048 11.1289ZM13.75 19.0001C13.75 19.4143 14.0858 19.7501 14.5 19.7501C14.9142 19.7501 15.25 19.4143 15.25 19.0001H13.75ZM9.75 19.0001C9.75 19.4143 10.0858 19.7501 10.5 19.7501C10.9142 19.7501 11.25 19.4143 11.25 19.0001H9.75ZM18.124 6.01807V10.0391H19.624V6.01807H18.124ZM18.3445 10.5702L19.9705 12.1912L21.0295 11.1289L19.4035 9.50792L18.3445 10.5702ZM5.60648 9.49793L3.97048 11.1289L5.02952 12.1912L6.66552 10.5602L5.60648 9.49793ZM15.25 19.0001V17.2201H13.75V19.0001H15.25ZM15.25 17.2201C15.25 15.7013 14.0188 14.4701 12.5 14.4701V15.9701C13.1904 15.9701 13.75 16.5297 13.75 17.2201H15.25ZM12.5 14.4701C10.9812 14.4701 9.75 15.7013 9.75 17.2201H11.25C11.25 16.5297 11.8096 15.9701 12.5 15.9701V14.4701ZM9.75 17.2201V19.0001H11.25V17.2201H9.75Z", fill: color })] })] }));
+const SearchIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill = 'none', style, }) => {
+    return (jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", width: size, height: size, fill: fill, style: Object.assign({ backgroundColor: bgColor }, style), xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntimeExports.jsx("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_iconCarrier", children: jsxRuntimeExports.jsx("g", { id: "Interface / Search_Magnifying_Glass", children: jsxRuntimeExports.jsx("path", { id: "Vector", d: "M15 15L21 21M10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17Z", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }));
 };
 
-const SearchIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill = 'none', }) => {
-    return (jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", width: size, height: size, fill: fill, style: { backgroundColor: bgColor }, xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntimeExports.jsx("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_iconCarrier", children: jsxRuntimeExports.jsx("g", { id: "Interface / Search_Magnifying_Glass", children: jsxRuntimeExports.jsx("path", { id: "Vector", d: "M15 15L21 21M10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17Z", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }));
+const UpArrowIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill = 'none', style, }) => {
+    return (jsxRuntimeExports.jsxs("svg", { width: size, height: size, fill: color, style: Object.assign({ backgroundColor: bgColor }, style), viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntimeExports.jsx("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_iconCarrier", children: jsxRuntimeExports.jsx("path", { d: "M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19z" }) })] }));
 };
 
-const UpArrowIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill = 'none', }) => {
-    return (jsxRuntimeExports.jsxs("svg", { width: size, height: size, fill: color, style: { backgroundColor: bgColor }, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntimeExports.jsx("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_iconCarrier", children: jsxRuntimeExports.jsx("path", { d: "M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19z" }) })] }));
+const ImageIcon = ({ color = '#000', size = '1em', bgColor = 'transparent', fill = 'none', style, }) => {
+    return (jsxRuntimeExports.jsxs("svg", { width: size, height: size, fill: fill, style: Object.assign({ backgroundColor: bgColor }, style), viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntimeExports.jsx("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntimeExports.jsx("g", { id: "SVGRepo_iconCarrier", children: jsxRuntimeExports.jsx("path", { d: "M14.2639 15.9375L12.5958 14.2834C11.7909 13.4851 11.3884 13.086 10.9266 12.9401C10.5204 12.8118 10.0838 12.8165 9.68048 12.9536C9.22188 13.1095 8.82814 13.5172 8.04068 14.3326L4.04409 18.2801M14.2639 15.9375L14.6053 15.599C15.4112 14.7998 15.8141 14.4002 16.2765 14.2543C16.6831 14.126 17.12 14.1311 17.5236 14.2687C17.9824 14.4251 18.3761 14.8339 19.1634 15.6514L20 16.4934M14.2639 15.9375L18.275 19.9565M18.275 19.9565C17.9176 20 17.4543 20 16.8 20H7.2C6.07989 20 5.51984 20 5.09202 19.782C4.71569 19.5903 4.40973 19.2843 4.21799 18.908C4.12796 18.7313 4.07512 18.5321 4.04409 18.2801M18.275 19.9565C18.5293 19.9256 18.7301 19.8727 18.908 19.782C19.2843 19.5903 19.5903 19.2843 19.782 18.908C20 18.4802 20 17.9201 20 16.8V16.4934M4.04409 18.2801C4 17.9221 4 17.4575 4 16.8V7.2C4 6.0799 4 5.51984 4.21799 5.09202C4.40973 4.71569 4.71569 4.40973 5.09202 4.21799C5.51984 4 6.07989 4 7.2 4H16.8C17.9201 4 18.4802 4 18.908 4.21799C19.2843 4.40973 19.5903 4.71569 19.782 5.09202C20 5.51984 20 6.0799 20 7.2V16.4934M17 8.99989C17 10.1045 16.1046 10.9999 15 10.9999C13.8954 10.9999 13 10.1045 13 8.99989C13 7.89532 13.8954 6.99989 15 6.99989C16.1046 6.99989 17 7.89532 17 8.99989Z", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })] }));
 };
 
 exports.Accordion = Accordion;
 exports.Button = Button;
 exports.CallIcon = CallIcon;
 exports.CloseIcon = CloseIcon;
-exports.DesktopKeyboardInput = DesktopKeyboardInput;
 exports.DownArrowIcon = DownArrowIcon;
 exports.Dropdown = Dropdown;
 exports.HomeIcon = HomeIcon;
+exports.ImageIcon = ImageIcon;
+exports.ImageInput = ImageInput;
+exports.ImagePlusIcon = ImagePlusIcon;
 exports.Input = Input;
 exports.Modal = Modal;
 exports.RadioGroup = RadioGroup;
@@ -1237,4 +1050,5 @@ exports.SearchIcon = SearchIcon;
 exports.Spinner = Spinner;
 exports.Tab = Tab;
 exports.UpArrowIcon = UpArrowIcon;
+exports.generateHash = generateHash;
 //# sourceMappingURL=index.js.map