@gem-sdk/pages 1.33.4 → 1.36.0

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 (32) hide show
  1. package/dist/cjs/components/ErrorFallback.js +3 -3
  2. package/dist/cjs/components/Footer.js +5 -5
  3. package/dist/cjs/components/Header.js +4 -4
  4. package/dist/cjs/components/builder/PopupManager.js +5 -5
  5. package/dist/cjs/components/builder/toolbar/Onboarding.js +1 -1
  6. package/dist/cjs/components/image-to-layout/AddSectionImageToLayout.js +14 -14
  7. package/dist/cjs/components/image-to-layout/DropElement.js +11 -11
  8. package/dist/cjs/components/image-to-layout/ImageToLayout.js +4 -4
  9. package/dist/cjs/layouts/main.js +1 -1
  10. package/dist/cjs/libs/google-fonts.js +4 -30
  11. package/dist/cjs/pages/404.js +3 -3
  12. package/dist/cjs/pages/500.js +8 -8
  13. package/dist/cjs/pages/builder.js +2 -2
  14. package/dist/cjs/pages/static-v2.js +5 -5
  15. package/dist/cjs/pages/static.js +5 -5
  16. package/dist/esm/components/ErrorFallback.js +3 -3
  17. package/dist/esm/components/Footer.js +5 -5
  18. package/dist/esm/components/Header.js +4 -4
  19. package/dist/esm/components/builder/PopupManager.js +5 -5
  20. package/dist/esm/components/builder/toolbar/Onboarding.js +1 -1
  21. package/dist/esm/components/image-to-layout/AddSectionImageToLayout.js +14 -14
  22. package/dist/esm/components/image-to-layout/DropElement.js +11 -11
  23. package/dist/esm/components/image-to-layout/ImageToLayout.js +4 -4
  24. package/dist/esm/layouts/main.js +1 -1
  25. package/dist/esm/libs/google-fonts.js +4 -30
  26. package/dist/esm/pages/404.js +3 -3
  27. package/dist/esm/pages/500.js +8 -8
  28. package/dist/esm/pages/builder.js +2 -2
  29. package/dist/esm/pages/static-v2.js +5 -5
  30. package/dist/esm/pages/static.js +5 -5
  31. package/dist/types/index.d.ts +2 -2
  32. package/package.json +6 -6
@@ -5,10 +5,10 @@ var jsxRuntime = require('react/jsx-runtime');
5
5
  const ErrorFallback = ({ error, resetErrorBoundary })=>{
6
6
  return /*#__PURE__*/ jsxRuntime.jsxs("div", {
7
7
  role: "alert",
8
- className: "flex flex-col items-center gap-2",
8
+ className: "gp-flex gp-flex-col gp-items-center gp-gap-2",
9
9
  children: [
10
10
  /*#__PURE__*/ jsxRuntime.jsx("p", {
11
- className: "text-center text-2xl",
11
+ className: "gp-text-center gp-text-2xl",
12
12
  children: "Oops! Something went wrong"
13
13
  }),
14
14
  /*#__PURE__*/ jsxRuntime.jsx("pre", {
@@ -16,7 +16,7 @@ const ErrorFallback = ({ error, resetErrorBoundary })=>{
16
16
  }),
17
17
  /*#__PURE__*/ jsxRuntime.jsx("button", {
18
18
  onClick: resetErrorBoundary,
19
- className: "inline-flex h-10 items-center justify-center gap-2 rounded bg-[#3C67FF] px-6 text-white active:translate-y-1",
19
+ className: "gp-inline-flex gp-h-10 gp-items-center gp-justify-center gp-gap-2 gp-rounded gp-bg-[#3C67FF] gp-px-6 gp-text-white active:gp-translate-y-1",
20
20
  children: "Try again"
21
21
  })
22
22
  ]
@@ -37,11 +37,11 @@ const Footer = ()=>{
37
37
  layoutSetting
38
38
  ]);
39
39
  return /*#__PURE__*/ jsxRuntime.jsx("div", {
40
- className: core.cls('gp-footer-container border-1 group flex h-[48px] justify-center border-y border-[#EEEEEE] bg-white font-sans', {
41
- 'fixed bottom-0 w-full': shouldFixed
40
+ className: core.cls('gp-footer-container gp-border-1 gp-group gp-flex gp-h-[48px] gp-justify-center gp-border-y gp-border-[#EEEEEE] gp-bg-white gp-font-sans', {
41
+ 'gp-fixed gp-bottom-0 gp-w-full': shouldFixed
42
42
  }),
43
43
  children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
44
- className: "flex h-[40px] flex-1 items-center justify-between",
44
+ className: "gp-flex gp-h-[40px] gp-flex-1 gp-items-center gp-justify-between",
45
45
  style: {
46
46
  maxWidth: `var(--g-ct-w)`,
47
47
  ...core.makeStyleResponsive('ml', defaultMargin),
@@ -70,9 +70,9 @@ const Footer = ()=>{
70
70
  ]
71
71
  }),
72
72
  /*#__PURE__*/ jsxRuntime.jsx("div", {
73
- className: "gp-footer invisible absolute left-[8px] flex h-[24px] w-[24px] cursor-pointer items-center justify-center rounded bg-[#EEEEEE] p-[4px] hover:bg-[#0000001a] group-hover:visible",
73
+ className: "gp-footer gp-invisible gp-absolute gp-left-[8px] gp-flex gp-h-[24px] gp-w-[24px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded gp-bg-[#EEEEEE] gp-p-[4px] hover:gp-bg-[#0000001a] group-hover:gp-visible",
74
74
  children: /*#__PURE__*/ jsxRuntime.jsx("div", {
75
- className: "flex h-[24px] w-[24px] items-center justify-center",
75
+ className: "gp-flex gp-h-[24px] gp-w-[24px] gp-items-center gp-justify-center",
76
76
  children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
77
77
  width: "14",
78
78
  height: "14",
@@ -14,9 +14,9 @@ const HEADER_OFF_COLOR = '#F4F4F4';
14
14
  const Header = ()=>{
15
15
  const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
16
16
  return /*#__PURE__*/ jsxRuntime.jsx("div", {
17
- className: core.cls('gp-header-container border-1 group relative flex justify-center border-b border-[#EEEEEE] font-sans'),
17
+ className: core.cls('gp-header-container gp-border-1 gp-group gp-relative gp-flex gp-justify-center gp-border-b gp-border-[#EEEEEE] gp-font-sans'),
18
18
  children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
19
- className: "flex h-[40px] flex-1 items-center justify-between",
19
+ className: "gp-flex gp-h-[40px] gp-flex-1 gp-items-center gp-justify-between",
20
20
  style: {
21
21
  maxWidth: `var(--g-ct-w)`,
22
22
  ...core.makeStyleResponsive('ml', defaultMargin),
@@ -41,9 +41,9 @@ const Header = ()=>{
41
41
  ]
42
42
  }),
43
43
  /*#__PURE__*/ jsxRuntime.jsx("div", {
44
- className: "gp-header invisible absolute left-[8px] flex h-[24px] w-[24px] cursor-pointer items-center justify-center rounded bg-[#EEEEEE] p-[4px] hover:bg-[#0000001a] group-hover:visible",
44
+ className: "gp-header gp-invisible gp-absolute gp-left-[8px] gp-flex gp-h-[24px] gp-w-[24px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded gp-bg-[#EEEEEE] gp-p-[4px] hover:gp-bg-[#0000001a] group-hover:gp-visible",
45
45
  children: /*#__PURE__*/ jsxRuntime.jsx("div", {
46
- className: "flex h-[24px] w-[24px] items-center justify-center",
46
+ className: "gp-flex gp-h-[24px] gp-w-[24px] gp-items-center gp-justify-center",
47
47
  children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
48
48
  width: "14",
49
49
  height: "14",
@@ -33,13 +33,13 @@ const PopupManager = ()=>{
33
33
  onSetActiveModal
34
34
  ]);
35
35
  return /*#__PURE__*/ jsxRuntime.jsx("div", {
36
- className: "pointer-events-none fixed inset-y-0 right-0 z-10 flex w-10 flex-col items-center justify-center gap-1 overflow-y-auto overflow-x-hidden text-sm",
36
+ className: "gp-pointer-events-none gp-fixed gp-inset-y-0 gp-right-0 gp-z-10 gp-flex gp-w-10 gp-flex-col gp-items-center gp-justify-center gp-gap-1 gp-overflow-y-auto gp-overflow-x-hidden gp-text-sm",
37
37
  children: popups?.map((item)=>{
38
38
  const display = item?.advanced?.d;
39
39
  return /*#__PURE__*/ jsxRuntime.jsx("div", {
40
- className: core.cls('pointer-events-auto w-full shrink cursor-pointer select-none items-center justify-center whitespace-nowrap py-2 text-white [writing-mode:vertical-lr]', {
41
- 'bg-blue-500': activeModalId === item.uid,
42
- 'bg-blue-700': activeModalId !== item.uid
40
+ className: core.cls('gp-pointer-events-auto gp-w-full gp-shrink gp-cursor-pointer gp-select-none gp-items-center gp-justify-center gp-whitespace-nowrap gp-py-2 gp-text-white [writing-mode:vertical-lr]', {
41
+ 'gp-bg-blue-500': activeModalId === item.uid,
42
+ 'gp-bg-blue-700': activeModalId !== item.uid
43
43
  }),
44
44
  role: "button",
45
45
  "aria-hidden": "true",
@@ -50,7 +50,7 @@ const PopupManager = ()=>{
50
50
  '--d-mobile': display?.mobile ? 'inline-flex' : 'none'
51
51
  },
52
52
  children: /*#__PURE__*/ jsxRuntime.jsx("span", {
53
- className: "text-ellipsis whitespace-nowrap",
53
+ className: "gp-text-ellipsis gp-whitespace-nowrap",
54
54
  children: item?.settings?.name || 'Popup Name'
55
55
  })
56
56
  }, item?.uid);
@@ -13,7 +13,7 @@ const Onboarding = ({ enable, position, onCloseOnboarding })=>{
13
13
  const Video = ()=>{
14
14
  return /*#__PURE__*/ jsxRuntime.jsxs("video", {
15
15
  width: "100%",
16
- className: "w-full",
16
+ className: "gp-w-full",
17
17
  loop: true,
18
18
  muted: true,
19
19
  autoPlay: true,
@@ -61,30 +61,30 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
61
61
  }
62
62
  return /*#__PURE__*/ jsxRuntime.jsx("div", {
63
63
  id: "gps-add-section-image-to-layout-of-bottom",
64
- className: `justify-center ${totalSection && editorImageToLayout ? 'flex' : 'hidden'}`,
64
+ className: `gp-justify-center ${totalSection && editorImageToLayout ? 'gp-flex' : 'gp-hidden'}`,
65
65
  style: {
66
66
  ...core.makeStyleResponsive('pl', defaultPadding),
67
67
  ...core.makeStyleResponsive('pr', defaultPadding)
68
68
  },
69
69
  children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
70
- className: `gps-base-font-family relative mb-[24px] mt-[40px] flex flex-1 justify-center rounded-[3px] border border-[#EEEEEE] py-[24px]`,
70
+ className: `gps-base-font-family gp-relative gp-mb-[24px] gp-mt-[40px] gp-flex gp-flex-1 gp-justify-center gp-rounded-[3px] gp-border gp-border-[#EEEEEE] gp-py-[24px]`,
71
71
  style: {
72
72
  maxWidth: `var(--g-ct-w)`,
73
73
  marginBottom: `${offset + 48}px`
74
74
  },
75
75
  children: [
76
76
  /*#__PURE__*/ jsxRuntime.jsx("span", {
77
- className: "absolute top-[-12px] bg-white px-[8px] text-[14px] font-normal text-[#9E9E9E]",
77
+ className: "gp-absolute gp-top-[-12px] gp-bg-white gp-px-[8px] gp-text-[14px] gp-font-normal gp-text-[#9E9E9E]",
78
78
  children: "Add section"
79
79
  }),
80
80
  ACTIONS_DATA.map((action)=>{
81
81
  return /*#__PURE__*/ jsxRuntime.jsxs("div", {
82
- className: `relative mx-1 h-[60px] w-[172px] cursor-pointer flex-col items-center justify-center rounded-[3px] bg-[#F4F4F4] hover:bg-black/10 ${isInput ? 'hidden' : 'flex'}`,
82
+ className: `gp-relative gp-mx-1 gp-h-[60px] gp-w-[172px] gp-cursor-pointer gp-flex-col gp-items-center gp-justify-center gp-rounded-[3px] gp-bg-[#F4F4F4] hover:gp-bg-black/10 ${isInput ? 'gp-hidden' : 'gp-flex'}`,
83
83
  id: action.id,
84
84
  "aria-hidden": true,
85
85
  children: [
86
86
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
87
- className: "mb-[4px] flex gap-2 text-[14px] font-medium text-[#212121]",
87
+ className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121]",
88
88
  children: [
89
89
  action.title,
90
90
  action.hasAILogo && /*#__PURE__*/ jsxRuntime.jsxs("svg", {
@@ -126,9 +126,9 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
126
126
  ]
127
127
  }),
128
128
  /*#__PURE__*/ jsxRuntime.jsx("div", {
129
- className: "flex items-center ",
129
+ className: "gp-flex gp-items-center",
130
130
  children: /*#__PURE__*/ jsxRuntime.jsx("span", {
131
- className: "mr-[3px] text-center text-[12px] font-normal text-[#676767]",
131
+ className: "gp-mr-[3px] gp-text-center gp-text-[12px] gp-font-normal gp-text-[#676767]",
132
132
  children: action.content
133
133
  })
134
134
  })
@@ -136,13 +136,13 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
136
136
  }, action.id);
137
137
  }),
138
138
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
139
- className: `relative max-w-[calc(100%_-_32px)] items-center ${isInput ? 'flex' : 'hidden'}`,
139
+ className: `gp-relative gp-max-w-[calc(100%_-_32px)] gp-items-center ${isInput ? 'gp-flex' : 'gp-hidden'}`,
140
140
  children: [
141
141
  /*#__PURE__*/ jsxRuntime.jsx("div", {
142
142
  "aria-hidden": true,
143
143
  id: "image-to-layout-input-wrapper-add-section-close",
144
144
  onClick: ()=>setIsInput(false),
145
- className: "mr-2 flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-[3px] hover:bg-black/10",
145
+ className: "gp-mr-2 gp-flex gp-h-[32px] gp-w-[32px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded-[3px] hover:gp-bg-black/10",
146
146
  children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
147
147
  width: "16",
148
148
  height: "16",
@@ -156,7 +156,7 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
156
156
  })
157
157
  }),
158
158
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
159
- className: "image-to-layout-input-wrapper-add-section flex h-[60px] w-[500px] max-w-[calc(100%_-_40px)] items-center rounded-[3px] border py-[10px] pl-4 pr-2",
159
+ className: "image-to-layout-input-wrapper-add-section gp-flex gp-h-[60px] gp-w-[500px] gp-max-w-[calc(100%_-_40px)] gp-items-center gp-rounded-[3px] gp-border gp-py-[10px] gp-pl-4 gp-pr-2",
160
160
  children: [
161
161
  !link ? /*#__PURE__*/ jsxRuntime.jsxs("svg", {
162
162
  width: "21",
@@ -236,20 +236,20 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
236
236
  autoComplete: "off",
237
237
  id: "gp-img-to-layout-bottom-input-link",
238
238
  placeholder: "Paste your link",
239
- className: "ml-2 mr-2 h-[56px] flex-1 text-[14px] text-[#676767] outline-none"
239
+ className: "gp-ml-2 gp-mr-2 gp-h-[56px] gp-flex-1 gp-text-[14px] gp-text-[#676767] gp-outline-none"
240
240
  }),
241
241
  /*#__PURE__*/ jsxRuntime.jsx("div", {
242
242
  "aria-disabled": !link,
243
243
  id: "gp-img-to-layout-bottom-generate-btn",
244
- className: `generate-image-to-layout-btn flex h-[36px] w-[86px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white ${!link ? 'btn-disable cursor-not-allowed' : ''}`,
244
+ className: `generate-image-to-layout-btn gp-flex gp-h-[36px] gp-w-[86px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded-[3px] gp-text-sm gp-font-medium gp-text-white ${!link ? 'gp-btn-disable gp-cursor-not-allowed' : ''}`,
245
245
  children: "Generate"
246
246
  })
247
247
  ]
248
248
  }),
249
249
  /*#__PURE__*/ jsxRuntime.jsx("div", {
250
- className: "error-url-bottom-add-section max-w-[calc(100% - 40px)] absolute bottom-[-20px] left-[40px] mx-[-1px] hidden w-[500px] items-center justify-center",
250
+ className: "error-url-bottom-add-section gp-max-w-[calc(100% - 40px)] gp-absolute gp-bottom-[-20px] gp-left-[40px] gp-mx-[-1px] gp-hidden gp-w-[500px] gp-items-center gp-justify-center",
251
251
  children: /*#__PURE__*/ jsxRuntime.jsx("span", {
252
- className: "text-xs text-[#C3362B]",
252
+ className: "gp-text-xs gp-text-[#C3362B]",
253
253
  children: "Please use an valid URL to generate"
254
254
  })
255
255
  })
@@ -13,7 +13,7 @@ const DropElement = ()=>{
13
13
  window.dispatchEvent(event);
14
14
  };
15
15
  return /*#__PURE__*/ jsxRuntime.jsxs("div", {
16
- className: "flex w-full flex-col items-center justify-center",
16
+ className: "gp-flex gp-w-full gp-flex-col gp-items-center gp-justify-center",
17
17
  children: [
18
18
  /*#__PURE__*/ jsxRuntime.jsxs("svg", {
19
19
  width: "290",
@@ -21,7 +21,7 @@ const DropElement = ()=>{
21
21
  viewBox: "0 0 290 162",
22
22
  fill: "none",
23
23
  xmlns: "http://www.w3.org/2000/svg",
24
- className: "mb-[24px]",
24
+ className: "gp-mb-[24px]",
25
25
  children: [
26
26
  /*#__PURE__*/ jsxRuntime.jsx("rect", {
27
27
  x: "0.570588",
@@ -92,29 +92,29 @@ const DropElement = ()=>{
92
92
  ]
93
93
  }),
94
94
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
95
- className: "flex flex-col items-center",
95
+ className: "gp-flex gp-flex-col gp-items-center",
96
96
  children: [
97
97
  /*#__PURE__*/ jsxRuntime.jsx("div", {
98
- className: "text-16 font-medium mb-4 text-[#212121]",
98
+ className: "gp-text-16 gp-font-medium gp-mb-4 gp-text-[#212121]",
99
99
  children: "Start with Sections from sidebar"
100
100
  }),
101
101
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
102
- className: "flex w-[291px] justify-between",
102
+ className: "gp-flex gp-w-[291px] gp-justify-between",
103
103
  children: [
104
104
  /*#__PURE__*/ jsxRuntime.jsx("button", {
105
105
  onClick: ()=>dispatchEventBuildWithSectionActiveTab(true),
106
- className: "flex h-[40px] w-[136px] items-center font-medium justify-center rounded-[8px] bg-[#1C1C1C] text-[14px] text-white hover:bg-[#3B3B3B]",
106
+ className: "gp-flex gp-h-[40px] gp-w-[136px] gp-items-center gp-font-medium gp-justify-center gp-rounded-[8px] gp-bg-[#1C1C1C] gp-text-[14px] gp-text-white hover:gp-bg-[#3B3B3B]",
107
107
  children: "Add sections"
108
108
  }),
109
109
  /*#__PURE__*/ jsxRuntime.jsx("button", {
110
110
  onClick: ()=>dispatchEventBuildWithSectionActiveTab(false),
111
- className: "flex h-[40px] w-[136px] items-center font-medium justify-center rounded-[8px] bg-[#f4f4f4] text-[14px] text-[#212121] hover:bg-[#E2E2E2]",
111
+ className: "gp-flex gp-h-[40px] gp-w-[136px] gp-items-center gp-font-medium gp-justify-center gp-rounded-[8px] gp-bg-[#f4f4f4] gp-text-[14px] gp-text-[#212121] hover:gp-bg-[#E2E2E2]",
112
112
  children: "Add elements"
113
113
  })
114
114
  ]
115
115
  }),
116
116
  /*#__PURE__*/ jsxRuntime.jsx("div", {
117
- className: "my-6",
117
+ className: "gp-my-6",
118
118
  children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
119
119
  width: "338",
120
120
  height: "24",
@@ -142,15 +142,15 @@ const DropElement = ()=>{
142
142
  })
143
143
  }),
144
144
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
145
- className: "flex items-center gap-2 text-xs",
145
+ className: "gp-flex gp-items-center gp-gap-2 gp-text-xs",
146
146
  children: [
147
147
  /*#__PURE__*/ jsxRuntime.jsx("div", {
148
148
  id: "gp-img-to-layout-gallery-btn",
149
- className: "relative cursor-pointer text-[14px] font-medium text-[#3C67FF]",
149
+ className: "gp-relative gp-cursor-pointer gp-text-[14px] gp-font-medium gp-text-[#3C67FF]",
150
150
  children: "Start with Generating from URL or image"
151
151
  }),
152
152
  /*#__PURE__*/ jsxRuntime.jsx("div", {
153
- className: "text-medium flex h-[20px] w-[58px] items-center justify-center rounded-[8px] bg-[#3C67FF1A] text-[#0008C9]",
153
+ className: "gp-text-medium gp-flex gp-h-[20px] gp-w-[58px] gp-items-center gp-justify-center gp-rounded-[8px] gp-bg-[#3C67FF1A] gp-text-[#0008C9]",
154
154
  children: "AI Beta"
155
155
  })
156
156
  ]
@@ -18,16 +18,16 @@ const ImageToLayout = ({ editorImageToLayout })=>{
18
18
  children: [
19
19
  /*#__PURE__*/ jsxRuntime.jsx("div", {
20
20
  id: "gp-img-to-layout-wrapper",
21
- className: core.cls(`sf-add-section-placeholder tablet:!px-0 gps-base-font-family flex-1 flex-col bg-[#F4F4F4]`, {
22
- hidden: !editorImageToLayout || !!totalSection,
23
- flex: editorImageToLayout && !totalSection
21
+ className: core.cls(`sf-add-section-placeholder tablet:!gp-px-0 gps-base-font-family gp-flex-1 gp-flex-col gp-bg-[#F4F4F4]`, {
22
+ 'gp-hidden': !editorImageToLayout || !!totalSection,
23
+ 'gp-flex': editorImageToLayout && !totalSection
24
24
  }),
25
25
  style: {
26
26
  height: `calc(100vh - ${FOOTER_HEIGHT + HEADER_HEIGHT}px)`
27
27
  },
28
28
  children: /*#__PURE__*/ jsxRuntime.jsx("div", {
29
29
  id: "gps-gem-ai-input-wrapper",
30
- className: "mobile:px-[0px] flex h-full w-full flex-1 flex-col items-center justify-center rounded-[3px] bg-white px-[72px] py-[32px]",
30
+ className: "mobile:gp-px-[0px] gp-flex gp-h-full gp-w-full gp-flex-1 gp-flex-col gp-items-center gp-justify-center gp-rounded-[3px] gp-bg-white gp-px-[72px] gp-py-[32px]",
31
31
  children: /*#__PURE__*/ jsxRuntime.jsx(DropElement.DropElement, {})
32
32
  })
33
33
  }),
@@ -13,7 +13,7 @@ const MainLayout = ({ children, ...props })=>{
13
13
  parseHtml.parseHtml(props?.customCodeBody),
14
14
  /*#__PURE__*/ jsxRuntime.jsx("div", {
15
15
  className: core.cls({
16
- 'max-w-mobile mx-auto w-full': mobileOnly
16
+ 'gp-max-w-mobile gp-mx-auto gp-w-full': mobileOnly
17
17
  }),
18
18
  children: children
19
19
  }),
@@ -2,20 +2,6 @@
2
2
 
3
3
  var genFonts = require('./helpers/gen-fonts.js');
4
4
 
5
- const CHROME_UA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36';
6
- const IE_UA = 'Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11.0) like Gecko';
7
- async function getFontForUA(url, UA) {
8
- return fetch(url, {
9
- headers: {
10
- 'User-Agent': UA
11
- }
12
- }).then((res)=>{
13
- if (res.status === 200) {
14
- return res.text();
15
- }
16
- return '';
17
- });
18
- }
19
5
  const composeFonts = (fonts)=>{
20
6
  const uniqFonts = fonts.filter((font, index, arr)=>{
21
7
  return index === arr.findIndex((t)=>t.family === font.family);
@@ -56,31 +42,19 @@ const createFontUrl = (fonts, option)=>{
56
42
  }
57
43
  return `https://fonts.googleapis.com/css?${decodeURIComponent(params.toString())}`;
58
44
  };
59
- async function getFonts(fonts, option, maxSize) {
45
+ async function getFonts(fonts, option) {
60
46
  /**
61
47
  * The order of IE -> Chrome is important, other wise chrome starts loading woff1.
62
48
  * CSS cascading 🤷‍♂️.
63
49
  */ const url = createFontUrl(fonts, option);
64
50
  if (!url) return '';
65
51
  try {
66
- const [ie, chrome] = await Promise.all([
67
- getFontForUA(url, IE_UA),
68
- getFontForUA(url, CHROME_UA)
69
- ]);
70
- const value = ie + chrome;
71
- if (maxSize) {
72
- const textEncoder = new TextEncoder();
73
- const size = value ? textEncoder.encode(value).length : 0;
74
- if (Math.ceil(size / 1024) >= maxSize) {
75
- return `@import url('${url}');`;
76
- }
77
- }
78
- return value;
52
+ return `@import url('${url}');`;
79
53
  } catch (e) {
80
54
  return '';
81
55
  }
82
56
  }
83
- const getFontFromGlobalStyle = (data, maxSize)=>{
57
+ const getFontFromGlobalStyle = (data)=>{
84
58
  if (!data) return '';
85
59
  try {
86
60
  const globalStyle = JSON.parse(data);
@@ -88,7 +62,7 @@ const getFontFromGlobalStyle = (data, maxSize)=>{
88
62
  const fonts = Object.entries(fontData).map(([, value])=>{
89
63
  return value;
90
64
  });
91
- return getFonts(fonts, undefined, maxSize);
65
+ return getFonts(fonts);
92
66
  } catch {
93
67
  return '';
94
68
  }
@@ -11,7 +11,7 @@ const Page404 = ()=>{
11
11
  title: "Page not found"
12
12
  }),
13
13
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
14
- className: "tablet:max-w-2xl container mx-auto flex min-h-screen max-w-4xl flex-col items-center justify-center gap-8 px-8",
14
+ className: "tablet:gp-max-w-2xl gp-container gp-mx-auto gp-flex gp-min-h-screen gp-max-w-4xl gp-flex-col gp-items-center gp-justify-center gp-gap-8 gp-px-8",
15
15
  children: [
16
16
  /*#__PURE__*/ jsxRuntime.jsx(Image, {
17
17
  sizes: "(max-width: 768px) 100vw, 50vw",
@@ -23,10 +23,10 @@ const Page404 = ()=>{
23
23
  priority: true
24
24
  }),
25
25
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
26
- className: "flex flex-col items-center justify-center gap-2 pb-36",
26
+ className: "gp-flex gp-flex-col gp-items-center gp-justify-center gp-gap-2 gp-pb-36",
27
27
  children: [
28
28
  /*#__PURE__*/ jsxRuntime.jsx("h1", {
29
- className: "mobile:text-2xl text-4xl font-semibold",
29
+ className: "mobile:gp-text-2xl gp-text-4xl gp-font-semibold",
30
30
  children: "Oops! Page not found"
31
31
  }),
32
32
  /*#__PURE__*/ jsxRuntime.jsx("p", {
@@ -14,7 +14,7 @@ const Page500 = ()=>{
14
14
  title: "Service Unavailable"
15
15
  }),
16
16
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
17
- className: "tablet:max-w-2xl container mx-auto flex min-h-screen max-w-4xl flex-col items-center justify-center gap-8 px-8",
17
+ className: "tablet:gp-max-w-2xl gp-container gp-mx-auto gp-flex gp-min-h-screen gp-max-w-4xl gp-flex-col gp-items-center gp-justify-center gp-gap-8 gp-px-8",
18
18
  children: [
19
19
  /*#__PURE__*/ jsxRuntime.jsx(Image, {
20
20
  sizes: "(max-width: 768px) 100vw, 50vw",
@@ -26,31 +26,31 @@ const Page500 = ()=>{
26
26
  priority: true
27
27
  }),
28
28
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
29
- className: "flex flex-col gap-8 pb-36",
29
+ className: "gp-flex gp-flex-col gp-gap-8 gp-pb-36",
30
30
  children: [
31
31
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
32
- className: "flex flex-col items-center justify-center gap-2 text-center",
32
+ className: "gp-flex gp-flex-col gp-items-center gp-justify-center gp-gap-2 gp-text-center",
33
33
  children: [
34
34
  /*#__PURE__*/ jsxRuntime.jsx("h1", {
35
- className: "mobile:text-2xl text-4xl font-semibold",
35
+ className: "mobile:gp-text-2xl gp-text-4xl gp-font-semiboldgp-",
36
36
  children: "Service Unavailable"
37
37
  }),
38
38
  /*#__PURE__*/ jsxRuntime.jsx("p", {
39
- className: "text-center",
39
+ className: "gp-text-center",
40
40
  children: "The server is temporarily busy. Try again later."
41
41
  })
42
42
  ]
43
43
  }),
44
44
  /*#__PURE__*/ jsxRuntime.jsxs("button", {
45
- className: "mx-auto inline-flex h-10 items-center justify-center gap-2 rounded bg-[#3C67FF] px-6 text-white active:translate-y-1",
45
+ className: "gp-mx-auto gp-inline-flex gp-h-10 gp-items-center gp-justify-center gp-gap-2 gp-rounded gp-bg-[#3C67FF] gp-px-6 gp-text-white active:gp-translate-y-1",
46
46
  onClick: ()=>{
47
47
  setLoading(true);
48
48
  window.location.reload();
49
49
  },
50
50
  children: [
51
51
  /*#__PURE__*/ jsxRuntime.jsx("svg", {
52
- className: core.cls('w-5', {
53
- 'animate-spin': loading
52
+ className: core.cls('gp-w-5', {
53
+ 'gp-animate-spin': loading
54
54
  }),
55
55
  viewBox: "0 0 20 20",
56
56
  fill: "none",
@@ -63,10 +63,10 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
63
63
  !hiddenToolbar && /*#__PURE__*/ jsxRuntime.jsx(Toolbar.default, {}),
64
64
  /*#__PURE__*/ jsxRuntime.jsx(PopupManager.default, {}),
65
65
  loadSuccess && /*#__PURE__*/ jsxRuntime.jsxs("div", {
66
- className: "builder z-1 relative",
66
+ className: "builder gp-z-1 gp-relative",
67
67
  children: [
68
68
  !hiddenToolbar && (isThemeSectionEditor ? /*#__PURE__*/ jsxRuntime.jsx("div", {
69
- className: "h-[40px] bg-[#f4f4f4]"
69
+ className: "gp-h-[40px] gp-bg-[#f4f4f4]"
70
70
  }) : /*#__PURE__*/ jsxRuntime.jsx(Header.default, {})),
71
71
  /*#__PURE__*/ jsxRuntime.jsx("div", {
72
72
  id: "storefront",
@@ -13,18 +13,18 @@ const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, f
13
13
  useTrackingView.useTrackingView(shopToken, pageHandle, router$1.isFallback);
14
14
  if (router$1.isFallback) {
15
15
  return /*#__PURE__*/ jsxRuntime.jsx("div", {
16
- className: "flex h-full items-center justify-center",
16
+ className: "gp-flex gp-h-full gp-items-center gp-justify-center",
17
17
  children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
18
- className: "flex gap-2",
18
+ className: "gp-flex gp-gap-2",
19
19
  children: [
20
20
  /*#__PURE__*/ jsxRuntime.jsx("span", {
21
- className: "aspect-square h-2 animate-[flashing_500ms_infinite_alternate] rounded-full bg-slate-800"
21
+ className: "gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_alternate] gp-rounded-full gp-bg-slate-800"
22
22
  }),
23
23
  /*#__PURE__*/ jsxRuntime.jsx("span", {
24
- className: "aspect-square h-2 animate-[flashing_500ms_infinite_200ms_linear_alternate] rounded-full bg-slate-800"
24
+ className: "gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_200ms_linear_alternate] gp-rounded-full gp-bg-slate-800"
25
25
  }),
26
26
  /*#__PURE__*/ jsxRuntime.jsx("span", {
27
- className: "aspect-square h-2 animate-[flashing_500ms_infinite_500ms_alternate] rounded-full bg-slate-800"
27
+ className: "gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_500ms_alternate] gp-rounded-full gp-bg-slate-800"
28
28
  })
29
29
  ]
30
30
  })
@@ -12,18 +12,18 @@ const StaticPage = ({ components, builderData, sectionData, seo, themeStyle, fon
12
12
  const router$1 = router.useRouter();
13
13
  if (router$1.isFallback) {
14
14
  return /*#__PURE__*/ jsxRuntime.jsx("div", {
15
- className: "flex h-full items-center justify-center",
15
+ className: "gp-flex gp-h-full gp-items-center gp-justify-center",
16
16
  children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
17
- className: "flex gap-2",
17
+ className: "gp-flex gp-gap-2",
18
18
  children: [
19
19
  /*#__PURE__*/ jsxRuntime.jsx("span", {
20
- className: "aspect-square h-2 animate-[flashing_500ms_infinite_alternate] rounded-full bg-slate-800"
20
+ className: "gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_alternate] gp-rounded-full gp-bg-slate-800"
21
21
  }),
22
22
  /*#__PURE__*/ jsxRuntime.jsx("span", {
23
- className: "aspect-square h-2 animate-[flashing_500ms_infinite_200ms_linear_alternate] rounded-full bg-slate-800"
23
+ className: "gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_200ms_linear_alternate] gp-rounded-full gp-bg-slate-800"
24
24
  }),
25
25
  /*#__PURE__*/ jsxRuntime.jsx("span", {
26
- className: "aspect-square h-2 animate-[flashing_500ms_infinite_500ms_alternate] rounded-full bg-slate-800"
26
+ className: "gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_500ms_alternate] gp-rounded-full gp-bg-slate-800"
27
27
  })
28
28
  ]
29
29
  })
@@ -3,10 +3,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
3
3
  const ErrorFallback = ({ error, resetErrorBoundary })=>{
4
4
  return /*#__PURE__*/ jsxs("div", {
5
5
  role: "alert",
6
- className: "flex flex-col items-center gap-2",
6
+ className: "gp-flex gp-flex-col gp-items-center gp-gap-2",
7
7
  children: [
8
8
  /*#__PURE__*/ jsx("p", {
9
- className: "text-center text-2xl",
9
+ className: "gp-text-center gp-text-2xl",
10
10
  children: "Oops! Something went wrong"
11
11
  }),
12
12
  /*#__PURE__*/ jsx("pre", {
@@ -14,7 +14,7 @@ const ErrorFallback = ({ error, resetErrorBoundary })=>{
14
14
  }),
15
15
  /*#__PURE__*/ jsx("button", {
16
16
  onClick: resetErrorBoundary,
17
- className: "inline-flex h-10 items-center justify-center gap-2 rounded bg-[#3C67FF] px-6 text-white active:translate-y-1",
17
+ className: "gp-inline-flex gp-h-10 gp-items-center gp-justify-center gp-gap-2 gp-rounded gp-bg-[#3C67FF] gp-px-6 gp-text-white active:gp-translate-y-1",
18
18
  children: "Try again"
19
19
  })
20
20
  ]
@@ -33,11 +33,11 @@ const Footer = ()=>{
33
33
  layoutSetting
34
34
  ]);
35
35
  return /*#__PURE__*/ jsx("div", {
36
- className: cls('gp-footer-container border-1 group flex h-[48px] justify-center border-y border-[#EEEEEE] bg-white font-sans', {
37
- 'fixed bottom-0 w-full': shouldFixed
36
+ className: cls('gp-footer-container gp-border-1 gp-group gp-flex gp-h-[48px] gp-justify-center gp-border-y gp-border-[#EEEEEE] gp-bg-white gp-font-sans', {
37
+ 'gp-fixed gp-bottom-0 gp-w-full': shouldFixed
38
38
  }),
39
39
  children: /*#__PURE__*/ jsxs("div", {
40
- className: "flex h-[40px] flex-1 items-center justify-between",
40
+ className: "gp-flex gp-h-[40px] gp-flex-1 gp-items-center gp-justify-between",
41
41
  style: {
42
42
  maxWidth: `var(--g-ct-w)`,
43
43
  ...makeStyleResponsive('ml', defaultMargin),
@@ -66,9 +66,9 @@ const Footer = ()=>{
66
66
  ]
67
67
  }),
68
68
  /*#__PURE__*/ jsx("div", {
69
- className: "gp-footer invisible absolute left-[8px] flex h-[24px] w-[24px] cursor-pointer items-center justify-center rounded bg-[#EEEEEE] p-[4px] hover:bg-[#0000001a] group-hover:visible",
69
+ className: "gp-footer gp-invisible gp-absolute gp-left-[8px] gp-flex gp-h-[24px] gp-w-[24px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded gp-bg-[#EEEEEE] gp-p-[4px] hover:gp-bg-[#0000001a] group-hover:gp-visible",
70
70
  children: /*#__PURE__*/ jsx("div", {
71
- className: "flex h-[24px] w-[24px] items-center justify-center",
71
+ className: "gp-flex gp-h-[24px] gp-w-[24px] gp-items-center gp-justify-center",
72
72
  children: /*#__PURE__*/ jsxs("svg", {
73
73
  width: "14",
74
74
  height: "14",
@@ -10,9 +10,9 @@ const HEADER_OFF_COLOR = '#F4F4F4';
10
10
  const Header = ()=>{
11
11
  const layoutSetting = useShopStore((s)=>s.layoutSettings);
12
12
  return /*#__PURE__*/ jsx("div", {
13
- className: cls('gp-header-container border-1 group relative flex justify-center border-b border-[#EEEEEE] font-sans'),
13
+ className: cls('gp-header-container gp-border-1 gp-group gp-relative gp-flex gp-justify-center gp-border-b gp-border-[#EEEEEE] gp-font-sans'),
14
14
  children: /*#__PURE__*/ jsxs("div", {
15
- className: "flex h-[40px] flex-1 items-center justify-between",
15
+ className: "gp-flex gp-h-[40px] gp-flex-1 gp-items-center gp-justify-between",
16
16
  style: {
17
17
  maxWidth: `var(--g-ct-w)`,
18
18
  ...makeStyleResponsive('ml', defaultMargin),
@@ -37,9 +37,9 @@ const Header = ()=>{
37
37
  ]
38
38
  }),
39
39
  /*#__PURE__*/ jsx("div", {
40
- className: "gp-header invisible absolute left-[8px] flex h-[24px] w-[24px] cursor-pointer items-center justify-center rounded bg-[#EEEEEE] p-[4px] hover:bg-[#0000001a] group-hover:visible",
40
+ className: "gp-header gp-invisible gp-absolute gp-left-[8px] gp-flex gp-h-[24px] gp-w-[24px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded gp-bg-[#EEEEEE] gp-p-[4px] hover:gp-bg-[#0000001a] group-hover:gp-visible",
41
41
  children: /*#__PURE__*/ jsx("div", {
42
- className: "flex h-[24px] w-[24px] items-center justify-center",
42
+ className: "gp-flex gp-h-[24px] gp-w-[24px] gp-items-center gp-justify-center",
43
43
  children: /*#__PURE__*/ jsxs("svg", {
44
44
  width: "14",
45
45
  height: "14",
@@ -29,13 +29,13 @@ const PopupManager = ()=>{
29
29
  onSetActiveModal
30
30
  ]);
31
31
  return /*#__PURE__*/ jsx("div", {
32
- className: "pointer-events-none fixed inset-y-0 right-0 z-10 flex w-10 flex-col items-center justify-center gap-1 overflow-y-auto overflow-x-hidden text-sm",
32
+ className: "gp-pointer-events-none gp-fixed gp-inset-y-0 gp-right-0 gp-z-10 gp-flex gp-w-10 gp-flex-col gp-items-center gp-justify-center gp-gap-1 gp-overflow-y-auto gp-overflow-x-hidden gp-text-sm",
33
33
  children: popups?.map((item)=>{
34
34
  const display = item?.advanced?.d;
35
35
  return /*#__PURE__*/ jsx("div", {
36
- className: cls('pointer-events-auto w-full shrink cursor-pointer select-none items-center justify-center whitespace-nowrap py-2 text-white [writing-mode:vertical-lr]', {
37
- 'bg-blue-500': activeModalId === item.uid,
38
- 'bg-blue-700': activeModalId !== item.uid
36
+ className: cls('gp-pointer-events-auto gp-w-full gp-shrink gp-cursor-pointer gp-select-none gp-items-center gp-justify-center gp-whitespace-nowrap gp-py-2 gp-text-white [writing-mode:vertical-lr]', {
37
+ 'gp-bg-blue-500': activeModalId === item.uid,
38
+ 'gp-bg-blue-700': activeModalId !== item.uid
39
39
  }),
40
40
  role: "button",
41
41
  "aria-hidden": "true",
@@ -46,7 +46,7 @@ const PopupManager = ()=>{
46
46
  '--d-mobile': display?.mobile ? 'inline-flex' : 'none'
47
47
  },
48
48
  children: /*#__PURE__*/ jsx("span", {
49
- className: "text-ellipsis whitespace-nowrap",
49
+ className: "gp-text-ellipsis gp-whitespace-nowrap",
50
50
  children: item?.settings?.name || 'Popup Name'
51
51
  })
52
52
  }, item?.uid);
@@ -9,7 +9,7 @@ const Onboarding = ({ enable, position, onCloseOnboarding })=>{
9
9
  const Video = ()=>{
10
10
  return /*#__PURE__*/ jsxs("video", {
11
11
  width: "100%",
12
- className: "w-full",
12
+ className: "gp-w-full",
13
13
  loop: true,
14
14
  muted: true,
15
15
  autoPlay: true,
@@ -57,30 +57,30 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
57
57
  }
58
58
  return /*#__PURE__*/ jsx("div", {
59
59
  id: "gps-add-section-image-to-layout-of-bottom",
60
- className: `justify-center ${totalSection && editorImageToLayout ? 'flex' : 'hidden'}`,
60
+ className: `gp-justify-center ${totalSection && editorImageToLayout ? 'gp-flex' : 'gp-hidden'}`,
61
61
  style: {
62
62
  ...makeStyleResponsive('pl', defaultPadding),
63
63
  ...makeStyleResponsive('pr', defaultPadding)
64
64
  },
65
65
  children: /*#__PURE__*/ jsxs("div", {
66
- className: `gps-base-font-family relative mb-[24px] mt-[40px] flex flex-1 justify-center rounded-[3px] border border-[#EEEEEE] py-[24px]`,
66
+ className: `gps-base-font-family gp-relative gp-mb-[24px] gp-mt-[40px] gp-flex gp-flex-1 gp-justify-center gp-rounded-[3px] gp-border gp-border-[#EEEEEE] gp-py-[24px]`,
67
67
  style: {
68
68
  maxWidth: `var(--g-ct-w)`,
69
69
  marginBottom: `${offset + 48}px`
70
70
  },
71
71
  children: [
72
72
  /*#__PURE__*/ jsx("span", {
73
- className: "absolute top-[-12px] bg-white px-[8px] text-[14px] font-normal text-[#9E9E9E]",
73
+ className: "gp-absolute gp-top-[-12px] gp-bg-white gp-px-[8px] gp-text-[14px] gp-font-normal gp-text-[#9E9E9E]",
74
74
  children: "Add section"
75
75
  }),
76
76
  ACTIONS_DATA.map((action)=>{
77
77
  return /*#__PURE__*/ jsxs("div", {
78
- className: `relative mx-1 h-[60px] w-[172px] cursor-pointer flex-col items-center justify-center rounded-[3px] bg-[#F4F4F4] hover:bg-black/10 ${isInput ? 'hidden' : 'flex'}`,
78
+ className: `gp-relative gp-mx-1 gp-h-[60px] gp-w-[172px] gp-cursor-pointer gp-flex-col gp-items-center gp-justify-center gp-rounded-[3px] gp-bg-[#F4F4F4] hover:gp-bg-black/10 ${isInput ? 'gp-hidden' : 'gp-flex'}`,
79
79
  id: action.id,
80
80
  "aria-hidden": true,
81
81
  children: [
82
82
  /*#__PURE__*/ jsxs("div", {
83
- className: "mb-[4px] flex gap-2 text-[14px] font-medium text-[#212121]",
83
+ className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121]",
84
84
  children: [
85
85
  action.title,
86
86
  action.hasAILogo && /*#__PURE__*/ jsxs("svg", {
@@ -122,9 +122,9 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
122
122
  ]
123
123
  }),
124
124
  /*#__PURE__*/ jsx("div", {
125
- className: "flex items-center ",
125
+ className: "gp-flex gp-items-center",
126
126
  children: /*#__PURE__*/ jsx("span", {
127
- className: "mr-[3px] text-center text-[12px] font-normal text-[#676767]",
127
+ className: "gp-mr-[3px] gp-text-center gp-text-[12px] gp-font-normal gp-text-[#676767]",
128
128
  children: action.content
129
129
  })
130
130
  })
@@ -132,13 +132,13 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
132
132
  }, action.id);
133
133
  }),
134
134
  /*#__PURE__*/ jsxs("div", {
135
- className: `relative max-w-[calc(100%_-_32px)] items-center ${isInput ? 'flex' : 'hidden'}`,
135
+ className: `gp-relative gp-max-w-[calc(100%_-_32px)] gp-items-center ${isInput ? 'gp-flex' : 'gp-hidden'}`,
136
136
  children: [
137
137
  /*#__PURE__*/ jsx("div", {
138
138
  "aria-hidden": true,
139
139
  id: "image-to-layout-input-wrapper-add-section-close",
140
140
  onClick: ()=>setIsInput(false),
141
- className: "mr-2 flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-[3px] hover:bg-black/10",
141
+ className: "gp-mr-2 gp-flex gp-h-[32px] gp-w-[32px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded-[3px] hover:gp-bg-black/10",
142
142
  children: /*#__PURE__*/ jsx("svg", {
143
143
  width: "16",
144
144
  height: "16",
@@ -152,7 +152,7 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
152
152
  })
153
153
  }),
154
154
  /*#__PURE__*/ jsxs("div", {
155
- className: "image-to-layout-input-wrapper-add-section flex h-[60px] w-[500px] max-w-[calc(100%_-_40px)] items-center rounded-[3px] border py-[10px] pl-4 pr-2",
155
+ className: "image-to-layout-input-wrapper-add-section gp-flex gp-h-[60px] gp-w-[500px] gp-max-w-[calc(100%_-_40px)] gp-items-center gp-rounded-[3px] gp-border gp-py-[10px] gp-pl-4 gp-pr-2",
156
156
  children: [
157
157
  !link ? /*#__PURE__*/ jsxs("svg", {
158
158
  width: "21",
@@ -232,20 +232,20 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
232
232
  autoComplete: "off",
233
233
  id: "gp-img-to-layout-bottom-input-link",
234
234
  placeholder: "Paste your link",
235
- className: "ml-2 mr-2 h-[56px] flex-1 text-[14px] text-[#676767] outline-none"
235
+ className: "gp-ml-2 gp-mr-2 gp-h-[56px] gp-flex-1 gp-text-[14px] gp-text-[#676767] gp-outline-none"
236
236
  }),
237
237
  /*#__PURE__*/ jsx("div", {
238
238
  "aria-disabled": !link,
239
239
  id: "gp-img-to-layout-bottom-generate-btn",
240
- className: `generate-image-to-layout-btn flex h-[36px] w-[86px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white ${!link ? 'btn-disable cursor-not-allowed' : ''}`,
240
+ className: `generate-image-to-layout-btn gp-flex gp-h-[36px] gp-w-[86px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded-[3px] gp-text-sm gp-font-medium gp-text-white ${!link ? 'gp-btn-disable gp-cursor-not-allowed' : ''}`,
241
241
  children: "Generate"
242
242
  })
243
243
  ]
244
244
  }),
245
245
  /*#__PURE__*/ jsx("div", {
246
- className: "error-url-bottom-add-section max-w-[calc(100% - 40px)] absolute bottom-[-20px] left-[40px] mx-[-1px] hidden w-[500px] items-center justify-center",
246
+ className: "error-url-bottom-add-section gp-max-w-[calc(100% - 40px)] gp-absolute gp-bottom-[-20px] gp-left-[40px] gp-mx-[-1px] gp-hidden gp-w-[500px] gp-items-center gp-justify-center",
247
247
  children: /*#__PURE__*/ jsx("span", {
248
- className: "text-xs text-[#C3362B]",
248
+ className: "gp-text-xs gp-text-[#C3362B]",
249
249
  children: "Please use an valid URL to generate"
250
250
  })
251
251
  })
@@ -11,7 +11,7 @@ const DropElement = ()=>{
11
11
  window.dispatchEvent(event);
12
12
  };
13
13
  return /*#__PURE__*/ jsxs("div", {
14
- className: "flex w-full flex-col items-center justify-center",
14
+ className: "gp-flex gp-w-full gp-flex-col gp-items-center gp-justify-center",
15
15
  children: [
16
16
  /*#__PURE__*/ jsxs("svg", {
17
17
  width: "290",
@@ -19,7 +19,7 @@ const DropElement = ()=>{
19
19
  viewBox: "0 0 290 162",
20
20
  fill: "none",
21
21
  xmlns: "http://www.w3.org/2000/svg",
22
- className: "mb-[24px]",
22
+ className: "gp-mb-[24px]",
23
23
  children: [
24
24
  /*#__PURE__*/ jsx("rect", {
25
25
  x: "0.570588",
@@ -90,29 +90,29 @@ const DropElement = ()=>{
90
90
  ]
91
91
  }),
92
92
  /*#__PURE__*/ jsxs("div", {
93
- className: "flex flex-col items-center",
93
+ className: "gp-flex gp-flex-col gp-items-center",
94
94
  children: [
95
95
  /*#__PURE__*/ jsx("div", {
96
- className: "text-16 font-medium mb-4 text-[#212121]",
96
+ className: "gp-text-16 gp-font-medium gp-mb-4 gp-text-[#212121]",
97
97
  children: "Start with Sections from sidebar"
98
98
  }),
99
99
  /*#__PURE__*/ jsxs("div", {
100
- className: "flex w-[291px] justify-between",
100
+ className: "gp-flex gp-w-[291px] gp-justify-between",
101
101
  children: [
102
102
  /*#__PURE__*/ jsx("button", {
103
103
  onClick: ()=>dispatchEventBuildWithSectionActiveTab(true),
104
- className: "flex h-[40px] w-[136px] items-center font-medium justify-center rounded-[8px] bg-[#1C1C1C] text-[14px] text-white hover:bg-[#3B3B3B]",
104
+ className: "gp-flex gp-h-[40px] gp-w-[136px] gp-items-center gp-font-medium gp-justify-center gp-rounded-[8px] gp-bg-[#1C1C1C] gp-text-[14px] gp-text-white hover:gp-bg-[#3B3B3B]",
105
105
  children: "Add sections"
106
106
  }),
107
107
  /*#__PURE__*/ jsx("button", {
108
108
  onClick: ()=>dispatchEventBuildWithSectionActiveTab(false),
109
- className: "flex h-[40px] w-[136px] items-center font-medium justify-center rounded-[8px] bg-[#f4f4f4] text-[14px] text-[#212121] hover:bg-[#E2E2E2]",
109
+ className: "gp-flex gp-h-[40px] gp-w-[136px] gp-items-center gp-font-medium gp-justify-center gp-rounded-[8px] gp-bg-[#f4f4f4] gp-text-[14px] gp-text-[#212121] hover:gp-bg-[#E2E2E2]",
110
110
  children: "Add elements"
111
111
  })
112
112
  ]
113
113
  }),
114
114
  /*#__PURE__*/ jsx("div", {
115
- className: "my-6",
115
+ className: "gp-my-6",
116
116
  children: /*#__PURE__*/ jsxs("svg", {
117
117
  width: "338",
118
118
  height: "24",
@@ -140,15 +140,15 @@ const DropElement = ()=>{
140
140
  })
141
141
  }),
142
142
  /*#__PURE__*/ jsxs("div", {
143
- className: "flex items-center gap-2 text-xs",
143
+ className: "gp-flex gp-items-center gp-gap-2 gp-text-xs",
144
144
  children: [
145
145
  /*#__PURE__*/ jsx("div", {
146
146
  id: "gp-img-to-layout-gallery-btn",
147
- className: "relative cursor-pointer text-[14px] font-medium text-[#3C67FF]",
147
+ className: "gp-relative gp-cursor-pointer gp-text-[14px] gp-font-medium gp-text-[#3C67FF]",
148
148
  children: "Start with Generating from URL or image"
149
149
  }),
150
150
  /*#__PURE__*/ jsx("div", {
151
- className: "text-medium flex h-[20px] w-[58px] items-center justify-center rounded-[8px] bg-[#3C67FF1A] text-[#0008C9]",
151
+ className: "gp-text-medium gp-flex gp-h-[20px] gp-w-[58px] gp-items-center gp-justify-center gp-rounded-[8px] gp-bg-[#3C67FF1A] gp-text-[#0008C9]",
152
152
  children: "AI Beta"
153
153
  })
154
154
  ]
@@ -14,16 +14,16 @@ const ImageToLayout = ({ editorImageToLayout })=>{
14
14
  children: [
15
15
  /*#__PURE__*/ jsx("div", {
16
16
  id: "gp-img-to-layout-wrapper",
17
- className: cls(`sf-add-section-placeholder tablet:!px-0 gps-base-font-family flex-1 flex-col bg-[#F4F4F4]`, {
18
- hidden: !editorImageToLayout || !!totalSection,
19
- flex: editorImageToLayout && !totalSection
17
+ className: cls(`sf-add-section-placeholder tablet:!gp-px-0 gps-base-font-family gp-flex-1 gp-flex-col gp-bg-[#F4F4F4]`, {
18
+ 'gp-hidden': !editorImageToLayout || !!totalSection,
19
+ 'gp-flex': editorImageToLayout && !totalSection
20
20
  }),
21
21
  style: {
22
22
  height: `calc(100vh - ${FOOTER_HEIGHT + HEADER_HEIGHT}px)`
23
23
  },
24
24
  children: /*#__PURE__*/ jsx("div", {
25
25
  id: "gps-gem-ai-input-wrapper",
26
- className: "mobile:px-[0px] flex h-full w-full flex-1 flex-col items-center justify-center rounded-[3px] bg-white px-[72px] py-[32px]",
26
+ className: "mobile:gp-px-[0px] gp-flex gp-h-full gp-w-full gp-flex-1 gp-flex-col gp-items-center gp-justify-center gp-rounded-[3px] gp-bg-white gp-px-[72px] gp-py-[32px]",
27
27
  children: /*#__PURE__*/ jsx(DropElement, {})
28
28
  })
29
29
  }),
@@ -9,7 +9,7 @@ const MainLayout = ({ children, ...props })=>{
9
9
  parseHtml(props?.customCodeBody),
10
10
  /*#__PURE__*/ jsx("div", {
11
11
  className: cls({
12
- 'max-w-mobile mx-auto w-full': mobileOnly
12
+ 'gp-max-w-mobile gp-mx-auto gp-w-full': mobileOnly
13
13
  }),
14
14
  children: children
15
15
  }),
@@ -1,19 +1,5 @@
1
1
  import { getFontsFromDataBuilder } from './helpers/gen-fonts.js';
2
2
 
3
- const CHROME_UA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36';
4
- const IE_UA = 'Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11.0) like Gecko';
5
- async function getFontForUA(url, UA) {
6
- return fetch(url, {
7
- headers: {
8
- 'User-Agent': UA
9
- }
10
- }).then((res)=>{
11
- if (res.status === 200) {
12
- return res.text();
13
- }
14
- return '';
15
- });
16
- }
17
3
  const composeFonts = (fonts)=>{
18
4
  const uniqFonts = fonts.filter((font, index, arr)=>{
19
5
  return index === arr.findIndex((t)=>t.family === font.family);
@@ -54,31 +40,19 @@ const createFontUrl = (fonts, option)=>{
54
40
  }
55
41
  return `https://fonts.googleapis.com/css?${decodeURIComponent(params.toString())}`;
56
42
  };
57
- async function getFonts(fonts, option, maxSize) {
43
+ async function getFonts(fonts, option) {
58
44
  /**
59
45
  * The order of IE -> Chrome is important, other wise chrome starts loading woff1.
60
46
  * CSS cascading 🤷‍♂️.
61
47
  */ const url = createFontUrl(fonts, option);
62
48
  if (!url) return '';
63
49
  try {
64
- const [ie, chrome] = await Promise.all([
65
- getFontForUA(url, IE_UA),
66
- getFontForUA(url, CHROME_UA)
67
- ]);
68
- const value = ie + chrome;
69
- if (maxSize) {
70
- const textEncoder = new TextEncoder();
71
- const size = value ? textEncoder.encode(value).length : 0;
72
- if (Math.ceil(size / 1024) >= maxSize) {
73
- return `@import url('${url}');`;
74
- }
75
- }
76
- return value;
50
+ return `@import url('${url}');`;
77
51
  } catch (e) {
78
52
  return '';
79
53
  }
80
54
  }
81
- const getFontFromGlobalStyle = (data, maxSize)=>{
55
+ const getFontFromGlobalStyle = (data)=>{
82
56
  if (!data) return '';
83
57
  try {
84
58
  const globalStyle = JSON.parse(data);
@@ -86,7 +60,7 @@ const getFontFromGlobalStyle = (data, maxSize)=>{
86
60
  const fonts = Object.entries(fontData).map(([, value])=>{
87
61
  return value;
88
62
  });
89
- return getFonts(fonts, undefined, maxSize);
63
+ return getFonts(fonts);
90
64
  } catch {
91
65
  return '';
92
66
  }
@@ -9,7 +9,7 @@ const Page404 = ()=>{
9
9
  title: "Page not found"
10
10
  }),
11
11
  /*#__PURE__*/ jsxs("div", {
12
- className: "tablet:max-w-2xl container mx-auto flex min-h-screen max-w-4xl flex-col items-center justify-center gap-8 px-8",
12
+ className: "tablet:gp-max-w-2xl gp-container gp-mx-auto gp-flex gp-min-h-screen gp-max-w-4xl gp-flex-col gp-items-center gp-justify-center gp-gap-8 gp-px-8",
13
13
  children: [
14
14
  /*#__PURE__*/ jsx(Image, {
15
15
  sizes: "(max-width: 768px) 100vw, 50vw",
@@ -21,10 +21,10 @@ const Page404 = ()=>{
21
21
  priority: true
22
22
  }),
23
23
  /*#__PURE__*/ jsxs("div", {
24
- className: "flex flex-col items-center justify-center gap-2 pb-36",
24
+ className: "gp-flex gp-flex-col gp-items-center gp-justify-center gp-gap-2 gp-pb-36",
25
25
  children: [
26
26
  /*#__PURE__*/ jsx("h1", {
27
- className: "mobile:text-2xl text-4xl font-semibold",
27
+ className: "mobile:gp-text-2xl gp-text-4xl gp-font-semibold",
28
28
  children: "Oops! Page not found"
29
29
  }),
30
30
  /*#__PURE__*/ jsx("p", {
@@ -12,7 +12,7 @@ const Page500 = ()=>{
12
12
  title: "Service Unavailable"
13
13
  }),
14
14
  /*#__PURE__*/ jsxs("div", {
15
- className: "tablet:max-w-2xl container mx-auto flex min-h-screen max-w-4xl flex-col items-center justify-center gap-8 px-8",
15
+ className: "tablet:gp-max-w-2xl gp-container gp-mx-auto gp-flex gp-min-h-screen gp-max-w-4xl gp-flex-col gp-items-center gp-justify-center gp-gap-8 gp-px-8",
16
16
  children: [
17
17
  /*#__PURE__*/ jsx(Image, {
18
18
  sizes: "(max-width: 768px) 100vw, 50vw",
@@ -24,31 +24,31 @@ const Page500 = ()=>{
24
24
  priority: true
25
25
  }),
26
26
  /*#__PURE__*/ jsxs("div", {
27
- className: "flex flex-col gap-8 pb-36",
27
+ className: "gp-flex gp-flex-col gp-gap-8 gp-pb-36",
28
28
  children: [
29
29
  /*#__PURE__*/ jsxs("div", {
30
- className: "flex flex-col items-center justify-center gap-2 text-center",
30
+ className: "gp-flex gp-flex-col gp-items-center gp-justify-center gp-gap-2 gp-text-center",
31
31
  children: [
32
32
  /*#__PURE__*/ jsx("h1", {
33
- className: "mobile:text-2xl text-4xl font-semibold",
33
+ className: "mobile:gp-text-2xl gp-text-4xl gp-font-semiboldgp-",
34
34
  children: "Service Unavailable"
35
35
  }),
36
36
  /*#__PURE__*/ jsx("p", {
37
- className: "text-center",
37
+ className: "gp-text-center",
38
38
  children: "The server is temporarily busy. Try again later."
39
39
  })
40
40
  ]
41
41
  }),
42
42
  /*#__PURE__*/ jsxs("button", {
43
- className: "mx-auto inline-flex h-10 items-center justify-center gap-2 rounded bg-[#3C67FF] px-6 text-white active:translate-y-1",
43
+ className: "gp-mx-auto gp-inline-flex gp-h-10 gp-items-center gp-justify-center gp-gap-2 gp-rounded gp-bg-[#3C67FF] gp-px-6 gp-text-white active:gp-translate-y-1",
44
44
  onClick: ()=>{
45
45
  setLoading(true);
46
46
  window.location.reload();
47
47
  },
48
48
  children: [
49
49
  /*#__PURE__*/ jsx("svg", {
50
- className: cls('w-5', {
51
- 'animate-spin': loading
50
+ className: cls('gp-w-5', {
51
+ 'gp-animate-spin': loading
52
52
  }),
53
53
  viewBox: "0 0 20 20",
54
54
  fill: "none",
@@ -61,10 +61,10 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
61
61
  !hiddenToolbar && /*#__PURE__*/ jsx(Toolbar, {}),
62
62
  /*#__PURE__*/ jsx(PopupManager, {}),
63
63
  loadSuccess && /*#__PURE__*/ jsxs("div", {
64
- className: "builder z-1 relative",
64
+ className: "builder gp-z-1 gp-relative",
65
65
  children: [
66
66
  !hiddenToolbar && (isThemeSectionEditor ? /*#__PURE__*/ jsx("div", {
67
- className: "h-[40px] bg-[#f4f4f4]"
67
+ className: "gp-h-[40px] gp-bg-[#f4f4f4]"
68
68
  }) : /*#__PURE__*/ jsx(Header, {})),
69
69
  /*#__PURE__*/ jsx("div", {
70
70
  id: "storefront",
@@ -11,18 +11,18 @@ const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, f
11
11
  useTrackingView(shopToken, pageHandle, router.isFallback);
12
12
  if (router.isFallback) {
13
13
  return /*#__PURE__*/ jsx("div", {
14
- className: "flex h-full items-center justify-center",
14
+ className: "gp-flex gp-h-full gp-items-center gp-justify-center",
15
15
  children: /*#__PURE__*/ jsxs("div", {
16
- className: "flex gap-2",
16
+ className: "gp-flex gp-gap-2",
17
17
  children: [
18
18
  /*#__PURE__*/ jsx("span", {
19
- className: "aspect-square h-2 animate-[flashing_500ms_infinite_alternate] rounded-full bg-slate-800"
19
+ className: "gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_alternate] gp-rounded-full gp-bg-slate-800"
20
20
  }),
21
21
  /*#__PURE__*/ jsx("span", {
22
- className: "aspect-square h-2 animate-[flashing_500ms_infinite_200ms_linear_alternate] rounded-full bg-slate-800"
22
+ className: "gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_200ms_linear_alternate] gp-rounded-full gp-bg-slate-800"
23
23
  }),
24
24
  /*#__PURE__*/ jsx("span", {
25
- className: "aspect-square h-2 animate-[flashing_500ms_infinite_500ms_alternate] rounded-full bg-slate-800"
25
+ className: "gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_500ms_alternate] gp-rounded-full gp-bg-slate-800"
26
26
  })
27
27
  ]
28
28
  })
@@ -8,18 +8,18 @@ const StaticPage = ({ components, builderData, sectionData, seo, themeStyle, fon
8
8
  const router = useRouter();
9
9
  if (router.isFallback) {
10
10
  return /*#__PURE__*/ jsx("div", {
11
- className: "flex h-full items-center justify-center",
11
+ className: "gp-flex gp-h-full gp-items-center gp-justify-center",
12
12
  children: /*#__PURE__*/ jsxs("div", {
13
- className: "flex gap-2",
13
+ className: "gp-flex gp-gap-2",
14
14
  children: [
15
15
  /*#__PURE__*/ jsx("span", {
16
- className: "aspect-square h-2 animate-[flashing_500ms_infinite_alternate] rounded-full bg-slate-800"
16
+ className: "gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_alternate] gp-rounded-full gp-bg-slate-800"
17
17
  }),
18
18
  /*#__PURE__*/ jsx("span", {
19
- className: "aspect-square h-2 animate-[flashing_500ms_infinite_200ms_linear_alternate] rounded-full bg-slate-800"
19
+ className: "gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_200ms_linear_alternate] gp-rounded-full gp-bg-slate-800"
20
20
  }),
21
21
  /*#__PURE__*/ jsx("span", {
22
- className: "aspect-square h-2 animate-[flashing_500ms_infinite_500ms_alternate] rounded-full bg-slate-800"
22
+ className: "gp-aspect-square gp-h-2 gp-animate-[flashing_500ms_infinite_500ms_alternate] gp-rounded-full gp-bg-slate-800"
23
23
  })
24
24
  ]
25
25
  })
@@ -167,8 +167,8 @@ type FontOption = {
167
167
  subset?: string;
168
168
  effect?: string;
169
169
  };
170
- declare function getFonts(fonts: FontItem[], option?: FontOption, maxSize?: number): Promise<string>;
171
- declare const getFontFromGlobalStyle: (data?: string, maxSize?: number) => Promise<string> | "";
170
+ declare function getFonts(fonts: FontItem[], option?: FontOption): Promise<string>;
171
+ declare const getFontFromGlobalStyle: (data?: string) => Promise<string> | "";
172
172
 
173
173
  declare const getFontsFromDataBuilder: (dataBuilder: Record<string, any>) => FontItem[];
174
174
  declare const getFontFromGroupSetting: (fonts: FontItem[], groupSetting: Record<string, any>) => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.33.4",
3
+ "version": "1.36.0",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -19,16 +19,16 @@
19
19
  "test": "jest -c ./../../helpers/jest.config.ts"
20
20
  },
21
21
  "dependencies": {
22
- "@sentry/nextjs": "7.57.0",
22
+ "@sentry/nextjs": "7.77.0",
23
23
  "deepmerge": "4.3.1",
24
24
  "html-react-parser": "3.0.15",
25
25
  "next-seo": "^6.0.0"
26
26
  },
27
27
  "devDependencies": {
28
- "@gem-sdk/core": "1.33.4",
29
- "@gem-sdk/plugin-cookie-bar": "1.25.0",
30
- "@gem-sdk/plugin-quick-view": "1.25.0",
31
- "@gem-sdk/plugin-sticky-add-to-cart": "1.25.0"
28
+ "@gem-sdk/core": "1.36.0",
29
+ "@gem-sdk/plugin-cookie-bar": "1.35.0",
30
+ "@gem-sdk/plugin-quick-view": "1.35.0",
31
+ "@gem-sdk/plugin-sticky-add-to-cart": "1.35.0"
32
32
  },
33
33
  "peerDependencies": {
34
34
  "next": ">=13"