@simple-builder/react 1.0.7 → 1.0.9

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 (13) hide show
  1. package/dist/{build-container-client-CMWYMBFS.mjs → build-container-client-BOFDDL56.mjs} +310 -420
  2. package/dist/{build-container-client-6RF5K7DV.js → build-container-client-PB2K64X3.js} +361 -471
  3. package/dist/{builder-content-MAJ7XTFP.mjs → builder-content-DNX5TNK2.mjs} +2 -2
  4. package/dist/{builder-content-PG6VWJYE.js → builder-content-SSON3UB4.js} +7 -7
  5. package/dist/{chunk-PL6PDFN7.mjs → chunk-2GQCSML3.mjs} +2 -4
  6. package/dist/{chunk-G3675W7A.js → chunk-ECJUPPTG.js} +1 -45
  7. package/dist/{chunk-YWYOBSS7.mjs → chunk-LULPEBSO.mjs} +2 -2
  8. package/dist/{chunk-YGH42ZBJ.mjs → chunk-OCMLPCSW.mjs} +2 -45
  9. package/dist/{chunk-JQVW2IR2.js → chunk-VFH3LVDU.js} +3 -3
  10. package/dist/{chunk-3FCXE75X.js → chunk-YGI2WZVP.js} +6 -8
  11. package/dist/index.js +6 -6
  12. package/dist/index.mjs +2 -2
  13. package/package.json +6 -6
package/dist/{build-container-client-6RF5K7DV.js → build-container-client-PB2K64X3.js} RENAMED
@@ -1,10 +1,10 @@
1
1
  'use client';
2
2
  'use strict';
3
3
 
4
- require('./chunk-JQVW2IR2.js');
5
- var chunk3FCXE75X_js = require('./chunk-3FCXE75X.js');
6
- var chunkG3675W7A_js = require('./chunk-G3675W7A.js');
7
- var React15 = require('react');
4
+ require('./chunk-VFH3LVDU.js');
5
+ var chunkYGI2WZVP_js = require('./chunk-YGI2WZVP.js');
6
+ var chunkECJUPPTG_js = require('./chunk-ECJUPPTG.js');
7
+ var React11 = require('react');
8
8
  var lucideReact = require('lucide-react');
9
9
  var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
10
10
  var PopoverPrimitive = require('@radix-ui/react-popover');
@@ -37,7 +37,7 @@ function _interopNamespace(e) {
37
37
  return Object.freeze(n);
38
38
  }
39
39
 
40
- var React15__namespace = /*#__PURE__*/_interopNamespace(React15);
40
+ var React11__namespace = /*#__PURE__*/_interopNamespace(React11);
41
41
  var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
42
42
  var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
43
43
  var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
@@ -48,10 +48,10 @@ var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive)
48
48
  var AlertDialog = AlertDialogPrimitive__namespace.Root;
49
49
  var AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
50
50
  var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
51
- var AlertDialogOverlay = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
51
+ var AlertDialogOverlay = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11__namespace.createElement(
52
52
  AlertDialogPrimitive__namespace.Overlay,
53
53
  {
54
- className: chunkG3675W7A_js.cn(
54
+ className: chunkECJUPPTG_js.cn(
55
55
  "sb-fixed sb-inset-0 sb-z-50 sb-bg-background/80 sb-backdrop-blur-sm data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0",
56
56
  className
57
57
  ),
@@ -60,11 +60,11 @@ var AlertDialogOverlay = React15__namespace.forwardRef(({ className, ...props },
60
60
  }
61
61
  ));
62
62
  AlertDialogOverlay.displayName = AlertDialogPrimitive__namespace.Overlay.displayName;
63
- var AlertDialogContent = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(AlertDialogPortal, null, /* @__PURE__ */ React15__namespace.createElement(AlertDialogOverlay, null), /* @__PURE__ */ React15__namespace.createElement(
63
+ var AlertDialogContent = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11__namespace.createElement(AlertDialogPortal, null, /* @__PURE__ */ React11__namespace.createElement(AlertDialogOverlay, null), /* @__PURE__ */ React11__namespace.createElement(
64
64
  AlertDialogPrimitive__namespace.Content,
65
65
  {
66
66
  ref,
67
- className: chunkG3675W7A_js.cn(
67
+ className: chunkECJUPPTG_js.cn(
68
68
  "sb-fixed sb-font-roboto sb-left-[50%] sb-top-[50%] sb-z-50 sb-grid sb-w-full sb-max-w-lg sb-translate-x-[-50%] sb-translate-y-[-50%] sb-gap-4 sb-border sb-bg-background sb-p-6 sb-shadow-lg sb-duration-200 data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[state=closed]:sb-slide-out-to-left-1/2 data-[state=closed]:sb-slide-out-to-top-[48%] data-[state=open]:sb-slide-in-from-left-1/2 data-[state=open]:sb-slide-in-from-top-[48%] sm:sb-rounded-lg",
69
69
  className
70
70
  ),
@@ -75,10 +75,10 @@ AlertDialogContent.displayName = AlertDialogPrimitive__namespace.Content.display
75
75
  var AlertDialogFooter = ({
76
76
  className,
77
77
  ...props
78
- }) => /* @__PURE__ */ React15__namespace.createElement(
78
+ }) => /* @__PURE__ */ React11__namespace.createElement(
79
79
  "div",
80
80
  {
81
- className: chunkG3675W7A_js.cn(
81
+ className: chunkECJUPPTG_js.cn(
82
82
  "sb-flex sb-flex-col-reverse sm:sb-flex-row sm:sb-justify-end sm:sb-space-x-2",
83
83
  className
84
84
  ),
@@ -86,39 +86,39 @@ var AlertDialogFooter = ({
86
86
  }
87
87
  );
88
88
  AlertDialogFooter.displayName = "AlertDialogFooter";
89
- var AlertDialogTitle = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
89
+ var AlertDialogTitle = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11__namespace.createElement(
90
90
  AlertDialogPrimitive__namespace.Title,
91
91
  {
92
92
  ref,
93
- className: chunkG3675W7A_js.cn("sb-text-lg sb-font-semibold", className),
93
+ className: chunkECJUPPTG_js.cn("sb-text-lg sb-font-semibold", className),
94
94
  ...props
95
95
  }
96
96
  ));
97
97
  AlertDialogTitle.displayName = AlertDialogPrimitive__namespace.Title.displayName;
98
- var AlertDialogDescription = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
98
+ var AlertDialogDescription = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11__namespace.createElement(
99
99
  AlertDialogPrimitive__namespace.Description,
100
100
  {
101
101
  ref,
102
- className: chunkG3675W7A_js.cn("sb-text-sm sb-text-muted-foreground", className),
102
+ className: chunkECJUPPTG_js.cn("sb-text-sm sb-text-muted-foreground", className),
103
103
  ...props
104
104
  }
105
105
  ));
106
106
  AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
107
- var AlertDialogAction = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
107
+ var AlertDialogAction = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11__namespace.createElement(
108
108
  AlertDialogPrimitive__namespace.Action,
109
109
  {
110
110
  ref,
111
- className: chunkG3675W7A_js.cn(chunk3FCXE75X_js.buttonVariants(), className),
111
+ className: chunkECJUPPTG_js.cn(chunkYGI2WZVP_js.buttonVariants(), className),
112
112
  ...props
113
113
  }
114
114
  ));
115
115
  AlertDialogAction.displayName = AlertDialogPrimitive__namespace.Action.displayName;
116
- var AlertDialogCancel = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
116
+ var AlertDialogCancel = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11__namespace.createElement(
117
117
  AlertDialogPrimitive__namespace.Cancel,
118
118
  {
119
119
  ref,
120
- className: chunkG3675W7A_js.cn(
121
- chunk3FCXE75X_js.buttonVariants({ variant: "outline" }),
120
+ className: chunkECJUPPTG_js.cn(
121
+ chunkYGI2WZVP_js.buttonVariants({ variant: "outline" }),
122
122
  "sb-mt-2 sm:sb-mt-0",
123
123
  className
124
124
  ),
@@ -129,13 +129,13 @@ AlertDialogCancel.displayName = AlertDialogPrimitive__namespace.Cancel.displayNa
129
129
  var Popover = PopoverPrimitive__namespace.Root;
130
130
  var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
131
131
  var PopoverClose = PopoverPrimitive__namespace.Close;
132
- var PopoverContent = React15__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(PopoverPrimitive__namespace.Portal, null, /* @__PURE__ */ React15__namespace.createElement(
132
+ var PopoverContent = React11__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React11__namespace.createElement(PopoverPrimitive__namespace.Portal, null, /* @__PURE__ */ React11__namespace.createElement(
133
133
  PopoverPrimitive__namespace.Content,
134
134
  {
135
135
  ref,
136
136
  align,
137
137
  sideOffset,
138
- className: chunkG3675W7A_js.cn(
138
+ className: chunkECJUPPTG_js.cn(
139
139
  "sb-z-50 sb-w-72 sb-font-roboto sb-rounded-md sb-border sb-bg-popover sb-p-4 sb-text-popover-foreground sb-shadow-md sb-outline-none data-[state=open]:sb-animate-in data-[state=closed]:sb-animate-out data-[state=closed]:sb-fade-out-0 data-[state=open]:sb-fade-in-0 data-[state=closed]:sb-zoom-out-95 data-[state=open]:sb-zoom-in-95 data-[side=bottom]:sb-slide-in-from-top-2 data-[side=left]:sb-slide-in-from-right-2 data-[side=right]:sb-slide-in-from-left-2 data-[side=top]:sb-slide-in-from-bottom-2",
140
140
  className
141
141
  ),
@@ -149,19 +149,19 @@ function Calendar({
149
149
  showOutsideDays = true,
150
150
  ...props
151
151
  }) {
152
- return /* @__PURE__ */ React15__namespace.createElement(
152
+ return /* @__PURE__ */ React11__namespace.createElement(
153
153
  reactDayPicker.DayPicker,
154
154
  {
155
155
  showOutsideDays,
156
- className: chunkG3675W7A_js.cn("sb-p-3 sb-font-roboto", className),
156
+ className: chunkECJUPPTG_js.cn("sb-p-3 sb-font-roboto", className),
157
157
  classNames: {
158
158
  months: "sb-flex sb-flex-col sm:sb-flex-row sb-space-y-4 sm:sb-space-x-4 sm:sb-space-y-0",
159
159
  month: "sb-space-y-4",
160
160
  caption: "sb-flex sb-justify-center sb-pt-1 sb-relative sb-items-center",
161
161
  caption_label: "sb-text-sm sb-font-medium",
162
162
  nav: "sb-space-x-1 sb-flex sb-items-center",
163
- nav_button: chunkG3675W7A_js.cn(
164
- chunk3FCXE75X_js.buttonVariants({ variant: "outline" }),
163
+ nav_button: chunkECJUPPTG_js.cn(
164
+ chunkYGI2WZVP_js.buttonVariants({ variant: "outline" }),
165
165
  "sb-h-7 sb-w-7 sb-bg-transparent sb-p-0 sb-opacity-50 hover:sb-opacity-100"
166
166
  ),
167
167
  nav_button_previous: "sb-absolute sb-left-1",
@@ -170,12 +170,12 @@ function Calendar({
170
170
  head_row: "sb-flex",
171
171
  head_cell: "sb-text-muted-foreground sb-rounded-md sb-w-8 sb-font-normal sb-text-[0.8rem]",
172
172
  row: "sb-flex sb-w-full sb-mt-2",
173
- cell: chunkG3675W7A_js.cn(
173
+ cell: chunkECJUPPTG_js.cn(
174
174
  "sb-relative sb-p-0 sb-text-center sb-text-sm focus-within:sb-relative focus-within:sb-z-20 [&:has([aria-selected])]:sb-bg-accent [&:has([aria-selected].day-outside)]:sb-bg-accent/50 [&:has([aria-selected].day-range-end)]:sb-rounded-r-md",
175
175
  props.mode === "range" ? "[&:has(>.day-range-end)]:sb-rounded-r-md [&:has(>.day-range-start)]:sb-rounded-l-md first:[&:has([aria-selected])]:sb-rounded-l-md last:[&:has([aria-selected])]:sb-rounded-r-md" : "[&:has([aria-selected])]:sb-rounded-md"
176
176
  ),
177
- day: chunkG3675W7A_js.cn(
178
- chunk3FCXE75X_js.buttonVariants({ variant: "ghost" }),
177
+ day: chunkECJUPPTG_js.cn(
178
+ chunkYGI2WZVP_js.buttonVariants({ variant: "ghost" }),
179
179
  "sb-h-8 sb-w-8 sb-p-0 sb-font-normal aria-selected:sb-opacity-100"
180
180
  ),
181
181
  day_range_start: "day-range-start",
@@ -189,8 +189,8 @@ function Calendar({
189
189
  ...classNames
190
190
  },
191
191
  components: {
192
- IconLeft: () => /* @__PURE__ */ React15__namespace.createElement(lucideReact.ChevronLeftIcon, { className: "sb-h-4 sb-w-4" }),
193
- IconRight: () => /* @__PURE__ */ React15__namespace.createElement(lucideReact.ChevronRightIcon, { className: "sb-h-4 sb-w-4" })
192
+ IconLeft: () => /* @__PURE__ */ React11__namespace.createElement(lucideReact.ChevronLeftIcon, { className: "sb-h-4 sb-w-4" }),
193
+ IconRight: () => /* @__PURE__ */ React11__namespace.createElement(lucideReact.ChevronRightIcon, { className: "sb-h-4 sb-w-4" })
194
194
  },
195
195
  ...props
196
196
  }
@@ -210,25 +210,25 @@ var ColorPicker = (props) => {
210
210
  "#009DD1",
211
211
  "#FF0000"
212
212
  ];
213
- return /* @__PURE__ */ React15__namespace.createElement(Popover, null, /* @__PURE__ */ React15__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React15__namespace.createElement(
214
- chunk3FCXE75X_js.Button,
213
+ return /* @__PURE__ */ React11__namespace.createElement(Popover, null, /* @__PURE__ */ React11__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React11__namespace.createElement(
214
+ chunkYGI2WZVP_js.Button,
215
215
  {
216
216
  variant: "outline",
217
217
  size: "sm",
218
- className: chunkG3675W7A_js.cn(
218
+ className: chunkECJUPPTG_js.cn(
219
219
  "sb-justify-start sb-text-left sb-font-normal sb-normal-case sb-w-full",
220
220
  !color && "sb-text-muted-foreground",
221
221
  className
222
222
  )
223
223
  },
224
- /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, color ? /* @__PURE__ */ React15__namespace.createElement(
224
+ /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, color ? /* @__PURE__ */ React11__namespace.createElement(
225
225
  "div",
226
226
  {
227
227
  className: "sb-h-4 sb-w-4 sb-rounded !sb-bg-center !sb-bg-cover sb-transition-all sb-border",
228
228
  style: { background: color }
229
229
  }
230
- ) : /* @__PURE__ */ React15__namespace.createElement(lucideReact.PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-truncate sb-flex-1" }, color ? color : "Kies een kleur"))
231
- )), /* @__PURE__ */ React15__namespace.createElement(PopoverContent, { className: "sb-w-64 sb-p-4 sb-flex sb-flex-wrap sb-gap-1" }, colors.map((s) => /* @__PURE__ */ React15__namespace.createElement(
230
+ ) : /* @__PURE__ */ React11__namespace.createElement(lucideReact.PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-truncate sb-flex-1" }, color ? color : "Kies een kleur"))
231
+ )), /* @__PURE__ */ React11__namespace.createElement(PopoverContent, { className: "sb-w-64 sb-p-4 sb-flex sb-flex-wrap sb-gap-1" }, colors.map((s) => /* @__PURE__ */ React11__namespace.createElement(
232
232
  "div",
233
233
  {
234
234
  key: s,
@@ -238,10 +238,10 @@ var ColorPicker = (props) => {
238
238
  }
239
239
  ))));
240
240
  };
241
- var labelVariants = chunkG3675W7A_js.tv({
241
+ var labelVariants = chunkECJUPPTG_js.tv({
242
242
  base: "sb-text-sm sb-font-medium sb-font-roboto sb-leading-none peer-disabled:sb-cursor-not-allowed peer-disabled:sb-opacity-70"
243
243
  });
244
- var Label = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
244
+ var Label = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11__namespace.createElement(
245
245
  LabelPrimitive__namespace.Root,
246
246
  {
247
247
  ref,
@@ -253,17 +253,17 @@ Label.displayName = LabelPrimitive__namespace.Root.displayName;
253
253
 
254
254
  // src/components/ui/form.tsx
255
255
  var Form = reactHookForm.FormProvider;
256
- var FormFieldContext = React15__namespace.createContext(
256
+ var FormFieldContext = React11__namespace.createContext(
257
257
  {}
258
258
  );
259
259
  var FormField = ({
260
260
  ...props
261
261
  }) => {
262
- return /* @__PURE__ */ React15__namespace.createElement(FormFieldContext.Provider, { value: { name: props.name } }, /* @__PURE__ */ React15__namespace.createElement(reactHookForm.Controller, { ...props }));
262
+ return /* @__PURE__ */ React11__namespace.createElement(FormFieldContext.Provider, { value: { name: props.name } }, /* @__PURE__ */ React11__namespace.createElement(reactHookForm.Controller, { ...props }));
263
263
  };
264
264
  var useFormField = () => {
265
- const fieldContext = React15__namespace.useContext(FormFieldContext);
266
- const itemContext = React15__namespace.useContext(FormItemContext);
265
+ const fieldContext = React11__namespace.useContext(FormFieldContext);
266
+ const itemContext = React11__namespace.useContext(FormItemContext);
267
267
  const { getFieldState, formState } = reactHookForm.useFormContext();
268
268
  const fieldState = getFieldState(fieldContext.name, formState);
269
269
  if (!fieldContext) {
@@ -279,30 +279,30 @@ var useFormField = () => {
279
279
  ...fieldState
280
280
  };
281
281
  };
282
- var FormItemContext = React15__namespace.createContext(
282
+ var FormItemContext = React11__namespace.createContext(
283
283
  {}
284
284
  );
285
- var FormItem = React15__namespace.forwardRef(({ className, ...props }, ref) => {
286
- const id = React15__namespace.useId();
287
- return /* @__PURE__ */ React15__namespace.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React15__namespace.createElement("div", { ref, className: chunkG3675W7A_js.cn("sb-space-y-2", className), ...props }));
285
+ var FormItem = React11__namespace.forwardRef(({ className, ...props }, ref) => {
286
+ const id = React11__namespace.useId();
287
+ return /* @__PURE__ */ React11__namespace.createElement(FormItemContext.Provider, { value: { id } }, /* @__PURE__ */ React11__namespace.createElement("div", { ref, className: chunkECJUPPTG_js.cn("sb-space-y-2", className), ...props }));
288
288
  });
289
289
  FormItem.displayName = "FormItem";
290
- var FormLabel = React15__namespace.forwardRef(({ className, ...props }, ref) => {
290
+ var FormLabel = React11__namespace.forwardRef(({ className, ...props }, ref) => {
291
291
  const { error, formItemId } = useFormField();
292
- return /* @__PURE__ */ React15__namespace.createElement(
292
+ return /* @__PURE__ */ React11__namespace.createElement(
293
293
  Label,
294
294
  {
295
295
  ref,
296
- className: chunkG3675W7A_js.cn(error && "sb-text-destructive", className),
296
+ className: chunkECJUPPTG_js.cn(error && "sb-text-destructive", className),
297
297
  htmlFor: formItemId,
298
298
  ...props
299
299
  }
300
300
  );
301
301
  });
302
302
  FormLabel.displayName = "FormLabel";
303
- var FormControl = React15__namespace.forwardRef(({ ...props }, ref) => {
303
+ var FormControl = React11__namespace.forwardRef(({ ...props }, ref) => {
304
304
  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
305
- return /* @__PURE__ */ React15__namespace.createElement(
305
+ return /* @__PURE__ */ React11__namespace.createElement(
306
306
  reactSlot.Slot,
307
307
  {
308
308
  ref,
@@ -314,14 +314,14 @@ var FormControl = React15__namespace.forwardRef(({ ...props }, ref) => {
314
314
  );
315
315
  });
316
316
  FormControl.displayName = "FormControl";
317
- var FormDescription = React15__namespace.forwardRef(({ className, ...props }, ref) => {
317
+ var FormDescription = React11__namespace.forwardRef(({ className, ...props }, ref) => {
318
318
  const { formDescriptionId } = useFormField();
319
- return /* @__PURE__ */ React15__namespace.createElement(
319
+ return /* @__PURE__ */ React11__namespace.createElement(
320
320
  "p",
321
321
  {
322
322
  ref,
323
323
  id: formDescriptionId,
324
- className: chunkG3675W7A_js.cn(
324
+ className: chunkECJUPPTG_js.cn(
325
325
  "sb-text-sm sb-font-roboto sb-text-muted-foreground",
326
326
  className
327
327
  ),
@@ -330,18 +330,18 @@ var FormDescription = React15__namespace.forwardRef(({ className, ...props }, re
330
330
  );
331
331
  });
332
332
  FormDescription.displayName = "FormDescription";
333
- var FormMessage = React15__namespace.forwardRef(({ className, children, ...props }, ref) => {
333
+ var FormMessage = React11__namespace.forwardRef(({ className, children, ...props }, ref) => {
334
334
  const { error, formMessageId } = useFormField();
335
335
  const body = error ? String(error?.message) : children;
336
336
  if (!body) {
337
337
  return null;
338
338
  }
339
- return /* @__PURE__ */ React15__namespace.createElement(
339
+ return /* @__PURE__ */ React11__namespace.createElement(
340
340
  "p",
341
341
  {
342
342
  ref,
343
343
  id: formMessageId,
344
- className: chunkG3675W7A_js.cn(
344
+ className: chunkECJUPPTG_js.cn(
345
345
  "sb-text-sm sb-font-roboto sb-font-medium sb-text-destructive",
346
346
  className
347
347
  ),
@@ -351,13 +351,13 @@ var FormMessage = React15__namespace.forwardRef(({ className, children, ...props
351
351
  );
352
352
  });
353
353
  FormMessage.displayName = "FormMessage";
354
- var Input = React15__namespace.forwardRef(
354
+ var Input = React11__namespace.forwardRef(
355
355
  ({ className, type, ...props }, ref) => {
356
- return /* @__PURE__ */ React15__namespace.createElement(
356
+ return /* @__PURE__ */ React11__namespace.createElement(
357
357
  "input",
358
358
  {
359
359
  type,
360
- className: chunkG3675W7A_js.cn(
360
+ className: chunkECJUPPTG_js.cn(
361
361
  "sb-flex sb-h-8 sb-w-full sb-font-roboto sb-rounded-md sb-border sb-border-input sb-bg-background sb-px-3 sb-py-1 sb-text-sm sb-ring-offset-background file:sb-border-0 file:sb-bg-transparent file:sb-text-sm file:sb-font-medium placeholder:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:ring-sb-ring focus-visible:sb-ring-offset-2 disabled:sb-cursor-not-allowed disabled:sb-opacity-50",
362
362
  className
363
363
  ),
@@ -368,19 +368,19 @@ var Input = React15__namespace.forwardRef(
368
368
  }
369
369
  );
370
370
  Input.displayName = "Input";
371
- var AdvancedInput = React15__namespace.forwardRef(
371
+ var AdvancedInput = React11__namespace.forwardRef(
372
372
  ({ prepend, append, ...props }, ref) => {
373
- return /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-relative" }, /* @__PURE__ */ React15__namespace.createElement(Input, { ref, className: "sb-pl-9 sb-pr-7 sb-text-right", ...props }), prepend && /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-left-3 sb--translate-y-1/2" }, prepend), append && /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-right-3 sb--translate-y-1/2" }, append));
373
+ return /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-relative" }, /* @__PURE__ */ React11__namespace.createElement(Input, { ref, className: "sb-pl-9 sb-pr-7 sb-text-right", ...props }), prepend && /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-left-3 sb--translate-y-1/2" }, prepend), append && /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-absolute sb-font-roboto sb-top-1/2 sb-right-3 sb--translate-y-1/2" }, append));
374
374
  }
375
375
  );
376
376
  AdvancedInput.displayName = "AdvancedInput";
377
377
  var MediaInput = (props) => {
378
378
  const { onFilesChange, limit = 32, multiple = false, onError } = props;
379
- const id = React15__namespace.useId();
380
- const [queue, setQueue] = React15__namespace.useState([]);
381
- const [sources, setSources] = React15__namespace.useState(props.files ?? []);
379
+ const id = React11__namespace.useId();
380
+ const [queue, setQueue] = React11__namespace.useState([]);
381
+ const [sources, setSources] = React11__namespace.useState(props.files ?? []);
382
382
  const maxConcurrentUploads = 3;
383
- const uploadingCountRef = React15__namespace.useRef(0);
383
+ const uploadingCountRef = React11__namespace.useRef(0);
384
384
  const handleFilesAdd = async (e) => {
385
385
  const files = e.target.files;
386
386
  if (!files || files.length === 0) {
@@ -451,42 +451,42 @@ var MediaInput = (props) => {
451
451
  body: JSON.stringify({ src })
452
452
  });
453
453
  };
454
- return /* @__PURE__ */ React15__namespace.createElement("div", { className: chunkG3675W7A_js.cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React15__namespace.createElement(MediaInputItem, { key: src, className: chunkG3675W7A_js.cn("group", props.itemClassName) }, /* @__PURE__ */ React15__namespace.createElement(
455
- chunkG3675W7A_js.Image,
454
+ return /* @__PURE__ */ React11__namespace.createElement("div", { className: chunkECJUPPTG_js.cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React11__namespace.createElement(MediaInputItem, { key: src, className: chunkECJUPPTG_js.cn("group", props.itemClassName) }, /* @__PURE__ */ React11__namespace.createElement(
455
+ chunkECJUPPTG_js.Image,
456
456
  {
457
457
  src,
458
458
  alt: "",
459
459
  fill: true,
460
460
  className: "sb-absolute sb-inset-0 sb-object-cover sb-pointer-events-none"
461
461
  }
462
- ), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-absolute sb-right-1 sb-top-1 sb-z-30 sb-flex sb-items-center sb-justify-end sb-gap-3 sb-opacity-0 sb-transition-opacity group-hover:sb-opacity-100" }, /* @__PURE__ */ React15__namespace.createElement(
462
+ ), /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-absolute sb-right-1 sb-top-1 sb-z-30 sb-flex sb-items-center sb-justify-end sb-gap-3 sb-opacity-0 sb-transition-opacity group-hover:sb-opacity-100" }, /* @__PURE__ */ React11__namespace.createElement(
463
463
  "button",
464
464
  {
465
465
  className: "sb-flex sb-h-8 sb-w-8 sb-items-center sb-justify-center sb-rounded-full sb-border sb-bg-secondary sb-text-secondary-foreground sb-opacity-90 sb-shadow sb-transition-opacity hover:sb-opacity-100",
466
466
  onClick: () => handleSourceDelete(src)
467
467
  },
468
- /* @__PURE__ */ React15__namespace.createElement(lucideReact.Trash2Icon, { className: "sb-h-4 sb-w-4" })
469
- )))), queue.map((_, i) => /* @__PURE__ */ React15__namespace.createElement(
468
+ /* @__PURE__ */ React11__namespace.createElement(lucideReact.Trash2Icon, { className: "sb-h-4 sb-w-4" })
469
+ )))), queue.map((_, i) => /* @__PURE__ */ React11__namespace.createElement(
470
470
  MediaInputItem,
471
471
  {
472
472
  key: i,
473
- className: chunkG3675W7A_js.cn(
473
+ className: chunkECJUPPTG_js.cn(
474
474
  "sb-flex sb-h-28 sb-w-28 sb-items-center sb-justify-center",
475
475
  props.itemClassName
476
476
  )
477
477
  },
478
- /* @__PURE__ */ React15__namespace.createElement(lucideReact.Loader2Icon, { className: "sb-h-6 sb-w-6 sb-animate-spin" })
479
- )), multiple || !multiple && !sources.length && !queue.length ? /* @__PURE__ */ React15__namespace.createElement(
478
+ /* @__PURE__ */ React11__namespace.createElement(lucideReact.Loader2Icon, { className: "sb-h-6 sb-w-6 sb-animate-spin" })
479
+ )), multiple || !multiple && !sources.length && !queue.length ? /* @__PURE__ */ React11__namespace.createElement(
480
480
  "label",
481
481
  {
482
482
  htmlFor: id,
483
- className: chunkG3675W7A_js.cn(
483
+ className: chunkECJUPPTG_js.cn(
484
484
  "sb-flex sb-h-28 sb-w-28 sb-cursor-pointer sb-items-center sb-justify-center sb-rounded-lg sb-border",
485
485
  props.itemClassName
486
486
  )
487
487
  },
488
- /* @__PURE__ */ React15__namespace.createElement(lucideReact.PlusIcon, { className: "sb-h-6 sb-w-6" }),
489
- /* @__PURE__ */ React15__namespace.createElement(
488
+ /* @__PURE__ */ React11__namespace.createElement(lucideReact.PlusIcon, { className: "sb-h-6 sb-w-6" }),
489
+ /* @__PURE__ */ React11__namespace.createElement(
490
490
  "input",
491
491
  {
492
492
  id,
@@ -500,10 +500,10 @@ var MediaInput = (props) => {
500
500
  ) : null);
501
501
  };
502
502
  var MediaInputItem = (props) => {
503
- return /* @__PURE__ */ React15__namespace.createElement(
503
+ return /* @__PURE__ */ React11__namespace.createElement(
504
504
  "div",
505
505
  {
506
- className: chunkG3675W7A_js.cn(
506
+ className: chunkECJUPPTG_js.cn(
507
507
  "sb-relative sb-h-28 sb-w-28 sb-overflow-hidden sb-rounded-lg sb-border",
508
508
  props.className
509
509
  )
@@ -520,32 +520,32 @@ var MediaInputError = class extends Error {
520
520
  this.description = description;
521
521
  }
522
522
  };
523
- var Switch = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
523
+ var Switch = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11__namespace.createElement(
524
524
  SwitchPrimitives__namespace.Root,
525
525
  {
526
- className: chunkG3675W7A_js.cn(
526
+ className: chunkECJUPPTG_js.cn(
527
527
  "peer sb-inline-flex sb-h-6 sb-w-11 sb-shrink-0 sb-cursor-pointer sb-items-center sb-rounded-full sb-border-2 sb-border-transparent sb-transition-colors focus-visible:sb-outline-none focus-visible:sb-ring-2 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2 focus-visible:sb-ring-offset-background disabled:sb-cursor-not-allowed disabled:sb-opacity-50 data-[state=checked]:sb-bg-primary data-[state=unchecked]:sb-bg-input",
528
528
  className
529
529
  ),
530
530
  ...props,
531
531
  ref
532
532
  },
533
- /* @__PURE__ */ React15__namespace.createElement(
533
+ /* @__PURE__ */ React11__namespace.createElement(
534
534
  SwitchPrimitives__namespace.Thumb,
535
535
  {
536
- className: chunkG3675W7A_js.cn(
536
+ className: chunkECJUPPTG_js.cn(
537
537
  "sb-pointer-events-none sb-block sb-h-5 sb-w-5 sb-rounded-full sb-bg-background sb-shadow-lg sb-ring-0 sb-transition-transform data-[state=checked]:sb-translate-x-5 data-[state=unchecked]:sb-translate-x-0"
538
538
  )
539
539
  }
540
540
  )
541
541
  ));
542
542
  Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
543
- var Textarea = React15__namespace.forwardRef(
543
+ var Textarea = React11__namespace.forwardRef(
544
544
  ({ className, ...props }, ref) => {
545
- return /* @__PURE__ */ React15__namespace.createElement(
545
+ return /* @__PURE__ */ React11__namespace.createElement(
546
546
  "textarea",
547
547
  {
548
- className: chunkG3675W7A_js.cn(
548
+ className: chunkECJUPPTG_js.cn(
549
549
  "sb-flex sb-min-h-[60px] sb-font-roboto sb-w-full sb-rounded-md sb-border sb-border-input sb-bg-transparent sb-px-3 sb-py-2 sb-text-sm sb-shadow-sm placeholder:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:sb-ring-ring disabled:sb-cursor-not-allowed disabled:sb-opacity-50",
550
550
  className
551
551
  ),
@@ -560,8 +560,8 @@ Textarea.displayName = "Textarea";
560
560
  // src/components/container-item-form.tsx
561
561
  var ContainerItemForm = (props) => {
562
562
  const { item } = props;
563
- const { patchItem } = chunk3FCXE75X_js.useBuilder();
564
- const component = chunkG3675W7A_js.builder.getComponent(item.component);
563
+ const { patchItem } = chunkYGI2WZVP_js.useBuilder();
564
+ const component = chunkECJUPPTG_js.builder.getComponent(item.component);
565
565
  if (!component) {
566
566
  throw new Error(
567
567
  `[simple-builder]: Component with id ${item.component} not found in container item form component`
@@ -581,17 +581,17 @@ var ContainerItemForm = (props) => {
581
581
  props: values
582
582
  });
583
583
  };
584
- React15__namespace.useEffect(() => {
584
+ React11__namespace.useEffect(() => {
585
585
  const subscription = form.watch(() => form.handleSubmit(onSubmit)());
586
586
  return () => subscription.unsubscribe();
587
587
  }, [form.watch, form.handleSubmit]);
588
- return /* @__PURE__ */ React15__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React15__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-space-y-4 sb-p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React15__namespace.createElement(
588
+ return /* @__PURE__ */ React11__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React11__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-space-y-4 sb-p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React11__namespace.createElement(
589
589
  FormField,
590
590
  {
591
591
  key: input.name,
592
592
  control: form.control,
593
593
  name: input.name,
594
- render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(RenderInput, { type: input.type, input, field })
594
+ render: ({ field }) => /* @__PURE__ */ React11__namespace.createElement(RenderInput, { type: input.type, input, field })
595
595
  }
596
596
  )))));
597
597
  };
@@ -599,29 +599,29 @@ var RenderInput = (props) => {
599
599
  const { type, input, field } = props;
600
600
  switch (type) {
601
601
  case "string":
602
- return /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(Input, { ...field })), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
602
+ return /* @__PURE__ */ React11__namespace.createElement(FormItem, null, /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11__namespace.createElement(FormControl, null, /* @__PURE__ */ React11__namespace.createElement(Input, { ...field })), input.helperText && /* @__PURE__ */ React11__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11__namespace.createElement(FormMessage, null));
603
603
  case "longText":
604
- return /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
604
+ return /* @__PURE__ */ React11__namespace.createElement(FormItem, null, /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11__namespace.createElement(FormControl, null, /* @__PURE__ */ React11__namespace.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React11__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11__namespace.createElement(FormMessage, null));
605
605
  case "richText":
606
- return /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
606
+ return /* @__PURE__ */ React11__namespace.createElement(FormItem, null, /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11__namespace.createElement(FormControl, null, /* @__PURE__ */ React11__namespace.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React11__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11__namespace.createElement(FormMessage, null));
607
607
  case "number":
608
- return /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(Input, { type: "number", ...field })), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
608
+ return /* @__PURE__ */ React11__namespace.createElement(FormItem, null, /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11__namespace.createElement(FormControl, null, /* @__PURE__ */ React11__namespace.createElement(Input, { type: "number", ...field })), input.helperText && /* @__PURE__ */ React11__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11__namespace.createElement(FormMessage, null));
609
609
  case "color":
610
- return /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange })), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
610
+ return /* @__PURE__ */ React11__namespace.createElement(FormItem, null, /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11__namespace.createElement(FormControl, null, /* @__PURE__ */ React11__namespace.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange })), input.helperText && /* @__PURE__ */ React11__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11__namespace.createElement(FormMessage, null));
611
611
  case "date":
612
- return /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(Popover, null, /* @__PURE__ */ React15__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React15__namespace.createElement(
613
- chunk3FCXE75X_js.Button,
612
+ return /* @__PURE__ */ React11__namespace.createElement(FormItem, null, /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11__namespace.createElement(FormControl, null, /* @__PURE__ */ React11__namespace.createElement(Popover, null, /* @__PURE__ */ React11__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React11__namespace.createElement(
613
+ chunkYGI2WZVP_js.Button,
614
614
  {
615
615
  variant: "outline",
616
616
  size: "sm",
617
- className: chunkG3675W7A_js.cn(
617
+ className: chunkECJUPPTG_js.cn(
618
618
  "sb-w-full sb-flex sb-justify-start sb-text-left sb-font-normal",
619
619
  !field.value && "sb-text-muted-foreground"
620
620
  )
621
621
  },
622
- /* @__PURE__ */ React15__namespace.createElement(lucideReact.CalendarIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
623
- field.value ? dateFns.format(field.value, "PPP") : /* @__PURE__ */ React15__namespace.createElement("span", null, "Pick a date")
624
- )), /* @__PURE__ */ React15__namespace.createElement(PopoverContent, { className: "sb-w-auto sb-p-0", align: "start" }, /* @__PURE__ */ React15__namespace.createElement(
622
+ /* @__PURE__ */ React11__namespace.createElement(lucideReact.CalendarIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
623
+ field.value ? dateFns.format(field.value, "PPP") : /* @__PURE__ */ React11__namespace.createElement("span", null, "Pick a date")
624
+ )), /* @__PURE__ */ React11__namespace.createElement(PopoverContent, { className: "sb-w-auto sb-p-0", align: "start" }, /* @__PURE__ */ React11__namespace.createElement(
625
625
  Calendar,
626
626
  {
627
627
  mode: "single",
@@ -629,11 +629,11 @@ var RenderInput = (props) => {
629
629
  onSelect: field.onChange,
630
630
  initialFocus: true
631
631
  }
632
- )))), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
632
+ )))), input.helperText && /* @__PURE__ */ React11__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11__namespace.createElement(FormMessage, null));
633
633
  case "boolean":
634
- return /* @__PURE__ */ React15__namespace.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange })), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
634
+ return /* @__PURE__ */ React11__namespace.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11__namespace.createElement(FormControl, null, /* @__PURE__ */ React11__namespace.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange })), input.helperText && /* @__PURE__ */ React11__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11__namespace.createElement(FormMessage, null));
635
635
  case "file":
636
- return /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
636
+ return /* @__PURE__ */ React11__namespace.createElement(FormItem, null, /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11__namespace.createElement(FormControl, null, /* @__PURE__ */ React11__namespace.createElement(
637
637
  MediaInput,
638
638
  {
639
639
  className: "sb-grid sb-grid-cols-2 sb-gap-1",
@@ -645,7 +645,7 @@ var RenderInput = (props) => {
645
645
  "media-input: Error: " + e?.description
646
646
  )
647
647
  }
648
- )), input.helperText && /* @__PURE__ */ React15__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null));
648
+ )), input.helperText && /* @__PURE__ */ React11__namespace.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11__namespace.createElement(FormMessage, null));
649
649
  default:
650
650
  throw new Error(
651
651
  `[simple-builder]: Input type "${props.type}" not supported`
@@ -653,7 +653,7 @@ var RenderInput = (props) => {
653
653
  }
654
654
  };
655
655
  var Tabs = TabsPrimitive__namespace.Root;
656
- var tabsListVariants = chunkG3675W7A_js.tv({
656
+ var tabsListVariants = chunkECJUPPTG_js.tv({
657
657
  variants: {
658
658
  variant: {
659
659
  contained: "sb-inline-flex sb-h-10 sb-items-center sb-justify-center sb-rounded-md sb-bg-muted sb-p-1 sb-text-muted-foreground",
@@ -664,7 +664,7 @@ var tabsListVariants = chunkG3675W7A_js.tv({
664
664
  variant: "contained"
665
665
  }
666
666
  });
667
- var TabsList = React15__namespace.forwardRef(({ variant, className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
667
+ var TabsList = React11__namespace.forwardRef(({ variant, className, ...props }, ref) => /* @__PURE__ */ React11__namespace.createElement(
668
668
  TabsPrimitive__namespace.List,
669
669
  {
670
670
  ref,
@@ -673,7 +673,7 @@ var TabsList = React15__namespace.forwardRef(({ variant, className, ...props },
673
673
  }
674
674
  ));
675
675
  TabsList.displayName = TabsPrimitive__namespace.List.displayName;
676
- var tabsTriggerVariants = chunkG3675W7A_js.tv({
676
+ var tabsTriggerVariants = chunkECJUPPTG_js.tv({
677
677
  variants: {
678
678
  variant: {
679
679
  contained: "sb-inline-flex sb-items-center sb-justify-center sb-whitespace-nowrap sb-rounded-sm sb-px-3 sb-py-1.5 sb-text-sm sb-font-medium sb-ring-offset-background sb-transition-all focus-visible:sb-outline-none focus-visible:sb-ring-2 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2 disabled:sb-pointer-events-none disabled:sb-opacity-50 data-[state=active]:sb-bg-background data-[state=active]:sb-text-foreground data-[state=active]:sb-shadow-sm",
@@ -684,7 +684,7 @@ var tabsTriggerVariants = chunkG3675W7A_js.tv({
684
684
  variant: "contained"
685
685
  }
686
686
  });
687
- var TabsTrigger = React15__namespace.forwardRef(({ variant, className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
687
+ var TabsTrigger = React11__namespace.forwardRef(({ variant, className, ...props }, ref) => /* @__PURE__ */ React11__namespace.createElement(
688
688
  TabsPrimitive__namespace.Trigger,
689
689
  {
690
690
  ref,
@@ -693,11 +693,11 @@ var TabsTrigger = React15__namespace.forwardRef(({ variant, className, ...props
693
693
  }
694
694
  ));
695
695
  TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
696
- var TabsContent = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
696
+ var TabsContent = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11__namespace.createElement(
697
697
  TabsPrimitive__namespace.Content,
698
698
  {
699
699
  ref,
700
- className: chunkG3675W7A_js.cn(
700
+ className: chunkECJUPPTG_js.cn(
701
701
  "sb-ring-offset-background sb-font-roboto focus-visible:sb-outline-none focus-visible:sb-ring-2 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2",
702
702
  className
703
703
  ),
@@ -728,38 +728,38 @@ var BackgroundPicker = (props) => {
728
728
  "url(https://images.unsplash.com/photo-1688822863426-8c5f9b257090?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2532&q=90)",
729
729
  "url(https://images.unsplash.com/photo-1691225850735-6e4e51834cad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2532&q=90)"
730
730
  ];
731
- const defaultTab = React15__namespace.useMemo(() => {
731
+ const defaultTab = React11__namespace.useMemo(() => {
732
732
  if (background.includes("url"))
733
733
  return "image";
734
734
  if (background.includes("gradient"))
735
735
  return "gradient";
736
736
  return "solid";
737
737
  }, [background]);
738
- return /* @__PURE__ */ React15__namespace.createElement(Popover, null, /* @__PURE__ */ React15__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React15__namespace.createElement(
739
- chunk3FCXE75X_js.Button,
738
+ return /* @__PURE__ */ React11__namespace.createElement(Popover, null, /* @__PURE__ */ React11__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React11__namespace.createElement(
739
+ chunkYGI2WZVP_js.Button,
740
740
  {
741
741
  variant: "outline",
742
742
  size: "sm",
743
- className: chunkG3675W7A_js.cn(
743
+ className: chunkECJUPPTG_js.cn(
744
744
  "sb-justify-start sb-text-left sb-font-normal sb-normal-case sb-w-full",
745
745
  !background && "sb-text-muted-foreground",
746
746
  className
747
747
  )
748
748
  },
749
- /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, background ? /* @__PURE__ */ React15__namespace.createElement(
749
+ /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-w-full sb-flex sb-items-center sb-gap-2" }, background ? /* @__PURE__ */ React11__namespace.createElement(
750
750
  "div",
751
751
  {
752
752
  className: "sb-h-4 sb-w-4 sb-rounded !sb-bg-center !sb-bg-cover sb-transition-all sb-border",
753
753
  style: { background }
754
754
  }
755
- ) : /* @__PURE__ */ React15__namespace.createElement(lucideReact.PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-truncate sb-flex-1" }, background ? background : "Kies een achtergrond"))
756
- )), /* @__PURE__ */ React15__namespace.createElement(PopoverContent, { className: "sb-w-64 sb-p-0" }, /* @__PURE__ */ React15__namespace.createElement(Tabs, { defaultValue: defaultTab }, /* @__PURE__ */ React15__namespace.createElement(TabsList, { className: "sb-w-full" }, /* @__PURE__ */ React15__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "solid" }, "Solid"), /* @__PURE__ */ React15__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "gradient" }, "Gradient"), /* @__PURE__ */ React15__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "image" }, "Image")), /* @__PURE__ */ React15__namespace.createElement(
755
+ ) : /* @__PURE__ */ React11__namespace.createElement(lucideReact.PaintbrushIcon, { className: "sb-h-4 sb-w-4" }), /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-truncate sb-flex-1" }, background ? background : "Kies een achtergrond"))
756
+ )), /* @__PURE__ */ React11__namespace.createElement(PopoverContent, { className: "sb-w-64 sb-p-0" }, /* @__PURE__ */ React11__namespace.createElement(Tabs, { defaultValue: defaultTab }, /* @__PURE__ */ React11__namespace.createElement(TabsList, { className: "sb-w-full" }, /* @__PURE__ */ React11__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "solid" }, "Solid"), /* @__PURE__ */ React11__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "gradient" }, "Gradient"), /* @__PURE__ */ React11__namespace.createElement(TabsTrigger, { className: "sb-flex-1", value: "image" }, "Image")), /* @__PURE__ */ React11__namespace.createElement(
757
757
  TabsContent,
758
758
  {
759
759
  value: "solid",
760
760
  className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
761
761
  },
762
- solids.map((s) => /* @__PURE__ */ React15__namespace.createElement(
762
+ solids.map((s) => /* @__PURE__ */ React11__namespace.createElement(
763
763
  "div",
764
764
  {
765
765
  key: s,
@@ -768,13 +768,13 @@ var BackgroundPicker = (props) => {
768
768
  onClick: () => onBackgroundChange(s)
769
769
  }
770
770
  ))
771
- ), /* @__PURE__ */ React15__namespace.createElement(
771
+ ), /* @__PURE__ */ React11__namespace.createElement(
772
772
  TabsContent,
773
773
  {
774
774
  value: "gradient",
775
775
  className: "data-[state=active]:sb-flex sb-flex-wrap sb-gap-1 sb-p-4"
776
776
  },
777
- gradients.map((s) => /* @__PURE__ */ React15__namespace.createElement(
777
+ gradients.map((s) => /* @__PURE__ */ React11__namespace.createElement(
778
778
  "div",
779
779
  {
780
780
  key: s,
@@ -783,7 +783,7 @@ var BackgroundPicker = (props) => {
783
783
  onClick: () => onBackgroundChange(s)
784
784
  }
785
785
  ))
786
- ), /* @__PURE__ */ React15__namespace.createElement(TabsContent, { value: "image" }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-p-4 sb-border-b" }, /* @__PURE__ */ React15__namespace.createElement(
786
+ ), /* @__PURE__ */ React11__namespace.createElement(TabsContent, { value: "image" }, /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-p-4 sb-border-b" }, /* @__PURE__ */ React11__namespace.createElement(
787
787
  MediaInput,
788
788
  {
789
789
  className: "sb-grid sb-grid-cols-2 sb-gap-1",
@@ -799,7 +799,7 @@ var BackgroundPicker = (props) => {
799
799
  "media-input: Error: " + e?.description
800
800
  )
801
801
  }
802
- )), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-1 sb-p-4" }, images.map((s) => /* @__PURE__ */ React15__namespace.createElement(
802
+ )), /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-1 sb-p-4" }, images.map((s) => /* @__PURE__ */ React11__namespace.createElement(
803
803
  "div",
804
804
  {
805
805
  key: s,
@@ -809,7 +809,7 @@ var BackgroundPicker = (props) => {
809
809
  }
810
810
  )))))));
811
811
  };
812
- var toggleVariants = chunkG3675W7A_js.tv({
812
+ var toggleVariants = chunkECJUPPTG_js.tv({
813
813
  base: "sb-inline-flex sb-items-center sb-justify-center sb-rounded-md sb-text-sm sb-font-medium sb-ring-offset-background sb-transition-colors hover:sb-bg-muted hover:sb-text-muted-foreground focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:sb-ring-ring focus-visible:sb-ring-offset-2 disabled:sb-pointer-events-none disabled:sb-opacity-50 data-[state=on]:sb-bg-accent data-[state=on]:sb-text-accent-foreground",
814
814
  variants: {
815
815
  variant: {
@@ -827,7 +827,7 @@ var toggleVariants = chunkG3675W7A_js.tv({
827
827
  size: "default"
828
828
  }
829
829
  });
830
- var Toggle = React15__namespace.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ React15__namespace.createElement(
830
+ var Toggle = React11__namespace.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ React11__namespace.createElement(
831
831
  TogglePrimitive__namespace.Root,
832
832
  {
833
833
  ref,
@@ -837,427 +837,317 @@ var Toggle = React15__namespace.forwardRef(({ className, variant, size, ...props
837
837
  ));
838
838
  Toggle.displayName = TogglePrimitive__namespace.Root.displayName;
839
839
 
840
+ // src/components/ui/spacing-input.tsx
841
+ var SpacingInput = (props) => {
842
+ const [value, setValue] = React11__namespace.useState(parse(props.value || "0px"));
843
+ const [indipendent, setIndipendent] = React11__namespace.useState(
844
+ isIndipendent(parse(props.value || "0px"))
845
+ );
846
+ React11__namespace.useEffect(() => {
847
+ if (!props.onChange)
848
+ return;
849
+ props.onChange(stringify(value));
850
+ }, [value, props.onChange]);
851
+ return /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendent ? /* @__PURE__ */ React11__namespace.createElement(React11__namespace.Fragment, null, /* @__PURE__ */ React11__namespace.createElement(
852
+ AdvancedInput,
853
+ {
854
+ value: value.left,
855
+ pattern: "\\d+",
856
+ onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, left: +value2, right: +value2 })),
857
+ prepend: /* @__PURE__ */ React11__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
858
+ append: /* @__PURE__ */ React11__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
859
+ }
860
+ ), /* @__PURE__ */ React11__namespace.createElement(
861
+ AdvancedInput,
862
+ {
863
+ value: value.top,
864
+ pattern: "\\d+",
865
+ onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, top: +value2, bottom: +value2 })),
866
+ prepend: /* @__PURE__ */ React11__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
867
+ append: /* @__PURE__ */ React11__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
868
+ }
869
+ )) : /* @__PURE__ */ React11__namespace.createElement(React11__namespace.Fragment, null, /* @__PURE__ */ React11__namespace.createElement(
870
+ AdvancedInput,
871
+ {
872
+ value: value.left,
873
+ pattern: "\\d+",
874
+ onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, left: +value2 })),
875
+ prepend: /* @__PURE__ */ React11__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
876
+ append: /* @__PURE__ */ React11__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
877
+ }
878
+ ), /* @__PURE__ */ React11__namespace.createElement(
879
+ AdvancedInput,
880
+ {
881
+ value: value.top,
882
+ pattern: "\\d+",
883
+ onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, top: +value2 })),
884
+ prepend: /* @__PURE__ */ React11__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
885
+ append: /* @__PURE__ */ React11__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
886
+ }
887
+ ), /* @__PURE__ */ React11__namespace.createElement(
888
+ AdvancedInput,
889
+ {
890
+ value: value.right,
891
+ pattern: "\\d+",
892
+ onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, right: +value2 })),
893
+ prepend: /* @__PURE__ */ React11__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
894
+ append: /* @__PURE__ */ React11__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
895
+ }
896
+ ), /* @__PURE__ */ React11__namespace.createElement(
897
+ AdvancedInput,
898
+ {
899
+ value: value.bottom,
900
+ pattern: "\\d+",
901
+ onChange: ({ target: { value: value2 } }) => setValue((prev) => ({ ...prev, bottom: +value2 })),
902
+ prepend: /* @__PURE__ */ React11__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
903
+ append: /* @__PURE__ */ React11__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
904
+ }
905
+ ))), /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React11__namespace.createElement(
906
+ Toggle,
907
+ {
908
+ className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
909
+ variant: "outline",
910
+ size: "sm",
911
+ pressed: indipendent,
912
+ onPressedChange: setIndipendent
913
+ },
914
+ /* @__PURE__ */ React11__namespace.createElement(lucideReact.ScanIcon, { className: "sb-h-4 sb-w-4" })
915
+ )));
916
+ };
917
+ var isIndipendent = (value) => {
918
+ const { top, right, bottom, left } = value;
919
+ return top !== bottom || right !== left;
920
+ };
921
+ var parse = (value) => {
922
+ const matches = value.match(/(\d+)/gm);
923
+ const [top = 0, right = 0, bottom = 0, left = 0] = matches?.map((match) => +match) || [];
924
+ switch (matches?.length) {
925
+ case 1:
926
+ return { top, right: top, bottom: top, left: top };
927
+ case 2:
928
+ return { top, bottom: top, left: right, right };
929
+ case 3:
930
+ return { top, right, left: right, bottom };
931
+ default:
932
+ return { top, right, bottom, left };
933
+ }
934
+ };
935
+ var stringify = (value) => {
936
+ const { top, right, bottom, left } = value;
937
+ if (top === right && top === bottom && top === left) {
938
+ return `${top}px`;
939
+ }
940
+ if (top === bottom && right === left) {
941
+ return `${top}px ${right}px`;
942
+ }
943
+ if (right === left) {
944
+ return `${top}px ${right}px ${bottom}px`;
945
+ }
946
+ return `${top}px ${right}px ${bottom}px ${left}px`;
947
+ };
948
+
840
949
  // src/components/item-design-form.tsx
841
- var spacingSchema = zod.z.discriminatedUnion("indipendent", [
842
- zod.z.object({
843
- indipendent: zod.z.literal(false),
844
- horizontal: zod.z.coerce.number(),
845
- vertical: zod.z.coerce.number()
846
- }),
847
- zod.z.object({
848
- indipendent: zod.z.literal(true),
849
- left: zod.z.coerce.number(),
850
- right: zod.z.coerce.number(),
851
- top: zod.z.coerce.number(),
852
- bottom: zod.z.coerce.number()
853
- })
854
- ]);
855
950
  var designSchema = zod.z.object({
856
- container: zod.z.boolean(),
951
+ container: zod.z.coerce.boolean(),
857
952
  desktop: zod.z.object({
858
- padding: spacingSchema.optional(),
859
- margin: spacingSchema.optional()
860
- }).passthrough().optional(),
953
+ background: zod.z.string(),
954
+ color: zod.z.string(),
955
+ padding: zod.z.string(),
956
+ margin: zod.z.string()
957
+ }),
861
958
  mobile: zod.z.object({
862
- padding: spacingSchema.optional(),
863
- margin: spacingSchema.optional()
864
- }).passthrough().optional()
865
- }).passthrough();
959
+ background: zod.z.string(),
960
+ color: zod.z.string(),
961
+ padding: zod.z.string(),
962
+ margin: zod.z.string()
963
+ })
964
+ });
866
965
  var ItemDesignForm = (props) => {
867
966
  const { item } = props;
868
- const component = chunkG3675W7A_js.builder.getComponent(item.component);
967
+ const component = chunkECJUPPTG_js.builder.getComponent(item.component);
869
968
  if (!component) {
870
969
  throw new Error(
871
970
  `[simple-builder]: Component "${item.component}" not found`
872
971
  );
873
972
  }
874
- const defaults = component.defaultStyles || {};
875
- const { patchItem } = chunk3FCXE75X_js.useBuilder();
876
- const [device, setDevice] = React15__namespace.useState("desktop");
877
- const getDefaultDesktopValue = (key, initial = "") => {
878
- const value = item.styles?.desktop?.[key];
879
- const def = defaults?.desktop?.[key];
880
- if (value !== void 0) {
881
- return value;
882
- } else if (def !== void 0) {
883
- return def;
884
- } else {
885
- return initial;
973
+ const getDefaultDeviceValue = (params) => {
974
+ const { device: device2 = "desktop", key, fallback = "" } = params;
975
+ if (item.styles?.[device2]?.[key] !== void 0) {
976
+ return item.styles[device2][key];
886
977
  }
887
- };
888
- const getDefaultMobileValue = (key, initial = "") => {
889
- const value = item.styles?.mobile?.[key];
890
- const desktopValue = item.styles?.desktop?.[key];
891
- const def = defaults?.mobile?.[key];
892
- const desktopDef = defaults?.desktop?.[key];
893
- if (value !== void 0) {
894
- return value;
895
- } else if (def !== void 0) {
896
- return def;
897
- } else if (desktopValue !== void 0) {
898
- return desktopValue;
899
- } else if (desktopDef !== void 0) {
900
- return desktopDef;
901
- } else {
902
- return initial;
978
+ if (component.defaultStyles?.[device2]?.[key] !== void 0) {
979
+ return component.defaultStyles[device2][key];
980
+ }
981
+ if (device2 === "mobile") {
982
+ const desktopValue = getDefaultDeviceValue({
983
+ ...params,
984
+ device: "desktop"
985
+ });
986
+ if (desktopValue !== void 0) {
987
+ return desktopValue;
988
+ }
903
989
  }
990
+ return fallback;
904
991
  };
905
- const getSpacingValue = (str) => {
906
- const parsed = chunkG3675W7A_js.spacing.parse(str);
992
+ const getDefaultDeviceValues = (device2) => {
907
993
  return {
908
- indipendent: chunkG3675W7A_js.spacing.isIndipendent(str),
909
- horizontal: parsed.left,
910
- vertical: parsed.top,
911
- ...parsed
994
+ background: getDefaultDeviceValue({ device: device2, key: "background" }),
995
+ color: getDefaultDeviceValue({ device: device2, key: "color" }),
996
+ padding: getDefaultDeviceValue({ device: device2, key: "padding" }),
997
+ margin: getDefaultDeviceValue({ device: device2, key: "margin" })
912
998
  };
913
999
  };
914
1000
  const form = reactHookForm.useForm({
915
1001
  resolver: zod$1.zodResolver(designSchema),
916
- defaultValues: {
917
- container: item.styles?.container || defaults.container || true,
918
- desktop: {
919
- background: getDefaultDesktopValue("background"),
920
- color: getDefaultDesktopValue("color"),
921
- padding: getSpacingValue(getDefaultDesktopValue("padding")),
922
- margin: getSpacingValue(getDefaultDesktopValue("margin"))
923
- },
924
- mobile: {
925
- background: getDefaultMobileValue("background"),
926
- color: getDefaultMobileValue("color"),
927
- padding: getSpacingValue(getDefaultMobileValue("padding")),
928
- margin: getSpacingValue(getDefaultMobileValue("margin"))
929
- }
1002
+ values: {
1003
+ container: item.styles?.container ?? true,
1004
+ desktop: getDefaultDeviceValues("desktop"),
1005
+ mobile: getDefaultDeviceValues("mobile")
930
1006
  }
931
1007
  });
1008
+ const { patchItem } = chunkYGI2WZVP_js.useBuilder();
932
1009
  const onSubmit = (values) => {
933
- const { container } = values;
934
- const getPatchedDeviceValues = (device2 = "desktop") => {
935
- return Object.entries(values[device2]).reduce((acc, [key, value]) => {
936
- let res = value;
937
- if (key === "padding" || key === "margin") {
938
- const data = value;
939
- const params = data.indipendent ? data : {
940
- top: data.vertical,
941
- bottom: data.vertical,
942
- left: data.horizontal,
943
- right: data.horizontal
944
- };
945
- res = chunkG3675W7A_js.spacing.stringify(params);
1010
+ const { container, desktop, mobile } = values;
1011
+ const dirtyFields = form.formState.dirtyFields;
1012
+ const desktopPatch = Object.entries(desktop).reduce(
1013
+ (acc, [key, value]) => ({
1014
+ ...acc,
1015
+ ...value && { [key]: value }
1016
+ }),
1017
+ { ...item.styles?.desktop }
1018
+ );
1019
+ const mobilePatch = Object.entries(mobile).reduce(
1020
+ (acc, [key, value]) => {
1021
+ const desktopValue = desktop[key];
1022
+ const isDirty = dirtyFields.desktop?.[key];
1023
+ if (value === desktopValue || isDirty) {
1024
+ return acc;
946
1025
  }
947
1026
  return {
948
1027
  ...acc,
949
- ...res ? { [key]: res } : {}
1028
+ ...value && { [key]: value }
950
1029
  };
951
- }, {});
952
- };
953
- const patchedDesktopValues = getPatchedDeviceValues();
954
- const patchedMobileValues = getPatchedDeviceValues("mobile");
1030
+ },
1031
+ { ...item.styles?.mobile }
1032
+ );
955
1033
  patchItem(item.id, {
956
1034
  styles: {
957
1035
  ...container === false && { container },
958
- ...Object.keys(patchedDesktopValues).length && {
959
- desktop: patchedDesktopValues
960
- },
961
- ...Object.keys(patchedMobileValues).length && {
962
- mobile: patchedMobileValues
963
- }
1036
+ desktop: desktopPatch,
1037
+ mobile: mobilePatch
964
1038
  }
965
1039
  });
966
1040
  };
967
- React15__namespace.useEffect(() => {
1041
+ const [device, setDevice] = React11__namespace.useState("desktop");
1042
+ React11__namespace.useEffect(() => {
968
1043
  const subscription = form.watch(() => form.handleSubmit(onSubmit)());
969
1044
  return () => subscription.unsubscribe();
970
1045
  }, [form.watch, form.handleSubmit]);
971
- const [indipendentPadding, indipendentMargin] = form.watch([
972
- `${device}.padding.indipendent`,
973
- `${device}.margin.indipendent`
974
- ]);
975
- return /* @__PURE__ */ React15__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React15__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-space-y-4 sb-p-4" }, /* @__PURE__ */ React15__namespace.createElement(Tabs, { defaultValue: device, onValueChange: setDevice }, /* @__PURE__ */ React15__namespace.createElement(TabsList, { className: "sb-h-9 sb-grid sb-w-full sb-grid-cols-2" }, /* @__PURE__ */ React15__namespace.createElement(TabsTrigger, { value: "desktop", className: "sb-text-xs" }, /* @__PURE__ */ React15__namespace.createElement(lucideReact.MonitorIcon, { className: "sb-h-4 sb-w-4 sb-mr-2" }), /* @__PURE__ */ React15__namespace.createElement("span", null, "Desktop")), /* @__PURE__ */ React15__namespace.createElement(TabsTrigger, { value: "mobile", className: "sb-text-xs" }, /* @__PURE__ */ React15__namespace.createElement(lucideReact.SmartphoneIcon, { className: "sb-h-4 sb-w-4 sb-mr-2" }), /* @__PURE__ */ React15__namespace.createElement("span", null, "Mobiel")))), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-space-y-4" }, /* @__PURE__ */ React15__namespace.createElement(
1046
+ return /* @__PURE__ */ React11__namespace.createElement(Form, { ...form }, /* @__PURE__ */ React11__namespace.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-space-y-4 sb-p-4" }, /* @__PURE__ */ React11__namespace.createElement(
1047
+ Tabs,
1048
+ {
1049
+ defaultValue: device,
1050
+ onValueChange: (device2) => setDevice(device2)
1051
+ },
1052
+ /* @__PURE__ */ React11__namespace.createElement(TabsList, { className: "sb-h-9 sb-grid sb-w-full sb-grid-cols-2" }, /* @__PURE__ */ React11__namespace.createElement(TabsTrigger, { value: "desktop", className: "sb-text-xs" }, /* @__PURE__ */ React11__namespace.createElement(lucideReact.MonitorIcon, { className: "sb-h-4 sb-w-4 sb-mr-2" }), /* @__PURE__ */ React11__namespace.createElement("span", null, "Desktop")), /* @__PURE__ */ React11__namespace.createElement(TabsTrigger, { value: "mobile", className: "sb-text-xs" }, /* @__PURE__ */ React11__namespace.createElement(lucideReact.SmartphoneIcon, { className: "sb-h-4 sb-w-4 sb-mr-2" }), /* @__PURE__ */ React11__namespace.createElement("span", null, "Mobiel")))
1053
+ ), /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-space-y-4" }, /* @__PURE__ */ React11__namespace.createElement(
976
1054
  FormField,
977
1055
  {
978
1056
  control: form.control,
979
1057
  key: `${device}.background`,
980
1058
  name: `${device}.background`,
981
- render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, "Achtergrond"), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
1059
+ render: ({ field }) => /* @__PURE__ */ React11__namespace.createElement(FormItem, null, /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, "Achtergrond"), /* @__PURE__ */ React11__namespace.createElement(FormControl, null, /* @__PURE__ */ React11__namespace.createElement(
982
1060
  BackgroundPicker,
983
1061
  {
984
1062
  background: field.value,
985
1063
  onBackgroundChange: field.onChange
986
1064
  }
987
- )), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null))
1065
+ )), /* @__PURE__ */ React11__namespace.createElement(FormMessage, null))
988
1066
  }
989
- ), /* @__PURE__ */ React15__namespace.createElement(
1067
+ ), /* @__PURE__ */ React11__namespace.createElement(
990
1068
  FormField,
991
1069
  {
992
1070
  control: form.control,
993
1071
  key: `${device}.color`,
994
1072
  name: `${device}.color`,
995
- render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, "Inhoud kleur"), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
1073
+ render: ({ field }) => /* @__PURE__ */ React11__namespace.createElement(FormItem, null, /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, "Inhoud kleur"), /* @__PURE__ */ React11__namespace.createElement(FormControl, null, /* @__PURE__ */ React11__namespace.createElement(
996
1074
  ColorPicker,
997
1075
  {
998
1076
  color: field.value,
999
1077
  onColorChange: field.onChange
1000
1078
  }
1001
- )), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null))
1079
+ )), /* @__PURE__ */ React11__namespace.createElement(FormMessage, null))
1002
1080
  }
1003
- ), /* @__PURE__ */ React15__namespace.createElement("hr", null), /* @__PURE__ */ React15__namespace.createElement(
1081
+ ), /* @__PURE__ */ React11__namespace.createElement("hr", null), /* @__PURE__ */ React11__namespace.createElement(
1004
1082
  FormField,
1005
1083
  {
1006
1084
  control: form.control,
1007
1085
  name: "container",
1008
- render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, "Volledige breedte"), /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
1086
+ render: ({ field }) => /* @__PURE__ */ React11__namespace.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, "Volledige breedte"), /* @__PURE__ */ React11__namespace.createElement(FormControl, null, /* @__PURE__ */ React11__namespace.createElement(
1009
1087
  Switch,
1010
1088
  {
1011
1089
  checked: !field.value,
1012
1090
  onCheckedChange: (v) => field.onChange(!v)
1013
1091
  }
1014
- )), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null))
1015
- }
1016
- ), /* @__PURE__ */ React15__namespace.createElement("hr", null), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-space-y-2" }, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, "Padding"), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendentPadding ? /* @__PURE__ */ React15__namespace.createElement(React15__namespace.Fragment, null, /* @__PURE__ */ React15__namespace.createElement(
1017
- FormField,
1018
- {
1019
- control: form.control,
1020
- key: `${device}.padding.horizontal`,
1021
- name: `${device}.padding.horizontal`,
1022
- render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
1023
- AdvancedInput,
1024
- {
1025
- ...field,
1026
- prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
1027
- append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1028
- }
1029
- )))
1030
- }
1031
- ), /* @__PURE__ */ React15__namespace.createElement(
1032
- FormField,
1033
- {
1034
- control: form.control,
1035
- key: `${device}.padding.vertical`,
1036
- name: `${device}.padding.vertical`,
1037
- render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
1038
- AdvancedInput,
1039
- {
1040
- ...field,
1041
- prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
1042
- append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1043
- }
1044
- )))
1045
- }
1046
- )) : /* @__PURE__ */ React15__namespace.createElement(React15__namespace.Fragment, null, /* @__PURE__ */ React15__namespace.createElement(
1047
- FormField,
1048
- {
1049
- control: form.control,
1050
- key: `${device}.padding.left`,
1051
- name: `${device}.padding.left`,
1052
- render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
1053
- AdvancedInput,
1054
- {
1055
- ...field,
1056
- prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
1057
- append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1058
- }
1059
- )))
1060
- }
1061
- ), /* @__PURE__ */ React15__namespace.createElement(
1062
- FormField,
1063
- {
1064
- control: form.control,
1065
- key: `${device}.padding.top`,
1066
- name: `${device}.padding.top`,
1067
- render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
1068
- AdvancedInput,
1069
- {
1070
- ...field,
1071
- prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
1072
- append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1073
- }
1074
- )))
1075
- }
1076
- ), /* @__PURE__ */ React15__namespace.createElement(
1077
- FormField,
1078
- {
1079
- control: form.control,
1080
- key: `${device}.padding.right`,
1081
- name: `${device}.padding.right`,
1082
- render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
1083
- AdvancedInput,
1084
- {
1085
- ...field,
1086
- prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
1087
- append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1088
- }
1089
- )))
1092
+ )), /* @__PURE__ */ React11__namespace.createElement(FormMessage, null))
1090
1093
  }
1091
- ), /* @__PURE__ */ React15__namespace.createElement(
1094
+ ), /* @__PURE__ */ React11__namespace.createElement("hr", null), /* @__PURE__ */ React11__namespace.createElement(
1092
1095
  FormField,
1093
1096
  {
1094
1097
  control: form.control,
1095
- key: `${device}.padding.bottom`,
1096
- name: `${device}.padding.bottom`,
1097
- render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
1098
- AdvancedInput,
1098
+ key: `${device}.padding`,
1099
+ name: `${device}.padding`,
1100
+ render: ({ field }) => /* @__PURE__ */ React11__namespace.createElement(FormItem, null, /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, "Padding"), /* @__PURE__ */ React11__namespace.createElement(FormControl, null, /* @__PURE__ */ React11__namespace.createElement(
1101
+ SpacingInput,
1099
1102
  {
1100
- ...field,
1101
- prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
1102
- append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1103
+ value: field.value,
1104
+ onChange: field.onChange
1103
1105
  }
1104
- )))
1106
+ )), /* @__PURE__ */ React11__namespace.createElement(FormMessage, null))
1105
1107
  }
1106
- ))), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React15__namespace.createElement(
1108
+ ), /* @__PURE__ */ React11__namespace.createElement(
1107
1109
  FormField,
1108
1110
  {
1109
1111
  control: form.control,
1110
- key: `${device}.padding.indipendent`,
1111
- name: `${device}.padding.indipendent`,
1112
- render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
1113
- Toggle,
1112
+ key: `${device}.margin`,
1113
+ name: `${device}.margin`,
1114
+ render: ({ field }) => /* @__PURE__ */ React11__namespace.createElement(FormItem, null, /* @__PURE__ */ React11__namespace.createElement(FormLabel, null, "Margin"), /* @__PURE__ */ React11__namespace.createElement(FormControl, null, /* @__PURE__ */ React11__namespace.createElement(
1115
+ SpacingInput,
1114
1116
  {
1115
- className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
1116
- variant: "outline",
1117
- size: "sm",
1118
- pressed: field.value,
1119
- onPressedChange: field.onChange
1120
- },
1121
- /* @__PURE__ */ React15__namespace.createElement(lucideReact.ScanIcon, { className: "sb-h-4 sb-w-4" })
1122
- ))
1123
- }
1124
- ))), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null)), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-space-y-2" }, /* @__PURE__ */ React15__namespace.createElement(FormLabel, null, "Margin"), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-grid sb-grid-cols-[1fr,auto] sb-gap-3" }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-items-center sb-gap-3" }, !indipendentMargin ? /* @__PURE__ */ React15__namespace.createElement(React15__namespace.Fragment, null, /* @__PURE__ */ React15__namespace.createElement(
1125
- FormField,
1126
- {
1127
- control: form.control,
1128
- key: `${device}.margin.horizontal`,
1129
- name: `${device}.margin.horizontal`,
1130
- render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
1131
- AdvancedInput,
1132
- {
1133
- ...field,
1134
- prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4" }),
1135
- append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1117
+ value: field.value,
1118
+ onChange: field.onChange
1136
1119
  }
1137
- )))
1120
+ )), /* @__PURE__ */ React11__namespace.createElement(FormMessage, null))
1138
1121
  }
1139
- ), /* @__PURE__ */ React15__namespace.createElement(
1140
- FormField,
1141
- {
1142
- control: form.control,
1143
- key: `${device}.margin.vertical`,
1144
- name: `${device}.margin.vertical`,
1145
- render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
1146
- AdvancedInput,
1147
- {
1148
- ...field,
1149
- prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalSpaceAroundIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
1150
- append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1151
- }
1152
- )))
1153
- }
1154
- )) : /* @__PURE__ */ React15__namespace.createElement(React15__namespace.Fragment, null, /* @__PURE__ */ React15__namespace.createElement(
1155
- FormField,
1156
- {
1157
- control: form.control,
1158
- key: `${device}.margin.left`,
1159
- name: `${device}.margin.left`,
1160
- render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
1161
- AdvancedInput,
1162
- {
1163
- ...field,
1164
- prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4" }),
1165
- append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1166
- }
1167
- )))
1168
- }
1169
- ), /* @__PURE__ */ React15__namespace.createElement(
1170
- FormField,
1171
- {
1172
- control: form.control,
1173
- key: `${device}.margin.top`,
1174
- name: `${device}.margin.top`,
1175
- render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
1176
- AdvancedInput,
1177
- {
1178
- ...field,
1179
- prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-90" }),
1180
- append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1181
- }
1182
- )))
1183
- }
1184
- ), /* @__PURE__ */ React15__namespace.createElement(
1185
- FormField,
1186
- {
1187
- control: form.control,
1188
- key: `${device}.margin.right`,
1189
- name: `${device}.margin.right`,
1190
- render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
1191
- AdvancedInput,
1192
- {
1193
- ...field,
1194
- prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb-rotate-180" }),
1195
- append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1196
- }
1197
- )))
1198
- }
1199
- ), /* @__PURE__ */ React15__namespace.createElement(
1200
- FormField,
1201
- {
1202
- control: form.control,
1203
- key: `${device}.margin.bottom`,
1204
- name: `${device}.margin.bottom`,
1205
- render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormItem, null, /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
1206
- AdvancedInput,
1207
- {
1208
- ...field,
1209
- prepend: /* @__PURE__ */ React15__namespace.createElement(lucideReact.AlignHorizontalJustifyStartIcon, { className: "sb-h-4 sb-w-4 sb--rotate-90" }),
1210
- append: /* @__PURE__ */ React15__namespace.createElement("span", { className: "sb-text-muted-foreground" }, "px")
1211
- }
1212
- )))
1213
- }
1214
- ))), /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-shrink-0" }, /* @__PURE__ */ React15__namespace.createElement(
1215
- FormField,
1216
- {
1217
- control: form.control,
1218
- key: `${device}.margin.indipendent`,
1219
- name: `${device}.margin.indipendent`,
1220
- render: ({ field }) => /* @__PURE__ */ React15__namespace.createElement(FormControl, null, /* @__PURE__ */ React15__namespace.createElement(
1221
- Toggle,
1222
- {
1223
- className: "sb-shrink-0 sb-flex sb-w-8 sb-h-8 sb-p-0",
1224
- variant: "outline",
1225
- size: "sm",
1226
- pressed: field.value,
1227
- onPressedChange: field.onChange
1228
- },
1229
- /* @__PURE__ */ React15__namespace.createElement(lucideReact.ScanIcon, { className: "sb-h-4 sb-w-4" })
1230
- ))
1231
- }
1232
- ))), /* @__PURE__ */ React15__namespace.createElement(FormMessage, null))))));
1122
+ )))));
1233
1123
  };
1234
1124
 
1235
1125
  // src/components/container-item-toolbar.tsx
1236
1126
  var ContainerItemToolbar = (props) => {
1237
1127
  const { contentId, canBringUp = false, canBringDown = false } = props;
1238
- const { bringUp, bringDown } = chunk3FCXE75X_js.useBuilder();
1239
- return /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-absolute sb-z-20 sb-top-1 sb-right-1 sb-rounded-md sb-shadow sb-flex sb-flex-col sb-gap-1 sb-p-1 sb-bg-card sb-text-card-foreground sb-item-toolbar sb-opacity-0 sb-transition-opacity" }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-h-10 sb-p-1 sb-border sb-border-input sb-bg-background sb-rounded-md sb-text-sm sb-font-medium sb-flex sb-gap-1 sb-items-center sb-justify-start" }, /* @__PURE__ */ React15__namespace.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React15__namespace.createElement(
1240
- chunk3FCXE75X_js.Button,
1128
+ const { bringUp, bringDown } = chunkYGI2WZVP_js.useBuilder();
1129
+ return /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-absolute sb-z-20 sb-top-1 sb-right-1 sb-rounded-md sb-shadow sb-flex sb-flex-col sb-gap-1 sb-p-1 sb-bg-card sb-text-card-foreground sb-item-toolbar sb-opacity-0 sb-transition-opacity" }, /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-h-10 sb-p-1 sb-border sb-border-input sb-bg-background sb-rounded-md sb-text-sm sb-font-medium sb-flex sb-gap-1 sb-items-center sb-justify-start" }, /* @__PURE__ */ React11__namespace.createElement(EditButton, { id: contentId }), /* @__PURE__ */ React11__namespace.createElement(
1130
+ chunkYGI2WZVP_js.Button,
1241
1131
  {
1242
1132
  variant: "ghost",
1243
1133
  className: "sb-w-8 sb-h-8 sb-p-0",
1244
1134
  onClick: () => bringUp(contentId),
1245
1135
  disabled: !canBringUp
1246
1136
  },
1247
- /* @__PURE__ */ React15__namespace.createElement(lucideReact.ArrowUp, { className: "sb-h-5 sb-w-5" })
1248
- ), /* @__PURE__ */ React15__namespace.createElement(
1249
- chunk3FCXE75X_js.Button,
1137
+ /* @__PURE__ */ React11__namespace.createElement(lucideReact.ArrowUp, { className: "sb-h-5 sb-w-5" })
1138
+ ), /* @__PURE__ */ React11__namespace.createElement(
1139
+ chunkYGI2WZVP_js.Button,
1250
1140
  {
1251
1141
  variant: "ghost",
1252
1142
  className: "sb-w-8 sb-h-8 sb-p-0",
1253
1143
  onClick: () => bringDown(contentId),
1254
1144
  disabled: !canBringDown
1255
1145
  },
1256
- /* @__PURE__ */ React15__namespace.createElement(lucideReact.ArrowDown, { className: "sb-h-5 sb-w-5" })
1257
- ), /* @__PURE__ */ React15__namespace.createElement(DeleteButton, { contentId })));
1146
+ /* @__PURE__ */ React11__namespace.createElement(lucideReact.ArrowDown, { className: "sb-h-5 sb-w-5" })
1147
+ ), /* @__PURE__ */ React11__namespace.createElement(DeleteButton, { contentId })));
1258
1148
  };
1259
1149
  var EditButton = ({ id }) => {
1260
- return /* @__PURE__ */ React15__namespace.createElement(Popover, null, /* @__PURE__ */ React15__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React15__namespace.createElement(chunk3FCXE75X_js.Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React15__namespace.createElement(lucideReact.Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React15__namespace.createElement(
1150
+ return /* @__PURE__ */ React11__namespace.createElement(Popover, null, /* @__PURE__ */ React11__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React11__namespace.createElement(chunkYGI2WZVP_js.Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React11__namespace.createElement(lucideReact.Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React11__namespace.createElement(
1261
1151
  PopoverContent,
1262
1152
  {
1263
1153
  side: "left",
@@ -1267,33 +1157,33 @@ var EditButton = ({ id }) => {
1267
1157
  className: "sb-p-0",
1268
1158
  collisionPadding: 16
1269
1159
  },
1270
- /* @__PURE__ */ React15__namespace.createElement(EditPopoverInner, { id })
1160
+ /* @__PURE__ */ React11__namespace.createElement(EditPopoverInner, { id })
1271
1161
  ));
1272
1162
  };
1273
1163
  var EditPopoverInner = (props) => {
1274
1164
  const { id } = props;
1275
- const { getItem } = chunk3FCXE75X_js.useBuilder();
1165
+ const { getItem } = chunkYGI2WZVP_js.useBuilder();
1276
1166
  const item = getItem(id);
1277
1167
  if (!item) {
1278
1168
  throw new Error(
1279
1169
  `[simple-builder]: Item with id ${id} not found in container item form component`
1280
1170
  );
1281
1171
  }
1282
- return /* @__PURE__ */ React15__namespace.createElement(Tabs, null, /* @__PURE__ */ React15__namespace.createElement(TabsList, { variant: "text", defaultValue: "content" }, /* @__PURE__ */ React15__namespace.createElement(TabsTrigger, { variant: "text", value: "content" }, "Inhoud"), /* @__PURE__ */ React15__namespace.createElement(TabsTrigger, { variant: "text", value: "design" }, "Design")), /* @__PURE__ */ React15__namespace.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React15__namespace.createElement(ContainerItemForm, { item })), /* @__PURE__ */ React15__namespace.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React15__namespace.createElement(ItemDesignForm, { item })));
1172
+ return /* @__PURE__ */ React11__namespace.createElement(Tabs, null, /* @__PURE__ */ React11__namespace.createElement(TabsList, { variant: "text", defaultValue: "content" }, /* @__PURE__ */ React11__namespace.createElement(TabsTrigger, { variant: "text", value: "content" }, "Inhoud"), /* @__PURE__ */ React11__namespace.createElement(TabsTrigger, { variant: "text", value: "design" }, "Design")), /* @__PURE__ */ React11__namespace.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React11__namespace.createElement(ContainerItemForm, { item })), /* @__PURE__ */ React11__namespace.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React11__namespace.createElement(ItemDesignForm, { item })));
1283
1173
  };
1284
1174
  var DeleteButton = ({ contentId }) => {
1285
- const { deleteContent } = chunk3FCXE75X_js.useBuilder();
1286
- return /* @__PURE__ */ React15__namespace.createElement(AlertDialog, null, /* @__PURE__ */ React15__namespace.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React15__namespace.createElement(
1287
- chunk3FCXE75X_js.Button,
1175
+ const { deleteContent } = chunkYGI2WZVP_js.useBuilder();
1176
+ return /* @__PURE__ */ React11__namespace.createElement(AlertDialog, null, /* @__PURE__ */ React11__namespace.createElement(AlertDialogTrigger, { asChild: true }, /* @__PURE__ */ React11__namespace.createElement(
1177
+ chunkYGI2WZVP_js.Button,
1288
1178
  {
1289
1179
  variant: "ghost",
1290
1180
  className: "sb-w-8 sb-h-8 sb-p-0 sb-text-destructive"
1291
1181
  },
1292
- /* @__PURE__ */ React15__namespace.createElement(lucideReact.Trash2Icon, { className: "sb-h-5 sb-w-5" })
1293
- )), /* @__PURE__ */ React15__namespace.createElement(AlertDialogContent, null, /* @__PURE__ */ React15__namespace.createElement(AlertDialogDescription, null, "Weet je zeker dat je dit blok wilt verwijderen?"), /* @__PURE__ */ React15__namespace.createElement(AlertDialogFooter, null, /* @__PURE__ */ React15__namespace.createElement(AlertDialogCancel, null, "Annuleren"), /* @__PURE__ */ React15__namespace.createElement(
1182
+ /* @__PURE__ */ React11__namespace.createElement(lucideReact.Trash2Icon, { className: "sb-h-5 sb-w-5" })
1183
+ )), /* @__PURE__ */ React11__namespace.createElement(AlertDialogContent, null, /* @__PURE__ */ React11__namespace.createElement(AlertDialogDescription, null, "Weet je zeker dat je dit blok wilt verwijderen?"), /* @__PURE__ */ React11__namespace.createElement(AlertDialogFooter, null, /* @__PURE__ */ React11__namespace.createElement(AlertDialogCancel, null, "Annuleren"), /* @__PURE__ */ React11__namespace.createElement(
1294
1184
  AlertDialogAction,
1295
1185
  {
1296
- className: chunk3FCXE75X_js.buttonVariants({ variant: "destructive" }),
1186
+ className: chunkYGI2WZVP_js.buttonVariants({ variant: "destructive" }),
1297
1187
  onClick: () => deleteContent(contentId)
1298
1188
  },
1299
1189
  "Verwijderen"
@@ -1309,14 +1199,14 @@ var BuildContainerInner = (props) => {
1309
1199
  "[simple-builder]: Multiple content blocks detected when using property multiple false."
1310
1200
  );
1311
1201
  }
1312
- return /* @__PURE__ */ React15__namespace.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React15__namespace.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React15__namespace.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React15__namespace.createElement(React15__namespace.Fragment, { key: item.id }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-relative sb-container-item" }, /* @__PURE__ */ React15__namespace.createElement(chunkG3675W7A_js.DesignWrapper, { styles: item.styles }, chunkG3675W7A_js.builder.bindComponent(item, true)), /* @__PURE__ */ React15__namespace.createElement(
1202
+ return /* @__PURE__ */ React11__namespace.createElement("div", null, items.length <= 0 ? /* @__PURE__ */ React11__namespace.createElement(AddContentPlaceholder, { parent: id, container: name, index: 0 }) : multiple && /* @__PURE__ */ React11__namespace.createElement(AddContentDividerButton, { parent: id, container: name, index: 0 }), items.map((item, i) => /* @__PURE__ */ React11__namespace.createElement(React11__namespace.Fragment, { key: item.id }, /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-relative sb-container-item" }, /* @__PURE__ */ React11__namespace.createElement(chunkECJUPPTG_js.DesignWrapper, { styles: item.styles }, chunkECJUPPTG_js.builder.bindComponent(item, true)), /* @__PURE__ */ React11__namespace.createElement(
1313
1203
  ContainerItemToolbar,
1314
1204
  {
1315
1205
  contentId: item.id,
1316
1206
  canBringUp: i > 0,
1317
1207
  canBringDown: i < items.length - 1
1318
1208
  }
1319
- )), multiple && /* @__PURE__ */ React15__namespace.createElement(
1209
+ )), multiple && /* @__PURE__ */ React11__namespace.createElement(
1320
1210
  AddContentDividerButton,
1321
1211
  {
1322
1212
  parent: id,
@@ -1327,12 +1217,12 @@ var BuildContainerInner = (props) => {
1327
1217
  };
1328
1218
  var build_container_client_default = BuildContainerInner;
1329
1219
  var AddContentButton = (props) => {
1330
- const components = chunkG3675W7A_js.builder.getComponents();
1331
- const { addContent } = chunk3FCXE75X_js.useBuilder();
1332
- return /* @__PURE__ */ React15__namespace.createElement(Popover, null, /* @__PURE__ */ React15__namespace.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React15__namespace.createElement(PopoverContent, { className: "sb-p-1" }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-2" }, components.map((component) => {
1220
+ const components = chunkECJUPPTG_js.builder.getComponents();
1221
+ const { addContent } = chunkYGI2WZVP_js.useBuilder();
1222
+ return /* @__PURE__ */ React11__namespace.createElement(Popover, null, /* @__PURE__ */ React11__namespace.createElement(PopoverTrigger, { asChild: true }, props.children), /* @__PURE__ */ React11__namespace.createElement(PopoverContent, { className: "sb-p-1" }, /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-grid sb-grid-cols-2 sb-gap-2" }, components.map((component) => {
1333
1223
  const Icon = component.icon ?? lucideReact.ImageIcon;
1334
- return /* @__PURE__ */ React15__namespace.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React15__namespace.createElement(
1335
- chunk3FCXE75X_js.Button,
1224
+ return /* @__PURE__ */ React11__namespace.createElement(PopoverClose, { key: component.name, asChild: true }, /* @__PURE__ */ React11__namespace.createElement(
1225
+ chunkYGI2WZVP_js.Button,
1336
1226
  {
1337
1227
  variant: "ghost",
1338
1228
  className: "sb-justify-start",
@@ -1345,22 +1235,22 @@ var AddContentButton = (props) => {
1345
1235
  );
1346
1236
  }
1347
1237
  },
1348
- /* @__PURE__ */ React15__namespace.createElement(Icon, { className: "sb-mr-2 sb-h-4 sb-w-4 sb-shrink-0" }),
1238
+ /* @__PURE__ */ React11__namespace.createElement(Icon, { className: "sb-mr-2 sb-h-4 sb-w-4 sb-shrink-0" }),
1349
1239
  component.friendlyName ?? component.name
1350
1240
  ));
1351
1241
  }))));
1352
1242
  };
1353
1243
  var AddContentPlaceholder = (props) => {
1354
- return /* @__PURE__ */ React15__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-flex sb-justify-center sb-bg-primary/50 p-4" }, /* @__PURE__ */ React15__namespace.createElement(chunk3FCXE75X_js.Button, { size: "sm" }, /* @__PURE__ */ React15__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }), "Blok Toevoegen")));
1244
+ return /* @__PURE__ */ React11__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-flex sb-justify-center sb-bg-primary/50 p-4" }, /* @__PURE__ */ React11__namespace.createElement(chunkYGI2WZVP_js.Button, { size: "sm" }, /* @__PURE__ */ React11__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }), "Blok Toevoegen")));
1355
1245
  };
1356
1246
  var AddContentDividerButton = (props) => {
1357
- return /* @__PURE__ */ React15__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React15__namespace.createElement("div", { className: "sb-w-full sb-h-1 sb--my-[2px] sb-bg-primary sb-relative sb-z-20 sb-opacity-0 add-content-divider-button sb-transition-opacity" }, /* @__PURE__ */ React15__namespace.createElement(
1358
- chunk3FCXE75X_js.Button,
1247
+ return /* @__PURE__ */ React11__namespace.createElement(AddContentButton, { ...props }, /* @__PURE__ */ React11__namespace.createElement("div", { className: "sb-w-full sb-h-1 sb--my-[2px] sb-bg-primary sb-relative sb-z-20 sb-opacity-0 add-content-divider-button sb-transition-opacity" }, /* @__PURE__ */ React11__namespace.createElement(
1248
+ chunkYGI2WZVP_js.Button,
1359
1249
  {
1360
1250
  size: "sm",
1361
1251
  className: "sb-absolute sb-left-1/2 sb-top-1/2 sb--translate-y-1/2 sb--translate-x-1/2 sb-shadow"
1362
1252
  },
1363
- /* @__PURE__ */ React15__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
1253
+ /* @__PURE__ */ React11__namespace.createElement(lucideReact.PlusIcon, { className: "sb-mr-2 sb-h-4 sb-w-4" }),
1364
1254
  "Blok Toevoegen"
1365
1255
  )));
1366
1256
  };