@vitality-ds/components 4.15.0 → 5.0.3

package/dist/Box/index.js

@@ -10,7 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _empties = require("../helpers/logic/empties");
 var _styled = require("./styled");
-var _excluded = ["width", "height", "position", "maxWidth", "minWidth", "maxHeight", "minHeight", "htmlTag", "css", "shouldShrink", "shouldGrow", "gridSpans", "top", "right", "bottom", "left", "inset", "children"];
+var _excluded = ["width", "height", "position", "maxWidth", "minWidth", "maxHeight", "minHeight", "htmlTag", "css", "style", "shouldShrink", "shouldGrow", "gridSpans", "top", "right", "bottom", "left", "inset", "children"];
 function Box(_ref) {
   var width = _ref.width,
     height = _ref.height,
@@ -21,6 +21,7 @@ function Box(_ref) {
     minHeight = _ref.minHeight,
     htmlTag = _ref.htmlTag,
     css = _ref.css,
+    style = _ref.style,
     _ref$shouldShrink = _ref.shouldShrink,
     shouldShrink = _ref$shouldShrink === void 0 ? true : _ref$shouldShrink,
     shouldGrow = _ref.shouldGrow,

package/dist/Flex/index.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _styled = require("./styled");
-var _excluded = ["width", "height", "position", "maxWidth", "minWidth", "maxHeight", "minHeight", "htmlTag", "direction", "spacing", "align", "justify", "wrap"];
+var _excluded = ["width", "height", "position", "maxWidth", "minWidth", "maxHeight", "minHeight", "htmlTag", "direction", "spacing", "align", "justify", "wrap", "css", "style"];
 function Flex(_ref) {
   var width = _ref.width,
     height = _ref.height,
@@ -29,6 +29,8 @@ function Flex(_ref) {
     justify = _ref$justify === void 0 ? "start" : _ref$justify,
     _ref$wrap = _ref.wrap,
     wrap = _ref$wrap === void 0 ? "noWrap" : _ref$wrap,
+    css = _ref.css,
+    style = _ref.style,
     restProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_styled.BaseFlex, (0, _extends2["default"])({
     spacing: spacing,

package/dist/Input/Select/CreateableSelect/index.js

@@ -13,7 +13,7 @@ var _creatable = _interopRequireDefault(require("react-select/creatable"));
 var _useGetCustomComponents = _interopRequireDefault(require("../hooks/useGetCustomComponents"));
 var _useMenuPositionProps = _interopRequireDefault(require("../hooks/useMenuPositionProps"));
 var _logic = require("../logic");
-var _excluded = ["css", "asChild", "as", "style", "className", "options", "name", "onChange", "id", "disabled", "hasError", "onCreateOption", "value", "hideDropdownIndicator", "isMulti", "openMenuOnClick", "renderOption", "menuPlacement", "menuPosition", "portalMenu"];
+var _excluded = ["css", "asChild", "as", "style", "className", "options", "name", "onChange", "id", "disabled", "hasError", "onCreateOption", "value", "hideDropdownIndicator", "isMulti", "openMenuOnClick", "renderOption", "menuPlacement", "menuPosition", "portalMenu", "icon"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var CreatableSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardedRef) {
   var css = _ref.css,
@@ -40,6 +40,7 @@ var CreatableSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     menuPosition = _ref$menuPosition === void 0 ? "absolute" : _ref$menuPosition,
     _ref$portalMenu = _ref.portalMenu,
     portalMenu = _ref$portalMenu === void 0 ? false : _ref$portalMenu,
+    icon = _ref.icon,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var disabledOptions = function disabledOptions(option) {
     return option.disabled;
@@ -74,7 +75,8 @@ var CreatableSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     components: customComponents // inner components that have been customised
     ,
     unstyled: true,
-    renderOption: renderOption
+    renderOption: renderOption,
+    icon: icon
   }, menuPositionProps, props));
 });
 CreatableSelect.displayName = "CreatableSelect";

package/dist/Input/Select/SearchSelectInput/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _icons = require("@vitality-ds/icons");
 var _react = _interopRequireDefault(require("react"));
 var _AsyncSelect = _interopRequireDefault(require("../AsyncSelect"));
 var _useGetCustomComponents = _interopRequireDefault(require("../hooks/useGetCustomComponents"));
@@ -16,7 +17,8 @@ var SearchSelectInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref
     onChange = _ref.onChange,
     name = _ref.name,
     id = _ref.id,
-    icon = _ref.icon,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? _icons.Search : _ref$icon,
     _ref$hideDropdownIndi = _ref.hideDropdownIndicator,
     hideDropdownIndicator = _ref$hideDropdownIndi === void 0 ? true : _ref$hideDropdownIndi,
     _ref$openMenuOnClick = _ref.openMenuOnClick,
@@ -44,6 +46,8 @@ var SearchSelectInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref
     isMulti: isMulti,
     valueRenderType: valueRenderType,
     components: customComponents // custom inner components
+    ,
+    icon: icon
   }, restProps));
 });
 SearchSelectInput.displayName = "SearchSelectInput";

package/dist/Input/Select/Select/index.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _primitives = _interopRequireDefault(require("./primitives"));
-var _excluded = ["css", "asChild", "as", "style", "className", "name", "hasError", "options", "isMulti", "value", "id", "inputId", "openMenuOnClick", "onChange", "disabled", "isClearable", "renderOption", "menuPlacement", "menuPosition", "portalMenu"];
+var _excluded = ["css", "asChild", "as", "style", "className", "name", "hasError", "options", "isMulti", "value", "id", "inputId", "openMenuOnClick", "onChange", "disabled", "isClearable", "renderOption", "menuPlacement", "menuPosition", "portalMenu", "icon"];
 var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardedRef) {
   var css = _ref.css,
     asChild = _ref.asChild,
@@ -34,6 +34,7 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwarded
     menuPosition = _ref$menuPosition === void 0 ? "absolute" : _ref$menuPosition,
     _ref$portalMenu = _ref.portalMenu,
     portalMenu = _ref$portalMenu === void 0 ? false : _ref$portalMenu,
+    icon = _ref.icon,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_primitives["default"], (0, _extends2["default"])({
     id: id,
@@ -49,6 +50,7 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwarded
     isClearable: isClearable,
     isMulti: isMulti,
     renderOption: renderOption,
+    icon: icon,
     valueRenderType: "default",
     portalMenu: portalMenu,
     menuPosition: menuPosition,

package/dist/Input/Select/Select/primitives/index.js

@@ -15,7 +15,7 @@ var _useGetCustomComponents = _interopRequireDefault(require("../../hooks/useGet
 var _useMenuPositionProps = _interopRequireDefault(require("../../hooks/useMenuPositionProps"));
 var _useTypeaheadChangeHandlers = _interopRequireDefault(require("../../hooks/useTypeaheadChangeHandlers"));
 var _logic = require("../../logic");
-var _excluded = ["css", "asChild", "as", "style", "className", "options", "name", "onChange", "id", "disabled", "hasError", "isClearable", "hideDropdownIndicator", "isMulti", "value", "inputId", "openMenuOnClick", "renderOption", "valueRenderType", "inputValue", "menuPlacement", "menuPosition", "portalMenu", "onInputChange", "noOptionsMessage"];
+var _excluded = ["css", "asChild", "as", "style", "className", "options", "name", "onChange", "id", "disabled", "hasError", "isClearable", "hideDropdownIndicator", "isMulti", "value", "inputId", "openMenuOnClick", "renderOption", "valueRenderType", "inputValue", "menuPlacement", "menuPosition", "portalMenu", "onInputChange", "noOptionsMessage", "icon"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var SelectPrimitive = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardedRef) {
   var css = _ref.css,
@@ -49,6 +49,7 @@ var SelectPrimitive = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       return null;
     } : _ref$onInputChange,
     noOptionsMessage = _ref.noOptionsMessage,
+    icon = _ref.icon,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var disabledOptions = function disabledOptions(option) {
     return option.disabled;
@@ -87,6 +88,7 @@ var SelectPrimitive = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     "aria-invalid": hasError,
     isClearable: isClearable,
     isMulti: isMulti,
+    icon: icon,
     styles: styles,
     components: customComponents // inner components that have been customised
     ,

package/dist/Input/Select/components/Control/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _icons = require("@vitality-ds/icons");
 var _react = _interopRequireDefault(require("react"));
 var _reactSelect = require("react-select");
 var _AdornmentWrapper = _interopRequireDefault(require("../../../TextInput/components/AdornmentWrapper"));
@@ -17,23 +16,18 @@ function CustomControl(innerProps) {
     isMulti = innerProps.isMulti,
     hasValue = innerProps.hasValue;
   var icon = selectProps.icon;
-  return /*#__PURE__*/_react["default"].createElement(BaseControl, innerProps, icon !== null && isMulti && hasValue ? /*#__PURE__*/_react["default"].createElement(_styled.BaseIsMultiWrapper, null, /*#__PURE__*/_react["default"].createElement(_AdornmentWrapper["default"], {
-    side: "start",
-    adornmentProps: {
-      type: "icon",
-      props: {
-        icon: icon || _icons.Search
+  var renderAdornment = function renderAdornment() {
+    return /*#__PURE__*/_react["default"].createElement(_AdornmentWrapper["default"], {
+      side: "start",
+      adornmentProps: {
+        type: "icon",
+        props: {
+          icon: icon
+        }
       }
-    }
-  })) : /*#__PURE__*/_react["default"].createElement(_AdornmentWrapper["default"], {
-    side: "start",
-    adornmentProps: {
-      type: "icon",
-      props: {
-        icon: icon || _icons.Search
-      }
-    }
-  }), children);
+    });
+  };
+  return /*#__PURE__*/_react["default"].createElement(BaseControl, innerProps, icon && (isMulti && hasValue ? /*#__PURE__*/_react["default"].createElement(_styled.BaseIsMultiWrapper, null, renderAdornment()) : renderAdornment()), children);
 }
 CustomControl.displayName = "CustomControl";
 var _default = exports["default"] = CustomControl;

package/dist/Input/Select/logic.js

@@ -25,8 +25,6 @@ function getStyles(multiSelectType) {
 function getCustomComponents(_ref) {
   var hideDropdownIndicator = _ref.hideDropdownIndicator,
     multiSelectType = _ref.multiSelectType,
-    _ref$component = _ref.component,
-    component = _ref$component === void 0 ? "select" : _ref$component,
     _ref$valueRenderType = _ref.valueRenderType,
     valueRenderType = _ref$valueRenderType === void 0 ? "default" : _ref$valueRenderType;
   var customComponents = (0, _extends2["default"])({
@@ -34,13 +32,9 @@ function getCustomComponents(_ref) {
     ClearIndicator: _ClearButton["default"],
     LoadingIndicator: _LoadingIndicator["default"],
     Option: _Option["default"],
-    SingleValue: _SingleValue["default"]
+    SingleValue: _SingleValue["default"],
+    Control: _Control["default"]
   }, _constants.CUSTOM_COMPONENTS[multiSelectType]);
-  if (component === "searchSelectInput") {
-    Object.assign(customComponents, {
-      Control: _Control["default"]
-    });
-  }
   if (valueRenderType === "typeahead") {
     Object.assign(customComponents, {
       Input: _Input["default"]

package/dist/components/src/Box/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { BoxProps } from "./types";
-declare function Box({ width, height, position, maxWidth, minWidth, maxHeight, minHeight, htmlTag, css, shouldShrink, shouldGrow, gridSpans, top, right, bottom, left, inset, children, ...restProps }: BoxProps): JSX.Element;
+declare function Box({ width, height, position, maxWidth, minWidth, maxHeight, minHeight, htmlTag, css, style, shouldShrink, shouldGrow, gridSpans, top, right, bottom, left, inset, children, ...restProps }: BoxProps): JSX.Element;
 export default Box;

package/dist/components/src/Flex/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { FlexProps } from "./types";
-declare function Flex({ width, height, position, maxWidth, minWidth, maxHeight, minHeight, htmlTag, direction, spacing, align, justify, wrap, ...restProps }: FlexProps): JSX.Element;
+declare function Flex({ width, height, position, maxWidth, minWidth, maxHeight, minHeight, htmlTag, direction, spacing, align, justify, wrap, css, style, ...restProps }: FlexProps): JSX.Element;
 export default Flex;

package/dist/components/src/Input/Select/Select/primitives/types.d.ts

@@ -3,7 +3,7 @@ import React from "react";
 import { GroupBase, MenuProps, OptionsOrGroups } from "react-select";
 import { ChipProps } from "../../../../Chip/types";
 import { StatusBadgeType } from "../../../../StatusBadge/types";
-import { RenderOptionType, ValueRenderType } from "../../types";
+import { IconPropType, RenderOptionType, ValueRenderType } from "../../types";
 export declare type BaseOption = {
     label: string;
     value: string;
@@ -114,6 +114,10 @@ export declare type BaseSelectProps = {
      * @default false
      */
     portalMenu?: boolean;
+    /**
+     * Display an optional icon within the select input
+     */
+    icon?: IconPropType | null;
 };
 export declare type ChipValue = (BaseOption & Omit<ChipProps, "chipCheckboxProps"> & {
     chipCheckboxProps?: ChipProps["chipCheckboxProps"] & {

package/dist/components/src/Input/Select/hooks/useGetCustomComponents.d.ts

@@ -4,7 +4,7 @@ declare const useGetCustomComponents: ({ hideDropdownIndicator, multiSelectType,
         Option: typeof import("../components/Option").default | import("react").ComponentType<import("react-select").OptionProps<unknown, boolean, import("react-select").GroupBase<unknown>>>;
         Group?: import("react").ComponentType<import("react-select").GroupProps<unknown, boolean, import("react-select").GroupBase<unknown>>>;
         ClearIndicator: typeof import("../components/ClearButton").default | import("react").ComponentType<import("react-select").ClearIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>>;
-        Control?: import("react").ComponentType<import("react-select").ControlProps<unknown, boolean, import("react-select").GroupBase<unknown>>>;
+        Control: typeof import("../components/Control").default | import("react").ComponentType<import("react-select").ControlProps<unknown, boolean, import("react-select").GroupBase<unknown>>>;
         DropdownIndicator: typeof import("../components/DropdownIndicator").default | import("react").ComponentType<import("react-select").DropdownIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>>;
         DownChevron?: import("react").ComponentType<import("react-select/dist/declarations/src/components/indicators").DownChevronProps>;
         CrossIcon?: import("react").ComponentType<import("react-select/dist/declarations/src/components/indicators").CrossIconProps>;

package/dist/components/src/Input/Select/logic.d.ts

@@ -1,15 +1,16 @@
 import CustomClearButton from "./components/ClearButton";
+import CustomControl from "./components/Control";
 import CustomDropdownIndicator from "./components/DropdownIndicator";
 import CustomLoadingIndicator from "./components/LoadingIndicator";
 import CustomRenderedOption from "./components/Option";
 import CustomSingleValue from "./components/SingleValue";
 import { CustomComponentsType } from "./types";
 export declare function getStyles(multiSelectType: any): any;
-export declare function getCustomComponents({ hideDropdownIndicator, multiSelectType, component, valueRenderType, }: CustomComponentsType): {
+export declare function getCustomComponents({ hideDropdownIndicator, multiSelectType, valueRenderType, }: CustomComponentsType): {
     Option: typeof CustomRenderedOption | import("react").ComponentType<import("react-select").OptionProps<unknown, boolean, import("react-select").GroupBase<unknown>>>;
     Group?: import("react").ComponentType<import("react-select").GroupProps<unknown, boolean, import("react-select").GroupBase<unknown>>>;
     ClearIndicator: typeof CustomClearButton | import("react").ComponentType<import("react-select").ClearIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>>;
-    Control?: import("react").ComponentType<import("react-select").ControlProps<unknown, boolean, import("react-select").GroupBase<unknown>>>;
+    Control: typeof CustomControl | import("react").ComponentType<import("react-select").ControlProps<unknown, boolean, import("react-select").GroupBase<unknown>>>;
     DropdownIndicator: typeof CustomDropdownIndicator | import("react").ComponentType<import("react-select").DropdownIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>>;
     DownChevron?: import("react").ComponentType<import("react-select/dist/declarations/src/components/indicators").DownChevronProps>;
     CrossIcon?: import("react").ComponentType<import("react-select/dist/declarations/src/components/indicators").CrossIconProps>;

package/dist/esm/Box/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["width", "height", "position", "maxWidth", "minWidth", "maxHeight", "minHeight", "htmlTag", "css", "shouldShrink", "shouldGrow", "gridSpans", "top", "right", "bottom", "left", "inset", "children"];
+var _excluded = ["width", "height", "position", "maxWidth", "minWidth", "maxHeight", "minHeight", "htmlTag", "css", "style", "shouldShrink", "shouldGrow", "gridSpans", "top", "right", "bottom", "left", "inset", "children"];
 import React from "react";
 import { EMPTY_OBJ } from "../helpers/logic/empties";
 import { BaseBox } from "./styled";
@@ -14,6 +14,7 @@ function Box(_ref) {
     minHeight = _ref.minHeight,
     htmlTag = _ref.htmlTag,
     css = _ref.css,
+    style = _ref.style,
     _ref$shouldShrink = _ref.shouldShrink,
     shouldShrink = _ref$shouldShrink === void 0 ? true : _ref$shouldShrink,
     shouldGrow = _ref.shouldGrow,

package/dist/esm/Flex/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["width", "height", "position", "maxWidth", "minWidth", "maxHeight", "minHeight", "htmlTag", "direction", "spacing", "align", "justify", "wrap"];
+var _excluded = ["width", "height", "position", "maxWidth", "minWidth", "maxHeight", "minHeight", "htmlTag", "direction", "spacing", "align", "justify", "wrap", "css", "style"];
 import React from "react";
 import { BaseFlex } from "./styled";
 function Flex(_ref) {
@@ -22,6 +22,8 @@ function Flex(_ref) {
     justify = _ref$justify === void 0 ? "start" : _ref$justify,
     _ref$wrap = _ref.wrap,
     wrap = _ref$wrap === void 0 ? "noWrap" : _ref$wrap,
+    css = _ref.css,
+    style = _ref.style,
     restProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(BaseFlex, _extends({
     spacing: spacing,

package/dist/esm/Input/Select/CreateableSelect/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["css", "asChild", "as", "style", "className", "options", "name", "onChange", "id", "disabled", "hasError", "onCreateOption", "value", "hideDropdownIndicator", "isMulti", "openMenuOnClick", "renderOption", "menuPlacement", "menuPosition", "portalMenu"];
+var _excluded = ["css", "asChild", "as", "style", "className", "options", "name", "onChange", "id", "disabled", "hasError", "onCreateOption", "value", "hideDropdownIndicator", "isMulti", "openMenuOnClick", "renderOption", "menuPlacement", "menuPosition", "portalMenu", "icon"];
 import React, { useMemo } from "react";
 import Creatable from "react-select/creatable";
 import useGetCustomComponents from "../hooks/useGetCustomComponents";
@@ -31,6 +31,7 @@ var CreatableSelect = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
     menuPosition = _ref$menuPosition === void 0 ? "absolute" : _ref$menuPosition,
     _ref$portalMenu = _ref.portalMenu,
     portalMenu = _ref$portalMenu === void 0 ? false : _ref$portalMenu,
+    icon = _ref.icon,
     props = _objectWithoutProperties(_ref, _excluded);
   var disabledOptions = function disabledOptions(option) {
     return option.disabled;
@@ -65,7 +66,8 @@ var CreatableSelect = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
     components: customComponents // inner components that have been customised
     ,
     unstyled: true,
-    renderOption: renderOption
+    renderOption: renderOption,
+    icon: icon
   }, menuPositionProps, props));
 });
 CreatableSelect.displayName = "CreatableSelect";

package/dist/esm/Input/Select/SearchSelectInput/index.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["onSearch", "onChange", "name", "id", "icon", "hideDropdownIndicator", "openMenuOnClick", "isMulti", "valueRenderType"];
+import { Search } from "@vitality-ds/icons";
 import React from "react";
 import AsyncSelect from "../AsyncSelect";
 import useGetCustomComponents from "../hooks/useGetCustomComponents";
@@ -9,7 +10,8 @@ var SearchSelectInput = /*#__PURE__*/React.forwardRef(function (_ref, forwardedR
     onChange = _ref.onChange,
     name = _ref.name,
     id = _ref.id,
-    icon = _ref.icon,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? Search : _ref$icon,
     _ref$hideDropdownIndi = _ref.hideDropdownIndicator,
     hideDropdownIndicator = _ref$hideDropdownIndi === void 0 ? true : _ref$hideDropdownIndi,
     _ref$openMenuOnClick = _ref.openMenuOnClick,
@@ -37,6 +39,8 @@ var SearchSelectInput = /*#__PURE__*/React.forwardRef(function (_ref, forwardedR
     isMulti: isMulti,
     valueRenderType: valueRenderType,
     components: customComponents // custom inner components
+    ,
+    icon: icon
   }, restProps));
 });
 SearchSelectInput.displayName = "SearchSelectInput";

package/dist/esm/Input/Select/Select/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["css", "asChild", "as", "style", "className", "name", "hasError", "options", "isMulti", "value", "id", "inputId", "openMenuOnClick", "onChange", "disabled", "isClearable", "renderOption", "menuPlacement", "menuPosition", "portalMenu"];
+var _excluded = ["css", "asChild", "as", "style", "className", "name", "hasError", "options", "isMulti", "value", "id", "inputId", "openMenuOnClick", "onChange", "disabled", "isClearable", "renderOption", "menuPlacement", "menuPosition", "portalMenu", "icon"];
 import React from "react";
 import SelectPrimitive from "./primitives";
 var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
@@ -27,6 +27,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     menuPosition = _ref$menuPosition === void 0 ? "absolute" : _ref$menuPosition,
     _ref$portalMenu = _ref.portalMenu,
     portalMenu = _ref$portalMenu === void 0 ? false : _ref$portalMenu,
+    icon = _ref.icon,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(SelectPrimitive, _extends({
     id: id,
@@ -42,6 +43,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     isClearable: isClearable,
     isMulti: isMulti,
     renderOption: renderOption,
+    icon: icon,
     valueRenderType: "default",
     portalMenu: portalMenu,
     menuPosition: menuPosition,

package/dist/esm/Input/Select/Select/primitives/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["css", "asChild", "as", "style", "className", "options", "name", "onChange", "id", "disabled", "hasError", "isClearable", "hideDropdownIndicator", "isMulti", "value", "inputId", "openMenuOnClick", "renderOption", "valueRenderType", "inputValue", "menuPlacement", "menuPosition", "portalMenu", "onInputChange", "noOptionsMessage"];
+var _excluded = ["css", "asChild", "as", "style", "className", "options", "name", "onChange", "id", "disabled", "hasError", "isClearable", "hideDropdownIndicator", "isMulti", "value", "inputId", "openMenuOnClick", "renderOption", "valueRenderType", "inputValue", "menuPlacement", "menuPosition", "portalMenu", "onInputChange", "noOptionsMessage", "icon"];
 import React, { useMemo } from "react";
 import ReactSelect from "react-select";
 import useGetCustomComponents from "../../hooks/useGetCustomComponents";
@@ -40,6 +40,7 @@ var SelectPrimitive = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
       return null;
     } : _ref$onInputChange,
     noOptionsMessage = _ref.noOptionsMessage,
+    icon = _ref.icon,
     props = _objectWithoutProperties(_ref, _excluded);
   var disabledOptions = function disabledOptions(option) {
     return option.disabled;
@@ -78,6 +79,7 @@ var SelectPrimitive = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef
     "aria-invalid": hasError,
     isClearable: isClearable,
     isMulti: isMulti,
+    icon: icon,
     styles: styles,
     components: customComponents // inner components that have been customised
     ,

package/dist/esm/Input/Select/components/Control/index.js

@@ -1,4 +1,3 @@
-import { Search } from "@vitality-ds/icons";
 import React from "react";
 import { components } from "react-select";
 import AdornmentWrapper from "../../../TextInput/components/AdornmentWrapper";
@@ -10,23 +9,18 @@ function CustomControl(innerProps) {
     isMulti = innerProps.isMulti,
     hasValue = innerProps.hasValue;
   var icon = selectProps.icon;
-  return /*#__PURE__*/React.createElement(BaseControl, innerProps, icon !== null && isMulti && hasValue ? /*#__PURE__*/React.createElement(BaseIsMultiWrapper, null, /*#__PURE__*/React.createElement(AdornmentWrapper, {
-    side: "start",
-    adornmentProps: {
-      type: "icon",
-      props: {
-        icon: icon || Search
+  var renderAdornment = function renderAdornment() {
+    return /*#__PURE__*/React.createElement(AdornmentWrapper, {
+      side: "start",
+      adornmentProps: {
+        type: "icon",
+        props: {
+          icon: icon
+        }
       }
-    }
-  })) : /*#__PURE__*/React.createElement(AdornmentWrapper, {
-    side: "start",
-    adornmentProps: {
-      type: "icon",
-      props: {
-        icon: icon || Search
-      }
-    }
-  }), children);
+    });
+  };
+  return /*#__PURE__*/React.createElement(BaseControl, innerProps, icon && (isMulti && hasValue ? /*#__PURE__*/React.createElement(BaseIsMultiWrapper, null, renderAdornment()) : renderAdornment()), children);
 }
 CustomControl.displayName = "CustomControl";
 export default CustomControl;

package/dist/esm/Input/Select/logic.js

@@ -15,8 +15,6 @@ export function getStyles(multiSelectType) {
 export function getCustomComponents(_ref) {
   var hideDropdownIndicator = _ref.hideDropdownIndicator,
     multiSelectType = _ref.multiSelectType,
-    _ref$component = _ref.component,
-    component = _ref$component === void 0 ? "select" : _ref$component,
     _ref$valueRenderType = _ref.valueRenderType,
     valueRenderType = _ref$valueRenderType === void 0 ? "default" : _ref$valueRenderType;
   var customComponents = _extends({
@@ -24,13 +22,9 @@ export function getCustomComponents(_ref) {
     ClearIndicator: CustomClearButton,
     LoadingIndicator: CustomLoadingIndicator,
     Option: CustomRenderedOption,
-    SingleValue: CustomSingleValue
+    SingleValue: CustomSingleValue,
+    Control: CustomControl
   }, CUSTOM_COMPONENTS[multiSelectType]);
-  if (component === "searchSelectInput") {
-    Object.assign(customComponents, {
-      Control: CustomControl
-    });
-  }
   if (valueRenderType === "typeahead") {
     Object.assign(customComponents, {
       Input: CustomInput