@stokr/components-library 2.3.42 → 2.3.44-beta.1

package/dist/utils/scrollUtils.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.scrollToElement = void 0;
+/**
+ * Scrolls to an element with cross-platform compatibility
+ * Works reliably on iOS, iPadOS, macOS, and other platforms
+ *
+ * @param {React.RefObject} elementRef - React ref object for the target element
+ * @param {Object} options - Scrolling options
+ * @param {string} options.behavior - Scroll behavior ('auto' or 'smooth')
+ * @param {string} options.block - Vertical alignment ('start', 'center', 'end', 'nearest')
+ * @param {number} options.delay - Optional delay in ms before scrolling
+ */
+var scrollToElement = function scrollToElement(elementRef) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _options$behavior = options.behavior,
+    behavior = _options$behavior === void 0 ? 'smooth' : _options$behavior,
+    _options$block = options.block,
+    block = _options$block === void 0 ? 'start' : _options$block,
+    _options$delay = options.delay,
+    delay = _options$delay === void 0 ? 0 : _options$delay;
+  var performScroll = function performScroll() {
+    if (!(elementRef !== null && elementRef !== void 0 && elementRef.current)) return;
+
+    // Detect iOS/iPadOS/macOS with touch
+    var isAppleDevice = /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1;
+
+    // Use requestAnimationFrame to ensure the DOM has updated
+    requestAnimationFrame(function () {
+      if (isAppleDevice) {
+        // For Apple devices, use window.scrollTo with calculated position
+        var rect = elementRef.current.getBoundingClientRect();
+        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        var targetY = rect.top + scrollTop;
+        window.scrollTo({
+          top: targetY,
+          behavior: behavior === 'smooth' ? 'auto' : behavior // Use 'auto' for Apple devices
+        });
+      } else {
+        // For other devices, use scrollIntoView
+        elementRef.current.scrollIntoView({
+          behavior: behavior,
+          block: block
+        });
+      }
+    });
+  };
+
+  // Apply delay if specified, otherwise scroll immediately
+  if (delay > 0) {
+    setTimeout(performScroll, delay);
+  } else {
+    performScroll();
+  }
+};
+exports.scrollToElement = scrollToElement;

package/package.json

@@ -1,142 +1,142 @@
-{
-  "name": "@stokr/components-library",
-  "version": "2.3.42",
-  "description": "STOKR - Components Library",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "http://46.101.229.186:3000/stokr/components-library"
-  },
-  "author": "Bilal Hodzic <bilal@stokr.io>",
-  "license": "MIT",
-  "scripts": {
-    "build": "react-app-rewired build",
-    "build-storybook": "storybook build",
-    "build-storybook-docs": "storybook build -s public --docs",
-    "build:dist": "cross-env BABEL_ENV=production babel src -d dist",
-    "test": "react-app-rewired test",
-    "prepare": "npm run build",
-    "storybook": "storybook dev -p 6006",
-    "start": "npm run storybook",
-    "chromatic": "CHROMATIC_APP_CODE=7kzdke5umep chromatic",
-    "release": "auto shipit",
-    "pub": "rm -rf ./dist && npm publish --access public",
-    "start:script": "react-scripts start",
-    "serve": "npx http-server ./storybook-static -p 9009"
-  },
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.3.0",
-    "@fortawesome/free-solid-svg-icons": "^6.3.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "axios": "^0.27.2",
-    "bignumber.js": "^9.1.1",
-    "cross-env": "^7.0.3",
-    "d3": "^7.8.3",
-    "date-fns": "^2.29.3",
-    "firebase": "^10.5.0",
-    "formik": "^2.2.9",
-    "formik-persist": "^1.1.0",
-    "html-react-parser": "^5.0.6",
-    "http-server": "^14.1.1",
-    "js-cookie": "^3.0.5",
-    "mobile-detect": "^1.4.5",
-    "moment": "^2.30.1",
-    "moment-timezone": "^0.5.45",
-    "prop-types": "^15.8.1",
-    "qrcode.react": "^3.1.0",
-    "react": "^18.2.0",
-    "react-app-rewired": "^2.2.1",
-    "react-collapse": "^5.1.1",
-    "react-copy-to-clipboard": "^5.1.0",
-    "react-countup": "^6.4.1",
-    "react-custom-scrollbars-2": "^4.5.0",
-    "react-day-picker": "^8.5.1",
-    "react-device-detect": "^2.2.3",
-    "react-dom": "^18.2.0",
-    "react-ga4": "^2.1.0",
-    "react-helmet": "^6.1.0",
-    "react-otp-input": "^3.1.0",
-    "react-portal": "^4.2.2",
-    "react-qr-code": "^2.0.12",
-    "react-range": "^1.8.14",
-    "react-router-dom": "^6.8.1",
-    "react-scripts": "5.0.1",
-    "react-select": "^5.7.0",
-    "react-slick": "^0.29.0",
-    "react-table": "^7.8.0",
-    "react-tippy": "^1.4.0",
-    "react-transition-group": "^4.4.5",
-    "react-visibility-sensor": "^5.1.1",
-    "scroll-to-element": "^2.0.3",
-    "semantic-ui-react": "^2.1.4",
-    "slick-carousel": "^1.8.1",
-    "styled-components": "^6.0.7",
-    "yup": "^1.0.0"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.20.7",
-    "@babel/core": "^7.20.12",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@chromatic-com/storybook": "^3.2.6",
-    "@storybook/addon-actions": "^8.6.7",
-    "@storybook/addon-essentials": "^8.6.7",
-    "@storybook/addon-interactions": "^8.6.7",
-    "@storybook/addon-links": "^8.6.7",
-    "@storybook/addon-viewport": "^8.6.7",
-    "@storybook/preset-create-react-app": "^8.6.7",
-    "@storybook/react": "^8.6.7",
-    "@storybook/react-webpack5": "^8.6.7",
-    "@storybook/test": "^8.6.7",
-    "babel-plugin-styled-components": "^2.1.4",
-    "prettier": "^3.0.3",
-    "storybook": "^8.6.7",
-    "styled-components.macro": "^1.0.0"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ],
-    "overrides": [
-      {
-        "files": [
-          "**/*.stories.*"
-        ],
-        "rules": {
-          "import/no-anonymous-default-export": "off"
-        }
-      }
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "browser": {
-    "[module-name]": false
-  },
-  "bugs": {
-    "url": "https://github.com/stokr-io/components-library/issues"
-  },
-  "homepage": "https://github.com/stokr-io/components-library#readme",
-  "keywords": [
-    "stokr",
-    "components-library",
-    "story-book"
-  ]
-}
+{
+  "name": "@stokr/components-library",
+  "version": "2.3.44-beta.1",
+  "description": "STOKR - Components Library",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "http://46.101.229.186:3000/stokr/components-library"
+  },
+  "author": "Bilal Hodzic <bilal@stokr.io>",
+  "license": "MIT",
+  "scripts": {
+    "build": "react-app-rewired build",
+    "build-storybook": "storybook build",
+    "build-storybook-docs": "storybook build -s public --docs",
+    "build:dist": "cross-env BABEL_ENV=production babel src -d dist",
+    "test": "react-app-rewired test",
+    "prepare": "npm run build",
+    "storybook": "storybook dev -p 6006",
+    "start": "npm run storybook",
+    "chromatic": "CHROMATIC_APP_CODE=7kzdke5umep chromatic",
+    "release": "auto shipit",
+    "pub": "rm -rf ./dist && npm publish --access public",
+    "start:script": "react-scripts start",
+    "serve": "npx http-server ./storybook-static -p 9009"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-solid-svg-icons": "^6.3.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "axios": "^0.27.2",
+    "bignumber.js": "^9.1.1",
+    "cross-env": "^7.0.3",
+    "d3": "^7.8.3",
+    "date-fns": "^2.29.3",
+    "firebase": "^10.5.0",
+    "formik": "^2.2.9",
+    "formik-persist": "^1.1.0",
+    "html-react-parser": "^5.0.6",
+    "http-server": "^14.1.1",
+    "js-cookie": "^3.0.5",
+    "mobile-detect": "^1.4.5",
+    "moment": "^2.30.1",
+    "moment-timezone": "^0.5.45",
+    "prop-types": "^15.8.1",
+    "qrcode.react": "^3.1.0",
+    "react": "^18.2.0",
+    "react-app-rewired": "^2.2.1",
+    "react-collapse": "^5.1.1",
+    "react-copy-to-clipboard": "^5.1.0",
+    "react-countup": "^6.4.1",
+    "react-custom-scrollbars-2": "^4.5.0",
+    "react-day-picker": "^8.5.1",
+    "react-device-detect": "^2.2.3",
+    "react-dom": "^18.2.0",
+    "react-ga4": "^2.1.0",
+    "react-helmet": "^6.1.0",
+    "react-otp-input": "^3.1.0",
+    "react-portal": "^4.2.2",
+    "react-qr-code": "^2.0.12",
+    "react-range": "^1.8.14",
+    "react-router-dom": "^6.8.1",
+    "react-scripts": "5.0.1",
+    "react-select": "^5.7.0",
+    "react-slick": "^0.29.0",
+    "react-table": "^7.8.0",
+    "react-tippy": "^1.4.0",
+    "react-transition-group": "^4.4.5",
+    "react-visibility-sensor": "^5.1.1",
+    "scroll-to-element": "^2.0.3",
+    "semantic-ui-react": "^2.1.4",
+    "slick-carousel": "^1.8.1",
+    "styled-components": "^6.0.7",
+    "yup": "^1.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.20.7",
+    "@babel/core": "^7.20.12",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@chromatic-com/storybook": "^3.2.6",
+    "@storybook/addon-actions": "^8.6.7",
+    "@storybook/addon-essentials": "^8.6.7",
+    "@storybook/addon-interactions": "^8.6.7",
+    "@storybook/addon-links": "^8.6.7",
+    "@storybook/addon-viewport": "^8.6.7",
+    "@storybook/preset-create-react-app": "^8.6.7",
+    "@storybook/react": "^8.6.7",
+    "@storybook/react-webpack5": "^8.6.7",
+    "@storybook/test": "^8.6.7",
+    "babel-plugin-styled-components": "^2.1.4",
+    "prettier": "^3.0.3",
+    "storybook": "^8.6.7",
+    "styled-components.macro": "^1.0.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "browser": {
+    "[module-name]": false
+  },
+  "bugs": {
+    "url": "https://github.com/stokr-io/components-library/issues"
+  },
+  "homepage": "https://github.com/stokr-io/components-library#readme",
+  "keywords": [
+    "stokr",
+    "components-library",
+    "story-book"
+  ]
+}

package/dist/components/RegisterLiquidSteps/assets/nav_green.svg

@@ -1,31 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="46px" height="46px" viewBox="0 0 46 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
-    <title>nav_green</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <polygon id="path-1" points="0 0.29172973 16.8441568 0.29172973 16.8441568 18.9774541 0 18.9774541"></polygon>
-        <polygon id="path-3" points="0.134854054 0.0508918919 16.978973 0.0508918919 16.978973 21.9459459 0.134854054 21.9459459"></polygon>
-    </defs>
-    <g id="nav_green" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Group-10">
-            <circle id="Oval" fill="#0B7B47" fill-rule="nonzero" cx="23" cy="23" r="23"></circle>
-            <g id="Green" transform="translate(12.000000, 11.000000)">
-                <g id="Group-3" transform="translate(0.000000, 0.086724)">
-                    <mask id="mask-2" fill="white">
-                        <use xlink:href="#path-1"></use>
-                    </mask>
-                    <g id="Clip-2"></g>
-                    <path d="M2.5581027,15.1705892 L2.5581027,2.85361622 L16.8441568,2.85361622 L16.8441568,0.291616216 L-0.000113513514,0.291616216 L-0.000113513514,12.6407514 C-0.000113513514,15.1202649 1.74799459,17.1317243 4.02091351,18.9774541 C3.12112973,17.8268054 2.5581027,16.5766432 2.5581027,15.1705892" id="Fill-1" fill="#FFFFFF" mask="url(#mask-2)"></path>
-                </g>
-                <g id="Group-6" transform="translate(4.918919, 5.384022)">
-                    <mask id="mask-4" fill="white">
-                        <use xlink:href="#path-3"></use>
-                    </mask>
-                    <g id="Clip-5"></g>
-                    <path d="M14.4587459,12.4004054 C14.4587459,14.6082432 11.5331243,16.7646216 8.56361081,18.8547838 C5.59447568,16.7646216 2.66847568,14.6082432 2.66847568,12.4004054 L2.66847568,2.5777027 L14.4587459,2.5777027 L14.4587459,12.4004054 Z M8.62339459,0.0508918919 L0.134854054,0.0508918919 L0.134854054,12.4004054 C0.134854054,16.3680811 4.61296216,19.1381892 8.5568,21.9461351 C12.5044216,19.1381892 16.9791243,16.3680811 16.9791243,12.4004054 L16.9791243,0.0508918919 L8.62339459,0.0508918919 Z" id="Fill-4" fill="#FFFFFF" mask="url(#mask-4)"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

package/dist/components/ResendConfirmationCodeModal/ResendConfirmationCodeModal.stories.js

@@ -1,48 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ResendConfirmationCodeModalDefault = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
-var _global = _interopRequireDefault(require("../../styles/global"));
-var _ResendConfirmationCodeModal = _interopRequireDefault(require("./ResendConfirmationCodeModal"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = {
-  title: 'Components Library/Resend Confirmation Code Modal',
-  component: _ResendConfirmationCodeModal.default,
-  argTypes: {
-    isModalOpen: {
-      type: 'boolean',
-      defaultValue: true
-    },
-    onModalClose: {
-      type: 'function',
-      action: 'onModalClose',
-      required: true
-    },
-    onFormSend: {
-      type: 'function',
-      action: 'onFormSend',
-      required: true
-    },
-    onModalSwitch: {
-      type: 'function',
-      action: 'onModalSwitch',
-      required: true
-    }
-  }
-};
-exports.default = _default;
-var Template = function Template(args) {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_ResendConfirmationCodeModal.default, args)));
-};
-var ResendConfirmationCodeModalDefault = Template.bind({});
-exports.ResendConfirmationCodeModalDefault = ResendConfirmationCodeModalDefault;
-ResendConfirmationCodeModalDefault.args = {
-  isModalOpen: true,
-  onModalClose: function onModalClose() {},
-  onFormSend: function onFormSend() {},
-  onModalSwitch: function onModalSwitch() {}
-};

package/dist/components/video/img/play-btn.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60" height="60" viewBox="0 0 60 60"><defs><path id="ftiva" d="M392 327c0-13.255 10.745-24 24-24s24 10.745 24 24-10.745 24-24 24-24-10.745-24-24z"/><path id="ftivd" d="M417.5 323l6.5 8h-13z"/><mask id="ftivc" width="2" height="2" x="-1" y="-1"><path fill="#fff" d="M392 303h48v48h-48z"/><use xlink:href="#ftiva"/></mask><filter id="ftivb" width="82" height="84" x="375" y="286" filterUnits="userSpaceOnUse"><feOffset dy="2" in="SourceGraphic" result="FeOffset1029Out"/><feGaussianBlur in="FeOffset1029Out" result="FeGaussianBlur1030Out" stdDeviation="2.8 2.8"/></filter></defs><g><g transform="translate(-386 -299)"><g><g><g><g filter="url(#ftivb)"><use fill="none" stroke-opacity=".16" stroke-width="0" mask="url(&quot;#ftivc&quot;)" xlink:href="#ftiva"/><use fill-opacity=".16" xlink:href="#ftiva"/></g><use fill="#ee220d" xlink:href="#ftiva"/></g><g transform="rotate(90 417.5 327)"><use fill="#fff" xlink:href="#ftivd"/></g></g></g></g></g></svg>