smartsell-ui-kit 0.0.6 → 0.1.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.
@@ -1,97 +0,0 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { CSSProperties, ReactNode } from 'react';
3
- import { SalesTheme, SmartSellSDK } from 'smartsell-sales-sdk';
4
-
5
- interface UiKitThemeTokens {
6
- theme: SalesTheme;
7
- borderSoft: string;
8
- borderStrong: string;
9
- surfaceMuted: string;
10
- surfaceRaised: string;
11
- overlay: string;
12
- focusRing: string;
13
- mutedText: string;
14
- }
15
- declare function useUiKitTheme(sdk: SmartSellSDK): UiKitThemeTokens;
16
-
17
- type ModalActionAppearance = 'text' | 'outlined' | 'contained' | 'link';
18
- type ModalThemeColors = {
19
- background: string;
20
- surface: string;
21
- onSurface: string;
22
- onBackground: string;
23
- primary: string;
24
- onPrimary: string;
25
- secondary: string;
26
- onSecondary: string;
27
- negative: string;
28
- warning: string;
29
- };
30
- interface ModalTheme {
31
- colors?: Partial<ModalThemeColors>;
32
- }
33
- type ModalThemeSource = ModalTheme | UiKitThemeTokens;
34
- interface ModalAction {
35
- label: ReactNode;
36
- onClick: () => void;
37
- appearance?: ModalActionAppearance;
38
- style?: CSSProperties;
39
- disabled?: boolean;
40
- hidden?: boolean;
41
- }
42
- interface BaseModalProps {
43
- children?: ReactNode;
44
- theme?: ModalThemeSource;
45
- }
46
- interface ModalProps extends BaseModalProps {
47
- isOpen: boolean;
48
- onClose: () => void;
49
- title?: ReactNode;
50
- description?: ReactNode;
51
- headerContent?: ReactNode;
52
- footer?: ReactNode;
53
- confirmAction?: ModalAction;
54
- cancelAction?: ModalAction;
55
- closeAction?: ModalAction;
56
- extraActions?: ModalAction[];
57
- maxWidth?: number | string;
58
- closeOnBackdrop?: boolean;
59
- closeOnEscape?: boolean;
60
- hideCloseButton?: boolean;
61
- hideExpandButton?: boolean;
62
- disableDismiss?: boolean;
63
- maximized?: boolean;
64
- contentStyle?: CSSProperties;
65
- bodyStyle?: CSSProperties;
66
- isBusy?: boolean;
67
- }
68
- interface LegacyModalAction {
69
- name: string;
70
- onClick: () => void;
71
- type?: ModalActionAppearance;
72
- style?: CSSProperties;
73
- disable?: boolean;
74
- }
75
- interface LegacyModalCompatProps extends BaseModalProps {
76
- title: ReactNode;
77
- showModal: boolean;
78
- closeModal: () => void;
79
- action?: () => void;
80
- actionNameBtn?: string | undefined;
81
- hideActionButton?: boolean;
82
- cancelButton?: () => void;
83
- disableActionBtn?: boolean;
84
- isLoading?: boolean;
85
- onlyCloseButton?: boolean;
86
- hideCloseIcon?: boolean;
87
- style?: CSSProperties;
88
- bodyStyle?: CSSProperties;
89
- additionalActions?: LegacyModalAction[];
90
- maximized?: boolean;
91
- }
92
- type LegacyModalProps = LegacyModalCompatProps;
93
- type StandardModalProps = ModalProps;
94
- type ModalInputProps = ModalProps | LegacyModalCompatProps;
95
- declare function Modal(props: ModalInputProps): react_jsx_runtime.JSX.Element;
96
-
97
- export { type LegacyModalAction as L, Modal as M, type StandardModalProps as S, type UiKitThemeTokens as U, type LegacyModalCompatProps as a, type LegacyModalProps as b, type ModalAction as c, type ModalProps as d, type ModalTheme as e, type ModalThemeSource as f, useUiKitTheme as u };
@@ -1,97 +0,0 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { CSSProperties, ReactNode } from 'react';
3
- import { SalesTheme, SmartSellSDK } from 'smartsell-sales-sdk';
4
-
5
- interface UiKitThemeTokens {
6
- theme: SalesTheme;
7
- borderSoft: string;
8
- borderStrong: string;
9
- surfaceMuted: string;
10
- surfaceRaised: string;
11
- overlay: string;
12
- focusRing: string;
13
- mutedText: string;
14
- }
15
- declare function useUiKitTheme(sdk: SmartSellSDK): UiKitThemeTokens;
16
-
17
- type ModalActionAppearance = 'text' | 'outlined' | 'contained' | 'link';
18
- type ModalThemeColors = {
19
- background: string;
20
- surface: string;
21
- onSurface: string;
22
- onBackground: string;
23
- primary: string;
24
- onPrimary: string;
25
- secondary: string;
26
- onSecondary: string;
27
- negative: string;
28
- warning: string;
29
- };
30
- interface ModalTheme {
31
- colors?: Partial<ModalThemeColors>;
32
- }
33
- type ModalThemeSource = ModalTheme | UiKitThemeTokens;
34
- interface ModalAction {
35
- label: ReactNode;
36
- onClick: () => void;
37
- appearance?: ModalActionAppearance;
38
- style?: CSSProperties;
39
- disabled?: boolean;
40
- hidden?: boolean;
41
- }
42
- interface BaseModalProps {
43
- children?: ReactNode;
44
- theme?: ModalThemeSource;
45
- }
46
- interface ModalProps extends BaseModalProps {
47
- isOpen: boolean;
48
- onClose: () => void;
49
- title?: ReactNode;
50
- description?: ReactNode;
51
- headerContent?: ReactNode;
52
- footer?: ReactNode;
53
- confirmAction?: ModalAction;
54
- cancelAction?: ModalAction;
55
- closeAction?: ModalAction;
56
- extraActions?: ModalAction[];
57
- maxWidth?: number | string;
58
- closeOnBackdrop?: boolean;
59
- closeOnEscape?: boolean;
60
- hideCloseButton?: boolean;
61
- hideExpandButton?: boolean;
62
- disableDismiss?: boolean;
63
- maximized?: boolean;
64
- contentStyle?: CSSProperties;
65
- bodyStyle?: CSSProperties;
66
- isBusy?: boolean;
67
- }
68
- interface LegacyModalAction {
69
- name: string;
70
- onClick: () => void;
71
- type?: ModalActionAppearance;
72
- style?: CSSProperties;
73
- disable?: boolean;
74
- }
75
- interface LegacyModalCompatProps extends BaseModalProps {
76
- title: ReactNode;
77
- showModal: boolean;
78
- closeModal: () => void;
79
- action?: () => void;
80
- actionNameBtn?: string | undefined;
81
- hideActionButton?: boolean;
82
- cancelButton?: () => void;
83
- disableActionBtn?: boolean;
84
- isLoading?: boolean;
85
- onlyCloseButton?: boolean;
86
- hideCloseIcon?: boolean;
87
- style?: CSSProperties;
88
- bodyStyle?: CSSProperties;
89
- additionalActions?: LegacyModalAction[];
90
- maximized?: boolean;
91
- }
92
- type LegacyModalProps = LegacyModalCompatProps;
93
- type StandardModalProps = ModalProps;
94
- type ModalInputProps = ModalProps | LegacyModalCompatProps;
95
- declare function Modal(props: ModalInputProps): react_jsx_runtime.JSX.Element;
96
-
97
- export { type LegacyModalAction as L, Modal as M, type StandardModalProps as S, type UiKitThemeTokens as U, type LegacyModalCompatProps as a, type LegacyModalProps as b, type ModalAction as c, type ModalProps as d, type ModalTheme as e, type ModalThemeSource as f, useUiKitTheme as u };
package/dist/modal.cjs DELETED
@@ -1,486 +0,0 @@
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/modal.ts
21
- var modal_exports = {};
22
- __export(modal_exports, {
23
- Modal: () => Modal
24
- });
25
- module.exports = __toCommonJS(modal_exports);
26
-
27
- // src/components/Modal.tsx
28
- var import_react = require("react");
29
- var import_jsx_runtime = require("react/jsx-runtime");
30
- var defaultThemeColors = {
31
- background: "#f8fafc",
32
- surface: "#ffffff",
33
- onSurface: "#0f172a",
34
- onBackground: "#0f172a",
35
- primary: "#0f766e",
36
- onPrimary: "#ffffff",
37
- secondary: "#1d4ed8",
38
- onSecondary: "#ffffff",
39
- negative: "#dc2626",
40
- warning: "#d97706"
41
- };
42
- var withAlpha = (hex, alpha) => {
43
- const normalized = hex.replace("#", "").trim();
44
- const value = normalized.length === 3 ? normalized.split("").map((char) => char + char).join("") : normalized;
45
- const red = Number.parseInt(value.slice(0, 2), 16);
46
- const green = Number.parseInt(value.slice(2, 4), 16);
47
- const blue = Number.parseInt(value.slice(4, 6), 16);
48
- return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
49
- };
50
- var isUiKitThemeTokens = (theme) => {
51
- return Boolean(theme && typeof theme === "object" && "theme" in theme);
52
- };
53
- var resolveTheme = (theme) => {
54
- var _a;
55
- const colorOverrides = isUiKitThemeTokens(theme) ? theme.theme.colors : (_a = theme == null ? void 0 : theme.colors) != null ? _a : {};
56
- const colors = {
57
- ...defaultThemeColors,
58
- ...colorOverrides
59
- };
60
- return {
61
- colors,
62
- borderSoft: isUiKitThemeTokens(theme) ? theme.borderSoft : withAlpha(colors.onSurface, 0.1),
63
- borderStrong: isUiKitThemeTokens(theme) ? theme.borderStrong : withAlpha(colors.onSurface, 0.16),
64
- surfaceMuted: isUiKitThemeTokens(theme) ? theme.surfaceMuted : withAlpha(colors.onSurface, 0.04),
65
- surfaceRaised: isUiKitThemeTokens(theme) ? theme.surfaceRaised : withAlpha(colors.surface, 0.94),
66
- overlay: isUiKitThemeTokens(theme) ? theme.overlay : withAlpha("#030712", 0.62),
67
- mutedText: isUiKitThemeTokens(theme) ? theme.mutedText : withAlpha(colors.onSurface, 0.72)
68
- };
69
- };
70
- var normalizeWidth = (maxWidth) => {
71
- if (typeof maxWidth === "number") {
72
- return `${maxWidth}px`;
73
- }
74
- return maxWidth != null ? maxWidth : "720px";
75
- };
76
- var isLikelyMobileViewport = () => {
77
- if (typeof window === "undefined" || typeof navigator === "undefined") {
78
- return false;
79
- }
80
- return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
81
- navigator.userAgent
82
- );
83
- };
84
- var createTitleId = (title) => {
85
- if (typeof title === "string" || typeof title === "number") {
86
- const normalized = String(title).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
87
- return `smartsell-modal-${normalized || "dialog"}`;
88
- }
89
- return "smartsell-modal-dialog";
90
- };
91
- var isLegacyModalProps = (props) => {
92
- return "showModal" in props;
93
- };
94
- var normalizeLegacyAction = (action, fallbackDisabled = false) => {
95
- var _a, _b, _c;
96
- return {
97
- label: action.name,
98
- onClick: action.onClick,
99
- appearance: (_a = action.type) != null ? _a : "contained",
100
- style: (_b = action.style) != null ? _b : { maxWidth: "150px" },
101
- disabled: (_c = action.disable) != null ? _c : fallbackDisabled
102
- };
103
- };
104
- var normalizeModalProps = (props) => {
105
- var _a, _b;
106
- if (!isLegacyModalProps(props)) {
107
- return props;
108
- }
109
- const isBusy = Boolean(props.isLoading);
110
- const disableAction = Boolean(props.disableActionBtn || props.isLoading);
111
- return {
112
- isOpen: props.showModal,
113
- onClose: props.closeModal,
114
- title: props.title,
115
- children: props.children,
116
- theme: props.theme,
117
- maximized: props.maximized,
118
- contentStyle: props.style,
119
- bodyStyle: props.bodyStyle,
120
- hideCloseButton: props.hideCloseIcon,
121
- disableDismiss: isBusy,
122
- closeOnBackdrop: false,
123
- closeOnEscape: false,
124
- isBusy,
125
- closeAction: props.onlyCloseButton ? {
126
- label: "Close",
127
- onClick: props.closeModal,
128
- appearance: "contained",
129
- disabled: isBusy
130
- } : void 0,
131
- cancelAction: props.onlyCloseButton || !props.cancelButton ? void 0 : {
132
- label: "Cancel",
133
- onClick: props.cancelButton,
134
- appearance: "text",
135
- style: { maxWidth: "100px" }
136
- },
137
- confirmAction: props.onlyCloseButton || props.hideActionButton || !props.action ? void 0 : {
138
- label: (_a = props.actionNameBtn) != null ? _a : "Save",
139
- onClick: props.action,
140
- appearance: "contained",
141
- style: { maxWidth: "100px" },
142
- disabled: disableAction
143
- },
144
- extraActions: props.onlyCloseButton ? void 0 : (_b = props.additionalActions) == null ? void 0 : _b.map((action) => normalizeLegacyAction(action, disableAction))
145
- };
146
- };
147
- function ModalActionButton({
148
- action,
149
- theme
150
- }) {
151
- var _a, _b;
152
- const { colors } = theme;
153
- const {
154
- label,
155
- onClick,
156
- appearance = "contained",
157
- disabled = false,
158
- style
159
- } = action;
160
- const buttonStyle = {
161
- width: "100%",
162
- display: "flex",
163
- alignItems: "center",
164
- justifyContent: "center",
165
- borderRadius: "0.4rem",
166
- padding: appearance === "link" ? 0 : "1.3rem",
167
- boxSizing: "border-box",
168
- cursor: disabled ? "not-allowed" : "pointer",
169
- fontWeight: 700,
170
- fontSize: "1.3rem",
171
- margin: 0,
172
- textAlign: "center",
173
- transition: "0.5s",
174
- opacity: disabled ? 0.5 : 1,
175
- filter: disabled ? "saturate(0)" : void 0
176
- };
177
- if (appearance === "text") {
178
- buttonStyle.background = "none";
179
- buttonStyle.border = "1px solid transparent";
180
- buttonStyle.color = colors.primary;
181
- buttonStyle.boxShadow = "none";
182
- } else if (appearance === "link") {
183
- buttonStyle.background = "none";
184
- buttonStyle.border = "none";
185
- buttonStyle.color = colors.primary;
186
- buttonStyle.boxShadow = "none";
187
- } else if (appearance === "outlined") {
188
- buttonStyle.background = "none";
189
- buttonStyle.border = `2px solid ${colors.primary}`;
190
- buttonStyle.color = colors.primary;
191
- buttonStyle.boxShadow = `0 14px 28px ${withAlpha(colors.onSurface, 0.08)}`;
192
- } else {
193
- buttonStyle.background = colors.primary;
194
- buttonStyle.border = "1px solid transparent";
195
- buttonStyle.color = colors.onPrimary;
196
- buttonStyle.boxShadow = `0 14px 28px ${withAlpha(colors.primary, 0.22)}`;
197
- }
198
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
199
- "div",
200
- {
201
- style: {
202
- width: (_a = style == null ? void 0 : style.width) != null ? _a : (style == null ? void 0 : style.maxWidth) ? "100%" : "max-content",
203
- display: "flex",
204
- alignItems: "center",
205
- justifyContent: "center",
206
- margin: "0 5px",
207
- marginBottom: (_b = style == null ? void 0 : style.marginBottom) != null ? _b : 0,
208
- ...style
209
- },
210
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
211
- "button",
212
- {
213
- type: "button",
214
- onClick: disabled ? void 0 : onClick,
215
- disabled,
216
- style: buttonStyle,
217
- children: label
218
- }
219
- )
220
- }
221
- );
222
- }
223
- function UnifiedModal({
224
- isOpen,
225
- onClose,
226
- children,
227
- title,
228
- description,
229
- headerContent,
230
- footer,
231
- confirmAction,
232
- cancelAction,
233
- closeAction,
234
- extraActions,
235
- maxWidth,
236
- closeOnBackdrop = true,
237
- closeOnEscape = true,
238
- hideCloseButton = false,
239
- hideExpandButton = false,
240
- disableDismiss = false,
241
- maximized,
242
- contentStyle,
243
- bodyStyle,
244
- isBusy = false,
245
- theme
246
- }) {
247
- var _a, _b;
248
- const modalTheme = (0, import_react.useMemo)(() => resolveTheme(theme), [theme]);
249
- const [isMaximized, setIsMaximized] = (0, import_react.useState)(maximized != null ? maximized : false);
250
- const titleId = (0, import_react.useMemo)(() => createTitleId(title), [title]);
251
- (0, import_react.useEffect)(() => {
252
- if (typeof maximized === "boolean") {
253
- setIsMaximized(maximized);
254
- return;
255
- }
256
- if (isLikelyMobileViewport()) {
257
- setIsMaximized(true);
258
- }
259
- }, [maximized]);
260
- (0, import_react.useEffect)(() => {
261
- if (!isOpen || typeof window === "undefined" || typeof document === "undefined") {
262
- return;
263
- }
264
- const previousOverflow = document.body.style.overflow;
265
- document.body.style.overflow = "hidden";
266
- const handleKeyDown = (event) => {
267
- if (!disableDismiss && closeOnEscape && event.key === "Escape") {
268
- onClose();
269
- }
270
- };
271
- window.addEventListener("keydown", handleKeyDown);
272
- return () => {
273
- document.body.style.overflow = previousOverflow;
274
- window.removeEventListener("keydown", handleKeyDown);
275
- };
276
- }, [closeOnEscape, disableDismiss, isOpen, onClose]);
277
- if (!isOpen) {
278
- return null;
279
- }
280
- const resolvedHeader = headerContent != null ? headerContent : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
281
- title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
282
- "h2",
283
- {
284
- id: titleId,
285
- style: {
286
- margin: 0,
287
- color: modalTheme.colors.onSurface,
288
- fontSize: 30,
289
- fontWeight: 800,
290
- lineHeight: 1.1
291
- },
292
- children: title
293
- }
294
- ) : null,
295
- description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
296
- "p",
297
- {
298
- style: {
299
- margin: 0,
300
- color: modalTheme.mutedText,
301
- fontSize: 15,
302
- lineHeight: 1.6
303
- },
304
- children: description
305
- }
306
- ) : null
307
- ] });
308
- let footerContent = footer;
309
- if (footerContent === void 0) {
310
- if (closeAction && !closeAction.hidden) {
311
- footerContent = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalActionButton, { action: closeAction, theme: modalTheme });
312
- } else {
313
- const resolvedActions = [
314
- cancelAction ? { ...cancelAction, appearance: (_a = cancelAction.appearance) != null ? _a : "text" } : void 0,
315
- ...(extraActions != null ? extraActions : []).map((action) => {
316
- var _a2;
317
- return {
318
- ...action,
319
- appearance: (_a2 = action.appearance) != null ? _a2 : "contained"
320
- };
321
- }),
322
- confirmAction ? { ...confirmAction, appearance: (_b = confirmAction.appearance) != null ? _b : "contained" } : void 0
323
- ].reduce((items, action) => {
324
- if (!action || action.hidden) {
325
- return items;
326
- }
327
- items.push(action);
328
- return items;
329
- }, []);
330
- footerContent = resolvedActions.length > 0 ? resolvedActions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
331
- ModalActionButton,
332
- {
333
- action,
334
- theme: modalTheme
335
- },
336
- `modal-action-${index}`
337
- )) : void 0;
338
- }
339
- }
340
- const shouldRenderFooter = footerContent !== void 0 && footerContent !== null && footerContent !== false;
341
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
342
- "div",
343
- {
344
- "aria-label": headerContent ? typeof title === "string" ? title : "Dialog" : void 0,
345
- "aria-labelledby": headerContent ? void 0 : title ? titleId : void 0,
346
- "aria-modal": "true",
347
- role: "dialog",
348
- onMouseDown: (event) => {
349
- if (!disableDismiss && closeOnBackdrop && event.target === event.currentTarget) {
350
- onClose();
351
- }
352
- },
353
- style: {
354
- position: "fixed",
355
- inset: 0,
356
- zIndex: 70,
357
- display: "flex",
358
- alignItems: "center",
359
- justifyContent: "center",
360
- padding: isMaximized ? 0 : 16,
361
- backgroundColor: modalTheme.overlay,
362
- backdropFilter: "blur(8px)"
363
- },
364
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
365
- "div",
366
- {
367
- id: isBusy ? "ldg1" : void 0,
368
- style: {
369
- position: "relative",
370
- display: "flex",
371
- flexDirection: "column",
372
- width: isMaximized ? "100vw" : "min(100%, 100%)",
373
- maxWidth: isMaximized ? "100vw" : normalizeWidth(maxWidth),
374
- height: isMaximized ? "100vh" : void 0,
375
- maxHeight: isMaximized ? "100vh" : "calc(100vh - 32px)",
376
- minWidth: isMaximized ? "100vw" : 300,
377
- borderRadius: isMaximized ? 0 : 30,
378
- border: `1px solid ${modalTheme.borderSoft}`,
379
- background: `linear-gradient(180deg, ${modalTheme.surfaceRaised}, ${modalTheme.colors.surface})`,
380
- boxShadow: `0 34px 80px ${withAlpha("#020617", 0.28)}`,
381
- color: modalTheme.colors.onSurface,
382
- overflow: "hidden",
383
- opacity: isBusy ? 0.5 : 1,
384
- ...contentStyle
385
- },
386
- children: [
387
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
388
- "div",
389
- {
390
- style: {
391
- display: "flex",
392
- alignItems: "flex-start",
393
- justifyContent: "space-between",
394
- gap: 16,
395
- padding: "24px 24px 16px",
396
- borderBottom: `1px solid ${withAlpha(modalTheme.colors.onSurface, 0.06)}`
397
- },
398
- children: [
399
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: 1 }, children: resolvedHeader }),
400
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
401
- !hideExpandButton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
402
- "button",
403
- {
404
- "aria-label": isMaximized ? "Minimize modal" : "Maximize modal",
405
- title: isMaximized ? "Minimize" : "Maximize",
406
- type: "button",
407
- onClick: () => setIsMaximized((current) => !current),
408
- style: {
409
- height: 42,
410
- width: 42,
411
- borderRadius: 999,
412
- border: `1px solid ${modalTheme.borderSoft}`,
413
- backgroundColor: "transparent",
414
- color: modalTheme.colors.onSurface,
415
- cursor: "pointer",
416
- fontSize: 18,
417
- fontWeight: 700
418
- },
419
- children: isMaximized ? "\u25A2" : "\u25A1"
420
- }
421
- ) : null,
422
- !hideCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
423
- "button",
424
- {
425
- "aria-label": "Close modal",
426
- type: "button",
427
- onClick: disableDismiss ? void 0 : onClose,
428
- style: {
429
- height: 42,
430
- width: 42,
431
- borderRadius: 999,
432
- border: `1px solid ${modalTheme.borderSoft}`,
433
- backgroundColor: "transparent",
434
- color: modalTheme.colors.onSurface,
435
- cursor: disableDismiss ? "not-allowed" : "pointer",
436
- fontSize: 20,
437
- fontWeight: 700,
438
- opacity: disableDismiss ? 0.5 : 1
439
- },
440
- children: "\xD7"
441
- }
442
- ) : null
443
- ] })
444
- ]
445
- }
446
- ),
447
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
448
- "div",
449
- {
450
- style: {
451
- flex: 1,
452
- minHeight: 0,
453
- overflow: "auto",
454
- padding: 24,
455
- ...bodyStyle
456
- },
457
- children
458
- }
459
- ),
460
- shouldRenderFooter ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
461
- "div",
462
- {
463
- style: {
464
- display: "flex",
465
- justifyContent: "flex-end",
466
- gap: 12,
467
- padding: "16px 24px 24px",
468
- borderTop: `1px solid ${withAlpha(modalTheme.colors.onSurface, 0.06)}`
469
- },
470
- children: footerContent
471
- }
472
- ) : null
473
- ]
474
- }
475
- )
476
- }
477
- );
478
- }
479
- function Modal(props) {
480
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UnifiedModal, { ...normalizeModalProps(props) });
481
- }
482
- // Annotate the CommonJS export names for ESM import in node:
483
- 0 && (module.exports = {
484
- Modal
485
- });
486
- //# sourceMappingURL=modal.cjs.map