@uniformdev/design-system 20.31.1-alpha.7 → 20.32.1-alpha.18
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 +545 -410
- package/dist/index.d.mts +32 -1
- package/dist/index.d.ts +32 -1
- package/dist/index.js +709 -570
- package/package.json +4 -4
package/dist/esm/index.js
CHANGED
|
@@ -4753,15 +4753,15 @@ function InputCreatableComboBox(props) {
|
|
|
4753
4753
|
}
|
|
4754
4754
|
);
|
|
4755
4755
|
}
|
|
4756
|
-
function inputComboBoxStyles(
|
|
4756
|
+
function inputComboBoxStyles(baseStyles2) {
|
|
4757
4757
|
return {
|
|
4758
|
-
...
|
|
4758
|
+
...baseStyles2,
|
|
4759
4759
|
singleValue: (base, sProps) => {
|
|
4760
4760
|
var _a;
|
|
4761
4761
|
return {
|
|
4762
4762
|
...base,
|
|
4763
4763
|
color: "var(--typography-base)",
|
|
4764
|
-
...(_a =
|
|
4764
|
+
...(_a = baseStyles2 == null ? void 0 : baseStyles2.singleValue) == null ? void 0 : _a.call(baseStyles2, base, sProps)
|
|
4765
4765
|
};
|
|
4766
4766
|
},
|
|
4767
4767
|
valueContainer: (base, sProps) => {
|
|
@@ -4770,7 +4770,7 @@ function inputComboBoxStyles(baseStyles) {
|
|
|
4770
4770
|
...base,
|
|
4771
4771
|
padding: "12px var(--spacing-base) 12px var(--spacing-sm)",
|
|
4772
4772
|
gap: "2px",
|
|
4773
|
-
...(_a =
|
|
4773
|
+
...(_a = baseStyles2 == null ? void 0 : baseStyles2.valueContainer) == null ? void 0 : _a.call(baseStyles2, base, sProps)
|
|
4774
4774
|
};
|
|
4775
4775
|
},
|
|
4776
4776
|
input: (base, sProps) => {
|
|
@@ -4783,7 +4783,7 @@ function inputComboBoxStyles(baseStyles) {
|
|
|
4783
4783
|
"& > input": {
|
|
4784
4784
|
boxShadow: "none !important"
|
|
4785
4785
|
},
|
|
4786
|
-
...(_a =
|
|
4786
|
+
...(_a = baseStyles2 == null ? void 0 : baseStyles2.input) == null ? void 0 : _a.call(baseStyles2, base, sProps)
|
|
4787
4787
|
};
|
|
4788
4788
|
},
|
|
4789
4789
|
menu: (base, state) => {
|
|
@@ -4791,7 +4791,7 @@ function inputComboBoxStyles(baseStyles) {
|
|
|
4791
4791
|
return {
|
|
4792
4792
|
...base,
|
|
4793
4793
|
zIndex: "var(--z-20)",
|
|
4794
|
-
...(_a =
|
|
4794
|
+
...(_a = baseStyles2 == null ? void 0 : baseStyles2.menu) == null ? void 0 : _a.call(baseStyles2, base, state)
|
|
4795
4795
|
};
|
|
4796
4796
|
},
|
|
4797
4797
|
control: (base, state) => {
|
|
@@ -4823,7 +4823,7 @@ function inputComboBoxStyles(baseStyles) {
|
|
|
4823
4823
|
},
|
|
4824
4824
|
...state.isFocused ? { borderColor: "var(--gray-300)" } : {}
|
|
4825
4825
|
},
|
|
4826
|
-
...(_a =
|
|
4826
|
+
...(_a = baseStyles2 == null ? void 0 : baseStyles2.control) == null ? void 0 : _a.call(baseStyles2, base, state)
|
|
4827
4827
|
};
|
|
4828
4828
|
},
|
|
4829
4829
|
indicatorsContainer: (base, state) => {
|
|
@@ -4843,14 +4843,14 @@ function inputComboBoxStyles(baseStyles) {
|
|
|
4843
4843
|
"& svg": {
|
|
4844
4844
|
display: "none"
|
|
4845
4845
|
},
|
|
4846
|
-
...(_a =
|
|
4846
|
+
...(_a = baseStyles2 == null ? void 0 : baseStyles2.indicatorsContainer) == null ? void 0 : _a.call(baseStyles2, base, state)
|
|
4847
4847
|
};
|
|
4848
4848
|
},
|
|
4849
4849
|
indicatorSeparator: (base, state) => {
|
|
4850
4850
|
var _a;
|
|
4851
4851
|
return {
|
|
4852
4852
|
display: "none",
|
|
4853
|
-
...(_a =
|
|
4853
|
+
...(_a = baseStyles2 == null ? void 0 : baseStyles2.indicatorSeparator) == null ? void 0 : _a.call(baseStyles2, base, state)
|
|
4854
4854
|
};
|
|
4855
4855
|
},
|
|
4856
4856
|
option: (base, state) => {
|
|
@@ -4861,7 +4861,7 @@ function inputComboBoxStyles(baseStyles) {
|
|
|
4861
4861
|
color: state.isDisabled ? "var(--gray-300)" : "var(--gray-700)",
|
|
4862
4862
|
paddingLeft: isIndented ? "var(--spacing-md)" : "",
|
|
4863
4863
|
backgroundColor: state.isDisabled ? "transparent" : state.isSelected ? "var(--gray-200)" : state.isFocused ? "var(--gray-100)" : "transparent",
|
|
4864
|
-
...(_a =
|
|
4864
|
+
...(_a = baseStyles2 == null ? void 0 : baseStyles2.option) == null ? void 0 : _a.call(baseStyles2, base, state)
|
|
4865
4865
|
};
|
|
4866
4866
|
},
|
|
4867
4867
|
multiValue: (styles) => {
|
|
@@ -5624,7 +5624,7 @@ var ButtonWithMenuContainer = css36`
|
|
|
5624
5624
|
color: var(--white);
|
|
5625
5625
|
display: inline-grid;
|
|
5626
5626
|
position: relative;
|
|
5627
|
-
grid-template-columns: 1fr minmax(var(--
|
|
5627
|
+
grid-template-columns: 1fr minmax(calc(var(--svg-size) * 2), 2.44rem);
|
|
5628
5628
|
min-height: 24px;
|
|
5629
5629
|
max-width: max-content;
|
|
5630
5630
|
transition:
|
|
@@ -6498,7 +6498,7 @@ var ChipContainer = css45`
|
|
|
6498
6498
|
cursor: pointer;
|
|
6499
6499
|
}
|
|
6500
6500
|
|
|
6501
|
-
|
|
6501
|
+
:where(button):hover {
|
|
6502
6502
|
[role='presentation'] {
|
|
6503
6503
|
transition: opacity var(--duration-fast) var(--timing-ease-out);
|
|
6504
6504
|
opacity: var(--opacity-100);
|
|
@@ -10328,7 +10328,7 @@ var LoadingOverlay = ({
|
|
|
10328
10328
|
var LoadingAnimation = ({
|
|
10329
10329
|
label,
|
|
10330
10330
|
width,
|
|
10331
|
-
css:
|
|
10331
|
+
css: css111,
|
|
10332
10332
|
isPaused
|
|
10333
10333
|
}) => {
|
|
10334
10334
|
return /* @__PURE__ */ jsxs66(
|
|
@@ -10339,7 +10339,7 @@ var LoadingAnimation = ({
|
|
|
10339
10339
|
width: typeof width === "number" ? `${width}px` : width,
|
|
10340
10340
|
height: typeof width === "number" ? `${width}px` : width
|
|
10341
10341
|
},
|
|
10342
|
-
css: [loaderAnimationContainer,
|
|
10342
|
+
css: [loaderAnimationContainer, css111],
|
|
10343
10343
|
className: `loader-container${isPaused ? " paused" : ""}`,
|
|
10344
10344
|
children: [
|
|
10345
10345
|
/* @__PURE__ */ jsxs66("div", { className: "bottom-cubes", children: [
|
|
@@ -11494,21 +11494,129 @@ var LabelLeadingIcon = ({
|
|
|
11494
11494
|
) });
|
|
11495
11495
|
};
|
|
11496
11496
|
|
|
11497
|
-
// src/components/ParameterInputs/
|
|
11497
|
+
// src/components/ParameterInputs/ParameterActionButton.tsx
|
|
11498
|
+
import React18 from "react";
|
|
11499
|
+
|
|
11500
|
+
// src/components/ParameterInputs/styles/ParameterActionButton.styles.ts
|
|
11498
11501
|
import { css as css87 } from "@emotion/react";
|
|
11499
|
-
var
|
|
11502
|
+
var baseStyles = css87`
|
|
11503
|
+
--hover-color: var(--accent-dark-hover);
|
|
11504
|
+
--active-color: var(--accent-dark-active);
|
|
11505
|
+
border: 1px solid transparent;
|
|
11506
|
+
border-radius: var(--rounded-base);
|
|
11507
|
+
display: flex;
|
|
11508
|
+
align-items: center;
|
|
11509
|
+
justify-content: center;
|
|
11510
|
+
max-width: fit-content;
|
|
11511
|
+
padding: 0.125rem;
|
|
11512
|
+
transition:
|
|
11513
|
+
border-color var(--duration-fast) var(--timing-ease-out),
|
|
11514
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
11515
|
+
color var(--duration-fast) var(--timing-ease-out),
|
|
11516
|
+
box-shadow var(--duration-fast) var(--timing-ease-out);
|
|
11517
|
+
min-height: 1.125rem;
|
|
11518
|
+
min-width: 1.125rem;
|
|
11519
|
+
font-size: 0.75rem;
|
|
11520
|
+
|
|
11521
|
+
&:disabled
|
|
11522
|
+
&:[aria-disabled='true'] {
|
|
11523
|
+
opacity: 0.5;
|
|
11524
|
+
pointer-events: none;
|
|
11525
|
+
cursor: not-allowed;
|
|
11526
|
+
}
|
|
11527
|
+
`;
|
|
11528
|
+
var solidHoverStyles = css87`
|
|
11529
|
+
--text-color: var(--typography-inverted);
|
|
11530
|
+
&:hover,
|
|
11531
|
+
&:focus,
|
|
11532
|
+
&:focus-within {
|
|
11533
|
+
border-color: var(--hover-color);
|
|
11534
|
+
background: var(--hover-color);
|
|
11535
|
+
color: var(--text-color);
|
|
11536
|
+
}
|
|
11537
|
+
|
|
11538
|
+
&:active,
|
|
11539
|
+
&[aria-pressed='true'] {
|
|
11540
|
+
border-color: var(--active-color);
|
|
11541
|
+
background: var(--active-color);
|
|
11542
|
+
color: var(--text-color);
|
|
11543
|
+
}
|
|
11544
|
+
`;
|
|
11545
|
+
var outlineHoverStyles = css87`
|
|
11546
|
+
--text-color: var(--typography-light);
|
|
11547
|
+
&:hover:not([aria-disabled='true']),
|
|
11548
|
+
&:focus:not([aria-disabled='true']),
|
|
11549
|
+
&:focus-within:not([aria-disabled='true']) {
|
|
11550
|
+
background: var(--gray-50);
|
|
11551
|
+
border-color: var(--hover-color);
|
|
11552
|
+
}
|
|
11553
|
+
&:active:not([aria-disabled='true']),
|
|
11554
|
+
&[aria-pressed='true']:not([aria-disabled='true']) {
|
|
11555
|
+
border-color: var(--active-color);
|
|
11556
|
+
}
|
|
11557
|
+
`;
|
|
11558
|
+
var invertedStyles = css87`
|
|
11559
|
+
--text-color: var(--typography-inverted);
|
|
11560
|
+
box-shadow: inset 0 0 0 1px transparent;
|
|
11561
|
+
&:hover,
|
|
11562
|
+
&:focus,
|
|
11563
|
+
&:focus-within {
|
|
11564
|
+
box-shadow: inset 0 0 0 1px var(--text-color);
|
|
11565
|
+
color: var(--text-color);
|
|
11566
|
+
}
|
|
11567
|
+
&:active,
|
|
11568
|
+
&[aria-pressed='true'] {
|
|
11569
|
+
background: var(--active-color);
|
|
11570
|
+
border-color: var(--active-color);
|
|
11571
|
+
}
|
|
11572
|
+
`;
|
|
11573
|
+
|
|
11574
|
+
// src/components/ParameterInputs/ParameterActionButton.tsx
|
|
11575
|
+
import { jsx as jsx115 } from "@emotion/react/jsx-runtime";
|
|
11576
|
+
var ParameterActionButton = ({
|
|
11577
|
+
children,
|
|
11578
|
+
themeType,
|
|
11579
|
+
tooltip,
|
|
11580
|
+
renderAs = "button",
|
|
11581
|
+
...props
|
|
11582
|
+
}) => {
|
|
11583
|
+
const shouldApplyInverted = themeType === "filled" && "inverted" in props && props.inverted;
|
|
11584
|
+
const ComponentWrapper = renderAs === "div" ? "div" : "button";
|
|
11585
|
+
const buttonElement = /* @__PURE__ */ jsx115(
|
|
11586
|
+
ComponentWrapper,
|
|
11587
|
+
{
|
|
11588
|
+
css: [
|
|
11589
|
+
baseStyles,
|
|
11590
|
+
themeType === "filled" ? solidHoverStyles : outlineHoverStyles,
|
|
11591
|
+
shouldApplyInverted ? invertedStyles : null
|
|
11592
|
+
],
|
|
11593
|
+
...renderAs === "button" && { type: "button" },
|
|
11594
|
+
...shouldApplyInverted && { "data-inverted": true },
|
|
11595
|
+
...props,
|
|
11596
|
+
children
|
|
11597
|
+
}
|
|
11598
|
+
);
|
|
11599
|
+
if (tooltip && (typeof tooltip === "string" || React18.isValidElement(tooltip))) {
|
|
11600
|
+
return /* @__PURE__ */ jsx115(Tooltip, { title: tooltip, children: buttonElement });
|
|
11601
|
+
}
|
|
11602
|
+
return buttonElement;
|
|
11603
|
+
};
|
|
11604
|
+
|
|
11605
|
+
// src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
|
|
11606
|
+
import { css as css88 } from "@emotion/react";
|
|
11607
|
+
var ParameterDrawerHeaderContainer = css88`
|
|
11500
11608
|
align-items: center;
|
|
11501
11609
|
display: flex;
|
|
11502
11610
|
gap: var(--spacing-base);
|
|
11503
11611
|
justify-content: space-between;
|
|
11504
11612
|
margin-bottom: var(--spacing-sm);
|
|
11505
11613
|
`;
|
|
11506
|
-
var ParameterDrawerHeaderTitleGroup =
|
|
11614
|
+
var ParameterDrawerHeaderTitleGroup = css88`
|
|
11507
11615
|
align-items: center;
|
|
11508
11616
|
display: flex;
|
|
11509
11617
|
gap: var(--spacing-sm);
|
|
11510
11618
|
`;
|
|
11511
|
-
var ParameterDrawerHeaderTitle =
|
|
11619
|
+
var ParameterDrawerHeaderTitle = css88`
|
|
11512
11620
|
text-overflow: ellipsis;
|
|
11513
11621
|
white-space: nowrap;
|
|
11514
11622
|
overflow: hidden;
|
|
@@ -11516,12 +11624,12 @@ var ParameterDrawerHeaderTitle = css87`
|
|
|
11516
11624
|
`;
|
|
11517
11625
|
|
|
11518
11626
|
// src/components/ParameterInputs/ParameterDrawerHeader.tsx
|
|
11519
|
-
import { jsx as
|
|
11627
|
+
import { jsx as jsx116, jsxs as jsxs77 } from "@emotion/react/jsx-runtime";
|
|
11520
11628
|
var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
|
|
11521
11629
|
return /* @__PURE__ */ jsxs77("div", { css: ParameterDrawerHeaderContainer, children: [
|
|
11522
11630
|
/* @__PURE__ */ jsxs77("header", { css: ParameterDrawerHeaderTitleGroup, children: [
|
|
11523
11631
|
iconBeforeTitle,
|
|
11524
|
-
/* @__PURE__ */
|
|
11632
|
+
/* @__PURE__ */ jsx116(Heading2, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title, children: title })
|
|
11525
11633
|
] }),
|
|
11526
11634
|
children
|
|
11527
11635
|
] });
|
|
@@ -11531,8 +11639,8 @@ var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
|
|
|
11531
11639
|
import { forwardRef as forwardRef20 } from "react";
|
|
11532
11640
|
|
|
11533
11641
|
// src/components/ParameterInputs/styles/ParameterGroup.styles.ts
|
|
11534
|
-
import { css as
|
|
11535
|
-
var fieldsetStyles =
|
|
11642
|
+
import { css as css89 } from "@emotion/react";
|
|
11643
|
+
var fieldsetStyles = css89`
|
|
11536
11644
|
&:disabled,
|
|
11537
11645
|
[readonly] {
|
|
11538
11646
|
pointer-events: none;
|
|
@@ -11543,19 +11651,19 @@ var fieldsetStyles = css88`
|
|
|
11543
11651
|
}
|
|
11544
11652
|
}
|
|
11545
11653
|
`;
|
|
11546
|
-
var fieldsetLegend2 =
|
|
11654
|
+
var fieldsetLegend2 = css89`
|
|
11547
11655
|
display: block;
|
|
11548
11656
|
font-weight: var(--fw-medium);
|
|
11549
|
-
margin-bottom: var(--spacing-
|
|
11657
|
+
margin-bottom: var(--spacing-base);
|
|
11550
11658
|
width: 100%;
|
|
11551
11659
|
`;
|
|
11552
11660
|
|
|
11553
11661
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
11554
|
-
import { jsx as
|
|
11662
|
+
import { jsx as jsx117, jsxs as jsxs78 } from "@emotion/react/jsx-runtime";
|
|
11555
11663
|
var ParameterGroup = forwardRef20(
|
|
11556
11664
|
({ legend, isDisabled, children, ...props }, ref) => {
|
|
11557
11665
|
return /* @__PURE__ */ jsxs78("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
|
|
11558
|
-
/* @__PURE__ */
|
|
11666
|
+
/* @__PURE__ */ jsx117("legend", { css: fieldsetLegend2, children: legend }),
|
|
11559
11667
|
children
|
|
11560
11668
|
] });
|
|
11561
11669
|
}
|
|
@@ -11569,15 +11677,15 @@ import { useState as useState13 } from "react";
|
|
|
11569
11677
|
import { createPortal as createPortal2 } from "react-dom";
|
|
11570
11678
|
|
|
11571
11679
|
// src/components/ParameterInputs/styles/ParameterImage.styles.ts
|
|
11572
|
-
import { css as
|
|
11573
|
-
var previewWrapper =
|
|
11680
|
+
import { css as css90 } from "@emotion/react";
|
|
11681
|
+
var previewWrapper = css90`
|
|
11574
11682
|
margin-top: var(--spacing-xs);
|
|
11575
11683
|
background: var(--gray-50);
|
|
11576
11684
|
padding: var(--spacing-sm);
|
|
11577
11685
|
border: solid 1px var(--gray-300);
|
|
11578
11686
|
border-radius: var(--rounded-sm);
|
|
11579
11687
|
`;
|
|
11580
|
-
var previewLink =
|
|
11688
|
+
var previewLink = css90`
|
|
11581
11689
|
display: block;
|
|
11582
11690
|
width: 100%;
|
|
11583
11691
|
|
|
@@ -11585,7 +11693,7 @@ var previewLink = css89`
|
|
|
11585
11693
|
max-height: 9rem;
|
|
11586
11694
|
}
|
|
11587
11695
|
`;
|
|
11588
|
-
var previewModalWrapper =
|
|
11696
|
+
var previewModalWrapper = css90`
|
|
11589
11697
|
background: var(--gray-50);
|
|
11590
11698
|
display: flex;
|
|
11591
11699
|
height: 100%;
|
|
@@ -11594,7 +11702,7 @@ var previewModalWrapper = css89`
|
|
|
11594
11702
|
border: solid 1px var(--gray-300);
|
|
11595
11703
|
border-radius: var(--rounded-sm);
|
|
11596
11704
|
`;
|
|
11597
|
-
var previewModalImage =
|
|
11705
|
+
var previewModalImage = css90`
|
|
11598
11706
|
display: flex;
|
|
11599
11707
|
height: 100%;
|
|
11600
11708
|
width: 100%;
|
|
@@ -11606,32 +11714,32 @@ var previewModalImage = css89`
|
|
|
11606
11714
|
`;
|
|
11607
11715
|
|
|
11608
11716
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
11609
|
-
import { Fragment as Fragment12, jsx as
|
|
11717
|
+
import { Fragment as Fragment12, jsx as jsx118, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
|
|
11610
11718
|
function ParameterImagePreview({ imageSrc }) {
|
|
11611
11719
|
const [showModal, setShowModal] = useState13(false);
|
|
11612
11720
|
return imageSrc ? /* @__PURE__ */ jsxs79("div", { css: previewWrapper, children: [
|
|
11613
|
-
/* @__PURE__ */
|
|
11614
|
-
/* @__PURE__ */
|
|
11721
|
+
/* @__PURE__ */ jsx118(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
|
|
11722
|
+
/* @__PURE__ */ jsx118(
|
|
11615
11723
|
"button",
|
|
11616
11724
|
{
|
|
11617
11725
|
css: previewLink,
|
|
11618
11726
|
onClick: () => {
|
|
11619
11727
|
setShowModal(true);
|
|
11620
11728
|
},
|
|
11621
|
-
children: /* @__PURE__ */
|
|
11729
|
+
children: /* @__PURE__ */ jsx118(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
|
|
11622
11730
|
}
|
|
11623
11731
|
)
|
|
11624
11732
|
] }) : null;
|
|
11625
11733
|
}
|
|
11626
11734
|
var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
11627
|
-
return open ? /* @__PURE__ */
|
|
11628
|
-
/* @__PURE__ */
|
|
11735
|
+
return open ? /* @__PURE__ */ jsx118(Fragment12, { children: createPortal2(
|
|
11736
|
+
/* @__PURE__ */ jsx118(
|
|
11629
11737
|
Modal,
|
|
11630
11738
|
{
|
|
11631
11739
|
header: "Image Preview",
|
|
11632
11740
|
onRequestClose,
|
|
11633
|
-
buttonGroup: /* @__PURE__ */
|
|
11634
|
-
children: /* @__PURE__ */
|
|
11741
|
+
buttonGroup: /* @__PURE__ */ jsx118(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
|
|
11742
|
+
children: /* @__PURE__ */ jsx118("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx118(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
|
|
11635
11743
|
}
|
|
11636
11744
|
),
|
|
11637
11745
|
document.body
|
|
@@ -11639,12 +11747,28 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
|
11639
11747
|
};
|
|
11640
11748
|
|
|
11641
11749
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
11642
|
-
import { css as
|
|
11750
|
+
import { css as css93 } from "@emotion/react";
|
|
11643
11751
|
import { useState as useState14 } from "react";
|
|
11644
11752
|
|
|
11645
11753
|
// src/components/ParameterInputs/styles/ParameterInput.styles.ts
|
|
11646
|
-
import { css as
|
|
11647
|
-
var
|
|
11754
|
+
import { css as css91 } from "@emotion/react";
|
|
11755
|
+
var actionBarVisibilityStyles = css91`
|
|
11756
|
+
[data-action-bar] {
|
|
11757
|
+
opacity: 1;
|
|
11758
|
+
transform: translateX(0);
|
|
11759
|
+
transition:
|
|
11760
|
+
opacity var(--duration-fast) var(--timing-ease-out),
|
|
11761
|
+
transform var(--duration-fast) var(--timing-ease-out);
|
|
11762
|
+
}
|
|
11763
|
+
`;
|
|
11764
|
+
var actionBarVisibilityHiddenStyles = css91`
|
|
11765
|
+
opacity: 0;
|
|
11766
|
+
transform: translateX(1rem);
|
|
11767
|
+
transition:
|
|
11768
|
+
opacity var(--duration-fast) var(--timing-ease-out),
|
|
11769
|
+
transform var(--duration-fast) var(--timing-ease-out);
|
|
11770
|
+
`;
|
|
11771
|
+
var inputContainer2 = css91`
|
|
11648
11772
|
position: relative;
|
|
11649
11773
|
scroll-margin: var(--spacing-2xl);
|
|
11650
11774
|
|
|
@@ -11655,16 +11779,17 @@ var inputContainer2 = css90`
|
|
|
11655
11779
|
opacity: var(--opacity-100);
|
|
11656
11780
|
translate: 0 0;
|
|
11657
11781
|
}
|
|
11782
|
+
${actionBarVisibilityStyles}
|
|
11658
11783
|
}
|
|
11659
11784
|
`;
|
|
11660
|
-
var labelText2 =
|
|
11785
|
+
var labelText2 = css91`
|
|
11661
11786
|
align-items: center;
|
|
11662
11787
|
display: flex;
|
|
11663
11788
|
gap: var(--spacing-xs);
|
|
11664
11789
|
font-weight: var(--fw-regular);
|
|
11665
11790
|
margin: 0 0 var(--spacing-xs);
|
|
11666
11791
|
`;
|
|
11667
|
-
var input3 =
|
|
11792
|
+
var input3 = css91`
|
|
11668
11793
|
display: block;
|
|
11669
11794
|
appearance: none;
|
|
11670
11795
|
box-sizing: border-box;
|
|
@@ -11712,18 +11837,18 @@ var input3 = css90`
|
|
|
11712
11837
|
color: var(--gray-400);
|
|
11713
11838
|
}
|
|
11714
11839
|
`;
|
|
11715
|
-
var selectInput =
|
|
11840
|
+
var selectInput = css91`
|
|
11716
11841
|
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");
|
|
11717
11842
|
background-position: right var(--spacing-sm) center;
|
|
11718
11843
|
background-repeat: no-repeat;
|
|
11719
11844
|
background-size: 1rem;
|
|
11720
11845
|
padding-right: var(--spacing-xl);
|
|
11721
11846
|
`;
|
|
11722
|
-
var inputWrapper =
|
|
11847
|
+
var inputWrapper = css91`
|
|
11723
11848
|
display: flex; // used to correct overflow with chrome textarea
|
|
11724
11849
|
position: relative;
|
|
11725
11850
|
`;
|
|
11726
|
-
var inputIcon2 =
|
|
11851
|
+
var inputIcon2 = css91`
|
|
11727
11852
|
align-items: center;
|
|
11728
11853
|
background: var(--white);
|
|
11729
11854
|
border-radius: var(--rounded-md) 0 0 var(--rounded-md);
|
|
@@ -11739,7 +11864,7 @@ var inputIcon2 = css90`
|
|
|
11739
11864
|
width: var(--spacing-lg);
|
|
11740
11865
|
z-index: var(--z-10);
|
|
11741
11866
|
`;
|
|
11742
|
-
var inputToggleLabel2 =
|
|
11867
|
+
var inputToggleLabel2 = css91`
|
|
11743
11868
|
--inline-label-color: var(--typography-base);
|
|
11744
11869
|
align-items: center;
|
|
11745
11870
|
cursor: pointer;
|
|
@@ -11754,7 +11879,7 @@ var inputToggleLabel2 = css90`
|
|
|
11754
11879
|
--inline-label-color: var(--gray-400);
|
|
11755
11880
|
}
|
|
11756
11881
|
`;
|
|
11757
|
-
var toggleInput2 =
|
|
11882
|
+
var toggleInput2 = css91`
|
|
11758
11883
|
appearance: none;
|
|
11759
11884
|
border: 1px solid var(--gray-200);
|
|
11760
11885
|
background: var(--white);
|
|
@@ -11808,7 +11933,7 @@ var toggleInput2 = css90`
|
|
|
11808
11933
|
border-color: var(--gray-300);
|
|
11809
11934
|
}
|
|
11810
11935
|
`;
|
|
11811
|
-
var inlineLabel2 =
|
|
11936
|
+
var inlineLabel2 = css91`
|
|
11812
11937
|
color: var(--inline-label-color);
|
|
11813
11938
|
padding-left: var(--spacing-md);
|
|
11814
11939
|
font-size: var(--fs-sm);
|
|
@@ -11825,7 +11950,7 @@ var inlineLabel2 = css90`
|
|
|
11825
11950
|
}
|
|
11826
11951
|
}
|
|
11827
11952
|
`;
|
|
11828
|
-
var inputMenu =
|
|
11953
|
+
var inputMenu = css91`
|
|
11829
11954
|
background: none;
|
|
11830
11955
|
border: none;
|
|
11831
11956
|
padding: var(--spacing-2xs);
|
|
@@ -11833,12 +11958,15 @@ var inputMenu = css90`
|
|
|
11833
11958
|
top: calc(var(--spacing-md) * -1.2);
|
|
11834
11959
|
right: 0;
|
|
11835
11960
|
`;
|
|
11836
|
-
var inputActionItems =
|
|
11961
|
+
var inputActionItems = css91`
|
|
11837
11962
|
display: flex;
|
|
11963
|
+
${actionBarVisibilityHiddenStyles}
|
|
11838
11964
|
`;
|
|
11839
|
-
var inputMenuHover =
|
|
11965
|
+
var inputMenuHover = css91`
|
|
11840
11966
|
opacity: var(--opacity-50);
|
|
11841
11967
|
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
11968
|
+
margin-top: 0.25rem;
|
|
11969
|
+
${actionBarVisibilityHiddenStyles}
|
|
11842
11970
|
|
|
11843
11971
|
// css trick to style the input like a hover or active state when the menu button is active or hovered
|
|
11844
11972
|
&:hover,
|
|
@@ -11846,11 +11974,11 @@ var inputMenuHover = css90`
|
|
|
11846
11974
|
background-color: var(--gray-200);
|
|
11847
11975
|
}
|
|
11848
11976
|
`;
|
|
11849
|
-
var textarea2 =
|
|
11977
|
+
var textarea2 = css91`
|
|
11850
11978
|
resize: vertical;
|
|
11851
11979
|
min-height: 2rem;
|
|
11852
11980
|
`;
|
|
11853
|
-
var dataConnectButton =
|
|
11981
|
+
var dataConnectButton = css91`
|
|
11854
11982
|
align-items: center;
|
|
11855
11983
|
appearance: none;
|
|
11856
11984
|
box-sizing: border-box;
|
|
@@ -11886,7 +12014,7 @@ var dataConnectButton = css90`
|
|
|
11886
12014
|
pointer-events: none;
|
|
11887
12015
|
}
|
|
11888
12016
|
`;
|
|
11889
|
-
var linkParameterBtn =
|
|
12017
|
+
var linkParameterBtn = css91`
|
|
11890
12018
|
border-radius: var(--rounded-base);
|
|
11891
12019
|
background: transparent;
|
|
11892
12020
|
border: none;
|
|
@@ -11895,7 +12023,7 @@ var linkParameterBtn = css90`
|
|
|
11895
12023
|
font-size: var(--fs-sm);
|
|
11896
12024
|
line-height: 1;
|
|
11897
12025
|
`;
|
|
11898
|
-
var linkParameterControls =
|
|
12026
|
+
var linkParameterControls = css91`
|
|
11899
12027
|
position: absolute;
|
|
11900
12028
|
inset: 0 0 0 auto;
|
|
11901
12029
|
padding: 0 var(--spacing-base);
|
|
@@ -11904,7 +12032,7 @@ var linkParameterControls = css90`
|
|
|
11904
12032
|
justify-content: center;
|
|
11905
12033
|
gap: var(--spacing-base);
|
|
11906
12034
|
`;
|
|
11907
|
-
var linkParameterInput = (withExternalLinkIcon) =>
|
|
12035
|
+
var linkParameterInput = (withExternalLinkIcon) => css91`
|
|
11908
12036
|
padding-right: calc(
|
|
11909
12037
|
${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
|
|
11910
12038
|
var(--spacing-base)
|
|
@@ -11917,7 +12045,7 @@ var linkParameterInput = (withExternalLinkIcon) => css90`
|
|
|
11917
12045
|
}
|
|
11918
12046
|
}
|
|
11919
12047
|
`;
|
|
11920
|
-
var linkParameterIcon =
|
|
12048
|
+
var linkParameterIcon = css91`
|
|
11921
12049
|
align-items: center;
|
|
11922
12050
|
color: var(--brand-secondary-3);
|
|
11923
12051
|
display: flex;
|
|
@@ -11932,28 +12060,29 @@ var linkParameterIcon = css90`
|
|
|
11932
12060
|
`;
|
|
11933
12061
|
|
|
11934
12062
|
// src/components/ParameterInputs/ParameterLabel.tsx
|
|
11935
|
-
import { jsx as
|
|
12063
|
+
import { jsx as jsx119 } from "@emotion/react/jsx-runtime";
|
|
11936
12064
|
var ParameterLabel = ({ id, asSpan, children, testId, ...props }) => {
|
|
11937
|
-
return !asSpan ? /* @__PURE__ */
|
|
12065
|
+
return !asSpan ? /* @__PURE__ */ jsx119("label", { ...props, htmlFor: id, css: labelText2, "data-testid": testId, children }) : /* @__PURE__ */ jsx119("span", { "aria-labelledby": id, css: labelText2, children });
|
|
11938
12066
|
};
|
|
11939
12067
|
|
|
11940
12068
|
// src/components/ParameterInputs/ParameterMenuButton.tsx
|
|
11941
12069
|
import { forwardRef as forwardRef21 } from "react";
|
|
11942
|
-
import { jsx as
|
|
12070
|
+
import { jsx as jsx120 } from "@emotion/react/jsx-runtime";
|
|
11943
12071
|
var ParameterMenuButton = forwardRef21(
|
|
11944
12072
|
({ label, children }, ref) => {
|
|
11945
|
-
return /* @__PURE__ */
|
|
12073
|
+
return /* @__PURE__ */ jsx120(
|
|
11946
12074
|
Menu,
|
|
11947
12075
|
{
|
|
11948
|
-
menuTrigger: /* @__PURE__ */
|
|
12076
|
+
menuTrigger: /* @__PURE__ */ jsx120(
|
|
11949
12077
|
"button",
|
|
11950
12078
|
{
|
|
12079
|
+
"data-action-bar": true,
|
|
11951
12080
|
className: "parameter-menu",
|
|
11952
12081
|
css: [inputMenu, inputMenuHover],
|
|
11953
12082
|
type: "button",
|
|
11954
12083
|
"aria-label": `${label} options`,
|
|
11955
12084
|
ref,
|
|
11956
|
-
children: /* @__PURE__ */
|
|
12085
|
+
children: /* @__PURE__ */ jsx120(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
|
|
11957
12086
|
}
|
|
11958
12087
|
),
|
|
11959
12088
|
children
|
|
@@ -11963,14 +12092,14 @@ var ParameterMenuButton = forwardRef21(
|
|
|
11963
12092
|
);
|
|
11964
12093
|
|
|
11965
12094
|
// src/components/ParameterInputs/styles/ParameterShell.styles.ts
|
|
11966
|
-
import { css as
|
|
11967
|
-
var emptyParameterShell =
|
|
12095
|
+
import { css as css92 } from "@emotion/react";
|
|
12096
|
+
var emptyParameterShell = css92`
|
|
11968
12097
|
border-radius: var(--rounded-sm);
|
|
11969
12098
|
flex-grow: 1;
|
|
11970
12099
|
position: relative;
|
|
11971
12100
|
max-width: 100%;
|
|
11972
12101
|
`;
|
|
11973
|
-
var emptyParameterShellText =
|
|
12102
|
+
var emptyParameterShellText = css92`
|
|
11974
12103
|
background: var(--brand-secondary-6);
|
|
11975
12104
|
border-radius: var(--rounded-sm);
|
|
11976
12105
|
padding: var(--spacing-sm);
|
|
@@ -11978,7 +12107,7 @@ var emptyParameterShellText = css91`
|
|
|
11978
12107
|
font-size: var(--fs-sm);
|
|
11979
12108
|
margin: 0;
|
|
11980
12109
|
`;
|
|
11981
|
-
var overrideMarker =
|
|
12110
|
+
var overrideMarker = css92`
|
|
11982
12111
|
border-radius: var(--rounded-sm);
|
|
11983
12112
|
border: 10px solid var(--gray-300);
|
|
11984
12113
|
border-left-color: transparent;
|
|
@@ -11989,7 +12118,7 @@ var overrideMarker = css91`
|
|
|
11989
12118
|
`;
|
|
11990
12119
|
|
|
11991
12120
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
11992
|
-
import { jsx as
|
|
12121
|
+
import { jsx as jsx121, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
|
|
11993
12122
|
var extractParameterProps = (props) => {
|
|
11994
12123
|
const {
|
|
11995
12124
|
id,
|
|
@@ -12064,21 +12193,22 @@ var ParameterShell = ({
|
|
|
12064
12193
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
12065
12194
|
] }),
|
|
12066
12195
|
/* @__PURE__ */ jsxs80("div", { css: inputWrapper, children: [
|
|
12067
|
-
actionItems ? /* @__PURE__ */
|
|
12196
|
+
actionItems ? /* @__PURE__ */ jsx121(
|
|
12068
12197
|
"div",
|
|
12069
12198
|
{
|
|
12199
|
+
"data-action-bar": true,
|
|
12070
12200
|
css: [
|
|
12071
12201
|
inputMenu,
|
|
12072
12202
|
inputActionItems,
|
|
12073
|
-
menuItems ?
|
|
12203
|
+
menuItems ? css93`
|
|
12074
12204
|
right: var(--spacing-md);
|
|
12075
12205
|
` : void 0
|
|
12076
12206
|
],
|
|
12077
12207
|
children: actionItems
|
|
12078
12208
|
}
|
|
12079
12209
|
) : null,
|
|
12080
|
-
menuItems ? /* @__PURE__ */
|
|
12081
|
-
/* @__PURE__ */
|
|
12210
|
+
menuItems ? /* @__PURE__ */ jsx121(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
|
|
12211
|
+
/* @__PURE__ */ jsx121(
|
|
12082
12212
|
ParameterShellContext.Provider,
|
|
12083
12213
|
{
|
|
12084
12214
|
value: {
|
|
@@ -12088,14 +12218,14 @@ var ParameterShell = ({
|
|
|
12088
12218
|
errorMessage: errorMessaging,
|
|
12089
12219
|
handleManuallySetErrorMessage: (message) => setErrorMessage(message)
|
|
12090
12220
|
},
|
|
12091
|
-
children: isParameterGroup ? /* @__PURE__ */
|
|
12221
|
+
children: isParameterGroup ? /* @__PURE__ */ jsx121("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ jsxs80(ParameterShellPlaceholder, { children: [
|
|
12092
12222
|
children,
|
|
12093
|
-
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */
|
|
12223
|
+
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx121(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
|
|
12094
12224
|
] })
|
|
12095
12225
|
}
|
|
12096
12226
|
)
|
|
12097
12227
|
] }),
|
|
12098
|
-
/* @__PURE__ */
|
|
12228
|
+
/* @__PURE__ */ jsx121(
|
|
12099
12229
|
FieldMessage,
|
|
12100
12230
|
{
|
|
12101
12231
|
helperMessageTestId: captionTestId,
|
|
@@ -12109,17 +12239,17 @@ var ParameterShell = ({
|
|
|
12109
12239
|
] });
|
|
12110
12240
|
};
|
|
12111
12241
|
var ParameterShellPlaceholder = ({ children }) => {
|
|
12112
|
-
return /* @__PURE__ */
|
|
12242
|
+
return /* @__PURE__ */ jsx121("div", { css: emptyParameterShell, children });
|
|
12113
12243
|
};
|
|
12114
|
-
var ParameterOverrideMarker = (props) => /* @__PURE__ */
|
|
12244
|
+
var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx121(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx121("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx121("span", { hidden: true, children: "reset overridden value to default" }) }) });
|
|
12115
12245
|
|
|
12116
12246
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
12117
|
-
import { Fragment as Fragment13, jsx as
|
|
12247
|
+
import { Fragment as Fragment13, jsx as jsx122, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
|
|
12118
12248
|
var ParameterImage = forwardRef22(
|
|
12119
12249
|
({ children, ...props }, ref) => {
|
|
12120
12250
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
12121
12251
|
return /* @__PURE__ */ jsxs81(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
|
|
12122
|
-
/* @__PURE__ */
|
|
12252
|
+
/* @__PURE__ */ jsx122(ParameterImageInner, { ref, ...innerProps }),
|
|
12123
12253
|
children
|
|
12124
12254
|
] });
|
|
12125
12255
|
}
|
|
@@ -12129,7 +12259,7 @@ var ParameterImageInner = forwardRef22((props, ref) => {
|
|
|
12129
12259
|
const { id, label, hiddenLabel, errorMessage } = useParameterShell();
|
|
12130
12260
|
const deferredValue = useDeferredValue(value);
|
|
12131
12261
|
return /* @__PURE__ */ jsxs81(Fragment13, { children: [
|
|
12132
|
-
/* @__PURE__ */
|
|
12262
|
+
/* @__PURE__ */ jsx122(
|
|
12133
12263
|
"input",
|
|
12134
12264
|
{
|
|
12135
12265
|
css: input3,
|
|
@@ -12141,21 +12271,21 @@ var ParameterImageInner = forwardRef22((props, ref) => {
|
|
|
12141
12271
|
...props
|
|
12142
12272
|
}
|
|
12143
12273
|
),
|
|
12144
|
-
errorMessage || props.disablePreview ? null : /* @__PURE__ */
|
|
12274
|
+
errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx122(ParameterImagePreview, { imageSrc: deferredValue })
|
|
12145
12275
|
] });
|
|
12146
12276
|
});
|
|
12147
12277
|
|
|
12148
12278
|
// src/components/ParameterInputs/ParameterInput.tsx
|
|
12149
12279
|
import { forwardRef as forwardRef23 } from "react";
|
|
12150
|
-
import { jsx as
|
|
12280
|
+
import { jsx as jsx123 } from "@emotion/react/jsx-runtime";
|
|
12151
12281
|
var ParameterInput = forwardRef23((props, ref) => {
|
|
12152
12282
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
12153
|
-
return /* @__PURE__ */
|
|
12283
|
+
return /* @__PURE__ */ jsx123(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx123(ParameterInputInner, { ref, ...innerProps }) });
|
|
12154
12284
|
});
|
|
12155
12285
|
var ParameterInputInner = forwardRef23(({ enableMouseWheel = false, ...props }, ref) => {
|
|
12156
12286
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
12157
12287
|
const isNumberInputAndMouseWheelDisabled = enableMouseWheel !== true && props.type === "number";
|
|
12158
|
-
return /* @__PURE__ */
|
|
12288
|
+
return /* @__PURE__ */ jsx123(
|
|
12159
12289
|
"input",
|
|
12160
12290
|
{
|
|
12161
12291
|
css: input3,
|
|
@@ -12172,18 +12302,18 @@ var ParameterInputInner = forwardRef23(({ enableMouseWheel = false, ...props },
|
|
|
12172
12302
|
|
|
12173
12303
|
// src/components/ParameterInputs/ParameterLink.tsx
|
|
12174
12304
|
import { forwardRef as forwardRef24 } from "react";
|
|
12175
|
-
import { jsx as
|
|
12305
|
+
import { jsx as jsx124, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
|
|
12176
12306
|
var ParameterLink = forwardRef24(
|
|
12177
12307
|
({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
|
|
12178
12308
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
12179
|
-
return /* @__PURE__ */
|
|
12309
|
+
return /* @__PURE__ */ jsx124(
|
|
12180
12310
|
ParameterShell,
|
|
12181
12311
|
{
|
|
12182
12312
|
"data-testid": "link-parameter-editor",
|
|
12183
12313
|
...shellProps,
|
|
12184
12314
|
label: innerProps.value ? shellProps.label : "",
|
|
12185
12315
|
title: !innerProps.value && typeof shellProps.label === "string" ? shellProps.label : void 0,
|
|
12186
|
-
children: /* @__PURE__ */
|
|
12316
|
+
children: /* @__PURE__ */ jsx124(
|
|
12187
12317
|
ParameterLinkInner,
|
|
12188
12318
|
{
|
|
12189
12319
|
onConnectLink,
|
|
@@ -12200,9 +12330,9 @@ var ParameterLinkInner = forwardRef24(
|
|
|
12200
12330
|
({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
|
|
12201
12331
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
12202
12332
|
if (!props.value)
|
|
12203
|
-
return /* @__PURE__ */
|
|
12333
|
+
return /* @__PURE__ */ jsx124("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
|
|
12204
12334
|
return /* @__PURE__ */ jsxs82("div", { css: inputWrapper, children: [
|
|
12205
|
-
/* @__PURE__ */
|
|
12335
|
+
/* @__PURE__ */ jsx124(
|
|
12206
12336
|
"input",
|
|
12207
12337
|
{
|
|
12208
12338
|
type: "text",
|
|
@@ -12215,7 +12345,7 @@ var ParameterLinkInner = forwardRef24(
|
|
|
12215
12345
|
}
|
|
12216
12346
|
),
|
|
12217
12347
|
/* @__PURE__ */ jsxs82("div", { css: linkParameterControls, children: [
|
|
12218
|
-
/* @__PURE__ */
|
|
12348
|
+
/* @__PURE__ */ jsx124(
|
|
12219
12349
|
"button",
|
|
12220
12350
|
{
|
|
12221
12351
|
type: "button",
|
|
@@ -12227,7 +12357,7 @@ var ParameterLinkInner = forwardRef24(
|
|
|
12227
12357
|
children: "edit"
|
|
12228
12358
|
}
|
|
12229
12359
|
),
|
|
12230
|
-
externalLink ? /* @__PURE__ */
|
|
12360
|
+
externalLink ? /* @__PURE__ */ jsx124(
|
|
12231
12361
|
"a",
|
|
12232
12362
|
{
|
|
12233
12363
|
href: externalLink,
|
|
@@ -12235,7 +12365,7 @@ var ParameterLinkInner = forwardRef24(
|
|
|
12235
12365
|
title: "Open link in new tab",
|
|
12236
12366
|
target: "_blank",
|
|
12237
12367
|
rel: "noopener noreferrer",
|
|
12238
|
-
children: /* @__PURE__ */
|
|
12368
|
+
children: /* @__PURE__ */ jsx124(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
|
|
12239
12369
|
}
|
|
12240
12370
|
) : null
|
|
12241
12371
|
] })
|
|
@@ -12244,15 +12374,15 @@ var ParameterLinkInner = forwardRef24(
|
|
|
12244
12374
|
);
|
|
12245
12375
|
|
|
12246
12376
|
// src/components/ParameterInputs/ParameterMultiSelect.tsx
|
|
12247
|
-
import { jsx as
|
|
12377
|
+
import { jsx as jsx125 } from "@emotion/react/jsx-runtime";
|
|
12248
12378
|
var ParameterMultiSelect = ({ disabled: disabled2 = false, ...props }) => {
|
|
12249
12379
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
12250
|
-
return /* @__PURE__ */
|
|
12380
|
+
return /* @__PURE__ */ jsx125(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx125(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
|
|
12251
12381
|
};
|
|
12252
12382
|
var ParameterMultiSelectInner = (props) => {
|
|
12253
12383
|
var _a;
|
|
12254
12384
|
const { id, label } = useParameterShell();
|
|
12255
|
-
return /* @__PURE__ */
|
|
12385
|
+
return /* @__PURE__ */ jsx125(
|
|
12256
12386
|
InputComboBox,
|
|
12257
12387
|
{
|
|
12258
12388
|
menuPortalTarget: document.body,
|
|
@@ -12302,7 +12432,7 @@ var ParameterMultiSelectInner = (props) => {
|
|
|
12302
12432
|
};
|
|
12303
12433
|
|
|
12304
12434
|
// src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
|
|
12305
|
-
import { Fragment as Fragment14, jsx as
|
|
12435
|
+
import { Fragment as Fragment14, jsx as jsx126, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
|
|
12306
12436
|
var ParameterNameAndPublicIdInput = ({
|
|
12307
12437
|
id,
|
|
12308
12438
|
onBlur,
|
|
@@ -12329,7 +12459,7 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
12329
12459
|
};
|
|
12330
12460
|
autoFocus == null ? void 0 : autoFocus();
|
|
12331
12461
|
return /* @__PURE__ */ jsxs83(Fragment14, { children: [
|
|
12332
|
-
/* @__PURE__ */
|
|
12462
|
+
/* @__PURE__ */ jsx126(
|
|
12333
12463
|
ParameterInput,
|
|
12334
12464
|
{
|
|
12335
12465
|
id: nameIdField,
|
|
@@ -12348,7 +12478,7 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
12348
12478
|
value: values[nameIdField]
|
|
12349
12479
|
}
|
|
12350
12480
|
),
|
|
12351
|
-
/* @__PURE__ */
|
|
12481
|
+
/* @__PURE__ */ jsx126(
|
|
12352
12482
|
ParameterInput,
|
|
12353
12483
|
{
|
|
12354
12484
|
id: publicIdFieldName,
|
|
@@ -12362,11 +12492,11 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
12362
12492
|
caption: !publicIdError ? publicIdCaption : void 0,
|
|
12363
12493
|
placeholder: publicIdPlaceholderText,
|
|
12364
12494
|
errorMessage: publicIdError,
|
|
12365
|
-
menuItems: /* @__PURE__ */
|
|
12495
|
+
menuItems: /* @__PURE__ */ jsx126(
|
|
12366
12496
|
MenuItem,
|
|
12367
12497
|
{
|
|
12368
12498
|
disabled: !values[publicIdFieldName],
|
|
12369
|
-
icon: /* @__PURE__ */
|
|
12499
|
+
icon: /* @__PURE__ */ jsx126(Icon, { icon: "path-trim", iconColor: "currentColor" }),
|
|
12370
12500
|
onClick: handleCopyPidFieldValue,
|
|
12371
12501
|
children: "Copy"
|
|
12372
12502
|
}
|
|
@@ -12374,12 +12504,12 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
12374
12504
|
value: values[publicIdFieldName]
|
|
12375
12505
|
}
|
|
12376
12506
|
),
|
|
12377
|
-
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */
|
|
12507
|
+
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx126(Callout, { type: "caution", children: warnOverLength.message }) : null
|
|
12378
12508
|
] });
|
|
12379
12509
|
};
|
|
12380
12510
|
|
|
12381
12511
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
12382
|
-
import { css as
|
|
12512
|
+
import { css as css99 } from "@emotion/react";
|
|
12383
12513
|
import { ListItemNode, ListNode as ListNode3 } from "@lexical/list";
|
|
12384
12514
|
import {
|
|
12385
12515
|
CODE,
|
|
@@ -12561,23 +12691,23 @@ function DisableStylesPlugin() {
|
|
|
12561
12691
|
}
|
|
12562
12692
|
|
|
12563
12693
|
// src/components/ParameterInputs/rich-text/editorStyles.ts
|
|
12564
|
-
import { css as
|
|
12565
|
-
var textBold =
|
|
12694
|
+
import { css as css94 } from "@emotion/css";
|
|
12695
|
+
var textBold = css94`
|
|
12566
12696
|
font-weight: 700;
|
|
12567
12697
|
`;
|
|
12568
|
-
var textItalic =
|
|
12698
|
+
var textItalic = css94`
|
|
12569
12699
|
font-style: italic;
|
|
12570
12700
|
`;
|
|
12571
|
-
var textUnderline =
|
|
12701
|
+
var textUnderline = css94`
|
|
12572
12702
|
text-decoration: underline;
|
|
12573
12703
|
`;
|
|
12574
|
-
var textStrikethrough =
|
|
12704
|
+
var textStrikethrough = css94`
|
|
12575
12705
|
text-decoration: line-through;
|
|
12576
12706
|
`;
|
|
12577
|
-
var textUnderlineStrikethrough =
|
|
12707
|
+
var textUnderlineStrikethrough = css94`
|
|
12578
12708
|
text-decoration: underline line-through;
|
|
12579
12709
|
`;
|
|
12580
|
-
var textCode =
|
|
12710
|
+
var textCode = css94`
|
|
12581
12711
|
background-color: var(--gray-100);
|
|
12582
12712
|
border-radius: var(--rounded-sm);
|
|
12583
12713
|
display: inline-block;
|
|
@@ -12588,68 +12718,68 @@ var textCode = css93`
|
|
|
12588
12718
|
padding-left: var(--spacing-xs);
|
|
12589
12719
|
padding-right: var(--spacing-xs);
|
|
12590
12720
|
`;
|
|
12591
|
-
var textSuperscript =
|
|
12721
|
+
var textSuperscript = css94`
|
|
12592
12722
|
vertical-align: super;
|
|
12593
12723
|
font-size: smaller;
|
|
12594
12724
|
`;
|
|
12595
|
-
var textSubscript =
|
|
12725
|
+
var textSubscript = css94`
|
|
12596
12726
|
vertical-align: sub;
|
|
12597
12727
|
font-size: smaller;
|
|
12598
12728
|
`;
|
|
12599
|
-
var linkElement =
|
|
12729
|
+
var linkElement = css94`
|
|
12600
12730
|
${link}
|
|
12601
12731
|
${linkColorDefault}
|
|
12602
12732
|
text-decoration: underline;
|
|
12603
12733
|
`;
|
|
12604
|
-
var h12 =
|
|
12734
|
+
var h12 = css94`
|
|
12605
12735
|
font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
|
|
12606
12736
|
`;
|
|
12607
|
-
var h22 =
|
|
12737
|
+
var h22 = css94`
|
|
12608
12738
|
font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
|
|
12609
12739
|
`;
|
|
12610
|
-
var h32 =
|
|
12740
|
+
var h32 = css94`
|
|
12611
12741
|
font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
|
|
12612
12742
|
`;
|
|
12613
|
-
var h42 =
|
|
12743
|
+
var h42 = css94`
|
|
12614
12744
|
font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
|
|
12615
12745
|
`;
|
|
12616
|
-
var h52 =
|
|
12746
|
+
var h52 = css94`
|
|
12617
12747
|
font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
|
|
12618
12748
|
`;
|
|
12619
|
-
var h62 =
|
|
12749
|
+
var h62 = css94`
|
|
12620
12750
|
font-size: var(--fs-base);
|
|
12621
12751
|
`;
|
|
12622
|
-
var heading1Element =
|
|
12752
|
+
var heading1Element = css94`
|
|
12623
12753
|
${h12}
|
|
12624
12754
|
${commonHeadingAttr(true)}
|
|
12625
12755
|
${commonLineHeight}
|
|
12626
12756
|
`;
|
|
12627
|
-
var heading2Element =
|
|
12757
|
+
var heading2Element = css94`
|
|
12628
12758
|
${h22}
|
|
12629
12759
|
${commonHeadingAttr(true)}
|
|
12630
12760
|
${commonLineHeight}
|
|
12631
12761
|
`;
|
|
12632
|
-
var heading3Element =
|
|
12762
|
+
var heading3Element = css94`
|
|
12633
12763
|
${h32}
|
|
12634
12764
|
${commonHeadingAttr(true)}
|
|
12635
12765
|
${commonLineHeight}
|
|
12636
12766
|
`;
|
|
12637
|
-
var heading4Element =
|
|
12767
|
+
var heading4Element = css94`
|
|
12638
12768
|
${h42}
|
|
12639
12769
|
${commonHeadingAttr(true)}
|
|
12640
12770
|
${commonLineHeight}
|
|
12641
12771
|
`;
|
|
12642
|
-
var heading5Element =
|
|
12772
|
+
var heading5Element = css94`
|
|
12643
12773
|
${h52}
|
|
12644
12774
|
${commonHeadingAttr(true)}
|
|
12645
12775
|
${commonLineHeight}
|
|
12646
12776
|
`;
|
|
12647
|
-
var heading6Element =
|
|
12777
|
+
var heading6Element = css94`
|
|
12648
12778
|
${h62}
|
|
12649
12779
|
${commonHeadingAttr(true)}
|
|
12650
12780
|
${commonLineHeight}
|
|
12651
12781
|
`;
|
|
12652
|
-
var paragraphElement =
|
|
12782
|
+
var paragraphElement = css94`
|
|
12653
12783
|
line-height: 1.5;
|
|
12654
12784
|
margin-bottom: var(--spacing-base);
|
|
12655
12785
|
|
|
@@ -12657,7 +12787,7 @@ var paragraphElement = css93`
|
|
|
12657
12787
|
margin-bottom: 0;
|
|
12658
12788
|
}
|
|
12659
12789
|
`;
|
|
12660
|
-
var orderedListElement =
|
|
12790
|
+
var orderedListElement = css94`
|
|
12661
12791
|
${commonLineHeight}
|
|
12662
12792
|
display: block;
|
|
12663
12793
|
list-style: decimal;
|
|
@@ -12686,7 +12816,7 @@ var orderedListElement = css93`
|
|
|
12686
12816
|
}
|
|
12687
12817
|
}
|
|
12688
12818
|
`;
|
|
12689
|
-
var unorderedListElement =
|
|
12819
|
+
var unorderedListElement = css94`
|
|
12690
12820
|
${commonLineHeight}
|
|
12691
12821
|
display: block;
|
|
12692
12822
|
list-style: disc;
|
|
@@ -12707,13 +12837,13 @@ var unorderedListElement = css93`
|
|
|
12707
12837
|
}
|
|
12708
12838
|
}
|
|
12709
12839
|
`;
|
|
12710
|
-
var listItemElement =
|
|
12840
|
+
var listItemElement = css94`
|
|
12711
12841
|
margin-left: var(--spacing-md);
|
|
12712
12842
|
`;
|
|
12713
|
-
var nestedListItemElement =
|
|
12843
|
+
var nestedListItemElement = css94`
|
|
12714
12844
|
list-style-type: none;
|
|
12715
12845
|
`;
|
|
12716
|
-
var blockquoteElement =
|
|
12846
|
+
var blockquoteElement = css94`
|
|
12717
12847
|
border-left: 0.25rem solid var(--gray-300);
|
|
12718
12848
|
color: var(--gray-600);
|
|
12719
12849
|
margin-bottom: var(--spacing-base);
|
|
@@ -12723,7 +12853,7 @@ var blockquoteElement = css93`
|
|
|
12723
12853
|
margin-bottom: 0;
|
|
12724
12854
|
}
|
|
12725
12855
|
`;
|
|
12726
|
-
var codeElement =
|
|
12856
|
+
var codeElement = css94`
|
|
12727
12857
|
background-color: var(--gray-100);
|
|
12728
12858
|
border-radius: var(--rounded-sm);
|
|
12729
12859
|
display: block;
|
|
@@ -12738,7 +12868,7 @@ var codeElement = css93`
|
|
|
12738
12868
|
margin-bottom: 0;
|
|
12739
12869
|
}
|
|
12740
12870
|
`;
|
|
12741
|
-
var tableElement =
|
|
12871
|
+
var tableElement = css94`
|
|
12742
12872
|
border-collapse: collapse;
|
|
12743
12873
|
border-spacing: 0;
|
|
12744
12874
|
border-color: var(--gray-300);
|
|
@@ -12751,7 +12881,7 @@ var tableElement = css93`
|
|
|
12751
12881
|
margin-bottom: 0;
|
|
12752
12882
|
}
|
|
12753
12883
|
`;
|
|
12754
|
-
var tableCellElement =
|
|
12884
|
+
var tableCellElement = css94`
|
|
12755
12885
|
background-color: var(--white);
|
|
12756
12886
|
border-color: var(--gray-300);
|
|
12757
12887
|
border-style: solid;
|
|
@@ -12787,7 +12917,7 @@ var tableCellElement = css93`
|
|
|
12787
12917
|
z-index: 1;
|
|
12788
12918
|
}
|
|
12789
12919
|
`;
|
|
12790
|
-
var tableHeaderElement =
|
|
12920
|
+
var tableHeaderElement = css94`
|
|
12791
12921
|
background-color: var(--gray-100);
|
|
12792
12922
|
border-color: var(--gray-300);
|
|
12793
12923
|
border-style: solid;
|
|
@@ -12857,7 +12987,7 @@ var ImprovedAssetSelectionPlugin = () => {
|
|
|
12857
12987
|
var ImprovedAssetSelectionPlugin_default = ImprovedAssetSelectionPlugin;
|
|
12858
12988
|
|
|
12859
12989
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
12860
|
-
import { css as
|
|
12990
|
+
import { css as css95 } from "@emotion/react";
|
|
12861
12991
|
import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexical/react/LexicalComposerContext";
|
|
12862
12992
|
import { NodeEventPlugin } from "@lexical/react/LexicalNodeEventPlugin";
|
|
12863
12993
|
import {
|
|
@@ -12940,7 +13070,7 @@ var normalizeStateForDeepEqualComparison = (editorState) => {
|
|
|
12940
13070
|
};
|
|
12941
13071
|
|
|
12942
13072
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
12943
|
-
import { Fragment as Fragment15, jsx as
|
|
13073
|
+
import { Fragment as Fragment15, jsx as jsx127, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
|
|
12944
13074
|
var isProjectMapLinkValue = (value) => {
|
|
12945
13075
|
return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
|
|
12946
13076
|
value.nodeId && value.path && value.projectMapId
|
|
@@ -13229,17 +13359,17 @@ var OPEN_LINK_NODE_MODAL_COMMAND = createCommand(
|
|
|
13229
13359
|
);
|
|
13230
13360
|
var LINK_POPOVER_OFFSET_X = 0;
|
|
13231
13361
|
var LINK_POPOVER_OFFSET_Y = 8;
|
|
13232
|
-
var linkPopover =
|
|
13362
|
+
var linkPopover = css95`
|
|
13233
13363
|
position: absolute;
|
|
13234
13364
|
z-index: 11;
|
|
13235
13365
|
`;
|
|
13236
|
-
var linkPopoverContainer =
|
|
13366
|
+
var linkPopoverContainer = css95`
|
|
13237
13367
|
${Popover};
|
|
13238
13368
|
${PopoverVariantSmall};
|
|
13239
13369
|
align-items: center;
|
|
13240
13370
|
display: flex;
|
|
13241
13371
|
`;
|
|
13242
|
-
var linkPopoverAnchor =
|
|
13372
|
+
var linkPopoverAnchor = css95`
|
|
13243
13373
|
${link}
|
|
13244
13374
|
${linkColorDefault}
|
|
13245
13375
|
`;
|
|
@@ -13428,7 +13558,7 @@ function LinkNodePlugin({
|
|
|
13428
13558
|
});
|
|
13429
13559
|
};
|
|
13430
13560
|
return /* @__PURE__ */ jsxs84(Fragment15, { children: [
|
|
13431
|
-
/* @__PURE__ */
|
|
13561
|
+
/* @__PURE__ */ jsx127(
|
|
13432
13562
|
NodeEventPlugin,
|
|
13433
13563
|
{
|
|
13434
13564
|
nodeType: LinkNode,
|
|
@@ -13438,7 +13568,7 @@ function LinkNodePlugin({
|
|
|
13438
13568
|
}
|
|
13439
13569
|
}
|
|
13440
13570
|
),
|
|
13441
|
-
linkPopoverState ? /* @__PURE__ */
|
|
13571
|
+
linkPopoverState ? /* @__PURE__ */ jsx127(
|
|
13442
13572
|
"div",
|
|
13443
13573
|
{
|
|
13444
13574
|
css: linkPopover,
|
|
@@ -13448,7 +13578,7 @@ function LinkNodePlugin({
|
|
|
13448
13578
|
},
|
|
13449
13579
|
ref: linkPopoverElRef,
|
|
13450
13580
|
children: /* @__PURE__ */ jsxs84("div", { css: linkPopoverContainer, children: [
|
|
13451
|
-
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */
|
|
13581
|
+
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx127(
|
|
13452
13582
|
"a",
|
|
13453
13583
|
{
|
|
13454
13584
|
href: parsePath(
|
|
@@ -13460,7 +13590,7 @@ function LinkNodePlugin({
|
|
|
13460
13590
|
children: parsePath(linkPopoverState.node.__link.path)
|
|
13461
13591
|
}
|
|
13462
13592
|
),
|
|
13463
|
-
/* @__PURE__ */
|
|
13593
|
+
/* @__PURE__ */ jsx127(
|
|
13464
13594
|
Button,
|
|
13465
13595
|
{
|
|
13466
13596
|
size: "xs",
|
|
@@ -13468,7 +13598,7 @@ function LinkNodePlugin({
|
|
|
13468
13598
|
onEditLinkNode(linkPopoverState.node);
|
|
13469
13599
|
},
|
|
13470
13600
|
buttonType: "ghost",
|
|
13471
|
-
children: /* @__PURE__ */
|
|
13601
|
+
children: /* @__PURE__ */ jsx127(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
|
|
13472
13602
|
}
|
|
13473
13603
|
)
|
|
13474
13604
|
] })
|
|
@@ -13606,7 +13736,7 @@ function ListIndentPlugin({ maxDepth }) {
|
|
|
13606
13736
|
}
|
|
13607
13737
|
|
|
13608
13738
|
// src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
|
|
13609
|
-
import { css as
|
|
13739
|
+
import { css as css96 } from "@emotion/react";
|
|
13610
13740
|
import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
|
|
13611
13741
|
import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
|
|
13612
13742
|
import {
|
|
@@ -13627,7 +13757,7 @@ import {
|
|
|
13627
13757
|
} from "@lexical/table";
|
|
13628
13758
|
import { $getRoot as $getRoot2, $getSelection as $getSelection3, $isRangeSelection as $isRangeSelection3 } from "lexical";
|
|
13629
13759
|
import { forwardRef as forwardRef25, useCallback as useCallback9, useEffect as useEffect19, useLayoutEffect, useState as useState16 } from "react";
|
|
13630
|
-
import { jsx as
|
|
13760
|
+
import { jsx as jsx128, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
|
|
13631
13761
|
function computeSelectionCount(selection) {
|
|
13632
13762
|
const selectionShape = selection.getShape();
|
|
13633
13763
|
return {
|
|
@@ -13635,7 +13765,7 @@ function computeSelectionCount(selection) {
|
|
|
13635
13765
|
rows: selectionShape.toY - selectionShape.fromY + 1
|
|
13636
13766
|
};
|
|
13637
13767
|
}
|
|
13638
|
-
var tableActionMenuTrigger =
|
|
13768
|
+
var tableActionMenuTrigger = css96`
|
|
13639
13769
|
position: absolute;
|
|
13640
13770
|
transform: translate(calc(-100% - 1px), 1px);
|
|
13641
13771
|
`;
|
|
@@ -13649,7 +13779,7 @@ var TableActionMenuTrigger = forwardRef25((props, ref) => {
|
|
|
13649
13779
|
const relativeY = rect.top - parentRect.top + positioningAnchorEl.scrollTop;
|
|
13650
13780
|
setCoordinates({ x: relativeX, y: relativeY });
|
|
13651
13781
|
}, [tableCellEl, positioningAnchorEl]);
|
|
13652
|
-
return /* @__PURE__ */
|
|
13782
|
+
return /* @__PURE__ */ jsx128(
|
|
13653
13783
|
IconButton,
|
|
13654
13784
|
{
|
|
13655
13785
|
ref,
|
|
@@ -13663,7 +13793,7 @@ var TableActionMenuTrigger = forwardRef25((props, ref) => {
|
|
|
13663
13793
|
size: "xs",
|
|
13664
13794
|
buttonType: "unimportant",
|
|
13665
13795
|
...rest,
|
|
13666
|
-
children: /* @__PURE__ */
|
|
13796
|
+
children: /* @__PURE__ */ jsx128(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
|
|
13667
13797
|
}
|
|
13668
13798
|
);
|
|
13669
13799
|
});
|
|
@@ -13814,13 +13944,13 @@ function TableActionMenu({
|
|
|
13814
13944
|
clearTableSelection();
|
|
13815
13945
|
});
|
|
13816
13946
|
}, [editor, tableCellNode, clearTableSelection]);
|
|
13817
|
-
const menuItemCss =
|
|
13947
|
+
const menuItemCss = css96({
|
|
13818
13948
|
fontSize: "var(--fs-sm)"
|
|
13819
13949
|
});
|
|
13820
13950
|
return /* @__PURE__ */ jsxs85(
|
|
13821
13951
|
Menu,
|
|
13822
13952
|
{
|
|
13823
|
-
menuTrigger: /* @__PURE__ */
|
|
13953
|
+
menuTrigger: /* @__PURE__ */ jsx128(
|
|
13824
13954
|
TableActionMenuTrigger,
|
|
13825
13955
|
{
|
|
13826
13956
|
tableCellEl,
|
|
@@ -13850,7 +13980,7 @@ function TableActionMenu({
|
|
|
13850
13980
|
selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
|
|
13851
13981
|
" below"
|
|
13852
13982
|
] }),
|
|
13853
|
-
/* @__PURE__ */
|
|
13983
|
+
/* @__PURE__ */ jsx128(MenuItemSeparator, {}),
|
|
13854
13984
|
/* @__PURE__ */ jsxs85(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
|
|
13855
13985
|
"Insert ",
|
|
13856
13986
|
selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
|
|
@@ -13861,11 +13991,11 @@ function TableActionMenu({
|
|
|
13861
13991
|
selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
|
|
13862
13992
|
" right"
|
|
13863
13993
|
] }),
|
|
13864
|
-
/* @__PURE__ */
|
|
13865
|
-
/* @__PURE__ */
|
|
13866
|
-
/* @__PURE__ */
|
|
13867
|
-
/* @__PURE__ */
|
|
13868
|
-
/* @__PURE__ */
|
|
13994
|
+
/* @__PURE__ */ jsx128(MenuItemSeparator, {}),
|
|
13995
|
+
/* @__PURE__ */ jsx128(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
|
|
13996
|
+
/* @__PURE__ */ jsx128(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
|
|
13997
|
+
/* @__PURE__ */ jsx128(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
|
|
13998
|
+
/* @__PURE__ */ jsx128(MenuItemSeparator, {}),
|
|
13869
13999
|
/* @__PURE__ */ jsxs85(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
|
|
13870
14000
|
(tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? "Remove" : "Add",
|
|
13871
14001
|
" ",
|
|
@@ -13939,7 +14069,7 @@ function TableCellActionMenuContainer({
|
|
|
13939
14069
|
});
|
|
13940
14070
|
});
|
|
13941
14071
|
});
|
|
13942
|
-
return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */
|
|
14072
|
+
return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ jsx128(
|
|
13943
14073
|
TableActionMenu,
|
|
13944
14074
|
{
|
|
13945
14075
|
tableCellNode,
|
|
@@ -13955,11 +14085,11 @@ function TableActionMenuPlugin({
|
|
|
13955
14085
|
menuPortalEl
|
|
13956
14086
|
}) {
|
|
13957
14087
|
const isEditable = useLexicalEditable();
|
|
13958
|
-
return isEditable ? /* @__PURE__ */
|
|
14088
|
+
return isEditable ? /* @__PURE__ */ jsx128(TableCellActionMenuContainer, { menuPortalEl, positioningAnchorEl }) : null;
|
|
13959
14089
|
}
|
|
13960
14090
|
|
|
13961
14091
|
// src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
|
|
13962
|
-
import { css as
|
|
14092
|
+
import { css as css97 } from "@emotion/react";
|
|
13963
14093
|
import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
|
|
13964
14094
|
import { useLexicalEditable as useLexicalEditable2 } from "@lexical/react/useLexicalEditable";
|
|
13965
14095
|
import {
|
|
@@ -13973,10 +14103,10 @@ import { calculateZoomLevel } from "@lexical/utils";
|
|
|
13973
14103
|
import { $getNearestNodeFromDOMNode } from "lexical";
|
|
13974
14104
|
import { useCallback as useCallback10, useEffect as useEffect20, useMemo as useMemo6, useRef as useRef11, useState as useState17 } from "react";
|
|
13975
14105
|
import { createPortal as createPortal3 } from "react-dom";
|
|
13976
|
-
import { Fragment as Fragment16, jsx as
|
|
14106
|
+
import { Fragment as Fragment16, jsx as jsx129, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
|
|
13977
14107
|
var MIN_ROW_HEIGHT = 33;
|
|
13978
14108
|
var MIN_COLUMN_WIDTH = 50;
|
|
13979
|
-
var tableResizer =
|
|
14109
|
+
var tableResizer = css97`
|
|
13980
14110
|
position: absolute;
|
|
13981
14111
|
z-index: var(--z-10);
|
|
13982
14112
|
`;
|
|
@@ -14274,8 +14404,8 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
14274
14404
|
};
|
|
14275
14405
|
}, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
|
|
14276
14406
|
const resizerStyles = getResizers();
|
|
14277
|
-
return /* @__PURE__ */
|
|
14278
|
-
/* @__PURE__ */
|
|
14407
|
+
return /* @__PURE__ */ jsx129("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ jsxs86(Fragment16, { children: [
|
|
14408
|
+
/* @__PURE__ */ jsx129(
|
|
14279
14409
|
"div",
|
|
14280
14410
|
{
|
|
14281
14411
|
css: tableResizer,
|
|
@@ -14283,7 +14413,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
14283
14413
|
onMouseDown: toggleResize("right")
|
|
14284
14414
|
}
|
|
14285
14415
|
),
|
|
14286
|
-
/* @__PURE__ */
|
|
14416
|
+
/* @__PURE__ */ jsx129(
|
|
14287
14417
|
"div",
|
|
14288
14418
|
{
|
|
14289
14419
|
css: tableResizer,
|
|
@@ -14298,7 +14428,7 @@ function TableCellResizerPlugin({ positioningAnchorEl }) {
|
|
|
14298
14428
|
const isEditable = useLexicalEditable2();
|
|
14299
14429
|
return useMemo6(
|
|
14300
14430
|
() => isEditable ? createPortal3(
|
|
14301
|
-
/* @__PURE__ */
|
|
14431
|
+
/* @__PURE__ */ jsx129(TableCellResizer, { editor, positioningAnchorEl }),
|
|
14302
14432
|
positioningAnchorEl
|
|
14303
14433
|
) : null,
|
|
14304
14434
|
[editor, isEditable, positioningAnchorEl]
|
|
@@ -14364,7 +14494,7 @@ var TableSelectionPlugin = () => {
|
|
|
14364
14494
|
var TableSelectionPlugin_default = TableSelectionPlugin;
|
|
14365
14495
|
|
|
14366
14496
|
// src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
|
|
14367
|
-
import { css as
|
|
14497
|
+
import { css as css98 } from "@emotion/react";
|
|
14368
14498
|
import { $createCodeNode } from "@lexical/code";
|
|
14369
14499
|
import {
|
|
14370
14500
|
$isListNode as $isListNode2,
|
|
@@ -14534,8 +14664,8 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
14534
14664
|
};
|
|
14535
14665
|
|
|
14536
14666
|
// src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
|
|
14537
|
-
import { Fragment as Fragment17, jsx as
|
|
14538
|
-
var toolbar =
|
|
14667
|
+
import { Fragment as Fragment17, jsx as jsx130, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
|
|
14668
|
+
var toolbar = css98`
|
|
14539
14669
|
${scrollbarStyles}
|
|
14540
14670
|
background: var(--gray-50);
|
|
14541
14671
|
border-radius: var(--rounded-base);
|
|
@@ -14549,7 +14679,7 @@ var toolbar = css97`
|
|
|
14549
14679
|
top: calc(var(--spacing-sm) * -2);
|
|
14550
14680
|
z-index: 10;
|
|
14551
14681
|
`;
|
|
14552
|
-
var toolbarGroup =
|
|
14682
|
+
var toolbarGroup = css98`
|
|
14553
14683
|
display: flex;
|
|
14554
14684
|
flex-shrink: 0;
|
|
14555
14685
|
gap: var(--spacing-xs);
|
|
@@ -14566,7 +14696,7 @@ var toolbarGroup = css97`
|
|
|
14566
14696
|
width: 1px;
|
|
14567
14697
|
}
|
|
14568
14698
|
`;
|
|
14569
|
-
var richTextToolbarButton =
|
|
14699
|
+
var richTextToolbarButton = css98`
|
|
14570
14700
|
align-items: center;
|
|
14571
14701
|
appearance: none;
|
|
14572
14702
|
border: 0;
|
|
@@ -14580,21 +14710,21 @@ var richTextToolbarButton = css97`
|
|
|
14580
14710
|
min-width: 32px;
|
|
14581
14711
|
padding: 0 var(--spacing-sm);
|
|
14582
14712
|
`;
|
|
14583
|
-
var richTextToolbarButtonActive =
|
|
14713
|
+
var richTextToolbarButtonActive = css98`
|
|
14584
14714
|
background: var(--gray-200);
|
|
14585
14715
|
`;
|
|
14586
|
-
var textStyleButton =
|
|
14716
|
+
var textStyleButton = css98`
|
|
14587
14717
|
justify-content: space-between;
|
|
14588
14718
|
min-width: 7rem;
|
|
14589
14719
|
`;
|
|
14590
|
-
var toolbarIcon =
|
|
14720
|
+
var toolbarIcon = css98`
|
|
14591
14721
|
color: inherit;
|
|
14592
14722
|
`;
|
|
14593
|
-
var toolbarChevron =
|
|
14723
|
+
var toolbarChevron = css98`
|
|
14594
14724
|
margin-left: var(--spacing-xs);
|
|
14595
14725
|
`;
|
|
14596
14726
|
var RichTextToolbarIcon = ({ icon }) => {
|
|
14597
|
-
return /* @__PURE__ */
|
|
14727
|
+
return /* @__PURE__ */ jsx130(Icon, { icon, css: toolbarIcon, size: "1rem" });
|
|
14598
14728
|
};
|
|
14599
14729
|
var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset }) => {
|
|
14600
14730
|
const [editor] = useLexicalComposerContext8();
|
|
@@ -14715,7 +14845,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14715
14845
|
menuTrigger: /* @__PURE__ */ jsxs87("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", type: "button", children: [
|
|
14716
14846
|
visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
|
|
14717
14847
|
" ",
|
|
14718
|
-
/* @__PURE__ */
|
|
14848
|
+
/* @__PURE__ */ jsx130(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
14719
14849
|
] }),
|
|
14720
14850
|
placement: "bottom-start",
|
|
14721
14851
|
children: [
|
|
@@ -14725,7 +14855,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14725
14855
|
type: "paragraph"
|
|
14726
14856
|
},
|
|
14727
14857
|
...visibleTextualElements
|
|
14728
|
-
].map((element) => /* @__PURE__ */
|
|
14858
|
+
].map((element) => /* @__PURE__ */ jsx130(
|
|
14729
14859
|
MenuItem,
|
|
14730
14860
|
{
|
|
14731
14861
|
"data-testid": "menu-item",
|
|
@@ -14736,12 +14866,12 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14736
14866
|
},
|
|
14737
14867
|
element.type
|
|
14738
14868
|
)),
|
|
14739
|
-
visibleTextualElements.length === 0 ? /* @__PURE__ */
|
|
14869
|
+
visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx130(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
|
|
14740
14870
|
]
|
|
14741
14871
|
}
|
|
14742
14872
|
),
|
|
14743
14873
|
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs87("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-formatting", children: [
|
|
14744
|
-
visibleFormatsWithIcon.map((format) => /* @__PURE__ */
|
|
14874
|
+
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx130(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx130(
|
|
14745
14875
|
"button",
|
|
14746
14876
|
{
|
|
14747
14877
|
"data-testid": `formatting-button-${format.type}`,
|
|
@@ -14753,15 +14883,15 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14753
14883
|
richTextToolbarButton,
|
|
14754
14884
|
activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
|
|
14755
14885
|
],
|
|
14756
|
-
children: /* @__PURE__ */
|
|
14886
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
|
|
14757
14887
|
}
|
|
14758
14888
|
) }, format.type)),
|
|
14759
|
-
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */
|
|
14889
|
+
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx130(
|
|
14760
14890
|
Menu,
|
|
14761
14891
|
{
|
|
14762
|
-
menuTrigger: /* @__PURE__ */
|
|
14892
|
+
menuTrigger: /* @__PURE__ */ jsx130("button", { css: richTextToolbarButton, title: "Alternative text styles", type: "button", children: /* @__PURE__ */ jsx130(Icon, { icon: "more-alt", css: toolbarIcon }) }),
|
|
14763
14893
|
placement: "bottom-start",
|
|
14764
|
-
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */
|
|
14894
|
+
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx130(
|
|
14765
14895
|
MenuItem,
|
|
14766
14896
|
{
|
|
14767
14897
|
onClick: () => {
|
|
@@ -14775,7 +14905,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14775
14905
|
) : null
|
|
14776
14906
|
] }) : null,
|
|
14777
14907
|
visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ jsxs87("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-elements", children: [
|
|
14778
|
-
linkElementVisible ? /* @__PURE__ */
|
|
14908
|
+
linkElementVisible ? /* @__PURE__ */ jsx130(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx130(
|
|
14779
14909
|
"button",
|
|
14780
14910
|
{
|
|
14781
14911
|
"data-testid": "element-link",
|
|
@@ -14788,11 +14918,11 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14788
14918
|
}
|
|
14789
14919
|
},
|
|
14790
14920
|
css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
|
|
14791
|
-
children: /* @__PURE__ */
|
|
14921
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "link" })
|
|
14792
14922
|
}
|
|
14793
14923
|
) }) : null,
|
|
14794
14924
|
visibleLists.size > 0 ? /* @__PURE__ */ jsxs87(Fragment17, { children: [
|
|
14795
|
-
visibleLists.has("unorderedList") ? /* @__PURE__ */
|
|
14925
|
+
visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx130(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx130(
|
|
14796
14926
|
"button",
|
|
14797
14927
|
{
|
|
14798
14928
|
"data-testid": "element-unordered-list",
|
|
@@ -14808,10 +14938,10 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14808
14938
|
richTextToolbarButton,
|
|
14809
14939
|
activeElement === "unorderedList" ? richTextToolbarButtonActive : null
|
|
14810
14940
|
],
|
|
14811
|
-
children: /* @__PURE__ */
|
|
14941
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "layout-list" })
|
|
14812
14942
|
}
|
|
14813
14943
|
) }) : null,
|
|
14814
|
-
visibleLists.has("orderedList") ? /* @__PURE__ */
|
|
14944
|
+
visibleLists.has("orderedList") ? /* @__PURE__ */ jsx130(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx130(
|
|
14815
14945
|
"button",
|
|
14816
14946
|
{
|
|
14817
14947
|
"data-testid": "element-ordered-list",
|
|
@@ -14827,58 +14957,58 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14827
14957
|
richTextToolbarButton,
|
|
14828
14958
|
activeElement === "orderedList" ? richTextToolbarButtonActive : null
|
|
14829
14959
|
],
|
|
14830
|
-
children: /* @__PURE__ */
|
|
14960
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "layout-list-numbered" })
|
|
14831
14961
|
}
|
|
14832
14962
|
) }) : null
|
|
14833
14963
|
] }) : null,
|
|
14834
14964
|
customControls ? customControls : null
|
|
14835
14965
|
] }) : null,
|
|
14836
|
-
visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */
|
|
14966
|
+
visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ jsx130("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-insert", children: /* @__PURE__ */ jsxs87(
|
|
14837
14967
|
Menu,
|
|
14838
14968
|
{
|
|
14839
14969
|
menuTrigger: /* @__PURE__ */ jsxs87("button", { css: richTextToolbarButton, title: "Insert block element", type: "button", children: [
|
|
14840
14970
|
"Insert",
|
|
14841
|
-
/* @__PURE__ */
|
|
14971
|
+
/* @__PURE__ */ jsx130(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
14842
14972
|
] }),
|
|
14843
14973
|
placement: "bottom-start",
|
|
14844
14974
|
children: [
|
|
14845
|
-
quoteElementVisible ? /* @__PURE__ */
|
|
14975
|
+
quoteElementVisible ? /* @__PURE__ */ jsx130(
|
|
14846
14976
|
MenuItem,
|
|
14847
14977
|
{
|
|
14848
14978
|
onClick: () => {
|
|
14849
14979
|
onSelectElement("quote");
|
|
14850
14980
|
},
|
|
14851
|
-
icon: /* @__PURE__ */
|
|
14981
|
+
icon: /* @__PURE__ */ jsx130(Icon, { icon: "quote", iconColor: "currentColor" }),
|
|
14852
14982
|
children: "Quote"
|
|
14853
14983
|
}
|
|
14854
14984
|
) : null,
|
|
14855
|
-
codeElementVisible ? /* @__PURE__ */
|
|
14985
|
+
codeElementVisible ? /* @__PURE__ */ jsx130(
|
|
14856
14986
|
MenuItem,
|
|
14857
14987
|
{
|
|
14858
14988
|
onClick: () => {
|
|
14859
14989
|
onSelectElement("code");
|
|
14860
14990
|
},
|
|
14861
|
-
icon: /* @__PURE__ */
|
|
14991
|
+
icon: /* @__PURE__ */ jsx130(Icon, { icon: "code-slash", iconColor: "currentColor" }),
|
|
14862
14992
|
children: "Code"
|
|
14863
14993
|
}
|
|
14864
14994
|
) : null,
|
|
14865
|
-
tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */
|
|
14995
|
+
tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ jsx130(
|
|
14866
14996
|
MenuItem,
|
|
14867
14997
|
{
|
|
14868
14998
|
onClick: () => {
|
|
14869
14999
|
onSelectElement("table");
|
|
14870
15000
|
},
|
|
14871
|
-
icon: /* @__PURE__ */
|
|
15001
|
+
icon: /* @__PURE__ */ jsx130(Icon, { icon: "view-grid", iconColor: "currentColor" }),
|
|
14872
15002
|
children: "Table"
|
|
14873
15003
|
}
|
|
14874
15004
|
) : null,
|
|
14875
|
-
assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */
|
|
15005
|
+
assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */ jsx130(
|
|
14876
15006
|
MenuItem,
|
|
14877
15007
|
{
|
|
14878
15008
|
onClick: () => {
|
|
14879
15009
|
onSelectElement("asset");
|
|
14880
15010
|
},
|
|
14881
|
-
icon: /* @__PURE__ */
|
|
15011
|
+
icon: /* @__PURE__ */ jsx130(Icon, { icon: "image", iconColor: "currentColor" }),
|
|
14882
15012
|
children: "Asset"
|
|
14883
15013
|
}
|
|
14884
15014
|
) : null
|
|
@@ -14890,7 +15020,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14890
15020
|
var RichTextToolbar_default = RichTextToolbar;
|
|
14891
15021
|
|
|
14892
15022
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
14893
|
-
import { Fragment as Fragment18, jsx as
|
|
15023
|
+
import { Fragment as Fragment18, jsx as jsx131, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
|
|
14894
15024
|
var ParameterRichText = ({
|
|
14895
15025
|
label,
|
|
14896
15026
|
labelLeadingIcon,
|
|
@@ -14933,7 +15063,7 @@ var ParameterRichText = ({
|
|
|
14933
15063
|
captionTestId,
|
|
14934
15064
|
menuItems,
|
|
14935
15065
|
children: [
|
|
14936
|
-
/* @__PURE__ */
|
|
15066
|
+
/* @__PURE__ */ jsx131(
|
|
14937
15067
|
ParameterRichTextInner,
|
|
14938
15068
|
{
|
|
14939
15069
|
value,
|
|
@@ -14955,12 +15085,12 @@ var ParameterRichText = ({
|
|
|
14955
15085
|
children
|
|
14956
15086
|
}
|
|
14957
15087
|
),
|
|
14958
|
-
menuItems ? /* @__PURE__ */
|
|
15088
|
+
menuItems ? /* @__PURE__ */ jsx131(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx131(Fragment18, { children: menuItems }) }) : null
|
|
14959
15089
|
]
|
|
14960
15090
|
}
|
|
14961
15091
|
);
|
|
14962
15092
|
};
|
|
14963
|
-
var editorContainerWrapper =
|
|
15093
|
+
var editorContainerWrapper = css99`
|
|
14964
15094
|
position: relative;
|
|
14965
15095
|
|
|
14966
15096
|
&::before {
|
|
@@ -14976,12 +15106,12 @@ var editorContainerWrapper = css98`
|
|
|
14976
15106
|
z-index: 2;
|
|
14977
15107
|
}
|
|
14978
15108
|
`;
|
|
14979
|
-
var editorWrapper =
|
|
15109
|
+
var editorWrapper = css99`
|
|
14980
15110
|
display: flex;
|
|
14981
15111
|
flex-flow: column;
|
|
14982
15112
|
flex-grow: 1;
|
|
14983
15113
|
`;
|
|
14984
|
-
var editorContainer =
|
|
15114
|
+
var editorContainer = css99`
|
|
14985
15115
|
${scrollbarStyles}
|
|
14986
15116
|
background: var(--white);
|
|
14987
15117
|
border-radius: var(--rounded-sm);
|
|
@@ -15013,7 +15143,7 @@ var editorContainer = css98`
|
|
|
15013
15143
|
max-height: unset;
|
|
15014
15144
|
}
|
|
15015
15145
|
`;
|
|
15016
|
-
var editorContainerOverflowWrapper =
|
|
15146
|
+
var editorContainerOverflowWrapper = css99`
|
|
15017
15147
|
overflow: hidden;
|
|
15018
15148
|
pointer-events: none;
|
|
15019
15149
|
|
|
@@ -15021,7 +15151,7 @@ var editorContainerOverflowWrapper = css98`
|
|
|
15021
15151
|
pointer-events: auto;
|
|
15022
15152
|
}
|
|
15023
15153
|
`;
|
|
15024
|
-
var editorPlaceholder =
|
|
15154
|
+
var editorPlaceholder = css99`
|
|
15025
15155
|
color: var(--gray-500);
|
|
15026
15156
|
font-style: italic;
|
|
15027
15157
|
/* 1px is added to make sure caret is clearly visible when field is focused
|
|
@@ -15032,7 +15162,7 @@ var editorPlaceholder = css98`
|
|
|
15032
15162
|
top: calc(1rem + var(--spacing-sm));
|
|
15033
15163
|
user-select: none;
|
|
15034
15164
|
`;
|
|
15035
|
-
var editorInput =
|
|
15165
|
+
var editorInput = css99`
|
|
15036
15166
|
min-height: 100%;
|
|
15037
15167
|
flex-grow: 1;
|
|
15038
15168
|
|
|
@@ -15117,7 +15247,7 @@ var ParameterRichTextInner = ({
|
|
|
15117
15247
|
editable: !readOnly
|
|
15118
15248
|
};
|
|
15119
15249
|
return /* @__PURE__ */ jsxs88(Fragment18, { children: [
|
|
15120
|
-
/* @__PURE__ */
|
|
15250
|
+
/* @__PURE__ */ jsx131("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx131(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx131(
|
|
15121
15251
|
RichText,
|
|
15122
15252
|
{
|
|
15123
15253
|
onChange,
|
|
@@ -15201,7 +15331,7 @@ var RichText = ({
|
|
|
15201
15331
|
}
|
|
15202
15332
|
};
|
|
15203
15333
|
return /* @__PURE__ */ jsxs88(Fragment18, { children: [
|
|
15204
|
-
readOnly || minimalInteractivity ? null : /* @__PURE__ */
|
|
15334
|
+
readOnly || minimalInteractivity ? null : /* @__PURE__ */ jsx131(
|
|
15205
15335
|
RichTextToolbar_default,
|
|
15206
15336
|
{
|
|
15207
15337
|
config,
|
|
@@ -15219,33 +15349,33 @@ var RichText = ({
|
|
|
15219
15349
|
ref: onEditorContainerRef,
|
|
15220
15350
|
"data-testid": "value-container",
|
|
15221
15351
|
children: [
|
|
15222
|
-
/* @__PURE__ */
|
|
15352
|
+
/* @__PURE__ */ jsx131(
|
|
15223
15353
|
RichTextPlugin,
|
|
15224
15354
|
{
|
|
15225
|
-
contentEditable: /* @__PURE__ */
|
|
15226
|
-
placeholder: /* @__PURE__ */
|
|
15355
|
+
contentEditable: /* @__PURE__ */ jsx131(ContentEditable, { css: editorInput, className: editorInputClassName }),
|
|
15356
|
+
placeholder: /* @__PURE__ */ jsx131("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
|
|
15227
15357
|
ErrorBoundary: LexicalErrorBoundary
|
|
15228
15358
|
}
|
|
15229
15359
|
),
|
|
15230
|
-
/* @__PURE__ */
|
|
15231
|
-
/* @__PURE__ */
|
|
15232
|
-
/* @__PURE__ */
|
|
15233
|
-
/* @__PURE__ */
|
|
15360
|
+
/* @__PURE__ */ jsx131(ListPlugin, {}),
|
|
15361
|
+
/* @__PURE__ */ jsx131(ListIndentPlugin, { maxDepth: 4 }),
|
|
15362
|
+
/* @__PURE__ */ jsx131(TablePlugin, { hasCellMerge: false, hasCellBackgroundColor: false }),
|
|
15363
|
+
/* @__PURE__ */ jsx131("div", { css: editorContainerOverflowWrapper, "data-testid": "table-action-menu-plugin", children: editorContainerRef && portalContainerRef && !minimalInteractivity ? /* @__PURE__ */ jsx131(
|
|
15234
15364
|
TableActionMenuPlugin,
|
|
15235
15365
|
{
|
|
15236
15366
|
positioningAnchorEl: editorContainerRef,
|
|
15237
15367
|
menuPortalEl: portalContainerRef
|
|
15238
15368
|
}
|
|
15239
15369
|
) : null }),
|
|
15240
|
-
editorContainerRef && !minimalInteractivity ? /* @__PURE__ */
|
|
15241
|
-
readOnly ? null : /* @__PURE__ */
|
|
15242
|
-
/* @__PURE__ */
|
|
15243
|
-
/* @__PURE__ */
|
|
15370
|
+
editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ jsx131(TableCellResizerPlugin, { positioningAnchorEl: editorContainerRef }) : null,
|
|
15371
|
+
readOnly ? null : /* @__PURE__ */ jsx131(HistoryPlugin, {}),
|
|
15372
|
+
/* @__PURE__ */ jsx131(DisableStylesPlugin, {}),
|
|
15373
|
+
/* @__PURE__ */ jsx131(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS })
|
|
15244
15374
|
]
|
|
15245
15375
|
}
|
|
15246
15376
|
),
|
|
15247
|
-
/* @__PURE__ */
|
|
15248
|
-
editorContainerRef ? /* @__PURE__ */
|
|
15377
|
+
/* @__PURE__ */ jsx131(Fragment18, { children }),
|
|
15378
|
+
editorContainerRef ? /* @__PURE__ */ jsx131(
|
|
15249
15379
|
LinkNodePlugin,
|
|
15250
15380
|
{
|
|
15251
15381
|
onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
|
|
@@ -15256,19 +15386,19 @@ var RichText = ({
|
|
|
15256
15386
|
positioningAnchorEl: editorContainerRef
|
|
15257
15387
|
}
|
|
15258
15388
|
) : null,
|
|
15259
|
-
/* @__PURE__ */
|
|
15260
|
-
/* @__PURE__ */
|
|
15389
|
+
/* @__PURE__ */ jsx131(TableSelectionPlugin_default, {}),
|
|
15390
|
+
/* @__PURE__ */ jsx131(ImprovedAssetSelectionPlugin_default, {})
|
|
15261
15391
|
] })
|
|
15262
15392
|
] });
|
|
15263
15393
|
};
|
|
15264
15394
|
|
|
15265
15395
|
// src/components/ParameterInputs/ParameterSelect.tsx
|
|
15266
15396
|
import { forwardRef as forwardRef26 } from "react";
|
|
15267
|
-
import { jsx as
|
|
15397
|
+
import { jsx as jsx132, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
|
|
15268
15398
|
var ParameterSelect = forwardRef26(
|
|
15269
15399
|
({ defaultOption, options, ...props }, ref) => {
|
|
15270
15400
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
15271
|
-
return /* @__PURE__ */
|
|
15401
|
+
return /* @__PURE__ */ jsx132(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx132(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
|
|
15272
15402
|
}
|
|
15273
15403
|
);
|
|
15274
15404
|
var ParameterSelectInner = forwardRef26(
|
|
@@ -15283,10 +15413,10 @@ var ParameterSelectInner = forwardRef26(
|
|
|
15283
15413
|
ref,
|
|
15284
15414
|
...props,
|
|
15285
15415
|
children: [
|
|
15286
|
-
defaultOption ? /* @__PURE__ */
|
|
15416
|
+
defaultOption ? /* @__PURE__ */ jsx132("option", { value: "", children: defaultOption }) : null,
|
|
15287
15417
|
options.map((option) => {
|
|
15288
15418
|
var _a;
|
|
15289
|
-
return /* @__PURE__ */
|
|
15419
|
+
return /* @__PURE__ */ jsx132("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
|
|
15290
15420
|
})
|
|
15291
15421
|
]
|
|
15292
15422
|
}
|
|
@@ -15296,14 +15426,14 @@ var ParameterSelectInner = forwardRef26(
|
|
|
15296
15426
|
|
|
15297
15427
|
// src/components/ParameterInputs/ParameterTextarea.tsx
|
|
15298
15428
|
import { forwardRef as forwardRef27 } from "react";
|
|
15299
|
-
import { jsx as
|
|
15429
|
+
import { jsx as jsx133 } from "@emotion/react/jsx-runtime";
|
|
15300
15430
|
var ParameterTextarea = forwardRef27((props, ref) => {
|
|
15301
15431
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
15302
|
-
return /* @__PURE__ */
|
|
15432
|
+
return /* @__PURE__ */ jsx133(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx133(ParameterTextareaInner, { ref, ...innerProps }) });
|
|
15303
15433
|
});
|
|
15304
15434
|
var ParameterTextareaInner = forwardRef27(({ ...props }, ref) => {
|
|
15305
15435
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
15306
|
-
return /* @__PURE__ */
|
|
15436
|
+
return /* @__PURE__ */ jsx133(
|
|
15307
15437
|
"textarea",
|
|
15308
15438
|
{
|
|
15309
15439
|
css: [input3, textarea2],
|
|
@@ -15317,25 +15447,25 @@ var ParameterTextareaInner = forwardRef27(({ ...props }, ref) => {
|
|
|
15317
15447
|
|
|
15318
15448
|
// src/components/ParameterInputs/ParameterToggle.tsx
|
|
15319
15449
|
import { forwardRef as forwardRef28 } from "react";
|
|
15320
|
-
import { jsx as
|
|
15450
|
+
import { jsx as jsx134, jsxs as jsxs90 } from "@emotion/react/jsx-runtime";
|
|
15321
15451
|
var ParameterToggle = forwardRef28((props, ref) => {
|
|
15322
15452
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
15323
|
-
return /* @__PURE__ */
|
|
15453
|
+
return /* @__PURE__ */ jsx134(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx134(ParameterToggleInner, { ref, ...innerProps }) });
|
|
15324
15454
|
});
|
|
15325
15455
|
var ParameterToggleInner = forwardRef28(
|
|
15326
15456
|
({ children, ...props }, ref) => {
|
|
15327
15457
|
const { id, label } = useParameterShell();
|
|
15328
15458
|
return /* @__PURE__ */ jsxs90("label", { css: inputToggleLabel2, children: [
|
|
15329
|
-
/* @__PURE__ */
|
|
15330
|
-
/* @__PURE__ */
|
|
15459
|
+
/* @__PURE__ */ jsx134("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
|
|
15460
|
+
/* @__PURE__ */ jsx134("span", { css: inlineLabel2, children: label }),
|
|
15331
15461
|
children
|
|
15332
15462
|
] });
|
|
15333
15463
|
}
|
|
15334
15464
|
);
|
|
15335
15465
|
|
|
15336
15466
|
// src/components/ProgressBar/ProgressBar.styles.ts
|
|
15337
|
-
import { css as
|
|
15338
|
-
var container3 =
|
|
15467
|
+
import { css as css100, keyframes as keyframes4 } from "@emotion/react";
|
|
15468
|
+
var container3 = css100`
|
|
15339
15469
|
background: var(--gray-50);
|
|
15340
15470
|
margin-block: var(--spacing-sm);
|
|
15341
15471
|
position: relative;
|
|
@@ -15345,13 +15475,13 @@ var container3 = css99`
|
|
|
15345
15475
|
border: solid 1px var(--gray-300);
|
|
15346
15476
|
`;
|
|
15347
15477
|
var themeMap = {
|
|
15348
|
-
primary:
|
|
15478
|
+
primary: css100`
|
|
15349
15479
|
--progress-color: var(--accent-light);
|
|
15350
15480
|
`,
|
|
15351
|
-
secondary:
|
|
15481
|
+
secondary: css100`
|
|
15352
15482
|
--progress-color: var(--accent-alt-light);
|
|
15353
15483
|
`,
|
|
15354
|
-
destructive:
|
|
15484
|
+
destructive: css100`
|
|
15355
15485
|
--progress-color: var(--brand-secondary-5);
|
|
15356
15486
|
`
|
|
15357
15487
|
};
|
|
@@ -15363,10 +15493,10 @@ var slidingBackgroundPosition = keyframes4`
|
|
|
15363
15493
|
background-position: 64px 0;
|
|
15364
15494
|
}
|
|
15365
15495
|
`;
|
|
15366
|
-
var determinate =
|
|
15496
|
+
var determinate = css100`
|
|
15367
15497
|
background-color: var(--progress-color);
|
|
15368
15498
|
`;
|
|
15369
|
-
var indeterminate =
|
|
15499
|
+
var indeterminate = css100`
|
|
15370
15500
|
background-image: linear-gradient(
|
|
15371
15501
|
45deg,
|
|
15372
15502
|
var(--progress-color) 25%,
|
|
@@ -15380,7 +15510,7 @@ var indeterminate = css99`
|
|
|
15380
15510
|
background-size: 64px 64px;
|
|
15381
15511
|
animation: ${slidingBackgroundPosition} 1s linear infinite;
|
|
15382
15512
|
`;
|
|
15383
|
-
var bar =
|
|
15513
|
+
var bar = css100`
|
|
15384
15514
|
position: absolute;
|
|
15385
15515
|
inset: 0;
|
|
15386
15516
|
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
@@ -15388,7 +15518,7 @@ var bar = css99`
|
|
|
15388
15518
|
`;
|
|
15389
15519
|
|
|
15390
15520
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
15391
|
-
import { jsx as
|
|
15521
|
+
import { jsx as jsx135 } from "@emotion/react/jsx-runtime";
|
|
15392
15522
|
function ProgressBar({
|
|
15393
15523
|
current,
|
|
15394
15524
|
max,
|
|
@@ -15398,7 +15528,7 @@ function ProgressBar({
|
|
|
15398
15528
|
}) {
|
|
15399
15529
|
const valueNow = Math.min(current, max);
|
|
15400
15530
|
const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
|
|
15401
|
-
return /* @__PURE__ */
|
|
15531
|
+
return /* @__PURE__ */ jsx135(
|
|
15402
15532
|
"div",
|
|
15403
15533
|
{
|
|
15404
15534
|
css: container3,
|
|
@@ -15409,7 +15539,7 @@ function ProgressBar({
|
|
|
15409
15539
|
"aria-valuemax": max,
|
|
15410
15540
|
"aria-valuenow": valueNow,
|
|
15411
15541
|
...props,
|
|
15412
|
-
children: /* @__PURE__ */
|
|
15542
|
+
children: /* @__PURE__ */ jsx135(
|
|
15413
15543
|
"div",
|
|
15414
15544
|
{
|
|
15415
15545
|
css: [
|
|
@@ -15428,28 +15558,28 @@ function ProgressBar({
|
|
|
15428
15558
|
}
|
|
15429
15559
|
|
|
15430
15560
|
// src/components/ProgressList/ProgressList.tsx
|
|
15431
|
-
import { css as
|
|
15561
|
+
import { css as css102 } from "@emotion/react";
|
|
15432
15562
|
import { CgCheckO as CgCheckO2 } from "@react-icons/all-files/cg/CgCheckO";
|
|
15433
15563
|
import { CgRadioCheck } from "@react-icons/all-files/cg/CgRadioCheck";
|
|
15434
15564
|
import { CgRecord } from "@react-icons/all-files/cg/CgRecord";
|
|
15435
15565
|
import { useMemo as useMemo8 } from "react";
|
|
15436
15566
|
|
|
15437
15567
|
// src/components/ProgressList/styles/ProgressList.styles.ts
|
|
15438
|
-
import { css as
|
|
15439
|
-
var progressListStyles =
|
|
15568
|
+
import { css as css101 } from "@emotion/react";
|
|
15569
|
+
var progressListStyles = css101`
|
|
15440
15570
|
display: flex;
|
|
15441
15571
|
flex-direction: column;
|
|
15442
15572
|
gap: var(--spacing-sm);
|
|
15443
15573
|
list-style-type: none;
|
|
15444
15574
|
`;
|
|
15445
|
-
var progressListItemStyles =
|
|
15575
|
+
var progressListItemStyles = css101`
|
|
15446
15576
|
display: flex;
|
|
15447
15577
|
gap: var(--spacing-base);
|
|
15448
15578
|
align-items: center;
|
|
15449
15579
|
`;
|
|
15450
15580
|
|
|
15451
15581
|
// src/components/ProgressList/ProgressList.tsx
|
|
15452
|
-
import { jsx as
|
|
15582
|
+
import { jsx as jsx136, jsxs as jsxs91 } from "@emotion/react/jsx-runtime";
|
|
15453
15583
|
var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
15454
15584
|
const itemsWithStatus = useMemo8(() => {
|
|
15455
15585
|
const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
|
|
@@ -15463,8 +15593,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
|
15463
15593
|
return { ...item, status };
|
|
15464
15594
|
});
|
|
15465
15595
|
}, [items, inProgressId]);
|
|
15466
|
-
return /* @__PURE__ */
|
|
15467
|
-
return /* @__PURE__ */
|
|
15596
|
+
return /* @__PURE__ */ jsx136("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
|
|
15597
|
+
return /* @__PURE__ */ jsx136(
|
|
15468
15598
|
ProgressListItem,
|
|
15469
15599
|
{
|
|
15470
15600
|
status,
|
|
@@ -15497,12 +15627,12 @@ var ProgressListItem = ({
|
|
|
15497
15627
|
}, [status, error]);
|
|
15498
15628
|
const statusStyles = useMemo8(() => {
|
|
15499
15629
|
if (error) {
|
|
15500
|
-
return errorLevel === "caution" ?
|
|
15630
|
+
return errorLevel === "caution" ? css102`
|
|
15501
15631
|
color: rgb(161, 98, 7);
|
|
15502
15632
|
& svg {
|
|
15503
15633
|
color: rgb(250, 204, 21);
|
|
15504
15634
|
}
|
|
15505
|
-
` :
|
|
15635
|
+
` : css102`
|
|
15506
15636
|
color: rgb(185, 28, 28);
|
|
15507
15637
|
& svg {
|
|
15508
15638
|
color: var(--brand-primary-2);
|
|
@@ -15510,38 +15640,38 @@ var ProgressListItem = ({
|
|
|
15510
15640
|
`;
|
|
15511
15641
|
}
|
|
15512
15642
|
const colorPerStatus = {
|
|
15513
|
-
completed:
|
|
15643
|
+
completed: css102`
|
|
15514
15644
|
opacity: 0.75;
|
|
15515
15645
|
`,
|
|
15516
|
-
inProgress:
|
|
15646
|
+
inProgress: css102`
|
|
15517
15647
|
-webkit-text-stroke-width: thin;
|
|
15518
15648
|
`,
|
|
15519
|
-
queued:
|
|
15649
|
+
queued: css102`
|
|
15520
15650
|
opacity: 0.5;
|
|
15521
15651
|
`
|
|
15522
15652
|
};
|
|
15523
15653
|
return colorPerStatus[status];
|
|
15524
15654
|
}, [status, error, errorLevel]);
|
|
15525
15655
|
return /* @__PURE__ */ jsxs91("li", { css: [progressListItemStyles, statusStyles], children: [
|
|
15526
|
-
/* @__PURE__ */
|
|
15656
|
+
/* @__PURE__ */ jsx136(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx136("div", { children: /* @__PURE__ */ jsx136(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
|
|
15527
15657
|
/* @__PURE__ */ jsxs91("div", { children: [
|
|
15528
15658
|
children,
|
|
15529
|
-
/* @__PURE__ */
|
|
15659
|
+
/* @__PURE__ */ jsx136("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
|
|
15530
15660
|
] })
|
|
15531
15661
|
] });
|
|
15532
15662
|
};
|
|
15533
15663
|
|
|
15534
15664
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
15535
|
-
import { css as
|
|
15665
|
+
import { css as css104 } from "@emotion/react";
|
|
15536
15666
|
import { CgCheck as CgCheck5 } from "@react-icons/all-files/cg/CgCheck";
|
|
15537
15667
|
import { useCallback as useCallback12, useEffect as useEffect24, useMemo as useMemo9, useRef as useRef12, useState as useState21 } from "react";
|
|
15538
15668
|
|
|
15539
15669
|
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
15540
|
-
import { css as
|
|
15541
|
-
var segmentedControlRootStyles =
|
|
15670
|
+
import { css as css103 } from "@emotion/react";
|
|
15671
|
+
var segmentedControlRootStyles = css103`
|
|
15542
15672
|
position: relative;
|
|
15543
15673
|
`;
|
|
15544
|
-
var segmentedControlScrollIndicatorsStyles =
|
|
15674
|
+
var segmentedControlScrollIndicatorsStyles = css103`
|
|
15545
15675
|
position: absolute;
|
|
15546
15676
|
inset: 0;
|
|
15547
15677
|
z-index: 1;
|
|
@@ -15569,17 +15699,17 @@ var segmentedControlScrollIndicatorsStyles = css102`
|
|
|
15569
15699
|
background: linear-gradient(to left, var(--background-color) 10%, transparent);
|
|
15570
15700
|
}
|
|
15571
15701
|
`;
|
|
15572
|
-
var segmentedControlScrollIndicatorStartVisibleStyles =
|
|
15702
|
+
var segmentedControlScrollIndicatorStartVisibleStyles = css103`
|
|
15573
15703
|
&::before {
|
|
15574
15704
|
opacity: 1;
|
|
15575
15705
|
}
|
|
15576
15706
|
`;
|
|
15577
|
-
var segmentedControlScrollIndicatorEndVisibleStyles =
|
|
15707
|
+
var segmentedControlScrollIndicatorEndVisibleStyles = css103`
|
|
15578
15708
|
&::after {
|
|
15579
15709
|
opacity: 1;
|
|
15580
15710
|
}
|
|
15581
15711
|
`;
|
|
15582
|
-
var segmentedControlWrapperStyles =
|
|
15712
|
+
var segmentedControlWrapperStyles = css103`
|
|
15583
15713
|
overflow-y: auto;
|
|
15584
15714
|
scroll-behavior: smooth;
|
|
15585
15715
|
scrollbar-width: none;
|
|
@@ -15588,7 +15718,7 @@ var segmentedControlWrapperStyles = css102`
|
|
|
15588
15718
|
height: 0px;
|
|
15589
15719
|
}
|
|
15590
15720
|
`;
|
|
15591
|
-
var segmentedControlStyles =
|
|
15721
|
+
var segmentedControlStyles = css103`
|
|
15592
15722
|
--segmented-control-rounded-value: var(--rounded-base);
|
|
15593
15723
|
--segmented-control-border-width: 1px;
|
|
15594
15724
|
--segmented-control-selected-color: var(--brand-secondary-3);
|
|
@@ -15607,14 +15737,14 @@ var segmentedControlStyles = css102`
|
|
|
15607
15737
|
border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
|
|
15608
15738
|
font-size: var(--fs-xs);
|
|
15609
15739
|
`;
|
|
15610
|
-
var segmentedControlVerticalStyles =
|
|
15740
|
+
var segmentedControlVerticalStyles = css103`
|
|
15611
15741
|
flex-direction: column;
|
|
15612
15742
|
--segmented-control-first-border-radius: var(--segmented-control-rounded-value)
|
|
15613
15743
|
var(--segmented-control-rounded-value) 0 0;
|
|
15614
15744
|
--segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
|
|
15615
15745
|
var(--segmented-control-rounded-value);
|
|
15616
15746
|
`;
|
|
15617
|
-
var segmentedControlItemStyles =
|
|
15747
|
+
var segmentedControlItemStyles = css103`
|
|
15618
15748
|
&:first-of-type label {
|
|
15619
15749
|
border-radius: var(--segmented-control-first-border-radius);
|
|
15620
15750
|
}
|
|
@@ -15622,10 +15752,10 @@ var segmentedControlItemStyles = css102`
|
|
|
15622
15752
|
border-radius: var(--segmented-control-last-border-radius);
|
|
15623
15753
|
}
|
|
15624
15754
|
`;
|
|
15625
|
-
var segmentedControlInputStyles =
|
|
15755
|
+
var segmentedControlInputStyles = css103`
|
|
15626
15756
|
${accessibleHidden}
|
|
15627
15757
|
`;
|
|
15628
|
-
var segmentedControlLabelStyles = (checked, disabled2) =>
|
|
15758
|
+
var segmentedControlLabelStyles = (checked, disabled2) => css103`
|
|
15629
15759
|
position: relative;
|
|
15630
15760
|
display: flex;
|
|
15631
15761
|
align-items: center;
|
|
@@ -15689,25 +15819,25 @@ var segmentedControlLabelStyles = (checked, disabled2) => css102`
|
|
|
15689
15819
|
`}
|
|
15690
15820
|
}
|
|
15691
15821
|
`;
|
|
15692
|
-
var segmentedControlLabelIconOnlyStyles =
|
|
15822
|
+
var segmentedControlLabelIconOnlyStyles = css103`
|
|
15693
15823
|
padding-inline: 0.5em;
|
|
15694
15824
|
`;
|
|
15695
|
-
var segmentedControlLabelCheckStyles =
|
|
15825
|
+
var segmentedControlLabelCheckStyles = css103`
|
|
15696
15826
|
opacity: 0.5;
|
|
15697
15827
|
`;
|
|
15698
|
-
var segmentedControlLabelContentStyles =
|
|
15828
|
+
var segmentedControlLabelContentStyles = css103`
|
|
15699
15829
|
display: flex;
|
|
15700
15830
|
align-items: center;
|
|
15701
15831
|
justify-content: center;
|
|
15702
15832
|
gap: var(--spacing-sm);
|
|
15703
15833
|
height: 100%;
|
|
15704
15834
|
`;
|
|
15705
|
-
var segmentedControlLabelTextStyles =
|
|
15835
|
+
var segmentedControlLabelTextStyles = css103`
|
|
15706
15836
|
white-space: nowrap;
|
|
15707
15837
|
`;
|
|
15708
15838
|
|
|
15709
15839
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
15710
|
-
import { jsx as
|
|
15840
|
+
import { jsx as jsx137, jsxs as jsxs92 } from "@emotion/react/jsx-runtime";
|
|
15711
15841
|
var SegmentedControl = ({
|
|
15712
15842
|
name,
|
|
15713
15843
|
options,
|
|
@@ -15735,10 +15865,10 @@ var SegmentedControl = ({
|
|
|
15735
15865
|
);
|
|
15736
15866
|
const sizeStyles = useMemo9(() => {
|
|
15737
15867
|
const map = {
|
|
15738
|
-
sm:
|
|
15739
|
-
md:
|
|
15740
|
-
lg:
|
|
15741
|
-
xl:
|
|
15868
|
+
sm: css104({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
|
|
15869
|
+
md: css104({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
|
|
15870
|
+
lg: css104({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
|
|
15871
|
+
xl: css104({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
|
|
15742
15872
|
};
|
|
15743
15873
|
return map[size];
|
|
15744
15874
|
}, [size]);
|
|
@@ -15767,7 +15897,7 @@ var SegmentedControl = ({
|
|
|
15767
15897
|
};
|
|
15768
15898
|
}, []);
|
|
15769
15899
|
return /* @__PURE__ */ jsxs92("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
|
|
15770
|
-
/* @__PURE__ */
|
|
15900
|
+
/* @__PURE__ */ jsx137("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ jsx137(
|
|
15771
15901
|
"div",
|
|
15772
15902
|
{
|
|
15773
15903
|
css: [
|
|
@@ -15784,7 +15914,7 @@ var SegmentedControl = ({
|
|
|
15784
15914
|
const text = option.label ? option.label : option.icon ? null : String(option.value);
|
|
15785
15915
|
const isDisabled = disabled2 || option.disabled;
|
|
15786
15916
|
const isChecked = option.value === value;
|
|
15787
|
-
return /* @__PURE__ */
|
|
15917
|
+
return /* @__PURE__ */ jsx137(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx137(
|
|
15788
15918
|
"div",
|
|
15789
15919
|
{
|
|
15790
15920
|
css: segmentedControlItemStyles,
|
|
@@ -15798,7 +15928,7 @@ var SegmentedControl = ({
|
|
|
15798
15928
|
isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
|
|
15799
15929
|
],
|
|
15800
15930
|
children: [
|
|
15801
|
-
/* @__PURE__ */
|
|
15931
|
+
/* @__PURE__ */ jsx137(
|
|
15802
15932
|
"input",
|
|
15803
15933
|
{
|
|
15804
15934
|
css: segmentedControlInputStyles,
|
|
@@ -15810,10 +15940,10 @@ var SegmentedControl = ({
|
|
|
15810
15940
|
disabled: isDisabled
|
|
15811
15941
|
}
|
|
15812
15942
|
),
|
|
15813
|
-
option.value !== value || noCheckmark ? null : /* @__PURE__ */
|
|
15943
|
+
option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx137(CgCheck5, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
|
|
15814
15944
|
/* @__PURE__ */ jsxs92("span", { css: segmentedControlLabelContentStyles, children: [
|
|
15815
|
-
!option.icon ? null : /* @__PURE__ */
|
|
15816
|
-
!text || hideOptionText ? null : /* @__PURE__ */
|
|
15945
|
+
!option.icon ? null : /* @__PURE__ */ jsx137(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
|
|
15946
|
+
!text || hideOptionText ? null : /* @__PURE__ */ jsx137("span", { css: segmentedControlLabelTextStyles, children: text })
|
|
15817
15947
|
] })
|
|
15818
15948
|
]
|
|
15819
15949
|
}
|
|
@@ -15823,7 +15953,7 @@ var SegmentedControl = ({
|
|
|
15823
15953
|
})
|
|
15824
15954
|
}
|
|
15825
15955
|
) }),
|
|
15826
|
-
/* @__PURE__ */
|
|
15956
|
+
/* @__PURE__ */ jsx137(
|
|
15827
15957
|
"div",
|
|
15828
15958
|
{
|
|
15829
15959
|
css: [
|
|
@@ -15837,18 +15967,18 @@ var SegmentedControl = ({
|
|
|
15837
15967
|
};
|
|
15838
15968
|
|
|
15839
15969
|
// src/components/Skeleton/Skeleton.styles.ts
|
|
15840
|
-
import { css as
|
|
15970
|
+
import { css as css105, keyframes as keyframes5 } from "@emotion/react";
|
|
15841
15971
|
var lightFadingOut = keyframes5`
|
|
15842
15972
|
from { opacity: 0.1; }
|
|
15843
15973
|
to { opacity: 0.025; }
|
|
15844
15974
|
`;
|
|
15845
|
-
var skeletonStyles =
|
|
15975
|
+
var skeletonStyles = css105`
|
|
15846
15976
|
animation: ${lightFadingOut} 1s ease-out infinite alternate;
|
|
15847
15977
|
background-color: var(--gray-900);
|
|
15848
15978
|
`;
|
|
15849
15979
|
|
|
15850
15980
|
// src/components/Skeleton/Skeleton.tsx
|
|
15851
|
-
import { jsx as
|
|
15981
|
+
import { jsx as jsx138 } from "@emotion/react/jsx-runtime";
|
|
15852
15982
|
var Skeleton = ({
|
|
15853
15983
|
width = "100%",
|
|
15854
15984
|
height = "1.25rem",
|
|
@@ -15856,7 +15986,7 @@ var Skeleton = ({
|
|
|
15856
15986
|
circle = false,
|
|
15857
15987
|
children,
|
|
15858
15988
|
...otherProps
|
|
15859
|
-
}) => /* @__PURE__ */
|
|
15989
|
+
}) => /* @__PURE__ */ jsx138(
|
|
15860
15990
|
"div",
|
|
15861
15991
|
{
|
|
15862
15992
|
css: [
|
|
@@ -15879,8 +16009,8 @@ var Skeleton = ({
|
|
|
15879
16009
|
import { useEffect as useEffect25, useRef as useRef13 } from "react";
|
|
15880
16010
|
|
|
15881
16011
|
// src/components/Spinner/Spinner.styles.ts
|
|
15882
|
-
import { css as
|
|
15883
|
-
var SpinnerStyles =
|
|
16012
|
+
import { css as css106 } from "@emotion/react";
|
|
16013
|
+
var SpinnerStyles = css106`
|
|
15884
16014
|
--color: #00b4ff;
|
|
15885
16015
|
--speed: 5s;
|
|
15886
16016
|
--red: rgb(218, 63, 50);
|
|
@@ -16310,7 +16440,7 @@ var SpinnerStyles = css105`
|
|
|
16310
16440
|
`;
|
|
16311
16441
|
|
|
16312
16442
|
// src/components/Spinner/Spinner.tsx
|
|
16313
|
-
import { jsx as
|
|
16443
|
+
import { jsx as jsx139, jsxs as jsxs93 } from "@emotion/react/jsx-runtime";
|
|
16314
16444
|
var Spinner = ({
|
|
16315
16445
|
width,
|
|
16316
16446
|
label,
|
|
@@ -16333,51 +16463,51 @@ var Spinner = ({
|
|
|
16333
16463
|
css: SpinnerStyles,
|
|
16334
16464
|
className: `container${isPaused ? " paused" : ""}`,
|
|
16335
16465
|
children: [
|
|
16336
|
-
/* @__PURE__ */
|
|
16337
|
-
/* @__PURE__ */
|
|
16338
|
-
/* @__PURE__ */
|
|
16339
|
-
/* @__PURE__ */
|
|
16340
|
-
/* @__PURE__ */
|
|
16466
|
+
/* @__PURE__ */ jsx139("div", { className: "pyramid-container", children: /* @__PURE__ */ jsxs93("div", { className: "pyramid top", children: [
|
|
16467
|
+
/* @__PURE__ */ jsx139("div", { className: "side one" }),
|
|
16468
|
+
/* @__PURE__ */ jsx139("div", { className: "side two" }),
|
|
16469
|
+
/* @__PURE__ */ jsx139("div", { className: "side three" }),
|
|
16470
|
+
/* @__PURE__ */ jsx139("div", { className: "side four" }),
|
|
16341
16471
|
/* @__PURE__ */ jsxs93("div", { className: "bottom-pyramid", children: [
|
|
16342
|
-
/* @__PURE__ */
|
|
16343
|
-
/* @__PURE__ */
|
|
16344
|
-
/* @__PURE__ */
|
|
16345
|
-
/* @__PURE__ */
|
|
16472
|
+
/* @__PURE__ */ jsx139("div", { className: "side five" }),
|
|
16473
|
+
/* @__PURE__ */ jsx139("div", { className: "side six" }),
|
|
16474
|
+
/* @__PURE__ */ jsx139("div", { className: "side seven" }),
|
|
16475
|
+
/* @__PURE__ */ jsx139("div", { className: "side eight" })
|
|
16346
16476
|
] })
|
|
16347
16477
|
] }) }),
|
|
16348
|
-
/* @__PURE__ */
|
|
16478
|
+
/* @__PURE__ */ jsx139("div", { className: "turning-circle" }),
|
|
16349
16479
|
/* @__PURE__ */ jsxs93("div", { className: "pulsating-star delay-top-right", children: [
|
|
16350
|
-
/* @__PURE__ */
|
|
16351
|
-
/* @__PURE__ */
|
|
16352
|
-
/* @__PURE__ */
|
|
16353
|
-
/* @__PURE__ */
|
|
16354
|
-
/* @__PURE__ */
|
|
16480
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-center" }),
|
|
16481
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-top" }),
|
|
16482
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-bottom" }),
|
|
16483
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-left" }),
|
|
16484
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-right" })
|
|
16355
16485
|
] }),
|
|
16356
16486
|
/* @__PURE__ */ jsxs93("div", { className: "pulsating-star delay-top-left-2", children: [
|
|
16357
|
-
/* @__PURE__ */
|
|
16358
|
-
/* @__PURE__ */
|
|
16359
|
-
/* @__PURE__ */
|
|
16360
|
-
/* @__PURE__ */
|
|
16361
|
-
/* @__PURE__ */
|
|
16487
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-center" }),
|
|
16488
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-top" }),
|
|
16489
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-bottom" }),
|
|
16490
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-left" }),
|
|
16491
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-right" })
|
|
16362
16492
|
] }),
|
|
16363
16493
|
/* @__PURE__ */ jsxs93("div", { className: "pulsating-star delay-top-left", children: [
|
|
16364
|
-
/* @__PURE__ */
|
|
16365
|
-
/* @__PURE__ */
|
|
16366
|
-
/* @__PURE__ */
|
|
16367
|
-
/* @__PURE__ */
|
|
16494
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-top" }),
|
|
16495
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-bottom" }),
|
|
16496
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-left" }),
|
|
16497
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-right" })
|
|
16368
16498
|
] }),
|
|
16369
16499
|
/* @__PURE__ */ jsxs93("div", { className: "pulsating-star delay-bottom-right", children: [
|
|
16370
|
-
/* @__PURE__ */
|
|
16371
|
-
/* @__PURE__ */
|
|
16372
|
-
/* @__PURE__ */
|
|
16373
|
-
/* @__PURE__ */
|
|
16500
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-top" }),
|
|
16501
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-bottom" }),
|
|
16502
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-left" }),
|
|
16503
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-right" })
|
|
16374
16504
|
] }),
|
|
16375
16505
|
/* @__PURE__ */ jsxs93("div", { className: "pulsating-star delay-bottom-left", children: [
|
|
16376
|
-
/* @__PURE__ */
|
|
16377
|
-
/* @__PURE__ */
|
|
16378
|
-
/* @__PURE__ */
|
|
16379
|
-
/* @__PURE__ */
|
|
16380
|
-
/* @__PURE__ */
|
|
16506
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-center" }),
|
|
16507
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-top" }),
|
|
16508
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-bottom" }),
|
|
16509
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-left" }),
|
|
16510
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-right" })
|
|
16381
16511
|
] })
|
|
16382
16512
|
]
|
|
16383
16513
|
}
|
|
@@ -16388,8 +16518,8 @@ var Spinner = ({
|
|
|
16388
16518
|
import { forwardRef as forwardRef29, useMemo as useMemo10 } from "react";
|
|
16389
16519
|
|
|
16390
16520
|
// src/components/Switch/Switch.styles.ts
|
|
16391
|
-
import { css as
|
|
16392
|
-
var SwitchInputContainer =
|
|
16521
|
+
import { css as css107 } from "@emotion/react";
|
|
16522
|
+
var SwitchInputContainer = css107`
|
|
16393
16523
|
cursor: pointer;
|
|
16394
16524
|
display: inline-flex;
|
|
16395
16525
|
position: relative;
|
|
@@ -16399,7 +16529,7 @@ var SwitchInputContainer = css106`
|
|
|
16399
16529
|
user-select: none;
|
|
16400
16530
|
z-index: 0;
|
|
16401
16531
|
`;
|
|
16402
|
-
var SwitchInput = (size) =>
|
|
16532
|
+
var SwitchInput = (size) => css107`
|
|
16403
16533
|
appearance: none;
|
|
16404
16534
|
border-radius: var(--rounded-full);
|
|
16405
16535
|
background-color: var(--white);
|
|
@@ -16438,18 +16568,18 @@ var SwitchInput = (size) => css106`
|
|
|
16438
16568
|
cursor: not-allowed;
|
|
16439
16569
|
}
|
|
16440
16570
|
`;
|
|
16441
|
-
var SwitchInputCheckedDirectionLeft =
|
|
16571
|
+
var SwitchInputCheckedDirectionLeft = css107`
|
|
16442
16572
|
&:checked {
|
|
16443
16573
|
transform: translateX(var(--spacing-base));
|
|
16444
16574
|
}
|
|
16445
16575
|
`;
|
|
16446
|
-
var SwitchInputCheckedDirectionRight =
|
|
16576
|
+
var SwitchInputCheckedDirectionRight = css107`
|
|
16447
16577
|
transform: translateX(-var(--spacing-base));
|
|
16448
16578
|
&:checked {
|
|
16449
16579
|
transform: translateX(0);
|
|
16450
16580
|
}
|
|
16451
16581
|
`;
|
|
16452
|
-
var SwitchInputDisabled =
|
|
16582
|
+
var SwitchInputDisabled = css107`
|
|
16453
16583
|
opacity: var(--opacity-50);
|
|
16454
16584
|
cursor: not-allowed;
|
|
16455
16585
|
|
|
@@ -16457,19 +16587,19 @@ var SwitchInputDisabled = css106`
|
|
|
16457
16587
|
cursor: not-allowed;
|
|
16458
16588
|
}
|
|
16459
16589
|
`;
|
|
16460
|
-
var SwitchInputLabelAlignmentLeft = (size) =>
|
|
16590
|
+
var SwitchInputLabelAlignmentLeft = (size) => css107`
|
|
16461
16591
|
padding-inline-start: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
16462
16592
|
&:before {
|
|
16463
16593
|
left: 0;
|
|
16464
16594
|
}
|
|
16465
16595
|
`;
|
|
16466
|
-
var SwitchInputLabelAlignmentRight = (size) =>
|
|
16596
|
+
var SwitchInputLabelAlignmentRight = (size) => css107`
|
|
16467
16597
|
padding-inline-end: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
16468
16598
|
&:before {
|
|
16469
16599
|
right: 0;
|
|
16470
16600
|
}
|
|
16471
16601
|
`;
|
|
16472
|
-
var SwitchInputLabel = (size) =>
|
|
16602
|
+
var SwitchInputLabel = (size) => css107`
|
|
16473
16603
|
align-items: center;
|
|
16474
16604
|
color: var(--typography-base);
|
|
16475
16605
|
display: inline-flex;
|
|
@@ -16489,25 +16619,25 @@ var SwitchInputLabel = (size) => css106`
|
|
|
16489
16619
|
top: 0;
|
|
16490
16620
|
}
|
|
16491
16621
|
`;
|
|
16492
|
-
var SwitchTextAlignmentLeft = (size) =>
|
|
16622
|
+
var SwitchTextAlignmentLeft = (size) => css107`
|
|
16493
16623
|
padding-inline-start: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
16494
16624
|
`;
|
|
16495
|
-
var SwitchTextAlignmentRight = (size) =>
|
|
16625
|
+
var SwitchTextAlignmentRight = (size) => css107`
|
|
16496
16626
|
padding-inline-end: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
16497
16627
|
`;
|
|
16498
|
-
var SwitchText =
|
|
16628
|
+
var SwitchText = css107`
|
|
16499
16629
|
color: var(--gray-500);
|
|
16500
16630
|
font-size: var(--fs-sm);
|
|
16501
16631
|
`;
|
|
16502
|
-
var SwitchInputContainerAlignmentLeft =
|
|
16632
|
+
var SwitchInputContainerAlignmentLeft = css107`
|
|
16503
16633
|
flex-direction: row;
|
|
16504
16634
|
`;
|
|
16505
|
-
var SwitchInputContainerAlignmentRight =
|
|
16635
|
+
var SwitchInputContainerAlignmentRight = css107`
|
|
16506
16636
|
flex-direction: row-reverse;
|
|
16507
16637
|
`;
|
|
16508
16638
|
|
|
16509
16639
|
// src/components/Switch/Switch.tsx
|
|
16510
|
-
import { Fragment as Fragment19, jsx as
|
|
16640
|
+
import { Fragment as Fragment19, jsx as jsx140, jsxs as jsxs94 } from "@emotion/react/jsx-runtime";
|
|
16511
16641
|
var Switch = forwardRef29(
|
|
16512
16642
|
({
|
|
16513
16643
|
label,
|
|
@@ -16547,7 +16677,7 @@ var Switch = forwardRef29(
|
|
|
16547
16677
|
inputProps.disabled ? SwitchInputDisabled : void 0
|
|
16548
16678
|
],
|
|
16549
16679
|
children: [
|
|
16550
|
-
/* @__PURE__ */
|
|
16680
|
+
/* @__PURE__ */ jsx140(
|
|
16551
16681
|
"input",
|
|
16552
16682
|
{
|
|
16553
16683
|
type: "checkbox",
|
|
@@ -16556,11 +16686,11 @@ var Switch = forwardRef29(
|
|
|
16556
16686
|
ref
|
|
16557
16687
|
}
|
|
16558
16688
|
),
|
|
16559
|
-
/* @__PURE__ */
|
|
16689
|
+
/* @__PURE__ */ jsx140("span", { css: [SwitchInputLabel(switchSize), SwitchInputLabelAlignment], children: label })
|
|
16560
16690
|
]
|
|
16561
16691
|
}
|
|
16562
16692
|
),
|
|
16563
|
-
additionalText ? /* @__PURE__ */
|
|
16693
|
+
additionalText ? /* @__PURE__ */ jsx140(
|
|
16564
16694
|
"p",
|
|
16565
16695
|
{
|
|
16566
16696
|
css: [
|
|
@@ -16576,8 +16706,8 @@ var Switch = forwardRef29(
|
|
|
16576
16706
|
);
|
|
16577
16707
|
|
|
16578
16708
|
// src/components/Table/Table.styles.ts
|
|
16579
|
-
import { css as
|
|
16580
|
-
var table = ({ cellPadding = "var(--spacing-sm)" }) =>
|
|
16709
|
+
import { css as css108 } from "@emotion/react";
|
|
16710
|
+
var table = ({ cellPadding = "var(--spacing-sm)" }) => css108`
|
|
16581
16711
|
border-bottom: 1px solid var(--gray-400);
|
|
16582
16712
|
border-collapse: collapse;
|
|
16583
16713
|
min-width: 100%;
|
|
@@ -16597,21 +16727,21 @@ var table = ({ cellPadding = "var(--spacing-sm)" }) => css107`
|
|
|
16597
16727
|
background-color: var(--gray-50);
|
|
16598
16728
|
}
|
|
16599
16729
|
`;
|
|
16600
|
-
var tableHead =
|
|
16730
|
+
var tableHead = css108`
|
|
16601
16731
|
color: var(--typography-base);
|
|
16602
16732
|
text-align: left;
|
|
16603
16733
|
`;
|
|
16604
|
-
var tableRow =
|
|
16734
|
+
var tableRow = css108`
|
|
16605
16735
|
border-bottom: 1px solid var(--gray-200);
|
|
16606
16736
|
font-size: var(--fs-sm);
|
|
16607
16737
|
`;
|
|
16608
|
-
var tableCellHead =
|
|
16738
|
+
var tableCellHead = css108`
|
|
16609
16739
|
font-size: var(--fs-sm);
|
|
16610
16740
|
font-weight: var(--fw-regular);
|
|
16611
16741
|
line-height: 1.2;
|
|
16612
16742
|
}
|
|
16613
16743
|
`;
|
|
16614
|
-
var responsiveTableContainer =
|
|
16744
|
+
var responsiveTableContainer = css108`
|
|
16615
16745
|
max-width: calc(100vw - var(--spacing-md) * 2);
|
|
16616
16746
|
overflow-x: auto;
|
|
16617
16747
|
${scrollbarStyles}
|
|
@@ -16630,47 +16760,47 @@ var responsiveTableContainer = css107`
|
|
|
16630
16760
|
`;
|
|
16631
16761
|
|
|
16632
16762
|
// src/components/Table/ResponsiveTableContainer.tsx
|
|
16633
|
-
import { jsx as
|
|
16763
|
+
import { jsx as jsx141 } from "@emotion/react/jsx-runtime";
|
|
16634
16764
|
var ResponsiveTableContainer = ({ children }) => {
|
|
16635
|
-
return /* @__PURE__ */
|
|
16765
|
+
return /* @__PURE__ */ jsx141("div", { css: responsiveTableContainer, children });
|
|
16636
16766
|
};
|
|
16637
16767
|
|
|
16638
16768
|
// src/components/Table/Table.tsx
|
|
16639
|
-
import * as
|
|
16640
|
-
import { jsx as
|
|
16641
|
-
var Table =
|
|
16769
|
+
import * as React22 from "react";
|
|
16770
|
+
import { jsx as jsx142 } from "@emotion/react/jsx-runtime";
|
|
16771
|
+
var Table = React22.forwardRef(
|
|
16642
16772
|
({ children, cellPadding, ...otherProps }, ref) => {
|
|
16643
|
-
return /* @__PURE__ */
|
|
16773
|
+
return /* @__PURE__ */ jsx142("table", { ref, css: table({ cellPadding }), ...otherProps, children });
|
|
16644
16774
|
}
|
|
16645
16775
|
);
|
|
16646
|
-
var TableHead =
|
|
16776
|
+
var TableHead = React22.forwardRef(
|
|
16647
16777
|
({ children, ...otherProps }, ref) => {
|
|
16648
|
-
return /* @__PURE__ */
|
|
16778
|
+
return /* @__PURE__ */ jsx142("thead", { ref, css: tableHead, ...otherProps, children });
|
|
16649
16779
|
}
|
|
16650
16780
|
);
|
|
16651
|
-
var TableBody =
|
|
16781
|
+
var TableBody = React22.forwardRef(
|
|
16652
16782
|
({ children, ...otherProps }, ref) => {
|
|
16653
|
-
return /* @__PURE__ */
|
|
16783
|
+
return /* @__PURE__ */ jsx142("tbody", { ref, ...otherProps, children });
|
|
16654
16784
|
}
|
|
16655
16785
|
);
|
|
16656
|
-
var TableFoot =
|
|
16786
|
+
var TableFoot = React22.forwardRef(
|
|
16657
16787
|
({ children, ...otherProps }, ref) => {
|
|
16658
|
-
return /* @__PURE__ */
|
|
16788
|
+
return /* @__PURE__ */ jsx142("tfoot", { ref, ...otherProps, children });
|
|
16659
16789
|
}
|
|
16660
16790
|
);
|
|
16661
|
-
var TableRow =
|
|
16791
|
+
var TableRow = React22.forwardRef(
|
|
16662
16792
|
({ children, ...otherProps }, ref) => {
|
|
16663
|
-
return /* @__PURE__ */
|
|
16793
|
+
return /* @__PURE__ */ jsx142("tr", { ref, css: tableRow, ...otherProps, children });
|
|
16664
16794
|
}
|
|
16665
16795
|
);
|
|
16666
|
-
var TableCellHead =
|
|
16796
|
+
var TableCellHead = React22.forwardRef(
|
|
16667
16797
|
({ children, ...otherProps }, ref) => {
|
|
16668
|
-
return /* @__PURE__ */
|
|
16798
|
+
return /* @__PURE__ */ jsx142("th", { ref, css: tableCellHead, ...otherProps, children });
|
|
16669
16799
|
}
|
|
16670
16800
|
);
|
|
16671
|
-
var TableCellData =
|
|
16801
|
+
var TableCellData = React22.forwardRef(
|
|
16672
16802
|
({ children, ...otherProps }, ref) => {
|
|
16673
|
-
return /* @__PURE__ */
|
|
16803
|
+
return /* @__PURE__ */ jsx142("td", { ref, ...otherProps, children });
|
|
16674
16804
|
}
|
|
16675
16805
|
);
|
|
16676
16806
|
|
|
@@ -16685,8 +16815,8 @@ import {
|
|
|
16685
16815
|
import { useCallback as useCallback13, useMemo as useMemo11 } from "react";
|
|
16686
16816
|
|
|
16687
16817
|
// src/components/Tabs/Tabs.styles.ts
|
|
16688
|
-
import { css as
|
|
16689
|
-
var tabButtonStyles =
|
|
16818
|
+
import { css as css109 } from "@emotion/react";
|
|
16819
|
+
var tabButtonStyles = css109`
|
|
16690
16820
|
align-items: center;
|
|
16691
16821
|
border: 0;
|
|
16692
16822
|
height: 2.5rem;
|
|
@@ -16703,14 +16833,14 @@ var tabButtonStyles = css108`
|
|
|
16703
16833
|
box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
|
|
16704
16834
|
}
|
|
16705
16835
|
`;
|
|
16706
|
-
var tabButtonGroupStyles =
|
|
16836
|
+
var tabButtonGroupStyles = css109`
|
|
16707
16837
|
display: flex;
|
|
16708
16838
|
gap: var(--spacing-base);
|
|
16709
16839
|
border-bottom: 1px solid var(--gray-300);
|
|
16710
16840
|
`;
|
|
16711
16841
|
|
|
16712
16842
|
// src/components/Tabs/Tabs.tsx
|
|
16713
|
-
import { jsx as
|
|
16843
|
+
import { jsx as jsx143 } from "@emotion/react/jsx-runtime";
|
|
16714
16844
|
var useCurrentTab = () => {
|
|
16715
16845
|
const context = useAriakitTabStore();
|
|
16716
16846
|
if (!context) {
|
|
@@ -16741,28 +16871,28 @@ var Tabs = ({
|
|
|
16741
16871
|
},
|
|
16742
16872
|
[onSelectedIdChange, useHashForState]
|
|
16743
16873
|
);
|
|
16744
|
-
return /* @__PURE__ */
|
|
16874
|
+
return /* @__PURE__ */ jsx143(AriakitTabProvider, { selectedId: selected, selectOnMove: !manual, setSelectedId: onTabSelect, ...props, children });
|
|
16745
16875
|
};
|
|
16746
16876
|
var TabButtonGroup = ({ children, ...props }) => {
|
|
16747
|
-
return /* @__PURE__ */
|
|
16877
|
+
return /* @__PURE__ */ jsx143(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
|
|
16748
16878
|
};
|
|
16749
16879
|
var TabButton = ({
|
|
16750
16880
|
children,
|
|
16751
16881
|
id,
|
|
16752
16882
|
...props
|
|
16753
16883
|
}) => {
|
|
16754
|
-
return /* @__PURE__ */
|
|
16884
|
+
return /* @__PURE__ */ jsx143(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
|
|
16755
16885
|
};
|
|
16756
16886
|
var TabContent = ({
|
|
16757
16887
|
children,
|
|
16758
16888
|
...props
|
|
16759
16889
|
}) => {
|
|
16760
|
-
return /* @__PURE__ */
|
|
16890
|
+
return /* @__PURE__ */ jsx143(AriakitTabPanel, { ...props, children });
|
|
16761
16891
|
};
|
|
16762
16892
|
|
|
16763
16893
|
// src/components/Validation/StatusBullet.styles.ts
|
|
16764
|
-
import { css as
|
|
16765
|
-
var StatusBulletContainer =
|
|
16894
|
+
import { css as css110 } from "@emotion/react";
|
|
16895
|
+
var StatusBulletContainer = css110`
|
|
16766
16896
|
align-items: center;
|
|
16767
16897
|
align-self: center;
|
|
16768
16898
|
color: var(--gray-500);
|
|
@@ -16778,33 +16908,33 @@ var StatusBulletContainer = css109`
|
|
|
16778
16908
|
display: block;
|
|
16779
16909
|
}
|
|
16780
16910
|
`;
|
|
16781
|
-
var StatusBulletBase =
|
|
16911
|
+
var StatusBulletBase = css110`
|
|
16782
16912
|
font-size: var(--fs-sm);
|
|
16783
16913
|
&:before {
|
|
16784
16914
|
width: var(--fs-xs);
|
|
16785
16915
|
height: var(--fs-xs);
|
|
16786
16916
|
}
|
|
16787
16917
|
`;
|
|
16788
|
-
var StatusBulletSmall =
|
|
16918
|
+
var StatusBulletSmall = css110`
|
|
16789
16919
|
font-size: var(--fs-xs);
|
|
16790
16920
|
&:before {
|
|
16791
16921
|
width: var(--fs-xxs);
|
|
16792
16922
|
height: var(--fs-xxs);
|
|
16793
16923
|
}
|
|
16794
16924
|
`;
|
|
16795
|
-
var StatusDraft =
|
|
16925
|
+
var StatusDraft = css110`
|
|
16796
16926
|
&:before {
|
|
16797
16927
|
background: var(--white);
|
|
16798
16928
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
16799
16929
|
}
|
|
16800
16930
|
`;
|
|
16801
|
-
var StatusModified =
|
|
16931
|
+
var StatusModified = css110`
|
|
16802
16932
|
&:before {
|
|
16803
16933
|
background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
|
|
16804
16934
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
16805
16935
|
}
|
|
16806
16936
|
`;
|
|
16807
|
-
var StatusError =
|
|
16937
|
+
var StatusError = css110`
|
|
16808
16938
|
color: var(--error);
|
|
16809
16939
|
&:before {
|
|
16810
16940
|
/* TODO: replace this with an svg icon */
|
|
@@ -16817,29 +16947,44 @@ var StatusError = css109`
|
|
|
16817
16947
|
);
|
|
16818
16948
|
}
|
|
16819
16949
|
`;
|
|
16820
|
-
var StatusPublished =
|
|
16950
|
+
var StatusPublished = css110`
|
|
16821
16951
|
&:before {
|
|
16822
16952
|
background: var(--accent-dark);
|
|
16823
16953
|
}
|
|
16824
16954
|
`;
|
|
16825
|
-
var StatusOrphan =
|
|
16955
|
+
var StatusOrphan = css110`
|
|
16826
16956
|
&:before {
|
|
16827
16957
|
background: var(--brand-secondary-5);
|
|
16828
16958
|
}
|
|
16829
16959
|
`;
|
|
16830
|
-
var StatusUnknown =
|
|
16960
|
+
var StatusUnknown = css110`
|
|
16831
16961
|
&:before {
|
|
16832
16962
|
background: var(--gray-800);
|
|
16833
16963
|
}
|
|
16834
16964
|
`;
|
|
16835
|
-
var StatusDeleted =
|
|
16965
|
+
var StatusDeleted = css110`
|
|
16836
16966
|
&:before {
|
|
16837
16967
|
background: var(--error);
|
|
16838
16968
|
}
|
|
16839
16969
|
`;
|
|
16840
16970
|
|
|
16841
16971
|
// src/components/Validation/StatusBullet.tsx
|
|
16842
|
-
import { jsx as
|
|
16972
|
+
import { jsx as jsx144 } from "@emotion/react/jsx-runtime";
|
|
16973
|
+
var currentStateStyles = {
|
|
16974
|
+
Error: StatusError,
|
|
16975
|
+
Modified: StatusModified,
|
|
16976
|
+
Unsaved: StatusDraft,
|
|
16977
|
+
Orphan: StatusOrphan,
|
|
16978
|
+
Published: StatusPublished,
|
|
16979
|
+
Draft: StatusDraft,
|
|
16980
|
+
Previous: StatusDraft,
|
|
16981
|
+
Unknown: StatusUnknown,
|
|
16982
|
+
Deleted: StatusDeleted
|
|
16983
|
+
};
|
|
16984
|
+
var statusSize = {
|
|
16985
|
+
sm: StatusBulletSmall,
|
|
16986
|
+
base: StatusBulletBase
|
|
16987
|
+
};
|
|
16843
16988
|
var StatusBullet = ({
|
|
16844
16989
|
status,
|
|
16845
16990
|
hideText = false,
|
|
@@ -16848,31 +16993,19 @@ var StatusBullet = ({
|
|
|
16848
16993
|
compact = false,
|
|
16849
16994
|
...props
|
|
16850
16995
|
}) => {
|
|
16851
|
-
const
|
|
16852
|
-
Error: StatusError,
|
|
16853
|
-
Modified: StatusModified,
|
|
16854
|
-
Unsaved: StatusDraft,
|
|
16855
|
-
Orphan: StatusOrphan,
|
|
16856
|
-
Published: StatusPublished,
|
|
16857
|
-
Draft: StatusDraft,
|
|
16858
|
-
Previous: StatusDraft,
|
|
16859
|
-
Unknown: StatusUnknown,
|
|
16860
|
-
Deleted: StatusDeleted
|
|
16861
|
-
};
|
|
16862
|
-
const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
|
|
16863
|
-
const StatusComponent = () => /* @__PURE__ */ jsx143(
|
|
16996
|
+
const StatusComponent = () => /* @__PURE__ */ jsx144(
|
|
16864
16997
|
"span",
|
|
16865
16998
|
{
|
|
16866
16999
|
role: "status",
|
|
16867
|
-
css: [StatusBulletContainer, currentStateStyles[status], statusSize],
|
|
17000
|
+
css: [StatusBulletContainer, currentStateStyles[status], statusSize[size]],
|
|
16868
17001
|
...props,
|
|
16869
17002
|
children: hideText ? null : message ? message : status
|
|
16870
17003
|
}
|
|
16871
17004
|
);
|
|
16872
17005
|
if (compact) {
|
|
16873
|
-
return /* @__PURE__ */
|
|
17006
|
+
return /* @__PURE__ */ jsx144(StatusComponent, {});
|
|
16874
17007
|
}
|
|
16875
|
-
return /* @__PURE__ */
|
|
17008
|
+
return /* @__PURE__ */ jsx144(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ jsx144("div", { children: /* @__PURE__ */ jsx144(StatusComponent, {}) }) });
|
|
16876
17009
|
};
|
|
16877
17010
|
export {
|
|
16878
17011
|
AddButton,
|
|
@@ -16981,6 +17114,7 @@ export {
|
|
|
16981
17114
|
PageHeaderSection,
|
|
16982
17115
|
Pagination,
|
|
16983
17116
|
Paragraph,
|
|
17117
|
+
ParameterActionButton,
|
|
16984
17118
|
ParameterDrawerHeader,
|
|
16985
17119
|
ParameterGroup,
|
|
16986
17120
|
ParameterImage,
|
|
@@ -17052,6 +17186,7 @@ export {
|
|
|
17052
17186
|
VerticalRhythm,
|
|
17053
17187
|
WarningMessage,
|
|
17054
17188
|
accessibleHidden,
|
|
17189
|
+
actionBarVisibilityStyles,
|
|
17055
17190
|
addPathSegmentToPathname,
|
|
17056
17191
|
borderTopIcon,
|
|
17057
17192
|
breakpoints,
|