@uniformdev/design-system 20.60.0 → 20.60.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +615 -554
- package/dist/index.d.mts +266 -50
- package/dist/index.d.ts +266 -50
- package/dist/index.js +766 -700
- package/package.json +5 -6
package/dist/index.js
CHANGED
|
@@ -1467,6 +1467,7 @@ __export(src_exports, {
|
|
|
1467
1467
|
ObjectListItemContainer: () => ObjectListItemContainer2,
|
|
1468
1468
|
ObjectListItemCover: () => ObjectListItemCover2,
|
|
1469
1469
|
ObjectListItemHeading: () => ObjectListItemHeading2,
|
|
1470
|
+
ObjectListSubText: () => ObjectListSubText2,
|
|
1470
1471
|
PageHeaderSection: () => PageHeaderSection,
|
|
1471
1472
|
Pagination: () => Pagination,
|
|
1472
1473
|
Paragraph: () => Paragraph,
|
|
@@ -6085,7 +6086,7 @@ var LoadingOverlay = ({
|
|
|
6085
6086
|
var LoadingAnimation = ({
|
|
6086
6087
|
label: label2,
|
|
6087
6088
|
width,
|
|
6088
|
-
css:
|
|
6089
|
+
css: css120,
|
|
6089
6090
|
isPaused
|
|
6090
6091
|
}) => {
|
|
6091
6092
|
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
@@ -6096,7 +6097,7 @@ var LoadingAnimation = ({
|
|
|
6096
6097
|
width: typeof width === "number" ? `${width}px` : width,
|
|
6097
6098
|
height: typeof width === "number" ? `${width}px` : width
|
|
6098
6099
|
},
|
|
6099
|
-
css: [loaderAnimationContainer,
|
|
6100
|
+
css: [loaderAnimationContainer, css120],
|
|
6100
6101
|
className: `loader-container${isPaused ? " paused" : ""}`,
|
|
6101
6102
|
children: [
|
|
6102
6103
|
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "bottom-cubes", children: [
|
|
@@ -14656,6 +14657,9 @@ var ObjectListItem = import_react141.css`
|
|
|
14656
14657
|
var ObjectListItemSingle = import_react141.css`
|
|
14657
14658
|
align-items: center;
|
|
14658
14659
|
`;
|
|
14660
|
+
var ObjectListItemDragHandleContainer = import_react141.css`
|
|
14661
|
+
height: 100%;
|
|
14662
|
+
`;
|
|
14659
14663
|
var ObjectListItemContentWrapper = import_react141.css`
|
|
14660
14664
|
display: grid;
|
|
14661
14665
|
gap: var(--spacing-sm);
|
|
@@ -14667,7 +14671,7 @@ var ObjectListItemRightSlot = import_react141.css`
|
|
|
14667
14671
|
gap: var(--spacing-sm);
|
|
14668
14672
|
`;
|
|
14669
14673
|
var ObjectListItemContainer = import_react141.css`
|
|
14670
|
-
> [role='listitem']:not(:first-
|
|
14674
|
+
> [role='listitem']:not(:first-child) {
|
|
14671
14675
|
border-top: 1px solid var(--gray-200);
|
|
14672
14676
|
}
|
|
14673
14677
|
`;
|
|
@@ -14681,6 +14685,15 @@ var ObjectListItemCover = import_react141.css`
|
|
|
14681
14685
|
text-align: center;
|
|
14682
14686
|
font-size: var(--fs-xs);
|
|
14683
14687
|
`;
|
|
14688
|
+
var ObjectListItemIconCover = import_react141.css`
|
|
14689
|
+
position: relative;
|
|
14690
|
+
align-items: center;
|
|
14691
|
+
display: flex;
|
|
14692
|
+
width: 80px;
|
|
14693
|
+
height: 45px;
|
|
14694
|
+
text-align: center;
|
|
14695
|
+
font-size: var(--fs-xs);
|
|
14696
|
+
`;
|
|
14684
14697
|
var ObjectListItemImage = import_react141.css`
|
|
14685
14698
|
object-fit: cover;
|
|
14686
14699
|
width: 100%;
|
|
@@ -14717,6 +14730,17 @@ var ObjectListItemHeadingWrapper = import_react141.css`
|
|
|
14717
14730
|
display: flex;
|
|
14718
14731
|
gap: var(--spacing-xs);
|
|
14719
14732
|
`;
|
|
14733
|
+
var ObjectListItemCoverIconGhost = import_react141.css`
|
|
14734
|
+
position: absolute;
|
|
14735
|
+
width: 40%;
|
|
14736
|
+
height: auto;
|
|
14737
|
+
aspect-ratio: 1;
|
|
14738
|
+
opacity: 0.05;
|
|
14739
|
+
transform: rotateZ(-15deg) translate(80%, 40%);
|
|
14740
|
+
`;
|
|
14741
|
+
var ObjectListItemCoverIcon = import_react141.css`
|
|
14742
|
+
transform: translate(40%, 0);
|
|
14743
|
+
`;
|
|
14720
14744
|
|
|
14721
14745
|
// src/components/Objects/ObjectItemLoadingSkeleton.tsx
|
|
14722
14746
|
var import_jsx_runtime116 = require("@emotion/react/jsx-runtime");
|
|
@@ -14754,6 +14778,7 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
|
|
|
14754
14778
|
cover,
|
|
14755
14779
|
header: header2,
|
|
14756
14780
|
rightSlot,
|
|
14781
|
+
leftSlot,
|
|
14757
14782
|
menuItems,
|
|
14758
14783
|
dragHandle,
|
|
14759
14784
|
portalElement,
|
|
@@ -14768,7 +14793,16 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
|
|
|
14768
14793
|
"aria-selected": isSelected,
|
|
14769
14794
|
...divProps,
|
|
14770
14795
|
children: [
|
|
14771
|
-
/* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
|
|
14796
|
+
/* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
|
|
14797
|
+
HorizontalRhythm,
|
|
14798
|
+
{
|
|
14799
|
+
gap: "sm",
|
|
14800
|
+
align: "center",
|
|
14801
|
+
"data-testid": "drag-container",
|
|
14802
|
+
css: ObjectListItemDragHandleContainer,
|
|
14803
|
+
children: dragHandle
|
|
14804
|
+
}
|
|
14805
|
+
),
|
|
14772
14806
|
/* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
|
|
14773
14807
|
"div",
|
|
14774
14808
|
{
|
|
@@ -14776,30 +14810,34 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
|
|
|
14776
14810
|
ObjectListItemContentWrapper,
|
|
14777
14811
|
`${cq(minContainerQueryWidth)} {
|
|
14778
14812
|
grid-template-columns: ${cover ? "minmax(0, auto)" : ""} minmax(0, 1fr) minmax(0, auto);
|
|
14779
|
-
}
|
|
14813
|
+
}`,
|
|
14814
|
+
renderAs === "single" ? ObjectListItemSingle : null
|
|
14780
14815
|
],
|
|
14781
14816
|
children: [
|
|
14782
14817
|
cover ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(HorizontalRhythm, { gap: "sm", align: "center", children: cover }) : null,
|
|
14783
|
-
/* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
|
|
14784
|
-
|
|
14785
|
-
|
|
14786
|
-
|
|
14787
|
-
|
|
14788
|
-
|
|
14789
|
-
|
|
14790
|
-
|
|
14791
|
-
|
|
14792
|
-
|
|
14793
|
-
|
|
14794
|
-
|
|
14795
|
-
|
|
14796
|
-
|
|
14797
|
-
|
|
14798
|
-
|
|
14799
|
-
|
|
14800
|
-
|
|
14801
|
-
|
|
14802
|
-
|
|
14818
|
+
/* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(HorizontalRhythm, { gap: "xs", align: renderAs === "multi" ? "flex-start" : "center", children: [
|
|
14819
|
+
leftSlot ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(HorizontalRhythm, { gap: "xs", align: "baseline", children: leftSlot }) : null,
|
|
14820
|
+
/* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
|
|
14821
|
+
VerticalRhythm,
|
|
14822
|
+
{
|
|
14823
|
+
gap: "0",
|
|
14824
|
+
justify: renderAs === "multi" ? "flex-start" : "center",
|
|
14825
|
+
"data-testid": "title-container",
|
|
14826
|
+
children: [
|
|
14827
|
+
/* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
|
|
14828
|
+
HorizontalRhythm,
|
|
14829
|
+
{
|
|
14830
|
+
gap: "xs",
|
|
14831
|
+
align: renderAs === "multi" ? "flex-start" : "center",
|
|
14832
|
+
"data-testid": "title",
|
|
14833
|
+
children: header2
|
|
14834
|
+
}
|
|
14835
|
+
),
|
|
14836
|
+
renderAs === "multi" ? props.children : null
|
|
14837
|
+
]
|
|
14838
|
+
}
|
|
14839
|
+
)
|
|
14840
|
+
] }),
|
|
14803
14841
|
/* @__PURE__ */ (0, import_jsx_runtime117.jsx)(HorizontalRhythm, { gap: "xs", align: renderAs === "multi" ? "flex-start" : "center", children: rightSlot })
|
|
14804
14842
|
]
|
|
14805
14843
|
}
|
|
@@ -14831,8 +14869,15 @@ var import_jsx_runtime119 = require("@emotion/react/jsx-runtime");
|
|
|
14831
14869
|
var ObjectListItemCover2 = ({
|
|
14832
14870
|
imageUrl,
|
|
14833
14871
|
noImageText = "Image not available",
|
|
14872
|
+
icon,
|
|
14834
14873
|
...props
|
|
14835
14874
|
}) => {
|
|
14875
|
+
if (icon) {
|
|
14876
|
+
return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { css: ObjectListItemIconCover, ...props, children: [
|
|
14877
|
+
/* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Icon, { icon, iconColor: "currentColor", css: ObjectListItemCoverIconGhost }),
|
|
14878
|
+
/* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Icon, { icon, iconColor: "currentColor", size: 36, css: ObjectListItemCoverIcon })
|
|
14879
|
+
] });
|
|
14880
|
+
}
|
|
14836
14881
|
if (!imageUrl) {
|
|
14837
14882
|
return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("div", { css: ObjectListItemCover, role: "presentation", "data-testid": "object-list-item-thumbnail", children: noImageText });
|
|
14838
14883
|
}
|
|
@@ -14874,17 +14919,35 @@ var ObjectListItemHeading2 = ({
|
|
|
14874
14919
|
heading,
|
|
14875
14920
|
beforeHeadingSlot,
|
|
14876
14921
|
afterHeadingSlot,
|
|
14922
|
+
headingTestId = "reference-item-name",
|
|
14877
14923
|
...props
|
|
14878
14924
|
}) => {
|
|
14879
14925
|
return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { css: ObjectListItemHeading, ...props, children: [
|
|
14880
14926
|
beforeHeadingSlot ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(HorizontalRhythm, { gap: "xs", align: "center", children: beforeHeadingSlot }) : null,
|
|
14881
14927
|
/* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(HorizontalRhythm, { css: ObjectListItemHeadingAfterWrapper, gap: "xs", align: "flex-start", children: [
|
|
14882
|
-
/* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { role: "heading", "data-testid":
|
|
14928
|
+
/* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { role: "heading", "data-testid": headingTestId, children: heading }),
|
|
14883
14929
|
afterHeadingSlot
|
|
14884
14930
|
] })
|
|
14885
14931
|
] });
|
|
14886
14932
|
};
|
|
14887
14933
|
|
|
14934
|
+
// src/components/Objects/ObjectListSubText.tsx
|
|
14935
|
+
init_emotion_jsx_shim();
|
|
14936
|
+
|
|
14937
|
+
// src/components/Objects/styles/ObjectListSubText.styles.ts
|
|
14938
|
+
init_emotion_jsx_shim();
|
|
14939
|
+
var import_react143 = require("@emotion/react");
|
|
14940
|
+
var ObjectListSubText = import_react143.css`
|
|
14941
|
+
color: var(--gray-500);
|
|
14942
|
+
font-size: var(--fs-sm);
|
|
14943
|
+
`;
|
|
14944
|
+
|
|
14945
|
+
// src/components/Objects/ObjectListSubText.tsx
|
|
14946
|
+
var import_jsx_runtime121 = require("@emotion/react/jsx-runtime");
|
|
14947
|
+
var ObjectListSubText2 = ({ children, ...props }) => {
|
|
14948
|
+
return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { css: ObjectListSubText, ...props, children });
|
|
14949
|
+
};
|
|
14950
|
+
|
|
14888
14951
|
// src/components/Pagination/Pagination.tsx
|
|
14889
14952
|
init_emotion_jsx_shim();
|
|
14890
14953
|
var import_react_paginate = __toESM(require("react-paginate"));
|
|
@@ -14919,7 +14982,7 @@ var page = import_css.css`
|
|
|
14919
14982
|
`;
|
|
14920
14983
|
|
|
14921
14984
|
// src/components/Pagination/Pagination.tsx
|
|
14922
|
-
var
|
|
14985
|
+
var import_jsx_runtime122 = require("@emotion/react/jsx-runtime");
|
|
14923
14986
|
function Pagination({
|
|
14924
14987
|
limit,
|
|
14925
14988
|
offset,
|
|
@@ -14934,12 +14997,12 @@ function Pagination({
|
|
|
14934
14997
|
if (pageCount <= 1) {
|
|
14935
14998
|
return null;
|
|
14936
14999
|
}
|
|
14937
|
-
return /* @__PURE__ */ (0,
|
|
15000
|
+
return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
14938
15001
|
import_react_paginate.default,
|
|
14939
15002
|
{
|
|
14940
15003
|
forcePage: currentPage,
|
|
14941
|
-
previousLabel: /* @__PURE__ */ (0,
|
|
14942
|
-
nextLabel: /* @__PURE__ */ (0,
|
|
15004
|
+
previousLabel: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { className: prevNextControls, children: "<" }),
|
|
15005
|
+
nextLabel: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { className: prevNextControls, children: ">" }),
|
|
14943
15006
|
breakLabel: "...",
|
|
14944
15007
|
pageCount,
|
|
14945
15008
|
marginPagesDisplayed: 2,
|
|
@@ -14959,8 +15022,8 @@ function Pagination({
|
|
|
14959
15022
|
|
|
14960
15023
|
// src/components/ParameterInputs/hooks/ParameterShellContext.tsx
|
|
14961
15024
|
init_emotion_jsx_shim();
|
|
14962
|
-
var
|
|
14963
|
-
var ParameterShellContext = (0,
|
|
15025
|
+
var import_react144 = require("react");
|
|
15026
|
+
var ParameterShellContext = (0, import_react144.createContext)({
|
|
14964
15027
|
id: "",
|
|
14965
15028
|
label: "",
|
|
14966
15029
|
hiddenLabel: void 0,
|
|
@@ -14969,7 +15032,7 @@ var ParameterShellContext = (0, import_react143.createContext)({
|
|
|
14969
15032
|
}
|
|
14970
15033
|
});
|
|
14971
15034
|
var useParameterShell = () => {
|
|
14972
|
-
const { id, label: label2, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0,
|
|
15035
|
+
const { id, label: label2, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0, import_react144.useContext)(ParameterShellContext);
|
|
14973
15036
|
return {
|
|
14974
15037
|
id,
|
|
14975
15038
|
label: label2,
|
|
@@ -14984,8 +15047,8 @@ init_emotion_jsx_shim();
|
|
|
14984
15047
|
|
|
14985
15048
|
// src/components/ParameterInputs/styles/LabelLeadingIcon.styles.ts
|
|
14986
15049
|
init_emotion_jsx_shim();
|
|
14987
|
-
var
|
|
14988
|
-
var inputIconBtn =
|
|
15050
|
+
var import_react145 = require("@emotion/react");
|
|
15051
|
+
var inputIconBtn = import_react145.css`
|
|
14989
15052
|
align-items: center;
|
|
14990
15053
|
border: none;
|
|
14991
15054
|
border-radius: var(--rounded-base);
|
|
@@ -15013,7 +15076,7 @@ var inputIconBtn = import_react144.css`
|
|
|
15013
15076
|
`;
|
|
15014
15077
|
|
|
15015
15078
|
// src/components/ParameterInputs/LabelLeadingIcon.tsx
|
|
15016
|
-
var
|
|
15079
|
+
var import_jsx_runtime123 = require("@emotion/react/jsx-runtime");
|
|
15017
15080
|
var LabelLeadingIcon = ({
|
|
15018
15081
|
icon,
|
|
15019
15082
|
iconColor,
|
|
@@ -15024,7 +15087,7 @@ var LabelLeadingIcon = ({
|
|
|
15024
15087
|
...props
|
|
15025
15088
|
}) => {
|
|
15026
15089
|
const titleFr = title != null ? title : isLocked ? "Read-only pattern parameter" : "Click to connect to external content";
|
|
15027
|
-
return /* @__PURE__ */ (0,
|
|
15090
|
+
return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Tooltip, { title: titleFr, children: /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
|
|
15028
15091
|
"button",
|
|
15029
15092
|
{
|
|
15030
15093
|
css: inputIconBtn,
|
|
@@ -15034,7 +15097,7 @@ var LabelLeadingIcon = ({
|
|
|
15034
15097
|
...props,
|
|
15035
15098
|
"data-testid": "lock-button",
|
|
15036
15099
|
children: [
|
|
15037
|
-
/* @__PURE__ */ (0,
|
|
15100
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
|
|
15038
15101
|
Icon,
|
|
15039
15102
|
{
|
|
15040
15103
|
icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
|
|
@@ -15050,12 +15113,12 @@ var LabelLeadingIcon = ({
|
|
|
15050
15113
|
|
|
15051
15114
|
// src/components/ParameterInputs/ParameterActionButton.tsx
|
|
15052
15115
|
init_emotion_jsx_shim();
|
|
15053
|
-
var
|
|
15116
|
+
var import_react147 = __toESM(require("react"));
|
|
15054
15117
|
|
|
15055
15118
|
// src/components/ParameterInputs/styles/ParameterActionButton.styles.ts
|
|
15056
15119
|
init_emotion_jsx_shim();
|
|
15057
|
-
var
|
|
15058
|
-
var baseStyles =
|
|
15120
|
+
var import_react146 = require("@emotion/react");
|
|
15121
|
+
var baseStyles = import_react146.css`
|
|
15059
15122
|
--hover-color: var(--accent-dark-hover);
|
|
15060
15123
|
--active-color: var(--accent-dark-active);
|
|
15061
15124
|
border: 1px solid transparent;
|
|
@@ -15080,7 +15143,7 @@ var baseStyles = import_react145.css`
|
|
|
15080
15143
|
cursor: default;
|
|
15081
15144
|
}
|
|
15082
15145
|
`;
|
|
15083
|
-
var solidHoverStyles =
|
|
15146
|
+
var solidHoverStyles = import_react146.css`
|
|
15084
15147
|
--text-color: var(--typography-inverted);
|
|
15085
15148
|
&:hover,
|
|
15086
15149
|
&:focus,
|
|
@@ -15097,7 +15160,7 @@ var solidHoverStyles = import_react145.css`
|
|
|
15097
15160
|
color: var(--text-color);
|
|
15098
15161
|
}
|
|
15099
15162
|
`;
|
|
15100
|
-
var outlineHoverStyles =
|
|
15163
|
+
var outlineHoverStyles = import_react146.css`
|
|
15101
15164
|
--text-color: var(--typography-light);
|
|
15102
15165
|
&:hover:not([aria-disabled='true']),
|
|
15103
15166
|
&:focus:not([aria-disabled='true']),
|
|
@@ -15110,7 +15173,7 @@ var outlineHoverStyles = import_react145.css`
|
|
|
15110
15173
|
border-color: var(--active-color);
|
|
15111
15174
|
}
|
|
15112
15175
|
`;
|
|
15113
|
-
var invertedStyles =
|
|
15176
|
+
var invertedStyles = import_react146.css`
|
|
15114
15177
|
--text-color: var(--typography-inverted);
|
|
15115
15178
|
box-shadow: inset 0 0 0 1px transparent;
|
|
15116
15179
|
&:hover,
|
|
@@ -15127,7 +15190,7 @@ var invertedStyles = import_react145.css`
|
|
|
15127
15190
|
`;
|
|
15128
15191
|
|
|
15129
15192
|
// src/components/ParameterInputs/ParameterActionButton.tsx
|
|
15130
|
-
var
|
|
15193
|
+
var import_jsx_runtime124 = require("@emotion/react/jsx-runtime");
|
|
15131
15194
|
var ParameterActionButton = ({
|
|
15132
15195
|
children,
|
|
15133
15196
|
themeType,
|
|
@@ -15140,7 +15203,7 @@ var ParameterActionButton = ({
|
|
|
15140
15203
|
const { inverted, ...restProps } = props;
|
|
15141
15204
|
const shouldApplyInverted = themeType === "filled" && inverted;
|
|
15142
15205
|
const ComponentWrapper = renderAs === "div" ? "div" : "button";
|
|
15143
|
-
const buttonElement = /* @__PURE__ */ (0,
|
|
15206
|
+
const buttonElement = /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
|
|
15144
15207
|
ComponentWrapper,
|
|
15145
15208
|
{
|
|
15146
15209
|
css: [
|
|
@@ -15155,8 +15218,8 @@ var ParameterActionButton = ({
|
|
|
15155
15218
|
children
|
|
15156
15219
|
}
|
|
15157
15220
|
);
|
|
15158
|
-
if (tooltip && (typeof tooltip === "string" ||
|
|
15159
|
-
return /* @__PURE__ */ (0,
|
|
15221
|
+
if (tooltip && (typeof tooltip === "string" || import_react147.default.isValidElement(tooltip))) {
|
|
15222
|
+
return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Tooltip, { title: tooltip, ...tooltipProps, children: buttonElement });
|
|
15160
15223
|
}
|
|
15161
15224
|
return buttonElement;
|
|
15162
15225
|
};
|
|
@@ -15166,20 +15229,20 @@ init_emotion_jsx_shim();
|
|
|
15166
15229
|
|
|
15167
15230
|
// src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
|
|
15168
15231
|
init_emotion_jsx_shim();
|
|
15169
|
-
var
|
|
15170
|
-
var ParameterDrawerHeaderContainer =
|
|
15232
|
+
var import_react148 = require("@emotion/react");
|
|
15233
|
+
var ParameterDrawerHeaderContainer = import_react148.css`
|
|
15171
15234
|
align-items: center;
|
|
15172
15235
|
display: flex;
|
|
15173
15236
|
gap: var(--spacing-base);
|
|
15174
15237
|
justify-content: space-between;
|
|
15175
15238
|
margin-bottom: var(--spacing-sm);
|
|
15176
15239
|
`;
|
|
15177
|
-
var ParameterDrawerHeaderTitleGroup =
|
|
15240
|
+
var ParameterDrawerHeaderTitleGroup = import_react148.css`
|
|
15178
15241
|
align-items: center;
|
|
15179
15242
|
display: flex;
|
|
15180
15243
|
gap: var(--spacing-sm);
|
|
15181
15244
|
`;
|
|
15182
|
-
var ParameterDrawerHeaderTitle =
|
|
15245
|
+
var ParameterDrawerHeaderTitle = import_react148.css`
|
|
15183
15246
|
text-overflow: ellipsis;
|
|
15184
15247
|
white-space: nowrap;
|
|
15185
15248
|
overflow: hidden;
|
|
@@ -15187,12 +15250,12 @@ var ParameterDrawerHeaderTitle = import_react147.css`
|
|
|
15187
15250
|
`;
|
|
15188
15251
|
|
|
15189
15252
|
// src/components/ParameterInputs/ParameterDrawerHeader.tsx
|
|
15190
|
-
var
|
|
15253
|
+
var import_jsx_runtime125 = require("@emotion/react/jsx-runtime");
|
|
15191
15254
|
var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
|
|
15192
|
-
return /* @__PURE__ */ (0,
|
|
15193
|
-
/* @__PURE__ */ (0,
|
|
15255
|
+
return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { css: ParameterDrawerHeaderContainer, children: [
|
|
15256
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("header", { css: ParameterDrawerHeaderTitleGroup, children: [
|
|
15194
15257
|
iconBeforeTitle,
|
|
15195
|
-
/* @__PURE__ */ (0,
|
|
15258
|
+
/* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Heading2, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title, children: title })
|
|
15196
15259
|
] }),
|
|
15197
15260
|
children
|
|
15198
15261
|
] });
|
|
@@ -15200,12 +15263,12 @@ var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
|
|
|
15200
15263
|
|
|
15201
15264
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
15202
15265
|
init_emotion_jsx_shim();
|
|
15203
|
-
var
|
|
15266
|
+
var import_react150 = require("react");
|
|
15204
15267
|
|
|
15205
15268
|
// src/components/ParameterInputs/styles/ParameterGroup.styles.ts
|
|
15206
15269
|
init_emotion_jsx_shim();
|
|
15207
|
-
var
|
|
15208
|
-
var fieldsetStyles =
|
|
15270
|
+
var import_react149 = require("@emotion/react");
|
|
15271
|
+
var fieldsetStyles = import_react149.css`
|
|
15209
15272
|
&:disabled,
|
|
15210
15273
|
[readonly] {
|
|
15211
15274
|
input,
|
|
@@ -15220,7 +15283,7 @@ var fieldsetStyles = import_react148.css`
|
|
|
15220
15283
|
}
|
|
15221
15284
|
}
|
|
15222
15285
|
`;
|
|
15223
|
-
var fieldsetLegend2 =
|
|
15286
|
+
var fieldsetLegend2 = import_react149.css`
|
|
15224
15287
|
display: block;
|
|
15225
15288
|
font-weight: var(--fw-medium);
|
|
15226
15289
|
margin-bottom: var(--spacing-base);
|
|
@@ -15228,11 +15291,11 @@ var fieldsetLegend2 = import_react148.css`
|
|
|
15228
15291
|
`;
|
|
15229
15292
|
|
|
15230
15293
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
15231
|
-
var
|
|
15232
|
-
var ParameterGroup = (0,
|
|
15294
|
+
var import_jsx_runtime126 = require("@emotion/react/jsx-runtime");
|
|
15295
|
+
var ParameterGroup = (0, import_react150.forwardRef)(
|
|
15233
15296
|
({ legend, isDisabled, children, ...props }, ref) => {
|
|
15234
|
-
return /* @__PURE__ */ (0,
|
|
15235
|
-
/* @__PURE__ */ (0,
|
|
15297
|
+
return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
|
|
15298
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)("legend", { css: fieldsetLegend2, children: legend }),
|
|
15236
15299
|
children
|
|
15237
15300
|
] });
|
|
15238
15301
|
}
|
|
@@ -15240,24 +15303,24 @@ var ParameterGroup = (0, import_react149.forwardRef)(
|
|
|
15240
15303
|
|
|
15241
15304
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
15242
15305
|
init_emotion_jsx_shim();
|
|
15243
|
-
var
|
|
15306
|
+
var import_react158 = require("react");
|
|
15244
15307
|
|
|
15245
15308
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
15246
15309
|
init_emotion_jsx_shim();
|
|
15247
|
-
var
|
|
15310
|
+
var import_react152 = require("react");
|
|
15248
15311
|
var import_react_dom2 = require("react-dom");
|
|
15249
15312
|
|
|
15250
15313
|
// src/components/ParameterInputs/styles/ParameterImage.styles.ts
|
|
15251
15314
|
init_emotion_jsx_shim();
|
|
15252
|
-
var
|
|
15253
|
-
var previewWrapper =
|
|
15315
|
+
var import_react151 = require("@emotion/react");
|
|
15316
|
+
var previewWrapper = import_react151.css`
|
|
15254
15317
|
margin-top: var(--spacing-xs);
|
|
15255
15318
|
background: var(--gray-50);
|
|
15256
15319
|
padding: var(--spacing-sm);
|
|
15257
15320
|
border: solid 1px var(--gray-300);
|
|
15258
15321
|
border-radius: var(--rounded-sm);
|
|
15259
15322
|
`;
|
|
15260
|
-
var previewLink =
|
|
15323
|
+
var previewLink = import_react151.css`
|
|
15261
15324
|
display: block;
|
|
15262
15325
|
width: 100%;
|
|
15263
15326
|
|
|
@@ -15265,7 +15328,7 @@ var previewLink = import_react150.css`
|
|
|
15265
15328
|
max-height: 9rem;
|
|
15266
15329
|
}
|
|
15267
15330
|
`;
|
|
15268
|
-
var previewModalWrapper =
|
|
15331
|
+
var previewModalWrapper = import_react151.css`
|
|
15269
15332
|
background: var(--gray-50);
|
|
15270
15333
|
display: flex;
|
|
15271
15334
|
height: 100%;
|
|
@@ -15274,7 +15337,7 @@ var previewModalWrapper = import_react150.css`
|
|
|
15274
15337
|
border: solid 1px var(--gray-300);
|
|
15275
15338
|
border-radius: var(--rounded-sm);
|
|
15276
15339
|
`;
|
|
15277
|
-
var previewModalImage =
|
|
15340
|
+
var previewModalImage = import_react151.css`
|
|
15278
15341
|
display: flex;
|
|
15279
15342
|
height: 100%;
|
|
15280
15343
|
width: 100%;
|
|
@@ -15286,32 +15349,33 @@ var previewModalImage = import_react150.css`
|
|
|
15286
15349
|
`;
|
|
15287
15350
|
|
|
15288
15351
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
15289
|
-
var
|
|
15352
|
+
var import_jsx_runtime127 = require("@emotion/react/jsx-runtime");
|
|
15290
15353
|
function ParameterImagePreview({ imageSrc }) {
|
|
15291
|
-
const [showModal, setShowModal] = (0,
|
|
15292
|
-
return imageSrc ? /* @__PURE__ */ (0,
|
|
15293
|
-
/* @__PURE__ */ (0,
|
|
15294
|
-
/* @__PURE__ */ (0,
|
|
15354
|
+
const [showModal, setShowModal] = (0, import_react152.useState)(false);
|
|
15355
|
+
return imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { css: previewWrapper, children: [
|
|
15356
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
|
|
15357
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
15295
15358
|
"button",
|
|
15296
15359
|
{
|
|
15360
|
+
type: "button",
|
|
15297
15361
|
css: previewLink,
|
|
15298
15362
|
onClick: () => {
|
|
15299
15363
|
setShowModal(true);
|
|
15300
15364
|
},
|
|
15301
|
-
children: /* @__PURE__ */ (0,
|
|
15365
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
|
|
15302
15366
|
}
|
|
15303
15367
|
)
|
|
15304
15368
|
] }) : null;
|
|
15305
15369
|
}
|
|
15306
15370
|
var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
15307
|
-
return open ? /* @__PURE__ */ (0,
|
|
15308
|
-
/* @__PURE__ */ (0,
|
|
15371
|
+
return open ? /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_jsx_runtime127.Fragment, { children: (0, import_react_dom2.createPortal)(
|
|
15372
|
+
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
15309
15373
|
Modal,
|
|
15310
15374
|
{
|
|
15311
15375
|
header: "Image Preview",
|
|
15312
15376
|
onRequestClose,
|
|
15313
|
-
buttonGroup: /* @__PURE__ */ (0,
|
|
15314
|
-
children: /* @__PURE__ */ (0,
|
|
15377
|
+
buttonGroup: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
|
|
15378
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { css: previewModalWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
|
|
15315
15379
|
}
|
|
15316
15380
|
),
|
|
15317
15381
|
document.body
|
|
@@ -15320,16 +15384,16 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
|
15320
15384
|
|
|
15321
15385
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
15322
15386
|
init_emotion_jsx_shim();
|
|
15323
|
-
var
|
|
15324
|
-
var
|
|
15387
|
+
var import_react156 = require("@emotion/react");
|
|
15388
|
+
var import_react157 = require("react");
|
|
15325
15389
|
|
|
15326
15390
|
// src/components/ParameterInputs/ParameterLabel.tsx
|
|
15327
15391
|
init_emotion_jsx_shim();
|
|
15328
15392
|
|
|
15329
15393
|
// src/components/ParameterInputs/styles/ParameterInput.styles.ts
|
|
15330
15394
|
init_emotion_jsx_shim();
|
|
15331
|
-
var
|
|
15332
|
-
var actionBarVisibilityStyles =
|
|
15395
|
+
var import_react153 = require("@emotion/react");
|
|
15396
|
+
var actionBarVisibilityStyles = import_react153.css`
|
|
15333
15397
|
[data-action-bar] {
|
|
15334
15398
|
opacity: 1;
|
|
15335
15399
|
transform: translateX(0);
|
|
@@ -15338,14 +15402,14 @@ var actionBarVisibilityStyles = import_react152.css`
|
|
|
15338
15402
|
transform var(--duration-fast) var(--timing-ease-out);
|
|
15339
15403
|
}
|
|
15340
15404
|
`;
|
|
15341
|
-
var actionBarVisibilityHiddenStyles =
|
|
15405
|
+
var actionBarVisibilityHiddenStyles = import_react153.css`
|
|
15342
15406
|
opacity: 0;
|
|
15343
15407
|
transform: translateX(1rem);
|
|
15344
15408
|
transition:
|
|
15345
15409
|
opacity var(--duration-fast) var(--timing-ease-out),
|
|
15346
15410
|
transform var(--duration-fast) var(--timing-ease-out);
|
|
15347
15411
|
`;
|
|
15348
|
-
var inputContainer2 =
|
|
15412
|
+
var inputContainer2 = import_react153.css`
|
|
15349
15413
|
position: relative;
|
|
15350
15414
|
scroll-margin: var(--spacing-2xl);
|
|
15351
15415
|
|
|
@@ -15359,14 +15423,14 @@ var inputContainer2 = import_react152.css`
|
|
|
15359
15423
|
${actionBarVisibilityStyles}
|
|
15360
15424
|
}
|
|
15361
15425
|
`;
|
|
15362
|
-
var labelText2 =
|
|
15426
|
+
var labelText2 = import_react153.css`
|
|
15363
15427
|
align-items: center;
|
|
15364
15428
|
display: flex;
|
|
15365
15429
|
gap: var(--spacing-xs);
|
|
15366
15430
|
font-weight: var(--fw-regular);
|
|
15367
15431
|
margin: 0 0 var(--spacing-xs);
|
|
15368
15432
|
`;
|
|
15369
|
-
var input3 =
|
|
15433
|
+
var input3 = import_react153.css`
|
|
15370
15434
|
display: block;
|
|
15371
15435
|
appearance: none;
|
|
15372
15436
|
box-sizing: border-box;
|
|
@@ -15419,18 +15483,18 @@ var input3 = import_react152.css`
|
|
|
15419
15483
|
opacity: var(--opacity-50);
|
|
15420
15484
|
}
|
|
15421
15485
|
`;
|
|
15422
|
-
var selectInput =
|
|
15486
|
+
var selectInput = import_react153.css`
|
|
15423
15487
|
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");
|
|
15424
15488
|
background-position: right var(--spacing-sm) center;
|
|
15425
15489
|
background-repeat: no-repeat;
|
|
15426
15490
|
background-size: 1rem;
|
|
15427
15491
|
padding-right: var(--spacing-xl);
|
|
15428
15492
|
`;
|
|
15429
|
-
var inputWrapper =
|
|
15493
|
+
var inputWrapper = import_react153.css`
|
|
15430
15494
|
display: flex; // used to correct overflow with chrome textarea
|
|
15431
15495
|
position: relative;
|
|
15432
15496
|
`;
|
|
15433
|
-
var inputIcon2 =
|
|
15497
|
+
var inputIcon2 = import_react153.css`
|
|
15434
15498
|
align-items: center;
|
|
15435
15499
|
background: var(--white);
|
|
15436
15500
|
border-radius: var(--rounded-md) 0 0 var(--rounded-md);
|
|
@@ -15446,7 +15510,7 @@ var inputIcon2 = import_react152.css`
|
|
|
15446
15510
|
width: var(--spacing-lg);
|
|
15447
15511
|
z-index: var(--z-10);
|
|
15448
15512
|
`;
|
|
15449
|
-
var inputToggleLabel2 =
|
|
15513
|
+
var inputToggleLabel2 = import_react153.css`
|
|
15450
15514
|
--inline-label-color: var(--typography-base);
|
|
15451
15515
|
align-items: center;
|
|
15452
15516
|
cursor: pointer;
|
|
@@ -15461,7 +15525,7 @@ var inputToggleLabel2 = import_react152.css`
|
|
|
15461
15525
|
--inline-label-color: var(--gray-400);
|
|
15462
15526
|
}
|
|
15463
15527
|
`;
|
|
15464
|
-
var toggleInput2 =
|
|
15528
|
+
var toggleInput2 = import_react153.css`
|
|
15465
15529
|
appearance: none;
|
|
15466
15530
|
border: 1px solid var(--gray-200);
|
|
15467
15531
|
background: var(--white);
|
|
@@ -15505,7 +15569,7 @@ var toggleInput2 = import_react152.css`
|
|
|
15505
15569
|
border-color: var(--gray-200);
|
|
15506
15570
|
}
|
|
15507
15571
|
`;
|
|
15508
|
-
var toggleInputIndeterminateState =
|
|
15572
|
+
var toggleInputIndeterminateState = import_react153.css`
|
|
15509
15573
|
&:indeterminate,
|
|
15510
15574
|
&:indeterminate:hover,
|
|
15511
15575
|
&:indeterminate:focus {
|
|
@@ -15516,7 +15580,7 @@ var toggleInputIndeterminateState = import_react152.css`
|
|
|
15516
15580
|
color: var(--accent-dark-active);
|
|
15517
15581
|
}
|
|
15518
15582
|
`;
|
|
15519
|
-
var inlineLabel2 =
|
|
15583
|
+
var inlineLabel2 = import_react153.css`
|
|
15520
15584
|
color: var(--inline-label-color);
|
|
15521
15585
|
padding-left: var(--spacing-md);
|
|
15522
15586
|
font-size: var(--fs-sm);
|
|
@@ -15533,7 +15597,7 @@ var inlineLabel2 = import_react152.css`
|
|
|
15533
15597
|
}
|
|
15534
15598
|
}
|
|
15535
15599
|
`;
|
|
15536
|
-
var inputMenu =
|
|
15600
|
+
var inputMenu = import_react153.css`
|
|
15537
15601
|
background: none;
|
|
15538
15602
|
border: none;
|
|
15539
15603
|
padding: var(--spacing-2xs);
|
|
@@ -15547,12 +15611,12 @@ var inputMenu = import_react152.css`
|
|
|
15547
15611
|
cursor: default;
|
|
15548
15612
|
}
|
|
15549
15613
|
`;
|
|
15550
|
-
var inputActionItems =
|
|
15614
|
+
var inputActionItems = import_react153.css`
|
|
15551
15615
|
display: flex;
|
|
15552
15616
|
z-index: var(--z-1);
|
|
15553
15617
|
${actionBarVisibilityHiddenStyles}
|
|
15554
15618
|
`;
|
|
15555
|
-
var inputMenuHover =
|
|
15619
|
+
var inputMenuHover = import_react153.css`
|
|
15556
15620
|
opacity: var(--opacity-50);
|
|
15557
15621
|
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
15558
15622
|
margin-top: 0.25rem;
|
|
@@ -15564,11 +15628,11 @@ var inputMenuHover = import_react152.css`
|
|
|
15564
15628
|
background-color: var(--gray-200);
|
|
15565
15629
|
}
|
|
15566
15630
|
`;
|
|
15567
|
-
var textarea2 =
|
|
15631
|
+
var textarea2 = import_react153.css`
|
|
15568
15632
|
resize: vertical;
|
|
15569
15633
|
min-height: 2rem;
|
|
15570
15634
|
`;
|
|
15571
|
-
var dataConnectButton =
|
|
15635
|
+
var dataConnectButton = import_react153.css`
|
|
15572
15636
|
align-items: center;
|
|
15573
15637
|
appearance: none;
|
|
15574
15638
|
box-sizing: border-box;
|
|
@@ -15604,7 +15668,7 @@ var dataConnectButton = import_react152.css`
|
|
|
15604
15668
|
pointer-events: none;
|
|
15605
15669
|
}
|
|
15606
15670
|
`;
|
|
15607
|
-
var linkParameterEmptyContainer =
|
|
15671
|
+
var linkParameterEmptyContainer = import_react153.css`
|
|
15608
15672
|
box-sizing: border-box;
|
|
15609
15673
|
background: var(--white);
|
|
15610
15674
|
border: 1px solid var(--gray-200);
|
|
@@ -15616,7 +15680,7 @@ var linkParameterEmptyContainer = import_react152.css`
|
|
|
15616
15680
|
min-height: 2rem;
|
|
15617
15681
|
width: 100%;
|
|
15618
15682
|
`;
|
|
15619
|
-
var linkParameterControls =
|
|
15683
|
+
var linkParameterControls = import_react153.css`
|
|
15620
15684
|
position: absolute;
|
|
15621
15685
|
inset: 0 0 0 auto;
|
|
15622
15686
|
padding: 0 var(--spacing-base);
|
|
@@ -15625,7 +15689,7 @@ var linkParameterControls = import_react152.css`
|
|
|
15625
15689
|
justify-content: center;
|
|
15626
15690
|
gap: var(--spacing-base);
|
|
15627
15691
|
`;
|
|
15628
|
-
var linkParameterInput = (withExternalLinkIcon) =>
|
|
15692
|
+
var linkParameterInput = (withExternalLinkIcon) => import_react153.css`
|
|
15629
15693
|
padding-right: calc(
|
|
15630
15694
|
${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
|
|
15631
15695
|
var(--spacing-base)
|
|
@@ -15638,7 +15702,7 @@ var linkParameterInput = (withExternalLinkIcon) => import_react152.css`
|
|
|
15638
15702
|
}
|
|
15639
15703
|
}
|
|
15640
15704
|
`;
|
|
15641
|
-
var linkParameterIcon =
|
|
15705
|
+
var linkParameterIcon = import_react153.css`
|
|
15642
15706
|
align-items: center;
|
|
15643
15707
|
color: var(--primary-action-default);
|
|
15644
15708
|
display: flex;
|
|
@@ -15657,31 +15721,32 @@ var linkParameterIcon = import_react152.css`
|
|
|
15657
15721
|
`;
|
|
15658
15722
|
|
|
15659
15723
|
// src/components/ParameterInputs/ParameterLabel.tsx
|
|
15660
|
-
var
|
|
15724
|
+
var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
|
|
15661
15725
|
var ParameterLabel = ({ id, asSpan, children, testId, ...props }) => {
|
|
15662
|
-
return !asSpan ? /* @__PURE__ */ (0,
|
|
15726
|
+
return !asSpan ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("label", { ...props, htmlFor: id, css: labelText2, "data-testid": testId, children }) : /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { "aria-labelledby": id, css: labelText2, children });
|
|
15663
15727
|
};
|
|
15664
15728
|
|
|
15665
15729
|
// src/components/ParameterInputs/ParameterMenuButton.tsx
|
|
15666
15730
|
init_emotion_jsx_shim();
|
|
15667
|
-
var
|
|
15668
|
-
var
|
|
15669
|
-
var ParameterMenuButton = (0,
|
|
15731
|
+
var import_react154 = require("react");
|
|
15732
|
+
var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
|
|
15733
|
+
var ParameterMenuButton = (0, import_react154.forwardRef)(
|
|
15670
15734
|
({ label: label2, children, disabled: disabled2, withoutPortal }, ref) => {
|
|
15671
|
-
return /* @__PURE__ */ (0,
|
|
15735
|
+
return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
|
|
15672
15736
|
Menu,
|
|
15673
15737
|
{
|
|
15674
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
15738
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
|
|
15675
15739
|
"button",
|
|
15676
15740
|
{
|
|
15677
15741
|
"data-action-bar": true,
|
|
15742
|
+
"data-testid": "parameter-menu-button",
|
|
15678
15743
|
className: "parameter-menu",
|
|
15679
15744
|
css: [inputMenu, inputMenuHover],
|
|
15680
15745
|
type: "button",
|
|
15681
15746
|
"aria-label": `${label2} options`,
|
|
15682
15747
|
ref,
|
|
15683
15748
|
disabled: disabled2,
|
|
15684
|
-
children: /* @__PURE__ */ (0,
|
|
15749
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
|
|
15685
15750
|
}
|
|
15686
15751
|
),
|
|
15687
15752
|
withoutPortal,
|
|
@@ -15693,14 +15758,14 @@ var ParameterMenuButton = (0, import_react153.forwardRef)(
|
|
|
15693
15758
|
|
|
15694
15759
|
// src/components/ParameterInputs/styles/ParameterShell.styles.ts
|
|
15695
15760
|
init_emotion_jsx_shim();
|
|
15696
|
-
var
|
|
15697
|
-
var emptyParameterShell =
|
|
15761
|
+
var import_react155 = require("@emotion/react");
|
|
15762
|
+
var emptyParameterShell = import_react155.css`
|
|
15698
15763
|
border-radius: var(--rounded-sm);
|
|
15699
15764
|
flex-grow: 1;
|
|
15700
15765
|
position: relative;
|
|
15701
15766
|
max-width: 100%;
|
|
15702
15767
|
`;
|
|
15703
|
-
var emptyParameterShellText =
|
|
15768
|
+
var emptyParameterShellText = import_react155.css`
|
|
15704
15769
|
background: var(--brand-secondary-6);
|
|
15705
15770
|
border-radius: var(--rounded-sm);
|
|
15706
15771
|
padding: var(--spacing-sm);
|
|
@@ -15708,7 +15773,7 @@ var emptyParameterShellText = import_react154.css`
|
|
|
15708
15773
|
font-size: var(--fs-sm);
|
|
15709
15774
|
margin: 0;
|
|
15710
15775
|
`;
|
|
15711
|
-
var overrideMarker =
|
|
15776
|
+
var overrideMarker = import_react155.css`
|
|
15712
15777
|
border-radius: var(--rounded-sm);
|
|
15713
15778
|
border: 10px solid var(--gray-300);
|
|
15714
15779
|
border-left-color: transparent;
|
|
@@ -15719,7 +15784,7 @@ var overrideMarker = import_react154.css`
|
|
|
15719
15784
|
`;
|
|
15720
15785
|
|
|
15721
15786
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
15722
|
-
var
|
|
15787
|
+
var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
|
|
15723
15788
|
var extractParameterProps = (props) => {
|
|
15724
15789
|
const {
|
|
15725
15790
|
id,
|
|
@@ -15780,36 +15845,36 @@ var ParameterShell = ({
|
|
|
15780
15845
|
menuWithoutPortal,
|
|
15781
15846
|
...props
|
|
15782
15847
|
}) => {
|
|
15783
|
-
const [manualErrorMessage, setManualErrorMessage] = (0,
|
|
15848
|
+
const [manualErrorMessage, setManualErrorMessage] = (0, import_react157.useState)(void 0);
|
|
15784
15849
|
const setErrorMessage = (message) => setManualErrorMessage(message);
|
|
15785
15850
|
const errorMessaging = errorMessage || manualErrorMessage;
|
|
15786
|
-
return /* @__PURE__ */ (0,
|
|
15787
|
-
hiddenLabel || title ? null : /* @__PURE__ */ (0,
|
|
15851
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: inputContainer2, ...props, id, children: [
|
|
15852
|
+
hiddenLabel || title ? null : /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(ParameterLabel, { id, css: labelText2, children: [
|
|
15788
15853
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
15789
15854
|
label2,
|
|
15790
15855
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
15791
15856
|
] }),
|
|
15792
|
-
!title ? null : /* @__PURE__ */ (0,
|
|
15857
|
+
!title ? null : /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(ParameterLabel, { id, asSpan: true, testId: "parameter-label", children: [
|
|
15793
15858
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
15794
15859
|
title,
|
|
15795
15860
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
15796
15861
|
] }),
|
|
15797
|
-
/* @__PURE__ */ (0,
|
|
15798
|
-
actionItems ? /* @__PURE__ */ (0,
|
|
15862
|
+
/* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: inputWrapper, children: [
|
|
15863
|
+
actionItems ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
15799
15864
|
"div",
|
|
15800
15865
|
{
|
|
15801
15866
|
"data-action-bar": true,
|
|
15802
15867
|
css: [
|
|
15803
15868
|
inputMenu,
|
|
15804
15869
|
inputActionItems,
|
|
15805
|
-
menuItems ?
|
|
15870
|
+
menuItems ? import_react156.css`
|
|
15806
15871
|
right: var(--spacing-md);
|
|
15807
15872
|
` : void 0
|
|
15808
15873
|
],
|
|
15809
15874
|
children: actionItems
|
|
15810
15875
|
}
|
|
15811
15876
|
) : null,
|
|
15812
|
-
menuItems ? /* @__PURE__ */ (0,
|
|
15877
|
+
menuItems ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
15813
15878
|
ParameterMenuButton,
|
|
15814
15879
|
{
|
|
15815
15880
|
label: `${label2} menu`,
|
|
@@ -15818,7 +15883,7 @@ var ParameterShell = ({
|
|
|
15818
15883
|
children: menuItems
|
|
15819
15884
|
}
|
|
15820
15885
|
) : null,
|
|
15821
|
-
/* @__PURE__ */ (0,
|
|
15886
|
+
/* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
15822
15887
|
ParameterShellContext.Provider,
|
|
15823
15888
|
{
|
|
15824
15889
|
value: {
|
|
@@ -15828,9 +15893,9 @@ var ParameterShell = ({
|
|
|
15828
15893
|
errorMessage: errorMessaging,
|
|
15829
15894
|
handleManuallySetErrorMessage: (message) => setErrorMessage(message)
|
|
15830
15895
|
},
|
|
15831
|
-
children: isParameterGroup ? /* @__PURE__ */ (0,
|
|
15896
|
+
children: isParameterGroup ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(ParameterShellPlaceholder, { children: [
|
|
15832
15897
|
children,
|
|
15833
|
-
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ (0,
|
|
15898
|
+
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
15834
15899
|
ParameterOverrideMarker,
|
|
15835
15900
|
{
|
|
15836
15901
|
onClick: onResetOverriddenValue,
|
|
@@ -15841,7 +15906,7 @@ var ParameterShell = ({
|
|
|
15841
15906
|
}
|
|
15842
15907
|
)
|
|
15843
15908
|
] }),
|
|
15844
|
-
/* @__PURE__ */ (0,
|
|
15909
|
+
/* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
15845
15910
|
FieldMessage,
|
|
15846
15911
|
{
|
|
15847
15912
|
helperMessageTestId: captionTestId,
|
|
@@ -15855,27 +15920,27 @@ var ParameterShell = ({
|
|
|
15855
15920
|
] });
|
|
15856
15921
|
};
|
|
15857
15922
|
var ParameterShellPlaceholder = ({ children }) => {
|
|
15858
|
-
return /* @__PURE__ */ (0,
|
|
15923
|
+
return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { css: emptyParameterShell, children });
|
|
15859
15924
|
};
|
|
15860
|
-
var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0,
|
|
15925
|
+
var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Tooltip, { title: "The default value has been overridden", ...props.tooltipProps, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { hidden: true, children: "reset overridden value to default" }) }) });
|
|
15861
15926
|
|
|
15862
15927
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
15863
|
-
var
|
|
15864
|
-
var ParameterImage = (0,
|
|
15928
|
+
var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
|
|
15929
|
+
var ParameterImage = (0, import_react158.forwardRef)(
|
|
15865
15930
|
({ children, ...props }, ref) => {
|
|
15866
15931
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
15867
|
-
return /* @__PURE__ */ (0,
|
|
15868
|
-
/* @__PURE__ */ (0,
|
|
15932
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
|
|
15933
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ParameterImageInner, { ref, ...innerProps }),
|
|
15869
15934
|
children
|
|
15870
15935
|
] });
|
|
15871
15936
|
}
|
|
15872
15937
|
);
|
|
15873
|
-
var ParameterImageInner = (0,
|
|
15938
|
+
var ParameterImageInner = (0, import_react158.forwardRef)((props, ref) => {
|
|
15874
15939
|
const { value } = props;
|
|
15875
15940
|
const { id, label: label2, hiddenLabel, errorMessage } = useParameterShell();
|
|
15876
|
-
const deferredValue = (0,
|
|
15877
|
-
return /* @__PURE__ */ (0,
|
|
15878
|
-
/* @__PURE__ */ (0,
|
|
15941
|
+
const deferredValue = (0, import_react158.useDeferredValue)(value);
|
|
15942
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
|
|
15943
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
15879
15944
|
"input",
|
|
15880
15945
|
{
|
|
15881
15946
|
css: input3,
|
|
@@ -15887,22 +15952,22 @@ var ParameterImageInner = (0, import_react157.forwardRef)((props, ref) => {
|
|
|
15887
15952
|
...props
|
|
15888
15953
|
}
|
|
15889
15954
|
),
|
|
15890
|
-
errorMessage || props.disablePreview ? null : /* @__PURE__ */ (0,
|
|
15955
|
+
errorMessage || props.disablePreview ? null : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ParameterImagePreview, { imageSrc: deferredValue })
|
|
15891
15956
|
] });
|
|
15892
15957
|
});
|
|
15893
15958
|
|
|
15894
15959
|
// src/components/ParameterInputs/ParameterInput.tsx
|
|
15895
15960
|
init_emotion_jsx_shim();
|
|
15896
|
-
var
|
|
15897
|
-
var
|
|
15898
|
-
var ParameterInput = (0,
|
|
15961
|
+
var import_react159 = require("react");
|
|
15962
|
+
var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
|
|
15963
|
+
var ParameterInput = (0, import_react159.forwardRef)((props, ref) => {
|
|
15899
15964
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
15900
|
-
return /* @__PURE__ */ (0,
|
|
15965
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ParameterInputInner, { ref, ...innerProps }) });
|
|
15901
15966
|
});
|
|
15902
|
-
var ParameterInputInner = (0,
|
|
15967
|
+
var ParameterInputInner = (0, import_react159.forwardRef)(({ enableMouseWheel = false, ...props }, ref) => {
|
|
15903
15968
|
const { id, label: label2, hiddenLabel } = useParameterShell();
|
|
15904
15969
|
const isNumberInputAndMouseWheelDisabled = enableMouseWheel !== true && props.type === "number";
|
|
15905
|
-
return /* @__PURE__ */ (0,
|
|
15970
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
|
|
15906
15971
|
"input",
|
|
15907
15972
|
{
|
|
15908
15973
|
css: input3,
|
|
@@ -15919,11 +15984,11 @@ var ParameterInputInner = (0, import_react158.forwardRef)(({ enableMouseWheel =
|
|
|
15919
15984
|
|
|
15920
15985
|
// src/components/ParameterInputs/ParameterLabels.tsx
|
|
15921
15986
|
init_emotion_jsx_shim();
|
|
15922
|
-
var
|
|
15923
|
-
var
|
|
15987
|
+
var import_react160 = require("react");
|
|
15988
|
+
var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
|
|
15924
15989
|
var ParameterLabels = ({ disabled: disabled2 = false, ...props }) => {
|
|
15925
15990
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
15926
|
-
return /* @__PURE__ */ (0,
|
|
15991
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(ParameterLabelsInner, { isDisabled: disabled2, ...innerProps }) });
|
|
15927
15992
|
};
|
|
15928
15993
|
function convertOptionsToItems(options) {
|
|
15929
15994
|
var _a, _b;
|
|
@@ -15981,18 +16046,18 @@ var ParameterLabelsInner = (props) => {
|
|
|
15981
16046
|
var _a;
|
|
15982
16047
|
const { label: label2 } = useParameterShell();
|
|
15983
16048
|
const { onChange } = props;
|
|
15984
|
-
const containerRef = (0,
|
|
15985
|
-
const hasPositionedRef = (0,
|
|
15986
|
-
const selectedValues = (0,
|
|
16049
|
+
const containerRef = (0, import_react160.useRef)(null);
|
|
16050
|
+
const hasPositionedRef = (0, import_react160.useRef)(false);
|
|
16051
|
+
const selectedValues = (0, import_react160.useMemo)(
|
|
15987
16052
|
() => {
|
|
15988
16053
|
var _a2, _b;
|
|
15989
16054
|
return (_b = (_a2 = props.value) != null ? _a2 : props.defaultValue) != null ? _b : [];
|
|
15990
16055
|
},
|
|
15991
16056
|
[props.value, props.defaultValue]
|
|
15992
16057
|
);
|
|
15993
|
-
const items = (0,
|
|
15994
|
-
const optionsMap = (0,
|
|
15995
|
-
const selectedIds = (0,
|
|
16058
|
+
const items = (0, import_react160.useMemo)(() => convertOptionsToItems(props.options), [props.options]);
|
|
16059
|
+
const optionsMap = (0, import_react160.useMemo)(() => createOptionsMap(props.options), [props.options]);
|
|
16060
|
+
const selectedIds = (0, import_react160.useMemo)(() => {
|
|
15996
16061
|
if (!Array.isArray(selectedValues)) {
|
|
15997
16062
|
return /* @__PURE__ */ new Set();
|
|
15998
16063
|
}
|
|
@@ -16025,7 +16090,7 @@ var ParameterLabelsInner = (props) => {
|
|
|
16025
16090
|
removedValue: removedOption
|
|
16026
16091
|
});
|
|
16027
16092
|
};
|
|
16028
|
-
return /* @__PURE__ */ (0,
|
|
16093
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
16029
16094
|
"div",
|
|
16030
16095
|
{
|
|
16031
16096
|
ref: containerRef,
|
|
@@ -16034,7 +16099,7 @@ var ParameterLabelsInner = (props) => {
|
|
|
16034
16099
|
// this prevents the quick filter from triggering the responsive styles
|
|
16035
16100
|
containerType: "inline-size"
|
|
16036
16101
|
},
|
|
16037
|
-
children: /* @__PURE__ */ (0,
|
|
16102
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
|
|
16038
16103
|
LabelsQuickFilter,
|
|
16039
16104
|
{
|
|
16040
16105
|
testId: "parameter-labels-quick-filter",
|
|
@@ -16083,19 +16148,19 @@ var ParameterLabelsInner = (props) => {
|
|
|
16083
16148
|
|
|
16084
16149
|
// src/components/ParameterInputs/ParameterLink.tsx
|
|
16085
16150
|
init_emotion_jsx_shim();
|
|
16086
|
-
var
|
|
16087
|
-
var
|
|
16088
|
-
var ParameterLink = (0,
|
|
16151
|
+
var import_react161 = require("react");
|
|
16152
|
+
var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
|
|
16153
|
+
var ParameterLink = (0, import_react161.forwardRef)(
|
|
16089
16154
|
({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
|
|
16090
16155
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
16091
|
-
return /* @__PURE__ */ (0,
|
|
16156
|
+
return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
16092
16157
|
ParameterShell,
|
|
16093
16158
|
{
|
|
16094
16159
|
"data-testid": "link-parameter-editor",
|
|
16095
16160
|
...shellProps,
|
|
16096
16161
|
label: innerProps.value ? shellProps.label : "",
|
|
16097
16162
|
title: !innerProps.value && typeof shellProps.label === "string" ? shellProps.label : void 0,
|
|
16098
|
-
children: /* @__PURE__ */ (0,
|
|
16163
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
16099
16164
|
ParameterLinkInner,
|
|
16100
16165
|
{
|
|
16101
16166
|
onConnectLink,
|
|
@@ -16109,13 +16174,13 @@ var ParameterLink = (0, import_react160.forwardRef)(
|
|
|
16109
16174
|
);
|
|
16110
16175
|
}
|
|
16111
16176
|
);
|
|
16112
|
-
var ParameterLinkInner = (0,
|
|
16177
|
+
var ParameterLinkInner = (0, import_react161.forwardRef)(
|
|
16113
16178
|
({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
|
|
16114
16179
|
const { id, label: label2, hiddenLabel } = useParameterShell();
|
|
16115
16180
|
if (!props.value)
|
|
16116
|
-
return /* @__PURE__ */ (0,
|
|
16117
|
-
return /* @__PURE__ */ (0,
|
|
16118
|
-
/* @__PURE__ */ (0,
|
|
16181
|
+
return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { css: linkParameterEmptyContainer, children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Button, { buttonType: "ghost", size: "sm", disabled: disabled2, onClick: onConnectLink, children: buttonText }) });
|
|
16182
|
+
return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { css: inputWrapper, children: [
|
|
16183
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
16119
16184
|
"input",
|
|
16120
16185
|
{
|
|
16121
16186
|
type: "text",
|
|
@@ -16127,8 +16192,8 @@ var ParameterLinkInner = (0, import_react160.forwardRef)(
|
|
|
16127
16192
|
...props
|
|
16128
16193
|
}
|
|
16129
16194
|
),
|
|
16130
|
-
/* @__PURE__ */ (0,
|
|
16131
|
-
/* @__PURE__ */ (0,
|
|
16195
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { css: linkParameterControls, children: [
|
|
16196
|
+
/* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
16132
16197
|
Button,
|
|
16133
16198
|
{
|
|
16134
16199
|
buttonType: "ghost",
|
|
@@ -16140,7 +16205,7 @@ var ParameterLinkInner = (0, import_react160.forwardRef)(
|
|
|
16140
16205
|
children: "edit"
|
|
16141
16206
|
}
|
|
16142
16207
|
),
|
|
16143
|
-
externalLink ? /* @__PURE__ */ (0,
|
|
16208
|
+
externalLink ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
16144
16209
|
"a",
|
|
16145
16210
|
{
|
|
16146
16211
|
href: externalLink,
|
|
@@ -16148,7 +16213,7 @@ var ParameterLinkInner = (0, import_react160.forwardRef)(
|
|
|
16148
16213
|
title: "Open link in new tab",
|
|
16149
16214
|
target: "_blank",
|
|
16150
16215
|
rel: "noopener noreferrer",
|
|
16151
|
-
children: /* @__PURE__ */ (0,
|
|
16216
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
|
|
16152
16217
|
}
|
|
16153
16218
|
) : null
|
|
16154
16219
|
] })
|
|
@@ -16158,15 +16223,15 @@ var ParameterLinkInner = (0, import_react160.forwardRef)(
|
|
|
16158
16223
|
|
|
16159
16224
|
// src/components/ParameterInputs/ParameterMultiSelect.tsx
|
|
16160
16225
|
init_emotion_jsx_shim();
|
|
16161
|
-
var
|
|
16226
|
+
var import_jsx_runtime135 = require("@emotion/react/jsx-runtime");
|
|
16162
16227
|
var ParameterMultiSelect = ({ disabled: disabled2 = false, ...props }) => {
|
|
16163
16228
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
16164
|
-
return /* @__PURE__ */ (0,
|
|
16229
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
|
|
16165
16230
|
};
|
|
16166
16231
|
var ParameterMultiSelectInner = (props) => {
|
|
16167
16232
|
var _a;
|
|
16168
16233
|
const { id, label: label2 } = useParameterShell();
|
|
16169
|
-
return /* @__PURE__ */ (0,
|
|
16234
|
+
return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
|
|
16170
16235
|
InputComboBox,
|
|
16171
16236
|
{
|
|
16172
16237
|
menuPortalTarget: document.body,
|
|
@@ -16217,7 +16282,7 @@ var ParameterMultiSelectInner = (props) => {
|
|
|
16217
16282
|
|
|
16218
16283
|
// src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
|
|
16219
16284
|
init_emotion_jsx_shim();
|
|
16220
|
-
var
|
|
16285
|
+
var import_jsx_runtime136 = require("@emotion/react/jsx-runtime");
|
|
16221
16286
|
var ParameterNameAndPublicIdInput = ({
|
|
16222
16287
|
id,
|
|
16223
16288
|
onBlur,
|
|
@@ -16243,8 +16308,8 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
16243
16308
|
navigator.clipboard.writeText(values[publicIdFieldName]);
|
|
16244
16309
|
};
|
|
16245
16310
|
autoFocus == null ? void 0 : autoFocus();
|
|
16246
|
-
return /* @__PURE__ */ (0,
|
|
16247
|
-
/* @__PURE__ */ (0,
|
|
16311
|
+
return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_jsx_runtime136.Fragment, { children: [
|
|
16312
|
+
/* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
|
|
16248
16313
|
ParameterInput,
|
|
16249
16314
|
{
|
|
16250
16315
|
id: nameIdField,
|
|
@@ -16263,7 +16328,7 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
16263
16328
|
value: values[nameIdField]
|
|
16264
16329
|
}
|
|
16265
16330
|
),
|
|
16266
|
-
/* @__PURE__ */ (0,
|
|
16331
|
+
/* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
|
|
16267
16332
|
ParameterInput,
|
|
16268
16333
|
{
|
|
16269
16334
|
id: publicIdFieldName,
|
|
@@ -16277,11 +16342,11 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
16277
16342
|
caption: !publicIdError ? publicIdCaption : void 0,
|
|
16278
16343
|
placeholder: publicIdPlaceholderText,
|
|
16279
16344
|
errorMessage: publicIdError,
|
|
16280
|
-
menuItems: /* @__PURE__ */ (0,
|
|
16345
|
+
menuItems: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
|
|
16281
16346
|
MenuItem,
|
|
16282
16347
|
{
|
|
16283
16348
|
disabled: !values[publicIdFieldName],
|
|
16284
|
-
icon: /* @__PURE__ */ (0,
|
|
16349
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Icon, { icon: "path-trim", iconColor: "currentColor" }),
|
|
16285
16350
|
onClick: handleCopyPidFieldValue,
|
|
16286
16351
|
children: "Copy"
|
|
16287
16352
|
}
|
|
@@ -16289,30 +16354,30 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
16289
16354
|
value: values[publicIdFieldName]
|
|
16290
16355
|
}
|
|
16291
16356
|
),
|
|
16292
|
-
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ (0,
|
|
16357
|
+
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Callout, { type: "caution", children: warnOverLength.message }) : null
|
|
16293
16358
|
] });
|
|
16294
16359
|
};
|
|
16295
16360
|
|
|
16296
16361
|
// src/components/ParameterInputs/ParameterNumberSlider.tsx
|
|
16297
16362
|
init_emotion_jsx_shim();
|
|
16298
|
-
var
|
|
16363
|
+
var import_react165 = require("react");
|
|
16299
16364
|
|
|
16300
16365
|
// src/components/Slider/index.ts
|
|
16301
16366
|
init_emotion_jsx_shim();
|
|
16302
16367
|
|
|
16303
16368
|
// src/components/Slider/Slider.tsx
|
|
16304
16369
|
init_emotion_jsx_shim();
|
|
16305
|
-
var
|
|
16370
|
+
var import_react164 = require("react");
|
|
16306
16371
|
|
|
16307
16372
|
// src/components/Slider/SliderLabels.tsx
|
|
16308
16373
|
init_emotion_jsx_shim();
|
|
16309
|
-
var
|
|
16374
|
+
var import_react163 = require("react");
|
|
16310
16375
|
|
|
16311
16376
|
// src/components/Slider/styles/Slider.styles.ts
|
|
16312
16377
|
init_emotion_jsx_shim();
|
|
16313
|
-
var
|
|
16378
|
+
var import_react162 = require("@emotion/react");
|
|
16314
16379
|
var thumbSize = "20px";
|
|
16315
|
-
var disabledThumbStyles =
|
|
16380
|
+
var disabledThumbStyles = import_react162.css`
|
|
16316
16381
|
background: var(--white);
|
|
16317
16382
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cline x1='4' y1='9' x2='16' y2='9' stroke='%236b7280' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
16318
16383
|
background-repeat: no-repeat;
|
|
@@ -16320,22 +16385,22 @@ var disabledThumbStyles = import_react161.css`
|
|
|
16320
16385
|
background-size: 12px 12px;
|
|
16321
16386
|
border: 1px solid var(--gray-500);
|
|
16322
16387
|
`;
|
|
16323
|
-
var container3 =
|
|
16388
|
+
var container3 = import_react162.css`
|
|
16324
16389
|
display: flex;
|
|
16325
16390
|
align-items: flex-start;
|
|
16326
16391
|
gap: var(--spacing-base);
|
|
16327
16392
|
width: 100%;
|
|
16328
16393
|
`;
|
|
16329
|
-
var sliderContainer =
|
|
16394
|
+
var sliderContainer = import_react162.css`
|
|
16330
16395
|
flex: 1;
|
|
16331
16396
|
display: flex;
|
|
16332
16397
|
flex-direction: column;
|
|
16333
16398
|
`;
|
|
16334
|
-
var sliderTrackContainer =
|
|
16399
|
+
var sliderTrackContainer = import_react162.css`
|
|
16335
16400
|
position: relative;
|
|
16336
16401
|
padding: var(--spacing-xs) 0;
|
|
16337
16402
|
`;
|
|
16338
|
-
var progressTrack =
|
|
16403
|
+
var progressTrack = import_react162.css`
|
|
16339
16404
|
position: absolute;
|
|
16340
16405
|
top: 50%;
|
|
16341
16406
|
left: 0;
|
|
@@ -16345,7 +16410,7 @@ var progressTrack = import_react161.css`
|
|
|
16345
16410
|
margin-top: -3px;
|
|
16346
16411
|
border-radius: var(--rounded-sm);
|
|
16347
16412
|
`;
|
|
16348
|
-
var progressTrackBackground =
|
|
16413
|
+
var progressTrackBackground = import_react162.css`
|
|
16349
16414
|
position: absolute;
|
|
16350
16415
|
top: 0;
|
|
16351
16416
|
left: 0;
|
|
@@ -16355,7 +16420,7 @@ var progressTrackBackground = import_react161.css`
|
|
|
16355
16420
|
border: 1px solid var(--gray-200);
|
|
16356
16421
|
border-radius: var(--rounded-sm);
|
|
16357
16422
|
`;
|
|
16358
|
-
var progressTrackFill =
|
|
16423
|
+
var progressTrackFill = import_react162.css`
|
|
16359
16424
|
position: absolute;
|
|
16360
16425
|
top: 0;
|
|
16361
16426
|
left: 0;
|
|
@@ -16363,19 +16428,19 @@ var progressTrackFill = import_react161.css`
|
|
|
16363
16428
|
background: var(--accent-light);
|
|
16364
16429
|
border-radius: var(--rounded-sm);
|
|
16365
16430
|
`;
|
|
16366
|
-
var tickMarksContainer =
|
|
16431
|
+
var tickMarksContainer = import_react162.css`
|
|
16367
16432
|
position: relative;
|
|
16368
16433
|
height: 1rem;
|
|
16369
16434
|
margin-top: calc(-1 * var(--spacing-base) + var(--spacing-xs));
|
|
16370
16435
|
`;
|
|
16371
|
-
var tickMark =
|
|
16436
|
+
var tickMark = import_react162.css`
|
|
16372
16437
|
position: absolute;
|
|
16373
16438
|
top: 0;
|
|
16374
16439
|
width: 0.5px;
|
|
16375
16440
|
height: 8px;
|
|
16376
16441
|
background-color: var(--gray-300);
|
|
16377
16442
|
`;
|
|
16378
|
-
var largeTickMark =
|
|
16443
|
+
var largeTickMark = import_react162.css`
|
|
16379
16444
|
position: absolute;
|
|
16380
16445
|
top: 0;
|
|
16381
16446
|
width: 1px;
|
|
@@ -16383,7 +16448,7 @@ var largeTickMark = import_react161.css`
|
|
|
16383
16448
|
background-color: var(--gray-400);
|
|
16384
16449
|
transform: translateX(-50%);
|
|
16385
16450
|
`;
|
|
16386
|
-
var slider =
|
|
16451
|
+
var slider = import_react162.css`
|
|
16387
16452
|
appearance: none;
|
|
16388
16453
|
width: 100%;
|
|
16389
16454
|
width: calc(100% + ${thumbSize});
|
|
@@ -16500,12 +16565,12 @@ var slider = import_react161.css`
|
|
|
16500
16565
|
0 0 0 3px var(--accent-light);
|
|
16501
16566
|
}
|
|
16502
16567
|
`;
|
|
16503
|
-
var labelsContainer =
|
|
16568
|
+
var labelsContainer = import_react162.css`
|
|
16504
16569
|
position: relative;
|
|
16505
16570
|
height: 1.5rem;
|
|
16506
16571
|
width: 100%;
|
|
16507
16572
|
`;
|
|
16508
|
-
var label =
|
|
16573
|
+
var label = import_react162.css`
|
|
16509
16574
|
position: absolute;
|
|
16510
16575
|
top: 0;
|
|
16511
16576
|
font-size: var(--text-sm);
|
|
@@ -16549,12 +16614,12 @@ var label = import_react161.css`
|
|
|
16549
16614
|
max-width: 100%;
|
|
16550
16615
|
}
|
|
16551
16616
|
`;
|
|
16552
|
-
var numberInputContainer =
|
|
16617
|
+
var numberInputContainer = import_react162.css`
|
|
16553
16618
|
flex-shrink: 0;
|
|
16554
16619
|
min-width: 2rem;
|
|
16555
16620
|
margin-top: var(--spacing-sm);
|
|
16556
16621
|
`;
|
|
16557
|
-
var numberInput2 =
|
|
16622
|
+
var numberInput2 = import_react162.css`
|
|
16558
16623
|
appearance: none;
|
|
16559
16624
|
background-color: var(--white);
|
|
16560
16625
|
border: 1px solid var(--gray-200);
|
|
@@ -16605,7 +16670,7 @@ var numberInput2 = import_react161.css`
|
|
|
16605
16670
|
`;
|
|
16606
16671
|
|
|
16607
16672
|
// src/components/Slider/SliderLabels.tsx
|
|
16608
|
-
var
|
|
16673
|
+
var import_jsx_runtime137 = require("@emotion/react/jsx-runtime");
|
|
16609
16674
|
function estimateLabelWidth(text) {
|
|
16610
16675
|
const fontSize = 14;
|
|
16611
16676
|
const avgCharWidthRatio = 0.7;
|
|
@@ -16732,9 +16797,9 @@ function calculateLabelVisibility(ticks, currentValue, containerWidth) {
|
|
|
16732
16797
|
}));
|
|
16733
16798
|
}
|
|
16734
16799
|
function SliderLabels({ ticks, currentValue, containerWidth = 300 }) {
|
|
16735
|
-
const containerRef = (0,
|
|
16736
|
-
const [measuredWidth, setMeasuredWidth] = (0,
|
|
16737
|
-
(0,
|
|
16800
|
+
const containerRef = (0, import_react163.useRef)(null);
|
|
16801
|
+
const [measuredWidth, setMeasuredWidth] = (0, import_react163.useState)(containerWidth);
|
|
16802
|
+
(0, import_react163.useEffect)(() => {
|
|
16738
16803
|
if (containerRef.current) {
|
|
16739
16804
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
16740
16805
|
for (const entry of entries) {
|
|
@@ -16748,10 +16813,10 @@ function SliderLabels({ ticks, currentValue, containerWidth = 300 }) {
|
|
|
16748
16813
|
}, []);
|
|
16749
16814
|
const labelVisibilities = calculateLabelVisibility(ticks, currentValue, measuredWidth);
|
|
16750
16815
|
const visibilityMap = new Map(labelVisibilities.map((lv) => [lv.tickIndex, lv.isVisible]));
|
|
16751
|
-
return /* @__PURE__ */ (0,
|
|
16816
|
+
return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)("div", { ref: containerRef, css: labelsContainer, children: ticks.map((tick, index) => ({ tick, index })).filter(({ tick }) => tick.label).map(({ tick, index }) => {
|
|
16752
16817
|
var _a;
|
|
16753
16818
|
const isVisible = (_a = visibilityMap.get(index)) != null ? _a : false;
|
|
16754
|
-
return /* @__PURE__ */ (0,
|
|
16819
|
+
return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
|
|
16755
16820
|
"div",
|
|
16756
16821
|
{
|
|
16757
16822
|
css: label,
|
|
@@ -16770,8 +16835,8 @@ function SliderLabels({ ticks, currentValue, containerWidth = 300 }) {
|
|
|
16770
16835
|
}
|
|
16771
16836
|
|
|
16772
16837
|
// src/components/Slider/Slider.tsx
|
|
16773
|
-
var
|
|
16774
|
-
var Slider = (0,
|
|
16838
|
+
var import_jsx_runtime138 = require("@emotion/react/jsx-runtime");
|
|
16839
|
+
var Slider = (0, import_react164.forwardRef)(
|
|
16775
16840
|
({
|
|
16776
16841
|
value,
|
|
16777
16842
|
onChange,
|
|
@@ -16788,7 +16853,7 @@ var Slider = (0, import_react163.forwardRef)(
|
|
|
16788
16853
|
name
|
|
16789
16854
|
}, ref) => {
|
|
16790
16855
|
const isOptionsMode = Boolean(options && options.length > 0);
|
|
16791
|
-
const { min, max, step, smallTicks, largeTicks } = (0,
|
|
16856
|
+
const { min, max, step, smallTicks, largeTicks } = (0, import_react164.useMemo)(() => {
|
|
16792
16857
|
if (isOptionsMode && options) {
|
|
16793
16858
|
if (options.length === 0) {
|
|
16794
16859
|
return {
|
|
@@ -16866,14 +16931,14 @@ var Slider = (0, import_react163.forwardRef)(
|
|
|
16866
16931
|
}, [isOptionsMode, options, propMin, propMax, propStep]);
|
|
16867
16932
|
const isValueUnset = value === void 0 || value === null || typeof value === "number" && isNaN(value);
|
|
16868
16933
|
const clampedValue = isValueUnset ? min : Math.min(Math.max(value, min), max);
|
|
16869
|
-
const handleSliderChange = (0,
|
|
16934
|
+
const handleSliderChange = (0, import_react164.useCallback)(
|
|
16870
16935
|
(event) => {
|
|
16871
16936
|
const newValue = Number(event.target.value);
|
|
16872
16937
|
onChange(newValue);
|
|
16873
16938
|
},
|
|
16874
16939
|
[onChange]
|
|
16875
16940
|
);
|
|
16876
|
-
const handleNumberInputChange = (0,
|
|
16941
|
+
const handleNumberInputChange = (0, import_react164.useCallback)(
|
|
16877
16942
|
(event) => {
|
|
16878
16943
|
if (event.target.value === "") {
|
|
16879
16944
|
onChange(void 0);
|
|
@@ -16885,14 +16950,14 @@ var Slider = (0, import_react163.forwardRef)(
|
|
|
16885
16950
|
[onChange]
|
|
16886
16951
|
);
|
|
16887
16952
|
const fillPercentage = max === min ? 0 : (clampedValue - min) / (max - min) * 100;
|
|
16888
|
-
return /* @__PURE__ */ (0,
|
|
16889
|
-
/* @__PURE__ */ (0,
|
|
16890
|
-
/* @__PURE__ */ (0,
|
|
16891
|
-
/* @__PURE__ */ (0,
|
|
16892
|
-
/* @__PURE__ */ (0,
|
|
16893
|
-
/* @__PURE__ */ (0,
|
|
16953
|
+
return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { css: container3, children: [
|
|
16954
|
+
/* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { css: sliderContainer, children: [
|
|
16955
|
+
/* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { css: sliderTrackContainer, children: [
|
|
16956
|
+
/* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { css: progressTrack, children: [
|
|
16957
|
+
/* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { css: progressTrackBackground }),
|
|
16958
|
+
/* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { css: progressTrackFill, style: { width: `${fillPercentage}%` } })
|
|
16894
16959
|
] }),
|
|
16895
|
-
/* @__PURE__ */ (0,
|
|
16960
|
+
/* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
|
|
16896
16961
|
"input",
|
|
16897
16962
|
{
|
|
16898
16963
|
ref,
|
|
@@ -16912,9 +16977,9 @@ var Slider = (0, import_react163.forwardRef)(
|
|
|
16912
16977
|
}
|
|
16913
16978
|
)
|
|
16914
16979
|
] }),
|
|
16915
|
-
/* @__PURE__ */ (0,
|
|
16916
|
-
smallTicks.map((tick, index) => /* @__PURE__ */ (0,
|
|
16917
|
-
largeTicks.map((tick, index) => /* @__PURE__ */ (0,
|
|
16980
|
+
/* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { css: tickMarksContainer, children: [
|
|
16981
|
+
smallTicks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { css: tickMark, style: { left: `${tick.percentage}%` } }, `small-${index}`)),
|
|
16982
|
+
largeTicks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
|
|
16918
16983
|
"div",
|
|
16919
16984
|
{
|
|
16920
16985
|
css: largeTickMark,
|
|
@@ -16923,9 +16988,9 @@ var Slider = (0, import_react163.forwardRef)(
|
|
|
16923
16988
|
`large-${index}`
|
|
16924
16989
|
))
|
|
16925
16990
|
] }),
|
|
16926
|
-
largeTicks.some((tick) => tick.label) && /* @__PURE__ */ (0,
|
|
16991
|
+
largeTicks.some((tick) => tick.label) && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(SliderLabels, { ticks: largeTicks, currentValue: isValueUnset ? void 0 : clampedValue })
|
|
16927
16992
|
] }),
|
|
16928
|
-
showNumberInput && !isOptionsMode && /* @__PURE__ */ (0,
|
|
16993
|
+
showNumberInput && !isOptionsMode && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { css: numberInputContainer, children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
|
|
16929
16994
|
"input",
|
|
16930
16995
|
{
|
|
16931
16996
|
type: "number",
|
|
@@ -16945,16 +17010,16 @@ var Slider = (0, import_react163.forwardRef)(
|
|
|
16945
17010
|
Slider.displayName = "Slider";
|
|
16946
17011
|
|
|
16947
17012
|
// src/components/ParameterInputs/ParameterNumberSlider.tsx
|
|
16948
|
-
var
|
|
16949
|
-
var ParameterNumberSlider = (0,
|
|
17013
|
+
var import_jsx_runtime139 = require("@emotion/react/jsx-runtime");
|
|
17014
|
+
var ParameterNumberSlider = (0, import_react165.forwardRef)(
|
|
16950
17015
|
(props, ref) => {
|
|
16951
17016
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
16952
|
-
return /* @__PURE__ */ (0,
|
|
17017
|
+
return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(ParameterShell, { "data-testid": "parameter-number-slider", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(ParameterNumberSliderInner, { ref, ...innerProps }) });
|
|
16953
17018
|
}
|
|
16954
17019
|
);
|
|
16955
|
-
var ParameterNumberSliderInner = (0,
|
|
17020
|
+
var ParameterNumberSliderInner = (0, import_react165.forwardRef)(({ ...props }, ref) => {
|
|
16956
17021
|
const { id, label: label2, hiddenLabel } = useParameterShell();
|
|
16957
|
-
return /* @__PURE__ */ (0,
|
|
17022
|
+
return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
|
|
16958
17023
|
Slider,
|
|
16959
17024
|
{
|
|
16960
17025
|
ref,
|
|
@@ -16969,7 +17034,7 @@ ParameterNumberSliderInner.displayName = "ParameterNumberSliderInner";
|
|
|
16969
17034
|
|
|
16970
17035
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
16971
17036
|
init_emotion_jsx_shim();
|
|
16972
|
-
var
|
|
17037
|
+
var import_react179 = require("@emotion/react");
|
|
16973
17038
|
var import_list3 = require("@lexical/list");
|
|
16974
17039
|
var import_markdown = require("@lexical/markdown");
|
|
16975
17040
|
var import_LexicalComposer = require("@lexical/react/LexicalComposer");
|
|
@@ -17106,7 +17171,7 @@ var defaultParameterConfiguration = {
|
|
|
17106
17171
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
17107
17172
|
var import_fast_equals2 = require("fast-equals");
|
|
17108
17173
|
var import_lexical10 = require("lexical");
|
|
17109
|
-
var
|
|
17174
|
+
var import_react180 = require("react");
|
|
17110
17175
|
|
|
17111
17176
|
// src/components/ParameterInputs/rich-text/CustomCodeNode.ts
|
|
17112
17177
|
init_emotion_jsx_shim();
|
|
@@ -17129,10 +17194,10 @@ init_emotion_jsx_shim();
|
|
|
17129
17194
|
var import_LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
|
|
17130
17195
|
var import_utils4 = require("@lexical/utils");
|
|
17131
17196
|
var import_lexical = require("lexical");
|
|
17132
|
-
var
|
|
17197
|
+
var import_react166 = require("react");
|
|
17133
17198
|
function DisableStylesPlugin() {
|
|
17134
17199
|
const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
|
|
17135
|
-
(0,
|
|
17200
|
+
(0, import_react166.useEffect)(() => {
|
|
17136
17201
|
return (0, import_utils4.mergeRegister)(
|
|
17137
17202
|
// Disable text alignment on paragraph nodes
|
|
17138
17203
|
editor.registerNodeTransform(import_lexical.ParagraphNode, (node) => {
|
|
@@ -17393,10 +17458,10 @@ init_emotion_jsx_shim();
|
|
|
17393
17458
|
var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
|
|
17394
17459
|
var import_utils5 = require("@lexical/utils");
|
|
17395
17460
|
var import_lexical2 = require("lexical");
|
|
17396
|
-
var
|
|
17461
|
+
var import_react167 = require("react");
|
|
17397
17462
|
var ImprovedAssetSelectionPlugin = () => {
|
|
17398
17463
|
const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
|
|
17399
|
-
(0,
|
|
17464
|
+
(0, import_react167.useEffect)(() => {
|
|
17400
17465
|
editor.getRootElement();
|
|
17401
17466
|
const onRootClick = (event) => {
|
|
17402
17467
|
if (event.target !== editor.getRootElement()) {
|
|
@@ -17445,13 +17510,13 @@ var ImprovedAssetSelectionPlugin_default = ImprovedAssetSelectionPlugin;
|
|
|
17445
17510
|
|
|
17446
17511
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
17447
17512
|
init_emotion_jsx_shim();
|
|
17448
|
-
var
|
|
17513
|
+
var import_react168 = require("@emotion/react");
|
|
17449
17514
|
var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
|
|
17450
17515
|
var import_LexicalNodeEventPlugin = require("@lexical/react/LexicalNodeEventPlugin");
|
|
17451
17516
|
var import_utils6 = require("@lexical/utils");
|
|
17452
17517
|
var import_fast_equals = require("fast-equals");
|
|
17453
17518
|
var import_lexical4 = require("lexical");
|
|
17454
|
-
var
|
|
17519
|
+
var import_react169 = require("react");
|
|
17455
17520
|
|
|
17456
17521
|
// src/components/ParameterInputs/rich-text/utils.ts
|
|
17457
17522
|
init_emotion_jsx_shim();
|
|
@@ -17510,7 +17575,7 @@ var normalizeStateForDeepEqualComparison = (editorState) => {
|
|
|
17510
17575
|
};
|
|
17511
17576
|
|
|
17512
17577
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
17513
|
-
var
|
|
17578
|
+
var import_jsx_runtime140 = require("@emotion/react/jsx-runtime");
|
|
17514
17579
|
var isProjectMapLinkValue = (value) => {
|
|
17515
17580
|
return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
|
|
17516
17581
|
value.nodeId && value.path && value.projectMapId
|
|
@@ -17799,18 +17864,18 @@ var OPEN_LINK_NODE_MODAL_COMMAND = (0, import_lexical4.createCommand)(
|
|
|
17799
17864
|
);
|
|
17800
17865
|
var LINK_POPOVER_OFFSET_X = 0;
|
|
17801
17866
|
var LINK_POPOVER_OFFSET_Y = 8;
|
|
17802
|
-
var linkPopover =
|
|
17867
|
+
var linkPopover = import_react168.css`
|
|
17803
17868
|
position: absolute;
|
|
17804
17869
|
z-index: 11;
|
|
17805
17870
|
`;
|
|
17806
|
-
var linkPopoverContainer =
|
|
17871
|
+
var linkPopoverContainer = import_react168.css`
|
|
17807
17872
|
${Popover};
|
|
17808
17873
|
${PopoverBody};
|
|
17809
17874
|
${PopoverVariantSmall};
|
|
17810
17875
|
align-items: center;
|
|
17811
17876
|
display: flex;
|
|
17812
17877
|
`;
|
|
17813
|
-
var linkPopoverAnchor =
|
|
17878
|
+
var linkPopoverAnchor = import_react168.css`
|
|
17814
17879
|
${link}
|
|
17815
17880
|
${linkColorDefault}
|
|
17816
17881
|
`;
|
|
@@ -17823,17 +17888,17 @@ function LinkNodePlugin({
|
|
|
17823
17888
|
return path;
|
|
17824
17889
|
};
|
|
17825
17890
|
const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
|
|
17826
|
-
const [linkPopoverState, setLinkPopoverState] = (0,
|
|
17827
|
-
const linkPopoverElRef = (0,
|
|
17828
|
-
const [isEditorFocused, setIsEditorFocused] = (0,
|
|
17829
|
-
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0,
|
|
17830
|
-
(0,
|
|
17891
|
+
const [linkPopoverState, setLinkPopoverState] = (0, import_react169.useState)();
|
|
17892
|
+
const linkPopoverElRef = (0, import_react169.useRef)(null);
|
|
17893
|
+
const [isEditorFocused, setIsEditorFocused] = (0, import_react169.useState)(false);
|
|
17894
|
+
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react169.useState)(false);
|
|
17895
|
+
(0, import_react169.useEffect)(() => {
|
|
17831
17896
|
if (!isEditorFocused && !isLinkPopoverFocused) {
|
|
17832
17897
|
setLinkPopoverState(void 0);
|
|
17833
17898
|
return;
|
|
17834
17899
|
}
|
|
17835
17900
|
}, [isEditorFocused, isLinkPopoverFocused]);
|
|
17836
|
-
(0,
|
|
17901
|
+
(0, import_react169.useEffect)(() => {
|
|
17837
17902
|
if (!editor.hasNodes([LinkNode])) {
|
|
17838
17903
|
throw new Error("LinkNode not registered on editor");
|
|
17839
17904
|
}
|
|
@@ -17937,7 +18002,7 @@ function LinkNodePlugin({
|
|
|
17937
18002
|
)
|
|
17938
18003
|
);
|
|
17939
18004
|
}, [editor, onConnectLink]);
|
|
17940
|
-
const maybeShowLinkToolbar = (0,
|
|
18005
|
+
const maybeShowLinkToolbar = (0, import_react169.useCallback)(() => {
|
|
17941
18006
|
if (!editor.isEditable()) {
|
|
17942
18007
|
return;
|
|
17943
18008
|
}
|
|
@@ -17971,7 +18036,7 @@ function LinkNodePlugin({
|
|
|
17971
18036
|
}
|
|
17972
18037
|
});
|
|
17973
18038
|
}, [editor, positioningAnchorEl]);
|
|
17974
|
-
(0,
|
|
18039
|
+
(0, import_react169.useEffect)(() => {
|
|
17975
18040
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
17976
18041
|
requestAnimationFrame(() => {
|
|
17977
18042
|
editorState.read(() => {
|
|
@@ -17998,8 +18063,8 @@ function LinkNodePlugin({
|
|
|
17998
18063
|
});
|
|
17999
18064
|
});
|
|
18000
18065
|
};
|
|
18001
|
-
return /* @__PURE__ */ (0,
|
|
18002
|
-
/* @__PURE__ */ (0,
|
|
18066
|
+
return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_jsx_runtime140.Fragment, { children: [
|
|
18067
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
|
|
18003
18068
|
import_LexicalNodeEventPlugin.NodeEventPlugin,
|
|
18004
18069
|
{
|
|
18005
18070
|
nodeType: LinkNode,
|
|
@@ -18009,7 +18074,7 @@ function LinkNodePlugin({
|
|
|
18009
18074
|
}
|
|
18010
18075
|
}
|
|
18011
18076
|
),
|
|
18012
|
-
linkPopoverState ? /* @__PURE__ */ (0,
|
|
18077
|
+
linkPopoverState ? /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
|
|
18013
18078
|
"div",
|
|
18014
18079
|
{
|
|
18015
18080
|
css: linkPopover,
|
|
@@ -18018,8 +18083,8 @@ function LinkNodePlugin({
|
|
|
18018
18083
|
top: linkPopoverState.position.y
|
|
18019
18084
|
},
|
|
18020
18085
|
ref: linkPopoverElRef,
|
|
18021
|
-
children: /* @__PURE__ */ (0,
|
|
18022
|
-
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0,
|
|
18086
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("div", { css: linkPopoverContainer, children: [
|
|
18087
|
+
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
|
|
18023
18088
|
"a",
|
|
18024
18089
|
{
|
|
18025
18090
|
href: parsePath(
|
|
@@ -18031,7 +18096,7 @@ function LinkNodePlugin({
|
|
|
18031
18096
|
children: parsePath(linkPopoverState.node.__link.path)
|
|
18032
18097
|
}
|
|
18033
18098
|
),
|
|
18034
|
-
/* @__PURE__ */ (0,
|
|
18099
|
+
/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
|
|
18035
18100
|
Button,
|
|
18036
18101
|
{
|
|
18037
18102
|
size: "xs",
|
|
@@ -18039,7 +18104,7 @@ function LinkNodePlugin({
|
|
|
18039
18104
|
onEditLinkNode(linkPopoverState.node);
|
|
18040
18105
|
},
|
|
18041
18106
|
buttonType: "ghost",
|
|
18042
|
-
children: /* @__PURE__ */ (0,
|
|
18107
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
|
|
18043
18108
|
}
|
|
18044
18109
|
)
|
|
18045
18110
|
] })
|
|
@@ -18059,7 +18124,7 @@ var import_list = require("@lexical/list");
|
|
|
18059
18124
|
var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
|
|
18060
18125
|
var import_utils9 = require("@lexical/utils");
|
|
18061
18126
|
var import_lexical5 = require("lexical");
|
|
18062
|
-
var
|
|
18127
|
+
var import_react170 = require("react");
|
|
18063
18128
|
function isIndentPermitted(maxDepth) {
|
|
18064
18129
|
const selection = (0, import_lexical5.$getSelection)();
|
|
18065
18130
|
if (!(0, import_lexical5.$isRangeSelection)(selection)) {
|
|
@@ -18114,8 +18179,8 @@ function $indentOverTab(selection) {
|
|
|
18114
18179
|
}
|
|
18115
18180
|
function ListIndentPlugin({ maxDepth }) {
|
|
18116
18181
|
const [editor] = (0, import_LexicalComposerContext4.useLexicalComposerContext)();
|
|
18117
|
-
const isInListItemNode = (0,
|
|
18118
|
-
(0,
|
|
18182
|
+
const isInListItemNode = (0, import_react170.useRef)(false);
|
|
18183
|
+
(0, import_react170.useEffect)(() => {
|
|
18119
18184
|
return editor.registerCommand(
|
|
18120
18185
|
import_lexical5.SELECTION_CHANGE_COMMAND,
|
|
18121
18186
|
() => {
|
|
@@ -18132,7 +18197,7 @@ function ListIndentPlugin({ maxDepth }) {
|
|
|
18132
18197
|
import_lexical5.COMMAND_PRIORITY_NORMAL
|
|
18133
18198
|
);
|
|
18134
18199
|
}, [editor]);
|
|
18135
|
-
(0,
|
|
18200
|
+
(0, import_react170.useEffect)(() => {
|
|
18136
18201
|
return (0, import_utils9.mergeRegister)(
|
|
18137
18202
|
editor.registerCommand(
|
|
18138
18203
|
import_lexical5.INDENT_CONTENT_COMMAND,
|
|
@@ -18162,13 +18227,13 @@ function ListIndentPlugin({ maxDepth }) {
|
|
|
18162
18227
|
|
|
18163
18228
|
// src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
|
|
18164
18229
|
init_emotion_jsx_shim();
|
|
18165
|
-
var
|
|
18230
|
+
var import_react171 = require("@emotion/react");
|
|
18166
18231
|
var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
|
|
18167
18232
|
var import_useLexicalEditable = require("@lexical/react/useLexicalEditable");
|
|
18168
18233
|
var import_table = require("@lexical/table");
|
|
18169
18234
|
var import_lexical6 = require("lexical");
|
|
18170
|
-
var
|
|
18171
|
-
var
|
|
18235
|
+
var import_react172 = require("react");
|
|
18236
|
+
var import_jsx_runtime141 = require("@emotion/react/jsx-runtime");
|
|
18172
18237
|
function computeSelectionCount(selection) {
|
|
18173
18238
|
const selectionShape = selection.getShape();
|
|
18174
18239
|
return {
|
|
@@ -18176,21 +18241,21 @@ function computeSelectionCount(selection) {
|
|
|
18176
18241
|
rows: selectionShape.toY - selectionShape.fromY + 1
|
|
18177
18242
|
};
|
|
18178
18243
|
}
|
|
18179
|
-
var tableActionMenuTrigger =
|
|
18244
|
+
var tableActionMenuTrigger = import_react171.css`
|
|
18180
18245
|
position: absolute;
|
|
18181
18246
|
transform: translate(calc(-100% - 1px), 1px);
|
|
18182
18247
|
`;
|
|
18183
|
-
var TableActionMenuTrigger = (0,
|
|
18248
|
+
var TableActionMenuTrigger = (0, import_react172.forwardRef)((props, ref) => {
|
|
18184
18249
|
const { tableCellEl, positioningAnchorEl, ...rest } = props;
|
|
18185
|
-
const [coordinates, setCoordinates] = (0,
|
|
18186
|
-
(0,
|
|
18250
|
+
const [coordinates, setCoordinates] = (0, import_react172.useState)({ x: 0, y: 0 });
|
|
18251
|
+
(0, import_react172.useLayoutEffect)(() => {
|
|
18187
18252
|
const rect = tableCellEl.getBoundingClientRect();
|
|
18188
18253
|
const parentRect = positioningAnchorEl.getBoundingClientRect();
|
|
18189
18254
|
const relativeX = rect.right - parentRect.left + positioningAnchorEl.scrollLeft;
|
|
18190
18255
|
const relativeY = rect.top - parentRect.top + positioningAnchorEl.scrollTop;
|
|
18191
18256
|
setCoordinates({ x: relativeX, y: relativeY });
|
|
18192
18257
|
}, [tableCellEl, positioningAnchorEl]);
|
|
18193
|
-
return /* @__PURE__ */ (0,
|
|
18258
|
+
return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
|
|
18194
18259
|
IconButton,
|
|
18195
18260
|
{
|
|
18196
18261
|
ref,
|
|
@@ -18204,7 +18269,7 @@ var TableActionMenuTrigger = (0, import_react171.forwardRef)((props, ref) => {
|
|
|
18204
18269
|
size: "xs",
|
|
18205
18270
|
buttonType: "unimportant",
|
|
18206
18271
|
...rest,
|
|
18207
|
-
children: /* @__PURE__ */ (0,
|
|
18272
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
|
|
18208
18273
|
}
|
|
18209
18274
|
);
|
|
18210
18275
|
});
|
|
@@ -18216,16 +18281,16 @@ function TableActionMenu({
|
|
|
18216
18281
|
positioningAnchorEl
|
|
18217
18282
|
}) {
|
|
18218
18283
|
const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
|
|
18219
|
-
const [tableCellNode, updateTableCellNode] = (0,
|
|
18220
|
-
const [selectionCounts, updateSelectionCounts] = (0,
|
|
18284
|
+
const [tableCellNode, updateTableCellNode] = (0, import_react172.useState)(_tableCellNode);
|
|
18285
|
+
const [selectionCounts, updateSelectionCounts] = (0, import_react172.useState)({
|
|
18221
18286
|
columns: 1,
|
|
18222
18287
|
rows: 1
|
|
18223
18288
|
});
|
|
18224
|
-
const [menuTriggerKey, setMenuTriggerKey] = (0,
|
|
18289
|
+
const [menuTriggerKey, setMenuTriggerKey] = (0, import_react172.useState)(0);
|
|
18225
18290
|
const incrementMenuTriggerKey = () => {
|
|
18226
18291
|
setMenuTriggerKey((key) => key += 1);
|
|
18227
18292
|
};
|
|
18228
|
-
(0,
|
|
18293
|
+
(0, import_react172.useEffect)(() => {
|
|
18229
18294
|
return editor.registerMutationListener(
|
|
18230
18295
|
import_table.TableCellNode,
|
|
18231
18296
|
(nodeMutations) => {
|
|
@@ -18239,7 +18304,7 @@ function TableActionMenu({
|
|
|
18239
18304
|
{ skipInitialization: true }
|
|
18240
18305
|
);
|
|
18241
18306
|
}, [editor, tableCellNode]);
|
|
18242
|
-
(0,
|
|
18307
|
+
(0, import_react172.useEffect)(() => {
|
|
18243
18308
|
editor.getEditorState().read(() => {
|
|
18244
18309
|
const selection = (0, import_lexical6.$getSelection)();
|
|
18245
18310
|
if ((0, import_table.$isTableSelection)(selection)) {
|
|
@@ -18247,7 +18312,7 @@ function TableActionMenu({
|
|
|
18247
18312
|
}
|
|
18248
18313
|
});
|
|
18249
18314
|
}, [editor]);
|
|
18250
|
-
const clearTableSelection = (0,
|
|
18315
|
+
const clearTableSelection = (0, import_react172.useCallback)(() => {
|
|
18251
18316
|
editor.update(() => {
|
|
18252
18317
|
if (tableCellNode.isAttached()) {
|
|
18253
18318
|
const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
@@ -18264,7 +18329,7 @@ function TableActionMenu({
|
|
|
18264
18329
|
(0, import_lexical6.$setSelection)(null);
|
|
18265
18330
|
});
|
|
18266
18331
|
}, [editor, tableCellNode]);
|
|
18267
|
-
const insertTableRowAtSelection = (0,
|
|
18332
|
+
const insertTableRowAtSelection = (0, import_react172.useCallback)(
|
|
18268
18333
|
(shouldInsertAfter) => {
|
|
18269
18334
|
editor.update(() => {
|
|
18270
18335
|
for (let i = 0; i < selectionCounts.rows; i++) {
|
|
@@ -18274,7 +18339,7 @@ function TableActionMenu({
|
|
|
18274
18339
|
},
|
|
18275
18340
|
[editor, selectionCounts.rows]
|
|
18276
18341
|
);
|
|
18277
|
-
const insertTableColumnAtSelection = (0,
|
|
18342
|
+
const insertTableColumnAtSelection = (0, import_react172.useCallback)(
|
|
18278
18343
|
(shouldInsertAfter) => {
|
|
18279
18344
|
editor.update(() => {
|
|
18280
18345
|
for (let i = 0; i < selectionCounts.columns; i++) {
|
|
@@ -18284,26 +18349,26 @@ function TableActionMenu({
|
|
|
18284
18349
|
},
|
|
18285
18350
|
[editor, selectionCounts.columns]
|
|
18286
18351
|
);
|
|
18287
|
-
const deleteTableRowAtSelection = (0,
|
|
18352
|
+
const deleteTableRowAtSelection = (0, import_react172.useCallback)(() => {
|
|
18288
18353
|
editor.update(() => {
|
|
18289
18354
|
(0, import_table.$deleteTableRowAtSelection)();
|
|
18290
18355
|
});
|
|
18291
18356
|
incrementMenuTriggerKey();
|
|
18292
18357
|
}, [editor]);
|
|
18293
|
-
const deleteTableAtSelection = (0,
|
|
18358
|
+
const deleteTableAtSelection = (0, import_react172.useCallback)(() => {
|
|
18294
18359
|
editor.update(() => {
|
|
18295
18360
|
const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
18296
18361
|
tableNode.remove();
|
|
18297
18362
|
clearTableSelection();
|
|
18298
18363
|
});
|
|
18299
18364
|
}, [editor, tableCellNode, clearTableSelection]);
|
|
18300
|
-
const deleteTableColumnAtSelection = (0,
|
|
18365
|
+
const deleteTableColumnAtSelection = (0, import_react172.useCallback)(() => {
|
|
18301
18366
|
editor.update(() => {
|
|
18302
18367
|
(0, import_table.$deleteTableColumnAtSelection)();
|
|
18303
18368
|
});
|
|
18304
18369
|
incrementMenuTriggerKey();
|
|
18305
18370
|
}, [editor]);
|
|
18306
|
-
const toggleTableRowIsHeader = (0,
|
|
18371
|
+
const toggleTableRowIsHeader = (0, import_react172.useCallback)(() => {
|
|
18307
18372
|
editor.update(() => {
|
|
18308
18373
|
const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
18309
18374
|
const tableRowIndex = (0, import_table.$getTableRowIndexFromTableCellNode)(tableCellNode);
|
|
@@ -18323,7 +18388,7 @@ function TableActionMenu({
|
|
|
18323
18388
|
clearTableSelection();
|
|
18324
18389
|
});
|
|
18325
18390
|
}, [editor, tableCellNode, clearTableSelection]);
|
|
18326
|
-
const toggleTableColumnIsHeader = (0,
|
|
18391
|
+
const toggleTableColumnIsHeader = (0, import_react172.useCallback)(() => {
|
|
18327
18392
|
editor.update(() => {
|
|
18328
18393
|
const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
18329
18394
|
const tableColumnIndex = (0, import_table.$getTableColumnIndexFromTableCellNode)(tableCellNode);
|
|
@@ -18343,13 +18408,13 @@ function TableActionMenu({
|
|
|
18343
18408
|
clearTableSelection();
|
|
18344
18409
|
});
|
|
18345
18410
|
}, [editor, tableCellNode, clearTableSelection]);
|
|
18346
|
-
const menuItemCss = (0,
|
|
18411
|
+
const menuItemCss = (0, import_react171.css)({
|
|
18347
18412
|
fontSize: "var(--fs-sm)"
|
|
18348
18413
|
});
|
|
18349
|
-
return /* @__PURE__ */ (0,
|
|
18414
|
+
return /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
|
|
18350
18415
|
Menu,
|
|
18351
18416
|
{
|
|
18352
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
18417
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
|
|
18353
18418
|
TableActionMenuTrigger,
|
|
18354
18419
|
{
|
|
18355
18420
|
tableCellEl,
|
|
@@ -18360,7 +18425,7 @@ function TableActionMenu({
|
|
|
18360
18425
|
portalElement: menuPortalEl,
|
|
18361
18426
|
maxMenuHeight: "300px",
|
|
18362
18427
|
children: [
|
|
18363
|
-
/* @__PURE__ */ (0,
|
|
18428
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
|
|
18364
18429
|
MenuItem,
|
|
18365
18430
|
{
|
|
18366
18431
|
onClick: () => {
|
|
@@ -18374,33 +18439,33 @@ function TableActionMenu({
|
|
|
18374
18439
|
]
|
|
18375
18440
|
}
|
|
18376
18441
|
),
|
|
18377
|
-
/* @__PURE__ */ (0,
|
|
18442
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
|
|
18378
18443
|
"Insert ",
|
|
18379
18444
|
selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
|
|
18380
18445
|
" below"
|
|
18381
18446
|
] }),
|
|
18382
|
-
/* @__PURE__ */ (0,
|
|
18383
|
-
/* @__PURE__ */ (0,
|
|
18447
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsx)(MenuItemSeparator, {}),
|
|
18448
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
|
|
18384
18449
|
"Insert ",
|
|
18385
18450
|
selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
|
|
18386
18451
|
" left"
|
|
18387
18452
|
] }),
|
|
18388
|
-
/* @__PURE__ */ (0,
|
|
18453
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
|
|
18389
18454
|
"Insert ",
|
|
18390
18455
|
selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
|
|
18391
18456
|
" right"
|
|
18392
18457
|
] }),
|
|
18393
|
-
/* @__PURE__ */ (0,
|
|
18394
|
-
/* @__PURE__ */ (0,
|
|
18395
|
-
/* @__PURE__ */ (0,
|
|
18396
|
-
/* @__PURE__ */ (0,
|
|
18397
|
-
/* @__PURE__ */ (0,
|
|
18398
|
-
/* @__PURE__ */ (0,
|
|
18458
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsx)(MenuItemSeparator, {}),
|
|
18459
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsx)(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
|
|
18460
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsx)(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
|
|
18461
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsx)(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
|
|
18462
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsx)(MenuItemSeparator, {}),
|
|
18463
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
|
|
18399
18464
|
(tableCellNode.__headerState & import_table.TableCellHeaderStates.ROW) === import_table.TableCellHeaderStates.ROW ? "Remove" : "Add",
|
|
18400
18465
|
" ",
|
|
18401
18466
|
"row header"
|
|
18402
18467
|
] }),
|
|
18403
|
-
/* @__PURE__ */ (0,
|
|
18468
|
+
/* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
|
|
18404
18469
|
(tableCellNode.__headerState & import_table.TableCellHeaderStates.COLUMN) === import_table.TableCellHeaderStates.COLUMN ? "Remove" : "Add",
|
|
18405
18470
|
" ",
|
|
18406
18471
|
"column header"
|
|
@@ -18414,10 +18479,10 @@ function TableCellActionMenuContainer({
|
|
|
18414
18479
|
positioningAnchorEl
|
|
18415
18480
|
}) {
|
|
18416
18481
|
const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
|
|
18417
|
-
const [tableCellNode, setTableMenuCellNode] = (0,
|
|
18418
|
-
const [tableCellNodeEl, _setTableMenuCellNodeEl] = (0,
|
|
18419
|
-
const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = (0,
|
|
18420
|
-
(0,
|
|
18482
|
+
const [tableCellNode, setTableMenuCellNode] = (0, import_react172.useState)(null);
|
|
18483
|
+
const [tableCellNodeEl, _setTableMenuCellNodeEl] = (0, import_react172.useState)(null);
|
|
18484
|
+
const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = (0, import_react172.useState)(null);
|
|
18485
|
+
(0, import_react172.useEffect)(() => {
|
|
18421
18486
|
const newPortalEl = document.createElement("div");
|
|
18422
18487
|
setTableMenuCellMenuPortalEl(newPortalEl);
|
|
18423
18488
|
menuPortalEl.appendChild(newPortalEl);
|
|
@@ -18425,14 +18490,14 @@ function TableCellActionMenuContainer({
|
|
|
18425
18490
|
newPortalEl.remove();
|
|
18426
18491
|
};
|
|
18427
18492
|
}, [menuPortalEl]);
|
|
18428
|
-
const setTableMenuCellNodeElem = (0,
|
|
18493
|
+
const setTableMenuCellNodeElem = (0, import_react172.useCallback)((elem) => {
|
|
18429
18494
|
if (elem) {
|
|
18430
18495
|
_setTableMenuCellNodeEl(elem);
|
|
18431
18496
|
} else {
|
|
18432
18497
|
_setTableMenuCellNodeEl(null);
|
|
18433
18498
|
}
|
|
18434
18499
|
}, []);
|
|
18435
|
-
const $moveMenu = (0,
|
|
18500
|
+
const $moveMenu = (0, import_react172.useCallback)(() => {
|
|
18436
18501
|
const selection = (0, import_lexical6.$getSelection)();
|
|
18437
18502
|
const nativeSelection = window.getSelection();
|
|
18438
18503
|
const activeElement = document.activeElement;
|
|
@@ -18461,14 +18526,14 @@ function TableCellActionMenuContainer({
|
|
|
18461
18526
|
setTableMenuCellNodeElem(null);
|
|
18462
18527
|
}
|
|
18463
18528
|
}, [editor, setTableMenuCellNodeElem]);
|
|
18464
|
-
(0,
|
|
18529
|
+
(0, import_react172.useEffect)(() => {
|
|
18465
18530
|
return editor.registerUpdateListener(() => {
|
|
18466
18531
|
editor.getEditorState().read(() => {
|
|
18467
18532
|
$moveMenu();
|
|
18468
18533
|
});
|
|
18469
18534
|
});
|
|
18470
18535
|
}, [editor, $moveMenu]);
|
|
18471
|
-
return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ (0,
|
|
18536
|
+
return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
|
|
18472
18537
|
TableActionMenu,
|
|
18473
18538
|
{
|
|
18474
18539
|
tableCellNode,
|
|
@@ -18484,23 +18549,23 @@ function TableActionMenuPlugin({
|
|
|
18484
18549
|
menuPortalEl
|
|
18485
18550
|
}) {
|
|
18486
18551
|
const isEditable = (0, import_useLexicalEditable.useLexicalEditable)();
|
|
18487
|
-
return isEditable ? /* @__PURE__ */ (0,
|
|
18552
|
+
return isEditable ? /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(TableCellActionMenuContainer, { menuPortalEl, positioningAnchorEl }) : null;
|
|
18488
18553
|
}
|
|
18489
18554
|
|
|
18490
18555
|
// src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
|
|
18491
18556
|
init_emotion_jsx_shim();
|
|
18492
|
-
var
|
|
18557
|
+
var import_react173 = require("@emotion/react");
|
|
18493
18558
|
var import_LexicalComposerContext6 = require("@lexical/react/LexicalComposerContext");
|
|
18494
18559
|
var import_useLexicalEditable2 = require("@lexical/react/useLexicalEditable");
|
|
18495
18560
|
var import_table2 = require("@lexical/table");
|
|
18496
18561
|
var import_utils11 = require("@lexical/utils");
|
|
18497
18562
|
var import_lexical7 = require("lexical");
|
|
18498
|
-
var
|
|
18563
|
+
var import_react174 = require("react");
|
|
18499
18564
|
var import_react_dom3 = require("react-dom");
|
|
18500
|
-
var
|
|
18565
|
+
var import_jsx_runtime142 = require("@emotion/react/jsx-runtime");
|
|
18501
18566
|
var MIN_ROW_HEIGHT = 33;
|
|
18502
18567
|
var MIN_COLUMN_WIDTH = 50;
|
|
18503
|
-
var tableResizer =
|
|
18568
|
+
var tableResizer = import_react173.css`
|
|
18504
18569
|
position: absolute;
|
|
18505
18570
|
z-index: var(--z-10);
|
|
18506
18571
|
`;
|
|
@@ -18522,15 +18587,15 @@ var fixedGetDOMCellFromTarget = (node) => {
|
|
|
18522
18587
|
return null;
|
|
18523
18588
|
};
|
|
18524
18589
|
function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
18525
|
-
const targetRef = (0,
|
|
18526
|
-
const resizerRef = (0,
|
|
18527
|
-
const tableRectRef = (0,
|
|
18528
|
-
const mouseStartPosRef = (0,
|
|
18529
|
-
const [mouseCurrentPos, updateMouseCurrentPos] = (0,
|
|
18530
|
-
const [activeCell, updateActiveCell] = (0,
|
|
18531
|
-
const [isMouseDown, updateIsMouseDown] = (0,
|
|
18532
|
-
const [draggingDirection, updateDraggingDirection] = (0,
|
|
18533
|
-
const resetState = (0,
|
|
18590
|
+
const targetRef = (0, import_react174.useRef)(null);
|
|
18591
|
+
const resizerRef = (0, import_react174.useRef)(null);
|
|
18592
|
+
const tableRectRef = (0, import_react174.useRef)(null);
|
|
18593
|
+
const mouseStartPosRef = (0, import_react174.useRef)(null);
|
|
18594
|
+
const [mouseCurrentPos, updateMouseCurrentPos] = (0, import_react174.useState)(null);
|
|
18595
|
+
const [activeCell, updateActiveCell] = (0, import_react174.useState)(null);
|
|
18596
|
+
const [isMouseDown, updateIsMouseDown] = (0, import_react174.useState)(false);
|
|
18597
|
+
const [draggingDirection, updateDraggingDirection] = (0, import_react174.useState)(null);
|
|
18598
|
+
const resetState = (0, import_react174.useCallback)(() => {
|
|
18534
18599
|
updateActiveCell(null);
|
|
18535
18600
|
targetRef.current = null;
|
|
18536
18601
|
updateDraggingDirection(null);
|
|
@@ -18540,7 +18605,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
18540
18605
|
const isMouseDownOnEvent = (event) => {
|
|
18541
18606
|
return (event.buttons & 1) === 1;
|
|
18542
18607
|
};
|
|
18543
|
-
(0,
|
|
18608
|
+
(0, import_react174.useEffect)(() => {
|
|
18544
18609
|
const onMouseMove = (event) => {
|
|
18545
18610
|
setTimeout(() => {
|
|
18546
18611
|
const target = event.target;
|
|
@@ -18607,7 +18672,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
18607
18672
|
}
|
|
18608
18673
|
return false;
|
|
18609
18674
|
};
|
|
18610
|
-
const updateRowHeight = (0,
|
|
18675
|
+
const updateRowHeight = (0, import_react174.useCallback)(
|
|
18611
18676
|
(heightChange) => {
|
|
18612
18677
|
if (!activeCell) {
|
|
18613
18678
|
throw new Error("TableCellResizer: Expected active cell.");
|
|
@@ -18669,7 +18734,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
18669
18734
|
}
|
|
18670
18735
|
}
|
|
18671
18736
|
};
|
|
18672
|
-
const updateColumnWidth = (0,
|
|
18737
|
+
const updateColumnWidth = (0, import_react174.useCallback)(
|
|
18673
18738
|
(widthChange) => {
|
|
18674
18739
|
if (!activeCell) {
|
|
18675
18740
|
throw new Error("TableCellResizer: Expected active cell.");
|
|
@@ -18703,7 +18768,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
18703
18768
|
},
|
|
18704
18769
|
[activeCell, editor]
|
|
18705
18770
|
);
|
|
18706
|
-
const mouseUpHandler = (0,
|
|
18771
|
+
const mouseUpHandler = (0, import_react174.useCallback)(
|
|
18707
18772
|
(direction) => {
|
|
18708
18773
|
const handler = (event) => {
|
|
18709
18774
|
event.preventDefault();
|
|
@@ -18732,7 +18797,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
18732
18797
|
},
|
|
18733
18798
|
[activeCell, resetState, updateColumnWidth, updateRowHeight]
|
|
18734
18799
|
);
|
|
18735
|
-
const toggleResize = (0,
|
|
18800
|
+
const toggleResize = (0, import_react174.useCallback)(
|
|
18736
18801
|
(direction) => (event) => {
|
|
18737
18802
|
event.preventDefault();
|
|
18738
18803
|
event.stopPropagation();
|
|
@@ -18749,7 +18814,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
18749
18814
|
},
|
|
18750
18815
|
[activeCell, mouseUpHandler]
|
|
18751
18816
|
);
|
|
18752
|
-
const getResizers = (0,
|
|
18817
|
+
const getResizers = (0, import_react174.useCallback)(() => {
|
|
18753
18818
|
if (activeCell) {
|
|
18754
18819
|
const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
|
|
18755
18820
|
const parentRect = positioningAnchorEl.getBoundingClientRect();
|
|
@@ -18798,8 +18863,8 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
18798
18863
|
};
|
|
18799
18864
|
}, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
|
|
18800
18865
|
const resizerStyles = getResizers();
|
|
18801
|
-
return /* @__PURE__ */ (0,
|
|
18802
|
-
/* @__PURE__ */ (0,
|
|
18866
|
+
return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(import_jsx_runtime142.Fragment, { children: [
|
|
18867
|
+
/* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
|
|
18803
18868
|
"div",
|
|
18804
18869
|
{
|
|
18805
18870
|
css: tableResizer,
|
|
@@ -18807,7 +18872,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
18807
18872
|
onMouseDown: toggleResize("right")
|
|
18808
18873
|
}
|
|
18809
18874
|
),
|
|
18810
|
-
/* @__PURE__ */ (0,
|
|
18875
|
+
/* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
|
|
18811
18876
|
"div",
|
|
18812
18877
|
{
|
|
18813
18878
|
css: tableResizer,
|
|
@@ -18820,9 +18885,9 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
18820
18885
|
function TableCellResizerPlugin({ positioningAnchorEl }) {
|
|
18821
18886
|
const [editor] = (0, import_LexicalComposerContext6.useLexicalComposerContext)();
|
|
18822
18887
|
const isEditable = (0, import_useLexicalEditable2.useLexicalEditable)();
|
|
18823
|
-
return (0,
|
|
18888
|
+
return (0, import_react174.useMemo)(
|
|
18824
18889
|
() => isEditable ? (0, import_react_dom3.createPortal)(
|
|
18825
|
-
/* @__PURE__ */ (0,
|
|
18890
|
+
/* @__PURE__ */ (0, import_jsx_runtime142.jsx)(TableCellResizer, { editor, positioningAnchorEl }),
|
|
18826
18891
|
positioningAnchorEl
|
|
18827
18892
|
) : null,
|
|
18828
18893
|
[editor, isEditable, positioningAnchorEl]
|
|
@@ -18834,11 +18899,11 @@ init_emotion_jsx_shim();
|
|
|
18834
18899
|
var import_LexicalComposerContext7 = require("@lexical/react/LexicalComposerContext");
|
|
18835
18900
|
var import_table3 = require("@lexical/table");
|
|
18836
18901
|
var import_lexical8 = require("lexical");
|
|
18837
|
-
var
|
|
18902
|
+
var import_react175 = require("react");
|
|
18838
18903
|
var TableSelectionPlugin = () => {
|
|
18839
18904
|
const [editor] = (0, import_LexicalComposerContext7.useLexicalComposerContext)();
|
|
18840
|
-
const [closestTableCellNode, setClosestTableCellNode] = (0,
|
|
18841
|
-
(0,
|
|
18905
|
+
const [closestTableCellNode, setClosestTableCellNode] = (0, import_react175.useState)(null);
|
|
18906
|
+
(0, import_react175.useEffect)(() => {
|
|
18842
18907
|
return editor.registerCommand(
|
|
18843
18908
|
import_lexical8.SELECTION_CHANGE_COMMAND,
|
|
18844
18909
|
() => {
|
|
@@ -18860,7 +18925,7 @@ var TableSelectionPlugin = () => {
|
|
|
18860
18925
|
import_lexical8.COMMAND_PRIORITY_NORMAL
|
|
18861
18926
|
);
|
|
18862
18927
|
}, [editor]);
|
|
18863
|
-
(0,
|
|
18928
|
+
(0, import_react175.useEffect)(() => {
|
|
18864
18929
|
const onControlA = (event) => {
|
|
18865
18930
|
if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
|
|
18866
18931
|
if (!closestTableCellNode) {
|
|
@@ -18884,7 +18949,7 @@ var TableSelectionPlugin_default = TableSelectionPlugin;
|
|
|
18884
18949
|
|
|
18885
18950
|
// src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
|
|
18886
18951
|
init_emotion_jsx_shim();
|
|
18887
|
-
var
|
|
18952
|
+
var import_react177 = require("@emotion/react");
|
|
18888
18953
|
var import_code2 = require("@lexical/code");
|
|
18889
18954
|
var import_list2 = require("@lexical/list");
|
|
18890
18955
|
var import_LexicalComposerContext8 = require("@lexical/react/LexicalComposerContext");
|
|
@@ -18893,7 +18958,7 @@ var import_selection2 = require("@lexical/selection");
|
|
|
18893
18958
|
var import_table4 = require("@lexical/table");
|
|
18894
18959
|
var import_utils12 = require("@lexical/utils");
|
|
18895
18960
|
var import_lexical9 = require("lexical");
|
|
18896
|
-
var
|
|
18961
|
+
var import_react178 = require("react");
|
|
18897
18962
|
|
|
18898
18963
|
// src/components/ParameterInputs/rich-text/toolbar/constants.ts
|
|
18899
18964
|
init_emotion_jsx_shim();
|
|
@@ -18911,29 +18976,29 @@ var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
|
|
|
18911
18976
|
|
|
18912
18977
|
// src/components/ParameterInputs/rich-text/toolbar/useRichTextToolbarState.ts
|
|
18913
18978
|
init_emotion_jsx_shim();
|
|
18914
|
-
var
|
|
18979
|
+
var import_react176 = require("react");
|
|
18915
18980
|
var useRichTextToolbarState = ({ config }) => {
|
|
18916
18981
|
var _a;
|
|
18917
|
-
const enabledBuiltInFormats = (0,
|
|
18982
|
+
const enabledBuiltInFormats = (0, import_react176.useMemo)(() => {
|
|
18918
18983
|
return richTextBuiltInFormats.filter((format) => {
|
|
18919
18984
|
var _a2, _b;
|
|
18920
18985
|
return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
|
|
18921
18986
|
});
|
|
18922
18987
|
}, [config]);
|
|
18923
|
-
const enabledBuiltInElements = (0,
|
|
18988
|
+
const enabledBuiltInElements = (0, import_react176.useMemo)(() => {
|
|
18924
18989
|
return richTextBuiltInElements.filter((element) => {
|
|
18925
18990
|
var _a2, _b;
|
|
18926
18991
|
return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
|
|
18927
18992
|
});
|
|
18928
18993
|
}, [config]);
|
|
18929
|
-
const enabledBuiltInFormatsWithIcon = (0,
|
|
18994
|
+
const enabledBuiltInFormatsWithIcon = (0, import_react176.useMemo)(() => {
|
|
18930
18995
|
return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
|
|
18931
18996
|
}, [enabledBuiltInFormats]);
|
|
18932
18997
|
const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
|
|
18933
18998
|
(format) => !FORMATS_WITH_ICON.has(format.type)
|
|
18934
18999
|
);
|
|
18935
|
-
const [activeFormats, setActiveFormats] = (0,
|
|
18936
|
-
const visibleFormatsWithIcon = (0,
|
|
19000
|
+
const [activeFormats, setActiveFormats] = (0, import_react176.useState)([]);
|
|
19001
|
+
const visibleFormatsWithIcon = (0, import_react176.useMemo)(() => {
|
|
18937
19002
|
const visibleFormats = /* @__PURE__ */ new Set();
|
|
18938
19003
|
activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
18939
19004
|
visibleFormats.add(type);
|
|
@@ -18943,7 +19008,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
18943
19008
|
});
|
|
18944
19009
|
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
18945
19010
|
}, [activeFormats, enabledBuiltInFormatsWithIcon]);
|
|
18946
|
-
const visibleFormatsWithoutIcon = (0,
|
|
19011
|
+
const visibleFormatsWithoutIcon = (0, import_react176.useMemo)(() => {
|
|
18947
19012
|
const visibleFormats = /* @__PURE__ */ new Set();
|
|
18948
19013
|
activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
18949
19014
|
visibleFormats.add(type);
|
|
@@ -18953,11 +19018,11 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
18953
19018
|
});
|
|
18954
19019
|
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
18955
19020
|
}, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
|
|
18956
|
-
const [activeElement, setActiveElement] = (0,
|
|
19021
|
+
const [activeElement, setActiveElement] = (0, import_react176.useState)("paragraph");
|
|
18957
19022
|
const enabledTextualElements = enabledBuiltInElements.filter(
|
|
18958
19023
|
(element) => TEXTUAL_ELEMENTS.includes(element.type)
|
|
18959
19024
|
);
|
|
18960
|
-
const visibleTextualElements = (0,
|
|
19025
|
+
const visibleTextualElements = (0, import_react176.useMemo)(() => {
|
|
18961
19026
|
if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
|
|
18962
19027
|
return enabledTextualElements;
|
|
18963
19028
|
}
|
|
@@ -18968,30 +19033,30 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
18968
19033
|
}
|
|
18969
19034
|
);
|
|
18970
19035
|
}, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
|
|
18971
|
-
const [isLink, setIsLink] = (0,
|
|
18972
|
-
const linkElementVisible = (0,
|
|
19036
|
+
const [isLink, setIsLink] = (0, import_react176.useState)(false);
|
|
19037
|
+
const linkElementVisible = (0, import_react176.useMemo)(() => {
|
|
18973
19038
|
return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
|
|
18974
19039
|
}, [isLink, enabledBuiltInElements]);
|
|
18975
|
-
const visibleLists = (0,
|
|
19040
|
+
const visibleLists = (0, import_react176.useMemo)(() => {
|
|
18976
19041
|
return new Set(
|
|
18977
19042
|
["orderedList", "unorderedList"].filter(
|
|
18978
19043
|
(type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
|
|
18979
19044
|
)
|
|
18980
19045
|
);
|
|
18981
19046
|
}, [activeElement, enabledBuiltInElements]);
|
|
18982
|
-
const quoteElementVisible = (0,
|
|
19047
|
+
const quoteElementVisible = (0, import_react176.useMemo)(() => {
|
|
18983
19048
|
return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
|
|
18984
19049
|
}, [activeElement, enabledBuiltInElements]);
|
|
18985
|
-
const codeElementVisible = (0,
|
|
19050
|
+
const codeElementVisible = (0, import_react176.useMemo)(() => {
|
|
18986
19051
|
return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
|
|
18987
19052
|
}, [activeElement, enabledBuiltInElements]);
|
|
18988
|
-
const tableElementVisible = (0,
|
|
19053
|
+
const tableElementVisible = (0, import_react176.useMemo)(() => {
|
|
18989
19054
|
return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
|
|
18990
19055
|
}, [activeElement, enabledBuiltInElements]);
|
|
18991
|
-
const assetElementVisible = (0,
|
|
19056
|
+
const assetElementVisible = (0, import_react176.useMemo)(() => {
|
|
18992
19057
|
return enabledBuiltInElements.some((element) => element.type === "asset") || activeElement === "asset";
|
|
18993
19058
|
}, [activeElement, enabledBuiltInElements]);
|
|
18994
|
-
const visibleElementsWithIcons = (0,
|
|
19059
|
+
const visibleElementsWithIcons = (0, import_react176.useMemo)(() => {
|
|
18995
19060
|
const visibleElements = /* @__PURE__ */ new Set();
|
|
18996
19061
|
if (linkElementVisible) {
|
|
18997
19062
|
visibleElements.add("link");
|
|
@@ -19003,7 +19068,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
19003
19068
|
}
|
|
19004
19069
|
return visibleElements;
|
|
19005
19070
|
}, [linkElementVisible, visibleLists]);
|
|
19006
|
-
const visibleInsertElementsWithIcons = (0,
|
|
19071
|
+
const visibleInsertElementsWithIcons = (0, import_react176.useMemo)(() => {
|
|
19007
19072
|
const visibleElements = /* @__PURE__ */ new Set();
|
|
19008
19073
|
if (quoteElementVisible) {
|
|
19009
19074
|
visibleElements.add("quote");
|
|
@@ -19041,8 +19106,8 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
19041
19106
|
};
|
|
19042
19107
|
|
|
19043
19108
|
// src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
|
|
19044
|
-
var
|
|
19045
|
-
var toolbar =
|
|
19109
|
+
var import_jsx_runtime143 = require("@emotion/react/jsx-runtime");
|
|
19110
|
+
var toolbar = import_react177.css`
|
|
19046
19111
|
${scrollbarStyles}
|
|
19047
19112
|
background: var(--gray-50);
|
|
19048
19113
|
border-radius: var(--rounded-base);
|
|
@@ -19056,7 +19121,7 @@ var toolbar = import_react176.css`
|
|
|
19056
19121
|
top: calc(var(--spacing-sm) * -2);
|
|
19057
19122
|
z-index: 10;
|
|
19058
19123
|
`;
|
|
19059
|
-
var toolbarGroup =
|
|
19124
|
+
var toolbarGroup = import_react177.css`
|
|
19060
19125
|
display: flex;
|
|
19061
19126
|
flex-shrink: 0;
|
|
19062
19127
|
gap: var(--spacing-xs);
|
|
@@ -19073,7 +19138,7 @@ var toolbarGroup = import_react176.css`
|
|
|
19073
19138
|
width: 1px;
|
|
19074
19139
|
}
|
|
19075
19140
|
`;
|
|
19076
|
-
var richTextToolbarButton =
|
|
19141
|
+
var richTextToolbarButton = import_react177.css`
|
|
19077
19142
|
align-items: center;
|
|
19078
19143
|
appearance: none;
|
|
19079
19144
|
border: 0;
|
|
@@ -19087,21 +19152,21 @@ var richTextToolbarButton = import_react176.css`
|
|
|
19087
19152
|
min-width: 32px;
|
|
19088
19153
|
padding: 0 var(--spacing-sm);
|
|
19089
19154
|
`;
|
|
19090
|
-
var richTextToolbarButtonActive =
|
|
19155
|
+
var richTextToolbarButtonActive = import_react177.css`
|
|
19091
19156
|
background: var(--gray-200);
|
|
19092
19157
|
`;
|
|
19093
|
-
var textStyleButton =
|
|
19158
|
+
var textStyleButton = import_react177.css`
|
|
19094
19159
|
justify-content: space-between;
|
|
19095
19160
|
min-width: 7rem;
|
|
19096
19161
|
`;
|
|
19097
|
-
var toolbarIcon =
|
|
19162
|
+
var toolbarIcon = import_react177.css`
|
|
19098
19163
|
color: inherit;
|
|
19099
19164
|
`;
|
|
19100
|
-
var toolbarChevron =
|
|
19165
|
+
var toolbarChevron = import_react177.css`
|
|
19101
19166
|
margin-left: var(--spacing-xs);
|
|
19102
19167
|
`;
|
|
19103
19168
|
var RichTextToolbarIcon = ({ icon }) => {
|
|
19104
|
-
return /* @__PURE__ */ (0,
|
|
19169
|
+
return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Icon, { icon, css: toolbarIcon, size: "1rem" });
|
|
19105
19170
|
};
|
|
19106
19171
|
var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset }) => {
|
|
19107
19172
|
const [editor] = (0, import_LexicalComposerContext8.useLexicalComposerContext)();
|
|
@@ -19157,7 +19222,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
19157
19222
|
});
|
|
19158
19223
|
});
|
|
19159
19224
|
};
|
|
19160
|
-
const updateToolbar = (0,
|
|
19225
|
+
const updateToolbar = (0, import_react178.useCallback)(() => {
|
|
19161
19226
|
const selection = (0, import_lexical9.$getSelection)();
|
|
19162
19227
|
if (!(0, import_lexical9.$isRangeSelection)(selection)) {
|
|
19163
19228
|
return;
|
|
@@ -19196,7 +19261,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
19196
19261
|
setIsLink(false);
|
|
19197
19262
|
}
|
|
19198
19263
|
}, [editor, setActiveElement, setActiveFormats, setIsLink]);
|
|
19199
|
-
(0,
|
|
19264
|
+
(0, import_react178.useEffect)(() => {
|
|
19200
19265
|
return editor.registerCommand(
|
|
19201
19266
|
import_lexical9.SELECTION_CHANGE_COMMAND,
|
|
19202
19267
|
(_payload) => {
|
|
@@ -19206,7 +19271,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
19206
19271
|
import_lexical9.COMMAND_PRIORITY_CRITICAL
|
|
19207
19272
|
);
|
|
19208
19273
|
}, [editor, updateToolbar]);
|
|
19209
|
-
(0,
|
|
19274
|
+
(0, import_react178.useEffect)(() => {
|
|
19210
19275
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
19211
19276
|
requestAnimationFrame(() => {
|
|
19212
19277
|
editorState.read(() => {
|
|
@@ -19215,14 +19280,14 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
19215
19280
|
});
|
|
19216
19281
|
});
|
|
19217
19282
|
}, [editor, updateToolbar]);
|
|
19218
|
-
return /* @__PURE__ */ (0,
|
|
19219
|
-
/* @__PURE__ */ (0,
|
|
19283
|
+
return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { css: toolbar, "data-testid": "rich-text-toolbar", children: [
|
|
19284
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
|
|
19220
19285
|
Menu,
|
|
19221
19286
|
{
|
|
19222
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
19287
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", type: "button", children: [
|
|
19223
19288
|
visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
|
|
19224
19289
|
" ",
|
|
19225
|
-
/* @__PURE__ */ (0,
|
|
19290
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
19226
19291
|
] }),
|
|
19227
19292
|
placement: "bottom-start",
|
|
19228
19293
|
children: [
|
|
@@ -19232,7 +19297,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
19232
19297
|
type: "paragraph"
|
|
19233
19298
|
},
|
|
19234
19299
|
...visibleTextualElements
|
|
19235
|
-
].map((element) => /* @__PURE__ */ (0,
|
|
19300
|
+
].map((element) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
|
|
19236
19301
|
MenuItem,
|
|
19237
19302
|
{
|
|
19238
19303
|
"data-testid": "menu-item",
|
|
@@ -19243,12 +19308,12 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
19243
19308
|
},
|
|
19244
19309
|
element.type
|
|
19245
19310
|
)),
|
|
19246
|
-
visibleTextualElements.length === 0 ? /* @__PURE__ */ (0,
|
|
19311
|
+
visibleTextualElements.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
|
|
19247
19312
|
]
|
|
19248
19313
|
}
|
|
19249
19314
|
),
|
|
19250
|
-
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0,
|
|
19251
|
-
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0,
|
|
19315
|
+
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-formatting", children: [
|
|
19316
|
+
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
|
|
19252
19317
|
"button",
|
|
19253
19318
|
{
|
|
19254
19319
|
"data-testid": `formatting-button-${format.type}`,
|
|
@@ -19260,15 +19325,15 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
19260
19325
|
richTextToolbarButton,
|
|
19261
19326
|
activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
|
|
19262
19327
|
],
|
|
19263
|
-
children: /* @__PURE__ */ (0,
|
|
19328
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
|
|
19264
19329
|
}
|
|
19265
19330
|
) }, format.type)),
|
|
19266
|
-
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0,
|
|
19331
|
+
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
|
|
19267
19332
|
Menu,
|
|
19268
19333
|
{
|
|
19269
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
19334
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("button", { css: richTextToolbarButton, title: "Alternative text styles", type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
|
|
19270
19335
|
placement: "bottom-start",
|
|
19271
|
-
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0,
|
|
19336
|
+
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
|
|
19272
19337
|
MenuItem,
|
|
19273
19338
|
{
|
|
19274
19339
|
onClick: () => {
|
|
@@ -19281,8 +19346,8 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
19281
19346
|
}
|
|
19282
19347
|
) : null
|
|
19283
19348
|
] }) : null,
|
|
19284
|
-
visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ (0,
|
|
19285
|
-
linkElementVisible ? /* @__PURE__ */ (0,
|
|
19349
|
+
visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-elements", children: [
|
|
19350
|
+
linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
|
|
19286
19351
|
"button",
|
|
19287
19352
|
{
|
|
19288
19353
|
"data-testid": "element-link",
|
|
@@ -19295,11 +19360,11 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
19295
19360
|
}
|
|
19296
19361
|
},
|
|
19297
19362
|
css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
|
|
19298
|
-
children: /* @__PURE__ */ (0,
|
|
19363
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(RichTextToolbarIcon, { icon: "link" })
|
|
19299
19364
|
}
|
|
19300
19365
|
) }) : null,
|
|
19301
|
-
visibleLists.size > 0 ? /* @__PURE__ */ (0,
|
|
19302
|
-
visibleLists.has("unorderedList") ? /* @__PURE__ */ (0,
|
|
19366
|
+
visibleLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(import_jsx_runtime143.Fragment, { children: [
|
|
19367
|
+
visibleLists.has("unorderedList") ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
|
|
19303
19368
|
"button",
|
|
19304
19369
|
{
|
|
19305
19370
|
"data-testid": "element-unordered-list",
|
|
@@ -19315,10 +19380,10 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
19315
19380
|
richTextToolbarButton,
|
|
19316
19381
|
activeElement === "unorderedList" ? richTextToolbarButtonActive : null
|
|
19317
19382
|
],
|
|
19318
|
-
children: /* @__PURE__ */ (0,
|
|
19383
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(RichTextToolbarIcon, { icon: "layout-list" })
|
|
19319
19384
|
}
|
|
19320
19385
|
) }) : null,
|
|
19321
|
-
visibleLists.has("orderedList") ? /* @__PURE__ */ (0,
|
|
19386
|
+
visibleLists.has("orderedList") ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
|
|
19322
19387
|
"button",
|
|
19323
19388
|
{
|
|
19324
19389
|
"data-testid": "element-ordered-list",
|
|
@@ -19334,58 +19399,58 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
19334
19399
|
richTextToolbarButton,
|
|
19335
19400
|
activeElement === "orderedList" ? richTextToolbarButtonActive : null
|
|
19336
19401
|
],
|
|
19337
|
-
children: /* @__PURE__ */ (0,
|
|
19402
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(RichTextToolbarIcon, { icon: "layout-list-numbered" })
|
|
19338
19403
|
}
|
|
19339
19404
|
) }) : null
|
|
19340
19405
|
] }) : null,
|
|
19341
19406
|
customControls ? customControls : null
|
|
19342
19407
|
] }) : null,
|
|
19343
|
-
visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ (0,
|
|
19408
|
+
visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-insert", children: /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
|
|
19344
19409
|
Menu,
|
|
19345
19410
|
{
|
|
19346
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
19411
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("button", { css: richTextToolbarButton, title: "Insert block element", type: "button", children: [
|
|
19347
19412
|
"Insert",
|
|
19348
|
-
/* @__PURE__ */ (0,
|
|
19413
|
+
/* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
19349
19414
|
] }),
|
|
19350
19415
|
placement: "bottom-start",
|
|
19351
19416
|
children: [
|
|
19352
|
-
quoteElementVisible ? /* @__PURE__ */ (0,
|
|
19417
|
+
quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
|
|
19353
19418
|
MenuItem,
|
|
19354
19419
|
{
|
|
19355
19420
|
onClick: () => {
|
|
19356
19421
|
onSelectElement("quote");
|
|
19357
19422
|
},
|
|
19358
|
-
icon: /* @__PURE__ */ (0,
|
|
19423
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Icon, { icon: "quote", iconColor: "currentColor" }),
|
|
19359
19424
|
children: "Quote"
|
|
19360
19425
|
}
|
|
19361
19426
|
) : null,
|
|
19362
|
-
codeElementVisible ? /* @__PURE__ */ (0,
|
|
19427
|
+
codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
|
|
19363
19428
|
MenuItem,
|
|
19364
19429
|
{
|
|
19365
19430
|
onClick: () => {
|
|
19366
19431
|
onSelectElement("code");
|
|
19367
19432
|
},
|
|
19368
|
-
icon: /* @__PURE__ */ (0,
|
|
19433
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Icon, { icon: "code-slash", iconColor: "currentColor" }),
|
|
19369
19434
|
children: "Code"
|
|
19370
19435
|
}
|
|
19371
19436
|
) : null,
|
|
19372
|
-
tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ (0,
|
|
19437
|
+
tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
|
|
19373
19438
|
MenuItem,
|
|
19374
19439
|
{
|
|
19375
19440
|
onClick: () => {
|
|
19376
19441
|
onSelectElement("table");
|
|
19377
19442
|
},
|
|
19378
|
-
icon: /* @__PURE__ */ (0,
|
|
19443
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Icon, { icon: "view-grid", iconColor: "currentColor" }),
|
|
19379
19444
|
children: "Table"
|
|
19380
19445
|
}
|
|
19381
19446
|
) : null,
|
|
19382
|
-
assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */ (0,
|
|
19447
|
+
assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
|
|
19383
19448
|
MenuItem,
|
|
19384
19449
|
{
|
|
19385
19450
|
onClick: () => {
|
|
19386
19451
|
onSelectElement("asset");
|
|
19387
19452
|
},
|
|
19388
|
-
icon: /* @__PURE__ */ (0,
|
|
19453
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Icon, { icon: "image", iconColor: "currentColor" }),
|
|
19389
19454
|
children: "Asset"
|
|
19390
19455
|
}
|
|
19391
19456
|
) : null
|
|
@@ -19397,7 +19462,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
19397
19462
|
var RichTextToolbar_default = RichTextToolbar;
|
|
19398
19463
|
|
|
19399
19464
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
19400
|
-
var
|
|
19465
|
+
var import_jsx_runtime144 = require("@emotion/react/jsx-runtime");
|
|
19401
19466
|
var ParameterRichText = ({
|
|
19402
19467
|
label: label2,
|
|
19403
19468
|
labelLeadingIcon,
|
|
@@ -19411,7 +19476,7 @@ var ParameterRichText = ({
|
|
|
19411
19476
|
children,
|
|
19412
19477
|
...innerProps
|
|
19413
19478
|
}) => {
|
|
19414
|
-
return /* @__PURE__ */ (0,
|
|
19479
|
+
return /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
|
|
19415
19480
|
ParameterShell,
|
|
19416
19481
|
{
|
|
19417
19482
|
"data-testid": "parameter-richtext",
|
|
@@ -19425,13 +19490,13 @@ var ParameterRichText = ({
|
|
|
19425
19490
|
captionTestId,
|
|
19426
19491
|
menuItems,
|
|
19427
19492
|
children: [
|
|
19428
|
-
/* @__PURE__ */ (0,
|
|
19429
|
-
menuItems ? /* @__PURE__ */ (0,
|
|
19493
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsx)(ParameterRichTextInner, { ...innerProps, children }),
|
|
19494
|
+
menuItems ? /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(ParameterMenuButton, { label: `${label2} menu`, children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_jsx_runtime144.Fragment, { children: menuItems }) }) : null
|
|
19430
19495
|
]
|
|
19431
19496
|
}
|
|
19432
19497
|
);
|
|
19433
19498
|
};
|
|
19434
|
-
var editorContainerWrapper =
|
|
19499
|
+
var editorContainerWrapper = import_react179.css`
|
|
19435
19500
|
position: relative;
|
|
19436
19501
|
|
|
19437
19502
|
&::before {
|
|
@@ -19447,12 +19512,12 @@ var editorContainerWrapper = import_react178.css`
|
|
|
19447
19512
|
z-index: 2;
|
|
19448
19513
|
}
|
|
19449
19514
|
`;
|
|
19450
|
-
var editorWrapper =
|
|
19515
|
+
var editorWrapper = import_react179.css`
|
|
19451
19516
|
display: flex;
|
|
19452
19517
|
flex-flow: column;
|
|
19453
19518
|
flex-grow: 1;
|
|
19454
19519
|
`;
|
|
19455
|
-
var editorContainer =
|
|
19520
|
+
var editorContainer = import_react179.css`
|
|
19456
19521
|
${scrollbarStyles}
|
|
19457
19522
|
background: var(--white);
|
|
19458
19523
|
border-radius: var(--rounded-sm);
|
|
@@ -19484,7 +19549,7 @@ var editorContainer = import_react178.css`
|
|
|
19484
19549
|
max-height: unset;
|
|
19485
19550
|
}
|
|
19486
19551
|
`;
|
|
19487
|
-
var editorContainerOverflowWrapper =
|
|
19552
|
+
var editorContainerOverflowWrapper = import_react179.css`
|
|
19488
19553
|
overflow: hidden;
|
|
19489
19554
|
pointer-events: none;
|
|
19490
19555
|
|
|
@@ -19492,7 +19557,7 @@ var editorContainerOverflowWrapper = import_react178.css`
|
|
|
19492
19557
|
pointer-events: auto;
|
|
19493
19558
|
}
|
|
19494
19559
|
`;
|
|
19495
|
-
var editorPlaceholder =
|
|
19560
|
+
var editorPlaceholder = import_react179.css`
|
|
19496
19561
|
color: var(--gray-500);
|
|
19497
19562
|
font-style: italic;
|
|
19498
19563
|
/* 1px is added to make sure caret is clearly visible when field is focused
|
|
@@ -19503,7 +19568,7 @@ var editorPlaceholder = import_react178.css`
|
|
|
19503
19568
|
top: calc(1rem + var(--spacing-sm));
|
|
19504
19569
|
user-select: none;
|
|
19505
19570
|
`;
|
|
19506
|
-
var editorInput =
|
|
19571
|
+
var editorInput = import_react179.css`
|
|
19507
19572
|
min-height: 100%;
|
|
19508
19573
|
flex-grow: 1;
|
|
19509
19574
|
|
|
@@ -19576,8 +19641,8 @@ var ParameterRichTextInner = ({
|
|
|
19576
19641
|
},
|
|
19577
19642
|
editable: !richTextProps.readOnly
|
|
19578
19643
|
};
|
|
19579
|
-
return /* @__PURE__ */ (0,
|
|
19580
|
-
/* @__PURE__ */ (0,
|
|
19644
|
+
return /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(import_jsx_runtime144.Fragment, { children: [
|
|
19645
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsx)("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_LexicalComposer.LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(RichText, { ...richTextProps, children }) }) }),
|
|
19581
19646
|
editorFooter ? editorFooter : null
|
|
19582
19647
|
] });
|
|
19583
19648
|
};
|
|
@@ -19607,12 +19672,12 @@ var RichText = ({
|
|
|
19607
19672
|
placeholder
|
|
19608
19673
|
}) => {
|
|
19609
19674
|
const [editor] = (0, import_LexicalComposerContext9.useLexicalComposerContext)();
|
|
19610
|
-
(0,
|
|
19675
|
+
(0, import_react180.useEffect)(() => {
|
|
19611
19676
|
if (onRichTextInit) {
|
|
19612
19677
|
onRichTextInit(editor);
|
|
19613
19678
|
}
|
|
19614
19679
|
}, [editor, onRichTextInit]);
|
|
19615
|
-
(0,
|
|
19680
|
+
(0, import_react180.useEffect)(() => {
|
|
19616
19681
|
const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState, tags }) => {
|
|
19617
19682
|
requestAnimationFrame(() => {
|
|
19618
19683
|
const previousEditorState = prevEditorState.toJSON();
|
|
@@ -19629,23 +19694,23 @@ var RichText = ({
|
|
|
19629
19694
|
removeUpdateListener();
|
|
19630
19695
|
};
|
|
19631
19696
|
}, [editor, onChange]);
|
|
19632
|
-
(0,
|
|
19697
|
+
(0, import_react180.useEffect)(() => {
|
|
19633
19698
|
editor.setEditable(!readOnly);
|
|
19634
19699
|
}, [editor, readOnly]);
|
|
19635
|
-
const [editorContainerRef, setEditorContainerRef] = (0,
|
|
19700
|
+
const [editorContainerRef, setEditorContainerRef] = (0, import_react180.useState)(null);
|
|
19636
19701
|
const onEditorContainerRef = (_editorContainerRef) => {
|
|
19637
19702
|
if (_editorContainerRef !== null) {
|
|
19638
19703
|
setEditorContainerRef(_editorContainerRef);
|
|
19639
19704
|
}
|
|
19640
19705
|
};
|
|
19641
|
-
const [portalContainerRef, setPortalContainerRef] = (0,
|
|
19706
|
+
const [portalContainerRef, setPortalContainerRef] = (0, import_react180.useState)(null);
|
|
19642
19707
|
const onPortalContainerRef = (_portalContainerRef) => {
|
|
19643
19708
|
if (_portalContainerRef !== null) {
|
|
19644
19709
|
setPortalContainerRef(_portalContainerRef);
|
|
19645
19710
|
}
|
|
19646
19711
|
};
|
|
19647
|
-
return /* @__PURE__ */ (0,
|
|
19648
|
-
readOnly || minimalInteractivity ? null : /* @__PURE__ */ (0,
|
|
19712
|
+
return /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(import_jsx_runtime144.Fragment, { children: [
|
|
19713
|
+
readOnly || minimalInteractivity ? null : /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
|
|
19649
19714
|
RichTextToolbar_default,
|
|
19650
19715
|
{
|
|
19651
19716
|
config,
|
|
@@ -19654,14 +19719,14 @@ var RichText = ({
|
|
|
19654
19719
|
onInsertAsset
|
|
19655
19720
|
}
|
|
19656
19721
|
),
|
|
19657
|
-
/* @__PURE__ */ (0,
|
|
19722
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
|
|
19658
19723
|
"div",
|
|
19659
19724
|
{
|
|
19660
19725
|
css: editorContainerWrapper,
|
|
19661
19726
|
"data-editor-container-wrapper": true,
|
|
19662
19727
|
ref: onPortalContainerRef,
|
|
19663
19728
|
children: [
|
|
19664
|
-
/* @__PURE__ */ (0,
|
|
19729
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
|
|
19665
19730
|
"div",
|
|
19666
19731
|
{
|
|
19667
19732
|
css: editorContainer,
|
|
@@ -19669,33 +19734,33 @@ var RichText = ({
|
|
|
19669
19734
|
ref: onEditorContainerRef,
|
|
19670
19735
|
"data-testid": "value-container",
|
|
19671
19736
|
children: [
|
|
19672
|
-
/* @__PURE__ */ (0,
|
|
19737
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
|
|
19673
19738
|
import_LexicalRichTextPlugin.RichTextPlugin,
|
|
19674
19739
|
{
|
|
19675
|
-
contentEditable: /* @__PURE__ */ (0,
|
|
19676
|
-
placeholder: /* @__PURE__ */ (0,
|
|
19740
|
+
contentEditable: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
|
|
19741
|
+
placeholder: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("div", { css: editorPlaceholder, "data-placeholder": true, children: placeholder != null ? placeholder : readOnly ? "empty" : "start editing..." }),
|
|
19677
19742
|
ErrorBoundary: import_LexicalErrorBoundary.LexicalErrorBoundary
|
|
19678
19743
|
}
|
|
19679
19744
|
),
|
|
19680
|
-
/* @__PURE__ */ (0,
|
|
19681
|
-
/* @__PURE__ */ (0,
|
|
19682
|
-
/* @__PURE__ */ (0,
|
|
19683
|
-
/* @__PURE__ */ (0,
|
|
19745
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_LexicalListPlugin.ListPlugin, {}),
|
|
19746
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsx)(ListIndentPlugin, { maxDepth: 4 }),
|
|
19747
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_LexicalTablePlugin.TablePlugin, { hasCellMerge: false, hasCellBackgroundColor: false }),
|
|
19748
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsx)("div", { css: editorContainerOverflowWrapper, "data-testid": "table-action-menu-plugin", children: editorContainerRef && portalContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
|
|
19684
19749
|
TableActionMenuPlugin,
|
|
19685
19750
|
{
|
|
19686
19751
|
positioningAnchorEl: editorContainerRef,
|
|
19687
19752
|
menuPortalEl: portalContainerRef
|
|
19688
19753
|
}
|
|
19689
19754
|
) : null }),
|
|
19690
|
-
editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0,
|
|
19691
|
-
readOnly ? null : /* @__PURE__ */ (0,
|
|
19692
|
-
/* @__PURE__ */ (0,
|
|
19693
|
-
/* @__PURE__ */ (0,
|
|
19755
|
+
editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(TableCellResizerPlugin, { positioningAnchorEl: editorContainerRef }) : null,
|
|
19756
|
+
readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
|
|
19757
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsx)(DisableStylesPlugin, {}),
|
|
19758
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS })
|
|
19694
19759
|
]
|
|
19695
19760
|
}
|
|
19696
19761
|
),
|
|
19697
|
-
/* @__PURE__ */ (0,
|
|
19698
|
-
editorContainerRef ? /* @__PURE__ */ (0,
|
|
19762
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_jsx_runtime144.Fragment, { children }),
|
|
19763
|
+
editorContainerRef ? /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
|
|
19699
19764
|
LinkNodePlugin,
|
|
19700
19765
|
{
|
|
19701
19766
|
onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
|
|
@@ -19706,8 +19771,8 @@ var RichText = ({
|
|
|
19706
19771
|
positioningAnchorEl: editorContainerRef
|
|
19707
19772
|
}
|
|
19708
19773
|
) : null,
|
|
19709
|
-
/* @__PURE__ */ (0,
|
|
19710
|
-
/* @__PURE__ */ (0,
|
|
19774
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsx)(TableSelectionPlugin_default, {}),
|
|
19775
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsx)(ImprovedAssetSelectionPlugin_default, {})
|
|
19711
19776
|
]
|
|
19712
19777
|
}
|
|
19713
19778
|
)
|
|
@@ -19716,18 +19781,18 @@ var RichText = ({
|
|
|
19716
19781
|
|
|
19717
19782
|
// src/components/ParameterInputs/ParameterSelect.tsx
|
|
19718
19783
|
init_emotion_jsx_shim();
|
|
19719
|
-
var
|
|
19720
|
-
var
|
|
19721
|
-
var ParameterSelect = (0,
|
|
19784
|
+
var import_react181 = require("react");
|
|
19785
|
+
var import_jsx_runtime145 = require("@emotion/react/jsx-runtime");
|
|
19786
|
+
var ParameterSelect = (0, import_react181.forwardRef)(
|
|
19722
19787
|
({ defaultOption, options, ...props }, ref) => {
|
|
19723
19788
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
19724
|
-
return /* @__PURE__ */ (0,
|
|
19789
|
+
return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
|
|
19725
19790
|
}
|
|
19726
19791
|
);
|
|
19727
|
-
var ParameterSelectInner = (0,
|
|
19792
|
+
var ParameterSelectInner = (0, import_react181.forwardRef)(
|
|
19728
19793
|
({ defaultOption, options, ...props }, ref) => {
|
|
19729
19794
|
const { id, label: label2, hiddenLabel } = useParameterShell();
|
|
19730
|
-
return /* @__PURE__ */ (0,
|
|
19795
|
+
return /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(
|
|
19731
19796
|
"select",
|
|
19732
19797
|
{
|
|
19733
19798
|
css: [input3, selectInput],
|
|
@@ -19736,10 +19801,10 @@ var ParameterSelectInner = (0, import_react180.forwardRef)(
|
|
|
19736
19801
|
ref,
|
|
19737
19802
|
...props,
|
|
19738
19803
|
children: [
|
|
19739
|
-
defaultOption ? /* @__PURE__ */ (0,
|
|
19804
|
+
defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime145.jsx)("option", { value: "", children: defaultOption }) : null,
|
|
19740
19805
|
options.map((option) => {
|
|
19741
19806
|
var _a;
|
|
19742
|
-
return /* @__PURE__ */ (0,
|
|
19807
|
+
return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
|
|
19743
19808
|
})
|
|
19744
19809
|
]
|
|
19745
19810
|
}
|
|
@@ -19749,24 +19814,24 @@ var ParameterSelectInner = (0, import_react180.forwardRef)(
|
|
|
19749
19814
|
|
|
19750
19815
|
// src/components/ParameterInputs/ParameterSelectSlider.tsx
|
|
19751
19816
|
init_emotion_jsx_shim();
|
|
19752
|
-
var
|
|
19753
|
-
var
|
|
19754
|
-
var ParameterSelectSlider = (0,
|
|
19817
|
+
var import_react182 = require("react");
|
|
19818
|
+
var import_jsx_runtime146 = require("@emotion/react/jsx-runtime");
|
|
19819
|
+
var ParameterSelectSlider = (0, import_react182.forwardRef)(
|
|
19755
19820
|
(props, ref) => {
|
|
19756
19821
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
19757
|
-
return /* @__PURE__ */ (0,
|
|
19822
|
+
return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(ParameterShell, { "data-testid": "parameter-select-slider", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(ParameterSelectSliderInner, { ref, ...innerProps }) });
|
|
19758
19823
|
}
|
|
19759
19824
|
);
|
|
19760
|
-
var ParameterSelectSliderInner = (0,
|
|
19825
|
+
var ParameterSelectSliderInner = (0, import_react182.forwardRef)(({ options, value, onChange, ...props }, ref) => {
|
|
19761
19826
|
const { id, label: label2, hiddenLabel } = useParameterShell();
|
|
19762
|
-
const numericValue = (0,
|
|
19827
|
+
const numericValue = (0, import_react182.useMemo)(() => {
|
|
19763
19828
|
if (value === void 0 || value === null || value === "") {
|
|
19764
19829
|
return void 0;
|
|
19765
19830
|
}
|
|
19766
19831
|
const index = options.findIndex((option) => option.value === value);
|
|
19767
19832
|
return index >= 0 ? index : void 0;
|
|
19768
19833
|
}, [options, value]);
|
|
19769
|
-
const handleChange = (0,
|
|
19834
|
+
const handleChange = (0, import_react182.useCallback)(
|
|
19770
19835
|
(newValue) => {
|
|
19771
19836
|
var _a;
|
|
19772
19837
|
if (newValue === void 0) {
|
|
@@ -19777,7 +19842,7 @@ var ParameterSelectSliderInner = (0, import_react181.forwardRef)(({ options, val
|
|
|
19777
19842
|
},
|
|
19778
19843
|
[options, onChange]
|
|
19779
19844
|
);
|
|
19780
|
-
return /* @__PURE__ */ (0,
|
|
19845
|
+
return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
|
|
19781
19846
|
Slider,
|
|
19782
19847
|
{
|
|
19783
19848
|
ref,
|
|
@@ -19796,15 +19861,15 @@ ParameterSelectSliderInner.displayName = "ParameterSelectSliderInner";
|
|
|
19796
19861
|
|
|
19797
19862
|
// src/components/ParameterInputs/ParameterTextarea.tsx
|
|
19798
19863
|
init_emotion_jsx_shim();
|
|
19799
|
-
var
|
|
19800
|
-
var
|
|
19801
|
-
var ParameterTextarea = (0,
|
|
19864
|
+
var import_react183 = require("react");
|
|
19865
|
+
var import_jsx_runtime147 = require("@emotion/react/jsx-runtime");
|
|
19866
|
+
var ParameterTextarea = (0, import_react183.forwardRef)((props, ref) => {
|
|
19802
19867
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
19803
|
-
return /* @__PURE__ */ (0,
|
|
19868
|
+
return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
|
|
19804
19869
|
});
|
|
19805
|
-
var ParameterTextareaInner = (0,
|
|
19870
|
+
var ParameterTextareaInner = (0, import_react183.forwardRef)(({ ...props }, ref) => {
|
|
19806
19871
|
const { id, label: label2, hiddenLabel } = useParameterShell();
|
|
19807
|
-
return /* @__PURE__ */ (0,
|
|
19872
|
+
return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
|
|
19808
19873
|
"textarea",
|
|
19809
19874
|
{
|
|
19810
19875
|
css: [input3, textarea2],
|
|
@@ -19818,19 +19883,19 @@ var ParameterTextareaInner = (0, import_react182.forwardRef)(({ ...props }, ref)
|
|
|
19818
19883
|
|
|
19819
19884
|
// src/components/ParameterInputs/ParameterToggle.tsx
|
|
19820
19885
|
init_emotion_jsx_shim();
|
|
19821
|
-
var
|
|
19822
|
-
var
|
|
19823
|
-
var ParameterToggle = (0,
|
|
19886
|
+
var import_react184 = require("react");
|
|
19887
|
+
var import_jsx_runtime148 = require("@emotion/react/jsx-runtime");
|
|
19888
|
+
var ParameterToggle = (0, import_react184.forwardRef)((props, ref) => {
|
|
19824
19889
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
19825
|
-
return /* @__PURE__ */ (0,
|
|
19890
|
+
return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
|
|
19826
19891
|
});
|
|
19827
19892
|
ParameterToggle.displayName = "ParameterToggle";
|
|
19828
|
-
var ParameterToggleInner = (0,
|
|
19893
|
+
var ParameterToggleInner = (0, import_react184.forwardRef)(
|
|
19829
19894
|
({ children, ...props }, ref) => {
|
|
19830
19895
|
const { type, withoutIndeterminateState, ...otherProps } = props;
|
|
19831
19896
|
const { id, label: label2 } = useParameterShell();
|
|
19832
|
-
return /* @__PURE__ */ (0,
|
|
19833
|
-
/* @__PURE__ */ (0,
|
|
19897
|
+
return /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("label", { css: inputToggleLabel2, children: [
|
|
19898
|
+
/* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
|
|
19834
19899
|
"input",
|
|
19835
19900
|
{
|
|
19836
19901
|
css: [
|
|
@@ -19843,7 +19908,7 @@ var ParameterToggleInner = (0, import_react183.forwardRef)(
|
|
|
19843
19908
|
...otherProps
|
|
19844
19909
|
}
|
|
19845
19910
|
),
|
|
19846
|
-
/* @__PURE__ */ (0,
|
|
19911
|
+
/* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { css: inlineLabel2, children: label2 }),
|
|
19847
19912
|
children
|
|
19848
19913
|
] });
|
|
19849
19914
|
}
|
|
@@ -19855,8 +19920,8 @@ init_emotion_jsx_shim();
|
|
|
19855
19920
|
|
|
19856
19921
|
// src/components/ProgressBar/ProgressBar.styles.ts
|
|
19857
19922
|
init_emotion_jsx_shim();
|
|
19858
|
-
var
|
|
19859
|
-
var container4 =
|
|
19923
|
+
var import_react185 = require("@emotion/react");
|
|
19924
|
+
var container4 = import_react185.css`
|
|
19860
19925
|
background: var(--gray-50);
|
|
19861
19926
|
margin-block: var(--spacing-sm);
|
|
19862
19927
|
position: relative;
|
|
@@ -19866,17 +19931,17 @@ var container4 = import_react184.css`
|
|
|
19866
19931
|
border: solid 1px var(--gray-300);
|
|
19867
19932
|
`;
|
|
19868
19933
|
var themeMap = {
|
|
19869
|
-
primary:
|
|
19934
|
+
primary: import_react185.css`
|
|
19870
19935
|
--progress-color: var(--accent-light);
|
|
19871
19936
|
`,
|
|
19872
|
-
secondary:
|
|
19937
|
+
secondary: import_react185.css`
|
|
19873
19938
|
--progress-color: var(--accent-alt-light);
|
|
19874
19939
|
`,
|
|
19875
|
-
destructive:
|
|
19940
|
+
destructive: import_react185.css`
|
|
19876
19941
|
--progress-color: var(--brand-secondary-5);
|
|
19877
19942
|
`
|
|
19878
19943
|
};
|
|
19879
|
-
var slidingBackgroundPosition =
|
|
19944
|
+
var slidingBackgroundPosition = import_react185.keyframes`
|
|
19880
19945
|
from {
|
|
19881
19946
|
background-position: 0 0;
|
|
19882
19947
|
}
|
|
@@ -19884,10 +19949,10 @@ var slidingBackgroundPosition = import_react184.keyframes`
|
|
|
19884
19949
|
background-position: 64px 0;
|
|
19885
19950
|
}
|
|
19886
19951
|
`;
|
|
19887
|
-
var determinate =
|
|
19952
|
+
var determinate = import_react185.css`
|
|
19888
19953
|
background-color: var(--progress-color);
|
|
19889
19954
|
`;
|
|
19890
|
-
var indeterminate =
|
|
19955
|
+
var indeterminate = import_react185.css`
|
|
19891
19956
|
background-image: linear-gradient(
|
|
19892
19957
|
45deg,
|
|
19893
19958
|
var(--progress-color) 25%,
|
|
@@ -19901,7 +19966,7 @@ var indeterminate = import_react184.css`
|
|
|
19901
19966
|
background-size: 64px 64px;
|
|
19902
19967
|
animation: ${slidingBackgroundPosition} 1s linear infinite;
|
|
19903
19968
|
`;
|
|
19904
|
-
var bar =
|
|
19969
|
+
var bar = import_react185.css`
|
|
19905
19970
|
position: absolute;
|
|
19906
19971
|
inset: 0;
|
|
19907
19972
|
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
@@ -19909,7 +19974,7 @@ var bar = import_react184.css`
|
|
|
19909
19974
|
`;
|
|
19910
19975
|
|
|
19911
19976
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
19912
|
-
var
|
|
19977
|
+
var import_jsx_runtime149 = require("@emotion/react/jsx-runtime");
|
|
19913
19978
|
function ProgressBar({
|
|
19914
19979
|
current,
|
|
19915
19980
|
max,
|
|
@@ -19919,7 +19984,7 @@ function ProgressBar({
|
|
|
19919
19984
|
}) {
|
|
19920
19985
|
const valueNow = Math.min(current, max);
|
|
19921
19986
|
const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
|
|
19922
|
-
return /* @__PURE__ */ (0,
|
|
19987
|
+
return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
|
|
19923
19988
|
"div",
|
|
19924
19989
|
{
|
|
19925
19990
|
css: container4,
|
|
@@ -19930,7 +19995,7 @@ function ProgressBar({
|
|
|
19930
19995
|
"aria-valuemax": max,
|
|
19931
19996
|
"aria-valuenow": valueNow,
|
|
19932
19997
|
...props,
|
|
19933
|
-
children: /* @__PURE__ */ (0,
|
|
19998
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
|
|
19934
19999
|
"div",
|
|
19935
20000
|
{
|
|
19936
20001
|
css: [
|
|
@@ -19950,31 +20015,31 @@ function ProgressBar({
|
|
|
19950
20015
|
|
|
19951
20016
|
// src/components/ProgressList/ProgressList.tsx
|
|
19952
20017
|
init_emotion_jsx_shim();
|
|
19953
|
-
var
|
|
20018
|
+
var import_react187 = require("@emotion/react");
|
|
19954
20019
|
var import_CgCheckO3 = require("@react-icons/all-files/cg/CgCheckO");
|
|
19955
20020
|
var import_CgRadioCheck2 = require("@react-icons/all-files/cg/CgRadioCheck");
|
|
19956
20021
|
var import_CgRecord2 = require("@react-icons/all-files/cg/CgRecord");
|
|
19957
|
-
var
|
|
20022
|
+
var import_react188 = require("react");
|
|
19958
20023
|
|
|
19959
20024
|
// src/components/ProgressList/styles/ProgressList.styles.ts
|
|
19960
20025
|
init_emotion_jsx_shim();
|
|
19961
|
-
var
|
|
19962
|
-
var progressListStyles =
|
|
20026
|
+
var import_react186 = require("@emotion/react");
|
|
20027
|
+
var progressListStyles = import_react186.css`
|
|
19963
20028
|
display: flex;
|
|
19964
20029
|
flex-direction: column;
|
|
19965
20030
|
gap: var(--spacing-sm);
|
|
19966
20031
|
list-style-type: none;
|
|
19967
20032
|
`;
|
|
19968
|
-
var progressListItemStyles =
|
|
20033
|
+
var progressListItemStyles = import_react186.css`
|
|
19969
20034
|
display: flex;
|
|
19970
20035
|
gap: var(--spacing-base);
|
|
19971
20036
|
align-items: center;
|
|
19972
20037
|
`;
|
|
19973
20038
|
|
|
19974
20039
|
// src/components/ProgressList/ProgressList.tsx
|
|
19975
|
-
var
|
|
20040
|
+
var import_jsx_runtime150 = require("@emotion/react/jsx-runtime");
|
|
19976
20041
|
var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
19977
|
-
const itemsWithStatus = (0,
|
|
20042
|
+
const itemsWithStatus = (0, import_react188.useMemo)(() => {
|
|
19978
20043
|
const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
|
|
19979
20044
|
return items.map((item, index) => {
|
|
19980
20045
|
let status = "queued";
|
|
@@ -19986,8 +20051,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
|
19986
20051
|
return { ...item, status };
|
|
19987
20052
|
});
|
|
19988
20053
|
}, [items, inProgressId]);
|
|
19989
|
-
return /* @__PURE__ */ (0,
|
|
19990
|
-
return /* @__PURE__ */ (0,
|
|
20054
|
+
return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label: label2, status, error, errorLevel }) => {
|
|
20055
|
+
return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
|
|
19991
20056
|
ProgressListItem,
|
|
19992
20057
|
{
|
|
19993
20058
|
status,
|
|
@@ -20007,7 +20072,7 @@ var ProgressListItem = ({
|
|
|
20007
20072
|
errorLevel = "danger",
|
|
20008
20073
|
autoEllipsis = false
|
|
20009
20074
|
}) => {
|
|
20010
|
-
const icon = (0,
|
|
20075
|
+
const icon = (0, import_react188.useMemo)(() => {
|
|
20011
20076
|
if (error) {
|
|
20012
20077
|
return warningIcon;
|
|
20013
20078
|
}
|
|
@@ -20018,14 +20083,14 @@ var ProgressListItem = ({
|
|
|
20018
20083
|
};
|
|
20019
20084
|
return iconPerStatus[status];
|
|
20020
20085
|
}, [status, error]);
|
|
20021
|
-
const statusStyles = (0,
|
|
20086
|
+
const statusStyles = (0, import_react188.useMemo)(() => {
|
|
20022
20087
|
if (error) {
|
|
20023
|
-
return errorLevel === "caution" ?
|
|
20088
|
+
return errorLevel === "caution" ? import_react187.css`
|
|
20024
20089
|
color: rgb(161, 98, 7);
|
|
20025
20090
|
& svg {
|
|
20026
20091
|
color: rgb(250, 204, 21);
|
|
20027
20092
|
}
|
|
20028
|
-
` :
|
|
20093
|
+
` : import_react187.css`
|
|
20029
20094
|
color: rgb(185, 28, 28);
|
|
20030
20095
|
& svg {
|
|
20031
20096
|
color: var(--brand-primary-2);
|
|
@@ -20033,39 +20098,39 @@ var ProgressListItem = ({
|
|
|
20033
20098
|
`;
|
|
20034
20099
|
}
|
|
20035
20100
|
const colorPerStatus = {
|
|
20036
|
-
completed:
|
|
20101
|
+
completed: import_react187.css`
|
|
20037
20102
|
opacity: 0.75;
|
|
20038
20103
|
`,
|
|
20039
|
-
inProgress:
|
|
20104
|
+
inProgress: import_react187.css`
|
|
20040
20105
|
-webkit-text-stroke-width: thin;
|
|
20041
20106
|
`,
|
|
20042
|
-
queued:
|
|
20107
|
+
queued: import_react187.css`
|
|
20043
20108
|
opacity: 0.5;
|
|
20044
20109
|
`
|
|
20045
20110
|
};
|
|
20046
20111
|
return colorPerStatus[status];
|
|
20047
20112
|
}, [status, error, errorLevel]);
|
|
20048
|
-
return /* @__PURE__ */ (0,
|
|
20049
|
-
/* @__PURE__ */ (0,
|
|
20050
|
-
/* @__PURE__ */ (0,
|
|
20113
|
+
return /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
|
|
20114
|
+
/* @__PURE__ */ (0, import_jsx_runtime150.jsx)(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
|
|
20115
|
+
/* @__PURE__ */ (0, import_jsx_runtime150.jsxs)("div", { children: [
|
|
20051
20116
|
children,
|
|
20052
|
-
/* @__PURE__ */ (0,
|
|
20117
|
+
/* @__PURE__ */ (0, import_jsx_runtime150.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
|
|
20053
20118
|
] })
|
|
20054
20119
|
] });
|
|
20055
20120
|
};
|
|
20056
20121
|
|
|
20057
20122
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
20058
20123
|
init_emotion_jsx_shim();
|
|
20059
|
-
var
|
|
20060
|
-
var
|
|
20124
|
+
var import_react190 = require("@emotion/react");
|
|
20125
|
+
var import_react191 = require("react");
|
|
20061
20126
|
|
|
20062
20127
|
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
20063
20128
|
init_emotion_jsx_shim();
|
|
20064
|
-
var
|
|
20065
|
-
var segmentedControlRootStyles =
|
|
20129
|
+
var import_react189 = require("@emotion/react");
|
|
20130
|
+
var segmentedControlRootStyles = import_react189.css`
|
|
20066
20131
|
position: relative;
|
|
20067
20132
|
`;
|
|
20068
|
-
var segmentedControlScrollIndicatorsStyles =
|
|
20133
|
+
var segmentedControlScrollIndicatorsStyles = import_react189.css`
|
|
20069
20134
|
position: absolute;
|
|
20070
20135
|
inset: 0;
|
|
20071
20136
|
z-index: 1;
|
|
@@ -20093,17 +20158,17 @@ var segmentedControlScrollIndicatorsStyles = import_react188.css`
|
|
|
20093
20158
|
background: linear-gradient(to left, var(--background-color) 10%, transparent);
|
|
20094
20159
|
}
|
|
20095
20160
|
`;
|
|
20096
|
-
var segmentedControlScrollIndicatorStartVisibleStyles =
|
|
20161
|
+
var segmentedControlScrollIndicatorStartVisibleStyles = import_react189.css`
|
|
20097
20162
|
&::before {
|
|
20098
20163
|
opacity: 1;
|
|
20099
20164
|
}
|
|
20100
20165
|
`;
|
|
20101
|
-
var segmentedControlScrollIndicatorEndVisibleStyles =
|
|
20166
|
+
var segmentedControlScrollIndicatorEndVisibleStyles = import_react189.css`
|
|
20102
20167
|
&::after {
|
|
20103
20168
|
opacity: 1;
|
|
20104
20169
|
}
|
|
20105
20170
|
`;
|
|
20106
|
-
var segmentedControlWrapperStyles =
|
|
20171
|
+
var segmentedControlWrapperStyles = import_react189.css`
|
|
20107
20172
|
overflow-y: auto;
|
|
20108
20173
|
scroll-behavior: smooth;
|
|
20109
20174
|
scrollbar-width: none;
|
|
@@ -20112,7 +20177,7 @@ var segmentedControlWrapperStyles = import_react188.css`
|
|
|
20112
20177
|
height: 0px;
|
|
20113
20178
|
}
|
|
20114
20179
|
`;
|
|
20115
|
-
var segmentedControlStyles =
|
|
20180
|
+
var segmentedControlStyles = import_react189.css`
|
|
20116
20181
|
--segmented-control-rounded-value: var(--rounded-base);
|
|
20117
20182
|
--segmented-control-border-width: 1px;
|
|
20118
20183
|
--segmented-control-selected-color: var(--accent-dark);
|
|
@@ -20132,14 +20197,14 @@ var segmentedControlStyles = import_react188.css`
|
|
|
20132
20197
|
border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
|
|
20133
20198
|
font-size: var(--fs-xs);
|
|
20134
20199
|
`;
|
|
20135
|
-
var segmentedControlVerticalStyles =
|
|
20200
|
+
var segmentedControlVerticalStyles = import_react189.css`
|
|
20136
20201
|
flex-direction: column;
|
|
20137
20202
|
--segmented-control-first-border-radius: var(--segmented-control-rounded-value)
|
|
20138
20203
|
var(--segmented-control-rounded-value) 0 0;
|
|
20139
20204
|
--segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
|
|
20140
20205
|
var(--segmented-control-rounded-value);
|
|
20141
20206
|
`;
|
|
20142
|
-
var segmentedControlItemStyles =
|
|
20207
|
+
var segmentedControlItemStyles = import_react189.css`
|
|
20143
20208
|
position: relative;
|
|
20144
20209
|
|
|
20145
20210
|
&:first-of-type label {
|
|
@@ -20161,14 +20226,14 @@ var segmentedControlItemStyles = import_react188.css`
|
|
|
20161
20226
|
|
|
20162
20227
|
/* Hide separator before next item when next item is hovered or selected */
|
|
20163
20228
|
&:has(+ *:hover) label,
|
|
20164
|
-
&:has(+
|
|
20229
|
+
&:has(+ * :checked) label {
|
|
20165
20230
|
box-shadow: var(--segmented-control-border-width) 0 0 0 transparent;
|
|
20166
20231
|
}
|
|
20167
20232
|
`;
|
|
20168
|
-
var segmentedControlInputStyles =
|
|
20233
|
+
var segmentedControlInputStyles = import_react189.css`
|
|
20169
20234
|
${accessibleHidden}
|
|
20170
20235
|
`;
|
|
20171
|
-
var segmentedControlLabelStyles =
|
|
20236
|
+
var segmentedControlLabelStyles = import_react189.css`
|
|
20172
20237
|
position: relative;
|
|
20173
20238
|
display: flex;
|
|
20174
20239
|
align-items: center;
|
|
@@ -20203,25 +20268,25 @@ var segmentedControlLabelStyles = import_react188.css`
|
|
|
20203
20268
|
background-color: var(--gray-400);
|
|
20204
20269
|
}
|
|
20205
20270
|
`;
|
|
20206
|
-
var segmentedControlLabelIconOnlyStyles =
|
|
20271
|
+
var segmentedControlLabelIconOnlyStyles = import_react189.css`
|
|
20207
20272
|
padding-inline: 0.5em;
|
|
20208
20273
|
`;
|
|
20209
|
-
var segmentedControlLabelCheckStyles =
|
|
20274
|
+
var segmentedControlLabelCheckStyles = import_react189.css`
|
|
20210
20275
|
opacity: 0.5;
|
|
20211
20276
|
`;
|
|
20212
|
-
var segmentedControlLabelContentStyles =
|
|
20277
|
+
var segmentedControlLabelContentStyles = import_react189.css`
|
|
20213
20278
|
display: flex;
|
|
20214
20279
|
align-items: center;
|
|
20215
20280
|
justify-content: center;
|
|
20216
20281
|
gap: var(--spacing-sm);
|
|
20217
20282
|
height: 100%;
|
|
20218
20283
|
`;
|
|
20219
|
-
var segmentedControlLabelTextStyles =
|
|
20284
|
+
var segmentedControlLabelTextStyles = import_react189.css`
|
|
20220
20285
|
white-space: nowrap;
|
|
20221
20286
|
`;
|
|
20222
20287
|
|
|
20223
20288
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
20224
|
-
var
|
|
20289
|
+
var import_jsx_runtime151 = require("@emotion/react/jsx-runtime");
|
|
20225
20290
|
var SegmentedControl = ({
|
|
20226
20291
|
name,
|
|
20227
20292
|
options,
|
|
@@ -20237,10 +20302,10 @@ var SegmentedControl = ({
|
|
|
20237
20302
|
// deprecated, destructured to prevent spreading to DOM
|
|
20238
20303
|
...props
|
|
20239
20304
|
}) => {
|
|
20240
|
-
const wrapperRef = (0,
|
|
20241
|
-
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0,
|
|
20242
|
-
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0,
|
|
20243
|
-
const onOptionChange = (0,
|
|
20305
|
+
const wrapperRef = (0, import_react191.useRef)(null);
|
|
20306
|
+
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react191.useState)(false);
|
|
20307
|
+
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react191.useState)(false);
|
|
20308
|
+
const onOptionChange = (0, import_react191.useCallback)(
|
|
20244
20309
|
(event) => {
|
|
20245
20310
|
if (event.target.checked) {
|
|
20246
20311
|
onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
|
|
@@ -20248,19 +20313,19 @@ var SegmentedControl = ({
|
|
|
20248
20313
|
},
|
|
20249
20314
|
[options, onChange]
|
|
20250
20315
|
);
|
|
20251
|
-
const sizeStyles = (0,
|
|
20316
|
+
const sizeStyles = (0, import_react191.useMemo)(() => {
|
|
20252
20317
|
const map = {
|
|
20253
|
-
sm: (0,
|
|
20254
|
-
md: (0,
|
|
20255
|
-
lg: (0,
|
|
20256
|
-
xl: (0,
|
|
20318
|
+
sm: (0, import_react190.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
|
|
20319
|
+
md: (0, import_react190.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
|
|
20320
|
+
lg: (0, import_react190.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
|
|
20321
|
+
xl: (0, import_react190.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
|
|
20257
20322
|
};
|
|
20258
20323
|
return map[size];
|
|
20259
20324
|
}, [size]);
|
|
20260
|
-
const isIconOnly = (0,
|
|
20325
|
+
const isIconOnly = (0, import_react191.useMemo)(() => {
|
|
20261
20326
|
return options.every((option) => option && option.icon && !option.label);
|
|
20262
20327
|
}, [options]);
|
|
20263
|
-
(0,
|
|
20328
|
+
(0, import_react191.useEffect)(() => {
|
|
20264
20329
|
const wrapperElement = wrapperRef.current;
|
|
20265
20330
|
const onScroll = () => {
|
|
20266
20331
|
if (!wrapperElement) {
|
|
@@ -20281,8 +20346,8 @@ var SegmentedControl = ({
|
|
|
20281
20346
|
wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
|
|
20282
20347
|
};
|
|
20283
20348
|
}, []);
|
|
20284
|
-
return /* @__PURE__ */ (0,
|
|
20285
|
-
/* @__PURE__ */ (0,
|
|
20349
|
+
return /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
|
|
20350
|
+
/* @__PURE__ */ (0, import_jsx_runtime151.jsx)("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
|
|
20286
20351
|
"div",
|
|
20287
20352
|
{
|
|
20288
20353
|
css: [
|
|
@@ -20299,12 +20364,12 @@ var SegmentedControl = ({
|
|
|
20299
20364
|
const text = option.label ? option.label : option.icon ? null : String(option.value);
|
|
20300
20365
|
const isDisabled = disabled2 || option.disabled;
|
|
20301
20366
|
const isChecked = option.value === value;
|
|
20302
|
-
return /* @__PURE__ */ (0,
|
|
20367
|
+
return /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
|
|
20303
20368
|
"div",
|
|
20304
20369
|
{
|
|
20305
20370
|
css: segmentedControlItemStyles,
|
|
20306
20371
|
"data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
|
|
20307
|
-
children: /* @__PURE__ */ (0,
|
|
20372
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)(
|
|
20308
20373
|
"label",
|
|
20309
20374
|
{
|
|
20310
20375
|
css: [
|
|
@@ -20313,7 +20378,7 @@ var SegmentedControl = ({
|
|
|
20313
20378
|
isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
|
|
20314
20379
|
],
|
|
20315
20380
|
children: [
|
|
20316
|
-
/* @__PURE__ */ (0,
|
|
20381
|
+
/* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
|
|
20317
20382
|
"input",
|
|
20318
20383
|
{
|
|
20319
20384
|
css: segmentedControlInputStyles,
|
|
@@ -20325,9 +20390,9 @@ var SegmentedControl = ({
|
|
|
20325
20390
|
disabled: isDisabled
|
|
20326
20391
|
}
|
|
20327
20392
|
),
|
|
20328
|
-
/* @__PURE__ */ (0,
|
|
20329
|
-
!option.icon ? null : /* @__PURE__ */ (0,
|
|
20330
|
-
!text || hideOptionText ? null : /* @__PURE__ */ (0,
|
|
20393
|
+
/* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
|
|
20394
|
+
!option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(Icon, { icon: option.icon, size: iconSize2, iconColor: "currentColor" }),
|
|
20395
|
+
!text || hideOptionText ? null : /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
|
|
20331
20396
|
] })
|
|
20332
20397
|
]
|
|
20333
20398
|
}
|
|
@@ -20337,7 +20402,7 @@ var SegmentedControl = ({
|
|
|
20337
20402
|
})
|
|
20338
20403
|
}
|
|
20339
20404
|
) }),
|
|
20340
|
-
/* @__PURE__ */ (0,
|
|
20405
|
+
/* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
|
|
20341
20406
|
"div",
|
|
20342
20407
|
{
|
|
20343
20408
|
css: [
|
|
@@ -20355,18 +20420,18 @@ init_emotion_jsx_shim();
|
|
|
20355
20420
|
|
|
20356
20421
|
// src/components/Skeleton/Skeleton.styles.ts
|
|
20357
20422
|
init_emotion_jsx_shim();
|
|
20358
|
-
var
|
|
20359
|
-
var lightFadingOut =
|
|
20423
|
+
var import_react192 = require("@emotion/react");
|
|
20424
|
+
var lightFadingOut = import_react192.keyframes`
|
|
20360
20425
|
from { opacity: 0.1; }
|
|
20361
20426
|
to { opacity: 0.025; }
|
|
20362
20427
|
`;
|
|
20363
|
-
var skeletonStyles =
|
|
20428
|
+
var skeletonStyles = import_react192.css`
|
|
20364
20429
|
animation: ${lightFadingOut} 1s ease-out infinite alternate;
|
|
20365
20430
|
background-color: var(--gray-500);
|
|
20366
20431
|
`;
|
|
20367
20432
|
|
|
20368
20433
|
// src/components/Skeleton/Skeleton.tsx
|
|
20369
|
-
var
|
|
20434
|
+
var import_jsx_runtime152 = require("@emotion/react/jsx-runtime");
|
|
20370
20435
|
var Skeleton = ({
|
|
20371
20436
|
width = "100%",
|
|
20372
20437
|
height = "1.25rem",
|
|
@@ -20374,7 +20439,7 @@ var Skeleton = ({
|
|
|
20374
20439
|
circle = false,
|
|
20375
20440
|
children,
|
|
20376
20441
|
...otherProps
|
|
20377
|
-
}) => /* @__PURE__ */ (0,
|
|
20442
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
|
|
20378
20443
|
"div",
|
|
20379
20444
|
{
|
|
20380
20445
|
css: [
|
|
@@ -20398,12 +20463,12 @@ init_emotion_jsx_shim();
|
|
|
20398
20463
|
|
|
20399
20464
|
// src/components/Spinner/Spinner.tsx
|
|
20400
20465
|
init_emotion_jsx_shim();
|
|
20401
|
-
var
|
|
20466
|
+
var import_react194 = require("react");
|
|
20402
20467
|
|
|
20403
20468
|
// src/components/Spinner/Spinner.styles.ts
|
|
20404
20469
|
init_emotion_jsx_shim();
|
|
20405
|
-
var
|
|
20406
|
-
var SpinnerStyles =
|
|
20470
|
+
var import_react193 = require("@emotion/react");
|
|
20471
|
+
var SpinnerStyles = import_react193.css`
|
|
20407
20472
|
--color: #00b4ff;
|
|
20408
20473
|
--speed: 5s;
|
|
20409
20474
|
--red: rgb(218, 63, 50);
|
|
@@ -20833,18 +20898,18 @@ var SpinnerStyles = import_react192.css`
|
|
|
20833
20898
|
`;
|
|
20834
20899
|
|
|
20835
20900
|
// src/components/Spinner/Spinner.tsx
|
|
20836
|
-
var
|
|
20901
|
+
var import_jsx_runtime153 = require("@emotion/react/jsx-runtime");
|
|
20837
20902
|
var Spinner = ({
|
|
20838
20903
|
width,
|
|
20839
20904
|
label: label2,
|
|
20840
20905
|
isPaused
|
|
20841
20906
|
}) => {
|
|
20842
|
-
const ref = (0,
|
|
20843
|
-
(0,
|
|
20907
|
+
const ref = (0, import_react194.useRef)(null);
|
|
20908
|
+
(0, import_react194.useEffect)(() => {
|
|
20844
20909
|
var _a, _b, _c;
|
|
20845
20910
|
(_c = ref.current) == null ? void 0 : _c.style.setProperty("--pyramid-size", ((_b = (_a = ref.current) == null ? void 0 : _a.clientWidth) != null ? _b : 200) / 6 + "px");
|
|
20846
20911
|
}, [width]);
|
|
20847
|
-
return /* @__PURE__ */ (0,
|
|
20912
|
+
return /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)(
|
|
20848
20913
|
"div",
|
|
20849
20914
|
{
|
|
20850
20915
|
ref,
|
|
@@ -20856,51 +20921,51 @@ var Spinner = ({
|
|
|
20856
20921
|
css: SpinnerStyles,
|
|
20857
20922
|
className: `container${isPaused ? " paused" : ""}`,
|
|
20858
20923
|
children: [
|
|
20859
|
-
/* @__PURE__ */ (0,
|
|
20860
|
-
/* @__PURE__ */ (0,
|
|
20861
|
-
/* @__PURE__ */ (0,
|
|
20862
|
-
/* @__PURE__ */ (0,
|
|
20863
|
-
/* @__PURE__ */ (0,
|
|
20864
|
-
/* @__PURE__ */ (0,
|
|
20865
|
-
/* @__PURE__ */ (0,
|
|
20866
|
-
/* @__PURE__ */ (0,
|
|
20867
|
-
/* @__PURE__ */ (0,
|
|
20868
|
-
/* @__PURE__ */ (0,
|
|
20924
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "pyramid-container", children: /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "pyramid top", children: [
|
|
20925
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "side one" }),
|
|
20926
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "side two" }),
|
|
20927
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "side three" }),
|
|
20928
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "side four" }),
|
|
20929
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "bottom-pyramid", children: [
|
|
20930
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "side five" }),
|
|
20931
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "side six" }),
|
|
20932
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "side seven" }),
|
|
20933
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "side eight" })
|
|
20869
20934
|
] })
|
|
20870
20935
|
] }) }),
|
|
20871
|
-
/* @__PURE__ */ (0,
|
|
20872
|
-
/* @__PURE__ */ (0,
|
|
20873
|
-
/* @__PURE__ */ (0,
|
|
20874
|
-
/* @__PURE__ */ (0,
|
|
20875
|
-
/* @__PURE__ */ (0,
|
|
20876
|
-
/* @__PURE__ */ (0,
|
|
20877
|
-
/* @__PURE__ */ (0,
|
|
20936
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "turning-circle" }),
|
|
20937
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "pulsating-star delay-top-right", children: [
|
|
20938
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "star-inner star-center" }),
|
|
20939
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "star-inner star-top" }),
|
|
20940
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "star-inner star-bottom" }),
|
|
20941
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "star-inner star-left" }),
|
|
20942
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "star-inner star-right" })
|
|
20878
20943
|
] }),
|
|
20879
|
-
/* @__PURE__ */ (0,
|
|
20880
|
-
/* @__PURE__ */ (0,
|
|
20881
|
-
/* @__PURE__ */ (0,
|
|
20882
|
-
/* @__PURE__ */ (0,
|
|
20883
|
-
/* @__PURE__ */ (0,
|
|
20884
|
-
/* @__PURE__ */ (0,
|
|
20944
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "pulsating-star delay-top-left-2", children: [
|
|
20945
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "star-inner star-center" }),
|
|
20946
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "star-inner star-top" }),
|
|
20947
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "star-inner star-bottom" }),
|
|
20948
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "star-inner star-left" }),
|
|
20949
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "star-inner star-right" })
|
|
20885
20950
|
] }),
|
|
20886
|
-
/* @__PURE__ */ (0,
|
|
20887
|
-
/* @__PURE__ */ (0,
|
|
20888
|
-
/* @__PURE__ */ (0,
|
|
20889
|
-
/* @__PURE__ */ (0,
|
|
20890
|
-
/* @__PURE__ */ (0,
|
|
20951
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "pulsating-star delay-top-left", children: [
|
|
20952
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "star-inner star-top" }),
|
|
20953
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "star-inner star-bottom" }),
|
|
20954
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "star-inner star-left" }),
|
|
20955
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "star-inner star-right" })
|
|
20891
20956
|
] }),
|
|
20892
|
-
/* @__PURE__ */ (0,
|
|
20893
|
-
/* @__PURE__ */ (0,
|
|
20894
|
-
/* @__PURE__ */ (0,
|
|
20895
|
-
/* @__PURE__ */ (0,
|
|
20896
|
-
/* @__PURE__ */ (0,
|
|
20957
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "pulsating-star delay-bottom-right", children: [
|
|
20958
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "star-inner star-top" }),
|
|
20959
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "star-inner star-bottom" }),
|
|
20960
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "star-inner star-left" }),
|
|
20961
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "star-inner star-right" })
|
|
20897
20962
|
] }),
|
|
20898
|
-
/* @__PURE__ */ (0,
|
|
20899
|
-
/* @__PURE__ */ (0,
|
|
20900
|
-
/* @__PURE__ */ (0,
|
|
20901
|
-
/* @__PURE__ */ (0,
|
|
20902
|
-
/* @__PURE__ */ (0,
|
|
20903
|
-
/* @__PURE__ */ (0,
|
|
20963
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "pulsating-star delay-bottom-left", children: [
|
|
20964
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "star-inner star-center" }),
|
|
20965
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "star-inner star-top" }),
|
|
20966
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "star-inner star-bottom" }),
|
|
20967
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "star-inner star-left" }),
|
|
20968
|
+
/* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "star-inner star-right" })
|
|
20904
20969
|
] })
|
|
20905
20970
|
]
|
|
20906
20971
|
}
|
|
@@ -20912,11 +20977,11 @@ init_emotion_jsx_shim();
|
|
|
20912
20977
|
|
|
20913
20978
|
// src/components/StackedModal/hooks/StackedModalProvider.tsx
|
|
20914
20979
|
init_emotion_jsx_shim();
|
|
20915
|
-
var
|
|
20916
|
-
var
|
|
20917
|
-
var StackedModalContext = (0,
|
|
20980
|
+
var import_react195 = require("react");
|
|
20981
|
+
var import_jsx_runtime154 = require("@emotion/react/jsx-runtime");
|
|
20982
|
+
var StackedModalContext = (0, import_react195.createContext)(null);
|
|
20918
20983
|
function useStackedModal() {
|
|
20919
|
-
const context = (0,
|
|
20984
|
+
const context = (0, import_react195.useContext)(StackedModalContext);
|
|
20920
20985
|
if (!context) {
|
|
20921
20986
|
throw new Error("useStackedModal must be used within a <StackedModal> component.");
|
|
20922
20987
|
}
|
|
@@ -20932,10 +20997,10 @@ function useStepTransition(index) {
|
|
|
20932
20997
|
};
|
|
20933
20998
|
}
|
|
20934
20999
|
function StackedModalProvider({ children, totalSteps, initialStep }) {
|
|
20935
|
-
const [currentStep, setCurrentStep] = (0,
|
|
20936
|
-
const [direction, setDirection] = (0,
|
|
20937
|
-
const previousStepRef = (0,
|
|
20938
|
-
const nextStep = (0,
|
|
21000
|
+
const [currentStep, setCurrentStep] = (0, import_react195.useState)(initialStep);
|
|
21001
|
+
const [direction, setDirection] = (0, import_react195.useState)("forward");
|
|
21002
|
+
const previousStepRef = (0, import_react195.useRef)(initialStep);
|
|
21003
|
+
const nextStep = (0, import_react195.useCallback)(() => {
|
|
20939
21004
|
setCurrentStep((prev) => {
|
|
20940
21005
|
if (prev >= totalSteps - 1) {
|
|
20941
21006
|
return prev;
|
|
@@ -20945,7 +21010,7 @@ function StackedModalProvider({ children, totalSteps, initialStep }) {
|
|
|
20945
21010
|
return prev + 1;
|
|
20946
21011
|
});
|
|
20947
21012
|
}, [totalSteps]);
|
|
20948
|
-
const goBack = (0,
|
|
21013
|
+
const goBack = (0, import_react195.useCallback)(() => {
|
|
20949
21014
|
setCurrentStep((prev) => {
|
|
20950
21015
|
if (prev <= 0) {
|
|
20951
21016
|
return prev;
|
|
@@ -20955,7 +21020,7 @@ function StackedModalProvider({ children, totalSteps, initialStep }) {
|
|
|
20955
21020
|
return prev - 1;
|
|
20956
21021
|
});
|
|
20957
21022
|
}, []);
|
|
20958
|
-
const goToStep = (0,
|
|
21023
|
+
const goToStep = (0, import_react195.useCallback)(
|
|
20959
21024
|
(index) => {
|
|
20960
21025
|
setCurrentStep((prev) => {
|
|
20961
21026
|
if (index < 0 || index >= totalSteps || index === prev) {
|
|
@@ -20968,7 +21033,7 @@ function StackedModalProvider({ children, totalSteps, initialStep }) {
|
|
|
20968
21033
|
},
|
|
20969
21034
|
[totalSteps]
|
|
20970
21035
|
);
|
|
20971
|
-
const value = (0,
|
|
21036
|
+
const value = (0, import_react195.useMemo)(
|
|
20972
21037
|
() => ({
|
|
20973
21038
|
currentStep,
|
|
20974
21039
|
totalSteps,
|
|
@@ -20980,12 +21045,12 @@ function StackedModalProvider({ children, totalSteps, initialStep }) {
|
|
|
20980
21045
|
}),
|
|
20981
21046
|
[currentStep, totalSteps, direction, nextStep, goBack, goToStep]
|
|
20982
21047
|
);
|
|
20983
|
-
return /* @__PURE__ */ (0,
|
|
21048
|
+
return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(StackedModalContext.Provider, { value, children });
|
|
20984
21049
|
}
|
|
20985
21050
|
|
|
20986
21051
|
// src/components/StackedModal/StackedModal.tsx
|
|
20987
21052
|
init_emotion_jsx_shim();
|
|
20988
|
-
var
|
|
21053
|
+
var import_react197 = __toESM(require("react"));
|
|
20989
21054
|
|
|
20990
21055
|
// src/components/StackedModal/AnimatedStepHeader.tsx
|
|
20991
21056
|
init_emotion_jsx_shim();
|
|
@@ -20995,13 +21060,13 @@ init_emotion_jsx_shim();
|
|
|
20995
21060
|
|
|
20996
21061
|
// src/components/StackedModal/styles/StackedModal.styles.ts
|
|
20997
21062
|
init_emotion_jsx_shim();
|
|
20998
|
-
var
|
|
20999
|
-
var stackedModalRootStyles =
|
|
21063
|
+
var import_react196 = require("@emotion/react");
|
|
21064
|
+
var stackedModalRootStyles = import_react196.css`
|
|
21000
21065
|
dialog > div {
|
|
21001
21066
|
background: var(--white);
|
|
21002
21067
|
}
|
|
21003
21068
|
`;
|
|
21004
|
-
var slideInFromRight =
|
|
21069
|
+
var slideInFromRight = import_react196.keyframes`
|
|
21005
21070
|
from {
|
|
21006
21071
|
transform: translateX(100%);
|
|
21007
21072
|
opacity: 0;
|
|
@@ -21011,7 +21076,7 @@ var slideInFromRight = import_react195.keyframes`
|
|
|
21011
21076
|
opacity: 1;
|
|
21012
21077
|
}
|
|
21013
21078
|
`;
|
|
21014
|
-
var slideOutToLeft =
|
|
21079
|
+
var slideOutToLeft = import_react196.keyframes`
|
|
21015
21080
|
from {
|
|
21016
21081
|
transform: translateX(0);
|
|
21017
21082
|
opacity: 1;
|
|
@@ -21021,7 +21086,7 @@ var slideOutToLeft = import_react195.keyframes`
|
|
|
21021
21086
|
opacity: 0;
|
|
21022
21087
|
}
|
|
21023
21088
|
`;
|
|
21024
|
-
var slideInFromLeft =
|
|
21089
|
+
var slideInFromLeft = import_react196.keyframes`
|
|
21025
21090
|
from {
|
|
21026
21091
|
transform: translateX(-100%);
|
|
21027
21092
|
opacity: 0;
|
|
@@ -21031,7 +21096,7 @@ var slideInFromLeft = import_react195.keyframes`
|
|
|
21031
21096
|
opacity: 1;
|
|
21032
21097
|
}
|
|
21033
21098
|
`;
|
|
21034
|
-
var slideOutToRight =
|
|
21099
|
+
var slideOutToRight = import_react196.keyframes`
|
|
21035
21100
|
from {
|
|
21036
21101
|
transform: translateX(0);
|
|
21037
21102
|
opacity: 1;
|
|
@@ -21041,64 +21106,64 @@ var slideOutToRight = import_react195.keyframes`
|
|
|
21041
21106
|
opacity: 0;
|
|
21042
21107
|
}
|
|
21043
21108
|
`;
|
|
21044
|
-
var stepContainerStyles =
|
|
21109
|
+
var stepContainerStyles = import_react196.css`
|
|
21045
21110
|
position: relative;
|
|
21046
21111
|
flex: 1;
|
|
21047
21112
|
overflow: hidden;
|
|
21048
21113
|
height: 100%;
|
|
21049
21114
|
`;
|
|
21050
|
-
var stepBaseStyles =
|
|
21115
|
+
var stepBaseStyles = import_react196.css`
|
|
21051
21116
|
position: absolute;
|
|
21052
21117
|
inset: 0;
|
|
21053
21118
|
display: flex;
|
|
21054
21119
|
flex-direction: column;
|
|
21055
21120
|
gap: var(--spacing-base);
|
|
21056
21121
|
`;
|
|
21057
|
-
var stepActiveStyles =
|
|
21122
|
+
var stepActiveStyles = import_react196.css`
|
|
21058
21123
|
visibility: visible;
|
|
21059
21124
|
`;
|
|
21060
|
-
var stepInactiveStyles =
|
|
21125
|
+
var stepInactiveStyles = import_react196.css`
|
|
21061
21126
|
visibility: hidden;
|
|
21062
21127
|
`;
|
|
21063
|
-
var stepEnterForwardStyles =
|
|
21128
|
+
var stepEnterForwardStyles = import_react196.css`
|
|
21064
21129
|
animation: ${slideInFromRight} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
21065
21130
|
|
|
21066
21131
|
${prefersReducedMotion("reduce")} {
|
|
21067
21132
|
animation: none;
|
|
21068
21133
|
}
|
|
21069
21134
|
`;
|
|
21070
|
-
var stepExitForwardStyles =
|
|
21135
|
+
var stepExitForwardStyles = import_react196.css`
|
|
21071
21136
|
animation: ${slideOutToLeft} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
21072
21137
|
|
|
21073
21138
|
${prefersReducedMotion("reduce")} {
|
|
21074
21139
|
animation: none;
|
|
21075
21140
|
}
|
|
21076
21141
|
`;
|
|
21077
|
-
var stepEnterBackwardStyles =
|
|
21142
|
+
var stepEnterBackwardStyles = import_react196.css`
|
|
21078
21143
|
animation: ${slideInFromLeft} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
21079
21144
|
|
|
21080
21145
|
${prefersReducedMotion("reduce")} {
|
|
21081
21146
|
animation: none;
|
|
21082
21147
|
}
|
|
21083
21148
|
`;
|
|
21084
|
-
var stepExitBackwardStyles =
|
|
21149
|
+
var stepExitBackwardStyles = import_react196.css`
|
|
21085
21150
|
animation: ${slideOutToRight} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
21086
21151
|
|
|
21087
21152
|
${prefersReducedMotion("reduce")} {
|
|
21088
21153
|
animation: none;
|
|
21089
21154
|
}
|
|
21090
21155
|
`;
|
|
21091
|
-
var headerContainerStyles =
|
|
21156
|
+
var headerContainerStyles = import_react196.css`
|
|
21092
21157
|
position: relative;
|
|
21093
21158
|
overflow: hidden;
|
|
21094
21159
|
flex: 1;
|
|
21095
21160
|
`;
|
|
21096
|
-
var headerItemStyles = (isActive) =>
|
|
21161
|
+
var headerItemStyles = (isActive) => import_react196.css`
|
|
21097
21162
|
position: ${isActive ? "relative" : "absolute"};
|
|
21098
21163
|
inset: 0;
|
|
21099
21164
|
white-space: nowrap;
|
|
21100
21165
|
`;
|
|
21101
|
-
var stepContentStyles =
|
|
21166
|
+
var stepContentStyles = import_react196.css`
|
|
21102
21167
|
position: relative;
|
|
21103
21168
|
flex: 1;
|
|
21104
21169
|
overflow: auto;
|
|
@@ -21127,18 +21192,18 @@ function getStepAnimationStyles({
|
|
|
21127
21192
|
}
|
|
21128
21193
|
|
|
21129
21194
|
// src/components/StackedModal/AnimatedStepHeader.tsx
|
|
21130
|
-
var
|
|
21195
|
+
var import_jsx_runtime155 = require("@emotion/react/jsx-runtime");
|
|
21131
21196
|
function AnimatedStepHeader({ steps }) {
|
|
21132
|
-
return /* @__PURE__ */ (0,
|
|
21197
|
+
return /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("div", { css: headerContainerStyles, children: steps.map((step, index) => {
|
|
21133
21198
|
var _a;
|
|
21134
21199
|
const header2 = step.props.header;
|
|
21135
21200
|
if (!header2) return null;
|
|
21136
|
-
return /* @__PURE__ */ (0,
|
|
21201
|
+
return /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(AnimatedHeaderItem, { index, children: header2 }, (_a = step.key) != null ? _a : index);
|
|
21137
21202
|
}) });
|
|
21138
21203
|
}
|
|
21139
21204
|
function AnimatedHeaderItem({ index, children }) {
|
|
21140
21205
|
const transition = useStepTransition(index);
|
|
21141
|
-
return /* @__PURE__ */ (0,
|
|
21206
|
+
return /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
|
|
21142
21207
|
"div",
|
|
21143
21208
|
{
|
|
21144
21209
|
css: [headerItemStyles(transition.isActive), getStepAnimationStyles(transition)],
|
|
@@ -21150,35 +21215,35 @@ function AnimatedHeaderItem({ index, children }) {
|
|
|
21150
21215
|
|
|
21151
21216
|
// src/components/StackedModal/StackedModalStep.tsx
|
|
21152
21217
|
init_emotion_jsx_shim();
|
|
21153
|
-
var
|
|
21218
|
+
var import_jsx_runtime156 = require("@emotion/react/jsx-runtime");
|
|
21154
21219
|
function StackedModalStep({ children, buttonGroup }) {
|
|
21155
|
-
return /* @__PURE__ */ (0,
|
|
21156
|
-
/* @__PURE__ */ (0,
|
|
21157
|
-
buttonGroup ? /* @__PURE__ */ (0,
|
|
21220
|
+
return /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(import_jsx_runtime156.Fragment, { children: [
|
|
21221
|
+
/* @__PURE__ */ (0, import_jsx_runtime156.jsx)("div", { css: stepContentStyles, children }),
|
|
21222
|
+
buttonGroup ? /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(HorizontalRhythm, { gap: "sm", align: "center", children: buttonGroup }) : null
|
|
21158
21223
|
] });
|
|
21159
21224
|
}
|
|
21160
21225
|
|
|
21161
21226
|
// src/components/StackedModal/StackedModal.tsx
|
|
21162
|
-
var
|
|
21227
|
+
var import_jsx_runtime157 = require("@emotion/react/jsx-runtime");
|
|
21163
21228
|
function filterSteps(children) {
|
|
21164
|
-
return
|
|
21165
|
-
(child) =>
|
|
21229
|
+
return import_react197.default.Children.toArray(children).filter(
|
|
21230
|
+
(child) => import_react197.default.isValidElement(child) && child.type === StackedModalStep
|
|
21166
21231
|
);
|
|
21167
21232
|
}
|
|
21168
|
-
var StackedModal =
|
|
21233
|
+
var StackedModal = import_react197.default.forwardRef(
|
|
21169
21234
|
({ children, initialStep = 0, ...rest }, ref) => {
|
|
21170
21235
|
const steps = filterSteps(children);
|
|
21171
|
-
return /* @__PURE__ */ (0,
|
|
21236
|
+
return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(StackedModalProvider, { totalSteps: steps.length, initialStep, children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(StackedModalInner, { ref, steps, ...rest }) });
|
|
21172
21237
|
}
|
|
21173
21238
|
);
|
|
21174
21239
|
StackedModal.displayName = "StackedModal";
|
|
21175
|
-
var StackedModalInner =
|
|
21240
|
+
var StackedModalInner = import_react197.default.forwardRef(
|
|
21176
21241
|
({ steps, onRequestClose, modalSize = "lg", width, height }, ref) => {
|
|
21177
|
-
return /* @__PURE__ */ (0,
|
|
21242
|
+
return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { css: stackedModalRootStyles, children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
|
|
21178
21243
|
Modal,
|
|
21179
21244
|
{
|
|
21180
21245
|
ref,
|
|
21181
|
-
header: /* @__PURE__ */ (0,
|
|
21246
|
+
header: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(AnimatedStepHeader, { steps }),
|
|
21182
21247
|
onRequestClose,
|
|
21183
21248
|
modalSize,
|
|
21184
21249
|
width,
|
|
@@ -21186,9 +21251,9 @@ var StackedModalInner = import_react196.default.forwardRef(
|
|
|
21186
21251
|
withoutContentPadding: true,
|
|
21187
21252
|
withoutContentBackground: true,
|
|
21188
21253
|
disableBodyScroll: true,
|
|
21189
|
-
children: /* @__PURE__ */ (0,
|
|
21254
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { css: stepContainerStyles, children: steps.map((step, index) => {
|
|
21190
21255
|
var _a;
|
|
21191
|
-
return /* @__PURE__ */ (0,
|
|
21256
|
+
return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(StackedModalStepWrapper, { index, children: step }, (_a = step.key) != null ? _a : index);
|
|
21192
21257
|
}) })
|
|
21193
21258
|
}
|
|
21194
21259
|
) });
|
|
@@ -21197,17 +21262,17 @@ var StackedModalInner = import_react196.default.forwardRef(
|
|
|
21197
21262
|
StackedModalInner.displayName = "StackedModalInner";
|
|
21198
21263
|
function StackedModalStepWrapper({ index, children }) {
|
|
21199
21264
|
const transition = useStepTransition(index);
|
|
21200
|
-
return /* @__PURE__ */ (0,
|
|
21265
|
+
return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { css: [stepBaseStyles, getStepAnimationStyles(transition)], "aria-hidden": !transition.isActive, children });
|
|
21201
21266
|
}
|
|
21202
21267
|
|
|
21203
21268
|
// src/components/Switch/Switch.tsx
|
|
21204
21269
|
init_emotion_jsx_shim();
|
|
21205
|
-
var
|
|
21270
|
+
var import_react199 = require("react");
|
|
21206
21271
|
|
|
21207
21272
|
// src/components/Switch/Switch.styles.ts
|
|
21208
21273
|
init_emotion_jsx_shim();
|
|
21209
|
-
var
|
|
21210
|
-
var SwitchInputContainer =
|
|
21274
|
+
var import_react198 = require("@emotion/react");
|
|
21275
|
+
var SwitchInputContainer = import_react198.css`
|
|
21211
21276
|
cursor: pointer;
|
|
21212
21277
|
display: inline-flex;
|
|
21213
21278
|
position: relative;
|
|
@@ -21217,7 +21282,7 @@ var SwitchInputContainer = import_react197.css`
|
|
|
21217
21282
|
user-select: none;
|
|
21218
21283
|
z-index: 0;
|
|
21219
21284
|
`;
|
|
21220
|
-
var SwitchInput = (size) =>
|
|
21285
|
+
var SwitchInput = (size) => import_react198.css`
|
|
21221
21286
|
appearance: none;
|
|
21222
21287
|
border-radius: var(--rounded-full);
|
|
21223
21288
|
background-color: var(--white);
|
|
@@ -21268,18 +21333,18 @@ var SwitchInput = (size) => import_react197.css`
|
|
|
21268
21333
|
cursor: not-allowed;
|
|
21269
21334
|
}
|
|
21270
21335
|
`;
|
|
21271
|
-
var SwitchInputCheckedDirectionLeft =
|
|
21336
|
+
var SwitchInputCheckedDirectionLeft = import_react198.css`
|
|
21272
21337
|
&:checked {
|
|
21273
21338
|
transform: translateX(var(--spacing-base));
|
|
21274
21339
|
}
|
|
21275
21340
|
`;
|
|
21276
|
-
var SwitchInputCheckedDirectionRight =
|
|
21341
|
+
var SwitchInputCheckedDirectionRight = import_react198.css`
|
|
21277
21342
|
transform: translateX(-var(--spacing-base));
|
|
21278
21343
|
&:checked {
|
|
21279
21344
|
transform: translateX(0);
|
|
21280
21345
|
}
|
|
21281
21346
|
`;
|
|
21282
|
-
var SwitchInputDisabled =
|
|
21347
|
+
var SwitchInputDisabled = import_react198.css`
|
|
21283
21348
|
opacity: var(--opacity-50);
|
|
21284
21349
|
cursor: not-allowed;
|
|
21285
21350
|
|
|
@@ -21287,19 +21352,19 @@ var SwitchInputDisabled = import_react197.css`
|
|
|
21287
21352
|
cursor: not-allowed;
|
|
21288
21353
|
}
|
|
21289
21354
|
`;
|
|
21290
|
-
var SwitchInputLabelAlignmentLeft = (size) =>
|
|
21355
|
+
var SwitchInputLabelAlignmentLeft = (size) => import_react198.css`
|
|
21291
21356
|
padding-inline-start: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
21292
21357
|
&:before {
|
|
21293
21358
|
left: 0;
|
|
21294
21359
|
}
|
|
21295
21360
|
`;
|
|
21296
|
-
var SwitchInputLabelAlignmentRight = (size) =>
|
|
21361
|
+
var SwitchInputLabelAlignmentRight = (size) => import_react198.css`
|
|
21297
21362
|
padding-inline-end: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
21298
21363
|
&:before {
|
|
21299
21364
|
right: 0;
|
|
21300
21365
|
}
|
|
21301
21366
|
`;
|
|
21302
|
-
var SwitchInputLabel = (size) =>
|
|
21367
|
+
var SwitchInputLabel = (size) => import_react198.css`
|
|
21303
21368
|
align-items: center;
|
|
21304
21369
|
color: var(--typography-base);
|
|
21305
21370
|
display: inline-flex;
|
|
@@ -21320,26 +21385,26 @@ var SwitchInputLabel = (size) => import_react197.css`
|
|
|
21320
21385
|
top: 0;
|
|
21321
21386
|
}
|
|
21322
21387
|
`;
|
|
21323
|
-
var SwitchTextAlignmentLeft = (size) =>
|
|
21388
|
+
var SwitchTextAlignmentLeft = (size) => import_react198.css`
|
|
21324
21389
|
padding-inline-start: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
21325
21390
|
`;
|
|
21326
|
-
var SwitchTextAlignmentRight = (size) =>
|
|
21391
|
+
var SwitchTextAlignmentRight = (size) => import_react198.css`
|
|
21327
21392
|
padding-inline-end: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
21328
21393
|
`;
|
|
21329
|
-
var SwitchText =
|
|
21394
|
+
var SwitchText = import_react198.css`
|
|
21330
21395
|
color: var(--gray-500);
|
|
21331
21396
|
font-size: var(--fs-sm);
|
|
21332
21397
|
`;
|
|
21333
|
-
var SwitchInputContainerAlignmentLeft =
|
|
21398
|
+
var SwitchInputContainerAlignmentLeft = import_react198.css`
|
|
21334
21399
|
flex-direction: row;
|
|
21335
21400
|
`;
|
|
21336
|
-
var SwitchInputContainerAlignmentRight =
|
|
21401
|
+
var SwitchInputContainerAlignmentRight = import_react198.css`
|
|
21337
21402
|
flex-direction: row-reverse;
|
|
21338
21403
|
`;
|
|
21339
21404
|
|
|
21340
21405
|
// src/components/Switch/Switch.tsx
|
|
21341
|
-
var
|
|
21342
|
-
var Switch = (0,
|
|
21406
|
+
var import_jsx_runtime158 = require("@emotion/react/jsx-runtime");
|
|
21407
|
+
var Switch = (0, import_react199.forwardRef)(
|
|
21343
21408
|
({
|
|
21344
21409
|
label: label2,
|
|
21345
21410
|
infoText,
|
|
@@ -21350,7 +21415,7 @@ var Switch = (0, import_react198.forwardRef)(
|
|
|
21350
21415
|
...inputProps
|
|
21351
21416
|
}, ref) => {
|
|
21352
21417
|
let additionalText = infoText;
|
|
21353
|
-
const { SwitchInputContainerAlignmentStyles, SwitchInputCheckedDirection, SwitchInputLabelAlignment } = (0,
|
|
21418
|
+
const { SwitchInputContainerAlignmentStyles, SwitchInputCheckedDirection, SwitchInputLabelAlignment } = (0, import_react199.useMemo)(() => {
|
|
21354
21419
|
if (alignment === "left") {
|
|
21355
21420
|
return {
|
|
21356
21421
|
SwitchInputContainerAlignmentStyles: SwitchInputContainerAlignmentLeft,
|
|
@@ -21367,8 +21432,8 @@ var Switch = (0, import_react198.forwardRef)(
|
|
|
21367
21432
|
if (infoText && toggleText) {
|
|
21368
21433
|
additionalText = inputProps.checked ? toggleText : infoText;
|
|
21369
21434
|
}
|
|
21370
|
-
return /* @__PURE__ */ (0,
|
|
21371
|
-
/* @__PURE__ */ (0,
|
|
21435
|
+
return /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(import_jsx_runtime158.Fragment, { children: [
|
|
21436
|
+
/* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
|
|
21372
21437
|
"label",
|
|
21373
21438
|
{
|
|
21374
21439
|
css: [
|
|
@@ -21378,7 +21443,7 @@ var Switch = (0, import_react198.forwardRef)(
|
|
|
21378
21443
|
inputProps.disabled ? SwitchInputDisabled : void 0
|
|
21379
21444
|
],
|
|
21380
21445
|
children: [
|
|
21381
|
-
/* @__PURE__ */ (0,
|
|
21446
|
+
/* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
|
|
21382
21447
|
"input",
|
|
21383
21448
|
{
|
|
21384
21449
|
type: "checkbox",
|
|
@@ -21387,11 +21452,11 @@ var Switch = (0, import_react198.forwardRef)(
|
|
|
21387
21452
|
ref
|
|
21388
21453
|
}
|
|
21389
21454
|
),
|
|
21390
|
-
/* @__PURE__ */ (0,
|
|
21455
|
+
/* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { css: [SwitchInputLabel(switchSize), SwitchInputLabelAlignment], children: label2 })
|
|
21391
21456
|
]
|
|
21392
21457
|
}
|
|
21393
21458
|
),
|
|
21394
|
-
additionalText ? /* @__PURE__ */ (0,
|
|
21459
|
+
additionalText ? /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
|
|
21395
21460
|
"p",
|
|
21396
21461
|
{
|
|
21397
21462
|
css: [
|
|
@@ -21411,8 +21476,8 @@ init_emotion_jsx_shim();
|
|
|
21411
21476
|
|
|
21412
21477
|
// src/components/Table/Table.styles.ts
|
|
21413
21478
|
init_emotion_jsx_shim();
|
|
21414
|
-
var
|
|
21415
|
-
var table = ({ cellPadding = "var(--spacing-sm)" }) =>
|
|
21479
|
+
var import_react200 = require("@emotion/react");
|
|
21480
|
+
var table = ({ cellPadding = "var(--spacing-sm)" }) => import_react200.css`
|
|
21416
21481
|
border-bottom: 1px solid var(--gray-400);
|
|
21417
21482
|
border-collapse: collapse;
|
|
21418
21483
|
min-width: 100%;
|
|
@@ -21432,21 +21497,21 @@ var table = ({ cellPadding = "var(--spacing-sm)" }) => import_react199.css`
|
|
|
21432
21497
|
background-color: var(--gray-50);
|
|
21433
21498
|
}
|
|
21434
21499
|
`;
|
|
21435
|
-
var tableHead =
|
|
21500
|
+
var tableHead = import_react200.css`
|
|
21436
21501
|
color: var(--typography-base);
|
|
21437
21502
|
text-align: left;
|
|
21438
21503
|
`;
|
|
21439
|
-
var tableRow =
|
|
21504
|
+
var tableRow = import_react200.css`
|
|
21440
21505
|
border-bottom: 1px solid var(--gray-200);
|
|
21441
21506
|
font-size: var(--fs-sm);
|
|
21442
21507
|
`;
|
|
21443
|
-
var tableCellHead =
|
|
21508
|
+
var tableCellHead = import_react200.css`
|
|
21444
21509
|
font-size: var(--fs-sm);
|
|
21445
21510
|
font-weight: var(--fw-regular);
|
|
21446
21511
|
line-height: 1.2;
|
|
21447
21512
|
}
|
|
21448
21513
|
`;
|
|
21449
|
-
var responsiveTableContainer =
|
|
21514
|
+
var responsiveTableContainer = import_react200.css`
|
|
21450
21515
|
max-width: calc(100vw - var(--spacing-md) * 2);
|
|
21451
21516
|
overflow-x: auto;
|
|
21452
21517
|
${scrollbarStyles}
|
|
@@ -21465,60 +21530,60 @@ var responsiveTableContainer = import_react199.css`
|
|
|
21465
21530
|
`;
|
|
21466
21531
|
|
|
21467
21532
|
// src/components/Table/ResponsiveTableContainer.tsx
|
|
21468
|
-
var
|
|
21533
|
+
var import_jsx_runtime159 = require("@emotion/react/jsx-runtime");
|
|
21469
21534
|
var ResponsiveTableContainer = ({ children }) => {
|
|
21470
|
-
return /* @__PURE__ */ (0,
|
|
21535
|
+
return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { css: responsiveTableContainer, children });
|
|
21471
21536
|
};
|
|
21472
21537
|
|
|
21473
21538
|
// src/components/Table/Table.tsx
|
|
21474
21539
|
init_emotion_jsx_shim();
|
|
21475
21540
|
var React22 = __toESM(require("react"));
|
|
21476
|
-
var
|
|
21541
|
+
var import_jsx_runtime160 = require("@emotion/react/jsx-runtime");
|
|
21477
21542
|
var Table = React22.forwardRef(
|
|
21478
21543
|
({ children, cellPadding, ...otherProps }, ref) => {
|
|
21479
|
-
return /* @__PURE__ */ (0,
|
|
21544
|
+
return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
|
|
21480
21545
|
}
|
|
21481
21546
|
);
|
|
21482
21547
|
var TableHead = React22.forwardRef(
|
|
21483
21548
|
({ children, ...otherProps }, ref) => {
|
|
21484
|
-
return /* @__PURE__ */ (0,
|
|
21549
|
+
return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
|
|
21485
21550
|
}
|
|
21486
21551
|
);
|
|
21487
21552
|
var TableBody = React22.forwardRef(
|
|
21488
21553
|
({ children, ...otherProps }, ref) => {
|
|
21489
|
-
return /* @__PURE__ */ (0,
|
|
21554
|
+
return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("tbody", { ref, ...otherProps, children });
|
|
21490
21555
|
}
|
|
21491
21556
|
);
|
|
21492
21557
|
var TableFoot = React22.forwardRef(
|
|
21493
21558
|
({ children, ...otherProps }, ref) => {
|
|
21494
|
-
return /* @__PURE__ */ (0,
|
|
21559
|
+
return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("tfoot", { ref, ...otherProps, children });
|
|
21495
21560
|
}
|
|
21496
21561
|
);
|
|
21497
21562
|
var TableRow = React22.forwardRef(
|
|
21498
21563
|
({ children, ...otherProps }, ref) => {
|
|
21499
|
-
return /* @__PURE__ */ (0,
|
|
21564
|
+
return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
|
|
21500
21565
|
}
|
|
21501
21566
|
);
|
|
21502
21567
|
var TableCellHead = React22.forwardRef(
|
|
21503
21568
|
({ children, ...otherProps }, ref) => {
|
|
21504
|
-
return /* @__PURE__ */ (0,
|
|
21569
|
+
return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
|
|
21505
21570
|
}
|
|
21506
21571
|
);
|
|
21507
21572
|
var TableCellData = React22.forwardRef(
|
|
21508
21573
|
({ children, ...otherProps }, ref) => {
|
|
21509
|
-
return /* @__PURE__ */ (0,
|
|
21574
|
+
return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("td", { ref, ...otherProps, children });
|
|
21510
21575
|
}
|
|
21511
21576
|
);
|
|
21512
21577
|
|
|
21513
21578
|
// src/components/Tabs/Tabs.tsx
|
|
21514
21579
|
init_emotion_jsx_shim();
|
|
21515
|
-
var
|
|
21516
|
-
var
|
|
21580
|
+
var import_react202 = require("@ariakit/react");
|
|
21581
|
+
var import_react203 = require("react");
|
|
21517
21582
|
|
|
21518
21583
|
// src/components/Tabs/Tabs.styles.ts
|
|
21519
21584
|
init_emotion_jsx_shim();
|
|
21520
|
-
var
|
|
21521
|
-
var tabButtonStyles =
|
|
21585
|
+
var import_react201 = require("@emotion/react");
|
|
21586
|
+
var tabButtonStyles = import_react201.css`
|
|
21522
21587
|
align-items: center;
|
|
21523
21588
|
border: 0;
|
|
21524
21589
|
height: 2.5rem;
|
|
@@ -21535,16 +21600,16 @@ var tabButtonStyles = import_react200.css`
|
|
|
21535
21600
|
box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
|
|
21536
21601
|
}
|
|
21537
21602
|
`;
|
|
21538
|
-
var tabButtonGroupStyles =
|
|
21603
|
+
var tabButtonGroupStyles = import_react201.css`
|
|
21539
21604
|
display: flex;
|
|
21540
21605
|
gap: var(--spacing-base);
|
|
21541
21606
|
border-bottom: 1px solid var(--gray-300);
|
|
21542
21607
|
`;
|
|
21543
21608
|
|
|
21544
21609
|
// src/components/Tabs/Tabs.tsx
|
|
21545
|
-
var
|
|
21610
|
+
var import_jsx_runtime161 = require("@emotion/react/jsx-runtime");
|
|
21546
21611
|
var useCurrentTab = () => {
|
|
21547
|
-
const context = (0,
|
|
21612
|
+
const context = (0, import_react202.useTabStore)();
|
|
21548
21613
|
if (!context) {
|
|
21549
21614
|
throw new Error("This component can only be used inside <Tabs>");
|
|
21550
21615
|
}
|
|
@@ -21558,11 +21623,11 @@ var Tabs = ({
|
|
|
21558
21623
|
manual,
|
|
21559
21624
|
...props
|
|
21560
21625
|
}) => {
|
|
21561
|
-
const selected = (0,
|
|
21626
|
+
const selected = (0, import_react203.useMemo)(() => {
|
|
21562
21627
|
if (selectedId) return selectedId;
|
|
21563
21628
|
return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
|
|
21564
21629
|
}, [selectedId, useHashForState]);
|
|
21565
|
-
const onTabSelect = (0,
|
|
21630
|
+
const onTabSelect = (0, import_react203.useCallback)(
|
|
21566
21631
|
(value) => {
|
|
21567
21632
|
const selectedValueWithoutNull = value != null ? value : void 0;
|
|
21568
21633
|
onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
|
|
@@ -21573,23 +21638,23 @@ var Tabs = ({
|
|
|
21573
21638
|
},
|
|
21574
21639
|
[onSelectedIdChange, useHashForState]
|
|
21575
21640
|
);
|
|
21576
|
-
return /* @__PURE__ */ (0,
|
|
21641
|
+
return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(import_react202.TabProvider, { selectedId: selected, selectOnMove: !manual, setSelectedId: onTabSelect, ...props, children });
|
|
21577
21642
|
};
|
|
21578
21643
|
var TabButtonGroup = ({ children, ...props }) => {
|
|
21579
|
-
return /* @__PURE__ */ (0,
|
|
21644
|
+
return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(import_react202.TabList, { ...props, css: tabButtonGroupStyles, children });
|
|
21580
21645
|
};
|
|
21581
21646
|
var TabButton = ({
|
|
21582
21647
|
children,
|
|
21583
21648
|
id,
|
|
21584
21649
|
...props
|
|
21585
21650
|
}) => {
|
|
21586
|
-
return /* @__PURE__ */ (0,
|
|
21651
|
+
return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(import_react202.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
|
|
21587
21652
|
};
|
|
21588
21653
|
var TabContent = ({
|
|
21589
21654
|
children,
|
|
21590
21655
|
...props
|
|
21591
21656
|
}) => {
|
|
21592
|
-
return /* @__PURE__ */ (0,
|
|
21657
|
+
return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(import_react202.TabPanel, { ...props, children });
|
|
21593
21658
|
};
|
|
21594
21659
|
|
|
21595
21660
|
// src/components/Validation/StatusBullet.tsx
|
|
@@ -21597,8 +21662,8 @@ init_emotion_jsx_shim();
|
|
|
21597
21662
|
|
|
21598
21663
|
// src/components/Validation/StatusBullet.styles.ts
|
|
21599
21664
|
init_emotion_jsx_shim();
|
|
21600
|
-
var
|
|
21601
|
-
var StatusBulletContainer =
|
|
21665
|
+
var import_react204 = require("@emotion/react");
|
|
21666
|
+
var StatusBulletContainer = import_react204.css`
|
|
21602
21667
|
align-items: center;
|
|
21603
21668
|
align-self: center;
|
|
21604
21669
|
color: var(--gray-500);
|
|
@@ -21614,33 +21679,33 @@ var StatusBulletContainer = import_react203.css`
|
|
|
21614
21679
|
display: block;
|
|
21615
21680
|
}
|
|
21616
21681
|
`;
|
|
21617
|
-
var StatusBulletBase =
|
|
21682
|
+
var StatusBulletBase = import_react204.css`
|
|
21618
21683
|
font-size: var(--fs-sm);
|
|
21619
21684
|
&:before {
|
|
21620
21685
|
width: var(--fs-xs);
|
|
21621
21686
|
height: var(--fs-xs);
|
|
21622
21687
|
}
|
|
21623
21688
|
`;
|
|
21624
|
-
var StatusBulletSmall =
|
|
21689
|
+
var StatusBulletSmall = import_react204.css`
|
|
21625
21690
|
font-size: var(--fs-xs);
|
|
21626
21691
|
&:before {
|
|
21627
21692
|
width: var(--fs-xxs);
|
|
21628
21693
|
height: var(--fs-xxs);
|
|
21629
21694
|
}
|
|
21630
21695
|
`;
|
|
21631
|
-
var StatusDraft =
|
|
21696
|
+
var StatusDraft = import_react204.css`
|
|
21632
21697
|
&:before {
|
|
21633
21698
|
background: var(--white);
|
|
21634
21699
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
21635
21700
|
}
|
|
21636
21701
|
`;
|
|
21637
|
-
var StatusModified =
|
|
21702
|
+
var StatusModified = import_react204.css`
|
|
21638
21703
|
&:before {
|
|
21639
21704
|
background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
|
|
21640
21705
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
21641
21706
|
}
|
|
21642
21707
|
`;
|
|
21643
|
-
var StatusError =
|
|
21708
|
+
var StatusError = import_react204.css`
|
|
21644
21709
|
color: var(--error);
|
|
21645
21710
|
&:before {
|
|
21646
21711
|
/* TODO: replace this with an svg icon */
|
|
@@ -21653,29 +21718,29 @@ var StatusError = import_react203.css`
|
|
|
21653
21718
|
);
|
|
21654
21719
|
}
|
|
21655
21720
|
`;
|
|
21656
|
-
var StatusPublished =
|
|
21721
|
+
var StatusPublished = import_react204.css`
|
|
21657
21722
|
&:before {
|
|
21658
21723
|
background: var(--accent-dark);
|
|
21659
21724
|
}
|
|
21660
21725
|
`;
|
|
21661
|
-
var StatusOrphan =
|
|
21726
|
+
var StatusOrphan = import_react204.css`
|
|
21662
21727
|
&:before {
|
|
21663
21728
|
background: var(--brand-secondary-5);
|
|
21664
21729
|
}
|
|
21665
21730
|
`;
|
|
21666
|
-
var StatusUnknown =
|
|
21731
|
+
var StatusUnknown = import_react204.css`
|
|
21667
21732
|
&:before {
|
|
21668
21733
|
background: var(--gray-800);
|
|
21669
21734
|
}
|
|
21670
21735
|
`;
|
|
21671
|
-
var StatusDeleted =
|
|
21736
|
+
var StatusDeleted = import_react204.css`
|
|
21672
21737
|
&:before {
|
|
21673
21738
|
background: var(--error);
|
|
21674
21739
|
}
|
|
21675
21740
|
`;
|
|
21676
21741
|
|
|
21677
21742
|
// src/components/Validation/StatusBullet.tsx
|
|
21678
|
-
var
|
|
21743
|
+
var import_jsx_runtime162 = require("@emotion/react/jsx-runtime");
|
|
21679
21744
|
var currentStateStyles = {
|
|
21680
21745
|
Error: StatusError,
|
|
21681
21746
|
Modified: StatusModified,
|
|
@@ -21699,7 +21764,7 @@ var StatusBullet = ({
|
|
|
21699
21764
|
compact = false,
|
|
21700
21765
|
...props
|
|
21701
21766
|
}) => {
|
|
21702
|
-
const StatusComponent = () => /* @__PURE__ */ (0,
|
|
21767
|
+
const StatusComponent = () => /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
|
|
21703
21768
|
"span",
|
|
21704
21769
|
{
|
|
21705
21770
|
role: "status",
|
|
@@ -21710,9 +21775,9 @@ var StatusBullet = ({
|
|
|
21710
21775
|
}
|
|
21711
21776
|
);
|
|
21712
21777
|
if (compact) {
|
|
21713
|
-
return /* @__PURE__ */ (0,
|
|
21778
|
+
return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(StatusComponent, {});
|
|
21714
21779
|
}
|
|
21715
|
-
return /* @__PURE__ */ (0,
|
|
21780
|
+
return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(StatusComponent, {}) }) });
|
|
21716
21781
|
};
|
|
21717
21782
|
// Annotate the CommonJS export names for ESM import in node:
|
|
21718
21783
|
0 && (module.exports = {
|
|
@@ -21823,6 +21888,7 @@ var StatusBullet = ({
|
|
|
21823
21888
|
ObjectListItemContainer,
|
|
21824
21889
|
ObjectListItemCover,
|
|
21825
21890
|
ObjectListItemHeading,
|
|
21891
|
+
ObjectListSubText,
|
|
21826
21892
|
PageHeaderSection,
|
|
21827
21893
|
Pagination,
|
|
21828
21894
|
Paragraph,
|