smartsell-ui-kit 0.0.1

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.
package/dist/index.cjs ADDED
@@ -0,0 +1,695 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/index.ts
21
+ var index_exports = {};
22
+ __export(index_exports, {
23
+ Button: () => Button,
24
+ Card: () => Card,
25
+ ComposableModal: () => ComposableModal,
26
+ Field: () => Field,
27
+ Input: () => Input,
28
+ Modal: () => Modal,
29
+ Select: () => Select,
30
+ Textarea: () => Textarea,
31
+ createModalSlotIds: () => createModalSlotIds,
32
+ useUiKitTheme: () => useUiKitTheme
33
+ });
34
+ module.exports = __toCommonJS(index_exports);
35
+
36
+ // src/components/Button.tsx
37
+ var import_smartsell_sales_sdk2 = require("smartsell-sales-sdk");
38
+
39
+ // src/theme.ts
40
+ var import_react = require("react");
41
+ var import_smartsell_sales_sdk = require("smartsell-sales-sdk");
42
+ function useUiKitTheme(sdk) {
43
+ const { theme } = (0, import_smartsell_sales_sdk.useSalesTheme)(sdk);
44
+ return (0, import_react.useMemo)(() => {
45
+ return {
46
+ theme,
47
+ borderSoft: (0, import_smartsell_sales_sdk.withAlpha)(theme.colors.onSurface, 0.1),
48
+ borderStrong: (0, import_smartsell_sales_sdk.withAlpha)(theme.colors.onSurface, 0.16),
49
+ surfaceMuted: (0, import_smartsell_sales_sdk.withAlpha)(theme.colors.onSurface, 0.04),
50
+ surfaceRaised: (0, import_smartsell_sales_sdk.withAlpha)(theme.colors.surface, 0.94),
51
+ overlay: (0, import_smartsell_sales_sdk.withAlpha)("#030712", 0.62),
52
+ focusRing: (0, import_smartsell_sales_sdk.withAlpha)(theme.colors.primary, 0.22),
53
+ mutedText: (0, import_smartsell_sales_sdk.withAlpha)(theme.colors.onSurface, 0.72)
54
+ };
55
+ }, [theme]);
56
+ }
57
+
58
+ // src/components/Button.tsx
59
+ var import_jsx_runtime = require("react/jsx-runtime");
60
+ var getSizeStyles = (size) => {
61
+ if (size === "sm") {
62
+ return { minHeight: 38, padding: "0 14px", fontSize: 13 };
63
+ }
64
+ if (size === "lg") {
65
+ return { minHeight: 50, padding: "0 20px", fontSize: 15 };
66
+ }
67
+ return { minHeight: 44, padding: "0 18px", fontSize: 14 };
68
+ };
69
+ function Button({
70
+ sdk,
71
+ variant = "solid",
72
+ tone = "primary",
73
+ size = "md",
74
+ fullWidth = false,
75
+ leadingIcon,
76
+ trailingIcon,
77
+ children,
78
+ disabled,
79
+ style,
80
+ type = "button",
81
+ ...rest
82
+ }) {
83
+ const { theme } = useUiKitTheme(sdk);
84
+ const palette = {
85
+ primary: {
86
+ background: theme.colors.primary,
87
+ foreground: theme.colors.onPrimary,
88
+ border: (0, import_smartsell_sales_sdk2.withAlpha)(theme.colors.primary, 0.3)
89
+ },
90
+ secondary: {
91
+ background: theme.colors.secondary,
92
+ foreground: theme.colors.onSecondary,
93
+ border: (0, import_smartsell_sales_sdk2.withAlpha)(theme.colors.secondary, 0.3)
94
+ },
95
+ neutral: {
96
+ background: theme.colors.surface,
97
+ foreground: theme.colors.onSurface,
98
+ border: (0, import_smartsell_sales_sdk2.withAlpha)(theme.colors.onSurface, 0.16)
99
+ },
100
+ danger: {
101
+ background: theme.colors.negative,
102
+ foreground: "#ffffff",
103
+ border: (0, import_smartsell_sales_sdk2.withAlpha)(theme.colors.negative, 0.32)
104
+ }
105
+ }[tone];
106
+ const variantStyles = {
107
+ solid: {
108
+ backgroundColor: palette.background,
109
+ borderColor: palette.border,
110
+ color: palette.foreground
111
+ },
112
+ outline: {
113
+ backgroundColor: "transparent",
114
+ borderColor: palette.border,
115
+ color: tone === "neutral" ? palette.foreground : palette.background
116
+ },
117
+ ghost: {
118
+ backgroundColor: "transparent",
119
+ borderColor: "transparent",
120
+ color: tone === "neutral" ? palette.foreground : palette.background
121
+ }
122
+ };
123
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
124
+ "button",
125
+ {
126
+ ...rest,
127
+ type,
128
+ disabled,
129
+ style: {
130
+ display: "inline-flex",
131
+ alignItems: "center",
132
+ justifyContent: "center",
133
+ gap: 10,
134
+ width: fullWidth ? "100%" : void 0,
135
+ borderRadius: 16,
136
+ borderStyle: "solid",
137
+ borderWidth: 1,
138
+ cursor: disabled ? "not-allowed" : "pointer",
139
+ fontWeight: 700,
140
+ letterSpacing: "0.01em",
141
+ lineHeight: 1,
142
+ opacity: disabled ? 0.58 : 1,
143
+ transition: "transform 160ms ease, opacity 160ms ease, background-color 160ms ease",
144
+ boxShadow: variant === "solid" ? `0 14px 28px ${(0, import_smartsell_sales_sdk2.withAlpha)(palette.background, 0.18)}` : "none",
145
+ ...getSizeStyles(size),
146
+ ...variantStyles[variant],
147
+ ...style
148
+ },
149
+ children: [
150
+ leadingIcon,
151
+ children,
152
+ trailingIcon
153
+ ]
154
+ }
155
+ );
156
+ }
157
+
158
+ // src/components/Card.tsx
159
+ var import_smartsell_sales_sdk3 = require("smartsell-sales-sdk");
160
+ var import_jsx_runtime2 = require("react/jsx-runtime");
161
+ var getToneStyles = (tone, sdk) => {
162
+ const { theme } = useUiKitTheme(sdk);
163
+ const accent = {
164
+ default: theme.colors.primary,
165
+ primary: theme.colors.primary,
166
+ secondary: theme.colors.secondary,
167
+ warning: theme.colors.warning
168
+ }[tone];
169
+ return {
170
+ accent,
171
+ background: `linear-gradient(160deg, ${(0, import_smartsell_sales_sdk3.withAlpha)(theme.colors.surface, 0.98)}, ${(0, import_smartsell_sales_sdk3.withAlpha)(accent, 0.08)})`,
172
+ border: (0, import_smartsell_sales_sdk3.withAlpha)(accent, 0.22)
173
+ };
174
+ };
175
+ function Card({
176
+ sdk,
177
+ children,
178
+ eyebrow,
179
+ title,
180
+ action,
181
+ tone = "default",
182
+ padded = true,
183
+ style,
184
+ ...rest
185
+ }) {
186
+ const { theme, mutedText } = useUiKitTheme(sdk);
187
+ const toneStyles = getToneStyles(tone, sdk);
188
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
189
+ "div",
190
+ {
191
+ ...rest,
192
+ style: {
193
+ borderRadius: 28,
194
+ border: `1px solid ${toneStyles.border}`,
195
+ background: toneStyles.background,
196
+ color: theme.colors.onSurface,
197
+ boxShadow: `0 24px 48px ${(0, import_smartsell_sales_sdk3.withAlpha)(theme.colors.onSurface, 0.06)}`,
198
+ padding: padded ? 24 : void 0,
199
+ ...style
200
+ },
201
+ children: [
202
+ (eyebrow || title || action) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
203
+ "div",
204
+ {
205
+ style: {
206
+ display: "flex",
207
+ justifyContent: "space-between",
208
+ alignItems: "flex-start",
209
+ gap: 16,
210
+ marginBottom: 18
211
+ },
212
+ children: [
213
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
214
+ eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
215
+ "span",
216
+ {
217
+ style: {
218
+ color: toneStyles.accent,
219
+ fontSize: 12,
220
+ fontWeight: 800,
221
+ letterSpacing: "0.16em",
222
+ textTransform: "uppercase"
223
+ },
224
+ children: eyebrow
225
+ }
226
+ ) : null,
227
+ title ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
228
+ "div",
229
+ {
230
+ style: {
231
+ color: theme.colors.onSurface,
232
+ fontSize: 24,
233
+ fontWeight: 700,
234
+ lineHeight: 1.2
235
+ },
236
+ children: title
237
+ }
238
+ ) : null
239
+ ] }),
240
+ action ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { color: mutedText }, children: action }) : null
241
+ ]
242
+ }
243
+ ),
244
+ children
245
+ ]
246
+ }
247
+ );
248
+ }
249
+
250
+ // src/components/ComposableModal.tsx
251
+ var import_react3 = require("react");
252
+ var import_smartsell_sales_sdk5 = require("smartsell-sales-sdk");
253
+
254
+ // src/components/Modal.tsx
255
+ var import_react2 = require("react");
256
+ var import_smartsell_sales_sdk4 = require("smartsell-sales-sdk");
257
+ var import_jsx_runtime3 = require("react/jsx-runtime");
258
+ var normalizeWidth = (maxWidth) => {
259
+ if (typeof maxWidth === "number") {
260
+ return `${maxWidth}px`;
261
+ }
262
+ return maxWidth != null ? maxWidth : "720px";
263
+ };
264
+ function Modal({
265
+ sdk,
266
+ isOpen,
267
+ onClose,
268
+ children,
269
+ footer,
270
+ title,
271
+ description,
272
+ headerContent,
273
+ maxWidth,
274
+ closeOnBackdrop = true,
275
+ closeOnEscape = true,
276
+ hideCloseButton = false,
277
+ contentStyle
278
+ }) {
279
+ const { theme, borderSoft, overlay, surfaceRaised, mutedText } = useUiKitTheme(sdk);
280
+ const titleId = (0, import_react2.useMemo)(
281
+ () => `smartsell-modal-${String(title != null ? title : "dialog").toLowerCase().replace(/[^a-z0-9]+/g, "-")}`,
282
+ [title]
283
+ );
284
+ (0, import_react2.useEffect)(() => {
285
+ if (!isOpen || typeof window === "undefined" || typeof document === "undefined") {
286
+ return;
287
+ }
288
+ const previousOverflow = document.body.style.overflow;
289
+ document.body.style.overflow = "hidden";
290
+ const handleKeyDown = (event) => {
291
+ if (closeOnEscape && event.key === "Escape") {
292
+ onClose();
293
+ }
294
+ };
295
+ window.addEventListener("keydown", handleKeyDown);
296
+ return () => {
297
+ document.body.style.overflow = previousOverflow;
298
+ window.removeEventListener("keydown", handleKeyDown);
299
+ };
300
+ }, [closeOnEscape, isOpen, onClose]);
301
+ if (!isOpen) {
302
+ return null;
303
+ }
304
+ const header = headerContent != null ? headerContent : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
305
+ title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
306
+ "h2",
307
+ {
308
+ id: titleId,
309
+ style: {
310
+ margin: 0,
311
+ color: theme.colors.onSurface,
312
+ fontSize: 30,
313
+ fontWeight: 800,
314
+ lineHeight: 1.1
315
+ },
316
+ children: title
317
+ }
318
+ ) : null,
319
+ description ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
320
+ "p",
321
+ {
322
+ style: {
323
+ margin: 0,
324
+ color: mutedText,
325
+ fontSize: 15,
326
+ lineHeight: 1.6
327
+ },
328
+ children: description
329
+ }
330
+ ) : null
331
+ ] });
332
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
333
+ "div",
334
+ {
335
+ "aria-labelledby": title ? titleId : void 0,
336
+ "aria-modal": "true",
337
+ role: "dialog",
338
+ onMouseDown: (event) => {
339
+ if (closeOnBackdrop && event.target === event.currentTarget) {
340
+ onClose();
341
+ }
342
+ },
343
+ style: {
344
+ position: "fixed",
345
+ inset: 0,
346
+ zIndex: 70,
347
+ display: "flex",
348
+ alignItems: "center",
349
+ justifyContent: "center",
350
+ padding: 16,
351
+ backgroundColor: overlay,
352
+ backdropFilter: "blur(8px)"
353
+ },
354
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
355
+ "div",
356
+ {
357
+ style: {
358
+ width: "min(100%, 100%)",
359
+ maxWidth: normalizeWidth(maxWidth),
360
+ borderRadius: 30,
361
+ border: `1px solid ${borderSoft}`,
362
+ background: `linear-gradient(180deg, ${surfaceRaised}, ${theme.colors.surface})`,
363
+ boxShadow: `0 34px 80px ${(0, import_smartsell_sales_sdk4.withAlpha)("#020617", 0.28)}`,
364
+ color: theme.colors.onSurface,
365
+ overflow: "hidden",
366
+ ...contentStyle
367
+ },
368
+ children: [
369
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
370
+ "div",
371
+ {
372
+ style: {
373
+ display: "flex",
374
+ alignItems: "flex-start",
375
+ justifyContent: "space-between",
376
+ gap: 16,
377
+ padding: "24px 24px 0"
378
+ },
379
+ children: [
380
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { flex: 1 }, children: header }),
381
+ !hideCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
382
+ "button",
383
+ {
384
+ "aria-label": "Close modal",
385
+ type: "button",
386
+ onClick: onClose,
387
+ style: {
388
+ height: 42,
389
+ width: 42,
390
+ borderRadius: 999,
391
+ border: `1px solid ${borderSoft}`,
392
+ backgroundColor: "transparent",
393
+ color: theme.colors.onSurface,
394
+ cursor: "pointer",
395
+ fontSize: 20,
396
+ fontWeight: 700
397
+ },
398
+ children: "\xD7"
399
+ }
400
+ ) : null
401
+ ]
402
+ }
403
+ ),
404
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { padding: 24 }, children }),
405
+ footer ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
406
+ "div",
407
+ {
408
+ style: {
409
+ display: "flex",
410
+ justifyContent: "flex-end",
411
+ gap: 12,
412
+ padding: "0 24px 24px",
413
+ borderTop: `1px solid ${(0, import_smartsell_sales_sdk4.withAlpha)(theme.colors.onSurface, 0.06)}`
414
+ },
415
+ children: footer
416
+ }
417
+ ) : null
418
+ ]
419
+ }
420
+ )
421
+ }
422
+ );
423
+ }
424
+
425
+ // src/components/ComposableModal.tsx
426
+ var import_jsx_runtime4 = require("react/jsx-runtime");
427
+ var createModalSlotIds = (slotBaseId) => ({
428
+ header: `${slotBaseId}:modal-header`,
429
+ body: `${slotBaseId}:modal-body`,
430
+ footer: `${slotBaseId}:modal-footer`
431
+ });
432
+ function ComposableModal({
433
+ sdk,
434
+ isOpen,
435
+ onClose,
436
+ title,
437
+ description,
438
+ slotBaseId,
439
+ payload,
440
+ onConfirm,
441
+ confirmLabel = "Confirm",
442
+ cancelLabel = "Cancel",
443
+ isBusy = false,
444
+ closeOnBackdrop = true,
445
+ closeOnEscape = true,
446
+ hideDefaultFooter = false,
447
+ maxWidth,
448
+ headerFallback,
449
+ footerFallback,
450
+ children
451
+ }) {
452
+ const slotIds = createModalSlotIds(slotBaseId);
453
+ const context = (0, import_react3.useMemo)(
454
+ () => ({
455
+ title,
456
+ description,
457
+ payload,
458
+ close: onClose,
459
+ confirm: onConfirm,
460
+ confirmLabel,
461
+ cancelLabel,
462
+ isOpen,
463
+ isBusy
464
+ }),
465
+ [cancelLabel, confirmLabel, description, isBusy, isOpen, onClose, onConfirm, payload, title]
466
+ );
467
+ const defaultFooter = hideDefaultFooter ? void 0 : footerFallback != null ? footerFallback : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
468
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button, { sdk, variant: "outline", tone: "neutral", onClick: onClose, disabled: isBusy, children: cancelLabel }),
469
+ onConfirm ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button, { sdk, onClick: onConfirm, disabled: isBusy, children: confirmLabel }) : null
470
+ ] });
471
+ const headerContent = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_smartsell_sales_sdk5.SlotRenderer, { id: slotIds.header, sdk, context, children: headerFallback });
472
+ const bodyContent = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_smartsell_sales_sdk5.SlotRenderer, { id: slotIds.body, sdk, context, children });
473
+ const footerContent = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_smartsell_sales_sdk5.SlotRenderer, { id: slotIds.footer, sdk, context, children: defaultFooter });
474
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
475
+ Modal,
476
+ {
477
+ sdk,
478
+ isOpen,
479
+ onClose,
480
+ title,
481
+ description,
482
+ headerContent,
483
+ footer: footerContent,
484
+ maxWidth,
485
+ closeOnBackdrop,
486
+ closeOnEscape,
487
+ children: bodyContent
488
+ }
489
+ );
490
+ }
491
+
492
+ // src/components/Field.tsx
493
+ var import_jsx_runtime5 = require("react/jsx-runtime");
494
+ function Field({
495
+ sdk,
496
+ label,
497
+ hint,
498
+ error,
499
+ htmlFor,
500
+ required = false,
501
+ children,
502
+ style
503
+ }) {
504
+ const { theme, mutedText } = useUiKitTheme(sdk);
505
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
506
+ "label",
507
+ {
508
+ htmlFor,
509
+ style: {
510
+ display: "flex",
511
+ flexDirection: "column",
512
+ gap: 8,
513
+ width: "100%",
514
+ ...style
515
+ },
516
+ children: [
517
+ (label || hint) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
518
+ label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
519
+ "span",
520
+ {
521
+ style: {
522
+ color: theme.colors.onSurface,
523
+ fontSize: 14,
524
+ fontWeight: 700,
525
+ letterSpacing: "0.01em"
526
+ },
527
+ children: [
528
+ label,
529
+ required ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { color: theme.colors.negative, marginLeft: 4 }, children: "*" }) : null
530
+ ]
531
+ }
532
+ ) : null,
533
+ hint ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
534
+ "span",
535
+ {
536
+ style: {
537
+ color: mutedText,
538
+ fontSize: 13,
539
+ lineHeight: 1.45
540
+ },
541
+ children: hint
542
+ }
543
+ ) : null
544
+ ] }),
545
+ children,
546
+ error ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
547
+ "span",
548
+ {
549
+ style: {
550
+ color: theme.colors.negative,
551
+ fontSize: 13,
552
+ fontWeight: 600,
553
+ lineHeight: 1.45
554
+ },
555
+ children: error
556
+ }
557
+ ) : null
558
+ ]
559
+ }
560
+ );
561
+ }
562
+
563
+ // src/components/Input.tsx
564
+ var import_smartsell_sales_sdk6 = require("smartsell-sales-sdk");
565
+ var import_jsx_runtime6 = require("react/jsx-runtime");
566
+ var getPadding = (size) => {
567
+ if (size === "sm") return "10px 12px";
568
+ if (size === "lg") return "16px 18px";
569
+ return "13px 16px";
570
+ };
571
+ function Input({
572
+ sdk,
573
+ label,
574
+ hint,
575
+ error,
576
+ controlSize = "md",
577
+ id,
578
+ disabled,
579
+ style,
580
+ ...rest
581
+ }) {
582
+ const { theme, borderSoft, focusRing, surfaceMuted } = useUiKitTheme(sdk);
583
+ const inputStyle = {
584
+ width: "100%",
585
+ borderRadius: 16,
586
+ border: `1px solid ${error ? theme.colors.negative : borderSoft}`,
587
+ padding: getPadding(controlSize),
588
+ outline: "none",
589
+ color: theme.colors.onSurface,
590
+ backgroundColor: disabled ? surfaceMuted : theme.colors.surface,
591
+ boxShadow: error ? `0 0 0 3px ${(0, import_smartsell_sales_sdk6.withAlpha)(theme.colors.negative, 0.12)}` : `0 0 0 0 ${focusRing}`,
592
+ transition: "border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease",
593
+ ...style
594
+ };
595
+ const input = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { ...rest, id, disabled, style: inputStyle });
596
+ if (!label && !hint && !error) {
597
+ return input;
598
+ }
599
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Field, { sdk, label, hint, error, htmlFor: id, children: input });
600
+ }
601
+
602
+ // src/components/Select.tsx
603
+ var import_smartsell_sales_sdk7 = require("smartsell-sales-sdk");
604
+ var import_jsx_runtime7 = require("react/jsx-runtime");
605
+ var getPadding2 = (size) => {
606
+ if (size === "sm") return "10px 12px";
607
+ if (size === "lg") return "16px 18px";
608
+ return "13px 16px";
609
+ };
610
+ function Select({
611
+ sdk,
612
+ label,
613
+ hint,
614
+ error,
615
+ controlSize = "md",
616
+ id,
617
+ disabled,
618
+ style,
619
+ children,
620
+ ...rest
621
+ }) {
622
+ const { theme, borderSoft, focusRing, surfaceMuted } = useUiKitTheme(sdk);
623
+ const selectStyle = {
624
+ width: "100%",
625
+ borderRadius: 16,
626
+ border: `1px solid ${error ? theme.colors.negative : borderSoft}`,
627
+ padding: getPadding2(controlSize),
628
+ outline: "none",
629
+ color: theme.colors.onSurface,
630
+ backgroundColor: disabled ? surfaceMuted : theme.colors.surface,
631
+ boxShadow: error ? `0 0 0 3px ${(0, import_smartsell_sales_sdk7.withAlpha)(theme.colors.negative, 0.12)}` : `0 0 0 0 ${focusRing}`,
632
+ transition: "border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease",
633
+ ...style
634
+ };
635
+ const select = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("select", { ...rest, id, disabled, style: selectStyle, children });
636
+ if (!label && !hint && !error) {
637
+ return select;
638
+ }
639
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Field, { sdk, label, hint, error, htmlFor: id, children: select });
640
+ }
641
+
642
+ // src/components/Textarea.tsx
643
+ var import_smartsell_sales_sdk8 = require("smartsell-sales-sdk");
644
+ var import_jsx_runtime8 = require("react/jsx-runtime");
645
+ var getPadding3 = (size) => {
646
+ if (size === "sm") return "10px 12px";
647
+ if (size === "lg") return "16px 18px";
648
+ return "13px 16px";
649
+ };
650
+ function Textarea({
651
+ sdk,
652
+ label,
653
+ hint,
654
+ error,
655
+ controlSize = "md",
656
+ id,
657
+ disabled,
658
+ style,
659
+ rows = 5,
660
+ ...rest
661
+ }) {
662
+ const { theme, borderSoft, focusRing, surfaceMuted } = useUiKitTheme(sdk);
663
+ const textareaStyle = {
664
+ width: "100%",
665
+ borderRadius: 16,
666
+ border: `1px solid ${error ? theme.colors.negative : borderSoft}`,
667
+ padding: getPadding3(controlSize),
668
+ outline: "none",
669
+ color: theme.colors.onSurface,
670
+ backgroundColor: disabled ? surfaceMuted : theme.colors.surface,
671
+ boxShadow: error ? `0 0 0 3px ${(0, import_smartsell_sales_sdk8.withAlpha)(theme.colors.negative, 0.12)}` : `0 0 0 0 ${focusRing}`,
672
+ transition: "border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease",
673
+ resize: "vertical",
674
+ ...style
675
+ };
676
+ const textarea = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("textarea", { ...rest, id, disabled, rows, style: textareaStyle });
677
+ if (!label && !hint && !error) {
678
+ return textarea;
679
+ }
680
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Field, { sdk, label, hint, error, htmlFor: id, children: textarea });
681
+ }
682
+ // Annotate the CommonJS export names for ESM import in node:
683
+ 0 && (module.exports = {
684
+ Button,
685
+ Card,
686
+ ComposableModal,
687
+ Field,
688
+ Input,
689
+ Modal,
690
+ Select,
691
+ Textarea,
692
+ createModalSlotIds,
693
+ useUiKitTheme
694
+ });
695
+ //# sourceMappingURL=index.cjs.map