@gem-sdk/pages 1.29.11 → 1.33.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 (9) hide show
  1. package/dist/cjs/components/image-to-layout/DropElement.js +128 -87
  2. package/dist/cjs/components/image-to-layout/ImageToLayout.js +2 -8
  3. package/dist/esm/components/image-to-layout/DropElement.js +128 -87
  4. package/dist/esm/components/image-to-layout/ImageToLayout.js +2 -8
  5. package/package.json +2 -2
  6. package/dist/cjs/components/image-to-layout/ImageToLayoutInput.js +0 -193
  7. package/dist/cjs/components/image-to-layout/PagesSuggestion.js +0 -80
  8. package/dist/esm/components/image-to-layout/ImageToLayoutInput.js +0 -191
  9. package/dist/esm/components/image-to-layout/PagesSuggestion.js +0 -78
package/dist/cjs/components/image-to-layout/DropElement.js CHANGED
@@ -3,116 +3,157 @@
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
4
 
5
5
  const DropElement = ()=>{
6
+ const dispatchEventBuildWithSectionActiveTab = (value)=>{
7
+ const event = new CustomEvent('editor:sidebar:build-with-section-active-tab', {
8
+ bubbles: true,
9
+ detail: {
10
+ value
11
+ }
12
+ });
13
+ window.dispatchEvent(event);
14
+ };
6
15
  return /*#__PURE__*/ jsxRuntime.jsxs("div", {
7
- className: "flex w-full flex-1 flex-col items-center justify-center",
16
+ className: "flex w-full flex-col items-center justify-center",
8
17
  children: [
9
- /*#__PURE__*/ jsxRuntime.jsx("span", {
10
- className: "mb-6 text-sm font-normal text-[#676767]",
11
- children: "Drag element from sidebar here"
12
- }),
13
18
  /*#__PURE__*/ jsxRuntime.jsxs("svg", {
14
- width: "276",
15
- height: "129",
16
- viewBox: "0 0 276 129",
19
+ width: "290",
20
+ height: "162",
21
+ viewBox: "0 0 290 162",
17
22
  fill: "none",
18
23
  xmlns: "http://www.w3.org/2000/svg",
24
+ className: "mb-[24px]",
19
25
  children: [
20
26
  /*#__PURE__*/ jsxRuntime.jsx("rect", {
21
- x: "47",
22
- y: "0.5",
23
- width: "182",
24
- height: "128",
25
- rx: "8",
26
- fill: "#E8E9EC"
27
+ x: "0.570588",
28
+ y: "0.570588",
29
+ width: "288.859",
30
+ height: "160.859",
31
+ rx: "8.55882",
32
+ fill: "white"
27
33
  }),
28
34
  /*#__PURE__*/ jsxRuntime.jsx("rect", {
29
- x: "124",
30
- y: "12.5",
31
- width: "94",
32
- height: "104",
33
- rx: "6",
34
- fill: "white",
35
- stroke: "#AEB6CD",
36
- strokeWidth: "1.5",
37
- strokeLinecap: "round",
38
- strokeDasharray: "2 4"
35
+ x: "0.570588",
36
+ y: "0.570588",
37
+ width: "288.859",
38
+ height: "160.859",
39
+ rx: "8.55882",
40
+ stroke: "#E2E2E2",
41
+ strokeWidth: "1.14118"
39
42
  }),
40
- /*#__PURE__*/ jsxRuntime.jsx("rect", {
41
- x: "59",
42
- y: "14.5",
43
- width: "44",
44
- height: "22",
45
- rx: "2",
46
- fill: "white"
43
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
44
+ d: "M22.2529 29.6708C22.2529 25.8893 25.3185 22.8237 29.1 22.8237H126.1C129.882 22.8237 132.947 25.8893 132.947 29.6708V132.377C132.947 136.158 129.882 139.224 126.1 139.224H29.1C25.3185 139.224 22.2529 136.158 22.2529 132.377V29.6708Z",
45
+ fill: "#3C67FF",
46
+ fillOpacity: "0.1"
47
47
  }),
48
- /*#__PURE__*/ jsxRuntime.jsx("rect", {
49
- x: "59",
50
- y: "67.5",
51
- width: "44",
52
- height: "22",
53
- rx: "2",
54
- fill: "white"
48
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
49
+ d: "M76.0283 91.1587C77.3298 92.6353 76.2754 94.958 74.3066 94.9513L57.7218 94.8955C55.762 94.8889 54.7231 92.5777 56.0182 91.1058L64.2787 81.7175C65.1873 80.6849 66.7951 80.6836 67.7039 81.7146L76.0283 91.1587Z",
50
+ fill: "#7190FF"
55
51
  }),
56
- /*#__PURE__*/ jsxRuntime.jsx("g", {
57
- clipPath: "url(#clip0_3791_281943)",
58
- children: /*#__PURE__*/ jsxRuntime.jsx("rect", {
59
- x: "59",
60
- y: "41.5",
61
- width: "44",
62
- height: "22",
63
- rx: "2",
64
- fill: "#BDCEFF"
65
- })
52
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
53
+ d: "M98.1352 91.1406C99.4315 92.62 98.3727 94.9382 96.4053 94.9282L67.9725 94.7838C66.0044 94.7738 64.9727 92.4437 66.2873 90.9779L80.6046 75.0135C81.5189 73.994 83.118 74.0026 84.0198 75.0318L98.1352 91.1406Z",
54
+ fill: "#7190FF"
55
+ }),
56
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
57
+ d: "M63.2783 74.2252C66.1589 73.8964 68.1647 71.3676 67.8369 68.478C67.5091 65.5883 64.9883 63.5762 62.1077 63.905C59.2272 64.2338 57.2214 66.7626 57.5492 69.6523C57.877 72.5419 60.3978 74.554 63.2783 74.2252Z",
58
+ fill: "#7190FF"
66
59
  }),
67
60
  /*#__PURE__*/ jsxRuntime.jsx("rect", {
68
- x: "59",
69
- y: "94.5",
70
- width: "44",
71
- height: "22",
72
- rx: "2",
73
- fill: "white"
61
+ x: "157.482",
62
+ y: "45.647",
63
+ width: "83.3059",
64
+ height: "11.4118",
65
+ rx: "5.70588",
66
+ fill: "#AAAAAA"
74
67
  }),
75
68
  /*#__PURE__*/ jsxRuntime.jsx("rect", {
76
- x: "112",
77
- y: "39.5",
78
- width: "71",
79
- height: "50.0492",
80
- rx: "3.4918",
69
+ x: "157.5",
70
+ y: "98.9995",
71
+ width: "48",
72
+ height: "18",
73
+ rx: "9",
81
74
  fill: "#3C67FF"
82
75
  }),
83
- /*#__PURE__*/ jsxRuntime.jsx("path", {
84
- opacity: "0.8",
85
- d: "M147.819 73.2147C148.963 74.508 148.04 76.5453 146.314 76.5395L131.719 76.4905C129.999 76.4848 129.088 74.456 130.226 73.1671L137.495 64.9309C138.291 64.0294 139.697 64.0288 140.493 64.9296L147.819 73.2147Z",
86
- fill: "white",
87
- fillOpacity: "0.84"
76
+ /*#__PURE__*/ jsxRuntime.jsx("rect", {
77
+ x: "157.5",
78
+ y: "66.9995",
79
+ width: "68",
80
+ height: "5",
81
+ rx: "2.5",
82
+ fill: "#E2E2E2"
88
83
  }),
89
- /*#__PURE__*/ jsxRuntime.jsx("path", {
90
- d: "M167.258 73.1989C168.397 74.4947 167.471 76.5281 165.746 76.5193L140.732 76.3927C139.006 76.384 138.101 74.3387 139.256 73.0551L151.851 59.0548C152.652 58.1648 154.05 58.1728 154.84 59.072L167.258 73.1989Z",
91
- fill: "white"
84
+ /*#__PURE__*/ jsxRuntime.jsx("rect", {
85
+ x: "157.5",
86
+ y: "79.9995",
87
+ width: "52",
88
+ height: "5",
89
+ rx: "2.5",
90
+ fill: "#E2E2E2"
91
+ })
92
+ ]
93
+ }),
94
+ /*#__PURE__*/ jsxRuntime.jsxs("div", {
95
+ className: "flex flex-col items-center",
96
+ children: [
97
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
98
+ className: "text-16 font-medium mb-4 text-[#212121]",
99
+ children: "Start with Sections from sidebar"
92
100
  }),
93
- /*#__PURE__*/ jsxRuntime.jsx("path", {
94
- opacity: "0.8",
95
- d: "M136.608 58.3724C139.141 58.0841 140.904 55.8675 140.616 53.3346C140.328 50.8017 138.111 49.0381 135.578 49.3263C133.045 49.6145 131.282 51.8311 131.57 54.364C131.858 56.8969 134.075 58.6606 136.608 58.3724Z",
96
- fill: "white",
97
- fillOpacity: "0.84"
101
+ /*#__PURE__*/ jsxRuntime.jsxs("div", {
102
+ className: "flex w-[291px] justify-between",
103
+ children: [
104
+ /*#__PURE__*/ jsxRuntime.jsx("button", {
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]",
107
+ children: "Add sections"
108
+ }),
109
+ /*#__PURE__*/ jsxRuntime.jsx("button", {
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]",
112
+ children: "Add elements"
113
+ })
114
+ ]
98
115
  }),
99
- /*#__PURE__*/ jsxRuntime.jsx("path", {
100
- d: "M189.56 94.5C189.7 94.6393 189.81 94.8047 189.886 94.9867C189.961 95.1687 190 95.3638 190 95.5608C190 95.7578 189.961 95.9529 189.886 96.1349C189.81 96.3169 189.7 96.4823 189.56 96.6216L189.122 97.0603C188.982 97.1997 188.817 97.3102 188.635 97.3856C188.453 97.461 188.258 97.4998 188.061 97.4998C187.864 97.4998 187.669 97.461 187.487 97.3856C187.305 97.3102 187.139 97.1997 187 97.0603L181.82 91.8816L179.769 96.601C179.654 96.8687 179.463 97.0966 179.219 97.2565C178.976 97.4163 178.691 97.501 178.399 97.5H178.326C178.023 97.4873 177.73 97.3816 177.488 97.1971C177.247 97.0126 177.068 96.7584 176.975 96.4688L172.075 81.4613C171.989 81.1987 171.978 80.9174 172.042 80.6486C172.106 80.3799 172.243 80.1342 172.439 79.9388C172.634 79.7434 172.88 79.606 173.149 79.5418C173.417 79.4776 173.699 79.4891 173.961 79.575L188.969 84.4753C189.256 84.5713 189.507 84.7517 189.689 84.9929C189.872 85.2341 189.977 85.5249 189.991 85.827C190.006 86.1291 189.928 86.4285 189.769 86.6858C189.61 86.9432 189.377 87.1465 189.101 87.2691L184.382 89.3203L189.56 94.5Z",
101
- fill: "#2B2D34",
102
- stroke: "#E8E8E8"
116
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
117
+ className: "my-6",
118
+ children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
119
+ width: "338",
120
+ height: "24",
121
+ viewBox: "0 0 338 24",
122
+ fill: "none",
123
+ xmlns: "http://www.w3.org/2000/svg",
124
+ children: [
125
+ /*#__PURE__*/ jsxRuntime.jsx("rect", {
126
+ width: "150",
127
+ height: "1",
128
+ transform: "translate(0 11.4999)",
129
+ fill: "#D6D6D6"
130
+ }),
131
+ /*#__PURE__*/ jsxRuntime.jsx("path", {
132
+ d: "M166.395 17.159C165.705 17.159 165.101 16.995 164.58 16.6668C164.063 16.3387 163.659 15.8797 163.367 15.2897C163.079 14.6997 162.935 14.0104 162.935 13.2215C162.935 12.4261 163.079 11.7317 163.367 11.1384C163.659 10.5452 164.063 10.0845 164.58 9.75633C165.101 9.42821 165.705 9.26414 166.395 9.26414C167.084 9.26414 167.688 9.42821 168.205 9.75633C168.725 10.0845 169.129 10.5452 169.418 11.1384C169.709 11.7317 169.855 12.4261 169.855 13.2215C169.855 14.0104 169.709 14.6997 169.418 15.2897C169.129 15.8797 168.725 16.3387 168.205 16.6668C167.688 16.995 167.084 17.159 166.395 17.159ZM166.395 16.1051C166.919 16.1051 167.349 15.9708 167.688 15.7024C168.026 15.4339 168.276 15.0809 168.438 14.6434C168.601 14.2059 168.682 13.7319 168.682 13.2215C168.682 12.7111 168.601 12.2355 168.438 11.7947C168.276 11.3539 168.026 10.9976 167.688 10.7258C167.349 10.454 166.919 10.3181 166.395 10.3181C165.871 10.3181 165.44 10.454 165.102 10.7258C164.764 10.9976 164.514 11.3539 164.352 11.7947C164.189 12.2355 164.108 12.7111 164.108 13.2215C164.108 13.7319 164.189 14.2059 164.352 14.6434C164.514 15.0809 164.764 15.4339 165.102 15.7024C165.44 15.9708 165.871 16.1051 166.395 16.1051ZM171.646 16.9999V9.36358H172.78V10.517H172.859C172.998 10.1391 173.25 9.83256 173.615 9.59724C173.979 9.36192 174.39 9.24426 174.848 9.24426C174.934 9.24426 175.042 9.24591 175.171 9.24923C175.3 9.25254 175.398 9.25751 175.464 9.26414V10.4573C175.425 10.4474 175.333 10.4325 175.191 10.4126C175.052 10.3894 174.904 10.3778 174.748 10.3778C174.377 10.3778 174.046 10.4557 173.754 10.6114C173.466 10.7639 173.237 10.976 173.068 11.2478C172.902 11.5163 172.819 11.8229 172.819 12.1676V16.9999H171.646Z",
133
+ fill: "#676767"
134
+ }),
135
+ /*#__PURE__*/ jsxRuntime.jsx("rect", {
136
+ width: "150",
137
+ height: "1",
138
+ transform: "translate(188 11.4999)",
139
+ fill: "#D6D6D6"
140
+ })
141
+ ]
142
+ })
103
143
  }),
104
- /*#__PURE__*/ jsxRuntime.jsx("defs", {
105
- children: /*#__PURE__*/ jsxRuntime.jsx("clipPath", {
106
- id: "clip0_3791_281943",
107
- children: /*#__PURE__*/ jsxRuntime.jsx("rect", {
108
- x: "59",
109
- y: "41.5",
110
- width: "44",
111
- height: "22",
112
- rx: "2",
113
- fill: "white"
144
+ /*#__PURE__*/ jsxRuntime.jsxs("div", {
145
+ className: "flex items-center gap-2 text-xs",
146
+ children: [
147
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
148
+ id: "gp-img-to-layout-gallery-btn",
149
+ className: "relative cursor-pointer text-[14px] font-medium text-[#3C67FF]",
150
+ children: "Start with Generating from URL or image"
151
+ }),
152
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
153
+ className: "text-medium flex h-[20px] w-[58px] items-center justify-center rounded-[8px] bg-[#3C67FF1A] text-[#0008C9]",
154
+ children: "AI Beta"
114
155
  })
115
- })
156
+ ]
116
157
  })
117
158
  ]
118
159
  })
package/dist/cjs/components/image-to-layout/ImageToLayout.js CHANGED
@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var core = require('@gem-sdk/core');
7
7
  var DropElement = require('./DropElement.js');
8
- var ImageToLayoutInput = require('./ImageToLayoutInput.js');
9
8
 
10
9
  const HEADER_HEIGHT = 40;
11
10
  const FOOTER_HEIGHT = 50;
@@ -26,15 +25,10 @@ const ImageToLayout = ({ editorImageToLayout })=>{
26
25
  style: {
27
26
  height: `calc(100vh - ${FOOTER_HEIGHT + HEADER_HEIGHT}px)`
28
27
  },
29
- children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
28
+ children: /*#__PURE__*/ jsxRuntime.jsx("div", {
30
29
  id: "gps-gem-ai-input-wrapper",
31
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]",
32
- children: [
33
- /*#__PURE__*/ jsxRuntime.jsx(DropElement.DropElement, {}),
34
- /*#__PURE__*/ jsxRuntime.jsx(ImageToLayoutInput.ImageToLayoutInput, {
35
- totalSection: totalSection || 0
36
- })
37
- ]
31
+ children: /*#__PURE__*/ jsxRuntime.jsx(DropElement.DropElement, {})
38
32
  })
39
33
  }),
40
34
  /*#__PURE__*/ jsxRuntime.jsx("div", {
package/dist/esm/components/image-to-layout/DropElement.js CHANGED
@@ -1,116 +1,157 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
2
 
3
3
  const DropElement = ()=>{
4
+ const dispatchEventBuildWithSectionActiveTab = (value)=>{
5
+ const event = new CustomEvent('editor:sidebar:build-with-section-active-tab', {
6
+ bubbles: true,
7
+ detail: {
8
+ value
9
+ }
10
+ });
11
+ window.dispatchEvent(event);
12
+ };
4
13
  return /*#__PURE__*/ jsxs("div", {
5
- className: "flex w-full flex-1 flex-col items-center justify-center",
14
+ className: "flex w-full flex-col items-center justify-center",
6
15
  children: [
7
- /*#__PURE__*/ jsx("span", {
8
- className: "mb-6 text-sm font-normal text-[#676767]",
9
- children: "Drag element from sidebar here"
10
- }),
11
16
  /*#__PURE__*/ jsxs("svg", {
12
- width: "276",
13
- height: "129",
14
- viewBox: "0 0 276 129",
17
+ width: "290",
18
+ height: "162",
19
+ viewBox: "0 0 290 162",
15
20
  fill: "none",
16
21
  xmlns: "http://www.w3.org/2000/svg",
22
+ className: "mb-[24px]",
17
23
  children: [
18
24
  /*#__PURE__*/ jsx("rect", {
19
- x: "47",
20
- y: "0.5",
21
- width: "182",
22
- height: "128",
23
- rx: "8",
24
- fill: "#E8E9EC"
25
+ x: "0.570588",
26
+ y: "0.570588",
27
+ width: "288.859",
28
+ height: "160.859",
29
+ rx: "8.55882",
30
+ fill: "white"
25
31
  }),
26
32
  /*#__PURE__*/ jsx("rect", {
27
- x: "124",
28
- y: "12.5",
29
- width: "94",
30
- height: "104",
31
- rx: "6",
32
- fill: "white",
33
- stroke: "#AEB6CD",
34
- strokeWidth: "1.5",
35
- strokeLinecap: "round",
36
- strokeDasharray: "2 4"
33
+ x: "0.570588",
34
+ y: "0.570588",
35
+ width: "288.859",
36
+ height: "160.859",
37
+ rx: "8.55882",
38
+ stroke: "#E2E2E2",
39
+ strokeWidth: "1.14118"
37
40
  }),
38
- /*#__PURE__*/ jsx("rect", {
39
- x: "59",
40
- y: "14.5",
41
- width: "44",
42
- height: "22",
43
- rx: "2",
44
- fill: "white"
41
+ /*#__PURE__*/ jsx("path", {
42
+ d: "M22.2529 29.6708C22.2529 25.8893 25.3185 22.8237 29.1 22.8237H126.1C129.882 22.8237 132.947 25.8893 132.947 29.6708V132.377C132.947 136.158 129.882 139.224 126.1 139.224H29.1C25.3185 139.224 22.2529 136.158 22.2529 132.377V29.6708Z",
43
+ fill: "#3C67FF",
44
+ fillOpacity: "0.1"
45
45
  }),
46
- /*#__PURE__*/ jsx("rect", {
47
- x: "59",
48
- y: "67.5",
49
- width: "44",
50
- height: "22",
51
- rx: "2",
52
- fill: "white"
46
+ /*#__PURE__*/ jsx("path", {
47
+ d: "M76.0283 91.1587C77.3298 92.6353 76.2754 94.958 74.3066 94.9513L57.7218 94.8955C55.762 94.8889 54.7231 92.5777 56.0182 91.1058L64.2787 81.7175C65.1873 80.6849 66.7951 80.6836 67.7039 81.7146L76.0283 91.1587Z",
48
+ fill: "#7190FF"
53
49
  }),
54
- /*#__PURE__*/ jsx("g", {
55
- clipPath: "url(#clip0_3791_281943)",
56
- children: /*#__PURE__*/ jsx("rect", {
57
- x: "59",
58
- y: "41.5",
59
- width: "44",
60
- height: "22",
61
- rx: "2",
62
- fill: "#BDCEFF"
63
- })
50
+ /*#__PURE__*/ jsx("path", {
51
+ d: "M98.1352 91.1406C99.4315 92.62 98.3727 94.9382 96.4053 94.9282L67.9725 94.7838C66.0044 94.7738 64.9727 92.4437 66.2873 90.9779L80.6046 75.0135C81.5189 73.994 83.118 74.0026 84.0198 75.0318L98.1352 91.1406Z",
52
+ fill: "#7190FF"
53
+ }),
54
+ /*#__PURE__*/ jsx("path", {
55
+ d: "M63.2783 74.2252C66.1589 73.8964 68.1647 71.3676 67.8369 68.478C67.5091 65.5883 64.9883 63.5762 62.1077 63.905C59.2272 64.2338 57.2214 66.7626 57.5492 69.6523C57.877 72.5419 60.3978 74.554 63.2783 74.2252Z",
56
+ fill: "#7190FF"
64
57
  }),
65
58
  /*#__PURE__*/ jsx("rect", {
66
- x: "59",
67
- y: "94.5",
68
- width: "44",
69
- height: "22",
70
- rx: "2",
71
- fill: "white"
59
+ x: "157.482",
60
+ y: "45.647",
61
+ width: "83.3059",
62
+ height: "11.4118",
63
+ rx: "5.70588",
64
+ fill: "#AAAAAA"
72
65
  }),
73
66
  /*#__PURE__*/ jsx("rect", {
74
- x: "112",
75
- y: "39.5",
76
- width: "71",
77
- height: "50.0492",
78
- rx: "3.4918",
67
+ x: "157.5",
68
+ y: "98.9995",
69
+ width: "48",
70
+ height: "18",
71
+ rx: "9",
79
72
  fill: "#3C67FF"
80
73
  }),
81
- /*#__PURE__*/ jsx("path", {
82
- opacity: "0.8",
83
- d: "M147.819 73.2147C148.963 74.508 148.04 76.5453 146.314 76.5395L131.719 76.4905C129.999 76.4848 129.088 74.456 130.226 73.1671L137.495 64.9309C138.291 64.0294 139.697 64.0288 140.493 64.9296L147.819 73.2147Z",
84
- fill: "white",
85
- fillOpacity: "0.84"
74
+ /*#__PURE__*/ jsx("rect", {
75
+ x: "157.5",
76
+ y: "66.9995",
77
+ width: "68",
78
+ height: "5",
79
+ rx: "2.5",
80
+ fill: "#E2E2E2"
86
81
  }),
87
- /*#__PURE__*/ jsx("path", {
88
- d: "M167.258 73.1989C168.397 74.4947 167.471 76.5281 165.746 76.5193L140.732 76.3927C139.006 76.384 138.101 74.3387 139.256 73.0551L151.851 59.0548C152.652 58.1648 154.05 58.1728 154.84 59.072L167.258 73.1989Z",
89
- fill: "white"
82
+ /*#__PURE__*/ jsx("rect", {
83
+ x: "157.5",
84
+ y: "79.9995",
85
+ width: "52",
86
+ height: "5",
87
+ rx: "2.5",
88
+ fill: "#E2E2E2"
89
+ })
90
+ ]
91
+ }),
92
+ /*#__PURE__*/ jsxs("div", {
93
+ className: "flex flex-col items-center",
94
+ children: [
95
+ /*#__PURE__*/ jsx("div", {
96
+ className: "text-16 font-medium mb-4 text-[#212121]",
97
+ children: "Start with Sections from sidebar"
90
98
  }),
91
- /*#__PURE__*/ jsx("path", {
92
- opacity: "0.8",
93
- d: "M136.608 58.3724C139.141 58.0841 140.904 55.8675 140.616 53.3346C140.328 50.8017 138.111 49.0381 135.578 49.3263C133.045 49.6145 131.282 51.8311 131.57 54.364C131.858 56.8969 134.075 58.6606 136.608 58.3724Z",
94
- fill: "white",
95
- fillOpacity: "0.84"
99
+ /*#__PURE__*/ jsxs("div", {
100
+ className: "flex w-[291px] justify-between",
101
+ children: [
102
+ /*#__PURE__*/ jsx("button", {
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]",
105
+ children: "Add sections"
106
+ }),
107
+ /*#__PURE__*/ jsx("button", {
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]",
110
+ children: "Add elements"
111
+ })
112
+ ]
96
113
  }),
97
- /*#__PURE__*/ jsx("path", {
98
- d: "M189.56 94.5C189.7 94.6393 189.81 94.8047 189.886 94.9867C189.961 95.1687 190 95.3638 190 95.5608C190 95.7578 189.961 95.9529 189.886 96.1349C189.81 96.3169 189.7 96.4823 189.56 96.6216L189.122 97.0603C188.982 97.1997 188.817 97.3102 188.635 97.3856C188.453 97.461 188.258 97.4998 188.061 97.4998C187.864 97.4998 187.669 97.461 187.487 97.3856C187.305 97.3102 187.139 97.1997 187 97.0603L181.82 91.8816L179.769 96.601C179.654 96.8687 179.463 97.0966 179.219 97.2565C178.976 97.4163 178.691 97.501 178.399 97.5H178.326C178.023 97.4873 177.73 97.3816 177.488 97.1971C177.247 97.0126 177.068 96.7584 176.975 96.4688L172.075 81.4613C171.989 81.1987 171.978 80.9174 172.042 80.6486C172.106 80.3799 172.243 80.1342 172.439 79.9388C172.634 79.7434 172.88 79.606 173.149 79.5418C173.417 79.4776 173.699 79.4891 173.961 79.575L188.969 84.4753C189.256 84.5713 189.507 84.7517 189.689 84.9929C189.872 85.2341 189.977 85.5249 189.991 85.827C190.006 86.1291 189.928 86.4285 189.769 86.6858C189.61 86.9432 189.377 87.1465 189.101 87.2691L184.382 89.3203L189.56 94.5Z",
99
- fill: "#2B2D34",
100
- stroke: "#E8E8E8"
114
+ /*#__PURE__*/ jsx("div", {
115
+ className: "my-6",
116
+ children: /*#__PURE__*/ jsxs("svg", {
117
+ width: "338",
118
+ height: "24",
119
+ viewBox: "0 0 338 24",
120
+ fill: "none",
121
+ xmlns: "http://www.w3.org/2000/svg",
122
+ children: [
123
+ /*#__PURE__*/ jsx("rect", {
124
+ width: "150",
125
+ height: "1",
126
+ transform: "translate(0 11.4999)",
127
+ fill: "#D6D6D6"
128
+ }),
129
+ /*#__PURE__*/ jsx("path", {
130
+ d: "M166.395 17.159C165.705 17.159 165.101 16.995 164.58 16.6668C164.063 16.3387 163.659 15.8797 163.367 15.2897C163.079 14.6997 162.935 14.0104 162.935 13.2215C162.935 12.4261 163.079 11.7317 163.367 11.1384C163.659 10.5452 164.063 10.0845 164.58 9.75633C165.101 9.42821 165.705 9.26414 166.395 9.26414C167.084 9.26414 167.688 9.42821 168.205 9.75633C168.725 10.0845 169.129 10.5452 169.418 11.1384C169.709 11.7317 169.855 12.4261 169.855 13.2215C169.855 14.0104 169.709 14.6997 169.418 15.2897C169.129 15.8797 168.725 16.3387 168.205 16.6668C167.688 16.995 167.084 17.159 166.395 17.159ZM166.395 16.1051C166.919 16.1051 167.349 15.9708 167.688 15.7024C168.026 15.4339 168.276 15.0809 168.438 14.6434C168.601 14.2059 168.682 13.7319 168.682 13.2215C168.682 12.7111 168.601 12.2355 168.438 11.7947C168.276 11.3539 168.026 10.9976 167.688 10.7258C167.349 10.454 166.919 10.3181 166.395 10.3181C165.871 10.3181 165.44 10.454 165.102 10.7258C164.764 10.9976 164.514 11.3539 164.352 11.7947C164.189 12.2355 164.108 12.7111 164.108 13.2215C164.108 13.7319 164.189 14.2059 164.352 14.6434C164.514 15.0809 164.764 15.4339 165.102 15.7024C165.44 15.9708 165.871 16.1051 166.395 16.1051ZM171.646 16.9999V9.36358H172.78V10.517H172.859C172.998 10.1391 173.25 9.83256 173.615 9.59724C173.979 9.36192 174.39 9.24426 174.848 9.24426C174.934 9.24426 175.042 9.24591 175.171 9.24923C175.3 9.25254 175.398 9.25751 175.464 9.26414V10.4573C175.425 10.4474 175.333 10.4325 175.191 10.4126C175.052 10.3894 174.904 10.3778 174.748 10.3778C174.377 10.3778 174.046 10.4557 173.754 10.6114C173.466 10.7639 173.237 10.976 173.068 11.2478C172.902 11.5163 172.819 11.8229 172.819 12.1676V16.9999H171.646Z",
131
+ fill: "#676767"
132
+ }),
133
+ /*#__PURE__*/ jsx("rect", {
134
+ width: "150",
135
+ height: "1",
136
+ transform: "translate(188 11.4999)",
137
+ fill: "#D6D6D6"
138
+ })
139
+ ]
140
+ })
101
141
  }),
102
- /*#__PURE__*/ jsx("defs", {
103
- children: /*#__PURE__*/ jsx("clipPath", {
104
- id: "clip0_3791_281943",
105
- children: /*#__PURE__*/ jsx("rect", {
106
- x: "59",
107
- y: "41.5",
108
- width: "44",
109
- height: "22",
110
- rx: "2",
111
- fill: "white"
142
+ /*#__PURE__*/ jsxs("div", {
143
+ className: "flex items-center gap-2 text-xs",
144
+ children: [
145
+ /*#__PURE__*/ jsx("div", {
146
+ id: "gp-img-to-layout-gallery-btn",
147
+ className: "relative cursor-pointer text-[14px] font-medium text-[#3C67FF]",
148
+ children: "Start with Generating from URL or image"
149
+ }),
150
+ /*#__PURE__*/ jsx("div", {
151
+ className: "text-medium flex h-[20px] w-[58px] items-center justify-center rounded-[8px] bg-[#3C67FF1A] text-[#0008C9]",
152
+ children: "AI Beta"
112
153
  })
113
- })
154
+ ]
114
155
  })
115
156
  ]
116
157
  })
package/dist/esm/components/image-to-layout/ImageToLayout.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
2
  import { useBuilderPreviewStore, cls } from '@gem-sdk/core';
3
3
  import { DropElement } from './DropElement.js';
4
- import { ImageToLayoutInput } from './ImageToLayoutInput.js';
5
4
 
6
5
  const HEADER_HEIGHT = 40;
7
6
  const FOOTER_HEIGHT = 50;
@@ -22,15 +21,10 @@ const ImageToLayout = ({ editorImageToLayout })=>{
22
21
  style: {
23
22
  height: `calc(100vh - ${FOOTER_HEIGHT + HEADER_HEIGHT}px)`
24
23
  },
25
- children: /*#__PURE__*/ jsxs("div", {
24
+ children: /*#__PURE__*/ jsx("div", {
26
25
  id: "gps-gem-ai-input-wrapper",
27
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]",
28
- children: [
29
- /*#__PURE__*/ jsx(DropElement, {}),
30
- /*#__PURE__*/ jsx(ImageToLayoutInput, {
31
- totalSection: totalSection || 0
32
- })
33
- ]
27
+ children: /*#__PURE__*/ jsx(DropElement, {})
34
28
  })
35
29
  }),
36
30
  /*#__PURE__*/ jsx("div", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.29.11",
3
+ "version": "1.33.0",
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.29.5",
28
+ "@gem-sdk/core": "1.32.4",
29
29
  "@gem-sdk/plugin-cookie-bar": "1.25.0",
30
30
  "@gem-sdk/plugin-quick-view": "1.25.0",
31
31
  "@gem-sdk/plugin-sticky-add-to-cart": "1.25.0"
package/dist/cjs/components/image-to-layout/ImageToLayoutInput.js DELETED
@@ -1,193 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var react = require('react');
5
- var PagesSuggestion = require('./PagesSuggestion.js');
6
-
7
- const ImageToLayoutInput = ({ totalSection })=>{
8
- const [link, setLink] = react.useState('');
9
- const [isFocus, setIsFocus] = react.useState(false);
10
- const [openSuggestion, setOpenSuggestion] = react.useState(false);
11
- react.useEffect(()=>{
12
- const isOpenSuggestion = isFocus && !link ? true : link ? false : openSuggestion;
13
- setOpenSuggestion(isOpenSuggestion);
14
- }, [
15
- link,
16
- isFocus,
17
- openSuggestion
18
- ]);
19
- react.useEffect(()=>{
20
- if (totalSection > 0) {
21
- setLink('');
22
- }
23
- }, [
24
- totalSection
25
- ]);
26
- return /*#__PURE__*/ jsxRuntime.jsxs("div", {
27
- className: "relative mt-[64px] flex w-full max-w-[calc(100%_-_32px)] flex-col items-center rounded-[3px] border border-[#EEEEEE] px-[16px] pb-[24px] pt-[32px]",
28
- children: [
29
- /*#__PURE__*/ jsxRuntime.jsxs("div", {
30
- className: "absolute top-[-15px] z-10 flex gap-1 bg-white px-[8px] py-[4px] text-[14px] font-normal leading-[21px] text-[#676767]",
31
- children: [
32
- "or use Image to Layout",
33
- /*#__PURE__*/ jsxRuntime.jsxs("svg", {
34
- width: "36",
35
- height: "20",
36
- viewBox: "0 0 36 20",
37
- fill: "none",
38
- xmlns: "http://www.w3.org/2000/svg",
39
- children: [
40
- /*#__PURE__*/ jsxRuntime.jsx("path", {
41
- d: "M0.5 3C0.5 1.34315 1.84315 0 3.5 0H32.5C34.1569 0 35.5 1.34315 35.5 3V17C35.5 18.6569 34.1569 20 32.5 20H3.5C1.84315 20 0.5 18.6569 0.5 17V3Z",
42
- fill: "#EBDDF8"
43
- }),
44
- /*#__PURE__*/ jsxRuntime.jsx("path", {
45
- d: "M5.45881 14V5.27273H8.65483C9.27415 5.27273 9.78693 5.375 10.1932 5.57955C10.5994 5.78125 10.9034 6.0554 11.1051 6.40199C11.3068 6.74574 11.4077 7.13352 11.4077 7.56534C11.4077 7.92898 11.3409 8.2358 11.2074 8.4858C11.0739 8.73295 10.8949 8.93182 10.6705 9.08239C10.4489 9.23011 10.2045 9.33807 9.9375 9.40625V9.49148C10.2273 9.50568 10.5099 9.59943 10.7855 9.77273C11.0639 9.94318 11.294 10.1861 11.4759 10.5014C11.6577 10.8168 11.7486 11.2003 11.7486 11.652C11.7486 12.098 11.6435 12.4986 11.4332 12.8537C11.2259 13.206 10.9048 13.4858 10.4702 13.6932C10.0355 13.8977 9.48011 14 8.80398 14H5.45881ZM6.77557 12.8707H8.67614C9.30682 12.8707 9.75852 12.7486 10.0312 12.5043C10.304 12.2599 10.4403 11.9545 10.4403 11.5881C10.4403 11.3125 10.3707 11.0597 10.2315 10.8295C10.0923 10.5994 9.89347 10.4162 9.63494 10.2798C9.37926 10.1435 9.07528 10.0753 8.72301 10.0753H6.77557V12.8707ZM6.77557 9.0483H8.53977C8.83523 9.0483 9.10085 8.99148 9.33665 8.87784C9.57528 8.7642 9.7642 8.60511 9.90341 8.40057C10.0455 8.19318 10.1165 7.94886 10.1165 7.66761C10.1165 7.30682 9.99006 7.00426 9.73722 6.75994C9.48438 6.51562 9.09659 6.39347 8.57386 6.39347H6.77557V9.0483ZM16.0291 14.1321C15.3842 14.1321 14.8288 13.9943 14.3629 13.7188C13.8999 13.4403 13.5419 13.0497 13.2891 12.5469C13.0391 12.0412 12.9141 11.4489 12.9141 10.7699C12.9141 10.0994 13.0391 9.50852 13.2891 8.99716C13.5419 8.4858 13.8942 8.08665 14.3459 7.79972C14.8004 7.51278 15.3317 7.36932 15.9396 7.36932C16.3089 7.36932 16.6669 7.4304 17.0135 7.55256C17.3601 7.67472 17.6712 7.86648 17.9467 8.12784C18.2223 8.3892 18.4396 8.72869 18.5987 9.14631C18.7578 9.56108 18.8374 10.0653 18.8374 10.6591V11.1108H13.6342V10.1562H17.5888C17.5888 9.82102 17.5206 9.52415 17.3842 9.26562C17.2479 9.00426 17.0561 8.7983 16.8089 8.64773C16.5646 8.49716 16.2777 8.42188 15.9482 8.42188C15.5902 8.42188 15.2777 8.50994 15.0107 8.68608C14.7464 8.85937 14.5419 9.08665 14.397 9.3679C14.255 9.64631 14.1839 9.94886 14.1839 10.2756V11.0213C14.1839 11.4588 14.2607 11.831 14.4141 12.1378C14.5703 12.4446 14.7876 12.679 15.0661 12.8409C15.3445 13 15.6697 13.0795 16.0419 13.0795C16.2834 13.0795 16.5036 13.0455 16.7024 12.9773C16.9013 12.9062 17.0732 12.8011 17.218 12.6619C17.3629 12.5227 17.4737 12.3509 17.5504 12.1463L18.7564 12.3636C18.6598 12.7187 18.4865 13.0298 18.2365 13.2969C17.9893 13.5611 17.6783 13.767 17.3033 13.9148C16.9311 14.0597 16.5064 14.1321 16.0291 14.1321ZM23.3065 7.45455V8.47727H19.7312V7.45455H23.3065ZM20.69 5.88636H21.9641V12.0781C21.9641 12.3253 22.0011 12.5114 22.0749 12.6364C22.1488 12.7585 22.244 12.8423 22.3604 12.8878C22.4798 12.9304 22.609 12.9517 22.7482 12.9517C22.8505 12.9517 22.94 12.9446 23.0167 12.9304C23.0934 12.9162 23.1531 12.9048 23.1957 12.8963L23.4258 13.9489C23.3519 13.9773 23.2468 14.0057 23.1104 14.0341C22.9741 14.0653 22.8036 14.0824 22.5991 14.0852C22.2638 14.0909 21.9513 14.0312 21.6616 13.9062C21.3718 13.7812 21.1374 13.5881 20.9585 13.3267C20.7795 13.0653 20.69 12.7372 20.69 12.3423V5.88636ZM26.6207 14.1449C26.206 14.1449 25.831 14.0682 25.4957 13.9148C25.1605 13.7585 24.8949 13.5327 24.6989 13.2372C24.5057 12.9418 24.4091 12.5795 24.4091 12.1506C24.4091 11.7812 24.4801 11.4773 24.6222 11.2386C24.7642 11 24.956 10.8111 25.1974 10.6719C25.4389 10.5327 25.7088 10.4276 26.0071 10.3565C26.3054 10.2855 26.6094 10.2315 26.919 10.1946C27.3111 10.1491 27.6293 10.1122 27.8736 10.0838C28.1179 10.0526 28.2955 10.0028 28.4062 9.93466C28.517 9.86648 28.5724 9.75568 28.5724 9.60227V9.57244C28.5724 9.20028 28.4673 8.91193 28.2571 8.70739C28.0497 8.50284 27.7401 8.40057 27.3281 8.40057C26.8991 8.40057 26.5611 8.49574 26.3139 8.68608C26.0696 8.87358 25.9006 9.08239 25.8068 9.3125L24.6094 9.03977C24.7514 8.64205 24.9588 8.32102 25.2315 8.0767C25.5071 7.82955 25.8239 7.65057 26.1818 7.53977C26.5398 7.42614 26.9162 7.36932 27.3111 7.36932C27.5724 7.36932 27.8494 7.40057 28.142 7.46307C28.4375 7.52273 28.7131 7.63352 28.9688 7.79545C29.2273 7.95739 29.4389 8.18892 29.6037 8.49006C29.7685 8.78835 29.8509 9.17614 29.8509 9.65341V14H28.6065V13.1051H28.5554C28.473 13.2699 28.3494 13.4318 28.1847 13.5909C28.0199 13.75 27.8082 13.8821 27.5497 13.9872C27.2912 14.0923 26.9815 14.1449 26.6207 14.1449ZM26.8977 13.1222C27.25 13.1222 27.5511 13.0526 27.8011 12.9134C28.054 12.7741 28.2457 12.5923 28.3764 12.3679C28.5099 12.1406 28.5767 11.8977 28.5767 11.6392V10.7955C28.5313 10.8409 28.4432 10.8835 28.3125 10.9233C28.1847 10.9602 28.0384 10.9929 27.8736 11.0213C27.7088 11.0469 27.5483 11.071 27.392 11.0938C27.2358 11.1136 27.1051 11.1307 27 11.1449C26.7528 11.1761 26.527 11.2287 26.3224 11.3026C26.1207 11.3764 25.9588 11.483 25.8366 11.6222C25.7173 11.7585 25.6577 11.9403 25.6577 12.1676C25.6577 12.483 25.7741 12.7216 26.0071 12.8835C26.2401 13.0426 26.5369 13.1222 26.8977 13.1222Z",
46
- fill: "url(#paint0_linear_5203_64584)"
47
- }),
48
- /*#__PURE__*/ jsxRuntime.jsx("defs", {
49
- children: /*#__PURE__*/ jsxRuntime.jsxs("linearGradient", {
50
- id: "paint0_linear_5203_64584",
51
- x1: "31.5",
52
- y1: "15.2703",
53
- x2: "4.49944",
54
- y2: "15.2287",
55
- gradientUnits: "userSpaceOnUse",
56
- children: [
57
- /*#__PURE__*/ jsxRuntime.jsx("stop", {
58
- stopColor: "#874CFD"
59
- }),
60
- /*#__PURE__*/ jsxRuntime.jsx("stop", {
61
- offset: "1",
62
- stopColor: "#3C38E1"
63
- })
64
- ]
65
- })
66
- })
67
- ]
68
- })
69
- ]
70
- }),
71
- /*#__PURE__*/ jsxRuntime.jsxs("div", {
72
- className: "image-to-layout-input-border relative max-w-[calc(100%)]",
73
- children: [
74
- /*#__PURE__*/ jsxRuntime.jsxs("div", {
75
- className: "image-to-layout-input-wrapper flex h-[60px] w-[600px] max-w-[100%] items-center rounded-[3px] py-[10px] pl-3 pr-2",
76
- children: [
77
- !link ? /*#__PURE__*/ jsxRuntime.jsxs("svg", {
78
- width: "21",
79
- height: "20",
80
- viewBox: "0 0 21 20",
81
- fill: "none",
82
- xmlns: "http://www.w3.org/2000/svg",
83
- children: [
84
- /*#__PURE__*/ jsxRuntime.jsx("path", {
85
- d: "M15.0455 3.3397C14.9859 3.155 14.7246 3.155 14.6649 3.3397L14.3917 4.18545C14.2941 4.48763 14.0588 4.72549 13.7576 4.82633L12.9216 5.1063C12.7396 5.16724 12.7396 5.42466 12.9216 5.4856L13.7576 5.76557C14.0588 5.8664 14.2941 6.10426 14.3917 6.40645L14.6649 7.2522C14.7246 7.4369 14.9859 7.4369 15.0455 7.2522L15.3187 6.40645C15.4163 6.10426 15.6517 5.8664 15.9528 5.76557L16.7889 5.4856C16.9708 5.42466 16.9708 5.16724 16.7889 5.1063L15.9528 4.82633C15.6517 4.72549 15.4163 4.48763 15.3187 4.18545L15.0455 3.3397Z",
86
- fill: "#9E9E9E"
87
- }),
88
- /*#__PURE__*/ jsxRuntime.jsx("path", {
89
- d: "M10.0157 4.1343C9.9262 3.85725 9.53422 3.85725 9.44473 4.1343L8.49438 7.07649C8.20156 7.98304 7.49557 8.69662 6.5922 8.99912L3.70474 9.96602C3.43175 10.0574 3.43175 10.4436 3.70474 10.535L6.59221 11.5019C7.49557 11.8044 8.20156 12.5179 8.49438 13.4245L9.44473 16.3667C9.53422 16.6437 9.9262 16.6437 10.0157 16.3667L10.966 13.4245C11.2589 12.5179 11.9649 11.8044 12.8682 11.5019L15.7557 10.535C16.0287 10.4436 16.0287 10.0574 15.7557 9.96602L12.8682 8.99912C11.9649 8.69662 11.2589 7.98304 10.966 7.07649L10.0157 4.1343Z",
90
- fill: "#9E9E9E"
91
- })
92
- ]
93
- }) : /*#__PURE__*/ jsxRuntime.jsxs("svg", {
94
- width: "21",
95
- height: "21",
96
- viewBox: "0 0 21 21",
97
- fill: "none",
98
- xmlns: "http://www.w3.org/2000/svg",
99
- children: [
100
- /*#__PURE__*/ jsxRuntime.jsx("path", {
101
- d: "M15.0455 3.8397C14.9859 3.655 14.7246 3.655 14.6649 3.8397L14.3917 4.68545C14.2941 4.98763 14.0588 5.22549 13.7576 5.32633L12.9216 5.6063C12.7396 5.66724 12.7396 5.92466 12.9216 5.9856L13.7576 6.26557C14.0588 6.3664 14.2941 6.60426 14.3917 6.90645L14.6649 7.7522C14.7246 7.9369 14.9859 7.9369 15.0455 7.7522L15.3187 6.90645C15.4163 6.60426 15.6517 6.3664 15.9528 6.26557L16.7889 5.9856C16.9708 5.92466 16.9708 5.66724 16.7889 5.6063L15.9528 5.32633C15.6517 5.22549 15.4163 4.98763 15.3187 4.68545L15.0455 3.8397Z",
102
- fill: "url(#paint0_linear_5189_39651)"
103
- }),
104
- /*#__PURE__*/ jsxRuntime.jsx("path", {
105
- d: "M10.0157 4.6343C9.9262 4.35725 9.53422 4.35725 9.44473 4.6343L8.49438 7.57649C8.20156 8.48304 7.49557 9.19662 6.5922 9.49912L3.70474 10.466C3.43175 10.5574 3.43175 10.9436 3.70474 11.035L6.59221 12.0019C7.49557 12.3044 8.20156 13.0179 8.49438 13.9245L9.44473 16.8667C9.53422 17.1437 9.9262 17.1437 10.0157 16.8667L10.966 13.9245C11.2589 13.0179 11.9649 12.3044 12.8682 12.0019L15.7557 11.035C16.0287 10.9436 16.0287 10.5574 15.7557 10.466L12.8682 9.49912C11.9649 9.19662 11.2589 8.48304 10.966 7.57649L10.0157 4.6343Z",
106
- fill: "url(#paint1_linear_5189_39651)"
107
- }),
108
- /*#__PURE__*/ jsxRuntime.jsxs("defs", {
109
- children: [
110
- /*#__PURE__*/ jsxRuntime.jsxs("linearGradient", {
111
- id: "paint0_linear_5189_39651",
112
- x1: "16.9254",
113
- y1: "13.9119",
114
- x2: "3.49971",
115
- y2: "13.8965",
116
- gradientUnits: "userSpaceOnUse",
117
- children: [
118
- /*#__PURE__*/ jsxRuntime.jsx("stop", {
119
- stopColor: "#874CFD"
120
- }),
121
- /*#__PURE__*/ jsxRuntime.jsx("stop", {
122
- offset: "1",
123
- stopColor: "#3C38E1"
124
- })
125
- ]
126
- }),
127
- /*#__PURE__*/ jsxRuntime.jsxs("linearGradient", {
128
- id: "paint1_linear_5189_39651",
129
- x1: "16.9254",
130
- y1: "13.9119",
131
- x2: "3.49971",
132
- y2: "13.8965",
133
- gradientUnits: "userSpaceOnUse",
134
- children: [
135
- /*#__PURE__*/ jsxRuntime.jsx("stop", {
136
- stopColor: "#874CFD"
137
- }),
138
- /*#__PURE__*/ jsxRuntime.jsx("stop", {
139
- offset: "1",
140
- stopColor: "#3C38E1"
141
- })
142
- ]
143
- })
144
- ]
145
- })
146
- ]
147
- }),
148
- /*#__PURE__*/ jsxRuntime.jsx("input", {
149
- onFocus: ()=>setIsFocus(true),
150
- onChange: (event)=>{
151
- setLink(event.target.value);
152
- },
153
- onBlur: ()=>setIsFocus(false),
154
- autoComplete: "off",
155
- id: "gp-img-to-layout-input-link",
156
- placeholder: "Paste your link here",
157
- className: "mx-4 h-[60px] flex-1 text-[14px] text-[#676767] outline-none"
158
- }),
159
- /*#__PURE__*/ jsxRuntime.jsx("div", {
160
- "aria-disabled": !link,
161
- id: "gp-img-to-layout-generate-btn",
162
- className: `generate-image-to-layout-btn flex h-[40px] w-[94px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white ${!link ? 'btn-disable' : ''}`,
163
- children: "Generate"
164
- })
165
- ]
166
- }),
167
- /*#__PURE__*/ jsxRuntime.jsx(PagesSuggestion.PagesSuggestion, {
168
- setUrl: setLink,
169
- setOpenSuggestion: setOpenSuggestion,
170
- isOpen: openSuggestion
171
- })
172
- ]
173
- }),
174
- /*#__PURE__*/ jsxRuntime.jsx("div", {
175
- className: "error-url bottom-[-24px] mx-[-1px] mb-[-1px] mt-1 hidden w-[600px] max-w-[100%] items-center justify-center",
176
- children: /*#__PURE__*/ jsxRuntime.jsx("span", {
177
- className: " text-xs text-[#C3362B]",
178
- children: "Please use an valid URL to generate"
179
- })
180
- }),
181
- /*#__PURE__*/ jsxRuntime.jsx("div", {
182
- className: "mt-4 flex items-center text-xs",
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
- })
188
- })
189
- ]
190
- });
191
- };
192
-
193
- exports.ImageToLayoutInput = ImageToLayoutInput;
package/dist/cjs/components/image-to-layout/PagesSuggestion.js DELETED
@@ -1,80 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
-
5
- const PagesSuggestion = ({ isOpen, setOpenSuggestion, setUrl })=>{
6
- const pages = [
7
- 'https://seal-commerce-asia.myshopify.com/pages/image-to-layout-demo-page'
8
- ];
9
- const clickItem = (page)=>{
10
- setUrl(page);
11
- setOpenSuggestion(false);
12
- };
13
- return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
14
- children: [
15
- /*#__PURE__*/ jsxRuntime.jsx("div", {
16
- className: `z-9 gps-page-suggestion w-full max-w-[calc(100%)] bg-white ${isOpen ? 'block' : 'hidden'} absolute left-[0px] top-[66px]`,
17
- children: /*#__PURE__*/ jsxRuntime.jsx("div", {
18
- className: "h-full w-full overflow-hidden rounded-[3px]",
19
- children: /*#__PURE__*/ jsxRuntime.jsx("div", {
20
- className: "mt-[-1px] max-h-[500px] bg-white p-[8px]",
21
- children: pages.map((page)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
22
- onClick: ()=>clickItem(page),
23
- className: "gps-suggestion-item mb-2 flex h-[56px] cursor-pointer items-center justify-between rounded-[3px] px-[16px] py-[12px] last:mb-0 hover:bg-[#F4F4F4]",
24
- "data-url": page,
25
- "aria-hidden": true,
26
- children: [
27
- /*#__PURE__*/ jsxRuntime.jsxs("div", {
28
- className: "flex flex-1 items-center",
29
- children: [
30
- /*#__PURE__*/ jsxRuntime.jsxs("svg", {
31
- width: "32",
32
- height: "32",
33
- viewBox: "0 0 32 32",
34
- fill: "none",
35
- className: "min-h-[32px] min-w-[32px]",
36
- xmlns: "http://www.w3.org/2000/svg",
37
- children: [
38
- /*#__PURE__*/ jsxRuntime.jsx("path", {
39
- d: "M28.6272 2.00862L3.27047 9.94579C3.17042 9.97914 3.11484 10.0903 3.13707 10.2015L5.09357 16.6379C5.12692 16.738 5.23808 16.8047 5.33813 16.7713L23.936 10.9463C24.8253 10.6684 25.5701 10.0458 26.0037 9.2121C27.1598 6.9888 28.1158 4.67657 28.8495 2.27541C28.9162 2.09755 28.7828 1.96415 28.6272 2.00862Z",
40
- fill: "#FFBB1C"
41
- }),
42
- /*#__PURE__*/ jsxRuntime.jsx("path", {
43
- d: "M22.5462 13.1363L6.79417 18.0609C6.70523 18.0942 6.64965 18.1831 6.683 18.2721L8.33936 23.708C8.37271 23.797 8.46164 23.8525 8.53945 23.8192L18.5888 20.6732C19.3447 20.4398 19.9672 19.9062 20.334 19.2059C21.3123 17.3272 22.1238 15.3707 22.7352 13.3475C22.7908 13.2141 22.6685 13.0918 22.5462 13.1363Z",
44
- fill: "#E8486C"
45
- }),
46
- /*#__PURE__*/ jsxRuntime.jsx("path", {
47
- d: "M16.5555 23.0745L9.98571 25.1311C9.90789 25.1533 9.87454 25.2311 9.89678 25.3089L11.2975 29.9001C11.3197 29.9779 11.3975 30.0223 11.4753 29.989L13.2206 29.4443C13.8542 29.2442 14.3878 28.7995 14.6991 28.1992C15.5328 26.6096 16.2109 24.9643 16.7334 23.2413C16.7668 23.1412 16.6667 23.0301 16.5555 23.0745Z",
48
- fill: "#476DF2"
49
- })
50
- ]
51
- }),
52
- /*#__PURE__*/ jsxRuntime.jsx("span", {
53
- className: "item-link ml-[24px] whitespace-nowrap text-xs text-[#212121]",
54
- children: page
55
- })
56
- ]
57
- }),
58
- /*#__PURE__*/ jsxRuntime.jsx("div", {
59
- "data-url": page,
60
- className: "gps-suggestion-item-btn mobile:ml-0 ml-[24px] cursor-pointer items-center",
61
- children: /*#__PURE__*/ jsxRuntime.jsx("span", {
62
- className: "ml-2 text-xs font-medium text-[#9E9E9E]",
63
- children: "Try with this page"
64
- })
65
- })
66
- ]
67
- }, page))
68
- })
69
- })
70
- }),
71
- /*#__PURE__*/ jsxRuntime.jsx("div", {
72
- onClick: ()=>setOpenSuggestion(false),
73
- "aria-hidden": true,
74
- className: `gps-bg-fixed fixed left-0 top-0 h-[100vh] w-[100vw] bg-transparent ${isOpen ? 'block' : 'hidden'}`
75
- })
76
- ]
77
- });
78
- };
79
-
80
- exports.PagesSuggestion = PagesSuggestion;
package/dist/esm/components/image-to-layout/ImageToLayoutInput.js DELETED
@@ -1,191 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { useState, useEffect } from 'react';
3
- import { PagesSuggestion } from './PagesSuggestion.js';
4
-
5
- const ImageToLayoutInput = ({ totalSection })=>{
6
- const [link, setLink] = useState('');
7
- const [isFocus, setIsFocus] = useState(false);
8
- const [openSuggestion, setOpenSuggestion] = useState(false);
9
- useEffect(()=>{
10
- const isOpenSuggestion = isFocus && !link ? true : link ? false : openSuggestion;
11
- setOpenSuggestion(isOpenSuggestion);
12
- }, [
13
- link,
14
- isFocus,
15
- openSuggestion
16
- ]);
17
- useEffect(()=>{
18
- if (totalSection > 0) {
19
- setLink('');
20
- }
21
- }, [
22
- totalSection
23
- ]);
24
- return /*#__PURE__*/ jsxs("div", {
25
- className: "relative mt-[64px] flex w-full max-w-[calc(100%_-_32px)] flex-col items-center rounded-[3px] border border-[#EEEEEE] px-[16px] pb-[24px] pt-[32px]",
26
- children: [
27
- /*#__PURE__*/ jsxs("div", {
28
- className: "absolute top-[-15px] z-10 flex gap-1 bg-white px-[8px] py-[4px] text-[14px] font-normal leading-[21px] text-[#676767]",
29
- children: [
30
- "or use Image to Layout",
31
- /*#__PURE__*/ jsxs("svg", {
32
- width: "36",
33
- height: "20",
34
- viewBox: "0 0 36 20",
35
- fill: "none",
36
- xmlns: "http://www.w3.org/2000/svg",
37
- children: [
38
- /*#__PURE__*/ jsx("path", {
39
- d: "M0.5 3C0.5 1.34315 1.84315 0 3.5 0H32.5C34.1569 0 35.5 1.34315 35.5 3V17C35.5 18.6569 34.1569 20 32.5 20H3.5C1.84315 20 0.5 18.6569 0.5 17V3Z",
40
- fill: "#EBDDF8"
41
- }),
42
- /*#__PURE__*/ jsx("path", {
43
- d: "M5.45881 14V5.27273H8.65483C9.27415 5.27273 9.78693 5.375 10.1932 5.57955C10.5994 5.78125 10.9034 6.0554 11.1051 6.40199C11.3068 6.74574 11.4077 7.13352 11.4077 7.56534C11.4077 7.92898 11.3409 8.2358 11.2074 8.4858C11.0739 8.73295 10.8949 8.93182 10.6705 9.08239C10.4489 9.23011 10.2045 9.33807 9.9375 9.40625V9.49148C10.2273 9.50568 10.5099 9.59943 10.7855 9.77273C11.0639 9.94318 11.294 10.1861 11.4759 10.5014C11.6577 10.8168 11.7486 11.2003 11.7486 11.652C11.7486 12.098 11.6435 12.4986 11.4332 12.8537C11.2259 13.206 10.9048 13.4858 10.4702 13.6932C10.0355 13.8977 9.48011 14 8.80398 14H5.45881ZM6.77557 12.8707H8.67614C9.30682 12.8707 9.75852 12.7486 10.0312 12.5043C10.304 12.2599 10.4403 11.9545 10.4403 11.5881C10.4403 11.3125 10.3707 11.0597 10.2315 10.8295C10.0923 10.5994 9.89347 10.4162 9.63494 10.2798C9.37926 10.1435 9.07528 10.0753 8.72301 10.0753H6.77557V12.8707ZM6.77557 9.0483H8.53977C8.83523 9.0483 9.10085 8.99148 9.33665 8.87784C9.57528 8.7642 9.7642 8.60511 9.90341 8.40057C10.0455 8.19318 10.1165 7.94886 10.1165 7.66761C10.1165 7.30682 9.99006 7.00426 9.73722 6.75994C9.48438 6.51562 9.09659 6.39347 8.57386 6.39347H6.77557V9.0483ZM16.0291 14.1321C15.3842 14.1321 14.8288 13.9943 14.3629 13.7188C13.8999 13.4403 13.5419 13.0497 13.2891 12.5469C13.0391 12.0412 12.9141 11.4489 12.9141 10.7699C12.9141 10.0994 13.0391 9.50852 13.2891 8.99716C13.5419 8.4858 13.8942 8.08665 14.3459 7.79972C14.8004 7.51278 15.3317 7.36932 15.9396 7.36932C16.3089 7.36932 16.6669 7.4304 17.0135 7.55256C17.3601 7.67472 17.6712 7.86648 17.9467 8.12784C18.2223 8.3892 18.4396 8.72869 18.5987 9.14631C18.7578 9.56108 18.8374 10.0653 18.8374 10.6591V11.1108H13.6342V10.1562H17.5888C17.5888 9.82102 17.5206 9.52415 17.3842 9.26562C17.2479 9.00426 17.0561 8.7983 16.8089 8.64773C16.5646 8.49716 16.2777 8.42188 15.9482 8.42188C15.5902 8.42188 15.2777 8.50994 15.0107 8.68608C14.7464 8.85937 14.5419 9.08665 14.397 9.3679C14.255 9.64631 14.1839 9.94886 14.1839 10.2756V11.0213C14.1839 11.4588 14.2607 11.831 14.4141 12.1378C14.5703 12.4446 14.7876 12.679 15.0661 12.8409C15.3445 13 15.6697 13.0795 16.0419 13.0795C16.2834 13.0795 16.5036 13.0455 16.7024 12.9773C16.9013 12.9062 17.0732 12.8011 17.218 12.6619C17.3629 12.5227 17.4737 12.3509 17.5504 12.1463L18.7564 12.3636C18.6598 12.7187 18.4865 13.0298 18.2365 13.2969C17.9893 13.5611 17.6783 13.767 17.3033 13.9148C16.9311 14.0597 16.5064 14.1321 16.0291 14.1321ZM23.3065 7.45455V8.47727H19.7312V7.45455H23.3065ZM20.69 5.88636H21.9641V12.0781C21.9641 12.3253 22.0011 12.5114 22.0749 12.6364C22.1488 12.7585 22.244 12.8423 22.3604 12.8878C22.4798 12.9304 22.609 12.9517 22.7482 12.9517C22.8505 12.9517 22.94 12.9446 23.0167 12.9304C23.0934 12.9162 23.1531 12.9048 23.1957 12.8963L23.4258 13.9489C23.3519 13.9773 23.2468 14.0057 23.1104 14.0341C22.9741 14.0653 22.8036 14.0824 22.5991 14.0852C22.2638 14.0909 21.9513 14.0312 21.6616 13.9062C21.3718 13.7812 21.1374 13.5881 20.9585 13.3267C20.7795 13.0653 20.69 12.7372 20.69 12.3423V5.88636ZM26.6207 14.1449C26.206 14.1449 25.831 14.0682 25.4957 13.9148C25.1605 13.7585 24.8949 13.5327 24.6989 13.2372C24.5057 12.9418 24.4091 12.5795 24.4091 12.1506C24.4091 11.7812 24.4801 11.4773 24.6222 11.2386C24.7642 11 24.956 10.8111 25.1974 10.6719C25.4389 10.5327 25.7088 10.4276 26.0071 10.3565C26.3054 10.2855 26.6094 10.2315 26.919 10.1946C27.3111 10.1491 27.6293 10.1122 27.8736 10.0838C28.1179 10.0526 28.2955 10.0028 28.4062 9.93466C28.517 9.86648 28.5724 9.75568 28.5724 9.60227V9.57244C28.5724 9.20028 28.4673 8.91193 28.2571 8.70739C28.0497 8.50284 27.7401 8.40057 27.3281 8.40057C26.8991 8.40057 26.5611 8.49574 26.3139 8.68608C26.0696 8.87358 25.9006 9.08239 25.8068 9.3125L24.6094 9.03977C24.7514 8.64205 24.9588 8.32102 25.2315 8.0767C25.5071 7.82955 25.8239 7.65057 26.1818 7.53977C26.5398 7.42614 26.9162 7.36932 27.3111 7.36932C27.5724 7.36932 27.8494 7.40057 28.142 7.46307C28.4375 7.52273 28.7131 7.63352 28.9688 7.79545C29.2273 7.95739 29.4389 8.18892 29.6037 8.49006C29.7685 8.78835 29.8509 9.17614 29.8509 9.65341V14H28.6065V13.1051H28.5554C28.473 13.2699 28.3494 13.4318 28.1847 13.5909C28.0199 13.75 27.8082 13.8821 27.5497 13.9872C27.2912 14.0923 26.9815 14.1449 26.6207 14.1449ZM26.8977 13.1222C27.25 13.1222 27.5511 13.0526 27.8011 12.9134C28.054 12.7741 28.2457 12.5923 28.3764 12.3679C28.5099 12.1406 28.5767 11.8977 28.5767 11.6392V10.7955C28.5313 10.8409 28.4432 10.8835 28.3125 10.9233C28.1847 10.9602 28.0384 10.9929 27.8736 11.0213C27.7088 11.0469 27.5483 11.071 27.392 11.0938C27.2358 11.1136 27.1051 11.1307 27 11.1449C26.7528 11.1761 26.527 11.2287 26.3224 11.3026C26.1207 11.3764 25.9588 11.483 25.8366 11.6222C25.7173 11.7585 25.6577 11.9403 25.6577 12.1676C25.6577 12.483 25.7741 12.7216 26.0071 12.8835C26.2401 13.0426 26.5369 13.1222 26.8977 13.1222Z",
44
- fill: "url(#paint0_linear_5203_64584)"
45
- }),
46
- /*#__PURE__*/ jsx("defs", {
47
- children: /*#__PURE__*/ jsxs("linearGradient", {
48
- id: "paint0_linear_5203_64584",
49
- x1: "31.5",
50
- y1: "15.2703",
51
- x2: "4.49944",
52
- y2: "15.2287",
53
- gradientUnits: "userSpaceOnUse",
54
- children: [
55
- /*#__PURE__*/ jsx("stop", {
56
- stopColor: "#874CFD"
57
- }),
58
- /*#__PURE__*/ jsx("stop", {
59
- offset: "1",
60
- stopColor: "#3C38E1"
61
- })
62
- ]
63
- })
64
- })
65
- ]
66
- })
67
- ]
68
- }),
69
- /*#__PURE__*/ jsxs("div", {
70
- className: "image-to-layout-input-border relative max-w-[calc(100%)]",
71
- children: [
72
- /*#__PURE__*/ jsxs("div", {
73
- className: "image-to-layout-input-wrapper flex h-[60px] w-[600px] max-w-[100%] items-center rounded-[3px] py-[10px] pl-3 pr-2",
74
- children: [
75
- !link ? /*#__PURE__*/ jsxs("svg", {
76
- width: "21",
77
- height: "20",
78
- viewBox: "0 0 21 20",
79
- fill: "none",
80
- xmlns: "http://www.w3.org/2000/svg",
81
- children: [
82
- /*#__PURE__*/ jsx("path", {
83
- d: "M15.0455 3.3397C14.9859 3.155 14.7246 3.155 14.6649 3.3397L14.3917 4.18545C14.2941 4.48763 14.0588 4.72549 13.7576 4.82633L12.9216 5.1063C12.7396 5.16724 12.7396 5.42466 12.9216 5.4856L13.7576 5.76557C14.0588 5.8664 14.2941 6.10426 14.3917 6.40645L14.6649 7.2522C14.7246 7.4369 14.9859 7.4369 15.0455 7.2522L15.3187 6.40645C15.4163 6.10426 15.6517 5.8664 15.9528 5.76557L16.7889 5.4856C16.9708 5.42466 16.9708 5.16724 16.7889 5.1063L15.9528 4.82633C15.6517 4.72549 15.4163 4.48763 15.3187 4.18545L15.0455 3.3397Z",
84
- fill: "#9E9E9E"
85
- }),
86
- /*#__PURE__*/ jsx("path", {
87
- d: "M10.0157 4.1343C9.9262 3.85725 9.53422 3.85725 9.44473 4.1343L8.49438 7.07649C8.20156 7.98304 7.49557 8.69662 6.5922 8.99912L3.70474 9.96602C3.43175 10.0574 3.43175 10.4436 3.70474 10.535L6.59221 11.5019C7.49557 11.8044 8.20156 12.5179 8.49438 13.4245L9.44473 16.3667C9.53422 16.6437 9.9262 16.6437 10.0157 16.3667L10.966 13.4245C11.2589 12.5179 11.9649 11.8044 12.8682 11.5019L15.7557 10.535C16.0287 10.4436 16.0287 10.0574 15.7557 9.96602L12.8682 8.99912C11.9649 8.69662 11.2589 7.98304 10.966 7.07649L10.0157 4.1343Z",
88
- fill: "#9E9E9E"
89
- })
90
- ]
91
- }) : /*#__PURE__*/ jsxs("svg", {
92
- width: "21",
93
- height: "21",
94
- viewBox: "0 0 21 21",
95
- fill: "none",
96
- xmlns: "http://www.w3.org/2000/svg",
97
- children: [
98
- /*#__PURE__*/ jsx("path", {
99
- d: "M15.0455 3.8397C14.9859 3.655 14.7246 3.655 14.6649 3.8397L14.3917 4.68545C14.2941 4.98763 14.0588 5.22549 13.7576 5.32633L12.9216 5.6063C12.7396 5.66724 12.7396 5.92466 12.9216 5.9856L13.7576 6.26557C14.0588 6.3664 14.2941 6.60426 14.3917 6.90645L14.6649 7.7522C14.7246 7.9369 14.9859 7.9369 15.0455 7.7522L15.3187 6.90645C15.4163 6.60426 15.6517 6.3664 15.9528 6.26557L16.7889 5.9856C16.9708 5.92466 16.9708 5.66724 16.7889 5.6063L15.9528 5.32633C15.6517 5.22549 15.4163 4.98763 15.3187 4.68545L15.0455 3.8397Z",
100
- fill: "url(#paint0_linear_5189_39651)"
101
- }),
102
- /*#__PURE__*/ jsx("path", {
103
- d: "M10.0157 4.6343C9.9262 4.35725 9.53422 4.35725 9.44473 4.6343L8.49438 7.57649C8.20156 8.48304 7.49557 9.19662 6.5922 9.49912L3.70474 10.466C3.43175 10.5574 3.43175 10.9436 3.70474 11.035L6.59221 12.0019C7.49557 12.3044 8.20156 13.0179 8.49438 13.9245L9.44473 16.8667C9.53422 17.1437 9.9262 17.1437 10.0157 16.8667L10.966 13.9245C11.2589 13.0179 11.9649 12.3044 12.8682 12.0019L15.7557 11.035C16.0287 10.9436 16.0287 10.5574 15.7557 10.466L12.8682 9.49912C11.9649 9.19662 11.2589 8.48304 10.966 7.57649L10.0157 4.6343Z",
104
- fill: "url(#paint1_linear_5189_39651)"
105
- }),
106
- /*#__PURE__*/ jsxs("defs", {
107
- children: [
108
- /*#__PURE__*/ jsxs("linearGradient", {
109
- id: "paint0_linear_5189_39651",
110
- x1: "16.9254",
111
- y1: "13.9119",
112
- x2: "3.49971",
113
- y2: "13.8965",
114
- gradientUnits: "userSpaceOnUse",
115
- children: [
116
- /*#__PURE__*/ jsx("stop", {
117
- stopColor: "#874CFD"
118
- }),
119
- /*#__PURE__*/ jsx("stop", {
120
- offset: "1",
121
- stopColor: "#3C38E1"
122
- })
123
- ]
124
- }),
125
- /*#__PURE__*/ jsxs("linearGradient", {
126
- id: "paint1_linear_5189_39651",
127
- x1: "16.9254",
128
- y1: "13.9119",
129
- x2: "3.49971",
130
- y2: "13.8965",
131
- gradientUnits: "userSpaceOnUse",
132
- children: [
133
- /*#__PURE__*/ jsx("stop", {
134
- stopColor: "#874CFD"
135
- }),
136
- /*#__PURE__*/ jsx("stop", {
137
- offset: "1",
138
- stopColor: "#3C38E1"
139
- })
140
- ]
141
- })
142
- ]
143
- })
144
- ]
145
- }),
146
- /*#__PURE__*/ jsx("input", {
147
- onFocus: ()=>setIsFocus(true),
148
- onChange: (event)=>{
149
- setLink(event.target.value);
150
- },
151
- onBlur: ()=>setIsFocus(false),
152
- autoComplete: "off",
153
- id: "gp-img-to-layout-input-link",
154
- placeholder: "Paste your link here",
155
- className: "mx-4 h-[60px] flex-1 text-[14px] text-[#676767] outline-none"
156
- }),
157
- /*#__PURE__*/ jsx("div", {
158
- "aria-disabled": !link,
159
- id: "gp-img-to-layout-generate-btn",
160
- className: `generate-image-to-layout-btn flex h-[40px] w-[94px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white ${!link ? 'btn-disable' : ''}`,
161
- children: "Generate"
162
- })
163
- ]
164
- }),
165
- /*#__PURE__*/ jsx(PagesSuggestion, {
166
- setUrl: setLink,
167
- setOpenSuggestion: setOpenSuggestion,
168
- isOpen: openSuggestion
169
- })
170
- ]
171
- }),
172
- /*#__PURE__*/ jsx("div", {
173
- className: "error-url bottom-[-24px] mx-[-1px] mb-[-1px] mt-1 hidden w-[600px] max-w-[100%] items-center justify-center",
174
- children: /*#__PURE__*/ jsx("span", {
175
- className: " text-xs text-[#C3362B]",
176
- children: "Please use an valid URL to generate"
177
- })
178
- }),
179
- /*#__PURE__*/ jsx("div", {
180
- className: "mt-4 flex items-center text-xs",
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
- })
186
- })
187
- ]
188
- });
189
- };
190
-
191
- export { ImageToLayoutInput };
package/dist/esm/components/image-to-layout/PagesSuggestion.js DELETED
@@ -1,78 +0,0 @@
1
- import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
-
3
- const PagesSuggestion = ({ isOpen, setOpenSuggestion, setUrl })=>{
4
- const pages = [
5
- 'https://seal-commerce-asia.myshopify.com/pages/image-to-layout-demo-page'
6
- ];
7
- const clickItem = (page)=>{
8
- setUrl(page);
9
- setOpenSuggestion(false);
10
- };
11
- return /*#__PURE__*/ jsxs(Fragment, {
12
- children: [
13
- /*#__PURE__*/ jsx("div", {
14
- className: `z-9 gps-page-suggestion w-full max-w-[calc(100%)] bg-white ${isOpen ? 'block' : 'hidden'} absolute left-[0px] top-[66px]`,
15
- children: /*#__PURE__*/ jsx("div", {
16
- className: "h-full w-full overflow-hidden rounded-[3px]",
17
- children: /*#__PURE__*/ jsx("div", {
18
- className: "mt-[-1px] max-h-[500px] bg-white p-[8px]",
19
- children: pages.map((page)=>/*#__PURE__*/ jsxs("div", {
20
- onClick: ()=>clickItem(page),
21
- className: "gps-suggestion-item mb-2 flex h-[56px] cursor-pointer items-center justify-between rounded-[3px] px-[16px] py-[12px] last:mb-0 hover:bg-[#F4F4F4]",
22
- "data-url": page,
23
- "aria-hidden": true,
24
- children: [
25
- /*#__PURE__*/ jsxs("div", {
26
- className: "flex flex-1 items-center",
27
- children: [
28
- /*#__PURE__*/ jsxs("svg", {
29
- width: "32",
30
- height: "32",
31
- viewBox: "0 0 32 32",
32
- fill: "none",
33
- className: "min-h-[32px] min-w-[32px]",
34
- xmlns: "http://www.w3.org/2000/svg",
35
- children: [
36
- /*#__PURE__*/ jsx("path", {
37
- d: "M28.6272 2.00862L3.27047 9.94579C3.17042 9.97914 3.11484 10.0903 3.13707 10.2015L5.09357 16.6379C5.12692 16.738 5.23808 16.8047 5.33813 16.7713L23.936 10.9463C24.8253 10.6684 25.5701 10.0458 26.0037 9.2121C27.1598 6.9888 28.1158 4.67657 28.8495 2.27541C28.9162 2.09755 28.7828 1.96415 28.6272 2.00862Z",
38
- fill: "#FFBB1C"
39
- }),
40
- /*#__PURE__*/ jsx("path", {
41
- d: "M22.5462 13.1363L6.79417 18.0609C6.70523 18.0942 6.64965 18.1831 6.683 18.2721L8.33936 23.708C8.37271 23.797 8.46164 23.8525 8.53945 23.8192L18.5888 20.6732C19.3447 20.4398 19.9672 19.9062 20.334 19.2059C21.3123 17.3272 22.1238 15.3707 22.7352 13.3475C22.7908 13.2141 22.6685 13.0918 22.5462 13.1363Z",
42
- fill: "#E8486C"
43
- }),
44
- /*#__PURE__*/ jsx("path", {
45
- d: "M16.5555 23.0745L9.98571 25.1311C9.90789 25.1533 9.87454 25.2311 9.89678 25.3089L11.2975 29.9001C11.3197 29.9779 11.3975 30.0223 11.4753 29.989L13.2206 29.4443C13.8542 29.2442 14.3878 28.7995 14.6991 28.1992C15.5328 26.6096 16.2109 24.9643 16.7334 23.2413C16.7668 23.1412 16.6667 23.0301 16.5555 23.0745Z",
46
- fill: "#476DF2"
47
- })
48
- ]
49
- }),
50
- /*#__PURE__*/ jsx("span", {
51
- className: "item-link ml-[24px] whitespace-nowrap text-xs text-[#212121]",
52
- children: page
53
- })
54
- ]
55
- }),
56
- /*#__PURE__*/ jsx("div", {
57
- "data-url": page,
58
- className: "gps-suggestion-item-btn mobile:ml-0 ml-[24px] cursor-pointer items-center",
59
- children: /*#__PURE__*/ jsx("span", {
60
- className: "ml-2 text-xs font-medium text-[#9E9E9E]",
61
- children: "Try with this page"
62
- })
63
- })
64
- ]
65
- }, page))
66
- })
67
- })
68
- }),
69
- /*#__PURE__*/ jsx("div", {
70
- onClick: ()=>setOpenSuggestion(false),
71
- "aria-hidden": true,
72
- className: `gps-bg-fixed fixed left-0 top-0 h-[100vh] w-[100vw] bg-transparent ${isOpen ? 'block' : 'hidden'}`
73
- })
74
- ]
75
- });
76
- };
77
-
78
- export { PagesSuggestion };