@uniformdev/design-system 20.35.0 → 20.35.1-alpha.87
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 +567 -419
- package/dist/index.d.mts +38 -1
- package/dist/index.d.ts +38 -1
- package/dist/index.js +731 -579
- package/package.json +4 -4
package/dist/esm/index.js
CHANGED
|
@@ -96,11 +96,12 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
|
|
|
96
96
|
--typography-inverted: var(--white);
|
|
97
97
|
|
|
98
98
|
/* chart colours */
|
|
99
|
-
--charting-chart-1: #
|
|
100
|
-
--charting-chart-2: #
|
|
101
|
-
--charting-chart-3: #
|
|
102
|
-
--charting-chart-4: #
|
|
103
|
-
--charting-chart-5: #
|
|
99
|
+
--charting-chart-1: #0072B2;
|
|
100
|
+
--charting-chart-2: #D55E00;
|
|
101
|
+
--charting-chart-3: #009E73;
|
|
102
|
+
--charting-chart-4: #E41A1C;
|
|
103
|
+
--charting-chart-5: #F0E442;
|
|
104
|
+
--charting-chart-6: #56B4E9;
|
|
104
105
|
|
|
105
106
|
/* utility colours */
|
|
106
107
|
--utility-success: #4ade80;
|
|
@@ -3994,7 +3995,7 @@ var menuItem = (textTheme, forceActive) => css24`
|
|
|
3994
3995
|
align-items: center;
|
|
3995
3996
|
border-radius: var(--rounded-base);
|
|
3996
3997
|
background: none;
|
|
3997
|
-
color: ${textTheme === "base"
|
|
3998
|
+
color: ${textTheme === "base" || textTheme === "accent-alt" ? "var(--typography-base)" : "var(--brand-secondary-5)"};
|
|
3998
3999
|
display: flex;
|
|
3999
4000
|
font-weight: var(--fw-regular);
|
|
4000
4001
|
font-size: var(--menu-item-font-size);
|
|
@@ -4013,7 +4014,7 @@ var menuItem = (textTheme, forceActive) => css24`
|
|
|
4013
4014
|
}
|
|
4014
4015
|
|
|
4015
4016
|
svg {
|
|
4016
|
-
${textTheme === "red" ? "" : `color: var(--gray-400)`};
|
|
4017
|
+
${textTheme === "red" ? "" : textTheme === "accent-alt" ? "color: var(--accent-alt-dark);" : `color: var(--gray-400)`};
|
|
4017
4018
|
width: var(--menu-item-icon-size);
|
|
4018
4019
|
height: var(--menu-item-icon-size);
|
|
4019
4020
|
}
|
|
@@ -4022,7 +4023,7 @@ var menuItem = (textTheme, forceActive) => css24`
|
|
|
4022
4023
|
[aria-selected='true'] {
|
|
4023
4024
|
background: var(--gray-200);
|
|
4024
4025
|
svg {
|
|
4025
|
-
|
|
4026
|
+
${textTheme === "red" ? `color: var(--action-destructive-active);` : textTheme === "accent-alt" ? "color: var(--accent-alt-dark-active);" : `color: var(--accent-dark-active);`}
|
|
4026
4027
|
}
|
|
4027
4028
|
}
|
|
4028
4029
|
|
|
@@ -4032,7 +4033,7 @@ var menuItem = (textTheme, forceActive) => css24`
|
|
|
4032
4033
|
${typeof forceActive === "undefined" ? activeMenuItem : ""}
|
|
4033
4034
|
|
|
4034
4035
|
svg {
|
|
4035
|
-
|
|
4036
|
+
${textTheme === "red" ? `color: var(--action-destructive-hover);` : textTheme === "accent-alt" ? "color: var(--accent-alt-dark-hover);" : `color: var(--accent-dark-hover);`}
|
|
4036
4037
|
}
|
|
4037
4038
|
}
|
|
4038
4039
|
|
|
@@ -4753,15 +4754,15 @@ function InputCreatableComboBox(props) {
|
|
|
4753
4754
|
}
|
|
4754
4755
|
);
|
|
4755
4756
|
}
|
|
4756
|
-
function inputComboBoxStyles(
|
|
4757
|
+
function inputComboBoxStyles(baseStyles2) {
|
|
4757
4758
|
return {
|
|
4758
|
-
...
|
|
4759
|
+
...baseStyles2,
|
|
4759
4760
|
singleValue: (base, sProps) => {
|
|
4760
4761
|
var _a;
|
|
4761
4762
|
return {
|
|
4762
4763
|
...base,
|
|
4763
4764
|
color: "var(--typography-base)",
|
|
4764
|
-
...(_a =
|
|
4765
|
+
...(_a = baseStyles2 == null ? void 0 : baseStyles2.singleValue) == null ? void 0 : _a.call(baseStyles2, base, sProps)
|
|
4765
4766
|
};
|
|
4766
4767
|
},
|
|
4767
4768
|
valueContainer: (base, sProps) => {
|
|
@@ -4770,7 +4771,7 @@ function inputComboBoxStyles(baseStyles) {
|
|
|
4770
4771
|
...base,
|
|
4771
4772
|
padding: "12px var(--spacing-base) 12px var(--spacing-sm)",
|
|
4772
4773
|
gap: "2px",
|
|
4773
|
-
...(_a =
|
|
4774
|
+
...(_a = baseStyles2 == null ? void 0 : baseStyles2.valueContainer) == null ? void 0 : _a.call(baseStyles2, base, sProps)
|
|
4774
4775
|
};
|
|
4775
4776
|
},
|
|
4776
4777
|
input: (base, sProps) => {
|
|
@@ -4783,7 +4784,7 @@ function inputComboBoxStyles(baseStyles) {
|
|
|
4783
4784
|
"& > input": {
|
|
4784
4785
|
boxShadow: "none !important"
|
|
4785
4786
|
},
|
|
4786
|
-
...(_a =
|
|
4787
|
+
...(_a = baseStyles2 == null ? void 0 : baseStyles2.input) == null ? void 0 : _a.call(baseStyles2, base, sProps)
|
|
4787
4788
|
};
|
|
4788
4789
|
},
|
|
4789
4790
|
menu: (base, state) => {
|
|
@@ -4791,7 +4792,7 @@ function inputComboBoxStyles(baseStyles) {
|
|
|
4791
4792
|
return {
|
|
4792
4793
|
...base,
|
|
4793
4794
|
zIndex: "var(--z-20)",
|
|
4794
|
-
...(_a =
|
|
4795
|
+
...(_a = baseStyles2 == null ? void 0 : baseStyles2.menu) == null ? void 0 : _a.call(baseStyles2, base, state)
|
|
4795
4796
|
};
|
|
4796
4797
|
},
|
|
4797
4798
|
control: (base, state) => {
|
|
@@ -4823,7 +4824,7 @@ function inputComboBoxStyles(baseStyles) {
|
|
|
4823
4824
|
},
|
|
4824
4825
|
...state.isFocused ? { borderColor: "var(--gray-300)" } : {}
|
|
4825
4826
|
},
|
|
4826
|
-
...(_a =
|
|
4827
|
+
...(_a = baseStyles2 == null ? void 0 : baseStyles2.control) == null ? void 0 : _a.call(baseStyles2, base, state)
|
|
4827
4828
|
};
|
|
4828
4829
|
},
|
|
4829
4830
|
indicatorsContainer: (base, state) => {
|
|
@@ -4843,14 +4844,14 @@ function inputComboBoxStyles(baseStyles) {
|
|
|
4843
4844
|
"& svg": {
|
|
4844
4845
|
display: "none"
|
|
4845
4846
|
},
|
|
4846
|
-
...(_a =
|
|
4847
|
+
...(_a = baseStyles2 == null ? void 0 : baseStyles2.indicatorsContainer) == null ? void 0 : _a.call(baseStyles2, base, state)
|
|
4847
4848
|
};
|
|
4848
4849
|
},
|
|
4849
4850
|
indicatorSeparator: (base, state) => {
|
|
4850
4851
|
var _a;
|
|
4851
4852
|
return {
|
|
4852
4853
|
display: "none",
|
|
4853
|
-
...(_a =
|
|
4854
|
+
...(_a = baseStyles2 == null ? void 0 : baseStyles2.indicatorSeparator) == null ? void 0 : _a.call(baseStyles2, base, state)
|
|
4854
4855
|
};
|
|
4855
4856
|
},
|
|
4856
4857
|
option: (base, state) => {
|
|
@@ -4861,7 +4862,7 @@ function inputComboBoxStyles(baseStyles) {
|
|
|
4861
4862
|
color: state.isDisabled ? "var(--gray-300)" : "var(--gray-700)",
|
|
4862
4863
|
paddingLeft: isIndented ? "var(--spacing-md)" : "",
|
|
4863
4864
|
backgroundColor: state.isDisabled ? "transparent" : state.isSelected ? "var(--gray-200)" : state.isFocused ? "var(--gray-100)" : "transparent",
|
|
4864
|
-
...(_a =
|
|
4865
|
+
...(_a = baseStyles2 == null ? void 0 : baseStyles2.option) == null ? void 0 : _a.call(baseStyles2, base, state)
|
|
4865
4866
|
};
|
|
4866
4867
|
},
|
|
4867
4868
|
multiValue: (styles) => {
|
|
@@ -10331,7 +10332,7 @@ var LoadingOverlay = ({
|
|
|
10331
10332
|
var LoadingAnimation = ({
|
|
10332
10333
|
label,
|
|
10333
10334
|
width,
|
|
10334
|
-
css:
|
|
10335
|
+
css: css111,
|
|
10335
10336
|
isPaused
|
|
10336
10337
|
}) => {
|
|
10337
10338
|
return /* @__PURE__ */ jsxs66(
|
|
@@ -10342,7 +10343,7 @@ var LoadingAnimation = ({
|
|
|
10342
10343
|
width: typeof width === "number" ? `${width}px` : width,
|
|
10343
10344
|
height: typeof width === "number" ? `${width}px` : width
|
|
10344
10345
|
},
|
|
10345
|
-
css: [loaderAnimationContainer,
|
|
10346
|
+
css: [loaderAnimationContainer, css111],
|
|
10346
10347
|
className: `loader-container${isPaused ? " paused" : ""}`,
|
|
10347
10348
|
children: [
|
|
10348
10349
|
/* @__PURE__ */ jsxs66("div", { className: "bottom-cubes", children: [
|
|
@@ -11497,21 +11498,130 @@ var LabelLeadingIcon = ({
|
|
|
11497
11498
|
) });
|
|
11498
11499
|
};
|
|
11499
11500
|
|
|
11500
|
-
// src/components/ParameterInputs/
|
|
11501
|
+
// src/components/ParameterInputs/ParameterActionButton.tsx
|
|
11502
|
+
import React18 from "react";
|
|
11503
|
+
|
|
11504
|
+
// src/components/ParameterInputs/styles/ParameterActionButton.styles.ts
|
|
11501
11505
|
import { css as css87 } from "@emotion/react";
|
|
11502
|
-
var
|
|
11506
|
+
var baseStyles = css87`
|
|
11507
|
+
--hover-color: var(--accent-dark-hover);
|
|
11508
|
+
--active-color: var(--accent-dark-active);
|
|
11509
|
+
border: 1px solid transparent;
|
|
11510
|
+
border-radius: var(--rounded-base);
|
|
11511
|
+
display: flex;
|
|
11512
|
+
align-items: center;
|
|
11513
|
+
justify-content: center;
|
|
11514
|
+
max-width: fit-content;
|
|
11515
|
+
padding: 0.125rem;
|
|
11516
|
+
transition:
|
|
11517
|
+
border-color var(--duration-fast) var(--timing-ease-out),
|
|
11518
|
+
background var(--duration-fast) var(--timing-ease-out),
|
|
11519
|
+
color var(--duration-fast) var(--timing-ease-out),
|
|
11520
|
+
box-shadow var(--duration-fast) var(--timing-ease-out);
|
|
11521
|
+
min-height: 1.125rem;
|
|
11522
|
+
min-width: 1.125rem;
|
|
11523
|
+
font-size: 0.75rem;
|
|
11524
|
+
|
|
11525
|
+
&:disabled,
|
|
11526
|
+
&[aria-disabled='true'] {
|
|
11527
|
+
opacity: 0.5;
|
|
11528
|
+
cursor: default;
|
|
11529
|
+
}
|
|
11530
|
+
`;
|
|
11531
|
+
var solidHoverStyles = css87`
|
|
11532
|
+
--text-color: var(--typography-inverted);
|
|
11533
|
+
&:hover,
|
|
11534
|
+
&:focus,
|
|
11535
|
+
&:focus-within {
|
|
11536
|
+
border-color: var(--hover-color);
|
|
11537
|
+
background: var(--hover-color);
|
|
11538
|
+
color: var(--text-color);
|
|
11539
|
+
}
|
|
11540
|
+
|
|
11541
|
+
&:active,
|
|
11542
|
+
&[aria-pressed='true'] {
|
|
11543
|
+
border-color: var(--active-color);
|
|
11544
|
+
background: var(--active-color);
|
|
11545
|
+
color: var(--text-color);
|
|
11546
|
+
}
|
|
11547
|
+
`;
|
|
11548
|
+
var outlineHoverStyles = css87`
|
|
11549
|
+
--text-color: var(--typography-light);
|
|
11550
|
+
&:hover:not([aria-disabled='true']),
|
|
11551
|
+
&:focus:not([aria-disabled='true']),
|
|
11552
|
+
&:focus-within:not([aria-disabled='true']) {
|
|
11553
|
+
background: var(--gray-50);
|
|
11554
|
+
border-color: var(--hover-color);
|
|
11555
|
+
}
|
|
11556
|
+
&:active:not([aria-disabled='true']),
|
|
11557
|
+
&[aria-pressed='true']:not([aria-disabled='true']) {
|
|
11558
|
+
border-color: var(--active-color);
|
|
11559
|
+
}
|
|
11560
|
+
`;
|
|
11561
|
+
var invertedStyles = css87`
|
|
11562
|
+
--text-color: var(--typography-inverted);
|
|
11563
|
+
box-shadow: inset 0 0 0 1px transparent;
|
|
11564
|
+
&:hover,
|
|
11565
|
+
&:focus,
|
|
11566
|
+
&:focus-within {
|
|
11567
|
+
box-shadow: inset 0 0 0 1px var(--text-color);
|
|
11568
|
+
color: var(--text-color);
|
|
11569
|
+
}
|
|
11570
|
+
&:active,
|
|
11571
|
+
&[aria-pressed='true'] {
|
|
11572
|
+
background: var(--active-color);
|
|
11573
|
+
border-color: var(--active-color);
|
|
11574
|
+
}
|
|
11575
|
+
`;
|
|
11576
|
+
|
|
11577
|
+
// src/components/ParameterInputs/ParameterActionButton.tsx
|
|
11578
|
+
import { jsx as jsx115 } from "@emotion/react/jsx-runtime";
|
|
11579
|
+
var ParameterActionButton = ({
|
|
11580
|
+
children,
|
|
11581
|
+
themeType,
|
|
11582
|
+
tooltip,
|
|
11583
|
+
renderAs = "button",
|
|
11584
|
+
disabled: disabled2,
|
|
11585
|
+
...props
|
|
11586
|
+
}) => {
|
|
11587
|
+
const shouldApplyInverted = themeType === "filled" && "inverted" in props && props.inverted;
|
|
11588
|
+
const ComponentWrapper = renderAs === "div" ? "div" : "button";
|
|
11589
|
+
const buttonElement = /* @__PURE__ */ jsx115(
|
|
11590
|
+
ComponentWrapper,
|
|
11591
|
+
{
|
|
11592
|
+
css: [
|
|
11593
|
+
baseStyles,
|
|
11594
|
+
themeType === "filled" ? solidHoverStyles : outlineHoverStyles,
|
|
11595
|
+
shouldApplyInverted ? invertedStyles : null
|
|
11596
|
+
],
|
|
11597
|
+
...renderAs === "button" && { type: "button" },
|
|
11598
|
+
...shouldApplyInverted && { "data-inverted": true },
|
|
11599
|
+
...disabled2 && { "aria-disabled": true },
|
|
11600
|
+
...props,
|
|
11601
|
+
children
|
|
11602
|
+
}
|
|
11603
|
+
);
|
|
11604
|
+
if (tooltip && (typeof tooltip === "string" || React18.isValidElement(tooltip))) {
|
|
11605
|
+
return /* @__PURE__ */ jsx115(Tooltip, { title: tooltip, children: buttonElement });
|
|
11606
|
+
}
|
|
11607
|
+
return buttonElement;
|
|
11608
|
+
};
|
|
11609
|
+
|
|
11610
|
+
// src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
|
|
11611
|
+
import { css as css88 } from "@emotion/react";
|
|
11612
|
+
var ParameterDrawerHeaderContainer = css88`
|
|
11503
11613
|
align-items: center;
|
|
11504
11614
|
display: flex;
|
|
11505
11615
|
gap: var(--spacing-base);
|
|
11506
11616
|
justify-content: space-between;
|
|
11507
11617
|
margin-bottom: var(--spacing-sm);
|
|
11508
11618
|
`;
|
|
11509
|
-
var ParameterDrawerHeaderTitleGroup =
|
|
11619
|
+
var ParameterDrawerHeaderTitleGroup = css88`
|
|
11510
11620
|
align-items: center;
|
|
11511
11621
|
display: flex;
|
|
11512
11622
|
gap: var(--spacing-sm);
|
|
11513
11623
|
`;
|
|
11514
|
-
var ParameterDrawerHeaderTitle =
|
|
11624
|
+
var ParameterDrawerHeaderTitle = css88`
|
|
11515
11625
|
text-overflow: ellipsis;
|
|
11516
11626
|
white-space: nowrap;
|
|
11517
11627
|
overflow: hidden;
|
|
@@ -11519,12 +11629,12 @@ var ParameterDrawerHeaderTitle = css87`
|
|
|
11519
11629
|
`;
|
|
11520
11630
|
|
|
11521
11631
|
// src/components/ParameterInputs/ParameterDrawerHeader.tsx
|
|
11522
|
-
import { jsx as
|
|
11632
|
+
import { jsx as jsx116, jsxs as jsxs77 } from "@emotion/react/jsx-runtime";
|
|
11523
11633
|
var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
|
|
11524
11634
|
return /* @__PURE__ */ jsxs77("div", { css: ParameterDrawerHeaderContainer, children: [
|
|
11525
11635
|
/* @__PURE__ */ jsxs77("header", { css: ParameterDrawerHeaderTitleGroup, children: [
|
|
11526
11636
|
iconBeforeTitle,
|
|
11527
|
-
/* @__PURE__ */
|
|
11637
|
+
/* @__PURE__ */ jsx116(Heading2, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title, children: title })
|
|
11528
11638
|
] }),
|
|
11529
11639
|
children
|
|
11530
11640
|
] });
|
|
@@ -11534,11 +11644,15 @@ var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
|
|
|
11534
11644
|
import { forwardRef as forwardRef20 } from "react";
|
|
11535
11645
|
|
|
11536
11646
|
// src/components/ParameterInputs/styles/ParameterGroup.styles.ts
|
|
11537
|
-
import { css as
|
|
11538
|
-
var fieldsetStyles =
|
|
11647
|
+
import { css as css89 } from "@emotion/react";
|
|
11648
|
+
var fieldsetStyles = css89`
|
|
11539
11649
|
&:disabled,
|
|
11540
11650
|
[readonly] {
|
|
11541
|
-
|
|
11651
|
+
input,
|
|
11652
|
+
select,
|
|
11653
|
+
textarea {
|
|
11654
|
+
pointer-events: none;
|
|
11655
|
+
}
|
|
11542
11656
|
|
|
11543
11657
|
label,
|
|
11544
11658
|
legend {
|
|
@@ -11546,19 +11660,19 @@ var fieldsetStyles = css88`
|
|
|
11546
11660
|
}
|
|
11547
11661
|
}
|
|
11548
11662
|
`;
|
|
11549
|
-
var fieldsetLegend2 =
|
|
11663
|
+
var fieldsetLegend2 = css89`
|
|
11550
11664
|
display: block;
|
|
11551
11665
|
font-weight: var(--fw-medium);
|
|
11552
|
-
margin-bottom: var(--spacing-
|
|
11666
|
+
margin-bottom: var(--spacing-base);
|
|
11553
11667
|
width: 100%;
|
|
11554
11668
|
`;
|
|
11555
11669
|
|
|
11556
11670
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
11557
|
-
import { jsx as
|
|
11671
|
+
import { jsx as jsx117, jsxs as jsxs78 } from "@emotion/react/jsx-runtime";
|
|
11558
11672
|
var ParameterGroup = forwardRef20(
|
|
11559
11673
|
({ legend, isDisabled, children, ...props }, ref) => {
|
|
11560
11674
|
return /* @__PURE__ */ jsxs78("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
|
|
11561
|
-
/* @__PURE__ */
|
|
11675
|
+
/* @__PURE__ */ jsx117("legend", { css: fieldsetLegend2, children: legend }),
|
|
11562
11676
|
children
|
|
11563
11677
|
] });
|
|
11564
11678
|
}
|
|
@@ -11572,15 +11686,15 @@ import { useState as useState13 } from "react";
|
|
|
11572
11686
|
import { createPortal as createPortal2 } from "react-dom";
|
|
11573
11687
|
|
|
11574
11688
|
// src/components/ParameterInputs/styles/ParameterImage.styles.ts
|
|
11575
|
-
import { css as
|
|
11576
|
-
var previewWrapper =
|
|
11689
|
+
import { css as css90 } from "@emotion/react";
|
|
11690
|
+
var previewWrapper = css90`
|
|
11577
11691
|
margin-top: var(--spacing-xs);
|
|
11578
11692
|
background: var(--gray-50);
|
|
11579
11693
|
padding: var(--spacing-sm);
|
|
11580
11694
|
border: solid 1px var(--gray-300);
|
|
11581
11695
|
border-radius: var(--rounded-sm);
|
|
11582
11696
|
`;
|
|
11583
|
-
var previewLink =
|
|
11697
|
+
var previewLink = css90`
|
|
11584
11698
|
display: block;
|
|
11585
11699
|
width: 100%;
|
|
11586
11700
|
|
|
@@ -11588,7 +11702,7 @@ var previewLink = css89`
|
|
|
11588
11702
|
max-height: 9rem;
|
|
11589
11703
|
}
|
|
11590
11704
|
`;
|
|
11591
|
-
var previewModalWrapper =
|
|
11705
|
+
var previewModalWrapper = css90`
|
|
11592
11706
|
background: var(--gray-50);
|
|
11593
11707
|
display: flex;
|
|
11594
11708
|
height: 100%;
|
|
@@ -11597,7 +11711,7 @@ var previewModalWrapper = css89`
|
|
|
11597
11711
|
border: solid 1px var(--gray-300);
|
|
11598
11712
|
border-radius: var(--rounded-sm);
|
|
11599
11713
|
`;
|
|
11600
|
-
var previewModalImage =
|
|
11714
|
+
var previewModalImage = css90`
|
|
11601
11715
|
display: flex;
|
|
11602
11716
|
height: 100%;
|
|
11603
11717
|
width: 100%;
|
|
@@ -11609,32 +11723,32 @@ var previewModalImage = css89`
|
|
|
11609
11723
|
`;
|
|
11610
11724
|
|
|
11611
11725
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
11612
|
-
import { Fragment as Fragment12, jsx as
|
|
11726
|
+
import { Fragment as Fragment12, jsx as jsx118, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
|
|
11613
11727
|
function ParameterImagePreview({ imageSrc }) {
|
|
11614
11728
|
const [showModal, setShowModal] = useState13(false);
|
|
11615
11729
|
return imageSrc ? /* @__PURE__ */ jsxs79("div", { css: previewWrapper, children: [
|
|
11616
|
-
/* @__PURE__ */
|
|
11617
|
-
/* @__PURE__ */
|
|
11730
|
+
/* @__PURE__ */ jsx118(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
|
|
11731
|
+
/* @__PURE__ */ jsx118(
|
|
11618
11732
|
"button",
|
|
11619
11733
|
{
|
|
11620
11734
|
css: previewLink,
|
|
11621
11735
|
onClick: () => {
|
|
11622
11736
|
setShowModal(true);
|
|
11623
11737
|
},
|
|
11624
|
-
children: /* @__PURE__ */
|
|
11738
|
+
children: /* @__PURE__ */ jsx118(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
|
|
11625
11739
|
}
|
|
11626
11740
|
)
|
|
11627
11741
|
] }) : null;
|
|
11628
11742
|
}
|
|
11629
11743
|
var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
11630
|
-
return open ? /* @__PURE__ */
|
|
11631
|
-
/* @__PURE__ */
|
|
11744
|
+
return open ? /* @__PURE__ */ jsx118(Fragment12, { children: createPortal2(
|
|
11745
|
+
/* @__PURE__ */ jsx118(
|
|
11632
11746
|
Modal,
|
|
11633
11747
|
{
|
|
11634
11748
|
header: "Image Preview",
|
|
11635
11749
|
onRequestClose,
|
|
11636
|
-
buttonGroup: /* @__PURE__ */
|
|
11637
|
-
children: /* @__PURE__ */
|
|
11750
|
+
buttonGroup: /* @__PURE__ */ jsx118(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
|
|
11751
|
+
children: /* @__PURE__ */ jsx118("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx118(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
|
|
11638
11752
|
}
|
|
11639
11753
|
),
|
|
11640
11754
|
document.body
|
|
@@ -11642,12 +11756,28 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
|
11642
11756
|
};
|
|
11643
11757
|
|
|
11644
11758
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
11645
|
-
import { css as
|
|
11759
|
+
import { css as css93 } from "@emotion/react";
|
|
11646
11760
|
import { useState as useState14 } from "react";
|
|
11647
11761
|
|
|
11648
11762
|
// src/components/ParameterInputs/styles/ParameterInput.styles.ts
|
|
11649
|
-
import { css as
|
|
11650
|
-
var
|
|
11763
|
+
import { css as css91 } from "@emotion/react";
|
|
11764
|
+
var actionBarVisibilityStyles = css91`
|
|
11765
|
+
[data-action-bar] {
|
|
11766
|
+
opacity: 1;
|
|
11767
|
+
transform: translateX(0);
|
|
11768
|
+
transition:
|
|
11769
|
+
opacity var(--duration-fast) var(--timing-ease-out),
|
|
11770
|
+
transform var(--duration-fast) var(--timing-ease-out);
|
|
11771
|
+
}
|
|
11772
|
+
`;
|
|
11773
|
+
var actionBarVisibilityHiddenStyles = css91`
|
|
11774
|
+
opacity: 0;
|
|
11775
|
+
transform: translateX(1rem);
|
|
11776
|
+
transition:
|
|
11777
|
+
opacity var(--duration-fast) var(--timing-ease-out),
|
|
11778
|
+
transform var(--duration-fast) var(--timing-ease-out);
|
|
11779
|
+
`;
|
|
11780
|
+
var inputContainer2 = css91`
|
|
11651
11781
|
position: relative;
|
|
11652
11782
|
scroll-margin: var(--spacing-2xl);
|
|
11653
11783
|
|
|
@@ -11658,16 +11788,17 @@ var inputContainer2 = css90`
|
|
|
11658
11788
|
opacity: var(--opacity-100);
|
|
11659
11789
|
translate: 0 0;
|
|
11660
11790
|
}
|
|
11791
|
+
${actionBarVisibilityStyles}
|
|
11661
11792
|
}
|
|
11662
11793
|
`;
|
|
11663
|
-
var labelText2 =
|
|
11794
|
+
var labelText2 = css91`
|
|
11664
11795
|
align-items: center;
|
|
11665
11796
|
display: flex;
|
|
11666
11797
|
gap: var(--spacing-xs);
|
|
11667
11798
|
font-weight: var(--fw-regular);
|
|
11668
11799
|
margin: 0 0 var(--spacing-xs);
|
|
11669
11800
|
`;
|
|
11670
|
-
var input3 =
|
|
11801
|
+
var input3 = css91`
|
|
11671
11802
|
display: block;
|
|
11672
11803
|
appearance: none;
|
|
11673
11804
|
box-sizing: border-box;
|
|
@@ -11715,18 +11846,18 @@ var input3 = css90`
|
|
|
11715
11846
|
color: var(--gray-400);
|
|
11716
11847
|
}
|
|
11717
11848
|
`;
|
|
11718
|
-
var selectInput =
|
|
11849
|
+
var selectInput = css91`
|
|
11719
11850
|
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");
|
|
11720
11851
|
background-position: right var(--spacing-sm) center;
|
|
11721
11852
|
background-repeat: no-repeat;
|
|
11722
11853
|
background-size: 1rem;
|
|
11723
11854
|
padding-right: var(--spacing-xl);
|
|
11724
11855
|
`;
|
|
11725
|
-
var inputWrapper =
|
|
11856
|
+
var inputWrapper = css91`
|
|
11726
11857
|
display: flex; // used to correct overflow with chrome textarea
|
|
11727
11858
|
position: relative;
|
|
11728
11859
|
`;
|
|
11729
|
-
var inputIcon2 =
|
|
11860
|
+
var inputIcon2 = css91`
|
|
11730
11861
|
align-items: center;
|
|
11731
11862
|
background: var(--white);
|
|
11732
11863
|
border-radius: var(--rounded-md) 0 0 var(--rounded-md);
|
|
@@ -11742,7 +11873,7 @@ var inputIcon2 = css90`
|
|
|
11742
11873
|
width: var(--spacing-lg);
|
|
11743
11874
|
z-index: var(--z-10);
|
|
11744
11875
|
`;
|
|
11745
|
-
var inputToggleLabel2 =
|
|
11876
|
+
var inputToggleLabel2 = css91`
|
|
11746
11877
|
--inline-label-color: var(--typography-base);
|
|
11747
11878
|
align-items: center;
|
|
11748
11879
|
cursor: pointer;
|
|
@@ -11757,7 +11888,7 @@ var inputToggleLabel2 = css90`
|
|
|
11757
11888
|
--inline-label-color: var(--gray-400);
|
|
11758
11889
|
}
|
|
11759
11890
|
`;
|
|
11760
|
-
var toggleInput2 =
|
|
11891
|
+
var toggleInput2 = css91`
|
|
11761
11892
|
appearance: none;
|
|
11762
11893
|
border: 1px solid var(--gray-200);
|
|
11763
11894
|
background: var(--white);
|
|
@@ -11811,7 +11942,7 @@ var toggleInput2 = css90`
|
|
|
11811
11942
|
border-color: var(--gray-300);
|
|
11812
11943
|
}
|
|
11813
11944
|
`;
|
|
11814
|
-
var inlineLabel2 =
|
|
11945
|
+
var inlineLabel2 = css91`
|
|
11815
11946
|
color: var(--inline-label-color);
|
|
11816
11947
|
padding-left: var(--spacing-md);
|
|
11817
11948
|
font-size: var(--fs-sm);
|
|
@@ -11828,20 +11959,29 @@ var inlineLabel2 = css90`
|
|
|
11828
11959
|
}
|
|
11829
11960
|
}
|
|
11830
11961
|
`;
|
|
11831
|
-
var inputMenu =
|
|
11962
|
+
var inputMenu = css91`
|
|
11832
11963
|
background: none;
|
|
11833
11964
|
border: none;
|
|
11834
11965
|
padding: var(--spacing-2xs);
|
|
11835
11966
|
position: absolute;
|
|
11836
11967
|
top: calc(var(--spacing-md) * -1.2);
|
|
11837
11968
|
right: 0;
|
|
11969
|
+
|
|
11970
|
+
&:disabled,
|
|
11971
|
+
&[aria-disabled='true'] {
|
|
11972
|
+
color: var(--gray-400);
|
|
11973
|
+
cursor: default;
|
|
11974
|
+
}
|
|
11838
11975
|
`;
|
|
11839
|
-
var inputActionItems =
|
|
11976
|
+
var inputActionItems = css91`
|
|
11840
11977
|
display: flex;
|
|
11978
|
+
${actionBarVisibilityHiddenStyles}
|
|
11841
11979
|
`;
|
|
11842
|
-
var inputMenuHover =
|
|
11980
|
+
var inputMenuHover = css91`
|
|
11843
11981
|
opacity: var(--opacity-50);
|
|
11844
11982
|
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
11983
|
+
margin-top: 0.25rem;
|
|
11984
|
+
${actionBarVisibilityHiddenStyles}
|
|
11845
11985
|
|
|
11846
11986
|
// css trick to style the input like a hover or active state when the menu button is active or hovered
|
|
11847
11987
|
&:hover,
|
|
@@ -11849,11 +11989,11 @@ var inputMenuHover = css90`
|
|
|
11849
11989
|
background-color: var(--gray-200);
|
|
11850
11990
|
}
|
|
11851
11991
|
`;
|
|
11852
|
-
var textarea2 =
|
|
11992
|
+
var textarea2 = css91`
|
|
11853
11993
|
resize: vertical;
|
|
11854
11994
|
min-height: 2rem;
|
|
11855
11995
|
`;
|
|
11856
|
-
var dataConnectButton =
|
|
11996
|
+
var dataConnectButton = css91`
|
|
11857
11997
|
align-items: center;
|
|
11858
11998
|
appearance: none;
|
|
11859
11999
|
box-sizing: border-box;
|
|
@@ -11889,7 +12029,7 @@ var dataConnectButton = css90`
|
|
|
11889
12029
|
pointer-events: none;
|
|
11890
12030
|
}
|
|
11891
12031
|
`;
|
|
11892
|
-
var linkParameterBtn =
|
|
12032
|
+
var linkParameterBtn = css91`
|
|
11893
12033
|
border-radius: var(--rounded-base);
|
|
11894
12034
|
background: transparent;
|
|
11895
12035
|
border: none;
|
|
@@ -11898,7 +12038,7 @@ var linkParameterBtn = css90`
|
|
|
11898
12038
|
font-size: var(--fs-sm);
|
|
11899
12039
|
line-height: 1;
|
|
11900
12040
|
`;
|
|
11901
|
-
var linkParameterControls =
|
|
12041
|
+
var linkParameterControls = css91`
|
|
11902
12042
|
position: absolute;
|
|
11903
12043
|
inset: 0 0 0 auto;
|
|
11904
12044
|
padding: 0 var(--spacing-base);
|
|
@@ -11907,7 +12047,7 @@ var linkParameterControls = css90`
|
|
|
11907
12047
|
justify-content: center;
|
|
11908
12048
|
gap: var(--spacing-base);
|
|
11909
12049
|
`;
|
|
11910
|
-
var linkParameterInput = (withExternalLinkIcon) =>
|
|
12050
|
+
var linkParameterInput = (withExternalLinkIcon) => css91`
|
|
11911
12051
|
padding-right: calc(
|
|
11912
12052
|
${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
|
|
11913
12053
|
var(--spacing-base)
|
|
@@ -11920,7 +12060,7 @@ var linkParameterInput = (withExternalLinkIcon) => css90`
|
|
|
11920
12060
|
}
|
|
11921
12061
|
}
|
|
11922
12062
|
`;
|
|
11923
|
-
var linkParameterIcon =
|
|
12063
|
+
var linkParameterIcon = css91`
|
|
11924
12064
|
align-items: center;
|
|
11925
12065
|
color: var(--brand-secondary-3);
|
|
11926
12066
|
display: flex;
|
|
@@ -11935,28 +12075,30 @@ var linkParameterIcon = css90`
|
|
|
11935
12075
|
`;
|
|
11936
12076
|
|
|
11937
12077
|
// src/components/ParameterInputs/ParameterLabel.tsx
|
|
11938
|
-
import { jsx as
|
|
12078
|
+
import { jsx as jsx119 } from "@emotion/react/jsx-runtime";
|
|
11939
12079
|
var ParameterLabel = ({ id, asSpan, children, testId, ...props }) => {
|
|
11940
|
-
return !asSpan ? /* @__PURE__ */
|
|
12080
|
+
return !asSpan ? /* @__PURE__ */ jsx119("label", { ...props, htmlFor: id, css: labelText2, "data-testid": testId, children }) : /* @__PURE__ */ jsx119("span", { "aria-labelledby": id, css: labelText2, children });
|
|
11941
12081
|
};
|
|
11942
12082
|
|
|
11943
12083
|
// src/components/ParameterInputs/ParameterMenuButton.tsx
|
|
11944
12084
|
import { forwardRef as forwardRef21 } from "react";
|
|
11945
|
-
import { jsx as
|
|
12085
|
+
import { jsx as jsx120 } from "@emotion/react/jsx-runtime";
|
|
11946
12086
|
var ParameterMenuButton = forwardRef21(
|
|
11947
|
-
({ label, children }, ref) => {
|
|
11948
|
-
return /* @__PURE__ */
|
|
12087
|
+
({ label, children, disabled: disabled2 }, ref) => {
|
|
12088
|
+
return /* @__PURE__ */ jsx120(
|
|
11949
12089
|
Menu,
|
|
11950
12090
|
{
|
|
11951
|
-
menuTrigger: /* @__PURE__ */
|
|
12091
|
+
menuTrigger: /* @__PURE__ */ jsx120(
|
|
11952
12092
|
"button",
|
|
11953
12093
|
{
|
|
12094
|
+
"data-action-bar": true,
|
|
11954
12095
|
className: "parameter-menu",
|
|
11955
12096
|
css: [inputMenu, inputMenuHover],
|
|
11956
12097
|
type: "button",
|
|
11957
12098
|
"aria-label": `${label} options`,
|
|
11958
12099
|
ref,
|
|
11959
|
-
|
|
12100
|
+
disabled: disabled2,
|
|
12101
|
+
children: /* @__PURE__ */ jsx120(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
|
|
11960
12102
|
}
|
|
11961
12103
|
),
|
|
11962
12104
|
children
|
|
@@ -11966,14 +12108,14 @@ var ParameterMenuButton = forwardRef21(
|
|
|
11966
12108
|
);
|
|
11967
12109
|
|
|
11968
12110
|
// src/components/ParameterInputs/styles/ParameterShell.styles.ts
|
|
11969
|
-
import { css as
|
|
11970
|
-
var emptyParameterShell =
|
|
12111
|
+
import { css as css92 } from "@emotion/react";
|
|
12112
|
+
var emptyParameterShell = css92`
|
|
11971
12113
|
border-radius: var(--rounded-sm);
|
|
11972
12114
|
flex-grow: 1;
|
|
11973
12115
|
position: relative;
|
|
11974
12116
|
max-width: 100%;
|
|
11975
12117
|
`;
|
|
11976
|
-
var emptyParameterShellText =
|
|
12118
|
+
var emptyParameterShellText = css92`
|
|
11977
12119
|
background: var(--brand-secondary-6);
|
|
11978
12120
|
border-radius: var(--rounded-sm);
|
|
11979
12121
|
padding: var(--spacing-sm);
|
|
@@ -11981,7 +12123,7 @@ var emptyParameterShellText = css91`
|
|
|
11981
12123
|
font-size: var(--fs-sm);
|
|
11982
12124
|
margin: 0;
|
|
11983
12125
|
`;
|
|
11984
|
-
var overrideMarker =
|
|
12126
|
+
var overrideMarker = css92`
|
|
11985
12127
|
border-radius: var(--rounded-sm);
|
|
11986
12128
|
border: 10px solid var(--gray-300);
|
|
11987
12129
|
border-left-color: transparent;
|
|
@@ -11992,7 +12134,7 @@ var overrideMarker = css91`
|
|
|
11992
12134
|
`;
|
|
11993
12135
|
|
|
11994
12136
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
11995
|
-
import { jsx as
|
|
12137
|
+
import { jsx as jsx121, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
|
|
11996
12138
|
var extractParameterProps = (props) => {
|
|
11997
12139
|
const {
|
|
11998
12140
|
id,
|
|
@@ -12067,21 +12209,22 @@ var ParameterShell = ({
|
|
|
12067
12209
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
12068
12210
|
] }),
|
|
12069
12211
|
/* @__PURE__ */ jsxs80("div", { css: inputWrapper, children: [
|
|
12070
|
-
actionItems ? /* @__PURE__ */
|
|
12212
|
+
actionItems ? /* @__PURE__ */ jsx121(
|
|
12071
12213
|
"div",
|
|
12072
12214
|
{
|
|
12215
|
+
"data-action-bar": true,
|
|
12073
12216
|
css: [
|
|
12074
12217
|
inputMenu,
|
|
12075
12218
|
inputActionItems,
|
|
12076
|
-
menuItems ?
|
|
12219
|
+
menuItems ? css93`
|
|
12077
12220
|
right: var(--spacing-md);
|
|
12078
12221
|
` : void 0
|
|
12079
12222
|
],
|
|
12080
12223
|
children: actionItems
|
|
12081
12224
|
}
|
|
12082
12225
|
) : null,
|
|
12083
|
-
menuItems ? /* @__PURE__ */
|
|
12084
|
-
/* @__PURE__ */
|
|
12226
|
+
menuItems ? /* @__PURE__ */ jsx121(ParameterMenuButton, { label: `${label} menu`, disabled: props.disabled, children: menuItems }) : null,
|
|
12227
|
+
/* @__PURE__ */ jsx121(
|
|
12085
12228
|
ParameterShellContext.Provider,
|
|
12086
12229
|
{
|
|
12087
12230
|
value: {
|
|
@@ -12091,14 +12234,14 @@ var ParameterShell = ({
|
|
|
12091
12234
|
errorMessage: errorMessaging,
|
|
12092
12235
|
handleManuallySetErrorMessage: (message) => setErrorMessage(message)
|
|
12093
12236
|
},
|
|
12094
|
-
children: isParameterGroup ? /* @__PURE__ */
|
|
12237
|
+
children: isParameterGroup ? /* @__PURE__ */ jsx121("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ jsxs80(ParameterShellPlaceholder, { children: [
|
|
12095
12238
|
children,
|
|
12096
|
-
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */
|
|
12239
|
+
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx121(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
|
|
12097
12240
|
] })
|
|
12098
12241
|
}
|
|
12099
12242
|
)
|
|
12100
12243
|
] }),
|
|
12101
|
-
/* @__PURE__ */
|
|
12244
|
+
/* @__PURE__ */ jsx121(
|
|
12102
12245
|
FieldMessage,
|
|
12103
12246
|
{
|
|
12104
12247
|
helperMessageTestId: captionTestId,
|
|
@@ -12112,17 +12255,17 @@ var ParameterShell = ({
|
|
|
12112
12255
|
] });
|
|
12113
12256
|
};
|
|
12114
12257
|
var ParameterShellPlaceholder = ({ children }) => {
|
|
12115
|
-
return /* @__PURE__ */
|
|
12258
|
+
return /* @__PURE__ */ jsx121("div", { css: emptyParameterShell, children });
|
|
12116
12259
|
};
|
|
12117
|
-
var ParameterOverrideMarker = (props) => /* @__PURE__ */
|
|
12260
|
+
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" }) }) });
|
|
12118
12261
|
|
|
12119
12262
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
12120
|
-
import { Fragment as Fragment13, jsx as
|
|
12263
|
+
import { Fragment as Fragment13, jsx as jsx122, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
|
|
12121
12264
|
var ParameterImage = forwardRef22(
|
|
12122
12265
|
({ children, ...props }, ref) => {
|
|
12123
12266
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
12124
12267
|
return /* @__PURE__ */ jsxs81(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
|
|
12125
|
-
/* @__PURE__ */
|
|
12268
|
+
/* @__PURE__ */ jsx122(ParameterImageInner, { ref, ...innerProps }),
|
|
12126
12269
|
children
|
|
12127
12270
|
] });
|
|
12128
12271
|
}
|
|
@@ -12132,7 +12275,7 @@ var ParameterImageInner = forwardRef22((props, ref) => {
|
|
|
12132
12275
|
const { id, label, hiddenLabel, errorMessage } = useParameterShell();
|
|
12133
12276
|
const deferredValue = useDeferredValue(value);
|
|
12134
12277
|
return /* @__PURE__ */ jsxs81(Fragment13, { children: [
|
|
12135
|
-
/* @__PURE__ */
|
|
12278
|
+
/* @__PURE__ */ jsx122(
|
|
12136
12279
|
"input",
|
|
12137
12280
|
{
|
|
12138
12281
|
css: input3,
|
|
@@ -12144,21 +12287,21 @@ var ParameterImageInner = forwardRef22((props, ref) => {
|
|
|
12144
12287
|
...props
|
|
12145
12288
|
}
|
|
12146
12289
|
),
|
|
12147
|
-
errorMessage || props.disablePreview ? null : /* @__PURE__ */
|
|
12290
|
+
errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx122(ParameterImagePreview, { imageSrc: deferredValue })
|
|
12148
12291
|
] });
|
|
12149
12292
|
});
|
|
12150
12293
|
|
|
12151
12294
|
// src/components/ParameterInputs/ParameterInput.tsx
|
|
12152
12295
|
import { forwardRef as forwardRef23 } from "react";
|
|
12153
|
-
import { jsx as
|
|
12296
|
+
import { jsx as jsx123 } from "@emotion/react/jsx-runtime";
|
|
12154
12297
|
var ParameterInput = forwardRef23((props, ref) => {
|
|
12155
12298
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
12156
|
-
return /* @__PURE__ */
|
|
12299
|
+
return /* @__PURE__ */ jsx123(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx123(ParameterInputInner, { ref, ...innerProps }) });
|
|
12157
12300
|
});
|
|
12158
12301
|
var ParameterInputInner = forwardRef23(({ enableMouseWheel = false, ...props }, ref) => {
|
|
12159
12302
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
12160
12303
|
const isNumberInputAndMouseWheelDisabled = enableMouseWheel !== true && props.type === "number";
|
|
12161
|
-
return /* @__PURE__ */
|
|
12304
|
+
return /* @__PURE__ */ jsx123(
|
|
12162
12305
|
"input",
|
|
12163
12306
|
{
|
|
12164
12307
|
css: input3,
|
|
@@ -12175,18 +12318,18 @@ var ParameterInputInner = forwardRef23(({ enableMouseWheel = false, ...props },
|
|
|
12175
12318
|
|
|
12176
12319
|
// src/components/ParameterInputs/ParameterLink.tsx
|
|
12177
12320
|
import { forwardRef as forwardRef24 } from "react";
|
|
12178
|
-
import { jsx as
|
|
12321
|
+
import { jsx as jsx124, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
|
|
12179
12322
|
var ParameterLink = forwardRef24(
|
|
12180
12323
|
({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
|
|
12181
12324
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
12182
|
-
return /* @__PURE__ */
|
|
12325
|
+
return /* @__PURE__ */ jsx124(
|
|
12183
12326
|
ParameterShell,
|
|
12184
12327
|
{
|
|
12185
12328
|
"data-testid": "link-parameter-editor",
|
|
12186
12329
|
...shellProps,
|
|
12187
12330
|
label: innerProps.value ? shellProps.label : "",
|
|
12188
12331
|
title: !innerProps.value && typeof shellProps.label === "string" ? shellProps.label : void 0,
|
|
12189
|
-
children: /* @__PURE__ */
|
|
12332
|
+
children: /* @__PURE__ */ jsx124(
|
|
12190
12333
|
ParameterLinkInner,
|
|
12191
12334
|
{
|
|
12192
12335
|
onConnectLink,
|
|
@@ -12203,9 +12346,9 @@ var ParameterLinkInner = forwardRef24(
|
|
|
12203
12346
|
({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
|
|
12204
12347
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
12205
12348
|
if (!props.value)
|
|
12206
|
-
return /* @__PURE__ */
|
|
12349
|
+
return /* @__PURE__ */ jsx124("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
|
|
12207
12350
|
return /* @__PURE__ */ jsxs82("div", { css: inputWrapper, children: [
|
|
12208
|
-
/* @__PURE__ */
|
|
12351
|
+
/* @__PURE__ */ jsx124(
|
|
12209
12352
|
"input",
|
|
12210
12353
|
{
|
|
12211
12354
|
type: "text",
|
|
@@ -12218,7 +12361,7 @@ var ParameterLinkInner = forwardRef24(
|
|
|
12218
12361
|
}
|
|
12219
12362
|
),
|
|
12220
12363
|
/* @__PURE__ */ jsxs82("div", { css: linkParameterControls, children: [
|
|
12221
|
-
/* @__PURE__ */
|
|
12364
|
+
/* @__PURE__ */ jsx124(
|
|
12222
12365
|
"button",
|
|
12223
12366
|
{
|
|
12224
12367
|
type: "button",
|
|
@@ -12230,7 +12373,7 @@ var ParameterLinkInner = forwardRef24(
|
|
|
12230
12373
|
children: "edit"
|
|
12231
12374
|
}
|
|
12232
12375
|
),
|
|
12233
|
-
externalLink ? /* @__PURE__ */
|
|
12376
|
+
externalLink ? /* @__PURE__ */ jsx124(
|
|
12234
12377
|
"a",
|
|
12235
12378
|
{
|
|
12236
12379
|
href: externalLink,
|
|
@@ -12238,7 +12381,7 @@ var ParameterLinkInner = forwardRef24(
|
|
|
12238
12381
|
title: "Open link in new tab",
|
|
12239
12382
|
target: "_blank",
|
|
12240
12383
|
rel: "noopener noreferrer",
|
|
12241
|
-
children: /* @__PURE__ */
|
|
12384
|
+
children: /* @__PURE__ */ jsx124(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
|
|
12242
12385
|
}
|
|
12243
12386
|
) : null
|
|
12244
12387
|
] })
|
|
@@ -12247,15 +12390,15 @@ var ParameterLinkInner = forwardRef24(
|
|
|
12247
12390
|
);
|
|
12248
12391
|
|
|
12249
12392
|
// src/components/ParameterInputs/ParameterMultiSelect.tsx
|
|
12250
|
-
import { jsx as
|
|
12393
|
+
import { jsx as jsx125 } from "@emotion/react/jsx-runtime";
|
|
12251
12394
|
var ParameterMultiSelect = ({ disabled: disabled2 = false, ...props }) => {
|
|
12252
12395
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
12253
|
-
return /* @__PURE__ */
|
|
12396
|
+
return /* @__PURE__ */ jsx125(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx125(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
|
|
12254
12397
|
};
|
|
12255
12398
|
var ParameterMultiSelectInner = (props) => {
|
|
12256
12399
|
var _a;
|
|
12257
12400
|
const { id, label } = useParameterShell();
|
|
12258
|
-
return /* @__PURE__ */
|
|
12401
|
+
return /* @__PURE__ */ jsx125(
|
|
12259
12402
|
InputComboBox,
|
|
12260
12403
|
{
|
|
12261
12404
|
menuPortalTarget: document.body,
|
|
@@ -12305,7 +12448,7 @@ var ParameterMultiSelectInner = (props) => {
|
|
|
12305
12448
|
};
|
|
12306
12449
|
|
|
12307
12450
|
// src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
|
|
12308
|
-
import { Fragment as Fragment14, jsx as
|
|
12451
|
+
import { Fragment as Fragment14, jsx as jsx126, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
|
|
12309
12452
|
var ParameterNameAndPublicIdInput = ({
|
|
12310
12453
|
id,
|
|
12311
12454
|
onBlur,
|
|
@@ -12332,7 +12475,7 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
12332
12475
|
};
|
|
12333
12476
|
autoFocus == null ? void 0 : autoFocus();
|
|
12334
12477
|
return /* @__PURE__ */ jsxs83(Fragment14, { children: [
|
|
12335
|
-
/* @__PURE__ */
|
|
12478
|
+
/* @__PURE__ */ jsx126(
|
|
12336
12479
|
ParameterInput,
|
|
12337
12480
|
{
|
|
12338
12481
|
id: nameIdField,
|
|
@@ -12351,7 +12494,7 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
12351
12494
|
value: values[nameIdField]
|
|
12352
12495
|
}
|
|
12353
12496
|
),
|
|
12354
|
-
/* @__PURE__ */
|
|
12497
|
+
/* @__PURE__ */ jsx126(
|
|
12355
12498
|
ParameterInput,
|
|
12356
12499
|
{
|
|
12357
12500
|
id: publicIdFieldName,
|
|
@@ -12365,11 +12508,11 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
12365
12508
|
caption: !publicIdError ? publicIdCaption : void 0,
|
|
12366
12509
|
placeholder: publicIdPlaceholderText,
|
|
12367
12510
|
errorMessage: publicIdError,
|
|
12368
|
-
menuItems: /* @__PURE__ */
|
|
12511
|
+
menuItems: /* @__PURE__ */ jsx126(
|
|
12369
12512
|
MenuItem,
|
|
12370
12513
|
{
|
|
12371
12514
|
disabled: !values[publicIdFieldName],
|
|
12372
|
-
icon: /* @__PURE__ */
|
|
12515
|
+
icon: /* @__PURE__ */ jsx126(Icon, { icon: "path-trim", iconColor: "currentColor" }),
|
|
12373
12516
|
onClick: handleCopyPidFieldValue,
|
|
12374
12517
|
children: "Copy"
|
|
12375
12518
|
}
|
|
@@ -12377,12 +12520,12 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
12377
12520
|
value: values[publicIdFieldName]
|
|
12378
12521
|
}
|
|
12379
12522
|
),
|
|
12380
|
-
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */
|
|
12523
|
+
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx126(Callout, { type: "caution", children: warnOverLength.message }) : null
|
|
12381
12524
|
] });
|
|
12382
12525
|
};
|
|
12383
12526
|
|
|
12384
12527
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
12385
|
-
import { css as
|
|
12528
|
+
import { css as css99 } from "@emotion/react";
|
|
12386
12529
|
import { ListItemNode, ListNode as ListNode3 } from "@lexical/list";
|
|
12387
12530
|
import {
|
|
12388
12531
|
CODE,
|
|
@@ -12564,23 +12707,23 @@ function DisableStylesPlugin() {
|
|
|
12564
12707
|
}
|
|
12565
12708
|
|
|
12566
12709
|
// src/components/ParameterInputs/rich-text/editorStyles.ts
|
|
12567
|
-
import { css as
|
|
12568
|
-
var textBold =
|
|
12710
|
+
import { css as css94 } from "@emotion/css";
|
|
12711
|
+
var textBold = css94`
|
|
12569
12712
|
font-weight: 700;
|
|
12570
12713
|
`;
|
|
12571
|
-
var textItalic =
|
|
12714
|
+
var textItalic = css94`
|
|
12572
12715
|
font-style: italic;
|
|
12573
12716
|
`;
|
|
12574
|
-
var textUnderline =
|
|
12717
|
+
var textUnderline = css94`
|
|
12575
12718
|
text-decoration: underline;
|
|
12576
12719
|
`;
|
|
12577
|
-
var textStrikethrough =
|
|
12720
|
+
var textStrikethrough = css94`
|
|
12578
12721
|
text-decoration: line-through;
|
|
12579
12722
|
`;
|
|
12580
|
-
var textUnderlineStrikethrough =
|
|
12723
|
+
var textUnderlineStrikethrough = css94`
|
|
12581
12724
|
text-decoration: underline line-through;
|
|
12582
12725
|
`;
|
|
12583
|
-
var textCode =
|
|
12726
|
+
var textCode = css94`
|
|
12584
12727
|
background-color: var(--gray-100);
|
|
12585
12728
|
border-radius: var(--rounded-sm);
|
|
12586
12729
|
display: inline-block;
|
|
@@ -12591,68 +12734,68 @@ var textCode = css93`
|
|
|
12591
12734
|
padding-left: var(--spacing-xs);
|
|
12592
12735
|
padding-right: var(--spacing-xs);
|
|
12593
12736
|
`;
|
|
12594
|
-
var textSuperscript =
|
|
12737
|
+
var textSuperscript = css94`
|
|
12595
12738
|
vertical-align: super;
|
|
12596
12739
|
font-size: smaller;
|
|
12597
12740
|
`;
|
|
12598
|
-
var textSubscript =
|
|
12741
|
+
var textSubscript = css94`
|
|
12599
12742
|
vertical-align: sub;
|
|
12600
12743
|
font-size: smaller;
|
|
12601
12744
|
`;
|
|
12602
|
-
var linkElement =
|
|
12745
|
+
var linkElement = css94`
|
|
12603
12746
|
${link}
|
|
12604
12747
|
${linkColorDefault}
|
|
12605
12748
|
text-decoration: underline;
|
|
12606
12749
|
`;
|
|
12607
|
-
var h12 =
|
|
12750
|
+
var h12 = css94`
|
|
12608
12751
|
font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
|
|
12609
12752
|
`;
|
|
12610
|
-
var h22 =
|
|
12753
|
+
var h22 = css94`
|
|
12611
12754
|
font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
|
|
12612
12755
|
`;
|
|
12613
|
-
var h32 =
|
|
12756
|
+
var h32 = css94`
|
|
12614
12757
|
font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
|
|
12615
12758
|
`;
|
|
12616
|
-
var h42 =
|
|
12759
|
+
var h42 = css94`
|
|
12617
12760
|
font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
|
|
12618
12761
|
`;
|
|
12619
|
-
var h52 =
|
|
12762
|
+
var h52 = css94`
|
|
12620
12763
|
font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
|
|
12621
12764
|
`;
|
|
12622
|
-
var h62 =
|
|
12765
|
+
var h62 = css94`
|
|
12623
12766
|
font-size: var(--fs-base);
|
|
12624
12767
|
`;
|
|
12625
|
-
var heading1Element =
|
|
12768
|
+
var heading1Element = css94`
|
|
12626
12769
|
${h12}
|
|
12627
12770
|
${commonHeadingAttr(true)}
|
|
12628
12771
|
${commonLineHeight}
|
|
12629
12772
|
`;
|
|
12630
|
-
var heading2Element =
|
|
12773
|
+
var heading2Element = css94`
|
|
12631
12774
|
${h22}
|
|
12632
12775
|
${commonHeadingAttr(true)}
|
|
12633
12776
|
${commonLineHeight}
|
|
12634
12777
|
`;
|
|
12635
|
-
var heading3Element =
|
|
12778
|
+
var heading3Element = css94`
|
|
12636
12779
|
${h32}
|
|
12637
12780
|
${commonHeadingAttr(true)}
|
|
12638
12781
|
${commonLineHeight}
|
|
12639
12782
|
`;
|
|
12640
|
-
var heading4Element =
|
|
12783
|
+
var heading4Element = css94`
|
|
12641
12784
|
${h42}
|
|
12642
12785
|
${commonHeadingAttr(true)}
|
|
12643
12786
|
${commonLineHeight}
|
|
12644
12787
|
`;
|
|
12645
|
-
var heading5Element =
|
|
12788
|
+
var heading5Element = css94`
|
|
12646
12789
|
${h52}
|
|
12647
12790
|
${commonHeadingAttr(true)}
|
|
12648
12791
|
${commonLineHeight}
|
|
12649
12792
|
`;
|
|
12650
|
-
var heading6Element =
|
|
12793
|
+
var heading6Element = css94`
|
|
12651
12794
|
${h62}
|
|
12652
12795
|
${commonHeadingAttr(true)}
|
|
12653
12796
|
${commonLineHeight}
|
|
12654
12797
|
`;
|
|
12655
|
-
var paragraphElement =
|
|
12798
|
+
var paragraphElement = css94`
|
|
12656
12799
|
line-height: 1.5;
|
|
12657
12800
|
margin-bottom: var(--spacing-base);
|
|
12658
12801
|
|
|
@@ -12660,7 +12803,7 @@ var paragraphElement = css93`
|
|
|
12660
12803
|
margin-bottom: 0;
|
|
12661
12804
|
}
|
|
12662
12805
|
`;
|
|
12663
|
-
var orderedListElement =
|
|
12806
|
+
var orderedListElement = css94`
|
|
12664
12807
|
${commonLineHeight}
|
|
12665
12808
|
display: block;
|
|
12666
12809
|
list-style: decimal;
|
|
@@ -12689,7 +12832,7 @@ var orderedListElement = css93`
|
|
|
12689
12832
|
}
|
|
12690
12833
|
}
|
|
12691
12834
|
`;
|
|
12692
|
-
var unorderedListElement =
|
|
12835
|
+
var unorderedListElement = css94`
|
|
12693
12836
|
${commonLineHeight}
|
|
12694
12837
|
display: block;
|
|
12695
12838
|
list-style: disc;
|
|
@@ -12710,13 +12853,13 @@ var unorderedListElement = css93`
|
|
|
12710
12853
|
}
|
|
12711
12854
|
}
|
|
12712
12855
|
`;
|
|
12713
|
-
var listItemElement =
|
|
12856
|
+
var listItemElement = css94`
|
|
12714
12857
|
margin-left: var(--spacing-md);
|
|
12715
12858
|
`;
|
|
12716
|
-
var nestedListItemElement =
|
|
12859
|
+
var nestedListItemElement = css94`
|
|
12717
12860
|
list-style-type: none;
|
|
12718
12861
|
`;
|
|
12719
|
-
var blockquoteElement =
|
|
12862
|
+
var blockquoteElement = css94`
|
|
12720
12863
|
border-left: 0.25rem solid var(--gray-300);
|
|
12721
12864
|
color: var(--gray-600);
|
|
12722
12865
|
margin-bottom: var(--spacing-base);
|
|
@@ -12726,7 +12869,7 @@ var blockquoteElement = css93`
|
|
|
12726
12869
|
margin-bottom: 0;
|
|
12727
12870
|
}
|
|
12728
12871
|
`;
|
|
12729
|
-
var codeElement =
|
|
12872
|
+
var codeElement = css94`
|
|
12730
12873
|
background-color: var(--gray-100);
|
|
12731
12874
|
border-radius: var(--rounded-sm);
|
|
12732
12875
|
display: block;
|
|
@@ -12741,7 +12884,7 @@ var codeElement = css93`
|
|
|
12741
12884
|
margin-bottom: 0;
|
|
12742
12885
|
}
|
|
12743
12886
|
`;
|
|
12744
|
-
var tableElement =
|
|
12887
|
+
var tableElement = css94`
|
|
12745
12888
|
border-collapse: collapse;
|
|
12746
12889
|
border-spacing: 0;
|
|
12747
12890
|
border-color: var(--gray-300);
|
|
@@ -12754,7 +12897,7 @@ var tableElement = css93`
|
|
|
12754
12897
|
margin-bottom: 0;
|
|
12755
12898
|
}
|
|
12756
12899
|
`;
|
|
12757
|
-
var tableCellElement =
|
|
12900
|
+
var tableCellElement = css94`
|
|
12758
12901
|
background-color: var(--white);
|
|
12759
12902
|
border-color: var(--gray-300);
|
|
12760
12903
|
border-style: solid;
|
|
@@ -12790,7 +12933,7 @@ var tableCellElement = css93`
|
|
|
12790
12933
|
z-index: 1;
|
|
12791
12934
|
}
|
|
12792
12935
|
`;
|
|
12793
|
-
var tableHeaderElement =
|
|
12936
|
+
var tableHeaderElement = css94`
|
|
12794
12937
|
background-color: var(--gray-100);
|
|
12795
12938
|
border-color: var(--gray-300);
|
|
12796
12939
|
border-style: solid;
|
|
@@ -12860,7 +13003,7 @@ var ImprovedAssetSelectionPlugin = () => {
|
|
|
12860
13003
|
var ImprovedAssetSelectionPlugin_default = ImprovedAssetSelectionPlugin;
|
|
12861
13004
|
|
|
12862
13005
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
12863
|
-
import { css as
|
|
13006
|
+
import { css as css95 } from "@emotion/react";
|
|
12864
13007
|
import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexical/react/LexicalComposerContext";
|
|
12865
13008
|
import { NodeEventPlugin } from "@lexical/react/LexicalNodeEventPlugin";
|
|
12866
13009
|
import {
|
|
@@ -12943,7 +13086,7 @@ var normalizeStateForDeepEqualComparison = (editorState) => {
|
|
|
12943
13086
|
};
|
|
12944
13087
|
|
|
12945
13088
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
12946
|
-
import { Fragment as Fragment15, jsx as
|
|
13089
|
+
import { Fragment as Fragment15, jsx as jsx127, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
|
|
12947
13090
|
var isProjectMapLinkValue = (value) => {
|
|
12948
13091
|
return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
|
|
12949
13092
|
value.nodeId && value.path && value.projectMapId
|
|
@@ -13232,17 +13375,17 @@ var OPEN_LINK_NODE_MODAL_COMMAND = createCommand(
|
|
|
13232
13375
|
);
|
|
13233
13376
|
var LINK_POPOVER_OFFSET_X = 0;
|
|
13234
13377
|
var LINK_POPOVER_OFFSET_Y = 8;
|
|
13235
|
-
var linkPopover =
|
|
13378
|
+
var linkPopover = css95`
|
|
13236
13379
|
position: absolute;
|
|
13237
13380
|
z-index: 11;
|
|
13238
13381
|
`;
|
|
13239
|
-
var linkPopoverContainer =
|
|
13382
|
+
var linkPopoverContainer = css95`
|
|
13240
13383
|
${Popover};
|
|
13241
13384
|
${PopoverVariantSmall};
|
|
13242
13385
|
align-items: center;
|
|
13243
13386
|
display: flex;
|
|
13244
13387
|
`;
|
|
13245
|
-
var linkPopoverAnchor =
|
|
13388
|
+
var linkPopoverAnchor = css95`
|
|
13246
13389
|
${link}
|
|
13247
13390
|
${linkColorDefault}
|
|
13248
13391
|
`;
|
|
@@ -13431,7 +13574,7 @@ function LinkNodePlugin({
|
|
|
13431
13574
|
});
|
|
13432
13575
|
};
|
|
13433
13576
|
return /* @__PURE__ */ jsxs84(Fragment15, { children: [
|
|
13434
|
-
/* @__PURE__ */
|
|
13577
|
+
/* @__PURE__ */ jsx127(
|
|
13435
13578
|
NodeEventPlugin,
|
|
13436
13579
|
{
|
|
13437
13580
|
nodeType: LinkNode,
|
|
@@ -13441,7 +13584,7 @@ function LinkNodePlugin({
|
|
|
13441
13584
|
}
|
|
13442
13585
|
}
|
|
13443
13586
|
),
|
|
13444
|
-
linkPopoverState ? /* @__PURE__ */
|
|
13587
|
+
linkPopoverState ? /* @__PURE__ */ jsx127(
|
|
13445
13588
|
"div",
|
|
13446
13589
|
{
|
|
13447
13590
|
css: linkPopover,
|
|
@@ -13451,7 +13594,7 @@ function LinkNodePlugin({
|
|
|
13451
13594
|
},
|
|
13452
13595
|
ref: linkPopoverElRef,
|
|
13453
13596
|
children: /* @__PURE__ */ jsxs84("div", { css: linkPopoverContainer, children: [
|
|
13454
|
-
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */
|
|
13597
|
+
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx127(
|
|
13455
13598
|
"a",
|
|
13456
13599
|
{
|
|
13457
13600
|
href: parsePath(
|
|
@@ -13463,7 +13606,7 @@ function LinkNodePlugin({
|
|
|
13463
13606
|
children: parsePath(linkPopoverState.node.__link.path)
|
|
13464
13607
|
}
|
|
13465
13608
|
),
|
|
13466
|
-
/* @__PURE__ */
|
|
13609
|
+
/* @__PURE__ */ jsx127(
|
|
13467
13610
|
Button,
|
|
13468
13611
|
{
|
|
13469
13612
|
size: "xs",
|
|
@@ -13471,7 +13614,7 @@ function LinkNodePlugin({
|
|
|
13471
13614
|
onEditLinkNode(linkPopoverState.node);
|
|
13472
13615
|
},
|
|
13473
13616
|
buttonType: "ghost",
|
|
13474
|
-
children: /* @__PURE__ */
|
|
13617
|
+
children: /* @__PURE__ */ jsx127(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
|
|
13475
13618
|
}
|
|
13476
13619
|
)
|
|
13477
13620
|
] })
|
|
@@ -13609,7 +13752,7 @@ function ListIndentPlugin({ maxDepth }) {
|
|
|
13609
13752
|
}
|
|
13610
13753
|
|
|
13611
13754
|
// src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
|
|
13612
|
-
import { css as
|
|
13755
|
+
import { css as css96 } from "@emotion/react";
|
|
13613
13756
|
import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
|
|
13614
13757
|
import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
|
|
13615
13758
|
import {
|
|
@@ -13630,7 +13773,7 @@ import {
|
|
|
13630
13773
|
} from "@lexical/table";
|
|
13631
13774
|
import { $getRoot as $getRoot2, $getSelection as $getSelection3, $isRangeSelection as $isRangeSelection3 } from "lexical";
|
|
13632
13775
|
import { forwardRef as forwardRef25, useCallback as useCallback9, useEffect as useEffect19, useLayoutEffect, useState as useState16 } from "react";
|
|
13633
|
-
import { jsx as
|
|
13776
|
+
import { jsx as jsx128, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
|
|
13634
13777
|
function computeSelectionCount(selection) {
|
|
13635
13778
|
const selectionShape = selection.getShape();
|
|
13636
13779
|
return {
|
|
@@ -13638,7 +13781,7 @@ function computeSelectionCount(selection) {
|
|
|
13638
13781
|
rows: selectionShape.toY - selectionShape.fromY + 1
|
|
13639
13782
|
};
|
|
13640
13783
|
}
|
|
13641
|
-
var tableActionMenuTrigger =
|
|
13784
|
+
var tableActionMenuTrigger = css96`
|
|
13642
13785
|
position: absolute;
|
|
13643
13786
|
transform: translate(calc(-100% - 1px), 1px);
|
|
13644
13787
|
`;
|
|
@@ -13652,7 +13795,7 @@ var TableActionMenuTrigger = forwardRef25((props, ref) => {
|
|
|
13652
13795
|
const relativeY = rect.top - parentRect.top + positioningAnchorEl.scrollTop;
|
|
13653
13796
|
setCoordinates({ x: relativeX, y: relativeY });
|
|
13654
13797
|
}, [tableCellEl, positioningAnchorEl]);
|
|
13655
|
-
return /* @__PURE__ */
|
|
13798
|
+
return /* @__PURE__ */ jsx128(
|
|
13656
13799
|
IconButton,
|
|
13657
13800
|
{
|
|
13658
13801
|
ref,
|
|
@@ -13666,7 +13809,7 @@ var TableActionMenuTrigger = forwardRef25((props, ref) => {
|
|
|
13666
13809
|
size: "xs",
|
|
13667
13810
|
buttonType: "unimportant",
|
|
13668
13811
|
...rest,
|
|
13669
|
-
children: /* @__PURE__ */
|
|
13812
|
+
children: /* @__PURE__ */ jsx128(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
|
|
13670
13813
|
}
|
|
13671
13814
|
);
|
|
13672
13815
|
});
|
|
@@ -13817,13 +13960,13 @@ function TableActionMenu({
|
|
|
13817
13960
|
clearTableSelection();
|
|
13818
13961
|
});
|
|
13819
13962
|
}, [editor, tableCellNode, clearTableSelection]);
|
|
13820
|
-
const menuItemCss =
|
|
13963
|
+
const menuItemCss = css96({
|
|
13821
13964
|
fontSize: "var(--fs-sm)"
|
|
13822
13965
|
});
|
|
13823
13966
|
return /* @__PURE__ */ jsxs85(
|
|
13824
13967
|
Menu,
|
|
13825
13968
|
{
|
|
13826
|
-
menuTrigger: /* @__PURE__ */
|
|
13969
|
+
menuTrigger: /* @__PURE__ */ jsx128(
|
|
13827
13970
|
TableActionMenuTrigger,
|
|
13828
13971
|
{
|
|
13829
13972
|
tableCellEl,
|
|
@@ -13853,7 +13996,7 @@ function TableActionMenu({
|
|
|
13853
13996
|
selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
|
|
13854
13997
|
" below"
|
|
13855
13998
|
] }),
|
|
13856
|
-
/* @__PURE__ */
|
|
13999
|
+
/* @__PURE__ */ jsx128(MenuItemSeparator, {}),
|
|
13857
14000
|
/* @__PURE__ */ jsxs85(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
|
|
13858
14001
|
"Insert ",
|
|
13859
14002
|
selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
|
|
@@ -13864,11 +14007,11 @@ function TableActionMenu({
|
|
|
13864
14007
|
selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
|
|
13865
14008
|
" right"
|
|
13866
14009
|
] }),
|
|
13867
|
-
/* @__PURE__ */
|
|
13868
|
-
/* @__PURE__ */
|
|
13869
|
-
/* @__PURE__ */
|
|
13870
|
-
/* @__PURE__ */
|
|
13871
|
-
/* @__PURE__ */
|
|
14010
|
+
/* @__PURE__ */ jsx128(MenuItemSeparator, {}),
|
|
14011
|
+
/* @__PURE__ */ jsx128(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
|
|
14012
|
+
/* @__PURE__ */ jsx128(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
|
|
14013
|
+
/* @__PURE__ */ jsx128(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
|
|
14014
|
+
/* @__PURE__ */ jsx128(MenuItemSeparator, {}),
|
|
13872
14015
|
/* @__PURE__ */ jsxs85(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
|
|
13873
14016
|
(tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? "Remove" : "Add",
|
|
13874
14017
|
" ",
|
|
@@ -13942,7 +14085,7 @@ function TableCellActionMenuContainer({
|
|
|
13942
14085
|
});
|
|
13943
14086
|
});
|
|
13944
14087
|
});
|
|
13945
|
-
return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */
|
|
14088
|
+
return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ jsx128(
|
|
13946
14089
|
TableActionMenu,
|
|
13947
14090
|
{
|
|
13948
14091
|
tableCellNode,
|
|
@@ -13958,11 +14101,11 @@ function TableActionMenuPlugin({
|
|
|
13958
14101
|
menuPortalEl
|
|
13959
14102
|
}) {
|
|
13960
14103
|
const isEditable = useLexicalEditable();
|
|
13961
|
-
return isEditable ? /* @__PURE__ */
|
|
14104
|
+
return isEditable ? /* @__PURE__ */ jsx128(TableCellActionMenuContainer, { menuPortalEl, positioningAnchorEl }) : null;
|
|
13962
14105
|
}
|
|
13963
14106
|
|
|
13964
14107
|
// src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
|
|
13965
|
-
import { css as
|
|
14108
|
+
import { css as css97 } from "@emotion/react";
|
|
13966
14109
|
import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
|
|
13967
14110
|
import { useLexicalEditable as useLexicalEditable2 } from "@lexical/react/useLexicalEditable";
|
|
13968
14111
|
import {
|
|
@@ -13976,10 +14119,10 @@ import { calculateZoomLevel } from "@lexical/utils";
|
|
|
13976
14119
|
import { $getNearestNodeFromDOMNode } from "lexical";
|
|
13977
14120
|
import { useCallback as useCallback10, useEffect as useEffect20, useMemo as useMemo6, useRef as useRef11, useState as useState17 } from "react";
|
|
13978
14121
|
import { createPortal as createPortal3 } from "react-dom";
|
|
13979
|
-
import { Fragment as Fragment16, jsx as
|
|
14122
|
+
import { Fragment as Fragment16, jsx as jsx129, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
|
|
13980
14123
|
var MIN_ROW_HEIGHT = 33;
|
|
13981
14124
|
var MIN_COLUMN_WIDTH = 50;
|
|
13982
|
-
var tableResizer =
|
|
14125
|
+
var tableResizer = css97`
|
|
13983
14126
|
position: absolute;
|
|
13984
14127
|
z-index: var(--z-10);
|
|
13985
14128
|
`;
|
|
@@ -14277,8 +14420,8 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
14277
14420
|
};
|
|
14278
14421
|
}, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
|
|
14279
14422
|
const resizerStyles = getResizers();
|
|
14280
|
-
return /* @__PURE__ */
|
|
14281
|
-
/* @__PURE__ */
|
|
14423
|
+
return /* @__PURE__ */ jsx129("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ jsxs86(Fragment16, { children: [
|
|
14424
|
+
/* @__PURE__ */ jsx129(
|
|
14282
14425
|
"div",
|
|
14283
14426
|
{
|
|
14284
14427
|
css: tableResizer,
|
|
@@ -14286,7 +14429,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
14286
14429
|
onMouseDown: toggleResize("right")
|
|
14287
14430
|
}
|
|
14288
14431
|
),
|
|
14289
|
-
/* @__PURE__ */
|
|
14432
|
+
/* @__PURE__ */ jsx129(
|
|
14290
14433
|
"div",
|
|
14291
14434
|
{
|
|
14292
14435
|
css: tableResizer,
|
|
@@ -14301,7 +14444,7 @@ function TableCellResizerPlugin({ positioningAnchorEl }) {
|
|
|
14301
14444
|
const isEditable = useLexicalEditable2();
|
|
14302
14445
|
return useMemo6(
|
|
14303
14446
|
() => isEditable ? createPortal3(
|
|
14304
|
-
/* @__PURE__ */
|
|
14447
|
+
/* @__PURE__ */ jsx129(TableCellResizer, { editor, positioningAnchorEl }),
|
|
14305
14448
|
positioningAnchorEl
|
|
14306
14449
|
) : null,
|
|
14307
14450
|
[editor, isEditable, positioningAnchorEl]
|
|
@@ -14367,7 +14510,7 @@ var TableSelectionPlugin = () => {
|
|
|
14367
14510
|
var TableSelectionPlugin_default = TableSelectionPlugin;
|
|
14368
14511
|
|
|
14369
14512
|
// src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
|
|
14370
|
-
import { css as
|
|
14513
|
+
import { css as css98 } from "@emotion/react";
|
|
14371
14514
|
import { $createCodeNode } from "@lexical/code";
|
|
14372
14515
|
import {
|
|
14373
14516
|
$isListNode as $isListNode2,
|
|
@@ -14537,8 +14680,8 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
14537
14680
|
};
|
|
14538
14681
|
|
|
14539
14682
|
// src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
|
|
14540
|
-
import { Fragment as Fragment17, jsx as
|
|
14541
|
-
var toolbar =
|
|
14683
|
+
import { Fragment as Fragment17, jsx as jsx130, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
|
|
14684
|
+
var toolbar = css98`
|
|
14542
14685
|
${scrollbarStyles}
|
|
14543
14686
|
background: var(--gray-50);
|
|
14544
14687
|
border-radius: var(--rounded-base);
|
|
@@ -14552,7 +14695,7 @@ var toolbar = css97`
|
|
|
14552
14695
|
top: calc(var(--spacing-sm) * -2);
|
|
14553
14696
|
z-index: 10;
|
|
14554
14697
|
`;
|
|
14555
|
-
var toolbarGroup =
|
|
14698
|
+
var toolbarGroup = css98`
|
|
14556
14699
|
display: flex;
|
|
14557
14700
|
flex-shrink: 0;
|
|
14558
14701
|
gap: var(--spacing-xs);
|
|
@@ -14569,7 +14712,7 @@ var toolbarGroup = css97`
|
|
|
14569
14712
|
width: 1px;
|
|
14570
14713
|
}
|
|
14571
14714
|
`;
|
|
14572
|
-
var richTextToolbarButton =
|
|
14715
|
+
var richTextToolbarButton = css98`
|
|
14573
14716
|
align-items: center;
|
|
14574
14717
|
appearance: none;
|
|
14575
14718
|
border: 0;
|
|
@@ -14583,21 +14726,21 @@ var richTextToolbarButton = css97`
|
|
|
14583
14726
|
min-width: 32px;
|
|
14584
14727
|
padding: 0 var(--spacing-sm);
|
|
14585
14728
|
`;
|
|
14586
|
-
var richTextToolbarButtonActive =
|
|
14729
|
+
var richTextToolbarButtonActive = css98`
|
|
14587
14730
|
background: var(--gray-200);
|
|
14588
14731
|
`;
|
|
14589
|
-
var textStyleButton =
|
|
14732
|
+
var textStyleButton = css98`
|
|
14590
14733
|
justify-content: space-between;
|
|
14591
14734
|
min-width: 7rem;
|
|
14592
14735
|
`;
|
|
14593
|
-
var toolbarIcon =
|
|
14736
|
+
var toolbarIcon = css98`
|
|
14594
14737
|
color: inherit;
|
|
14595
14738
|
`;
|
|
14596
|
-
var toolbarChevron =
|
|
14739
|
+
var toolbarChevron = css98`
|
|
14597
14740
|
margin-left: var(--spacing-xs);
|
|
14598
14741
|
`;
|
|
14599
14742
|
var RichTextToolbarIcon = ({ icon }) => {
|
|
14600
|
-
return /* @__PURE__ */
|
|
14743
|
+
return /* @__PURE__ */ jsx130(Icon, { icon, css: toolbarIcon, size: "1rem" });
|
|
14601
14744
|
};
|
|
14602
14745
|
var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset }) => {
|
|
14603
14746
|
const [editor] = useLexicalComposerContext8();
|
|
@@ -14718,7 +14861,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14718
14861
|
menuTrigger: /* @__PURE__ */ jsxs87("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", type: "button", children: [
|
|
14719
14862
|
visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
|
|
14720
14863
|
" ",
|
|
14721
|
-
/* @__PURE__ */
|
|
14864
|
+
/* @__PURE__ */ jsx130(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
14722
14865
|
] }),
|
|
14723
14866
|
placement: "bottom-start",
|
|
14724
14867
|
children: [
|
|
@@ -14728,7 +14871,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14728
14871
|
type: "paragraph"
|
|
14729
14872
|
},
|
|
14730
14873
|
...visibleTextualElements
|
|
14731
|
-
].map((element) => /* @__PURE__ */
|
|
14874
|
+
].map((element) => /* @__PURE__ */ jsx130(
|
|
14732
14875
|
MenuItem,
|
|
14733
14876
|
{
|
|
14734
14877
|
"data-testid": "menu-item",
|
|
@@ -14739,12 +14882,12 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14739
14882
|
},
|
|
14740
14883
|
element.type
|
|
14741
14884
|
)),
|
|
14742
|
-
visibleTextualElements.length === 0 ? /* @__PURE__ */
|
|
14885
|
+
visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx130(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
|
|
14743
14886
|
]
|
|
14744
14887
|
}
|
|
14745
14888
|
),
|
|
14746
14889
|
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs87("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-formatting", children: [
|
|
14747
|
-
visibleFormatsWithIcon.map((format) => /* @__PURE__ */
|
|
14890
|
+
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx130(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx130(
|
|
14748
14891
|
"button",
|
|
14749
14892
|
{
|
|
14750
14893
|
"data-testid": `formatting-button-${format.type}`,
|
|
@@ -14756,15 +14899,15 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14756
14899
|
richTextToolbarButton,
|
|
14757
14900
|
activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
|
|
14758
14901
|
],
|
|
14759
|
-
children: /* @__PURE__ */
|
|
14902
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
|
|
14760
14903
|
}
|
|
14761
14904
|
) }, format.type)),
|
|
14762
|
-
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */
|
|
14905
|
+
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx130(
|
|
14763
14906
|
Menu,
|
|
14764
14907
|
{
|
|
14765
|
-
menuTrigger: /* @__PURE__ */
|
|
14908
|
+
menuTrigger: /* @__PURE__ */ jsx130("button", { css: richTextToolbarButton, title: "Alternative text styles", type: "button", children: /* @__PURE__ */ jsx130(Icon, { icon: "more-alt", css: toolbarIcon }) }),
|
|
14766
14909
|
placement: "bottom-start",
|
|
14767
|
-
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */
|
|
14910
|
+
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx130(
|
|
14768
14911
|
MenuItem,
|
|
14769
14912
|
{
|
|
14770
14913
|
onClick: () => {
|
|
@@ -14778,7 +14921,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14778
14921
|
) : null
|
|
14779
14922
|
] }) : null,
|
|
14780
14923
|
visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ jsxs87("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-elements", children: [
|
|
14781
|
-
linkElementVisible ? /* @__PURE__ */
|
|
14924
|
+
linkElementVisible ? /* @__PURE__ */ jsx130(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx130(
|
|
14782
14925
|
"button",
|
|
14783
14926
|
{
|
|
14784
14927
|
"data-testid": "element-link",
|
|
@@ -14791,11 +14934,11 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14791
14934
|
}
|
|
14792
14935
|
},
|
|
14793
14936
|
css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
|
|
14794
|
-
children: /* @__PURE__ */
|
|
14937
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "link" })
|
|
14795
14938
|
}
|
|
14796
14939
|
) }) : null,
|
|
14797
14940
|
visibleLists.size > 0 ? /* @__PURE__ */ jsxs87(Fragment17, { children: [
|
|
14798
|
-
visibleLists.has("unorderedList") ? /* @__PURE__ */
|
|
14941
|
+
visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx130(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx130(
|
|
14799
14942
|
"button",
|
|
14800
14943
|
{
|
|
14801
14944
|
"data-testid": "element-unordered-list",
|
|
@@ -14811,10 +14954,10 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14811
14954
|
richTextToolbarButton,
|
|
14812
14955
|
activeElement === "unorderedList" ? richTextToolbarButtonActive : null
|
|
14813
14956
|
],
|
|
14814
|
-
children: /* @__PURE__ */
|
|
14957
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "layout-list" })
|
|
14815
14958
|
}
|
|
14816
14959
|
) }) : null,
|
|
14817
|
-
visibleLists.has("orderedList") ? /* @__PURE__ */
|
|
14960
|
+
visibleLists.has("orderedList") ? /* @__PURE__ */ jsx130(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx130(
|
|
14818
14961
|
"button",
|
|
14819
14962
|
{
|
|
14820
14963
|
"data-testid": "element-ordered-list",
|
|
@@ -14830,58 +14973,58 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14830
14973
|
richTextToolbarButton,
|
|
14831
14974
|
activeElement === "orderedList" ? richTextToolbarButtonActive : null
|
|
14832
14975
|
],
|
|
14833
|
-
children: /* @__PURE__ */
|
|
14976
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "layout-list-numbered" })
|
|
14834
14977
|
}
|
|
14835
14978
|
) }) : null
|
|
14836
14979
|
] }) : null,
|
|
14837
14980
|
customControls ? customControls : null
|
|
14838
14981
|
] }) : null,
|
|
14839
|
-
visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */
|
|
14982
|
+
visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ jsx130("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-insert", children: /* @__PURE__ */ jsxs87(
|
|
14840
14983
|
Menu,
|
|
14841
14984
|
{
|
|
14842
14985
|
menuTrigger: /* @__PURE__ */ jsxs87("button", { css: richTextToolbarButton, title: "Insert block element", type: "button", children: [
|
|
14843
14986
|
"Insert",
|
|
14844
|
-
/* @__PURE__ */
|
|
14987
|
+
/* @__PURE__ */ jsx130(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
14845
14988
|
] }),
|
|
14846
14989
|
placement: "bottom-start",
|
|
14847
14990
|
children: [
|
|
14848
|
-
quoteElementVisible ? /* @__PURE__ */
|
|
14991
|
+
quoteElementVisible ? /* @__PURE__ */ jsx130(
|
|
14849
14992
|
MenuItem,
|
|
14850
14993
|
{
|
|
14851
14994
|
onClick: () => {
|
|
14852
14995
|
onSelectElement("quote");
|
|
14853
14996
|
},
|
|
14854
|
-
icon: /* @__PURE__ */
|
|
14997
|
+
icon: /* @__PURE__ */ jsx130(Icon, { icon: "quote", iconColor: "currentColor" }),
|
|
14855
14998
|
children: "Quote"
|
|
14856
14999
|
}
|
|
14857
15000
|
) : null,
|
|
14858
|
-
codeElementVisible ? /* @__PURE__ */
|
|
15001
|
+
codeElementVisible ? /* @__PURE__ */ jsx130(
|
|
14859
15002
|
MenuItem,
|
|
14860
15003
|
{
|
|
14861
15004
|
onClick: () => {
|
|
14862
15005
|
onSelectElement("code");
|
|
14863
15006
|
},
|
|
14864
|
-
icon: /* @__PURE__ */
|
|
15007
|
+
icon: /* @__PURE__ */ jsx130(Icon, { icon: "code-slash", iconColor: "currentColor" }),
|
|
14865
15008
|
children: "Code"
|
|
14866
15009
|
}
|
|
14867
15010
|
) : null,
|
|
14868
|
-
tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */
|
|
15011
|
+
tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ jsx130(
|
|
14869
15012
|
MenuItem,
|
|
14870
15013
|
{
|
|
14871
15014
|
onClick: () => {
|
|
14872
15015
|
onSelectElement("table");
|
|
14873
15016
|
},
|
|
14874
|
-
icon: /* @__PURE__ */
|
|
15017
|
+
icon: /* @__PURE__ */ jsx130(Icon, { icon: "view-grid", iconColor: "currentColor" }),
|
|
14875
15018
|
children: "Table"
|
|
14876
15019
|
}
|
|
14877
15020
|
) : null,
|
|
14878
|
-
assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */
|
|
15021
|
+
assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */ jsx130(
|
|
14879
15022
|
MenuItem,
|
|
14880
15023
|
{
|
|
14881
15024
|
onClick: () => {
|
|
14882
15025
|
onSelectElement("asset");
|
|
14883
15026
|
},
|
|
14884
|
-
icon: /* @__PURE__ */
|
|
15027
|
+
icon: /* @__PURE__ */ jsx130(Icon, { icon: "image", iconColor: "currentColor" }),
|
|
14885
15028
|
children: "Asset"
|
|
14886
15029
|
}
|
|
14887
15030
|
) : null
|
|
@@ -14893,7 +15036,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
14893
15036
|
var RichTextToolbar_default = RichTextToolbar;
|
|
14894
15037
|
|
|
14895
15038
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
14896
|
-
import { Fragment as Fragment18, jsx as
|
|
15039
|
+
import { Fragment as Fragment18, jsx as jsx131, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
|
|
14897
15040
|
var ParameterRichText = ({
|
|
14898
15041
|
label,
|
|
14899
15042
|
labelLeadingIcon,
|
|
@@ -14921,13 +15064,13 @@ var ParameterRichText = ({
|
|
|
14921
15064
|
captionTestId,
|
|
14922
15065
|
menuItems,
|
|
14923
15066
|
children: [
|
|
14924
|
-
/* @__PURE__ */
|
|
14925
|
-
menuItems ? /* @__PURE__ */
|
|
15067
|
+
/* @__PURE__ */ jsx131(ParameterRichTextInner, { ...innerProps, children }),
|
|
15068
|
+
menuItems ? /* @__PURE__ */ jsx131(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx131(Fragment18, { children: menuItems }) }) : null
|
|
14926
15069
|
]
|
|
14927
15070
|
}
|
|
14928
15071
|
);
|
|
14929
15072
|
};
|
|
14930
|
-
var editorContainerWrapper =
|
|
15073
|
+
var editorContainerWrapper = css99`
|
|
14931
15074
|
position: relative;
|
|
14932
15075
|
|
|
14933
15076
|
&::before {
|
|
@@ -14943,12 +15086,12 @@ var editorContainerWrapper = css98`
|
|
|
14943
15086
|
z-index: 2;
|
|
14944
15087
|
}
|
|
14945
15088
|
`;
|
|
14946
|
-
var editorWrapper =
|
|
15089
|
+
var editorWrapper = css99`
|
|
14947
15090
|
display: flex;
|
|
14948
15091
|
flex-flow: column;
|
|
14949
15092
|
flex-grow: 1;
|
|
14950
15093
|
`;
|
|
14951
|
-
var editorContainer =
|
|
15094
|
+
var editorContainer = css99`
|
|
14952
15095
|
${scrollbarStyles}
|
|
14953
15096
|
background: var(--white);
|
|
14954
15097
|
border-radius: var(--rounded-sm);
|
|
@@ -14980,7 +15123,7 @@ var editorContainer = css98`
|
|
|
14980
15123
|
max-height: unset;
|
|
14981
15124
|
}
|
|
14982
15125
|
`;
|
|
14983
|
-
var editorContainerOverflowWrapper =
|
|
15126
|
+
var editorContainerOverflowWrapper = css99`
|
|
14984
15127
|
overflow: hidden;
|
|
14985
15128
|
pointer-events: none;
|
|
14986
15129
|
|
|
@@ -14988,7 +15131,7 @@ var editorContainerOverflowWrapper = css98`
|
|
|
14988
15131
|
pointer-events: auto;
|
|
14989
15132
|
}
|
|
14990
15133
|
`;
|
|
14991
|
-
var editorPlaceholder =
|
|
15134
|
+
var editorPlaceholder = css99`
|
|
14992
15135
|
color: var(--gray-500);
|
|
14993
15136
|
font-style: italic;
|
|
14994
15137
|
/* 1px is added to make sure caret is clearly visible when field is focused
|
|
@@ -14999,7 +15142,7 @@ var editorPlaceholder = css98`
|
|
|
14999
15142
|
top: calc(1rem + var(--spacing-sm));
|
|
15000
15143
|
user-select: none;
|
|
15001
15144
|
`;
|
|
15002
|
-
var editorInput =
|
|
15145
|
+
var editorInput = css99`
|
|
15003
15146
|
min-height: 100%;
|
|
15004
15147
|
flex-grow: 1;
|
|
15005
15148
|
|
|
@@ -15073,7 +15216,7 @@ var ParameterRichTextInner = ({
|
|
|
15073
15216
|
editable: !richTextProps.readOnly
|
|
15074
15217
|
};
|
|
15075
15218
|
return /* @__PURE__ */ jsxs88(Fragment18, { children: [
|
|
15076
|
-
/* @__PURE__ */
|
|
15219
|
+
/* @__PURE__ */ jsx131("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx131(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx131(RichText, { ...richTextProps, children }) }) }),
|
|
15077
15220
|
editorFooter ? editorFooter : null
|
|
15078
15221
|
] });
|
|
15079
15222
|
};
|
|
@@ -15141,7 +15284,7 @@ var RichText = ({
|
|
|
15141
15284
|
}
|
|
15142
15285
|
};
|
|
15143
15286
|
return /* @__PURE__ */ jsxs88(Fragment18, { children: [
|
|
15144
|
-
readOnly || minimalInteractivity ? null : /* @__PURE__ */
|
|
15287
|
+
readOnly || minimalInteractivity ? null : /* @__PURE__ */ jsx131(
|
|
15145
15288
|
RichTextToolbar_default,
|
|
15146
15289
|
{
|
|
15147
15290
|
config,
|
|
@@ -15159,33 +15302,33 @@ var RichText = ({
|
|
|
15159
15302
|
ref: onEditorContainerRef,
|
|
15160
15303
|
"data-testid": "value-container",
|
|
15161
15304
|
children: [
|
|
15162
|
-
/* @__PURE__ */
|
|
15305
|
+
/* @__PURE__ */ jsx131(
|
|
15163
15306
|
RichTextPlugin,
|
|
15164
15307
|
{
|
|
15165
|
-
contentEditable: /* @__PURE__ */
|
|
15166
|
-
placeholder: /* @__PURE__ */
|
|
15308
|
+
contentEditable: /* @__PURE__ */ jsx131(ContentEditable, { css: editorInput, className: editorInputClassName }),
|
|
15309
|
+
placeholder: /* @__PURE__ */ jsx131("div", { css: editorPlaceholder, "data-placeholder": true, children: placeholder != null ? placeholder : readOnly ? "empty" : "start editing..." }),
|
|
15167
15310
|
ErrorBoundary: LexicalErrorBoundary
|
|
15168
15311
|
}
|
|
15169
15312
|
),
|
|
15170
|
-
/* @__PURE__ */
|
|
15171
|
-
/* @__PURE__ */
|
|
15172
|
-
/* @__PURE__ */
|
|
15173
|
-
/* @__PURE__ */
|
|
15313
|
+
/* @__PURE__ */ jsx131(ListPlugin, {}),
|
|
15314
|
+
/* @__PURE__ */ jsx131(ListIndentPlugin, { maxDepth: 4 }),
|
|
15315
|
+
/* @__PURE__ */ jsx131(TablePlugin, { hasCellMerge: false, hasCellBackgroundColor: false }),
|
|
15316
|
+
/* @__PURE__ */ jsx131("div", { css: editorContainerOverflowWrapper, "data-testid": "table-action-menu-plugin", children: editorContainerRef && portalContainerRef && !minimalInteractivity ? /* @__PURE__ */ jsx131(
|
|
15174
15317
|
TableActionMenuPlugin,
|
|
15175
15318
|
{
|
|
15176
15319
|
positioningAnchorEl: editorContainerRef,
|
|
15177
15320
|
menuPortalEl: portalContainerRef
|
|
15178
15321
|
}
|
|
15179
15322
|
) : null }),
|
|
15180
|
-
editorContainerRef && !minimalInteractivity ? /* @__PURE__ */
|
|
15181
|
-
readOnly ? null : /* @__PURE__ */
|
|
15182
|
-
/* @__PURE__ */
|
|
15183
|
-
/* @__PURE__ */
|
|
15323
|
+
editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ jsx131(TableCellResizerPlugin, { positioningAnchorEl: editorContainerRef }) : null,
|
|
15324
|
+
readOnly ? null : /* @__PURE__ */ jsx131(HistoryPlugin, {}),
|
|
15325
|
+
/* @__PURE__ */ jsx131(DisableStylesPlugin, {}),
|
|
15326
|
+
/* @__PURE__ */ jsx131(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS })
|
|
15184
15327
|
]
|
|
15185
15328
|
}
|
|
15186
15329
|
),
|
|
15187
|
-
/* @__PURE__ */
|
|
15188
|
-
editorContainerRef ? /* @__PURE__ */
|
|
15330
|
+
/* @__PURE__ */ jsx131(Fragment18, { children }),
|
|
15331
|
+
editorContainerRef ? /* @__PURE__ */ jsx131(
|
|
15189
15332
|
LinkNodePlugin,
|
|
15190
15333
|
{
|
|
15191
15334
|
onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
|
|
@@ -15196,19 +15339,19 @@ var RichText = ({
|
|
|
15196
15339
|
positioningAnchorEl: editorContainerRef
|
|
15197
15340
|
}
|
|
15198
15341
|
) : null,
|
|
15199
|
-
/* @__PURE__ */
|
|
15200
|
-
/* @__PURE__ */
|
|
15342
|
+
/* @__PURE__ */ jsx131(TableSelectionPlugin_default, {}),
|
|
15343
|
+
/* @__PURE__ */ jsx131(ImprovedAssetSelectionPlugin_default, {})
|
|
15201
15344
|
] })
|
|
15202
15345
|
] });
|
|
15203
15346
|
};
|
|
15204
15347
|
|
|
15205
15348
|
// src/components/ParameterInputs/ParameterSelect.tsx
|
|
15206
15349
|
import { forwardRef as forwardRef26 } from "react";
|
|
15207
|
-
import { jsx as
|
|
15350
|
+
import { jsx as jsx132, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
|
|
15208
15351
|
var ParameterSelect = forwardRef26(
|
|
15209
15352
|
({ defaultOption, options, ...props }, ref) => {
|
|
15210
15353
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
15211
|
-
return /* @__PURE__ */
|
|
15354
|
+
return /* @__PURE__ */ jsx132(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx132(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
|
|
15212
15355
|
}
|
|
15213
15356
|
);
|
|
15214
15357
|
var ParameterSelectInner = forwardRef26(
|
|
@@ -15223,10 +15366,10 @@ var ParameterSelectInner = forwardRef26(
|
|
|
15223
15366
|
ref,
|
|
15224
15367
|
...props,
|
|
15225
15368
|
children: [
|
|
15226
|
-
defaultOption ? /* @__PURE__ */
|
|
15369
|
+
defaultOption ? /* @__PURE__ */ jsx132("option", { value: "", children: defaultOption }) : null,
|
|
15227
15370
|
options.map((option) => {
|
|
15228
15371
|
var _a;
|
|
15229
|
-
return /* @__PURE__ */
|
|
15372
|
+
return /* @__PURE__ */ jsx132("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
|
|
15230
15373
|
})
|
|
15231
15374
|
]
|
|
15232
15375
|
}
|
|
@@ -15236,14 +15379,14 @@ var ParameterSelectInner = forwardRef26(
|
|
|
15236
15379
|
|
|
15237
15380
|
// src/components/ParameterInputs/ParameterTextarea.tsx
|
|
15238
15381
|
import { forwardRef as forwardRef27 } from "react";
|
|
15239
|
-
import { jsx as
|
|
15382
|
+
import { jsx as jsx133 } from "@emotion/react/jsx-runtime";
|
|
15240
15383
|
var ParameterTextarea = forwardRef27((props, ref) => {
|
|
15241
15384
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
15242
|
-
return /* @__PURE__ */
|
|
15385
|
+
return /* @__PURE__ */ jsx133(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx133(ParameterTextareaInner, { ref, ...innerProps }) });
|
|
15243
15386
|
});
|
|
15244
15387
|
var ParameterTextareaInner = forwardRef27(({ ...props }, ref) => {
|
|
15245
15388
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
15246
|
-
return /* @__PURE__ */
|
|
15389
|
+
return /* @__PURE__ */ jsx133(
|
|
15247
15390
|
"textarea",
|
|
15248
15391
|
{
|
|
15249
15392
|
css: [input3, textarea2],
|
|
@@ -15257,25 +15400,25 @@ var ParameterTextareaInner = forwardRef27(({ ...props }, ref) => {
|
|
|
15257
15400
|
|
|
15258
15401
|
// src/components/ParameterInputs/ParameterToggle.tsx
|
|
15259
15402
|
import { forwardRef as forwardRef28 } from "react";
|
|
15260
|
-
import { jsx as
|
|
15403
|
+
import { jsx as jsx134, jsxs as jsxs90 } from "@emotion/react/jsx-runtime";
|
|
15261
15404
|
var ParameterToggle = forwardRef28((props, ref) => {
|
|
15262
15405
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
15263
|
-
return /* @__PURE__ */
|
|
15406
|
+
return /* @__PURE__ */ jsx134(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx134(ParameterToggleInner, { ref, ...innerProps }) });
|
|
15264
15407
|
});
|
|
15265
15408
|
var ParameterToggleInner = forwardRef28(
|
|
15266
15409
|
({ children, ...props }, ref) => {
|
|
15267
15410
|
const { id, label } = useParameterShell();
|
|
15268
15411
|
return /* @__PURE__ */ jsxs90("label", { css: inputToggleLabel2, children: [
|
|
15269
|
-
/* @__PURE__ */
|
|
15270
|
-
/* @__PURE__ */
|
|
15412
|
+
/* @__PURE__ */ jsx134("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
|
|
15413
|
+
/* @__PURE__ */ jsx134("span", { css: inlineLabel2, children: label }),
|
|
15271
15414
|
children
|
|
15272
15415
|
] });
|
|
15273
15416
|
}
|
|
15274
15417
|
);
|
|
15275
15418
|
|
|
15276
15419
|
// src/components/ProgressBar/ProgressBar.styles.ts
|
|
15277
|
-
import { css as
|
|
15278
|
-
var container3 =
|
|
15420
|
+
import { css as css100, keyframes as keyframes4 } from "@emotion/react";
|
|
15421
|
+
var container3 = css100`
|
|
15279
15422
|
background: var(--gray-50);
|
|
15280
15423
|
margin-block: var(--spacing-sm);
|
|
15281
15424
|
position: relative;
|
|
@@ -15285,13 +15428,13 @@ var container3 = css99`
|
|
|
15285
15428
|
border: solid 1px var(--gray-300);
|
|
15286
15429
|
`;
|
|
15287
15430
|
var themeMap = {
|
|
15288
|
-
primary:
|
|
15431
|
+
primary: css100`
|
|
15289
15432
|
--progress-color: var(--accent-light);
|
|
15290
15433
|
`,
|
|
15291
|
-
secondary:
|
|
15434
|
+
secondary: css100`
|
|
15292
15435
|
--progress-color: var(--accent-alt-light);
|
|
15293
15436
|
`,
|
|
15294
|
-
destructive:
|
|
15437
|
+
destructive: css100`
|
|
15295
15438
|
--progress-color: var(--brand-secondary-5);
|
|
15296
15439
|
`
|
|
15297
15440
|
};
|
|
@@ -15303,10 +15446,10 @@ var slidingBackgroundPosition = keyframes4`
|
|
|
15303
15446
|
background-position: 64px 0;
|
|
15304
15447
|
}
|
|
15305
15448
|
`;
|
|
15306
|
-
var determinate =
|
|
15449
|
+
var determinate = css100`
|
|
15307
15450
|
background-color: var(--progress-color);
|
|
15308
15451
|
`;
|
|
15309
|
-
var indeterminate =
|
|
15452
|
+
var indeterminate = css100`
|
|
15310
15453
|
background-image: linear-gradient(
|
|
15311
15454
|
45deg,
|
|
15312
15455
|
var(--progress-color) 25%,
|
|
@@ -15320,7 +15463,7 @@ var indeterminate = css99`
|
|
|
15320
15463
|
background-size: 64px 64px;
|
|
15321
15464
|
animation: ${slidingBackgroundPosition} 1s linear infinite;
|
|
15322
15465
|
`;
|
|
15323
|
-
var bar =
|
|
15466
|
+
var bar = css100`
|
|
15324
15467
|
position: absolute;
|
|
15325
15468
|
inset: 0;
|
|
15326
15469
|
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
@@ -15328,7 +15471,7 @@ var bar = css99`
|
|
|
15328
15471
|
`;
|
|
15329
15472
|
|
|
15330
15473
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
15331
|
-
import { jsx as
|
|
15474
|
+
import { jsx as jsx135 } from "@emotion/react/jsx-runtime";
|
|
15332
15475
|
function ProgressBar({
|
|
15333
15476
|
current,
|
|
15334
15477
|
max,
|
|
@@ -15338,7 +15481,7 @@ function ProgressBar({
|
|
|
15338
15481
|
}) {
|
|
15339
15482
|
const valueNow = Math.min(current, max);
|
|
15340
15483
|
const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
|
|
15341
|
-
return /* @__PURE__ */
|
|
15484
|
+
return /* @__PURE__ */ jsx135(
|
|
15342
15485
|
"div",
|
|
15343
15486
|
{
|
|
15344
15487
|
css: container3,
|
|
@@ -15349,7 +15492,7 @@ function ProgressBar({
|
|
|
15349
15492
|
"aria-valuemax": max,
|
|
15350
15493
|
"aria-valuenow": valueNow,
|
|
15351
15494
|
...props,
|
|
15352
|
-
children: /* @__PURE__ */
|
|
15495
|
+
children: /* @__PURE__ */ jsx135(
|
|
15353
15496
|
"div",
|
|
15354
15497
|
{
|
|
15355
15498
|
css: [
|
|
@@ -15368,28 +15511,28 @@ function ProgressBar({
|
|
|
15368
15511
|
}
|
|
15369
15512
|
|
|
15370
15513
|
// src/components/ProgressList/ProgressList.tsx
|
|
15371
|
-
import { css as
|
|
15514
|
+
import { css as css102 } from "@emotion/react";
|
|
15372
15515
|
import { CgCheckO as CgCheckO2 } from "@react-icons/all-files/cg/CgCheckO";
|
|
15373
15516
|
import { CgRadioCheck } from "@react-icons/all-files/cg/CgRadioCheck";
|
|
15374
15517
|
import { CgRecord } from "@react-icons/all-files/cg/CgRecord";
|
|
15375
15518
|
import { useMemo as useMemo8 } from "react";
|
|
15376
15519
|
|
|
15377
15520
|
// src/components/ProgressList/styles/ProgressList.styles.ts
|
|
15378
|
-
import { css as
|
|
15379
|
-
var progressListStyles =
|
|
15521
|
+
import { css as css101 } from "@emotion/react";
|
|
15522
|
+
var progressListStyles = css101`
|
|
15380
15523
|
display: flex;
|
|
15381
15524
|
flex-direction: column;
|
|
15382
15525
|
gap: var(--spacing-sm);
|
|
15383
15526
|
list-style-type: none;
|
|
15384
15527
|
`;
|
|
15385
|
-
var progressListItemStyles =
|
|
15528
|
+
var progressListItemStyles = css101`
|
|
15386
15529
|
display: flex;
|
|
15387
15530
|
gap: var(--spacing-base);
|
|
15388
15531
|
align-items: center;
|
|
15389
15532
|
`;
|
|
15390
15533
|
|
|
15391
15534
|
// src/components/ProgressList/ProgressList.tsx
|
|
15392
|
-
import { jsx as
|
|
15535
|
+
import { jsx as jsx136, jsxs as jsxs91 } from "@emotion/react/jsx-runtime";
|
|
15393
15536
|
var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
15394
15537
|
const itemsWithStatus = useMemo8(() => {
|
|
15395
15538
|
const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
|
|
@@ -15403,8 +15546,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
|
15403
15546
|
return { ...item, status };
|
|
15404
15547
|
});
|
|
15405
15548
|
}, [items, inProgressId]);
|
|
15406
|
-
return /* @__PURE__ */
|
|
15407
|
-
return /* @__PURE__ */
|
|
15549
|
+
return /* @__PURE__ */ jsx136("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
|
|
15550
|
+
return /* @__PURE__ */ jsx136(
|
|
15408
15551
|
ProgressListItem,
|
|
15409
15552
|
{
|
|
15410
15553
|
status,
|
|
@@ -15437,12 +15580,12 @@ var ProgressListItem = ({
|
|
|
15437
15580
|
}, [status, error]);
|
|
15438
15581
|
const statusStyles = useMemo8(() => {
|
|
15439
15582
|
if (error) {
|
|
15440
|
-
return errorLevel === "caution" ?
|
|
15583
|
+
return errorLevel === "caution" ? css102`
|
|
15441
15584
|
color: rgb(161, 98, 7);
|
|
15442
15585
|
& svg {
|
|
15443
15586
|
color: rgb(250, 204, 21);
|
|
15444
15587
|
}
|
|
15445
|
-
` :
|
|
15588
|
+
` : css102`
|
|
15446
15589
|
color: rgb(185, 28, 28);
|
|
15447
15590
|
& svg {
|
|
15448
15591
|
color: var(--brand-primary-2);
|
|
@@ -15450,38 +15593,38 @@ var ProgressListItem = ({
|
|
|
15450
15593
|
`;
|
|
15451
15594
|
}
|
|
15452
15595
|
const colorPerStatus = {
|
|
15453
|
-
completed:
|
|
15596
|
+
completed: css102`
|
|
15454
15597
|
opacity: 0.75;
|
|
15455
15598
|
`,
|
|
15456
|
-
inProgress:
|
|
15599
|
+
inProgress: css102`
|
|
15457
15600
|
-webkit-text-stroke-width: thin;
|
|
15458
15601
|
`,
|
|
15459
|
-
queued:
|
|
15602
|
+
queued: css102`
|
|
15460
15603
|
opacity: 0.5;
|
|
15461
15604
|
`
|
|
15462
15605
|
};
|
|
15463
15606
|
return colorPerStatus[status];
|
|
15464
15607
|
}, [status, error, errorLevel]);
|
|
15465
15608
|
return /* @__PURE__ */ jsxs91("li", { css: [progressListItemStyles, statusStyles], children: [
|
|
15466
|
-
/* @__PURE__ */
|
|
15609
|
+
/* @__PURE__ */ jsx136(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx136("div", { children: /* @__PURE__ */ jsx136(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
|
|
15467
15610
|
/* @__PURE__ */ jsxs91("div", { children: [
|
|
15468
15611
|
children,
|
|
15469
|
-
/* @__PURE__ */
|
|
15612
|
+
/* @__PURE__ */ jsx136("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
|
|
15470
15613
|
] })
|
|
15471
15614
|
] });
|
|
15472
15615
|
};
|
|
15473
15616
|
|
|
15474
15617
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
15475
|
-
import { css as
|
|
15618
|
+
import { css as css104 } from "@emotion/react";
|
|
15476
15619
|
import { CgCheck as CgCheck5 } from "@react-icons/all-files/cg/CgCheck";
|
|
15477
15620
|
import { useCallback as useCallback12, useEffect as useEffect24, useMemo as useMemo9, useRef as useRef12, useState as useState21 } from "react";
|
|
15478
15621
|
|
|
15479
15622
|
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
15480
|
-
import { css as
|
|
15481
|
-
var segmentedControlRootStyles =
|
|
15623
|
+
import { css as css103 } from "@emotion/react";
|
|
15624
|
+
var segmentedControlRootStyles = css103`
|
|
15482
15625
|
position: relative;
|
|
15483
15626
|
`;
|
|
15484
|
-
var segmentedControlScrollIndicatorsStyles =
|
|
15627
|
+
var segmentedControlScrollIndicatorsStyles = css103`
|
|
15485
15628
|
position: absolute;
|
|
15486
15629
|
inset: 0;
|
|
15487
15630
|
z-index: 1;
|
|
@@ -15509,17 +15652,17 @@ var segmentedControlScrollIndicatorsStyles = css102`
|
|
|
15509
15652
|
background: linear-gradient(to left, var(--background-color) 10%, transparent);
|
|
15510
15653
|
}
|
|
15511
15654
|
`;
|
|
15512
|
-
var segmentedControlScrollIndicatorStartVisibleStyles =
|
|
15655
|
+
var segmentedControlScrollIndicatorStartVisibleStyles = css103`
|
|
15513
15656
|
&::before {
|
|
15514
15657
|
opacity: 1;
|
|
15515
15658
|
}
|
|
15516
15659
|
`;
|
|
15517
|
-
var segmentedControlScrollIndicatorEndVisibleStyles =
|
|
15660
|
+
var segmentedControlScrollIndicatorEndVisibleStyles = css103`
|
|
15518
15661
|
&::after {
|
|
15519
15662
|
opacity: 1;
|
|
15520
15663
|
}
|
|
15521
15664
|
`;
|
|
15522
|
-
var segmentedControlWrapperStyles =
|
|
15665
|
+
var segmentedControlWrapperStyles = css103`
|
|
15523
15666
|
overflow-y: auto;
|
|
15524
15667
|
scroll-behavior: smooth;
|
|
15525
15668
|
scrollbar-width: none;
|
|
@@ -15528,7 +15671,7 @@ var segmentedControlWrapperStyles = css102`
|
|
|
15528
15671
|
height: 0px;
|
|
15529
15672
|
}
|
|
15530
15673
|
`;
|
|
15531
|
-
var segmentedControlStyles =
|
|
15674
|
+
var segmentedControlStyles = css103`
|
|
15532
15675
|
--segmented-control-rounded-value: var(--rounded-base);
|
|
15533
15676
|
--segmented-control-border-width: 1px;
|
|
15534
15677
|
--segmented-control-selected-color: var(--brand-secondary-3);
|
|
@@ -15547,14 +15690,14 @@ var segmentedControlStyles = css102`
|
|
|
15547
15690
|
border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
|
|
15548
15691
|
font-size: var(--fs-xs);
|
|
15549
15692
|
`;
|
|
15550
|
-
var segmentedControlVerticalStyles =
|
|
15693
|
+
var segmentedControlVerticalStyles = css103`
|
|
15551
15694
|
flex-direction: column;
|
|
15552
15695
|
--segmented-control-first-border-radius: var(--segmented-control-rounded-value)
|
|
15553
15696
|
var(--segmented-control-rounded-value) 0 0;
|
|
15554
15697
|
--segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
|
|
15555
15698
|
var(--segmented-control-rounded-value);
|
|
15556
15699
|
`;
|
|
15557
|
-
var segmentedControlItemStyles =
|
|
15700
|
+
var segmentedControlItemStyles = css103`
|
|
15558
15701
|
&:first-of-type label {
|
|
15559
15702
|
border-radius: var(--segmented-control-first-border-radius);
|
|
15560
15703
|
}
|
|
@@ -15562,10 +15705,10 @@ var segmentedControlItemStyles = css102`
|
|
|
15562
15705
|
border-radius: var(--segmented-control-last-border-radius);
|
|
15563
15706
|
}
|
|
15564
15707
|
`;
|
|
15565
|
-
var segmentedControlInputStyles =
|
|
15708
|
+
var segmentedControlInputStyles = css103`
|
|
15566
15709
|
${accessibleHidden}
|
|
15567
15710
|
`;
|
|
15568
|
-
var segmentedControlLabelStyles = (checked, disabled2) =>
|
|
15711
|
+
var segmentedControlLabelStyles = (checked, disabled2) => css103`
|
|
15569
15712
|
position: relative;
|
|
15570
15713
|
display: flex;
|
|
15571
15714
|
align-items: center;
|
|
@@ -15629,25 +15772,25 @@ var segmentedControlLabelStyles = (checked, disabled2) => css102`
|
|
|
15629
15772
|
`}
|
|
15630
15773
|
}
|
|
15631
15774
|
`;
|
|
15632
|
-
var segmentedControlLabelIconOnlyStyles =
|
|
15775
|
+
var segmentedControlLabelIconOnlyStyles = css103`
|
|
15633
15776
|
padding-inline: 0.5em;
|
|
15634
15777
|
`;
|
|
15635
|
-
var segmentedControlLabelCheckStyles =
|
|
15778
|
+
var segmentedControlLabelCheckStyles = css103`
|
|
15636
15779
|
opacity: 0.5;
|
|
15637
15780
|
`;
|
|
15638
|
-
var segmentedControlLabelContentStyles =
|
|
15781
|
+
var segmentedControlLabelContentStyles = css103`
|
|
15639
15782
|
display: flex;
|
|
15640
15783
|
align-items: center;
|
|
15641
15784
|
justify-content: center;
|
|
15642
15785
|
gap: var(--spacing-sm);
|
|
15643
15786
|
height: 100%;
|
|
15644
15787
|
`;
|
|
15645
|
-
var segmentedControlLabelTextStyles =
|
|
15788
|
+
var segmentedControlLabelTextStyles = css103`
|
|
15646
15789
|
white-space: nowrap;
|
|
15647
15790
|
`;
|
|
15648
15791
|
|
|
15649
15792
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
15650
|
-
import { jsx as
|
|
15793
|
+
import { jsx as jsx137, jsxs as jsxs92 } from "@emotion/react/jsx-runtime";
|
|
15651
15794
|
var SegmentedControl = ({
|
|
15652
15795
|
name,
|
|
15653
15796
|
options,
|
|
@@ -15675,10 +15818,10 @@ var SegmentedControl = ({
|
|
|
15675
15818
|
);
|
|
15676
15819
|
const sizeStyles = useMemo9(() => {
|
|
15677
15820
|
const map = {
|
|
15678
|
-
sm:
|
|
15679
|
-
md:
|
|
15680
|
-
lg:
|
|
15681
|
-
xl:
|
|
15821
|
+
sm: css104({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
|
|
15822
|
+
md: css104({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
|
|
15823
|
+
lg: css104({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
|
|
15824
|
+
xl: css104({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
|
|
15682
15825
|
};
|
|
15683
15826
|
return map[size];
|
|
15684
15827
|
}, [size]);
|
|
@@ -15707,7 +15850,7 @@ var SegmentedControl = ({
|
|
|
15707
15850
|
};
|
|
15708
15851
|
}, []);
|
|
15709
15852
|
return /* @__PURE__ */ jsxs92("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
|
|
15710
|
-
/* @__PURE__ */
|
|
15853
|
+
/* @__PURE__ */ jsx137("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ jsx137(
|
|
15711
15854
|
"div",
|
|
15712
15855
|
{
|
|
15713
15856
|
css: [
|
|
@@ -15724,7 +15867,7 @@ var SegmentedControl = ({
|
|
|
15724
15867
|
const text = option.label ? option.label : option.icon ? null : String(option.value);
|
|
15725
15868
|
const isDisabled = disabled2 || option.disabled;
|
|
15726
15869
|
const isChecked = option.value === value;
|
|
15727
|
-
return /* @__PURE__ */
|
|
15870
|
+
return /* @__PURE__ */ jsx137(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx137(
|
|
15728
15871
|
"div",
|
|
15729
15872
|
{
|
|
15730
15873
|
css: segmentedControlItemStyles,
|
|
@@ -15738,7 +15881,7 @@ var SegmentedControl = ({
|
|
|
15738
15881
|
isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
|
|
15739
15882
|
],
|
|
15740
15883
|
children: [
|
|
15741
|
-
/* @__PURE__ */
|
|
15884
|
+
/* @__PURE__ */ jsx137(
|
|
15742
15885
|
"input",
|
|
15743
15886
|
{
|
|
15744
15887
|
css: segmentedControlInputStyles,
|
|
@@ -15750,10 +15893,10 @@ var SegmentedControl = ({
|
|
|
15750
15893
|
disabled: isDisabled
|
|
15751
15894
|
}
|
|
15752
15895
|
),
|
|
15753
|
-
option.value !== value || noCheckmark ? null : /* @__PURE__ */
|
|
15896
|
+
option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx137(CgCheck5, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
|
|
15754
15897
|
/* @__PURE__ */ jsxs92("span", { css: segmentedControlLabelContentStyles, children: [
|
|
15755
|
-
!option.icon ? null : /* @__PURE__ */
|
|
15756
|
-
!text || hideOptionText ? null : /* @__PURE__ */
|
|
15898
|
+
!option.icon ? null : /* @__PURE__ */ jsx137(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
|
|
15899
|
+
!text || hideOptionText ? null : /* @__PURE__ */ jsx137("span", { css: segmentedControlLabelTextStyles, children: text })
|
|
15757
15900
|
] })
|
|
15758
15901
|
]
|
|
15759
15902
|
}
|
|
@@ -15763,7 +15906,7 @@ var SegmentedControl = ({
|
|
|
15763
15906
|
})
|
|
15764
15907
|
}
|
|
15765
15908
|
) }),
|
|
15766
|
-
/* @__PURE__ */
|
|
15909
|
+
/* @__PURE__ */ jsx137(
|
|
15767
15910
|
"div",
|
|
15768
15911
|
{
|
|
15769
15912
|
css: [
|
|
@@ -15777,18 +15920,18 @@ var SegmentedControl = ({
|
|
|
15777
15920
|
};
|
|
15778
15921
|
|
|
15779
15922
|
// src/components/Skeleton/Skeleton.styles.ts
|
|
15780
|
-
import { css as
|
|
15923
|
+
import { css as css105, keyframes as keyframes5 } from "@emotion/react";
|
|
15781
15924
|
var lightFadingOut = keyframes5`
|
|
15782
15925
|
from { opacity: 0.1; }
|
|
15783
15926
|
to { opacity: 0.025; }
|
|
15784
15927
|
`;
|
|
15785
|
-
var skeletonStyles =
|
|
15928
|
+
var skeletonStyles = css105`
|
|
15786
15929
|
animation: ${lightFadingOut} 1s ease-out infinite alternate;
|
|
15787
15930
|
background-color: var(--gray-900);
|
|
15788
15931
|
`;
|
|
15789
15932
|
|
|
15790
15933
|
// src/components/Skeleton/Skeleton.tsx
|
|
15791
|
-
import { jsx as
|
|
15934
|
+
import { jsx as jsx138 } from "@emotion/react/jsx-runtime";
|
|
15792
15935
|
var Skeleton = ({
|
|
15793
15936
|
width = "100%",
|
|
15794
15937
|
height = "1.25rem",
|
|
@@ -15796,7 +15939,7 @@ var Skeleton = ({
|
|
|
15796
15939
|
circle = false,
|
|
15797
15940
|
children,
|
|
15798
15941
|
...otherProps
|
|
15799
|
-
}) => /* @__PURE__ */
|
|
15942
|
+
}) => /* @__PURE__ */ jsx138(
|
|
15800
15943
|
"div",
|
|
15801
15944
|
{
|
|
15802
15945
|
css: [
|
|
@@ -15819,8 +15962,8 @@ var Skeleton = ({
|
|
|
15819
15962
|
import { useEffect as useEffect25, useRef as useRef13 } from "react";
|
|
15820
15963
|
|
|
15821
15964
|
// src/components/Spinner/Spinner.styles.ts
|
|
15822
|
-
import { css as
|
|
15823
|
-
var SpinnerStyles =
|
|
15965
|
+
import { css as css106 } from "@emotion/react";
|
|
15966
|
+
var SpinnerStyles = css106`
|
|
15824
15967
|
--color: #00b4ff;
|
|
15825
15968
|
--speed: 5s;
|
|
15826
15969
|
--red: rgb(218, 63, 50);
|
|
@@ -16250,7 +16393,7 @@ var SpinnerStyles = css105`
|
|
|
16250
16393
|
`;
|
|
16251
16394
|
|
|
16252
16395
|
// src/components/Spinner/Spinner.tsx
|
|
16253
|
-
import { jsx as
|
|
16396
|
+
import { jsx as jsx139, jsxs as jsxs93 } from "@emotion/react/jsx-runtime";
|
|
16254
16397
|
var Spinner = ({
|
|
16255
16398
|
width,
|
|
16256
16399
|
label,
|
|
@@ -16273,51 +16416,51 @@ var Spinner = ({
|
|
|
16273
16416
|
css: SpinnerStyles,
|
|
16274
16417
|
className: `container${isPaused ? " paused" : ""}`,
|
|
16275
16418
|
children: [
|
|
16276
|
-
/* @__PURE__ */
|
|
16277
|
-
/* @__PURE__ */
|
|
16278
|
-
/* @__PURE__ */
|
|
16279
|
-
/* @__PURE__ */
|
|
16280
|
-
/* @__PURE__ */
|
|
16419
|
+
/* @__PURE__ */ jsx139("div", { className: "pyramid-container", children: /* @__PURE__ */ jsxs93("div", { className: "pyramid top", children: [
|
|
16420
|
+
/* @__PURE__ */ jsx139("div", { className: "side one" }),
|
|
16421
|
+
/* @__PURE__ */ jsx139("div", { className: "side two" }),
|
|
16422
|
+
/* @__PURE__ */ jsx139("div", { className: "side three" }),
|
|
16423
|
+
/* @__PURE__ */ jsx139("div", { className: "side four" }),
|
|
16281
16424
|
/* @__PURE__ */ jsxs93("div", { className: "bottom-pyramid", children: [
|
|
16282
|
-
/* @__PURE__ */
|
|
16283
|
-
/* @__PURE__ */
|
|
16284
|
-
/* @__PURE__ */
|
|
16285
|
-
/* @__PURE__ */
|
|
16425
|
+
/* @__PURE__ */ jsx139("div", { className: "side five" }),
|
|
16426
|
+
/* @__PURE__ */ jsx139("div", { className: "side six" }),
|
|
16427
|
+
/* @__PURE__ */ jsx139("div", { className: "side seven" }),
|
|
16428
|
+
/* @__PURE__ */ jsx139("div", { className: "side eight" })
|
|
16286
16429
|
] })
|
|
16287
16430
|
] }) }),
|
|
16288
|
-
/* @__PURE__ */
|
|
16431
|
+
/* @__PURE__ */ jsx139("div", { className: "turning-circle" }),
|
|
16289
16432
|
/* @__PURE__ */ jsxs93("div", { className: "pulsating-star delay-top-right", children: [
|
|
16290
|
-
/* @__PURE__ */
|
|
16291
|
-
/* @__PURE__ */
|
|
16292
|
-
/* @__PURE__ */
|
|
16293
|
-
/* @__PURE__ */
|
|
16294
|
-
/* @__PURE__ */
|
|
16433
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-center" }),
|
|
16434
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-top" }),
|
|
16435
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-bottom" }),
|
|
16436
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-left" }),
|
|
16437
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-right" })
|
|
16295
16438
|
] }),
|
|
16296
16439
|
/* @__PURE__ */ jsxs93("div", { className: "pulsating-star delay-top-left-2", children: [
|
|
16297
|
-
/* @__PURE__ */
|
|
16298
|
-
/* @__PURE__ */
|
|
16299
|
-
/* @__PURE__ */
|
|
16300
|
-
/* @__PURE__ */
|
|
16301
|
-
/* @__PURE__ */
|
|
16440
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-center" }),
|
|
16441
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-top" }),
|
|
16442
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-bottom" }),
|
|
16443
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-left" }),
|
|
16444
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-right" })
|
|
16302
16445
|
] }),
|
|
16303
16446
|
/* @__PURE__ */ jsxs93("div", { className: "pulsating-star delay-top-left", children: [
|
|
16304
|
-
/* @__PURE__ */
|
|
16305
|
-
/* @__PURE__ */
|
|
16306
|
-
/* @__PURE__ */
|
|
16307
|
-
/* @__PURE__ */
|
|
16447
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-top" }),
|
|
16448
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-bottom" }),
|
|
16449
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-left" }),
|
|
16450
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-right" })
|
|
16308
16451
|
] }),
|
|
16309
16452
|
/* @__PURE__ */ jsxs93("div", { className: "pulsating-star delay-bottom-right", children: [
|
|
16310
|
-
/* @__PURE__ */
|
|
16311
|
-
/* @__PURE__ */
|
|
16312
|
-
/* @__PURE__ */
|
|
16313
|
-
/* @__PURE__ */
|
|
16453
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-top" }),
|
|
16454
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-bottom" }),
|
|
16455
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-left" }),
|
|
16456
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-right" })
|
|
16314
16457
|
] }),
|
|
16315
16458
|
/* @__PURE__ */ jsxs93("div", { className: "pulsating-star delay-bottom-left", children: [
|
|
16316
|
-
/* @__PURE__ */
|
|
16317
|
-
/* @__PURE__ */
|
|
16318
|
-
/* @__PURE__ */
|
|
16319
|
-
/* @__PURE__ */
|
|
16320
|
-
/* @__PURE__ */
|
|
16459
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-center" }),
|
|
16460
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-top" }),
|
|
16461
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-bottom" }),
|
|
16462
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-left" }),
|
|
16463
|
+
/* @__PURE__ */ jsx139("div", { className: "star-inner star-right" })
|
|
16321
16464
|
] })
|
|
16322
16465
|
]
|
|
16323
16466
|
}
|
|
@@ -16328,8 +16471,8 @@ var Spinner = ({
|
|
|
16328
16471
|
import { forwardRef as forwardRef29, useMemo as useMemo10 } from "react";
|
|
16329
16472
|
|
|
16330
16473
|
// src/components/Switch/Switch.styles.ts
|
|
16331
|
-
import { css as
|
|
16332
|
-
var SwitchInputContainer =
|
|
16474
|
+
import { css as css107 } from "@emotion/react";
|
|
16475
|
+
var SwitchInputContainer = css107`
|
|
16333
16476
|
cursor: pointer;
|
|
16334
16477
|
display: inline-flex;
|
|
16335
16478
|
position: relative;
|
|
@@ -16339,7 +16482,7 @@ var SwitchInputContainer = css106`
|
|
|
16339
16482
|
user-select: none;
|
|
16340
16483
|
z-index: 0;
|
|
16341
16484
|
`;
|
|
16342
|
-
var SwitchInput = (size) =>
|
|
16485
|
+
var SwitchInput = (size) => css107`
|
|
16343
16486
|
appearance: none;
|
|
16344
16487
|
border-radius: var(--rounded-full);
|
|
16345
16488
|
background-color: var(--white);
|
|
@@ -16378,18 +16521,18 @@ var SwitchInput = (size) => css106`
|
|
|
16378
16521
|
cursor: not-allowed;
|
|
16379
16522
|
}
|
|
16380
16523
|
`;
|
|
16381
|
-
var SwitchInputCheckedDirectionLeft =
|
|
16524
|
+
var SwitchInputCheckedDirectionLeft = css107`
|
|
16382
16525
|
&:checked {
|
|
16383
16526
|
transform: translateX(var(--spacing-base));
|
|
16384
16527
|
}
|
|
16385
16528
|
`;
|
|
16386
|
-
var SwitchInputCheckedDirectionRight =
|
|
16529
|
+
var SwitchInputCheckedDirectionRight = css107`
|
|
16387
16530
|
transform: translateX(-var(--spacing-base));
|
|
16388
16531
|
&:checked {
|
|
16389
16532
|
transform: translateX(0);
|
|
16390
16533
|
}
|
|
16391
16534
|
`;
|
|
16392
|
-
var SwitchInputDisabled =
|
|
16535
|
+
var SwitchInputDisabled = css107`
|
|
16393
16536
|
opacity: var(--opacity-50);
|
|
16394
16537
|
cursor: not-allowed;
|
|
16395
16538
|
|
|
@@ -16397,19 +16540,19 @@ var SwitchInputDisabled = css106`
|
|
|
16397
16540
|
cursor: not-allowed;
|
|
16398
16541
|
}
|
|
16399
16542
|
`;
|
|
16400
|
-
var SwitchInputLabelAlignmentLeft = (size) =>
|
|
16543
|
+
var SwitchInputLabelAlignmentLeft = (size) => css107`
|
|
16401
16544
|
padding-inline-start: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
16402
16545
|
&:before {
|
|
16403
16546
|
left: 0;
|
|
16404
16547
|
}
|
|
16405
16548
|
`;
|
|
16406
|
-
var SwitchInputLabelAlignmentRight = (size) =>
|
|
16549
|
+
var SwitchInputLabelAlignmentRight = (size) => css107`
|
|
16407
16550
|
padding-inline-end: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
16408
16551
|
&:before {
|
|
16409
16552
|
right: 0;
|
|
16410
16553
|
}
|
|
16411
16554
|
`;
|
|
16412
|
-
var SwitchInputLabel = (size) =>
|
|
16555
|
+
var SwitchInputLabel = (size) => css107`
|
|
16413
16556
|
align-items: center;
|
|
16414
16557
|
color: var(--typography-base);
|
|
16415
16558
|
display: inline-flex;
|
|
@@ -16429,25 +16572,25 @@ var SwitchInputLabel = (size) => css106`
|
|
|
16429
16572
|
top: 0;
|
|
16430
16573
|
}
|
|
16431
16574
|
`;
|
|
16432
|
-
var SwitchTextAlignmentLeft = (size) =>
|
|
16575
|
+
var SwitchTextAlignmentLeft = (size) => css107`
|
|
16433
16576
|
padding-inline-start: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
16434
16577
|
`;
|
|
16435
|
-
var SwitchTextAlignmentRight = (size) =>
|
|
16578
|
+
var SwitchTextAlignmentRight = (size) => css107`
|
|
16436
16579
|
padding-inline-end: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
16437
16580
|
`;
|
|
16438
|
-
var SwitchText =
|
|
16581
|
+
var SwitchText = css107`
|
|
16439
16582
|
color: var(--gray-500);
|
|
16440
16583
|
font-size: var(--fs-sm);
|
|
16441
16584
|
`;
|
|
16442
|
-
var SwitchInputContainerAlignmentLeft =
|
|
16585
|
+
var SwitchInputContainerAlignmentLeft = css107`
|
|
16443
16586
|
flex-direction: row;
|
|
16444
16587
|
`;
|
|
16445
|
-
var SwitchInputContainerAlignmentRight =
|
|
16588
|
+
var SwitchInputContainerAlignmentRight = css107`
|
|
16446
16589
|
flex-direction: row-reverse;
|
|
16447
16590
|
`;
|
|
16448
16591
|
|
|
16449
16592
|
// src/components/Switch/Switch.tsx
|
|
16450
|
-
import { Fragment as Fragment19, jsx as
|
|
16593
|
+
import { Fragment as Fragment19, jsx as jsx140, jsxs as jsxs94 } from "@emotion/react/jsx-runtime";
|
|
16451
16594
|
var Switch = forwardRef29(
|
|
16452
16595
|
({
|
|
16453
16596
|
label,
|
|
@@ -16487,7 +16630,7 @@ var Switch = forwardRef29(
|
|
|
16487
16630
|
inputProps.disabled ? SwitchInputDisabled : void 0
|
|
16488
16631
|
],
|
|
16489
16632
|
children: [
|
|
16490
|
-
/* @__PURE__ */
|
|
16633
|
+
/* @__PURE__ */ jsx140(
|
|
16491
16634
|
"input",
|
|
16492
16635
|
{
|
|
16493
16636
|
type: "checkbox",
|
|
@@ -16496,11 +16639,11 @@ var Switch = forwardRef29(
|
|
|
16496
16639
|
ref
|
|
16497
16640
|
}
|
|
16498
16641
|
),
|
|
16499
|
-
/* @__PURE__ */
|
|
16642
|
+
/* @__PURE__ */ jsx140("span", { css: [SwitchInputLabel(switchSize), SwitchInputLabelAlignment], children: label })
|
|
16500
16643
|
]
|
|
16501
16644
|
}
|
|
16502
16645
|
),
|
|
16503
|
-
additionalText ? /* @__PURE__ */
|
|
16646
|
+
additionalText ? /* @__PURE__ */ jsx140(
|
|
16504
16647
|
"p",
|
|
16505
16648
|
{
|
|
16506
16649
|
css: [
|
|
@@ -16516,8 +16659,8 @@ var Switch = forwardRef29(
|
|
|
16516
16659
|
);
|
|
16517
16660
|
|
|
16518
16661
|
// src/components/Table/Table.styles.ts
|
|
16519
|
-
import { css as
|
|
16520
|
-
var table = ({ cellPadding = "var(--spacing-sm)" }) =>
|
|
16662
|
+
import { css as css108 } from "@emotion/react";
|
|
16663
|
+
var table = ({ cellPadding = "var(--spacing-sm)" }) => css108`
|
|
16521
16664
|
border-bottom: 1px solid var(--gray-400);
|
|
16522
16665
|
border-collapse: collapse;
|
|
16523
16666
|
min-width: 100%;
|
|
@@ -16537,21 +16680,21 @@ var table = ({ cellPadding = "var(--spacing-sm)" }) => css107`
|
|
|
16537
16680
|
background-color: var(--gray-50);
|
|
16538
16681
|
}
|
|
16539
16682
|
`;
|
|
16540
|
-
var tableHead =
|
|
16683
|
+
var tableHead = css108`
|
|
16541
16684
|
color: var(--typography-base);
|
|
16542
16685
|
text-align: left;
|
|
16543
16686
|
`;
|
|
16544
|
-
var tableRow =
|
|
16687
|
+
var tableRow = css108`
|
|
16545
16688
|
border-bottom: 1px solid var(--gray-200);
|
|
16546
16689
|
font-size: var(--fs-sm);
|
|
16547
16690
|
`;
|
|
16548
|
-
var tableCellHead =
|
|
16691
|
+
var tableCellHead = css108`
|
|
16549
16692
|
font-size: var(--fs-sm);
|
|
16550
16693
|
font-weight: var(--fw-regular);
|
|
16551
16694
|
line-height: 1.2;
|
|
16552
16695
|
}
|
|
16553
16696
|
`;
|
|
16554
|
-
var responsiveTableContainer =
|
|
16697
|
+
var responsiveTableContainer = css108`
|
|
16555
16698
|
max-width: calc(100vw - var(--spacing-md) * 2);
|
|
16556
16699
|
overflow-x: auto;
|
|
16557
16700
|
${scrollbarStyles}
|
|
@@ -16570,47 +16713,47 @@ var responsiveTableContainer = css107`
|
|
|
16570
16713
|
`;
|
|
16571
16714
|
|
|
16572
16715
|
// src/components/Table/ResponsiveTableContainer.tsx
|
|
16573
|
-
import { jsx as
|
|
16716
|
+
import { jsx as jsx141 } from "@emotion/react/jsx-runtime";
|
|
16574
16717
|
var ResponsiveTableContainer = ({ children }) => {
|
|
16575
|
-
return /* @__PURE__ */
|
|
16718
|
+
return /* @__PURE__ */ jsx141("div", { css: responsiveTableContainer, children });
|
|
16576
16719
|
};
|
|
16577
16720
|
|
|
16578
16721
|
// src/components/Table/Table.tsx
|
|
16579
|
-
import * as
|
|
16580
|
-
import { jsx as
|
|
16581
|
-
var Table =
|
|
16722
|
+
import * as React22 from "react";
|
|
16723
|
+
import { jsx as jsx142 } from "@emotion/react/jsx-runtime";
|
|
16724
|
+
var Table = React22.forwardRef(
|
|
16582
16725
|
({ children, cellPadding, ...otherProps }, ref) => {
|
|
16583
|
-
return /* @__PURE__ */
|
|
16726
|
+
return /* @__PURE__ */ jsx142("table", { ref, css: table({ cellPadding }), ...otherProps, children });
|
|
16584
16727
|
}
|
|
16585
16728
|
);
|
|
16586
|
-
var TableHead =
|
|
16729
|
+
var TableHead = React22.forwardRef(
|
|
16587
16730
|
({ children, ...otherProps }, ref) => {
|
|
16588
|
-
return /* @__PURE__ */
|
|
16731
|
+
return /* @__PURE__ */ jsx142("thead", { ref, css: tableHead, ...otherProps, children });
|
|
16589
16732
|
}
|
|
16590
16733
|
);
|
|
16591
|
-
var TableBody =
|
|
16734
|
+
var TableBody = React22.forwardRef(
|
|
16592
16735
|
({ children, ...otherProps }, ref) => {
|
|
16593
|
-
return /* @__PURE__ */
|
|
16736
|
+
return /* @__PURE__ */ jsx142("tbody", { ref, ...otherProps, children });
|
|
16594
16737
|
}
|
|
16595
16738
|
);
|
|
16596
|
-
var TableFoot =
|
|
16739
|
+
var TableFoot = React22.forwardRef(
|
|
16597
16740
|
({ children, ...otherProps }, ref) => {
|
|
16598
|
-
return /* @__PURE__ */
|
|
16741
|
+
return /* @__PURE__ */ jsx142("tfoot", { ref, ...otherProps, children });
|
|
16599
16742
|
}
|
|
16600
16743
|
);
|
|
16601
|
-
var TableRow =
|
|
16744
|
+
var TableRow = React22.forwardRef(
|
|
16602
16745
|
({ children, ...otherProps }, ref) => {
|
|
16603
|
-
return /* @__PURE__ */
|
|
16746
|
+
return /* @__PURE__ */ jsx142("tr", { ref, css: tableRow, ...otherProps, children });
|
|
16604
16747
|
}
|
|
16605
16748
|
);
|
|
16606
|
-
var TableCellHead =
|
|
16749
|
+
var TableCellHead = React22.forwardRef(
|
|
16607
16750
|
({ children, ...otherProps }, ref) => {
|
|
16608
|
-
return /* @__PURE__ */
|
|
16751
|
+
return /* @__PURE__ */ jsx142("th", { ref, css: tableCellHead, ...otherProps, children });
|
|
16609
16752
|
}
|
|
16610
16753
|
);
|
|
16611
|
-
var TableCellData =
|
|
16754
|
+
var TableCellData = React22.forwardRef(
|
|
16612
16755
|
({ children, ...otherProps }, ref) => {
|
|
16613
|
-
return /* @__PURE__ */
|
|
16756
|
+
return /* @__PURE__ */ jsx142("td", { ref, ...otherProps, children });
|
|
16614
16757
|
}
|
|
16615
16758
|
);
|
|
16616
16759
|
|
|
@@ -16625,8 +16768,8 @@ import {
|
|
|
16625
16768
|
import { useCallback as useCallback13, useMemo as useMemo11 } from "react";
|
|
16626
16769
|
|
|
16627
16770
|
// src/components/Tabs/Tabs.styles.ts
|
|
16628
|
-
import { css as
|
|
16629
|
-
var tabButtonStyles =
|
|
16771
|
+
import { css as css109 } from "@emotion/react";
|
|
16772
|
+
var tabButtonStyles = css109`
|
|
16630
16773
|
align-items: center;
|
|
16631
16774
|
border: 0;
|
|
16632
16775
|
height: 2.5rem;
|
|
@@ -16643,14 +16786,14 @@ var tabButtonStyles = css108`
|
|
|
16643
16786
|
box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
|
|
16644
16787
|
}
|
|
16645
16788
|
`;
|
|
16646
|
-
var tabButtonGroupStyles =
|
|
16789
|
+
var tabButtonGroupStyles = css109`
|
|
16647
16790
|
display: flex;
|
|
16648
16791
|
gap: var(--spacing-base);
|
|
16649
16792
|
border-bottom: 1px solid var(--gray-300);
|
|
16650
16793
|
`;
|
|
16651
16794
|
|
|
16652
16795
|
// src/components/Tabs/Tabs.tsx
|
|
16653
|
-
import { jsx as
|
|
16796
|
+
import { jsx as jsx143 } from "@emotion/react/jsx-runtime";
|
|
16654
16797
|
var useCurrentTab = () => {
|
|
16655
16798
|
const context = useAriakitTabStore();
|
|
16656
16799
|
if (!context) {
|
|
@@ -16681,28 +16824,28 @@ var Tabs = ({
|
|
|
16681
16824
|
},
|
|
16682
16825
|
[onSelectedIdChange, useHashForState]
|
|
16683
16826
|
);
|
|
16684
|
-
return /* @__PURE__ */
|
|
16827
|
+
return /* @__PURE__ */ jsx143(AriakitTabProvider, { selectedId: selected, selectOnMove: !manual, setSelectedId: onTabSelect, ...props, children });
|
|
16685
16828
|
};
|
|
16686
16829
|
var TabButtonGroup = ({ children, ...props }) => {
|
|
16687
|
-
return /* @__PURE__ */
|
|
16830
|
+
return /* @__PURE__ */ jsx143(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
|
|
16688
16831
|
};
|
|
16689
16832
|
var TabButton = ({
|
|
16690
16833
|
children,
|
|
16691
16834
|
id,
|
|
16692
16835
|
...props
|
|
16693
16836
|
}) => {
|
|
16694
|
-
return /* @__PURE__ */
|
|
16837
|
+
return /* @__PURE__ */ jsx143(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
|
|
16695
16838
|
};
|
|
16696
16839
|
var TabContent = ({
|
|
16697
16840
|
children,
|
|
16698
16841
|
...props
|
|
16699
16842
|
}) => {
|
|
16700
|
-
return /* @__PURE__ */
|
|
16843
|
+
return /* @__PURE__ */ jsx143(AriakitTabPanel, { ...props, children });
|
|
16701
16844
|
};
|
|
16702
16845
|
|
|
16703
16846
|
// src/components/Validation/StatusBullet.styles.ts
|
|
16704
|
-
import { css as
|
|
16705
|
-
var StatusBulletContainer =
|
|
16847
|
+
import { css as css110 } from "@emotion/react";
|
|
16848
|
+
var StatusBulletContainer = css110`
|
|
16706
16849
|
align-items: center;
|
|
16707
16850
|
align-self: center;
|
|
16708
16851
|
color: var(--gray-500);
|
|
@@ -16718,33 +16861,33 @@ var StatusBulletContainer = css109`
|
|
|
16718
16861
|
display: block;
|
|
16719
16862
|
}
|
|
16720
16863
|
`;
|
|
16721
|
-
var StatusBulletBase =
|
|
16864
|
+
var StatusBulletBase = css110`
|
|
16722
16865
|
font-size: var(--fs-sm);
|
|
16723
16866
|
&:before {
|
|
16724
16867
|
width: var(--fs-xs);
|
|
16725
16868
|
height: var(--fs-xs);
|
|
16726
16869
|
}
|
|
16727
16870
|
`;
|
|
16728
|
-
var StatusBulletSmall =
|
|
16871
|
+
var StatusBulletSmall = css110`
|
|
16729
16872
|
font-size: var(--fs-xs);
|
|
16730
16873
|
&:before {
|
|
16731
16874
|
width: var(--fs-xxs);
|
|
16732
16875
|
height: var(--fs-xxs);
|
|
16733
16876
|
}
|
|
16734
16877
|
`;
|
|
16735
|
-
var StatusDraft =
|
|
16878
|
+
var StatusDraft = css110`
|
|
16736
16879
|
&:before {
|
|
16737
16880
|
background: var(--white);
|
|
16738
16881
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
16739
16882
|
}
|
|
16740
16883
|
`;
|
|
16741
|
-
var StatusModified =
|
|
16884
|
+
var StatusModified = css110`
|
|
16742
16885
|
&:before {
|
|
16743
16886
|
background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
|
|
16744
16887
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
16745
16888
|
}
|
|
16746
16889
|
`;
|
|
16747
|
-
var StatusError =
|
|
16890
|
+
var StatusError = css110`
|
|
16748
16891
|
color: var(--error);
|
|
16749
16892
|
&:before {
|
|
16750
16893
|
/* TODO: replace this with an svg icon */
|
|
@@ -16757,29 +16900,44 @@ var StatusError = css109`
|
|
|
16757
16900
|
);
|
|
16758
16901
|
}
|
|
16759
16902
|
`;
|
|
16760
|
-
var StatusPublished =
|
|
16903
|
+
var StatusPublished = css110`
|
|
16761
16904
|
&:before {
|
|
16762
16905
|
background: var(--accent-dark);
|
|
16763
16906
|
}
|
|
16764
16907
|
`;
|
|
16765
|
-
var StatusOrphan =
|
|
16908
|
+
var StatusOrphan = css110`
|
|
16766
16909
|
&:before {
|
|
16767
16910
|
background: var(--brand-secondary-5);
|
|
16768
16911
|
}
|
|
16769
16912
|
`;
|
|
16770
|
-
var StatusUnknown =
|
|
16913
|
+
var StatusUnknown = css110`
|
|
16771
16914
|
&:before {
|
|
16772
16915
|
background: var(--gray-800);
|
|
16773
16916
|
}
|
|
16774
16917
|
`;
|
|
16775
|
-
var StatusDeleted =
|
|
16918
|
+
var StatusDeleted = css110`
|
|
16776
16919
|
&:before {
|
|
16777
16920
|
background: var(--error);
|
|
16778
16921
|
}
|
|
16779
16922
|
`;
|
|
16780
16923
|
|
|
16781
16924
|
// src/components/Validation/StatusBullet.tsx
|
|
16782
|
-
import { jsx as
|
|
16925
|
+
import { jsx as jsx144 } from "@emotion/react/jsx-runtime";
|
|
16926
|
+
var currentStateStyles = {
|
|
16927
|
+
Error: StatusError,
|
|
16928
|
+
Modified: StatusModified,
|
|
16929
|
+
Unsaved: StatusDraft,
|
|
16930
|
+
Orphan: StatusOrphan,
|
|
16931
|
+
Published: StatusPublished,
|
|
16932
|
+
Draft: StatusDraft,
|
|
16933
|
+
Previous: StatusDraft,
|
|
16934
|
+
Unknown: StatusUnknown,
|
|
16935
|
+
Deleted: StatusDeleted
|
|
16936
|
+
};
|
|
16937
|
+
var statusSize = {
|
|
16938
|
+
sm: StatusBulletSmall,
|
|
16939
|
+
base: StatusBulletBase
|
|
16940
|
+
};
|
|
16783
16941
|
var StatusBullet = ({
|
|
16784
16942
|
status,
|
|
16785
16943
|
hideText = false,
|
|
@@ -16788,31 +16946,19 @@ var StatusBullet = ({
|
|
|
16788
16946
|
compact = false,
|
|
16789
16947
|
...props
|
|
16790
16948
|
}) => {
|
|
16791
|
-
const
|
|
16792
|
-
Error: StatusError,
|
|
16793
|
-
Modified: StatusModified,
|
|
16794
|
-
Unsaved: StatusDraft,
|
|
16795
|
-
Orphan: StatusOrphan,
|
|
16796
|
-
Published: StatusPublished,
|
|
16797
|
-
Draft: StatusDraft,
|
|
16798
|
-
Previous: StatusDraft,
|
|
16799
|
-
Unknown: StatusUnknown,
|
|
16800
|
-
Deleted: StatusDeleted
|
|
16801
|
-
};
|
|
16802
|
-
const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
|
|
16803
|
-
const StatusComponent = () => /* @__PURE__ */ jsx143(
|
|
16949
|
+
const StatusComponent = () => /* @__PURE__ */ jsx144(
|
|
16804
16950
|
"span",
|
|
16805
16951
|
{
|
|
16806
16952
|
role: "status",
|
|
16807
|
-
css: [StatusBulletContainer, currentStateStyles[status], statusSize],
|
|
16953
|
+
css: [StatusBulletContainer, currentStateStyles[status], statusSize[size]],
|
|
16808
16954
|
...props,
|
|
16809
16955
|
children: hideText ? null : message ? message : status
|
|
16810
16956
|
}
|
|
16811
16957
|
);
|
|
16812
16958
|
if (compact) {
|
|
16813
|
-
return /* @__PURE__ */
|
|
16959
|
+
return /* @__PURE__ */ jsx144(StatusComponent, {});
|
|
16814
16960
|
}
|
|
16815
|
-
return /* @__PURE__ */
|
|
16961
|
+
return /* @__PURE__ */ jsx144(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ jsx144("div", { children: /* @__PURE__ */ jsx144(StatusComponent, {}) }) });
|
|
16816
16962
|
};
|
|
16817
16963
|
export {
|
|
16818
16964
|
AddButton,
|
|
@@ -16921,6 +17067,7 @@ export {
|
|
|
16921
17067
|
PageHeaderSection,
|
|
16922
17068
|
Pagination,
|
|
16923
17069
|
Paragraph,
|
|
17070
|
+
ParameterActionButton,
|
|
16924
17071
|
ParameterDrawerHeader,
|
|
16925
17072
|
ParameterGroup,
|
|
16926
17073
|
ParameterImage,
|
|
@@ -16992,6 +17139,7 @@ export {
|
|
|
16992
17139
|
VerticalRhythm,
|
|
16993
17140
|
WarningMessage,
|
|
16994
17141
|
accessibleHidden,
|
|
17142
|
+
actionBarVisibilityStyles,
|
|
16995
17143
|
addPathSegmentToPathname,
|
|
16996
17144
|
borderTopIcon,
|
|
16997
17145
|
breakpoints,
|