@snapcall/design-system 1.24.0 → 1.24.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/components/MediaCard/index.d.mts +3 -2
  2. package/dist/components/MediaCard/index.d.ts +3 -2
  3. package/dist/components/MediaCard/index.js +101 -56
  4. package/dist/components/MediaCard/index.mjs +90 -45
  5. package/dist/components/Textarea/index.d.mts +3 -0
  6. package/dist/components/Textarea/index.d.ts +3 -0
  7. package/dist/components/Textarea/index.js +69 -12
  8. package/dist/components/Textarea/index.mjs +70 -11
  9. package/dist/index.d.mts +6 -2
  10. package/dist/index.d.ts +6 -2
  11. package/dist/style.css +1 -1
  12. package/package.json +2 -2
package/dist/components/MediaCard/index.d.mts CHANGED
@@ -5,8 +5,9 @@ type MediaCardProps = {
5
5
  title: string;
6
6
  description?: string;
7
7
  duration?: number;
8
- type: 'audio' | 'video' | 'image';
8
+ type: 'audio' | 'video' | 'image' | 'other';
9
9
  image?: string | React.JSX.Element;
10
+ icon?: React.JSX.Element;
10
11
  action?: React.JSX.Element;
11
12
  actionBehavior?: 'default' | 'hover';
12
13
  moderationStatus?: 'processing' | 'flagged' | 'safe' | null;
@@ -18,7 +19,7 @@ type MediaCardProps = {
18
19
  };
19
20
  } & HTMLAttributes<HTMLDivElement>;
20
21
  declare const MediaCard: {
21
- ({ title, description, duration, type, image, action, actionBehavior, isLoading, size, author, className, ...otherProps }: MediaCardProps): react_jsx_runtime.JSX.Element;
22
+ ({ title, description, duration, type, image, icon, action, actionBehavior, isLoading, size, author, className, ...otherProps }: MediaCardProps): react_jsx_runtime.JSX.Element;
22
23
  displayName: string;
23
24
  };
24
25
 
package/dist/components/MediaCard/index.d.ts CHANGED
@@ -5,8 +5,9 @@ type MediaCardProps = {
5
5
  title: string;
6
6
  description?: string;
7
7
  duration?: number;
8
- type: 'audio' | 'video' | 'image';
8
+ type: 'audio' | 'video' | 'image' | 'other';
9
9
  image?: string | React.JSX.Element;
10
+ icon?: React.JSX.Element;
10
11
  action?: React.JSX.Element;
11
12
  actionBehavior?: 'default' | 'hover';
12
13
  moderationStatus?: 'processing' | 'flagged' | 'safe' | null;
@@ -18,7 +19,7 @@ type MediaCardProps = {
18
19
  };
19
20
  } & HTMLAttributes<HTMLDivElement>;
20
21
  declare const MediaCard: {
21
- ({ title, description, duration, type, image, action, actionBehavior, isLoading, size, author, className, ...otherProps }: MediaCardProps): react_jsx_runtime.JSX.Element;
22
+ ({ title, description, duration, type, image, icon, action, actionBehavior, isLoading, size, author, className, ...otherProps }: MediaCardProps): react_jsx_runtime.JSX.Element;
22
23
  displayName: string;
23
24
  };
24
25
 
package/dist/components/MediaCard/index.js CHANGED
@@ -54,13 +54,13 @@ __export(MediaCard_exports, {
54
54
  module.exports = __toCommonJS(MediaCard_exports);
55
55
 
56
56
  // src/components/MediaCard/MediaCard.tsx
57
- var import_react7 = require("react");
57
+ var import_react8 = require("react");
58
58
 
59
- // src/icons/image1.tsx
59
+ // src/icons/file6.tsx
60
60
  var import_react = require("react");
61
61
  var import_jsx_runtime = require("react/jsx-runtime");
62
- var Image1Icon = (0, import_react.forwardRef)(
63
- function Image1Icon2(_a, ref) {
62
+ var File6Icon = (0, import_react.forwardRef)(
63
+ function File6Icon2(_a, ref) {
64
64
  var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
65
65
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
66
66
  "svg",
@@ -74,8 +74,50 @@ var Image1Icon = (0, import_react.forwardRef)(
74
74
  className
75
75
  }, other), {
76
76
  children: [
77
- duotone && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
78
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
77
+ duotone && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
78
+ "path",
79
+ {
80
+ opacity: "0.12",
81
+ d: "M19.1213 7.12139L14.8787 2.87875C14.6222 2.62223 14.324 2.41696 14 2.26953V6.40007C14 6.96012 14 7.24015 14.109 7.45406C14.2049 7.64222 14.3578 7.7952 14.546 7.89108C14.7599 8.00007 15.0399 8.00007 15.6 8.00007H19.7305C19.5831 7.67611 19.3778 7.37792 19.1213 7.12139Z",
82
+ fill: "currentColor"
83
+ }
84
+ ),
85
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
86
+ "path",
87
+ {
88
+ d: "M14 2.26953V6.40007C14 6.96012 14 7.24015 14.109 7.45406C14.2049 7.64222 14.3578 7.7952 14.546 7.89108C14.7599 8.00007 15.0399 8.00007 15.6 8.00007H19.7305M16 13H8M16 17H8M10 9H8M14 2H8.8C7.11984 2 6.27976 2 5.63803 2.32698C5.07354 2.6146 4.6146 3.07354 4.32698 3.63803C4 4.27976 4 5.11984 4 6.8V17.2C4 18.8802 4 19.7202 4.32698 20.362C4.6146 20.9265 5.07354 21.3854 5.63803 21.673C6.27976 22 7.11984 22 8.8 22H15.2C16.8802 22 17.7202 22 18.362 21.673C18.9265 21.3854 19.3854 20.9265 19.673 20.362C20 19.7202 20 18.8802 20 17.2V8L14 2Z",
89
+ stroke: "currentColor",
90
+ strokeWidth: "2",
91
+ strokeLinecap: "round",
92
+ strokeLinejoin: "round"
93
+ }
94
+ )
95
+ ]
96
+ })
97
+ );
98
+ }
99
+ );
100
+
101
+ // src/icons/image1.tsx
102
+ var import_react2 = require("react");
103
+ var import_jsx_runtime2 = require("react/jsx-runtime");
104
+ var Image1Icon = (0, import_react2.forwardRef)(
105
+ function Image1Icon2(_a, ref) {
106
+ var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
107
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
108
+ "svg",
109
+ __spreadProps(__spreadValues({
110
+ ref,
111
+ width: size,
112
+ height: size,
113
+ viewBox: "0 0 24 24",
114
+ fill: "none",
115
+ xmlns: "http://www.w3.org/2000/svg",
116
+ className
117
+ }, other), {
118
+ children: [
119
+ duotone && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
120
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
79
121
  "path",
80
122
  {
81
123
  d: "M6.36574 19.6343L14.8687 11.1314C15.2647 10.7354 15.4627 10.5373 15.691 10.4632C15.8919 10.3979 16.1082 10.3979 16.3091 10.4632C16.5374 10.5373 16.7354 10.7354 17.1314 11.1314L21 15V16.2C21 17.8802 21 18.7202 20.6731 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7203 21 17.8802 21 16.2 21H6.93142C6.3256 21 6.0227 21 5.88243 20.8802C5.76073 20.7763 5.69614 20.6203 5.7087 20.4608C5.72317 20.2769 5.93736 20.0627 6.36574 19.6343Z",
@@ -83,7 +125,7 @@ var Image1Icon = (0, import_react.forwardRef)(
83
125
  fillOpacity: "0.12"
84
126
  }
85
127
  ),
86
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
128
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
87
129
  "path",
88
130
  {
89
131
  d: "M8.50005 10.5C9.60462 10.5 10.5 9.60457 10.5 8.5C10.5 7.39543 9.60462 6.5 8.50005 6.5C7.39548 6.5 6.50005 7.39543 6.50005 8.5C6.50005 9.60457 7.39548 10.5 8.50005 10.5Z",
@@ -92,7 +134,7 @@ var Image1Icon = (0, import_react.forwardRef)(
92
134
  }
93
135
  )
94
136
  ] }),
95
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
137
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
96
138
  "path",
97
139
  {
98
140
  d: "M16.2 21H6.93137C6.32555 21 6.02265 21 5.88238 20.8802C5.76068 20.7763 5.69609 20.6203 5.70865 20.4608C5.72312 20.2769 5.93731 20.0627 6.36569 19.6343L14.8686 11.1314C15.2646 10.7354 15.4627 10.5373 15.691 10.4632C15.8918 10.3979 16.1082 10.3979 16.309 10.4632C16.5373 10.5373 16.7354 10.7354 17.1314 11.1314L21 15V16.2M16.2 21C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2M16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2M10.5 8.5C10.5 9.60457 9.60457 10.5 8.5 10.5C7.39543 10.5 6.5 9.60457 6.5 8.5C6.5 7.39543 7.39543 6.5 8.5 6.5C9.60457 6.5 10.5 7.39543 10.5 8.5Z",
@@ -109,11 +151,11 @@ var Image1Icon = (0, import_react.forwardRef)(
109
151
  );
110
152
 
111
153
  // src/icons/play.tsx
112
- var import_react2 = require("react");
113
- var import_jsx_runtime2 = require("react/jsx-runtime");
114
- var PlayIcon = (0, import_react2.forwardRef)(function PlayIcon2(_a, ref) {
154
+ var import_react3 = require("react");
155
+ var import_jsx_runtime3 = require("react/jsx-runtime");
156
+ var PlayIcon = (0, import_react3.forwardRef)(function PlayIcon2(_a, ref) {
115
157
  var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
116
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
158
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
117
159
  "svg",
118
160
  __spreadProps(__spreadValues({
119
161
  ref,
@@ -125,7 +167,7 @@ var PlayIcon = (0, import_react2.forwardRef)(function PlayIcon2(_a, ref) {
125
167
  className
126
168
  }, other), {
127
169
  children: [
128
- duotone && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
170
+ duotone && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
129
171
  "path",
130
172
  {
131
173
  opacity: "0.12",
@@ -133,7 +175,7 @@ var PlayIcon = (0, import_react2.forwardRef)(function PlayIcon2(_a, ref) {
133
175
  fill: "currentColor"
134
176
  }
135
177
  ),
136
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
178
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
137
179
  "path",
138
180
  {
139
181
  d: "M5 4.98951C5 4.01835 5 3.53277 5.20249 3.2651C5.37889 3.03191 5.64852 2.88761 5.9404 2.87018C6.27544 2.85017 6.67946 3.11953 7.48752 3.65823L18.0031 10.6686C18.6708 11.1137 19.0046 11.3363 19.1209 11.6168C19.2227 11.8621 19.2227 12.1377 19.1209 12.383C19.0046 12.6635 18.6708 12.886 18.0031 13.3312L7.48752 20.3415C6.67946 20.8802 6.27544 21.1496 5.9404 21.1296C5.64852 21.1122 5.37889 20.9679 5.20249 20.7347C5 20.467 5 19.9814 5 19.0103V4.98951Z",
@@ -149,12 +191,12 @@ var PlayIcon = (0, import_react2.forwardRef)(function PlayIcon2(_a, ref) {
149
191
  });
150
192
 
151
193
  // src/icons/recording2.tsx
152
- var import_react3 = require("react");
153
- var import_jsx_runtime3 = require("react/jsx-runtime");
154
- var Recording2Icon = (0, import_react3.forwardRef)(
194
+ var import_react4 = require("react");
195
+ var import_jsx_runtime4 = require("react/jsx-runtime");
196
+ var Recording2Icon = (0, import_react4.forwardRef)(
155
197
  function Recording2Icon2(_a, ref) {
156
198
  var _b = _a, { size = 24, className = "text-gray-1000" } = _b, other = __objRest(_b, ["size", "className"]);
157
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
199
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
158
200
  "svg",
159
201
  __spreadProps(__spreadValues({
160
202
  ref,
@@ -165,7 +207,7 @@ var Recording2Icon = (0, import_react3.forwardRef)(
165
207
  xmlns: "http://www.w3.org/2000/svg",
166
208
  className
167
209
  }, other), {
168
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
210
+ children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
169
211
  "path",
170
212
  {
171
213
  d: "M3 10L3 14M7.5 11V13M12 6V18M16.5 3V21M21 10V14",
@@ -181,12 +223,12 @@ var Recording2Icon = (0, import_react3.forwardRef)(
181
223
  );
182
224
 
183
225
  // src/icons/spinner.tsx
184
- var import_react4 = require("react");
185
- var import_jsx_runtime4 = require("react/jsx-runtime");
186
- var SpinnerIcon = (0, import_react4.forwardRef)(
226
+ var import_react5 = require("react");
227
+ var import_jsx_runtime5 = require("react/jsx-runtime");
228
+ var SpinnerIcon = (0, import_react5.forwardRef)(
187
229
  function SpinnerIcon2(_a, ref) {
188
230
  var _b = _a, { size = 24, className = "animate-spin text-gray-1000" } = _b, other = __objRest(_b, ["size", "className"]);
189
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
231
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
190
232
  "svg",
191
233
  __spreadProps(__spreadValues({
192
234
  ref,
@@ -198,7 +240,7 @@ var SpinnerIcon = (0, import_react4.forwardRef)(
198
240
  className
199
241
  }, other), {
200
242
  children: [
201
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
243
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
202
244
  "path",
203
245
  {
204
246
  opacity: "0.12",
@@ -206,7 +248,7 @@ var SpinnerIcon = (0, import_react4.forwardRef)(
206
248
  fill: "currentColor"
207
249
  }
208
250
  ),
209
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
251
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
210
252
  "path",
211
253
  {
212
254
  d: "M22.916 12C23.7908 12 24.5108 12.7122 24.3956 13.5794C24.1641 15.323 23.5512 17.0011 22.5928 18.4912C21.3476 20.4272 19.5719 21.9643 17.4774 22.919C15.3829 23.8738 13.058 24.206 10.7799 23.8761C8.50179 23.5461 6.36667 22.5679 4.62912 21.0581C2.89158 19.5483 1.62494 17.5706 0.98025 15.3609C0.335563 13.1511 0.340035 10.8026 0.993131 8.5953C1.64623 6.38803 2.92039 4.41517 4.66367 2.91199C6.00545 1.75501 7.58156 0.913857 9.27571 0.441275C10.1184 0.206218 10.9241 0.819698 11.0462 1.68595C11.1683 2.55221 10.5575 3.33995 9.72694 3.61463C8.63201 3.97673 7.61359 4.55146 6.73246 5.31122C5.44941 6.41757 4.51162 7.86959 4.03094 9.49414C3.55027 11.1187 3.54697 12.8472 4.02146 14.4736C4.49595 16.1 5.4282 17.5555 6.70703 18.6668C7.98587 19.778 9.55732 20.4979 11.234 20.7408C12.9107 20.9836 14.6218 20.7391 16.1634 20.0364C17.7049 19.3337 19.0119 18.2024 19.9283 16.7775C20.5576 15.799 20.9846 14.7103 21.1903 13.5755C21.3464 12.7148 22.0412 12 22.916 12Z",
@@ -220,12 +262,12 @@ var SpinnerIcon = (0, import_react4.forwardRef)(
220
262
  );
221
263
 
222
264
  // src/icons/videoRecorder.tsx
223
- var import_react5 = require("react");
224
- var import_jsx_runtime5 = require("react/jsx-runtime");
225
- var VideoRecorderIcon = (0, import_react5.forwardRef)(
265
+ var import_react6 = require("react");
266
+ var import_jsx_runtime6 = require("react/jsx-runtime");
267
+ var VideoRecorderIcon = (0, import_react6.forwardRef)(
226
268
  function VideoRecorderIcon2(_a, ref) {
227
269
  var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
228
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
270
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
229
271
  "svg",
230
272
  __spreadProps(__spreadValues({
231
273
  ref,
@@ -237,7 +279,7 @@ var VideoRecorderIcon = (0, import_react5.forwardRef)(
237
279
  className
238
280
  }, other), {
239
281
  children: [
240
- duotone && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
282
+ duotone && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
241
283
  "path",
242
284
  {
243
285
  opacity: "0.12",
@@ -249,7 +291,7 @@ var VideoRecorderIcon = (0, import_react5.forwardRef)(
249
291
  strokeLinejoin: "round"
250
292
  }
251
293
  ),
252
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
294
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
253
295
  "path",
254
296
  {
255
297
  d: "M22 8.93137C22 8.32555 22 8.02265 21.8802 7.88238C21.7763 7.76068 21.6203 7.69609 21.4608 7.70865C21.2769 7.72312 21.0627 7.93731 20.6343 8.36569L17 12L20.6343 15.6343C21.0627 16.0627 21.2769 16.2769 21.4608 16.2914C21.6203 16.3039 21.7763 16.2393 21.8802 16.1176C22 15.9774 22 15.6744 22 15.0686V8.93137Z",
@@ -259,7 +301,7 @@ var VideoRecorderIcon = (0, import_react5.forwardRef)(
259
301
  strokeLinejoin: "round"
260
302
  }
261
303
  ),
262
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
304
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
263
305
  "path",
264
306
  {
265
307
  d: "M2 9.8C2 8.11984 2 7.27976 2.32698 6.63803C2.6146 6.07354 3.07354 5.6146 3.63803 5.32698C4.27976 5 5.11984 5 6.8 5H12.2C13.8802 5 14.7202 5 15.362 5.32698C15.9265 5.6146 16.3854 6.07354 16.673 6.63803C17 7.27976 17 8.11984 17 9.8V14.2C17 15.8802 17 16.7202 16.673 17.362C16.3854 17.9265 15.9265 18.3854 15.362 18.673C14.7202 19 13.8802 19 12.2 19H6.8C5.11984 19 4.27976 19 3.63803 18.673C3.07354 18.3854 2.6146 17.9265 2.32698 17.362C2 16.7202 2 15.8802 2 14.2V9.8Z",
@@ -283,9 +325,9 @@ function cn(...inputs) {
283
325
  }
284
326
 
285
327
  // src/components/Avatar/Avatar.tsx
286
- var import_react6 = require("react");
328
+ var import_react7 = require("react");
287
329
  var import_cva = require("cva");
288
- var import_jsx_runtime6 = require("react/jsx-runtime");
330
+ var import_jsx_runtime7 = require("react/jsx-runtime");
289
331
  var avatarSizes = (0, import_cva.cva)({
290
332
  variants: {
291
333
  size: {
@@ -341,10 +383,10 @@ var getColorFromName = (name) => {
341
383
  const colorIndex = nameValue % Object.keys(avatarColors).length;
342
384
  return Object.keys(avatarColors)[colorIndex];
343
385
  };
344
- var Avatar = (0, import_react6.forwardRef)(function Avatar2(_a, forwardedRef) {
386
+ var Avatar = (0, import_react7.forwardRef)(function Avatar2(_a, forwardedRef) {
345
387
  var _b = _a, { size, className, icon, name, variant, image } = _b, other = __objRest(_b, ["size", "className", "icon", "name", "variant", "image"]);
346
388
  const color = getColorFromName(name);
347
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
389
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
348
390
  "div",
349
391
  __spreadProps(__spreadValues({
350
392
  "data-size": size,
@@ -363,7 +405,7 @@ var Avatar = (0, import_react6.forwardRef)(function Avatar2(_a, forwardedRef) {
363
405
  }, other), {
364
406
  children: [
365
407
  image ? image : name && size !== "xxs" ? getNameInitials(name) : null,
366
- icon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "absolute bottom-0 right-0", children: icon })
408
+ icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "absolute bottom-0 right-0", children: icon })
367
409
  ]
368
410
  })
369
411
  );
@@ -381,11 +423,12 @@ var secondsToDuration = (seconds) => {
381
423
  };
382
424
 
383
425
  // src/components/MediaCard/MediaCard.tsx
384
- var import_jsx_runtime7 = require("react/jsx-runtime");
426
+ var import_jsx_runtime8 = require("react/jsx-runtime");
385
427
  var typesIcons = {
386
- audio: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Recording2Icon, {}),
387
- video: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VideoRecorderIcon, { duotone: true }),
388
- image: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Image1Icon, { duotone: true })
428
+ audio: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Recording2Icon, {}),
429
+ video: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VideoRecorderIcon, { duotone: true }),
430
+ image: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Image1Icon, { duotone: true }),
431
+ other: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(File6Icon, { duotone: true })
389
432
  };
390
433
  var MediaCard = (_a) => {
391
434
  var _b = _a, {
@@ -394,6 +437,7 @@ var MediaCard = (_a) => {
394
437
  duration,
395
438
  type,
396
439
  image,
440
+ icon,
397
441
  action,
398
442
  actionBehavior = "default",
399
443
  isLoading,
@@ -406,6 +450,7 @@ var MediaCard = (_a) => {
406
450
  "duration",
407
451
  "type",
408
452
  "image",
453
+ "icon",
409
454
  "action",
410
455
  "actionBehavior",
411
456
  "isLoading",
@@ -413,24 +458,24 @@ var MediaCard = (_a) => {
413
458
  "author",
414
459
  "className"
415
460
  ]);
416
- const thumbnail = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
461
+ const thumbnail = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
417
462
  "div",
418
463
  {
419
464
  className: cn("min-h-0 bg-gray-50 relative", {
420
465
  "aspect-square rounded-md shrink-0": size === "medium" || size === "small",
421
466
  "flex-1": size === "large"
422
467
  }),
423
- children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex justify-center items-center w-full h-full rounded-[inherit] overflow-hidden relative", children: [
424
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
468
+ children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex justify-center items-center w-full h-full rounded-[inherit] overflow-hidden relative", children: [
469
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
425
470
  "div",
426
471
  {
427
472
  className: cn(
428
473
  "absolute w-full h-full",
429
474
  size === "large" ? "p-2" : "p-1"
430
475
  ),
431
- children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative w-full h-full flex justify-center items-center", children: [
432
- duration !== void 0 && size === "large" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute bottom-0 left-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "px-1 py-0.5 bg-black/50 dark:bg-white/50 rounded-sm text-xs text-white dark:text-black font-medium truncate", children: secondsToDuration(duration) }) }),
433
- size !== "small" && author && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute bottom-0 right-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
476
+ children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative w-full h-full flex justify-center items-center", children: [
477
+ duration !== void 0 && size === "large" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute bottom-0 left-0", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "px-1 py-0.5 bg-black/50 dark:bg-white/50 rounded-sm text-xs text-white dark:text-black font-medium truncate", children: secondsToDuration(duration) }) }),
478
+ size !== "small" && author && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "absolute bottom-0 right-0", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
434
479
  Avatar,
435
480
  {
436
481
  size: size === "large" ? "sm" : "xs",
@@ -438,7 +483,7 @@ var MediaCard = (_a) => {
438
483
  image: author.image
439
484
  }
440
485
  ) }),
441
- type === "video" && image && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
486
+ type === "video" && image && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
442
487
  PlayIcon,
443
488
  {
444
489
  size: size === "large" ? 24 : size === "medium" ? 18 : 12,
@@ -448,14 +493,14 @@ var MediaCard = (_a) => {
448
493
  ] })
449
494
  }
450
495
  ),
451
- typeof image === "string" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { className: "w-full h-full object-cover", src: image }) : image ? image : (0, import_react7.cloneElement)(typesIcons[type], {
496
+ typeof image === "string" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("img", { className: "w-full h-full object-cover", src: image }) : image ? image : (0, import_react8.cloneElement)(icon || typesIcons[type], {
452
497
  className: "text-gray-900 self-center",
453
498
  size: size === "large" ? 24 : size === "medium" ? 18 : 16
454
499
  })
455
500
  ] })
456
501
  }
457
502
  );
458
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
503
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
459
504
  "div",
460
505
  __spreadProps(__spreadValues({}, otherProps), {
461
506
  className: cn(
@@ -471,7 +516,7 @@ var MediaCard = (_a) => {
471
516
  ),
472
517
  children: [
473
518
  size === "large" && thumbnail,
474
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
519
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
475
520
  "div",
476
521
  {
477
522
  className: cn("flex gap-4", {
@@ -480,12 +525,12 @@ var MediaCard = (_a) => {
480
525
  }),
481
526
  children: [
482
527
  size !== "large" && thumbnail,
483
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-2 items-center w-full min-w-0", children: [
484
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex-1 flex flex-col gap-0.5 min-w-0", children: [
485
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-black text-sm font-medium truncate", children: title }),
486
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-xs text-gray-900 truncate", children: description })
528
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex gap-2 items-center w-full min-w-0", children: [
529
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex-1 flex flex-col gap-0.5 min-w-0", children: [
530
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-black text-sm font-medium truncate", children: title }),
531
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-xs text-gray-900 truncate", children: description })
487
532
  ] }),
488
- isLoading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SpinnerIcon, { size: 24, className: "text-blue-700 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
533
+ isLoading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SpinnerIcon, { size: 24, className: "text-blue-700 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
489
534
  "div",
490
535
  {
491
536
  className: cn({