@stokr/components-library 2.3.73 → 2.3.74

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components/ConfirmModal/ConfirmModal.js +1 -1
  2. package/dist/components/InfoBox/InfoBox.js +4 -2
  3. package/dist/components/Modal/SideModal.js +3 -37
  4. package/dist/components/Payment/PaymentDetailsCard.js +3 -3
  5. package/package.json +1 -1
package/dist/components/ConfirmModal/ConfirmModal.js CHANGED
@@ -108,7 +108,7 @@ const ConfirmModalComponent = _ref => {
108
108
  style: {
109
109
  marginTop: '16px'
110
110
  }
111
- }, content)), renderFooter ? /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, renderFooter({
111
+ }, content)), renderFooter ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderFooter({
112
112
  onConfirm: handleConfirm,
113
113
  onCancel: handleCancel
114
114
  })) : /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, {
package/dist/components/InfoBox/InfoBox.js CHANGED
@@ -28,7 +28,7 @@ const VARIANTS = {
28
28
  const Container = _styledComponents.default.div.withConfig({
29
29
  displayName: "InfoBox__Container",
30
30
  componentId: "sc-fb6dfq-0"
31
- })(["position:relative;display:flex;overflow:hidden;align-items:flex-start;align-items:center;gap:12px;padding:12px 20px 12px 16px;background:", ";border:1px solid ", ";border-radius:8px;font-size:12px;line-height:18px;letter-spacing:0.6px;font-weight:400;color:", ";&:before{content:'';display:block;width:4px;position:absolute;height:100%;left:0px;background:", ";}"], props => props.$bg, props => props.$border, _colors.default.black, props => props.$border);
31
+ })(["position:relative;display:flex;overflow:hidden;align-items:flex-start;align-items:center;gap:12px;padding:12px 20px 12px 16px;background:", ";border:1px solid ", ";border-radius:8px;font-size:12px;line-height:18px;letter-spacing:0.6px;font-weight:400;color:", ";", ""], props => props.$bg, props => props.$border, _colors.default.black, props => !props.$noLeftBorder && "\n &:before {\n content: '';\n display: block;\n width: 4px;\n position: absolute;\n height: 100%;\n left: 0px;\n background: ".concat(props.$border, ";\n }\n "));
32
32
  const DefaultIcon = _styledComponents.default.i.attrs({
33
33
  className: 'ion ion-md-information-circle-outline'
34
34
  }).withConfig({
@@ -59,7 +59,8 @@ const InfoBox = _ref => {
59
59
  children,
60
60
  icon,
61
61
  style,
62
- className
62
+ className,
63
+ noLeftBorder
63
64
  } = _ref;
64
65
  const theme = VARIANTS[variant] || VARIANTS.warning;
65
66
  const renderIcon = () => {
@@ -72,6 +73,7 @@ const InfoBox = _ref => {
72
73
  };
73
74
  return /*#__PURE__*/_react.default.createElement(Container, {
74
75
  $bg: theme.background,
76
+ $noLeftBorder: noLeftBorder,
75
77
  $border: theme.border,
76
78
  style: style,
77
79
  className: className
package/dist/components/Modal/SideModal.js CHANGED
@@ -28,59 +28,25 @@ const SideModal = _ref => {
28
28
  props = _objectWithoutProperties(_ref, _excluded);
29
29
  const [isVisible, setIsVisible] = (0, _react.useState)(false);
30
30
  (0, _react.useEffect)(() => {
31
- // Disable scroll on background when modal is open
32
31
  if (isOpen) {
33
- // Calculate scrollbar width before hiding it
34
32
  const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
35
-
36
- // Store current scroll position
37
- const scrollY = window.scrollY;
38
-
39
- // Apply styles to prevent layout shift
40
- document.body.style.position = 'fixed';
41
- document.body.style.top = "-".concat(scrollY, "px");
42
- document.body.style.left = '0';
43
- document.body.style.right = '0';
33
+ document.documentElement.style.overflow = 'hidden';
44
34
  document.body.style.overflow = 'hidden';
45
35
  document.body.style.paddingRight = "".concat(scrollbarWidth, "px");
46
-
47
- // Set CSS variable for fixed elements (like headers)
48
36
  document.documentElement.style.setProperty('--scrollbar-compensation', "".concat(scrollbarWidth, "px"));
49
-
50
- // Store scroll position for restoration
51
- document.body.dataset.scrollY = scrollY;
52
-
53
- // Small delay to trigger animation
54
37
  setTimeout(() => setIsVisible(true), 10);
55
38
  } else {
56
- // Restore scroll position
57
- const scrollY = document.body.dataset.scrollY || '0';
58
-
59
- // Reset all body styles
60
- document.body.style.position = '';
61
- document.body.style.top = '';
62
- document.body.style.left = '';
63
- document.body.style.right = '';
39
+ document.documentElement.style.overflow = '';
64
40
  document.body.style.overflow = '';
65
41
  document.body.style.paddingRight = '';
66
-
67
- // Reset CSS variable
68
42
  document.documentElement.style.setProperty('--scrollbar-compensation', '0px');
69
-
70
- // Restore scroll position
71
- window.scrollTo(0, parseInt(scrollY));
72
43
  setIsVisible(false);
73
44
  }
74
45
  return () => {
75
- const scrollY = document.body.dataset.scrollY || '0';
76
- document.body.style.position = '';
77
- document.body.style.top = '';
78
- document.body.style.left = '';
79
- document.body.style.right = '';
46
+ document.documentElement.style.overflow = '';
80
47
  document.body.style.overflow = '';
81
48
  document.body.style.paddingRight = '';
82
49
  document.documentElement.style.setProperty('--scrollbar-compensation', '0px');
83
- window.scrollTo(0, parseInt(scrollY));
84
50
  };
85
51
  }, [isOpen]);
86
52
 
package/dist/components/Payment/PaymentDetailsCard.js CHANGED
@@ -39,7 +39,7 @@ const AmountDisplay = _styledComponents.default.div.withConfig({
39
39
  const AmountLeft = _styledComponents.default.div.withConfig({
40
40
  displayName: "PaymentDetailsCard__AmountLeft",
41
41
  componentId: "sc-e830fo-6"
42
- })(["display:flex;align-items:center;gap:16px;flex:1;min-width:0;"]);
42
+ })(["display:flex;align-items:center;gap:12px;flex:1;min-width:0;"]);
43
43
  const CurrencyTicker = _styledComponents.default.div.withConfig({
44
44
  displayName: "PaymentDetailsCard__CurrencyTicker",
45
45
  componentId: "sc-e830fo-7"
@@ -75,7 +75,7 @@ const SectionHeader = _styledComponents.default.div.withConfig({
75
75
  const DetailsSection = _styledComponents.default.div.withConfig({
76
76
  displayName: "PaymentDetailsCard__DetailsSection",
77
77
  componentId: "sc-e830fo-15"
78
- })(["margin-bottom:", ";"], props => props.noMargin ? '0' : '20px');
78
+ })(["margin-bottom:", ";"], props => props.noMargin ? '0' : '24px');
79
79
  const DetailRow = _styledComponents.default.div.withConfig({
80
80
  displayName: "PaymentDetailsCard__DetailRow",
81
81
  componentId: "sc-e830fo-16"
@@ -189,7 +189,7 @@ const AmountBlock = _ref2 => {
189
189
  }
190
190
  return /*#__PURE__*/_react.default.createElement(CurrencyLogo, {
191
191
  color: logoColor
192
- }, currency ? currency.charAt(0).toUpperCase() : '');
192
+ });
193
193
  };
194
194
  return /*#__PURE__*/_react.default.createElement(AmountSection, null, /*#__PURE__*/_react.default.createElement(AmountLabel, {
195
195
  hasSubtitle: !!subtitle
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stokr/components-library",
3
- "version": "2.3.73",
3
+ "version": "2.3.74",
4
4
  "description": "STOKR - Components Library",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",