@drawbridge/components 0.0.2 → 0.0.4

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 (3) hide show
  1. package/dist/card-advertisement.js +149 -130
  2. package/dist/card-advertisement.mjs +139 -130
  3. package/package.json +2 -1
package/dist/card-advertisement.js CHANGED
@@ -1,6 +1,8 @@
1
+ var __create = Object.create;
1
2
  var __defProp = Object.defineProperty;
2
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
4
6
  var __hasOwnProp = Object.prototype.hasOwnProperty;
5
7
  var __export = (target, all) => {
6
8
  for (var name in all)
@@ -14,6 +16,14 @@ var __copyProps = (to, from, except, desc) => {
14
16
  }
15
17
  return to;
16
18
  };
19
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
20
+ // If the importer is in node compatibility mode or this is not an ESM
21
+ // file that has been converted to a CommonJS file using a Babel-
22
+ // compatible transform (i.e. "__esModule" has not been set), then set
23
+ // "default" to the CommonJS "module.exports" for node compatibility.
24
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
25
+ mod
26
+ ));
17
27
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
28
 
19
29
  // components/card-advertisement.js
@@ -22,8 +32,9 @@ __export(card_advertisement_exports, {
22
32
  default: () => card_advertisement_default
23
33
  });
24
34
  module.exports = __toCommonJS(card_advertisement_exports);
25
- var import_react = require("react");
26
- var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ React.createElement(
35
+ var import_react = __toESM(require("react"));
36
+ var import_jsx_runtime = require("react/jsx-runtime");
37
+ var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
27
38
  "img",
28
39
  {
29
40
  ...{
@@ -33,7 +44,7 @@ var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ React.createElem
33
44
  }
34
45
  }
35
46
  );
36
- var DefaultVideo = ({ className, hsl, mp4, poster }) => /* @__PURE__ */ React.createElement(
47
+ var DefaultVideo = ({ className, hsl, mp4, poster }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
37
48
  "video",
38
49
  {
39
50
  ...{
@@ -107,7 +118,7 @@ var CardAdvertisement = ({
107
118
  classes.asset.push("bg-gray-light");
108
119
  }
109
120
  ;
110
- return /* @__PURE__ */ React.createElement(
121
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
111
122
  "div",
112
123
  {
113
124
  ...{
@@ -116,142 +127,150 @@ var CardAdvertisement = ({
116
127
  backgroundColor: (_f = (_e = style == null ? void 0 : style.background) == null ? void 0 : _e.color) == null ? void 0 : _f.hex,
117
128
  color: (_h = (_g = style == null ? void 0 : style.text) == null ? void 0 : _g.color) == null ? void 0 : _h.hex
118
129
  }
119
- }
120
- },
121
- /* @__PURE__ */ React.createElement(
122
- "span",
123
- {
124
- ...{
125
- className: classes.asset.join(" ")
126
- }
127
130
  },
128
- (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("image") && /* @__PURE__ */ React.createElement(
129
- ImageComponent,
130
- {
131
- ...{
132
- alt: asset == null ? void 0 : asset.filename,
133
- className: "w-full h-full object-cover",
134
- fill: true,
135
- key: asset == null ? void 0 : asset.id,
136
- priority: false,
137
- sizes: "100%",
138
- src: [
139
- (_i = asset == null ? void 0 : asset.sizes) == null ? void 0 : _i["400x400"],
140
- (asset == null ? void 0 : asset.updatedAt) && "?query=" + (asset == null ? void 0 : asset.updatedAt)
141
- ].filter(Boolean).join("")
142
- }
143
- }
144
- ),
145
- !(asset == null ? void 0 : asset.sizes) && (product == null ? void 0 : product.image) && /* @__PURE__ */ React.createElement(
146
- ImageComponent,
147
- {
148
- ...{
149
- alt: (product == null ? void 0 : product.title) || "Product",
150
- className: "w-full h-full object-cover",
151
- fill: true,
152
- priority: false,
153
- sizes: "100%",
154
- src: product.image,
155
- unoptimized: true
156
- }
157
- }
158
- ),
159
- (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("video") && /* @__PURE__ */ React.createElement(
160
- "div",
161
- {
162
- ...{
163
- className: "relative h-full w-full aspect-[9/16]"
164
- }
165
- },
166
- /* @__PURE__ */ React.createElement(
167
- VideoComponent,
131
+ children: [
132
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
133
+ "span",
168
134
  {
169
135
  ...{
170
- className: "w-full h-full",
171
- hsl: ((_j = asset == null ? void 0 : asset.sizes) == null ? void 0 : _j.hsl) + "?query=" + (asset == null ? void 0 : asset.updatedAt),
172
- mp4: ((_k = asset == null ? void 0 : asset.sizes) == null ? void 0 : _k.original) + "?query=" + (asset == null ? void 0 : asset.updatedAt),
173
- poster: (((_n = (_m = (_l = asset == null ? void 0 : asset.frames) == null ? void 0 : _l[asset == null ? void 0 : asset.poster]) == null ? void 0 : _m.sizes) == null ? void 0 : _n["500x500"]) || ((_q = (_p = (_o = asset == null ? void 0 : asset.frames) == null ? void 0 : _o[asset == null ? void 0 : asset.poster]) == null ? void 0 : _p.sizes) == null ? void 0 : _q["1080x1920"])) + "?query=" + (asset == null ? void 0 : asset.updatedAt)
174
- }
175
- }
176
- )
177
- ),
178
- hasVariants && /* @__PURE__ */ React.createElement(
179
- "div",
180
- {
181
- ...{
182
- className: "absolute inset-0 flex flex-col justify-end transition-transform duration-300 ease-in-out p-4 space-y-3",
183
- style: {
184
- backgroundColor: "rgba(0,0,0,0.92)",
185
- transform: variantsOpen ? "translateY(0)" : "translateY(100%)"
186
- }
136
+ className: classes.asset.join(" ")
137
+ },
138
+ children: [
139
+ (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("image") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
140
+ ImageComponent,
141
+ {
142
+ ...{
143
+ alt: asset == null ? void 0 : asset.filename,
144
+ className: "w-full h-full object-cover",
145
+ fill: true,
146
+ key: asset == null ? void 0 : asset.id,
147
+ priority: false,
148
+ sizes: "100%",
149
+ src: [
150
+ (_i = asset == null ? void 0 : asset.sizes) == null ? void 0 : _i["400x400"],
151
+ (asset == null ? void 0 : asset.updatedAt) && "?query=" + (asset == null ? void 0 : asset.updatedAt)
152
+ ].filter(Boolean).join("")
153
+ }
154
+ }
155
+ ),
156
+ !(asset == null ? void 0 : asset.sizes) && (product == null ? void 0 : product.image) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
157
+ ImageComponent,
158
+ {
159
+ ...{
160
+ alt: (product == null ? void 0 : product.title) || "Product",
161
+ className: "w-full h-full object-cover",
162
+ fill: true,
163
+ priority: false,
164
+ sizes: "100%",
165
+ src: product.image,
166
+ unoptimized: true
167
+ }
168
+ }
169
+ ),
170
+ (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("video") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
171
+ "div",
172
+ {
173
+ ...{
174
+ className: "relative h-full w-full aspect-[9/16]"
175
+ },
176
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
177
+ VideoComponent,
178
+ {
179
+ ...{
180
+ className: "w-full h-full",
181
+ hsl: ((_j = asset == null ? void 0 : asset.sizes) == null ? void 0 : _j.hsl) + "?query=" + (asset == null ? void 0 : asset.updatedAt),
182
+ mp4: ((_k = asset == null ? void 0 : asset.sizes) == null ? void 0 : _k.original) + "?query=" + (asset == null ? void 0 : asset.updatedAt),
183
+ poster: (((_n = (_m = (_l = asset == null ? void 0 : asset.frames) == null ? void 0 : _l[asset == null ? void 0 : asset.poster]) == null ? void 0 : _m.sizes) == null ? void 0 : _n["500x500"]) || ((_q = (_p = (_o = asset == null ? void 0 : asset.frames) == null ? void 0 : _o[asset == null ? void 0 : asset.poster]) == null ? void 0 : _p.sizes) == null ? void 0 : _q["1080x1920"])) + "?query=" + (asset == null ? void 0 : asset.updatedAt)
184
+ }
185
+ }
186
+ )
187
+ }
188
+ ),
189
+ hasVariants && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
190
+ "div",
191
+ {
192
+ ...{
193
+ className: "absolute inset-0 flex flex-col justify-end transition-transform duration-300 ease-in-out p-4 space-y-3",
194
+ style: {
195
+ backgroundColor: "rgba(0,0,0,0.92)",
196
+ transform: variantsOpen ? "translateY(0)" : "translateY(100%)"
197
+ }
198
+ },
199
+ children: [
200
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
201
+ "p",
202
+ {
203
+ ...{
204
+ className: "text-xs text-white/60"
205
+ },
206
+ children: "Select an option"
207
+ }
208
+ ),
209
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
210
+ "div",
211
+ {
212
+ ...{
213
+ className: "flex flex-wrap gap-2"
214
+ },
215
+ children: variants.map((variant) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
216
+ "button",
217
+ {
218
+ ...{
219
+ className: "text-xs px-3 py-1.5 rounded border border-white/30 text-white hover:border-white transition-colors",
220
+ onClick: () => {
221
+ if (preview) return;
222
+ const href = variantUrl(variant);
223
+ if (href) window.open(href, "_blank");
224
+ },
225
+ type: "button"
226
+ },
227
+ children: variant.title
228
+ },
229
+ variant.shopifyId
230
+ ))
231
+ }
232
+ )
233
+ ]
234
+ }
235
+ )
236
+ ]
187
237
  }
188
- },
189
- /* @__PURE__ */ React.createElement(
190
- "p",
191
- {
192
- ...{
193
- className: "text-xs text-white/60"
194
- }
195
- },
196
- "Select an option"
197
238
  ),
198
- /* @__PURE__ */ React.createElement(
199
- "div",
239
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
240
+ "span",
200
241
  {
201
242
  ...{
202
- className: "flex flex-wrap gap-2"
203
- }
204
- },
205
- variants.map((variant) => /* @__PURE__ */ React.createElement(
206
- "button",
207
- {
208
- key: variant.shopifyId,
209
- ...{
210
- className: "text-xs px-3 py-1.5 rounded border border-white/30 text-white hover:border-white transition-colors",
211
- onClick: () => {
212
- if (preview) return;
213
- const href = variantUrl(variant);
214
- if (href) window.open(href, "_blank");
215
- },
216
- type: "button"
243
+ className: classes.content.join(" "),
244
+ style: {
245
+ ...fonts == null ? void 0 : fonts.body,
246
+ backgroundColor: (_s = (_r = style == null ? void 0 : style.text) == null ? void 0 : _r.color) == null ? void 0 : _s.hex,
247
+ color: (_u = (_t = style == null ? void 0 : style.background) == null ? void 0 : _t.color) == null ? void 0 : _u.hex
217
248
  }
218
249
  },
219
- variant.title
220
- ))
221
- )
222
- )
223
- ),
224
- /* @__PURE__ */ React.createElement(
225
- "span",
226
- {
227
- ...{
228
- className: classes.content.join(" "),
229
- style: {
230
- ...fonts == null ? void 0 : fonts.body,
231
- backgroundColor: (_s = (_r = style == null ? void 0 : style.text) == null ? void 0 : _r.color) == null ? void 0 : _s.hex,
232
- color: (_u = (_t = style == null ? void 0 : style.background) == null ? void 0 : _t.color) == null ? void 0 : _u.hex
233
- }
234
- }
235
- },
236
- title && /* @__PURE__ */ React.createElement("p", null, title),
237
- button && /* @__PURE__ */ React.createElement(
238
- "button",
239
- {
240
- ...{
241
- className: classes.button.join(" "),
242
- disabled: !preview && !hasVariants && !url,
243
- onClick: hasVariants ? () => setVariantsOpen((v) => !v) : preview ? () => {
244
- } : onClick,
245
- style: {
246
- backgroundColor: (_w = (_v = style == null ? void 0 : style.background) == null ? void 0 : _v.color) == null ? void 0 : _w.hex,
247
- color: (_y = (_x = style == null ? void 0 : style.text) == null ? void 0 : _x.color) == null ? void 0 : _y.hex
248
- },
249
- type: "button"
250
+ children: [
251
+ title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: title }),
252
+ button && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
253
+ "button",
254
+ {
255
+ ...{
256
+ className: classes.button.join(" "),
257
+ disabled: !preview && !hasVariants && !url,
258
+ onClick: hasVariants ? () => setVariantsOpen((v) => !v) : preview ? () => {
259
+ } : onClick,
260
+ style: {
261
+ backgroundColor: (_w = (_v = style == null ? void 0 : style.background) == null ? void 0 : _v.color) == null ? void 0 : _w.hex,
262
+ color: (_y = (_x = style == null ? void 0 : style.text) == null ? void 0 : _x.color) == null ? void 0 : _y.hex
263
+ },
264
+ type: "button"
265
+ },
266
+ children: variantsOpen ? "Close" : button
267
+ }
268
+ )
269
+ ]
250
270
  }
251
- },
252
- variantsOpen ? "Close" : button
253
- )
254
- )
271
+ )
272
+ ]
273
+ }
255
274
  );
256
275
  };
257
276
  var card_advertisement_default = CardAdvertisement;
package/dist/card-advertisement.mjs CHANGED
@@ -1,6 +1,7 @@
1
1
  // components/card-advertisement.js
2
- import { useState } from "react";
3
- var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ React.createElement(
2
+ import React, { useState } from "react";
3
+ import { jsx, jsxs } from "react/jsx-runtime";
4
+ var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ jsx(
4
5
  "img",
5
6
  {
6
7
  ...{
@@ -10,7 +11,7 @@ var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ React.createElem
10
11
  }
11
12
  }
12
13
  );
13
- var DefaultVideo = ({ className, hsl, mp4, poster }) => /* @__PURE__ */ React.createElement(
14
+ var DefaultVideo = ({ className, hsl, mp4, poster }) => /* @__PURE__ */ jsx(
14
15
  "video",
15
16
  {
16
17
  ...{
@@ -84,7 +85,7 @@ var CardAdvertisement = ({
84
85
  classes.asset.push("bg-gray-light");
85
86
  }
86
87
  ;
87
- return /* @__PURE__ */ React.createElement(
88
+ return /* @__PURE__ */ jsxs(
88
89
  "div",
89
90
  {
90
91
  ...{
@@ -93,142 +94,150 @@ var CardAdvertisement = ({
93
94
  backgroundColor: (_f = (_e = style == null ? void 0 : style.background) == null ? void 0 : _e.color) == null ? void 0 : _f.hex,
94
95
  color: (_h = (_g = style == null ? void 0 : style.text) == null ? void 0 : _g.color) == null ? void 0 : _h.hex
95
96
  }
96
- }
97
- },
98
- /* @__PURE__ */ React.createElement(
99
- "span",
100
- {
101
- ...{
102
- className: classes.asset.join(" ")
103
- }
104
97
  },
105
- (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("image") && /* @__PURE__ */ React.createElement(
106
- ImageComponent,
107
- {
108
- ...{
109
- alt: asset == null ? void 0 : asset.filename,
110
- className: "w-full h-full object-cover",
111
- fill: true,
112
- key: asset == null ? void 0 : asset.id,
113
- priority: false,
114
- sizes: "100%",
115
- src: [
116
- (_i = asset == null ? void 0 : asset.sizes) == null ? void 0 : _i["400x400"],
117
- (asset == null ? void 0 : asset.updatedAt) && "?query=" + (asset == null ? void 0 : asset.updatedAt)
118
- ].filter(Boolean).join("")
119
- }
120
- }
121
- ),
122
- !(asset == null ? void 0 : asset.sizes) && (product == null ? void 0 : product.image) && /* @__PURE__ */ React.createElement(
123
- ImageComponent,
124
- {
125
- ...{
126
- alt: (product == null ? void 0 : product.title) || "Product",
127
- className: "w-full h-full object-cover",
128
- fill: true,
129
- priority: false,
130
- sizes: "100%",
131
- src: product.image,
132
- unoptimized: true
133
- }
134
- }
135
- ),
136
- (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("video") && /* @__PURE__ */ React.createElement(
137
- "div",
138
- {
139
- ...{
140
- className: "relative h-full w-full aspect-[9/16]"
141
- }
142
- },
143
- /* @__PURE__ */ React.createElement(
144
- VideoComponent,
98
+ children: [
99
+ /* @__PURE__ */ jsxs(
100
+ "span",
145
101
  {
146
102
  ...{
147
- className: "w-full h-full",
148
- hsl: ((_j = asset == null ? void 0 : asset.sizes) == null ? void 0 : _j.hsl) + "?query=" + (asset == null ? void 0 : asset.updatedAt),
149
- mp4: ((_k = asset == null ? void 0 : asset.sizes) == null ? void 0 : _k.original) + "?query=" + (asset == null ? void 0 : asset.updatedAt),
150
- poster: (((_n = (_m = (_l = asset == null ? void 0 : asset.frames) == null ? void 0 : _l[asset == null ? void 0 : asset.poster]) == null ? void 0 : _m.sizes) == null ? void 0 : _n["500x500"]) || ((_q = (_p = (_o = asset == null ? void 0 : asset.frames) == null ? void 0 : _o[asset == null ? void 0 : asset.poster]) == null ? void 0 : _p.sizes) == null ? void 0 : _q["1080x1920"])) + "?query=" + (asset == null ? void 0 : asset.updatedAt)
151
- }
152
- }
153
- )
154
- ),
155
- hasVariants && /* @__PURE__ */ React.createElement(
156
- "div",
157
- {
158
- ...{
159
- className: "absolute inset-0 flex flex-col justify-end transition-transform duration-300 ease-in-out p-4 space-y-3",
160
- style: {
161
- backgroundColor: "rgba(0,0,0,0.92)",
162
- transform: variantsOpen ? "translateY(0)" : "translateY(100%)"
163
- }
103
+ className: classes.asset.join(" ")
104
+ },
105
+ children: [
106
+ (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("image") && /* @__PURE__ */ jsx(
107
+ ImageComponent,
108
+ {
109
+ ...{
110
+ alt: asset == null ? void 0 : asset.filename,
111
+ className: "w-full h-full object-cover",
112
+ fill: true,
113
+ key: asset == null ? void 0 : asset.id,
114
+ priority: false,
115
+ sizes: "100%",
116
+ src: [
117
+ (_i = asset == null ? void 0 : asset.sizes) == null ? void 0 : _i["400x400"],
118
+ (asset == null ? void 0 : asset.updatedAt) && "?query=" + (asset == null ? void 0 : asset.updatedAt)
119
+ ].filter(Boolean).join("")
120
+ }
121
+ }
122
+ ),
123
+ !(asset == null ? void 0 : asset.sizes) && (product == null ? void 0 : product.image) && /* @__PURE__ */ jsx(
124
+ ImageComponent,
125
+ {
126
+ ...{
127
+ alt: (product == null ? void 0 : product.title) || "Product",
128
+ className: "w-full h-full object-cover",
129
+ fill: true,
130
+ priority: false,
131
+ sizes: "100%",
132
+ src: product.image,
133
+ unoptimized: true
134
+ }
135
+ }
136
+ ),
137
+ (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("video") && /* @__PURE__ */ jsx(
138
+ "div",
139
+ {
140
+ ...{
141
+ className: "relative h-full w-full aspect-[9/16]"
142
+ },
143
+ children: /* @__PURE__ */ jsx(
144
+ VideoComponent,
145
+ {
146
+ ...{
147
+ className: "w-full h-full",
148
+ hsl: ((_j = asset == null ? void 0 : asset.sizes) == null ? void 0 : _j.hsl) + "?query=" + (asset == null ? void 0 : asset.updatedAt),
149
+ mp4: ((_k = asset == null ? void 0 : asset.sizes) == null ? void 0 : _k.original) + "?query=" + (asset == null ? void 0 : asset.updatedAt),
150
+ poster: (((_n = (_m = (_l = asset == null ? void 0 : asset.frames) == null ? void 0 : _l[asset == null ? void 0 : asset.poster]) == null ? void 0 : _m.sizes) == null ? void 0 : _n["500x500"]) || ((_q = (_p = (_o = asset == null ? void 0 : asset.frames) == null ? void 0 : _o[asset == null ? void 0 : asset.poster]) == null ? void 0 : _p.sizes) == null ? void 0 : _q["1080x1920"])) + "?query=" + (asset == null ? void 0 : asset.updatedAt)
151
+ }
152
+ }
153
+ )
154
+ }
155
+ ),
156
+ hasVariants && /* @__PURE__ */ jsxs(
157
+ "div",
158
+ {
159
+ ...{
160
+ className: "absolute inset-0 flex flex-col justify-end transition-transform duration-300 ease-in-out p-4 space-y-3",
161
+ style: {
162
+ backgroundColor: "rgba(0,0,0,0.92)",
163
+ transform: variantsOpen ? "translateY(0)" : "translateY(100%)"
164
+ }
165
+ },
166
+ children: [
167
+ /* @__PURE__ */ jsx(
168
+ "p",
169
+ {
170
+ ...{
171
+ className: "text-xs text-white/60"
172
+ },
173
+ children: "Select an option"
174
+ }
175
+ ),
176
+ /* @__PURE__ */ jsx(
177
+ "div",
178
+ {
179
+ ...{
180
+ className: "flex flex-wrap gap-2"
181
+ },
182
+ children: variants.map((variant) => /* @__PURE__ */ jsx(
183
+ "button",
184
+ {
185
+ ...{
186
+ className: "text-xs px-3 py-1.5 rounded border border-white/30 text-white hover:border-white transition-colors",
187
+ onClick: () => {
188
+ if (preview) return;
189
+ const href = variantUrl(variant);
190
+ if (href) window.open(href, "_blank");
191
+ },
192
+ type: "button"
193
+ },
194
+ children: variant.title
195
+ },
196
+ variant.shopifyId
197
+ ))
198
+ }
199
+ )
200
+ ]
201
+ }
202
+ )
203
+ ]
164
204
  }
165
- },
166
- /* @__PURE__ */ React.createElement(
167
- "p",
168
- {
169
- ...{
170
- className: "text-xs text-white/60"
171
- }
172
- },
173
- "Select an option"
174
205
  ),
175
- /* @__PURE__ */ React.createElement(
176
- "div",
206
+ /* @__PURE__ */ jsxs(
207
+ "span",
177
208
  {
178
209
  ...{
179
- className: "flex flex-wrap gap-2"
180
- }
181
- },
182
- variants.map((variant) => /* @__PURE__ */ React.createElement(
183
- "button",
184
- {
185
- key: variant.shopifyId,
186
- ...{
187
- className: "text-xs px-3 py-1.5 rounded border border-white/30 text-white hover:border-white transition-colors",
188
- onClick: () => {
189
- if (preview) return;
190
- const href = variantUrl(variant);
191
- if (href) window.open(href, "_blank");
192
- },
193
- type: "button"
210
+ className: classes.content.join(" "),
211
+ style: {
212
+ ...fonts == null ? void 0 : fonts.body,
213
+ backgroundColor: (_s = (_r = style == null ? void 0 : style.text) == null ? void 0 : _r.color) == null ? void 0 : _s.hex,
214
+ color: (_u = (_t = style == null ? void 0 : style.background) == null ? void 0 : _t.color) == null ? void 0 : _u.hex
194
215
  }
195
216
  },
196
- variant.title
197
- ))
198
- )
199
- )
200
- ),
201
- /* @__PURE__ */ React.createElement(
202
- "span",
203
- {
204
- ...{
205
- className: classes.content.join(" "),
206
- style: {
207
- ...fonts == null ? void 0 : fonts.body,
208
- backgroundColor: (_s = (_r = style == null ? void 0 : style.text) == null ? void 0 : _r.color) == null ? void 0 : _s.hex,
209
- color: (_u = (_t = style == null ? void 0 : style.background) == null ? void 0 : _t.color) == null ? void 0 : _u.hex
210
- }
211
- }
212
- },
213
- title && /* @__PURE__ */ React.createElement("p", null, title),
214
- button && /* @__PURE__ */ React.createElement(
215
- "button",
216
- {
217
- ...{
218
- className: classes.button.join(" "),
219
- disabled: !preview && !hasVariants && !url,
220
- onClick: hasVariants ? () => setVariantsOpen((v) => !v) : preview ? () => {
221
- } : onClick,
222
- style: {
223
- backgroundColor: (_w = (_v = style == null ? void 0 : style.background) == null ? void 0 : _v.color) == null ? void 0 : _w.hex,
224
- color: (_y = (_x = style == null ? void 0 : style.text) == null ? void 0 : _x.color) == null ? void 0 : _y.hex
225
- },
226
- type: "button"
217
+ children: [
218
+ title && /* @__PURE__ */ jsx("p", { children: title }),
219
+ button && /* @__PURE__ */ jsx(
220
+ "button",
221
+ {
222
+ ...{
223
+ className: classes.button.join(" "),
224
+ disabled: !preview && !hasVariants && !url,
225
+ onClick: hasVariants ? () => setVariantsOpen((v) => !v) : preview ? () => {
226
+ } : onClick,
227
+ style: {
228
+ backgroundColor: (_w = (_v = style == null ? void 0 : style.background) == null ? void 0 : _v.color) == null ? void 0 : _w.hex,
229
+ color: (_y = (_x = style == null ? void 0 : style.text) == null ? void 0 : _x.color) == null ? void 0 : _y.hex
230
+ },
231
+ type: "button"
232
+ },
233
+ children: variantsOpen ? "Close" : button
234
+ }
235
+ )
236
+ ]
227
237
  }
228
- },
229
- variantsOpen ? "Close" : button
230
- )
231
- )
238
+ )
239
+ ]
240
+ }
232
241
  );
233
242
  };
234
243
  var card_advertisement_default = CardAdvertisement;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@drawbridge/components",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
4
  "exports": {
5
5
  "./card-advertisement": {
6
6
  "types": "./types/card-advertisement.d.ts",
@@ -25,6 +25,7 @@
25
25
  "react": ">=18"
26
26
  },
27
27
  "devDependencies": {
28
+ "@types/react": "^18.0.0",
28
29
  "tsup": "^8.5.1"
29
30
  }
30
31
  }