@orfium/ictinus 4.56.1 → 4.58.0

package/dist/components/Chip/Chip.js

@@ -82,7 +82,8 @@ var Chip = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       if (!disabled) {
         onClear();
       }
-    }
+    },
+    dataTestId: (0, _helpers.generateTestDataId)('chip-delete', dataTestId)
   })));
 
   if (styleType === 'read-only') {

package/dist/components/DatePicker/DatePicker.js

@@ -207,19 +207,17 @@ var DatePicker = function DatePicker(_ref) {
     onClick: onCancel
   }, (0, _react2.jsx)(_PositionInScreen["default"], {
     visible: isOpen,
-    parent: function parent() {
-      return (0, _react2.jsx)(_DatePickInput["default"], {
-        filterConfig: filterConfig,
-        isRangePicker: isRangePicker,
-        selectedDay: selectedRange,
-        inputProps: inputProps,
-        dateFormatOverride: dateFormatOverride,
-        handleFocus: handleFocus,
-        handleClear: handleClear,
-        isOpen: isOpen,
-        dataTestId: dataTestId
-      });
-    }
+    parent: (0, _react2.jsx)(_DatePickInput["default"], {
+      filterConfig: filterConfig,
+      isRangePicker: isRangePicker,
+      selectedDay: selectedRange,
+      inputProps: inputProps,
+      dateFormatOverride: dateFormatOverride,
+      handleFocus: handleFocus,
+      handleClear: handleClear,
+      isOpen: isOpen,
+      dataTestId: dataTestId
+    })
   }, (0, _react2.jsx)("div", {
     css: (0, _DatePicker.datePickerStyles)()
   }, (0, _react2.jsx)(_OverlayComponent["default"], {

package/dist/components/Select/Select.d.ts

@@ -21,8 +21,6 @@ export declare type Props = {
     defaultValue?: SelectOption;
     /** the value of the select if select is controlled */
     selectedOption?: SelectOption;
-    /** if the select has tags */
-    multi?: boolean;
     /** Options for the select dropdown */
     options: SelectOption[];
     /** if the component is used asynchronously */
@@ -41,8 +39,15 @@ export declare type Props = {
     isLoading?: boolean;
     /** if options list is virtualized */
     isVirtualized?: boolean;
-    /** A callback that's called when the user clicks the 'clear' icon */
+    /** A callback that's called when the user clicks the 'clear' icon of the (Single) Select, or the 'clear all' button of the MultiSelect */
     onClear?: () => void;
+    /** A callback that's called when the user clicks the 'clear' icon of a specific Chip in MultiSelect */
+    onOptionDelete?: (option: SelectOption) => void;
+    /** If true the user can select multiple options */
+    multi?: boolean;
+    /** The selected options in case of multiSelect */
+    /** @TODO merge selectedOption with selectedOptions in v5 */
+    selectedOptions?: SelectOption[];
 } & TextFieldProps;
 declare const Select: React.ForwardRefExoticComponent<{
     /** The function that is used to return the selected options */
@@ -52,8 +57,6 @@ declare const Select: React.ForwardRefExoticComponent<{
     defaultValue?: SelectOption | undefined;
     /** the value of the select if select is controlled */
     selectedOption?: SelectOption | undefined;
-    /** if the select has tags */
-    multi?: boolean | undefined;
     /** Options for the select dropdown */
     options: SelectOption[];
     /** if the component is used asynchronously */
@@ -72,8 +75,15 @@ declare const Select: React.ForwardRefExoticComponent<{
     isLoading?: boolean | undefined;
     /** if options list is virtualized */
     isVirtualized?: boolean | undefined;
-    /** A callback that's called when the user clicks the 'clear' icon */
+    /** A callback that's called when the user clicks the 'clear' icon of the (Single) Select, or the 'clear all' button of the MultiSelect */
     onClear?: (() => void) | undefined;
+    /** A callback that's called when the user clicks the 'clear' icon of a specific Chip in MultiSelect */
+    onOptionDelete?: ((option: SelectOption) => void) | undefined;
+    /** If true the user can select multiple options */
+    multi?: boolean | undefined;
+    /** The selected options in case of multiSelect */
+    /** @TODO merge selectedOption with selectedOptions in v5 */
+    selectedOptions?: SelectOption[] | undefined;
 } & {
     id?: string | undefined;
     onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;

package/dist/components/Select/Select.js

@@ -21,15 +21,21 @@ var _ClickAwayListener = _interopRequireDefault(require("../utils/ClickAwayListe
 
 var _handleSearch = _interopRequireDefault(require("../utils/handleSearch"));
 
+var _MultiselectTextField = _interopRequireDefault(require("./components/MultiselectTextField"));
+
 var _SelectMenu = _interopRequireDefault(require("./components/SelectMenu/SelectMenu"));
 
+var _useMultiselectUtils2 = _interopRequireDefault(require("./hooks/useMultiselectUtils"));
+
 var _Select = require("./Select.style");
 
 var _Loader = _interopRequireDefault(require("../Loader"));
 
+var _PositionInScreen = _interopRequireDefault(require("../utils/PositionInScreen"));
+
 var _react2 = require("@emotion/react");
 
-var _excluded = ["handleSelectedOption", "defaultValue", "selectedOption", "multi", "options", "isAsync", "isLoading", "asyncSearch", "status", "minCharactersToSearch", "highlightSearch", "isSearchable", "isVirtualized", "styleType", "disabled", "locked", "dataTestId", "onClear"];
+var _excluded = ["handleSelectedOption", "defaultValue", "selectedOption", "multi", "options", "isAsync", "isLoading", "asyncSearch", "status", "minCharactersToSearch", "highlightSearch", "isSearchable", "isVirtualized", "styleType", "disabled", "locked", "dataTestId", "onClear", "onOptionDelete", "selectedOptions"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -79,6 +85,9 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       locked = _ref.locked,
       dataTestId = _ref.dataTestId,
       onClear = _ref.onClear,
+      onOptionDelete = _ref.onOptionDelete,
+      _ref$selectedOptions = _ref.selectedOptions,
+      selectedOptions = _ref$selectedOptions === void 0 ? [] : _ref$selectedOptions,
       restInputProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var theme = (0, _useTheme["default"])();
@@ -90,8 +99,9 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var inputRef = _react["default"].useRef(null);
 
   var combinedRefs = (0, _useCombinedRefs["default"])(inputRef, ref);
+  var initialValue = defaultValue != null ? defaultValue : selectedOption;
 
-  var _React$useState2 = _react["default"].useState(defaultValue || selectedOption),
+  var _React$useState2 = _react["default"].useState(initialValue),
       inputValue = _React$useState2[0],
       setInputValue = _React$useState2[1];
 
@@ -99,12 +109,39 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       searchValue = _React$useState3[0],
       setSearchValue = _React$useState3[1];
 
+  var textFieldValue = searchValue || inputValue.label;
+
+  var _useMultiselectUtils = (0, _useMultiselectUtils2["default"])({
+    selectedOptions: selectedOptions,
+    options: options,
+    setOpen: setOpen,
+    setSearchValue: setSearchValue,
+    isSearchable: isSearchable,
+    onClear: onClear,
+    onOptionDelete: onOptionDelete,
+    multi: multi
+  }),
+      multiSelectedOptions = _useMultiselectUtils.multiSelectedOptions,
+      setMultiSelectedOpts = _useMultiselectUtils.setMultiSelectedOpts,
+      availableMultiSelectOptions = _useMultiselectUtils.availableMultiSelectOptions,
+      setAvailableMultiSelectOptions = _useMultiselectUtils.setAvailableMultiSelectOptions,
+      handleOptionDelete = _useMultiselectUtils.handleOptionDelete,
+      handleClearAllOptions = _useMultiselectUtils.handleClearAllOptions;
+
   (0, _react.useEffect)(function () {
-    setInputValue(defaultValue || selectedOption);
-  }, [defaultValue, selectedOption]);
+    setInputValue(initialValue);
+  }, [initialValue]);
 
   var handleOptionClick = function handleOptionClick(option) {
-    setInputValue(option);
+    if (multi) {
+      setMultiSelectedOpts([].concat(multiSelectedOptions, [option]));
+      setAvailableMultiSelectOptions(availableMultiSelectOptions.filter(function (opt) {
+        return opt.value !== option.value;
+      }));
+    } else {
+      setInputValue(option);
+    }
+
     setOpen(false);
 
     if (isSearchable) {
@@ -128,6 +165,14 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   }, 400), []);
 
   var handleOnInput = _react["default"].useCallback(function (event) {
+    /** 
+     * For Multiselect: [for now] when we select an option the SelectMenu closes but the user
+     * can still type on the input field (so they must be able to see the SelectMenu)
+     */
+    if (!open) {
+      setOpen(true);
+    }
+
     (0, _handleSearch["default"])({
       event: event,
       isSearchable: isSearchable,
@@ -136,14 +181,16 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       onChange: debouncedOnChange,
       minCharactersToSearch: minCharactersToSearch
     });
-  }, [debouncedOnChange, isAsync, isSearchable, minCharactersToSearch]);
+  }, [debouncedOnChange, isAsync, isSearchable, minCharactersToSearch, open]);
 
   var filteredOptions = (0, _react.useMemo)(function () {
+    var optionsToBeFiltered = multi ? availableMultiSelectOptions : options;
+
     if (isAsync) {
-      return options;
+      return optionsToBeFiltered;
     }
 
-    return options.filter(function (option) {
+    return optionsToBeFiltered.filter(function (option) {
       var _option$options;
 
       return !searchValue || option.label.toLowerCase().includes(searchValue.toLowerCase()) || !!((_option$options = option.options) != null && _option$options.find(function (option) {
@@ -158,7 +205,7 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
         })
       });
     });
-  }, [searchValue, options, isAsync]);
+  }, [isAsync, multi, availableMultiSelectOptions, options, searchValue]);
   var rightIconNameSelector = (0, _react.useMemo)(function () {
     if (isSearchable) {
       return searchValue || inputValue.value ? 'close' : 'search';
@@ -220,22 +267,41 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     css: (0, _Select.selectWrapper)({
       isSearchable: isSearchable
     })
-  }), (0, _react2.jsx)(_TextField["default"], _extends({
-    styleType: styleType,
-    rightIcon: rightIconRender,
-    onKeyDown: handleOnKeyDown,
-    onInput: handleOnInput,
-    onChange: ON_CHANGE_MOCK,
-    readOnly: !isSearchable,
-    disabled: disabled,
-    locked: locked,
-    dataTestId: (0, _helpers.generateTestDataId)('select-input', dataTestId)
-  }, restInputProps, {
-    status: status,
-    value: searchValue || inputValue.label,
-    ref: combinedRefs,
-    autoComplete: "off"
-  })), open && (0, _react2.jsx)(_SelectMenu["default"], {
+  }), (0, _react2.jsx)(_PositionInScreen["default"], {
+    visible: open,
+    hasWrapperWidth: true,
+    offsetY: 8,
+    parent: multi ? (0, _react2.jsx)(_MultiselectTextField["default"], _extends({
+      selectedOptions: multiSelectedOptions,
+      onInput: handleOnInput,
+      onOptionDelete: handleOptionDelete,
+      onClearAllOptions: handleClearAllOptions,
+      isLoading: isLoading,
+      disabled: disabled,
+      locked: locked,
+      readOnly: !isSearchable,
+      dataTestId: (0, _helpers.generateTestDataId)('select-input', dataTestId)
+    }, restInputProps, {
+      status: status,
+      value: textFieldValue,
+      autoComplete: "off"
+    })) : (0, _react2.jsx)(_TextField["default"], _extends({
+      styleType: styleType,
+      rightIcon: rightIconRender,
+      onKeyDown: handleOnKeyDown,
+      onInput: handleOnInput,
+      onChange: ON_CHANGE_MOCK,
+      readOnly: !isSearchable,
+      disabled: disabled,
+      locked: locked,
+      dataTestId: (0, _helpers.generateTestDataId)('select-input', dataTestId)
+    }, restInputProps, {
+      status: status,
+      value: textFieldValue,
+      ref: combinedRefs,
+      autoComplete: "off"
+    }))
+  }, (0, _react2.jsx)(_SelectMenu["default"], {
     filteredOptions: filteredOptions,
     handleOptionClick: handleOptionClick,
     selectedOption: inputValue.value,
@@ -244,7 +310,7 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     isLoading: isLoading,
     isVirtualized: isVirtualized,
     searchTerm: highlightSearch ? searchValue : undefined
-  })));
+  }))));
 });
 
 Select.displayName = 'Select';

package/dist/components/Select/components/MultiselectTextField/MultiselectTextField.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TestProps } from 'utils/types';
+import { SelectOption } from 'components/Select/Select';
+import { Props as TextFieldProps } from 'components/TextField/TextField';
+declare const MultiselectTextField: React.ForwardRefExoticComponent<{
+    /** the values of the MultiSelect if MultiSelect is controlled */
+    selectedOptions?: SelectOption[] | undefined;
+    /** Callback fired when the `input` value typed is changed */
+    onInput?: ((event: any) => void) | undefined;
+    /** Value of the `input` element */
+    value?: string | number | undefined;
+    /** Callback fired when the Delete button of each Chip is clicked */
+    onOptionDelete: (option?: SelectOption | undefined) => void;
+    /** Callback fired when the Delete button of the whole MultiSelect is clicked */
+    onClearAllOptions: () => void;
+    /** If the component is loading */
+    isLoading?: boolean | undefined;
+} & Omit<TextFieldProps, "size"> & Partial<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">> & TestProps & React.RefAttributes<HTMLInputElement>>;
+export default MultiselectTextField;

package/dist/components/Select/components/MultiselectTextField/MultiselectTextField.js

@@ -0,0 +1,186 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _useTheme = _interopRequireDefault(require("../../../../hooks/useTheme"));
+
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _helpers = require("../../../../utils/helpers");
+
+var _MultiselectTextField = require("./MultiselectTextField.style");
+
+var _Chip = _interopRequireDefault(require("../../../Chip"));
+
+var _Icon = _interopRequireDefault(require("../../../Icon"));
+
+var _Label = _interopRequireDefault(require("../../../Label"));
+
+var _Loader = _interopRequireDefault(require("../../../Loader"));
+
+var _TextInputBase = _interopRequireDefault(require("../../../TextInputBase"));
+
+var _TextInputBase2 = require("../../../TextInputBase/TextInputBase.style");
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["selectedOptions", "value", "disabled", "locked", "status", "lean", "dark", "readOnly", "label", "id", "placeholder", "required", "styleType", "onOptionDelete", "onClearAllOptions", "isLoading", "rightIcon"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var MultiselectTextField = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+  var selectedOptions = props.selectedOptions,
+      value = props.value,
+      disabled = props.disabled,
+      locked = props.locked,
+      status = props.status,
+      lean = props.lean,
+      dark = props.dark,
+      readOnly = props.readOnly,
+      label = props.label,
+      id = props.id,
+      placeholder = props.placeholder,
+      _props$required = props.required,
+      required = _props$required === void 0 ? false : _props$required,
+      styleType = props.styleType,
+      onOptionDelete = props.onOptionDelete,
+      onClearAllOptions = props.onClearAllOptions,
+      isLoading = props.isLoading,
+      rightIcon = props.rightIcon,
+      rest = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var TextfieldRef = _react["default"].useRef(null);
+
+  var theme = (0, _useTheme["default"])();
+  var hasValue = Boolean(value || (selectedOptions == null ? void 0 : selectedOptions.length) && (selectedOptions == null ? void 0 : selectedOptions.length) > 0);
+  var inputPlaceholder = (0, _react.useMemo)(function () {
+    if (!label && placeholder) {
+      return required ? placeholder + " *" : placeholder;
+    }
+
+    return label;
+  }, [label, placeholder, required]);
+  var iconName = (0, _react.useMemo)(function () {
+    if (locked) {
+      return 'lock';
+    }
+
+    if (hasValue) {
+      return 'close';
+    }
+
+    return 'search';
+  }, [hasValue, locked]);
+
+  var handleKeyDown = function handleKeyDown(event) {
+    if (value === '' && event.key === 'Backspace') {
+      onOptionDelete();
+    }
+  };
+
+  var chips = (0, _react.useMemo)(function () {
+    return (0, _react2.jsx)(_react["default"].Fragment, null, selectedOptions == null ? void 0 : selectedOptions.map(function (option, index) {
+      var _TextfieldRef$current;
+
+      return (0, _react2.jsx)("span", {
+        key: (0, _helpers.generateUniqueID)('chip' + index),
+        css: (0, _MultiselectTextField.chipStyle)()
+      }, (0, _react2.jsx)(_Chip["default"], {
+        onClear: !(locked || disabled) ? function () {
+          return onOptionDelete(option);
+        } : undefined,
+        fill: "lightGrey",
+        dataTestId: "chip_" + index
+      }, (0, _react2.jsx)("div", {
+        title: option.label,
+        css: (0, _MultiselectTextField.chipContent)({
+          maxWidth: (_TextfieldRef$current = TextfieldRef.current) == null ? void 0 : _TextfieldRef$current.getBoundingClientRect().width
+        })
+      }, option.label)));
+    }));
+  }, [disabled, locked, onOptionDelete, selectedOptions]);
+  var icon = (0, _react.useMemo)(function () {
+    if (rightIcon) {
+      if (typeof rightIcon === 'string') {
+        return (0, _react2.jsx)(_Icon["default"], {
+          name: rightIcon,
+          size: 20,
+          color: theme.utils.getColor('lightGrey', 650)
+        });
+      }
+
+      return rightIcon;
+    }
+
+    return (0, _react2.jsx)(_Icon["default"], {
+      size: 20,
+      name: iconName,
+      color: theme.utils.getColor('lightGrey', 650),
+      onClick: hasValue && !locked ? onClearAllOptions : undefined,
+      dataTestId: "select-right-icon"
+    });
+  }, [hasValue, iconName, locked, onClearAllOptions, rightIcon, theme.utils]);
+  return (0, _react2.jsx)("div", {
+    ref: TextfieldRef
+  }, (0, _react2.jsx)(_TextInputBase["default"], _extends({
+    disabled: disabled,
+    locked: locked,
+    status: status,
+    lean: lean,
+    size: 'md',
+    styleType: styleType
+  }, rest, {
+    sx: (0, _MultiselectTextField.textInputBaseOverrides)({
+      hasValue: hasValue,
+      isLoading: isLoading
+    })(theme)
+  }), (0, _react2.jsx)("div", {
+    css: (0, _MultiselectTextField.inputContainer)()
+  }, chips, (0, _react2.jsx)("input", _extends({
+    readOnly: readOnly,
+    onKeyDown: handleKeyDown,
+    css: (0, _TextInputBase2.inputStyle)({
+      size: 'md',
+      placeholder: placeholder,
+      label: label,
+      dark: dark,
+      lean: lean,
+      sx: (0, _MultiselectTextField.inputOverrides)()
+    }),
+    placeholder: inputPlaceholder,
+    required: required,
+    id: id,
+    disabled: disabled || locked
+  }, (0, _omit["default"])(rest, 'dataTestId'), {
+    value: value,
+    ref: ref
+  })), label && (0, _react2.jsx)(_Label["default"], {
+    size: 'md',
+    htmlFor: id,
+    label: label,
+    required: required,
+    animateToTop: hasValue,
+    error: status === 'error'
+  })), !disabled && (0, _react2.jsx)("div", {
+    css: (0, _MultiselectTextField.rightIconsContainer)()
+  }, isLoading && (0, _react2.jsx)(_Loader["default"], null), (0, _react2.jsx)("div", {
+    css: (0, _MultiselectTextField.rightIconStyles)({
+      isClickable: hasValue && !locked
+    })
+  }, icon))));
+});
+
+MultiselectTextField.displayName = 'MultiselectTextField';
+var _default = MultiselectTextField;
+exports["default"] = _default;

package/dist/components/Select/components/MultiselectTextField/MultiselectTextField.style.d.ts

@@ -0,0 +1,55 @@
+import { SerializedStyles } from '@emotion/react';
+import { Theme } from 'theme';
+export declare const chipContent: ({ maxWidth }: {
+    maxWidth?: number | undefined;
+}) => () => SerializedStyles;
+export declare const textFieldContainer: () => (theme: Theme) => SerializedStyles;
+export declare const rightIconsContainer: () => (theme: Theme) => SerializedStyles;
+export declare const rightIconStyles: ({ isClickable }: {
+    isClickable: boolean;
+}) => () => SerializedStyles;
+export declare const chipStyle: () => (theme: Theme) => SerializedStyles;
+export declare const inputContainer: () => (theme: Theme) => SerializedStyles;
+/** TextField overrides */
+export declare const textInputBaseOverrides: ({ hasValue, isLoading }: {
+    hasValue: boolean;
+    isLoading?: boolean | undefined;
+}) => (theme: Theme) => {
+    wrapper: {
+        label: {
+            fontWeight: any;
+            transform: string;
+            bottom: string;
+        };
+        height: string;
+        minHeight: string;
+    } | {
+        'input:focus': {
+            label: {
+                fontWeight: any;
+                transform: string;
+                bottom: string;
+            };
+        };
+        label: {
+            transform: string;
+        };
+        height: string;
+        minHeight: string;
+    };
+    textField: {
+        padding: string;
+    };
+};
+export declare const inputOverrides: () => {
+    input: {
+        top: string;
+        flex: string;
+        minWidth: string;
+        '&:focus, &:not(:placeholder-shown)': {
+            '& + label': {
+                transform: string;
+            };
+        };
+    };
+};