@gem-sdk/components 2.1.27-staging.16 → 2.1.27-staging.19

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 (16) hide show
  1. package/dist/cjs/button/components/Button.liquid.js +3 -3
  2. package/dist/cjs/image/components/AdaptiveImage.js +4 -3
  3. package/dist/cjs/image/components/Image.js +2 -21
  4. package/dist/cjs/product/components/ProductButton.js +1 -1
  5. package/dist/cjs/product/components/ProductButton.liquid.js +21 -3
  6. package/dist/cjs/third-party/configs/BoldProductOptions.js +2 -2
  7. package/dist/esm/button/components/Button.liquid.js +3 -3
  8. package/dist/esm/image/components/AdaptiveImage.js +4 -3
  9. package/dist/esm/image/components/Image.js +2 -21
  10. package/dist/esm/product/components/ProductButton.js +1 -1
  11. package/dist/esm/product/components/ProductButton.liquid.js +21 -3
  12. package/dist/esm/third-party/configs/BoldProductOptions.js +2 -2
  13. package/dist/types/index.d.ts +6 -1
  14. package/package.json +2 -2
  15. package/dist/cjs/image/components/NoDataImage.js +0 -133
  16. package/dist/esm/image/components/NoDataImage.js +0 -129
package/dist/cjs/button/components/Button.liquid.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var core = require('@gem-sdk/core');
6
6
  var helpers = require('../../helpers.js');
7
7
 
8
- const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId })=>{
8
+ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId, isForceValue = false })=>{
9
9
  const { align, size, backgroundColor, textColor, roundedBtn, iconSpacing, globalSize } = styles;
10
10
  const { label, iconSvg, btnLink, htmlType, disabled, loading, iconAlign, iconVisible, translate, disabledLoading = true } = setting;
11
11
  const [wrapStyle, restStyle] = core.splitStyle([
@@ -70,7 +70,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
70
70
  color: ${core.getSingleColorVariable(styles?.textColor?.hover)};
71
71
  }
72
72
  `;
73
- const labelValDisplay = helpers.getDynamicSourceLocales({
73
+ const labelValDisplay = isForceValue ? label : helpers.getDynamicSourceLocales({
74
74
  val: label,
75
75
  uid: builderProps?.uidTranslate ?? builderProps?.uid,
76
76
  settingId: translate ?? 'label',
@@ -161,7 +161,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
161
161
  >${iconSvg}</span>`)}
162
162
  <span
163
163
  data-gp-text
164
- class="${`gp-button-text-only gp-break-words group-data-[state=loading]:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
164
+ class="${`gp-content-product-button gp-button-text-only gp-break-words group-data-[state=loading]:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
165
165
  ${styles?.typo?.attrs?.italic ? '[&:not(:has(p))]:gp-pr-[0.2em] [&_p]:[&:has(p)]:gp-pr-[0.2em]' : ''}`}"
166
166
  style="${{
167
167
  ...nodePrice && appendTypoStyle,
package/dist/cjs/image/components/AdaptiveImage.js CHANGED
@@ -7,6 +7,7 @@ var Head = require('next/head');
7
7
  var Img = require('./Img.js');
8
8
 
9
9
  const AdaptiveImage = ({ srcSet, priority, pictureClass, imagePlaceholder, ...rest })=>{
10
+ const fallBackImage = 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif';
10
11
  return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
11
12
  children: [
12
13
  /*#__PURE__*/ jsxRuntime.jsxs(Head, {
@@ -36,17 +37,17 @@ const AdaptiveImage = ({ srcSet, priority, pictureClass, imagePlaceholder, ...re
36
37
  children: [
37
38
  !!srcSet?.mobile?.src && /*#__PURE__*/ jsxRuntime.jsx("source", {
38
39
  media: "(max-width: 767px)",
39
- srcSet: srcSet.mobile.src
40
+ srcSet: srcSet.mobile.src || fallBackImage
40
41
  }),
41
42
  !!srcSet?.tablet?.src && /*#__PURE__*/ jsxRuntime.jsx("source", {
42
43
  media: "(max-width: 1024px)",
43
- srcSet: srcSet?.tablet?.src
44
+ srcSet: srcSet?.tablet?.src || fallBackImage
44
45
  }),
45
46
  /*#__PURE__*/ jsxRuntime.jsx(Img.default, {
46
47
  ...rest,
47
48
  loading: priority ? 'eager' : 'lazy',
48
49
  image: {
49
- src: srcSet?.desktop?.src || imagePlaceholder?.['desktop']
50
+ src: srcSet?.desktop?.src || imagePlaceholder?.['desktop'] || fallBackImage
50
51
  }
51
52
  })
52
53
  ]
package/dist/cjs/image/components/Image.js CHANGED
@@ -8,13 +8,11 @@ var Link = require('../../link/components/Link.js');
8
8
  var AdaptiveImage = require('./AdaptiveImage.js');
9
9
  var NextImage = require('./NextImage.js');
10
10
  var helpers = require('./helpers.js');
11
- var NoDataImage = require('./NoDataImage.js');
12
- var React = require('react');
13
11
 
14
12
  const Image = ({ styles, className, setting, builderAttrs, builderProps, style, children, onClick, onLoad })=>{
15
13
  const { image, imageLink, srcSet, isNotLazyload } = setting ?? {};
16
14
  const { customAspectRadio } = styles ?? {};
17
- const currentDevice = core.useCurrentDevice();
15
+ core.useCurrentDevice();
18
16
  const { shape } = styles ?? {};
19
17
  const WrapLink = imageLink?.link ? Link.default : 'div';
20
18
  const opacity = {
@@ -59,18 +57,6 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
59
57
  custom: customAspectRadio
60
58
  })
61
59
  };
62
- const isShowNoDataState = React.useMemo(()=>{
63
- if (setting?.disableNoDataState) return false;
64
- if (currentDevice === 'mobile') return !setting?.srcSet?.mobile?.src && !setting?.srcSet?.tablet?.src && !setting?.srcSet?.desktop?.src;
65
- if (currentDevice === 'tablet') return !setting?.srcSet?.tablet?.src && !setting?.srcSet?.desktop?.src;
66
- return !setting?.srcSet?.desktop?.src;
67
- }, [
68
- currentDevice,
69
- setting?.disableNoDataState,
70
- setting?.srcSet?.desktop?.src,
71
- setting?.srcSet?.mobile?.src,
72
- setting?.srcSet?.tablet?.src
73
- ]);
74
60
  return /*#__PURE__*/ jsxRuntime.jsxs("div", {
75
61
  ...builderAttrs,
76
62
  "data-id": builderProps?.uid,
@@ -98,12 +84,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
98
84
  ...core.makeStyleResponsive('jc', styles?.align)
99
85
  },
100
86
  children: [
101
- isShowNoDataState ? /*#__PURE__*/ jsxRuntime.jsx(NoDataImage.default, {
102
- style: {
103
- ...imageWidth,
104
- ...imageHeight
105
- }
106
- }) : setting?.isAdaptive ? /*#__PURE__*/ jsxRuntime.jsx(AdaptiveImage.default, {
87
+ setting?.isAdaptive ? /*#__PURE__*/ jsxRuntime.jsx(AdaptiveImage.default, {
107
88
  srcSet: setting.srcSet,
108
89
  pictureClass: "gp-contents",
109
90
  className: core.cls(className, 'gp-inline-block gp-w-full gp-max-w-full', core.handleConvertClassColor(styles?.borderImg)),
package/dist/cjs/product/components/ProductButton.js CHANGED
@@ -218,7 +218,7 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
218
218
  ]);
219
219
  const isInStock = core.useCurrentVariantInStock();
220
220
  const isDisable = !isInStock || createCartLoading || addToCartLoading;
221
- const label = !isInStock ? setting?.outOfStockLabel : setting?.label;
221
+ const label = !isInStock ? !currentVariant ? 'Unavailable' : setting?.outOfStockLabel : setting?.label;
222
222
  if (!isInStock && isCustomOutOfStock) {
223
223
  buttonStyles.backgroundColor = {
224
224
  normal: oosBackground
package/dist/cjs/product/components/ProductButton.liquid.js CHANGED
@@ -188,6 +188,22 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
188
188
  pageContext,
189
189
  translate: setting?.translate
190
190
  });
191
+ const labelUnavailableTranslate = helpers.getDynamicSourceLocales({
192
+ val: 'Unavailable',
193
+ uid: builderProps?.uid,
194
+ settingId: 'unavailableLabel',
195
+ isLiquid: true,
196
+ pageContext,
197
+ translate: setting?.translate ? 'unavailableLabel' : undefined
198
+ });
199
+ const labelOutOfStockTranslate = helpers.getDynamicSourceLocales({
200
+ val: setting?.outOfStockLabel,
201
+ uid: builderProps?.uid,
202
+ settingId: 'outOfStockLabel',
203
+ isLiquid: true,
204
+ pageContext,
205
+ translate: setting?.translate ? 'outOfStockLabel' : undefined
206
+ });
191
207
  return core.template /* liquid */ `
192
208
  {%- liquid
193
209
  assign inventory_quantity = variant.inventory_quantity | default: 0
@@ -195,6 +211,8 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
195
211
  <gp-product-button
196
212
  class="gp-product-button"
197
213
  gp-data-wrapper="true"
214
+ label-out-of-Stock="${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}"
215
+ label-unavailable="${pageContext?.isPreviewing ? labelUnavailableTranslate : `{{${labelUnavailableTranslate}}}`}"
198
216
  gp-data='${JSON.stringify({
199
217
  setting: {
200
218
  actionEffect: setting?.actionEffect,
@@ -272,8 +290,7 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
272
290
  'gp-data-hidden': `{% if variant.available %}true{% endif %}`
273
291
  },
274
292
  setting: {
275
- label: setting?.outOfStockLabel,
276
- translate: setting?.translate ? 'outOfStockLabel' : undefined,
293
+ label: `${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}`,
277
294
  htmlType: 'button',
278
295
  iconAlign: iconAlign,
279
296
  iconSvg: iconSvg,
@@ -292,7 +309,8 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
292
309
  }
293
310
  },
294
311
  pageContext,
295
- nodePrice: composeNodePrice()
312
+ nodePrice: composeNodePrice(),
313
+ isForceValue: true
296
314
  })}
297
315
  </gp-product-button>
298
316
  ${core.RenderIf(core.isLocalEnv, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-product-button.js' | asset_url }}" defer="defer"></script>`, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="${core.baseAssetURL}/assets-v2/gp-product-button.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
package/dist/cjs/third-party/configs/BoldProductOptions.js CHANGED
@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var BoldProductOptionsConfig = {
6
6
  id: 'bold-product-options',
7
- label: 'Bold Product Options',
8
- logoUrl: 'https://ucarecdn.com/cae13b55-18b6-416a-a447-c18211d78cfe/-/format/auto/-/preview/3000x3000/-/quality/lighter/Bold%20Product%20Options.png',
7
+ label: 'SC Product Options',
8
+ logoUrl: 'https://cdn.shopify.com/app-store/listing_images/9a0bf1159f79c6ab0660ec422f350445/icon/CP2Uwo_GuYIDEAE=.png',
9
9
  tag: 'BoldProductOptions'
10
10
  };
11
11
 
package/dist/esm/button/components/Button.liquid.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { splitStyle, makeStyleResponsive, makeGlobalSize, composeTypographyClassName, composeTypographyStyle, composeBorderCss, composeCornerCss, getSingleColorVariable, template, cls, getGlobalColorStateClass, getGlobalColorStateStyle, composeRadius, getStyleShadowState, composeSize, getGradientBgrStyleForButton, RenderIf } from '@gem-sdk/core';
2
2
  import { getInsertLinkData, getDynamicSourceLocales } from '../../helpers.js';
3
3
 
4
- const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId })=>{
4
+ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId, isForceValue = false })=>{
5
5
  const { align, size, backgroundColor, textColor, roundedBtn, iconSpacing, globalSize } = styles;
6
6
  const { label, iconSvg, btnLink, htmlType, disabled, loading, iconAlign, iconVisible, translate, disabledLoading = true } = setting;
7
7
  const [wrapStyle, restStyle] = splitStyle([
@@ -66,7 +66,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
66
66
  color: ${getSingleColorVariable(styles?.textColor?.hover)};
67
67
  }
68
68
  `;
69
- const labelValDisplay = getDynamicSourceLocales({
69
+ const labelValDisplay = isForceValue ? label : getDynamicSourceLocales({
70
70
  val: label,
71
71
  uid: builderProps?.uidTranslate ?? builderProps?.uid,
72
72
  settingId: translate ?? 'label',
@@ -157,7 +157,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
157
157
  >${iconSvg}</span>`)}
158
158
  <span
159
159
  data-gp-text
160
- class="${`gp-button-text-only gp-break-words group-data-[state=loading]:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
160
+ class="${`gp-content-product-button gp-button-text-only gp-break-words group-data-[state=loading]:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
161
161
  ${styles?.typo?.attrs?.italic ? '[&:not(:has(p))]:gp-pr-[0.2em] [&_p]:[&:has(p)]:gp-pr-[0.2em]' : ''}`}"
162
162
  style="${{
163
163
  ...nodePrice && appendTypoStyle,
package/dist/esm/image/components/AdaptiveImage.js CHANGED
@@ -3,6 +3,7 @@ import Head from 'next/head';
3
3
  import Img from './Img.js';
4
4
 
5
5
  const AdaptiveImage = ({ srcSet, priority, pictureClass, imagePlaceholder, ...rest })=>{
6
+ const fallBackImage = 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif';
6
7
  return /*#__PURE__*/ jsxs(Fragment, {
7
8
  children: [
8
9
  /*#__PURE__*/ jsxs(Head, {
@@ -32,17 +33,17 @@ const AdaptiveImage = ({ srcSet, priority, pictureClass, imagePlaceholder, ...re
32
33
  children: [
33
34
  !!srcSet?.mobile?.src && /*#__PURE__*/ jsx("source", {
34
35
  media: "(max-width: 767px)",
35
- srcSet: srcSet.mobile.src
36
+ srcSet: srcSet.mobile.src || fallBackImage
36
37
  }),
37
38
  !!srcSet?.tablet?.src && /*#__PURE__*/ jsx("source", {
38
39
  media: "(max-width: 1024px)",
39
- srcSet: srcSet?.tablet?.src
40
+ srcSet: srcSet?.tablet?.src || fallBackImage
40
41
  }),
41
42
  /*#__PURE__*/ jsx(Img, {
42
43
  ...rest,
43
44
  loading: priority ? 'eager' : 'lazy',
44
45
  image: {
45
- src: srcSet?.desktop?.src || imagePlaceholder?.['desktop']
46
+ src: srcSet?.desktop?.src || imagePlaceholder?.['desktop'] || fallBackImage
46
47
  }
47
48
  })
48
49
  ]
package/dist/esm/image/components/Image.js CHANGED
@@ -4,13 +4,11 @@ import Link from '../../link/components/Link.js';
4
4
  import AdaptiveImage from './AdaptiveImage.js';
5
5
  import NextImage from './NextImage.js';
6
6
  import { composeAspectRatio } from './helpers.js';
7
- import NoDataImage from './NoDataImage.js';
8
- import { useMemo } from 'react';
9
7
 
10
8
  const Image = ({ styles, className, setting, builderAttrs, builderProps, style, children, onClick, onLoad })=>{
11
9
  const { image, imageLink, srcSet, isNotLazyload } = setting ?? {};
12
10
  const { customAspectRadio } = styles ?? {};
13
- const currentDevice = useCurrentDevice();
11
+ useCurrentDevice();
14
12
  const { shape } = styles ?? {};
15
13
  const WrapLink = imageLink?.link ? Link : 'div';
16
14
  const opacity = {
@@ -55,18 +53,6 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
55
53
  custom: customAspectRadio
56
54
  })
57
55
  };
58
- const isShowNoDataState = useMemo(()=>{
59
- if (setting?.disableNoDataState) return false;
60
- if (currentDevice === 'mobile') return !setting?.srcSet?.mobile?.src && !setting?.srcSet?.tablet?.src && !setting?.srcSet?.desktop?.src;
61
- if (currentDevice === 'tablet') return !setting?.srcSet?.tablet?.src && !setting?.srcSet?.desktop?.src;
62
- return !setting?.srcSet?.desktop?.src;
63
- }, [
64
- currentDevice,
65
- setting?.disableNoDataState,
66
- setting?.srcSet?.desktop?.src,
67
- setting?.srcSet?.mobile?.src,
68
- setting?.srcSet?.tablet?.src
69
- ]);
70
56
  return /*#__PURE__*/ jsxs("div", {
71
57
  ...builderAttrs,
72
58
  "data-id": builderProps?.uid,
@@ -94,12 +80,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
94
80
  ...makeStyleResponsive('jc', styles?.align)
95
81
  },
96
82
  children: [
97
- isShowNoDataState ? /*#__PURE__*/ jsx(NoDataImage, {
98
- style: {
99
- ...imageWidth,
100
- ...imageHeight
101
- }
102
- }) : setting?.isAdaptive ? /*#__PURE__*/ jsx(AdaptiveImage, {
83
+ setting?.isAdaptive ? /*#__PURE__*/ jsx(AdaptiveImage, {
103
84
  srcSet: setting.srcSet,
104
85
  pictureClass: "gp-contents",
105
86
  className: cls(className, 'gp-inline-block gp-w-full gp-max-w-full', handleConvertClassColor(styles?.borderImg)),
package/dist/esm/product/components/ProductButton.js CHANGED
@@ -214,7 +214,7 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
214
214
  ]);
215
215
  const isInStock = useCurrentVariantInStock();
216
216
  const isDisable = !isInStock || createCartLoading || addToCartLoading;
217
- const label = !isInStock ? setting?.outOfStockLabel : setting?.label;
217
+ const label = !isInStock ? !currentVariant ? 'Unavailable' : setting?.outOfStockLabel : setting?.label;
218
218
  if (!isInStock && isCustomOutOfStock) {
219
219
  buttonStyles.backgroundColor = {
220
220
  normal: oosBackground
package/dist/esm/product/components/ProductButton.liquid.js CHANGED
@@ -184,6 +184,22 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
184
184
  pageContext,
185
185
  translate: setting?.translate
186
186
  });
187
+ const labelUnavailableTranslate = getDynamicSourceLocales({
188
+ val: 'Unavailable',
189
+ uid: builderProps?.uid,
190
+ settingId: 'unavailableLabel',
191
+ isLiquid: true,
192
+ pageContext,
193
+ translate: setting?.translate ? 'unavailableLabel' : undefined
194
+ });
195
+ const labelOutOfStockTranslate = getDynamicSourceLocales({
196
+ val: setting?.outOfStockLabel,
197
+ uid: builderProps?.uid,
198
+ settingId: 'outOfStockLabel',
199
+ isLiquid: true,
200
+ pageContext,
201
+ translate: setting?.translate ? 'outOfStockLabel' : undefined
202
+ });
187
203
  return template /* liquid */ `
188
204
  {%- liquid
189
205
  assign inventory_quantity = variant.inventory_quantity | default: 0
@@ -191,6 +207,8 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
191
207
  <gp-product-button
192
208
  class="gp-product-button"
193
209
  gp-data-wrapper="true"
210
+ label-out-of-Stock="${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}"
211
+ label-unavailable="${pageContext?.isPreviewing ? labelUnavailableTranslate : `{{${labelUnavailableTranslate}}}`}"
194
212
  gp-data='${JSON.stringify({
195
213
  setting: {
196
214
  actionEffect: setting?.actionEffect,
@@ -268,8 +286,7 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
268
286
  'gp-data-hidden': `{% if variant.available %}true{% endif %}`
269
287
  },
270
288
  setting: {
271
- label: setting?.outOfStockLabel,
272
- translate: setting?.translate ? 'outOfStockLabel' : undefined,
289
+ label: `${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}`,
273
290
  htmlType: 'button',
274
291
  iconAlign: iconAlign,
275
292
  iconSvg: iconSvg,
@@ -288,7 +305,8 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
288
305
  }
289
306
  },
290
307
  pageContext,
291
- nodePrice: composeNodePrice()
308
+ nodePrice: composeNodePrice(),
309
+ isForceValue: true
292
310
  })}
293
311
  </gp-product-button>
294
312
  ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-product-button.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-product-button.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
package/dist/esm/third-party/configs/BoldProductOptions.js CHANGED
@@ -1,7 +1,7 @@
1
1
  var BoldProductOptionsConfig = {
2
2
  id: 'bold-product-options',
3
- label: 'Bold Product Options',
4
- logoUrl: 'https://ucarecdn.com/cae13b55-18b6-416a-a447-c18211d78cfe/-/format/auto/-/preview/3000x3000/-/quality/lighter/Bold%20Product%20Options.png',
3
+ label: 'SC Product Options',
4
+ logoUrl: 'https://cdn.shopify.com/app-store/listing_images/9a0bf1159f79c6ab0660ec422f350445/icon/CP2Uwo_GuYIDEAE=.png',
5
5
  tag: 'BoldProductOptions'
6
6
  };
7
7
 
package/dist/types/index.d.ts CHANGED
@@ -1578,6 +1578,8 @@ type ProductButtonProps = BasePropsWrap<{
1578
1578
  translate?: string;
1579
1579
  outOfStockLabel?: string;
1580
1580
  unavailableLabel?: string;
1581
+ labelUnavailableTranslate?: string;
1582
+ labelOutOfStockTranslate?: string;
1581
1583
  actionEffect?: 'open-cart-drawer' | 'buy-now' | 'continue-shopping' | 'go-to-url';
1582
1584
  customURL?: {
1583
1585
  link?: string;
@@ -5408,10 +5410,11 @@ type ButtonLiquidProps = MixedProps & ButtonProps & {
5408
5410
  advanced?: any;
5409
5411
  pageContext?: PageContext;
5410
5412
  nodePrice?: string | null;
5413
+ isForceValue?: boolean;
5411
5414
  } & {
5412
5415
  dataId?: string;
5413
5416
  };
5414
- declare const Button: ({ className, builderProps, customAttrs, pageContext, setting, styles, style, wrapClassName, advanced, nodePrice, dataId, }: ButtonLiquidProps) => string;
5417
+ declare const Button: ({ className, builderProps, customAttrs, pageContext, setting, styles, style, wrapClassName, advanced, nodePrice, dataId, isForceValue, }: ButtonLiquidProps) => string;
5415
5418
 
5416
5419
  declare const Coupon: ({ setting, builderProps, builderAttrs, style, styles, advanced, pageContext, }: _gem_sdk_core.BaseProps<{
5417
5420
  copyContent?: string | undefined;
@@ -5663,6 +5666,8 @@ declare const ProductButton: ({ setting, builderProps, builderAttrs, style, styl
5663
5666
  translate?: string | undefined;
5664
5667
  outOfStockLabel?: string | undefined;
5665
5668
  unavailableLabel?: string | undefined;
5669
+ labelUnavailableTranslate?: string | undefined;
5670
+ labelOutOfStockTranslate?: string | undefined;
5666
5671
  actionEffect?: "buy-now" | "open-cart-drawer" | "continue-shopping" | "go-to-url" | undefined;
5667
5672
  customURL?: {
5668
5673
  link?: string | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/components",
3
- "version": "2.1.27-staging.16",
3
+ "version": "2.1.27-staging.19",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -21,7 +21,7 @@
21
21
  "format": "prettier --write \"./src/**/*.{ts,tsx}\""
22
22
  },
23
23
  "devDependencies": {
24
- "@gem-sdk/core": "2.1.27-staging.14",
24
+ "@gem-sdk/core": "2.1.27-staging.17",
25
25
  "@gem-sdk/styles": "2.1.27-staging.13",
26
26
  "@types/react-transition-group": "^4.4.5"
27
27
  },
package/dist/cjs/image/components/NoDataImage.js DELETED
@@ -1,133 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var AdaptiveImage = require('./AdaptiveImage.js');
7
-
8
- const NoDataImage = ({ style })=>{
9
- return /*#__PURE__*/ jsxRuntime.jsxs("div", {
10
- className: "gp-w-full gp-h-full gp-bg-[#F9F9F9] gp-flex gp-items-center gp-justify-center",
11
- children: [
12
- AdaptiveImage.default({
13
- pictureClass: 'gp-w-full',
14
- srcSet: {
15
- desktop: {
16
- src: 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif'
17
- }
18
- },
19
- style: {
20
- ...style,
21
- '--op': 0,
22
- '--z': -1
23
- }
24
- }),
25
- /*#__PURE__*/ jsxRuntime.jsx("div", {
26
- className: "gp-absolute gp-flex gp-justify-center gp-items-center",
27
- children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
28
- width: "40",
29
- height: "40",
30
- viewBox: "0 0 40 40",
31
- fill: "none",
32
- xmlns: "http://www.w3.org/2000/svg",
33
- children: [
34
- /*#__PURE__*/ jsxRuntime.jsxs("g", {
35
- clipPath: "url(#clip0_942_39561)",
36
- children: [
37
- /*#__PURE__*/ jsxRuntime.jsx("rect", {
38
- width: "40",
39
- height: "40",
40
- fill: "#F9F9F9"
41
- }),
42
- /*#__PURE__*/ jsxRuntime.jsx("rect", {
43
- x: "4",
44
- width: "32",
45
- height: "40",
46
- rx: "2",
47
- fill: "#E2E2E2"
48
- }),
49
- /*#__PURE__*/ jsxRuntime.jsx("rect", {
50
- y: "26",
51
- width: "40",
52
- height: "14",
53
- fill: "url(#paint0_linear_942_39561)"
54
- }),
55
- /*#__PURE__*/ jsxRuntime.jsx("rect", {
56
- x: "8",
57
- y: "4",
58
- width: "24",
59
- height: "24",
60
- rx: "1",
61
- fill: "#F9F9F9"
62
- }),
63
- /*#__PURE__*/ jsxRuntime.jsx("circle", {
64
- cx: "15.2809",
65
- cy: "11.3688",
66
- r: "1.36884",
67
- fill: "#D2D2D2"
68
- }),
69
- /*#__PURE__*/ jsxRuntime.jsx("path", {
70
- d: "M13.1916 17.7343L15.3456 15.0797C15.4185 14.9896 15.5086 14.9168 15.6101 14.8659C15.7115 14.815 15.822 14.7872 15.9343 14.7844C16.0466 14.7815 16.1583 14.8036 16.2619 14.8492C16.3656 14.8949 16.459 14.963 16.536 15.0492L17.5432 16.1758L21.4803 11.2146C21.5573 11.1174 21.6542 11.0397 21.7637 10.9874C21.8732 10.9351 21.9925 10.9094 22.1127 10.9123C22.2329 10.9153 22.3509 10.9467 22.458 11.0043C22.5651 11.0619 22.6585 11.1442 22.7312 11.245L27.4383 17.7671C27.5283 17.8921 27.5834 18.0411 27.5974 18.1973C27.6114 18.3535 27.5838 18.5108 27.5176 18.6513C27.4514 18.7919 27.3493 18.9102 27.2228 18.993C27.0963 19.0758 26.9503 19.1198 26.8014 19.12L13.8002 19.1251C13.6473 19.1251 13.4975 19.0789 13.3688 18.992C13.24 18.9051 13.1375 18.7812 13.0735 18.6348C13.0095 18.4885 12.9866 18.326 13.0075 18.1664C13.0285 18.0068 13.0923 17.8569 13.1916 17.7343Z",
71
- fill: "#D2D2D2"
72
- }),
73
- /*#__PURE__*/ jsxRuntime.jsx("rect", {
74
- x: "24.3333",
75
- y: "24.3333",
76
- width: "15.3333",
77
- height: "15.3333",
78
- rx: "7.66667",
79
- fill: "white"
80
- }),
81
- /*#__PURE__*/ jsxRuntime.jsx("rect", {
82
- x: "24.3333",
83
- y: "24.3333",
84
- width: "15.3333",
85
- height: "15.3333",
86
- rx: "7.66667",
87
- stroke: "#C4C4C4",
88
- strokeWidth: "0.666667"
89
- }),
90
- /*#__PURE__*/ jsxRuntime.jsx("path", {
91
- d: "M33.813 34.5199C34.0083 34.7152 34.3249 34.7152 34.5201 34.5199C34.7154 34.3246 34.7154 34.0081 34.5201 33.8128L32.707 31.9997L34.5201 30.1866C34.7154 29.9913 34.7154 29.6747 34.5201 29.4795C34.3249 29.2842 34.0083 29.2842 33.813 29.4795L31.9999 31.2926L30.1868 29.4795C29.9915 29.2842 29.675 29.2842 29.4797 29.4795C29.2844 29.6747 29.2844 29.9913 29.4797 30.1866L31.2928 31.9997L29.4797 33.8128C29.2844 34.0081 29.2844 34.3246 29.4797 34.5199C29.675 34.7152 29.9915 34.7152 30.1868 34.5199L31.9999 32.7068L33.813 34.5199Z",
92
- fill: "#676767"
93
- })
94
- ]
95
- }),
96
- /*#__PURE__*/ jsxRuntime.jsxs("defs", {
97
- children: [
98
- /*#__PURE__*/ jsxRuntime.jsxs("linearGradient", {
99
- id: "paint0_linear_942_39561",
100
- x1: "20",
101
- y1: "26",
102
- x2: "20",
103
- y2: "40",
104
- gradientUnits: "userSpaceOnUse",
105
- children: [
106
- /*#__PURE__*/ jsxRuntime.jsx("stop", {
107
- stopColor: "#F9F9F9",
108
- stopOpacity: "0"
109
- }),
110
- /*#__PURE__*/ jsxRuntime.jsx("stop", {
111
- offset: "1",
112
- stopColor: "#F9F9F9"
113
- })
114
- ]
115
- }),
116
- /*#__PURE__*/ jsxRuntime.jsx("clipPath", {
117
- id: "clip0_942_39561",
118
- children: /*#__PURE__*/ jsxRuntime.jsx("rect", {
119
- width: "40",
120
- height: "40",
121
- fill: "white"
122
- })
123
- })
124
- ]
125
- })
126
- ]
127
- })
128
- })
129
- ]
130
- });
131
- };
132
-
133
- exports.default = NoDataImage;
package/dist/esm/image/components/NoDataImage.js DELETED
@@ -1,129 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import AdaptiveImage from './AdaptiveImage.js';
3
-
4
- const NoDataImage = ({ style })=>{
5
- return /*#__PURE__*/ jsxs("div", {
6
- className: "gp-w-full gp-h-full gp-bg-[#F9F9F9] gp-flex gp-items-center gp-justify-center",
7
- children: [
8
- AdaptiveImage({
9
- pictureClass: 'gp-w-full',
10
- srcSet: {
11
- desktop: {
12
- src: 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif'
13
- }
14
- },
15
- style: {
16
- ...style,
17
- '--op': 0,
18
- '--z': -1
19
- }
20
- }),
21
- /*#__PURE__*/ jsx("div", {
22
- className: "gp-absolute gp-flex gp-justify-center gp-items-center",
23
- children: /*#__PURE__*/ jsxs("svg", {
24
- width: "40",
25
- height: "40",
26
- viewBox: "0 0 40 40",
27
- fill: "none",
28
- xmlns: "http://www.w3.org/2000/svg",
29
- children: [
30
- /*#__PURE__*/ jsxs("g", {
31
- clipPath: "url(#clip0_942_39561)",
32
- children: [
33
- /*#__PURE__*/ jsx("rect", {
34
- width: "40",
35
- height: "40",
36
- fill: "#F9F9F9"
37
- }),
38
- /*#__PURE__*/ jsx("rect", {
39
- x: "4",
40
- width: "32",
41
- height: "40",
42
- rx: "2",
43
- fill: "#E2E2E2"
44
- }),
45
- /*#__PURE__*/ jsx("rect", {
46
- y: "26",
47
- width: "40",
48
- height: "14",
49
- fill: "url(#paint0_linear_942_39561)"
50
- }),
51
- /*#__PURE__*/ jsx("rect", {
52
- x: "8",
53
- y: "4",
54
- width: "24",
55
- height: "24",
56
- rx: "1",
57
- fill: "#F9F9F9"
58
- }),
59
- /*#__PURE__*/ jsx("circle", {
60
- cx: "15.2809",
61
- cy: "11.3688",
62
- r: "1.36884",
63
- fill: "#D2D2D2"
64
- }),
65
- /*#__PURE__*/ jsx("path", {
66
- d: "M13.1916 17.7343L15.3456 15.0797C15.4185 14.9896 15.5086 14.9168 15.6101 14.8659C15.7115 14.815 15.822 14.7872 15.9343 14.7844C16.0466 14.7815 16.1583 14.8036 16.2619 14.8492C16.3656 14.8949 16.459 14.963 16.536 15.0492L17.5432 16.1758L21.4803 11.2146C21.5573 11.1174 21.6542 11.0397 21.7637 10.9874C21.8732 10.9351 21.9925 10.9094 22.1127 10.9123C22.2329 10.9153 22.3509 10.9467 22.458 11.0043C22.5651 11.0619 22.6585 11.1442 22.7312 11.245L27.4383 17.7671C27.5283 17.8921 27.5834 18.0411 27.5974 18.1973C27.6114 18.3535 27.5838 18.5108 27.5176 18.6513C27.4514 18.7919 27.3493 18.9102 27.2228 18.993C27.0963 19.0758 26.9503 19.1198 26.8014 19.12L13.8002 19.1251C13.6473 19.1251 13.4975 19.0789 13.3688 18.992C13.24 18.9051 13.1375 18.7812 13.0735 18.6348C13.0095 18.4885 12.9866 18.326 13.0075 18.1664C13.0285 18.0068 13.0923 17.8569 13.1916 17.7343Z",
67
- fill: "#D2D2D2"
68
- }),
69
- /*#__PURE__*/ jsx("rect", {
70
- x: "24.3333",
71
- y: "24.3333",
72
- width: "15.3333",
73
- height: "15.3333",
74
- rx: "7.66667",
75
- fill: "white"
76
- }),
77
- /*#__PURE__*/ jsx("rect", {
78
- x: "24.3333",
79
- y: "24.3333",
80
- width: "15.3333",
81
- height: "15.3333",
82
- rx: "7.66667",
83
- stroke: "#C4C4C4",
84
- strokeWidth: "0.666667"
85
- }),
86
- /*#__PURE__*/ jsx("path", {
87
- d: "M33.813 34.5199C34.0083 34.7152 34.3249 34.7152 34.5201 34.5199C34.7154 34.3246 34.7154 34.0081 34.5201 33.8128L32.707 31.9997L34.5201 30.1866C34.7154 29.9913 34.7154 29.6747 34.5201 29.4795C34.3249 29.2842 34.0083 29.2842 33.813 29.4795L31.9999 31.2926L30.1868 29.4795C29.9915 29.2842 29.675 29.2842 29.4797 29.4795C29.2844 29.6747 29.2844 29.9913 29.4797 30.1866L31.2928 31.9997L29.4797 33.8128C29.2844 34.0081 29.2844 34.3246 29.4797 34.5199C29.675 34.7152 29.9915 34.7152 30.1868 34.5199L31.9999 32.7068L33.813 34.5199Z",
88
- fill: "#676767"
89
- })
90
- ]
91
- }),
92
- /*#__PURE__*/ jsxs("defs", {
93
- children: [
94
- /*#__PURE__*/ jsxs("linearGradient", {
95
- id: "paint0_linear_942_39561",
96
- x1: "20",
97
- y1: "26",
98
- x2: "20",
99
- y2: "40",
100
- gradientUnits: "userSpaceOnUse",
101
- children: [
102
- /*#__PURE__*/ jsx("stop", {
103
- stopColor: "#F9F9F9",
104
- stopOpacity: "0"
105
- }),
106
- /*#__PURE__*/ jsx("stop", {
107
- offset: "1",
108
- stopColor: "#F9F9F9"
109
- })
110
- ]
111
- }),
112
- /*#__PURE__*/ jsx("clipPath", {
113
- id: "clip0_942_39561",
114
- children: /*#__PURE__*/ jsx("rect", {
115
- width: "40",
116
- height: "40",
117
- fill: "white"
118
- })
119
- })
120
- ]
121
- })
122
- ]
123
- })
124
- })
125
- ]
126
- });
127
- };
128
-
129
- export { NoDataImage as default };