@gem-sdk/pages 1.42.0-staging.16 → 1.42.0-staging.18

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 (7) hide show
  1. package/dist/cjs/components/builder/Header.js +137 -133
  2. package/dist/cjs/components/builder/SwitchView.js +13 -11
  3. package/dist/cjs/pages/builder.js +3 -1
  4. package/dist/esm/components/builder/Header.js +138 -134
  5. package/dist/esm/components/builder/SwitchView.js +13 -11
  6. package/dist/esm/pages/builder.js +3 -1
  7. package/package.json +5 -5
package/dist/cjs/components/builder/Header.js CHANGED
@@ -23,158 +23,162 @@ const Header = (props)=>{
23
23
  const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
24
24
  const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
25
25
  const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
26
- return /*#__PURE__*/ jsxRuntime.jsx("div", {
27
- 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'),
28
- children: pageType === 'POST_PURCHASE' ? /*#__PURE__*/ jsxRuntime.jsx("div", {
29
- className: "gp-flex gp-flex-1 gp-items-center gp-justify-between",
30
- style: {
31
- maxWidth: `var(--g-ct-w, 1200px)`,
32
- ...core.makeStyleResponsive('ml', defaultMargin),
33
- ...core.makeStyleResponsive('mr', defaultMargin)
34
- },
35
- children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
36
- className: "tablet:gp-items-center gp-flex gp-py-3",
37
- children: [
38
- /*#__PURE__*/ jsxRuntime.jsxs("svg", {
39
- style: {
40
- ...core.makeStyleResponsive('w', sizeCheck),
41
- ...core.makeStyleResponsive('h', sizeCheck)
42
- },
43
- viewBox: "0 0 24 24",
44
- fill: "none",
45
- xmlns: "http://www.w3.org/2000/svg",
46
- children: [
47
- /*#__PURE__*/ jsxRuntime.jsx("path", {
48
- d: "M15.7244 10.6242C15.9587 10.3899 15.9587 10.01 15.7244 9.77571C15.49 9.5414 15.1101 9.5414 14.8758 9.77571L11.1001 13.5514L9.42436 11.8757C9.19005 11.6414 8.81015 11.6414 8.57583 11.8757C8.34152 12.11 8.34152 12.4899 8.57583 12.7242L10.6758 14.8242C10.9101 15.0586 11.29 15.0586 11.5244 14.8242L15.7244 10.6242Z",
49
- fill: "#197BBD"
50
- }),
51
- /*#__PURE__*/ jsxRuntime.jsx("path", {
52
- fillRule: "evenodd",
53
- clipRule: "evenodd",
54
- d: "M20.4001 12C20.4001 16.6392 16.6393 20.4 12.0001 20.4C7.36091 20.4 3.6001 16.6392 3.6001 12C3.6001 7.36078 7.36091 3.59998 12.0001 3.59998C16.6393 3.59998 20.4001 7.36078 20.4001 12ZM19.2001 12C19.2001 15.9764 15.9765 19.2 12.0001 19.2C8.02365 19.2 4.8001 15.9764 4.8001 12C4.8001 8.02352 8.02365 4.79998 12.0001 4.79998C15.9765 4.79998 19.2001 8.02352 19.2001 12Z",
55
- fill: "#197BBD"
56
- })
57
- ]
58
- }),
59
- /*#__PURE__*/ jsxRuntime.jsxs("div", {
60
- className: "gp-ml-4",
26
+ return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
27
+ children: [
28
+ /*#__PURE__*/ jsxRuntime.jsx(SwitchView.default, {}),
29
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
30
+ 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'),
31
+ children: pageType === 'POST_PURCHASE' ? /*#__PURE__*/ jsxRuntime.jsx("div", {
32
+ className: "gp-flex gp-flex-1 gp-items-center gp-justify-between",
33
+ style: {
34
+ maxWidth: `var(--g-ct-w, 1200px)`,
35
+ ...core.makeStyleResponsive('ml', defaultMargin),
36
+ ...core.makeStyleResponsive('mr', defaultMargin)
37
+ },
38
+ children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
39
+ className: "tablet:gp-items-center gp-flex gp-py-3",
61
40
  children: [
62
- /*#__PURE__*/ jsxRuntime.jsx("p", {
63
- className: "gp-text-sm",
64
- children: "Order #1001"
65
- }),
66
- /*#__PURE__*/ jsxRuntime.jsx("p", {
67
- children: "You’ve paid for your order."
41
+ /*#__PURE__*/ jsxRuntime.jsxs("svg", {
42
+ style: {
43
+ ...core.makeStyleResponsive('w', sizeCheck),
44
+ ...core.makeStyleResponsive('h', sizeCheck)
45
+ },
46
+ viewBox: "0 0 24 24",
47
+ fill: "none",
48
+ xmlns: "http://www.w3.org/2000/svg",
49
+ children: [
50
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
51
+ d: "M15.7244 10.6242C15.9587 10.3899 15.9587 10.01 15.7244 9.77571C15.49 9.5414 15.1101 9.5414 14.8758 9.77571L11.1001 13.5514L9.42436 11.8757C9.19005 11.6414 8.81015 11.6414 8.57583 11.8757C8.34152 12.11 8.34152 12.4899 8.57583 12.7242L10.6758 14.8242C10.9101 15.0586 11.29 15.0586 11.5244 14.8242L15.7244 10.6242Z",
52
+ fill: "#197BBD"
53
+ }),
54
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
55
+ fillRule: "evenodd",
56
+ clipRule: "evenodd",
57
+ d: "M20.4001 12C20.4001 16.6392 16.6393 20.4 12.0001 20.4C7.36091 20.4 3.6001 16.6392 3.6001 12C3.6001 7.36078 7.36091 3.59998 12.0001 3.59998C16.6393 3.59998 20.4001 7.36078 20.4001 12ZM19.2001 12C19.2001 15.9764 15.9765 19.2 12.0001 19.2C8.02365 19.2 4.8001 15.9764 4.8001 12C4.8001 8.02352 8.02365 4.79998 12.0001 4.79998C15.9765 4.79998 19.2001 8.02352 19.2001 12Z",
58
+ fill: "#197BBD"
59
+ })
60
+ ]
68
61
  }),
69
62
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
70
- className: "gp-mt-1 gp-flex gp-items-center gp-text-[#197BBD]",
63
+ className: "gp-ml-4",
71
64
  children: [
72
- /*#__PURE__*/ jsxRuntime.jsx("div", {
65
+ /*#__PURE__*/ jsxRuntime.jsx("p", {
73
66
  className: "gp-text-sm",
74
- children: "View order confirmation"
67
+ children: "Order #1001"
75
68
  }),
76
- /*#__PURE__*/ jsxRuntime.jsx("svg", {
77
- width: "12",
78
- height: "13",
79
- viewBox: "0 0 12 13",
80
- fill: "none",
81
- xmlns: "http://www.w3.org/2000/svg",
82
- children: /*#__PURE__*/ jsxRuntime.jsx("path", {
83
- fillRule: "evenodd",
84
- clipRule: "evenodd",
85
- d: "M4.6318 9.21817C4.45607 9.04244 4.45607 8.75751 4.6318 8.58178L6.7136 6.49998L4.6318 4.41817C4.45607 4.24244 4.45607 3.95751 4.6318 3.78178C4.80754 3.60604 5.09246 3.60604 5.2682 3.78178L7.6682 6.18178C7.84393 6.35751 7.84393 6.64244 7.6682 6.81817L5.2682 9.21817C5.09246 9.39391 4.80754 9.39391 4.6318 9.21817Z",
86
- fill: "#197BBD"
87
- })
69
+ /*#__PURE__*/ jsxRuntime.jsx("p", {
70
+ children: "You’ve paid for your order."
71
+ }),
72
+ /*#__PURE__*/ jsxRuntime.jsxs("div", {
73
+ className: "gp-mt-1 gp-flex gp-items-center gp-text-[#197BBD]",
74
+ children: [
75
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
76
+ className: "gp-text-sm",
77
+ children: "View order confirmation"
78
+ }),
79
+ /*#__PURE__*/ jsxRuntime.jsx("svg", {
80
+ width: "12",
81
+ height: "13",
82
+ viewBox: "0 0 12 13",
83
+ fill: "none",
84
+ xmlns: "http://www.w3.org/2000/svg",
85
+ children: /*#__PURE__*/ jsxRuntime.jsx("path", {
86
+ fillRule: "evenodd",
87
+ clipRule: "evenodd",
88
+ d: "M4.6318 9.21817C4.45607 9.04244 4.45607 8.75751 4.6318 8.58178L6.7136 6.49998L4.6318 4.41817C4.45607 4.24244 4.45607 3.95751 4.6318 3.78178C4.80754 3.60604 5.09246 3.60604 5.2682 3.78178L7.6682 6.18178C7.84393 6.35751 7.84393 6.64244 7.6682 6.81817L5.2682 9.21817C5.09246 9.39391 4.80754 9.39391 4.6318 9.21817Z",
89
+ fill: "#197BBD"
90
+ })
91
+ })
92
+ ]
88
93
  })
89
94
  ]
90
95
  })
91
96
  ]
92
97
  })
93
- ]
94
- })
95
- }) : /*#__PURE__*/ jsxRuntime.jsxs("div", {
96
- className: "gp-flex gp-h-[40px] gp-flex-1 gp-items-center gp-justify-between",
97
- style: {
98
- maxWidth: `var(--g-ct-w)`,
99
- ...core.makeStyleResponsive('ml', defaultMargin),
100
- ...core.makeStyleResponsive('mr', defaultMargin)
101
- },
102
- children: [
103
- /*#__PURE__*/ jsxRuntime.jsxs("svg", {
104
- width: "60",
105
- height: "8",
106
- viewBox: "0 0 60 8",
107
- fill: "none",
108
- xmlns: "http://www.w3.org/2000/svg",
98
+ }) : /*#__PURE__*/ jsxRuntime.jsxs("div", {
99
+ className: "gp-flex gp-h-[40px] gp-flex-1 gp-items-center gp-justify-between",
100
+ style: {
101
+ maxWidth: `var(--g-ct-w)`,
102
+ ...core.makeStyleResponsive('ml', defaultMargin),
103
+ ...core.makeStyleResponsive('mr', defaultMargin)
104
+ },
109
105
  children: [
110
- /*#__PURE__*/ jsxRuntime.jsx("path", {
111
- d: "M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4C24 6.20914 22.2091 8 20 8H4C1.79086 8 0 6.20914 0 4Z",
112
- fill: "#9E9E9E"
106
+ /*#__PURE__*/ jsxRuntime.jsxs("svg", {
107
+ width: "60",
108
+ height: "8",
109
+ viewBox: "0 0 60 8",
110
+ fill: "none",
111
+ xmlns: "http://www.w3.org/2000/svg",
112
+ children: [
113
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
114
+ d: "M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4C24 6.20914 22.2091 8 20 8H4C1.79086 8 0 6.20914 0 4Z",
115
+ fill: "#9E9E9E"
116
+ }),
117
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
118
+ d: "M28 4C28 1.79086 29.7909 0 32 0H56C58.2091 0 60 1.79086 60 4C60 6.20914 58.2091 8 56 8H32C29.7909 8 28 6.20914 28 4Z",
119
+ fill: headerColor
120
+ })
121
+ ]
113
122
  }),
114
- /*#__PURE__*/ jsxRuntime.jsx("path", {
115
- d: "M28 4C28 1.79086 29.7909 0 32 0H56C58.2091 0 60 1.79086 60 4C60 6.20914 58.2091 8 56 8H32C29.7909 8 28 6.20914 28 4Z",
116
- fill: headerColor
117
- })
118
- ]
119
- }),
120
- /*#__PURE__*/ jsxRuntime.jsx(SwitchView.default, {}),
121
- !isOriginTemplate && /*#__PURE__*/ jsxRuntime.jsx("div", {
122
- className: "gp-header gp-invisible gp-absolute gp-left-[8px] gp-flex gp-h-[24px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded gp-bg-[#EEEEEE] gp-p-[4px] hover:gp-bg-[#f4f4f4] group-hover:gp-visible",
123
- children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
124
- className: "gp-gap-2 gp-flex gp-px-1 gp-h-[24px] gp-items-center gp-justify-center gp-leading-5 gp-text-xs gp-font-medium gp-text-[#212121]",
125
- children: [
126
- /*#__PURE__*/ jsxRuntime.jsx("span", {
127
- children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
128
- width: "14",
129
- height: "14",
130
- viewBox: "0 0 14 14",
131
- fill: "none",
132
- xmlns: "http://www.w3.org/2000/svg",
133
- children: [
134
- /*#__PURE__*/ jsxRuntime.jsx("path", {
135
- fillRule: "evenodd",
136
- clipRule: "evenodd",
137
- d: "M6.99985 4.08501C5.38983 4.08501 4.08465 5.39019 4.08465 7.00021C4.08465 8.61023 5.38983 9.9154 6.99985 9.9154C8.60987 9.9154 9.91504 8.61023 9.91504 7.00021C9.91504 5.39019 8.60987 4.08501 6.99985 4.08501ZM5.08465 7.00021C5.08465 5.94247 5.94211 5.08501 6.99985 5.08501C8.05758 5.08501 8.91504 5.94247 8.91504 7.00021C8.91504 8.05794 8.05758 8.9154 6.99985 8.9154C5.94211 8.9154 5.08465 8.05794 5.08465 7.00021Z",
138
- fill: "#212121"
139
- }),
140
- /*#__PURE__*/ jsxRuntime.jsx("path", {
141
- fillRule: "evenodd",
142
- clipRule: "evenodd",
143
- d: "M5.52351 0.00390625C5.28138 0.00390625 5.07405 0.177388 5.03135 0.415715L4.7415 2.03321C4.40346 2.18248 4.08346 2.36419 3.78558 2.57432L2.18557 2.00147C1.95684 1.91958 1.70235 2.01395 1.58232 2.22517L0.122204 4.79451C0.00217064 5.00572 0.0513362 5.27266 0.238747 5.42725L1.50086 6.46836C1.48358 6.64355 1.47474 6.82106 1.47474 7.00047C1.47474 7.17981 1.48357 7.35726 1.50084 7.53238L0.238747 8.57347C0.0513362 8.72806 0.00217064 8.995 0.122203 9.20622L1.58232 11.7756C1.70235 11.9868 1.95684 12.0811 2.18557 11.9993L3.78537 11.4265C4.08332 11.6367 4.40341 11.8185 4.74155 11.9678L5.03135 13.585C5.07405 13.8233 5.28138 13.9968 5.52351 13.9968H8.47647C8.7186 13.9968 8.92593 13.8233 8.96863 13.585L9.25846 11.9676C9.5965 11.8183 9.91649 11.6365 10.2144 11.4264L11.8144 11.9993C12.0431 12.0811 12.2976 11.9868 12.4177 11.7756L13.8778 9.20622C13.9978 8.995 13.9486 8.72806 13.7612 8.57347L12.4988 7.5321C12.516 7.35706 12.5249 7.17971 12.5249 7.00047C12.5249 6.82116 12.516 6.64375 12.4988 6.46864L13.7612 5.42725C13.9486 5.27266 13.9978 5.00572 13.8778 4.79451L12.4177 2.22517C12.2976 2.01395 12.0431 1.91958 11.8144 2.00147L10.2141 2.57441C9.91636 2.36433 9.59645 2.18264 9.25851 2.0334L8.96863 0.415715C8.92593 0.177389 8.7186 0.00390625 8.47647 0.00390625H5.52351ZM5.67747 2.47943L5.94187 1.00391H8.0581L8.32253 2.47958C8.35348 2.6523 8.47271 2.79616 8.63668 2.85863C9.06768 3.02283 9.46674 3.25007 9.82215 3.5288C9.95734 3.63483 10.1375 3.66402 10.2993 3.6061L11.7559 3.08459L12.8007 4.92323L11.6503 5.8722C11.5145 5.98427 11.4476 6.15956 11.4743 6.33366C11.5076 6.55089 11.5249 6.77354 11.5249 7.00047C11.5249 7.22735 11.5076 7.44993 11.4743 7.66711C11.4476 7.8412 11.5145 8.01648 11.6504 8.12855L12.8007 9.07749L11.7559 10.9161L10.2994 10.3947C10.1377 10.3368 9.95752 10.366 9.82233 10.472C9.46686 10.7508 9.06773 10.9781 8.63664 11.1423C8.47267 11.2048 8.35344 11.3487 8.32249 11.5214L8.0581 12.9968H5.94187L5.67752 11.5215C5.64656 11.3488 5.52732 11.2049 5.36333 11.1425C4.93215 10.9782 4.53292 10.7509 4.17738 10.4721C4.04219 10.3661 3.86203 10.3369 3.70027 10.3948L2.24412 10.9161L1.19924 9.07749L2.34929 8.12883C2.48516 8.01675 2.55204 7.84146 2.52535 7.66736C2.49205 7.4501 2.47474 7.22743 2.47474 7.00047C2.47474 6.77345 2.49206 6.55072 2.52538 6.33341C2.55207 6.15931 2.48519 5.984 2.34932 5.87192L1.19924 4.92323L2.24412 3.08459L3.70047 3.60601C3.86221 3.66392 4.04236 3.63474 4.17755 3.52872C4.53304 3.24994 4.93219 3.02269 5.36329 2.85849C5.52728 2.79603 5.64652 2.65216 5.67747 2.47943Z",
144
- fill: "#212121"
123
+ !isOriginTemplate && /*#__PURE__*/ jsxRuntime.jsx("div", {
124
+ className: "gp-header gp-invisible gp-absolute gp-left-[8px] gp-flex gp-h-[24px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded gp-bg-[#EEEEEE] gp-p-[4px] hover:gp-bg-[#f4f4f4] group-hover:gp-visible",
125
+ children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
126
+ className: "gp-gap-2 gp-flex gp-px-1 gp-h-[24px] gp-items-center gp-justify-center gp-leading-5 gp-text-xs gp-font-medium gp-text-[#212121]",
127
+ children: [
128
+ /*#__PURE__*/ jsxRuntime.jsx("span", {
129
+ children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
130
+ width: "14",
131
+ height: "14",
132
+ viewBox: "0 0 14 14",
133
+ fill: "none",
134
+ xmlns: "http://www.w3.org/2000/svg",
135
+ children: [
136
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
137
+ fillRule: "evenodd",
138
+ clipRule: "evenodd",
139
+ d: "M6.99985 4.08501C5.38983 4.08501 4.08465 5.39019 4.08465 7.00021C4.08465 8.61023 5.38983 9.9154 6.99985 9.9154C8.60987 9.9154 9.91504 8.61023 9.91504 7.00021C9.91504 5.39019 8.60987 4.08501 6.99985 4.08501ZM5.08465 7.00021C5.08465 5.94247 5.94211 5.08501 6.99985 5.08501C8.05758 5.08501 8.91504 5.94247 8.91504 7.00021C8.91504 8.05794 8.05758 8.9154 6.99985 8.9154C5.94211 8.9154 5.08465 8.05794 5.08465 7.00021Z",
140
+ fill: "#212121"
141
+ }),
142
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
143
+ fillRule: "evenodd",
144
+ clipRule: "evenodd",
145
+ d: "M5.52351 0.00390625C5.28138 0.00390625 5.07405 0.177388 5.03135 0.415715L4.7415 2.03321C4.40346 2.18248 4.08346 2.36419 3.78558 2.57432L2.18557 2.00147C1.95684 1.91958 1.70235 2.01395 1.58232 2.22517L0.122204 4.79451C0.00217064 5.00572 0.0513362 5.27266 0.238747 5.42725L1.50086 6.46836C1.48358 6.64355 1.47474 6.82106 1.47474 7.00047C1.47474 7.17981 1.48357 7.35726 1.50084 7.53238L0.238747 8.57347C0.0513362 8.72806 0.00217064 8.995 0.122203 9.20622L1.58232 11.7756C1.70235 11.9868 1.95684 12.0811 2.18557 11.9993L3.78537 11.4265C4.08332 11.6367 4.40341 11.8185 4.74155 11.9678L5.03135 13.585C5.07405 13.8233 5.28138 13.9968 5.52351 13.9968H8.47647C8.7186 13.9968 8.92593 13.8233 8.96863 13.585L9.25846 11.9676C9.5965 11.8183 9.91649 11.6365 10.2144 11.4264L11.8144 11.9993C12.0431 12.0811 12.2976 11.9868 12.4177 11.7756L13.8778 9.20622C13.9978 8.995 13.9486 8.72806 13.7612 8.57347L12.4988 7.5321C12.516 7.35706 12.5249 7.17971 12.5249 7.00047C12.5249 6.82116 12.516 6.64375 12.4988 6.46864L13.7612 5.42725C13.9486 5.27266 13.9978 5.00572 13.8778 4.79451L12.4177 2.22517C12.2976 2.01395 12.0431 1.91958 11.8144 2.00147L10.2141 2.57441C9.91636 2.36433 9.59645 2.18264 9.25851 2.0334L8.96863 0.415715C8.92593 0.177389 8.7186 0.00390625 8.47647 0.00390625H5.52351ZM5.67747 2.47943L5.94187 1.00391H8.0581L8.32253 2.47958C8.35348 2.6523 8.47271 2.79616 8.63668 2.85863C9.06768 3.02283 9.46674 3.25007 9.82215 3.5288C9.95734 3.63483 10.1375 3.66402 10.2993 3.6061L11.7559 3.08459L12.8007 4.92323L11.6503 5.8722C11.5145 5.98427 11.4476 6.15956 11.4743 6.33366C11.5076 6.55089 11.5249 6.77354 11.5249 7.00047C11.5249 7.22735 11.5076 7.44993 11.4743 7.66711C11.4476 7.8412 11.5145 8.01648 11.6504 8.12855L12.8007 9.07749L11.7559 10.9161L10.2994 10.3947C10.1377 10.3368 9.95752 10.366 9.82233 10.472C9.46686 10.7508 9.06773 10.9781 8.63664 11.1423C8.47267 11.2048 8.35344 11.3487 8.32249 11.5214L8.0581 12.9968H5.94187L5.67752 11.5215C5.64656 11.3488 5.52732 11.2049 5.36333 11.1425C4.93215 10.9782 4.53292 10.7509 4.17738 10.4721C4.04219 10.3661 3.86203 10.3369 3.70027 10.3948L2.24412 10.9161L1.19924 9.07749L2.34929 8.12883C2.48516 8.01675 2.55204 7.84146 2.52535 7.66736C2.49205 7.4501 2.47474 7.22743 2.47474 7.00047C2.47474 6.77345 2.49206 6.55072 2.52538 6.33341C2.55207 6.15931 2.48519 5.984 2.34932 5.87192L1.19924 4.92323L2.24412 3.08459L3.70047 3.60601C3.86221 3.66392 4.04236 3.63474 4.17755 3.52872C4.53304 3.24994 4.93219 3.02269 5.36329 2.85849C5.52728 2.79603 5.64652 2.65216 5.67747 2.47943Z",
146
+ fill: "#212121"
147
+ })
148
+ ]
145
149
  })
146
- ]
147
- })
148
- }),
149
- /*#__PURE__*/ jsxRuntime.jsx("span", {
150
- children: "Header"
150
+ }),
151
+ /*#__PURE__*/ jsxRuntime.jsx("span", {
152
+ children: "Header"
153
+ })
154
+ ]
151
155
  })
152
- ]
153
- })
154
- }),
155
- /*#__PURE__*/ jsxRuntime.jsxs("svg", {
156
- width: "80",
157
- height: "8",
158
- viewBox: "0 0 80 8",
159
- fill: "none",
160
- xmlns: "http://www.w3.org/2000/svg",
161
- children: [
162
- /*#__PURE__*/ jsxRuntime.jsx("path", {
163
- d: "M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4C24 6.20914 22.2091 8 20 8H4C1.79086 8 0 6.20914 0 4Z",
164
- fill: headerColor
165
156
  }),
166
- /*#__PURE__*/ jsxRuntime.jsx("path", {
167
- d: "M28 4C28 1.79086 29.7909 0 32 0H48C50.2091 0 52 1.79086 52 4C52 6.20914 50.2091 8 48 8H32C29.7909 8 28 6.20914 28 4Z",
168
- fill: headerColor
169
- }),
170
- /*#__PURE__*/ jsxRuntime.jsx("path", {
171
- d: "M56 4C56 1.79086 57.7909 0 60 0H76C78.2091 0 80 1.79086 80 4C80 6.20914 78.2091 8 76 8H60C57.7909 8 56 6.20914 56 4Z",
172
- fill: headerColor
157
+ /*#__PURE__*/ jsxRuntime.jsxs("svg", {
158
+ width: "80",
159
+ height: "8",
160
+ viewBox: "0 0 80 8",
161
+ fill: "none",
162
+ xmlns: "http://www.w3.org/2000/svg",
163
+ children: [
164
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
165
+ d: "M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4C24 6.20914 22.2091 8 20 8H4C1.79086 8 0 6.20914 0 4Z",
166
+ fill: headerColor
167
+ }),
168
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
169
+ d: "M28 4C28 1.79086 29.7909 0 32 0H48C50.2091 0 52 1.79086 52 4C52 6.20914 50.2091 8 48 8H32C29.7909 8 28 6.20914 28 4Z",
170
+ fill: headerColor
171
+ }),
172
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
173
+ d: "M56 4C56 1.79086 57.7909 0 60 0H76C78.2091 0 80 1.79086 80 4C80 6.20914 78.2091 8 76 8H60C57.7909 8 56 6.20914 56 4Z",
174
+ fill: headerColor
175
+ })
176
+ ]
173
177
  })
174
178
  ]
175
179
  })
176
- ]
177
- })
180
+ })
181
+ ]
178
182
  });
179
183
  };
180
184
 
package/dist/cjs/components/builder/SwitchView.js CHANGED
@@ -14,6 +14,7 @@ const Devices = ()=>{
14
14
  activeId: null
15
15
  };
16
16
  const [deviceState, setDeviceState] = react.useState(initialDeviceState);
17
+ const [isShowSwitchView, setIsShowSwitchView] = react.useState(false);
17
18
  const updateDeviceState = react.useCallback((updates)=>{
18
19
  setDeviceState((prevState)=>({
19
20
  ...prevState,
@@ -23,7 +24,7 @@ const Devices = ()=>{
23
24
  setDeviceState
24
25
  ]);
25
26
  react.useEffect(()=>{
26
- if (!deviceState.name) {
27
+ if (!deviceState) {
27
28
  const activeDevice = _const.devices[0];
28
29
  if (activeDevice) {
29
30
  updateDeviceState({
@@ -32,9 +33,12 @@ const Devices = ()=>{
32
33
  activeId: activeDevice.id
33
34
  });
34
35
  }
36
+ setIsShowSwitchView(false);
37
+ } else {
38
+ setIsShowSwitchView(deviceState.width > 0 && deviceState.width <= 1024);
35
39
  }
36
40
  }, [
37
- deviceState.name,
41
+ deviceState,
38
42
  updateDeviceState
39
43
  ]);
40
44
  const onHandleClick = (id)=>{
@@ -93,19 +97,17 @@ const Devices = ()=>{
93
97
  }, [
94
98
  onResizePreviewScreen
95
99
  ]);
96
- const isActiveDevice = (id)=>{
97
- return id === deviceState.activeId;
100
+ const isActiveDevice = (device)=>{
101
+ return device.id === deviceState.activeId || deviceState.name === device.name;
98
102
  };
99
103
  const handleToggleDropdown = ()=>setIsOpen(!isOpen);
100
- if (deviceState.width > 1024) return null;
101
- return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
104
+ if (isShowSwitchView) return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
102
105
  children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
103
106
  ref: switchViewRef,
104
- className: `gp-switch-view gp-absolute gp-top-2 gp-transform -gp-translate-x-1/2 gp-left-1/2 gp-z-50 devices-selector gp-bg-[#F4F4F4] gp-gap-2 gp-rounded-md gp-px-2 gp-py-1 hover:gp-bg-[#E2E2E2] gp-items-center gp-justify-center gp-cursor-pointer gp-leading-5 gp-text-xs gp-font-medium gp-text-[#212121]
105
- ${isOpen ? 'gp-border-[1px] gp-border-[#3C67FF]' : ''}`,
107
+ className: `gp-switch-view gp-font-sans gp-flex gp-h-[40px] gp-absolute gp-top-[2px] gp-transform -gp-translate-x-1/2 gp-left-1/2 gp-gap-2 gp-items-center gp-justify-center gp-cursor-pointer ${isOpen ? 'gp-z-50' : 'gp-z-1'}`,
106
108
  children: [
107
109
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
108
- className: "gp-flex gp-gap-1 gp-justify-between gp-items-center gp-min-w-[176px]",
110
+ className: `gp-flex gp-gap-1 gp-py-1 gp-px-2 gp-transform -gp-translate-y-[2px] gp-border-[1px] gp-justify-between gp-items-center gp-min-w-[194px] gp-bg-[#F4F4F4] hover:gp-bg-[#E2E2E2] gp-rounded-md gp-leading-5 gp-text-xs gp-font-medium gp-text-[#212121] ${isOpen ? 'gp-border-[#3C67FF]' : 'gp-border-transparent'}`,
109
111
  onClick: (e)=>{
110
112
  e.preventDefault();
111
113
  handleToggleDropdown();
@@ -138,7 +140,7 @@ const Devices = ()=>{
138
140
  ]
139
141
  }),
140
142
  /*#__PURE__*/ jsxRuntime.jsx("div", {
141
- className: `gp-absolute gp-top-8 gp-transform -gp-translate-x-1/2 gp-left-1/2 gp-bg-[#212121] gp-rounded-xl gp-p-2 gp-text-[#F9F9F9] gp-w-[176px] gp-z-50 ${!isOpen ? 'gp-hidden' : ''}`,
143
+ className: `gp-absolute gp-top-9 gp-transform -gp-translate-x-1/2 gp-left-1/2 gp-bg-[#212121] gp-rounded-xl gp-p-2 gp-text-[#F9F9F9] gp-w-[176px] gp-z-50 ${!isOpen ? 'gp-hidden' : ''}`,
142
144
  children: _const.devices.map((device)=>/*#__PURE__*/ jsxRuntime.jsx("div", {
143
145
  className: "gp-p-2 hover:gp-bg-[#3E3E3E] gp-rounded-md",
144
146
  onClick: (e)=>{
@@ -152,7 +154,7 @@ const Devices = ()=>{
152
154
  children: [
153
155
  /*#__PURE__*/ jsxRuntime.jsx("span", {
154
156
  className: "gp-min-w-[16px]",
155
- children: isActiveDevice(device.id) && /*#__PURE__*/ jsxRuntime.jsx("svg", {
157
+ children: isActiveDevice(device) && /*#__PURE__*/ jsxRuntime.jsx("svg", {
156
158
  width: "16",
157
159
  height: "17",
158
160
  viewBox: "0 0 16 17",
package/dist/cjs/pages/builder.js CHANGED
@@ -13,6 +13,7 @@ var PopupManager = require('../components/builder/PopupManager.js');
13
13
  var ImageToLayout = require('../components/image-to-layout/ImageToLayout.js');
14
14
  var AddSectionImageToLayout = require('../components/image-to-layout/AddSectionImageToLayout.js');
15
15
  var Toolbar = require('../components/builder/Toolbar.js');
16
+ var SwitchView = require('../components/builder/SwitchView.js');
16
17
 
17
18
  const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar })=>{
18
19
  const [loadSuccess, setLoadSuccess] = react.useState(false);
@@ -69,7 +70,8 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
69
70
  className: "builder gp-z-1 gp-relative",
70
71
  children: [
71
72
  !hiddenToolbar && (isDisableHeaderFooter() ? /*#__PURE__*/ jsxRuntime.jsx("div", {
72
- className: "h-[40px] bg-[#f4f4f4]"
73
+ className: "gp-h-[40px] bg-[#f4f4f4]",
74
+ children: /*#__PURE__*/ jsxRuntime.jsx(SwitchView.default, {})
73
75
  }) : /*#__PURE__*/ jsxRuntime.jsx(Header.default, {
74
76
  pageType: pageType
75
77
  })),
package/dist/esm/components/builder/Header.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
1
+ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
2
  import { useShopStore, cls, makeStyleResponsive } from '@gem-sdk/core';
3
3
  import Devices from './SwitchView.js';
4
4
 
@@ -19,158 +19,162 @@ const Header = (props)=>{
19
19
  const layoutSetting = useShopStore((s)=>s.layoutSettings);
20
20
  const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
21
21
  const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
22
- return /*#__PURE__*/ jsx("div", {
23
- 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'),
24
- children: pageType === 'POST_PURCHASE' ? /*#__PURE__*/ jsx("div", {
25
- className: "gp-flex gp-flex-1 gp-items-center gp-justify-between",
26
- style: {
27
- maxWidth: `var(--g-ct-w, 1200px)`,
28
- ...makeStyleResponsive('ml', defaultMargin),
29
- ...makeStyleResponsive('mr', defaultMargin)
30
- },
31
- children: /*#__PURE__*/ jsxs("div", {
32
- className: "tablet:gp-items-center gp-flex gp-py-3",
33
- children: [
34
- /*#__PURE__*/ jsxs("svg", {
35
- style: {
36
- ...makeStyleResponsive('w', sizeCheck),
37
- ...makeStyleResponsive('h', sizeCheck)
38
- },
39
- viewBox: "0 0 24 24",
40
- fill: "none",
41
- xmlns: "http://www.w3.org/2000/svg",
42
- children: [
43
- /*#__PURE__*/ jsx("path", {
44
- d: "M15.7244 10.6242C15.9587 10.3899 15.9587 10.01 15.7244 9.77571C15.49 9.5414 15.1101 9.5414 14.8758 9.77571L11.1001 13.5514L9.42436 11.8757C9.19005 11.6414 8.81015 11.6414 8.57583 11.8757C8.34152 12.11 8.34152 12.4899 8.57583 12.7242L10.6758 14.8242C10.9101 15.0586 11.29 15.0586 11.5244 14.8242L15.7244 10.6242Z",
45
- fill: "#197BBD"
46
- }),
47
- /*#__PURE__*/ jsx("path", {
48
- fillRule: "evenodd",
49
- clipRule: "evenodd",
50
- d: "M20.4001 12C20.4001 16.6392 16.6393 20.4 12.0001 20.4C7.36091 20.4 3.6001 16.6392 3.6001 12C3.6001 7.36078 7.36091 3.59998 12.0001 3.59998C16.6393 3.59998 20.4001 7.36078 20.4001 12ZM19.2001 12C19.2001 15.9764 15.9765 19.2 12.0001 19.2C8.02365 19.2 4.8001 15.9764 4.8001 12C4.8001 8.02352 8.02365 4.79998 12.0001 4.79998C15.9765 4.79998 19.2001 8.02352 19.2001 12Z",
51
- fill: "#197BBD"
52
- })
53
- ]
54
- }),
55
- /*#__PURE__*/ jsxs("div", {
56
- className: "gp-ml-4",
22
+ return /*#__PURE__*/ jsxs(Fragment, {
23
+ children: [
24
+ /*#__PURE__*/ jsx(Devices, {}),
25
+ /*#__PURE__*/ jsx("div", {
26
+ 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'),
27
+ children: pageType === 'POST_PURCHASE' ? /*#__PURE__*/ jsx("div", {
28
+ className: "gp-flex gp-flex-1 gp-items-center gp-justify-between",
29
+ style: {
30
+ maxWidth: `var(--g-ct-w, 1200px)`,
31
+ ...makeStyleResponsive('ml', defaultMargin),
32
+ ...makeStyleResponsive('mr', defaultMargin)
33
+ },
34
+ children: /*#__PURE__*/ jsxs("div", {
35
+ className: "tablet:gp-items-center gp-flex gp-py-3",
57
36
  children: [
58
- /*#__PURE__*/ jsx("p", {
59
- className: "gp-text-sm",
60
- children: "Order #1001"
61
- }),
62
- /*#__PURE__*/ jsx("p", {
63
- children: "You’ve paid for your order."
37
+ /*#__PURE__*/ jsxs("svg", {
38
+ style: {
39
+ ...makeStyleResponsive('w', sizeCheck),
40
+ ...makeStyleResponsive('h', sizeCheck)
41
+ },
42
+ viewBox: "0 0 24 24",
43
+ fill: "none",
44
+ xmlns: "http://www.w3.org/2000/svg",
45
+ children: [
46
+ /*#__PURE__*/ jsx("path", {
47
+ d: "M15.7244 10.6242C15.9587 10.3899 15.9587 10.01 15.7244 9.77571C15.49 9.5414 15.1101 9.5414 14.8758 9.77571L11.1001 13.5514L9.42436 11.8757C9.19005 11.6414 8.81015 11.6414 8.57583 11.8757C8.34152 12.11 8.34152 12.4899 8.57583 12.7242L10.6758 14.8242C10.9101 15.0586 11.29 15.0586 11.5244 14.8242L15.7244 10.6242Z",
48
+ fill: "#197BBD"
49
+ }),
50
+ /*#__PURE__*/ jsx("path", {
51
+ fillRule: "evenodd",
52
+ clipRule: "evenodd",
53
+ d: "M20.4001 12C20.4001 16.6392 16.6393 20.4 12.0001 20.4C7.36091 20.4 3.6001 16.6392 3.6001 12C3.6001 7.36078 7.36091 3.59998 12.0001 3.59998C16.6393 3.59998 20.4001 7.36078 20.4001 12ZM19.2001 12C19.2001 15.9764 15.9765 19.2 12.0001 19.2C8.02365 19.2 4.8001 15.9764 4.8001 12C4.8001 8.02352 8.02365 4.79998 12.0001 4.79998C15.9765 4.79998 19.2001 8.02352 19.2001 12Z",
54
+ fill: "#197BBD"
55
+ })
56
+ ]
64
57
  }),
65
58
  /*#__PURE__*/ jsxs("div", {
66
- className: "gp-mt-1 gp-flex gp-items-center gp-text-[#197BBD]",
59
+ className: "gp-ml-4",
67
60
  children: [
68
- /*#__PURE__*/ jsx("div", {
61
+ /*#__PURE__*/ jsx("p", {
69
62
  className: "gp-text-sm",
70
- children: "View order confirmation"
63
+ children: "Order #1001"
71
64
  }),
72
- /*#__PURE__*/ jsx("svg", {
73
- width: "12",
74
- height: "13",
75
- viewBox: "0 0 12 13",
76
- fill: "none",
77
- xmlns: "http://www.w3.org/2000/svg",
78
- children: /*#__PURE__*/ jsx("path", {
79
- fillRule: "evenodd",
80
- clipRule: "evenodd",
81
- d: "M4.6318 9.21817C4.45607 9.04244 4.45607 8.75751 4.6318 8.58178L6.7136 6.49998L4.6318 4.41817C4.45607 4.24244 4.45607 3.95751 4.6318 3.78178C4.80754 3.60604 5.09246 3.60604 5.2682 3.78178L7.6682 6.18178C7.84393 6.35751 7.84393 6.64244 7.6682 6.81817L5.2682 9.21817C5.09246 9.39391 4.80754 9.39391 4.6318 9.21817Z",
82
- fill: "#197BBD"
83
- })
65
+ /*#__PURE__*/ jsx("p", {
66
+ children: "You’ve paid for your order."
67
+ }),
68
+ /*#__PURE__*/ jsxs("div", {
69
+ className: "gp-mt-1 gp-flex gp-items-center gp-text-[#197BBD]",
70
+ children: [
71
+ /*#__PURE__*/ jsx("div", {
72
+ className: "gp-text-sm",
73
+ children: "View order confirmation"
74
+ }),
75
+ /*#__PURE__*/ jsx("svg", {
76
+ width: "12",
77
+ height: "13",
78
+ viewBox: "0 0 12 13",
79
+ fill: "none",
80
+ xmlns: "http://www.w3.org/2000/svg",
81
+ children: /*#__PURE__*/ jsx("path", {
82
+ fillRule: "evenodd",
83
+ clipRule: "evenodd",
84
+ d: "M4.6318 9.21817C4.45607 9.04244 4.45607 8.75751 4.6318 8.58178L6.7136 6.49998L4.6318 4.41817C4.45607 4.24244 4.45607 3.95751 4.6318 3.78178C4.80754 3.60604 5.09246 3.60604 5.2682 3.78178L7.6682 6.18178C7.84393 6.35751 7.84393 6.64244 7.6682 6.81817L5.2682 9.21817C5.09246 9.39391 4.80754 9.39391 4.6318 9.21817Z",
85
+ fill: "#197BBD"
86
+ })
87
+ })
88
+ ]
84
89
  })
85
90
  ]
86
91
  })
87
92
  ]
88
93
  })
89
- ]
90
- })
91
- }) : /*#__PURE__*/ jsxs("div", {
92
- className: "gp-flex gp-h-[40px] gp-flex-1 gp-items-center gp-justify-between",
93
- style: {
94
- maxWidth: `var(--g-ct-w)`,
95
- ...makeStyleResponsive('ml', defaultMargin),
96
- ...makeStyleResponsive('mr', defaultMargin)
97
- },
98
- children: [
99
- /*#__PURE__*/ jsxs("svg", {
100
- width: "60",
101
- height: "8",
102
- viewBox: "0 0 60 8",
103
- fill: "none",
104
- xmlns: "http://www.w3.org/2000/svg",
94
+ }) : /*#__PURE__*/ jsxs("div", {
95
+ className: "gp-flex gp-h-[40px] gp-flex-1 gp-items-center gp-justify-between",
96
+ style: {
97
+ maxWidth: `var(--g-ct-w)`,
98
+ ...makeStyleResponsive('ml', defaultMargin),
99
+ ...makeStyleResponsive('mr', defaultMargin)
100
+ },
105
101
  children: [
106
- /*#__PURE__*/ jsx("path", {
107
- d: "M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4C24 6.20914 22.2091 8 20 8H4C1.79086 8 0 6.20914 0 4Z",
108
- fill: "#9E9E9E"
102
+ /*#__PURE__*/ jsxs("svg", {
103
+ width: "60",
104
+ height: "8",
105
+ viewBox: "0 0 60 8",
106
+ fill: "none",
107
+ xmlns: "http://www.w3.org/2000/svg",
108
+ children: [
109
+ /*#__PURE__*/ jsx("path", {
110
+ d: "M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4C24 6.20914 22.2091 8 20 8H4C1.79086 8 0 6.20914 0 4Z",
111
+ fill: "#9E9E9E"
112
+ }),
113
+ /*#__PURE__*/ jsx("path", {
114
+ d: "M28 4C28 1.79086 29.7909 0 32 0H56C58.2091 0 60 1.79086 60 4C60 6.20914 58.2091 8 56 8H32C29.7909 8 28 6.20914 28 4Z",
115
+ fill: headerColor
116
+ })
117
+ ]
109
118
  }),
110
- /*#__PURE__*/ jsx("path", {
111
- d: "M28 4C28 1.79086 29.7909 0 32 0H56C58.2091 0 60 1.79086 60 4C60 6.20914 58.2091 8 56 8H32C29.7909 8 28 6.20914 28 4Z",
112
- fill: headerColor
113
- })
114
- ]
115
- }),
116
- /*#__PURE__*/ jsx(Devices, {}),
117
- !isOriginTemplate && /*#__PURE__*/ jsx("div", {
118
- className: "gp-header gp-invisible gp-absolute gp-left-[8px] gp-flex gp-h-[24px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded gp-bg-[#EEEEEE] gp-p-[4px] hover:gp-bg-[#f4f4f4] group-hover:gp-visible",
119
- children: /*#__PURE__*/ jsxs("div", {
120
- className: "gp-gap-2 gp-flex gp-px-1 gp-h-[24px] gp-items-center gp-justify-center gp-leading-5 gp-text-xs gp-font-medium gp-text-[#212121]",
121
- children: [
122
- /*#__PURE__*/ jsx("span", {
123
- children: /*#__PURE__*/ jsxs("svg", {
124
- width: "14",
125
- height: "14",
126
- viewBox: "0 0 14 14",
127
- fill: "none",
128
- xmlns: "http://www.w3.org/2000/svg",
129
- children: [
130
- /*#__PURE__*/ jsx("path", {
131
- fillRule: "evenodd",
132
- clipRule: "evenodd",
133
- d: "M6.99985 4.08501C5.38983 4.08501 4.08465 5.39019 4.08465 7.00021C4.08465 8.61023 5.38983 9.9154 6.99985 9.9154C8.60987 9.9154 9.91504 8.61023 9.91504 7.00021C9.91504 5.39019 8.60987 4.08501 6.99985 4.08501ZM5.08465 7.00021C5.08465 5.94247 5.94211 5.08501 6.99985 5.08501C8.05758 5.08501 8.91504 5.94247 8.91504 7.00021C8.91504 8.05794 8.05758 8.9154 6.99985 8.9154C5.94211 8.9154 5.08465 8.05794 5.08465 7.00021Z",
134
- fill: "#212121"
135
- }),
136
- /*#__PURE__*/ jsx("path", {
137
- fillRule: "evenodd",
138
- clipRule: "evenodd",
139
- d: "M5.52351 0.00390625C5.28138 0.00390625 5.07405 0.177388 5.03135 0.415715L4.7415 2.03321C4.40346 2.18248 4.08346 2.36419 3.78558 2.57432L2.18557 2.00147C1.95684 1.91958 1.70235 2.01395 1.58232 2.22517L0.122204 4.79451C0.00217064 5.00572 0.0513362 5.27266 0.238747 5.42725L1.50086 6.46836C1.48358 6.64355 1.47474 6.82106 1.47474 7.00047C1.47474 7.17981 1.48357 7.35726 1.50084 7.53238L0.238747 8.57347C0.0513362 8.72806 0.00217064 8.995 0.122203 9.20622L1.58232 11.7756C1.70235 11.9868 1.95684 12.0811 2.18557 11.9993L3.78537 11.4265C4.08332 11.6367 4.40341 11.8185 4.74155 11.9678L5.03135 13.585C5.07405 13.8233 5.28138 13.9968 5.52351 13.9968H8.47647C8.7186 13.9968 8.92593 13.8233 8.96863 13.585L9.25846 11.9676C9.5965 11.8183 9.91649 11.6365 10.2144 11.4264L11.8144 11.9993C12.0431 12.0811 12.2976 11.9868 12.4177 11.7756L13.8778 9.20622C13.9978 8.995 13.9486 8.72806 13.7612 8.57347L12.4988 7.5321C12.516 7.35706 12.5249 7.17971 12.5249 7.00047C12.5249 6.82116 12.516 6.64375 12.4988 6.46864L13.7612 5.42725C13.9486 5.27266 13.9978 5.00572 13.8778 4.79451L12.4177 2.22517C12.2976 2.01395 12.0431 1.91958 11.8144 2.00147L10.2141 2.57441C9.91636 2.36433 9.59645 2.18264 9.25851 2.0334L8.96863 0.415715C8.92593 0.177389 8.7186 0.00390625 8.47647 0.00390625H5.52351ZM5.67747 2.47943L5.94187 1.00391H8.0581L8.32253 2.47958C8.35348 2.6523 8.47271 2.79616 8.63668 2.85863C9.06768 3.02283 9.46674 3.25007 9.82215 3.5288C9.95734 3.63483 10.1375 3.66402 10.2993 3.6061L11.7559 3.08459L12.8007 4.92323L11.6503 5.8722C11.5145 5.98427 11.4476 6.15956 11.4743 6.33366C11.5076 6.55089 11.5249 6.77354 11.5249 7.00047C11.5249 7.22735 11.5076 7.44993 11.4743 7.66711C11.4476 7.8412 11.5145 8.01648 11.6504 8.12855L12.8007 9.07749L11.7559 10.9161L10.2994 10.3947C10.1377 10.3368 9.95752 10.366 9.82233 10.472C9.46686 10.7508 9.06773 10.9781 8.63664 11.1423C8.47267 11.2048 8.35344 11.3487 8.32249 11.5214L8.0581 12.9968H5.94187L5.67752 11.5215C5.64656 11.3488 5.52732 11.2049 5.36333 11.1425C4.93215 10.9782 4.53292 10.7509 4.17738 10.4721C4.04219 10.3661 3.86203 10.3369 3.70027 10.3948L2.24412 10.9161L1.19924 9.07749L2.34929 8.12883C2.48516 8.01675 2.55204 7.84146 2.52535 7.66736C2.49205 7.4501 2.47474 7.22743 2.47474 7.00047C2.47474 6.77345 2.49206 6.55072 2.52538 6.33341C2.55207 6.15931 2.48519 5.984 2.34932 5.87192L1.19924 4.92323L2.24412 3.08459L3.70047 3.60601C3.86221 3.66392 4.04236 3.63474 4.17755 3.52872C4.53304 3.24994 4.93219 3.02269 5.36329 2.85849C5.52728 2.79603 5.64652 2.65216 5.67747 2.47943Z",
140
- fill: "#212121"
119
+ !isOriginTemplate && /*#__PURE__*/ jsx("div", {
120
+ className: "gp-header gp-invisible gp-absolute gp-left-[8px] gp-flex gp-h-[24px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded gp-bg-[#EEEEEE] gp-p-[4px] hover:gp-bg-[#f4f4f4] group-hover:gp-visible",
121
+ children: /*#__PURE__*/ jsxs("div", {
122
+ className: "gp-gap-2 gp-flex gp-px-1 gp-h-[24px] gp-items-center gp-justify-center gp-leading-5 gp-text-xs gp-font-medium gp-text-[#212121]",
123
+ children: [
124
+ /*#__PURE__*/ jsx("span", {
125
+ children: /*#__PURE__*/ jsxs("svg", {
126
+ width: "14",
127
+ height: "14",
128
+ viewBox: "0 0 14 14",
129
+ fill: "none",
130
+ xmlns: "http://www.w3.org/2000/svg",
131
+ children: [
132
+ /*#__PURE__*/ jsx("path", {
133
+ fillRule: "evenodd",
134
+ clipRule: "evenodd",
135
+ d: "M6.99985 4.08501C5.38983 4.08501 4.08465 5.39019 4.08465 7.00021C4.08465 8.61023 5.38983 9.9154 6.99985 9.9154C8.60987 9.9154 9.91504 8.61023 9.91504 7.00021C9.91504 5.39019 8.60987 4.08501 6.99985 4.08501ZM5.08465 7.00021C5.08465 5.94247 5.94211 5.08501 6.99985 5.08501C8.05758 5.08501 8.91504 5.94247 8.91504 7.00021C8.91504 8.05794 8.05758 8.9154 6.99985 8.9154C5.94211 8.9154 5.08465 8.05794 5.08465 7.00021Z",
136
+ fill: "#212121"
137
+ }),
138
+ /*#__PURE__*/ jsx("path", {
139
+ fillRule: "evenodd",
140
+ clipRule: "evenodd",
141
+ d: "M5.52351 0.00390625C5.28138 0.00390625 5.07405 0.177388 5.03135 0.415715L4.7415 2.03321C4.40346 2.18248 4.08346 2.36419 3.78558 2.57432L2.18557 2.00147C1.95684 1.91958 1.70235 2.01395 1.58232 2.22517L0.122204 4.79451C0.00217064 5.00572 0.0513362 5.27266 0.238747 5.42725L1.50086 6.46836C1.48358 6.64355 1.47474 6.82106 1.47474 7.00047C1.47474 7.17981 1.48357 7.35726 1.50084 7.53238L0.238747 8.57347C0.0513362 8.72806 0.00217064 8.995 0.122203 9.20622L1.58232 11.7756C1.70235 11.9868 1.95684 12.0811 2.18557 11.9993L3.78537 11.4265C4.08332 11.6367 4.40341 11.8185 4.74155 11.9678L5.03135 13.585C5.07405 13.8233 5.28138 13.9968 5.52351 13.9968H8.47647C8.7186 13.9968 8.92593 13.8233 8.96863 13.585L9.25846 11.9676C9.5965 11.8183 9.91649 11.6365 10.2144 11.4264L11.8144 11.9993C12.0431 12.0811 12.2976 11.9868 12.4177 11.7756L13.8778 9.20622C13.9978 8.995 13.9486 8.72806 13.7612 8.57347L12.4988 7.5321C12.516 7.35706 12.5249 7.17971 12.5249 7.00047C12.5249 6.82116 12.516 6.64375 12.4988 6.46864L13.7612 5.42725C13.9486 5.27266 13.9978 5.00572 13.8778 4.79451L12.4177 2.22517C12.2976 2.01395 12.0431 1.91958 11.8144 2.00147L10.2141 2.57441C9.91636 2.36433 9.59645 2.18264 9.25851 2.0334L8.96863 0.415715C8.92593 0.177389 8.7186 0.00390625 8.47647 0.00390625H5.52351ZM5.67747 2.47943L5.94187 1.00391H8.0581L8.32253 2.47958C8.35348 2.6523 8.47271 2.79616 8.63668 2.85863C9.06768 3.02283 9.46674 3.25007 9.82215 3.5288C9.95734 3.63483 10.1375 3.66402 10.2993 3.6061L11.7559 3.08459L12.8007 4.92323L11.6503 5.8722C11.5145 5.98427 11.4476 6.15956 11.4743 6.33366C11.5076 6.55089 11.5249 6.77354 11.5249 7.00047C11.5249 7.22735 11.5076 7.44993 11.4743 7.66711C11.4476 7.8412 11.5145 8.01648 11.6504 8.12855L12.8007 9.07749L11.7559 10.9161L10.2994 10.3947C10.1377 10.3368 9.95752 10.366 9.82233 10.472C9.46686 10.7508 9.06773 10.9781 8.63664 11.1423C8.47267 11.2048 8.35344 11.3487 8.32249 11.5214L8.0581 12.9968H5.94187L5.67752 11.5215C5.64656 11.3488 5.52732 11.2049 5.36333 11.1425C4.93215 10.9782 4.53292 10.7509 4.17738 10.4721C4.04219 10.3661 3.86203 10.3369 3.70027 10.3948L2.24412 10.9161L1.19924 9.07749L2.34929 8.12883C2.48516 8.01675 2.55204 7.84146 2.52535 7.66736C2.49205 7.4501 2.47474 7.22743 2.47474 7.00047C2.47474 6.77345 2.49206 6.55072 2.52538 6.33341C2.55207 6.15931 2.48519 5.984 2.34932 5.87192L1.19924 4.92323L2.24412 3.08459L3.70047 3.60601C3.86221 3.66392 4.04236 3.63474 4.17755 3.52872C4.53304 3.24994 4.93219 3.02269 5.36329 2.85849C5.52728 2.79603 5.64652 2.65216 5.67747 2.47943Z",
142
+ fill: "#212121"
143
+ })
144
+ ]
141
145
  })
142
- ]
143
- })
144
- }),
145
- /*#__PURE__*/ jsx("span", {
146
- children: "Header"
146
+ }),
147
+ /*#__PURE__*/ jsx("span", {
148
+ children: "Header"
149
+ })
150
+ ]
147
151
  })
148
- ]
149
- })
150
- }),
151
- /*#__PURE__*/ jsxs("svg", {
152
- width: "80",
153
- height: "8",
154
- viewBox: "0 0 80 8",
155
- fill: "none",
156
- xmlns: "http://www.w3.org/2000/svg",
157
- children: [
158
- /*#__PURE__*/ jsx("path", {
159
- d: "M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4C24 6.20914 22.2091 8 20 8H4C1.79086 8 0 6.20914 0 4Z",
160
- fill: headerColor
161
152
  }),
162
- /*#__PURE__*/ jsx("path", {
163
- d: "M28 4C28 1.79086 29.7909 0 32 0H48C50.2091 0 52 1.79086 52 4C52 6.20914 50.2091 8 48 8H32C29.7909 8 28 6.20914 28 4Z",
164
- fill: headerColor
165
- }),
166
- /*#__PURE__*/ jsx("path", {
167
- d: "M56 4C56 1.79086 57.7909 0 60 0H76C78.2091 0 80 1.79086 80 4C80 6.20914 78.2091 8 76 8H60C57.7909 8 56 6.20914 56 4Z",
168
- fill: headerColor
153
+ /*#__PURE__*/ jsxs("svg", {
154
+ width: "80",
155
+ height: "8",
156
+ viewBox: "0 0 80 8",
157
+ fill: "none",
158
+ xmlns: "http://www.w3.org/2000/svg",
159
+ children: [
160
+ /*#__PURE__*/ jsx("path", {
161
+ d: "M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4C24 6.20914 22.2091 8 20 8H4C1.79086 8 0 6.20914 0 4Z",
162
+ fill: headerColor
163
+ }),
164
+ /*#__PURE__*/ jsx("path", {
165
+ d: "M28 4C28 1.79086 29.7909 0 32 0H48C50.2091 0 52 1.79086 52 4C52 6.20914 50.2091 8 48 8H32C29.7909 8 28 6.20914 28 4Z",
166
+ fill: headerColor
167
+ }),
168
+ /*#__PURE__*/ jsx("path", {
169
+ d: "M56 4C56 1.79086 57.7909 0 60 0H76C78.2091 0 80 1.79086 80 4C80 6.20914 78.2091 8 76 8H60C57.7909 8 56 6.20914 56 4Z",
170
+ fill: headerColor
171
+ })
172
+ ]
169
173
  })
170
174
  ]
171
175
  })
172
- ]
173
- })
176
+ })
177
+ ]
174
178
  });
175
179
  };
176
180
 
package/dist/esm/components/builder/SwitchView.js CHANGED
@@ -10,6 +10,7 @@ const Devices = ()=>{
10
10
  activeId: null
11
11
  };
12
12
  const [deviceState, setDeviceState] = useState(initialDeviceState);
13
+ const [isShowSwitchView, setIsShowSwitchView] = useState(false);
13
14
  const updateDeviceState = useCallback((updates)=>{
14
15
  setDeviceState((prevState)=>({
15
16
  ...prevState,
@@ -19,7 +20,7 @@ const Devices = ()=>{
19
20
  setDeviceState
20
21
  ]);
21
22
  useEffect(()=>{
22
- if (!deviceState.name) {
23
+ if (!deviceState) {
23
24
  const activeDevice = devices[0];
24
25
  if (activeDevice) {
25
26
  updateDeviceState({
@@ -28,9 +29,12 @@ const Devices = ()=>{
28
29
  activeId: activeDevice.id
29
30
  });
30
31
  }
32
+ setIsShowSwitchView(false);
33
+ } else {
34
+ setIsShowSwitchView(deviceState.width > 0 && deviceState.width <= 1024);
31
35
  }
32
36
  }, [
33
- deviceState.name,
37
+ deviceState,
34
38
  updateDeviceState
35
39
  ]);
36
40
  const onHandleClick = (id)=>{
@@ -89,19 +93,17 @@ const Devices = ()=>{
89
93
  }, [
90
94
  onResizePreviewScreen
91
95
  ]);
92
- const isActiveDevice = (id)=>{
93
- return id === deviceState.activeId;
96
+ const isActiveDevice = (device)=>{
97
+ return device.id === deviceState.activeId || deviceState.name === device.name;
94
98
  };
95
99
  const handleToggleDropdown = ()=>setIsOpen(!isOpen);
96
- if (deviceState.width > 1024) return null;
97
- return /*#__PURE__*/ jsx(Fragment, {
100
+ if (isShowSwitchView) return /*#__PURE__*/ jsx(Fragment, {
98
101
  children: /*#__PURE__*/ jsxs("div", {
99
102
  ref: switchViewRef,
100
- className: `gp-switch-view gp-absolute gp-top-2 gp-transform -gp-translate-x-1/2 gp-left-1/2 gp-z-50 devices-selector gp-bg-[#F4F4F4] gp-gap-2 gp-rounded-md gp-px-2 gp-py-1 hover:gp-bg-[#E2E2E2] gp-items-center gp-justify-center gp-cursor-pointer gp-leading-5 gp-text-xs gp-font-medium gp-text-[#212121]
101
- ${isOpen ? 'gp-border-[1px] gp-border-[#3C67FF]' : ''}`,
103
+ className: `gp-switch-view gp-font-sans gp-flex gp-h-[40px] gp-absolute gp-top-[2px] gp-transform -gp-translate-x-1/2 gp-left-1/2 gp-gap-2 gp-items-center gp-justify-center gp-cursor-pointer ${isOpen ? 'gp-z-50' : 'gp-z-1'}`,
102
104
  children: [
103
105
  /*#__PURE__*/ jsxs("div", {
104
- className: "gp-flex gp-gap-1 gp-justify-between gp-items-center gp-min-w-[176px]",
106
+ className: `gp-flex gp-gap-1 gp-py-1 gp-px-2 gp-transform -gp-translate-y-[2px] gp-border-[1px] gp-justify-between gp-items-center gp-min-w-[194px] gp-bg-[#F4F4F4] hover:gp-bg-[#E2E2E2] gp-rounded-md gp-leading-5 gp-text-xs gp-font-medium gp-text-[#212121] ${isOpen ? 'gp-border-[#3C67FF]' : 'gp-border-transparent'}`,
105
107
  onClick: (e)=>{
106
108
  e.preventDefault();
107
109
  handleToggleDropdown();
@@ -134,7 +136,7 @@ const Devices = ()=>{
134
136
  ]
135
137
  }),
136
138
  /*#__PURE__*/ jsx("div", {
137
- className: `gp-absolute gp-top-8 gp-transform -gp-translate-x-1/2 gp-left-1/2 gp-bg-[#212121] gp-rounded-xl gp-p-2 gp-text-[#F9F9F9] gp-w-[176px] gp-z-50 ${!isOpen ? 'gp-hidden' : ''}`,
139
+ className: `gp-absolute gp-top-9 gp-transform -gp-translate-x-1/2 gp-left-1/2 gp-bg-[#212121] gp-rounded-xl gp-p-2 gp-text-[#F9F9F9] gp-w-[176px] gp-z-50 ${!isOpen ? 'gp-hidden' : ''}`,
138
140
  children: devices.map((device)=>/*#__PURE__*/ jsx("div", {
139
141
  className: "gp-p-2 hover:gp-bg-[#3E3E3E] gp-rounded-md",
140
142
  onClick: (e)=>{
@@ -148,7 +150,7 @@ const Devices = ()=>{
148
150
  children: [
149
151
  /*#__PURE__*/ jsx("span", {
150
152
  className: "gp-min-w-[16px]",
151
- children: isActiveDevice(device.id) && /*#__PURE__*/ jsx("svg", {
153
+ children: isActiveDevice(device) && /*#__PURE__*/ jsx("svg", {
152
154
  width: "16",
153
155
  height: "17",
154
156
  viewBox: "0 0 16 17",
package/dist/esm/pages/builder.js CHANGED
@@ -11,6 +11,7 @@ import PopupManager from '../components/builder/PopupManager.js';
11
11
  import ImageToLayout from '../components/image-to-layout/ImageToLayout.js';
12
12
  import AddSectionImageToLayout from '../components/image-to-layout/AddSectionImageToLayout.js';
13
13
  import Toolbar from '../components/builder/Toolbar.js';
14
+ import Devices from '../components/builder/SwitchView.js';
14
15
 
15
16
  const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar })=>{
16
17
  const [loadSuccess, setLoadSuccess] = useState(false);
@@ -67,7 +68,8 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
67
68
  className: "builder gp-z-1 gp-relative",
68
69
  children: [
69
70
  !hiddenToolbar && (isDisableHeaderFooter() ? /*#__PURE__*/ jsx("div", {
70
- className: "h-[40px] bg-[#f4f4f4]"
71
+ className: "gp-h-[40px] bg-[#f4f4f4]",
72
+ children: /*#__PURE__*/ jsx(Devices, {})
71
73
  }) : /*#__PURE__*/ jsx(Header, {
72
74
  pageType: pageType
73
75
  })),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.42.0-staging.16",
3
+ "version": "1.42.0-staging.18",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -26,10 +26,10 @@
26
26
  "next": "latest"
27
27
  },
28
28
  "devDependencies": {
29
- "@gem-sdk/core": "1.42.0-staging.11",
30
- "@gem-sdk/plugin-cookie-bar": "1.42.0-staging.11",
31
- "@gem-sdk/plugin-quick-view": "1.42.0-staging.11",
32
- "@gem-sdk/plugin-sticky-add-to-cart": "1.42.0-staging.11"
29
+ "@gem-sdk/core": "1.42.0-staging.18",
30
+ "@gem-sdk/plugin-cookie-bar": "1.42.0-staging.18",
31
+ "@gem-sdk/plugin-quick-view": "1.42.0-staging.18",
32
+ "@gem-sdk/plugin-sticky-add-to-cart": "1.42.0-staging.18"
33
33
  },
34
34
  "peerDependencies": {
35
35
  "next": ">=13"