@trilogy-ds/react 0.0.1-beta.9 → 0.0.1-fix-timepicker

package/lib/components/select/Select.native.js

@@ -1,11 +1,10 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
-import { Text, TextLevels } from '../text';
-import { Icon, IconName, IconSize } from '../icon';
-import { Picker } from '@react-native-picker/picker';
-import { getColorStyle, TrilogyColor, TypographyColor } from '../../objects';
-import { ComponentName } from '../enumsComponentsName';
-import { Modal } from '../modal';
+import { __assign, __read, __rest, __spreadArray } from "tslib";
+import { ComponentName } from '../../components/enumsComponentsName';
+import Input from '../../components/input/Input.native';
+import { Modal, ModalBody } from '../../components/modal';
+import React, { useCallback, useEffect, useState } from 'react';
+import { Pressable, View } from 'react-native';
+import SelectOption from './option';
 /**
  * Select Component
  * @param id {string} Select id
@@ -14,78 +13,122 @@ import { Modal } from '../modal';
  * @param children {React.ReactNode} Children for Select
  * @param label {string} label for select
  * @param iconName {IconName} icon for left of selector
- * @param placeholder {string} Select Placeholder
+ * @param onChange {Function} onChange Event
+ * @param disabled {boolean} disable Select
+ * @param multiple {boolean} select multiple options
+ * @param nullable {boolean} Unselect Select Option Item
  */
-const Select = ({ children, name, id, selected, label, iconName, onChange, placeholder, disabled, ...others }) => {
-    const [selectedValue, setSelectedValue] = useState(selected || '');
-    const [display, setDisplay] = useState(false);
-    useEffect(() => {
-        setSelectedValue(selected || '');
+var Select = React.forwardRef(function (_a, ref) {
+    var children = _a.children, id = _a.id, selected = _a.selected, iconName = _a.iconName, onChange = _a.onChange, disabled = _a.disabled, multiple = _a.multiple, onBlur = _a.onBlur, status = _a.status, readOnly = _a.readOnly, others = __rest(_a, ["children", "id", "selected", "iconName", "onChange", "disabled", "multiple", "onBlur", "status", "readOnly"]);
+    var _b = __read(useState(selected), 2), selectedValues = _b[0], setSelectedValues = _b[1];
+    var _c = __read(React.useState([]), 2), selectedNames = _c[0], setSelectedNames = _c[1];
+    var _d = __read(useState(false), 2), display = _d[0], setDisplay = _d[1];
+    var reactId = React.useId();
+    useEffect(function () {
+        var _a;
+        var labelSelected = (_a = React.Children.map(children, function (child) {
+            if (!React.isValidElement(child))
+                return false;
+            var label = child.props.children || child.props.label;
+            switch (true) {
+                case (Array.isArray(selected) && selected.includes(child.props.value)) ||
+                    (!Array.isArray(selected) && child.props.value === selected):
+                    return label;
+                default:
+                    return false;
+            }
+        })) === null || _a === void 0 ? void 0 : _a.filter(function (item) { return item; });
+        labelSelected && setSelectedNames(labelSelected);
+        setSelectedValues(selected);
     }, [selected]);
-    const styles = StyleSheet.create({
-        select: {
-            width: '100%',
-            backgroundColor: getColorStyle(disabled ? TrilogyColor.GREY_LIGHT : TrilogyColor.WHITE),
-            borderColor: getColorStyle(disabled ? TrilogyColor.GREY_LIGHT : TrilogyColor.GREY),
-            borderWidth: 1,
-            borderRadius: 4,
-            zIndex: 3,
-            overflow: 'hidden',
-            flexDirection: 'row',
-            alignItems: 'center',
-            height: 50,
-        },
-        iconLeft: {
-            left: 10,
-            color: getColorStyle(TrilogyColor.TERTIARY),
-            paddingRight: 8,
-            paddingLeft: 8,
-            marginRight: 25,
-        },
-        text: {
-            fontSize: 16,
-            lineHeight: 20,
-            color: getColorStyle(disabled ? TrilogyColor.GREY_DARK : TrilogyColor.TERTIARY),
-        },
-    });
-    const selectedOptionName = useMemo(() => {
-        const selectedChild = React.Children.toArray(children).find((child) => {
-            return React.isValidElement(child) && (child.props.value === selected || child.props.selected === true);
-        });
-        if (React.isValidElement(selectedChild))
-            return selectedChild.props.children || selectedChild.props.label;
-        return undefined;
-    }, [selectedValue, children]);
-    if (Platform.OS === 'ios') {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(TouchableOpacity, { onPress: () => setDisplay((prev) => !prev), style: styles.select },
-                iconName && (React.createElement(View, null,
-                    React.createElement(Icon, { name: iconName, size: IconSize.SMALL, color: disabled ? TrilogyColor.GREY_DARK : TrilogyColor.TERTIARY, style: styles.iconLeft }))),
-                React.createElement(View, { style: { width: '75%' } },
-                    label && (React.createElement(Text, { level: selectedOptionName && TextLevels.THREE, typo: [TypographyColor.TEXT_GREY_DARK], style: { fontSize: selectedOptionName ? undefined : 16, lineHeight: 20 } }, label)),
-                    selectedOptionName && (React.createElement(Text, { style: { ...styles.text }, numberOfLines: 1 }, selectedOptionName))),
-                React.createElement(View, { style: {
-                        marginLeft: 'auto',
-                        paddingRight: 10,
-                    } },
-                    React.createElement(Icon, { name: IconName.ARROW_DOWN, size: IconSize.SMALL, color: disabled ? TrilogyColor.GREY_DARK : TrilogyColor.TERTIARY }))),
-            React.createElement(Modal, { active: display, onClose: () => setDisplay(false), bottom: true, closeIcon: true, swipable: false },
-                React.createElement(Picker, { itemStyle: { color: getColorStyle(TrilogyColor.TERTIARY) }, style: { width: '100%' }, nativeID: `${`${id}_${name}`}`, selectedValue: selectedValue, onValueChange: (itemValue) => {
-                        if (onChange)
-                            onChange(itemValue);
-                        setSelectedValue(itemValue);
+    var handleOpenCloseModal = useCallback(function () {
+        !disabled && !readOnly && setDisplay(function (prev) { return !prev; });
+    }, [disabled, readOnly]);
+    var isChecked = useCallback(function (value) {
+        return multiple && selectedValues && typeof selectedValues !== 'string' && typeof selectedValues !== 'number'
+            ? selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(value)
+            : selectedValues === value;
+    }, [multiple, selectedValues]);
+    var setNewSelectedValues = useCallback(function (_a) {
+        var isChecked = _a.isChecked, children = _a.children, label = _a.label, value = _a.value;
+        var selectedOptions = [];
+        if (isChecked) {
+            setSelectedValues(function (prev) {
+                switch (true) {
+                    case Array.isArray(prev):
+                        setSelectedNames(function (prev) { return prev.filter(function (txt) { return ![children, label].includes(txt); }); });
+                        var opts = prev.filter(function (item) { return item !== value; });
+                        selectedOptions.push.apply(selectedOptions, __spreadArray([], __read(opts), false));
+                        return opts;
+                    case !Array.isArray(prev):
                         setDisplay(false);
-                    }, ...others }, children))));
-    }
-    return (React.createElement(View, { style: styles.select },
-        React.createElement(Picker, { placeholder: placeholder, selectedValue: selectedValue, style: { width: '100%', height: '100%' }, onValueChange: (itemValue) => {
-                if (onChange) {
-                    onChange(itemValue);
+                        setSelectedNames([]);
+                        return undefined;
+                    default:
+                        return value;
+                }
+            });
+        }
+        if (!isChecked) {
+            setSelectedValues(function (prev) {
+                if (Array.isArray(prev)) {
+                    var opts = __spreadArray(__spreadArray([], __read(prev), false), [value], false);
+                    selectedOptions.push.apply(selectedOptions, __spreadArray([], __read(opts), false));
+                    return opts;
                 }
-                setSelectedValue(itemValue);
+                selectedOptions.push(value);
+                return value;
+            });
+            setSelectedNames(function (prev) {
+                if (multiple)
+                    return __spreadArray(__spreadArray([], __read(prev), false), [children || label], false);
                 setDisplay(false);
-            }, mode: 'dialog' }, children)));
-};
+                return [children || label];
+            });
+        }
+        return selectedOptions;
+    }, [multiple]);
+    var options = React.useMemo(function () {
+        return React.Children.map(children, function (child, index) {
+            if (!React.isValidElement(child))
+                return null;
+            var clickEventValue = function (v) {
+                switch (true) {
+                    case (multiple && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(child.props.value))) ||
+                        (!multiple && selectedValues === child.props.value):
+                        return undefined;
+                    default:
+                        return v;
+                }
+            };
+            var props = __assign(__assign({}, child.props), { checked: isChecked(child.props.value), onClick: function () {
+                    if (child.props.disabled)
+                        return;
+                    var opts = setNewSelectedValues({
+                        children: child.props.children,
+                        label: child.props.label,
+                        value: child.props.value,
+                        isChecked: isChecked(child.props.value),
+                    });
+                    onChange &&
+                        onChange({
+                            selectValue: clickEventValue(child.props.value),
+                            selectName: clickEventValue(child.props.children || child.props.label),
+                            selectId: clickEventValue(child.props.id),
+                            name: clickEventValue(child.props.children || child.props.label),
+                            selectedOptions: opts,
+                        });
+                    if (child.props.onClick)
+                        child.props.onClick();
+                } });
+            return React.createElement(SelectOption, __assign({}, props, { key: "".concat(reactId, "_").concat(index) }));
+        });
+    }, [multiple, selectedValues, children]);
+    return (React.createElement(Modal, { active: display, onClose: handleOpenCloseModal, trigger: React.createElement(Pressable, { onPress: handleOpenCloseModal },
+            React.createElement(Input, __assign({ status: status, ref: ref, onBlur: onBlur, onIconClick: handleOpenCloseModal, disabled: disabled, iconNameLeft: iconName, iconNameRight: display ? 'tri-arrow-up' : 'tri-arrow-down', value: selectedNames.join(', '), defaultValue: selectedNames.join(', ') }, { editable: false, pointerEvents: 'none', id: id }, others))) },
+        React.createElement(ModalBody, null,
+            React.createElement(View, { style: { paddingBottom: 20 } }, options))));
+});
 Select.displayName = ComponentName.Select;
 export default Select;
-//# sourceMappingURL=Select.native.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0Lm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc2VsZWN0L1NlbGVjdC5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxLQUFLLE1BQU0saUNBQWlDLENBQUE7QUFDbkQsT0FBTyxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQTtBQUNyRCxPQUFPLEtBQUssRUFBRSxFQUFFLFdBQVcsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQy9ELE9BQU8sRUFBRSxTQUFTLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRTlDLE9BQU8sWUFBWSxNQUFNLFVBQVUsQ0FBQTtBQUVuQzs7Ozs7Ozs7Ozs7O0dBWUc7QUFDSCxJQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUM3QixVQUNFLEVBQXVHLEVBQ3ZHLEdBQUc7SUFERCxJQUFBLFFBQVEsY0FBQSxFQUFFLEVBQUUsUUFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLE1BQU0sWUFBQSxFQUFFLE1BQU0sWUFBQSxFQUFFLFFBQVEsY0FBQSxFQUFLLE1BQU0sY0FBckcsOEdBQXVHLENBQUY7SUFHL0YsSUFBQSxLQUFBLE9BQXNDLFFBQVEsQ0FBZ0IsUUFBUSxDQUFDLElBQUEsRUFBdEUsY0FBYyxRQUFBLEVBQUUsaUJBQWlCLFFBQXFDLENBQUE7SUFDdkUsSUFBQSxLQUFBLE9BQW9DLEtBQUssQ0FBQyxRQUFRLENBQVcsRUFBRSxDQUFDLElBQUEsRUFBL0QsYUFBYSxRQUFBLEVBQUUsZ0JBQWdCLFFBQWdDLENBQUE7SUFDaEUsSUFBQSxLQUFBLE9BQXdCLFFBQVEsQ0FB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

package/lib/components/select/SelectChangeEventDefaults.js

@@ -0,0 +1,41 @@
+export default {
+  "target": {
+    "type": "string",
+    "values": []
+  },
+  "selectValue": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "selectName": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "selectId": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "name": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "selectedOptions": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string[]"
+    ]
+  }
+};

package/lib/components/select/SelectChangeEventNativeDefaults.js

@@ -0,0 +1,37 @@
+export default {
+  "selectValue": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "selectName": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "selectId": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "name": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "selectedOptions": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string[]"
+    ]
+  }
+};

package/lib/components/select/SelectEnum.d.ts

@@ -0,0 +1,5 @@
+export declare enum SelectStatus {
+    SUCCESS = "success",
+    ERROR = "error"
+}
+export type SelectStatusValues = `${SelectStatus}`;

package/lib/components/select/SelectEnum.js

@@ -0,0 +1,6 @@
+export var SelectStatus;
+(function (SelectStatus) {
+    SelectStatus["SUCCESS"] = "success";
+    SelectStatus["ERROR"] = "error";
+})(SelectStatus || (SelectStatus = {}));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0RW51bS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc2VsZWN0L1NlbGVjdEVudW0udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFBTSxDQUFOLElBQVksWUFHWDtBQUhELFdBQVksWUFBWTtJQUN0QixtQ0FBbUIsQ0FBQTtJQUNuQiwrQkFBZSxDQUFBO0FBQ2pCLENBQUMsRUFIVyxZQUFZLEtBQVosWUFBWSxRQUd2QiJ9

package/lib/components/select/SelectNativePropsDefaults.js

@@ -0,0 +1,224 @@
+export default {
+  "onChange": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "SelectNativeChangeEventHandler<T>"
+    ]
+  },
+  "accessibilityLabel": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "testId": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "onFocus": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "ParamEventSelectFocus) => void"
+    ]
+  },
+  "onBlur": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "FocusEventHandler<HTMLSelectElement>",
+      "(event: unknown) => void"
+    ]
+  },
+  "label": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "children": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "null",
+      "string",
+      "number",
+      "false",
+      "true",
+      "JSXElementConstructor<any>>",
+      "ReactNode>",
+      "ReactPortal"
+    ]
+  },
+  "disabled": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "iconName": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "tri-alert",
+      "tri-arrow-down",
+      "tri-arrow-left",
+      "tri-arrow-right",
+      "tri-arrow-up",
+      "tri-arrow-high",
+      "tri-bell",
+      "tri-calendar",
+      "tri-check-circle",
+      "tri-check",
+      "tri-exclamation-circle",
+      "tri-eye-slash",
+      "tri-eye",
+      "tri-file-attached",
+      "tri-infos-circle",
+      "tri-micro",
+      "tri-search",
+      "tri-times",
+      "tri-trash",
+      "tri-picto-faciliti",
+      "tri-picto-handicapzero",
+      "tri-picto-la-fibre",
+      "tri-picto-payment-americanexpress",
+      "tri-picto-payment-cb",
+      "tri-picto-payment-mastercard",
+      "tri-picto-payment-paypal",
+      "tri-picto-payment-visa",
+      "tri-paperclip",
+      "tri-clock",
+      "tri-alert",
+      "tri-arrow-down",
+      "tri-arrow-left",
+      "tri-arrow-right",
+      "tri-arrow-up",
+      "tri-arrow-high",
+      "tri-bell",
+      "tri-calendar",
+      "tri-check-circle",
+      "tri-check",
+      "tri-exclamation-circle",
+      "tri-eye-slash",
+      "tri-eye",
+      "tri-file-attached",
+      "tri-infos-circle",
+      "tri-micro",
+      "tri-search",
+      "tri-times",
+      "tri-trash",
+      "tri-picto-faciliti",
+      "tri-picto-handicapzero",
+      "tri-picto-la-fibre",
+      "tri-picto-payment-americanexpress",
+      "tri-picto-payment-cb",
+      "tri-picto-payment-mastercard",
+      "tri-picto-payment-paypal",
+      "tri-picto-payment-visa",
+      "tri-paperclip",
+      "tri-clock"
+    ]
+  },
+  "selected": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string",
+      "number",
+      "string[]"
+    ]
+  },
+  "name": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "multiple": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "placeholder": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "custom": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "status": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "success",
+      "error",
+      "success",
+      "error"
+    ]
+  },
+  "required": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "sample": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "help": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "readOnly": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  }
+};

package/lib/components/select/SelectProps.d.ts

@@ -1,46 +1,52 @@
 /// <reference types="react" />
+import { TextInput } from 'react-native';
+import { Accessibility, Dev } from '../../objects';
+import { CommonProps } from '../../objects/facets/CommonProps';
 import { IconName, IconNameValues } from '../icon';
-import { Accessibility } from '../../objects';
+import { SelectStatus, SelectStatusValues } from './SelectEnum';
 export interface ISelectOption {
     value: string | undefined;
     name: string | undefined;
     id: string | undefined;
 }
-export interface SelectChangeEvent {
+export interface SelectChangeEventNative {
     selectValue?: string;
     selectName?: string;
     selectId?: string;
     name?: string;
+    selectedOptions?: string[];
 }
-export type SelectChangeEventHandler<T = SelectChangeEvent | number | string> = (event: T) => void;
-interface ISelectCommunProps<T = SelectChangeEvent | number | string> {
-    onChange?: SelectChangeEventHandler<T>;
-    onFocus?: (event: React.FocusEvent | React.BaseSyntheticEvent) => void;
-    onBlur?: (event: React.FocusEvent | React.BaseSyntheticEvent | MouseEvent) => void;
+export interface SelectChangeEvent extends SelectChangeEventNative {
+    target: EventTarget & HTMLSelectElement;
+}
+export type SelectChangeEventHandler<T = SelectChangeEvent> = (event: T) => void;
+export type SelectNativeChangeEventHandler<T = SelectChangeEventNative> = (event: T) => void;
+export type SelectedValue = string | number | string[] | undefined;
+export type ParamEventSelectFocus = React.FocusEvent | React.BaseSyntheticEvent;
+export type SelectRef = HTMLSelectElement | HTMLInputElement;
+export type SelectNativeRef = TextInput;
+interface Props {
+    onFocus?: (event: ParamEventSelectFocus) => void;
+    onBlur?: React.FocusEventHandler<HTMLSelectElement> | ((event: unknown) => void);
     label?: string;
     children?: React.ReactNode;
     disabled?: boolean;
     iconName?: IconName | IconNameValues;
-    selected?: string | number;
-    styled?: boolean;
-    id?: string;
+    selected?: SelectedValue;
     name?: string;
-}
-export interface SelectProps extends Accessibility, ISelectCommunProps {
-    className?: string;
-    classNameOptions?: string;
-    nullable?: boolean;
-    onMouseEnter?: (event: React.MouseEvent) => void;
-    onMouseLeave?: (event: React.MouseEvent) => void;
+    multiple?: boolean;
     placeholder?: string;
-    native?: boolean;
+    custom?: boolean;
+    status?: SelectStatus | SelectStatusValues;
+    required?: boolean;
+    sample?: string;
+    help?: string;
+    readOnly?: boolean;
 }
-export interface IAccessibleSelect extends Accessibility, ISelectCommunProps {
-    selecteClasses?: string;
+export interface SelectProps<T = SelectChangeEvent> extends Accessibility, Dev, CommonProps, Props {
+    onChange?: SelectChangeEventHandler<T>;
 }
-export interface ICustomSelect extends Accessibility, ISelectCommunProps {
-    selecteClasses?: string;
-    nullable?: boolean;
-    classNameOptions?: string;
+export interface SelectNativeProps<T = SelectChangeEventNative> extends Accessibility, Dev, CommonProps, Props {
+    onChange?: SelectNativeChangeEventHandler<T>;
 }
 export {};

package/lib/components/select/SelectProps.js

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=SelectProps.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0UHJvcHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3NlbGVjdC9TZWxlY3RQcm9wcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIn0=