@gem-sdk/pages 1.15.9 → 1.17.3

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 (11) hide show
  1. package/dist/cjs/components/Footer.js +19 -35
  2. package/dist/cjs/components/Header.js +17 -31
  3. package/dist/cjs/components/image-to-layout/AddSectionImageToLayout.js +6 -16
  4. package/dist/cjs/components/image-to-layout/ImageToLayout.js +1 -16
  5. package/dist/cjs/components/image-to-layout/ImageToLayoutInput.js +6 -14
  6. package/dist/esm/components/Footer.js +19 -35
  7. package/dist/esm/components/Header.js +17 -31
  8. package/dist/esm/components/image-to-layout/AddSectionImageToLayout.js +6 -16
  9. package/dist/esm/components/image-to-layout/ImageToLayout.js +2 -17
  10. package/dist/esm/components/image-to-layout/ImageToLayoutInput.js +6 -14
  11. package/package.json +2 -2
package/dist/cjs/components/Footer.js CHANGED
@@ -11,6 +11,7 @@ const defaultMargin = {
11
11
  tablet: '40px',
12
12
  mobile: '40px'
13
13
  };
14
+ const FOOTER_OFF_COLOR = '#F4F4F4';
14
15
  const Footer = ()=>{
15
16
  const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
16
17
  const [shouldFixed, setShouldFixed] = react.useState(false);
@@ -37,7 +38,6 @@ const Footer = ()=>{
37
38
  ]);
38
39
  return /*#__PURE__*/ jsxRuntime.jsx("div", {
39
40
  className: core.cls('gp-footer-container border-1 group flex h-[48px] justify-center border-y border-[#EEEEEE] bg-white font-sans', {
40
- hidden: !layoutSetting?.showFooter,
41
41
  'fixed bottom-0 w-full': shouldFixed
42
42
  }),
43
43
  children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
@@ -55,25 +55,17 @@ const Footer = ()=>{
55
55
  fill: "none",
56
56
  xmlns: "http://www.w3.org/2000/svg",
57
57
  children: [
58
- /*#__PURE__*/ jsxRuntime.jsx("rect", {
59
- width: "56",
60
- height: "8",
61
- rx: "3",
62
- fill: "#E1E1E1"
58
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
59
+ d: "M0 4C0 1.79086 1.79086 0 4 0H52C54.2091 0 56 1.79086 56 4C56 6.20914 54.2091 8 52 8H4C1.79086 8 0 6.20914 0 4Z",
60
+ fill: layoutSetting?.showFooter ? '#D6D6D6' : FOOTER_OFF_COLOR
63
61
  }),
64
- /*#__PURE__*/ jsxRuntime.jsx("rect", {
65
- x: "68",
66
- width: "56",
67
- height: "8",
68
- rx: "3",
69
- fill: "#E1E1E1"
62
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
63
+ d: "M68 4C68 1.79086 69.7909 0 72 0H120C122.209 0 124 1.79086 124 4C124 6.20914 122.209 8 120 8H72C69.7909 8 68 6.20914 68 4Z",
64
+ fill: layoutSetting?.showFooter ? '#D6D6D6' : FOOTER_OFF_COLOR
70
65
  }),
71
- /*#__PURE__*/ jsxRuntime.jsx("rect", {
72
- x: "136",
73
- width: "56",
74
- height: "8",
75
- rx: "3",
76
- fill: "#E1E1E1"
66
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
67
+ d: "M136 4C136 1.79086 137.791 0 140 0H188C190.209 0 192 1.79086 192 4C192 6.20914 190.209 8 188 8H140C137.791 8 136 6.20914 136 4Z",
68
+ fill: layoutSetting?.showFooter ? '#D6D6D6' : FOOTER_OFF_COLOR
77
69
  })
78
70
  ]
79
71
  }),
@@ -111,25 +103,17 @@ const Footer = ()=>{
111
103
  fill: "none",
112
104
  xmlns: "http://www.w3.org/2000/svg",
113
105
  children: [
114
- /*#__PURE__*/ jsxRuntime.jsx("rect", {
115
- width: "22",
116
- height: "8",
117
- rx: "3",
118
- fill: "#E1E1E1"
106
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
107
+ d: "M0 4C0 1.79086 1.79086 0 4 0H18C20.2091 0 22 1.79086 22 4C22 6.20914 20.2091 8 18 8H4C1.79086 8 0 6.20914 0 4Z",
108
+ fill: layoutSetting?.showFooter ? '#D6D6D6' : FOOTER_OFF_COLOR
119
109
  }),
120
- /*#__PURE__*/ jsxRuntime.jsx("rect", {
121
- x: "30",
122
- width: "22",
123
- height: "8",
124
- rx: "3",
125
- fill: "#E1E1E1"
110
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
111
+ d: "M30 4C30 1.79086 31.7909 0 34 0H48C50.2091 0 52 1.79086 52 4C52 6.20914 50.2091 8 48 8H34C31.7909 8 30 6.20914 30 4Z",
112
+ fill: layoutSetting?.showFooter ? '#D6D6D6' : FOOTER_OFF_COLOR
126
113
  }),
127
- /*#__PURE__*/ jsxRuntime.jsx("rect", {
128
- x: "60",
129
- width: "22",
130
- height: "8",
131
- rx: "3",
132
- fill: "#E1E1E1"
114
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
115
+ d: "M60 4C60 1.79086 61.7909 0 64 0H78C80.2091 0 82 1.79086 82 4C82 6.20914 80.2091 8 78 8H64C61.7909 8 60 6.20914 60 4Z",
116
+ fill: layoutSetting?.showFooter ? '#D6D6D6' : FOOTER_OFF_COLOR
133
117
  })
134
118
  ]
135
119
  })
package/dist/cjs/components/Header.js CHANGED
@@ -10,12 +10,11 @@ const defaultMargin = {
10
10
  tablet: '40px',
11
11
  mobile: '40px'
12
12
  };
13
+ const HEADER_OFF_COLOR = '#F4F4F4';
13
14
  const Header = ()=>{
14
15
  const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
15
16
  return /*#__PURE__*/ jsxRuntime.jsx("div", {
16
- className: core.cls('gp-header-container border-1 group relative flex justify-center border-b border-[#EEEEEE] font-sans', {
17
- hidden: !layoutSetting?.showHeader
18
- }),
17
+ className: core.cls('gp-header-container border-1 group relative flex justify-center border-b border-[#EEEEEE] font-sans'),
19
18
  children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
20
19
  className: "flex h-[40px] flex-1 items-center justify-between",
21
20
  style: {
@@ -31,18 +30,13 @@ const Header = ()=>{
31
30
  fill: "none",
32
31
  xmlns: "http://www.w3.org/2000/svg",
33
32
  children: [
34
- /*#__PURE__*/ jsxRuntime.jsx("rect", {
35
- width: "22",
36
- height: "8",
37
- rx: "3",
38
- fill: "#9E9E9E"
33
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
34
+ d: "M0 4C0 1.79086 1.79086 0 4 0H18C20.2091 0 22 1.79086 22 4C22 6.20914 20.2091 8 18 8H4C1.79086 8 0 6.20914 0 4Z",
35
+ fill: layoutSetting?.showHeader ? '#9E9E9E' : HEADER_OFF_COLOR
39
36
  }),
40
- /*#__PURE__*/ jsxRuntime.jsx("rect", {
41
- x: "28",
42
- width: "56",
43
- height: "8",
44
- rx: "3",
45
- fill: "#E1E1E1"
37
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
38
+ d: "M28 4C28 1.79086 29.7909 0 32 0H80C82.2091 0 84 1.79086 84 4C84 6.20914 82.2091 8 80 8H32C29.7909 8 28 6.20914 28 4Z",
39
+ fill: layoutSetting?.showHeader ? '#D6D6D6' : HEADER_OFF_COLOR
46
40
  })
47
41
  ]
48
42
  }),
@@ -80,25 +74,17 @@ const Header = ()=>{
80
74
  fill: "none",
81
75
  xmlns: "http://www.w3.org/2000/svg",
82
76
  children: [
83
- /*#__PURE__*/ jsxRuntime.jsx("rect", {
84
- width: "56",
85
- height: "8",
86
- rx: "3",
87
- fill: "#E1E1E1"
77
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
78
+ d: "M0 4C0 1.79086 1.79086 0 4 0H52C54.2091 0 56 1.79086 56 4C56 6.20914 54.2091 8 52 8H4C1.79086 8 0 6.20914 0 4Z",
79
+ fill: layoutSetting?.showHeader ? '#D6D6D6' : HEADER_OFF_COLOR
88
80
  }),
89
- /*#__PURE__*/ jsxRuntime.jsx("rect", {
90
- x: "68",
91
- width: "56",
92
- height: "8",
93
- rx: "3",
94
- fill: "#E1E1E1"
81
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
82
+ d: "M68 4C68 1.79086 69.7909 0 72 0H120C122.209 0 124 1.79086 124 4C124 6.20914 122.209 8 120 8H72C69.7909 8 68 6.20914 68 4Z",
83
+ fill: layoutSetting?.showHeader ? '#D6D6D6' : HEADER_OFF_COLOR
95
84
  }),
96
- /*#__PURE__*/ jsxRuntime.jsx("rect", {
97
- x: "136",
98
- width: "56",
99
- height: "8",
100
- rx: "3",
101
- fill: "#E1E1E1"
85
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
86
+ d: "M136 4C136 1.79086 137.791 0 140 0H188C190.209 0 192 1.79086 192 4C192 6.20914 190.209 8 188 8H140C137.791 8 136 6.20914 136 4Z",
87
+ fill: layoutSetting?.showHeader ? '#D6D6D6' : HEADER_OFF_COLOR
102
88
  })
103
89
  ]
104
90
  })
package/dist/cjs/components/image-to-layout/AddSectionImageToLayout.js CHANGED
@@ -83,10 +83,8 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
83
83
  children: "Add section"
84
84
  }),
85
85
  ACTIONS_DATA.map((action, index)=>{
86
- const CustomTag = index == 2 ? `label` : `div`;
87
- return /*#__PURE__*/ jsxRuntime.jsxs(CustomTag, {
86
+ return /*#__PURE__*/ jsxRuntime.jsxs("div", {
88
87
  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'}`,
89
- htmlFor: "gp-add-section-bottom-from-select-image",
90
88
  id: action.id,
91
89
  onClick: ()=>onClick(index),
92
90
  "aria-hidden": true,
@@ -133,20 +131,12 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
133
131
  })
134
132
  ]
135
133
  }),
136
- /*#__PURE__*/ jsxRuntime.jsxs("div", {
134
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
137
135
  className: "flex items-center ",
138
- children: [
139
- /*#__PURE__*/ jsxRuntime.jsx("span", {
140
- className: "mr-[3px] text-center text-[12px] font-normal text-[#676767]",
141
- children: action.content
142
- }),
143
- action.id === 'gps-add-section-bottom-from-image' && /*#__PURE__*/ jsxRuntime.jsx("input", {
144
- id: "gp-add-section-bottom-from-select-image",
145
- className: "rounded-medium z-2 absolute left-0 top-0 hidden h-full w-full cursor-pointer opacity-0 outline-none",
146
- type: "file",
147
- accept: ".png, .jpg, .jpeg"
148
- })
149
- ]
136
+ children: /*#__PURE__*/ jsxRuntime.jsx("span", {
137
+ className: "mr-[3px] text-center text-[12px] font-normal text-[#676767]",
138
+ children: action.content
139
+ })
150
140
  })
151
141
  ]
152
142
  }, action.id);
package/dist/cjs/components/image-to-layout/ImageToLayout.js CHANGED
@@ -3,7 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
- var react = require('react');
7
6
  var core = require('@gem-sdk/core');
8
7
  var DropElement = require('./DropElement.js');
9
8
  var ImageToLayoutInput = require('./ImageToLayoutInput.js');
@@ -11,22 +10,8 @@ var ImageToLayoutInput = require('./ImageToLayoutInput.js');
11
10
  const HEADER_HEIGHT = 40;
12
11
  const FOOTER_HEIGHT = 50;
13
12
  const ImageToLayout = ({ editorImageToLayout })=>{
14
- const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
15
13
  const totalSection = core.useBuilderPreviewStore((state)=>state.state.ROOT.childrens?.length);
16
14
  const loaded = core.useBuilderPreviewStore((state)=>state.loaded);
17
- const offset = react.useMemo(()=>{
18
- let result = 0;
19
- if (layoutSetting?.showFooter) {
20
- result += FOOTER_HEIGHT;
21
- }
22
- if (layoutSetting?.showHeader) {
23
- result += HEADER_HEIGHT;
24
- }
25
- return result;
26
- }, [
27
- layoutSetting?.showHeader,
28
- layoutSetting?.showFooter
29
- ]);
30
15
  if (!loaded) {
31
16
  return null;
32
17
  }
@@ -39,7 +24,7 @@ const ImageToLayout = ({ editorImageToLayout })=>{
39
24
  flex: editorImageToLayout && !totalSection
40
25
  }),
41
26
  style: {
42
- height: `calc(100vh - ${offset}px)`
27
+ height: `calc(100vh - ${FOOTER_HEIGHT + HEADER_HEIGHT}px)`
43
28
  },
44
29
  children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
45
30
  id: "gps-gem-ai-input-wrapper",
package/dist/cjs/components/image-to-layout/ImageToLayoutInput.js CHANGED
@@ -178,21 +178,13 @@ const ImageToLayoutInput = ({ totalSection })=>{
178
178
  children: "Please use an valid URL to generate"
179
179
  })
180
180
  }),
181
- /*#__PURE__*/ jsxRuntime.jsxs("div", {
181
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
182
182
  className: "mt-4 flex items-center text-xs",
183
- children: [
184
- /*#__PURE__*/ jsxRuntime.jsx("label", {
185
- htmlFor: "gp-img-to-layout-gallery-btn",
186
- className: " relative mx-[5px] cursor-pointer font-medium text-[#3C67FF]",
187
- children: "Upload your designed image"
188
- }),
189
- /*#__PURE__*/ jsxRuntime.jsx("input", {
190
- id: "gp-img-to-layout-gallery-btn",
191
- className: "rounded-medium z-2 absolute hidden h-full w-full cursor-pointer opacity-0 outline-none",
192
- type: "file",
193
- accept: ".png, .jpg, .jpeg"
194
- })
195
- ]
183
+ children: /*#__PURE__*/ jsxRuntime.jsx("div", {
184
+ id: "gp-img-to-layout-gallery-btn",
185
+ className: " relative mx-[5px] cursor-pointer font-medium text-[#3C67FF]",
186
+ children: "Upload your designed image"
187
+ })
196
188
  })
197
189
  ]
198
190
  });
package/dist/esm/components/Footer.js CHANGED
@@ -7,6 +7,7 @@ const defaultMargin = {
7
7
  tablet: '40px',
8
8
  mobile: '40px'
9
9
  };
10
+ const FOOTER_OFF_COLOR = '#F4F4F4';
10
11
  const Footer = ()=>{
11
12
  const layoutSetting = useShopStore((s)=>s.layoutSettings);
12
13
  const [shouldFixed, setShouldFixed] = useState(false);
@@ -33,7 +34,6 @@ const Footer = ()=>{
33
34
  ]);
34
35
  return /*#__PURE__*/ jsx("div", {
35
36
  className: cls('gp-footer-container border-1 group flex h-[48px] justify-center border-y border-[#EEEEEE] bg-white font-sans', {
36
- hidden: !layoutSetting?.showFooter,
37
37
  'fixed bottom-0 w-full': shouldFixed
38
38
  }),
39
39
  children: /*#__PURE__*/ jsxs("div", {
@@ -51,25 +51,17 @@ const Footer = ()=>{
51
51
  fill: "none",
52
52
  xmlns: "http://www.w3.org/2000/svg",
53
53
  children: [
54
- /*#__PURE__*/ jsx("rect", {
55
- width: "56",
56
- height: "8",
57
- rx: "3",
58
- fill: "#E1E1E1"
54
+ /*#__PURE__*/ jsx("path", {
55
+ d: "M0 4C0 1.79086 1.79086 0 4 0H52C54.2091 0 56 1.79086 56 4C56 6.20914 54.2091 8 52 8H4C1.79086 8 0 6.20914 0 4Z",
56
+ fill: layoutSetting?.showFooter ? '#D6D6D6' : FOOTER_OFF_COLOR
59
57
  }),
60
- /*#__PURE__*/ jsx("rect", {
61
- x: "68",
62
- width: "56",
63
- height: "8",
64
- rx: "3",
65
- fill: "#E1E1E1"
58
+ /*#__PURE__*/ jsx("path", {
59
+ d: "M68 4C68 1.79086 69.7909 0 72 0H120C122.209 0 124 1.79086 124 4C124 6.20914 122.209 8 120 8H72C69.7909 8 68 6.20914 68 4Z",
60
+ fill: layoutSetting?.showFooter ? '#D6D6D6' : FOOTER_OFF_COLOR
66
61
  }),
67
- /*#__PURE__*/ jsx("rect", {
68
- x: "136",
69
- width: "56",
70
- height: "8",
71
- rx: "3",
72
- fill: "#E1E1E1"
62
+ /*#__PURE__*/ jsx("path", {
63
+ d: "M136 4C136 1.79086 137.791 0 140 0H188C190.209 0 192 1.79086 192 4C192 6.20914 190.209 8 188 8H140C137.791 8 136 6.20914 136 4Z",
64
+ fill: layoutSetting?.showFooter ? '#D6D6D6' : FOOTER_OFF_COLOR
73
65
  })
74
66
  ]
75
67
  }),
@@ -107,25 +99,17 @@ const Footer = ()=>{
107
99
  fill: "none",
108
100
  xmlns: "http://www.w3.org/2000/svg",
109
101
  children: [
110
- /*#__PURE__*/ jsx("rect", {
111
- width: "22",
112
- height: "8",
113
- rx: "3",
114
- fill: "#E1E1E1"
102
+ /*#__PURE__*/ jsx("path", {
103
+ d: "M0 4C0 1.79086 1.79086 0 4 0H18C20.2091 0 22 1.79086 22 4C22 6.20914 20.2091 8 18 8H4C1.79086 8 0 6.20914 0 4Z",
104
+ fill: layoutSetting?.showFooter ? '#D6D6D6' : FOOTER_OFF_COLOR
115
105
  }),
116
- /*#__PURE__*/ jsx("rect", {
117
- x: "30",
118
- width: "22",
119
- height: "8",
120
- rx: "3",
121
- fill: "#E1E1E1"
106
+ /*#__PURE__*/ jsx("path", {
107
+ d: "M30 4C30 1.79086 31.7909 0 34 0H48C50.2091 0 52 1.79086 52 4C52 6.20914 50.2091 8 48 8H34C31.7909 8 30 6.20914 30 4Z",
108
+ fill: layoutSetting?.showFooter ? '#D6D6D6' : FOOTER_OFF_COLOR
122
109
  }),
123
- /*#__PURE__*/ jsx("rect", {
124
- x: "60",
125
- width: "22",
126
- height: "8",
127
- rx: "3",
128
- fill: "#E1E1E1"
110
+ /*#__PURE__*/ jsx("path", {
111
+ d: "M60 4C60 1.79086 61.7909 0 64 0H78C80.2091 0 82 1.79086 82 4C82 6.20914 80.2091 8 78 8H64C61.7909 8 60 6.20914 60 4Z",
112
+ fill: layoutSetting?.showFooter ? '#D6D6D6' : FOOTER_OFF_COLOR
129
113
  })
130
114
  ]
131
115
  })
package/dist/esm/components/Header.js CHANGED
@@ -6,12 +6,11 @@ const defaultMargin = {
6
6
  tablet: '40px',
7
7
  mobile: '40px'
8
8
  };
9
+ const HEADER_OFF_COLOR = '#F4F4F4';
9
10
  const Header = ()=>{
10
11
  const layoutSetting = useShopStore((s)=>s.layoutSettings);
11
12
  return /*#__PURE__*/ jsx("div", {
12
- className: cls('gp-header-container border-1 group relative flex justify-center border-b border-[#EEEEEE] font-sans', {
13
- hidden: !layoutSetting?.showHeader
14
- }),
13
+ className: cls('gp-header-container border-1 group relative flex justify-center border-b border-[#EEEEEE] font-sans'),
15
14
  children: /*#__PURE__*/ jsxs("div", {
16
15
  className: "flex h-[40px] flex-1 items-center justify-between",
17
16
  style: {
@@ -27,18 +26,13 @@ const Header = ()=>{
27
26
  fill: "none",
28
27
  xmlns: "http://www.w3.org/2000/svg",
29
28
  children: [
30
- /*#__PURE__*/ jsx("rect", {
31
- width: "22",
32
- height: "8",
33
- rx: "3",
34
- fill: "#9E9E9E"
29
+ /*#__PURE__*/ jsx("path", {
30
+ d: "M0 4C0 1.79086 1.79086 0 4 0H18C20.2091 0 22 1.79086 22 4C22 6.20914 20.2091 8 18 8H4C1.79086 8 0 6.20914 0 4Z",
31
+ fill: layoutSetting?.showHeader ? '#9E9E9E' : HEADER_OFF_COLOR
35
32
  }),
36
- /*#__PURE__*/ jsx("rect", {
37
- x: "28",
38
- width: "56",
39
- height: "8",
40
- rx: "3",
41
- fill: "#E1E1E1"
33
+ /*#__PURE__*/ jsx("path", {
34
+ d: "M28 4C28 1.79086 29.7909 0 32 0H80C82.2091 0 84 1.79086 84 4C84 6.20914 82.2091 8 80 8H32C29.7909 8 28 6.20914 28 4Z",
35
+ fill: layoutSetting?.showHeader ? '#D6D6D6' : HEADER_OFF_COLOR
42
36
  })
43
37
  ]
44
38
  }),
@@ -76,25 +70,17 @@ const Header = ()=>{
76
70
  fill: "none",
77
71
  xmlns: "http://www.w3.org/2000/svg",
78
72
  children: [
79
- /*#__PURE__*/ jsx("rect", {
80
- width: "56",
81
- height: "8",
82
- rx: "3",
83
- fill: "#E1E1E1"
73
+ /*#__PURE__*/ jsx("path", {
74
+ d: "M0 4C0 1.79086 1.79086 0 4 0H52C54.2091 0 56 1.79086 56 4C56 6.20914 54.2091 8 52 8H4C1.79086 8 0 6.20914 0 4Z",
75
+ fill: layoutSetting?.showHeader ? '#D6D6D6' : HEADER_OFF_COLOR
84
76
  }),
85
- /*#__PURE__*/ jsx("rect", {
86
- x: "68",
87
- width: "56",
88
- height: "8",
89
- rx: "3",
90
- fill: "#E1E1E1"
77
+ /*#__PURE__*/ jsx("path", {
78
+ d: "M68 4C68 1.79086 69.7909 0 72 0H120C122.209 0 124 1.79086 124 4C124 6.20914 122.209 8 120 8H72C69.7909 8 68 6.20914 68 4Z",
79
+ fill: layoutSetting?.showHeader ? '#D6D6D6' : HEADER_OFF_COLOR
91
80
  }),
92
- /*#__PURE__*/ jsx("rect", {
93
- x: "136",
94
- width: "56",
95
- height: "8",
96
- rx: "3",
97
- fill: "#E1E1E1"
81
+ /*#__PURE__*/ jsx("path", {
82
+ d: "M136 4C136 1.79086 137.791 0 140 0H188C190.209 0 192 1.79086 192 4C192 6.20914 190.209 8 188 8H140C137.791 8 136 6.20914 136 4Z",
83
+ fill: layoutSetting?.showHeader ? '#D6D6D6' : HEADER_OFF_COLOR
98
84
  })
99
85
  ]
100
86
  })
package/dist/esm/components/image-to-layout/AddSectionImageToLayout.js CHANGED
@@ -79,10 +79,8 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
79
79
  children: "Add section"
80
80
  }),
81
81
  ACTIONS_DATA.map((action, index)=>{
82
- const CustomTag = index == 2 ? `label` : `div`;
83
- return /*#__PURE__*/ jsxs(CustomTag, {
82
+ return /*#__PURE__*/ jsxs("div", {
84
83
  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'}`,
85
- htmlFor: "gp-add-section-bottom-from-select-image",
86
84
  id: action.id,
87
85
  onClick: ()=>onClick(index),
88
86
  "aria-hidden": true,
@@ -129,20 +127,12 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
129
127
  })
130
128
  ]
131
129
  }),
132
- /*#__PURE__*/ jsxs("div", {
130
+ /*#__PURE__*/ jsx("div", {
133
131
  className: "flex items-center ",
134
- children: [
135
- /*#__PURE__*/ jsx("span", {
136
- className: "mr-[3px] text-center text-[12px] font-normal text-[#676767]",
137
- children: action.content
138
- }),
139
- action.id === 'gps-add-section-bottom-from-image' && /*#__PURE__*/ jsx("input", {
140
- id: "gp-add-section-bottom-from-select-image",
141
- className: "rounded-medium z-2 absolute left-0 top-0 hidden h-full w-full cursor-pointer opacity-0 outline-none",
142
- type: "file",
143
- accept: ".png, .jpg, .jpeg"
144
- })
145
- ]
132
+ children: /*#__PURE__*/ jsx("span", {
133
+ className: "mr-[3px] text-center text-[12px] font-normal text-[#676767]",
134
+ children: action.content
135
+ })
146
136
  })
147
137
  ]
148
138
  }, action.id);
package/dist/esm/components/image-to-layout/ImageToLayout.js CHANGED
@@ -1,28 +1,13 @@
1
1
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
- import { useMemo } from 'react';
3
- import { useShopStore, useBuilderPreviewStore, cls } from '@gem-sdk/core';
2
+ import { useBuilderPreviewStore, cls } from '@gem-sdk/core';
4
3
  import { DropElement } from './DropElement.js';
5
4
  import { ImageToLayoutInput } from './ImageToLayoutInput.js';
6
5
 
7
6
  const HEADER_HEIGHT = 40;
8
7
  const FOOTER_HEIGHT = 50;
9
8
  const ImageToLayout = ({ editorImageToLayout })=>{
10
- const layoutSetting = useShopStore((s)=>s.layoutSettings);
11
9
  const totalSection = useBuilderPreviewStore((state)=>state.state.ROOT.childrens?.length);
12
10
  const loaded = useBuilderPreviewStore((state)=>state.loaded);
13
- const offset = useMemo(()=>{
14
- let result = 0;
15
- if (layoutSetting?.showFooter) {
16
- result += FOOTER_HEIGHT;
17
- }
18
- if (layoutSetting?.showHeader) {
19
- result += HEADER_HEIGHT;
20
- }
21
- return result;
22
- }, [
23
- layoutSetting?.showHeader,
24
- layoutSetting?.showFooter
25
- ]);
26
11
  if (!loaded) {
27
12
  return null;
28
13
  }
@@ -35,7 +20,7 @@ const ImageToLayout = ({ editorImageToLayout })=>{
35
20
  flex: editorImageToLayout && !totalSection
36
21
  }),
37
22
  style: {
38
- height: `calc(100vh - ${offset}px)`
23
+ height: `calc(100vh - ${FOOTER_HEIGHT + HEADER_HEIGHT}px)`
39
24
  },
40
25
  children: /*#__PURE__*/ jsxs("div", {
41
26
  id: "gps-gem-ai-input-wrapper",
package/dist/esm/components/image-to-layout/ImageToLayoutInput.js CHANGED
@@ -176,21 +176,13 @@ const ImageToLayoutInput = ({ totalSection })=>{
176
176
  children: "Please use an valid URL to generate"
177
177
  })
178
178
  }),
179
- /*#__PURE__*/ jsxs("div", {
179
+ /*#__PURE__*/ jsx("div", {
180
180
  className: "mt-4 flex items-center text-xs",
181
- children: [
182
- /*#__PURE__*/ jsx("label", {
183
- htmlFor: "gp-img-to-layout-gallery-btn",
184
- className: " relative mx-[5px] cursor-pointer font-medium text-[#3C67FF]",
185
- children: "Upload your designed image"
186
- }),
187
- /*#__PURE__*/ jsx("input", {
188
- id: "gp-img-to-layout-gallery-btn",
189
- className: "rounded-medium z-2 absolute hidden h-full w-full cursor-pointer opacity-0 outline-none",
190
- type: "file",
191
- accept: ".png, .jpg, .jpeg"
192
- })
193
- ]
181
+ children: /*#__PURE__*/ jsx("div", {
182
+ id: "gp-img-to-layout-gallery-btn",
183
+ className: " relative mx-[5px] cursor-pointer font-medium text-[#3C67FF]",
184
+ children: "Upload your designed image"
185
+ })
194
186
  })
195
187
  ]
196
188
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.15.9",
3
+ "version": "1.17.3",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
25
25
  "next-seo": "^6.0.0"
26
26
  },
27
27
  "devDependencies": {
28
- "@gem-sdk/core": "1.15.9",
28
+ "@gem-sdk/core": "1.16.2",
29
29
  "@gem-sdk/plugin-cookie-bar": "*",
30
30
  "@gem-sdk/plugin-quick-view": "*",
31
31
  "@gem-sdk/plugin-sticky-add-to-cart": "*"