@uniformdev/design-system 20.35.0 → 20.36.0
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/esm/index.js +561 -414
- package/dist/index.d.mts +38 -1
- package/dist/index.d.ts +38 -1
- package/dist/index.js +725 -574
- package/package.json +4 -4
package/dist/index.js
CHANGED
|
@@ -1466,6 +1466,7 @@ __export(src_exports, {
|
|
|
1466
1466
|
PageHeaderSection: () => PageHeaderSection,
|
|
1467
1467
|
Pagination: () => Pagination,
|
|
1468
1468
|
Paragraph: () => Paragraph,
|
|
1469
|
+
ParameterActionButton: () => ParameterActionButton,
|
|
1469
1470
|
ParameterDrawerHeader: () => ParameterDrawerHeader,
|
|
1470
1471
|
ParameterGroup: () => ParameterGroup,
|
|
1471
1472
|
ParameterImage: () => ParameterImage,
|
|
@@ -1537,6 +1538,7 @@ __export(src_exports, {
|
|
|
1537
1538
|
VerticalRhythm: () => VerticalRhythm,
|
|
1538
1539
|
WarningMessage: () => WarningMessage,
|
|
1539
1540
|
accessibleHidden: () => accessibleHidden,
|
|
1541
|
+
actionBarVisibilityStyles: () => actionBarVisibilityStyles,
|
|
1540
1542
|
addPathSegmentToPathname: () => addPathSegmentToPathname,
|
|
1541
1543
|
borderTopIcon: () => borderTopIcon,
|
|
1542
1544
|
breakpoints: () => breakpoints,
|
|
@@ -5720,7 +5722,7 @@ var menuItem = (textTheme, forceActive) => import_react33.css`
|
|
|
5720
5722
|
align-items: center;
|
|
5721
5723
|
border-radius: var(--rounded-base);
|
|
5722
5724
|
background: none;
|
|
5723
|
-
color: ${textTheme === "base"
|
|
5725
|
+
color: ${textTheme === "base" || textTheme === "accent-alt" ? "var(--typography-base)" : "var(--brand-secondary-5)"};
|
|
5724
5726
|
display: flex;
|
|
5725
5727
|
font-weight: var(--fw-regular);
|
|
5726
5728
|
font-size: var(--menu-item-font-size);
|
|
@@ -5739,7 +5741,7 @@ var menuItem = (textTheme, forceActive) => import_react33.css`
|
|
|
5739
5741
|
}
|
|
5740
5742
|
|
|
5741
5743
|
svg {
|
|
5742
|
-
${textTheme === "red" ? "" : `color: var(--gray-400)`};
|
|
5744
|
+
${textTheme === "red" ? "" : textTheme === "accent-alt" ? "color: var(--accent-alt-dark);" : `color: var(--gray-400)`};
|
|
5743
5745
|
width: var(--menu-item-icon-size);
|
|
5744
5746
|
height: var(--menu-item-icon-size);
|
|
5745
5747
|
}
|
|
@@ -5748,7 +5750,7 @@ var menuItem = (textTheme, forceActive) => import_react33.css`
|
|
|
5748
5750
|
[aria-selected='true'] {
|
|
5749
5751
|
background: var(--gray-200);
|
|
5750
5752
|
svg {
|
|
5751
|
-
|
|
5753
|
+
${textTheme === "red" ? `color: var(--action-destructive-active);` : textTheme === "accent-alt" ? "color: var(--accent-alt-dark-active);" : `color: var(--accent-dark-active);`}
|
|
5752
5754
|
}
|
|
5753
5755
|
}
|
|
5754
5756
|
|
|
@@ -5758,7 +5760,7 @@ var menuItem = (textTheme, forceActive) => import_react33.css`
|
|
|
5758
5760
|
${typeof forceActive === "undefined" ? activeMenuItem : ""}
|
|
5759
5761
|
|
|
5760
5762
|
svg {
|
|
5761
|
-
|
|
5763
|
+
${textTheme === "red" ? `color: var(--action-destructive-hover);` : textTheme === "accent-alt" ? "color: var(--accent-alt-dark-hover);" : `color: var(--accent-dark-hover);`}
|
|
5762
5764
|
}
|
|
5763
5765
|
}
|
|
5764
5766
|
|
|
@@ -6504,15 +6506,15 @@ function InputCreatableComboBox(props) {
|
|
|
6504
6506
|
}
|
|
6505
6507
|
);
|
|
6506
6508
|
}
|
|
6507
|
-
function inputComboBoxStyles(
|
|
6509
|
+
function inputComboBoxStyles(baseStyles2) {
|
|
6508
6510
|
return {
|
|
6509
|
-
...
|
|
6511
|
+
...baseStyles2,
|
|
6510
6512
|
singleValue: (base, sProps) => {
|
|
6511
6513
|
var _a;
|
|
6512
6514
|
return {
|
|
6513
6515
|
...base,
|
|
6514
6516
|
color: "var(--typography-base)",
|
|
6515
|
-
...(_a =
|
|
6517
|
+
...(_a = baseStyles2 == null ? void 0 : baseStyles2.singleValue) == null ? void 0 : _a.call(baseStyles2, base, sProps)
|
|
6516
6518
|
};
|
|
6517
6519
|
},
|
|
6518
6520
|
valueContainer: (base, sProps) => {
|
|
@@ -6521,7 +6523,7 @@ function inputComboBoxStyles(baseStyles) {
|
|
|
6521
6523
|
...base,
|
|
6522
6524
|
padding: "12px var(--spacing-base) 12px var(--spacing-sm)",
|
|
6523
6525
|
gap: "2px",
|
|
6524
|
-
...(_a =
|
|
6526
|
+
...(_a = baseStyles2 == null ? void 0 : baseStyles2.valueContainer) == null ? void 0 : _a.call(baseStyles2, base, sProps)
|
|
6525
6527
|
};
|
|
6526
6528
|
},
|
|
6527
6529
|
input: (base, sProps) => {
|
|
@@ -6534,7 +6536,7 @@ function inputComboBoxStyles(baseStyles) {
|
|
|
6534
6536
|
"& > input": {
|
|
6535
6537
|
boxShadow: "none !important"
|
|
6536
6538
|
},
|
|
6537
|
-
...(_a =
|
|
6539
|
+
...(_a = baseStyles2 == null ? void 0 : baseStyles2.input) == null ? void 0 : _a.call(baseStyles2, base, sProps)
|
|
6538
6540
|
};
|
|
6539
6541
|
},
|
|
6540
6542
|
menu: (base, state) => {
|
|
@@ -6542,7 +6544,7 @@ function inputComboBoxStyles(baseStyles) {
|
|
|
6542
6544
|
return {
|
|
6543
6545
|
...base,
|
|
6544
6546
|
zIndex: "var(--z-20)",
|
|
6545
|
-
...(_a =
|
|
6547
|
+
...(_a = baseStyles2 == null ? void 0 : baseStyles2.menu) == null ? void 0 : _a.call(baseStyles2, base, state)
|
|
6546
6548
|
};
|
|
6547
6549
|
},
|
|
6548
6550
|
control: (base, state) => {
|
|
@@ -6574,7 +6576,7 @@ function inputComboBoxStyles(baseStyles) {
|
|
|
6574
6576
|
},
|
|
6575
6577
|
...state.isFocused ? { borderColor: "var(--gray-300)" } : {}
|
|
6576
6578
|
},
|
|
6577
|
-
...(_a =
|
|
6579
|
+
...(_a = baseStyles2 == null ? void 0 : baseStyles2.control) == null ? void 0 : _a.call(baseStyles2, base, state)
|
|
6578
6580
|
};
|
|
6579
6581
|
},
|
|
6580
6582
|
indicatorsContainer: (base, state) => {
|
|
@@ -6594,14 +6596,14 @@ function inputComboBoxStyles(baseStyles) {
|
|
|
6594
6596
|
"& svg": {
|
|
6595
6597
|
display: "none"
|
|
6596
6598
|
},
|
|
6597
|
-
...(_a =
|
|
6599
|
+
...(_a = baseStyles2 == null ? void 0 : baseStyles2.indicatorsContainer) == null ? void 0 : _a.call(baseStyles2, base, state)
|
|
6598
6600
|
};
|
|
6599
6601
|
},
|
|
6600
6602
|
indicatorSeparator: (base, state) => {
|
|
6601
6603
|
var _a;
|
|
6602
6604
|
return {
|
|
6603
6605
|
display: "none",
|
|
6604
|
-
...(_a =
|
|
6606
|
+
...(_a = baseStyles2 == null ? void 0 : baseStyles2.indicatorSeparator) == null ? void 0 : _a.call(baseStyles2, base, state)
|
|
6605
6607
|
};
|
|
6606
6608
|
},
|
|
6607
6609
|
option: (base, state) => {
|
|
@@ -6612,7 +6614,7 @@ function inputComboBoxStyles(baseStyles) {
|
|
|
6612
6614
|
color: state.isDisabled ? "var(--gray-300)" : "var(--gray-700)",
|
|
6613
6615
|
paddingLeft: isIndented ? "var(--spacing-md)" : "",
|
|
6614
6616
|
backgroundColor: state.isDisabled ? "transparent" : state.isSelected ? "var(--gray-200)" : state.isFocused ? "var(--gray-100)" : "transparent",
|
|
6615
|
-
...(_a =
|
|
6617
|
+
...(_a = baseStyles2 == null ? void 0 : baseStyles2.option) == null ? void 0 : _a.call(baseStyles2, base, state)
|
|
6616
6618
|
};
|
|
6617
6619
|
},
|
|
6618
6620
|
multiValue: (styles) => {
|
|
@@ -12194,7 +12196,7 @@ var LoadingOverlay = ({
|
|
|
12194
12196
|
var LoadingAnimation = ({
|
|
12195
12197
|
label,
|
|
12196
12198
|
width,
|
|
12197
|
-
css:
|
|
12199
|
+
css: css111,
|
|
12198
12200
|
isPaused
|
|
12199
12201
|
}) => {
|
|
12200
12202
|
return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
|
|
@@ -12205,7 +12207,7 @@ var LoadingAnimation = ({
|
|
|
12205
12207
|
width: typeof width === "number" ? `${width}px` : width,
|
|
12206
12208
|
height: typeof width === "number" ? `${width}px` : width
|
|
12207
12209
|
},
|
|
12208
|
-
css: [loaderAnimationContainer,
|
|
12210
|
+
css: [loaderAnimationContainer, css111],
|
|
12209
12211
|
className: `loader-container${isPaused ? " paused" : ""}`,
|
|
12210
12212
|
children: [
|
|
12211
12213
|
/* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "bottom-cubes", children: [
|
|
@@ -13398,25 +13400,136 @@ var LabelLeadingIcon = ({
|
|
|
13398
13400
|
) });
|
|
13399
13401
|
};
|
|
13400
13402
|
|
|
13403
|
+
// src/components/ParameterInputs/ParameterActionButton.tsx
|
|
13404
|
+
init_emotion_jsx_shim();
|
|
13405
|
+
var import_react132 = __toESM(require("react"));
|
|
13406
|
+
|
|
13407
|
+
// src/components/ParameterInputs/styles/ParameterActionButton.styles.ts
|
|
13408
|
+
init_emotion_jsx_shim();
|
|
13409
|
+
var import_react131 = require("@emotion/react");
|
|
13410
|
+
var baseStyles = import_react131.css`
|
|
13411
|
+
--hover-color: var(--accent-dark-hover);
|
|
13412
|
+
--active-color: var(--accent-dark-active);
|
|
13413
|
+
border: 1px solid transparent;
|
|
13414
|
+
border-radius: var(--rounded-base);
|
|
13415
|
+
display: flex;
|
|
13416
|
+
align-items: center;
|
|
13417
|
+
justify-content: center;
|
|
13418
|
+
max-width: fit-content;
|
|
13419
|
+
padding: 0.125rem;
|
|
13420
|
+
transition:
|
|
13421
|
+
border-color var(--duration-fast) var(--timing-ease-out),
|
|
13422
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
13423
|
+
color var(--duration-fast) var(--timing-ease-out),
|
|
13424
|
+
box-shadow var(--duration-fast) var(--timing-ease-out);
|
|
13425
|
+
min-height: 1.125rem;
|
|
13426
|
+
min-width: 1.125rem;
|
|
13427
|
+
font-size: 0.75rem;
|
|
13428
|
+
|
|
13429
|
+
&:disabled,
|
|
13430
|
+
&[aria-disabled='true'] {
|
|
13431
|
+
opacity: 0.5;
|
|
13432
|
+
cursor: default;
|
|
13433
|
+
}
|
|
13434
|
+
`;
|
|
13435
|
+
var solidHoverStyles = import_react131.css`
|
|
13436
|
+
--text-color: var(--typography-inverted);
|
|
13437
|
+
&:hover,
|
|
13438
|
+
&:focus,
|
|
13439
|
+
&:focus-within {
|
|
13440
|
+
border-color: var(--hover-color);
|
|
13441
|
+
background: var(--hover-color);
|
|
13442
|
+
color: var(--text-color);
|
|
13443
|
+
}
|
|
13444
|
+
|
|
13445
|
+
&:active,
|
|
13446
|
+
&[aria-pressed='true'] {
|
|
13447
|
+
border-color: var(--active-color);
|
|
13448
|
+
background: var(--active-color);
|
|
13449
|
+
color: var(--text-color);
|
|
13450
|
+
}
|
|
13451
|
+
`;
|
|
13452
|
+
var outlineHoverStyles = import_react131.css`
|
|
13453
|
+
--text-color: var(--typography-light);
|
|
13454
|
+
&:hover:not([aria-disabled='true']),
|
|
13455
|
+
&:focus:not([aria-disabled='true']),
|
|
13456
|
+
&:focus-within:not([aria-disabled='true']) {
|
|
13457
|
+
background: var(--gray-50);
|
|
13458
|
+
border-color: var(--hover-color);
|
|
13459
|
+
}
|
|
13460
|
+
&:active:not([aria-disabled='true']),
|
|
13461
|
+
&[aria-pressed='true']:not([aria-disabled='true']) {
|
|
13462
|
+
border-color: var(--active-color);
|
|
13463
|
+
}
|
|
13464
|
+
`;
|
|
13465
|
+
var invertedStyles = import_react131.css`
|
|
13466
|
+
--text-color: var(--typography-inverted);
|
|
13467
|
+
box-shadow: inset 0 0 0 1px transparent;
|
|
13468
|
+
&:hover,
|
|
13469
|
+
&:focus,
|
|
13470
|
+
&:focus-within {
|
|
13471
|
+
box-shadow: inset 0 0 0 1px var(--text-color);
|
|
13472
|
+
color: var(--text-color);
|
|
13473
|
+
}
|
|
13474
|
+
&:active,
|
|
13475
|
+
&[aria-pressed='true'] {
|
|
13476
|
+
background: var(--active-color);
|
|
13477
|
+
border-color: var(--active-color);
|
|
13478
|
+
}
|
|
13479
|
+
`;
|
|
13480
|
+
|
|
13481
|
+
// src/components/ParameterInputs/ParameterActionButton.tsx
|
|
13482
|
+
var import_jsx_runtime115 = require("@emotion/react/jsx-runtime");
|
|
13483
|
+
var ParameterActionButton = ({
|
|
13484
|
+
children,
|
|
13485
|
+
themeType,
|
|
13486
|
+
tooltip,
|
|
13487
|
+
renderAs = "button",
|
|
13488
|
+
disabled: disabled2,
|
|
13489
|
+
...props
|
|
13490
|
+
}) => {
|
|
13491
|
+
const shouldApplyInverted = themeType === "filled" && "inverted" in props && props.inverted;
|
|
13492
|
+
const ComponentWrapper = renderAs === "div" ? "div" : "button";
|
|
13493
|
+
const buttonElement = /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
|
|
13494
|
+
ComponentWrapper,
|
|
13495
|
+
{
|
|
13496
|
+
css: [
|
|
13497
|
+
baseStyles,
|
|
13498
|
+
themeType === "filled" ? solidHoverStyles : outlineHoverStyles,
|
|
13499
|
+
shouldApplyInverted ? invertedStyles : null
|
|
13500
|
+
],
|
|
13501
|
+
...renderAs === "button" && { type: "button" },
|
|
13502
|
+
...shouldApplyInverted && { "data-inverted": true },
|
|
13503
|
+
...disabled2 && { "aria-disabled": true },
|
|
13504
|
+
...props,
|
|
13505
|
+
children
|
|
13506
|
+
}
|
|
13507
|
+
);
|
|
13508
|
+
if (tooltip && (typeof tooltip === "string" || import_react132.default.isValidElement(tooltip))) {
|
|
13509
|
+
return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(Tooltip, { title: tooltip, children: buttonElement });
|
|
13510
|
+
}
|
|
13511
|
+
return buttonElement;
|
|
13512
|
+
};
|
|
13513
|
+
|
|
13401
13514
|
// src/components/ParameterInputs/ParameterDrawerHeader.tsx
|
|
13402
13515
|
init_emotion_jsx_shim();
|
|
13403
13516
|
|
|
13404
13517
|
// src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
|
|
13405
13518
|
init_emotion_jsx_shim();
|
|
13406
|
-
var
|
|
13407
|
-
var ParameterDrawerHeaderContainer =
|
|
13519
|
+
var import_react133 = require("@emotion/react");
|
|
13520
|
+
var ParameterDrawerHeaderContainer = import_react133.css`
|
|
13408
13521
|
align-items: center;
|
|
13409
13522
|
display: flex;
|
|
13410
13523
|
gap: var(--spacing-base);
|
|
13411
13524
|
justify-content: space-between;
|
|
13412
13525
|
margin-bottom: var(--spacing-sm);
|
|
13413
13526
|
`;
|
|
13414
|
-
var ParameterDrawerHeaderTitleGroup =
|
|
13527
|
+
var ParameterDrawerHeaderTitleGroup = import_react133.css`
|
|
13415
13528
|
align-items: center;
|
|
13416
13529
|
display: flex;
|
|
13417
13530
|
gap: var(--spacing-sm);
|
|
13418
13531
|
`;
|
|
13419
|
-
var ParameterDrawerHeaderTitle =
|
|
13532
|
+
var ParameterDrawerHeaderTitle = import_react133.css`
|
|
13420
13533
|
text-overflow: ellipsis;
|
|
13421
13534
|
white-space: nowrap;
|
|
13422
13535
|
overflow: hidden;
|
|
@@ -13424,12 +13537,12 @@ var ParameterDrawerHeaderTitle = import_react131.css`
|
|
|
13424
13537
|
`;
|
|
13425
13538
|
|
|
13426
13539
|
// src/components/ParameterInputs/ParameterDrawerHeader.tsx
|
|
13427
|
-
var
|
|
13540
|
+
var import_jsx_runtime116 = require("@emotion/react/jsx-runtime");
|
|
13428
13541
|
var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
|
|
13429
|
-
return /* @__PURE__ */ (0,
|
|
13430
|
-
/* @__PURE__ */ (0,
|
|
13542
|
+
return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { css: ParameterDrawerHeaderContainer, children: [
|
|
13543
|
+
/* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("header", { css: ParameterDrawerHeaderTitleGroup, children: [
|
|
13431
13544
|
iconBeforeTitle,
|
|
13432
|
-
/* @__PURE__ */ (0,
|
|
13545
|
+
/* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Heading2, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title, children: title })
|
|
13433
13546
|
] }),
|
|
13434
13547
|
children
|
|
13435
13548
|
] });
|
|
@@ -13437,15 +13550,19 @@ var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
|
|
|
13437
13550
|
|
|
13438
13551
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
13439
13552
|
init_emotion_jsx_shim();
|
|
13440
|
-
var
|
|
13553
|
+
var import_react135 = require("react");
|
|
13441
13554
|
|
|
13442
13555
|
// src/components/ParameterInputs/styles/ParameterGroup.styles.ts
|
|
13443
13556
|
init_emotion_jsx_shim();
|
|
13444
|
-
var
|
|
13445
|
-
var fieldsetStyles =
|
|
13557
|
+
var import_react134 = require("@emotion/react");
|
|
13558
|
+
var fieldsetStyles = import_react134.css`
|
|
13446
13559
|
&:disabled,
|
|
13447
13560
|
[readonly] {
|
|
13448
|
-
|
|
13561
|
+
input,
|
|
13562
|
+
select,
|
|
13563
|
+
textarea {
|
|
13564
|
+
pointer-events: none;
|
|
13565
|
+
}
|
|
13449
13566
|
|
|
13450
13567
|
label,
|
|
13451
13568
|
legend {
|
|
@@ -13453,19 +13570,19 @@ var fieldsetStyles = import_react132.css`
|
|
|
13453
13570
|
}
|
|
13454
13571
|
}
|
|
13455
13572
|
`;
|
|
13456
|
-
var fieldsetLegend2 =
|
|
13573
|
+
var fieldsetLegend2 = import_react134.css`
|
|
13457
13574
|
display: block;
|
|
13458
13575
|
font-weight: var(--fw-medium);
|
|
13459
|
-
margin-bottom: var(--spacing-
|
|
13576
|
+
margin-bottom: var(--spacing-base);
|
|
13460
13577
|
width: 100%;
|
|
13461
13578
|
`;
|
|
13462
13579
|
|
|
13463
13580
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
13464
|
-
var
|
|
13465
|
-
var ParameterGroup = (0,
|
|
13581
|
+
var import_jsx_runtime117 = require("@emotion/react/jsx-runtime");
|
|
13582
|
+
var ParameterGroup = (0, import_react135.forwardRef)(
|
|
13466
13583
|
({ legend, isDisabled, children, ...props }, ref) => {
|
|
13467
|
-
return /* @__PURE__ */ (0,
|
|
13468
|
-
/* @__PURE__ */ (0,
|
|
13584
|
+
return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
|
|
13585
|
+
/* @__PURE__ */ (0, import_jsx_runtime117.jsx)("legend", { css: fieldsetLegend2, children: legend }),
|
|
13469
13586
|
children
|
|
13470
13587
|
] });
|
|
13471
13588
|
}
|
|
@@ -13473,24 +13590,24 @@ var ParameterGroup = (0, import_react133.forwardRef)(
|
|
|
13473
13590
|
|
|
13474
13591
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
13475
13592
|
init_emotion_jsx_shim();
|
|
13476
|
-
var
|
|
13593
|
+
var import_react143 = require("react");
|
|
13477
13594
|
|
|
13478
13595
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
13479
13596
|
init_emotion_jsx_shim();
|
|
13480
|
-
var
|
|
13597
|
+
var import_react137 = require("react");
|
|
13481
13598
|
var import_react_dom2 = require("react-dom");
|
|
13482
13599
|
|
|
13483
13600
|
// src/components/ParameterInputs/styles/ParameterImage.styles.ts
|
|
13484
13601
|
init_emotion_jsx_shim();
|
|
13485
|
-
var
|
|
13486
|
-
var previewWrapper =
|
|
13602
|
+
var import_react136 = require("@emotion/react");
|
|
13603
|
+
var previewWrapper = import_react136.css`
|
|
13487
13604
|
margin-top: var(--spacing-xs);
|
|
13488
13605
|
background: var(--gray-50);
|
|
13489
13606
|
padding: var(--spacing-sm);
|
|
13490
13607
|
border: solid 1px var(--gray-300);
|
|
13491
13608
|
border-radius: var(--rounded-sm);
|
|
13492
13609
|
`;
|
|
13493
|
-
var previewLink =
|
|
13610
|
+
var previewLink = import_react136.css`
|
|
13494
13611
|
display: block;
|
|
13495
13612
|
width: 100%;
|
|
13496
13613
|
|
|
@@ -13498,7 +13615,7 @@ var previewLink = import_react134.css`
|
|
|
13498
13615
|
max-height: 9rem;
|
|
13499
13616
|
}
|
|
13500
13617
|
`;
|
|
13501
|
-
var previewModalWrapper =
|
|
13618
|
+
var previewModalWrapper = import_react136.css`
|
|
13502
13619
|
background: var(--gray-50);
|
|
13503
13620
|
display: flex;
|
|
13504
13621
|
height: 100%;
|
|
@@ -13507,7 +13624,7 @@ var previewModalWrapper = import_react134.css`
|
|
|
13507
13624
|
border: solid 1px var(--gray-300);
|
|
13508
13625
|
border-radius: var(--rounded-sm);
|
|
13509
13626
|
`;
|
|
13510
|
-
var previewModalImage =
|
|
13627
|
+
var previewModalImage = import_react136.css`
|
|
13511
13628
|
display: flex;
|
|
13512
13629
|
height: 100%;
|
|
13513
13630
|
width: 100%;
|
|
@@ -13519,32 +13636,32 @@ var previewModalImage = import_react134.css`
|
|
|
13519
13636
|
`;
|
|
13520
13637
|
|
|
13521
13638
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
13522
|
-
var
|
|
13639
|
+
var import_jsx_runtime118 = require("@emotion/react/jsx-runtime");
|
|
13523
13640
|
function ParameterImagePreview({ imageSrc }) {
|
|
13524
|
-
const [showModal, setShowModal] = (0,
|
|
13525
|
-
return imageSrc ? /* @__PURE__ */ (0,
|
|
13526
|
-
/* @__PURE__ */ (0,
|
|
13527
|
-
/* @__PURE__ */ (0,
|
|
13641
|
+
const [showModal, setShowModal] = (0, import_react137.useState)(false);
|
|
13642
|
+
return imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { css: previewWrapper, children: [
|
|
13643
|
+
/* @__PURE__ */ (0, import_jsx_runtime118.jsx)(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
|
|
13644
|
+
/* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
|
|
13528
13645
|
"button",
|
|
13529
13646
|
{
|
|
13530
13647
|
css: previewLink,
|
|
13531
13648
|
onClick: () => {
|
|
13532
13649
|
setShowModal(true);
|
|
13533
13650
|
},
|
|
13534
|
-
children: /* @__PURE__ */ (0,
|
|
13651
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
|
|
13535
13652
|
}
|
|
13536
13653
|
)
|
|
13537
13654
|
] }) : null;
|
|
13538
13655
|
}
|
|
13539
13656
|
var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
13540
|
-
return open ? /* @__PURE__ */ (0,
|
|
13541
|
-
/* @__PURE__ */ (0,
|
|
13657
|
+
return open ? /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_jsx_runtime118.Fragment, { children: (0, import_react_dom2.createPortal)(
|
|
13658
|
+
/* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
|
|
13542
13659
|
Modal,
|
|
13543
13660
|
{
|
|
13544
13661
|
header: "Image Preview",
|
|
13545
13662
|
onRequestClose,
|
|
13546
|
-
buttonGroup: /* @__PURE__ */ (0,
|
|
13547
|
-
children: /* @__PURE__ */ (0,
|
|
13663
|
+
buttonGroup: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
|
|
13664
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { css: previewModalWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
|
|
13548
13665
|
}
|
|
13549
13666
|
),
|
|
13550
13667
|
document.body
|
|
@@ -13553,16 +13670,32 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
|
13553
13670
|
|
|
13554
13671
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
13555
13672
|
init_emotion_jsx_shim();
|
|
13556
|
-
var
|
|
13557
|
-
var
|
|
13673
|
+
var import_react141 = require("@emotion/react");
|
|
13674
|
+
var import_react142 = require("react");
|
|
13558
13675
|
|
|
13559
13676
|
// src/components/ParameterInputs/ParameterLabel.tsx
|
|
13560
13677
|
init_emotion_jsx_shim();
|
|
13561
13678
|
|
|
13562
13679
|
// src/components/ParameterInputs/styles/ParameterInput.styles.ts
|
|
13563
13680
|
init_emotion_jsx_shim();
|
|
13564
|
-
var
|
|
13565
|
-
var
|
|
13681
|
+
var import_react138 = require("@emotion/react");
|
|
13682
|
+
var actionBarVisibilityStyles = import_react138.css`
|
|
13683
|
+
[data-action-bar] {
|
|
13684
|
+
opacity: 1;
|
|
13685
|
+
transform: translateX(0);
|
|
13686
|
+
transition:
|
|
13687
|
+
opacity var(--duration-fast) var(--timing-ease-out),
|
|
13688
|
+
transform var(--duration-fast) var(--timing-ease-out);
|
|
13689
|
+
}
|
|
13690
|
+
`;
|
|
13691
|
+
var actionBarVisibilityHiddenStyles = import_react138.css`
|
|
13692
|
+
opacity: 0;
|
|
13693
|
+
transform: translateX(1rem);
|
|
13694
|
+
transition:
|
|
13695
|
+
opacity var(--duration-fast) var(--timing-ease-out),
|
|
13696
|
+
transform var(--duration-fast) var(--timing-ease-out);
|
|
13697
|
+
`;
|
|
13698
|
+
var inputContainer2 = import_react138.css`
|
|
13566
13699
|
position: relative;
|
|
13567
13700
|
scroll-margin: var(--spacing-2xl);
|
|
13568
13701
|
|
|
@@ -13573,16 +13706,17 @@ var inputContainer2 = import_react136.css`
|
|
|
13573
13706
|
opacity: var(--opacity-100);
|
|
13574
13707
|
translate: 0 0;
|
|
13575
13708
|
}
|
|
13709
|
+
${actionBarVisibilityStyles}
|
|
13576
13710
|
}
|
|
13577
13711
|
`;
|
|
13578
|
-
var labelText2 =
|
|
13712
|
+
var labelText2 = import_react138.css`
|
|
13579
13713
|
align-items: center;
|
|
13580
13714
|
display: flex;
|
|
13581
13715
|
gap: var(--spacing-xs);
|
|
13582
13716
|
font-weight: var(--fw-regular);
|
|
13583
13717
|
margin: 0 0 var(--spacing-xs);
|
|
13584
13718
|
`;
|
|
13585
|
-
var input3 =
|
|
13719
|
+
var input3 = import_react138.css`
|
|
13586
13720
|
display: block;
|
|
13587
13721
|
appearance: none;
|
|
13588
13722
|
box-sizing: border-box;
|
|
@@ -13630,18 +13764,18 @@ var input3 = import_react136.css`
|
|
|
13630
13764
|
color: var(--gray-400);
|
|
13631
13765
|
}
|
|
13632
13766
|
`;
|
|
13633
|
-
var selectInput =
|
|
13767
|
+
var selectInput = import_react138.css`
|
|
13634
13768
|
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z' fill='currentColor' /%3E%3C/svg%3E");
|
|
13635
13769
|
background-position: right var(--spacing-sm) center;
|
|
13636
13770
|
background-repeat: no-repeat;
|
|
13637
13771
|
background-size: 1rem;
|
|
13638
13772
|
padding-right: var(--spacing-xl);
|
|
13639
13773
|
`;
|
|
13640
|
-
var inputWrapper =
|
|
13774
|
+
var inputWrapper = import_react138.css`
|
|
13641
13775
|
display: flex; // used to correct overflow with chrome textarea
|
|
13642
13776
|
position: relative;
|
|
13643
13777
|
`;
|
|
13644
|
-
var inputIcon2 =
|
|
13778
|
+
var inputIcon2 = import_react138.css`
|
|
13645
13779
|
align-items: center;
|
|
13646
13780
|
background: var(--white);
|
|
13647
13781
|
border-radius: var(--rounded-md) 0 0 var(--rounded-md);
|
|
@@ -13657,7 +13791,7 @@ var inputIcon2 = import_react136.css`
|
|
|
13657
13791
|
width: var(--spacing-lg);
|
|
13658
13792
|
z-index: var(--z-10);
|
|
13659
13793
|
`;
|
|
13660
|
-
var inputToggleLabel2 =
|
|
13794
|
+
var inputToggleLabel2 = import_react138.css`
|
|
13661
13795
|
--inline-label-color: var(--typography-base);
|
|
13662
13796
|
align-items: center;
|
|
13663
13797
|
cursor: pointer;
|
|
@@ -13672,7 +13806,7 @@ var inputToggleLabel2 = import_react136.css`
|
|
|
13672
13806
|
--inline-label-color: var(--gray-400);
|
|
13673
13807
|
}
|
|
13674
13808
|
`;
|
|
13675
|
-
var toggleInput2 =
|
|
13809
|
+
var toggleInput2 = import_react138.css`
|
|
13676
13810
|
appearance: none;
|
|
13677
13811
|
border: 1px solid var(--gray-200);
|
|
13678
13812
|
background: var(--white);
|
|
@@ -13726,7 +13860,7 @@ var toggleInput2 = import_react136.css`
|
|
|
13726
13860
|
border-color: var(--gray-300);
|
|
13727
13861
|
}
|
|
13728
13862
|
`;
|
|
13729
|
-
var inlineLabel2 =
|
|
13863
|
+
var inlineLabel2 = import_react138.css`
|
|
13730
13864
|
color: var(--inline-label-color);
|
|
13731
13865
|
padding-left: var(--spacing-md);
|
|
13732
13866
|
font-size: var(--fs-sm);
|
|
@@ -13743,20 +13877,29 @@ var inlineLabel2 = import_react136.css`
|
|
|
13743
13877
|
}
|
|
13744
13878
|
}
|
|
13745
13879
|
`;
|
|
13746
|
-
var inputMenu =
|
|
13880
|
+
var inputMenu = import_react138.css`
|
|
13747
13881
|
background: none;
|
|
13748
13882
|
border: none;
|
|
13749
13883
|
padding: var(--spacing-2xs);
|
|
13750
13884
|
position: absolute;
|
|
13751
13885
|
top: calc(var(--spacing-md) * -1.2);
|
|
13752
13886
|
right: 0;
|
|
13887
|
+
|
|
13888
|
+
&:disabled,
|
|
13889
|
+
&[aria-disabled='true'] {
|
|
13890
|
+
color: var(--gray-400);
|
|
13891
|
+
cursor: default;
|
|
13892
|
+
}
|
|
13753
13893
|
`;
|
|
13754
|
-
var inputActionItems =
|
|
13894
|
+
var inputActionItems = import_react138.css`
|
|
13755
13895
|
display: flex;
|
|
13896
|
+
${actionBarVisibilityHiddenStyles}
|
|
13756
13897
|
`;
|
|
13757
|
-
var inputMenuHover =
|
|
13898
|
+
var inputMenuHover = import_react138.css`
|
|
13758
13899
|
opacity: var(--opacity-50);
|
|
13759
13900
|
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
13901
|
+
margin-top: 0.25rem;
|
|
13902
|
+
${actionBarVisibilityHiddenStyles}
|
|
13760
13903
|
|
|
13761
13904
|
// css trick to style the input like a hover or active state when the menu button is active or hovered
|
|
13762
13905
|
&:hover,
|
|
@@ -13764,11 +13907,11 @@ var inputMenuHover = import_react136.css`
|
|
|
13764
13907
|
background-color: var(--gray-200);
|
|
13765
13908
|
}
|
|
13766
13909
|
`;
|
|
13767
|
-
var textarea2 =
|
|
13910
|
+
var textarea2 = import_react138.css`
|
|
13768
13911
|
resize: vertical;
|
|
13769
13912
|
min-height: 2rem;
|
|
13770
13913
|
`;
|
|
13771
|
-
var dataConnectButton =
|
|
13914
|
+
var dataConnectButton = import_react138.css`
|
|
13772
13915
|
align-items: center;
|
|
13773
13916
|
appearance: none;
|
|
13774
13917
|
box-sizing: border-box;
|
|
@@ -13804,7 +13947,7 @@ var dataConnectButton = import_react136.css`
|
|
|
13804
13947
|
pointer-events: none;
|
|
13805
13948
|
}
|
|
13806
13949
|
`;
|
|
13807
|
-
var linkParameterBtn =
|
|
13950
|
+
var linkParameterBtn = import_react138.css`
|
|
13808
13951
|
border-radius: var(--rounded-base);
|
|
13809
13952
|
background: transparent;
|
|
13810
13953
|
border: none;
|
|
@@ -13813,7 +13956,7 @@ var linkParameterBtn = import_react136.css`
|
|
|
13813
13956
|
font-size: var(--fs-sm);
|
|
13814
13957
|
line-height: 1;
|
|
13815
13958
|
`;
|
|
13816
|
-
var linkParameterControls =
|
|
13959
|
+
var linkParameterControls = import_react138.css`
|
|
13817
13960
|
position: absolute;
|
|
13818
13961
|
inset: 0 0 0 auto;
|
|
13819
13962
|
padding: 0 var(--spacing-base);
|
|
@@ -13822,7 +13965,7 @@ var linkParameterControls = import_react136.css`
|
|
|
13822
13965
|
justify-content: center;
|
|
13823
13966
|
gap: var(--spacing-base);
|
|
13824
13967
|
`;
|
|
13825
|
-
var linkParameterInput = (withExternalLinkIcon) =>
|
|
13968
|
+
var linkParameterInput = (withExternalLinkIcon) => import_react138.css`
|
|
13826
13969
|
padding-right: calc(
|
|
13827
13970
|
${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
|
|
13828
13971
|
var(--spacing-base)
|
|
@@ -13835,7 +13978,7 @@ var linkParameterInput = (withExternalLinkIcon) => import_react136.css`
|
|
|
13835
13978
|
}
|
|
13836
13979
|
}
|
|
13837
13980
|
`;
|
|
13838
|
-
var linkParameterIcon =
|
|
13981
|
+
var linkParameterIcon = import_react138.css`
|
|
13839
13982
|
align-items: center;
|
|
13840
13983
|
color: var(--brand-secondary-3);
|
|
13841
13984
|
display: flex;
|
|
@@ -13850,29 +13993,31 @@ var linkParameterIcon = import_react136.css`
|
|
|
13850
13993
|
`;
|
|
13851
13994
|
|
|
13852
13995
|
// src/components/ParameterInputs/ParameterLabel.tsx
|
|
13853
|
-
var
|
|
13996
|
+
var import_jsx_runtime119 = require("@emotion/react/jsx-runtime");
|
|
13854
13997
|
var ParameterLabel = ({ id, asSpan, children, testId, ...props }) => {
|
|
13855
|
-
return !asSpan ? /* @__PURE__ */ (0,
|
|
13998
|
+
return !asSpan ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("label", { ...props, htmlFor: id, css: labelText2, "data-testid": testId, children }) : /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("span", { "aria-labelledby": id, css: labelText2, children });
|
|
13856
13999
|
};
|
|
13857
14000
|
|
|
13858
14001
|
// src/components/ParameterInputs/ParameterMenuButton.tsx
|
|
13859
14002
|
init_emotion_jsx_shim();
|
|
13860
|
-
var
|
|
13861
|
-
var
|
|
13862
|
-
var ParameterMenuButton = (0,
|
|
13863
|
-
({ label, children }, ref) => {
|
|
13864
|
-
return /* @__PURE__ */ (0,
|
|
14003
|
+
var import_react139 = require("react");
|
|
14004
|
+
var import_jsx_runtime120 = require("@emotion/react/jsx-runtime");
|
|
14005
|
+
var ParameterMenuButton = (0, import_react139.forwardRef)(
|
|
14006
|
+
({ label, children, disabled: disabled2 }, ref) => {
|
|
14007
|
+
return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
|
|
13865
14008
|
Menu,
|
|
13866
14009
|
{
|
|
13867
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
14010
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
|
|
13868
14011
|
"button",
|
|
13869
14012
|
{
|
|
14013
|
+
"data-action-bar": true,
|
|
13870
14014
|
className: "parameter-menu",
|
|
13871
14015
|
css: [inputMenu, inputMenuHover],
|
|
13872
14016
|
type: "button",
|
|
13873
14017
|
"aria-label": `${label} options`,
|
|
13874
14018
|
ref,
|
|
13875
|
-
|
|
14019
|
+
disabled: disabled2,
|
|
14020
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
|
|
13876
14021
|
}
|
|
13877
14022
|
),
|
|
13878
14023
|
children
|
|
@@ -13883,14 +14028,14 @@ var ParameterMenuButton = (0, import_react137.forwardRef)(
|
|
|
13883
14028
|
|
|
13884
14029
|
// src/components/ParameterInputs/styles/ParameterShell.styles.ts
|
|
13885
14030
|
init_emotion_jsx_shim();
|
|
13886
|
-
var
|
|
13887
|
-
var emptyParameterShell =
|
|
14031
|
+
var import_react140 = require("@emotion/react");
|
|
14032
|
+
var emptyParameterShell = import_react140.css`
|
|
13888
14033
|
border-radius: var(--rounded-sm);
|
|
13889
14034
|
flex-grow: 1;
|
|
13890
14035
|
position: relative;
|
|
13891
14036
|
max-width: 100%;
|
|
13892
14037
|
`;
|
|
13893
|
-
var emptyParameterShellText =
|
|
14038
|
+
var emptyParameterShellText = import_react140.css`
|
|
13894
14039
|
background: var(--brand-secondary-6);
|
|
13895
14040
|
border-radius: var(--rounded-sm);
|
|
13896
14041
|
padding: var(--spacing-sm);
|
|
@@ -13898,7 +14043,7 @@ var emptyParameterShellText = import_react138.css`
|
|
|
13898
14043
|
font-size: var(--fs-sm);
|
|
13899
14044
|
margin: 0;
|
|
13900
14045
|
`;
|
|
13901
|
-
var overrideMarker =
|
|
14046
|
+
var overrideMarker = import_react140.css`
|
|
13902
14047
|
border-radius: var(--rounded-sm);
|
|
13903
14048
|
border: 10px solid var(--gray-300);
|
|
13904
14049
|
border-left-color: transparent;
|
|
@@ -13909,7 +14054,7 @@ var overrideMarker = import_react138.css`
|
|
|
13909
14054
|
`;
|
|
13910
14055
|
|
|
13911
14056
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
13912
|
-
var
|
|
14057
|
+
var import_jsx_runtime121 = require("@emotion/react/jsx-runtime");
|
|
13913
14058
|
var extractParameterProps = (props) => {
|
|
13914
14059
|
const {
|
|
13915
14060
|
id,
|
|
@@ -13969,36 +14114,37 @@ var ParameterShell = ({
|
|
|
13969
14114
|
isParameterGroup = false,
|
|
13970
14115
|
...props
|
|
13971
14116
|
}) => {
|
|
13972
|
-
const [manualErrorMessage, setManualErrorMessage] = (0,
|
|
14117
|
+
const [manualErrorMessage, setManualErrorMessage] = (0, import_react142.useState)(void 0);
|
|
13973
14118
|
const setErrorMessage = (message) => setManualErrorMessage(message);
|
|
13974
14119
|
const errorMessaging = errorMessage || manualErrorMessage;
|
|
13975
|
-
return /* @__PURE__ */ (0,
|
|
13976
|
-
hiddenLabel || title ? null : /* @__PURE__ */ (0,
|
|
14120
|
+
return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { css: inputContainer2, ...props, id, children: [
|
|
14121
|
+
hiddenLabel || title ? null : /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(ParameterLabel, { id, css: labelText2, children: [
|
|
13977
14122
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
13978
14123
|
label,
|
|
13979
14124
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
13980
14125
|
] }),
|
|
13981
|
-
!title ? null : /* @__PURE__ */ (0,
|
|
14126
|
+
!title ? null : /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(ParameterLabel, { id, asSpan: true, testId: "parameter-label", children: [
|
|
13982
14127
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
13983
14128
|
title,
|
|
13984
14129
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
13985
14130
|
] }),
|
|
13986
|
-
/* @__PURE__ */ (0,
|
|
13987
|
-
actionItems ? /* @__PURE__ */ (0,
|
|
14131
|
+
/* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { css: inputWrapper, children: [
|
|
14132
|
+
actionItems ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
|
|
13988
14133
|
"div",
|
|
13989
14134
|
{
|
|
14135
|
+
"data-action-bar": true,
|
|
13990
14136
|
css: [
|
|
13991
14137
|
inputMenu,
|
|
13992
14138
|
inputActionItems,
|
|
13993
|
-
menuItems ?
|
|
14139
|
+
menuItems ? import_react141.css`
|
|
13994
14140
|
right: var(--spacing-md);
|
|
13995
14141
|
` : void 0
|
|
13996
14142
|
],
|
|
13997
14143
|
children: actionItems
|
|
13998
14144
|
}
|
|
13999
14145
|
) : null,
|
|
14000
|
-
menuItems ? /* @__PURE__ */ (0,
|
|
14001
|
-
/* @__PURE__ */ (0,
|
|
14146
|
+
menuItems ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ParameterMenuButton, { label: `${label} menu`, disabled: props.disabled, children: menuItems }) : null,
|
|
14147
|
+
/* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
|
|
14002
14148
|
ParameterShellContext.Provider,
|
|
14003
14149
|
{
|
|
14004
14150
|
value: {
|
|
@@ -14008,14 +14154,14 @@ var ParameterShell = ({
|
|
|
14008
14154
|
errorMessage: errorMessaging,
|
|
14009
14155
|
handleManuallySetErrorMessage: (message) => setErrorMessage(message)
|
|
14010
14156
|
},
|
|
14011
|
-
children: isParameterGroup ? /* @__PURE__ */ (0,
|
|
14157
|
+
children: isParameterGroup ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(ParameterShellPlaceholder, { children: [
|
|
14012
14158
|
children,
|
|
14013
|
-
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ (0,
|
|
14159
|
+
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
|
|
14014
14160
|
] })
|
|
14015
14161
|
}
|
|
14016
14162
|
)
|
|
14017
14163
|
] }),
|
|
14018
|
-
/* @__PURE__ */ (0,
|
|
14164
|
+
/* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
|
|
14019
14165
|
FieldMessage,
|
|
14020
14166
|
{
|
|
14021
14167
|
helperMessageTestId: captionTestId,
|
|
@@ -14029,27 +14175,27 @@ var ParameterShell = ({
|
|
|
14029
14175
|
] });
|
|
14030
14176
|
};
|
|
14031
14177
|
var ParameterShellPlaceholder = ({ children }) => {
|
|
14032
|
-
return /* @__PURE__ */ (0,
|
|
14178
|
+
return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { css: emptyParameterShell, children });
|
|
14033
14179
|
};
|
|
14034
|
-
var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0,
|
|
14180
|
+
var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { hidden: true, children: "reset overridden value to default" }) }) });
|
|
14035
14181
|
|
|
14036
14182
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
14037
|
-
var
|
|
14038
|
-
var ParameterImage = (0,
|
|
14183
|
+
var import_jsx_runtime122 = require("@emotion/react/jsx-runtime");
|
|
14184
|
+
var ParameterImage = (0, import_react143.forwardRef)(
|
|
14039
14185
|
({ children, ...props }, ref) => {
|
|
14040
14186
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
14041
|
-
return /* @__PURE__ */ (0,
|
|
14042
|
-
/* @__PURE__ */ (0,
|
|
14187
|
+
return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
|
|
14188
|
+
/* @__PURE__ */ (0, import_jsx_runtime122.jsx)(ParameterImageInner, { ref, ...innerProps }),
|
|
14043
14189
|
children
|
|
14044
14190
|
] });
|
|
14045
14191
|
}
|
|
14046
14192
|
);
|
|
14047
|
-
var ParameterImageInner = (0,
|
|
14193
|
+
var ParameterImageInner = (0, import_react143.forwardRef)((props, ref) => {
|
|
14048
14194
|
const { value } = props;
|
|
14049
14195
|
const { id, label, hiddenLabel, errorMessage } = useParameterShell();
|
|
14050
|
-
const deferredValue = (0,
|
|
14051
|
-
return /* @__PURE__ */ (0,
|
|
14052
|
-
/* @__PURE__ */ (0,
|
|
14196
|
+
const deferredValue = (0, import_react143.useDeferredValue)(value);
|
|
14197
|
+
return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(import_jsx_runtime122.Fragment, { children: [
|
|
14198
|
+
/* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
14053
14199
|
"input",
|
|
14054
14200
|
{
|
|
14055
14201
|
css: input3,
|
|
@@ -14061,22 +14207,22 @@ var ParameterImageInner = (0, import_react141.forwardRef)((props, ref) => {
|
|
|
14061
14207
|
...props
|
|
14062
14208
|
}
|
|
14063
14209
|
),
|
|
14064
|
-
errorMessage || props.disablePreview ? null : /* @__PURE__ */ (0,
|
|
14210
|
+
errorMessage || props.disablePreview ? null : /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(ParameterImagePreview, { imageSrc: deferredValue })
|
|
14065
14211
|
] });
|
|
14066
14212
|
});
|
|
14067
14213
|
|
|
14068
14214
|
// src/components/ParameterInputs/ParameterInput.tsx
|
|
14069
14215
|
init_emotion_jsx_shim();
|
|
14070
|
-
var
|
|
14071
|
-
var
|
|
14072
|
-
var ParameterInput = (0,
|
|
14216
|
+
var import_react144 = require("react");
|
|
14217
|
+
var import_jsx_runtime123 = require("@emotion/react/jsx-runtime");
|
|
14218
|
+
var ParameterInput = (0, import_react144.forwardRef)((props, ref) => {
|
|
14073
14219
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
14074
|
-
return /* @__PURE__ */ (0,
|
|
14220
|
+
return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(ParameterInputInner, { ref, ...innerProps }) });
|
|
14075
14221
|
});
|
|
14076
|
-
var ParameterInputInner = (0,
|
|
14222
|
+
var ParameterInputInner = (0, import_react144.forwardRef)(({ enableMouseWheel = false, ...props }, ref) => {
|
|
14077
14223
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
14078
14224
|
const isNumberInputAndMouseWheelDisabled = enableMouseWheel !== true && props.type === "number";
|
|
14079
|
-
return /* @__PURE__ */ (0,
|
|
14225
|
+
return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
|
|
14080
14226
|
"input",
|
|
14081
14227
|
{
|
|
14082
14228
|
css: input3,
|
|
@@ -14093,19 +14239,19 @@ var ParameterInputInner = (0, import_react142.forwardRef)(({ enableMouseWheel =
|
|
|
14093
14239
|
|
|
14094
14240
|
// src/components/ParameterInputs/ParameterLink.tsx
|
|
14095
14241
|
init_emotion_jsx_shim();
|
|
14096
|
-
var
|
|
14097
|
-
var
|
|
14098
|
-
var ParameterLink = (0,
|
|
14242
|
+
var import_react145 = require("react");
|
|
14243
|
+
var import_jsx_runtime124 = require("@emotion/react/jsx-runtime");
|
|
14244
|
+
var ParameterLink = (0, import_react145.forwardRef)(
|
|
14099
14245
|
({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
|
|
14100
14246
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
14101
|
-
return /* @__PURE__ */ (0,
|
|
14247
|
+
return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
|
|
14102
14248
|
ParameterShell,
|
|
14103
14249
|
{
|
|
14104
14250
|
"data-testid": "link-parameter-editor",
|
|
14105
14251
|
...shellProps,
|
|
14106
14252
|
label: innerProps.value ? shellProps.label : "",
|
|
14107
14253
|
title: !innerProps.value && typeof shellProps.label === "string" ? shellProps.label : void 0,
|
|
14108
|
-
children: /* @__PURE__ */ (0,
|
|
14254
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
|
|
14109
14255
|
ParameterLinkInner,
|
|
14110
14256
|
{
|
|
14111
14257
|
onConnectLink,
|
|
@@ -14118,13 +14264,13 @@ var ParameterLink = (0, import_react143.forwardRef)(
|
|
|
14118
14264
|
);
|
|
14119
14265
|
}
|
|
14120
14266
|
);
|
|
14121
|
-
var ParameterLinkInner = (0,
|
|
14267
|
+
var ParameterLinkInner = (0, import_react145.forwardRef)(
|
|
14122
14268
|
({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
|
|
14123
14269
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
14124
14270
|
if (!props.value)
|
|
14125
|
-
return /* @__PURE__ */ (0,
|
|
14126
|
-
return /* @__PURE__ */ (0,
|
|
14127
|
-
/* @__PURE__ */ (0,
|
|
14271
|
+
return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
|
|
14272
|
+
return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { css: inputWrapper, children: [
|
|
14273
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
|
|
14128
14274
|
"input",
|
|
14129
14275
|
{
|
|
14130
14276
|
type: "text",
|
|
@@ -14136,8 +14282,8 @@ var ParameterLinkInner = (0, import_react143.forwardRef)(
|
|
|
14136
14282
|
...props
|
|
14137
14283
|
}
|
|
14138
14284
|
),
|
|
14139
|
-
/* @__PURE__ */ (0,
|
|
14140
|
-
/* @__PURE__ */ (0,
|
|
14285
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { css: linkParameterControls, children: [
|
|
14286
|
+
/* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
|
|
14141
14287
|
"button",
|
|
14142
14288
|
{
|
|
14143
14289
|
type: "button",
|
|
@@ -14149,7 +14295,7 @@ var ParameterLinkInner = (0, import_react143.forwardRef)(
|
|
|
14149
14295
|
children: "edit"
|
|
14150
14296
|
}
|
|
14151
14297
|
),
|
|
14152
|
-
externalLink ? /* @__PURE__ */ (0,
|
|
14298
|
+
externalLink ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
|
|
14153
14299
|
"a",
|
|
14154
14300
|
{
|
|
14155
14301
|
href: externalLink,
|
|
@@ -14157,7 +14303,7 @@ var ParameterLinkInner = (0, import_react143.forwardRef)(
|
|
|
14157
14303
|
title: "Open link in new tab",
|
|
14158
14304
|
target: "_blank",
|
|
14159
14305
|
rel: "noopener noreferrer",
|
|
14160
|
-
children: /* @__PURE__ */ (0,
|
|
14306
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
|
|
14161
14307
|
}
|
|
14162
14308
|
) : null
|
|
14163
14309
|
] })
|
|
@@ -14167,15 +14313,15 @@ var ParameterLinkInner = (0, import_react143.forwardRef)(
|
|
|
14167
14313
|
|
|
14168
14314
|
// src/components/ParameterInputs/ParameterMultiSelect.tsx
|
|
14169
14315
|
init_emotion_jsx_shim();
|
|
14170
|
-
var
|
|
14316
|
+
var import_jsx_runtime125 = require("@emotion/react/jsx-runtime");
|
|
14171
14317
|
var ParameterMultiSelect = ({ disabled: disabled2 = false, ...props }) => {
|
|
14172
14318
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
14173
|
-
return /* @__PURE__ */ (0,
|
|
14319
|
+
return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
|
|
14174
14320
|
};
|
|
14175
14321
|
var ParameterMultiSelectInner = (props) => {
|
|
14176
14322
|
var _a;
|
|
14177
14323
|
const { id, label } = useParameterShell();
|
|
14178
|
-
return /* @__PURE__ */ (0,
|
|
14324
|
+
return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
14179
14325
|
InputComboBox,
|
|
14180
14326
|
{
|
|
14181
14327
|
menuPortalTarget: document.body,
|
|
@@ -14226,7 +14372,7 @@ var ParameterMultiSelectInner = (props) => {
|
|
|
14226
14372
|
|
|
14227
14373
|
// src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
|
|
14228
14374
|
init_emotion_jsx_shim();
|
|
14229
|
-
var
|
|
14375
|
+
var import_jsx_runtime126 = require("@emotion/react/jsx-runtime");
|
|
14230
14376
|
var ParameterNameAndPublicIdInput = ({
|
|
14231
14377
|
id,
|
|
14232
14378
|
onBlur,
|
|
@@ -14252,8 +14398,8 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
14252
14398
|
navigator.clipboard.writeText(values[publicIdFieldName]);
|
|
14253
14399
|
};
|
|
14254
14400
|
autoFocus == null ? void 0 : autoFocus();
|
|
14255
|
-
return /* @__PURE__ */ (0,
|
|
14256
|
-
/* @__PURE__ */ (0,
|
|
14401
|
+
return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(import_jsx_runtime126.Fragment, { children: [
|
|
14402
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
|
|
14257
14403
|
ParameterInput,
|
|
14258
14404
|
{
|
|
14259
14405
|
id: nameIdField,
|
|
@@ -14272,7 +14418,7 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
14272
14418
|
value: values[nameIdField]
|
|
14273
14419
|
}
|
|
14274
14420
|
),
|
|
14275
|
-
/* @__PURE__ */ (0,
|
|
14421
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
|
|
14276
14422
|
ParameterInput,
|
|
14277
14423
|
{
|
|
14278
14424
|
id: publicIdFieldName,
|
|
@@ -14286,11 +14432,11 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
14286
14432
|
caption: !publicIdError ? publicIdCaption : void 0,
|
|
14287
14433
|
placeholder: publicIdPlaceholderText,
|
|
14288
14434
|
errorMessage: publicIdError,
|
|
14289
|
-
menuItems: /* @__PURE__ */ (0,
|
|
14435
|
+
menuItems: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
|
|
14290
14436
|
MenuItem,
|
|
14291
14437
|
{
|
|
14292
14438
|
disabled: !values[publicIdFieldName],
|
|
14293
|
-
icon: /* @__PURE__ */ (0,
|
|
14439
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Icon, { icon: "path-trim", iconColor: "currentColor" }),
|
|
14294
14440
|
onClick: handleCopyPidFieldValue,
|
|
14295
14441
|
children: "Copy"
|
|
14296
14442
|
}
|
|
@@ -14298,13 +14444,13 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
14298
14444
|
value: values[publicIdFieldName]
|
|
14299
14445
|
}
|
|
14300
14446
|
),
|
|
14301
|
-
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ (0,
|
|
14447
|
+
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Callout, { type: "caution", children: warnOverLength.message }) : null
|
|
14302
14448
|
] });
|
|
14303
14449
|
};
|
|
14304
14450
|
|
|
14305
14451
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
14306
14452
|
init_emotion_jsx_shim();
|
|
14307
|
-
var
|
|
14453
|
+
var import_react159 = require("@emotion/react");
|
|
14308
14454
|
var import_list3 = require("@lexical/list");
|
|
14309
14455
|
var import_markdown = require("@lexical/markdown");
|
|
14310
14456
|
var import_LexicalComposer = require("@lexical/react/LexicalComposer");
|
|
@@ -14441,7 +14587,7 @@ var defaultParameterConfiguration = {
|
|
|
14441
14587
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
14442
14588
|
var import_fast_equals2 = require("fast-equals");
|
|
14443
14589
|
var import_lexical10 = require("lexical");
|
|
14444
|
-
var
|
|
14590
|
+
var import_react160 = require("react");
|
|
14445
14591
|
|
|
14446
14592
|
// src/components/ParameterInputs/rich-text/CustomCodeNode.ts
|
|
14447
14593
|
init_emotion_jsx_shim();
|
|
@@ -14464,10 +14610,10 @@ init_emotion_jsx_shim();
|
|
|
14464
14610
|
var import_LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
|
|
14465
14611
|
var import_utils4 = require("@lexical/utils");
|
|
14466
14612
|
var import_lexical = require("lexical");
|
|
14467
|
-
var
|
|
14613
|
+
var import_react146 = require("react");
|
|
14468
14614
|
function DisableStylesPlugin() {
|
|
14469
14615
|
const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
|
|
14470
|
-
(0,
|
|
14616
|
+
(0, import_react146.useEffect)(() => {
|
|
14471
14617
|
return (0, import_utils4.mergeRegister)(
|
|
14472
14618
|
// Disable text alignment on paragraph nodes
|
|
14473
14619
|
editor.registerNodeTransform(import_lexical.ParagraphNode, (node) => {
|
|
@@ -14728,10 +14874,10 @@ init_emotion_jsx_shim();
|
|
|
14728
14874
|
var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
|
|
14729
14875
|
var import_utils5 = require("@lexical/utils");
|
|
14730
14876
|
var import_lexical2 = require("lexical");
|
|
14731
|
-
var
|
|
14877
|
+
var import_react147 = require("react");
|
|
14732
14878
|
var ImprovedAssetSelectionPlugin = () => {
|
|
14733
14879
|
const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
|
|
14734
|
-
(0,
|
|
14880
|
+
(0, import_react147.useEffect)(() => {
|
|
14735
14881
|
editor.getRootElement();
|
|
14736
14882
|
const onRootClick = (event) => {
|
|
14737
14883
|
if (event.target !== editor.getRootElement()) {
|
|
@@ -14780,13 +14926,13 @@ var ImprovedAssetSelectionPlugin_default = ImprovedAssetSelectionPlugin;
|
|
|
14780
14926
|
|
|
14781
14927
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
14782
14928
|
init_emotion_jsx_shim();
|
|
14783
|
-
var
|
|
14929
|
+
var import_react148 = require("@emotion/react");
|
|
14784
14930
|
var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
|
|
14785
14931
|
var import_LexicalNodeEventPlugin = require("@lexical/react/LexicalNodeEventPlugin");
|
|
14786
14932
|
var import_utils6 = require("@lexical/utils");
|
|
14787
14933
|
var import_fast_equals = require("fast-equals");
|
|
14788
14934
|
var import_lexical4 = require("lexical");
|
|
14789
|
-
var
|
|
14935
|
+
var import_react149 = require("react");
|
|
14790
14936
|
|
|
14791
14937
|
// src/components/ParameterInputs/rich-text/utils.ts
|
|
14792
14938
|
init_emotion_jsx_shim();
|
|
@@ -14845,7 +14991,7 @@ var normalizeStateForDeepEqualComparison = (editorState) => {
|
|
|
14845
14991
|
};
|
|
14846
14992
|
|
|
14847
14993
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
14848
|
-
var
|
|
14994
|
+
var import_jsx_runtime127 = require("@emotion/react/jsx-runtime");
|
|
14849
14995
|
var isProjectMapLinkValue = (value) => {
|
|
14850
14996
|
return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
|
|
14851
14997
|
value.nodeId && value.path && value.projectMapId
|
|
@@ -15134,17 +15280,17 @@ var OPEN_LINK_NODE_MODAL_COMMAND = (0, import_lexical4.createCommand)(
|
|
|
15134
15280
|
);
|
|
15135
15281
|
var LINK_POPOVER_OFFSET_X = 0;
|
|
15136
15282
|
var LINK_POPOVER_OFFSET_Y = 8;
|
|
15137
|
-
var linkPopover =
|
|
15283
|
+
var linkPopover = import_react148.css`
|
|
15138
15284
|
position: absolute;
|
|
15139
15285
|
z-index: 11;
|
|
15140
15286
|
`;
|
|
15141
|
-
var linkPopoverContainer =
|
|
15287
|
+
var linkPopoverContainer = import_react148.css`
|
|
15142
15288
|
${Popover};
|
|
15143
15289
|
${PopoverVariantSmall};
|
|
15144
15290
|
align-items: center;
|
|
15145
15291
|
display: flex;
|
|
15146
15292
|
`;
|
|
15147
|
-
var linkPopoverAnchor =
|
|
15293
|
+
var linkPopoverAnchor = import_react148.css`
|
|
15148
15294
|
${link}
|
|
15149
15295
|
${linkColorDefault}
|
|
15150
15296
|
`;
|
|
@@ -15157,17 +15303,17 @@ function LinkNodePlugin({
|
|
|
15157
15303
|
return path;
|
|
15158
15304
|
};
|
|
15159
15305
|
const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
|
|
15160
|
-
const [linkPopoverState, setLinkPopoverState] = (0,
|
|
15161
|
-
const linkPopoverElRef = (0,
|
|
15162
|
-
const [isEditorFocused, setIsEditorFocused] = (0,
|
|
15163
|
-
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0,
|
|
15164
|
-
(0,
|
|
15306
|
+
const [linkPopoverState, setLinkPopoverState] = (0, import_react149.useState)();
|
|
15307
|
+
const linkPopoverElRef = (0, import_react149.useRef)(null);
|
|
15308
|
+
const [isEditorFocused, setIsEditorFocused] = (0, import_react149.useState)(false);
|
|
15309
|
+
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react149.useState)(false);
|
|
15310
|
+
(0, import_react149.useEffect)(() => {
|
|
15165
15311
|
if (!isEditorFocused && !isLinkPopoverFocused) {
|
|
15166
15312
|
setLinkPopoverState(void 0);
|
|
15167
15313
|
return;
|
|
15168
15314
|
}
|
|
15169
15315
|
}, [isEditorFocused, isLinkPopoverFocused]);
|
|
15170
|
-
(0,
|
|
15316
|
+
(0, import_react149.useEffect)(() => {
|
|
15171
15317
|
if (!editor.hasNodes([LinkNode])) {
|
|
15172
15318
|
throw new Error("LinkNode not registered on editor");
|
|
15173
15319
|
}
|
|
@@ -15271,7 +15417,7 @@ function LinkNodePlugin({
|
|
|
15271
15417
|
)
|
|
15272
15418
|
);
|
|
15273
15419
|
}, [editor, onConnectLink]);
|
|
15274
|
-
const maybeShowLinkToolbar = (0,
|
|
15420
|
+
const maybeShowLinkToolbar = (0, import_react149.useCallback)(() => {
|
|
15275
15421
|
if (!editor.isEditable()) {
|
|
15276
15422
|
return;
|
|
15277
15423
|
}
|
|
@@ -15305,7 +15451,7 @@ function LinkNodePlugin({
|
|
|
15305
15451
|
}
|
|
15306
15452
|
});
|
|
15307
15453
|
}, [editor, positioningAnchorEl]);
|
|
15308
|
-
(0,
|
|
15454
|
+
(0, import_react149.useEffect)(() => {
|
|
15309
15455
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
15310
15456
|
requestAnimationFrame(() => {
|
|
15311
15457
|
editorState.read(() => {
|
|
@@ -15332,8 +15478,8 @@ function LinkNodePlugin({
|
|
|
15332
15478
|
});
|
|
15333
15479
|
});
|
|
15334
15480
|
};
|
|
15335
|
-
return /* @__PURE__ */ (0,
|
|
15336
|
-
/* @__PURE__ */ (0,
|
|
15481
|
+
return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
|
|
15482
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
15337
15483
|
import_LexicalNodeEventPlugin.NodeEventPlugin,
|
|
15338
15484
|
{
|
|
15339
15485
|
nodeType: LinkNode,
|
|
@@ -15343,7 +15489,7 @@ function LinkNodePlugin({
|
|
|
15343
15489
|
}
|
|
15344
15490
|
}
|
|
15345
15491
|
),
|
|
15346
|
-
linkPopoverState ? /* @__PURE__ */ (0,
|
|
15492
|
+
linkPopoverState ? /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
15347
15493
|
"div",
|
|
15348
15494
|
{
|
|
15349
15495
|
css: linkPopover,
|
|
@@ -15352,8 +15498,8 @@ function LinkNodePlugin({
|
|
|
15352
15498
|
top: linkPopoverState.position.y
|
|
15353
15499
|
},
|
|
15354
15500
|
ref: linkPopoverElRef,
|
|
15355
|
-
children: /* @__PURE__ */ (0,
|
|
15356
|
-
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0,
|
|
15501
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { css: linkPopoverContainer, children: [
|
|
15502
|
+
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
15357
15503
|
"a",
|
|
15358
15504
|
{
|
|
15359
15505
|
href: parsePath(
|
|
@@ -15365,7 +15511,7 @@ function LinkNodePlugin({
|
|
|
15365
15511
|
children: parsePath(linkPopoverState.node.__link.path)
|
|
15366
15512
|
}
|
|
15367
15513
|
),
|
|
15368
|
-
/* @__PURE__ */ (0,
|
|
15514
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
15369
15515
|
Button,
|
|
15370
15516
|
{
|
|
15371
15517
|
size: "xs",
|
|
@@ -15373,7 +15519,7 @@ function LinkNodePlugin({
|
|
|
15373
15519
|
onEditLinkNode(linkPopoverState.node);
|
|
15374
15520
|
},
|
|
15375
15521
|
buttonType: "ghost",
|
|
15376
|
-
children: /* @__PURE__ */ (0,
|
|
15522
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
|
|
15377
15523
|
}
|
|
15378
15524
|
)
|
|
15379
15525
|
] })
|
|
@@ -15393,7 +15539,7 @@ var import_list = require("@lexical/list");
|
|
|
15393
15539
|
var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
|
|
15394
15540
|
var import_utils9 = require("@lexical/utils");
|
|
15395
15541
|
var import_lexical5 = require("lexical");
|
|
15396
|
-
var
|
|
15542
|
+
var import_react150 = require("react");
|
|
15397
15543
|
function isIndentPermitted(maxDepth) {
|
|
15398
15544
|
const selection = (0, import_lexical5.$getSelection)();
|
|
15399
15545
|
if (!(0, import_lexical5.$isRangeSelection)(selection)) {
|
|
@@ -15448,8 +15594,8 @@ function $indentOverTab(selection) {
|
|
|
15448
15594
|
}
|
|
15449
15595
|
function ListIndentPlugin({ maxDepth }) {
|
|
15450
15596
|
const [editor] = (0, import_LexicalComposerContext4.useLexicalComposerContext)();
|
|
15451
|
-
const isInListItemNode = (0,
|
|
15452
|
-
(0,
|
|
15597
|
+
const isInListItemNode = (0, import_react150.useRef)(false);
|
|
15598
|
+
(0, import_react150.useEffect)(() => {
|
|
15453
15599
|
return editor.registerCommand(
|
|
15454
15600
|
import_lexical5.SELECTION_CHANGE_COMMAND,
|
|
15455
15601
|
() => {
|
|
@@ -15466,7 +15612,7 @@ function ListIndentPlugin({ maxDepth }) {
|
|
|
15466
15612
|
import_lexical5.COMMAND_PRIORITY_NORMAL
|
|
15467
15613
|
);
|
|
15468
15614
|
}, [editor]);
|
|
15469
|
-
(0,
|
|
15615
|
+
(0, import_react150.useEffect)(() => {
|
|
15470
15616
|
return (0, import_utils9.mergeRegister)(
|
|
15471
15617
|
editor.registerCommand(
|
|
15472
15618
|
import_lexical5.INDENT_CONTENT_COMMAND,
|
|
@@ -15496,13 +15642,13 @@ function ListIndentPlugin({ maxDepth }) {
|
|
|
15496
15642
|
|
|
15497
15643
|
// src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
|
|
15498
15644
|
init_emotion_jsx_shim();
|
|
15499
|
-
var
|
|
15645
|
+
var import_react151 = require("@emotion/react");
|
|
15500
15646
|
var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
|
|
15501
15647
|
var import_useLexicalEditable = require("@lexical/react/useLexicalEditable");
|
|
15502
15648
|
var import_table = require("@lexical/table");
|
|
15503
15649
|
var import_lexical6 = require("lexical");
|
|
15504
|
-
var
|
|
15505
|
-
var
|
|
15650
|
+
var import_react152 = require("react");
|
|
15651
|
+
var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
|
|
15506
15652
|
function computeSelectionCount(selection) {
|
|
15507
15653
|
const selectionShape = selection.getShape();
|
|
15508
15654
|
return {
|
|
@@ -15510,21 +15656,21 @@ function computeSelectionCount(selection) {
|
|
|
15510
15656
|
rows: selectionShape.toY - selectionShape.fromY + 1
|
|
15511
15657
|
};
|
|
15512
15658
|
}
|
|
15513
|
-
var tableActionMenuTrigger =
|
|
15659
|
+
var tableActionMenuTrigger = import_react151.css`
|
|
15514
15660
|
position: absolute;
|
|
15515
15661
|
transform: translate(calc(-100% - 1px), 1px);
|
|
15516
15662
|
`;
|
|
15517
|
-
var TableActionMenuTrigger = (0,
|
|
15663
|
+
var TableActionMenuTrigger = (0, import_react152.forwardRef)((props, ref) => {
|
|
15518
15664
|
const { tableCellEl, positioningAnchorEl, ...rest } = props;
|
|
15519
|
-
const [coordinates, setCoordinates] = (0,
|
|
15520
|
-
(0,
|
|
15665
|
+
const [coordinates, setCoordinates] = (0, import_react152.useState)({ x: 0, y: 0 });
|
|
15666
|
+
(0, import_react152.useLayoutEffect)(() => {
|
|
15521
15667
|
const rect = tableCellEl.getBoundingClientRect();
|
|
15522
15668
|
const parentRect = positioningAnchorEl.getBoundingClientRect();
|
|
15523
15669
|
const relativeX = rect.right - parentRect.left + positioningAnchorEl.scrollLeft;
|
|
15524
15670
|
const relativeY = rect.top - parentRect.top + positioningAnchorEl.scrollTop;
|
|
15525
15671
|
setCoordinates({ x: relativeX, y: relativeY });
|
|
15526
15672
|
}, [tableCellEl, positioningAnchorEl]);
|
|
15527
|
-
return /* @__PURE__ */ (0,
|
|
15673
|
+
return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
15528
15674
|
IconButton,
|
|
15529
15675
|
{
|
|
15530
15676
|
ref,
|
|
@@ -15538,7 +15684,7 @@ var TableActionMenuTrigger = (0, import_react150.forwardRef)((props, ref) => {
|
|
|
15538
15684
|
size: "xs",
|
|
15539
15685
|
buttonType: "unimportant",
|
|
15540
15686
|
...rest,
|
|
15541
|
-
children: /* @__PURE__ */ (0,
|
|
15687
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
|
|
15542
15688
|
}
|
|
15543
15689
|
);
|
|
15544
15690
|
});
|
|
@@ -15550,16 +15696,16 @@ function TableActionMenu({
|
|
|
15550
15696
|
positioningAnchorEl
|
|
15551
15697
|
}) {
|
|
15552
15698
|
const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
|
|
15553
|
-
const [tableCellNode, updateTableCellNode] = (0,
|
|
15554
|
-
const [selectionCounts, updateSelectionCounts] = (0,
|
|
15699
|
+
const [tableCellNode, updateTableCellNode] = (0, import_react152.useState)(_tableCellNode);
|
|
15700
|
+
const [selectionCounts, updateSelectionCounts] = (0, import_react152.useState)({
|
|
15555
15701
|
columns: 1,
|
|
15556
15702
|
rows: 1
|
|
15557
15703
|
});
|
|
15558
|
-
const [menuTriggerKey, setMenuTriggerKey] = (0,
|
|
15704
|
+
const [menuTriggerKey, setMenuTriggerKey] = (0, import_react152.useState)(0);
|
|
15559
15705
|
const incrementMenuTriggerKey = () => {
|
|
15560
15706
|
setMenuTriggerKey((key) => key += 1);
|
|
15561
15707
|
};
|
|
15562
|
-
(0,
|
|
15708
|
+
(0, import_react152.useEffect)(() => {
|
|
15563
15709
|
return editor.registerMutationListener(
|
|
15564
15710
|
import_table.TableCellNode,
|
|
15565
15711
|
(nodeMutations) => {
|
|
@@ -15573,7 +15719,7 @@ function TableActionMenu({
|
|
|
15573
15719
|
{ skipInitialization: true }
|
|
15574
15720
|
);
|
|
15575
15721
|
}, [editor, tableCellNode]);
|
|
15576
|
-
(0,
|
|
15722
|
+
(0, import_react152.useEffect)(() => {
|
|
15577
15723
|
editor.getEditorState().read(() => {
|
|
15578
15724
|
const selection = (0, import_lexical6.$getSelection)();
|
|
15579
15725
|
if ((0, import_table.$isTableSelection)(selection)) {
|
|
@@ -15581,7 +15727,7 @@ function TableActionMenu({
|
|
|
15581
15727
|
}
|
|
15582
15728
|
});
|
|
15583
15729
|
}, [editor]);
|
|
15584
|
-
const clearTableSelection = (0,
|
|
15730
|
+
const clearTableSelection = (0, import_react152.useCallback)(() => {
|
|
15585
15731
|
editor.update(() => {
|
|
15586
15732
|
if (tableCellNode.isAttached()) {
|
|
15587
15733
|
const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
@@ -15602,7 +15748,7 @@ function TableActionMenu({
|
|
|
15602
15748
|
rootNode.selectStart();
|
|
15603
15749
|
});
|
|
15604
15750
|
}, [editor, tableCellNode]);
|
|
15605
|
-
const insertTableRowAtSelection = (0,
|
|
15751
|
+
const insertTableRowAtSelection = (0, import_react152.useCallback)(
|
|
15606
15752
|
(shouldInsertAfter) => {
|
|
15607
15753
|
editor.update(() => {
|
|
15608
15754
|
(0, import_table.$insertTableRow__EXPERIMENTAL)(shouldInsertAfter);
|
|
@@ -15611,7 +15757,7 @@ function TableActionMenu({
|
|
|
15611
15757
|
},
|
|
15612
15758
|
[editor]
|
|
15613
15759
|
);
|
|
15614
|
-
const insertTableColumnAtSelection = (0,
|
|
15760
|
+
const insertTableColumnAtSelection = (0, import_react152.useCallback)(
|
|
15615
15761
|
(shouldInsertAfter) => {
|
|
15616
15762
|
editor.update(() => {
|
|
15617
15763
|
for (let i = 0; i < selectionCounts.columns; i++) {
|
|
@@ -15622,26 +15768,26 @@ function TableActionMenu({
|
|
|
15622
15768
|
},
|
|
15623
15769
|
[editor, selectionCounts.columns]
|
|
15624
15770
|
);
|
|
15625
|
-
const deleteTableRowAtSelection = (0,
|
|
15771
|
+
const deleteTableRowAtSelection = (0, import_react152.useCallback)(() => {
|
|
15626
15772
|
editor.update(() => {
|
|
15627
15773
|
(0, import_table.$deleteTableRow__EXPERIMENTAL)();
|
|
15628
15774
|
});
|
|
15629
15775
|
incrementMenuTriggerKey();
|
|
15630
15776
|
}, [editor]);
|
|
15631
|
-
const deleteTableAtSelection = (0,
|
|
15777
|
+
const deleteTableAtSelection = (0, import_react152.useCallback)(() => {
|
|
15632
15778
|
editor.update(() => {
|
|
15633
15779
|
const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
15634
15780
|
tableNode.remove();
|
|
15635
15781
|
clearTableSelection();
|
|
15636
15782
|
});
|
|
15637
15783
|
}, [editor, tableCellNode, clearTableSelection]);
|
|
15638
|
-
const deleteTableColumnAtSelection = (0,
|
|
15784
|
+
const deleteTableColumnAtSelection = (0, import_react152.useCallback)(() => {
|
|
15639
15785
|
editor.update(() => {
|
|
15640
15786
|
(0, import_table.$deleteTableColumn__EXPERIMENTAL)();
|
|
15641
15787
|
});
|
|
15642
15788
|
incrementMenuTriggerKey();
|
|
15643
15789
|
}, [editor]);
|
|
15644
|
-
const toggleTableRowIsHeader = (0,
|
|
15790
|
+
const toggleTableRowIsHeader = (0, import_react152.useCallback)(() => {
|
|
15645
15791
|
editor.update(() => {
|
|
15646
15792
|
const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
15647
15793
|
const tableRowIndex = (0, import_table.$getTableRowIndexFromTableCellNode)(tableCellNode);
|
|
@@ -15662,7 +15808,7 @@ function TableActionMenu({
|
|
|
15662
15808
|
clearTableSelection();
|
|
15663
15809
|
});
|
|
15664
15810
|
}, [editor, tableCellNode, clearTableSelection]);
|
|
15665
|
-
const toggleTableColumnIsHeader = (0,
|
|
15811
|
+
const toggleTableColumnIsHeader = (0, import_react152.useCallback)(() => {
|
|
15666
15812
|
editor.update(() => {
|
|
15667
15813
|
const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
15668
15814
|
const tableColumnIndex = (0, import_table.$getTableColumnIndexFromTableCellNode)(tableCellNode);
|
|
@@ -15689,13 +15835,13 @@ function TableActionMenu({
|
|
|
15689
15835
|
clearTableSelection();
|
|
15690
15836
|
});
|
|
15691
15837
|
}, [editor, tableCellNode, clearTableSelection]);
|
|
15692
|
-
const menuItemCss = (0,
|
|
15838
|
+
const menuItemCss = (0, import_react151.css)({
|
|
15693
15839
|
fontSize: "var(--fs-sm)"
|
|
15694
15840
|
});
|
|
15695
|
-
return /* @__PURE__ */ (0,
|
|
15841
|
+
return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
|
|
15696
15842
|
Menu,
|
|
15697
15843
|
{
|
|
15698
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
15844
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
15699
15845
|
TableActionMenuTrigger,
|
|
15700
15846
|
{
|
|
15701
15847
|
tableCellEl,
|
|
@@ -15706,7 +15852,7 @@ function TableActionMenu({
|
|
|
15706
15852
|
portalElement: menuPortalEl,
|
|
15707
15853
|
maxMenuHeight: "300px",
|
|
15708
15854
|
children: [
|
|
15709
|
-
/* @__PURE__ */ (0,
|
|
15855
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
|
|
15710
15856
|
MenuItem,
|
|
15711
15857
|
{
|
|
15712
15858
|
onClick: () => {
|
|
@@ -15720,33 +15866,33 @@ function TableActionMenu({
|
|
|
15720
15866
|
]
|
|
15721
15867
|
}
|
|
15722
15868
|
),
|
|
15723
|
-
/* @__PURE__ */ (0,
|
|
15869
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
|
|
15724
15870
|
"Insert ",
|
|
15725
15871
|
selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
|
|
15726
15872
|
" below"
|
|
15727
15873
|
] }),
|
|
15728
|
-
/* @__PURE__ */ (0,
|
|
15729
|
-
/* @__PURE__ */ (0,
|
|
15874
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(MenuItemSeparator, {}),
|
|
15875
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
|
|
15730
15876
|
"Insert ",
|
|
15731
15877
|
selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
|
|
15732
15878
|
" left"
|
|
15733
15879
|
] }),
|
|
15734
|
-
/* @__PURE__ */ (0,
|
|
15880
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
|
|
15735
15881
|
"Insert ",
|
|
15736
15882
|
selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
|
|
15737
15883
|
" right"
|
|
15738
15884
|
] }),
|
|
15739
|
-
/* @__PURE__ */ (0,
|
|
15740
|
-
/* @__PURE__ */ (0,
|
|
15741
|
-
/* @__PURE__ */ (0,
|
|
15742
|
-
/* @__PURE__ */ (0,
|
|
15743
|
-
/* @__PURE__ */ (0,
|
|
15744
|
-
/* @__PURE__ */ (0,
|
|
15885
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(MenuItemSeparator, {}),
|
|
15886
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
|
|
15887
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
|
|
15888
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
|
|
15889
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(MenuItemSeparator, {}),
|
|
15890
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
|
|
15745
15891
|
(tableCellNode.__headerState & import_table.TableCellHeaderStates.ROW) === import_table.TableCellHeaderStates.ROW ? "Remove" : "Add",
|
|
15746
15892
|
" ",
|
|
15747
15893
|
"row header"
|
|
15748
15894
|
] }),
|
|
15749
|
-
/* @__PURE__ */ (0,
|
|
15895
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
|
|
15750
15896
|
(tableCellNode.__headerState & import_table.TableCellHeaderStates.COLUMN) === import_table.TableCellHeaderStates.COLUMN ? "Remove" : "Add",
|
|
15751
15897
|
" ",
|
|
15752
15898
|
"column header"
|
|
@@ -15760,10 +15906,10 @@ function TableCellActionMenuContainer({
|
|
|
15760
15906
|
positioningAnchorEl
|
|
15761
15907
|
}) {
|
|
15762
15908
|
const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
|
|
15763
|
-
const [tableCellNode, setTableMenuCellNode] = (0,
|
|
15764
|
-
const [tableCellNodeEl, _setTableMenuCellNodeEl] = (0,
|
|
15765
|
-
const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = (0,
|
|
15766
|
-
(0,
|
|
15909
|
+
const [tableCellNode, setTableMenuCellNode] = (0, import_react152.useState)(null);
|
|
15910
|
+
const [tableCellNodeEl, _setTableMenuCellNodeEl] = (0, import_react152.useState)(null);
|
|
15911
|
+
const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = (0, import_react152.useState)(null);
|
|
15912
|
+
(0, import_react152.useEffect)(() => {
|
|
15767
15913
|
const newPortalEl = document.createElement("div");
|
|
15768
15914
|
setTableMenuCellMenuPortalEl(newPortalEl);
|
|
15769
15915
|
menuPortalEl.appendChild(newPortalEl);
|
|
@@ -15771,14 +15917,14 @@ function TableCellActionMenuContainer({
|
|
|
15771
15917
|
newPortalEl.remove();
|
|
15772
15918
|
};
|
|
15773
15919
|
}, [menuPortalEl]);
|
|
15774
|
-
const setTableMenuCellNodeElem = (0,
|
|
15920
|
+
const setTableMenuCellNodeElem = (0, import_react152.useCallback)((elem) => {
|
|
15775
15921
|
if (elem) {
|
|
15776
15922
|
_setTableMenuCellNodeEl(elem);
|
|
15777
15923
|
} else {
|
|
15778
15924
|
_setTableMenuCellNodeEl(null);
|
|
15779
15925
|
}
|
|
15780
15926
|
}, []);
|
|
15781
|
-
const $moveMenu = (0,
|
|
15927
|
+
const $moveMenu = (0, import_react152.useCallback)(() => {
|
|
15782
15928
|
const selection = (0, import_lexical6.$getSelection)();
|
|
15783
15929
|
const nativeSelection = window.getSelection();
|
|
15784
15930
|
const activeElement = document.activeElement;
|
|
@@ -15807,14 +15953,14 @@ function TableCellActionMenuContainer({
|
|
|
15807
15953
|
setTableMenuCellNodeElem(null);
|
|
15808
15954
|
}
|
|
15809
15955
|
}, [editor, setTableMenuCellNodeElem]);
|
|
15810
|
-
(0,
|
|
15956
|
+
(0, import_react152.useEffect)(() => {
|
|
15811
15957
|
return editor.registerUpdateListener(() => {
|
|
15812
15958
|
editor.getEditorState().read(() => {
|
|
15813
15959
|
$moveMenu();
|
|
15814
15960
|
});
|
|
15815
15961
|
});
|
|
15816
15962
|
});
|
|
15817
|
-
return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ (0,
|
|
15963
|
+
return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
15818
15964
|
TableActionMenu,
|
|
15819
15965
|
{
|
|
15820
15966
|
tableCellNode,
|
|
@@ -15830,23 +15976,23 @@ function TableActionMenuPlugin({
|
|
|
15830
15976
|
menuPortalEl
|
|
15831
15977
|
}) {
|
|
15832
15978
|
const isEditable = (0, import_useLexicalEditable.useLexicalEditable)();
|
|
15833
|
-
return isEditable ? /* @__PURE__ */ (0,
|
|
15979
|
+
return isEditable ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(TableCellActionMenuContainer, { menuPortalEl, positioningAnchorEl }) : null;
|
|
15834
15980
|
}
|
|
15835
15981
|
|
|
15836
15982
|
// src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
|
|
15837
15983
|
init_emotion_jsx_shim();
|
|
15838
|
-
var
|
|
15984
|
+
var import_react153 = require("@emotion/react");
|
|
15839
15985
|
var import_LexicalComposerContext6 = require("@lexical/react/LexicalComposerContext");
|
|
15840
15986
|
var import_useLexicalEditable2 = require("@lexical/react/useLexicalEditable");
|
|
15841
15987
|
var import_table2 = require("@lexical/table");
|
|
15842
15988
|
var import_utils11 = require("@lexical/utils");
|
|
15843
15989
|
var import_lexical7 = require("lexical");
|
|
15844
|
-
var
|
|
15990
|
+
var import_react154 = require("react");
|
|
15845
15991
|
var import_react_dom3 = require("react-dom");
|
|
15846
|
-
var
|
|
15992
|
+
var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
|
|
15847
15993
|
var MIN_ROW_HEIGHT = 33;
|
|
15848
15994
|
var MIN_COLUMN_WIDTH = 50;
|
|
15849
|
-
var tableResizer =
|
|
15995
|
+
var tableResizer = import_react153.css`
|
|
15850
15996
|
position: absolute;
|
|
15851
15997
|
z-index: var(--z-10);
|
|
15852
15998
|
`;
|
|
@@ -15868,15 +16014,15 @@ var fixedGetDOMCellFromTarget = (node) => {
|
|
|
15868
16014
|
return null;
|
|
15869
16015
|
};
|
|
15870
16016
|
function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
15871
|
-
const targetRef = (0,
|
|
15872
|
-
const resizerRef = (0,
|
|
15873
|
-
const tableRectRef = (0,
|
|
15874
|
-
const mouseStartPosRef = (0,
|
|
15875
|
-
const [mouseCurrentPos, updateMouseCurrentPos] = (0,
|
|
15876
|
-
const [activeCell, updateActiveCell] = (0,
|
|
15877
|
-
const [isMouseDown, updateIsMouseDown] = (0,
|
|
15878
|
-
const [draggingDirection, updateDraggingDirection] = (0,
|
|
15879
|
-
const resetState = (0,
|
|
16017
|
+
const targetRef = (0, import_react154.useRef)(null);
|
|
16018
|
+
const resizerRef = (0, import_react154.useRef)(null);
|
|
16019
|
+
const tableRectRef = (0, import_react154.useRef)(null);
|
|
16020
|
+
const mouseStartPosRef = (0, import_react154.useRef)(null);
|
|
16021
|
+
const [mouseCurrentPos, updateMouseCurrentPos] = (0, import_react154.useState)(null);
|
|
16022
|
+
const [activeCell, updateActiveCell] = (0, import_react154.useState)(null);
|
|
16023
|
+
const [isMouseDown, updateIsMouseDown] = (0, import_react154.useState)(false);
|
|
16024
|
+
const [draggingDirection, updateDraggingDirection] = (0, import_react154.useState)(null);
|
|
16025
|
+
const resetState = (0, import_react154.useCallback)(() => {
|
|
15880
16026
|
updateActiveCell(null);
|
|
15881
16027
|
targetRef.current = null;
|
|
15882
16028
|
updateDraggingDirection(null);
|
|
@@ -15886,7 +16032,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
15886
16032
|
const isMouseDownOnEvent = (event) => {
|
|
15887
16033
|
return (event.buttons & 1) === 1;
|
|
15888
16034
|
};
|
|
15889
|
-
(0,
|
|
16035
|
+
(0, import_react154.useEffect)(() => {
|
|
15890
16036
|
const onMouseMove = (event) => {
|
|
15891
16037
|
setTimeout(() => {
|
|
15892
16038
|
const target = event.target;
|
|
@@ -15953,7 +16099,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
15953
16099
|
}
|
|
15954
16100
|
return false;
|
|
15955
16101
|
};
|
|
15956
|
-
const updateRowHeight = (0,
|
|
16102
|
+
const updateRowHeight = (0, import_react154.useCallback)(
|
|
15957
16103
|
(heightChange) => {
|
|
15958
16104
|
if (!activeCell) {
|
|
15959
16105
|
throw new Error("TableCellResizer: Expected active cell.");
|
|
@@ -16015,7 +16161,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
16015
16161
|
}
|
|
16016
16162
|
}
|
|
16017
16163
|
};
|
|
16018
|
-
const updateColumnWidth = (0,
|
|
16164
|
+
const updateColumnWidth = (0, import_react154.useCallback)(
|
|
16019
16165
|
(widthChange) => {
|
|
16020
16166
|
if (!activeCell) {
|
|
16021
16167
|
throw new Error("TableCellResizer: Expected active cell.");
|
|
@@ -16049,7 +16195,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
16049
16195
|
},
|
|
16050
16196
|
[activeCell, editor]
|
|
16051
16197
|
);
|
|
16052
|
-
const mouseUpHandler = (0,
|
|
16198
|
+
const mouseUpHandler = (0, import_react154.useCallback)(
|
|
16053
16199
|
(direction) => {
|
|
16054
16200
|
const handler = (event) => {
|
|
16055
16201
|
event.preventDefault();
|
|
@@ -16078,7 +16224,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
16078
16224
|
},
|
|
16079
16225
|
[activeCell, resetState, updateColumnWidth, updateRowHeight]
|
|
16080
16226
|
);
|
|
16081
|
-
const toggleResize = (0,
|
|
16227
|
+
const toggleResize = (0, import_react154.useCallback)(
|
|
16082
16228
|
(direction) => (event) => {
|
|
16083
16229
|
event.preventDefault();
|
|
16084
16230
|
event.stopPropagation();
|
|
@@ -16095,7 +16241,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
16095
16241
|
},
|
|
16096
16242
|
[activeCell, mouseUpHandler]
|
|
16097
16243
|
);
|
|
16098
|
-
const getResizers = (0,
|
|
16244
|
+
const getResizers = (0, import_react154.useCallback)(() => {
|
|
16099
16245
|
if (activeCell) {
|
|
16100
16246
|
const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
|
|
16101
16247
|
const parentRect = positioningAnchorEl.getBoundingClientRect();
|
|
@@ -16144,8 +16290,8 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
16144
16290
|
};
|
|
16145
16291
|
}, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
|
|
16146
16292
|
const resizerStyles = getResizers();
|
|
16147
|
-
return /* @__PURE__ */ (0,
|
|
16148
|
-
/* @__PURE__ */ (0,
|
|
16293
|
+
return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_jsx_runtime129.Fragment, { children: [
|
|
16294
|
+
/* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
|
|
16149
16295
|
"div",
|
|
16150
16296
|
{
|
|
16151
16297
|
css: tableResizer,
|
|
@@ -16153,7 +16299,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
16153
16299
|
onMouseDown: toggleResize("right")
|
|
16154
16300
|
}
|
|
16155
16301
|
),
|
|
16156
|
-
/* @__PURE__ */ (0,
|
|
16302
|
+
/* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
|
|
16157
16303
|
"div",
|
|
16158
16304
|
{
|
|
16159
16305
|
css: tableResizer,
|
|
@@ -16166,9 +16312,9 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
16166
16312
|
function TableCellResizerPlugin({ positioningAnchorEl }) {
|
|
16167
16313
|
const [editor] = (0, import_LexicalComposerContext6.useLexicalComposerContext)();
|
|
16168
16314
|
const isEditable = (0, import_useLexicalEditable2.useLexicalEditable)();
|
|
16169
|
-
return (0,
|
|
16315
|
+
return (0, import_react154.useMemo)(
|
|
16170
16316
|
() => isEditable ? (0, import_react_dom3.createPortal)(
|
|
16171
|
-
/* @__PURE__ */ (0,
|
|
16317
|
+
/* @__PURE__ */ (0, import_jsx_runtime129.jsx)(TableCellResizer, { editor, positioningAnchorEl }),
|
|
16172
16318
|
positioningAnchorEl
|
|
16173
16319
|
) : null,
|
|
16174
16320
|
[editor, isEditable, positioningAnchorEl]
|
|
@@ -16180,11 +16326,11 @@ init_emotion_jsx_shim();
|
|
|
16180
16326
|
var import_LexicalComposerContext7 = require("@lexical/react/LexicalComposerContext");
|
|
16181
16327
|
var import_table3 = require("@lexical/table");
|
|
16182
16328
|
var import_lexical8 = require("lexical");
|
|
16183
|
-
var
|
|
16329
|
+
var import_react155 = require("react");
|
|
16184
16330
|
var TableSelectionPlugin = () => {
|
|
16185
16331
|
const [editor] = (0, import_LexicalComposerContext7.useLexicalComposerContext)();
|
|
16186
|
-
const [closestTableCellNode, setClosestTableCellNode] = (0,
|
|
16187
|
-
(0,
|
|
16332
|
+
const [closestTableCellNode, setClosestTableCellNode] = (0, import_react155.useState)(null);
|
|
16333
|
+
(0, import_react155.useEffect)(() => {
|
|
16188
16334
|
return editor.registerCommand(
|
|
16189
16335
|
import_lexical8.SELECTION_CHANGE_COMMAND,
|
|
16190
16336
|
() => {
|
|
@@ -16206,7 +16352,7 @@ var TableSelectionPlugin = () => {
|
|
|
16206
16352
|
import_lexical8.COMMAND_PRIORITY_NORMAL
|
|
16207
16353
|
);
|
|
16208
16354
|
}, [editor]);
|
|
16209
|
-
(0,
|
|
16355
|
+
(0, import_react155.useEffect)(() => {
|
|
16210
16356
|
const onControlA = (event) => {
|
|
16211
16357
|
if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
|
|
16212
16358
|
if (!closestTableCellNode) {
|
|
@@ -16230,7 +16376,7 @@ var TableSelectionPlugin_default = TableSelectionPlugin;
|
|
|
16230
16376
|
|
|
16231
16377
|
// src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
|
|
16232
16378
|
init_emotion_jsx_shim();
|
|
16233
|
-
var
|
|
16379
|
+
var import_react157 = require("@emotion/react");
|
|
16234
16380
|
var import_code2 = require("@lexical/code");
|
|
16235
16381
|
var import_list2 = require("@lexical/list");
|
|
16236
16382
|
var import_LexicalComposerContext8 = require("@lexical/react/LexicalComposerContext");
|
|
@@ -16239,7 +16385,7 @@ var import_selection2 = require("@lexical/selection");
|
|
|
16239
16385
|
var import_table4 = require("@lexical/table");
|
|
16240
16386
|
var import_utils12 = require("@lexical/utils");
|
|
16241
16387
|
var import_lexical9 = require("lexical");
|
|
16242
|
-
var
|
|
16388
|
+
var import_react158 = require("react");
|
|
16243
16389
|
|
|
16244
16390
|
// src/components/ParameterInputs/rich-text/toolbar/constants.ts
|
|
16245
16391
|
init_emotion_jsx_shim();
|
|
@@ -16257,29 +16403,29 @@ var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
|
|
|
16257
16403
|
|
|
16258
16404
|
// src/components/ParameterInputs/rich-text/toolbar/useRichTextToolbarState.ts
|
|
16259
16405
|
init_emotion_jsx_shim();
|
|
16260
|
-
var
|
|
16406
|
+
var import_react156 = require("react");
|
|
16261
16407
|
var useRichTextToolbarState = ({ config }) => {
|
|
16262
16408
|
var _a;
|
|
16263
|
-
const enabledBuiltInFormats = (0,
|
|
16409
|
+
const enabledBuiltInFormats = (0, import_react156.useMemo)(() => {
|
|
16264
16410
|
return richTextBuiltInFormats.filter((format) => {
|
|
16265
16411
|
var _a2, _b;
|
|
16266
16412
|
return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
|
|
16267
16413
|
});
|
|
16268
16414
|
}, [config]);
|
|
16269
|
-
const enabledBuiltInElements = (0,
|
|
16415
|
+
const enabledBuiltInElements = (0, import_react156.useMemo)(() => {
|
|
16270
16416
|
return richTextBuiltInElements.filter((element) => {
|
|
16271
16417
|
var _a2, _b;
|
|
16272
16418
|
return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
|
|
16273
16419
|
});
|
|
16274
16420
|
}, [config]);
|
|
16275
|
-
const enabledBuiltInFormatsWithIcon = (0,
|
|
16421
|
+
const enabledBuiltInFormatsWithIcon = (0, import_react156.useMemo)(() => {
|
|
16276
16422
|
return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
|
|
16277
16423
|
}, [enabledBuiltInFormats]);
|
|
16278
16424
|
const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
|
|
16279
16425
|
(format) => !FORMATS_WITH_ICON.has(format.type)
|
|
16280
16426
|
);
|
|
16281
|
-
const [activeFormats, setActiveFormats] = (0,
|
|
16282
|
-
const visibleFormatsWithIcon = (0,
|
|
16427
|
+
const [activeFormats, setActiveFormats] = (0, import_react156.useState)([]);
|
|
16428
|
+
const visibleFormatsWithIcon = (0, import_react156.useMemo)(() => {
|
|
16283
16429
|
const visibleFormats = /* @__PURE__ */ new Set();
|
|
16284
16430
|
activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
16285
16431
|
visibleFormats.add(type);
|
|
@@ -16289,7 +16435,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
16289
16435
|
});
|
|
16290
16436
|
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
16291
16437
|
}, [activeFormats, enabledBuiltInFormatsWithIcon]);
|
|
16292
|
-
const visibleFormatsWithoutIcon = (0,
|
|
16438
|
+
const visibleFormatsWithoutIcon = (0, import_react156.useMemo)(() => {
|
|
16293
16439
|
const visibleFormats = /* @__PURE__ */ new Set();
|
|
16294
16440
|
activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
16295
16441
|
visibleFormats.add(type);
|
|
@@ -16299,11 +16445,11 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
16299
16445
|
});
|
|
16300
16446
|
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
16301
16447
|
}, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
|
|
16302
|
-
const [activeElement, setActiveElement] = (0,
|
|
16448
|
+
const [activeElement, setActiveElement] = (0, import_react156.useState)("paragraph");
|
|
16303
16449
|
const enabledTextualElements = enabledBuiltInElements.filter(
|
|
16304
16450
|
(element) => TEXTUAL_ELEMENTS.includes(element.type)
|
|
16305
16451
|
);
|
|
16306
|
-
const visibleTextualElements = (0,
|
|
16452
|
+
const visibleTextualElements = (0, import_react156.useMemo)(() => {
|
|
16307
16453
|
if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
|
|
16308
16454
|
return enabledTextualElements;
|
|
16309
16455
|
}
|
|
@@ -16314,30 +16460,30 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
16314
16460
|
}
|
|
16315
16461
|
);
|
|
16316
16462
|
}, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
|
|
16317
|
-
const [isLink, setIsLink] = (0,
|
|
16318
|
-
const linkElementVisible = (0,
|
|
16463
|
+
const [isLink, setIsLink] = (0, import_react156.useState)(false);
|
|
16464
|
+
const linkElementVisible = (0, import_react156.useMemo)(() => {
|
|
16319
16465
|
return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
|
|
16320
16466
|
}, [isLink, enabledBuiltInElements]);
|
|
16321
|
-
const visibleLists = (0,
|
|
16467
|
+
const visibleLists = (0, import_react156.useMemo)(() => {
|
|
16322
16468
|
return new Set(
|
|
16323
16469
|
["orderedList", "unorderedList"].filter(
|
|
16324
16470
|
(type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
|
|
16325
16471
|
)
|
|
16326
16472
|
);
|
|
16327
16473
|
}, [activeElement, enabledBuiltInElements]);
|
|
16328
|
-
const quoteElementVisible = (0,
|
|
16474
|
+
const quoteElementVisible = (0, import_react156.useMemo)(() => {
|
|
16329
16475
|
return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
|
|
16330
16476
|
}, [activeElement, enabledBuiltInElements]);
|
|
16331
|
-
const codeElementVisible = (0,
|
|
16477
|
+
const codeElementVisible = (0, import_react156.useMemo)(() => {
|
|
16332
16478
|
return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
|
|
16333
16479
|
}, [activeElement, enabledBuiltInElements]);
|
|
16334
|
-
const tableElementVisible = (0,
|
|
16480
|
+
const tableElementVisible = (0, import_react156.useMemo)(() => {
|
|
16335
16481
|
return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
|
|
16336
16482
|
}, [activeElement, enabledBuiltInElements]);
|
|
16337
|
-
const assetElementVisible = (0,
|
|
16483
|
+
const assetElementVisible = (0, import_react156.useMemo)(() => {
|
|
16338
16484
|
return enabledBuiltInElements.some((element) => element.type === "asset") || activeElement === "asset";
|
|
16339
16485
|
}, [activeElement, enabledBuiltInElements]);
|
|
16340
|
-
const visibleElementsWithIcons = (0,
|
|
16486
|
+
const visibleElementsWithIcons = (0, import_react156.useMemo)(() => {
|
|
16341
16487
|
const visibleElements = /* @__PURE__ */ new Set();
|
|
16342
16488
|
if (linkElementVisible) {
|
|
16343
16489
|
visibleElements.add("link");
|
|
@@ -16349,7 +16495,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
16349
16495
|
}
|
|
16350
16496
|
return visibleElements;
|
|
16351
16497
|
}, [linkElementVisible, visibleLists]);
|
|
16352
|
-
const visibleInsertElementsWithIcons = (0,
|
|
16498
|
+
const visibleInsertElementsWithIcons = (0, import_react156.useMemo)(() => {
|
|
16353
16499
|
const visibleElements = /* @__PURE__ */ new Set();
|
|
16354
16500
|
if (quoteElementVisible) {
|
|
16355
16501
|
visibleElements.add("quote");
|
|
@@ -16387,8 +16533,8 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
16387
16533
|
};
|
|
16388
16534
|
|
|
16389
16535
|
// src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
|
|
16390
|
-
var
|
|
16391
|
-
var toolbar =
|
|
16536
|
+
var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
|
|
16537
|
+
var toolbar = import_react157.css`
|
|
16392
16538
|
${scrollbarStyles}
|
|
16393
16539
|
background: var(--gray-50);
|
|
16394
16540
|
border-radius: var(--rounded-base);
|
|
@@ -16402,7 +16548,7 @@ var toolbar = import_react155.css`
|
|
|
16402
16548
|
top: calc(var(--spacing-sm) * -2);
|
|
16403
16549
|
z-index: 10;
|
|
16404
16550
|
`;
|
|
16405
|
-
var toolbarGroup =
|
|
16551
|
+
var toolbarGroup = import_react157.css`
|
|
16406
16552
|
display: flex;
|
|
16407
16553
|
flex-shrink: 0;
|
|
16408
16554
|
gap: var(--spacing-xs);
|
|
@@ -16419,7 +16565,7 @@ var toolbarGroup = import_react155.css`
|
|
|
16419
16565
|
width: 1px;
|
|
16420
16566
|
}
|
|
16421
16567
|
`;
|
|
16422
|
-
var richTextToolbarButton =
|
|
16568
|
+
var richTextToolbarButton = import_react157.css`
|
|
16423
16569
|
align-items: center;
|
|
16424
16570
|
appearance: none;
|
|
16425
16571
|
border: 0;
|
|
@@ -16433,21 +16579,21 @@ var richTextToolbarButton = import_react155.css`
|
|
|
16433
16579
|
min-width: 32px;
|
|
16434
16580
|
padding: 0 var(--spacing-sm);
|
|
16435
16581
|
`;
|
|
16436
|
-
var richTextToolbarButtonActive =
|
|
16582
|
+
var richTextToolbarButtonActive = import_react157.css`
|
|
16437
16583
|
background: var(--gray-200);
|
|
16438
16584
|
`;
|
|
16439
|
-
var textStyleButton =
|
|
16585
|
+
var textStyleButton = import_react157.css`
|
|
16440
16586
|
justify-content: space-between;
|
|
16441
16587
|
min-width: 7rem;
|
|
16442
16588
|
`;
|
|
16443
|
-
var toolbarIcon =
|
|
16589
|
+
var toolbarIcon = import_react157.css`
|
|
16444
16590
|
color: inherit;
|
|
16445
16591
|
`;
|
|
16446
|
-
var toolbarChevron =
|
|
16592
|
+
var toolbarChevron = import_react157.css`
|
|
16447
16593
|
margin-left: var(--spacing-xs);
|
|
16448
16594
|
`;
|
|
16449
16595
|
var RichTextToolbarIcon = ({ icon }) => {
|
|
16450
|
-
return /* @__PURE__ */ (0,
|
|
16596
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon, css: toolbarIcon, size: "1rem" });
|
|
16451
16597
|
};
|
|
16452
16598
|
var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset }) => {
|
|
16453
16599
|
const [editor] = (0, import_LexicalComposerContext8.useLexicalComposerContext)();
|
|
@@ -16503,7 +16649,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
16503
16649
|
});
|
|
16504
16650
|
});
|
|
16505
16651
|
};
|
|
16506
|
-
const updateToolbar = (0,
|
|
16652
|
+
const updateToolbar = (0, import_react158.useCallback)(() => {
|
|
16507
16653
|
const selection = (0, import_lexical9.$getSelection)();
|
|
16508
16654
|
if (!(0, import_lexical9.$isRangeSelection)(selection)) {
|
|
16509
16655
|
return;
|
|
@@ -16542,7 +16688,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
16542
16688
|
setIsLink(false);
|
|
16543
16689
|
}
|
|
16544
16690
|
}, [editor, setActiveElement, setActiveFormats, setIsLink]);
|
|
16545
|
-
(0,
|
|
16691
|
+
(0, import_react158.useEffect)(() => {
|
|
16546
16692
|
return editor.registerCommand(
|
|
16547
16693
|
import_lexical9.SELECTION_CHANGE_COMMAND,
|
|
16548
16694
|
(_payload) => {
|
|
@@ -16552,7 +16698,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
16552
16698
|
import_lexical9.COMMAND_PRIORITY_CRITICAL
|
|
16553
16699
|
);
|
|
16554
16700
|
}, [editor, updateToolbar]);
|
|
16555
|
-
(0,
|
|
16701
|
+
(0, import_react158.useEffect)(() => {
|
|
16556
16702
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
16557
16703
|
requestAnimationFrame(() => {
|
|
16558
16704
|
editorState.read(() => {
|
|
@@ -16561,14 +16707,14 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
16561
16707
|
});
|
|
16562
16708
|
});
|
|
16563
16709
|
}, [editor, updateToolbar]);
|
|
16564
|
-
return /* @__PURE__ */ (0,
|
|
16565
|
-
/* @__PURE__ */ (0,
|
|
16710
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: toolbar, "data-testid": "rich-text-toolbar", children: [
|
|
16711
|
+
/* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
|
|
16566
16712
|
Menu,
|
|
16567
16713
|
{
|
|
16568
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
16714
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", type: "button", children: [
|
|
16569
16715
|
visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
|
|
16570
16716
|
" ",
|
|
16571
|
-
/* @__PURE__ */ (0,
|
|
16717
|
+
/* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
16572
16718
|
] }),
|
|
16573
16719
|
placement: "bottom-start",
|
|
16574
16720
|
children: [
|
|
@@ -16578,7 +16724,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
16578
16724
|
type: "paragraph"
|
|
16579
16725
|
},
|
|
16580
16726
|
...visibleTextualElements
|
|
16581
|
-
].map((element) => /* @__PURE__ */ (0,
|
|
16727
|
+
].map((element) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
16582
16728
|
MenuItem,
|
|
16583
16729
|
{
|
|
16584
16730
|
"data-testid": "menu-item",
|
|
@@ -16589,12 +16735,12 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
16589
16735
|
},
|
|
16590
16736
|
element.type
|
|
16591
16737
|
)),
|
|
16592
|
-
visibleTextualElements.length === 0 ? /* @__PURE__ */ (0,
|
|
16738
|
+
visibleTextualElements.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
|
|
16593
16739
|
]
|
|
16594
16740
|
}
|
|
16595
16741
|
),
|
|
16596
|
-
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0,
|
|
16597
|
-
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0,
|
|
16742
|
+
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-formatting", children: [
|
|
16743
|
+
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
16598
16744
|
"button",
|
|
16599
16745
|
{
|
|
16600
16746
|
"data-testid": `formatting-button-${format.type}`,
|
|
@@ -16606,15 +16752,15 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
16606
16752
|
richTextToolbarButton,
|
|
16607
16753
|
activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
|
|
16608
16754
|
],
|
|
16609
|
-
children: /* @__PURE__ */ (0,
|
|
16755
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
|
|
16610
16756
|
}
|
|
16611
16757
|
) }, format.type)),
|
|
16612
|
-
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0,
|
|
16758
|
+
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
16613
16759
|
Menu,
|
|
16614
16760
|
{
|
|
16615
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
16761
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("button", { css: richTextToolbarButton, title: "Alternative text styles", type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
|
|
16616
16762
|
placement: "bottom-start",
|
|
16617
|
-
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0,
|
|
16763
|
+
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
16618
16764
|
MenuItem,
|
|
16619
16765
|
{
|
|
16620
16766
|
onClick: () => {
|
|
@@ -16627,8 +16773,8 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
16627
16773
|
}
|
|
16628
16774
|
) : null
|
|
16629
16775
|
] }) : null,
|
|
16630
|
-
visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ (0,
|
|
16631
|
-
linkElementVisible ? /* @__PURE__ */ (0,
|
|
16776
|
+
visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-elements", children: [
|
|
16777
|
+
linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
16632
16778
|
"button",
|
|
16633
16779
|
{
|
|
16634
16780
|
"data-testid": "element-link",
|
|
@@ -16641,11 +16787,11 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
16641
16787
|
}
|
|
16642
16788
|
},
|
|
16643
16789
|
css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
|
|
16644
|
-
children: /* @__PURE__ */ (0,
|
|
16790
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "link" })
|
|
16645
16791
|
}
|
|
16646
16792
|
) }) : null,
|
|
16647
|
-
visibleLists.size > 0 ? /* @__PURE__ */ (0,
|
|
16648
|
-
visibleLists.has("unorderedList") ? /* @__PURE__ */ (0,
|
|
16793
|
+
visibleLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
|
|
16794
|
+
visibleLists.has("unorderedList") ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
16649
16795
|
"button",
|
|
16650
16796
|
{
|
|
16651
16797
|
"data-testid": "element-unordered-list",
|
|
@@ -16661,10 +16807,10 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
16661
16807
|
richTextToolbarButton,
|
|
16662
16808
|
activeElement === "unorderedList" ? richTextToolbarButtonActive : null
|
|
16663
16809
|
],
|
|
16664
|
-
children: /* @__PURE__ */ (0,
|
|
16810
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "layout-list" })
|
|
16665
16811
|
}
|
|
16666
16812
|
) }) : null,
|
|
16667
|
-
visibleLists.has("orderedList") ? /* @__PURE__ */ (0,
|
|
16813
|
+
visibleLists.has("orderedList") ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
16668
16814
|
"button",
|
|
16669
16815
|
{
|
|
16670
16816
|
"data-testid": "element-ordered-list",
|
|
@@ -16680,58 +16826,58 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
16680
16826
|
richTextToolbarButton,
|
|
16681
16827
|
activeElement === "orderedList" ? richTextToolbarButtonActive : null
|
|
16682
16828
|
],
|
|
16683
|
-
children: /* @__PURE__ */ (0,
|
|
16829
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(RichTextToolbarIcon, { icon: "layout-list-numbered" })
|
|
16684
16830
|
}
|
|
16685
16831
|
) }) : null
|
|
16686
16832
|
] }) : null,
|
|
16687
16833
|
customControls ? customControls : null
|
|
16688
16834
|
] }) : null,
|
|
16689
|
-
visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ (0,
|
|
16835
|
+
visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-insert", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
|
|
16690
16836
|
Menu,
|
|
16691
16837
|
{
|
|
16692
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
16838
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("button", { css: richTextToolbarButton, title: "Insert block element", type: "button", children: [
|
|
16693
16839
|
"Insert",
|
|
16694
|
-
/* @__PURE__ */ (0,
|
|
16840
|
+
/* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
16695
16841
|
] }),
|
|
16696
16842
|
placement: "bottom-start",
|
|
16697
16843
|
children: [
|
|
16698
|
-
quoteElementVisible ? /* @__PURE__ */ (0,
|
|
16844
|
+
quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
16699
16845
|
MenuItem,
|
|
16700
16846
|
{
|
|
16701
16847
|
onClick: () => {
|
|
16702
16848
|
onSelectElement("quote");
|
|
16703
16849
|
},
|
|
16704
|
-
icon: /* @__PURE__ */ (0,
|
|
16850
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "quote", iconColor: "currentColor" }),
|
|
16705
16851
|
children: "Quote"
|
|
16706
16852
|
}
|
|
16707
16853
|
) : null,
|
|
16708
|
-
codeElementVisible ? /* @__PURE__ */ (0,
|
|
16854
|
+
codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
16709
16855
|
MenuItem,
|
|
16710
16856
|
{
|
|
16711
16857
|
onClick: () => {
|
|
16712
16858
|
onSelectElement("code");
|
|
16713
16859
|
},
|
|
16714
|
-
icon: /* @__PURE__ */ (0,
|
|
16860
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "code-slash", iconColor: "currentColor" }),
|
|
16715
16861
|
children: "Code"
|
|
16716
16862
|
}
|
|
16717
16863
|
) : null,
|
|
16718
|
-
tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ (0,
|
|
16864
|
+
tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
16719
16865
|
MenuItem,
|
|
16720
16866
|
{
|
|
16721
16867
|
onClick: () => {
|
|
16722
16868
|
onSelectElement("table");
|
|
16723
16869
|
},
|
|
16724
|
-
icon: /* @__PURE__ */ (0,
|
|
16870
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "view-grid", iconColor: "currentColor" }),
|
|
16725
16871
|
children: "Table"
|
|
16726
16872
|
}
|
|
16727
16873
|
) : null,
|
|
16728
|
-
assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */ (0,
|
|
16874
|
+
assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
16729
16875
|
MenuItem,
|
|
16730
16876
|
{
|
|
16731
16877
|
onClick: () => {
|
|
16732
16878
|
onSelectElement("asset");
|
|
16733
16879
|
},
|
|
16734
|
-
icon: /* @__PURE__ */ (0,
|
|
16880
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { icon: "image", iconColor: "currentColor" }),
|
|
16735
16881
|
children: "Asset"
|
|
16736
16882
|
}
|
|
16737
16883
|
) : null
|
|
@@ -16743,7 +16889,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
16743
16889
|
var RichTextToolbar_default = RichTextToolbar;
|
|
16744
16890
|
|
|
16745
16891
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
16746
|
-
var
|
|
16892
|
+
var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
|
|
16747
16893
|
var ParameterRichText = ({
|
|
16748
16894
|
label,
|
|
16749
16895
|
labelLeadingIcon,
|
|
@@ -16757,7 +16903,7 @@ var ParameterRichText = ({
|
|
|
16757
16903
|
children,
|
|
16758
16904
|
...innerProps
|
|
16759
16905
|
}) => {
|
|
16760
|
-
return /* @__PURE__ */ (0,
|
|
16906
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
|
|
16761
16907
|
ParameterShell,
|
|
16762
16908
|
{
|
|
16763
16909
|
"data-testid": "parameter-richtext",
|
|
@@ -16771,13 +16917,13 @@ var ParameterRichText = ({
|
|
|
16771
16917
|
captionTestId,
|
|
16772
16918
|
menuItems,
|
|
16773
16919
|
children: [
|
|
16774
|
-
/* @__PURE__ */ (0,
|
|
16775
|
-
menuItems ? /* @__PURE__ */ (0,
|
|
16920
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ParameterRichTextInner, { ...innerProps, children }),
|
|
16921
|
+
menuItems ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_jsx_runtime131.Fragment, { children: menuItems }) }) : null
|
|
16776
16922
|
]
|
|
16777
16923
|
}
|
|
16778
16924
|
);
|
|
16779
16925
|
};
|
|
16780
|
-
var editorContainerWrapper =
|
|
16926
|
+
var editorContainerWrapper = import_react159.css`
|
|
16781
16927
|
position: relative;
|
|
16782
16928
|
|
|
16783
16929
|
&::before {
|
|
@@ -16793,12 +16939,12 @@ var editorContainerWrapper = import_react157.css`
|
|
|
16793
16939
|
z-index: 2;
|
|
16794
16940
|
}
|
|
16795
16941
|
`;
|
|
16796
|
-
var editorWrapper =
|
|
16942
|
+
var editorWrapper = import_react159.css`
|
|
16797
16943
|
display: flex;
|
|
16798
16944
|
flex-flow: column;
|
|
16799
16945
|
flex-grow: 1;
|
|
16800
16946
|
`;
|
|
16801
|
-
var editorContainer =
|
|
16947
|
+
var editorContainer = import_react159.css`
|
|
16802
16948
|
${scrollbarStyles}
|
|
16803
16949
|
background: var(--white);
|
|
16804
16950
|
border-radius: var(--rounded-sm);
|
|
@@ -16830,7 +16976,7 @@ var editorContainer = import_react157.css`
|
|
|
16830
16976
|
max-height: unset;
|
|
16831
16977
|
}
|
|
16832
16978
|
`;
|
|
16833
|
-
var editorContainerOverflowWrapper =
|
|
16979
|
+
var editorContainerOverflowWrapper = import_react159.css`
|
|
16834
16980
|
overflow: hidden;
|
|
16835
16981
|
pointer-events: none;
|
|
16836
16982
|
|
|
@@ -16838,7 +16984,7 @@ var editorContainerOverflowWrapper = import_react157.css`
|
|
|
16838
16984
|
pointer-events: auto;
|
|
16839
16985
|
}
|
|
16840
16986
|
`;
|
|
16841
|
-
var editorPlaceholder =
|
|
16987
|
+
var editorPlaceholder = import_react159.css`
|
|
16842
16988
|
color: var(--gray-500);
|
|
16843
16989
|
font-style: italic;
|
|
16844
16990
|
/* 1px is added to make sure caret is clearly visible when field is focused
|
|
@@ -16849,7 +16995,7 @@ var editorPlaceholder = import_react157.css`
|
|
|
16849
16995
|
top: calc(1rem + var(--spacing-sm));
|
|
16850
16996
|
user-select: none;
|
|
16851
16997
|
`;
|
|
16852
|
-
var editorInput =
|
|
16998
|
+
var editorInput = import_react159.css`
|
|
16853
16999
|
min-height: 100%;
|
|
16854
17000
|
flex-grow: 1;
|
|
16855
17001
|
|
|
@@ -16922,8 +17068,8 @@ var ParameterRichTextInner = ({
|
|
|
16922
17068
|
},
|
|
16923
17069
|
editable: !richTextProps.readOnly
|
|
16924
17070
|
};
|
|
16925
|
-
return /* @__PURE__ */ (0,
|
|
16926
|
-
/* @__PURE__ */ (0,
|
|
17071
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
|
|
17072
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalComposer.LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(RichText, { ...richTextProps, children }) }) }),
|
|
16927
17073
|
editorFooter ? editorFooter : null
|
|
16928
17074
|
] });
|
|
16929
17075
|
};
|
|
@@ -16953,12 +17099,12 @@ var RichText = ({
|
|
|
16953
17099
|
placeholder
|
|
16954
17100
|
}) => {
|
|
16955
17101
|
const [editor] = (0, import_LexicalComposerContext9.useLexicalComposerContext)();
|
|
16956
|
-
(0,
|
|
17102
|
+
(0, import_react160.useEffect)(() => {
|
|
16957
17103
|
if (onRichTextInit) {
|
|
16958
17104
|
onRichTextInit(editor);
|
|
16959
17105
|
}
|
|
16960
17106
|
}, [editor, onRichTextInit]);
|
|
16961
|
-
(0,
|
|
17107
|
+
(0, import_react160.useEffect)(() => {
|
|
16962
17108
|
const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState, tags }) => {
|
|
16963
17109
|
requestAnimationFrame(() => {
|
|
16964
17110
|
const previousEditorState = prevEditorState.toJSON();
|
|
@@ -16975,23 +17121,23 @@ var RichText = ({
|
|
|
16975
17121
|
removeUpdateListener();
|
|
16976
17122
|
};
|
|
16977
17123
|
}, [editor, onChange]);
|
|
16978
|
-
(0,
|
|
17124
|
+
(0, import_react160.useEffect)(() => {
|
|
16979
17125
|
editor.setEditable(!readOnly);
|
|
16980
17126
|
}, [editor, readOnly]);
|
|
16981
|
-
const [editorContainerRef, setEditorContainerRef] = (0,
|
|
17127
|
+
const [editorContainerRef, setEditorContainerRef] = (0, import_react160.useState)(null);
|
|
16982
17128
|
const onEditorContainerRef = (_editorContainerRef) => {
|
|
16983
17129
|
if (_editorContainerRef !== null) {
|
|
16984
17130
|
setEditorContainerRef(_editorContainerRef);
|
|
16985
17131
|
}
|
|
16986
17132
|
};
|
|
16987
|
-
const [portalContainerRef, setPortalContainerRef] = (0,
|
|
17133
|
+
const [portalContainerRef, setPortalContainerRef] = (0, import_react160.useState)(null);
|
|
16988
17134
|
const onPortalContainerRef = (_portalContainerRef) => {
|
|
16989
17135
|
if (_portalContainerRef !== null) {
|
|
16990
17136
|
setPortalContainerRef(_portalContainerRef);
|
|
16991
17137
|
}
|
|
16992
17138
|
};
|
|
16993
|
-
return /* @__PURE__ */ (0,
|
|
16994
|
-
readOnly || minimalInteractivity ? null : /* @__PURE__ */ (0,
|
|
17139
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
|
|
17140
|
+
readOnly || minimalInteractivity ? null : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
16995
17141
|
RichTextToolbar_default,
|
|
16996
17142
|
{
|
|
16997
17143
|
config,
|
|
@@ -17000,8 +17146,8 @@ var RichText = ({
|
|
|
17000
17146
|
onInsertAsset
|
|
17001
17147
|
}
|
|
17002
17148
|
),
|
|
17003
|
-
/* @__PURE__ */ (0,
|
|
17004
|
-
/* @__PURE__ */ (0,
|
|
17149
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { css: editorContainerWrapper, ref: onPortalContainerRef, children: [
|
|
17150
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
|
|
17005
17151
|
"div",
|
|
17006
17152
|
{
|
|
17007
17153
|
css: editorContainer,
|
|
@@ -17009,33 +17155,33 @@ var RichText = ({
|
|
|
17009
17155
|
ref: onEditorContainerRef,
|
|
17010
17156
|
"data-testid": "value-container",
|
|
17011
17157
|
children: [
|
|
17012
|
-
/* @__PURE__ */ (0,
|
|
17158
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
17013
17159
|
import_LexicalRichTextPlugin.RichTextPlugin,
|
|
17014
17160
|
{
|
|
17015
|
-
contentEditable: /* @__PURE__ */ (0,
|
|
17016
|
-
placeholder: /* @__PURE__ */ (0,
|
|
17161
|
+
contentEditable: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
|
|
17162
|
+
placeholder: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { css: editorPlaceholder, "data-placeholder": true, children: placeholder != null ? placeholder : readOnly ? "empty" : "start editing..." }),
|
|
17017
17163
|
ErrorBoundary: import_LexicalErrorBoundary.default
|
|
17018
17164
|
}
|
|
17019
17165
|
),
|
|
17020
|
-
/* @__PURE__ */ (0,
|
|
17021
|
-
/* @__PURE__ */ (0,
|
|
17022
|
-
/* @__PURE__ */ (0,
|
|
17023
|
-
/* @__PURE__ */ (0,
|
|
17166
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalListPlugin.ListPlugin, {}),
|
|
17167
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ListIndentPlugin, { maxDepth: 4 }),
|
|
17168
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalTablePlugin.TablePlugin, { hasCellMerge: false, hasCellBackgroundColor: false }),
|
|
17169
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { css: editorContainerOverflowWrapper, "data-testid": "table-action-menu-plugin", children: editorContainerRef && portalContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
17024
17170
|
TableActionMenuPlugin,
|
|
17025
17171
|
{
|
|
17026
17172
|
positioningAnchorEl: editorContainerRef,
|
|
17027
17173
|
menuPortalEl: portalContainerRef
|
|
17028
17174
|
}
|
|
17029
17175
|
) : null }),
|
|
17030
|
-
editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0,
|
|
17031
|
-
readOnly ? null : /* @__PURE__ */ (0,
|
|
17032
|
-
/* @__PURE__ */ (0,
|
|
17033
|
-
/* @__PURE__ */ (0,
|
|
17176
|
+
editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TableCellResizerPlugin, { positioningAnchorEl: editorContainerRef }) : null,
|
|
17177
|
+
readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
|
|
17178
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(DisableStylesPlugin, {}),
|
|
17179
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS })
|
|
17034
17180
|
]
|
|
17035
17181
|
}
|
|
17036
17182
|
),
|
|
17037
|
-
/* @__PURE__ */ (0,
|
|
17038
|
-
editorContainerRef ? /* @__PURE__ */ (0,
|
|
17183
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_jsx_runtime131.Fragment, { children }),
|
|
17184
|
+
editorContainerRef ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
17039
17185
|
LinkNodePlugin,
|
|
17040
17186
|
{
|
|
17041
17187
|
onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
|
|
@@ -17046,26 +17192,26 @@ var RichText = ({
|
|
|
17046
17192
|
positioningAnchorEl: editorContainerRef
|
|
17047
17193
|
}
|
|
17048
17194
|
) : null,
|
|
17049
|
-
/* @__PURE__ */ (0,
|
|
17050
|
-
/* @__PURE__ */ (0,
|
|
17195
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TableSelectionPlugin_default, {}),
|
|
17196
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ImprovedAssetSelectionPlugin_default, {})
|
|
17051
17197
|
] })
|
|
17052
17198
|
] });
|
|
17053
17199
|
};
|
|
17054
17200
|
|
|
17055
17201
|
// src/components/ParameterInputs/ParameterSelect.tsx
|
|
17056
17202
|
init_emotion_jsx_shim();
|
|
17057
|
-
var
|
|
17058
|
-
var
|
|
17059
|
-
var ParameterSelect = (0,
|
|
17203
|
+
var import_react161 = require("react");
|
|
17204
|
+
var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
|
|
17205
|
+
var ParameterSelect = (0, import_react161.forwardRef)(
|
|
17060
17206
|
({ defaultOption, options, ...props }, ref) => {
|
|
17061
17207
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
17062
|
-
return /* @__PURE__ */ (0,
|
|
17208
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
|
|
17063
17209
|
}
|
|
17064
17210
|
);
|
|
17065
|
-
var ParameterSelectInner = (0,
|
|
17211
|
+
var ParameterSelectInner = (0, import_react161.forwardRef)(
|
|
17066
17212
|
({ defaultOption, options, ...props }, ref) => {
|
|
17067
17213
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
17068
|
-
return /* @__PURE__ */ (0,
|
|
17214
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
|
|
17069
17215
|
"select",
|
|
17070
17216
|
{
|
|
17071
17217
|
css: [input3, selectInput],
|
|
@@ -17074,10 +17220,10 @@ var ParameterSelectInner = (0, import_react159.forwardRef)(
|
|
|
17074
17220
|
ref,
|
|
17075
17221
|
...props,
|
|
17076
17222
|
children: [
|
|
17077
|
-
defaultOption ? /* @__PURE__ */ (0,
|
|
17223
|
+
defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("option", { value: "", children: defaultOption }) : null,
|
|
17078
17224
|
options.map((option) => {
|
|
17079
17225
|
var _a;
|
|
17080
|
-
return /* @__PURE__ */ (0,
|
|
17226
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
|
|
17081
17227
|
})
|
|
17082
17228
|
]
|
|
17083
17229
|
}
|
|
@@ -17087,15 +17233,15 @@ var ParameterSelectInner = (0, import_react159.forwardRef)(
|
|
|
17087
17233
|
|
|
17088
17234
|
// src/components/ParameterInputs/ParameterTextarea.tsx
|
|
17089
17235
|
init_emotion_jsx_shim();
|
|
17090
|
-
var
|
|
17091
|
-
var
|
|
17092
|
-
var ParameterTextarea = (0,
|
|
17236
|
+
var import_react162 = require("react");
|
|
17237
|
+
var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
|
|
17238
|
+
var ParameterTextarea = (0, import_react162.forwardRef)((props, ref) => {
|
|
17093
17239
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
17094
|
-
return /* @__PURE__ */ (0,
|
|
17240
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
|
|
17095
17241
|
});
|
|
17096
|
-
var ParameterTextareaInner = (0,
|
|
17242
|
+
var ParameterTextareaInner = (0, import_react162.forwardRef)(({ ...props }, ref) => {
|
|
17097
17243
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
17098
|
-
return /* @__PURE__ */ (0,
|
|
17244
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
17099
17245
|
"textarea",
|
|
17100
17246
|
{
|
|
17101
17247
|
css: [input3, textarea2],
|
|
@@ -17109,18 +17255,18 @@ var ParameterTextareaInner = (0, import_react160.forwardRef)(({ ...props }, ref)
|
|
|
17109
17255
|
|
|
17110
17256
|
// src/components/ParameterInputs/ParameterToggle.tsx
|
|
17111
17257
|
init_emotion_jsx_shim();
|
|
17112
|
-
var
|
|
17113
|
-
var
|
|
17114
|
-
var ParameterToggle = (0,
|
|
17258
|
+
var import_react163 = require("react");
|
|
17259
|
+
var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
|
|
17260
|
+
var ParameterToggle = (0, import_react163.forwardRef)((props, ref) => {
|
|
17115
17261
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
17116
|
-
return /* @__PURE__ */ (0,
|
|
17262
|
+
return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
|
|
17117
17263
|
});
|
|
17118
|
-
var ParameterToggleInner = (0,
|
|
17264
|
+
var ParameterToggleInner = (0, import_react163.forwardRef)(
|
|
17119
17265
|
({ children, ...props }, ref) => {
|
|
17120
17266
|
const { id, label } = useParameterShell();
|
|
17121
|
-
return /* @__PURE__ */ (0,
|
|
17122
|
-
/* @__PURE__ */ (0,
|
|
17123
|
-
/* @__PURE__ */ (0,
|
|
17267
|
+
return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("label", { css: inputToggleLabel2, children: [
|
|
17268
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
|
|
17269
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", { css: inlineLabel2, children: label }),
|
|
17124
17270
|
children
|
|
17125
17271
|
] });
|
|
17126
17272
|
}
|
|
@@ -17131,8 +17277,8 @@ init_emotion_jsx_shim();
|
|
|
17131
17277
|
|
|
17132
17278
|
// src/components/ProgressBar/ProgressBar.styles.ts
|
|
17133
17279
|
init_emotion_jsx_shim();
|
|
17134
|
-
var
|
|
17135
|
-
var container3 =
|
|
17280
|
+
var import_react164 = require("@emotion/react");
|
|
17281
|
+
var container3 = import_react164.css`
|
|
17136
17282
|
background: var(--gray-50);
|
|
17137
17283
|
margin-block: var(--spacing-sm);
|
|
17138
17284
|
position: relative;
|
|
@@ -17142,17 +17288,17 @@ var container3 = import_react162.css`
|
|
|
17142
17288
|
border: solid 1px var(--gray-300);
|
|
17143
17289
|
`;
|
|
17144
17290
|
var themeMap = {
|
|
17145
|
-
primary:
|
|
17291
|
+
primary: import_react164.css`
|
|
17146
17292
|
--progress-color: var(--accent-light);
|
|
17147
17293
|
`,
|
|
17148
|
-
secondary:
|
|
17294
|
+
secondary: import_react164.css`
|
|
17149
17295
|
--progress-color: var(--accent-alt-light);
|
|
17150
17296
|
`,
|
|
17151
|
-
destructive:
|
|
17297
|
+
destructive: import_react164.css`
|
|
17152
17298
|
--progress-color: var(--brand-secondary-5);
|
|
17153
17299
|
`
|
|
17154
17300
|
};
|
|
17155
|
-
var slidingBackgroundPosition =
|
|
17301
|
+
var slidingBackgroundPosition = import_react164.keyframes`
|
|
17156
17302
|
from {
|
|
17157
17303
|
background-position: 0 0;
|
|
17158
17304
|
}
|
|
@@ -17160,10 +17306,10 @@ var slidingBackgroundPosition = import_react162.keyframes`
|
|
|
17160
17306
|
background-position: 64px 0;
|
|
17161
17307
|
}
|
|
17162
17308
|
`;
|
|
17163
|
-
var determinate =
|
|
17309
|
+
var determinate = import_react164.css`
|
|
17164
17310
|
background-color: var(--progress-color);
|
|
17165
17311
|
`;
|
|
17166
|
-
var indeterminate =
|
|
17312
|
+
var indeterminate = import_react164.css`
|
|
17167
17313
|
background-image: linear-gradient(
|
|
17168
17314
|
45deg,
|
|
17169
17315
|
var(--progress-color) 25%,
|
|
@@ -17177,7 +17323,7 @@ var indeterminate = import_react162.css`
|
|
|
17177
17323
|
background-size: 64px 64px;
|
|
17178
17324
|
animation: ${slidingBackgroundPosition} 1s linear infinite;
|
|
17179
17325
|
`;
|
|
17180
|
-
var bar =
|
|
17326
|
+
var bar = import_react164.css`
|
|
17181
17327
|
position: absolute;
|
|
17182
17328
|
inset: 0;
|
|
17183
17329
|
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
@@ -17185,7 +17331,7 @@ var bar = import_react162.css`
|
|
|
17185
17331
|
`;
|
|
17186
17332
|
|
|
17187
17333
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
17188
|
-
var
|
|
17334
|
+
var import_jsx_runtime135 = require("@emotion/react/jsx-runtime");
|
|
17189
17335
|
function ProgressBar({
|
|
17190
17336
|
current,
|
|
17191
17337
|
max,
|
|
@@ -17195,7 +17341,7 @@ function ProgressBar({
|
|
|
17195
17341
|
}) {
|
|
17196
17342
|
const valueNow = Math.min(current, max);
|
|
17197
17343
|
const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
|
|
17198
|
-
return /* @__PURE__ */ (0,
|
|
17344
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
|
|
17199
17345
|
"div",
|
|
17200
17346
|
{
|
|
17201
17347
|
css: container3,
|
|
@@ -17206,7 +17352,7 @@ function ProgressBar({
|
|
|
17206
17352
|
"aria-valuemax": max,
|
|
17207
17353
|
"aria-valuenow": valueNow,
|
|
17208
17354
|
...props,
|
|
17209
|
-
children: /* @__PURE__ */ (0,
|
|
17355
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
|
|
17210
17356
|
"div",
|
|
17211
17357
|
{
|
|
17212
17358
|
css: [
|
|
@@ -17226,31 +17372,31 @@ function ProgressBar({
|
|
|
17226
17372
|
|
|
17227
17373
|
// src/components/ProgressList/ProgressList.tsx
|
|
17228
17374
|
init_emotion_jsx_shim();
|
|
17229
|
-
var
|
|
17375
|
+
var import_react166 = require("@emotion/react");
|
|
17230
17376
|
var import_CgCheckO3 = require("@react-icons/all-files/cg/CgCheckO");
|
|
17231
17377
|
var import_CgRadioCheck2 = require("@react-icons/all-files/cg/CgRadioCheck");
|
|
17232
17378
|
var import_CgRecord2 = require("@react-icons/all-files/cg/CgRecord");
|
|
17233
|
-
var
|
|
17379
|
+
var import_react167 = require("react");
|
|
17234
17380
|
|
|
17235
17381
|
// src/components/ProgressList/styles/ProgressList.styles.ts
|
|
17236
17382
|
init_emotion_jsx_shim();
|
|
17237
|
-
var
|
|
17238
|
-
var progressListStyles =
|
|
17383
|
+
var import_react165 = require("@emotion/react");
|
|
17384
|
+
var progressListStyles = import_react165.css`
|
|
17239
17385
|
display: flex;
|
|
17240
17386
|
flex-direction: column;
|
|
17241
17387
|
gap: var(--spacing-sm);
|
|
17242
17388
|
list-style-type: none;
|
|
17243
17389
|
`;
|
|
17244
|
-
var progressListItemStyles =
|
|
17390
|
+
var progressListItemStyles = import_react165.css`
|
|
17245
17391
|
display: flex;
|
|
17246
17392
|
gap: var(--spacing-base);
|
|
17247
17393
|
align-items: center;
|
|
17248
17394
|
`;
|
|
17249
17395
|
|
|
17250
17396
|
// src/components/ProgressList/ProgressList.tsx
|
|
17251
|
-
var
|
|
17397
|
+
var import_jsx_runtime136 = require("@emotion/react/jsx-runtime");
|
|
17252
17398
|
var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
17253
|
-
const itemsWithStatus = (0,
|
|
17399
|
+
const itemsWithStatus = (0, import_react167.useMemo)(() => {
|
|
17254
17400
|
const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
|
|
17255
17401
|
return items.map((item, index) => {
|
|
17256
17402
|
let status = "queued";
|
|
@@ -17262,8 +17408,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
|
17262
17408
|
return { ...item, status };
|
|
17263
17409
|
});
|
|
17264
17410
|
}, [items, inProgressId]);
|
|
17265
|
-
return /* @__PURE__ */ (0,
|
|
17266
|
-
return /* @__PURE__ */ (0,
|
|
17411
|
+
return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
|
|
17412
|
+
return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
|
|
17267
17413
|
ProgressListItem,
|
|
17268
17414
|
{
|
|
17269
17415
|
status,
|
|
@@ -17283,7 +17429,7 @@ var ProgressListItem = ({
|
|
|
17283
17429
|
errorLevel = "danger",
|
|
17284
17430
|
autoEllipsis = false
|
|
17285
17431
|
}) => {
|
|
17286
|
-
const icon = (0,
|
|
17432
|
+
const icon = (0, import_react167.useMemo)(() => {
|
|
17287
17433
|
if (error) {
|
|
17288
17434
|
return warningIcon;
|
|
17289
17435
|
}
|
|
@@ -17294,14 +17440,14 @@ var ProgressListItem = ({
|
|
|
17294
17440
|
};
|
|
17295
17441
|
return iconPerStatus[status];
|
|
17296
17442
|
}, [status, error]);
|
|
17297
|
-
const statusStyles = (0,
|
|
17443
|
+
const statusStyles = (0, import_react167.useMemo)(() => {
|
|
17298
17444
|
if (error) {
|
|
17299
|
-
return errorLevel === "caution" ?
|
|
17445
|
+
return errorLevel === "caution" ? import_react166.css`
|
|
17300
17446
|
color: rgb(161, 98, 7);
|
|
17301
17447
|
& svg {
|
|
17302
17448
|
color: rgb(250, 204, 21);
|
|
17303
17449
|
}
|
|
17304
|
-
` :
|
|
17450
|
+
` : import_react166.css`
|
|
17305
17451
|
color: rgb(185, 28, 28);
|
|
17306
17452
|
& svg {
|
|
17307
17453
|
color: var(--brand-primary-2);
|
|
@@ -17309,40 +17455,40 @@ var ProgressListItem = ({
|
|
|
17309
17455
|
`;
|
|
17310
17456
|
}
|
|
17311
17457
|
const colorPerStatus = {
|
|
17312
|
-
completed:
|
|
17458
|
+
completed: import_react166.css`
|
|
17313
17459
|
opacity: 0.75;
|
|
17314
17460
|
`,
|
|
17315
|
-
inProgress:
|
|
17461
|
+
inProgress: import_react166.css`
|
|
17316
17462
|
-webkit-text-stroke-width: thin;
|
|
17317
17463
|
`,
|
|
17318
|
-
queued:
|
|
17464
|
+
queued: import_react166.css`
|
|
17319
17465
|
opacity: 0.5;
|
|
17320
17466
|
`
|
|
17321
17467
|
};
|
|
17322
17468
|
return colorPerStatus[status];
|
|
17323
17469
|
}, [status, error, errorLevel]);
|
|
17324
|
-
return /* @__PURE__ */ (0,
|
|
17325
|
-
/* @__PURE__ */ (0,
|
|
17326
|
-
/* @__PURE__ */ (0,
|
|
17470
|
+
return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
|
|
17471
|
+
/* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
|
|
17472
|
+
/* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { children: [
|
|
17327
17473
|
children,
|
|
17328
|
-
/* @__PURE__ */ (0,
|
|
17474
|
+
/* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
|
|
17329
17475
|
] })
|
|
17330
17476
|
] });
|
|
17331
17477
|
};
|
|
17332
17478
|
|
|
17333
17479
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
17334
17480
|
init_emotion_jsx_shim();
|
|
17335
|
-
var
|
|
17481
|
+
var import_react169 = require("@emotion/react");
|
|
17336
17482
|
var import_CgCheck6 = require("@react-icons/all-files/cg/CgCheck");
|
|
17337
|
-
var
|
|
17483
|
+
var import_react170 = require("react");
|
|
17338
17484
|
|
|
17339
17485
|
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
17340
17486
|
init_emotion_jsx_shim();
|
|
17341
|
-
var
|
|
17342
|
-
var segmentedControlRootStyles =
|
|
17487
|
+
var import_react168 = require("@emotion/react");
|
|
17488
|
+
var segmentedControlRootStyles = import_react168.css`
|
|
17343
17489
|
position: relative;
|
|
17344
17490
|
`;
|
|
17345
|
-
var segmentedControlScrollIndicatorsStyles =
|
|
17491
|
+
var segmentedControlScrollIndicatorsStyles = import_react168.css`
|
|
17346
17492
|
position: absolute;
|
|
17347
17493
|
inset: 0;
|
|
17348
17494
|
z-index: 1;
|
|
@@ -17370,17 +17516,17 @@ var segmentedControlScrollIndicatorsStyles = import_react166.css`
|
|
|
17370
17516
|
background: linear-gradient(to left, var(--background-color) 10%, transparent);
|
|
17371
17517
|
}
|
|
17372
17518
|
`;
|
|
17373
|
-
var segmentedControlScrollIndicatorStartVisibleStyles =
|
|
17519
|
+
var segmentedControlScrollIndicatorStartVisibleStyles = import_react168.css`
|
|
17374
17520
|
&::before {
|
|
17375
17521
|
opacity: 1;
|
|
17376
17522
|
}
|
|
17377
17523
|
`;
|
|
17378
|
-
var segmentedControlScrollIndicatorEndVisibleStyles =
|
|
17524
|
+
var segmentedControlScrollIndicatorEndVisibleStyles = import_react168.css`
|
|
17379
17525
|
&::after {
|
|
17380
17526
|
opacity: 1;
|
|
17381
17527
|
}
|
|
17382
17528
|
`;
|
|
17383
|
-
var segmentedControlWrapperStyles =
|
|
17529
|
+
var segmentedControlWrapperStyles = import_react168.css`
|
|
17384
17530
|
overflow-y: auto;
|
|
17385
17531
|
scroll-behavior: smooth;
|
|
17386
17532
|
scrollbar-width: none;
|
|
@@ -17389,7 +17535,7 @@ var segmentedControlWrapperStyles = import_react166.css`
|
|
|
17389
17535
|
height: 0px;
|
|
17390
17536
|
}
|
|
17391
17537
|
`;
|
|
17392
|
-
var segmentedControlStyles =
|
|
17538
|
+
var segmentedControlStyles = import_react168.css`
|
|
17393
17539
|
--segmented-control-rounded-value: var(--rounded-base);
|
|
17394
17540
|
--segmented-control-border-width: 1px;
|
|
17395
17541
|
--segmented-control-selected-color: var(--brand-secondary-3);
|
|
@@ -17408,14 +17554,14 @@ var segmentedControlStyles = import_react166.css`
|
|
|
17408
17554
|
border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
|
|
17409
17555
|
font-size: var(--fs-xs);
|
|
17410
17556
|
`;
|
|
17411
|
-
var segmentedControlVerticalStyles =
|
|
17557
|
+
var segmentedControlVerticalStyles = import_react168.css`
|
|
17412
17558
|
flex-direction: column;
|
|
17413
17559
|
--segmented-control-first-border-radius: var(--segmented-control-rounded-value)
|
|
17414
17560
|
var(--segmented-control-rounded-value) 0 0;
|
|
17415
17561
|
--segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
|
|
17416
17562
|
var(--segmented-control-rounded-value);
|
|
17417
17563
|
`;
|
|
17418
|
-
var segmentedControlItemStyles =
|
|
17564
|
+
var segmentedControlItemStyles = import_react168.css`
|
|
17419
17565
|
&:first-of-type label {
|
|
17420
17566
|
border-radius: var(--segmented-control-first-border-radius);
|
|
17421
17567
|
}
|
|
@@ -17423,10 +17569,10 @@ var segmentedControlItemStyles = import_react166.css`
|
|
|
17423
17569
|
border-radius: var(--segmented-control-last-border-radius);
|
|
17424
17570
|
}
|
|
17425
17571
|
`;
|
|
17426
|
-
var segmentedControlInputStyles =
|
|
17572
|
+
var segmentedControlInputStyles = import_react168.css`
|
|
17427
17573
|
${accessibleHidden}
|
|
17428
17574
|
`;
|
|
17429
|
-
var segmentedControlLabelStyles = (checked, disabled2) =>
|
|
17575
|
+
var segmentedControlLabelStyles = (checked, disabled2) => import_react168.css`
|
|
17430
17576
|
position: relative;
|
|
17431
17577
|
display: flex;
|
|
17432
17578
|
align-items: center;
|
|
@@ -17490,25 +17636,25 @@ var segmentedControlLabelStyles = (checked, disabled2) => import_react166.css`
|
|
|
17490
17636
|
`}
|
|
17491
17637
|
}
|
|
17492
17638
|
`;
|
|
17493
|
-
var segmentedControlLabelIconOnlyStyles =
|
|
17639
|
+
var segmentedControlLabelIconOnlyStyles = import_react168.css`
|
|
17494
17640
|
padding-inline: 0.5em;
|
|
17495
17641
|
`;
|
|
17496
|
-
var segmentedControlLabelCheckStyles =
|
|
17642
|
+
var segmentedControlLabelCheckStyles = import_react168.css`
|
|
17497
17643
|
opacity: 0.5;
|
|
17498
17644
|
`;
|
|
17499
|
-
var segmentedControlLabelContentStyles =
|
|
17645
|
+
var segmentedControlLabelContentStyles = import_react168.css`
|
|
17500
17646
|
display: flex;
|
|
17501
17647
|
align-items: center;
|
|
17502
17648
|
justify-content: center;
|
|
17503
17649
|
gap: var(--spacing-sm);
|
|
17504
17650
|
height: 100%;
|
|
17505
17651
|
`;
|
|
17506
|
-
var segmentedControlLabelTextStyles =
|
|
17652
|
+
var segmentedControlLabelTextStyles = import_react168.css`
|
|
17507
17653
|
white-space: nowrap;
|
|
17508
17654
|
`;
|
|
17509
17655
|
|
|
17510
17656
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
17511
|
-
var
|
|
17657
|
+
var import_jsx_runtime137 = require("@emotion/react/jsx-runtime");
|
|
17512
17658
|
var SegmentedControl = ({
|
|
17513
17659
|
name,
|
|
17514
17660
|
options,
|
|
@@ -17523,10 +17669,10 @@ var SegmentedControl = ({
|
|
|
17523
17669
|
currentBackgroundColor = "white",
|
|
17524
17670
|
...props
|
|
17525
17671
|
}) => {
|
|
17526
|
-
const wrapperRef = (0,
|
|
17527
|
-
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0,
|
|
17528
|
-
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0,
|
|
17529
|
-
const onOptionChange = (0,
|
|
17672
|
+
const wrapperRef = (0, import_react170.useRef)(null);
|
|
17673
|
+
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react170.useState)(false);
|
|
17674
|
+
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react170.useState)(false);
|
|
17675
|
+
const onOptionChange = (0, import_react170.useCallback)(
|
|
17530
17676
|
(event) => {
|
|
17531
17677
|
if (event.target.checked) {
|
|
17532
17678
|
onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
|
|
@@ -17534,19 +17680,19 @@ var SegmentedControl = ({
|
|
|
17534
17680
|
},
|
|
17535
17681
|
[options, onChange]
|
|
17536
17682
|
);
|
|
17537
|
-
const sizeStyles = (0,
|
|
17683
|
+
const sizeStyles = (0, import_react170.useMemo)(() => {
|
|
17538
17684
|
const map = {
|
|
17539
|
-
sm: (0,
|
|
17540
|
-
md: (0,
|
|
17541
|
-
lg: (0,
|
|
17542
|
-
xl: (0,
|
|
17685
|
+
sm: (0, import_react169.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
|
|
17686
|
+
md: (0, import_react169.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
|
|
17687
|
+
lg: (0, import_react169.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
|
|
17688
|
+
xl: (0, import_react169.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
|
|
17543
17689
|
};
|
|
17544
17690
|
return map[size];
|
|
17545
17691
|
}, [size]);
|
|
17546
|
-
const isIconOnly = (0,
|
|
17692
|
+
const isIconOnly = (0, import_react170.useMemo)(() => {
|
|
17547
17693
|
return options.every((option) => option && option.icon && !option.label);
|
|
17548
17694
|
}, [options]);
|
|
17549
|
-
(0,
|
|
17695
|
+
(0, import_react170.useEffect)(() => {
|
|
17550
17696
|
const wrapperElement = wrapperRef.current;
|
|
17551
17697
|
const onScroll = () => {
|
|
17552
17698
|
if (!wrapperElement) {
|
|
@@ -17567,8 +17713,8 @@ var SegmentedControl = ({
|
|
|
17567
17713
|
wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
|
|
17568
17714
|
};
|
|
17569
17715
|
}, []);
|
|
17570
|
-
return /* @__PURE__ */ (0,
|
|
17571
|
-
/* @__PURE__ */ (0,
|
|
17716
|
+
return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
|
|
17717
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
17572
17718
|
"div",
|
|
17573
17719
|
{
|
|
17574
17720
|
css: [
|
|
@@ -17585,12 +17731,12 @@ var SegmentedControl = ({
|
|
|
17585
17731
|
const text = option.label ? option.label : option.icon ? null : String(option.value);
|
|
17586
17732
|
const isDisabled = disabled2 || option.disabled;
|
|
17587
17733
|
const isChecked = option.value === value;
|
|
17588
|
-
return /* @__PURE__ */ (0,
|
|
17734
|
+
return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
17589
17735
|
"div",
|
|
17590
17736
|
{
|
|
17591
17737
|
css: segmentedControlItemStyles,
|
|
17592
17738
|
"data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
|
|
17593
|
-
children: /* @__PURE__ */ (0,
|
|
17739
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
|
|
17594
17740
|
"label",
|
|
17595
17741
|
{
|
|
17596
17742
|
css: [
|
|
@@ -17599,7 +17745,7 @@ var SegmentedControl = ({
|
|
|
17599
17745
|
isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
|
|
17600
17746
|
],
|
|
17601
17747
|
children: [
|
|
17602
|
-
/* @__PURE__ */ (0,
|
|
17748
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
17603
17749
|
"input",
|
|
17604
17750
|
{
|
|
17605
17751
|
css: segmentedControlInputStyles,
|
|
@@ -17611,10 +17757,10 @@ var SegmentedControl = ({
|
|
|
17611
17757
|
disabled: isDisabled
|
|
17612
17758
|
}
|
|
17613
17759
|
),
|
|
17614
|
-
option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0,
|
|
17615
|
-
/* @__PURE__ */ (0,
|
|
17616
|
-
!option.icon ? null : /* @__PURE__ */ (0,
|
|
17617
|
-
!text || hideOptionText ? null : /* @__PURE__ */ (0,
|
|
17760
|
+
option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_CgCheck6.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
|
|
17761
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
|
|
17762
|
+
!option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
|
|
17763
|
+
!text || hideOptionText ? null : /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
|
|
17618
17764
|
] })
|
|
17619
17765
|
]
|
|
17620
17766
|
}
|
|
@@ -17624,7 +17770,7 @@ var SegmentedControl = ({
|
|
|
17624
17770
|
})
|
|
17625
17771
|
}
|
|
17626
17772
|
) }),
|
|
17627
|
-
/* @__PURE__ */ (0,
|
|
17773
|
+
/* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
17628
17774
|
"div",
|
|
17629
17775
|
{
|
|
17630
17776
|
css: [
|
|
@@ -17642,18 +17788,18 @@ init_emotion_jsx_shim();
|
|
|
17642
17788
|
|
|
17643
17789
|
// src/components/Skeleton/Skeleton.styles.ts
|
|
17644
17790
|
init_emotion_jsx_shim();
|
|
17645
|
-
var
|
|
17646
|
-
var lightFadingOut =
|
|
17791
|
+
var import_react171 = require("@emotion/react");
|
|
17792
|
+
var lightFadingOut = import_react171.keyframes`
|
|
17647
17793
|
from { opacity: 0.1; }
|
|
17648
17794
|
to { opacity: 0.025; }
|
|
17649
17795
|
`;
|
|
17650
|
-
var skeletonStyles =
|
|
17796
|
+
var skeletonStyles = import_react171.css`
|
|
17651
17797
|
animation: ${lightFadingOut} 1s ease-out infinite alternate;
|
|
17652
17798
|
background-color: var(--gray-900);
|
|
17653
17799
|
`;
|
|
17654
17800
|
|
|
17655
17801
|
// src/components/Skeleton/Skeleton.tsx
|
|
17656
|
-
var
|
|
17802
|
+
var import_jsx_runtime138 = require("@emotion/react/jsx-runtime");
|
|
17657
17803
|
var Skeleton = ({
|
|
17658
17804
|
width = "100%",
|
|
17659
17805
|
height = "1.25rem",
|
|
@@ -17661,7 +17807,7 @@ var Skeleton = ({
|
|
|
17661
17807
|
circle = false,
|
|
17662
17808
|
children,
|
|
17663
17809
|
...otherProps
|
|
17664
|
-
}) => /* @__PURE__ */ (0,
|
|
17810
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
|
|
17665
17811
|
"div",
|
|
17666
17812
|
{
|
|
17667
17813
|
css: [
|
|
@@ -17685,12 +17831,12 @@ init_emotion_jsx_shim();
|
|
|
17685
17831
|
|
|
17686
17832
|
// src/components/Spinner/Spinner.tsx
|
|
17687
17833
|
init_emotion_jsx_shim();
|
|
17688
|
-
var
|
|
17834
|
+
var import_react173 = require("react");
|
|
17689
17835
|
|
|
17690
17836
|
// src/components/Spinner/Spinner.styles.ts
|
|
17691
17837
|
init_emotion_jsx_shim();
|
|
17692
|
-
var
|
|
17693
|
-
var SpinnerStyles =
|
|
17838
|
+
var import_react172 = require("@emotion/react");
|
|
17839
|
+
var SpinnerStyles = import_react172.css`
|
|
17694
17840
|
--color: #00b4ff;
|
|
17695
17841
|
--speed: 5s;
|
|
17696
17842
|
--red: rgb(218, 63, 50);
|
|
@@ -18120,18 +18266,18 @@ var SpinnerStyles = import_react170.css`
|
|
|
18120
18266
|
`;
|
|
18121
18267
|
|
|
18122
18268
|
// src/components/Spinner/Spinner.tsx
|
|
18123
|
-
var
|
|
18269
|
+
var import_jsx_runtime139 = require("@emotion/react/jsx-runtime");
|
|
18124
18270
|
var Spinner = ({
|
|
18125
18271
|
width,
|
|
18126
18272
|
label,
|
|
18127
18273
|
isPaused
|
|
18128
18274
|
}) => {
|
|
18129
|
-
const ref = (0,
|
|
18130
|
-
(0,
|
|
18275
|
+
const ref = (0, import_react173.useRef)(null);
|
|
18276
|
+
(0, import_react173.useEffect)(() => {
|
|
18131
18277
|
var _a, _b, _c;
|
|
18132
18278
|
(_c = ref.current) == null ? void 0 : _c.style.setProperty("--pyramid-size", ((_b = (_a = ref.current) == null ? void 0 : _a.clientWidth) != null ? _b : 200) / 6 + "px");
|
|
18133
18279
|
}, [width]);
|
|
18134
|
-
return /* @__PURE__ */ (0,
|
|
18280
|
+
return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
|
|
18135
18281
|
"div",
|
|
18136
18282
|
{
|
|
18137
18283
|
ref,
|
|
@@ -18143,51 +18289,51 @@ var Spinner = ({
|
|
|
18143
18289
|
css: SpinnerStyles,
|
|
18144
18290
|
className: `container${isPaused ? " paused" : ""}`,
|
|
18145
18291
|
children: [
|
|
18146
|
-
/* @__PURE__ */ (0,
|
|
18147
|
-
/* @__PURE__ */ (0,
|
|
18148
|
-
/* @__PURE__ */ (0,
|
|
18149
|
-
/* @__PURE__ */ (0,
|
|
18150
|
-
/* @__PURE__ */ (0,
|
|
18151
|
-
/* @__PURE__ */ (0,
|
|
18152
|
-
/* @__PURE__ */ (0,
|
|
18153
|
-
/* @__PURE__ */ (0,
|
|
18154
|
-
/* @__PURE__ */ (0,
|
|
18155
|
-
/* @__PURE__ */ (0,
|
|
18292
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "pyramid-container", children: /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "pyramid top", children: [
|
|
18293
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "side one" }),
|
|
18294
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "side two" }),
|
|
18295
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "side three" }),
|
|
18296
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "side four" }),
|
|
18297
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "bottom-pyramid", children: [
|
|
18298
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "side five" }),
|
|
18299
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "side six" }),
|
|
18300
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "side seven" }),
|
|
18301
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "side eight" })
|
|
18156
18302
|
] })
|
|
18157
18303
|
] }) }),
|
|
18158
|
-
/* @__PURE__ */ (0,
|
|
18159
|
-
/* @__PURE__ */ (0,
|
|
18160
|
-
/* @__PURE__ */ (0,
|
|
18161
|
-
/* @__PURE__ */ (0,
|
|
18162
|
-
/* @__PURE__ */ (0,
|
|
18163
|
-
/* @__PURE__ */ (0,
|
|
18164
|
-
/* @__PURE__ */ (0,
|
|
18304
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "turning-circle" }),
|
|
18305
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "pulsating-star delay-top-right", children: [
|
|
18306
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-center" }),
|
|
18307
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-top" }),
|
|
18308
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-bottom" }),
|
|
18309
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-left" }),
|
|
18310
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-right" })
|
|
18165
18311
|
] }),
|
|
18166
|
-
/* @__PURE__ */ (0,
|
|
18167
|
-
/* @__PURE__ */ (0,
|
|
18168
|
-
/* @__PURE__ */ (0,
|
|
18169
|
-
/* @__PURE__ */ (0,
|
|
18170
|
-
/* @__PURE__ */ (0,
|
|
18171
|
-
/* @__PURE__ */ (0,
|
|
18312
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "pulsating-star delay-top-left-2", children: [
|
|
18313
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-center" }),
|
|
18314
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-top" }),
|
|
18315
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-bottom" }),
|
|
18316
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-left" }),
|
|
18317
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-right" })
|
|
18172
18318
|
] }),
|
|
18173
|
-
/* @__PURE__ */ (0,
|
|
18174
|
-
/* @__PURE__ */ (0,
|
|
18175
|
-
/* @__PURE__ */ (0,
|
|
18176
|
-
/* @__PURE__ */ (0,
|
|
18177
|
-
/* @__PURE__ */ (0,
|
|
18319
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "pulsating-star delay-top-left", children: [
|
|
18320
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-top" }),
|
|
18321
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-bottom" }),
|
|
18322
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-left" }),
|
|
18323
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-right" })
|
|
18178
18324
|
] }),
|
|
18179
|
-
/* @__PURE__ */ (0,
|
|
18180
|
-
/* @__PURE__ */ (0,
|
|
18181
|
-
/* @__PURE__ */ (0,
|
|
18182
|
-
/* @__PURE__ */ (0,
|
|
18183
|
-
/* @__PURE__ */ (0,
|
|
18325
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "pulsating-star delay-bottom-right", children: [
|
|
18326
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-top" }),
|
|
18327
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-bottom" }),
|
|
18328
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-left" }),
|
|
18329
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-right" })
|
|
18184
18330
|
] }),
|
|
18185
|
-
/* @__PURE__ */ (0,
|
|
18186
|
-
/* @__PURE__ */ (0,
|
|
18187
|
-
/* @__PURE__ */ (0,
|
|
18188
|
-
/* @__PURE__ */ (0,
|
|
18189
|
-
/* @__PURE__ */ (0,
|
|
18190
|
-
/* @__PURE__ */ (0,
|
|
18331
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("div", { className: "pulsating-star delay-bottom-left", children: [
|
|
18332
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-center" }),
|
|
18333
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-top" }),
|
|
18334
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-bottom" }),
|
|
18335
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-left" }),
|
|
18336
|
+
/* @__PURE__ */ (0, import_jsx_runtime139.jsx)("div", { className: "star-inner star-right" })
|
|
18191
18337
|
] })
|
|
18192
18338
|
]
|
|
18193
18339
|
}
|
|
@@ -18196,12 +18342,12 @@ var Spinner = ({
|
|
|
18196
18342
|
|
|
18197
18343
|
// src/components/Switch/Switch.tsx
|
|
18198
18344
|
init_emotion_jsx_shim();
|
|
18199
|
-
var
|
|
18345
|
+
var import_react175 = require("react");
|
|
18200
18346
|
|
|
18201
18347
|
// src/components/Switch/Switch.styles.ts
|
|
18202
18348
|
init_emotion_jsx_shim();
|
|
18203
|
-
var
|
|
18204
|
-
var SwitchInputContainer =
|
|
18349
|
+
var import_react174 = require("@emotion/react");
|
|
18350
|
+
var SwitchInputContainer = import_react174.css`
|
|
18205
18351
|
cursor: pointer;
|
|
18206
18352
|
display: inline-flex;
|
|
18207
18353
|
position: relative;
|
|
@@ -18211,7 +18357,7 @@ var SwitchInputContainer = import_react172.css`
|
|
|
18211
18357
|
user-select: none;
|
|
18212
18358
|
z-index: 0;
|
|
18213
18359
|
`;
|
|
18214
|
-
var SwitchInput = (size) =>
|
|
18360
|
+
var SwitchInput = (size) => import_react174.css`
|
|
18215
18361
|
appearance: none;
|
|
18216
18362
|
border-radius: var(--rounded-full);
|
|
18217
18363
|
background-color: var(--white);
|
|
@@ -18250,18 +18396,18 @@ var SwitchInput = (size) => import_react172.css`
|
|
|
18250
18396
|
cursor: not-allowed;
|
|
18251
18397
|
}
|
|
18252
18398
|
`;
|
|
18253
|
-
var SwitchInputCheckedDirectionLeft =
|
|
18399
|
+
var SwitchInputCheckedDirectionLeft = import_react174.css`
|
|
18254
18400
|
&:checked {
|
|
18255
18401
|
transform: translateX(var(--spacing-base));
|
|
18256
18402
|
}
|
|
18257
18403
|
`;
|
|
18258
|
-
var SwitchInputCheckedDirectionRight =
|
|
18404
|
+
var SwitchInputCheckedDirectionRight = import_react174.css`
|
|
18259
18405
|
transform: translateX(-var(--spacing-base));
|
|
18260
18406
|
&:checked {
|
|
18261
18407
|
transform: translateX(0);
|
|
18262
18408
|
}
|
|
18263
18409
|
`;
|
|
18264
|
-
var SwitchInputDisabled =
|
|
18410
|
+
var SwitchInputDisabled = import_react174.css`
|
|
18265
18411
|
opacity: var(--opacity-50);
|
|
18266
18412
|
cursor: not-allowed;
|
|
18267
18413
|
|
|
@@ -18269,19 +18415,19 @@ var SwitchInputDisabled = import_react172.css`
|
|
|
18269
18415
|
cursor: not-allowed;
|
|
18270
18416
|
}
|
|
18271
18417
|
`;
|
|
18272
|
-
var SwitchInputLabelAlignmentLeft = (size) =>
|
|
18418
|
+
var SwitchInputLabelAlignmentLeft = (size) => import_react174.css`
|
|
18273
18419
|
padding-inline-start: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
18274
18420
|
&:before {
|
|
18275
18421
|
left: 0;
|
|
18276
18422
|
}
|
|
18277
18423
|
`;
|
|
18278
|
-
var SwitchInputLabelAlignmentRight = (size) =>
|
|
18424
|
+
var SwitchInputLabelAlignmentRight = (size) => import_react174.css`
|
|
18279
18425
|
padding-inline-end: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
18280
18426
|
&:before {
|
|
18281
18427
|
right: 0;
|
|
18282
18428
|
}
|
|
18283
18429
|
`;
|
|
18284
|
-
var SwitchInputLabel = (size) =>
|
|
18430
|
+
var SwitchInputLabel = (size) => import_react174.css`
|
|
18285
18431
|
align-items: center;
|
|
18286
18432
|
color: var(--typography-base);
|
|
18287
18433
|
display: inline-flex;
|
|
@@ -18301,26 +18447,26 @@ var SwitchInputLabel = (size) => import_react172.css`
|
|
|
18301
18447
|
top: 0;
|
|
18302
18448
|
}
|
|
18303
18449
|
`;
|
|
18304
|
-
var SwitchTextAlignmentLeft = (size) =>
|
|
18450
|
+
var SwitchTextAlignmentLeft = (size) => import_react174.css`
|
|
18305
18451
|
padding-inline-start: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
18306
18452
|
`;
|
|
18307
|
-
var SwitchTextAlignmentRight = (size) =>
|
|
18453
|
+
var SwitchTextAlignmentRight = (size) => import_react174.css`
|
|
18308
18454
|
padding-inline-end: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
18309
18455
|
`;
|
|
18310
|
-
var SwitchText =
|
|
18456
|
+
var SwitchText = import_react174.css`
|
|
18311
18457
|
color: var(--gray-500);
|
|
18312
18458
|
font-size: var(--fs-sm);
|
|
18313
18459
|
`;
|
|
18314
|
-
var SwitchInputContainerAlignmentLeft =
|
|
18460
|
+
var SwitchInputContainerAlignmentLeft = import_react174.css`
|
|
18315
18461
|
flex-direction: row;
|
|
18316
18462
|
`;
|
|
18317
|
-
var SwitchInputContainerAlignmentRight =
|
|
18463
|
+
var SwitchInputContainerAlignmentRight = import_react174.css`
|
|
18318
18464
|
flex-direction: row-reverse;
|
|
18319
18465
|
`;
|
|
18320
18466
|
|
|
18321
18467
|
// src/components/Switch/Switch.tsx
|
|
18322
|
-
var
|
|
18323
|
-
var Switch = (0,
|
|
18468
|
+
var import_jsx_runtime140 = require("@emotion/react/jsx-runtime");
|
|
18469
|
+
var Switch = (0, import_react175.forwardRef)(
|
|
18324
18470
|
({
|
|
18325
18471
|
label,
|
|
18326
18472
|
infoText,
|
|
@@ -18331,7 +18477,7 @@ var Switch = (0, import_react173.forwardRef)(
|
|
|
18331
18477
|
...inputProps
|
|
18332
18478
|
}, ref) => {
|
|
18333
18479
|
let additionalText = infoText;
|
|
18334
|
-
const { SwitchInputContainerAlignmentStyles, SwitchInputCheckedDirection, SwitchInputLabelAlignment } = (0,
|
|
18480
|
+
const { SwitchInputContainerAlignmentStyles, SwitchInputCheckedDirection, SwitchInputLabelAlignment } = (0, import_react175.useMemo)(() => {
|
|
18335
18481
|
if (alignment === "left") {
|
|
18336
18482
|
return {
|
|
18337
18483
|
SwitchInputContainerAlignmentStyles: SwitchInputContainerAlignmentLeft,
|
|
@@ -18348,8 +18494,8 @@ var Switch = (0, import_react173.forwardRef)(
|
|
|
18348
18494
|
if (infoText && toggleText) {
|
|
18349
18495
|
additionalText = inputProps.checked ? toggleText : infoText;
|
|
18350
18496
|
}
|
|
18351
|
-
return /* @__PURE__ */ (0,
|
|
18352
|
-
/* @__PURE__ */ (0,
|
|
18497
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_jsx_runtime140.Fragment, { children: [
|
|
18498
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
|
|
18353
18499
|
"label",
|
|
18354
18500
|
{
|
|
18355
18501
|
css: [
|
|
@@ -18359,7 +18505,7 @@ var Switch = (0, import_react173.forwardRef)(
|
|
|
18359
18505
|
inputProps.disabled ? SwitchInputDisabled : void 0
|
|
18360
18506
|
],
|
|
18361
18507
|
children: [
|
|
18362
|
-
/* @__PURE__ */ (0,
|
|
18508
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
|
|
18363
18509
|
"input",
|
|
18364
18510
|
{
|
|
18365
18511
|
type: "checkbox",
|
|
@@ -18368,11 +18514,11 @@ var Switch = (0, import_react173.forwardRef)(
|
|
|
18368
18514
|
ref
|
|
18369
18515
|
}
|
|
18370
18516
|
),
|
|
18371
|
-
/* @__PURE__ */ (0,
|
|
18517
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)("span", { css: [SwitchInputLabel(switchSize), SwitchInputLabelAlignment], children: label })
|
|
18372
18518
|
]
|
|
18373
18519
|
}
|
|
18374
18520
|
),
|
|
18375
|
-
additionalText ? /* @__PURE__ */ (0,
|
|
18521
|
+
additionalText ? /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
|
|
18376
18522
|
"p",
|
|
18377
18523
|
{
|
|
18378
18524
|
css: [
|
|
@@ -18392,8 +18538,8 @@ init_emotion_jsx_shim();
|
|
|
18392
18538
|
|
|
18393
18539
|
// src/components/Table/Table.styles.ts
|
|
18394
18540
|
init_emotion_jsx_shim();
|
|
18395
|
-
var
|
|
18396
|
-
var table = ({ cellPadding = "var(--spacing-sm)" }) =>
|
|
18541
|
+
var import_react176 = require("@emotion/react");
|
|
18542
|
+
var table = ({ cellPadding = "var(--spacing-sm)" }) => import_react176.css`
|
|
18397
18543
|
border-bottom: 1px solid var(--gray-400);
|
|
18398
18544
|
border-collapse: collapse;
|
|
18399
18545
|
min-width: 100%;
|
|
@@ -18413,21 +18559,21 @@ var table = ({ cellPadding = "var(--spacing-sm)" }) => import_react174.css`
|
|
|
18413
18559
|
background-color: var(--gray-50);
|
|
18414
18560
|
}
|
|
18415
18561
|
`;
|
|
18416
|
-
var tableHead =
|
|
18562
|
+
var tableHead = import_react176.css`
|
|
18417
18563
|
color: var(--typography-base);
|
|
18418
18564
|
text-align: left;
|
|
18419
18565
|
`;
|
|
18420
|
-
var tableRow =
|
|
18566
|
+
var tableRow = import_react176.css`
|
|
18421
18567
|
border-bottom: 1px solid var(--gray-200);
|
|
18422
18568
|
font-size: var(--fs-sm);
|
|
18423
18569
|
`;
|
|
18424
|
-
var tableCellHead =
|
|
18570
|
+
var tableCellHead = import_react176.css`
|
|
18425
18571
|
font-size: var(--fs-sm);
|
|
18426
18572
|
font-weight: var(--fw-regular);
|
|
18427
18573
|
line-height: 1.2;
|
|
18428
18574
|
}
|
|
18429
18575
|
`;
|
|
18430
|
-
var responsiveTableContainer =
|
|
18576
|
+
var responsiveTableContainer = import_react176.css`
|
|
18431
18577
|
max-width: calc(100vw - var(--spacing-md) * 2);
|
|
18432
18578
|
overflow-x: auto;
|
|
18433
18579
|
${scrollbarStyles}
|
|
@@ -18446,60 +18592,60 @@ var responsiveTableContainer = import_react174.css`
|
|
|
18446
18592
|
`;
|
|
18447
18593
|
|
|
18448
18594
|
// src/components/Table/ResponsiveTableContainer.tsx
|
|
18449
|
-
var
|
|
18595
|
+
var import_jsx_runtime141 = require("@emotion/react/jsx-runtime");
|
|
18450
18596
|
var ResponsiveTableContainer = ({ children }) => {
|
|
18451
|
-
return /* @__PURE__ */ (0,
|
|
18597
|
+
return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("div", { css: responsiveTableContainer, children });
|
|
18452
18598
|
};
|
|
18453
18599
|
|
|
18454
18600
|
// src/components/Table/Table.tsx
|
|
18455
18601
|
init_emotion_jsx_shim();
|
|
18456
|
-
var
|
|
18457
|
-
var
|
|
18458
|
-
var Table =
|
|
18602
|
+
var React22 = __toESM(require("react"));
|
|
18603
|
+
var import_jsx_runtime142 = require("@emotion/react/jsx-runtime");
|
|
18604
|
+
var Table = React22.forwardRef(
|
|
18459
18605
|
({ children, cellPadding, ...otherProps }, ref) => {
|
|
18460
|
-
return /* @__PURE__ */ (0,
|
|
18606
|
+
return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
|
|
18461
18607
|
}
|
|
18462
18608
|
);
|
|
18463
|
-
var TableHead =
|
|
18609
|
+
var TableHead = React22.forwardRef(
|
|
18464
18610
|
({ children, ...otherProps }, ref) => {
|
|
18465
|
-
return /* @__PURE__ */ (0,
|
|
18611
|
+
return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
|
|
18466
18612
|
}
|
|
18467
18613
|
);
|
|
18468
|
-
var TableBody =
|
|
18614
|
+
var TableBody = React22.forwardRef(
|
|
18469
18615
|
({ children, ...otherProps }, ref) => {
|
|
18470
|
-
return /* @__PURE__ */ (0,
|
|
18616
|
+
return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("tbody", { ref, ...otherProps, children });
|
|
18471
18617
|
}
|
|
18472
18618
|
);
|
|
18473
|
-
var TableFoot =
|
|
18619
|
+
var TableFoot = React22.forwardRef(
|
|
18474
18620
|
({ children, ...otherProps }, ref) => {
|
|
18475
|
-
return /* @__PURE__ */ (0,
|
|
18621
|
+
return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("tfoot", { ref, ...otherProps, children });
|
|
18476
18622
|
}
|
|
18477
18623
|
);
|
|
18478
|
-
var TableRow =
|
|
18624
|
+
var TableRow = React22.forwardRef(
|
|
18479
18625
|
({ children, ...otherProps }, ref) => {
|
|
18480
|
-
return /* @__PURE__ */ (0,
|
|
18626
|
+
return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
|
|
18481
18627
|
}
|
|
18482
18628
|
);
|
|
18483
|
-
var TableCellHead =
|
|
18629
|
+
var TableCellHead = React22.forwardRef(
|
|
18484
18630
|
({ children, ...otherProps }, ref) => {
|
|
18485
|
-
return /* @__PURE__ */ (0,
|
|
18631
|
+
return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
|
|
18486
18632
|
}
|
|
18487
18633
|
);
|
|
18488
|
-
var TableCellData =
|
|
18634
|
+
var TableCellData = React22.forwardRef(
|
|
18489
18635
|
({ children, ...otherProps }, ref) => {
|
|
18490
|
-
return /* @__PURE__ */ (0,
|
|
18636
|
+
return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("td", { ref, ...otherProps, children });
|
|
18491
18637
|
}
|
|
18492
18638
|
);
|
|
18493
18639
|
|
|
18494
18640
|
// src/components/Tabs/Tabs.tsx
|
|
18495
18641
|
init_emotion_jsx_shim();
|
|
18496
|
-
var
|
|
18497
|
-
var
|
|
18642
|
+
var import_react178 = require("@ariakit/react");
|
|
18643
|
+
var import_react179 = require("react");
|
|
18498
18644
|
|
|
18499
18645
|
// src/components/Tabs/Tabs.styles.ts
|
|
18500
18646
|
init_emotion_jsx_shim();
|
|
18501
|
-
var
|
|
18502
|
-
var tabButtonStyles =
|
|
18647
|
+
var import_react177 = require("@emotion/react");
|
|
18648
|
+
var tabButtonStyles = import_react177.css`
|
|
18503
18649
|
align-items: center;
|
|
18504
18650
|
border: 0;
|
|
18505
18651
|
height: 2.5rem;
|
|
@@ -18516,16 +18662,16 @@ var tabButtonStyles = import_react175.css`
|
|
|
18516
18662
|
box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
|
|
18517
18663
|
}
|
|
18518
18664
|
`;
|
|
18519
|
-
var tabButtonGroupStyles =
|
|
18665
|
+
var tabButtonGroupStyles = import_react177.css`
|
|
18520
18666
|
display: flex;
|
|
18521
18667
|
gap: var(--spacing-base);
|
|
18522
18668
|
border-bottom: 1px solid var(--gray-300);
|
|
18523
18669
|
`;
|
|
18524
18670
|
|
|
18525
18671
|
// src/components/Tabs/Tabs.tsx
|
|
18526
|
-
var
|
|
18672
|
+
var import_jsx_runtime143 = require("@emotion/react/jsx-runtime");
|
|
18527
18673
|
var useCurrentTab = () => {
|
|
18528
|
-
const context = (0,
|
|
18674
|
+
const context = (0, import_react178.useTabStore)();
|
|
18529
18675
|
if (!context) {
|
|
18530
18676
|
throw new Error("This component can only be used inside <Tabs>");
|
|
18531
18677
|
}
|
|
@@ -18539,11 +18685,11 @@ var Tabs = ({
|
|
|
18539
18685
|
manual,
|
|
18540
18686
|
...props
|
|
18541
18687
|
}) => {
|
|
18542
|
-
const selected = (0,
|
|
18688
|
+
const selected = (0, import_react179.useMemo)(() => {
|
|
18543
18689
|
if (selectedId) return selectedId;
|
|
18544
18690
|
return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
|
|
18545
18691
|
}, [selectedId, useHashForState]);
|
|
18546
|
-
const onTabSelect = (0,
|
|
18692
|
+
const onTabSelect = (0, import_react179.useCallback)(
|
|
18547
18693
|
(value) => {
|
|
18548
18694
|
const selectedValueWithoutNull = value != null ? value : void 0;
|
|
18549
18695
|
onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
|
|
@@ -18554,23 +18700,23 @@ var Tabs = ({
|
|
|
18554
18700
|
},
|
|
18555
18701
|
[onSelectedIdChange, useHashForState]
|
|
18556
18702
|
);
|
|
18557
|
-
return /* @__PURE__ */ (0,
|
|
18703
|
+
return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react178.TabProvider, { selectedId: selected, selectOnMove: !manual, setSelectedId: onTabSelect, ...props, children });
|
|
18558
18704
|
};
|
|
18559
18705
|
var TabButtonGroup = ({ children, ...props }) => {
|
|
18560
|
-
return /* @__PURE__ */ (0,
|
|
18706
|
+
return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react178.TabList, { ...props, css: tabButtonGroupStyles, children });
|
|
18561
18707
|
};
|
|
18562
18708
|
var TabButton = ({
|
|
18563
18709
|
children,
|
|
18564
18710
|
id,
|
|
18565
18711
|
...props
|
|
18566
18712
|
}) => {
|
|
18567
|
-
return /* @__PURE__ */ (0,
|
|
18713
|
+
return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react178.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
|
|
18568
18714
|
};
|
|
18569
18715
|
var TabContent = ({
|
|
18570
18716
|
children,
|
|
18571
18717
|
...props
|
|
18572
18718
|
}) => {
|
|
18573
|
-
return /* @__PURE__ */ (0,
|
|
18719
|
+
return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_react178.TabPanel, { ...props, children });
|
|
18574
18720
|
};
|
|
18575
18721
|
|
|
18576
18722
|
// src/components/Validation/StatusBullet.tsx
|
|
@@ -18578,8 +18724,8 @@ init_emotion_jsx_shim();
|
|
|
18578
18724
|
|
|
18579
18725
|
// src/components/Validation/StatusBullet.styles.ts
|
|
18580
18726
|
init_emotion_jsx_shim();
|
|
18581
|
-
var
|
|
18582
|
-
var StatusBulletContainer =
|
|
18727
|
+
var import_react180 = require("@emotion/react");
|
|
18728
|
+
var StatusBulletContainer = import_react180.css`
|
|
18583
18729
|
align-items: center;
|
|
18584
18730
|
align-self: center;
|
|
18585
18731
|
color: var(--gray-500);
|
|
@@ -18595,33 +18741,33 @@ var StatusBulletContainer = import_react178.css`
|
|
|
18595
18741
|
display: block;
|
|
18596
18742
|
}
|
|
18597
18743
|
`;
|
|
18598
|
-
var StatusBulletBase =
|
|
18744
|
+
var StatusBulletBase = import_react180.css`
|
|
18599
18745
|
font-size: var(--fs-sm);
|
|
18600
18746
|
&:before {
|
|
18601
18747
|
width: var(--fs-xs);
|
|
18602
18748
|
height: var(--fs-xs);
|
|
18603
18749
|
}
|
|
18604
18750
|
`;
|
|
18605
|
-
var StatusBulletSmall =
|
|
18751
|
+
var StatusBulletSmall = import_react180.css`
|
|
18606
18752
|
font-size: var(--fs-xs);
|
|
18607
18753
|
&:before {
|
|
18608
18754
|
width: var(--fs-xxs);
|
|
18609
18755
|
height: var(--fs-xxs);
|
|
18610
18756
|
}
|
|
18611
18757
|
`;
|
|
18612
|
-
var StatusDraft =
|
|
18758
|
+
var StatusDraft = import_react180.css`
|
|
18613
18759
|
&:before {
|
|
18614
18760
|
background: var(--white);
|
|
18615
18761
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
18616
18762
|
}
|
|
18617
18763
|
`;
|
|
18618
|
-
var StatusModified =
|
|
18764
|
+
var StatusModified = import_react180.css`
|
|
18619
18765
|
&:before {
|
|
18620
18766
|
background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
|
|
18621
18767
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
18622
18768
|
}
|
|
18623
18769
|
`;
|
|
18624
|
-
var StatusError =
|
|
18770
|
+
var StatusError = import_react180.css`
|
|
18625
18771
|
color: var(--error);
|
|
18626
18772
|
&:before {
|
|
18627
18773
|
/* TODO: replace this with an svg icon */
|
|
@@ -18634,29 +18780,44 @@ var StatusError = import_react178.css`
|
|
|
18634
18780
|
);
|
|
18635
18781
|
}
|
|
18636
18782
|
`;
|
|
18637
|
-
var StatusPublished =
|
|
18783
|
+
var StatusPublished = import_react180.css`
|
|
18638
18784
|
&:before {
|
|
18639
18785
|
background: var(--accent-dark);
|
|
18640
18786
|
}
|
|
18641
18787
|
`;
|
|
18642
|
-
var StatusOrphan =
|
|
18788
|
+
var StatusOrphan = import_react180.css`
|
|
18643
18789
|
&:before {
|
|
18644
18790
|
background: var(--brand-secondary-5);
|
|
18645
18791
|
}
|
|
18646
18792
|
`;
|
|
18647
|
-
var StatusUnknown =
|
|
18793
|
+
var StatusUnknown = import_react180.css`
|
|
18648
18794
|
&:before {
|
|
18649
18795
|
background: var(--gray-800);
|
|
18650
18796
|
}
|
|
18651
18797
|
`;
|
|
18652
|
-
var StatusDeleted =
|
|
18798
|
+
var StatusDeleted = import_react180.css`
|
|
18653
18799
|
&:before {
|
|
18654
18800
|
background: var(--error);
|
|
18655
18801
|
}
|
|
18656
18802
|
`;
|
|
18657
18803
|
|
|
18658
18804
|
// src/components/Validation/StatusBullet.tsx
|
|
18659
|
-
var
|
|
18805
|
+
var import_jsx_runtime144 = require("@emotion/react/jsx-runtime");
|
|
18806
|
+
var currentStateStyles = {
|
|
18807
|
+
Error: StatusError,
|
|
18808
|
+
Modified: StatusModified,
|
|
18809
|
+
Unsaved: StatusDraft,
|
|
18810
|
+
Orphan: StatusOrphan,
|
|
18811
|
+
Published: StatusPublished,
|
|
18812
|
+
Draft: StatusDraft,
|
|
18813
|
+
Previous: StatusDraft,
|
|
18814
|
+
Unknown: StatusUnknown,
|
|
18815
|
+
Deleted: StatusDeleted
|
|
18816
|
+
};
|
|
18817
|
+
var statusSize = {
|
|
18818
|
+
sm: StatusBulletSmall,
|
|
18819
|
+
base: StatusBulletBase
|
|
18820
|
+
};
|
|
18660
18821
|
var StatusBullet = ({
|
|
18661
18822
|
status,
|
|
18662
18823
|
hideText = false,
|
|
@@ -18665,31 +18826,19 @@ var StatusBullet = ({
|
|
|
18665
18826
|
compact = false,
|
|
18666
18827
|
...props
|
|
18667
18828
|
}) => {
|
|
18668
|
-
const
|
|
18669
|
-
Error: StatusError,
|
|
18670
|
-
Modified: StatusModified,
|
|
18671
|
-
Unsaved: StatusDraft,
|
|
18672
|
-
Orphan: StatusOrphan,
|
|
18673
|
-
Published: StatusPublished,
|
|
18674
|
-
Draft: StatusDraft,
|
|
18675
|
-
Previous: StatusDraft,
|
|
18676
|
-
Unknown: StatusUnknown,
|
|
18677
|
-
Deleted: StatusDeleted
|
|
18678
|
-
};
|
|
18679
|
-
const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
|
|
18680
|
-
const StatusComponent = () => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
|
|
18829
|
+
const StatusComponent = () => /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
|
|
18681
18830
|
"span",
|
|
18682
18831
|
{
|
|
18683
18832
|
role: "status",
|
|
18684
|
-
css: [StatusBulletContainer, currentStateStyles[status], statusSize],
|
|
18833
|
+
css: [StatusBulletContainer, currentStateStyles[status], statusSize[size]],
|
|
18685
18834
|
...props,
|
|
18686
18835
|
children: hideText ? null : message ? message : status
|
|
18687
18836
|
}
|
|
18688
18837
|
);
|
|
18689
18838
|
if (compact) {
|
|
18690
|
-
return /* @__PURE__ */ (0,
|
|
18839
|
+
return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(StatusComponent, {});
|
|
18691
18840
|
}
|
|
18692
|
-
return /* @__PURE__ */ (0,
|
|
18841
|
+
return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(StatusComponent, {}) }) });
|
|
18693
18842
|
};
|
|
18694
18843
|
// Annotate the CommonJS export names for ESM import in node:
|
|
18695
18844
|
0 && (module.exports = {
|
|
@@ -18799,6 +18948,7 @@ var StatusBullet = ({
|
|
|
18799
18948
|
PageHeaderSection,
|
|
18800
18949
|
Pagination,
|
|
18801
18950
|
Paragraph,
|
|
18951
|
+
ParameterActionButton,
|
|
18802
18952
|
ParameterDrawerHeader,
|
|
18803
18953
|
ParameterGroup,
|
|
18804
18954
|
ParameterImage,
|
|
@@ -18870,6 +19020,7 @@ var StatusBullet = ({
|
|
|
18870
19020
|
VerticalRhythm,
|
|
18871
19021
|
WarningMessage,
|
|
18872
19022
|
accessibleHidden,
|
|
19023
|
+
actionBarVisibilityStyles,
|
|
18873
19024
|
addPathSegmentToPathname,
|
|
18874
19025
|
borderTopIcon,
|
|
18875
19026
|
breakpoints,
|