@billgangcom/theme-lib 1.16.1 → 1.17.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 (14) hide show
  1. package/dist/builder/utils/fetchAll.d.ts +1 -0
  2. package/dist/builder/utils/index.d.ts +1 -0
  3. package/dist/builder.cjs.js +3 -3
  4. package/dist/builder.es.js +884 -872
  5. package/dist/{root-COzIbCCx.cjs → root-CQZ1839v.cjs} +27 -27
  6. package/dist/{root-DGQzjyQw.js → root-_xH450tE.js} +858 -845
  7. package/dist/shared/lib/api.d.ts +1 -2
  8. package/dist/shared/lib/getDynamicRoutes.d.ts +2 -1
  9. package/dist/store/useLayersStore.d.ts +1 -0
  10. package/dist/store/useThemeSettingsStore.d.ts +1 -0
  11. package/dist/ui/HeaderButtons/index.d.ts +4 -0
  12. package/dist/ui.cjs.js +1 -1
  13. package/dist/ui.es.js +996 -789
  14. package/package.json +1 -1
package/dist/ui.es.js CHANGED
@@ -1,27 +1,27 @@
1
- import { j as t, c as H, I as h, a as V, S as z, T as it, C as ct, b as G, D as at, H as lt, B as tt, v as Z, u as rt, d as dt, e as ut, f as ht } from "./root-DGQzjyQw.js";
2
- import { k as fn, l as jn, h as vn, L as kn, M as yn, P as $n, R as Nn, g as wn, i as Cn } from "./root-DGQzjyQw.js";
3
- import p from "react";
4
- const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16", bt = "_open_2tiiw_19", ft = "_content_2tiiw_23", K = {
5
- accordion: pt,
6
- header: gt,
7
- icon: xt,
8
- open: bt,
1
+ import { j as t, c as H, I as x, a as G, S as z, T as lt, C as ot, b as Y, D as rt, H as dt, B as X, v as tt, u as ut, d as _t, e as it, f as at, M as mt } from "./root-_xH450tE.js";
2
+ import { k as Gn, l as Yn, h as Xn, L as Qn, P as Wn, R as Jn, g as Kn, i as Zn } from "./root-_xH450tE.js";
3
+ import b from "react";
4
+ const gt = "_accordion_2tiiw_1", xt = "_header_2tiiw_9", bt = "_icon_2tiiw_16", jt = "_open_2tiiw_19", ft = "_content_2tiiw_23", J = {
5
+ accordion: gt,
6
+ header: xt,
7
+ icon: bt,
8
+ open: jt,
9
9
  content: ft
10
- }, un = ({ title: u, content: n }) => {
11
- const [s, o] = p.useState(!1), [i, a] = p.useState(0), e = p.useRef(null), c = () => {
12
- o(!s);
10
+ }, Mn = ({ title: r, content: n }) => {
11
+ const [s, c] = b.useState(!1), [a, l] = b.useState(0), e = b.useRef(null), i = () => {
12
+ c(!s);
13
13
  };
14
- return p.useEffect(() => {
15
- e.current && a(s ? e.current.scrollHeight : 0);
16
- }, [s]), /* @__PURE__ */ t.jsxs("div", { className: K.accordion, children: [
14
+ return b.useEffect(() => {
15
+ e.current && l(s ? e.current.scrollHeight : 0);
16
+ }, [s]), /* @__PURE__ */ t.jsxs("div", { className: J.accordion, children: [
17
17
  /* @__PURE__ */ t.jsxs(
18
18
  "div",
19
19
  {
20
- className: K.header,
21
- onClick: c,
20
+ className: J.header,
21
+ onClick: i,
22
22
  children: [
23
- /* @__PURE__ */ t.jsx("h3", { children: u }),
24
- /* @__PURE__ */ t.jsx("div", { className: H(K.icon, { [K.open]: s }), children: /* @__PURE__ */ t.jsx(h, { name: "CaretDown" }) })
23
+ /* @__PURE__ */ t.jsx("h3", { children: r }),
24
+ /* @__PURE__ */ t.jsx("div", { className: H(J.icon, { [J.open]: s }), children: /* @__PURE__ */ t.jsx(x, { name: "CaretDown" }) })
25
25
  ]
26
26
  }
27
27
  ),
@@ -29,25 +29,25 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
29
29
  "div",
30
30
  {
31
31
  ref: e,
32
- className: K.content,
33
- style: { height: `${i}px` },
32
+ className: J.content,
33
+ style: { height: `${a}px` },
34
34
  children: /* @__PURE__ */ t.jsx("p", { children: n })
35
35
  }
36
36
  )
37
37
  ] });
38
- }, jt = "_wrapper_1g82c_2", vt = "_alignmentBlock_1g82c_8", kt = "_title_1g82c_15", yt = "_subtitle_1g82c_22", $t = "_alignmentContent_1g82c_29", Nt = "_alignments_1g82c_35", wt = "_alignment_1g82c_8", Ct = "_circle_1g82c_54", It = "_paddings_1g82c_61", Pt = "_padding_1g82c_61", Bt = "_input_1g82c_79", D = {
39
- wrapper: jt,
40
- alignmentBlock: vt,
38
+ }, vt = "_wrapper_1g82c_2", yt = "_alignmentBlock_1g82c_8", kt = "_title_1g82c_15", $t = "_subtitle_1g82c_22", Nt = "_alignmentContent_1g82c_29", Ct = "_alignments_1g82c_35", wt = "_alignment_1g82c_8", It = "_circle_1g82c_54", Pt = "_paddings_1g82c_61", Bt = "_padding_1g82c_61", Tt = "_input_1g82c_79", L = {
39
+ wrapper: vt,
40
+ alignmentBlock: yt,
41
41
  title: kt,
42
- subtitle: yt,
43
- alignmentContent: $t,
44
- alignments: Nt,
42
+ subtitle: $t,
43
+ alignmentContent: Nt,
44
+ alignments: Ct,
45
45
  alignment: wt,
46
- circle: Ct,
47
- paddings: It,
48
- padding: Pt,
49
- input: Bt
50
- }, Tt = [
46
+ circle: It,
47
+ paddings: Pt,
48
+ padding: Bt,
49
+ input: Tt
50
+ }, At = [
51
51
  "topLeft",
52
52
  "top",
53
53
  "topRight",
@@ -57,9 +57,9 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
57
57
  "bottomLeft",
58
58
  "bottom",
59
59
  "bottomRight"
60
- ], At = ["left", "top", "right", "bottom"], _n = (u) => {
61
- const { alignment: n, padding: s, setPadding: o, setAlignment: i } = u;
62
- function a() {
60
+ ], St = ["left", "top", "right", "bottom"], Hn = (r) => {
61
+ const { alignment: n, padding: s, setPadding: c, setAlignment: a } = r;
62
+ function l() {
63
63
  switch (n) {
64
64
  case "left":
65
65
  case "topLeft":
@@ -77,8 +77,8 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
77
77
  return "TextAlignCenter";
78
78
  }
79
79
  }
80
- function e(c) {
81
- switch (c) {
80
+ function e(i) {
81
+ switch (i) {
82
82
  case "left":
83
83
  return "AlignLeft";
84
84
  case "right":
@@ -89,24 +89,24 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
89
89
  return "AlignBottom";
90
90
  }
91
91
  }
92
- return /* @__PURE__ */ t.jsxs("div", { className: D.layout, children: [
93
- /* @__PURE__ */ t.jsx("h3", { className: D.title, children: "Layout" }),
94
- /* @__PURE__ */ t.jsxs("div", { className: D.alignmentBlock, children: [
95
- /* @__PURE__ */ t.jsx("h5", { className: D.subtitle, children: "Alignment" }),
96
- /* @__PURE__ */ t.jsxs("div", { className: D.alignmentContent, children: [
97
- /* @__PURE__ */ t.jsx("div", { className: D.alignments, children: Tt.map((c) => /* @__PURE__ */ t.jsxs(
92
+ return /* @__PURE__ */ t.jsxs("div", { className: L.layout, children: [
93
+ /* @__PURE__ */ t.jsx("h3", { className: L.title, children: "Layout" }),
94
+ /* @__PURE__ */ t.jsxs("div", { className: L.alignmentBlock, children: [
95
+ /* @__PURE__ */ t.jsx("h5", { className: L.subtitle, children: "Alignment" }),
96
+ /* @__PURE__ */ t.jsxs("div", { className: L.alignmentContent, children: [
97
+ /* @__PURE__ */ t.jsx("div", { className: L.alignments, children: At.map((i) => /* @__PURE__ */ t.jsxs(
98
98
  "div",
99
99
  {
100
100
  onClick: () => {
101
- i(c);
101
+ a(i);
102
102
  },
103
- className: D.alignment,
103
+ className: L.alignment,
104
104
  children: [
105
- c !== n && /* @__PURE__ */ t.jsx("div", { className: D.circle }),
106
- c === n && /* @__PURE__ */ t.jsx(
107
- h,
105
+ i !== n && /* @__PURE__ */ t.jsx("div", { className: L.circle }),
106
+ i === n && /* @__PURE__ */ t.jsx(
107
+ x,
108
108
  {
109
- name: a(),
109
+ name: l(),
110
110
  fill: "#FF3F19",
111
111
  width: 22,
112
112
  height: 22
@@ -114,48 +114,55 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
114
114
  )
115
115
  ]
116
116
  },
117
- c
117
+ i
118
118
  )) }),
119
- /* @__PURE__ */ t.jsx("div", { className: D.paddings, children: At.map((c) => /* @__PURE__ */ t.jsxs("label", { className: D.padding, children: [
120
- /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
121
- h,
122
- {
123
- name: e(c),
124
- width: 20,
125
- height: 20
126
- }
127
- ) }),
128
- /* @__PURE__ */ t.jsx(
129
- V,
130
- {
131
- type: "text",
132
- value: String(s[c]),
133
- onChange: (d) => o({
134
- ...s,
135
- [c]: Number(d)
136
- }),
137
- paddingless: !0,
138
- borderless: !0
139
- }
140
- )
141
- ] })) })
119
+ /* @__PURE__ */ t.jsx("div", { className: L.paddings, children: St.map((i) => /* @__PURE__ */ t.jsxs(
120
+ "label",
121
+ {
122
+ className: L.padding,
123
+ children: [
124
+ /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
125
+ x,
126
+ {
127
+ name: e(i),
128
+ width: 20,
129
+ height: 20
130
+ }
131
+ ) }),
132
+ /* @__PURE__ */ t.jsx(
133
+ G,
134
+ {
135
+ type: "text",
136
+ value: String(s[i]),
137
+ onChange: (u) => c({
138
+ ...s,
139
+ [i]: Number(u)
140
+ }),
141
+ paddingless: !0,
142
+ borderless: !0
143
+ }
144
+ )
145
+ ]
146
+ },
147
+ i
148
+ )) })
142
149
  ] })
143
150
  ] })
144
151
  ] });
145
- }, St = "_subtitle_2zbxx_1", Ot = "_header_2zbxx_8", Dt = "_text_2zbxx_9", Lt = "_top_2zbxx_16", qt = "_itemsBlock_2zbxx_23", Q = {
146
- subtitle: St,
147
- header: Ot,
148
- text: Dt,
152
+ }, Ot = "_subtitle_2zbxx_1", Dt = "_header_2zbxx_8", qt = "_text_2zbxx_9", Lt = "_top_2zbxx_16", Mt = "_itemsBlock_2zbxx_23", K = {
153
+ subtitle: Ot,
154
+ header: Dt,
155
+ text: qt,
149
156
  top: Lt,
150
- itemsBlock: qt
151
- }, Rt = "_typeTexts_3zlec_1", Mt = "_block_3zlec_7", Ht = "_active_3zlec_18", nt = {
152
- typeTexts: Rt,
153
- block: Mt,
154
- active: Ht
155
- }, Et = ["bold", "italic", "underline", "strike-through", "code"], _t = (u) => {
156
- const { typesText: n, setTypesText: s } = u;
157
- function o(i) {
158
- switch (i) {
157
+ itemsBlock: Mt
158
+ }, Ht = "_typeTexts_3zlec_1", Rt = "_block_3zlec_7", Vt = "_active_3zlec_18", nt = {
159
+ typeTexts: Ht,
160
+ block: Rt,
161
+ active: Vt
162
+ }, Et = ["bold", "italic", "underline", "strike-through", "code"], pt = (r) => {
163
+ const { typesText: n, setTypesText: s } = r;
164
+ function c(a) {
165
+ switch (a) {
159
166
  case "bold":
160
167
  return "TextB";
161
168
  case "italic":
@@ -168,66 +175,66 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
168
175
  return "TextUnderline";
169
176
  }
170
177
  }
171
- return /* @__PURE__ */ t.jsx("div", { className: nt.typeTexts, children: Et.map((i) => /* @__PURE__ */ t.jsx(
178
+ return /* @__PURE__ */ t.jsx("div", { className: nt.typeTexts, children: Et.map((a) => /* @__PURE__ */ t.jsx(
172
179
  "div",
173
180
  {
174
181
  className: H(nt.block, {
175
- [nt.active]: n.includes(i)
182
+ [nt.active]: n.includes(a)
176
183
  }),
177
184
  onClick: () => {
178
- const a = [...n];
179
- if (a.includes(i)) {
180
- const e = a.filter((c) => c !== i);
185
+ const l = [...n];
186
+ if (l.includes(a)) {
187
+ const e = l.filter((i) => i !== a);
181
188
  s(e);
182
189
  } else
183
- a.push(i), s(a);
190
+ l.push(a), s(l);
184
191
  },
185
192
  children: /* @__PURE__ */ t.jsx(
186
- h,
193
+ x,
187
194
  {
188
- name: o(i),
189
- fill: n.includes(i) ? "#252525" : "#757575",
195
+ name: c(a),
196
+ fill: n.includes(a) ? "#252525" : "#757575",
190
197
  width: 20,
191
198
  height: 20
192
199
  }
193
200
  )
194
201
  },
195
- String(i)
202
+ String(a)
196
203
  )) });
197
- }, zt = (u) => {
204
+ }, zt = (r) => {
198
205
  const {
199
206
  typesText: n,
200
207
  isActiveText: s,
201
- setIsActiveText: o,
202
- text: i,
203
- setText: a,
208
+ setIsActiveText: c,
209
+ text: a,
210
+ setText: l,
204
211
  setTypesText: e,
205
- title: c,
206
- subtitle: d = "Items"
207
- } = u;
208
- return /* @__PURE__ */ t.jsxs("div", { className: Q.text, children: [
209
- (c || s !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: Q.top, children: [
210
- c && /* @__PURE__ */ t.jsx("h3", { className: Q.title, children: c }),
211
- s !== void 0 && o && /* @__PURE__ */ t.jsx(
212
+ title: i,
213
+ subtitle: u = "Items"
214
+ } = r;
215
+ return /* @__PURE__ */ t.jsxs("div", { className: K.text, children: [
216
+ (i || s !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: K.top, children: [
217
+ i && /* @__PURE__ */ t.jsx("h3", { className: K.title, children: i }),
218
+ s !== void 0 && c && /* @__PURE__ */ t.jsx(
212
219
  z,
213
220
  {
214
221
  current: s,
215
- onChange: (k) => o(k)
222
+ onChange: (y) => c(y)
216
223
  }
217
224
  )
218
225
  ] }),
219
- /* @__PURE__ */ t.jsxs("div", { className: Q.itemsBlock, children: [
220
- /* @__PURE__ */ t.jsx("h5", { className: Q.subtitle, children: d }),
226
+ /* @__PURE__ */ t.jsxs("div", { className: K.itemsBlock, children: [
227
+ /* @__PURE__ */ t.jsx("h5", { className: K.subtitle, children: u }),
221
228
  /* @__PURE__ */ t.jsx(
222
- it,
229
+ lt,
223
230
  {
224
- onChange: (k) => a(k),
225
- value: i,
231
+ onChange: (y) => l(y),
232
+ value: a,
226
233
  maxLength: 150
227
234
  }
228
235
  ),
229
236
  /* @__PURE__ */ t.jsx(
230
- _t,
237
+ pt,
231
238
  {
232
239
  typesText: n,
233
240
  setTypesText: e
@@ -235,104 +242,105 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
235
242
  )
236
243
  ] })
237
244
  ] });
238
- }, Ut = "_subtitle_11qr1_1", Ft = "_header_11qr1_8", Vt = "_text_11qr1_9", Gt = "_productsBlock_11qr1_10", Xt = "_top_11qr1_22", Yt = "_itemsBlock_11qr1_29", Jt = "_typeTexts_11qr1_35", Kt = "_block_11qr1_41", Qt = "_active_11qr1_52", Wt = "_products_11qr1_10", Zt = "_product_11qr1_10", te = "_button_11qr1_70", ee = "_disabled_11qr1_80", se = "_image_11qr1_84", ne = "_info_11qr1_91", oe = "_name_11qr1_102", ce = "_buttons_11qr1_106", ie = "_modal_11qr1_112", ae = "_link_11qr1_130", le = "_modalOptions_11qr1_136", C = {
239
- subtitle: Ut,
240
- header: Ft,
241
- text: Vt,
242
- productsBlock: Gt,
245
+ }, Ft = "_subtitle_11qr1_1", Ut = "_header_11qr1_8", Gt = "_text_11qr1_9", Yt = "_productsBlock_11qr1_10", Xt = "_top_11qr1_22", Qt = "_itemsBlock_11qr1_29", Wt = "_typeTexts_11qr1_35", Jt = "_block_11qr1_41", Kt = "_active_11qr1_52", Zt = "_products_11qr1_10", te = "_product_11qr1_10", ee = "_button_11qr1_70", se = "_disabled_11qr1_80", ne = "_image_11qr1_84", ce = "_info_11qr1_91", oe = "_name_11qr1_102", ie = "_buttons_11qr1_106", ae = "_modal_11qr1_112", le = "_link_11qr1_130", re = "_modalOptions_11qr1_136", I = {
246
+ subtitle: Ft,
247
+ header: Ut,
248
+ text: Gt,
249
+ productsBlock: Yt,
243
250
  top: Xt,
244
- itemsBlock: Yt,
245
- typeTexts: Jt,
246
- block: Kt,
247
- active: Qt,
248
- products: Wt,
249
- product: Zt,
250
- button: te,
251
- disabled: ee,
252
- image: se,
253
- info: ne,
251
+ itemsBlock: Qt,
252
+ typeTexts: Wt,
253
+ block: Jt,
254
+ active: Kt,
255
+ products: Zt,
256
+ product: te,
257
+ button: ee,
258
+ disabled: se,
259
+ image: ne,
260
+ info: ce,
254
261
  name: oe,
255
- buttons: ce,
256
- modal: ie,
257
- link: ae,
258
- modalOptions: le
259
- }, re = (u) => {
260
- const { activeItem: n, setActiveItem: s, popupPosition: o, modalOptions: i, setIsOpenModal: a } = u;
262
+ buttons: ie,
263
+ modal: ae,
264
+ link: le,
265
+ modalOptions: re
266
+ }, de = (r) => {
267
+ const { activeItem: n, setActiveItem: s, popupPosition: c, modalOptions: a, setIsOpenModal: l } = r;
261
268
  return /* @__PURE__ */ t.jsxs(
262
269
  "div",
263
270
  {
264
- className: C.modal,
271
+ className: I.modal,
265
272
  onClick: (e) => {
266
273
  e.stopPropagation();
267
274
  },
268
275
  style: {
269
- top: `${o.top}px`,
270
- left: `${o.left}px`
276
+ top: `${c.top}px`,
277
+ left: `${c.left}px`
271
278
  },
272
279
  children: [
273
- /* @__PURE__ */ t.jsxs("div", { className: C.top, children: [
280
+ /* @__PURE__ */ t.jsxs("div", { className: I.top, children: [
274
281
  /* @__PURE__ */ t.jsx("h3", { children: n.name }),
275
282
  /* @__PURE__ */ t.jsx(
276
- h,
283
+ x,
277
284
  {
278
285
  name: "X",
279
286
  height: 20,
280
287
  width: 20,
281
288
  hoverable: !0,
282
289
  onClick: () => {
283
- s(null), a(!1);
290
+ s(null), l(!1);
284
291
  }
285
292
  }
286
293
  )
287
294
  ] }),
288
- /* @__PURE__ */ t.jsx("div", { className: C.modalOptions, children: i.map((e) => {
295
+ /* @__PURE__ */ t.jsx("div", { className: I.modalOptions, children: a.map((e) => {
289
296
  if (e.type === "image")
290
297
  return /* @__PURE__ */ t.jsx(
291
- ct,
298
+ ot,
292
299
  {
293
300
  label: "Put up an attractive image",
294
- onChange: (c) => {
295
- const d = {
301
+ onChange: (i) => {
302
+ const u = {
296
303
  ...n,
297
- [e.field]: c
304
+ [e.field]: i
298
305
  };
299
- s(d);
306
+ s(u);
300
307
  }
301
- }
308
+ },
309
+ String(e.field)
302
310
  );
303
311
  if (e.type === "text")
304
312
  return /* @__PURE__ */ t.jsx(
305
313
  zt,
306
314
  {
307
315
  typesText: n[e.field.type],
308
- setTypesText: (c) => {
309
- const d = {
316
+ setTypesText: (i) => {
317
+ const u = {
310
318
  ...n,
311
- [e.field.type]: c
319
+ [e.field.type]: i
312
320
  };
313
- s(d);
321
+ s(u);
314
322
  },
315
323
  text: n[e.field.text] || "",
316
- setText: (c) => {
317
- const d = {
324
+ setText: (i) => {
325
+ const u = {
318
326
  ...n,
319
- [e.field.text]: c
327
+ [e.field.text]: i
320
328
  };
321
- s(d);
329
+ s(u);
322
330
  },
323
331
  subtitle: e.label
324
332
  }
325
333
  );
326
334
  if (e.type === "input")
327
335
  return /* @__PURE__ */ t.jsx(
328
- V,
336
+ G,
329
337
  {
330
- onChange: (c) => {
331
- const d = {
338
+ onChange: (i) => {
339
+ const u = {
332
340
  ...n,
333
- [e.field]: c
341
+ [e.field]: i
334
342
  };
335
- s(d);
343
+ s(u);
336
344
  },
337
345
  value: n[e.field] || "",
338
346
  label: e.label,
@@ -340,16 +348,16 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
340
348
  }
341
349
  );
342
350
  if (e.type === "inputSwitch")
343
- return /* @__PURE__ */ t.jsxs("div", { className: C.link, children: [
351
+ return /* @__PURE__ */ t.jsxs("div", { className: I.link, children: [
344
352
  /* @__PURE__ */ t.jsx(
345
- V,
353
+ G,
346
354
  {
347
- onChange: (c) => {
348
- const d = {
355
+ onChange: (i) => {
356
+ const u = {
349
357
  ...n,
350
- [e.field.text]: c
358
+ [e.field.text]: i
351
359
  };
352
- s(d);
360
+ s(u);
353
361
  },
354
362
  value: n[e.field.text] || "",
355
363
  label: e.inputLabel,
@@ -361,27 +369,27 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
361
369
  {
362
370
  current: !!n[e.field.switch] || !1,
363
371
  label: e.switchLabel,
364
- onChange: (c) => {
365
- const d = {
372
+ onChange: (i) => {
373
+ const u = {
366
374
  ...n,
367
- [e.field.switch]: c
375
+ [e.field.switch]: i
368
376
  };
369
- s(d);
377
+ s(u);
370
378
  }
371
379
  }
372
380
  )
373
381
  ] });
374
382
  if (e.type === "list")
375
383
  return /* @__PURE__ */ t.jsx(
376
- he,
384
+ me,
377
385
  {
378
386
  items: n[e.field] || [],
379
- setItems: (c) => {
380
- const d = {
387
+ setItems: (i) => {
388
+ const u = {
381
389
  ...n,
382
- [e.field]: c
390
+ [e.field]: i
383
391
  };
384
- s(d);
392
+ s(u);
385
393
  },
386
394
  itemsType: "select",
387
395
  draggable: e.draggable || !1,
@@ -393,128 +401,129 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
393
401
  );
394
402
  if (e.type === "select")
395
403
  return /* @__PURE__ */ t.jsx(
396
- G,
404
+ Y,
397
405
  {
398
406
  options: e.itemsOptions,
399
- onChange: (c) => {
400
- const d = {
407
+ onChange: (i) => {
408
+ const u = {
401
409
  ...n,
402
- [e.field]: c
410
+ [e.field]: i
403
411
  };
404
- s(d);
412
+ s(u);
405
413
  },
406
414
  label: e.label,
407
415
  value: n[e.field] || "String",
408
- leftAddon: e.leftAddon && e.leftAddon === "icon" && /* @__PURE__ */ t.jsx(h, { name: n[e.field] })
416
+ leftAddon: e.leftAddon && e.leftAddon === "icon" && /* @__PURE__ */ t.jsx(x, { name: n[e.field] })
409
417
  }
410
418
  );
411
419
  }) })
412
420
  ]
413
421
  }
414
422
  );
415
- }, de = "_other_1wtgi_1", ue = "_subtitle_1wtgi_7", _e = "_items_1wtgi_14", ot = {
416
- other: de,
417
- subtitle: ue,
418
- items: _e
419
- }, mt = (u) => {
420
- const { items: n, title: s = "Other" } = u;
421
- return /* @__PURE__ */ t.jsxs("div", { className: ot.other, children: [
422
- /* @__PURE__ */ t.jsx("h5", { className: ot.subtitle, children: s }),
423
- /* @__PURE__ */ t.jsx("div", { className: ot.items, children: n.map((o) => /* @__PURE__ */ t.jsx(
423
+ }, ue = "_other_1wtgi_1", _e = "_subtitle_1wtgi_7", pe = "_items_1wtgi_14", ct = {
424
+ other: ue,
425
+ subtitle: _e,
426
+ items: pe
427
+ }, ht = (r) => {
428
+ const { items: n, title: s = "Other" } = r;
429
+ return /* @__PURE__ */ t.jsxs("div", { className: ct.other, children: [
430
+ /* @__PURE__ */ t.jsx("h5", { className: ct.subtitle, children: s }),
431
+ /* @__PURE__ */ t.jsx("div", { className: ct.items, children: n.map((c, a) => /* @__PURE__ */ t.jsx(
424
432
  z,
425
433
  {
426
- current: o.isItem,
427
- onChange: (i) => o.setIsItem(i),
428
- label: o.label,
434
+ current: c.isItem,
435
+ onChange: (l) => c.setIsItem(l),
436
+ label: c.label,
429
437
  hasBackground: !0,
430
438
  paddingless: !1
431
- }
439
+ },
440
+ a
432
441
  )) })
433
442
  ] });
434
- }, me = (u) => {
435
- const { index: n, moveProduct: s, children: o } = u, [, i] = rt({
443
+ }, he = (r) => {
444
+ const { index: n, moveProduct: s, children: c } = r, [, a] = ut({
436
445
  accept: "product",
437
- hover(c) {
438
- c.index !== n && (s(c.index, n), c.index = n);
446
+ hover(i) {
447
+ i.index !== n && (s(i.index, n), i.index = n);
439
448
  }
440
- }), [{ isDragging: a }, e] = dt({
449
+ }), [{ isDragging: l }, e] = _t({
441
450
  type: "product",
442
451
  item: { index: n },
443
- collect: (c) => ({
444
- isDragging: c.isDragging()
452
+ collect: (i) => ({
453
+ isDragging: i.isDragging()
445
454
  })
446
455
  });
447
456
  return /* @__PURE__ */ t.jsx(
448
457
  "div",
449
458
  {
450
- ref: (c) => e(i(c)),
451
- className: `${C.product} ${a ? C.dragging : ""}`,
452
- children: o
459
+ ref: (i) => e(a(i)),
460
+ className: `${I.product} ${l ? I.dragging : ""}`,
461
+ children: c
453
462
  }
454
463
  );
455
- }, he = (u) => {
464
+ }, me = (r) => {
456
465
  const {
457
466
  isActiveItems: n,
458
467
  setIsActiveItems: s,
459
- items: o,
460
- setItems: i,
461
- other: a,
468
+ items: c,
469
+ setItems: a,
470
+ other: l,
462
471
  title: e,
463
- subtitle: c,
464
- editable: d = !0,
465
- draggable: k = !1,
466
- withImage: m = !1,
467
- deletable: f = !0,
468
- addable: b = !0,
469
- itemsType: $,
470
- itemsPlaceholder: r = "",
471
- itemsOptions: g,
472
- hasRangeSelector: B = !1,
473
- rangeSelectorOptions: X,
474
- modalOptions: Y,
475
- addableOptions: y = {},
476
- limit: S
477
- } = u, [q, R] = p.useState(null), [st, et] = p.useState({
472
+ subtitle: i,
473
+ editable: u = !0,
474
+ draggable: y = !1,
475
+ withImage: h = !1,
476
+ deletable: v = !0,
477
+ addable: j = !0,
478
+ itemsType: o,
479
+ itemsPlaceholder: _ = "",
480
+ itemsOptions: m,
481
+ hasRangeSelector: P = !1,
482
+ rangeSelectorOptions: A,
483
+ modalOptions: N,
484
+ addableOptions: Q = {},
485
+ limit: D
486
+ } = r, [R, V] = b.useState(null), [st, et] = b.useState({
478
487
  top: 0,
479
488
  left: 0
480
- }), [_, j] = p.useState(!1), T = (l, I) => {
481
- const A = [...o], [v] = A.splice(l, 1);
482
- A.splice(I, 0, v), i(A);
489
+ }), [p, k] = b.useState(!1), S = (d, B) => {
490
+ const O = [...c], [$] = O.splice(d, 1);
491
+ O.splice(B, 0, $), a(O);
483
492
  };
484
- p.useEffect(() => {
485
- const l = () => {
486
- R(null), j(!1);
493
+ b.useEffect(() => {
494
+ const d = () => {
495
+ V(null), k(!1);
487
496
  };
488
- return document.body.addEventListener("click", l), R(null), j(!1), () => {
489
- R(null), j(!1), document.body.removeEventListener("click", l);
497
+ return document.body.addEventListener("click", d), V(null), k(!1), () => {
498
+ V(null), k(!1), document.body.removeEventListener("click", d);
490
499
  };
491
- }, []), p.useEffect(() => {
492
- if (q) {
493
- const l = [...o].map((I) => I.id === q.id ? q : I);
494
- i(l);
500
+ }, []), b.useEffect(() => {
501
+ if (R) {
502
+ const d = [...c].map((B) => B.id === R.id ? R : B);
503
+ a(d);
495
504
  }
496
- }, [q]);
497
- const N = (l, I) => {
498
- l.stopPropagation(), j(!0);
499
- const A = l.target.getBoundingClientRect(), v = 500, J = window.innerHeight;
500
- let L = A.top + window.scrollY;
501
- L + v > J && (L = J - v - 20), et({
502
- top: L - 80,
503
- left: A.left - 30
504
- }), R(I);
505
+ }, [R]);
506
+ const C = (d, B) => {
507
+ d.stopPropagation(), k(!0);
508
+ const O = d.target.getBoundingClientRect(), $ = 500, W = window.innerHeight;
509
+ let M = O.top + window.scrollY;
510
+ M + $ > W && (M = W - $ - 20), et({
511
+ top: M - 80,
512
+ left: O.left - 30
513
+ }), V(B);
505
514
  };
506
- function U(l) {
507
- if (m)
508
- return l ? /* @__PURE__ */ t.jsx(
515
+ function F(d) {
516
+ if (h)
517
+ return d ? /* @__PURE__ */ t.jsx(
509
518
  "img",
510
519
  {
511
- src: `https://imagedelivery.net/${l[0]}/w=1000`,
520
+ src: `https://imagedelivery.net/${d[0]}/w=1000`,
512
521
  alt: "image",
513
522
  width: 16,
514
523
  height: 16
515
524
  }
516
525
  ) : /* @__PURE__ */ t.jsx(
517
- h,
526
+ x,
518
527
  {
519
528
  name: "Image",
520
529
  width: 16,
@@ -523,10 +532,10 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
523
532
  }
524
533
  );
525
534
  }
526
- const O = (l, I) => {
527
- const A = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
528
- k && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
529
- h,
535
+ const q = (d, B) => {
536
+ const O = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
537
+ y && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
538
+ x,
530
539
  {
531
540
  name: "DotsSixVertical",
532
541
  hoverable: !0,
@@ -534,145 +543,145 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
534
543
  height: 20
535
544
  }
536
545
  ) }),
537
- $ === "select" && /* @__PURE__ */ t.jsx(
538
- G,
546
+ o === "select" && /* @__PURE__ */ t.jsx(
547
+ Y,
539
548
  {
540
- onChange: (v) => {
541
- const L = [...o].map((M) => M.id === l.id ? {
542
- ...l,
543
- name: v
544
- } : M);
545
- R({
546
- ...l,
547
- name: v
548
- }), i([...L]);
549
+ onChange: ($) => {
550
+ const M = [...c].map((E) => E.id === d.id ? {
551
+ ...d,
552
+ name: $
553
+ } : E);
554
+ V({
555
+ ...d,
556
+ name: $
557
+ }), a([...M]);
549
558
  },
550
- value: l.name,
551
- options: g,
552
- leftAddon: U(l.images)
559
+ value: d.name,
560
+ options: m,
561
+ leftAddon: F(d.images)
553
562
  }
554
563
  ),
555
- $ === "input" && /* @__PURE__ */ t.jsx(
556
- V,
564
+ o === "input" && /* @__PURE__ */ t.jsx(
565
+ G,
557
566
  {
558
- onChange: (v) => {
559
- const L = [...o].map((M) => M.id === l.id ? {
560
- ...l,
561
- name: v
562
- } : M);
563
- i([...L]);
567
+ onChange: ($) => {
568
+ const M = [...c].map((E) => E.id === d.id ? {
569
+ ...d,
570
+ name: $
571
+ } : E);
572
+ a([...M]);
564
573
  },
565
- value: l.name,
566
- placeholder: r
574
+ value: d.name,
575
+ placeholder: _
567
576
  }
568
577
  ),
569
- $ === "image" && /* @__PURE__ */ t.jsx(
570
- ct,
578
+ o === "image" && /* @__PURE__ */ t.jsx(
579
+ ot,
571
580
  {
572
- onChange: (v) => {
573
- const L = [...o].map((M) => M.id === l.id ? {
574
- ...l,
575
- images: v
576
- } : M);
577
- i([...L]);
581
+ onChange: ($) => {
582
+ const M = [...c].map((E) => E.id === d.id ? {
583
+ ...d,
584
+ images: $
585
+ } : E);
586
+ a([...M]);
578
587
  }
579
588
  }
580
589
  ),
581
- /* @__PURE__ */ t.jsxs("div", { className: C.buttons, children: [
582
- d && /* @__PURE__ */ t.jsx(
583
- h,
590
+ /* @__PURE__ */ t.jsxs("div", { className: I.buttons, children: [
591
+ u && /* @__PURE__ */ t.jsx(
592
+ x,
584
593
  {
585
594
  name: "Sliders",
586
595
  hoverable: !0,
587
596
  width: 20,
588
597
  height: 20,
589
- onClick: (v) => N(v, l)
598
+ onClick: ($) => C($, d)
590
599
  }
591
600
  ),
592
- f && /* @__PURE__ */ t.jsx(
593
- h,
601
+ v && /* @__PURE__ */ t.jsx(
602
+ x,
594
603
  {
595
604
  name: "Trash",
596
605
  hoverable: !0,
597
606
  width: 20,
598
607
  height: 20,
599
608
  fill: "#C12A2A",
600
- onClick: () => i(o.filter((v) => v.id !== l.id))
609
+ onClick: () => a(c.filter(($) => $.id !== d.id))
601
610
  }
602
611
  )
603
612
  ] })
604
613
  ] });
605
- return k ? /* @__PURE__ */ t.jsx(
606
- me,
614
+ return y ? /* @__PURE__ */ t.jsx(
615
+ he,
607
616
  {
608
- product: l,
609
- index: I,
610
- moveProduct: T,
611
- children: A
617
+ product: d,
618
+ index: B,
619
+ moveProduct: S,
620
+ children: O
612
621
  },
613
- l.id
622
+ d.id
614
623
  ) : /* @__PURE__ */ t.jsx(
615
624
  "div",
616
625
  {
617
- className: C.product,
618
- children: A
626
+ className: I.product,
627
+ children: O
619
628
  },
620
- l.id
629
+ d.id
621
630
  );
622
631
  };
623
- return /* @__PURE__ */ t.jsxs("div", { className: C.productsBlock, children: [
624
- (e || n !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: C.top, children: [
625
- e && /* @__PURE__ */ t.jsx("h3", { className: C.title, children: e }),
632
+ return /* @__PURE__ */ t.jsxs("div", { className: I.productsBlock, children: [
633
+ (e || n !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: I.top, children: [
634
+ e && /* @__PURE__ */ t.jsx("h3", { className: I.title, children: e }),
626
635
  n !== void 0 && /* @__PURE__ */ t.jsx(
627
636
  z,
628
637
  {
629
638
  current: n,
630
- onChange: (l) => s == null ? void 0 : s(l)
639
+ onChange: (d) => s == null ? void 0 : s(d)
631
640
  }
632
641
  )
633
642
  ] }),
634
- q && d && Y && _ && /* @__PURE__ */ t.jsx(
635
- re,
643
+ R && u && N && p && /* @__PURE__ */ t.jsx(
644
+ de,
636
645
  {
637
- activeItem: q,
638
- setActiveItem: R,
646
+ activeItem: R,
647
+ setActiveItem: V,
639
648
  popupPosition: st,
640
- modalOptions: Y,
641
- setIsOpenModal: j
649
+ modalOptions: N,
650
+ setIsOpenModal: k
642
651
  }
643
652
  ),
644
- B && X && /* @__PURE__ */ t.jsx(xs, { ...X }),
645
- /* @__PURE__ */ t.jsxs("div", { className: C.products, children: [
646
- c && /* @__PURE__ */ t.jsx("h5", { className: C.subtitle, children: c }),
647
- k ? /* @__PURE__ */ t.jsx(at, { backend: lt, children: o.map((l, I) => O(l, I)) }) : o.map((l, I) => O(l, I)),
648
- b && /* @__PURE__ */ t.jsxs(
649
- tt,
653
+ P && A && /* @__PURE__ */ t.jsx(bs, { ...A }),
654
+ /* @__PURE__ */ t.jsxs("div", { className: I.products, children: [
655
+ i && /* @__PURE__ */ t.jsx("h5", { className: I.subtitle, children: i }),
656
+ y ? /* @__PURE__ */ t.jsx(rt, { backend: dt, children: c.map((d, B) => q(d, B)) }) : c.map((d, B) => q(d, B)),
657
+ j && /* @__PURE__ */ t.jsxs(
658
+ X,
650
659
  {
651
- className: H(C.button, {
652
- [C.disabled]: !!(S && S <= o.length)
660
+ className: H(I.button, {
661
+ [I.disabled]: !!(D && D <= c.length)
653
662
  }),
654
663
  size: "s",
655
- disabled: !!(S && S <= o.length),
664
+ disabled: !!(D && D <= c.length),
656
665
  onClick: () => {
657
- const l = [...o];
658
- $ === "select" ? l.push({
659
- name: g[0] || `Product ${o.length + 1}`,
660
- id: Z(),
661
- ...y
662
- }) : $ === "input" ? l.push({
666
+ const d = [...c];
667
+ o === "select" ? d.push({
668
+ name: m[0] || `Product ${c.length + 1}`,
669
+ id: tt(),
670
+ ...Q
671
+ }) : o === "input" ? d.push({
663
672
  name: "",
664
- id: Z(),
665
- ...y
666
- }) : l.push({
667
- name: `Image ${o.length + 1}`,
668
- id: Z(),
669
- ...y
670
- }), i(l);
673
+ id: tt(),
674
+ ...Q
675
+ }) : d.push({
676
+ name: `Image ${c.length + 1}`,
677
+ id: tt(),
678
+ ...Q
679
+ }), a(d);
671
680
  },
672
681
  children: [
673
682
  /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
674
683
  /* @__PURE__ */ t.jsx(
675
- h,
684
+ x,
676
685
  {
677
686
  name: "Plus",
678
687
  width: 16,
@@ -683,57 +692,57 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
683
692
  }
684
693
  )
685
694
  ] }),
686
- a !== void 0 && /* @__PURE__ */ t.jsx(mt, { items: a })
695
+ l !== void 0 && /* @__PURE__ */ t.jsx(ht, { items: l })
687
696
  ] });
688
- }, pe = "_subtitle_41klp_1", ge = "_header_41klp_8", xe = "_text_41klp_9", be = "_productsBlock_41klp_10", fe = "_buttonsBlock_41klp_11", je = "_top_41klp_21", ve = "_itemsBlock_41klp_28", ke = "_typeTexts_41klp_34", ye = "_block_41klp_40", $e = "_active_41klp_51", Ne = "_products_41klp_10", we = "_product_41klp_10", Ce = "_button_41klp_11", Ie = "_image_41klp_79", Pe = "_info_41klp_86", Be = "_name_41klp_97", Te = "_buttons_41klp_11", Ae = "_modal_41klp_107", Se = "_other_41klp_124", Oe = "_options_41klp_130", F = {
689
- subtitle: pe,
690
- header: ge,
691
- text: xe,
692
- productsBlock: be,
697
+ }, ge = "_subtitle_41klp_1", xe = "_header_41klp_8", be = "_text_41klp_9", je = "_productsBlock_41klp_10", fe = "_buttonsBlock_41klp_11", ve = "_top_41klp_21", ye = "_itemsBlock_41klp_28", ke = "_typeTexts_41klp_34", $e = "_block_41klp_40", Ne = "_active_41klp_51", Ce = "_products_41klp_10", we = "_product_41klp_10", Ie = "_button_41klp_11", Pe = "_image_41klp_79", Be = "_info_41klp_86", Te = "_name_41klp_97", Ae = "_buttons_41klp_11", Se = "_modal_41klp_107", Oe = "_other_41klp_124", De = "_options_41klp_130", U = {
698
+ subtitle: ge,
699
+ header: xe,
700
+ text: be,
701
+ productsBlock: je,
693
702
  buttonsBlock: fe,
694
- top: je,
695
- itemsBlock: ve,
703
+ top: ve,
704
+ itemsBlock: ye,
696
705
  typeTexts: ke,
697
- block: ye,
698
- active: $e,
699
- products: Ne,
706
+ block: $e,
707
+ active: Ne,
708
+ products: Ce,
700
709
  product: we,
701
- button: Ce,
702
- image: Ie,
703
- info: Pe,
704
- name: Be,
705
- buttons: Te,
706
- modal: Ae,
707
- other: Se,
708
- options: Oe
709
- }, De = (u) => {
710
- const { activeButton: n, setActiveButton: s, popupPosition: o } = u, [i, a] = p.useState(n.typesText), [e, c] = p.useState(n.destination), [d, k] = p.useState(n.link || ""), [m, f] = p.useState(n.text || "");
711
- return p.useEffect(() => {
710
+ button: Ie,
711
+ image: Pe,
712
+ info: Be,
713
+ name: Te,
714
+ buttons: Ae,
715
+ modal: Se,
716
+ other: Oe,
717
+ options: De
718
+ }, qe = (r) => {
719
+ const { activeButton: n, setActiveButton: s, popupPosition: c } = r, [a, l] = b.useState(n.typesText), [e, i] = b.useState(n.destination), [u, y] = b.useState(n.link || ""), [h, v] = b.useState(n.text || "");
720
+ return b.useEffect(() => {
712
721
  s({
713
722
  ...n,
714
723
  ...{
715
- text: m,
716
- link: d,
724
+ text: h,
725
+ link: u,
717
726
  destination: e,
718
- typesText: i
727
+ typesText: a
719
728
  }
720
729
  });
721
- }, [i, e, d, m]), /* @__PURE__ */ t.jsxs(
730
+ }, [a, e, u, h]), /* @__PURE__ */ t.jsxs(
722
731
  "div",
723
732
  {
724
- className: F.modal,
725
- onClick: (b) => {
726
- b.stopPropagation();
733
+ className: U.modal,
734
+ onClick: (j) => {
735
+ j.stopPropagation();
727
736
  },
728
737
  style: {
729
- top: `${o.top}px`,
730
- left: `${o.left}px`
738
+ top: `${c.top}px`,
739
+ left: `${c.left}px`
731
740
  },
732
741
  children: [
733
- /* @__PURE__ */ t.jsxs("div", { className: F.top, children: [
742
+ /* @__PURE__ */ t.jsxs("div", { className: U.top, children: [
734
743
  /* @__PURE__ */ t.jsx("h3", { children: n.type }),
735
744
  /* @__PURE__ */ t.jsx(
736
- h,
745
+ x,
737
746
  {
738
747
  name: "X",
739
748
  height: 20,
@@ -743,18 +752,18 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
743
752
  }
744
753
  )
745
754
  ] }),
746
- /* @__PURE__ */ t.jsxs("div", { className: F.options, children: [
755
+ /* @__PURE__ */ t.jsxs("div", { className: U.options, children: [
747
756
  /* @__PURE__ */ t.jsx(
748
- G,
757
+ Y,
749
758
  {
750
759
  label: "Destination",
751
- onChange: (b) => c(b),
760
+ onChange: (j) => i(j),
752
761
  options: ["Go to Page", "Open Link"],
753
762
  value: e
754
763
  }
755
764
  ),
756
765
  e === "Go to Page" ? /* @__PURE__ */ t.jsx(
757
- G,
766
+ Y,
758
767
  {
759
768
  label: "Go to",
760
769
  onChange: () => {
@@ -763,10 +772,10 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
763
772
  value: "Homepage"
764
773
  }
765
774
  ) : /* @__PURE__ */ t.jsx(
766
- V,
775
+ G,
767
776
  {
768
- onChange: (b) => k(b),
769
- value: d,
777
+ onChange: (j) => y(j),
778
+ value: u,
770
779
  placeholder: "https://",
771
780
  label: "Link"
772
781
  }
@@ -779,115 +788,115 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
779
788
  }
780
789
  ),
781
790
  /* @__PURE__ */ t.jsx(
782
- it,
791
+ lt,
783
792
  {
784
- onChange: (b) => f(b),
785
- value: m,
793
+ onChange: (j) => v(j),
794
+ value: h,
786
795
  label: "Text",
787
796
  maxLength: 150
788
797
  }
789
798
  ),
790
799
  /* @__PURE__ */ t.jsx(
791
- _t,
800
+ pt,
792
801
  {
793
- typesText: i,
794
- setTypesText: a
802
+ typesText: a,
803
+ setTypesText: l
795
804
  }
796
805
  )
797
806
  ] })
798
807
  ]
799
808
  }
800
809
  );
801
- }, Le = "_subtitle_1y5sw_1", qe = "_header_1y5sw_8", Re = "_text_1y5sw_9", Me = "_productsBlock_1y5sw_10", He = "_buttonsBlock_1y5sw_11", Ee = "_top_1y5sw_22", ze = "_itemsBlock_1y5sw_29", Ue = "_typeTexts_1y5sw_35", Fe = "_block_1y5sw_41", Ve = "_active_1y5sw_52", Ge = "_products_1y5sw_10", Xe = "_product_1y5sw_10", Ye = "_button_1y5sw_11", Je = "_image_1y5sw_80", Ke = "_info_1y5sw_87", Qe = "_name_1y5sw_98", We = "_buttons_1y5sw_11", Ze = "_modal_1y5sw_108", ts = "_other_1y5sw_125", es = "_options_1y5sw_131", W = {
810
+ }, Le = "_subtitle_1y5sw_1", Me = "_header_1y5sw_8", He = "_text_1y5sw_9", Re = "_productsBlock_1y5sw_10", Ve = "_buttonsBlock_1y5sw_11", Ee = "_top_1y5sw_22", ze = "_itemsBlock_1y5sw_29", Fe = "_typeTexts_1y5sw_35", Ue = "_block_1y5sw_41", Ge = "_active_1y5sw_52", Ye = "_products_1y5sw_10", Xe = "_product_1y5sw_10", Qe = "_button_1y5sw_11", We = "_image_1y5sw_80", Je = "_info_1y5sw_87", Ke = "_name_1y5sw_98", Ze = "_buttons_1y5sw_11", ts = "_modal_1y5sw_108", es = "_other_1y5sw_125", ss = "_options_1y5sw_131", Z = {
802
811
  subtitle: Le,
803
- header: qe,
804
- text: Re,
805
- productsBlock: Me,
806
- buttonsBlock: He,
812
+ header: Me,
813
+ text: He,
814
+ productsBlock: Re,
815
+ buttonsBlock: Ve,
807
816
  top: Ee,
808
817
  itemsBlock: ze,
809
- typeTexts: Ue,
810
- block: Fe,
811
- active: Ve,
812
- products: Ge,
818
+ typeTexts: Fe,
819
+ block: Ue,
820
+ active: Ge,
821
+ products: Ye,
813
822
  product: Xe,
814
- button: Ye,
815
- image: Je,
816
- info: Ke,
817
- name: Qe,
818
- buttons: We,
819
- modal: Ze,
820
- other: ts,
821
- options: es
822
- }, ss = (u) => {
823
- const { buttons: n, setButtons: s, deletable: o = !0, addable: i = !0 } = u, [a, e] = p.useState(null), [c, d] = p.useState({
823
+ button: Qe,
824
+ image: We,
825
+ info: Je,
826
+ name: Ke,
827
+ buttons: Ze,
828
+ modal: ts,
829
+ other: es,
830
+ options: ss
831
+ }, ns = (r) => {
832
+ const { buttons: n, setButtons: s, deletable: c = !0, addable: a = !0 } = r, [l, e] = b.useState(null), [i, u] = b.useState({
824
833
  top: 0,
825
834
  left: 0
826
835
  });
827
- p.useEffect(() => {
828
- const m = () => {
836
+ b.useEffect(() => {
837
+ const h = () => {
829
838
  e(null);
830
839
  };
831
- return document.body.addEventListener("click", m), e(null), () => {
832
- e(null), document.body.removeEventListener("click", m);
840
+ return document.body.addEventListener("click", h), e(null), () => {
841
+ e(null), document.body.removeEventListener("click", h);
833
842
  };
834
- }, []), p.useEffect(() => {
835
- if (a) {
836
- const m = [...n].map((f) => f.id === a.id ? a : f);
837
- s(m);
843
+ }, []), b.useEffect(() => {
844
+ if (l) {
845
+ const h = [...n].map((v) => v.id === l.id ? l : v);
846
+ s(h);
838
847
  }
839
- }, [a]);
840
- const k = (m, f) => {
841
- m.stopPropagation();
842
- const b = m.target.getBoundingClientRect(), $ = 490, r = window.innerHeight;
843
- let g = b.top + window.scrollY;
844
- g + $ > r && (g = r - $ - 20), d({
845
- top: g,
846
- left: b.left - 30
847
- }), e(f);
848
+ }, [l]);
849
+ const y = (h, v) => {
850
+ h.stopPropagation();
851
+ const j = h.target.getBoundingClientRect(), o = 490, _ = window.innerHeight;
852
+ let m = j.top + window.scrollY;
853
+ m + o > _ && (m = _ - o - 20), u({
854
+ top: m,
855
+ left: j.left - 30
856
+ }), e(v);
848
857
  };
849
- return /* @__PURE__ */ t.jsxs("div", { className: W.products, children: [
850
- /* @__PURE__ */ t.jsx("h5", { className: W.subtitle, children: "Button Type" }),
851
- n.map((m) => /* @__PURE__ */ t.jsxs(
858
+ return /* @__PURE__ */ t.jsxs("div", { className: Z.products, children: [
859
+ /* @__PURE__ */ t.jsx("h5", { className: Z.subtitle, children: "Button Type" }),
860
+ n.map((h) => /* @__PURE__ */ t.jsxs(
852
861
  "div",
853
862
  {
854
- className: W.product,
863
+ className: Z.product,
855
864
  children: [
856
865
  /* @__PURE__ */ t.jsx(
857
- G,
866
+ Y,
858
867
  {
859
- onChange: (f) => {
860
- const $ = [...n].map((r) => r.id === m.id ? {
861
- ...m,
862
- type: f
863
- } : r);
864
- s($);
868
+ onChange: (v) => {
869
+ const o = [...n].map((_) => _.id === h.id ? {
870
+ ...h,
871
+ type: v
872
+ } : _);
873
+ s(o);
865
874
  },
866
- value: m.type,
875
+ value: h.type,
867
876
  options: ["Primary", "Secondary", "Tertiary"]
868
877
  }
869
878
  ),
870
- /* @__PURE__ */ t.jsxs("div", { className: W.buttons, children: [
879
+ /* @__PURE__ */ t.jsxs("div", { className: Z.buttons, children: [
871
880
  /* @__PURE__ */ t.jsx(
872
- h,
881
+ x,
873
882
  {
874
883
  name: "Sliders",
875
884
  hoverable: !0,
876
885
  width: 20,
877
886
  height: 20,
878
- onClick: (f) => {
879
- k(f, m);
887
+ onClick: (v) => {
888
+ y(v, h);
880
889
  }
881
890
  }
882
891
  ),
883
- o && /* @__PURE__ */ t.jsx(
884
- h,
892
+ c && /* @__PURE__ */ t.jsx(
893
+ x,
885
894
  {
886
895
  name: "Trash",
887
896
  hoverable: !0,
888
897
  onClick: () => {
889
- const f = n.filter((b) => b.id !== m.id);
890
- s(f);
898
+ const v = n.filter((j) => j.id !== h.id);
899
+ s(v);
891
900
  },
892
901
  width: 20,
893
902
  height: 20,
@@ -897,35 +906,35 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
897
906
  ] })
898
907
  ]
899
908
  },
900
- m.id
909
+ h.id
901
910
  )),
902
- a && /* @__PURE__ */ t.jsx(
903
- De,
911
+ l && /* @__PURE__ */ t.jsx(
912
+ qe,
904
913
  {
905
- activeButton: a,
914
+ activeButton: l,
906
915
  setActiveButton: e,
907
- popupPosition: c
916
+ popupPosition: i
908
917
  }
909
918
  ),
910
- i && /* @__PURE__ */ t.jsxs(
911
- tt,
919
+ a && /* @__PURE__ */ t.jsxs(
920
+ X,
912
921
  {
913
- className: W.button,
922
+ className: Z.button,
914
923
  size: "s",
915
924
  onClick: () => {
916
- const m = [...n];
917
- m.push({
925
+ const h = [...n];
926
+ h.push({
918
927
  type: "Primary",
919
- id: Z(),
928
+ id: tt(),
920
929
  typesText: [],
921
930
  destination: "Go to Page",
922
931
  text: ""
923
- }), s(m);
932
+ }), s(h);
924
933
  },
925
934
  children: [
926
935
  /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
927
936
  /* @__PURE__ */ t.jsx(
928
- h,
937
+ x,
929
938
  {
930
939
  name: "Plus",
931
940
  width: 16,
@@ -936,50 +945,50 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
936
945
  }
937
946
  )
938
947
  ] });
939
- }, mn = (u) => {
940
- const { isActiveButtons: n, setIsActiveButtons: s, buttons: o, setButtons: i } = u;
941
- return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs("div", { className: F.buttonsBlock, children: [
942
- /* @__PURE__ */ t.jsxs("div", { className: F.top, children: [
943
- /* @__PURE__ */ t.jsx("h3", { className: F.title, children: "Buttons" }),
948
+ }, Rn = (r) => {
949
+ const { isActiveButtons: n, setIsActiveButtons: s, buttons: c, setButtons: a } = r;
950
+ return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs("div", { className: U.buttonsBlock, children: [
951
+ /* @__PURE__ */ t.jsxs("div", { className: U.top, children: [
952
+ /* @__PURE__ */ t.jsx("h3", { className: U.title, children: "Buttons" }),
944
953
  /* @__PURE__ */ t.jsx(
945
954
  z,
946
955
  {
947
956
  current: n,
948
- onChange: (a) => s(a)
957
+ onChange: (l) => s(l)
949
958
  }
950
959
  )
951
960
  ] }),
952
961
  /* @__PURE__ */ t.jsx(
953
- ss,
962
+ ns,
954
963
  {
955
- buttons: o,
956
- setButtons: i
964
+ buttons: c,
965
+ setButtons: a
957
966
  }
958
967
  )
959
968
  ] }) });
960
- }, ns = "_wrapper_tn7gb_1", os = "_subtitle_tn7gb_7", cs = "_content_tn7gb_14", is = "_range_tn7gb_21", as = "_track_tn7gb_26", ls = "_progress_tn7gb_35", rs = "_dots_tn7gb_45", ds = "_dot_tn7gb_45", us = "_active_tn7gb_62", _s = "_input_tn7gb_74", ms = "_countBlock_tn7gb_88", hs = "_count_tn7gb_88", ps = "_controls_tn7gb_103", gs = "_button_tn7gb_108", w = {
961
- wrapper: ns,
969
+ }, cs = "_wrapper_tn7gb_1", os = "_subtitle_tn7gb_7", is = "_content_tn7gb_14", as = "_range_tn7gb_21", ls = "_track_tn7gb_26", rs = "_progress_tn7gb_35", ds = "_dots_tn7gb_45", us = "_dot_tn7gb_45", _s = "_active_tn7gb_62", ps = "_input_tn7gb_74", hs = "_countBlock_tn7gb_88", ms = "_count_tn7gb_88", gs = "_controls_tn7gb_103", xs = "_button_tn7gb_108", w = {
970
+ wrapper: cs,
962
971
  subtitle: os,
963
- content: cs,
964
- range: is,
965
- track: as,
966
- progress: ls,
967
- dots: rs,
968
- dot: ds,
969
- active: us,
970
- input: _s,
971
- countBlock: ms,
972
- count: hs,
973
- controls: ps,
974
- button: gs
975
- }, xs = (u) => {
976
- const { label: n, min: s = 1, max: o = 4, step: i = 1, count: a, setCount: e } = u, [c, d] = p.useState(!1), k = Array.from({ length: (o - s) / i + 1 }), m = (a - s) / (o - s) * 100, f = () => {
977
- a < o && e(a + i);
978
- }, b = () => {
979
- a > s && e(a - i);
980
- }, $ = (r) => {
981
- const g = s + r * i;
982
- e(g);
972
+ content: is,
973
+ range: as,
974
+ track: ls,
975
+ progress: rs,
976
+ dots: ds,
977
+ dot: us,
978
+ active: _s,
979
+ input: ps,
980
+ countBlock: hs,
981
+ count: ms,
982
+ controls: gs,
983
+ button: xs
984
+ }, bs = (r) => {
985
+ const { label: n, min: s = 1, max: c = 4, step: a = 1, count: l, setCount: e } = r, [i, u] = b.useState(!1), y = Array.from({ length: (c - s) / a + 1 }), h = (l - s) / (c - s) * 100, v = () => {
986
+ l < c && e(l + a);
987
+ }, j = () => {
988
+ l > s && e(l - a);
989
+ }, o = (_) => {
990
+ const m = s + _ * a;
991
+ e(m);
983
992
  };
984
993
  return /* @__PURE__ */ t.jsxs("div", { className: w.wrapper, children: [
985
994
  n && /* @__PURE__ */ t.jsx("h5", { className: w.subtitle, children: n }),
@@ -990,23 +999,23 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
990
999
  "div",
991
1000
  {
992
1001
  className: w.progress,
993
- style: { width: `${m}%` }
1002
+ style: { width: `${h}%` }
994
1003
  }
995
1004
  ),
996
- /* @__PURE__ */ t.jsx("div", { className: w.dots, children: k.map((r, g) => {
997
- const B = g <= (a - s) / i;
1005
+ /* @__PURE__ */ t.jsx("div", { className: w.dots, children: y.map((_, m) => {
1006
+ const P = m <= (l - s) / a;
998
1007
  return /* @__PURE__ */ t.jsx(
999
1008
  "button",
1000
1009
  {
1001
- onClick: () => $(g),
1010
+ onClick: () => o(m),
1002
1011
  className: H(w.dot, {
1003
- [w.active]: B,
1004
- [w.inactive]: !B,
1005
- [w.dragging]: c
1012
+ [w.active]: P,
1013
+ [w.inactive]: !P,
1014
+ [w.dragging]: i
1006
1015
  }),
1007
- "aria-label": `Set value to ${s + g * i}`
1016
+ "aria-label": `Set value to ${s + m * a}`
1008
1017
  },
1009
- g
1018
+ m
1010
1019
  );
1011
1020
  }) }),
1012
1021
  /* @__PURE__ */ t.jsx(
@@ -1014,43 +1023,43 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
1014
1023
  {
1015
1024
  type: "range",
1016
1025
  min: s,
1017
- max: o,
1018
- step: i,
1019
- value: a,
1020
- onChange: (r) => e(Number(r.target.value)),
1021
- onMouseDown: () => d(!0),
1022
- onMouseUp: () => d(!1),
1023
- onTouchStart: () => d(!0),
1024
- onTouchEnd: () => d(!1),
1026
+ max: c,
1027
+ step: a,
1028
+ value: l,
1029
+ onChange: (_) => e(Number(_.target.value)),
1030
+ onMouseDown: () => u(!0),
1031
+ onMouseUp: () => u(!1),
1032
+ onTouchStart: () => u(!0),
1033
+ onTouchEnd: () => u(!1),
1025
1034
  className: w.input
1026
1035
  }
1027
1036
  )
1028
1037
  ] }),
1029
1038
  /* @__PURE__ */ t.jsxs("div", { className: w.countBlock, children: [
1030
1039
  /* @__PURE__ */ t.jsx(
1031
- V,
1040
+ G,
1032
1041
  {
1033
1042
  type: "number",
1034
1043
  min: s,
1035
- max: o,
1044
+ max: c,
1036
1045
  paddingless: !0,
1037
- onChange: (r) => {
1038
- const g = Number(r);
1039
- g > o ? e(o) : g < s ? e(s) : e(g);
1046
+ onChange: (_) => {
1047
+ const m = Number(_);
1048
+ m > c ? e(c) : m < s ? e(s) : e(m);
1040
1049
  },
1041
- value: String(a)
1050
+ value: String(l)
1042
1051
  }
1043
1052
  ),
1044
1053
  /* @__PURE__ */ t.jsxs("div", { className: w.controls, children: [
1045
1054
  /* @__PURE__ */ t.jsx(
1046
1055
  "button",
1047
1056
  {
1048
- onClick: f,
1049
- disabled: a >= o,
1057
+ onClick: v,
1058
+ disabled: l >= c,
1050
1059
  className: w.button,
1051
1060
  "aria-label": "Increment count",
1052
1061
  children: /* @__PURE__ */ t.jsx(
1053
- h,
1062
+ x,
1054
1063
  {
1055
1064
  name: "CaretUp",
1056
1065
  width: 15,
@@ -1062,12 +1071,12 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
1062
1071
  /* @__PURE__ */ t.jsx(
1063
1072
  "button",
1064
1073
  {
1065
- onClick: b,
1066
- disabled: a <= s,
1074
+ onClick: j,
1075
+ disabled: l <= s,
1067
1076
  className: w.button,
1068
1077
  "aria-label": "Decrement count",
1069
1078
  children: /* @__PURE__ */ t.jsx(
1070
- h,
1079
+ x,
1071
1080
  {
1072
1081
  name: "CaretDown",
1073
1082
  width: 15,
@@ -1080,64 +1089,64 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
1080
1089
  ] })
1081
1090
  ] })
1082
1091
  ] });
1083
- }, bs = "_subtitle_1nl8x_1", fs = "_header_1nl8x_8", js = "_text_1nl8x_9", vs = "_productsBlock_1nl8x_10", ks = "_top_1nl8x_22", ys = "_itemsBlock_1nl8x_29", $s = "_typeTexts_1nl8x_35", Ns = "_block_1nl8x_41", ws = "_active_1nl8x_52", Cs = "_products_1nl8x_10", Is = "_product_1nl8x_10", Ps = "_button_1nl8x_70", Bs = "_image_1nl8x_80", Ts = "_info_1nl8x_87", As = "_name_1nl8x_98", Ss = "_buttons_1nl8x_102", Os = "_modal_1nl8x_108", Ds = "_link_1nl8x_126", Ls = "_modalOptions_1nl8x_132", P = {
1084
- subtitle: bs,
1092
+ }, js = "_subtitle_1nl8x_1", fs = "_header_1nl8x_8", vs = "_text_1nl8x_9", ys = "_productsBlock_1nl8x_10", ks = "_top_1nl8x_22", $s = "_itemsBlock_1nl8x_29", Ns = "_typeTexts_1nl8x_35", Cs = "_block_1nl8x_41", ws = "_active_1nl8x_52", Is = "_products_1nl8x_10", Ps = "_product_1nl8x_10", Bs = "_button_1nl8x_70", Ts = "_image_1nl8x_80", As = "_info_1nl8x_87", Ss = "_name_1nl8x_98", Os = "_buttons_1nl8x_102", Ds = "_modal_1nl8x_108", qs = "_link_1nl8x_126", Ls = "_modalOptions_1nl8x_132", T = {
1093
+ subtitle: js,
1085
1094
  header: fs,
1086
- text: js,
1087
- productsBlock: vs,
1095
+ text: vs,
1096
+ productsBlock: ys,
1088
1097
  top: ks,
1089
- itemsBlock: ys,
1090
- typeTexts: $s,
1091
- block: Ns,
1098
+ itemsBlock: $s,
1099
+ typeTexts: Ns,
1100
+ block: Cs,
1092
1101
  active: ws,
1093
- products: Cs,
1094
- product: Is,
1095
- button: Ps,
1096
- image: Bs,
1097
- info: Ts,
1098
- name: As,
1099
- buttons: Ss,
1100
- modal: Os,
1101
- link: Ds,
1102
+ products: Is,
1103
+ product: Ps,
1104
+ button: Bs,
1105
+ image: Ts,
1106
+ info: As,
1107
+ name: Ss,
1108
+ buttons: Os,
1109
+ modal: Ds,
1110
+ link: qs,
1102
1111
  modalOptions: Ls
1103
- }, qs = (u) => {
1104
- const { activeItem: n, setActiveItem: s, popupPosition: o, setIsOpenModal: i } = u;
1112
+ }, Ms = (r) => {
1113
+ const { activeItem: n, setActiveItem: s, popupPosition: c, setIsOpenModal: a } = r;
1105
1114
  return /* @__PURE__ */ t.jsxs(
1106
1115
  "div",
1107
1116
  {
1108
- className: P.modal,
1109
- onClick: (a) => {
1110
- a.stopPropagation();
1117
+ className: T.modal,
1118
+ onClick: (l) => {
1119
+ l.stopPropagation();
1111
1120
  },
1112
1121
  style: {
1113
- top: `${o.top}px`,
1114
- left: `${o.left}px`
1122
+ top: `${c.top}px`,
1123
+ left: `${c.left}px`
1115
1124
  },
1116
1125
  children: [
1117
- /* @__PURE__ */ t.jsxs("div", { className: P.top, children: [
1126
+ /* @__PURE__ */ t.jsxs("div", { className: T.top, children: [
1118
1127
  /* @__PURE__ */ t.jsx("h3", { children: n.name }),
1119
1128
  /* @__PURE__ */ t.jsx(
1120
- h,
1129
+ x,
1121
1130
  {
1122
1131
  name: "X",
1123
1132
  height: 20,
1124
1133
  width: 20,
1125
1134
  hoverable: !0,
1126
1135
  onClick: () => {
1127
- i(!1), s(null);
1136
+ a(!1), s(null);
1128
1137
  }
1129
1138
  }
1130
1139
  )
1131
1140
  ] }),
1132
- /* @__PURE__ */ t.jsx("div", { className: P.modalOptions, children: /* @__PURE__ */ t.jsx(
1133
- ct,
1141
+ /* @__PURE__ */ t.jsx("div", { className: T.modalOptions, children: /* @__PURE__ */ t.jsx(
1142
+ ot,
1134
1143
  {
1135
1144
  label: "Put up an attractive image",
1136
- onChange: (a) => {
1145
+ onChange: (l) => {
1137
1146
  const e = {
1138
1147
  ...n,
1139
- images: a,
1140
- imagePath: a[0]
1148
+ images: l,
1149
+ imagePath: l[0]
1141
1150
  };
1142
1151
  s(e);
1143
1152
  }
@@ -1146,84 +1155,84 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
1146
1155
  ]
1147
1156
  }
1148
1157
  );
1149
- }, Rs = (u) => {
1150
- const { index: n, moveProduct: s, children: o } = u, [, i] = rt({
1158
+ }, Hs = (r) => {
1159
+ const { index: n, moveProduct: s, children: c } = r, [, a] = ut({
1151
1160
  accept: "product",
1152
- hover(c) {
1153
- c.index !== n && (s(c.index, n), c.index = n);
1161
+ hover(i) {
1162
+ i.index !== n && (s(i.index, n), i.index = n);
1154
1163
  }
1155
- }), [{ isDragging: a }, e] = dt({
1164
+ }), [{ isDragging: l }, e] = _t({
1156
1165
  type: "product",
1157
1166
  item: { index: n },
1158
- collect: (c) => ({
1159
- isDragging: c.isDragging()
1167
+ collect: (i) => ({
1168
+ isDragging: i.isDragging()
1160
1169
  })
1161
1170
  });
1162
1171
  return /* @__PURE__ */ t.jsx(
1163
1172
  "div",
1164
1173
  {
1165
- ref: (c) => e(i(c)),
1166
- className: `${P.product} ${a ? P.dragging : ""}`,
1167
- children: o
1174
+ ref: (i) => e(a(i)),
1175
+ className: `${T.product} ${l ? T.dragging : ""}`,
1176
+ children: c
1168
1177
  }
1169
1178
  );
1170
- }, hn = (u) => {
1179
+ }, Vn = (r) => {
1171
1180
  const {
1172
1181
  isActiveItems: n,
1173
1182
  setIsActiveItems: s,
1174
- items: o,
1175
- setItems: i,
1176
- other: a,
1183
+ items: c,
1184
+ setItems: a,
1185
+ other: l,
1177
1186
  title: e,
1178
- subtitle: c,
1179
- editable: d = !0,
1180
- draggable: k = !1,
1181
- withImage: m = !1,
1182
- deletable: f = !0,
1183
- addable: b = !0,
1184
- itemsType: $,
1185
- itemsOptions: r
1186
- } = u, [g, B] = p.useState(null), [X, Y] = p.useState({
1187
+ subtitle: i,
1188
+ editable: u = !0,
1189
+ draggable: y = !1,
1190
+ withImage: h = !1,
1191
+ deletable: v = !0,
1192
+ addable: j = !0,
1193
+ itemsType: o,
1194
+ itemsOptions: _
1195
+ } = r, [m, P] = b.useState(null), [A, N] = b.useState({
1187
1196
  top: 0,
1188
1197
  left: 0
1189
- }), [y, S] = p.useState(!1), q = (_, j) => {
1190
- const T = [...o], [N] = T.splice(_, 1);
1191
- T.splice(j, 0, N), i(T);
1198
+ }), [Q, D] = b.useState(!1), R = (p, k) => {
1199
+ const S = [...c], [C] = S.splice(p, 1);
1200
+ S.splice(k, 0, C), a(S);
1192
1201
  };
1193
- p.useEffect(() => {
1194
- const _ = () => {
1195
- B(null), S(!1);
1202
+ b.useEffect(() => {
1203
+ const p = () => {
1204
+ P(null), D(!1);
1196
1205
  };
1197
- return document.body.addEventListener("click", _), B(null), S(!1), () => {
1198
- B(null), S(!1), document.body.removeEventListener("click", _);
1206
+ return document.body.addEventListener("click", p), P(null), D(!1), () => {
1207
+ P(null), D(!1), document.body.removeEventListener("click", p);
1199
1208
  };
1200
- }, []), p.useEffect(() => {
1201
- if (g) {
1202
- const _ = [...o].map((j) => j.id === g.id ? g : j);
1203
- i(_);
1209
+ }, []), b.useEffect(() => {
1210
+ if (m) {
1211
+ const p = [...c].map((k) => k.id === m.id ? m : k);
1212
+ a(p);
1204
1213
  }
1205
- }, [g]);
1206
- const R = (_, j) => {
1207
- _.stopPropagation();
1208
- const T = _.target.getBoundingClientRect(), N = 100, U = window.innerHeight;
1209
- let O = T.top + window.scrollY;
1210
- O + N > U && (O = U - N - 20), S(!0), Y({
1211
- top: O - 80,
1212
- left: T.left - 30
1213
- }), B(j);
1214
+ }, [m]);
1215
+ const V = (p, k) => {
1216
+ p.stopPropagation();
1217
+ const S = p.target.getBoundingClientRect(), C = 100, F = window.innerHeight;
1218
+ let q = S.top + window.scrollY;
1219
+ q + C > F && (q = F - C - 20), D(!0), N({
1220
+ top: q - 80,
1221
+ left: S.left - 30
1222
+ }), P(k);
1214
1223
  };
1215
- function st(_) {
1216
- if (m)
1217
- return _ ? /* @__PURE__ */ t.jsx(
1224
+ function st(p) {
1225
+ if (h)
1226
+ return p ? /* @__PURE__ */ t.jsx(
1218
1227
  "img",
1219
1228
  {
1220
- src: `https://imagedelivery.net/${_}/w=1000`,
1229
+ src: `https://imagedelivery.net/${p}/w=1000`,
1221
1230
  alt: "image",
1222
1231
  width: 16,
1223
1232
  height: 16
1224
1233
  }
1225
1234
  ) : /* @__PURE__ */ t.jsx(
1226
- h,
1235
+ x,
1227
1236
  {
1228
1237
  name: "Image",
1229
1238
  width: 16,
@@ -1232,10 +1241,10 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
1232
1241
  }
1233
1242
  );
1234
1243
  }
1235
- const et = (_, j) => {
1236
- const T = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
1237
- k && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
1238
- h,
1244
+ const et = (p, k) => {
1245
+ const S = /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
1246
+ y && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
1247
+ x,
1239
1248
  {
1240
1249
  name: "DotsSixVertical",
1241
1250
  hoverable: !0,
@@ -1243,122 +1252,122 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
1243
1252
  height: 20
1244
1253
  }
1245
1254
  ) }),
1246
- $ === "select" && /* @__PURE__ */ t.jsx(
1247
- G,
1255
+ o === "select" && /* @__PURE__ */ t.jsx(
1256
+ Y,
1248
1257
  {
1249
- onChange: (N) => {
1250
- const U = [...o], O = Number(N.split(" ")[1]), l = r.find((v) => v.id === O);
1251
- if (!l) return;
1252
- const I = {
1253
- ...l.productData.stats,
1254
- newPrice: l.productData.minPrice.amount,
1255
- oldPrice: l.productData.compareAtPrice.amount
1256
- }, A = U.map((v) => v.id === _.id ? {
1257
- ..._,
1258
- name: N,
1259
- listingId: O,
1260
- stats: I
1261
- } : v);
1262
- B({
1263
- ..._,
1264
- name: N,
1265
- listingId: O
1266
- }), i([...A]);
1258
+ onChange: (C) => {
1259
+ const F = [...c], q = Number(C.split(" ")[1]), d = _.find(($) => $.id === q);
1260
+ if (!d) return;
1261
+ const B = {
1262
+ ...d.productData.stats,
1263
+ newPrice: d.productData.minPrice.amount,
1264
+ oldPrice: d.productData.compareAtPrice.amount
1265
+ }, O = F.map(($) => $.id === p.id ? {
1266
+ ...p,
1267
+ name: C,
1268
+ listingId: q,
1269
+ stats: B
1270
+ } : $);
1271
+ P({
1272
+ ...p,
1273
+ name: C,
1274
+ listingId: q
1275
+ }), a([...O]);
1267
1276
  },
1268
- value: _.name,
1269
- options: [...r.map((N) => `Product ${N.id}`)],
1270
- leftAddon: st(_.images[0])
1277
+ value: p.name,
1278
+ options: [..._.map((C) => `Product ${C.id}`)],
1279
+ leftAddon: st(p.images[0])
1271
1280
  }
1272
1281
  ),
1273
- /* @__PURE__ */ t.jsxs("div", { className: P.buttons, children: [
1274
- d && /* @__PURE__ */ t.jsx(
1275
- h,
1282
+ /* @__PURE__ */ t.jsxs("div", { className: T.buttons, children: [
1283
+ u && /* @__PURE__ */ t.jsx(
1284
+ x,
1276
1285
  {
1277
1286
  name: "Sliders",
1278
1287
  hoverable: !0,
1279
1288
  width: 20,
1280
1289
  height: 20,
1281
- onClick: (N) => R(N, _)
1290
+ onClick: (C) => V(C, p)
1282
1291
  }
1283
1292
  ),
1284
- f && /* @__PURE__ */ t.jsx(
1285
- h,
1293
+ v && /* @__PURE__ */ t.jsx(
1294
+ x,
1286
1295
  {
1287
1296
  name: "Trash",
1288
1297
  hoverable: !0,
1289
1298
  width: 20,
1290
1299
  height: 20,
1291
1300
  fill: "#C12A2A",
1292
- onClick: () => i(o.filter((N) => N.id !== _.id))
1301
+ onClick: () => a(c.filter((C) => C.id !== p.id))
1293
1302
  }
1294
1303
  )
1295
1304
  ] })
1296
1305
  ] });
1297
- return k ? /* @__PURE__ */ t.jsx(
1298
- Rs,
1306
+ return y ? /* @__PURE__ */ t.jsx(
1307
+ Hs,
1299
1308
  {
1300
- product: _,
1301
- index: j,
1302
- moveProduct: q,
1303
- children: T
1309
+ product: p,
1310
+ index: k,
1311
+ moveProduct: R,
1312
+ children: S
1304
1313
  },
1305
- _.id
1314
+ p.id
1306
1315
  ) : /* @__PURE__ */ t.jsx(
1307
1316
  "div",
1308
1317
  {
1309
- className: P.product,
1310
- children: T
1318
+ className: T.product,
1319
+ children: S
1311
1320
  },
1312
- _.id
1321
+ p.id
1313
1322
  );
1314
1323
  };
1315
- return /* @__PURE__ */ t.jsxs("div", { className: P.productsBlock, children: [
1316
- (e || n !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: P.top, children: [
1317
- e && /* @__PURE__ */ t.jsx("h3", { className: P.title, children: e }),
1324
+ return /* @__PURE__ */ t.jsxs("div", { className: T.productsBlock, children: [
1325
+ (e || n !== void 0) && /* @__PURE__ */ t.jsxs("div", { className: T.top, children: [
1326
+ e && /* @__PURE__ */ t.jsx("h3", { className: T.title, children: e }),
1318
1327
  n !== void 0 && /* @__PURE__ */ t.jsx(
1319
1328
  z,
1320
1329
  {
1321
1330
  current: n,
1322
- onChange: (_) => s == null ? void 0 : s(_)
1331
+ onChange: (p) => s == null ? void 0 : s(p)
1323
1332
  }
1324
1333
  )
1325
1334
  ] }),
1326
- y && g && /* @__PURE__ */ t.jsx(
1327
- qs,
1335
+ Q && m && /* @__PURE__ */ t.jsx(
1336
+ Ms,
1328
1337
  {
1329
- activeItem: g,
1330
- setActiveItem: B,
1331
- setIsOpenModal: S,
1332
- popupPosition: X
1338
+ activeItem: m,
1339
+ setActiveItem: P,
1340
+ setIsOpenModal: D,
1341
+ popupPosition: A
1333
1342
  }
1334
1343
  ),
1335
- /* @__PURE__ */ t.jsxs("div", { className: P.products, children: [
1336
- c && /* @__PURE__ */ t.jsx("h5", { className: P.subtitle, children: c }),
1337
- k ? /* @__PURE__ */ t.jsx(at, { backend: lt, children: o.map((_, j) => et(_, j)) }) : o.map((_, j) => et(_, j)),
1338
- b && /* @__PURE__ */ t.jsxs(
1339
- tt,
1344
+ /* @__PURE__ */ t.jsxs("div", { className: T.products, children: [
1345
+ i && /* @__PURE__ */ t.jsx("h5", { className: T.subtitle, children: i }),
1346
+ y ? /* @__PURE__ */ t.jsx(rt, { backend: dt, children: c.map((p, k) => et(p, k)) }) : c.map((p, k) => et(p, k)),
1347
+ j && /* @__PURE__ */ t.jsxs(
1348
+ X,
1340
1349
  {
1341
- className: P.button,
1350
+ className: T.button,
1342
1351
  size: "s",
1343
1352
  onClick: () => {
1344
- const _ = [...o], j = r[0].id;
1345
- _.push({
1346
- name: `Product ${j}`,
1347
- id: Z(),
1348
- listingId: j,
1353
+ const p = [...c], k = _[0].id;
1354
+ p.push({
1355
+ name: `Product ${k}`,
1356
+ id: tt(),
1357
+ listingId: k,
1349
1358
  imagePath: "",
1350
1359
  images: [],
1351
1360
  stats: {
1352
- ...r[0].productData.stats,
1353
- newPrice: r[0].productData.minPrice.amount,
1354
- oldPrice: r[0].productData.compareAtPrice.amount
1361
+ ..._[0].productData.stats,
1362
+ newPrice: _[0].productData.minPrice.amount,
1363
+ oldPrice: _[0].productData.compareAtPrice.amount
1355
1364
  }
1356
- }), i(_);
1365
+ }), a(p);
1357
1366
  },
1358
1367
  children: [
1359
1368
  /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
1360
1369
  /* @__PURE__ */ t.jsx(
1361
- h,
1370
+ x,
1362
1371
  {
1363
1372
  name: "Plus",
1364
1373
  width: 16,
@@ -1369,111 +1378,107 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
1369
1378
  }
1370
1379
  )
1371
1380
  ] }),
1372
- a !== void 0 && /* @__PURE__ */ t.jsx(mt, { items: a })
1381
+ l !== void 0 && /* @__PURE__ */ t.jsx(ht, { items: l })
1373
1382
  ] });
1374
- }, Ms = "_options_163bj_1", Hs = "_price_163bj_12", Es = "_oldPrice_163bj_18", zs = "_newPrice_163bj_26", Us = "_meta_163bj_33", Fs = "_info_163bj_39", Vs = "_infoRight_163bj_46", Gs = "_buttons_163bj_52", Xs = "_variants_163bj_59", Ys = "_variant_163bj_59", Js = "_stock_163bj_74", Ks = "_variantInfo_163bj_81", Qs = "_quantity_163bj_87", Ws = "_count_163bj_93", Zs = "_button_163bj_52", tn = "_activeVariant_163bj_110", en = "_chargeTypes_163bj_114", sn = "_charge_163bj_114", nn = "_chargeActive_163bj_131", x = {
1375
- options: Ms,
1376
- price: Hs,
1383
+ }, Rs = "_options_163bj_1", Vs = "_price_163bj_12", Es = "_oldPrice_163bj_18", zs = "_newPrice_163bj_26", Fs = "_meta_163bj_33", Us = "_info_163bj_39", Gs = "_infoRight_163bj_46", Ys = "_buttons_163bj_52", Xs = "_variants_163bj_59", Qs = "_variant_163bj_59", Ws = "_stock_163bj_74", Js = "_variantInfo_163bj_81", Ks = "_quantity_163bj_87", Zs = "_count_163bj_93", tn = "_button_163bj_52", en = "_activeVariant_163bj_110", sn = "_chargeTypes_163bj_114", nn = "_charge_163bj_114", cn = "_chargeActive_163bj_131", f = {
1384
+ options: Rs,
1385
+ price: Vs,
1377
1386
  oldPrice: Es,
1378
1387
  newPrice: zs,
1379
- meta: Us,
1380
- info: Fs,
1381
- infoRight: Vs,
1382
- buttons: Gs,
1388
+ meta: Fs,
1389
+ info: Us,
1390
+ infoRight: Gs,
1391
+ buttons: Ys,
1383
1392
  variants: Xs,
1384
- variant: Ys,
1385
- stock: Js,
1386
- variantInfo: Ks,
1387
- quantity: Qs,
1388
- count: Ws,
1389
- button: Zs,
1390
- activeVariant: tn,
1391
- chargeTypes: en,
1392
- charge: sn,
1393
- chargeActive: nn
1394
- }, pn = (u) => {
1395
- const { variants: n } = u, [s, o] = p.useState(n[0]), i = ut(), [a, e] = p.useState(1), { reset: c, addProductToCart: d, cart: k, getPages: m } = ht();
1396
- function f() {
1397
- if (k.parts.length === 0) {
1398
- const r = encodeURIComponent("product/subscription-test");
1399
- m(r).then(() => {
1400
- console.log(u.id, s.id, a), d({
1401
- productId: u.id,
1402
- productVariantId: s.id,
1403
- quantity: a
1404
- });
1405
- });
1406
- }
1393
+ variant: Qs,
1394
+ stock: Ws,
1395
+ variantInfo: Js,
1396
+ quantity: Ks,
1397
+ count: Zs,
1398
+ button: tn,
1399
+ activeVariant: en,
1400
+ chargeTypes: sn,
1401
+ charge: nn,
1402
+ chargeActive: cn
1403
+ }, En = (r) => {
1404
+ const { variants: n } = r, [s, c] = b.useState(n[0]), a = it(), [l, e] = b.useState(1), { reset: i, addProductToCart: u, getProducts: y } = at();
1405
+ async function h() {
1406
+ await y(), await u({
1407
+ productId: r.id,
1408
+ productVariantId: s.id,
1409
+ quantity: l
1410
+ });
1407
1411
  }
1408
- function b() {
1409
- c(), f(), i("/checkout");
1412
+ function v() {
1413
+ i(), h(), a("/checkout");
1410
1414
  }
1411
- function $(r) {
1412
- if (r >= 864e5) {
1413
- const y = Math.floor(r / 864e5);
1414
- return `${y} ${y === 1 ? "day" : "days"}`;
1415
- } else if (r >= 36e5) {
1416
- const y = Math.floor(r / 36e5);
1417
- return `${y} ${y === 1 ? "hour" : "hours"}`;
1418
- } else if (r >= 6e4) {
1419
- const y = Math.floor(r / 6e4);
1420
- return `${y} ${y === 1 ? "minute" : "minutes"}`;
1415
+ function j(o) {
1416
+ if (o >= 864e5) {
1417
+ const N = Math.floor(o / 864e5);
1418
+ return `${N} ${N === 1 ? "day" : "days"}`;
1419
+ } else if (o >= 36e5) {
1420
+ const N = Math.floor(o / 36e5);
1421
+ return `${N} ${N === 1 ? "hour" : "hours"}`;
1422
+ } else if (o >= 6e4) {
1423
+ const N = Math.floor(o / 6e4);
1424
+ return `${N} ${N === 1 ? "minute" : "minutes"}`;
1421
1425
  } else {
1422
- const y = Math.floor(r / 1e3);
1423
- return `${y} ${y === 1 ? "second" : "seconds"}`;
1426
+ const N = Math.floor(o / 1e3);
1427
+ return `${N} ${N === 1 ? "second" : "seconds"}`;
1424
1428
  }
1425
1429
  }
1426
- return /* @__PURE__ */ t.jsxs("div", { className: x.options, children: [
1427
- /* @__PURE__ */ t.jsx("div", { className: x.chargeTypes, children: s.chargeTypes ? s.chargeTypes.map((r) => /* @__PURE__ */ t.jsx("div", { children: r })) : /* @__PURE__ */ t.jsx("div", { className: H(x.charge, x.chargeActive), children: "One-Time" }) }),
1428
- /* @__PURE__ */ t.jsx("div", { className: x.variants, children: n.map((r) => /* @__PURE__ */ t.jsxs(
1430
+ return /* @__PURE__ */ t.jsxs("div", { className: f.options, children: [
1431
+ /* @__PURE__ */ t.jsx("div", { className: f.chargeTypes, children: s.chargeTypes ? s.chargeTypes.map((o) => /* @__PURE__ */ t.jsx("div", { children: o }, o)) : /* @__PURE__ */ t.jsx("div", { className: H(f.charge, f.chargeActive), children: "One-Time" }) }),
1432
+ /* @__PURE__ */ t.jsx("div", { className: f.variants, children: n.map((o) => /* @__PURE__ */ t.jsxs(
1429
1433
  "div",
1430
1434
  {
1431
- className: H(x.variant, {
1432
- [x.activeVariant]: s.id === r.id
1435
+ className: H(f.variant, {
1436
+ [f.activeVariant]: s.id === o.id
1433
1437
  }),
1434
- onClick: () => o(r),
1438
+ onClick: () => c(o),
1435
1439
  children: [
1436
- /* @__PURE__ */ t.jsxs("div", { className: x.variantInfo, children: [
1437
- /* @__PURE__ */ t.jsx("span", { className: x.title, children: r.name }),
1440
+ /* @__PURE__ */ t.jsxs("div", { className: f.variantInfo, children: [
1441
+ /* @__PURE__ */ t.jsx("span", { className: f.title, children: o.name }),
1438
1442
  /* @__PURE__ */ t.jsxs("span", { children: [
1439
1443
  "$",
1440
- r.price.amount
1444
+ o.price.amount
1441
1445
  ] })
1442
1446
  ] }),
1443
- /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsxs("span", { className: x.stock, children: [
1444
- r.quantity.restrictions.max || 0,
1447
+ /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsxs("span", { className: f.stock, children: [
1448
+ o.quantity.restrictions.max || 0,
1445
1449
  " in stock"
1446
1450
  ] }) })
1447
1451
  ]
1448
- }
1452
+ },
1453
+ o.id
1449
1454
  )) }),
1450
- /* @__PURE__ */ t.jsxs("div", { className: x.quantity, children: [
1455
+ /* @__PURE__ */ t.jsxs("div", { className: f.quantity, children: [
1451
1456
  /* @__PURE__ */ t.jsx(
1452
1457
  "div",
1453
1458
  {
1454
1459
  onClick: () => {
1455
- a > 1 ? e((r) => r - 1) : e(1);
1460
+ l > 1 ? e((o) => o - 1) : e(1);
1456
1461
  },
1457
- className: x.button,
1458
- children: /* @__PURE__ */ t.jsx(h, { name: "Minus" })
1462
+ className: f.button,
1463
+ children: /* @__PURE__ */ t.jsx(x, { name: "Minus" })
1459
1464
  }
1460
1465
  ),
1461
- /* @__PURE__ */ t.jsx("div", { className: x.count, children: a }),
1466
+ /* @__PURE__ */ t.jsx("div", { className: f.count, children: l }),
1462
1467
  /* @__PURE__ */ t.jsx(
1463
1468
  "div",
1464
1469
  {
1465
- onClick: () => e((r) => r + 1),
1466
- className: x.button,
1467
- children: /* @__PURE__ */ t.jsx(h, { name: "Plus" })
1470
+ onClick: () => e((o) => o + 1),
1471
+ className: f.button,
1472
+ children: /* @__PURE__ */ t.jsx(x, { name: "Plus" })
1468
1473
  }
1469
1474
  )
1470
1475
  ] }),
1471
- /* @__PURE__ */ t.jsxs("div", { className: x.meta, children: [
1472
- /* @__PURE__ */ t.jsxs("div", { className: x.info, children: [
1476
+ /* @__PURE__ */ t.jsxs("div", { className: f.meta, children: [
1477
+ /* @__PURE__ */ t.jsxs("div", { className: f.info, children: [
1473
1478
  /* @__PURE__ */ t.jsx("span", { children: "Delivery" }),
1474
- /* @__PURE__ */ t.jsxs("div", { className: x.infoRight, children: [
1479
+ /* @__PURE__ */ t.jsxs("div", { className: f.infoRight, children: [
1475
1480
  /* @__PURE__ */ t.jsx(
1476
- h,
1481
+ x,
1477
1482
  {
1478
1483
  name: "Lightning",
1479
1484
  fill: "#FF3F19",
@@ -1481,107 +1486,309 @@ const pt = "_accordion_2tiiw_1", gt = "_header_2tiiw_9", xt = "_icon_2tiiw_16",
1481
1486
  height: 20
1482
1487
  }
1483
1488
  ),
1484
- /* @__PURE__ */ t.jsx("span", { children: s.deliveryTime === 0 ? "Instant" : $(s.deliveryTime) })
1489
+ /* @__PURE__ */ t.jsx("span", { children: s.deliveryTime === 0 ? "Instant" : j(s.deliveryTime) })
1485
1490
  ] })
1486
1491
  ] }),
1487
- /* @__PURE__ */ t.jsxs("div", { className: x.info, children: [
1492
+ /* @__PURE__ */ t.jsxs("div", { className: f.info, children: [
1488
1493
  /* @__PURE__ */ t.jsx("span", { children: "Price" }),
1489
- /* @__PURE__ */ t.jsx("div", { className: x.infoRight, children: s.compareAtPrice && (s.compareAtPrice.amount || 0) - (s.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: x.price, children: [
1490
- /* @__PURE__ */ t.jsxs("span", { className: x.newPrice, children: [
1494
+ /* @__PURE__ */ t.jsx("div", { className: f.infoRight, children: s.compareAtPrice && (s.compareAtPrice.amount || 0) - (s.price.amount || 0) > 0 ? /* @__PURE__ */ t.jsxs("div", { className: f.price, children: [
1495
+ /* @__PURE__ */ t.jsxs("span", { className: f.newPrice, children: [
1491
1496
  "$ ",
1492
- (s.price.amount || 0) * a
1497
+ (s.price.amount || 0) * l
1493
1498
  ] }),
1494
- /* @__PURE__ */ t.jsxs("span", { className: x.oldPrice, children: [
1499
+ /* @__PURE__ */ t.jsxs("span", { className: f.oldPrice, children: [
1495
1500
  "$ ",
1496
- (s.compareAtPrice.amount || 0) * a
1501
+ (s.compareAtPrice.amount || 0) * l
1497
1502
  ] })
1498
- ] }) : /* @__PURE__ */ t.jsxs("span", { className: x.newPrice, children: [
1503
+ ] }) : /* @__PURE__ */ t.jsxs("span", { className: f.newPrice, children: [
1499
1504
  "$ ",
1500
- (s.price.amount || 0) * a
1505
+ (s.price.amount || 0) * l
1501
1506
  ] }) })
1502
1507
  ] })
1503
1508
  ] }),
1504
- /* @__PURE__ */ t.jsxs("div", { className: x.buttons, children: [
1509
+ /* @__PURE__ */ t.jsxs("div", { className: f.buttons, children: [
1505
1510
  /* @__PURE__ */ t.jsx(
1506
- tt,
1511
+ X,
1507
1512
  {
1508
1513
  type: "Primary",
1509
- onClick: () => b(),
1514
+ onClick: () => v(),
1510
1515
  children: "Buy Now"
1511
1516
  }
1512
1517
  ),
1513
1518
  /* @__PURE__ */ t.jsx(
1514
- tt,
1519
+ X,
1515
1520
  {
1516
1521
  type: "Secondary",
1517
- onClick: () => f(),
1522
+ onClick: () => h(),
1518
1523
  children: "Add to Cart"
1519
1524
  }
1520
1525
  )
1521
1526
  ] })
1522
1527
  ] });
1523
- }, on = "_button_pstfl_1", cn = "_login_pstfl_11", an = "_signUp_pstfl_15", ln = "_buttons_pstfl_20", E = {
1528
+ }, on = "_button_1jgdy_1", an = "_login_1jgdy_12", ln = "_signUp_1jgdy_16", rn = "_buttons_1jgdy_21", dn = "_modal_1jgdy_28", un = "_info_1jgdy_44", _n = "_top_1jgdy_50", pn = "_title_1jgdy_59", hn = "_clear_1jgdy_65", mn = "_activeClear_1jgdy_72", gn = "_count_1jgdy_76", xn = "_cart_1jgdy_89", bn = "_empty_1jgdy_96", jn = "_product_1jgdy_122", fn = "_products_1jgdy_129", vn = "_image_1jgdy_136", yn = "_productInfo_1jgdy_142", kn = "_content_1jgdy_148", $n = "_name_1jgdy_154", Nn = "_price_1jgdy_160", Cn = "_productButtons_1jgdy_166", wn = "_productButton_1jgdy_166", In = "_productCount_1jgdy_183", Pn = "_bottom_1jgdy_197", Bn = "_subtotal_1jgdy_205", Tn = "_block_1jgdy_211", An = "_shoppingCount_1jgdy_217", g = {
1524
1529
  button: on,
1525
- login: cn,
1526
- signUp: an,
1527
- buttons: ln
1528
- }, gn = (u) => {
1529
- const { shopping: n, signUp: s } = u, o = ut();
1530
- function i(a) {
1531
- o(a);
1530
+ login: an,
1531
+ signUp: ln,
1532
+ buttons: rn,
1533
+ modal: dn,
1534
+ info: un,
1535
+ top: _n,
1536
+ title: pn,
1537
+ clear: hn,
1538
+ activeClear: mn,
1539
+ count: gn,
1540
+ cart: xn,
1541
+ empty: bn,
1542
+ product: jn,
1543
+ products: fn,
1544
+ image: vn,
1545
+ productInfo: yn,
1546
+ content: kn,
1547
+ name: $n,
1548
+ price: Nn,
1549
+ productButtons: Cn,
1550
+ productButton: wn,
1551
+ productCount: In,
1552
+ bottom: Pn,
1553
+ subtotal: Bn,
1554
+ block: Tn,
1555
+ shoppingCount: An
1556
+ }, zn = (r) => {
1557
+ const { shopping: n, signUp: s } = r, c = it();
1558
+ function a(l) {
1559
+ c(l);
1532
1560
  }
1533
- return /* @__PURE__ */ t.jsxs("div", { className: E.buttons, children: [
1534
- n && /* @__PURE__ */ t.jsx("div", { className: E.button, children: /* @__PURE__ */ t.jsx(
1535
- h,
1536
- {
1537
- name: "Handbag",
1538
- fill: "#252525"
1539
- }
1540
- ) }),
1561
+ return /* @__PURE__ */ t.jsxs("div", { className: g.buttons, children: [
1562
+ n && /* @__PURE__ */ t.jsx(Sn, {}),
1541
1563
  /* @__PURE__ */ t.jsx(
1542
1564
  "div",
1543
1565
  {
1544
- className: H(E.button, E.login),
1545
- onClick: () => i("/customer-dash"),
1566
+ className: H(g.button, g.login),
1567
+ onClick: () => a("/customer-dash"),
1546
1568
  children: "Login"
1547
1569
  }
1548
1570
  ),
1549
1571
  s && /* @__PURE__ */ t.jsx(
1550
1572
  "div",
1551
1573
  {
1552
- className: H(E.button, E.login, E.signUp),
1553
- onClick: () => i("/customer-dash"),
1574
+ className: H(g.button, g.login, g.signUp),
1575
+ onClick: () => a("/customer-dash"),
1554
1576
  children: "Sign Up"
1555
1577
  }
1556
1578
  )
1557
1579
  ] });
1558
- };
1580
+ }, Sn = () => {
1581
+ const [r, n] = b.useState(!1), { cart: s } = at();
1582
+ return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
1583
+ /* @__PURE__ */ t.jsxs(
1584
+ "div",
1585
+ {
1586
+ className: g.button,
1587
+ onClick: (c) => {
1588
+ c.stopPropagation(), n(!0);
1589
+ },
1590
+ children: [
1591
+ /* @__PURE__ */ t.jsx(
1592
+ x,
1593
+ {
1594
+ name: "Handbag",
1595
+ fill: "#252525"
1596
+ }
1597
+ ),
1598
+ s.parts.length > 0 && /* @__PURE__ */ t.jsx("div", { className: g.shoppingCount, children: s.parts.length })
1599
+ ]
1600
+ }
1601
+ ),
1602
+ r && /* @__PURE__ */ t.jsx(mt, { close: n, children: /* @__PURE__ */ t.jsx(On, {}) })
1603
+ ] });
1604
+ }, On = () => {
1605
+ const { cart: r, reset: n, getProducts: s, getTotalAndDiscount: c, updateQuantityOfProduct: a } = at(), [l, e] = b.useState([]), i = it();
1606
+ function u(o) {
1607
+ for (let _ = 0; _ < r.parts.length; _++)
1608
+ for (let m = 0; m < o.variants.length; m++)
1609
+ if (r.parts[_].productVariantId === o.variants[_].id)
1610
+ return r.parts[_].productVariantId;
1611
+ }
1612
+ function y(o) {
1613
+ for (let _ = 0; _ < r.parts.length; _++)
1614
+ for (let m = 0; m < o.variants.length; m++)
1615
+ if (r.parts[_].productVariantId === o.variants[_].id)
1616
+ return r.parts[_].quantity;
1617
+ }
1618
+ function h(o) {
1619
+ i(o);
1620
+ }
1621
+ function v(o) {
1622
+ a({
1623
+ productId: o.id,
1624
+ productVariantId: o.activeVariantId,
1625
+ quantity: o.quantity + 1
1626
+ });
1627
+ }
1628
+ function j(o) {
1629
+ a({
1630
+ productId: o.id,
1631
+ productVariantId: o.activeVariantId,
1632
+ quantity: o.quantity - 1
1633
+ });
1634
+ }
1635
+ return b.useEffect(() => {
1636
+ (async () => {
1637
+ const _ = r.parts.map((A) => String(A.productId)), P = (await s([..._])).map((A) => ({
1638
+ ...A,
1639
+ activeVariantId: u(A),
1640
+ quantity: y(A)
1641
+ }));
1642
+ e(P);
1643
+ })();
1644
+ }, [r]), /* @__PURE__ */ t.jsxs(
1645
+ "div",
1646
+ {
1647
+ className: g.modal,
1648
+ onClick: (o) => o.stopPropagation(),
1649
+ children: [
1650
+ /* @__PURE__ */ t.jsxs("div", { className: g.top, children: [
1651
+ /* @__PURE__ */ t.jsxs("div", { className: g.info, children: [
1652
+ /* @__PURE__ */ t.jsx("span", { className: g.title, children: "Cart" }),
1653
+ r.parts.length > 0 && /* @__PURE__ */ t.jsx("div", { className: g.count, children: r.parts.length })
1654
+ ] }),
1655
+ /* @__PURE__ */ t.jsx(
1656
+ "button",
1657
+ {
1658
+ className: H(g.clear, {
1659
+ [g.activeClear]: r.parts.length > 0
1660
+ }),
1661
+ disabled: r.parts.length === 0,
1662
+ onClick: () => n(),
1663
+ children: "Clear all"
1664
+ }
1665
+ )
1666
+ ] }),
1667
+ r.parts.length > 0 ? /* @__PURE__ */ t.jsxs("div", { className: g.cart, children: [
1668
+ /* @__PURE__ */ t.jsx("div", { className: g.products, children: l.map((o) => /* @__PURE__ */ t.jsxs(
1669
+ "div",
1670
+ {
1671
+ className: g.product,
1672
+ children: [
1673
+ /* @__PURE__ */ t.jsxs("div", { className: g.productInfo, children: [
1674
+ /* @__PURE__ */ t.jsx(
1675
+ "img",
1676
+ {
1677
+ src: `https://imagedelivery.net/${o.images[0].cfId}/w=500`,
1678
+ alt: "image",
1679
+ width: "100%",
1680
+ height: "100%",
1681
+ className: g.image
1682
+ }
1683
+ ),
1684
+ /* @__PURE__ */ t.jsxs("div", { className: g.content, children: [
1685
+ /* @__PURE__ */ t.jsx("div", { className: g.name, children: o.name }),
1686
+ /* @__PURE__ */ t.jsxs("div", { className: g.price, children: [
1687
+ "$",
1688
+ o.variants.find((_) => _.id === o.activeVariantId).price.amount * ((o == null ? void 0 : o.quantity) || 1)
1689
+ ] })
1690
+ ] })
1691
+ ] }),
1692
+ /* @__PURE__ */ t.jsxs("div", { className: g.productButtons, children: [
1693
+ /* @__PURE__ */ t.jsx(
1694
+ "div",
1695
+ {
1696
+ onClick: () => {
1697
+ o.quantity !== 1 && j(o);
1698
+ },
1699
+ className: g.productButton,
1700
+ children: /* @__PURE__ */ t.jsx(
1701
+ x,
1702
+ {
1703
+ name: "Minus",
1704
+ fill: "#757575",
1705
+ width: 20,
1706
+ height: 20
1707
+ }
1708
+ )
1709
+ }
1710
+ ),
1711
+ /* @__PURE__ */ t.jsx("div", { className: g.productCount, children: o.quantity }),
1712
+ /* @__PURE__ */ t.jsx(
1713
+ "div",
1714
+ {
1715
+ onClick: () => v(o),
1716
+ className: g.productButton,
1717
+ children: /* @__PURE__ */ t.jsx(
1718
+ x,
1719
+ {
1720
+ name: "Plus",
1721
+ fill: "#757575",
1722
+ width: 20,
1723
+ height: 20
1724
+ }
1725
+ )
1726
+ }
1727
+ )
1728
+ ] })
1729
+ ]
1730
+ },
1731
+ o.id
1732
+ )) }),
1733
+ /* @__PURE__ */ t.jsxs("div", { className: g.bottom, children: [
1734
+ /* @__PURE__ */ t.jsxs("div", { className: g.subtotal, children: [
1735
+ /* @__PURE__ */ t.jsxs("div", { className: g.block, children: [
1736
+ /* @__PURE__ */ t.jsx("span", { children: "Subtotal" }),
1737
+ /* @__PURE__ */ t.jsx(
1738
+ x,
1739
+ {
1740
+ name: "Info",
1741
+ width: 20,
1742
+ height: 20,
1743
+ fill: "#757575"
1744
+ }
1745
+ )
1746
+ ] }),
1747
+ /* @__PURE__ */ t.jsxs("div", { children: [
1748
+ "$",
1749
+ c().total
1750
+ ] })
1751
+ ] }),
1752
+ /* @__PURE__ */ t.jsx(X, { onClick: () => h("/checkout"), children: "Checkout" })
1753
+ ] })
1754
+ ] }) : /* @__PURE__ */ t.jsx(Dn, {})
1755
+ ]
1756
+ }
1757
+ );
1758
+ }, Dn = () => /* @__PURE__ */ t.jsxs("div", { className: g.empty, children: [
1759
+ /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(x, { name: "Handbag" }) }),
1760
+ /* @__PURE__ */ t.jsx("span", { children: "Your cart is empty" }),
1761
+ /* @__PURE__ */ t.jsx("span", { children: "Check out the store's products and add them here" })
1762
+ ] });
1559
1763
  export {
1560
- un as Accordion,
1561
- tt as Button,
1562
- ss as ButtonTypeSettings,
1563
- mn as ButtonsSettings,
1564
- fn as Checkbox,
1565
- ct as ChooseImage,
1566
- jn as ChooseImageModal,
1567
- vn as ColorPicker,
1568
- gn as HeaderButtons,
1569
- h as Icon,
1570
- V as Input,
1571
- he as ItemsSettings,
1572
- _n as LayoutSettings,
1573
- hn as ListingSelector,
1574
- kn as Loader,
1575
- yn as Modal,
1576
- $n as Picker,
1577
- pn as ProductOptions,
1578
- Nn as Radio,
1579
- xs as RangeSelector,
1580
- G as Select,
1581
- wn as Submodal,
1764
+ Mn as Accordion,
1765
+ X as Button,
1766
+ ns as ButtonTypeSettings,
1767
+ Rn as ButtonsSettings,
1768
+ Gn as Checkbox,
1769
+ ot as ChooseImage,
1770
+ Yn as ChooseImageModal,
1771
+ Xn as ColorPicker,
1772
+ Dn as EmptyCart,
1773
+ zn as HeaderButtons,
1774
+ x as Icon,
1775
+ G as Input,
1776
+ me as ItemsSettings,
1777
+ Hn as LayoutSettings,
1778
+ Vn as ListingSelector,
1779
+ Qn as Loader,
1780
+ mt as Modal,
1781
+ Wn as Picker,
1782
+ En as ProductOptions,
1783
+ Jn as Radio,
1784
+ bs as RangeSelector,
1785
+ Y as Select,
1786
+ Sn as ShoppingButton,
1787
+ On as ShoppingModalCart,
1788
+ Kn as Submodal,
1582
1789
  z as Switch,
1583
1790
  zt as TextSettings,
1584
- it as Textarea,
1585
- Cn as Tip,
1586
- _t as TypesText
1791
+ lt as Textarea,
1792
+ Zn as Tip,
1793
+ pt as TypesText
1587
1794
  };