@stokr/components-library 2.3.37 → 2.3.39-beta.1

package/dist/components/Button/GlareButton.js

@@ -0,0 +1,296 @@
+"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 = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _reactVisibilitySensor = _interopRequireDefault(require("react-visibility-sensor"));
+var _Button = _interopRequireDefault(require("./Button.styles"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+var _excluded = ["children", "nowrap", "onClick", "disabled", "fullWidth", "disabledColor", "buttonId", "className", "backgroundColor", "textColor", "borderColor", "glareColor", "animationDuration"];
+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; }
+// Configuration for visual styling
+var config = {
+  colorDark: 'white',
+  colorLight: '#cef5f6',
+  colorFooter: _colors.default.blue,
+  strokeWidth: 2,
+  padding: 5,
+  baseHeight: 50
+};
+
+// Animation for the glare effect
+var createGlareAnimation = function createGlareAnimation() {
+  var duration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 4;
+  return (0, _styledComponents.keyframes)(["0%{width:0;}50%{width:200%;}75%{opacity:1;}100%{width:400%;opacity:0;}"]);
+};
+
+// Styled components
+var ButtonWrapper = _styledComponents.default.div.withConfig({
+  displayName: "GlareButton__ButtonWrapper",
+  componentId: "sc-1fjbp4c-0"
+})(["position:relative;display:inline-block;", " ", ""], function (_ref) {
+  var nowrap = _ref.nowrap;
+  return !nowrap && (0, _styledComponents.css)(["display:block;position:absolute;top:0;left:50%;transform:translate3d(-50%,-50%,0);"]);
+}, function (_ref2) {
+  var fullWidth = _ref2.fullWidth;
+  return fullWidth && (0, _styledComponents.css)(["width:100%;"]);
+});
+var StyledButton = (0, _styledComponents.default)(_Button.default).withConfig({
+  displayName: "GlareButton__StyledButton",
+  componentId: "sc-1fjbp4c-1"
+})(["position:relative;margin:", "px;background-color:", ";color:", ";border-color:", ";", " &:disabled{background-color:", " !important;color:rgba(255,255,255,0.5) !important;border-color:#555 !important;}"], config.padding, function (props) {
+  return props.backgroundColor || 'inherit';
+}, function (props) {
+  return props.textColor || 'inherit';
+}, function (props) {
+  return props.borderColor || 'inherit';
+}, function (_ref3) {
+  var fullWidth = _ref3.fullWidth;
+  return fullWidth && (0, _styledComponents.css)(["width:calc(100% - ", "px);"], config.padding * 2);
+}, function (props) {
+  return props.disabledColor || '#333';
+});
+var ButtonGlare = _styledComponents.default.svg.withConfig({
+  displayName: "GlareButton__ButtonGlare",
+  componentId: "sc-1fjbp4c-2"
+})(["position:absolute;left:0;top:0;width:100%;height:100%;"]);
+var GlareShape = _styledComponents.default.rect.withConfig({
+  displayName: "GlareButton__GlareShape",
+  componentId: "sc-1fjbp4c-3"
+})(["animation:", " ", "s linear infinite;"], function (props) {
+  return createGlareAnimation(props.animationDuration);
+}, function (props) {
+  return props.animationDuration || 4;
+});
+var GlareButton = function GlareButton(_ref4) {
+  var children = _ref4.children,
+    _ref4$nowrap = _ref4.nowrap,
+    nowrap = _ref4$nowrap === void 0 ? false : _ref4$nowrap,
+    onClick = _ref4.onClick,
+    _ref4$disabled = _ref4.disabled,
+    disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
+    _ref4$fullWidth = _ref4.fullWidth,
+    fullWidth = _ref4$fullWidth === void 0 ? false : _ref4$fullWidth,
+    _ref4$disabledColor = _ref4.disabledColor,
+    disabledColor = _ref4$disabledColor === void 0 ? '#333' : _ref4$disabledColor,
+    _ref4$buttonId = _ref4.buttonId,
+    buttonId = _ref4$buttonId === void 0 ? 'glare-button' : _ref4$buttonId,
+    className = _ref4.className,
+    backgroundColor = _ref4.backgroundColor,
+    textColor = _ref4.textColor,
+    borderColor = _ref4.borderColor,
+    glareColor = _ref4.glareColor,
+    _ref4$animationDurati = _ref4.animationDuration,
+    animationDuration = _ref4$animationDurati === void 0 ? 4 : _ref4$animationDurati,
+    props = _objectWithoutProperties(_ref4, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isButtonVisible = _useState2[0],
+    setIsButtonVisible = _useState2[1];
+  var _useState3 = (0, _react.useState)({
+      width: 295,
+      height: config.baseHeight
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dimensions = _useState4[0],
+    setDimensions = _useState4[1];
+  var buttonRef = (0, _react.useRef)(null);
+  var wrapperRef = (0, _react.useRef)(null);
+  var observerRef = (0, _react.useRef)(null);
+  var mediaQueryRef = (0, _react.useRef)(null);
+
+  // Generate unique IDs for SVG elements
+  var ids = (0, _react.useRef)({
+    linearGradient: "gradient-".concat(Math.random().toString(32).substr(2)),
+    fadeGradient: "fade-gradient-".concat(Math.random().toString(32).substr(2)),
+    staticMask: "static-mask-".concat(Math.random().toString(32).substr(2)),
+    mask: "mask-".concat(Math.random().toString(32).substr(2)),
+    fadeMask: "fade-mask-".concat(Math.random().toString(32).substr(2))
+  });
+
+  // Update button dimensions when size changes
+  var updateDimensions = function updateDimensions() {
+    if (!buttonRef.current || !wrapperRef.current) return;
+    var buttonRect = buttonRef.current.getBoundingClientRect();
+    setDimensions({
+      width: buttonRect.width + config.padding * 2,
+      height: buttonRect.height + config.padding * 2
+    });
+  };
+
+  // Handle visibility changes
+  var handleButtonVisibility = function handleButtonVisibility(isVisible) {
+    setIsButtonVisible(isVisible);
+  };
+
+  // Setup resize observers and media query listeners
+  (0, _react.useEffect)(function () {
+    // Media query for responsive design
+    mediaQueryRef.current = window.matchMedia('(max-width: 768px)');
+    var handleMediaChange = function handleMediaChange(event) {
+      setTimeout(updateDimensions, 400);
+    };
+    mediaQueryRef.current.addEventListener('change', handleMediaChange);
+
+    // Resize observer for button size changes
+    observerRef.current = new ResizeObserver(updateDimensions);
+    if (buttonRef.current) {
+      observerRef.current.observe(buttonRef.current);
+      updateDimensions(); // Initial dimensions calculation
+    }
+
+    return function () {
+      mediaQueryRef.current.removeEventListener('change', handleMediaChange);
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, []);
+
+  // Determine colors for the glare effect
+  var glareColorDark = glareColor || config.colorDark;
+  var glareColorLight = glareColor ? glareColor : config.colorLight;
+  return /*#__PURE__*/_react.default.createElement(_reactVisibilitySensor.default, {
+    onChange: handleButtonVisibility,
+    partialVisibility: true
+  }, /*#__PURE__*/_react.default.createElement(ButtonWrapper, {
+    ref: wrapperRef,
+    nowrap: nowrap,
+    fullWidth: fullWidth,
+    className: className
+  }, /*#__PURE__*/_react.default.createElement(ButtonGlare, {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 ".concat(dimensions.width, " ").concat(dimensions.height),
+    preserveAspectRatio: "none"
+  }, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+    id: "".concat(ids.current.linearGradient),
+    x1: "0%",
+    y1: "50%",
+    x2: "100%",
+    y2: "50%"
+  }, /*#__PURE__*/_react.default.createElement("stop", {
+    offset: "0%",
+    stopColor: glareColorDark
+  }), /*#__PURE__*/_react.default.createElement("stop", {
+    offset: "40%",
+    stopColor: glareColorDark
+  }), /*#__PURE__*/_react.default.createElement("stop", {
+    offset: "70%",
+    stopColor: glareColorLight
+  }), /*#__PURE__*/_react.default.createElement("stop", {
+    offset: "100%",
+    stopColor: glareColorDark
+  })), /*#__PURE__*/_react.default.createElement("linearGradient", {
+    id: "".concat(ids.current.fadeGradient),
+    x1: "0%",
+    y1: "25%",
+    x2: "0%",
+    y2: "100%"
+  }, /*#__PURE__*/_react.default.createElement("stop", {
+    offset: "0",
+    stopColor: "white",
+    stopOpacity: "1"
+  }), /*#__PURE__*/_react.default.createElement("stop", {
+    offset: "1",
+    stopColor: "white",
+    stopOpacity: "0"
+  })), /*#__PURE__*/_react.default.createElement("mask", {
+    id: "".concat(ids.current.staticMask)
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: config.strokeWidth,
+    y: config.strokeWidth,
+    width: dimensions.width - config.strokeWidth * 2,
+    height: dimensions.height - config.strokeWidth * 2,
+    rx: (dimensions.height - config.strokeWidth * 2) / 2,
+    ry: (dimensions.height - config.strokeWidth * 2) / 2,
+    stroke: "#FFFFFF",
+    strokeWidth: config.strokeWidth,
+    fill: "none"
+  })), /*#__PURE__*/_react.default.createElement("mask", {
+    id: "".concat(ids.current.mask)
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: config.strokeWidth,
+    y: config.strokeWidth,
+    width: dimensions.width - config.strokeWidth * 2,
+    height: dimensions.height - config.strokeWidth * 2,
+    rx: (dimensions.height - config.strokeWidth * 2) / 2,
+    ry: (dimensions.height - config.strokeWidth * 2) / 2,
+    stroke: "#FFFFFF",
+    strokeWidth: config.strokeWidth + 1,
+    fill: "none"
+  })), /*#__PURE__*/_react.default.createElement("mask", {
+    id: "".concat(ids.current.fadeMask)
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: config.strokeWidth,
+    y: config.strokeWidth,
+    width: dimensions.width - config.strokeWidth * 2,
+    height: dimensions.height - config.strokeWidth * 2,
+    rx: (dimensions.height - config.strokeWidth * 2) / 2,
+    ry: (dimensions.height - config.strokeWidth * 2) / 2,
+    fill: "url(#".concat(ids.current.fadeGradient, ")")
+  }))), /*#__PURE__*/_react.default.createElement("rect", {
+    x: config.strokeWidth / 2,
+    y: config.strokeWidth / 2,
+    width: dimensions.width - config.strokeWidth,
+    height: dimensions.height - config.strokeWidth,
+    rx: (dimensions.height - config.strokeWidth) / 2,
+    ry: (dimensions.height - config.strokeWidth) / 2,
+    stroke: borderColor || 'white',
+    strokeWidth: config.strokeWidth,
+    fill: "none"
+  }), isButtonVisible && /*#__PURE__*/_react.default.createElement("g", {
+    mask: "url(#".concat(ids.current.fadeMask, ")")
+  }, /*#__PURE__*/_react.default.createElement(GlareShape, {
+    x: dimensions.width * -0.5,
+    y: config.strokeWidth,
+    width: dimensions.width * 2.5,
+    height: dimensions.height - config.strokeWidth * 2,
+    fill: "url(#".concat(ids.current.linearGradient, ")"),
+    mask: "url(#".concat(ids.current.mask, ")"),
+    animationDuration: animationDuration
+  }))), /*#__PURE__*/_react.default.createElement(StyledButton, _extends({
+    beauty: true,
+    disabled: disabled,
+    id: buttonId,
+    onClick: onClick,
+    fullWidth: fullWidth,
+    disabledColor: disabledColor,
+    backgroundColor: backgroundColor,
+    textColor: textColor,
+    borderColor: borderColor,
+    ref: buttonRef
+  }, props), children)));
+};
+GlareButton.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  nowrap: _propTypes.default.bool,
+  onClick: _propTypes.default.func.isRequired,
+  disabled: _propTypes.default.bool,
+  fullWidth: _propTypes.default.bool,
+  disabledColor: _propTypes.default.string,
+  buttonId: _propTypes.default.string,
+  className: _propTypes.default.string,
+  backgroundColor: _propTypes.default.string,
+  textColor: _propTypes.default.string,
+  borderColor: _propTypes.default.string,
+  glareColor: _propTypes.default.string,
+  animationDuration: _propTypes.default.number
+};
+var _default = GlareButton;
+exports.default = _default;

package/dist/components/Button/GlareButton.stories.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SlowAnimation = exports.FullWidth = exports.FastAnimation = exports.Disabled = exports.Default = exports.CustomColors = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _GlareButton = _interopRequireDefault(require("./GlareButton"));
+var _addonActions = require("@storybook/addon-actions");
+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 Library/Buttons/GlareButton',
+  component: _GlareButton.default,
+  parameters: {
+    docs: {
+      description: {
+        component: 'A button with animated glare effect that adds visual interest to important actions.'
+      }
+    }
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+      description: 'Button content'
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Function called when button is clicked'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the button when true'
+    },
+    nowrap: {
+      control: 'boolean',
+      description: 'When true, button is displayed inline instead of block'
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Makes the button take full width of its container'
+    },
+    disabledColor: {
+      control: 'color',
+      description: 'Custom color for disabled state'
+    },
+    buttonId: {
+      control: 'text',
+      description: 'Custom ID for the button element'
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes'
+    },
+    backgroundColor: {
+      control: 'color',
+      description: 'Custom background color'
+    },
+    textColor: {
+      control: 'color',
+      description: 'Custom text color'
+    },
+    glareColor: {
+      control: 'color',
+      description: 'Custom color for the glare effect'
+    },
+    borderColor: {
+      control: 'color',
+      description: 'Custom border color'
+    },
+    animationDuration: {
+      control: {
+        type: 'range',
+        min: 1,
+        max: 10,
+        step: 0.5
+      },
+      description: 'Duration of the glare animation in seconds'
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      margin: '50px',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_GlareButton.default, args));
+};
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  children: 'Default Glare Button',
+  onClick: (0, _addonActions.action)('button-clicked'),
+  disabled: false,
+  nowrap: false,
+  fullWidth: false
+};
+var Disabled = Template.bind({});
+exports.Disabled = Disabled;
+Disabled.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  children: 'Disabled Glare Button',
+  disabled: true
+});
+var FullWidth = Template.bind({});
+exports.FullWidth = FullWidth;
+FullWidth.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  children: 'Full Width Glare Button',
+  fullWidth: true
+});
+var CustomColors = Template.bind({});
+exports.CustomColors = CustomColors;
+CustomColors.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  children: 'Custom Colors',
+  backgroundColor: '#6200ee',
+  textColor: '#ffffff',
+  borderColor: '#9d4edd',
+  glareColor: '#e0aaff'
+});
+var SlowAnimation = Template.bind({});
+exports.SlowAnimation = SlowAnimation;
+SlowAnimation.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  children: 'Slow Glare Effect',
+  animationDuration: 8
+});
+var FastAnimation = Template.bind({});
+exports.FastAnimation = FastAnimation;
+FastAnimation.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  children: 'Fast Glare Effect',
+  animationDuration: 2
+});

package/dist/components/Footer/Footer.js

@@ -7,7 +7,7 @@ exports.default = exports.Footer = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _Grid = require("../Grid/Grid.styles");
-var _Footer = require("./Footer.styles");
+var _FooterStyles = require("./Footer.styles.js");
 var _mangopay = _interopRequireDefault(require("../../static/images/mangopay.svg"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var Footer = function Footer(_ref) {
@@ -17,13 +17,13 @@ var Footer = function Footer(_ref) {
     _ref$hasSidebar = _ref.hasSidebar,
     hasSidebar = _ref$hasSidebar === void 0 ? false : _ref$hasSidebar,
     isSidebarExpanded = _ref.isSidebarExpanded;
-  return /*#__PURE__*/_react.default.createElement(_Footer.StyledFooter, {
+  return /*#__PURE__*/_react.default.createElement(_FooterStyles.StyledFooter, {
     color: color,
     isSidebarExpanded: isSidebarExpanded,
     hasSidebar: hasSidebar
-  }, /*#__PURE__*/_react.default.createElement(_Grid.Wrapper, null, /*#__PURE__*/_react.default.createElement(_Footer.FooterInner, {
+  }, /*#__PURE__*/_react.default.createElement(_Grid.Wrapper, null, /*#__PURE__*/_react.default.createElement(_FooterStyles.FooterInner, {
     hasSidebar: hasSidebar
-  }, /*#__PURE__*/_react.default.createElement(_Footer.PartnerWrap, null, /*#__PURE__*/_react.default.createElement(_Footer.Partner, null, "STOKR is a virtual asset service provider (VASP), ", /*#__PURE__*/_react.default.createElement("br", null), ' ', /*#__PURE__*/_react.default.createElement("a", {
+  }, /*#__PURE__*/_react.default.createElement(_FooterStyles.PartnerWrap, null, /*#__PURE__*/_react.default.createElement(_FooterStyles.Partner, null, "STOKR is a virtual asset service provider (VASP), ", /*#__PURE__*/_react.default.createElement("br", null), ' ', /*#__PURE__*/_react.default.createElement("a", {
     href: "https://searchentities.apps.cssf.lu/search-entities/search?&st=advanced&entType=VAP&entDate=2020-08-01",
     title: "registered",
     target: "_blank",
@@ -32,17 +32,18 @@ var Footer = function Footer(_ref) {
       textDecoration: 'underline',
       color: 'white'
     }
-  }, "registered"), ' ', "with the Luxembourg regulator CSSF.")), /*#__PURE__*/_react.default.createElement(_Footer.LogoWrap, null, /*#__PURE__*/_react.default.createElement("img", {
+  }, "registered"), ' ', "with the Luxembourg regulator CSSF.")), /*#__PURE__*/_react.default.createElement(_FooterStyles.LogoWrap, null, /*#__PURE__*/_react.default.createElement("img", {
     style: {
       verticalAlign: 'middle',
       minWidth: 44,
       maxWidth: 120
     },
+    loading: "lazy",
     src: _mangopay.default
     // width={44}
     ,
     alt: "Mangopay logo"
-  })), /*#__PURE__*/_react.default.createElement(_Footer.PoweredWrap, null, /*#__PURE__*/_react.default.createElement(_Footer.Copyright, null, "Copyright ", new Date().getFullYear(), " STOKR. All rights reserved.")))));
+  })), /*#__PURE__*/_react.default.createElement(_FooterStyles.PoweredWrap, null, /*#__PURE__*/_react.default.createElement(_FooterStyles.Copyright, null, "Copyright ", new Date().getFullYear(), " STOKR. All rights reserved.")))));
 };
 exports.Footer = Footer;
 Footer.propTypes = {

package/dist/components/Footer/Footer.styles.js

@@ -31,7 +31,7 @@ exports.StyledFooter = StyledFooter;
 var FooterInner = _styledComponents.default.div.withConfig({
   displayName: "Footerstyles__FooterInner",
   componentId: "sc-12rq6gz-1"
-})(["padding:24px 0;justify-content:space-between;", " ", " @media screen and (max-width:991px){flex-direction:column;padding:56px 65px;}"], function (props) {
+})(["padding:24px 0;justify-content:space-between;", " ", " @media screen and (max-width:991px){flex-direction:column;padding:56px 32px;}"], function (props) {
   return props.hasSidebar && "\n    padding: 24px ".concat((0, _grid.default)(1), ";\n  ");
 }, _rwd.default.Medium(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    padding: 20px 0;\n    display: flex;\n    align-items: center;\n    height: 100%;\n\n     ", "\n  "])), function (props) {
   return props.hasSidebar && "\n      padding: 20px ".concat((0, _grid.default)(1), ";\n      ");

package/dist/components/Footer/FooterMenu.js

@@ -51,6 +51,7 @@ var socialSvg = {
   linkedin: /*#__PURE__*/_react.default.createElement("img", {
     src: _LIInBug.default,
     alt: "Linkedin Logo",
+    loading: "lazy",
     style: {
       padding: 1
     }
@@ -59,22 +60,26 @@ var socialSvg = {
   twitter: /*#__PURE__*/_react.default.createElement("img", {
     src: _XLogoBlack.default,
     alt: "X Logo",
+    loading: "lazy",
     style: {
       padding: 4
     }
   }),
   facebook: /*#__PURE__*/_react.default.createElement("img", {
     src: _Facebook_Logo.default,
-    alt: "Facebook Logo"
+    alt: "Facebook Logo",
+    loading: "lazy"
   }),
   telegram: /*#__PURE__*/_react.default.createElement("img", {
     src: _TelegramLogo.default,
-    alt: "Telegram Logo"
+    alt: "Telegram Logo",
+    loading: "lazy"
   }),
   //medium: <SocialMedium />,
   youtube: /*#__PURE__*/_react.default.createElement("img", {
     src: _youtube_social_circle_red.default,
-    alt: "Youtube Logo"
+    alt: "Youtube Logo",
+    loading: "lazy"
   }),
   reddit: /*#__PURE__*/_react.default.createElement(_SvgIcons.SocialReddit, null)
 };

package/dist/components/Header/Header.js

@@ -7,12 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Header = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactRouterDom = require("react-router-dom");
 var _Button = _interopRequireDefault(require("../Button/Button.styles"));
 var _SvgIcons = require("../SvgIcons");
 var _MenuNav = _interopRequireDefault(require("../MenuNav/MenuNav.styles"));
 var _MainMenu = _interopRequireDefault(require("../MainMenu/MainMenu"));
-var _StepsProgress = _interopRequireWildcard(require("../StepsProgress/StepsProgress"));
+var _StepsProgress = require("../StepsProgress/StepsProgress");
 var _NotificationCounter = _interopRequireDefault(require("../NotificationCounter/NotificationCounter.styles"));
 var _avatarPlaceholder = _interopRequireDefault(require("../../static/images/avatar-placeholder.png"));
 var _Header = require("./Header.styles");
@@ -40,23 +39,17 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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; } //import { Wrapper } from '../Input/Input.styles'
 var productMenuItems = [{
-  name: 'SME Fundraising',
+  name: 'End-to-End Tokenization',
   onClick: function onClick() {
-    return window.location.href = "".concat(_globalVariables.platformURL, "/products/sme-fundraising");
+    return window.location.href = "".concat(_globalVariables.platformURL, "/solutions/asset-tokenization");
   },
-  link: '/products/sme-fundraising'
+  link: '/solutions/asset-tokenization'
 }, {
-  name: 'Asset Tokenization',
+  name: 'Tokenization-as-a-Service',
   onClick: function onClick() {
-    return window.location.href = "".concat(_globalVariables.platformURL, "/products/asset-tokenization");
+    return window.location.href = "".concat(_globalVariables.platformURL, "/solutions/tokenization-as-service");
   },
-  link: '/products/asset-tokenization'
-}, {
-  name: 'Fund Tokenization',
-  onClick: function onClick() {
-    return window.location.href = "".concat(_globalVariables.platformURL, "/products/fund-tokenization");
-  },
-  link: '/products/fund-tokenization'
+  link: '/solutions/tokenization-as-service'
 }];
 var mediaMenuItems = [{
   name: 'Press Releases',
@@ -263,7 +256,7 @@ var Header = function Header(_ref3) {
       return toggleMenu('products');
     },
     "data-cy": "products-nav-link"
-  }, "Products")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
+  }, "Solutions")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
     onClick: function onClick() {
       return toggleMenu('media');
     },
@@ -324,7 +317,7 @@ var Header = function Header(_ref3) {
     href: newPlatformUrl + '/featured-assets',
     "data-cy": "invest-nav-link"
   }, "Invest")), /*#__PURE__*/_react.default.createElement(RenderSubMenu, {
-    title: "products",
+    title: "solutions",
     isActive: currentActiveSubMenu === 'products',
     subMenuItems: productMenuItems,
     platformURL: newPlatformUrl,

package/dist/components/Header/Header.styles.js

@@ -35,7 +35,7 @@ var HeaderInner = _styledComponents.default.div.withConfig({
   componentId: "sc-hifrdy-2"
 })(["position:relative;padding:24px;", " ", ""], function (props) {
   return props.withSidebar && "\n     left: 64px;\n    transition: 0.3s width;\n  ";
-}, _rwd.default.MLarge(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    padding: 28px 32px;\n    align-items: center;\n    height: 100%;\n\n    ", "\n  "])), function (props) {
+}, _rwd.default.MLarge(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    padding: 28px 64px;\n    align-items: center;\n    height: 100%;\n\n    ", "\n  "])), function (props) {
   return props.withSidebar && "\n      width:100%;\n      left:0;\n    ";
 }));
 exports.HeaderInner = HeaderInner;