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