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

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/Input/Textarea.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Textarea = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Textarea = require("./Textarea.styles");
+const _excluded = ["id", "name", "placeholder", "value", "error", "touched", "readOnly", "disabled", "rows", "minHeight", "wrapperStyle", "onChange", "onBlur", "onFocus"];
+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; }
+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 Textarea = _ref => {
+  let {
+      id,
+      name,
+      placeholder,
+      value,
+      error,
+      touched,
+      readOnly,
+      disabled,
+      rows,
+      minHeight,
+      wrapperStyle,
+      onChange,
+      onBlur,
+      onFocus
+    } = _ref,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  const handleChange = e => {
+    onChange === null || onChange === void 0 || onChange(e);
+  };
+  const handleBlur = e => {
+    onBlur === null || onBlur === void 0 || onBlur(e);
+  };
+  const handleFocus = e => {
+    onFocus === null || onFocus === void 0 || onFocus(e);
+  };
+  return /*#__PURE__*/_react.default.createElement(_Textarea.TextareaWrapper, {
+    style: wrapperStyle
+  }, /*#__PURE__*/_react.default.createElement(_Textarea.StyledTextarea, _extends({
+    id: id,
+    name: name,
+    value: value,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    readOnly: readOnly,
+    placeholder: placeholder,
+    disabled: disabled,
+    rows: rows,
+    minHeight: minHeight,
+    error: error && touched
+  }, restProps)));
+};
+exports.Textarea = Textarea;
+var _default = exports.default = Textarea;

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextareaWrapper = exports.StyledTextarea = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+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 TextareaWrapper = exports.TextareaWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Textareastyles__TextareaWrapper",
+  componentId: "sc-xnx9ic-0"
+})(["position:relative;display:block;"]);
+const StyledTextarea = exports.StyledTextarea = _styledComponents.default.textarea.withConfig({
+  displayName: "Textareastyles__StyledTextarea",
+  componentId: "sc-xnx9ic-1"
+})(["font-family:'Open sans';display:block;width:100%;min-height:", ";font-weight:400;font-size:12px;line-height:18px;letter-spacing:0.6px;padding:12px 16px;box-shadow:none;outline:0;border:1px solid ", ";border-radius:4px;color:", ";background-color:transparent;transition:border-color 0.2s;resize:vertical;&:focus,&:hover{border-color:", ";}&::placeholder{color:", ";opacity:1;text-transform:uppercase;font-weight:400;font-size:11px;letter-spacing:2px;}", " ", ""], props => props.minHeight || '100px', _theme.default.cLightGrey, _theme.default.cBlack, _theme.default.cGrey2, _theme.default.cGrey2, props => props.disabled && (0, _styledComponents.css)(["color:", ";cursor:not-allowed;&:focus,&:hover{border-color:", ";}"], _theme.default.cGrey2, _theme.default.cLightGrey), props => props.error && (0, _styledComponents.css)(["border-color:", ";&:focus,&:hover{border-color:", ";}"], _theme.default.cWarning, _theme.default.cWarning));

package/dist/components/Payment/PaymentDetailsCard.js

@@ -13,11 +13,11 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const CardContainer = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__CardContainer",
   componentId: "sc-e830fo-0"
-})(["background:", ";border-radius:15px;border:1px solid ", ";padding:20px 32px;"], _colors.default.white, _colors.default.lightGrey);
+})(["background:", ";border-radius:10px;border:1px solid ", ";padding:20px 32px;"], _colors.default.white, _colors.default.lightGrey);
 const CardTitle = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__CardTitle",
   componentId: "sc-e830fo-1"
-})(["font-size:16px;font-weight:600;margin-bottom:20px;color:", ";"], _colors.default.black);
+})(["font-size:12px;letter-spacing:0.6px;font-weight:600;color:", ";background:#f1f5f9;padding:12px 24px;margin:-20px -32px 20px -32px;border-radius:9px 9px 0 0;border-bottom:1px solid ", ";"], _colors.default.futureBlack, _colors.default.lightGrey);
 const AmountSection = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__AmountSection",
   componentId: "sc-e830fo-2"
@@ -25,7 +25,7 @@ const AmountSection = _styledComponents.default.div.withConfig({
 const AmountLabel = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__AmountLabel",
   componentId: "sc-e830fo-3"
-})(["font-size:14px;font-weight:300;line-height:20px;letter-spacing:0.08px;margin-bottom:12px;color:", ";"], _colors.default.grey2);
+})(["font-size:11px;font-weight:400;line-height:20px;text-transform:uppercase;letter-spacing:2px;margin-bottom:12px;color:", ";"], _colors.default.futureBlack);
 const AmountDisplay = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__AmountDisplay",
   componentId: "sc-e830fo-4"
@@ -41,7 +41,7 @@ const CurrencyIcon = _styledComponents.default.img.withConfig({
 const AmountValue = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__AmountValue",
   componentId: "sc-e830fo-7"
-})(["font-size:34px;font-weight:800;text-transform:uppercase;line-height:40px;letter-spacing:1.5px;word-wrap:break-word;"]);
+})(["font-size:34px;font-weight:600;text-transform:uppercase;line-height:40px;letter-spacing:1.5px;word-wrap:break-word;color:", ";"], _colors.default.futureBlack);
 const Separator = _styledComponents.default.hr.withConfig({
   displayName: "PaymentDetailsCard__Separator",
   componentId: "sc-e830fo-8"
@@ -53,19 +53,19 @@ const DetailsSection = _styledComponents.default.div.withConfig({
 const DetailRow = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__DetailRow",
   componentId: "sc-e830fo-10"
-})(["display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;&:last-child{margin-bottom:0;}"]);
+})(["display:flex;justify-content:space-between;align-items:flex-start;padding:10px 0;border-bottom:1px solid #f1f5f9;&:first-child{padding-top:0;}&:last-child{padding:10px 0 0 0;border-bottom:none;}"]);
 const DetailLabel = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__DetailLabel",
   componentId: "sc-e830fo-11"
-})(["display:flex;align-items:center;gap:10px;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0.1px;"]);
+})(["display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;line-height:20px;letter-spacing:0.5px;color:#56606f;i{font-size:14px;}"]);
 const DetailValue = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__DetailValue",
   componentId: "sc-e830fo-12"
-})(["font-size:16px;font-weight:700;line-height:24px;letter-spacing:0.1px;word-wrap:break-word;text-align:right;max-width:60%;color:", ";"], _colors.default.black);
+})(["font-size:14px;font-weight:600;line-height:20px;letter-spacing:0.5px;word-wrap:break-word;text-align:right;max-width:60%;color:", ";"], _colors.default.black);
 const PlaceholderValue = _styledComponents.default.span.withConfig({
   displayName: "PaymentDetailsCard__PlaceholderValue",
   componentId: "sc-e830fo-13"
-})(["color:", ";font-weight:400;"], _colors.default.grey2);
+})(["color:#62748e;font-weight:300;font-size:14px;letter-spacing:0.5px;"]);
 const InfoSectionContainer = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__InfoSectionContainer",
   componentId: "sc-e830fo-14"
@@ -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

@@ -7,65 +7,39 @@ exports.default = exports.StatusTag = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _InfoIcon = _interopRequireDefault(require("../InfoIcon/InfoIcon"));
 var _Icon = require("../Icon/Icon.style");
-var _checkIcon = require("../../static/images/check-icon.svg");
-var _crossIcon = require("../../static/images/cross-icon.svg");
-var _sentIcon = require("../../static/images/sent-icon.svg");
-var _documentIcon = require("../../static/images/document-icon.svg");
 var _transferIcon = require("../../static/images/transfer-icon.svg");
+var _checkmarkCircleIcon = require("../../static/images/checkmark-circle-icon.svg");
+var _closeCircleIcon = require("../../static/images/close-circle-icon.svg");
+var _docIcon = require("../../static/images/doc-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; }
 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 PaidIcon = _ref => {
-  let {
-    iconColor,
-    hoverColor,
-    disableHoverColor
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_StatusTag.PaidIconWrapper, {
-    iconColor: iconColor,
-    hoverColor: hoverColor,
-    disableHoverColor: disableHoverColor
-  }, /*#__PURE__*/_react.default.createElement(_checkIcon.ReactComponent, null));
-};
-const DeclinedIcon = _ref2 => {
-  let {
-    iconColor,
-    hoverColor,
-    disableHoverColor
-  } = _ref2;
-  return /*#__PURE__*/_react.default.createElement(_StatusTag.DeclinedIconWrapper, {
-    iconColor: iconColor,
-    hoverColor: hoverColor,
-    disableHoverColor: disableHoverColor
-  }, /*#__PURE__*/_react.default.createElement(_crossIcon.ReactComponent, null));
-};
-
 // Variant configuration - maps variant to icon and colors only
 const variantConfig = {
   pending: {
-    icon: /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
-      icon: _Icon.iconsMap.inProgress,
-      size: 12
+    icon: /*#__PURE__*/_react.default.createElement(_docIcon.ReactComponent, {
+      width: 12,
+      height: 12
     }),
-    iconColor: _colors.default.grey2,
-    hoverColor: _colors.default.warningOrange,
-    disableHoverColor: false
+    iconColor: '#021128',
+    hoverColor: '#021128',
+    disableHoverColor: true
   },
   initiated: {
-    icon: /*#__PURE__*/_react.default.createElement(_sentIcon.ReactComponent, {
-      width: 12,
-      height: 12
+    icon: /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+      icon: _Icon.iconsMap.inProgress,
+      size: 11
     }),
-    iconColor: _colors.default.grey2,
-    hoverColor: _colors.default.blue,
+    iconColor: '#032F78',
+    hoverColor: '#032F78',
     disableHoverColor: false
   },
   confirmed: {
-    icon: /*#__PURE__*/_react.default.createElement(_documentIcon.ReactComponent, {
+    icon: /*#__PURE__*/_react.default.createElement(_checkmarkCircleIcon.ReactComponent, {
       width: 12,
       height: 12
     }),
@@ -74,33 +48,26 @@ const variantConfig = {
     disableHoverColor: false
   },
   declined: {
-    icon: (iconColor, hoverColor, disableHoverColor) => /*#__PURE__*/_react.default.createElement(DeclinedIcon, {
-      iconColor: iconColor,
-      hoverColor: hoverColor,
-      disableHoverColor: disableHoverColor
+    icon: /*#__PURE__*/_react.default.createElement(_closeCircleIcon.ReactComponent, {
+      width: 12,
+      height: 12
     }),
-    iconColor: _colors.default.grey2,
+    iconColor: _colors.default.darkRed,
     hoverColor: _colors.default.darkRed,
-    disableHoverColor: false
+    disableHoverColor: false,
+    useStroke: true
   },
   paid: {
-    // icon: (iconColor, hoverColor, disableHoverColor) => (
-    //   <PaidIcon
-    //     iconColor={iconColor}
-    //     hoverColor={hoverColor}
-    //     disableHoverColor={disableHoverColor}
-    //   />
-    // ),
     icon: /*#__PURE__*/_react.default.createElement(_transferIcon.ReactComponent, {
       width: 14,
       height: 14
     }),
-    iconColor: _colors.default.grey2,
-    hoverColor: _colors.default.freshGreen,
+    iconColor: '#3D9626',
+    hoverColor: '#3D9626',
     disableHoverColor: false
   }
 };
-const StatusTag = _ref3 => {
+const StatusTag = _ref => {
   var _variantData$disableH;
   let {
       variant,
@@ -111,6 +78,7 @@ const StatusTag = _ref3 => {
       iconColor,
       hoverColor,
       disableHoverColor,
+      colorActive,
       minWidth,
       className,
       containerStyle,
@@ -118,8 +86,8 @@ const StatusTag = _ref3 => {
       textStyle,
       onClick,
       center
-    } = _ref3,
-    props = _objectWithoutProperties(_ref3, _excluded);
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   // If variant is provided, use its configuration (but allow overrides)
   const variantData = variant ? variantConfig[variant] : null;
 
@@ -128,18 +96,12 @@ const StatusTag = _ref3 => {
   const finalHoverColor = hoverColor !== undefined ? hoverColor : variantData === null || variantData === void 0 ? void 0 : variantData.hoverColor;
   const finalDisableHoverColor = disableHoverColor !== undefined ? disableHoverColor : (_variantData$disableH = variantData === null || variantData === void 0 ? void 0 : variantData.disableHoverColor) !== null && _variantData$disableH !== void 0 ? _variantData$disableH : false;
 
-  // Determine which icon to use - handle function icons (for paid/declined)
+  // Determine which icon to use
   let finalIcon = null;
   if (icon) {
     finalIcon = icon;
   } 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);
-    } else {
-      // Icon is a React element (pending/initiated/confirmed)
-      finalIcon = variantData.icon;
-    }
+    finalIcon = variantData.icon;
   }
   const content = /*#__PURE__*/_react.default.createElement(_StatusTag.StatusTagContainer, _extends({
     className: className,
@@ -153,10 +115,14 @@ const StatusTag = _ref3 => {
     iconColor: finalIconColor,
     hoverColor: finalHoverColor,
     disableHoverColor: finalDisableHoverColor,
-    style: iconStyle,
-    isCustomIcon: typeof (variantData === null || variantData === void 0 ? void 0 : variantData.icon) === 'function'
+    colorActive: colorActive,
+    useStroke: variantData === null || variantData === void 0 ? void 0 : variantData.useStroke,
+    style: iconStyle
   }, 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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StatusText = exports.StatusTagWrapper = exports.StatusTagContainer = exports.PaidIconWrapper = exports.IconWrapper = exports.DeclinedIconWrapper = void 0;
+exports.StatusText = exports.StatusTagWrapper = exports.StatusTagContainer = exports.IconWrapper = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _colors = _interopRequireDefault(require("../../styles/colors"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -18,20 +18,8 @@ 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;}svg path,svg circle,svg rect,svg line{", "}", ""], props => props.colorActive && props.hoverColor ? props.hoverColor : props.iconColor || _colors.default.grey2, props => props.useStroke ? "\n      stroke: currentColor;\n      fill: none;\n    " : "\n      fill: currentColor;\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);
-
-// 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  "));
-
-// 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  "));
+})(["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  "));

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/index.js

@@ -443,6 +443,28 @@ Object.keys(_InputWithButton).forEach(function (key) {
     }
   });
 });
+var _Textarea = require("./components/Input/Textarea");
+Object.keys(_Textarea).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Textarea[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Textarea[key];
+    }
+  });
+});
+var _TableFilterDropdown = require("./components/Input/TableFilterDropdown");
+Object.keys(_TableFilterDropdown).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TableFilterDropdown[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TableFilterDropdown[key];
+    }
+  });
+});
 var _InvestCalculator = require("./components/InvestCalculator/InvestCalculator");
 Object.keys(_InvestCalculator).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/static/images/checkmark-circle-icon.svg

@@ -0,0 +1,4 @@
+<svg width="800" height="800" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.8086 9.70558C18.1983 9.31421 18.1969 8.68105 17.8056 8.29137C17.4142 7.90169 16.781 7.90305 16.3913 8.29442L10.6215 14.0892L7.30211 10.816C6.90886 10.4283 6.27571 10.4327 5.88793 10.8259C5.50015 11.2192 5.50459 11.8524 5.89784 12.2401L9.92581 16.212C10.3177 16.5985 10.9482 16.5956 11.3366 16.2056L17.8086 9.70558Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z" fill="currentColor"/>
+</svg>

package/dist/static/images/close-circle-icon.svg

@@ -0,0 +1,3 @@
+<svg width="800" height="800" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 9L11.9999 11.9999M11.9999 11.9999L14.9999 14.9999M11.9999 11.9999L9 14.9999M11.9999 11.9999L14.9999 9M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 1C4.34314 1 3 2.34315 3 4V20C3 21.6569 4.34315 23 6 23H19C20.6569 23 22 21.6569 22 20V10C22 9.73478 21.8946 9.48043 21.7071 9.29289L13.7071 1.29292C13.6114 1.19722 13.4983 1.1229 13.3753 1.07308C13.2572 1.02527 13.1299 1 13 1H6ZM12 3H6C5.44771 3 5 3.44771 5 4V20C5 20.5523 5.44772 21 6 21H19C19.5523 21 20 20.5523 20 20V11H13C12.4477 11 12 10.5523 12 10V3ZM18.5858 9.00003L14 4.41424V9.00003H18.5858Z" fill="#000000"/>
+</svg>

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/dist/styles/colors.js

@@ -53,6 +53,7 @@ const colors = exports.colors = {
   midRed: '#e3210d',
   warningYellow: '#facc33',
   darkRed: '#D2200D',
-  warningOrange: '#EB8003'
+  warningOrange: '#EB8003',
+  futureBlack: '#021128'
 };
 var _default = exports.default = colors;

package/package.json

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