@stokr/components-library 2.3.65-beta.5 → 2.3.65-beta.7

package/dist/components/Input/MultiSelect.js

@@ -7,12 +7,15 @@ exports.default = exports.MultiSelect = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactSelect = _interopRequireWildcard(require("react-select"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Input = require("./Input.styles");
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+var _checkIcon = require("../../static/images/check-icon.svg");
 var _Select = require("./Select.styles");
-const _excluded = ["id", "name", "label", "options", "search", "error", "touched", "value", "disabled", "menuHeight", "placeholder"];
+const _excluded = ["children", "selectProps"],
+  _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 _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 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -20,6 +23,64 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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; }
+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); }
+const CountBadge = _styledComponents.default.span.withConfig({
+  displayName: "MultiSelect__CountBadge",
+  componentId: "sc-1udb3q8-0"
+})(["display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;background-color:", ";color:", ";border-radius:10px;font-size:12px;font-weight:600;margin-left:8px;"], _colors.default.black, _colors.default.white);
+const CheckboxWrapper = _styledComponents.default.div.withConfig({
+  displayName: "MultiSelect__CheckboxWrapper",
+  componentId: "sc-1udb3q8-1"
+})(["display:flex;align-items:center;padding:16px 12px;cursor:pointer;transition:background-color 0.15s ease;&:hover{background-color:", ";}"], _colors.default.grey);
+const Checkbox = _styledComponents.default.div.withConfig({
+  displayName: "MultiSelect__Checkbox",
+  componentId: "sc-1udb3q8-2"
+})(["width:14px;height:14px;border:1px solid ", ";border-radius:3px;margin-right:12px;display:flex;align-items:center;justify-content:center;background-color:", ";transition:all 0.15s ease;flex-shrink:0;svg{opacity:", ";transition:opacity 0.15s ease;width:8px;height:8px;}svg path{stroke:", ";}"], props => props.isSelected ? _colors.default.black : _colors.default.grey2, props => props.isSelected ? _colors.default.white : _colors.default.white, props => props.isSelected ? 1 : 0, _colors.default.blue);
+const OptionLabel = _styledComponents.default.span.withConfig({
+  displayName: "MultiSelect__OptionLabel",
+  componentId: "sc-1udb3q8-3"
+})(["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"
+})(["font-size:14px;color:", ";font-weight:400;"], _colors.default.black);
+
+// Custom Option with Checkbox
+const CheckboxOption = props => {
+  const {
+    isSelected,
+    label,
+    innerRef,
+    innerProps
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(CheckboxWrapper, _extends({
+    ref: innerRef
+  }, innerProps), /*#__PURE__*/_react.default.createElement(Checkbox, {
+    isSelected: isSelected
+  }, /*#__PURE__*/_react.default.createElement(_checkIcon.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(OptionLabel, null, label));
+};
+
+// Custom ValueContainer that shows count badge
+const CountValueContainer = _ref => {
+  let {
+      children,
+      selectProps
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    value,
+    placeholder
+  } = selectProps;
+  const count = (value === null || value === void 0 ? void 0 : value.length) || 0;
+  return /*#__PURE__*/_react.default.createElement(_reactSelect.components.ValueContainer, _extends({}, props, {
+    selectProps: selectProps
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement(PlaceholderText, null, placeholder), count > 0 && /*#__PURE__*/_react.default.createElement(CountBadge, null, count)), children);
+};
 const DropdownIndicator = props => {
   const {
     selectProps
@@ -60,9 +121,16 @@ const MultiSelect = props => {
       value,
       disabled,
       menuHeight,
-      placeholder
+      placeholder,
+      showCheckboxes = true,
+      showCountBadge = true,
+      closeMenuOnSelect = false,
+      hideSelectedOptions = false,
+      width,
+      minMenuWidth = 150,
+      maxMenuWidth = 300
     } = props,
-    otherProps = _objectWithoutProperties(props, _excluded);
+    otherProps = _objectWithoutProperties(props, _excluded2);
   const hasValue = (value === null || value === void 0 ? void 0 : value.length) > 0;
   const [labelUp, setLabelUp] = (0, _react.useState)(hasValue);
   const [hasFocus, setHasFocus] = (0, _react.useState)(false);
@@ -99,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,
@@ -116,41 +188,87 @@ const MultiSelect = props => {
     placeholder: placeholder,
     isSearchable: search,
     isMulti: true,
+    openMenuOnFocus: true,
+    closeMenuOnSelect: closeMenuOnSelect,
+    hideSelectedOptions: hideSelectedOptions,
     maxMenuHeight: menuHeight,
     styles: {
-      control: () => _Select.SelectControl,
+      control: (baseStyle, state) => _objectSpread(_objectSpread({}, baseStyle), {}, {
+        display: 'flex',
+        alignItems: 'center',
+        // minHeight: '44px',
+        padding: '0 10px',
+        backgroundColor: _colors.default.white,
+        border: "1px solid ".concat(state.isFocused ? _colors.default.grey2 : _colors.default.lightGrey),
+        borderRadius: '10px',
+        boxShadow: 'none',
+        cursor: 'pointer',
+        '&:hover': {
+          borderColor: _colors.default.grey2
+        }
+      }),
       menu: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
-        marginTop: 0,
+        marginTop: '4px',
         zIndex: 1000,
-        SelectMenu: _Select.SelectMenu
+        borderRadius: '8px',
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+        border: "1px solid ".concat(_colors.default.lightGrey),
+        overflow: 'hidden',
+        minWidth: minMenuWidth,
+        maxWidth: maxMenuWidth,
+        width: 'auto'
+      }),
+      menuList: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
+        padding: 0
+      }),
+      option: (baseStyle, state) => _objectSpread(_objectSpread({}, baseStyle), {}, {
+        // When using checkboxes, padding is handled by CheckboxOption
+        // Otherwise, add padding for the default option
+        padding: showCheckboxes ? 0 : '12px 16px',
+        backgroundColor: state.isFocused ? _colors.default.grey : 'transparent',
+        color: _colors.default.black,
+        cursor: 'pointer',
+        fontWeight: state.isSelected ? 600 : 400,
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        '&:active': {
+          backgroundColor: _colors.default.grey
+        }
       }),
-      option: (baseStyle, state) => _objectSpread({
-        fontWeight: state.isSelected || state.isFocused ? 'bold' : 'normal',
-        cursor: 'pointer'
-      }, _Select.SelectOption),
-      selectContainer: () => _Select.SelectContainer,
       valueContainer: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
+        padding: 0,
+        display: 'flex',
+        alignItems: 'center'
+      }),
+      placeholder: () => ({
+        display: 'none' // We handle placeholder in ValueContainer
+      }),
+      multiValue: () => ({
+        display: showCountBadge ? 'none' : 'flex' // Hide tags when showing count
+      }),
+      input: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
+        margin: 0,
         padding: 0
       }),
-      multiValue: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
-        backgroundColor: '#f0f0f0',
-        borderRadius: '4px'
+      indicatorsContainer: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
+        padding: 0,
+        gap: '4px'
       }),
-      multiValueLabel: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
-        fontSize: '14px',
-        padding: '2px 6px'
+      dropdownIndicator: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
+        padding: '4px'
       }),
-      multiValueRemove: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
-        cursor: 'pointer',
-        ':hover': {
-          backgroundColor: '#e0e0e0'
-        }
+      clearIndicator: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
+        padding: '4px'
+        // display: 'none',
       })
     },
     components: {
       DropdownIndicator,
       IndicatorSeparator: null,
-      MenuList: SelectMenuListWithScroll
+      MenuList: SelectMenuListWithScroll,
+      Option: showCheckboxes ? CheckboxOption : _reactSelect.components.Option,
+      ValueContainer: showCountBadge ? CountValueContainer : _reactSelect.components.ValueContainer
     }
   })));
 };
@@ -171,17 +289,31 @@ MultiSelect.propTypes = {
   placeholder: _propTypes.default.string,
   onChange: _propTypes.default.func,
   onBlur: _propTypes.default.func,
-  onFocus: _propTypes.default.func
+  onFocus: _propTypes.default.func,
+  showCheckboxes: _propTypes.default.bool,
+  showCountBadge: _propTypes.default.bool,
+  closeMenuOnSelect: _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: '',
   value: [],
-  search: true,
+  search: false,
   error: false,
   touched: false,
-  placeholder: '',
+  placeholder: 'Select',
   onChange: () => {},
   onBlur: () => {},
-  onFocus: () => {}
+  onFocus: () => {},
+  showCheckboxes: true,
+  showCountBadge: true,
+  closeMenuOnSelect: 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.WithPreselectedValues = exports.WithPlaceholder = exports.WithManyOptions = 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"));
@@ -16,11 +16,45 @@ const StoryContainer = _styledComponents.default.div.withConfig({
   displayName: "MultiSelectstories__StoryContainer",
   componentId: "sc-1vk8pre-0"
 })(["max-width:400px;padding:40px 20px;"]);
+const FiltersRow = _styledComponents.default.div.withConfig({
+  displayName: "MultiSelectstories__FiltersRow",
+  componentId: "sc-1vk8pre-1"
+})(["display:flex;gap:12px;flex-wrap:wrap;"]);
 var _default = exports.default = {
   title: 'Components Library/Inputs/MultiSelect',
   component: _MultiSelect.MultiSelect,
   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(StoryContainer, null, /*#__PURE__*/_react.default.createElement(Story, null))))]
 };
+const statusOptions = [{
+  key: 'initiated',
+  value: 'initiated',
+  label: 'Initiated'
+}, {
+  key: 'declined',
+  value: 'declined',
+  label: 'Declined'
+}, {
+  key: 'confirmed',
+  value: 'confirmed',
+  label: 'Confirmed'
+}, {
+  key: 'transferred',
+  value: 'transferred',
+  label: 'Transferred'
+}];
+const typeOptions = [{
+  key: 'dividend',
+  value: 'dividend',
+  label: 'Dividend'
+}, {
+  key: 'interest',
+  value: 'interest',
+  label: 'Interest'
+}, {
+  key: 'redemption',
+  value: 'redemption',
+  label: 'Redemption'
+}];
 const countryOptions = [{
   key: 'us',
   value: 'us',
@@ -45,35 +79,6 @@ const countryOptions = [{
   key: 'it',
   value: 'it',
   label: 'Italy'
-}, {
-  key: 'nl',
-  value: 'nl',
-  label: 'Netherlands'
-}, {
-  key: 'ch',
-  value: 'ch',
-  label: 'Switzerland'
-}];
-const tagOptions = [{
-  key: 'tech',
-  value: 'tech',
-  label: 'Technology'
-}, {
-  key: 'finance',
-  value: 'finance',
-  label: 'Finance'
-}, {
-  key: 'health',
-  value: 'health',
-  label: 'Healthcare'
-}, {
-  key: 'education',
-  value: 'education',
-  label: 'Education'
-}, {
-  key: 'retail',
-  value: 'retail',
-  label: 'Retail'
 }];
 
 // Controlled wrapper for interactive stories
@@ -91,40 +96,81 @@ const ControlledMultiSelect = props => {
     onChange: handleChange
   }));
 };
+
+// Default - Status filter like in the design
 const Default = () => /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
-  id: "countries",
-  name: "countries",
-  label: "Select Countries",
-  options: countryOptions
+  id: "status",
+  name: "status",
+  placeholder: "Status",
+  options: statusOptions
 });
+
+// With preselected values showing count badge
 exports.Default = Default;
 const WithPreselectedValues = () => /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
-  id: "countries",
-  name: "countries",
-  label: "Select Countries",
-  options: countryOptions,
-  value: ['us', 'de']
+  id: "status",
+  name: "status",
+  placeholder: "Status",
+  options: statusOptions,
+  value: ['initiated', 'confirmed']
 });
+
+// Multiple filters side by side (like in the screenshot)
 exports.WithPreselectedValues = WithPreselectedValues;
-const WithPlaceholder = () => /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
-  id: "tags",
-  name: "tags",
-  options: tagOptions,
-  placeholder: "Choose tags..."
-});
-exports.WithPlaceholder = WithPlaceholder;
-const Disabled = () => /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
+const MultipleFilters = () => {
+  const [statusValue, setStatusValue] = (0, _react.useState)(['initiated']);
+  const [typeValue, setTypeValue] = (0, _react.useState)([]);
+  return /*#__PURE__*/_react.default.createElement(FiltersRow, null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '140px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_MultiSelect.MultiSelect, {
+    id: "status",
+    name: "status",
+    placeholder: "Status",
+    options: statusOptions,
+    value: statusValue,
+    onChange: _ref2 => {
+      let {
+        value
+      } = _ref2;
+      return setStatusValue(value);
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '120px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_MultiSelect.MultiSelect, {
+    id: "type",
+    name: "type",
+    placeholder: "Type",
+    options: typeOptions,
+    value: typeValue,
+    onChange: _ref3 => {
+      let {
+        value
+      } = _ref3;
+      return setTypeValue(value);
+    }
+  })));
+};
+
+// Without checkboxes (classic multi-select style)
+exports.MultipleFilters = MultipleFilters;
+const WithoutCheckboxes = () => /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
   id: "countries",
   name: "countries",
-  label: "Select Countries",
+  placeholder: "Countries",
   options: countryOptions,
-  value: ['uk', 'fr'],
-  disabled: true
+  showCheckboxes: false,
+  showCountBadge: false
 });
-exports.Disabled = Disabled;
+
+// With many options
+exports.WithoutCheckboxes = WithoutCheckboxes;
 const WithManyOptions = () => {
   const manyOptions = Array.from({
-    length: 50
+    length: 20
   }, (_, i) => ({
     key: "option-".concat(i),
     value: "option-".concat(i),
@@ -133,9 +179,86 @@ const WithManyOptions = () => {
   return /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
     id: "many",
     name: "many",
-    label: "Select Multiple",
+    placeholder: "Select",
     options: manyOptions,
-    menuHeight: 200
+    menuHeight: 250
   });
 };
-exports.WithManyOptions = WithManyOptions;
+
+// Disabled state
+exports.WithManyOptions = WithManyOptions;
+const Disabled = () => /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
+  id: "status",
+  name: "status",
+  placeholder: "Status",
+  options: statusOptions,
+  value: ['initiated'],
+  disabled: true
+});
+
+// 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"

package/dist/components/Payment/PaymentDetailsCard.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.PaymentDetailsCard = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _colors = _interopRequireDefault(require("../../styles/colors"));
@@ -185,4 +185,5 @@ const PaymentDetailsCard = _ref2 => {
   };
   return /*#__PURE__*/_react.default.createElement(CardContainer, null, title && /*#__PURE__*/_react.default.createElement(CardTitle, null, title), renderAmountSection(), renderDetailsSection(), renderInfoSection());
 };
+exports.PaymentDetailsCard = PaymentDetailsCard;
 var _default = exports.default = PaymentDetailsCard;

package/dist/components/StepsProgress/StepIndicator.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StepIndicator = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _StepIndicator = require("./StepIndicator.styles");
+var _checkIcon = require("../../static/images/check-icon.svg");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StepIndicator = _ref => {
+  let {
+    steps,
+    currentStep,
+    onStepClick,
+    showLabels = true,
+    marginBottom
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_StepIndicator.StepIndicatorContainer, {
+    marginBottom: marginBottom
+  }, steps.map((step, index) => {
+    const isCompleted = index < currentStep;
+    const isActive = index === currentStep;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: step.id
+    }, /*#__PURE__*/_react.default.createElement(_StepIndicator.StepItem, {
+      onClick: () => onStepClick && onStepClick(index),
+      style: {
+        cursor: onStepClick ? 'pointer' : 'default'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_StepIndicator.StepCircle, {
+      isCompleted: isCompleted,
+      isActive: isActive
+    }, isCompleted ? /*#__PURE__*/_react.default.createElement(_checkIcon.ReactComponent, {
+      width: 14,
+      height: 11
+    }) : index + 1), showLabels && /*#__PURE__*/_react.default.createElement(_StepIndicator.StepLabel, null, step.label)), index < steps.length - 1 && /*#__PURE__*/_react.default.createElement(_StepIndicator.StepConnector, {
+      isCompleted: isCompleted
+    }));
+  }));
+};
+exports.StepIndicator = StepIndicator;
+StepIndicator.propTypes = {
+  steps: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    label: _propTypes.default.string.isRequired
+  })).isRequired,
+  currentStep: _propTypes.default.number.isRequired,
+  onStepClick: _propTypes.default.func,
+  showLabels: _propTypes.default.bool,
+  marginBottom: _propTypes.default.string
+};
+StepIndicator.defaultProps = {
+  onStepClick: null,
+  showLabels: true,
+  marginBottom: '32px'
+};
+var _default = exports.default = StepIndicator;

package/dist/components/StepsProgress/StepIndicator.stories.js

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithoutLabels = exports.SecondStep = exports.ManySteps = exports.LastStep = exports.Interactive = exports.Default = exports.CustomMargin = exports.AllCompleted = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _StepIndicator = _interopRequireDefault(require("./StepIndicator"));
+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); }
+var _default = exports.default = {
+  title: 'Components Library/StepIndicator',
+  component: _StepIndicator.default,
+  decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(Story, null))],
+  argTypes: {
+    currentStep: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 3
+      },
+      description: 'Current active step (0-indexed)'
+    },
+    showLabels: {
+      control: 'boolean',
+      description: 'Show or hide step labels'
+    },
+    marginBottom: {
+      control: 'text',
+      description: 'Bottom margin of the component'
+    }
+  }
+};
+const sampleSteps = [{
+  id: 'step1',
+  label: 'Details'
+}, {
+  id: 'step2',
+  label: 'Review'
+}, {
+  id: 'step3',
+  label: 'Confirm'
+}];
+
+// Default - first step active
+const Default = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StepIndicator.default, {
+  steps: sampleSteps,
+  currentStep: 0
+}));
+
+// Second step active (first completed)
+exports.Default = Default;
+const SecondStep = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StepIndicator.default, {
+  steps: sampleSteps,
+  currentStep: 1
+}));
+
+// Last step active (all previous completed)
+exports.SecondStep = SecondStep;
+const LastStep = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StepIndicator.default, {
+  steps: sampleSteps,
+  currentStep: 2
+}));
+
+// All steps completed
+exports.LastStep = LastStep;
+const AllCompleted = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StepIndicator.default, {
+  steps: sampleSteps,
+  currentStep: 3
+}));
+
+// Interactive example
+exports.AllCompleted = AllCompleted;
+const Interactive = () => {
+  const [currentStep, setCurrentStep] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StepIndicator.default, {
+    steps: sampleSteps,
+    currentStep: currentStep,
+    onStepClick: index => setCurrentStep(index)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCurrentStep(prev => Math.max(0, prev - 1)),
+    disabled: currentStep === 0,
+    style: {
+      marginRight: '8px',
+      padding: '8px 16px'
+    }
+  }, "Previous"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCurrentStep(prev => Math.min(sampleSteps.length, prev + 1)),
+    disabled: currentStep >= sampleSteps.length,
+    style: {
+      padding: '8px 16px'
+    }
+  }, "Next")), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      marginTop: '16px',
+      fontSize: '14px',
+      color: '#666'
+    }
+  }, "Current step: ", currentStep, " (click on steps to navigate)"));
+};
+
+// Without labels
+exports.Interactive = Interactive;
+const WithoutLabels = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StepIndicator.default, {
+  steps: sampleSteps,
+  currentStep: 1,
+  showLabels: false
+}));
+
+// More steps
+exports.WithoutLabels = WithoutLabels;
+const ManySteps = () => {
+  const manySteps = [{
+    id: 'step1',
+    label: 'Account'
+  }, {
+    id: 'step2',
+    label: 'Personal'
+  }, {
+    id: 'step3',
+    label: 'Documents'
+  }, {
+    id: 'step4',
+    label: 'Review'
+  }, {
+    id: 'step5',
+    label: 'Complete'
+  }];
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StepIndicator.default, {
+    steps: manySteps,
+    currentStep: 2
+  }));
+};
+
+// Custom margin
+exports.ManySteps = ManySteps;
+const CustomMargin = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StepIndicator.default, {
+  steps: sampleSteps,
+  currentStep: 1,
+  marginBottom: "0"
+}), /*#__PURE__*/_react.default.createElement("p", {
+  style: {
+    margin: 0,
+    fontSize: '14px'
+  }
+}, "Content immediately below (no margin)"));
+exports.CustomMargin = CustomMargin;

package/dist/components/StepsProgress/StepIndicator.styles.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StepLabel = exports.StepItem = exports.StepIndicatorContainer = exports.StepConnector = exports.StepCircle = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+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); }
+const StepIndicatorContainer = exports.StepIndicatorContainer = _styledComponents.default.div.withConfig({
+  displayName: "StepIndicatorstyles__StepIndicatorContainer",
+  componentId: "sc-ywoddn-0"
+})(["display:flex;align-items:center;gap:16px;margin-bottom:", ";"], props => props.marginBottom || '32px');
+const StepItem = exports.StepItem = _styledComponents.default.div.withConfig({
+  displayName: "StepIndicatorstyles__StepItem",
+  componentId: "sc-ywoddn-1"
+})(["display:flex;align-items:center;gap:12px;"]);
+const StepCircle = exports.StepCircle = _styledComponents.default.div.withConfig({
+  displayName: "StepIndicatorstyles__StepCircle",
+  componentId: "sc-ywoddn-2"
+})(["width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;transition:all 0.2s ease;", " ", " ", ""], props => props.isCompleted && (0, _styledComponents.css)(["background-color:", ";color:", ";svg path{stroke:", ";}"], _colors.default.progressGreen, _colors.default.white, _colors.default.white), props => props.isActive && !props.isCompleted && (0, _styledComponents.css)(["background-color:", ";color:", ";"], _colors.default.black, _colors.default.white), props => !props.isActive && !props.isCompleted && (0, _styledComponents.css)(["background-color:", ";color:", ";"], _colors.default.grey, _colors.default.black));
+const StepLabel = exports.StepLabel = _styledComponents.default.span.withConfig({
+  displayName: "StepIndicatorstyles__StepLabel",
+  componentId: "sc-ywoddn-3"
+})(["font-size:16px;font-weight:600;line-height:24px;letter-spacing:0.6px;word-wrap:break-word;"]);
+const StepConnector = exports.StepConnector = _styledComponents.default.div.withConfig({
+  displayName: "StepIndicatorstyles__StepConnector",
+  componentId: "sc-ywoddn-4"
+})(["flex:1;height:2px;max-width:80px;background-color:", ";"], props => props.isCompleted ? _colors.default.progressGreen : _colors.default.grey);

package/dist/components/TextLink/TextLink.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Default = exports.AsButton = void 0;
+exports.default = exports.IconReversed = exports.Default = exports.ButtonIconReversed = exports.AsButton = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactRouterDom = require("react-router-dom");
 var _TextLink = require("./TextLink.styles");
@@ -22,4 +22,14 @@ exports.Default = Default;
 const AsButton = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_TextLink.TextButton, {
   onClick: () => alert('Clicked!')
 }, "Click Me"));
-exports.AsButton = AsButton;
+exports.AsButton = AsButton;
+const IconReversed = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_TextLink.TextLink, {
+  to: "/example",
+  reverse: true
+}, "Go Back"));
+exports.IconReversed = IconReversed;
+const ButtonIconReversed = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_TextLink.TextButton, {
+  onClick: () => alert('Clicked!'),
+  reverse: true
+}, "Previous"));
+exports.ButtonIconReversed = ButtonIconReversed;

package/dist/components/TextLink/TextLink.styles.js

@@ -9,7 +9,7 @@ var _reactRouterDom = require("react-router-dom");
 var _theme = _interopRequireDefault(require("../../styles/theme"));
 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); }
-const styles = (0, _styledComponents.css)(["background:#fff;border:none;cursor:pointer;position:relative;font-family:'Open Sans';font-weight:bold;font-size:11px;line-height:14px;text-transform:uppercase;display:inline-block;padding-left:18px;padding-right:6px;transition:padding 0.2s;&:before{content:'\\f3d1';font-family:'Ionicons';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:12px;line-height:8px;display:block;width:8px;height:8px;position:absolute;top:50%;left:0;margin-top:-4px;color:", ";}&:hover{padding-left:24px;padding-right:0;}", ""], props => _theme.default.cWarning, props => props.disabled && (0, _styledComponents.css)(["opacity:0.5;pointer-events:none;"]));
+const styles = (0, _styledComponents.css)(["background:#fff;border:none;cursor:pointer;position:relative;font-family:'Open Sans';font-weight:bold;font-size:11px;line-height:14px;text-transform:uppercase;display:inline-block;padding-left:18px;padding-right:6px;transition:padding 0.2s;&:before{content:'\\f3d1';font-family:'Ionicons';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:12px;line-height:8px;display:block;width:8px;height:8px;position:absolute;top:50%;left:0;margin-top:-4px;color:", ";transform:", ";}&:hover{padding-left:24px;padding-right:0;}", ""], props => _theme.default.cWarning, props => props.reverse ? 'rotate(180deg)' : 'none', props => props.disabled && (0, _styledComponents.css)(["opacity:0.5;pointer-events:none;"]));
 const TextLink = exports.TextLink = (0, _styledComponents.default)(_reactRouterDom.Link).withConfig({
   displayName: "TextLinkstyles__TextLink",
   componentId: "sc-h1k34v-0"

package/dist/index.js

@@ -1444,6 +1444,17 @@ Object.keys(_TimerComponent).forEach(function (key) {
     }
   });
 });
+var _PaymentDetailsCard = require("./components/Payment/PaymentDetailsCard");
+Object.keys(_PaymentDetailsCard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PaymentDetailsCard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PaymentDetailsCard[key];
+    }
+  });
+});
 var _Timeline = require("./components/Timeline/Timeline");
 Object.keys(_Timeline).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1476,4 +1487,15 @@ Object.keys(_StatusTag).forEach(function (key) {
       return _StatusTag[key];
     }
   });
+});
+var _StepIndicator = require("./components/StepsProgress/StepIndicator");
+Object.keys(_StepIndicator).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _StepIndicator[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _StepIndicator[key];
+    }
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "2.3.65-beta.5",
+  "version": "2.3.65-beta.7",
   "description": "STOKR - Components Library",
   "main": "dist/index.js",
   "module": "dist/index.js",