@norges-domstoler/dds-components 13.8.1 → 13.8.3

package/dist/components/Select/Select.js

@@ -1,204 +0,0 @@
-import { __rest } from 'tslib';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useId } from 'react';
-import ReactSelect, { components } from 'react-select';
-import { Icon, CheckIcon, CloseSmallIcon, ChevronDownIcon } from '@norges-domstoler/dds-icons';
-import { derivativeIdGenerator, searchFilter, spaceSeparatedIdListGenerator } from '@norges-domstoler/dds-core';
-import { prefix, getCustomStyles, Container, InnerSingleValue, StyledIcon } from './Select.styles.js';
-import { Label } from '@norges-domstoler/dds-typography';
-import { getFormInputIconSize } from '../../utils/icon.js';
-import { renderInputMessage } from '../../utils/renderInputMessage.js';
-
-var Option = components.Option,
-  NoOptionsMessage = components.NoOptionsMessage,
-  Input = components.Input,
-  SingleValue = components.SingleValue,
-  ClearIndicator = components.ClearIndicator,
-  DropdownIndicator = components.DropdownIndicator,
-  MultiValueRemove = components.MultiValueRemove,
-  Control = components.Control;
-var createSelectOptions = function createSelectOptions() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-  return args.map(function (v) {
-    return {
-      label: v,
-      value: v
-    };
-  });
-};
-var DDSOption = function DDSOption(props, componentSize) {
-  return jsxs(Option, Object.assign({}, props, {
-    children: [props.isSelected && jsx(Icon, {
-      icon: CheckIcon,
-      iconSize: getFormInputIconSize(componentSize)
-    }), props.children]
-  }));
-};
-var CustomOption = function CustomOption(props, Element) {
-  return jsx(Option, Object.assign({}, props, {
-    children: jsx(Element, Object.assign({}, props))
-  }));
-};
-var CustomSingleValue = function CustomSingleValue(props, id, Element) {
-  return jsx(SingleValue, Object.assign({}, props, {
-    children: jsx(InnerSingleValue, {
-      id: id,
-      children: Element ? jsx(Element, Object.assign({}, props)) : props.children
-    })
-  }));
-};
-var DDSNoOptionsMessage = function DDSNoOptionsMessage(props) {
-  return jsx(NoOptionsMessage, Object.assign({}, props, {
-    children: "Ingen treff"
-  }));
-};
-var DDSClearIndicator = function DDSClearIndicator(props, size) {
-  return jsx(ClearIndicator, Object.assign({}, props, {
-    children: jsx(Icon, {
-      icon: CloseSmallIcon,
-      iconSize: getFormInputIconSize(size)
-    })
-  }));
-};
-var DDSMultiValueRemove = function DDSMultiValueRemove(props) {
-  return jsx(MultiValueRemove, Object.assign({}, props, {
-    children: jsx(Icon, {
-      icon: CloseSmallIcon,
-      iconSize: "small"
-    })
-  }));
-};
-var DDSDropdownIndicator = function DDSDropdownIndicator(props, size) {
-  return jsx(DropdownIndicator, Object.assign({}, props, {
-    children: jsx(Icon, {
-      icon: ChevronDownIcon,
-      iconSize: getFormInputIconSize(size)
-    })
-  }));
-};
-var DDSInput = function DDSInput(props, ariaInvalid, ariaDescribedby) {
-  return jsx(Input, Object.assign({}, props, {
-    "aria-invalid": ariaInvalid,
-    "aria-describedby": ariaDescribedby
-  }));
-};
-var DDSControl = function DDSControl(props, componentSize, icon) {
-  return jsxs(Control, Object.assign({}, props, {
-    children: [icon && jsx(StyledIcon, {
-      icon: icon,
-      iconSize: getFormInputIconSize(componentSize)
-    }), props.children]
-  }));
-};
-var defaultWidth = '320px';
-var getPlaceholder = function getPlaceholder(placeholder, isMulti) {
-  return placeholder ? placeholder : isMulti ? '-- Velg en eller flere --' : '-- Velg fra listen --';
-};
-var SelectInner = function SelectInner(props, ref) {
-  var id = props.id,
-    label = props.label,
-    _props$componentSize = props.componentSize,
-    componentSize = _props$componentSize === void 0 ? 'medium' : _props$componentSize,
-    errorMessage = props.errorMessage,
-    tip = props.tip,
-    required = props.required,
-    ariaRequired = props['aria-required'],
-    readOnly = props.readOnly,
-    options = props.options,
-    isMulti = props.isMulti,
-    value = props.value,
-    icon = props.icon,
-    defaultValue = props.defaultValue,
-    _props$width = props.width,
-    width = _props$width === void 0 ? defaultWidth : _props$width,
-    closeMenuOnSelect = props.closeMenuOnSelect,
-    className = props.className,
-    style = props.style,
-    isDisabled = props.isDisabled,
-    _props$isClearable = props.isClearable,
-    isClearable = _props$isClearable === void 0 ? true : _props$isClearable,
-    placeholder = props.placeholder,
-    customOptionElement = props.customOptionElement,
-    customSingleValueElement = props.customSingleValueElement,
-    rest = __rest(props, ["id", "label", "componentSize", "errorMessage", "tip", "required", 'aria-required', "readOnly", "options", "isMulti", "value", "icon", "defaultValue", "width", "closeMenuOnSelect", "className", "style", "isDisabled", "isClearable", "placeholder", "customOptionElement", "customSingleValueElement"]);
-  var generatedId = useId();
-  var uniqueId = id !== null && id !== void 0 ? id : "".concat(generatedId, "-select");
-  var singleValueId = !isMulti ? "".concat(uniqueId, "-singleValue") : undefined;
-  var hasLabel = !!label;
-  var hasErrorMessage = !!errorMessage;
-  var showRequiredStyling = !!(required || ariaRequired);
-  var tipId = derivativeIdGenerator(uniqueId, 'tip');
-  var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage');
-  var containerProps = {
-    width: width,
-    componentSize: componentSize,
-    errorMessage: errorMessage,
-    isDisabled: isDisabled,
-    readOnly: readOnly,
-    isMulti: isMulti,
-    className: className,
-    style: style
-  };
-  var reactSelectProps = Object.assign({
-    options: options,
-    value: value,
-    defaultValue: defaultValue,
-    isDisabled: isDisabled || readOnly,
-    isClearable: isClearable,
-    placeholder: getPlaceholder(placeholder, isMulti),
-    closeMenuOnSelect: closeMenuOnSelect ? closeMenuOnSelect : isMulti ? false : true,
-    isMulti: isMulti,
-    inputId: uniqueId,
-    name: uniqueId,
-    classNamePrefix: prefix,
-    styles: getCustomStyles(),
-    filterOption: function filterOption(option, inputValue) {
-      var label = option.label;
-      return searchFilter(label, inputValue) || inputValue === '';
-    },
-    components: {
-      Option: customOptionElement ? function (props) {
-        return CustomOption(props, customOptionElement);
-      } : function (props) {
-        return DDSOption(props, componentSize);
-      },
-      NoOptionsMessage: DDSNoOptionsMessage,
-      Input: function Input(props) {
-        return DDSInput(Object.assign(Object.assign({}, props), {
-          'aria-required': ariaRequired
-        }), hasErrorMessage, spaceSeparatedIdListGenerator([singleValueId, tip ? tipId : undefined, errorMessage ? errorMessageId : undefined]));
-      },
-      SingleValue: function SingleValue(props) {
-        return CustomSingleValue(props, singleValueId, customSingleValueElement);
-      },
-      ClearIndicator: function ClearIndicator(props) {
-        return DDSClearIndicator(props, componentSize);
-      },
-      DropdownIndicator: function DropdownIndicator(props) {
-        return DDSDropdownIndicator(props, componentSize);
-      },
-      MultiValueRemove: DDSMultiValueRemove,
-      Control: function Control(props) {
-        return DDSControl(props, componentSize, icon);
-      }
-    },
-    'aria-invalid': hasErrorMessage ? true : undefined,
-    required: required
-  }, rest);
-  return jsxs(Container, Object.assign({}, containerProps, {
-    children: [hasLabel && jsx(Label, {
-      htmlFor: uniqueId,
-      showRequiredStyling: showRequiredStyling,
-      children: label
-    }), jsx(ReactSelect, Object.assign({}, reactSelectProps, {
-      ref: ref
-    })), renderInputMessage(tip, tipId, errorMessage, errorMessageId)]
-  }));
-};
-var Select = /*#__PURE__*/React.forwardRef(SelectInner);
-// @ts-expect-error TODO fix Select type
-Select.displayName = 'Select';
-
-export { Select, createSelectOptions };

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

@@ -1,71 +0,0 @@
-/// <reference types="react" />
-import { SelectOption, SelectProps } from '.';
-declare const _default: {
-    title: string;
-    component: <TOption extends Record<string, unknown>, IsMulti extends boolean = false>(props: SelectProps<TOption, IsMulti>, ref: ((instance: import("react-select").SelectInstance<TOption, IsMulti, import("react-select").GroupBase<TOption>> | null) => void) | import("react").MutableRefObject<import("react-select").SelectInstance<TOption, IsMulti, import("react-select").GroupBase<TOption>> | null> | null) => import("react/jsx-runtime").JSX.Element;
-    argTypes: {
-        label: {
-            control: {
-                type: string;
-            };
-        };
-        tip: {
-            control: {
-                type: string;
-            };
-        };
-        errorMessage: {
-            control: {
-                type: string;
-            };
-        };
-        width: {
-            control: {
-                type: string;
-            };
-        };
-        placeholder: {
-            control: {
-                type: string;
-            };
-        };
-        isDisabled: {
-            control: {
-                type: string;
-            };
-        };
-        isClearable: {
-            control: {
-                type: string;
-            };
-        };
-        required: {
-            control: {
-                type: string;
-            };
-        };
-        readOnly: {
-            control: {
-                type: string;
-            };
-        };
-        isLoading: {
-            control: {
-                type: string;
-            };
-        };
-    };
-    parameters: {
-        controls: {
-            exclude: string[];
-        };
-    };
-};
-export default _default;
-type SingleSelectProps = SelectProps<SelectOption, false>;
-export declare const Overview: (args: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
-export declare const OverviewSizes: (args: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Default: (args: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
-export declare const WithGroups: (args: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
-export declare const WithLabel: (args: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
-export declare const ManyItems: (args: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,18 +0,0 @@
-import { GroupBase, StylesConfig } from 'react-select';
-import { Property } from 'csstype';
-import { Icon } from '@norges-domstoler/dds-icons';
-import { InputSize } from '@norges-domstoler/dds-form';
-export declare const prefix = "dds-select";
-type StyledContainerProps = {
-    errorMessage?: string;
-    isDisabled?: boolean;
-    readOnly?: boolean;
-    width?: Property.Width;
-    componentSize: InputSize;
-    isMulti?: boolean;
-};
-export declare const Container: import("styled-components").StyledComponent<"div", any, StyledContainerProps, never>;
-export declare const InnerSingleValue: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
-export declare const getCustomStyles: <TOption>() => Partial<StylesConfig<TOption, boolean, GroupBase<TOption>>>;
-export {};

package/dist/components/Select/Select.styles.js

@@ -1,230 +0,0 @@
-import styled, { css } from 'styled-components';
-import { selection } from '@norges-domstoler/dds-core';
-import '../ScrollableContainer/Scrollbar.js';
-import '../ScrollableContainer/ScrollableContainer.js';
-import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
-import { typographyTypes, selectTokens } from './Select.tokens.js';
-import { Icon } from '@norges-domstoler/dds-icons';
-import { getFontStyling } from '@norges-domstoler/dds-typography';
-import { dangerInputfield, hoverDangerInputfield, focusInputfield, hoverInputfield } from '@norges-domstoler/dds-form';
-
-var _control = selectTokens.control,
-  _menu = selectTokens.menu,
-  _groupHeading = selectTokens.groupHeading,
-  _option = selectTokens.option,
-  _dropdownIndicator = selectTokens.dropdownIndicator,
-  _loadingIndicator = selectTokens.loadingIndicator,
-  _clearIndicator = selectTokens.clearIndicator,
-  _multiValue = selectTokens.multiValue,
-  _multiValueLabel = selectTokens.multiValueLabel,
-  _multiValueRemove = selectTokens.multiValueRemove,
-  _noOptionsMessage = selectTokens.noOptionsMessage,
-  _placeholder = selectTokens.placeholder,
-  icon = selectTokens.icon,
-  _valueContainer = selectTokens.valueContainer;
-var prefix = 'dds-select';
-function getContainerControlPadding(componentSize, isMulti) {
-  return isMulti ? _control.isMulti.sizes[componentSize].padding : _control.sizes[componentSize].padding;
-}
-var Container = styled.div.withConfig({
-  displayName: "Selectstyles__Container",
-  componentId: "sc-19jkd5s-0"
-})(["margin:0;width:", ";position:relative;*::selection{", "}", " ", " &:hover .", "__dropdown-indicator,&:focus-within .", "__dropdown-indicator{color:", ";}", ""], function (_ref) {
-  var width = _ref.width;
-  return width;
-}, selection, function (_ref2) {
-  var componentSize = _ref2.componentSize,
-    isMulti = _ref2.isMulti;
-  return css([".", "__control{padding:", ";", "}.", "__option{", "}.", "__placeholder{", "}.", "__menu-notice--no-options{", "}"], prefix, getContainerControlPadding(componentSize, isMulti), getFontStyling(typographyTypes.control[componentSize], true), prefix, getFontStyling(typographyTypes.option[componentSize], true), prefix, getFontStyling(typographyTypes.placeholder[componentSize]), prefix, getFontStyling(typographyTypes.noOptionsMessage[componentSize]));
-}, function (_ref3) {
-  var errorMessage = _ref3.errorMessage;
-  return errorMessage && css([".", "__control{", "}.", "__control:hover{", "}.", "__control:focus-within{", "}"], prefix, dangerInputfield, prefix, hoverDangerInputfield, prefix, focusInputfield);
-}, prefix, prefix, _dropdownIndicator.hover.color, function (_ref4) {
-  var isDisabled = _ref4.isDisabled,
-    readOnly = _ref4.readOnly;
-  return readOnly ? css([".", "__control{border-color:", ";background-color:", ";}.", "__dropdown-indicator,&:hover .", "__dropdown-indicator{color:", ";}"], prefix, _control.readOnly.borderColor, _control.readOnly.backgroundColor, prefix, prefix, _dropdownIndicator.readOnly.color) : isDisabled ? css(["cursor:not-allowed;.", "__control{border-color:", ";background-color:", ";}&:hover .", "__dropdown-indicator{color:", ";}"], prefix, _control.disabled.borderColor, _control.disabled.backgroundColor, prefix, _dropdownIndicator.base.color) : '';
-});
-var InnerSingleValue = styled.div.withConfig({
-  displayName: "Selectstyles__InnerSingleValue",
-  componentId: "sc-19jkd5s-1"
-})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;max-width:100%;"]);
-var StyledIcon = styled(Icon).withConfig({
-  displayName: "Selectstyles__StyledIcon",
-  componentId: "sc-19jkd5s-2"
-})(["margin-right:", ";"], icon.marginRight);
-var getCustomStyles = function getCustomStyles() {
-  return {
-    control: function control() {
-      return {
-        position: 'relative',
-        display: 'flex',
-        alignItems: 'center',
-        flexWrap: 'wrap',
-        borderRadius: _control.borderRadius,
-        border: _control.border,
-        borderColor: _control.borderColor,
-        backgroundColor: _control.backgroundColor,
-        transition: 'box-shadow 0.2s, border-color 0.2s',
-        '&:hover': Object.assign({}, hoverInputfield),
-        '&:focus-within': Object.assign({}, focusInputfield)
-      };
-    },
-    placeholder: function placeholder(provided) {
-      return Object.assign(Object.assign({}, provided), {
-        color: _placeholder.color,
-        margin: 0
-      });
-    },
-    input: function input(provided) {
-      return Object.assign(Object.assign({}, provided), {
-        margin: 0,
-        padding: 0
-      });
-    },
-    indicatorSeparator: function indicatorSeparator() {
-      return {};
-    },
-    dropdownIndicator: function dropdownIndicator(provided, state) {
-      return {
-        display: 'inline-flex',
-        transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : '',
-        '@media (prefers-reduced-motion: no-preference)': {
-          transition: 'color 0.2s, transform 0.2s'
-        },
-        padding: 0,
-        color: _dropdownIndicator.base.color
-      };
-    },
-    valueContainer: function valueContainer(provided, state) {
-      return Object.assign(Object.assign(Object.assign({}, provided), state.selectProps.isMulti && {
-        gap: _valueContainer.isMulti.gap
-      }), {
-        padding: 0
-      });
-    },
-    singleValue: function singleValue() {
-      return {
-        gridArea: '1/1/2/3',
-        overflow: 'hidden',
-        boxSizing: 'border-box'
-      };
-    },
-    multiValue: function multiValue() {
-      return {
-        boxSizing: 'border-box',
-        minWidth: 0,
-        display: 'flex',
-        borderRadius: _multiValue.borderRadius,
-        backgroundColor: selectTokens.multiValue.backgroundColor
-      };
-    },
-    multiValueLabel: function multiValueLabel(provided) {
-      return Object.assign(Object.assign(Object.assign(Object.assign({}, provided), {
-        padding: _multiValueLabel.padding
-      }), getFontStyling(typographyTypes.multiValueLabel)), {
-        color: _multiValueLabel.color
-      });
-    },
-    multiValueRemove: function multiValueRemove(provided, state) {
-      return state.selectProps.isDisabled ? {
-        display: 'none'
-      } : {
-        boxSizing: 'border-box',
-        display: 'flex',
-        alignItems: 'center',
-        '@media (prefers-reduced-motion: no-preference)': {
-          transition: 'color 0.2s, background-color 0.2s, box-shadow 0.2s'
-        },
-        color: _multiValueRemove.base.color,
-        padding: _multiValueRemove.base.padding,
-        borderTopRightRadius: _multiValueRemove.base.borderTopRightRadius,
-        borderBottomRightRadius: _multiValueRemove.base.borderBottomRightRadius,
-        '&:hover': {
-          boxShadow: _multiValueRemove.hover.boxShadow
-        }
-      };
-    },
-    menu: function menu(provided) {
-      return Object.assign(Object.assign({}, provided), {
-        zIndex: 100,
-        transition: '0.2s',
-        width: 'calc(100% + 2px)',
-        transform: 'translate(-1px)',
-        boxShadow: " 0 0 0 1px ".concat(_menu.borderColor),
-        border: _menu.border,
-        borderColor: _menu.borderColor,
-        backgroundColor: _menu.backgroundColor,
-        borderRadius: _menu.borderRadius,
-        marginTop: _menu.marginTop,
-        marginBottom: _menu.marginBottom
-      });
-    },
-    group: function group() {
-      return {
-        boxSizing: 'border-box'
-      };
-    },
-    groupHeading: function groupHeading() {
-      return Object.assign(Object.assign({}, getFontStyling(typographyTypes.groupHeading)), {
-        color: _groupHeading.color,
-        padding: _groupHeading.padding
-      });
-    },
-    menuList: function menuList() {
-      return Object.assign(Object.assign({
-        maxHeight: '300px',
-        overflowY: 'auto',
-        position: 'relative',
-        boxSizing: 'border-box'
-      }, scrollbarStyling.webkit), scrollbarStyling.firefox);
-    },
-    option: function option(provided, state) {
-      return Object.assign(Object.assign(Object.assign(Object.assign({}, provided), {
-        cursor: 'pointer',
-        display: 'flex',
-        alignItems: 'center',
-        gap: _option.base.gap,
-        padding: _option.base.padding,
-        backgroundColor: _option.base.backgroundColor,
-        '@media (prefers-reduced-motion: no-preference)': {
-          transition: 'color 0.2s, background-color 0.2s'
-        },
-        '&:hover': {
-          color: _option.hover.color,
-          backgroundColor: _option.hover.backgroundColor
-        }
-      }), state.isSelected && {
-        backgroundColor: _option.selected.backgroundColor
-      }), state.isFocused && {
-        color: _option.focus.color,
-        backgroundColor: _option.focus.backgroundColor
-      });
-    },
-    noOptionsMessage: function noOptionsMessage() {
-      return {
-        padding: _noOptionsMessage.padding,
-        color: _noOptionsMessage.color
-      };
-    },
-    clearIndicator: function clearIndicator() {
-      return {
-        display: 'inline-flex',
-        color: _clearIndicator.base.color,
-        '@media (prefers-reduced-motion: no-preference)': {
-          transition: 'color 0.2s'
-        },
-        '&:hover': {
-          color: _clearIndicator.hover.color
-        }
-      };
-    },
-    loadingIndicator: function loadingIndicator(provided) {
-      return Object.assign(Object.assign({}, provided), {
-        padding: 0,
-        color: _loadingIndicator.color
-      });
-    }
-  };
-};
-
-export { Container, InnerSingleValue, StyledIcon, getCustomStyles, prefix };

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

@@ -1,143 +0,0 @@
-import { InputSize, InputTypographyTypes } from '@norges-domstoler/dds-form';
-import { StaticTypographyType } from '@norges-domstoler/dds-typography';
-export declare const typographyTypes: {
-    control: InputTypographyTypes;
-    option: InputTypographyTypes;
-    placeholder: {
-        [k in InputSize]: StaticTypographyType;
-    };
-    noOptionsMessage: {
-        [k in InputSize]: StaticTypographyType;
-    };
-    groupHeading: StaticTypographyType;
-    multiValueLabel: StaticTypographyType;
-};
-export declare const selectTokens: {
-    control: {
-        borderRadius: string;
-        border: string;
-        borderColor: string;
-        backgroundColor: string;
-        color: string;
-        disabled: {
-            backgroundColor: string;
-            borderColor: string;
-        };
-        readOnly: {
-            borderColor: string;
-            backgroundColor: string;
-        };
-        isMulti: {
-            sizes: {
-                medium: {
-                    padding: string;
-                };
-                small: {
-                    padding: string;
-                };
-                tiny: {
-                    padding: string;
-                };
-            };
-        };
-        sizes: {
-            medium: {
-                padding: string;
-            };
-            small: {
-                padding: string;
-            };
-            tiny: {
-                padding: string;
-            };
-        };
-    };
-    dropdownIndicator: {
-        base: {
-            color: string;
-        };
-        hover: {
-            color: string;
-        };
-        readOnly: {
-            color: string;
-        };
-    };
-    placeholder: {
-        color: string;
-    };
-    menu: {
-        border: string;
-        borderColor: string;
-        backgroundColor: string;
-        borderRadius: string;
-        marginTop: string;
-        marginBottom: string;
-    };
-    groupHeading: {
-        color: string;
-        padding: string;
-    };
-    option: {
-        base: {
-            gap: string;
-            padding: string;
-            backgroundColor: string;
-        };
-        hover: {
-            color: string;
-            backgroundColor: string;
-        };
-        focus: {
-            color: string;
-            backgroundColor: string;
-        };
-        selected: {
-            backgroundColor: string;
-        };
-    };
-    valueContainer: {
-        isMulti: {
-            gap: string;
-        };
-    };
-    multiValue: {
-        borderRadius: string;
-        backgroundColor: string;
-    };
-    multiValueLabel: {
-        padding: string;
-        color: string;
-    };
-    multiValueRemove: {
-        base: {
-            color: string;
-            padding: string;
-            borderTopRightRadius: string;
-            borderBottomRightRadius: string;
-        };
-        hover: {
-            color: string;
-            backgroundColor: string;
-            boxShadow: string;
-        };
-    };
-    noOptionsMessage: {
-        padding: string;
-        color: string;
-    };
-    clearIndicator: {
-        base: {
-            color: string;
-        };
-        hover: {
-            color: string;
-        };
-    };
-    loadingIndicator: {
-        color: string;
-    };
-    icon: {
-        marginRight: string;
-    };
-};