@stokr/components-library 2.3.44-beta.3 → 2.3.45

package/dist/components/AdminDashboard/Table/ReactTable.js

@@ -37,8 +37,15 @@ function ReactTable(props) {
     customTdStyles = props.customTdStyles,
     customThStyles = props.customThStyles,
     customRowHoverStyles = props.customRowHoverStyles,
+    customRowHoverContent = props.customRowHoverContent,
     calculateSubData = props.calculateSubData;
 
+  // State to track which row is being hovered
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    hoveredRowIndex = _useState2[0],
+    setHoveredRowIndex = _useState2[1];
+
   // Use the state and functions returned from useTable to build UI
   var _useTable = (0, _reactTable.useTable)({
       columns: columns,
@@ -59,13 +66,24 @@ function ReactTable(props) {
     _useTable$state = _useTable.state,
     pageIndex = _useTable$state.pageIndex,
     pageSize = _useTable$state.pageSize;
-  var _useState = (0, _react.useState)(isSubTable ? 10000 : 10),
-    _useState2 = _slicedToArray(_useState, 2),
-    inputPageSize = _useState2[0],
-    setInputPageSize = _useState2[1];
+  var _useState3 = (0, _react.useState)(isSubTable ? 10000 : 10),
+    _useState4 = _slicedToArray(_useState3, 2),
+    inputPageSize = _useState4[0],
+    setInputPageSize = _useState4[1];
   _react.default.useEffect(function () {
     setInputPageSize(pageSize);
   }, [pageSize]);
+
+  // Function to render cell content with hover support
+  var renderCellContent = function renderCellContent(cell, rowIndex, rowData) {
+    if (customRowHoverContent && hoveredRowIndex === rowIndex) {
+      var hoverContent = customRowHoverContent(cell.column.id, rowIndex, rowData);
+      if (hoverContent !== undefined) {
+        return hoverContent;
+      }
+    }
+    return cell.render('Cell');
+  };
   return /*#__PURE__*/_react.default.createElement(_Table.Styles, null, /*#__PURE__*/_react.default.createElement(_Table.TableWrap, null, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable, getTableProps(), /*#__PURE__*/_react.default.createElement("thead", null, headerGroups.map(function (headerGroup) {
     return /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, headerGroup.getHeaderGroupProps(), headerGroup.headers.map(function (column) {
       var cellStyles = customThStyles ? customThStyles(column) : {};
@@ -73,7 +91,10 @@ function ReactTable(props) {
         className: column.collapse ? 'collapse' : '',
         style: _objectSpread({}, cellStyles)
       }), {
-        blue: blue
+        blue: blue,
+        width: column.width,
+        minWidth: column.minWidth,
+        maxWidth: column.maxWidth
       }), column.render('Header'));
     }));
   })), /*#__PURE__*/_react.default.createElement("tbody", getTableBodyProps(), page.map(function (row, i) {
@@ -81,17 +102,26 @@ function ReactTable(props) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: row.id
     }, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, _extends({}, row.getRowProps(), {
-      customRowHoverStyles: customRowHoverStyles
-      // rowIndex={i}
-      // rowData={row.original}
+      customRowHoverStyles: customRowHoverStyles,
+      rowIndex: i,
+      rowData: row.original,
+      onMouseEnter: function onMouseEnter() {
+        return setHoveredRowIndex(i);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHoveredRowIndex(null);
+      }
     }), row.cells.map(function (cell) {
       var cellStyles = customTdStyles ? customTdStyles(i, row.original) : {};
       return /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Td, _extends({}, cell.row.getToggleRowExpandedProps(), cell.getCellProps({
         className: cell.column.collapse ? 'collapse' : '',
         style: _objectSpread({}, cellStyles)
       }), {
-        blue: blue
-      }), cell.render('Cell'));
+        blue: blue,
+        width: cell.column.width,
+        minWidth: cell.column.minWidth,
+        maxWidth: cell.column.maxWidth
+      }), renderCellContent(cell, i, row.original));
     })), withSubTable && row.isExpanded && /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, {
       key: "".concat(row.id, "-").concat(i)
     }, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Td, {
@@ -124,7 +154,8 @@ ReactTable.propTypes = {
   noPagination: _propTypes.default.bool,
   withSubTable: _propTypes.default.bool,
   isSubTable: _propTypes.default.bool,
-  customRowHoverStyles: _propTypes.default.func
+  customRowHoverStyles: _propTypes.default.func,
+  customRowHoverContent: _propTypes.default.func
 };
 ReactTable.defaultProps = {
   blue: false,

package/dist/components/AdminDashboard/Table/ReactTable.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WrapperWithSubTable = exports.WithoutPagination = exports.WithSubTable = exports.WithStatusBasedHover = exports.WithRowHover = exports.WithCustomStyling = exports.DefaultWrapper = exports.Default = exports.BlueWrapper = exports.BlueTable = void 0;
+exports.default = exports.WrapperWithSubTable = exports.WithoutPagination = exports.WithSubTable = exports.WithStatusBasedHover = exports.WithRowSpecificHover = exports.WithRowHover = exports.WithHoverStylesAndContent = exports.WithHoverContent = exports.WithFixedColumnWidths = exports.WithCustomStyling = exports.DefaultWrapper = exports.Default = exports.BlueWrapper = exports.BlueTable = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ReactTable = require("./ReactTable");
 var _ReactTableWrapper = require("./ReactTableWrapper");
@@ -49,35 +49,54 @@ var _default = {
     },
     customRowHoverStyles: {
       control: 'function'
+    },
+    customRowHoverContent: {
+      control: 'function'
     }
   }
 }; // Sample columns and data for demonstration
 exports.default = _default;
 var columns = [{
   Header: 'ID',
-  accessor: 'id'
+  accessor: 'id',
+  width: '10%',
+  minWidth: '80px'
 }, {
   Header: 'Name',
-  accessor: 'name'
+  accessor: 'name',
+  width: '30%',
+  minWidth: '150px'
 }, {
   Header: 'Status',
-  accessor: 'status'
+  accessor: 'status',
+  width: '20%',
+  minWidth: '100px'
 }, {
   Header: '',
-  accessor: 'dropdown'
+  accessor: 'dropdown',
+  width: '40%',
+  minWidth: '120px'
 }];
 var columnsWrapper = [{
   label: 'ID',
-  key: 'id'
+  key: 'id',
+  width: '10%',
+  minWidth: '80px'
 }, {
   label: 'Name',
-  key: 'name'
+  key: 'name',
+  width: '30%',
+  minWidth: '150px'
 }, {
   label: 'Status',
-  key: 'status'
+  key: 'status',
+  width: '20%',
+  minWidth: '100px'
 }, {
   label: '',
-  key: 'dropdown'
+  key: 'dropdown',
+  width: '40%',
+  minWidth: '120px'
 }];
 var subColumns = [{
   Header: 'Detail ID',
@@ -160,6 +179,80 @@ var customRowHoverStyles = function customRowHoverStyles(rowIndex, rowData) {
   return "\n    background-color: #f0f8ff !important;\n    transform: scale(1.01);\n    transition: all 0.2s ease-in-out;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    \n    td {\n      background-color: #f0f8ff !important;\n      border-bottom-color: #0050ca !important;\n    }\n  ";
 };
 
+// Custom row hover content function
+var customRowHoverContent = function customRowHoverContent(columnId, rowIndex, rowData) {
+  switch (columnId) {
+    case 'name':
+      // Show underlined link on hover
+      return /*#__PURE__*/_react.default.createElement("a", {
+        href: "/user/".concat(rowData.id),
+        style: {
+          textDecoration: 'underline',
+          color: '#0050ca',
+          fontWeight: 'bold'
+        }
+      }, rowData.name);
+    case 'dropdown':
+      // Show action buttons on hover
+      return /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          display: 'flex',
+          gap: '8px'
+        }
+      }, /*#__PURE__*/_react.default.createElement("button", {
+        style: {
+          padding: '4px 8px',
+          fontSize: '12px',
+          backgroundColor: '#0050ca',
+          color: 'white',
+          border: 'none',
+          borderRadius: '4px',
+          cursor: 'pointer'
+        },
+        onClick: function onClick() {
+          return alert("Edit ".concat(rowData.name));
+        }
+      }, "Edit"), /*#__PURE__*/_react.default.createElement("button", {
+        style: {
+          padding: '4px 8px',
+          fontSize: '12px',
+          backgroundColor: '#dc3545',
+          color: 'white',
+          border: 'none',
+          borderRadius: '4px',
+          cursor: 'pointer'
+        },
+        onClick: function onClick() {
+          return alert("Delete ".concat(rowData.name));
+        }
+      }, "Delete"));
+    case 'status':
+      // Show status with icon on hover
+      var statusColors = {
+        Active: '#28a745',
+        Inactive: '#dc3545',
+        Pending: '#ffc107'
+      };
+      return /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '4px'
+        }
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        style: {
+          width: '8px',
+          height: '8px',
+          borderRadius: '50%',
+          backgroundColor: statusColors[rowData.status] || '#6c757d'
+        }
+      }), rowData.status);
+    default:
+      return undefined;
+    // Return undefined to use default content
+  }
+};
+
 // Status-based hover styles
 var statusBasedHoverStyles = function statusBasedHoverStyles(rowIndex, rowData) {
   switch (rowData.status) {
@@ -174,6 +267,22 @@ var statusBasedHoverStyles = function statusBasedHoverStyles(rowIndex, rowData)
   }
 };
 
+// Row-specific hover styles (example: different styles for first and last rows)
+var rowSpecificHoverStyles = function rowSpecificHoverStyles(rowIndex, rowData) {
+  // Special styling for first row
+  if (rowIndex === 0) {
+    return "\n      background-color: #e3f2fd !important;\n      transform: scale(1.02);\n      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n      td {\n        background-color: #e3f2fd !important;\n        border-bottom-color: #2196f3 !important;\n        font-weight: bold;\n      }\n    ";
+  }
+
+  // Special styling for last row
+  if (rowIndex === data.length - 1) {
+    return "\n      background-color: #f3e5f5 !important;\n      transform: scale(1.02);\n      box-shadow: 0 4px 12px rgba(156, 39, 176, 0.3);\n      td {\n        background-color: #f3e5f5 !important;\n        border-bottom-color: #9c27b0 !important;\n        font-weight: bold;\n      }\n    ";
+  }
+
+  // Default styling for other rows
+  return "\n    background-color: #f0f8ff !important;\n    transform: scale(1.01);\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    td {\n      background-color: #f0f8ff !important;\n      border-bottom-color: #0050ca !important;\n    }\n  ";
+};
+
 // Function to calculate sub data
 var calculateSubData = function calculateSubData(row) {
   return row.original.subData || [];
@@ -207,11 +316,33 @@ exports.WithRowHover = WithRowHover;
 WithRowHover.args = _objectSpread(_objectSpread({}, Default.args), {}, {
   customRowHoverStyles: customRowHoverStyles
 });
+var WithHoverContent = Template.bind({});
+exports.WithHoverContent = WithHoverContent;
+WithHoverContent.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  customRowHoverContent: customRowHoverContent
+});
+var WithHoverStylesAndContent = Template.bind({});
+exports.WithHoverStylesAndContent = WithHoverStylesAndContent;
+WithHoverStylesAndContent.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  customRowHoverStyles: customRowHoverStyles,
+  customRowHoverContent: customRowHoverContent
+});
 var WithStatusBasedHover = Template.bind({});
 exports.WithStatusBasedHover = WithStatusBasedHover;
 WithStatusBasedHover.args = _objectSpread(_objectSpread({}, Default.args), {}, {
   customRowHoverStyles: statusBasedHoverStyles
 });
+var WithRowSpecificHover = Template.bind({});
+exports.WithRowSpecificHover = WithRowSpecificHover;
+WithRowSpecificHover.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  customRowHoverStyles: rowSpecificHoverStyles
+});
+var WithFixedColumnWidths = Template.bind({});
+exports.WithFixedColumnWidths = WithFixedColumnWidths;
+WithFixedColumnWidths.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  customRowHoverContent: customRowHoverContent,
+  customRowHoverStyles: customRowHoverStyles
+});
 var WithSubTable = Template.bind({});
 exports.WithSubTable = WithSubTable;
 WithSubTable.args = _objectSpread(_objectSpread({}, Default.args), {}, {

package/dist/components/AdminDashboard/Table/ReactTableWrapper.js

@@ -10,9 +10,15 @@ var _Table = require("./Table.styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _excluded = ["columns", "subColumns"];
 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 _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; }
+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); }
 //This components is used only to memoize the values before we sent them to the react-table
 var ReactTableWrapper = function ReactTableWrapper(props) {
   var makeNewColumns = function makeNewColumns(data) {
@@ -38,10 +44,10 @@ var ReactTableWrapper = function ReactTableWrapper(props) {
           }
         };
       }
-      return {
+      return _objectSpread({
         Header: column.label || column.Header,
         accessor: column.key || column.accessor
-      };
+      }, column);
     });
   };
   var memoizedColumns = _react.default.useMemo(function () {

package/dist/components/AdminDashboard/Table/Table.styles.js

@@ -99,17 +99,29 @@ exports.TableWrap = TableWrap;
 var StyledTh = _styledComponents.default.th.withConfig({
   displayName: "Tablestyles__StyledTh",
   componentId: "sc-pdcd6r-12"
-})(["text-transform:uppercase;padding:10px;font-size:11px;letter-spacing:1.6px;font-weight:600;background-color:white;color:#000000de;border-bottom:1px solid #e1e1e1;line-height:20px;", ""], function (props) {
+})(["text-transform:uppercase;padding:10px;font-size:11px;letter-spacing:1.6px;font-weight:600;background-color:white;color:#000000de;border-bottom:1px solid #e1e1e1;line-height:20px;", " ", " ", " ", ""], function (props) {
   return props.blue && "\n      background-color: #0050ca;\n      color: #ffffff;\n      border:none;\n  ";
+}, function (props) {
+  return props.width && "\n      width: ".concat(props.width, ";\n      min-width: ").concat(props.width, ";\n      max-width: ").concat(props.width, ";\n  ");
+}, function (props) {
+  return props.minWidth && "\n      min-width: ".concat(props.minWidth, ";\n  ");
+}, function (props) {
+  return props.maxWidth && "\n      max-width: ".concat(props.maxWidth, ";\n  ");
 });
 exports.StyledTh = StyledTh;
 var StyledTd = _styledComponents.default.td.withConfig({
   displayName: "Tablestyles__StyledTd",
   componentId: "sc-pdcd6r-13"
-})(["padding:26px 15px;border-bottom:1px solid #e1e1e1;font-size:14px;", " ", ""], function (props) {
+})(["padding:26px 15px;border-bottom:1px solid #e1e1e1;font-size:14px;", " ", " ", " ", " ", ""], function (props) {
   return props.blue && "\n      background-color: #004bb7;\n    color: #ffffff;\n  ";
 }, function (props) {
   return props.subTable && "\n     padding: 0;\n      &:last-child {\n        border-bottom: 0;\n      }\n  ";
+}, function (props) {
+  return props.width && "\n      width: ".concat(props.width, ";\n      min-width: ").concat(props.width, ";\n      max-width: ").concat(props.width, ";\n  ");
+}, function (props) {
+  return props.minWidth && "\n      min-width: ".concat(props.minWidth, ";\n  ");
+}, function (props) {
+  return props.maxWidth && "\n      max-width: ".concat(props.maxWidth, ";\n  ");
 });
 exports.StyledTd = StyledTd;
 var StyledTr = _styledComponents.default.tr.withConfig({

package/dist/components/ButtonContainer/ButtonContainer.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ButtonContainer = void 0;
+exports.default = exports.ButtonGridContainer = exports.ButtonContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Button = _interopRequireDefault(require("../Button/Button.styles"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -14,5 +14,10 @@ var ButtonContainer = _styledComponents.default.div.withConfig({
   return props.flexColumn && "\n    flex-direction:column;\n  ";
 }, _Button.default, _Button.default);
 exports.ButtonContainer = ButtonContainer;
+var ButtonGridContainer = _styledComponents.default.div.withConfig({
+  displayName: "ButtonContainerstyles__ButtonGridContainer",
+  componentId: "sc-1no5512-1"
+})(["display:grid;grid-template-columns:repeat(2,1fr);gap:10px;justify-items:center;align-items:center;", "{min-width:150px;max-width:300px;width:100%;}@media screen and (max-width:767px){grid-template-columns:repeat(1,1fr);", "{max-width:400px;}}"], _Button.default, _Button.default);
+exports.ButtonGridContainer = ButtonGridContainer;
 var _default = ButtonContainer;
 exports.default = _default;

package/dist/components/CryptoAddress/CryptoAddress.js

@@ -47,7 +47,8 @@ var CryptoAddress = function CryptoAddress(_ref) {
     infoBoxStyle = _ref.infoBoxStyle,
     wrapperStyle = _ref.wrapperStyle,
     bodyStyle = _ref.bodyStyle,
-    containerStyle = _ref.containerStyle;
+    containerStyle = _ref.containerStyle,
+    dataValueStyle = _ref.dataValueStyle;
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     copiedAddressToClipboard = _useState2[0],
@@ -95,7 +96,8 @@ var CryptoAddress = function CryptoAddress(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_CryptoAddress.DataBox, {
     style: dataBoxStyle
   }, data.value && /*#__PURE__*/_react.default.createElement(_CryptoAddress.Value, {
-    fontSize: fontSize
+    fontSize: fontSize,
+    style: dataValueStyle
   }, data.unit && "".concat(data.unit, " "), data.shortAddress ? /*#__PURE__*/_react.default.createElement(_reactTippy.Tooltip, {
     position: "top",
     title: data.value,
@@ -161,7 +163,8 @@ CryptoAddress.propTypes = {
   dataBoxStyle: _propTypes.default.object,
   headStyle: _propTypes.default.object,
   infoBoxStyle: _propTypes.default.object,
-  wrapperStyle: _propTypes.default.object
+  wrapperStyle: _propTypes.default.object,
+  dataValueStyle: _propTypes.default.object
 };
 //address not required in IIS, instead wrapping {address &&( .. now doing both which is redundant
 

package/dist/components/CryptoAddress/RadioWrap.js

@@ -16,8 +16,8 @@ var RadioWrap = function RadioWrap(_ref) {
     radio = _ref.radio;
   var handleOnClick = function handleOnClick(e) {
     if (radio) {
-      radio.handleCheckedAddressRadio(e.target.id);
-      radio.handleSelectedCryptoAddress(radio.address);
+      radio.handleCheckedAddressRadio && radio.handleCheckedAddressRadio(e.target.id);
+      radio.handleSelectedCryptoAddress && radio.handleSelectedCryptoAddress(radio.address);
     }
   };
   return radio ? /*#__PURE__*/_react.default.createElement(_CryptoAddress.Radio, {

package/dist/components/HeroBlock/HeroVideoBlock.js

@@ -0,0 +1,108 @@
+"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.HeroVideoBlock = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactVisibilitySensor = _interopRequireDefault(require("react-visibility-sensor"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+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; }
+var VideoContainer = _styledComponents.default.div.withConfig({
+  displayName: "HeroVideoBlock__VideoContainer",
+  componentId: "sc-53qnrg-0"
+})(["position:relative;width:100%;height:100%;overflow:hidden;"]);
+var VideoBackground = _styledComponents.default.video.withConfig({
+  displayName: "HeroVideoBlock__VideoBackground",
+  componentId: "sc-53qnrg-1"
+})(["width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;"]);
+var HeroVideoBlock = function HeroVideoBlock() {
+  var videoRef = (0, _react.useRef)(null);
+  var lastTimeRef = (0, _react.useRef)(0);
+  var lastVisibleTime = (0, _react.useRef)(Date.now());
+  var playVideo = function playVideo() {
+    if (!videoRef.current) return;
+    var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+
+    // Store current time before attempting to play
+    if (videoRef.current.currentTime > 0) {
+      lastTimeRef.current = videoRef.current.currentTime;
+    }
+    var playPromise = videoRef.current.play();
+    if (playPromise !== undefined) {
+      playPromise.catch(function (error) {
+        console.log('Video play error:', error);
+
+        // If play fails on mobile, try the reset approach as a fallback
+        if (isMobile && videoRef.current) {
+          // Only reset if we've been away for a while (more than 2 seconds)
+          var resetNeeded = Date.now() - lastVisibleTime.current > 2000;
+          if (resetNeeded) {
+            // Small adjustment to current time to force refresh
+            videoRef.current.currentTime = lastTimeRef.current || 0.1;
+            videoRef.current.play().catch(function (e) {
+              return console.log('Retry failed:', e);
+            });
+          }
+        }
+      });
+    }
+  };
+  var handleVisibilityChange = function handleVisibilityChange(isVisible) {
+    if (isVisible) {
+      lastVisibleTime.current = Date.now();
+      if (videoRef.current) {
+        playVideo();
+      }
+    } else if (videoRef.current) {
+      // Save the current time when leaving
+      lastTimeRef.current = videoRef.current.currentTime;
+    }
+  };
+
+  // Effect for document visibility (tab switching/browser minimizing)
+  (0, _react.useEffect)(function () {
+    var handleDocVisibilityChange = function handleDocVisibilityChange() {
+      if (document.visibilityState === 'visible') {
+        lastVisibleTime.current = Date.now();
+        // Small delay to ensure the browser is ready
+        setTimeout(function () {
+          playVideo();
+        }, 300);
+      } else if (videoRef.current) {
+        // Save the current time when leaving
+        lastTimeRef.current = videoRef.current.currentTime;
+      }
+    };
+    document.addEventListener('visibilitychange', handleDocVisibilityChange);
+
+    // Initial play
+    playVideo();
+    return function () {
+      document.removeEventListener('visibilitychange', handleDocVisibilityChange);
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_reactVisibilitySensor.default, {
+    onChange: handleVisibilityChange,
+    partialVisibility: true
+  }, /*#__PURE__*/_react.default.createElement(VideoContainer, null, /*#__PURE__*/_react.default.createElement(VideoBackground, {
+    ref: videoRef,
+    autoPlay: true,
+    muted: true,
+    loop: true,
+    playsInline: true,
+    preload: "metadata",
+    "data-vsc-ignore": "true",
+    fetchPriority: "high"
+  }, /*#__PURE__*/_react.default.createElement("source", {
+    src: "https://res.cloudinary.com/stokr/video/upload/f_auto,q_auto:best/v1745923531/Static/Hero_section_video_kuatj1.mp4",
+    type: "video/mp4",
+    fetchPriority: "high"
+  }))));
+};
+exports.HeroVideoBlock = HeroVideoBlock;
+var _default = HeroVideoBlock;
+exports.default = _default;

package/dist/components/InfoIcon/InfoIcon.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTippy = require("react-tippy");
 var _InfoIcon = require("./InfoIcon.styles");
-var _excluded = ["title", "html", "position", "noMargin", "noMarginLeft", "noMarginRight", "noIcon", "disabled"];
+var _excluded = ["title", "html", "position", "noMargin", "noMarginLeft", "noMarginRight", "noIcon", "disabled", "fullWidth"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -21,11 +21,13 @@ var InfoIcon = function InfoIcon(_ref) {
     noMarginRight = _ref.noMarginRight,
     noIcon = _ref.noIcon,
     disabled = _ref.disabled,
+    fullWidth = _ref.fullWidth,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_InfoIcon.Container, {
     noMargin: noMargin,
     noMarginLeft: noMarginLeft,
-    noMarginRight: noMarginRight
+    noMarginRight: noMarginRight,
+    fullWidth: fullWidth
   }, /*#__PURE__*/_react.default.createElement(_reactTippy.Tooltip, {
     position: position,
     title: title,

package/dist/components/InfoIcon/InfoIcon.styles.js

@@ -10,12 +10,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var Container = _styledComponents.default.div.withConfig({
   displayName: "InfoIconstyles__Container",
   componentId: "sc-d3sdn3-0"
-})(["display:inline-block;vertical-align:middle;margin:0 12px;font-size:0;line-height:0;", " ", " ", " & > div{position:relative;display:inline-block!important;}"], function (props) {
+})(["display:inline-block;vertical-align:middle;margin:0 12px;font-size:0;line-height:0;", " ", " ", " ", " & > div{position:relative;display:inline-block !important;", "}"], function (props) {
   return props.noMargin && "\n    margin: 0;\n  ";
 }, function (props) {
   return props.noMarginLeft && "\n    margin-left: 0;\n  ";
 }, function (props) {
   return props.noMarginRight && "\n    margin-right: 0;\n  ";
+}, function (props) {
+  return props.fullWidth && "\n    width: 100%;\n    height: 100%;\n  ";
+}, function (props) {
+  return props.fullWidth && "\n      width: 100%;\n      height: 100%;\n      display: flex !important;\n      align-content: center;\n      flex-wrap: wrap;\n      justify-content: center;\n  ";
 });
 exports.Container = Container;
 var Icon = _styledComponents.default.i.attrs({