@stokr/components-library 2.3.65-beta.11 → 2.3.65-beta.12

package/dist/components/Input/MultiSelect.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.MultiSelect = void 0;
+exports.default = exports.OptionLabel = exports.MultiSelect = exports.CheckboxWrapperDiv = exports.CheckboxDiv = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactSelect = _interopRequireWildcard(require("react-select"));
@@ -28,15 +28,17 @@ 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",
+
+// Exported for reuse in TableFilterDropdown
+const CheckboxWrapperDiv = exports.CheckboxWrapperDiv = _styledComponents.default.div.withConfig({
+  displayName: "MultiSelect__CheckboxWrapperDiv",
   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",
+const CheckboxDiv = exports.CheckboxDiv = _styledComponents.default.div.withConfig({
+  displayName: "MultiSelect__CheckboxDiv",
   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({
+const OptionLabel = exports.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);
@@ -53,9 +55,9 @@ const CheckboxOption = props => {
     innerRef,
     innerProps
   } = props;
-  return /*#__PURE__*/_react.default.createElement(CheckboxWrapper, _extends({
+  return /*#__PURE__*/_react.default.createElement(CheckboxWrapperDiv, _extends({
     ref: innerRef
-  }, innerProps), /*#__PURE__*/_react.default.createElement(Checkbox, {
+  }, innerProps), /*#__PURE__*/_react.default.createElement(CheckboxDiv, {
     isSelected: isSelected
   }, /*#__PURE__*/_react.default.createElement(_checkIcon.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(OptionLabel, null, label));
 };

package/dist/components/Input/TableFilterDropdown.js

@@ -0,0 +1,210 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TableFilterDropdown = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+var _checkIcon = require("../../static/images/check-icon.svg");
+var _filterIcon = require("../../static/images/filter-icon.svg");
+var _MultiSelect = require("./MultiSelect");
+const _excluded = ["label", "options", "value", "onChange", "icon", "minWidth", "maxWidth", "menuAlign", "menuTop"];
+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; }
+// Trigger container - matches table header styling
+const TriggerContainer = _styledComponents.default.div.withConfig({
+  displayName: "TableFilterDropdown__TriggerContainer",
+  componentId: "sc-z6x0ne-0"
+})(["display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;user-select:none;white-space:nowrap;"]);
+const IconWrapper = _styledComponents.default.div.withConfig({
+  displayName: "TableFilterDropdown__IconWrapper",
+  componentId: "sc-z6x0ne-1"
+})(["display:flex;align-items:center;justify-content:center;width:16px;height:16px;position:relative;svg{width:14px;height:14px;}svg path,svg line,svg circle,svg rect{stroke:currentColor;}"]);
+
+// Active indicator dot
+const ActiveDot = _styledComponents.default.div.withConfig({
+  displayName: "TableFilterDropdown__ActiveDot",
+  componentId: "sc-z6x0ne-2"
+})(["position:absolute;top:-2px;right:-2px;width:6px;height:6px;background-color:", ";border-radius:50%;"], _colors.default.blue);
+
+// Dropdown container
+const DropdownContainer = _styledComponents.default.div.withConfig({
+  displayName: "TableFilterDropdown__DropdownContainer",
+  componentId: "sc-z6x0ne-3"
+})(["position:relative;display:inline-block;"]);
+
+// Dropdown menu - now rendered via portal with fixed positioning
+const DropdownMenu = _styledComponents.default.div.withConfig({
+  displayName: "TableFilterDropdown__DropdownMenu",
+  componentId: "sc-z6x0ne-4"
+})(["position:fixed;z-index:10000;min-width:150px;max-width:300px;background-color:", ";border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.15);border:1px solid ", ";overflow:hidden;"], _colors.default.white, _colors.default.lightGrey);
+const OptionsList = _styledComponents.default.div.withConfig({
+  displayName: "TableFilterDropdown__OptionsList",
+  componentId: "sc-z6x0ne-5"
+})(["max-height:300px;overflow-y:auto;"]);
+const TableFilterDropdown = _ref => {
+  let {
+      label,
+      options,
+      value = [],
+      onChange,
+      icon: CustomIcon,
+      minWidth,
+      maxWidth,
+      menuAlign = 'left',
+      menuTop = 8
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [menuPosition, setMenuPosition] = (0, _react.useState)({
+    top: 0,
+    left: 0
+  });
+  const containerRef = (0, _react.useRef)(null);
+  const triggerRef = (0, _react.useRef)(null);
+  const menuRef = (0, _react.useRef)(null);
+  const hasActiveFilters = value.length > 0;
+
+  // Calculate menu position based on trigger element
+  const updateMenuPosition = (0, _react.useCallback)(() => {
+    if (!triggerRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const menuWidth = minWidth || 150;
+    let left = triggerRect.left;
+    if (menuAlign === 'right') {
+      left = triggerRect.right - menuWidth;
+    }
+
+    // Ensure menu doesn't go off-screen horizontally
+    const viewportWidth = window.innerWidth;
+    if (left + menuWidth > viewportWidth - 10) {
+      left = viewportWidth - menuWidth - 10;
+    }
+    if (left < 10) {
+      left = 10;
+    }
+    setMenuPosition({
+      top: triggerRect.bottom + menuTop,
+      left: left
+    });
+  }, [menuAlign, menuTop, minWidth]);
+
+  // Update position when menu opens and on scroll/resize
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      updateMenuPosition();
+      const handleScrollOrResize = () => {
+        updateMenuPosition();
+      };
+      window.addEventListener('scroll', handleScrollOrResize, true);
+      window.addEventListener('resize', handleScrollOrResize);
+      return () => {
+        window.removeEventListener('scroll', handleScrollOrResize, true);
+        window.removeEventListener('resize', handleScrollOrResize);
+      };
+    }
+  }, [isOpen, updateMenuPosition]);
+
+  // Close dropdown when clicking outside or pressing Escape
+  (0, _react.useEffect)(() => {
+    if (!isOpen) return;
+    const handleClickOutside = event => {
+      const clickedOutsideContainer = containerRef.current && !containerRef.current.contains(event.target);
+      const clickedOutsideMenu = menuRef.current && !menuRef.current.contains(event.target);
+      if (clickedOutsideContainer && clickedOutsideMenu) {
+        setIsOpen(false);
+      }
+    };
+    const handleEscape = event => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleEscape);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen]);
+  const handleTriggerClick = (0, _react.useCallback)(e => {
+    e.stopPropagation();
+    setIsOpen(prev => !prev);
+  }, []);
+  const handleOptionClick = (0, _react.useCallback)((optionValue, e) => {
+    e.stopPropagation();
+    const newValue = value.includes(optionValue) ? value.filter(v => v !== optionValue) : [...value, optionValue];
+    onChange === null || onChange === void 0 || onChange(newValue);
+  }, [value, onChange]);
+  const IconComponent = CustomIcon || _filterIcon.ReactComponent;
+
+  // Render menu in portal
+  const renderMenu = () => {
+    if (!isOpen) return null;
+    const menu = /*#__PURE__*/_react.default.createElement(DropdownMenu, {
+      ref: menuRef,
+      style: {
+        top: menuPosition.top,
+        left: menuPosition.left,
+        minWidth: minWidth || 150,
+        maxWidth: maxWidth || 300
+      }
+    }, /*#__PURE__*/_react.default.createElement(OptionsList, null, options.map(option => {
+      const isSelected = value.includes(option.value);
+      return /*#__PURE__*/_react.default.createElement(_MultiSelect.CheckboxWrapperDiv, {
+        key: option.value,
+        onClick: e => handleOptionClick(option.value, e)
+      }, /*#__PURE__*/_react.default.createElement(_MultiSelect.CheckboxDiv, {
+        isSelected: isSelected
+      }, /*#__PURE__*/_react.default.createElement(_checkIcon.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(_MultiSelect.OptionLabel, null, option.label));
+    })));
+    return /*#__PURE__*/(0, _reactDom.createPortal)(menu, document.body);
+  };
+  return /*#__PURE__*/_react.default.createElement(DropdownContainer, _extends({
+    ref: containerRef
+  }, props), /*#__PURE__*/_react.default.createElement(TriggerContainer, {
+    ref: triggerRef,
+    onClick: handleTriggerClick,
+    "data-clickable": "true"
+  }, label && /*#__PURE__*/_react.default.createElement("span", null, label), /*#__PURE__*/_react.default.createElement(IconWrapper, null, /*#__PURE__*/_react.default.createElement(IconComponent, null), hasActiveFilters && /*#__PURE__*/_react.default.createElement(ActiveDot, null))), renderMenu());
+};
+exports.TableFilterDropdown = TableFilterDropdown;
+TableFilterDropdown.propTypes = {
+  /** Label text displayed next to the filter icon */
+  label: _propTypes.default.string,
+  /** Array of options to display */
+  options: _propTypes.default.arrayOf(_propTypes.default.shape({
+    value: _propTypes.default.string.isRequired,
+    label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired
+  })).isRequired,
+  /** Array of selected values */
+  value: _propTypes.default.arrayOf(_propTypes.default.string),
+  /** Callback when selection changes: (newValues) => void */
+  onChange: _propTypes.default.func,
+  /** Custom icon component (defaults to FilterIcon) */
+  icon: _propTypes.default.elementType,
+  /** Minimum width of the dropdown menu */
+  minWidth: _propTypes.default.number,
+  /** Maximum width of the dropdown menu */
+  maxWidth: _propTypes.default.number,
+  /** Alignment of the dropdown menu */
+  menuAlign: _propTypes.default.oneOf(['left', 'right']),
+  /** Top offset for the dropdown menu in pixels (default: 8) */
+  menuTop: _propTypes.default.number
+};
+TableFilterDropdown.defaultProps = {
+  value: [],
+  onChange: () => {},
+  minWidth: 150,
+  maxWidth: 300,
+  menuAlign: 'left',
+  menuTop: 8
+};
+var _default = exports.default = TableFilterDropdown;

package/dist/components/Payment/PaymentDetailsCard.js

@@ -123,7 +123,8 @@ const PaymentDetailsCard = _ref2 => {
     amountSection,
     details,
     infoSection,
-    showSeparators = true
+    showSeparators = true,
+    containerStyle
   } = _ref2;
   // Render amount section
   const renderAmountSection = () => {
@@ -183,7 +184,9 @@ const PaymentDetailsCard = _ref2 => {
     if (!infoSection) return null;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showSeparators && /*#__PURE__*/_react.default.createElement(Separator, null), /*#__PURE__*/_react.default.createElement(InfoSectionContainer, null, infoSection));
   };
-  return /*#__PURE__*/_react.default.createElement(CardContainer, null, title && /*#__PURE__*/_react.default.createElement(CardTitle, null, title), renderAmountSection(), renderDetailsSection(), renderInfoSection());
+  return /*#__PURE__*/_react.default.createElement(CardContainer, {
+    style: containerStyle
+  }, title && /*#__PURE__*/_react.default.createElement(CardTitle, null, title), renderAmountSection(), renderDetailsSection(), renderInfoSection());
 };
 exports.PaymentDetailsCard = PaymentDetailsCard;
 var _default = exports.default = PaymentDetailsCard;

package/dist/components/Snackbar/Snackbar.js

@@ -123,10 +123,13 @@ const SnackbarItem = _ref => {
     }
   };
   const displayIcon = icon !== undefined ? icon : defaultIcons[variant];
+  const isPermanent = duration === 'permanent' || duration === 0;
   return /*#__PURE__*/_react.default.createElement(_Snackbar.SnackbarWrapper, {
     $variant: variant,
     $isExiting: isExiting,
     $hasClick: !!onClick,
+    $duration: duration,
+    $isPermanent: isPermanent,
     onClick: onClick ? handleClick : undefined
   }, displayIcon && /*#__PURE__*/_react.default.createElement(_Snackbar.IconWrapper, {
     $variant: variant

package/dist/components/Snackbar/Snackbar.styles.js

@@ -14,6 +14,9 @@ const slideInLeft = (0, _styledComponents.keyframes)(["from{opacity:0;transform:
 const slideInUp = (0, _styledComponents.keyframes)(["from{opacity:0;transform:translateY(100%);}to{opacity:1;transform:translateY(0);}"]);
 const slideInDown = (0, _styledComponents.keyframes)(["from{opacity:0;transform:translateY(-100%);}to{opacity:1;transform:translateY(0);}"]);
 
+// Progress bar animation - shrinks from 100% to 0%
+const progressExpire = (0, _styledComponents.keyframes)(["from{width:100%;}to{width:0%;}"]);
+
 // Variant configurations
 const variantStyles = exports.variantStyles = {
   info: {
@@ -60,31 +63,37 @@ const SnackbarContainer = exports.SnackbarContainer = _styledComponents.default.
 const SnackbarWrapper = exports.SnackbarWrapper = _styledComponents.default.div.withConfig({
   displayName: "Snackbarstyles__SnackbarWrapper",
   componentId: "sc-xf2wxi-1"
-})(["display:flex;align-items:center;gap:12px;min-width:320px;max-width:480px;padding:12px 16px;background-color:", ";box-shadow:0 1px 2px -1px rgba(0,0,0,0.12);border-radius:6px;border:1px solid ", ";border-bottom:3px solid ", ";pointer-events:auto;animation:", " 0.3s ease-out forwards;", ""], _colors.default.white, _colors.default.grey, _ref3 => {
-  var _variantStyles$$varia;
+})(["position:relative;display:flex;align-items:center;gap:12px;min-width:320px;max-width:480px;padding:12px 16px;background-color:", ";box-shadow:0 1px 2px -1px rgba(0,0,0,0.12);border-radius:6px;border:1px solid ", ";pointer-events:auto;overflow:hidden;animation:", " 0.3s ease-out forwards;&::after{content:'';position:absolute;bottom:0;left:0;height:3px;background-color:", ";border-radius:0 0 0 6px;", "}", ""], _colors.default.white, _colors.default.grey, _ref3 => {
   let {
-    $variant
+    $isExiting
   } = _ref3;
-  return ((_variantStyles$$varia = variantStyles[$variant]) === null || _variantStyles$$varia === void 0 ? void 0 : _variantStyles$$varia.borderColor) || _colors.default.blue;
+  return $isExiting ? slideOut : 'none';
 }, _ref4 => {
+  var _variantStyles$$varia;
   let {
-    $isExiting
+    $variant
   } = _ref4;
-  return $isExiting ? slideOut : 'none';
+  return ((_variantStyles$$varia = variantStyles[$variant]) === null || _variantStyles$$varia === void 0 ? void 0 : _variantStyles$$varia.borderColor) || _colors.default.blue;
 }, _ref5 => {
   let {
-    $hasClick
+    $duration,
+    $isPermanent
   } = _ref5;
+  return $isPermanent ? (0, _styledComponents.css)(["width:100%;"]) : (0, _styledComponents.css)(["animation:", " ", "ms linear forwards;"], progressExpire, $duration);
+}, _ref6 => {
+  let {
+    $hasClick
+  } = _ref6;
   return $hasClick && (0, _styledComponents.css)(["cursor:pointer;&:hover{box-shadow:0 4px 24px rgba(0,0,0,0.16);}"]);
 });
 const IconWrapper = exports.IconWrapper = _styledComponents.default.div.withConfig({
   displayName: "Snackbarstyles__IconWrapper",
   componentId: "sc-xf2wxi-2"
-})(["flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:", ";svg{width:100%;height:100%;}"], _ref6 => {
+})(["flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:", ";svg{width:100%;height:100%;}"], _ref7 => {
   var _variantStyles$$varia2;
   let {
     $variant
-  } = _ref6;
+  } = _ref7;
   return ((_variantStyles$$varia2 = variantStyles[$variant]) === null || _variantStyles$$varia2 === void 0 ? void 0 : _variantStyles$$varia2.iconColor) || _colors.default.blue;
 });
 const Message = exports.Message = _styledComponents.default.div.withConfig({

package/dist/components/StatusTag/StatusTag.js

@@ -14,7 +14,7 @@ var _documentIcon = require("../../static/images/document-icon.svg");
 var _transferIcon = require("../../static/images/transfer-icon.svg");
 var _colors = _interopRequireDefault(require("../../styles/colors"));
 var _StatusTag = require("./StatusTag.styles");
-const _excluded = ["variant", "icon", "text", "tooltip", "tooltipProps", "iconColor", "hoverColor", "disableHoverColor", "minWidth", "className", "containerStyle", "iconStyle", "textStyle", "onClick", "center"];
+const _excluded = ["variant", "icon", "text", "tooltip", "tooltipProps", "iconColor", "hoverColor", "disableHoverColor", "colorActive", "minWidth", "className", "containerStyle", "iconStyle", "textStyle", "onClick", "center"];
 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; }
@@ -23,24 +23,28 @@ const PaidIcon = _ref => {
   let {
     iconColor,
     hoverColor,
-    disableHoverColor
+    disableHoverColor,
+    colorActive
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_StatusTag.PaidIconWrapper, {
     iconColor: iconColor,
     hoverColor: hoverColor,
-    disableHoverColor: disableHoverColor
+    disableHoverColor: disableHoverColor,
+    colorActive: colorActive
   }, /*#__PURE__*/_react.default.createElement(_checkIcon.ReactComponent, null));
 };
 const DeclinedIcon = _ref2 => {
   let {
     iconColor,
     hoverColor,
-    disableHoverColor
+    disableHoverColor,
+    colorActive
   } = _ref2;
   return /*#__PURE__*/_react.default.createElement(_StatusTag.DeclinedIconWrapper, {
     iconColor: iconColor,
     hoverColor: hoverColor,
-    disableHoverColor: disableHoverColor
+    disableHoverColor: disableHoverColor,
+    colorActive: colorActive
   }, /*#__PURE__*/_react.default.createElement(_crossIcon.ReactComponent, null));
 };
 
@@ -74,10 +78,11 @@ const variantConfig = {
     disableHoverColor: false
   },
   declined: {
-    icon: (iconColor, hoverColor, disableHoverColor) => /*#__PURE__*/_react.default.createElement(DeclinedIcon, {
+    icon: (iconColor, hoverColor, disableHoverColor, colorActive) => /*#__PURE__*/_react.default.createElement(DeclinedIcon, {
       iconColor: iconColor,
       hoverColor: hoverColor,
-      disableHoverColor: disableHoverColor
+      disableHoverColor: disableHoverColor,
+      colorActive: colorActive
     }),
     iconColor: _colors.default.grey2,
     hoverColor: _colors.default.darkRed,
@@ -111,6 +116,7 @@ const StatusTag = _ref3 => {
       iconColor,
       hoverColor,
       disableHoverColor,
+      colorActive,
       minWidth,
       className,
       containerStyle,
@@ -135,7 +141,7 @@ const StatusTag = _ref3 => {
   } else if (variantData !== null && variantData !== void 0 && variantData.icon) {
     if (typeof variantData.icon === 'function') {
       // Icon is a function (paid/declined) - pass color props
-      finalIcon = variantData.icon(finalIconColor, finalHoverColor, finalDisableHoverColor);
+      finalIcon = variantData.icon(finalIconColor, finalHoverColor, finalDisableHoverColor, colorActive);
     } else {
       // Icon is a React element (pending/initiated/confirmed)
       finalIcon = variantData.icon;
@@ -153,10 +159,14 @@ const StatusTag = _ref3 => {
     iconColor: finalIconColor,
     hoverColor: finalHoverColor,
     disableHoverColor: finalDisableHoverColor,
+    colorActive: colorActive,
     style: iconStyle,
     isCustomIcon: typeof (variantData === null || variantData === void 0 ? void 0 : variantData.icon) === 'function'
   }, finalIcon), text && /*#__PURE__*/_react.default.createElement(_StatusTag.StatusText, {
-    style: textStyle
+    style: textStyle,
+    hoverColor: finalHoverColor,
+    disableHoverColor: finalDisableHoverColor,
+    colorActive: colorActive
   }, text)));
 
   // Wrap with InfoIcon tooltip if tooltip is provided

package/dist/components/StatusTag/StatusTag.styles.js

@@ -18,20 +18,20 @@ const StatusTagWrapper = exports.StatusTagWrapper = _styledComponents.default.di
 const IconWrapper = exports.IconWrapper = _styledComponents.default.div.withConfig({
   displayName: "StatusTagstyles__IconWrapper",
   componentId: "sc-24azs1-2"
-})(["display:flex;align-items:center;justify-content:center;flex-shrink:0;width:12px;height:12px;color:", ";transition:color 0.2s ease;svg{width:100%;height:100%;display:block;}", " ", ""], props => props.iconColor || _colors.default.grey2, props => !props.isCustomIcon && "\n    svg path,\n    svg circle,\n    svg rect,\n    svg line {\n      ".concat(!props.disableHoverColor ? "fill: currentColor;" : '', "\n    }\n  "), props => !props.disableHoverColor && props.hoverColor && "\n    ".concat(StatusTagContainer, ":hover & {\n      color: ").concat(props.hoverColor, ";\n    }\n  "));
+})(["display:flex;align-items:center;justify-content:center;flex-shrink:0;width:12px;height:12px;color:", ";transition:color 0.2s ease;svg{width:100%;height:100%;display:block;}", " ", ""], props => props.colorActive && props.hoverColor ? props.hoverColor : props.iconColor || _colors.default.grey2, props => !props.isCustomIcon && "\n    svg path,\n    svg circle,\n    svg rect,\n    svg line {\n      ".concat(!props.disableHoverColor ? "fill: currentColor;" : '', "\n    }\n  "), props => !props.disableHoverColor && !props.colorActive && props.hoverColor && "\n    ".concat(StatusTagContainer, ":hover & {\n      color: ").concat(props.hoverColor, ";\n    }\n  "));
 const StatusText = exports.StatusText = _styledComponents.default.span.withConfig({
   displayName: "StatusTagstyles__StatusText",
   componentId: "sc-24azs1-3"
-})(["font-size:12px;font-weight:600;line-height:18px;color:", ";letter-spacing:0.6px;"], _colors.default.black);
+})(["font-size:12px;font-weight:600;line-height:18px;color:", ";letter-spacing:0.6px;transition:color 0.2s ease;", ""], props => props.colorActive && props.hoverColor ? props.hoverColor : _colors.default.black, props => !props.disableHoverColor && !props.colorActive && props.hoverColor && "\n    ".concat(StatusTagContainer, ":hover & {\n      color: ").concat(props.hoverColor, ";\n    }\n  "));
 
 // Paid icon wrapper (check + green circle)
 const PaidIconWrapper = exports.PaidIconWrapper = _styledComponents.default.div.withConfig({
   displayName: "StatusTagstyles__PaidIconWrapper",
   componentId: "sc-24azs1-4"
-})(["width:12px;height:12px;border-radius:50%;background-color:", ";display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color 0.2s ease;svg{width:8px;height:8px;}svg path{stroke:", ";}", ""], props => props.iconColor || _colors.default.grey2, _colors.default.white, props => !props.disableHoverColor && props.hoverColor && "\n    ".concat(StatusTagContainer, ":hover & {\n      background-color: ").concat(props.hoverColor, ";\n    }\n  "));
+})(["width:12px;height:12px;border-radius:50%;background-color:", ";display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color 0.2s ease;svg{width:8px;height:8px;}svg path{stroke:", ";}", ""], props => props.colorActive && props.hoverColor ? props.hoverColor : props.iconColor || _colors.default.grey2, _colors.default.white, props => !props.disableHoverColor && !props.colorActive && props.hoverColor && "\n    ".concat(StatusTagContainer, ":hover & {\n      background-color: ").concat(props.hoverColor, ";\n    }\n  "));
 
 // Declined icon wrapper (cross + red circle)
 const DeclinedIconWrapper = exports.DeclinedIconWrapper = _styledComponents.default.div.withConfig({
   displayName: "StatusTagstyles__DeclinedIconWrapper",
   componentId: "sc-24azs1-5"
-})(["width:12px;height:12px;border-radius:50%;background-color:", ";display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color 0.2s ease;svg{width:6px;height:6px;}svg path{stroke:", ";}", ""], props => props.iconColor || _colors.default.grey2, _colors.default.white, props => !props.disableHoverColor && props.hoverColor && "\n    ".concat(StatusTagContainer, ":hover & {\n      background-color: ").concat(props.hoverColor, ";\n    }\n  "));
+})(["width:12px;height:12px;border-radius:50%;background-color:", ";display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color 0.2s ease;svg{width:6px;height:6px;}svg path{stroke:", ";}", ""], props => props.colorActive && props.hoverColor ? props.hoverColor : props.iconColor || _colors.default.grey2, _colors.default.white, props => !props.disableHoverColor && !props.colorActive && props.hoverColor && "\n    ".concat(StatusTagContainer, ":hover & {\n      background-color: ").concat(props.hoverColor, ";\n    }\n  "));

package/dist/components/Timeline/Timeline.styles.js

@@ -48,7 +48,7 @@ const ConnectingLine = exports.ConnectingLine = _styledComponents.default.div.wi
 const StepContent = exports.StepContent = _styledComponents.default.div.withConfig({
   displayName: "Timelinestyles__StepContent",
   componentId: "sc-1anwsc5-5"
-})(["flex:1;padding-bottom:", ";display:flex;flex-direction:column;gap:4px;"], props => props.hasCaption ? '8px' : '0');
+})(["flex:1;padding-bottom:8px;display:flex;flex-direction:column;gap:4px;"]);
 const StepHeader = exports.StepHeader = _styledComponents.default.div.withConfig({
   displayName: "Timelinestyles__StepHeader",
   componentId: "sc-1anwsc5-6"

package/dist/components/Timeline/TimelineStep.js

@@ -70,7 +70,6 @@ const TimelineStep = _ref => {
     state: state,
     nextState: nextState
   })), /*#__PURE__*/_react.default.createElement(_Timeline.StepContent, {
-    hasCaption: !!caption,
     style: contentStyle
   }, formattedDate && /*#__PURE__*/_react.default.createElement(_Timeline.StepDate, null, formattedDate), /*#__PURE__*/_react.default.createElement(_Timeline.StepHeader, null, /*#__PURE__*/_react.default.createElement(_Timeline.StepTitle, {
     state: state,

package/dist/static/images/filter-icon.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M1.75 3.5H12.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+  <path d="M3.5 7H10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+  <path d="M5.25 10.5H8.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
+

package/package.json

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