@stokr/components-library 2.3.25 → 2.3.27

package/dist/components/Chips/Chip.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Chip = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ChipStyles = require("./Chip.styles.js");
+var _InfoIcon = _interopRequireDefault(require("../InfoIcon/InfoIcon.js"));
+var _excluded = ["children", "isActive", "onClick", "tooltip"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var Chip = function Chip(_ref) {
+  var children = _ref.children,
+    isActive = _ref.isActive,
+    onClick = _ref.onClick,
+    tooltip = _ref.tooltip,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_ChipStyles.StyledChip, _extends({
+    onClick: onClick,
+    isActive: isActive
+  }, props), /*#__PURE__*/_react.default.createElement(_ChipStyles.ChipText, null, children), tooltip && /*#__PURE__*/_react.default.createElement(_InfoIcon.default, {
+    title: tooltip,
+    position: "right",
+    noIcon: true,
+    noMarginLeft: true,
+    noMarginRight: true
+  }, /*#__PURE__*/_react.default.createElement(_ChipStyles.TooltipChipIcon, null)));
+};
+exports.Chip = Chip;
+Chip.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  isActive: _propTypes.default.bool,
+  onClick: _propTypes.default.func,
+  tooltip: _propTypes.default.string
+};
+Chip.defaultProps = {
+  isActive: false,
+  onClick: function onClick() {},
+  tooltip: null
+};
+var _default = Chip;
+exports.default = _default;

package/dist/components/Chips/Chip.stories.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithTooltip = exports.Default = exports.Active = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Chip = _interopRequireDefault(require("./Chip"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var _default = {
+  title: 'Components/Chip',
+  component: _Chip.default
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_Chip.default, args);
+};
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  children: 'Default Chip',
+  isActive: false,
+  onClick: function onClick() {
+    return alert('Chip clicked!');
+  },
+  tooltip: 'This is a chip'
+};
+var Active = Template.bind({});
+exports.Active = Active;
+Active.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  isActive: true,
+  children: 'Active Chip'
+});
+var WithTooltip = Template.bind({});
+exports.WithTooltip = WithTooltip;
+WithTooltip.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  tooltip: 'Tooltip text'
+});

package/dist/components/Chips/Chip.styles.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.TooltipChipIcon = exports.StyledChip = exports.ChipText = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var StyledChip = _styledComponents.default.div.withConfig({
+  displayName: "Chipstyles__StyledChip",
+  componentId: "sc-pcmyil-0"
+})(["display:inline-flex;gap:4px;align-items:center;padding:8px 16px;border-radius:20px;background-color:transparent;color:black;cursor:pointer;transition:background-color 0.3s;font-size:11px;font-weight:400;line-height:20px;letter-spacing:3px;font-weight:600;min-height:40px;&:hover,&:active{background-color:red;color:white;}", ""], function (_ref) {
+  var isActive = _ref.isActive;
+  return isActive && "\n      background-color: red;\n      color: white;\n      font-weight: 800;\n\n      ".concat(TooltipChipIcon, " {\n        color: ").concat(_theme.default.cWhite, ";\n      }\n    ");
+});
+exports.StyledChip = StyledChip;
+var Wrapper = _styledComponents.default.div.withConfig({
+  displayName: "Chipstyles__Wrapper",
+  componentId: "sc-pcmyil-1"
+})(["display:flex;gap:32px;", ""], function (_ref2) {
+  var customWrapperStyle = _ref2.customWrapperStyle;
+  return customWrapperStyle;
+});
+exports.Wrapper = Wrapper;
+var ChipText = _styledComponents.default.span.withConfig({
+  displayName: "Chipstyles__ChipText",
+  componentId: "sc-pcmyil-2"
+})(["text-transform:uppercase;"]);
+exports.ChipText = ChipText;
+var TooltipChipIcon = _styledComponents.default.i.attrs({
+  className: 'ion ion-md-information-circle-outline'
+}).withConfig({
+  displayName: "Chipstyles__TooltipChipIcon",
+  componentId: "sc-pcmyil-3"
+})(["position:relative;display:inline-block;font-size:16px;line-height:16px;vertical-align:middle;color:", ";transition:color 0.2s;", ":hover &{color:", ";}"], _theme.default.cGrey2, StyledChip, _theme.default.cWhite);
+exports.TooltipChipIcon = TooltipChipIcon;

package/dist/components/Chips/ChipWrapper.js

@@ -0,0 +1,74 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ChipsWrapper = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Chip = _interopRequireDefault(require("./Chip"));
+var _Chip2 = require("./Chip.styles");
+var _TabsNav = require("../TabsNav/TabsNav.styles");
+var _excluded = ["chips", "onActiveChipChange", "customWrapperStyle"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var ChipsWrapper = function ChipsWrapper(_ref) {
+  var chips = _ref.chips,
+    _ref$onActiveChipChan = _ref.onActiveChipChange,
+    onActiveChipChange = _ref$onActiveChipChan === void 0 ? function () {} : _ref$onActiveChipChan,
+    customWrapperStyle = _ref.customWrapperStyle,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeChip = _useState2[0],
+    setActiveChip = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var initialActiveIndex = chips.findIndex(function (chip) {
+      return chip.isActive;
+    });
+    if (initialActiveIndex !== -1) {
+      setActiveChip(initialActiveIndex);
+      onActiveChipChange(initialActiveIndex);
+    }
+  }, [chips]);
+  var handleChipClick = function handleChipClick(index) {
+    setActiveChip(index);
+    onActiveChipChange(index); // Optionally notify parent about the change
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_TabsNav.Scroll, null, /*#__PURE__*/_react.default.createElement(_Chip2.Wrapper, {
+    customWrapperStyle: customWrapperStyle
+  }, chips.map(function (chip, index) {
+    return /*#__PURE__*/_react.default.createElement(_Chip.default, _extends({
+      key: index,
+      isActive: activeChip === index,
+      onClick: function onClick() {
+        return handleChipClick(index);
+      },
+      tooltip: chip.tooltip
+    }, props), chip.label);
+  })));
+};
+exports.ChipsWrapper = ChipsWrapper;
+ChipsWrapper.propTypes = {
+  chips: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    tooltip: _propTypes.default.string,
+    isActive: _propTypes.default.bool
+  })).isRequired,
+  onActiveChipChange: _propTypes.default.func,
+  customWrapperStyle: _propTypes.default.object
+};
+var _default = ChipsWrapper;
+exports.default = _default;

package/dist/components/Chips/ChipsWrapper.stories.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = exports.CustomStyle = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ChipWrapper = _interopRequireDefault(require("./ChipWrapper"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var _default = {
+  title: 'Components/ChipsWrapper',
+  component: _ChipWrapper.default
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_ChipWrapper.default, args);
+};
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  chips: [{
+    label: 'Chip 1',
+    tooltip: 'Tooltip 1',
+    isActive: false
+  }, {
+    label: 'Chip 2',
+    tooltip: 'Tooltip 2',
+    isActive: true
+  }, {
+    label: 'Chip 3',
+    tooltip: 'Tooltip 3',
+    isActive: false
+  }],
+  onActiveChipChange: function onActiveChipChange(index) {
+    return alert("Active chip changed to: ".concat(index));
+  }
+};
+var CustomStyle = Template.bind({});
+exports.CustomStyle = CustomStyle;
+CustomStyle.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  customWrapperStyle: {
+    backgroundColor: '#f0f0f0',
+    padding: '10px'
+  }
+});

package/dist/components/Pagination/PaginationControls.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PaginationControls = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
+var _Pagination = _interopRequireDefault(require("./Pagination"));
+var _Card = require("../Card/Card.styles");
+var _InputWithButton = _interopRequireDefault(require("../Input/InputWithButton"));
+var _Button = _interopRequireDefault(require("../Button/Button.styles"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var PaginationControls = function PaginationControls(_ref) {
+  var currentPage = _ref.currentPage,
+    totalCount = _ref.totalCount,
+    pageSize = _ref.pageSize,
+    onPageChange = _ref.onPageChange,
+    inputPageSize = _ref.inputPageSize,
+    setInputPageSize = _ref.setInputPageSize,
+    setPageSize = _ref.setPageSize,
+    scrollRef = _ref.scrollRef,
+    _ref$scrollOffset = _ref.scrollOffset,
+    scrollOffset = _ref$scrollOffset === void 0 ? -100 : _ref$scrollOffset,
+    containerStyle = _ref.containerStyle,
+    _ref$showPageSizeCont = _ref.showPageSizeControl,
+    showPageSizeControl = _ref$showPageSizeCont === void 0 ? true : _ref$showPageSizeCont,
+    _ref$pageSizeLabel = _ref.pageSizeLabel,
+    pageSizeLabel = _ref$pageSizeLabel === void 0 ? 'Page Size:' : _ref$pageSizeLabel,
+    _ref$applyButtonText = _ref.applyButtonText,
+    applyButtonText = _ref$applyButtonText === void 0 ? 'apply' : _ref$applyButtonText;
+  var handlePageChange = function handlePageChange(page) {
+    onPageChange(page);
+
+    // Scroll to the reference element if provided
+    if (scrollRef !== null && scrollRef !== void 0 && scrollRef.current) {
+      var yOffset = scrollOffset;
+      var element = scrollRef.current;
+      var y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
+      window.scrollTo({
+        top: y,
+        behavior: 'smooth'
+      });
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingHorizontal: true,
+    flex: true,
+    style: _objectSpread({
+      justifyContent: 'space-between',
+      flexWrap: 'wrap'
+    }, containerStyle)
+  }, /*#__PURE__*/_react.default.createElement(_Pagination.default, {
+    currentPage: currentPage,
+    totalCount: totalCount,
+    pageSize: pageSize,
+    onPageChange: handlePageChange
+  }), showPageSizeControl && /*#__PURE__*/_react.default.createElement(_Card.Card, {
+    noPadding: true
+  }, /*#__PURE__*/_react.default.createElement(_Card.CardTitle, {
+    style: {
+      padding: '2px 20px'
+    }
+  }, pageSizeLabel), /*#__PURE__*/_react.default.createElement(_InputWithButton.default, {
+    id: "pageSize",
+    name: "pageSize",
+    value: inputPageSize,
+    type: "number",
+    placeholder: "Page size",
+    onChange: function onChange(e) {
+      // Ensure the input is a positive number
+      var value = Math.max(1, Number(e.target.value) || 1);
+      setInputPageSize(value);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: function onClick() {
+      var newPageSize = Math.max(1, Number(inputPageSize) || 1);
+      setPageSize(newPageSize);
+
+      // If the current page would now be out of bounds, adjust it
+      var maxPage = Math.ceil(totalCount / newPageSize);
+      if (currentPage > maxPage && maxPage > 0) {
+        handlePageChange(maxPage);
+      }
+    }
+  }, applyButtonText))));
+};
+exports.PaginationControls = PaginationControls;
+PaginationControls.propTypes = {
+  currentPage: _propTypes.default.number.isRequired,
+  totalCount: _propTypes.default.number.isRequired,
+  pageSize: _propTypes.default.number.isRequired,
+  onPageChange: _propTypes.default.func.isRequired,
+  inputPageSize: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  setInputPageSize: _propTypes.default.func.isRequired,
+  setPageSize: _propTypes.default.func.isRequired,
+  scrollRef: _propTypes.default.shape({
+    current: _propTypes.default.any
+  }),
+  scrollOffset: _propTypes.default.number,
+  containerStyle: _propTypes.default.object,
+  showPageSizeControl: _propTypes.default.bool,
+  pageSizeLabel: _propTypes.default.string,
+  applyButtonText: _propTypes.default.string
+};
+var _default = PaginationControls;
+exports.default = _default;

package/dist/components/QRCode/QRCode.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _qrcode = require("qrcode.react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _excluded = ["value", "size", "fgColor", "bgColor", "backgroundColor", "level", "padding", "withShadow"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var QRCodeWrapper = _styledComponents.default.div.withConfig({
+  displayName: "QRCode__QRCodeWrapper",
+  componentId: "sc-1n3wz5w-0"
+})(["display:inline-block;padding:", "px;background-color:", ";border-radius:8px;box-shadow:", ";"], function (_ref) {
+  var padding = _ref.padding;
+  return padding;
+}, function (_ref2) {
+  var backgroundColor = _ref2.backgroundColor;
+  return backgroundColor;
+}, function (_ref3) {
+  var withShadow = _ref3.withShadow;
+  return withShadow ? '0 2px 8px rgba(0, 0, 0, 0.2)' : 'none';
+});
+var QRCode = function QRCode(_ref4) {
+  var value = _ref4.value,
+    _ref4$size = _ref4.size,
+    size = _ref4$size === void 0 ? 128 : _ref4$size,
+    _ref4$fgColor = _ref4.fgColor,
+    fgColor = _ref4$fgColor === void 0 ? '#000000' : _ref4$fgColor,
+    _ref4$bgColor = _ref4.bgColor,
+    bgColor = _ref4$bgColor === void 0 ? '#ffffff' : _ref4$bgColor,
+    _ref4$backgroundColor = _ref4.backgroundColor,
+    backgroundColor = _ref4$backgroundColor === void 0 ? '#ffffff' : _ref4$backgroundColor,
+    _ref4$level = _ref4.level,
+    level = _ref4$level === void 0 ? 'L' : _ref4$level,
+    _ref4$padding = _ref4.padding,
+    padding = _ref4$padding === void 0 ? 8 : _ref4$padding,
+    _ref4$withShadow = _ref4.withShadow,
+    withShadow = _ref4$withShadow === void 0 ? false : _ref4$withShadow,
+    props = _objectWithoutProperties(_ref4, _excluded);
+  return /*#__PURE__*/_react.default.createElement(QRCodeWrapper, _extends({
+    padding: padding,
+    withShadow: withShadow,
+    backgroundColor: backgroundColor
+  }, props), /*#__PURE__*/_react.default.createElement(_qrcode.QRCodeSVG, {
+    value: value,
+    size: size,
+    fgColor: fgColor,
+    bgColor: bgColor,
+    level: level,
+    includeMargin: false
+  }));
+};
+QRCode.propTypes = {
+  /** URL or text to encode in the QR code */
+  value: _propTypes.default.string.isRequired,
+  /** Size of the QR code in pixels */
+  size: _propTypes.default.number,
+  /** Foreground color (the QR code pattern itself) */
+  fgColor: _propTypes.default.string,
+  /** Background color of the QR code itself */
+  bgColor: _propTypes.default.string,
+  /** Background color of the wrapper */
+  backgroundColor: _propTypes.default.string,
+  /** Error correction level: 'L', 'M', 'Q', 'H' */
+  level: _propTypes.default.oneOf(['L', 'M', 'Q', 'H']),
+  /** Padding around the QR code in pixels */
+  padding: _propTypes.default.number,
+  /** Whether to add a shadow effect */
+  withShadow: _propTypes.default.bool
+};
+var _default = QRCode;
+exports.default = _default;

package/dist/components/QRCode/QRCode.stories.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithShadow = exports.Large = exports.HighErrorCorrection = exports.Default = exports.CustomColors = exports.CustomBackground = exports.ColorfulQR = exports.BlackBackgroundWhiteQR = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _QRCode = _interopRequireDefault(require("./QRCode"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var _default = {
+  title: 'Components/QRCode',
+  component: _QRCode.default,
+  argTypes: {
+    size: {
+      control: {
+        type: 'range',
+        min: 64,
+        max: 512,
+        step: 8
+      }
+    },
+    padding: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 32,
+        step: 2
+      }
+    },
+    fgColor: {
+      control: 'color'
+    },
+    bgColor: {
+      control: 'color'
+    },
+    backgroundColor: {
+      control: 'color'
+    },
+    level: {
+      control: {
+        type: 'select',
+        options: ['L', 'M', 'Q', 'H']
+      }
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_QRCode.default, args);
+};
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  value: 'https://example.com',
+  size: 128,
+  fgColor: '#000000',
+  bgColor: '#ffffff',
+  backgroundColor: '#ffffff',
+  level: 'L',
+  padding: 8,
+  withShadow: false
+};
+var BlackBackgroundWhiteQR = Template.bind({});
+exports.BlackBackgroundWhiteQR = BlackBackgroundWhiteQR;
+BlackBackgroundWhiteQR.args = {
+  value: 'https://example.com',
+  size: 128,
+  fgColor: '#ffffff',
+  bgColor: '#000000',
+  backgroundColor: '#000000',
+  level: 'H',
+  padding: 16,
+  withShadow: true
+};
+var WithShadow = Template.bind({});
+exports.WithShadow = WithShadow;
+WithShadow.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  withShadow: true
+});
+var CustomColors = Template.bind({});
+exports.CustomColors = CustomColors;
+CustomColors.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  fgColor: '#0066cc',
+  bgColor: '#f0f0f0'
+});
+var CustomBackground = Template.bind({});
+exports.CustomBackground = CustomBackground;
+CustomBackground.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  backgroundColor: '#f5f5f5',
+  padding: 16
+});
+var ColorfulQR = Template.bind({});
+exports.ColorfulQR = ColorfulQR;
+ColorfulQR.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  fgColor: '#ff6600',
+  bgColor: '#ffffff',
+  backgroundColor: '#e6f7ff',
+  padding: 20,
+  withShadow: true
+});
+var HighErrorCorrection = Template.bind({});
+exports.HighErrorCorrection = HighErrorCorrection;
+HighErrorCorrection.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  level: 'H'
+});
+var Large = Template.bind({});
+exports.Large = Large;
+Large.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  size: 256
+});

package/dist/components/StokrLoader/StokrLoader.js

@@ -4,6 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.LoadingDots = exports.AnimatedSpan = void 0;
 exports.StokrLoader = StokrLoader;
 exports.loaderGif = exports.default = exports.StokrLoaderBox = void 0;
 var _react = _interopRequireDefault(require("react"));
@@ -45,5 +46,23 @@ var StokrLoaderBox = function StokrLoaderBox(_ref2) {
   }));
 };
 exports.StokrLoaderBox = StokrLoaderBox;
+var fadeInOut = (0, _styledComponents.keyframes)(["50%{color:transparent;}"]);
+var AnimatedSpan = _styledComponents.default.div.withConfig({
+  displayName: "StokrLoader__AnimatedSpan",
+  componentId: "sc-1chowhw-2"
+})(["margin:0;display:inline-block;span{animation:", " 1s infinite;font-size:", "px;}span[data-order='1']{animation-delay:250ms;}span[data-order='2']{animation-delay:500ms;}"], fadeInOut, function (props) {
+  return props.fontSize || 20;
+});
+exports.AnimatedSpan = AnimatedSpan;
+var LoadingDots = function LoadingDots(props) {
+  return /*#__PURE__*/_react.default.createElement(AnimatedSpan, props, /*#__PURE__*/_react.default.createElement("span", {
+    "data-order": "0"
+  }, "."), /*#__PURE__*/_react.default.createElement("span", {
+    "data-order": "1"
+  }, "."), /*#__PURE__*/_react.default.createElement("span", {
+    "data-order": "2"
+  }, "."));
+};
+exports.LoadingDots = LoadingDots;
 var _default = StokrLoader;
 exports.default = _default;

package/dist/index.js

@@ -1213,6 +1213,17 @@ Object.keys(_Pagination).forEach(function (key) {
     }
   });
 });
+var _PaginationControls = require("./components/Pagination/PaginationControls");
+Object.keys(_PaginationControls).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PaginationControls[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _PaginationControls[key];
+    }
+  });
+});
 var _List = require("./components/landing-page/List");
 Object.keys(_List).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1344,4 +1355,26 @@ Object.keys(_TabsNav).forEach(function (key) {
       return _TabsNav[key];
     }
   });
+});
+var _Chip = require("./components/Chips/Chip");
+Object.keys(_Chip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Chip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Chip[key];
+    }
+  });
+});
+var _ChipWrapper = require("./components/Chips/ChipWrapper");
+Object.keys(_ChipWrapper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChipWrapper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ChipWrapper[key];
+    }
+  });
 });

package/dist/utils/formatCurrencyValue.js

@@ -54,6 +54,6 @@ var getCurrencySymbol = function getCurrencySymbol(currencySelected) {
 };
 exports.getCurrencySymbol = getCurrencySymbol;
 var getProjectCurrencySign = function getProjectCurrencySign(tokenCurrency) {
-  return tokenCurrency === 'EUR' ? '€' : tokenCurrency === 'USD' ? '$' : '';
+  return tokenCurrency === 'EUR' ? '€' : tokenCurrency === 'USD' ? '$' : tokenCurrency === 'BTC' ? '₿' : '';
 };
 exports.getProjectCurrencySign = getProjectCurrencySign;

package/dist/utils/saveAs.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.saveAs = exports.openFile = void 0;
+var saveAs = function saveAs(file) {
+  var fileName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'fileName';
+  // Create blob link to download
+  var url = window.URL.createObjectURL(file);
+  var link = document.createElement('a');
+  link.href = url;
+  link.setAttribute('download', fileName);
+
+  // Append to html link element page
+  document.body.appendChild(link);
+
+  // Start download
+  link.click();
+
+  // Clean up and remove the link
+  link.parentNode.removeChild(link);
+};
+exports.saveAs = saveAs;
+var openFile = function openFile(file) {
+  var url = window.URL.createObjectURL(file);
+  window.open(url);
+};
+exports.openFile = openFile;

package/package.json

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