@stokr/components-library 2.3.65-beta.6 → 2.3.65-beta.8

package/dist/components/Input/Input.js

@@ -7,65 +7,64 @@ exports.default = exports.Input = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Input = require("./Input.styles");
+const _excluded = ["type", "id", "name", "label", "placeholder", "value", "error", "touched", "readOnly", "inverted", "dashboard", "disabled", "inputWrapStyle", "wrapperStyle", "autoHeightLabel", "onChange", "onBlur", "onFocus"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (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 (const 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); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 const Input = props => {
   const {
-    type,
-    id,
-    name,
-    label,
-    placeholder,
-    value,
-    error,
-    touched,
-    readOnly,
-    inverted,
-    dashboard,
-    disabled,
-    inputWrapStyle,
-    wrapperStyle,
-    autoHeightLabel
-  } = props;
+      type,
+      id,
+      name,
+      label,
+      placeholder,
+      value,
+      error,
+      touched,
+      readOnly,
+      inverted,
+      dashboard,
+      disabled,
+      inputWrapStyle,
+      wrapperStyle,
+      autoHeightLabel,
+      // Destructure these so they don't get spread to the input
+      onChange: onChangeProp,
+      onBlur: onBlurProp,
+      onFocus: onFocusProp
+    } = props,
+    restProps = _objectWithoutProperties(props, _excluded);
   const [labelUp, setLabelUp] = (0, _react.useState)(false);
   const [hasFocus, setHasFocus] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {
     checkLabel(false);
   }, []);
   (0, _react.useEffect)(() => {
-    checkLabel(false);
-  }, [hasFocus, value]);
+    if (!!value && !labelUp) {
+      checkLabel(false);
+    }
+  }, [labelUp, value]);
   (0, _react.useEffect)(() => {
     if (value && !labelUp) setLabelUp(true);
   }, [value, labelUp]);
   const onBlur = (e, field) => {
-    const {
-      onBlur
-    } = props;
-
     // formik handler MUST be called before our logic !
-    onBlur && onBlur(e, field);
+    onBlurProp && onBlurProp(e, field);
 
     // our logic follows
     checkLabel(false);
   };
   const onFocus = (e, field) => {
-    const {
-      onFocus
-    } = props;
-
     // formik handler MUST be called before our logic !
-    onFocus && onFocus(e, field);
+    onFocusProp && onFocusProp(e, field);
 
     // our logic follows
     checkLabel(true);
   };
   const onChange = (e, field) => {
-    const {
-      onChange
-    } = props;
-    onChange && onChange(e, field); // formik handler
+    onChangeProp && onChangeProp(e, field); // formik handler
   };
   const checkLabel = focus => {
     setHasFocus(focus);
@@ -96,11 +95,12 @@ const Input = props => {
     onFocus: onFocus,
     readOnly: readOnly,
     placeholder: placeholder,
+    disabled: disabled,
     style: {
       WebkitAppearance: 'none',
       WebkitBorderRadius: 0
     }
-  }, props))));
+  }, restProps))));
 };
 exports.Input = Input;
 Input.propTypes = {

package/dist/components/Input/Input.stories.js

@@ -3,16 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.InputLabeled = exports.InputFilled = exports.InputFillInverted = exports.InputEmpty = void 0;
+exports.default = exports.InputLabeled = exports.InputFilled = exports.InputFillInverted = exports.InputEmpty = exports.AllStates = void 0;
 var _viewport = require("storybook/viewport");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _Input = require("./Input");
 var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
 var _global = _interopRequireDefault(require("../../styles/global"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (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 (const 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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var _default = exports.default = {
   title: 'Components Library/Inputs/Input',
   component: _Input.Input,
+  decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(Story, null)))],
   argTypes: {
     type: {
       type: 'string'
@@ -79,8 +82,19 @@ var _default = exports.default = {
       defaultViewport: 'resetviewport'
     }
   }
+}; // Controlled wrapper for interactive stories
+const ControlledInput = props => {
+  const [value, setValue] = (0, _react.useState)(props.value || '');
+  return /*#__PURE__*/_react.default.createElement(_Input.Input, _extends({}, props, {
+    value: value,
+    onChange: e => {
+      var _props$onChange;
+      setValue(e.target.value);
+      (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, e);
+    }
+  }));
 };
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_Input.Input, args)));
+const Template = args => /*#__PURE__*/_react.default.createElement(ControlledInput, args);
 
 //trying to integrate state:
 // const Template = args => {
@@ -135,8 +149,69 @@ InputEmpty.parameters = {
   }
 };
 
-//doublecheck:
-
-// state?
-// make error true version?
-// why can I not fill in the input in storybook on page? not important?
+// All states example
+const AllStates = () => {
+  const [value1, setValue1] = (0, _react.useState)('');
+  const [value2, setValue2] = (0, _react.useState)('Filled value');
+  const [value3, setValue3] = (0, _react.useState)('');
+  const [value4, setValue4] = (0, _react.useState)('Error text');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '32px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '12px',
+      color: '#666'
+    }
+  }, "Empty - Click to see blue label on focus"), /*#__PURE__*/_react.default.createElement(_Input.Input, {
+    id: "empty",
+    name: "empty",
+    label: "Empty Input",
+    value: value1,
+    onChange: e => setValue1(e.target.value)
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '12px',
+      color: '#666'
+    }
+  }, "With value"), /*#__PURE__*/_react.default.createElement(_Input.Input, {
+    id: "filled",
+    name: "filled",
+    label: "Filled Input",
+    value: value2,
+    onChange: e => setValue2(e.target.value)
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '12px',
+      color: '#666'
+    }
+  }, "Disabled"), /*#__PURE__*/_react.default.createElement(_Input.Input, {
+    id: "disabled",
+    name: "disabled",
+    label: "Disabled Input",
+    value: "Cannot edit",
+    disabled: true,
+    onChange: () => {}
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '12px',
+      color: '#666'
+    }
+  }, "Error state"), /*#__PURE__*/_react.default.createElement(_Input.Input, {
+    id: "error",
+    name: "error",
+    label: "Error Input",
+    value: value4,
+    onChange: e => setValue4(e.target.value),
+    error: true,
+    touched: true
+  })));
+};
+exports.AllStates = AllStates;

package/dist/components/Input/MultiSelect.js

@@ -13,7 +13,7 @@ var _colors = _interopRequireDefault(require("../../styles/colors"));
 var _checkIcon = require("../../static/images/check-icon.svg");
 var _Select = require("./Select.styles");
 const _excluded = ["children", "selectProps"],
-  _excluded2 = ["id", "name", "label", "options", "search", "error", "touched", "value", "disabled", "menuHeight", "placeholder", "showCheckboxes", "showCountBadge", "closeMenuOnSelect", "hideSelectedOptions"];
+  _excluded2 = ["id", "name", "label", "options", "search", "error", "touched", "value", "disabled", "menuHeight", "placeholder", "showCheckboxes", "showCountBadge", "closeMenuOnSelect", "hideSelectedOptions", "width", "minMenuWidth", "maxMenuWidth"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (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 (const 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); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -39,7 +39,7 @@ const Checkbox = _styledComponents.default.div.withConfig({
 const OptionLabel = _styledComponents.default.span.withConfig({
   displayName: "MultiSelect__OptionLabel",
   componentId: "sc-1udb3q8-3"
-})(["font-size:14px;color:", ";font-weight:400;letter-spacing:0.6px;"], _colors.default.black);
+})(["font-size:14px;color:", ";font-weight:400;letter-spacing:0.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;"], _colors.default.black);
 const PlaceholderText = _styledComponents.default.span.withConfig({
   displayName: "MultiSelect__PlaceholderText",
   componentId: "sc-1udb3q8-4"
@@ -125,7 +125,10 @@ const MultiSelect = props => {
       showCheckboxes = true,
       showCountBadge = true,
       closeMenuOnSelect = false,
-      hideSelectedOptions = false
+      hideSelectedOptions = false,
+      width,
+      minMenuWidth = 150,
+      maxMenuWidth = 300
     } = props,
     otherProps = _objectWithoutProperties(props, _excluded2);
   const hasValue = (value === null || value === void 0 ? void 0 : value.length) > 0;
@@ -164,7 +167,11 @@ const MultiSelect = props => {
 
   // Get selected options from value array
   const selectedOptions = options === null || options === void 0 ? void 0 : options.filter(option => value === null || value === void 0 ? void 0 : value.includes(option.value));
-  return /*#__PURE__*/_react.default.createElement(_Input.Wrapper, null, label && /*#__PURE__*/_react.default.createElement(_Input.Label, {
+  return /*#__PURE__*/_react.default.createElement(_Input.Wrapper, {
+    style: {
+      width: width || 'auto'
+    }
+  }, label && /*#__PURE__*/_react.default.createElement(_Input.Label, {
     isUp: labelUp,
     active: hasFocus,
     error: error && touched,
@@ -206,7 +213,10 @@ const MultiSelect = props => {
         borderRadius: '8px',
         boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
         border: "1px solid ".concat(_colors.default.lightGrey),
-        overflow: 'hidden'
+        overflow: 'hidden',
+        minWidth: minMenuWidth,
+        maxWidth: maxMenuWidth,
+        width: 'auto'
       }),
       menuList: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
         padding: 0
@@ -219,6 +229,9 @@ const MultiSelect = props => {
         color: _colors.default.black,
         cursor: 'pointer',
         fontWeight: state.isSelected ? 600 : 400,
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
         '&:active': {
           backgroundColor: _colors.default.grey
         }
@@ -239,7 +252,15 @@ const MultiSelect = props => {
         padding: 0
       }),
       indicatorsContainer: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
-        paddingLeft: '8px'
+        padding: 0,
+        gap: '4px'
+      }),
+      dropdownIndicator: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
+        padding: '4px'
+      }),
+      clearIndicator: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
+        padding: '4px'
+        // display: 'none',
       })
     },
     components: {
@@ -272,7 +293,10 @@ MultiSelect.propTypes = {
   showCheckboxes: _propTypes.default.bool,
   showCountBadge: _propTypes.default.bool,
   closeMenuOnSelect: _propTypes.default.bool,
-  hideSelectedOptions: _propTypes.default.bool
+  hideSelectedOptions: _propTypes.default.bool,
+  width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  minMenuWidth: _propTypes.default.number,
+  maxMenuWidth: _propTypes.default.number
 };
 MultiSelect.defaultProps = {
   label: '',
@@ -287,6 +311,9 @@ MultiSelect.defaultProps = {
   showCheckboxes: true,
   showCountBadge: true,
   closeMenuOnSelect: false,
-  hideSelectedOptions: false
+  hideSelectedOptions: false,
+  width: undefined,
+  minMenuWidth: 150,
+  maxMenuWidth: 300
 };
 var _default = exports.default = MultiSelect;

package/dist/components/Input/MultiSelect.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithoutCheckboxes = exports.WithPreselectedValues = exports.WithManyOptions = exports.MultipleFilters = exports.Disabled = exports.Default = void 0;
+exports.default = exports.WithoutCheckboxes = exports.WithPreselectedValues = exports.WithManyOptions = exports.MultipleFilters = exports.Disabled = exports.Default = exports.CustomWidth = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _MultiSelect = require("./MultiSelect");
 var _global = _interopRequireDefault(require("../../styles/global"));
@@ -195,4 +195,70 @@ const Disabled = () => /*#__PURE__*/_react.default.createElement(ControlledMulti
   value: ['initiated'],
   disabled: true
 });
-exports.Disabled = Disabled;
+
+// Custom width - narrow select with wider menu
+exports.Disabled = Disabled;
+const CustomWidth = () => {
+  const longOptions = [{
+    key: 'opt1',
+    value: 'opt1',
+    label: 'Very Long Option Name Here'
+  }, {
+    key: 'opt2',
+    value: 'opt2',
+    label: 'Another Long Option'
+  }, {
+    key: 'opt3',
+    value: 'opt3',
+    label: 'Short'
+  }, {
+    key: 'opt4',
+    value: 'opt4',
+    label: 'Medium Length Option'
+  }];
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Narrow select (80px), menu expands (150-250px)"), /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
+    id: "narrow",
+    name: "narrow",
+    placeholder: "Filter",
+    options: longOptions,
+    width: 80,
+    minMenuWidth: 150,
+    maxMenuWidth: 250
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Fixed width (200px)"), /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
+    id: "fixed",
+    name: "fixed",
+    placeholder: "Status",
+    options: statusOptions,
+    width: "200px"
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Wide menu (up to 400px) for long text"), /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
+    id: "wide",
+    name: "wide",
+    placeholder: "Select",
+    options: longOptions,
+    width: 120,
+    minMenuWidth: 200,
+    maxMenuWidth: 400
+  })));
+};
+exports.CustomWidth = CustomWidth;

package/dist/components/Input/SearchInput.js

@@ -7,7 +7,7 @@ exports.default = exports.SearchInput = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _SearchInput = require("./SearchInput.styles");
 var _searchIcon = require("../../static/images/search-icon.svg");
-const _excluded = ["value", "onChange", "placeholder", "icon", "showIcon", "disabled", "onFocus", "onBlur", "className", "containerStyle", "inputStyle", "iconStyle", "id", "name", "aria-label", "aria-describedby"];
+const _excluded = ["value", "onChange", "placeholder", "icon", "showIcon", "disabled", "variant", "onFocus", "onBlur", "className", "containerStyle", "inputStyle", "iconStyle", "id", "name", "aria-label", "aria-describedby"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
@@ -20,6 +20,8 @@ const SearchInput = _ref => {
       icon,
       showIcon = true,
       disabled = false,
+      variant = 'filled',
+      // 'filled' or 'outlined'
       onFocus,
       onBlur,
       className,
@@ -53,7 +55,8 @@ const SearchInput = _ref => {
     className: className,
     style: containerStyle
   }, /*#__PURE__*/_react.default.createElement(_SearchInput.SearchInputWrapper, {
-    disabled: disabled
+    disabled: disabled,
+    variant: variant
   }, showIcon && /*#__PURE__*/_react.default.createElement(_SearchInput.SearchIconWrapper, {
     style: iconStyle
   }, icon || /*#__PURE__*/_react.default.createElement(_searchIcon.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(_SearchInput.SearchInputField, _extends({

package/dist/components/Input/SearchInput.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithoutIcon = exports.WithInitialValue = exports.WithCustomIcon = exports.LongText = exports.Disabled = exports.DifferentWidths = exports.Default = exports.CustomStyling = exports.CustomPlaceholder = exports.AllStates = exports.AccessibilityExample = void 0;
+exports.default = exports.WithoutIcon = exports.WithInitialValue = exports.WithCustomIcon = exports.Variants = exports.Outlined = exports.LongText = exports.Disabled = exports.DifferentWidths = exports.Default = exports.CustomStyling = exports.CustomPlaceholder = exports.AllStates = exports.AccessibilityExample = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _SearchInput = _interopRequireDefault(require("./SearchInput"));
 var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
@@ -28,6 +28,14 @@ var _default = exports.default = {
       description: 'Placeholder text',
       defaultValue: 'Search'
     },
+    variant: {
+      control: {
+        type: 'select'
+      },
+      options: ['filled', 'outlined'],
+      description: 'Visual variant of the input',
+      defaultValue: 'filled'
+    },
     showIcon: {
       control: 'boolean',
       description: 'Show/hide the search icon',
@@ -276,7 +284,61 @@ AccessibilityExample.decorators = [Story => /*#__PURE__*/_react.default.createEl
   }
 }, "Use this search to find products by name, category, or description."))];
 
+// Outlined variant
+const Outlined = () => {
+  const [value, setValue] = (0, _react.useState)('');
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value,
+    onChange: setValue,
+    placeholder: "Search",
+    variant: "outlined"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '12px',
+      fontSize: '12px',
+      color: _colors.default.grey2
+    }
+  }, "Current value: ", /*#__PURE__*/_react.default.createElement("strong", null, value || '(empty)')));
+};
+
+// Both variants side by side
+exports.Outlined = Outlined;
+const Variants = () => {
+  const [value1, setValue1] = (0, _react.useState)('');
+  const [value2, setValue2] = (0, _react.useState)('');
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Filled (default)"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value1,
+    onChange: setValue1,
+    placeholder: "Search",
+    variant: "filled"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Outlined"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value2,
+    onChange: setValue2,
+    placeholder: "Search",
+    variant: "outlined"
+  })));
+};
+
 // Custom styling
+exports.Variants = Variants;
 const CustomStyling = () => {
   const [value, setValue] = (0, _react.useState)('');
   return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_SearchInput.default, {

package/dist/components/Input/SearchInput.styles.js

@@ -14,7 +14,7 @@ const SearchInputContainer = exports.SearchInputContainer = _styledComponents.de
 const SearchInputWrapper = exports.SearchInputWrapper = _styledComponents.default.div.withConfig({
   displayName: "SearchInputstyles__SearchInputWrapper",
   componentId: "sc-dcxztv-1"
-})(["position:relative;display:flex;align-items:center;width:100%;background-color:", ";border-radius:8px;padding:0 16px;min-height:40px;transition:background-color 0.2s ease;", " &:focus-within{background-color:", ";box-shadow:0 0 0 2px ", ";}"], _colors.default.grey3, props => props.disabled && "\n    opacity: 0.6;\n    cursor: not-allowed;\n  ", _colors.default.white, _colors.default.lightGrey);
+})(["position:relative;display:flex;align-items:center;width:100%;border-radius:8px;padding:0 16px;min-height:40px;transition:all 0.2s ease;background-color:", ";border:", ";", " &:focus-within{background-color:", ";border-color:", ";box-shadow:", ";}&:hover{border-color:", ";}"], props => props.variant === 'outlined' ? 'transparent' : _colors.default.grey3, props => props.variant === 'outlined' ? "1px solid ".concat(_colors.default.lightGrey) : '1px solid transparent', props => props.disabled && "\n    opacity: 0.6;\n    cursor: not-allowed;\n  ", props => props.variant === 'outlined' ? 'transparent' : _colors.default.white, props => props.variant === 'outlined' ? _colors.default.grey2 : 'transparent', props => props.variant === 'outlined' ? 'none' : "0 0 0 2px ".concat(_colors.default.lightGrey), props => props.variant === 'outlined' ? _colors.default.grey2 : 'transparent');
 const SearchIconWrapper = exports.SearchIconWrapper = _styledComponents.default.div.withConfig({
   displayName: "SearchInputstyles__SearchIconWrapper",
   componentId: "sc-dcxztv-2"