@stokr/components-library 2.3.65-beta.14 → 2.3.65-beta.16

package/dist/components/ConfirmModal/ConfirmModal.js

@@ -43,6 +43,7 @@ const ConfirmModalComponent = _ref => {
   } = _ref;
   const titleRef = (0, _react.useRef)(null);
   const [titleHeight, setTitleHeight] = (0, _react.useState)(0);
+  console.log('🔍 ~  ~ src/components/ConfirmModal/ConfirmModal.js:37 ~ titleHeight:', titleHeight);
 
   // ResizeObserver for title height (for the blue line)
   (0, _react.useEffect)(() => {
@@ -55,7 +56,7 @@ const ConfirmModalComponent = _ref => {
     });
     resizeObserver.observe(titleRef.current);
     return () => resizeObserver.disconnect();
-  }, []);
+  }, [title]);
   const handleConfirm = (0, _react.useCallback)(function () {
     let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
     onConfirm === null || onConfirm === void 0 || onConfirm(value);

package/dist/components/ConfirmModal/ConfirmModal.styles.js

@@ -18,7 +18,7 @@ const ContainerWithLine = exports.ContainerWithLine = (0, _styledComponents.defa
   let {
     height
   } = _ref;
-  return height ? height - 10 : 50;
+  return height ? height - 15 : 50;
 }, props => props.lineColor || _colors.default.blue);
 const RedBar = exports.RedBar = _styledComponents.default.div.withConfig({
   displayName: "ConfirmModalstyles__RedBar",

package/dist/components/Input/TableFilterDropdown.js

@@ -12,7 +12,7 @@ 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"];
+const _excluded = ["label", "options", "value", "onChange", "icon", "minWidth", "maxWidth", "menuAlign", "menuTop", "showClearAll", "clearAllText"];
 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); }
@@ -49,6 +49,10 @@ const OptionsList = _styledComponents.default.div.withConfig({
   displayName: "TableFilterDropdown__OptionsList",
   componentId: "sc-z6x0ne-5"
 })(["max-height:300px;overflow-y:auto;"]);
+const ClearAllOption = _styledComponents.default.div.withConfig({
+  displayName: "TableFilterDropdown__ClearAllOption",
+  componentId: "sc-z6x0ne-6"
+})(["display:flex;align-items:center;padding:16px 12px;cursor:pointer;font-size:14px;font-weight:400;letter-spacing:0.6px;color:", ";border-top:1px solid ", ";transition:background-color 0.15s ease;&:hover{background-color:", ";}"], _colors.default.blue, _colors.default.lightGrey, _colors.default.grey);
 const TableFilterDropdown = _ref => {
   let {
       label,
@@ -59,7 +63,9 @@ const TableFilterDropdown = _ref => {
       minWidth,
       maxWidth,
       menuAlign = 'left',
-      menuTop = 8
+      menuTop = 8,
+      showClearAll = false,
+      clearAllText = 'Clear all'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
@@ -143,6 +149,10 @@ const TableFilterDropdown = _ref => {
     const newValue = value.includes(optionValue) ? value.filter(v => v !== optionValue) : [...value, optionValue];
     onChange === null || onChange === void 0 || onChange(newValue);
   }, [value, onChange]);
+  const handleClearAll = (0, _react.useCallback)(e => {
+    e.stopPropagation();
+    onChange === null || onChange === void 0 || onChange([]);
+  }, [onChange]);
   const IconComponent = CustomIcon || _filterIcon.ReactComponent;
 
   // Render menu in portal
@@ -164,7 +174,9 @@ const TableFilterDropdown = _ref => {
       }, /*#__PURE__*/_react.default.createElement(_MultiSelect.CheckboxDiv, {
         isSelected: isSelected
       }, /*#__PURE__*/_react.default.createElement(_checkIcon.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(_MultiSelect.OptionLabel, null, option.label));
-    })));
+    })), showClearAll && hasActiveFilters && /*#__PURE__*/_react.default.createElement(ClearAllOption, {
+      onClick: handleClearAll
+    }, clearAllText));
     return /*#__PURE__*/(0, _reactDom.createPortal)(menu, document.body);
   };
   return /*#__PURE__*/_react.default.createElement(DropdownContainer, _extends({
@@ -197,7 +209,11 @@ TableFilterDropdown.propTypes = {
   /** 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
+  menuTop: _propTypes.default.number,
+  /** Show "Clear all" option at the bottom of the list */
+  showClearAll: _propTypes.default.bool,
+  /** Custom text for the "Clear all" option */
+  clearAllText: _propTypes.default.string
 };
 TableFilterDropdown.defaultProps = {
   value: [],
@@ -205,6 +221,8 @@ TableFilterDropdown.defaultProps = {
   minWidth: 150,
   maxWidth: 300,
   menuAlign: 'left',
-  menuTop: 8
+  menuTop: 8,
+  showClearAll: false,
+  clearAllText: 'Clear all'
 };
 var _default = exports.default = TableFilterDropdown;

package/dist/components/Modal/SuccessModal/SuccessModal.js

@@ -0,0 +1,173 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.showSuccess = exports.showProgress = exports.default = exports.SuccessModalComponent = exports.SuccessModal = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _client = require("react-dom/client");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _dotlottieReact = require("@lottiefiles/dotlottie-react");
+var _Modal = require("../Modal");
+var _SuccessModal = require("./SuccessModal.styles");
+var _checked = _interopRequireDefault(require("../../../static/animations/checked.lottie"));
+var _progress = _interopRequireDefault(require("../../../static/animations/progress.lottie"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+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 _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 variantConfig = {
+  success: {
+    animation: _checked.default,
+    segment: [0, 50],
+    loop: false
+  },
+  progress: {
+    animation: _progress.default,
+    segment: null,
+    loop: true
+  }
+};
+const SuccessModalComponent = _ref => {
+  let {
+    isOpen,
+    onClose,
+    variant = 'success',
+    title,
+    subtitle,
+    content,
+    animationSrc,
+    loop,
+    autoplay = true,
+    segment,
+    speed = 1,
+    modalProps = {},
+    maxWidth = '800px'
+  } = _ref;
+  const config = variantConfig[variant] || variantConfig.success;
+  const animationSource = animationSrc || config.animation;
+  const animationLoop = loop !== undefined ? loop : config.loop;
+  const animationSegment = segment || config.segment;
+  (0, _react.useEffect)(() => {
+    if (!isOpen) return;
+    const handleKeyDown = e => {
+      if (e.key === 'Escape') {
+        onClose === null || onClose === void 0 || onClose();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, onClose]);
+  return /*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({
+    isOpen: isOpen,
+    onClose: onClose,
+    maxHeight: "90vh",
+    boxStyles: {
+      minHeight: 'unset'
+    },
+    maxWidth: maxWidth
+  }, modalProps), /*#__PURE__*/_react.default.createElement(_SuccessModal.SuccessModalContent, null, /*#__PURE__*/_react.default.createElement(_SuccessModal.AnimationContainer, null, /*#__PURE__*/_react.default.createElement(_dotlottieReact.DotLottieReact, {
+    src: animationSource,
+    loop: animationLoop,
+    autoplay: autoplay,
+    speed: speed,
+    segment: animationSegment,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  })), title && /*#__PURE__*/_react.default.createElement(_SuccessModal.Title, null, title), subtitle && /*#__PURE__*/_react.default.createElement(_SuccessModal.Subtitle, null, subtitle), content && /*#__PURE__*/_react.default.createElement(_SuccessModal.ContentWrapper, null, content)));
+};
+exports.SuccessModal = exports.SuccessModalComponent = SuccessModalComponent;
+SuccessModalComponent.propTypes = {
+  isOpen: _propTypes.default.bool.isRequired,
+  onClose: _propTypes.default.func.isRequired,
+  variant: _propTypes.default.oneOf(['success', 'progress']),
+  title: _propTypes.default.string,
+  subtitle: _propTypes.default.string,
+  content: _propTypes.default.node,
+  animationSrc: _propTypes.default.string,
+  loop: _propTypes.default.bool,
+  autoplay: _propTypes.default.bool,
+  segment: _propTypes.default.arrayOf(_propTypes.default.number),
+  speed: _propTypes.default.number,
+  modalProps: _propTypes.default.object,
+  maxWidth: _propTypes.default.string
+};
+let successContainer = null;
+let successRoot = null;
+const showSuccess = function () {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    variant = 'success',
+    title = '',
+    subtitle = '',
+    content = null,
+    animationSrc = null,
+    loop,
+    autoplay = true,
+    segment,
+    speed = 1,
+    autoClose = 0,
+    modalProps = {},
+    maxWidth = '800px'
+  } = options;
+  return new Promise(resolve => {
+    if (!successContainer) {
+      successContainer = document.createElement('div');
+      successContainer.id = 'success-modal-root';
+      document.body.appendChild(successContainer);
+      successRoot = (0, _client.createRoot)(successContainer);
+    }
+    let isClosed = false;
+    const handleClose = () => {
+      if (isClosed) return;
+      isClosed = true;
+      renderModal(false);
+      setTimeout(() => {
+        renderModal(null);
+        resolve();
+      }, 350);
+    };
+    const renderModal = isOpen => {
+      if (isOpen === null) {
+        successRoot.render(null);
+        return;
+      }
+      successRoot.render(/*#__PURE__*/_react.default.createElement(SuccessModalComponent, {
+        isOpen: isOpen,
+        onClose: handleClose,
+        variant: variant,
+        title: title,
+        subtitle: subtitle,
+        content: content,
+        animationSrc: animationSrc,
+        loop: loop,
+        autoplay: autoplay,
+        segment: segment,
+        speed: speed,
+        modalProps: modalProps,
+        maxWidth: maxWidth
+      }));
+    };
+    renderModal(true);
+    if (autoClose > 0) {
+      setTimeout(() => {
+        handleClose();
+      }, autoClose);
+    }
+  });
+};
+exports.showSuccess = showSuccess;
+const showProgress = function () {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return showSuccess(_objectSpread(_objectSpread({}, options), {}, {
+    variant: 'progress'
+  }));
+};
+exports.showProgress = showProgress;
+var _default = exports.default = showSuccess;

package/dist/components/Modal/SuccessModal/SuccessModal.styles.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Title = exports.SuccessModalContent = exports.Subtitle = exports.ContentWrapper = exports.AnimationContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _colors = _interopRequireDefault(require("../../../styles/colors"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SuccessModalContent = exports.SuccessModalContent = _styledComponents.default.div.withConfig({
+  displayName: "SuccessModalstyles__SuccessModalContent",
+  componentId: "sc-8cspgo-0"
+})(["display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 24px;max-height:calc(90vh - 60px);overflow-y:auto;"]);
+const AnimationContainer = exports.AnimationContainer = _styledComponents.default.div.withConfig({
+  displayName: "SuccessModalstyles__AnimationContainer",
+  componentId: "sc-8cspgo-1"
+})(["width:80px;height:80px;min-height:80px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;"]);
+const Title = exports.Title = _styledComponents.default.h2.withConfig({
+  displayName: "SuccessModalstyles__Title",
+  componentId: "sc-8cspgo-2"
+})(["margin:0 0 16px 0;font-size:22px;font-weight:800;color:", ";text-transform:uppercase;letter-spacing:0.8px;line-height:28px;flex-shrink:0;"], _colors.default.black);
+const Subtitle = exports.Subtitle = _styledComponents.default.p.withConfig({
+  displayName: "SuccessModalstyles__Subtitle",
+  componentId: "sc-8cspgo-3"
+})(["margin:0 0 24px 0;font-size:16px;font-weight:300;line-height:24px;letter-spacing:0.6px;max-width:550px;flex-shrink:0;"]);
+const ContentWrapper = exports.ContentWrapper = _styledComponents.default.div.withConfig({
+  displayName: "SuccessModalstyles__ContentWrapper",
+  componentId: "sc-8cspgo-4"
+})(["width:100%;margin-top:8px;"]);

package/dist/components/Modal/SuccessModal/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SuccessModal", {
+  enumerable: true,
+  get: function () {
+    return _SuccessModal.SuccessModal;
+  }
+});
+Object.defineProperty(exports, "SuccessModalComponent", {
+  enumerable: true,
+  get: function () {
+    return _SuccessModal.SuccessModalComponent;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _SuccessModal.default;
+  }
+});
+Object.defineProperty(exports, "showProgress", {
+  enumerable: true,
+  get: function () {
+    return _SuccessModal.showProgress;
+  }
+});
+Object.defineProperty(exports, "showSuccess", {
+  enumerable: true,
+  get: function () {
+    return _SuccessModal.showSuccess;
+  }
+});
+var _SuccessModal = _interopRequireWildcard(require("./SuccessModal"));
+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); }

package/dist/components/Payment/PaymentDetailsCard.js

@@ -17,7 +17,7 @@ const CardContainer = _styledComponents.default.div.withConfig({
 const CardTitle = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__CardTitle",
   componentId: "sc-e830fo-1"
-})(["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);
+})(["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 ", ";text-align:start;"], _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:11px;font-weight:400;line-height:20px;text-transform:uppercase;letter-spacing:2px;margin-bottom:12px;color:", ";"], _colors.default.futureBlack);
+})(["font-size:11px;font-weight:400;line-height:20px;text-transform:uppercase;letter-spacing:2px;margin-bottom:12px;color:", ";text-align:start;"], _colors.default.futureBlack);
 const AmountDisplay = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__AmountDisplay",
   componentId: "sc-e830fo-4"

package/dist/components/StatusTag/StatusTag.js

@@ -10,7 +10,7 @@ var _Icon = require("../Icon/Icon.style");
 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 _addFolderIcon = require("../../static/images/add-folder-icon.svg");
 var _colors = _interopRequireDefault(require("../../styles/colors"));
 var _StatusTag = require("./StatusTag.styles");
 const _excluded = ["variant", "icon", "text", "tooltip", "tooltipProps", "iconColor", "hoverColor", "disableHoverColor", "colorActive", "minWidth", "className", "containerStyle", "iconStyle", "textStyle", "onClick", "center"];
@@ -21,13 +21,14 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 // Variant configuration - maps variant to icon and colors only
 const variantConfig = {
   pending: {
-    icon: /*#__PURE__*/_react.default.createElement(_docIcon.ReactComponent, {
+    icon: /*#__PURE__*/_react.default.createElement(_addFolderIcon.ReactComponent, {
       width: 12,
       height: 12
     }),
     iconColor: '#021128',
     hoverColor: '#021128',
-    disableHoverColor: true
+    disableHoverColor: true,
+    useStroke: true
   },
   initiated: {
     icon: /*#__PURE__*/_react.default.createElement(_Icon.Icon, {

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

@@ -14,7 +14,7 @@ const StatusTagContainer = exports.StatusTagContainer = _styledComponents.defaul
 const StatusTagWrapper = exports.StatusTagWrapper = _styledComponents.default.div.withConfig({
   displayName: "StatusTagstyles__StatusTagWrapper",
   componentId: "sc-24azs1-1"
-})(["display:flex;align-items:center;gap:6px;padding:6px 10px;background-color:transparent;border:1px solid ", ";border-radius:4px;white-space:nowrap;min-width:", ";justify-content:", ";"], _colors.default.lightGrey, props => props.minWidth || 'auto', props => props.center ? 'center' : 'flex-start');
+})(["display:flex;align-items:center;gap:6px;padding:5px 8px;background-color:transparent;border:1px solid ", ";border-radius:6px;white-space:nowrap;min-width:", ";justify-content:", ";"], _colors.default.lightGrey, props => props.minWidth || 'auto', props => props.center ? 'center' : 'flex-start');
 const IconWrapper = exports.IconWrapper = _styledComponents.default.div.withConfig({
   displayName: "StatusTagstyles__IconWrapper",
   componentId: "sc-24azs1-2"

package/dist/index.js

@@ -663,6 +663,17 @@ Object.keys(_ConfirmModal).forEach(function (key) {
     }
   });
 });
+var _SuccessModal = require("./components/Modal/SuccessModal");
+Object.keys(_SuccessModal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SuccessModal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SuccessModal[key];
+    }
+  });
+});
 var _MultiProgressBar = require("./components/MultiProgressBar/MultiProgressBar");
 Object.keys(_MultiProgressBar).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/static/images/add-folder-icon.svg

@@ -0,0 +1,5 @@
+<?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 d="M10 14H12M12 14H14M12 14V16M12 14V12" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M22 11.7979C22 9.16554 22 7.84935 21.2305 6.99383C21.1598 6.91514 21.0849 6.84024 21.0062 6.76946C20.1506 6 18.8345 6 16.2021 6H15.8284C14.6747 6 14.0979 6 13.5604 5.84678C13.2651 5.7626 12.9804 5.64471 12.7121 5.49543C12.2237 5.22367 11.8158 4.81578 11 4L10.4497 3.44975C10.1763 3.17633 10.0396 3.03961 9.89594 2.92051C9.27652 2.40704 8.51665 2.09229 7.71557 2.01738C7.52976 2 7.33642 2 6.94975 2C6.06722 2 5.62595 2 5.25839 2.06935C3.64031 2.37464 2.37464 3.64031 2.06935 5.25839C2 5.62595 2 6.06722 2 6.94975M21.9913 16C21.9554 18.4796 21.7715 19.8853 20.8284 20.8284C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2 19.6569 2 17.7712 2 14V11" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/dist/utils/formatCurrencyValue.js

@@ -68,10 +68,13 @@ const getCurrencyIcon = (currency, customIcon) => {
   switch (currency.toLowerCase()) {
     case 'btc':
     case 'bitcoin':
+    case 'btc-fb':
       return _bitcoinLogo.default;
     case 'usdc':
+    case 'usdc-fb':
       return _usdcLogo.default;
     case 'usdq':
+    case 'usdq-fb':
       return _usdqLogo.default;
     case 'bmn2':
       return _bmn2Logo.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "2.3.65-beta.14",
+  "version": "2.3.65-beta.16",
   "description": "STOKR - Components Library",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -31,6 +31,7 @@
     "serve": "npx http-server ./storybook-static -p 9009"
   },
   "dependencies": {
+    "@lottiefiles/dotlottie-react": "^0.17.13",
     "ajv": "^8.17.1",
     "axios": "^0.30.2",
     "bignumber.js": "^9.1.1",