@uniformdev/design-system 20.66.6 → 20.66.7-alpha.10
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/index.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
"use strict";
|
|
2
3
|
var __create = Object.create;
|
|
3
4
|
var __defProp = Object.defineProperty;
|
|
@@ -9326,8 +9327,20 @@ var PageHeaderSection = ({
|
|
|
9326
9327
|
level = 2,
|
|
9327
9328
|
linkProps,
|
|
9328
9329
|
linkManagerComponent,
|
|
9330
|
+
afterTitle,
|
|
9331
|
+
afterTitleGap = "sm",
|
|
9332
|
+
afterTitleAlign = "center",
|
|
9329
9333
|
...htmlProps
|
|
9330
9334
|
}) => {
|
|
9335
|
+
const HeaderContent = () => {
|
|
9336
|
+
if (afterTitle) {
|
|
9337
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(HorizontalRhythm, { css: PageHeaderSectionTitle, gap: afterTitleGap, align: afterTitleAlign, children: [
|
|
9338
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Heading2, { level, ...htmlProps, "data-testid": "page-header-section", withMarginBottom: false, children: title }),
|
|
9339
|
+
afterTitle
|
|
9340
|
+
] });
|
|
9341
|
+
}
|
|
9342
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Heading2, { level, css: PageHeaderSectionTitle, ...htmlProps, "data-testid": "page-header-section", children: title });
|
|
9343
|
+
};
|
|
9331
9344
|
if (linkText && linkProps && !linkManagerComponent) {
|
|
9332
9345
|
throw Error("You must provide a linkManagerComponent");
|
|
9333
9346
|
}
|
|
@@ -9346,7 +9359,7 @@ var PageHeaderSection = ({
|
|
|
9346
9359
|
}
|
|
9347
9360
|
)
|
|
9348
9361
|
] }) : null,
|
|
9349
|
-
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
9362
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(HeaderContent, {}),
|
|
9350
9363
|
desc
|
|
9351
9364
|
] }),
|
|
9352
9365
|
children ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { css: PageHeaderSectionChildContainer, children }) : null
|
|
@@ -15328,7 +15341,7 @@ var ObjectListItemTitleColumnContent = import_react137.css`
|
|
|
15328
15341
|
`;
|
|
15329
15342
|
var objectListItemContentWrapperColumns = (minContainerQueryWidth, hasCover) => import_react137.css`
|
|
15330
15343
|
${cq(minContainerQueryWidth)} {
|
|
15331
|
-
grid-template-columns: ${hasCover ? "minmax(0, auto) " : "
|
|
15344
|
+
grid-template-columns: ${hasCover ? "minmax(0, auto) minmax(0, 1fr) minmax(0, auto)" : "minmax(0, 1fr) minmax(0, auto)"};
|
|
15332
15345
|
}
|
|
15333
15346
|
`;
|
|
15334
15347
|
var ObjectListItemRightSlot = import_react137.css`
|
|
@@ -15649,43 +15662,51 @@ init_emotion_jsx_shim();
|
|
|
15649
15662
|
var React20 = __toESM(require("react"));
|
|
15650
15663
|
var import_react_paginate = __toESM(require("react-paginate"));
|
|
15651
15664
|
|
|
15652
|
-
// src/components/Pagination/
|
|
15653
|
-
init_emotion_jsx_shim();
|
|
15654
|
-
var
|
|
15655
|
-
var
|
|
15665
|
+
// src/components/Pagination/Pagination.styles.ts
|
|
15666
|
+
init_emotion_jsx_shim();
|
|
15667
|
+
var import_react140 = require("@emotion/react");
|
|
15668
|
+
var container2 = "ud-pagination-container";
|
|
15669
|
+
var disabled = "ud-pagination-disabled";
|
|
15670
|
+
var disabledLink = "ud-pagination-disabled-link";
|
|
15671
|
+
var pageLink = "ud-pagination-page-link";
|
|
15672
|
+
var prevNextControls = "ud-pagination-prev-next";
|
|
15673
|
+
var active = "ud-pagination-active";
|
|
15674
|
+
var page = "ud-pagination-page";
|
|
15675
|
+
var paginationStyles = import_react140.css`
|
|
15656
15676
|
display: inline-flex;
|
|
15657
15677
|
max-width: 100%;
|
|
15658
15678
|
overflow-x: auto;
|
|
15659
|
-
|
|
15660
|
-
|
|
15661
|
-
|
|
15662
|
-
|
|
15663
|
-
|
|
15664
|
-
|
|
15665
|
-
|
|
15666
|
-
|
|
15667
|
-
|
|
15668
|
-
|
|
15669
|
-
|
|
15670
|
-
|
|
15671
|
-
|
|
15672
|
-
|
|
15673
|
-
|
|
15674
|
-
|
|
15675
|
-
|
|
15676
|
-
|
|
15677
|
-
|
|
15678
|
-
|
|
15679
|
-
|
|
15680
|
-
|
|
15681
|
-
|
|
15682
|
-
|
|
15683
|
-
|
|
15679
|
+
|
|
15680
|
+
.${container2} {
|
|
15681
|
+
align-items: center;
|
|
15682
|
+
display: flex;
|
|
15683
|
+
}
|
|
15684
|
+
.${container2} .${disabled} {
|
|
15685
|
+
opacity: var(--opacity-50);
|
|
15686
|
+
}
|
|
15687
|
+
.${container2} .${disabledLink} {
|
|
15688
|
+
cursor: pointer-default;
|
|
15689
|
+
}
|
|
15690
|
+
.${container2} .${pageLink} {
|
|
15691
|
+
display: block;
|
|
15692
|
+
padding: var(--spacing-sm) var(--spacing-base);
|
|
15693
|
+
}
|
|
15694
|
+
.${container2} .${prevNextControls} {
|
|
15695
|
+
padding: var(--spacing-sm) var(--spacing-base);
|
|
15696
|
+
}
|
|
15697
|
+
.${container2} .${active} {
|
|
15698
|
+
border-radius: var(--rounded-base);
|
|
15699
|
+
background: var(--gray-200);
|
|
15700
|
+
}
|
|
15701
|
+
.${container2} .${page} {
|
|
15702
|
+
margin-left: var(--spacing-xs);
|
|
15703
|
+
margin-right: var(--spacing-xs);
|
|
15704
|
+
}
|
|
15684
15705
|
`;
|
|
15685
15706
|
|
|
15686
15707
|
// src/components/Pagination/usePaginationDisplayRange.ts
|
|
15687
15708
|
init_emotion_jsx_shim();
|
|
15688
|
-
var
|
|
15709
|
+
var import_react141 = require("react");
|
|
15689
15710
|
var DEFAULT_PAGINATION_DISPLAY_RANGE = {
|
|
15690
15711
|
marginPagesDisplayed: 2,
|
|
15691
15712
|
pageRangeDisplayed: 5
|
|
@@ -15741,8 +15762,8 @@ function getAvailablePaginationWidth(container5) {
|
|
|
15741
15762
|
return measurementElement.getBoundingClientRect().width;
|
|
15742
15763
|
}
|
|
15743
15764
|
function usePaginationDisplayRange(containerRef, pageCount) {
|
|
15744
|
-
const [displayRange, setDisplayRange] = (0,
|
|
15745
|
-
(0,
|
|
15765
|
+
const [displayRange, setDisplayRange] = (0, import_react141.useState)(DEFAULT_PAGINATION_DISPLAY_RANGE);
|
|
15766
|
+
(0, import_react141.useEffect)(() => {
|
|
15746
15767
|
var _a;
|
|
15747
15768
|
const container5 = containerRef.current;
|
|
15748
15769
|
if (!container5) {
|
|
@@ -15783,7 +15804,7 @@ function Pagination({
|
|
|
15783
15804
|
if (limit < 1 || pageCount <= 1) {
|
|
15784
15805
|
return null;
|
|
15785
15806
|
}
|
|
15786
|
-
return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { ref: containerRef,
|
|
15807
|
+
return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { ref: containerRef, css: paginationStyles, children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
15787
15808
|
import_react_paginate.default,
|
|
15788
15809
|
{
|
|
15789
15810
|
forcePage: currentPage,
|
|
@@ -15808,8 +15829,8 @@ function Pagination({
|
|
|
15808
15829
|
|
|
15809
15830
|
// src/components/ParameterInputs/hooks/ParameterShellContext.tsx
|
|
15810
15831
|
init_emotion_jsx_shim();
|
|
15811
|
-
var
|
|
15812
|
-
var ParameterShellContext = (0,
|
|
15832
|
+
var import_react142 = require("react");
|
|
15833
|
+
var ParameterShellContext = (0, import_react142.createContext)({
|
|
15813
15834
|
id: "",
|
|
15814
15835
|
label: "",
|
|
15815
15836
|
hiddenLabel: void 0,
|
|
@@ -15818,7 +15839,7 @@ var ParameterShellContext = (0, import_react141.createContext)({
|
|
|
15818
15839
|
}
|
|
15819
15840
|
});
|
|
15820
15841
|
var useParameterShell = () => {
|
|
15821
|
-
const { id, label: label2, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0,
|
|
15842
|
+
const { id, label: label2, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0, import_react142.useContext)(ParameterShellContext);
|
|
15822
15843
|
return {
|
|
15823
15844
|
id,
|
|
15824
15845
|
label: label2,
|
|
@@ -15833,8 +15854,8 @@ init_emotion_jsx_shim();
|
|
|
15833
15854
|
|
|
15834
15855
|
// src/components/ParameterInputs/styles/LabelLeadingIcon.styles.ts
|
|
15835
15856
|
init_emotion_jsx_shim();
|
|
15836
|
-
var
|
|
15837
|
-
var inputIconBtn =
|
|
15857
|
+
var import_react143 = require("@emotion/react");
|
|
15858
|
+
var inputIconBtn = import_react143.css`
|
|
15838
15859
|
align-items: center;
|
|
15839
15860
|
border: none;
|
|
15840
15861
|
border-radius: var(--rounded-base);
|
|
@@ -15899,12 +15920,12 @@ var LabelLeadingIcon = ({
|
|
|
15899
15920
|
|
|
15900
15921
|
// src/components/ParameterInputs/ParameterActionButton.tsx
|
|
15901
15922
|
init_emotion_jsx_shim();
|
|
15902
|
-
var
|
|
15923
|
+
var import_react145 = __toESM(require("react"));
|
|
15903
15924
|
|
|
15904
15925
|
// src/components/ParameterInputs/styles/ParameterActionButton.styles.ts
|
|
15905
15926
|
init_emotion_jsx_shim();
|
|
15906
|
-
var
|
|
15907
|
-
var baseStyles =
|
|
15927
|
+
var import_react144 = require("@emotion/react");
|
|
15928
|
+
var baseStyles = import_react144.css`
|
|
15908
15929
|
--hover-color: var(--accent-dark-hover);
|
|
15909
15930
|
--active-color: var(--accent-dark-active);
|
|
15910
15931
|
border: 1px solid transparent;
|
|
@@ -15929,7 +15950,7 @@ var baseStyles = import_react143.css`
|
|
|
15929
15950
|
cursor: default;
|
|
15930
15951
|
}
|
|
15931
15952
|
`;
|
|
15932
|
-
var solidHoverStyles =
|
|
15953
|
+
var solidHoverStyles = import_react144.css`
|
|
15933
15954
|
--text-color: var(--typography-inverted);
|
|
15934
15955
|
&:hover,
|
|
15935
15956
|
&:focus,
|
|
@@ -15946,7 +15967,7 @@ var solidHoverStyles = import_react143.css`
|
|
|
15946
15967
|
color: var(--text-color);
|
|
15947
15968
|
}
|
|
15948
15969
|
`;
|
|
15949
|
-
var outlineHoverStyles =
|
|
15970
|
+
var outlineHoverStyles = import_react144.css`
|
|
15950
15971
|
--text-color: var(--typography-light);
|
|
15951
15972
|
&:hover:not([aria-disabled='true']),
|
|
15952
15973
|
&:focus:not([aria-disabled='true']),
|
|
@@ -15959,7 +15980,7 @@ var outlineHoverStyles = import_react143.css`
|
|
|
15959
15980
|
border-color: var(--active-color);
|
|
15960
15981
|
}
|
|
15961
15982
|
`;
|
|
15962
|
-
var invertedStyles =
|
|
15983
|
+
var invertedStyles = import_react144.css`
|
|
15963
15984
|
--text-color: var(--typography-inverted);
|
|
15964
15985
|
box-shadow: inset 0 0 0 1px transparent;
|
|
15965
15986
|
&:hover,
|
|
@@ -16004,7 +16025,7 @@ var ParameterActionButton = ({
|
|
|
16004
16025
|
children
|
|
16005
16026
|
}
|
|
16006
16027
|
);
|
|
16007
|
-
if (tooltip && (typeof tooltip === "string" ||
|
|
16028
|
+
if (tooltip && (typeof tooltip === "string" || import_react145.default.isValidElement(tooltip))) {
|
|
16008
16029
|
return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Tooltip, { title: tooltip, ...tooltipProps, children: buttonElement });
|
|
16009
16030
|
}
|
|
16010
16031
|
return buttonElement;
|
|
@@ -16015,20 +16036,20 @@ init_emotion_jsx_shim();
|
|
|
16015
16036
|
|
|
16016
16037
|
// src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
|
|
16017
16038
|
init_emotion_jsx_shim();
|
|
16018
|
-
var
|
|
16019
|
-
var ParameterDrawerHeaderContainer =
|
|
16039
|
+
var import_react146 = require("@emotion/react");
|
|
16040
|
+
var ParameterDrawerHeaderContainer = import_react146.css`
|
|
16020
16041
|
align-items: center;
|
|
16021
16042
|
display: flex;
|
|
16022
16043
|
gap: var(--spacing-base);
|
|
16023
16044
|
justify-content: space-between;
|
|
16024
16045
|
margin-bottom: var(--spacing-sm);
|
|
16025
16046
|
`;
|
|
16026
|
-
var ParameterDrawerHeaderTitleGroup =
|
|
16047
|
+
var ParameterDrawerHeaderTitleGroup = import_react146.css`
|
|
16027
16048
|
align-items: center;
|
|
16028
16049
|
display: flex;
|
|
16029
16050
|
gap: var(--spacing-sm);
|
|
16030
16051
|
`;
|
|
16031
|
-
var ParameterDrawerHeaderTitle =
|
|
16052
|
+
var ParameterDrawerHeaderTitle = import_react146.css`
|
|
16032
16053
|
text-overflow: ellipsis;
|
|
16033
16054
|
white-space: nowrap;
|
|
16034
16055
|
overflow: hidden;
|
|
@@ -16049,12 +16070,12 @@ var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
|
|
|
16049
16070
|
|
|
16050
16071
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
16051
16072
|
init_emotion_jsx_shim();
|
|
16052
|
-
var
|
|
16073
|
+
var import_react148 = require("react");
|
|
16053
16074
|
|
|
16054
16075
|
// src/components/ParameterInputs/styles/ParameterGroup.styles.ts
|
|
16055
16076
|
init_emotion_jsx_shim();
|
|
16056
|
-
var
|
|
16057
|
-
var fieldsetStyles =
|
|
16077
|
+
var import_react147 = require("@emotion/react");
|
|
16078
|
+
var fieldsetStyles = import_react147.css`
|
|
16058
16079
|
&:disabled,
|
|
16059
16080
|
[readonly] {
|
|
16060
16081
|
input,
|
|
@@ -16069,7 +16090,7 @@ var fieldsetStyles = import_react146.css`
|
|
|
16069
16090
|
}
|
|
16070
16091
|
}
|
|
16071
16092
|
`;
|
|
16072
|
-
var fieldsetLegend2 =
|
|
16093
|
+
var fieldsetLegend2 = import_react147.css`
|
|
16073
16094
|
display: block;
|
|
16074
16095
|
font-weight: var(--fw-medium);
|
|
16075
16096
|
margin-bottom: var(--spacing-base);
|
|
@@ -16078,7 +16099,7 @@ var fieldsetLegend2 = import_react146.css`
|
|
|
16078
16099
|
|
|
16079
16100
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
16080
16101
|
var import_jsx_runtime126 = require("@emotion/react/jsx-runtime");
|
|
16081
|
-
var ParameterGroup = (0,
|
|
16102
|
+
var ParameterGroup = (0, import_react148.forwardRef)(
|
|
16082
16103
|
({ legend, isDisabled, children, ...props }, ref) => {
|
|
16083
16104
|
return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
|
|
16084
16105
|
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)("legend", { css: fieldsetLegend2, children: legend }),
|
|
@@ -16089,24 +16110,24 @@ var ParameterGroup = (0, import_react147.forwardRef)(
|
|
|
16089
16110
|
|
|
16090
16111
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
16091
16112
|
init_emotion_jsx_shim();
|
|
16092
|
-
var
|
|
16113
|
+
var import_react156 = require("react");
|
|
16093
16114
|
|
|
16094
16115
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
16095
16116
|
init_emotion_jsx_shim();
|
|
16096
|
-
var
|
|
16117
|
+
var import_react150 = require("react");
|
|
16097
16118
|
var import_react_dom2 = require("react-dom");
|
|
16098
16119
|
|
|
16099
16120
|
// src/components/ParameterInputs/styles/ParameterImage.styles.ts
|
|
16100
16121
|
init_emotion_jsx_shim();
|
|
16101
|
-
var
|
|
16102
|
-
var previewWrapper =
|
|
16122
|
+
var import_react149 = require("@emotion/react");
|
|
16123
|
+
var previewWrapper = import_react149.css`
|
|
16103
16124
|
margin-top: var(--spacing-xs);
|
|
16104
16125
|
background: var(--gray-50);
|
|
16105
16126
|
padding: var(--spacing-sm);
|
|
16106
16127
|
border: solid 1px var(--gray-300);
|
|
16107
16128
|
border-radius: var(--rounded-sm);
|
|
16108
16129
|
`;
|
|
16109
|
-
var previewLink =
|
|
16130
|
+
var previewLink = import_react149.css`
|
|
16110
16131
|
display: block;
|
|
16111
16132
|
width: 100%;
|
|
16112
16133
|
|
|
@@ -16114,7 +16135,7 @@ var previewLink = import_react148.css`
|
|
|
16114
16135
|
max-height: 9rem;
|
|
16115
16136
|
}
|
|
16116
16137
|
`;
|
|
16117
|
-
var previewModalWrapper =
|
|
16138
|
+
var previewModalWrapper = import_react149.css`
|
|
16118
16139
|
background: var(--gray-50);
|
|
16119
16140
|
display: flex;
|
|
16120
16141
|
height: 100%;
|
|
@@ -16123,7 +16144,7 @@ var previewModalWrapper = import_react148.css`
|
|
|
16123
16144
|
border: solid 1px var(--gray-300);
|
|
16124
16145
|
border-radius: var(--rounded-sm);
|
|
16125
16146
|
`;
|
|
16126
|
-
var previewModalImage =
|
|
16147
|
+
var previewModalImage = import_react149.css`
|
|
16127
16148
|
display: flex;
|
|
16128
16149
|
height: 100%;
|
|
16129
16150
|
width: 100%;
|
|
@@ -16137,7 +16158,7 @@ var previewModalImage = import_react148.css`
|
|
|
16137
16158
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
16138
16159
|
var import_jsx_runtime127 = require("@emotion/react/jsx-runtime");
|
|
16139
16160
|
function ParameterImagePreview({ imageSrc }) {
|
|
16140
|
-
const [showModal, setShowModal] = (0,
|
|
16161
|
+
const [showModal, setShowModal] = (0, import_react150.useState)(false);
|
|
16141
16162
|
return imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { css: previewWrapper, children: [
|
|
16142
16163
|
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
|
|
16143
16164
|
/* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
@@ -16170,16 +16191,16 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
|
16170
16191
|
|
|
16171
16192
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
16172
16193
|
init_emotion_jsx_shim();
|
|
16173
|
-
var
|
|
16174
|
-
var
|
|
16194
|
+
var import_react154 = require("@emotion/react");
|
|
16195
|
+
var import_react155 = require("react");
|
|
16175
16196
|
|
|
16176
16197
|
// src/components/ParameterInputs/ParameterLabel.tsx
|
|
16177
16198
|
init_emotion_jsx_shim();
|
|
16178
16199
|
|
|
16179
16200
|
// src/components/ParameterInputs/styles/ParameterInput.styles.ts
|
|
16180
16201
|
init_emotion_jsx_shim();
|
|
16181
|
-
var
|
|
16182
|
-
var actionBarVisibilityStyles =
|
|
16202
|
+
var import_react151 = require("@emotion/react");
|
|
16203
|
+
var actionBarVisibilityStyles = import_react151.css`
|
|
16183
16204
|
[data-action-bar] {
|
|
16184
16205
|
opacity: 1;
|
|
16185
16206
|
transform: translateX(0);
|
|
@@ -16188,14 +16209,14 @@ var actionBarVisibilityStyles = import_react150.css`
|
|
|
16188
16209
|
transform var(--duration-fast) var(--timing-ease-out);
|
|
16189
16210
|
}
|
|
16190
16211
|
`;
|
|
16191
|
-
var actionBarVisibilityHiddenStyles =
|
|
16212
|
+
var actionBarVisibilityHiddenStyles = import_react151.css`
|
|
16192
16213
|
opacity: 0;
|
|
16193
16214
|
transform: translateX(1rem);
|
|
16194
16215
|
transition:
|
|
16195
16216
|
opacity var(--duration-fast) var(--timing-ease-out),
|
|
16196
16217
|
transform var(--duration-fast) var(--timing-ease-out);
|
|
16197
16218
|
`;
|
|
16198
|
-
var inputContainer2 =
|
|
16219
|
+
var inputContainer2 = import_react151.css`
|
|
16199
16220
|
position: relative;
|
|
16200
16221
|
scroll-margin: var(--spacing-2xl);
|
|
16201
16222
|
|
|
@@ -16209,14 +16230,14 @@ var inputContainer2 = import_react150.css`
|
|
|
16209
16230
|
${actionBarVisibilityStyles}
|
|
16210
16231
|
}
|
|
16211
16232
|
`;
|
|
16212
|
-
var labelText2 =
|
|
16233
|
+
var labelText2 = import_react151.css`
|
|
16213
16234
|
align-items: center;
|
|
16214
16235
|
display: flex;
|
|
16215
16236
|
gap: var(--spacing-xs);
|
|
16216
16237
|
font-weight: var(--fw-regular);
|
|
16217
16238
|
margin: 0 0 var(--spacing-xs);
|
|
16218
16239
|
`;
|
|
16219
|
-
var input3 =
|
|
16240
|
+
var input3 = import_react151.css`
|
|
16220
16241
|
display: block;
|
|
16221
16242
|
appearance: none;
|
|
16222
16243
|
box-sizing: border-box;
|
|
@@ -16269,18 +16290,18 @@ var input3 = import_react150.css`
|
|
|
16269
16290
|
opacity: var(--opacity-50);
|
|
16270
16291
|
}
|
|
16271
16292
|
`;
|
|
16272
|
-
var selectInput =
|
|
16293
|
+
var selectInput = import_react151.css`
|
|
16273
16294
|
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");
|
|
16274
16295
|
background-position: right var(--spacing-sm) center;
|
|
16275
16296
|
background-repeat: no-repeat;
|
|
16276
16297
|
background-size: 1rem;
|
|
16277
16298
|
padding-right: var(--spacing-xl);
|
|
16278
16299
|
`;
|
|
16279
|
-
var inputWrapper =
|
|
16300
|
+
var inputWrapper = import_react151.css`
|
|
16280
16301
|
display: flex; // used to correct overflow with chrome textarea
|
|
16281
16302
|
position: relative;
|
|
16282
16303
|
`;
|
|
16283
|
-
var inputIcon2 =
|
|
16304
|
+
var inputIcon2 = import_react151.css`
|
|
16284
16305
|
align-items: center;
|
|
16285
16306
|
background: var(--white);
|
|
16286
16307
|
border-radius: var(--rounded-md) 0 0 var(--rounded-md);
|
|
@@ -16296,7 +16317,7 @@ var inputIcon2 = import_react150.css`
|
|
|
16296
16317
|
width: var(--spacing-lg);
|
|
16297
16318
|
z-index: var(--z-10);
|
|
16298
16319
|
`;
|
|
16299
|
-
var inputToggleLabel2 =
|
|
16320
|
+
var inputToggleLabel2 = import_react151.css`
|
|
16300
16321
|
--inline-label-color: var(--typography-base);
|
|
16301
16322
|
align-items: center;
|
|
16302
16323
|
cursor: pointer;
|
|
@@ -16311,7 +16332,7 @@ var inputToggleLabel2 = import_react150.css`
|
|
|
16311
16332
|
--inline-label-color: var(--gray-400);
|
|
16312
16333
|
}
|
|
16313
16334
|
`;
|
|
16314
|
-
var toggleInput2 =
|
|
16335
|
+
var toggleInput2 = import_react151.css`
|
|
16315
16336
|
appearance: none;
|
|
16316
16337
|
border: 1px solid var(--gray-200);
|
|
16317
16338
|
background: var(--white);
|
|
@@ -16355,7 +16376,7 @@ var toggleInput2 = import_react150.css`
|
|
|
16355
16376
|
border-color: var(--gray-200);
|
|
16356
16377
|
}
|
|
16357
16378
|
`;
|
|
16358
|
-
var toggleInputIndeterminateState =
|
|
16379
|
+
var toggleInputIndeterminateState = import_react151.css`
|
|
16359
16380
|
&:indeterminate,
|
|
16360
16381
|
&:indeterminate:hover,
|
|
16361
16382
|
&:indeterminate:focus {
|
|
@@ -16366,7 +16387,7 @@ var toggleInputIndeterminateState = import_react150.css`
|
|
|
16366
16387
|
color: var(--accent-dark-active);
|
|
16367
16388
|
}
|
|
16368
16389
|
`;
|
|
16369
|
-
var inlineLabel2 =
|
|
16390
|
+
var inlineLabel2 = import_react151.css`
|
|
16370
16391
|
color: var(--inline-label-color);
|
|
16371
16392
|
padding-left: var(--spacing-md);
|
|
16372
16393
|
font-size: var(--fs-sm);
|
|
@@ -16383,7 +16404,7 @@ var inlineLabel2 = import_react150.css`
|
|
|
16383
16404
|
}
|
|
16384
16405
|
}
|
|
16385
16406
|
`;
|
|
16386
|
-
var inputMenu =
|
|
16407
|
+
var inputMenu = import_react151.css`
|
|
16387
16408
|
background: none;
|
|
16388
16409
|
border: none;
|
|
16389
16410
|
padding: var(--spacing-2xs);
|
|
@@ -16397,12 +16418,12 @@ var inputMenu = import_react150.css`
|
|
|
16397
16418
|
cursor: default;
|
|
16398
16419
|
}
|
|
16399
16420
|
`;
|
|
16400
|
-
var inputActionItems =
|
|
16421
|
+
var inputActionItems = import_react151.css`
|
|
16401
16422
|
display: flex;
|
|
16402
16423
|
z-index: var(--z-1);
|
|
16403
16424
|
${actionBarVisibilityHiddenStyles}
|
|
16404
16425
|
`;
|
|
16405
|
-
var inputMenuHover =
|
|
16426
|
+
var inputMenuHover = import_react151.css`
|
|
16406
16427
|
opacity: var(--opacity-50);
|
|
16407
16428
|
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
16408
16429
|
margin-top: 0.25rem;
|
|
@@ -16414,11 +16435,11 @@ var inputMenuHover = import_react150.css`
|
|
|
16414
16435
|
background-color: var(--gray-200);
|
|
16415
16436
|
}
|
|
16416
16437
|
`;
|
|
16417
|
-
var textarea2 =
|
|
16438
|
+
var textarea2 = import_react151.css`
|
|
16418
16439
|
resize: vertical;
|
|
16419
16440
|
min-height: 2rem;
|
|
16420
16441
|
`;
|
|
16421
|
-
var dataConnectButton =
|
|
16442
|
+
var dataConnectButton = import_react151.css`
|
|
16422
16443
|
align-items: center;
|
|
16423
16444
|
appearance: none;
|
|
16424
16445
|
box-sizing: border-box;
|
|
@@ -16454,7 +16475,7 @@ var dataConnectButton = import_react150.css`
|
|
|
16454
16475
|
pointer-events: none;
|
|
16455
16476
|
}
|
|
16456
16477
|
`;
|
|
16457
|
-
var linkParameterEmptyContainer =
|
|
16478
|
+
var linkParameterEmptyContainer = import_react151.css`
|
|
16458
16479
|
box-sizing: border-box;
|
|
16459
16480
|
background: var(--white);
|
|
16460
16481
|
border: 1px solid var(--gray-200);
|
|
@@ -16466,7 +16487,7 @@ var linkParameterEmptyContainer = import_react150.css`
|
|
|
16466
16487
|
min-height: 2rem;
|
|
16467
16488
|
width: 100%;
|
|
16468
16489
|
`;
|
|
16469
|
-
var linkParameterControls =
|
|
16490
|
+
var linkParameterControls = import_react151.css`
|
|
16470
16491
|
position: absolute;
|
|
16471
16492
|
inset: 0 0 0 auto;
|
|
16472
16493
|
padding: 0 var(--spacing-base);
|
|
@@ -16475,7 +16496,7 @@ var linkParameterControls = import_react150.css`
|
|
|
16475
16496
|
justify-content: center;
|
|
16476
16497
|
gap: var(--spacing-base);
|
|
16477
16498
|
`;
|
|
16478
|
-
var linkParameterInput = (withExternalLinkIcon) =>
|
|
16499
|
+
var linkParameterInput = (withExternalLinkIcon) => import_react151.css`
|
|
16479
16500
|
padding-right: calc(
|
|
16480
16501
|
${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
|
|
16481
16502
|
var(--spacing-base)
|
|
@@ -16488,7 +16509,7 @@ var linkParameterInput = (withExternalLinkIcon) => import_react150.css`
|
|
|
16488
16509
|
}
|
|
16489
16510
|
}
|
|
16490
16511
|
`;
|
|
16491
|
-
var linkParameterIcon =
|
|
16512
|
+
var linkParameterIcon = import_react151.css`
|
|
16492
16513
|
align-items: center;
|
|
16493
16514
|
color: var(--primary-action-default);
|
|
16494
16515
|
display: flex;
|
|
@@ -16514,9 +16535,9 @@ var ParameterLabel = ({ id, asSpan, children, testId, ...props }) => {
|
|
|
16514
16535
|
|
|
16515
16536
|
// src/components/ParameterInputs/ParameterMenuButton.tsx
|
|
16516
16537
|
init_emotion_jsx_shim();
|
|
16517
|
-
var
|
|
16538
|
+
var import_react152 = require("react");
|
|
16518
16539
|
var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
|
|
16519
|
-
var ParameterMenuButton = (0,
|
|
16540
|
+
var ParameterMenuButton = (0, import_react152.forwardRef)(
|
|
16520
16541
|
({ label: label2, children, disabled: disabled2, withoutPortal }, ref) => {
|
|
16521
16542
|
return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
|
|
16522
16543
|
Menu,
|
|
@@ -16544,14 +16565,14 @@ var ParameterMenuButton = (0, import_react151.forwardRef)(
|
|
|
16544
16565
|
|
|
16545
16566
|
// src/components/ParameterInputs/styles/ParameterShell.styles.ts
|
|
16546
16567
|
init_emotion_jsx_shim();
|
|
16547
|
-
var
|
|
16548
|
-
var emptyParameterShell =
|
|
16568
|
+
var import_react153 = require("@emotion/react");
|
|
16569
|
+
var emptyParameterShell = import_react153.css`
|
|
16549
16570
|
border-radius: var(--rounded-sm);
|
|
16550
16571
|
flex-grow: 1;
|
|
16551
16572
|
position: relative;
|
|
16552
16573
|
max-width: 100%;
|
|
16553
16574
|
`;
|
|
16554
|
-
var emptyParameterShellText =
|
|
16575
|
+
var emptyParameterShellText = import_react153.css`
|
|
16555
16576
|
background: var(--brand-secondary-6);
|
|
16556
16577
|
border-radius: var(--rounded-sm);
|
|
16557
16578
|
padding: var(--spacing-sm);
|
|
@@ -16559,7 +16580,7 @@ var emptyParameterShellText = import_react152.css`
|
|
|
16559
16580
|
font-size: var(--fs-sm);
|
|
16560
16581
|
margin: 0;
|
|
16561
16582
|
`;
|
|
16562
|
-
var overrideMarker =
|
|
16583
|
+
var overrideMarker = import_react153.css`
|
|
16563
16584
|
border-radius: var(--rounded-sm);
|
|
16564
16585
|
border: 10px solid var(--gray-300);
|
|
16565
16586
|
border-left-color: transparent;
|
|
@@ -16631,7 +16652,7 @@ var ParameterShell = ({
|
|
|
16631
16652
|
menuWithoutPortal,
|
|
16632
16653
|
...props
|
|
16633
16654
|
}) => {
|
|
16634
|
-
const [manualErrorMessage, setManualErrorMessage] = (0,
|
|
16655
|
+
const [manualErrorMessage, setManualErrorMessage] = (0, import_react155.useState)(void 0);
|
|
16635
16656
|
const setErrorMessage = (message) => setManualErrorMessage(message);
|
|
16636
16657
|
const errorMessaging = errorMessage || manualErrorMessage;
|
|
16637
16658
|
return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { css: inputContainer2, ...props, id, children: [
|
|
@@ -16653,7 +16674,7 @@ var ParameterShell = ({
|
|
|
16653
16674
|
css: [
|
|
16654
16675
|
inputMenu,
|
|
16655
16676
|
inputActionItems,
|
|
16656
|
-
menuItems ?
|
|
16677
|
+
menuItems ? import_react154.css`
|
|
16657
16678
|
right: var(--spacing-md);
|
|
16658
16679
|
` : void 0
|
|
16659
16680
|
],
|
|
@@ -16712,7 +16733,7 @@ var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime1
|
|
|
16712
16733
|
|
|
16713
16734
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
16714
16735
|
var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
|
|
16715
|
-
var ParameterImage = (0,
|
|
16736
|
+
var ParameterImage = (0, import_react156.forwardRef)(
|
|
16716
16737
|
({ children, ...props }, ref) => {
|
|
16717
16738
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
16718
16739
|
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
|
|
@@ -16721,10 +16742,10 @@ var ParameterImage = (0, import_react155.forwardRef)(
|
|
|
16721
16742
|
] });
|
|
16722
16743
|
}
|
|
16723
16744
|
);
|
|
16724
|
-
var ParameterImageInner = (0,
|
|
16745
|
+
var ParameterImageInner = (0, import_react156.forwardRef)((props, ref) => {
|
|
16725
16746
|
const { value } = props;
|
|
16726
16747
|
const { id, label: label2, hiddenLabel, errorMessage } = useParameterShell();
|
|
16727
|
-
const deferredValue = (0,
|
|
16748
|
+
const deferredValue = (0, import_react156.useDeferredValue)(value);
|
|
16728
16749
|
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
|
|
16729
16750
|
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
|
|
16730
16751
|
"input",
|
|
@@ -16744,13 +16765,13 @@ var ParameterImageInner = (0, import_react155.forwardRef)((props, ref) => {
|
|
|
16744
16765
|
|
|
16745
16766
|
// src/components/ParameterInputs/ParameterInput.tsx
|
|
16746
16767
|
init_emotion_jsx_shim();
|
|
16747
|
-
var
|
|
16768
|
+
var import_react157 = require("react");
|
|
16748
16769
|
var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
|
|
16749
|
-
var ParameterInput = (0,
|
|
16770
|
+
var ParameterInput = (0, import_react157.forwardRef)((props, ref) => {
|
|
16750
16771
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
16751
16772
|
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ParameterInputInner, { ref, ...innerProps }) });
|
|
16752
16773
|
});
|
|
16753
|
-
var ParameterInputInner = (0,
|
|
16774
|
+
var ParameterInputInner = (0, import_react157.forwardRef)(({ enableMouseWheel = false, ...props }, ref) => {
|
|
16754
16775
|
const { id, label: label2, hiddenLabel } = useParameterShell();
|
|
16755
16776
|
const isNumberInputAndMouseWheelDisabled = enableMouseWheel !== true && props.type === "number";
|
|
16756
16777
|
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
|
|
@@ -16770,7 +16791,7 @@ var ParameterInputInner = (0, import_react156.forwardRef)(({ enableMouseWheel =
|
|
|
16770
16791
|
|
|
16771
16792
|
// src/components/ParameterInputs/ParameterLabels.tsx
|
|
16772
16793
|
init_emotion_jsx_shim();
|
|
16773
|
-
var
|
|
16794
|
+
var import_react158 = require("react");
|
|
16774
16795
|
var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
|
|
16775
16796
|
var ParameterLabels = ({ disabled: disabled2 = false, ...props }) => {
|
|
16776
16797
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
@@ -16832,18 +16853,18 @@ var ParameterLabelsInner = (props) => {
|
|
|
16832
16853
|
var _a;
|
|
16833
16854
|
const { label: label2 } = useParameterShell();
|
|
16834
16855
|
const { onChange } = props;
|
|
16835
|
-
const containerRef = (0,
|
|
16836
|
-
const hasPositionedRef = (0,
|
|
16837
|
-
const selectedValues = (0,
|
|
16856
|
+
const containerRef = (0, import_react158.useRef)(null);
|
|
16857
|
+
const hasPositionedRef = (0, import_react158.useRef)(false);
|
|
16858
|
+
const selectedValues = (0, import_react158.useMemo)(
|
|
16838
16859
|
() => {
|
|
16839
16860
|
var _a2, _b;
|
|
16840
16861
|
return (_b = (_a2 = props.value) != null ? _a2 : props.defaultValue) != null ? _b : [];
|
|
16841
16862
|
},
|
|
16842
16863
|
[props.value, props.defaultValue]
|
|
16843
16864
|
);
|
|
16844
|
-
const items = (0,
|
|
16845
|
-
const optionsMap = (0,
|
|
16846
|
-
const selectedIds = (0,
|
|
16865
|
+
const items = (0, import_react158.useMemo)(() => convertOptionsToItems(props.options), [props.options]);
|
|
16866
|
+
const optionsMap = (0, import_react158.useMemo)(() => createOptionsMap(props.options), [props.options]);
|
|
16867
|
+
const selectedIds = (0, import_react158.useMemo)(() => {
|
|
16847
16868
|
if (!Array.isArray(selectedValues)) {
|
|
16848
16869
|
return /* @__PURE__ */ new Set();
|
|
16849
16870
|
}
|
|
@@ -16935,9 +16956,9 @@ var ParameterLabelsInner = (props) => {
|
|
|
16935
16956
|
|
|
16936
16957
|
// src/components/ParameterInputs/ParameterLink.tsx
|
|
16937
16958
|
init_emotion_jsx_shim();
|
|
16938
|
-
var
|
|
16959
|
+
var import_react159 = require("react");
|
|
16939
16960
|
var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
|
|
16940
|
-
var ParameterLink = (0,
|
|
16961
|
+
var ParameterLink = (0, import_react159.forwardRef)(
|
|
16941
16962
|
({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
|
|
16942
16963
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
16943
16964
|
return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
@@ -16961,7 +16982,7 @@ var ParameterLink = (0, import_react158.forwardRef)(
|
|
|
16961
16982
|
);
|
|
16962
16983
|
}
|
|
16963
16984
|
);
|
|
16964
|
-
var ParameterLinkInner = (0,
|
|
16985
|
+
var ParameterLinkInner = (0, import_react159.forwardRef)(
|
|
16965
16986
|
({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
|
|
16966
16987
|
const { id, label: label2, hiddenLabel } = useParameterShell();
|
|
16967
16988
|
if (!props.value)
|
|
@@ -17147,24 +17168,24 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
17147
17168
|
|
|
17148
17169
|
// src/components/ParameterInputs/ParameterNumberSlider.tsx
|
|
17149
17170
|
init_emotion_jsx_shim();
|
|
17150
|
-
var
|
|
17171
|
+
var import_react163 = require("react");
|
|
17151
17172
|
|
|
17152
17173
|
// src/components/Slider/index.ts
|
|
17153
17174
|
init_emotion_jsx_shim();
|
|
17154
17175
|
|
|
17155
17176
|
// src/components/Slider/Slider.tsx
|
|
17156
17177
|
init_emotion_jsx_shim();
|
|
17157
|
-
var
|
|
17178
|
+
var import_react162 = require("react");
|
|
17158
17179
|
|
|
17159
17180
|
// src/components/Slider/SliderLabels.tsx
|
|
17160
17181
|
init_emotion_jsx_shim();
|
|
17161
|
-
var
|
|
17182
|
+
var import_react161 = require("react");
|
|
17162
17183
|
|
|
17163
17184
|
// src/components/Slider/styles/Slider.styles.ts
|
|
17164
17185
|
init_emotion_jsx_shim();
|
|
17165
|
-
var
|
|
17186
|
+
var import_react160 = require("@emotion/react");
|
|
17166
17187
|
var thumbSize = "20px";
|
|
17167
|
-
var disabledThumbStyles =
|
|
17188
|
+
var disabledThumbStyles = import_react160.css`
|
|
17168
17189
|
background: var(--white);
|
|
17169
17190
|
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");
|
|
17170
17191
|
background-repeat: no-repeat;
|
|
@@ -17172,22 +17193,22 @@ var disabledThumbStyles = import_react159.css`
|
|
|
17172
17193
|
background-size: 12px 12px;
|
|
17173
17194
|
border: 1px solid var(--gray-500);
|
|
17174
17195
|
`;
|
|
17175
|
-
var container3 =
|
|
17196
|
+
var container3 = import_react160.css`
|
|
17176
17197
|
display: flex;
|
|
17177
17198
|
align-items: flex-start;
|
|
17178
17199
|
gap: var(--spacing-base);
|
|
17179
17200
|
width: 100%;
|
|
17180
17201
|
`;
|
|
17181
|
-
var sliderContainer =
|
|
17202
|
+
var sliderContainer = import_react160.css`
|
|
17182
17203
|
flex: 1;
|
|
17183
17204
|
display: flex;
|
|
17184
17205
|
flex-direction: column;
|
|
17185
17206
|
`;
|
|
17186
|
-
var sliderTrackContainer =
|
|
17207
|
+
var sliderTrackContainer = import_react160.css`
|
|
17187
17208
|
position: relative;
|
|
17188
17209
|
padding: var(--spacing-xs) 0;
|
|
17189
17210
|
`;
|
|
17190
|
-
var progressTrack =
|
|
17211
|
+
var progressTrack = import_react160.css`
|
|
17191
17212
|
position: absolute;
|
|
17192
17213
|
top: 50%;
|
|
17193
17214
|
left: 0;
|
|
@@ -17197,7 +17218,7 @@ var progressTrack = import_react159.css`
|
|
|
17197
17218
|
margin-top: -3px;
|
|
17198
17219
|
border-radius: var(--rounded-sm);
|
|
17199
17220
|
`;
|
|
17200
|
-
var progressTrackBackground =
|
|
17221
|
+
var progressTrackBackground = import_react160.css`
|
|
17201
17222
|
position: absolute;
|
|
17202
17223
|
top: 0;
|
|
17203
17224
|
left: 0;
|
|
@@ -17207,7 +17228,7 @@ var progressTrackBackground = import_react159.css`
|
|
|
17207
17228
|
border: 1px solid var(--gray-200);
|
|
17208
17229
|
border-radius: var(--rounded-sm);
|
|
17209
17230
|
`;
|
|
17210
|
-
var progressTrackFill =
|
|
17231
|
+
var progressTrackFill = import_react160.css`
|
|
17211
17232
|
position: absolute;
|
|
17212
17233
|
top: 0;
|
|
17213
17234
|
left: 0;
|
|
@@ -17215,19 +17236,19 @@ var progressTrackFill = import_react159.css`
|
|
|
17215
17236
|
background: var(--accent-light);
|
|
17216
17237
|
border-radius: var(--rounded-sm);
|
|
17217
17238
|
`;
|
|
17218
|
-
var tickMarksContainer =
|
|
17239
|
+
var tickMarksContainer = import_react160.css`
|
|
17219
17240
|
position: relative;
|
|
17220
17241
|
height: 1rem;
|
|
17221
17242
|
margin-top: calc(-1 * var(--spacing-base) + var(--spacing-xs));
|
|
17222
17243
|
`;
|
|
17223
|
-
var tickMark =
|
|
17244
|
+
var tickMark = import_react160.css`
|
|
17224
17245
|
position: absolute;
|
|
17225
17246
|
top: 0;
|
|
17226
17247
|
width: 0.5px;
|
|
17227
17248
|
height: 8px;
|
|
17228
17249
|
background-color: var(--gray-300);
|
|
17229
17250
|
`;
|
|
17230
|
-
var largeTickMark =
|
|
17251
|
+
var largeTickMark = import_react160.css`
|
|
17231
17252
|
position: absolute;
|
|
17232
17253
|
top: 0;
|
|
17233
17254
|
width: 1px;
|
|
@@ -17235,7 +17256,7 @@ var largeTickMark = import_react159.css`
|
|
|
17235
17256
|
background-color: var(--gray-400);
|
|
17236
17257
|
transform: translateX(-50%);
|
|
17237
17258
|
`;
|
|
17238
|
-
var slider =
|
|
17259
|
+
var slider = import_react160.css`
|
|
17239
17260
|
appearance: none;
|
|
17240
17261
|
width: 100%;
|
|
17241
17262
|
width: calc(100% + ${thumbSize});
|
|
@@ -17352,12 +17373,12 @@ var slider = import_react159.css`
|
|
|
17352
17373
|
0 0 0 3px var(--accent-light);
|
|
17353
17374
|
}
|
|
17354
17375
|
`;
|
|
17355
|
-
var labelsContainer =
|
|
17376
|
+
var labelsContainer = import_react160.css`
|
|
17356
17377
|
position: relative;
|
|
17357
17378
|
height: 1.5rem;
|
|
17358
17379
|
width: 100%;
|
|
17359
17380
|
`;
|
|
17360
|
-
var label =
|
|
17381
|
+
var label = import_react160.css`
|
|
17361
17382
|
position: absolute;
|
|
17362
17383
|
top: 0;
|
|
17363
17384
|
font-size: var(--text-sm);
|
|
@@ -17401,12 +17422,12 @@ var label = import_react159.css`
|
|
|
17401
17422
|
max-width: 100%;
|
|
17402
17423
|
}
|
|
17403
17424
|
`;
|
|
17404
|
-
var numberInputContainer =
|
|
17425
|
+
var numberInputContainer = import_react160.css`
|
|
17405
17426
|
flex-shrink: 0;
|
|
17406
17427
|
min-width: 2rem;
|
|
17407
17428
|
margin-top: var(--spacing-sm);
|
|
17408
17429
|
`;
|
|
17409
|
-
var numberInput2 =
|
|
17430
|
+
var numberInput2 = import_react160.css`
|
|
17410
17431
|
appearance: none;
|
|
17411
17432
|
background-color: var(--white);
|
|
17412
17433
|
border: 1px solid var(--gray-200);
|
|
@@ -17584,9 +17605,9 @@ function calculateLabelVisibility(ticks, currentValue, containerWidth) {
|
|
|
17584
17605
|
}));
|
|
17585
17606
|
}
|
|
17586
17607
|
function SliderLabels({ ticks, currentValue, containerWidth = 300 }) {
|
|
17587
|
-
const containerRef = (0,
|
|
17588
|
-
const [measuredWidth, setMeasuredWidth] = (0,
|
|
17589
|
-
(0,
|
|
17608
|
+
const containerRef = (0, import_react161.useRef)(null);
|
|
17609
|
+
const [measuredWidth, setMeasuredWidth] = (0, import_react161.useState)(containerWidth);
|
|
17610
|
+
(0, import_react161.useEffect)(() => {
|
|
17590
17611
|
if (containerRef.current) {
|
|
17591
17612
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
17592
17613
|
for (const entry of entries) {
|
|
@@ -17623,7 +17644,7 @@ function SliderLabels({ ticks, currentValue, containerWidth = 300 }) {
|
|
|
17623
17644
|
|
|
17624
17645
|
// src/components/Slider/Slider.tsx
|
|
17625
17646
|
var import_jsx_runtime138 = require("@emotion/react/jsx-runtime");
|
|
17626
|
-
var Slider = (0,
|
|
17647
|
+
var Slider = (0, import_react162.forwardRef)(
|
|
17627
17648
|
({
|
|
17628
17649
|
value,
|
|
17629
17650
|
onChange,
|
|
@@ -17640,7 +17661,7 @@ var Slider = (0, import_react161.forwardRef)(
|
|
|
17640
17661
|
name
|
|
17641
17662
|
}, ref) => {
|
|
17642
17663
|
const isOptionsMode = Boolean(options && options.length > 0);
|
|
17643
|
-
const { min, max, step, smallTicks, largeTicks } = (0,
|
|
17664
|
+
const { min, max, step, smallTicks, largeTicks } = (0, import_react162.useMemo)(() => {
|
|
17644
17665
|
if (isOptionsMode && options) {
|
|
17645
17666
|
if (options.length === 0) {
|
|
17646
17667
|
return {
|
|
@@ -17718,14 +17739,14 @@ var Slider = (0, import_react161.forwardRef)(
|
|
|
17718
17739
|
}, [isOptionsMode, options, propMin, propMax, propStep]);
|
|
17719
17740
|
const isValueUnset = value === void 0 || value === null || typeof value === "number" && isNaN(value);
|
|
17720
17741
|
const clampedValue = isValueUnset ? min : Math.min(Math.max(value, min), max);
|
|
17721
|
-
const handleSliderChange = (0,
|
|
17742
|
+
const handleSliderChange = (0, import_react162.useCallback)(
|
|
17722
17743
|
(event) => {
|
|
17723
17744
|
const newValue = Number(event.target.value);
|
|
17724
17745
|
onChange(newValue);
|
|
17725
17746
|
},
|
|
17726
17747
|
[onChange]
|
|
17727
17748
|
);
|
|
17728
|
-
const handleNumberInputChange = (0,
|
|
17749
|
+
const handleNumberInputChange = (0, import_react162.useCallback)(
|
|
17729
17750
|
(event) => {
|
|
17730
17751
|
if (event.target.value === "") {
|
|
17731
17752
|
onChange(void 0);
|
|
@@ -17798,13 +17819,13 @@ Slider.displayName = "Slider";
|
|
|
17798
17819
|
|
|
17799
17820
|
// src/components/ParameterInputs/ParameterNumberSlider.tsx
|
|
17800
17821
|
var import_jsx_runtime139 = require("@emotion/react/jsx-runtime");
|
|
17801
|
-
var ParameterNumberSlider = (0,
|
|
17822
|
+
var ParameterNumberSlider = (0, import_react163.forwardRef)(
|
|
17802
17823
|
(props, ref) => {
|
|
17803
17824
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
17804
17825
|
return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(ParameterShell, { "data-testid": "parameter-number-slider", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(ParameterNumberSliderInner, { ref, ...innerProps }) });
|
|
17805
17826
|
}
|
|
17806
17827
|
);
|
|
17807
|
-
var ParameterNumberSliderInner = (0,
|
|
17828
|
+
var ParameterNumberSliderInner = (0, import_react163.forwardRef)(({ ...props }, ref) => {
|
|
17808
17829
|
const { id, label: label2, hiddenLabel } = useParameterShell();
|
|
17809
17830
|
return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
|
|
17810
17831
|
Slider,
|
|
@@ -17821,7 +17842,6 @@ ParameterNumberSliderInner.displayName = "ParameterNumberSliderInner";
|
|
|
17821
17842
|
|
|
17822
17843
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
17823
17844
|
init_emotion_jsx_shim();
|
|
17824
|
-
var import_react176 = require("@emotion/react");
|
|
17825
17845
|
var import_list3 = require("@lexical/list");
|
|
17826
17846
|
var import_markdown = require("@lexical/markdown");
|
|
17827
17847
|
var import_LexicalComposer = require("@lexical/react/LexicalComposer");
|
|
@@ -17958,7 +17978,7 @@ var defaultParameterConfiguration = {
|
|
|
17958
17978
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
17959
17979
|
var import_fast_equals2 = require("fast-equals");
|
|
17960
17980
|
var import_lexical10 = require("lexical");
|
|
17961
|
-
var
|
|
17981
|
+
var import_react179 = require("react");
|
|
17962
17982
|
|
|
17963
17983
|
// src/components/ParameterInputs/rich-text/CustomCodeNode.ts
|
|
17964
17984
|
init_emotion_jsx_shim();
|
|
@@ -17981,10 +18001,10 @@ init_emotion_jsx_shim();
|
|
|
17981
18001
|
var import_LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
|
|
17982
18002
|
var import_utils5 = require("@lexical/utils");
|
|
17983
18003
|
var import_lexical = require("lexical");
|
|
17984
|
-
var
|
|
18004
|
+
var import_react164 = require("react");
|
|
17985
18005
|
function DisableStylesPlugin() {
|
|
17986
18006
|
const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
|
|
17987
|
-
(0,
|
|
18007
|
+
(0, import_react164.useEffect)(() => {
|
|
17988
18008
|
return (0, import_utils5.mergeRegister)(
|
|
17989
18009
|
// Disable text alignment on paragraph nodes
|
|
17990
18010
|
editor.registerNodeTransform(import_lexical.ParagraphNode, (node) => {
|
|
@@ -17999,245 +18019,252 @@ function DisableStylesPlugin() {
|
|
|
17999
18019
|
|
|
18000
18020
|
// src/components/ParameterInputs/rich-text/editorStyles.ts
|
|
18001
18021
|
init_emotion_jsx_shim();
|
|
18002
|
-
var
|
|
18003
|
-
var textBold =
|
|
18004
|
-
|
|
18005
|
-
|
|
18006
|
-
var
|
|
18007
|
-
|
|
18008
|
-
|
|
18009
|
-
var
|
|
18010
|
-
|
|
18011
|
-
|
|
18012
|
-
var
|
|
18013
|
-
|
|
18014
|
-
|
|
18015
|
-
var
|
|
18016
|
-
|
|
18017
|
-
|
|
18018
|
-
var
|
|
18019
|
-
|
|
18020
|
-
|
|
18021
|
-
|
|
18022
|
-
|
|
18023
|
-
|
|
18024
|
-
|
|
18025
|
-
|
|
18026
|
-
|
|
18027
|
-
|
|
18028
|
-
|
|
18029
|
-
|
|
18030
|
-
|
|
18031
|
-
|
|
18032
|
-
|
|
18033
|
-
|
|
18034
|
-
vertical-align: sub;
|
|
18035
|
-
font-size: smaller;
|
|
18036
|
-
`;
|
|
18037
|
-
var linkElement = import_css2.css`
|
|
18038
|
-
${link}
|
|
18039
|
-
${linkColorDefault}
|
|
18040
|
-
text-decoration: underline;
|
|
18041
|
-
`;
|
|
18042
|
-
var h12 = import_css2.css`
|
|
18043
|
-
font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
|
|
18044
|
-
`;
|
|
18045
|
-
var h22 = import_css2.css`
|
|
18046
|
-
font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
|
|
18047
|
-
`;
|
|
18048
|
-
var h32 = import_css2.css`
|
|
18049
|
-
font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
|
|
18050
|
-
`;
|
|
18051
|
-
var h42 = import_css2.css`
|
|
18052
|
-
font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
|
|
18053
|
-
`;
|
|
18054
|
-
var h52 = import_css2.css`
|
|
18055
|
-
font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
|
|
18056
|
-
`;
|
|
18057
|
-
var h62 = import_css2.css`
|
|
18058
|
-
font-size: var(--fs-base);
|
|
18059
|
-
`;
|
|
18060
|
-
var heading1Element = import_css2.css`
|
|
18061
|
-
${h12}
|
|
18062
|
-
${commonHeadingAttr(true)}
|
|
18063
|
-
${commonLineHeight}
|
|
18064
|
-
`;
|
|
18065
|
-
var heading2Element = import_css2.css`
|
|
18066
|
-
${h22}
|
|
18067
|
-
${commonHeadingAttr(true)}
|
|
18068
|
-
${commonLineHeight}
|
|
18069
|
-
`;
|
|
18070
|
-
var heading3Element = import_css2.css`
|
|
18071
|
-
${h32}
|
|
18072
|
-
${commonHeadingAttr(true)}
|
|
18073
|
-
${commonLineHeight}
|
|
18074
|
-
`;
|
|
18075
|
-
var heading4Element = import_css2.css`
|
|
18076
|
-
${h42}
|
|
18077
|
-
${commonHeadingAttr(true)}
|
|
18078
|
-
${commonLineHeight}
|
|
18079
|
-
`;
|
|
18080
|
-
var heading5Element = import_css2.css`
|
|
18081
|
-
${h52}
|
|
18082
|
-
${commonHeadingAttr(true)}
|
|
18083
|
-
${commonLineHeight}
|
|
18084
|
-
`;
|
|
18085
|
-
var heading6Element = import_css2.css`
|
|
18086
|
-
${h62}
|
|
18087
|
-
${commonHeadingAttr(true)}
|
|
18088
|
-
${commonLineHeight}
|
|
18089
|
-
`;
|
|
18090
|
-
var paragraphElement = import_css2.css`
|
|
18091
|
-
line-height: 1.5;
|
|
18092
|
-
margin-bottom: var(--spacing-base);
|
|
18093
|
-
|
|
18094
|
-
&:last-child {
|
|
18095
|
-
margin-bottom: 0;
|
|
18022
|
+
var import_react165 = require("@emotion/react");
|
|
18023
|
+
var textBold = "ud-editor-text-bold";
|
|
18024
|
+
var textItalic = "ud-editor-text-italic";
|
|
18025
|
+
var textUnderline = "ud-editor-text-underline";
|
|
18026
|
+
var textStrikethrough = "ud-editor-text-strikethrough";
|
|
18027
|
+
var textUnderlineStrikethrough = "ud-editor-text-underline-strikethrough";
|
|
18028
|
+
var textCode = "ud-editor-text-code";
|
|
18029
|
+
var textSuperscript = "ud-editor-text-superscript";
|
|
18030
|
+
var textSubscript = "ud-editor-text-subscript";
|
|
18031
|
+
var linkElement = "ud-editor-link";
|
|
18032
|
+
var heading1Element = "ud-editor-h1";
|
|
18033
|
+
var heading2Element = "ud-editor-h2";
|
|
18034
|
+
var heading3Element = "ud-editor-h3";
|
|
18035
|
+
var heading4Element = "ud-editor-h4";
|
|
18036
|
+
var heading5Element = "ud-editor-h5";
|
|
18037
|
+
var heading6Element = "ud-editor-h6";
|
|
18038
|
+
var paragraphElement = "ud-editor-paragraph";
|
|
18039
|
+
var orderedListElement = "ud-editor-ol";
|
|
18040
|
+
var unorderedListElement = "ud-editor-ul";
|
|
18041
|
+
var listItemElement = "ud-editor-listitem";
|
|
18042
|
+
var nestedListItemElement = "ud-editor-nested-listitem";
|
|
18043
|
+
var blockquoteElement = "ud-editor-blockquote";
|
|
18044
|
+
var codeElement = "ud-editor-code";
|
|
18045
|
+
var tableElement = "ud-editor-table";
|
|
18046
|
+
var tableCellElement = "ud-editor-table-cell";
|
|
18047
|
+
var tableHeaderElement = "ud-editor-table-header";
|
|
18048
|
+
var editorThemeStyles = import_react165.css`
|
|
18049
|
+
.${textBold} {
|
|
18050
|
+
font-weight: 700;
|
|
18051
|
+
}
|
|
18052
|
+
.${textItalic} {
|
|
18053
|
+
font-style: italic;
|
|
18096
18054
|
}
|
|
18097
|
-
|
|
18098
|
-
|
|
18099
|
-
|
|
18100
|
-
|
|
18101
|
-
|
|
18102
|
-
|
|
18103
|
-
|
|
18104
|
-
|
|
18105
|
-
|
|
18055
|
+
.${textUnderline} {
|
|
18056
|
+
text-decoration: underline;
|
|
18057
|
+
}
|
|
18058
|
+
.${textStrikethrough} {
|
|
18059
|
+
text-decoration: line-through;
|
|
18060
|
+
}
|
|
18061
|
+
.${textUnderlineStrikethrough} {
|
|
18062
|
+
text-decoration: underline line-through;
|
|
18063
|
+
}
|
|
18064
|
+
.${textCode} {
|
|
18065
|
+
background-color: var(--gray-100);
|
|
18066
|
+
border-radius: var(--rounded-sm);
|
|
18067
|
+
display: inline-block;
|
|
18068
|
+
font-family: var(--ff-mono);
|
|
18069
|
+
font-feature-settings: 'liga' 0;
|
|
18070
|
+
font-variant-ligatures: none;
|
|
18071
|
+
font-size: var(--fs-sm);
|
|
18072
|
+
padding-left: var(--spacing-xs);
|
|
18073
|
+
padding-right: var(--spacing-xs);
|
|
18074
|
+
}
|
|
18075
|
+
.${textSuperscript} {
|
|
18076
|
+
vertical-align: super;
|
|
18077
|
+
font-size: smaller;
|
|
18078
|
+
}
|
|
18079
|
+
.${textSubscript} {
|
|
18080
|
+
vertical-align: sub;
|
|
18081
|
+
font-size: smaller;
|
|
18082
|
+
}
|
|
18083
|
+
.${linkElement} {
|
|
18084
|
+
${link}
|
|
18085
|
+
${linkColorDefault}
|
|
18086
|
+
text-decoration: underline;
|
|
18087
|
+
}
|
|
18088
|
+
.${heading1Element} {
|
|
18089
|
+
font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
|
|
18090
|
+
${commonHeadingAttr(true)}
|
|
18091
|
+
${commonLineHeight}
|
|
18092
|
+
}
|
|
18093
|
+
.${heading2Element} {
|
|
18094
|
+
font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
|
|
18095
|
+
${commonHeadingAttr(true)}
|
|
18096
|
+
${commonLineHeight}
|
|
18097
|
+
}
|
|
18098
|
+
.${heading3Element} {
|
|
18099
|
+
font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
|
|
18100
|
+
${commonHeadingAttr(true)}
|
|
18101
|
+
${commonLineHeight}
|
|
18102
|
+
}
|
|
18103
|
+
.${heading4Element} {
|
|
18104
|
+
font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
|
|
18105
|
+
${commonHeadingAttr(true)}
|
|
18106
|
+
${commonLineHeight}
|
|
18107
|
+
}
|
|
18108
|
+
.${heading5Element} {
|
|
18109
|
+
font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
|
|
18110
|
+
${commonHeadingAttr(true)}
|
|
18111
|
+
${commonLineHeight}
|
|
18112
|
+
}
|
|
18113
|
+
.${heading6Element} {
|
|
18114
|
+
font-size: var(--fs-base);
|
|
18115
|
+
${commonHeadingAttr(true)}
|
|
18116
|
+
${commonLineHeight}
|
|
18117
|
+
}
|
|
18118
|
+
.${paragraphElement} {
|
|
18119
|
+
line-height: 1.5;
|
|
18120
|
+
margin-bottom: var(--spacing-base);
|
|
18106
18121
|
|
|
18107
|
-
|
|
18108
|
-
|
|
18122
|
+
&:last-child {
|
|
18123
|
+
margin-bottom: 0;
|
|
18124
|
+
}
|
|
18109
18125
|
}
|
|
18126
|
+
.${orderedListElement} {
|
|
18127
|
+
${commonLineHeight}
|
|
18128
|
+
display: block;
|
|
18129
|
+
list-style: decimal;
|
|
18130
|
+
list-style-position: outside;
|
|
18131
|
+
margin-bottom: var(--spacing-base);
|
|
18132
|
+
margin-top: 0;
|
|
18133
|
+
padding: 0;
|
|
18110
18134
|
|
|
18111
|
-
|
|
18112
|
-
|
|
18135
|
+
&:last-child {
|
|
18136
|
+
margin-bottom: 0;
|
|
18137
|
+
}
|
|
18113
18138
|
|
|
18114
18139
|
ol {
|
|
18115
|
-
list-style-type:
|
|
18140
|
+
list-style-type: upper-alpha;
|
|
18116
18141
|
|
|
18117
18142
|
ol {
|
|
18118
|
-
list-style-type:
|
|
18143
|
+
list-style-type: lower-alpha;
|
|
18119
18144
|
|
|
18120
18145
|
ol {
|
|
18121
|
-
list-style-type:
|
|
18146
|
+
list-style-type: upper-roman;
|
|
18147
|
+
|
|
18148
|
+
ol {
|
|
18149
|
+
list-style-type: lower-roman;
|
|
18150
|
+
}
|
|
18122
18151
|
}
|
|
18123
18152
|
}
|
|
18124
18153
|
}
|
|
18125
18154
|
}
|
|
18126
|
-
|
|
18127
|
-
|
|
18128
|
-
|
|
18129
|
-
|
|
18130
|
-
|
|
18131
|
-
|
|
18132
|
-
|
|
18133
|
-
|
|
18134
|
-
padding: 0;
|
|
18135
|
-
|
|
18136
|
-
&:last-child {
|
|
18137
|
-
margin-bottom: 0;
|
|
18138
|
-
}
|
|
18155
|
+
.${unorderedListElement} {
|
|
18156
|
+
${commonLineHeight}
|
|
18157
|
+
display: block;
|
|
18158
|
+
list-style: disc;
|
|
18159
|
+
list-style-position: outside;
|
|
18160
|
+
margin-bottom: var(--spacing-base);
|
|
18161
|
+
margin-top: 0;
|
|
18162
|
+
padding: 0;
|
|
18139
18163
|
|
|
18140
|
-
|
|
18141
|
-
|
|
18164
|
+
&:last-child {
|
|
18165
|
+
margin-bottom: 0;
|
|
18166
|
+
}
|
|
18142
18167
|
|
|
18143
18168
|
ul {
|
|
18144
|
-
list-style-type:
|
|
18169
|
+
list-style-type: circle;
|
|
18170
|
+
|
|
18171
|
+
ul {
|
|
18172
|
+
list-style-type: square;
|
|
18173
|
+
}
|
|
18145
18174
|
}
|
|
18146
18175
|
}
|
|
18147
|
-
|
|
18148
|
-
var
|
|
18149
|
-
margin-left: var(--spacing-md);
|
|
18150
|
-
`;
|
|
18151
|
-
var nestedListItemElement = import_css2.css`
|
|
18152
|
-
list-style-type: none;
|
|
18153
|
-
`;
|
|
18154
|
-
var blockquoteElement = import_css2.css`
|
|
18155
|
-
border-left: 0.25rem solid var(--gray-300);
|
|
18156
|
-
color: var(--gray-600);
|
|
18157
|
-
margin-bottom: var(--spacing-base);
|
|
18158
|
-
padding-left: var(--spacing-base);
|
|
18159
|
-
|
|
18160
|
-
&:last-child {
|
|
18161
|
-
margin-bottom: 0;
|
|
18176
|
+
.${listItemElement} {
|
|
18177
|
+
margin-left: var(--spacing-md);
|
|
18162
18178
|
}
|
|
18163
|
-
|
|
18164
|
-
|
|
18165
|
-
|
|
18166
|
-
|
|
18167
|
-
|
|
18168
|
-
|
|
18169
|
-
|
|
18170
|
-
|
|
18171
|
-
font-size: var(--fs-sm);
|
|
18172
|
-
margin-bottom: var(--spacing-base);
|
|
18173
|
-
padding: var(--spacing-sm);
|
|
18179
|
+
.${nestedListItemElement} {
|
|
18180
|
+
list-style-type: none;
|
|
18181
|
+
}
|
|
18182
|
+
.${blockquoteElement} {
|
|
18183
|
+
border-left: 0.25rem solid var(--gray-300);
|
|
18184
|
+
color: var(--gray-600);
|
|
18185
|
+
margin-bottom: var(--spacing-base);
|
|
18186
|
+
padding-left: var(--spacing-base);
|
|
18174
18187
|
|
|
18175
|
-
|
|
18176
|
-
|
|
18188
|
+
&:last-child {
|
|
18189
|
+
margin-bottom: 0;
|
|
18190
|
+
}
|
|
18177
18191
|
}
|
|
18178
|
-
|
|
18179
|
-
var
|
|
18180
|
-
|
|
18181
|
-
|
|
18182
|
-
|
|
18183
|
-
|
|
18184
|
-
|
|
18185
|
-
|
|
18186
|
-
|
|
18192
|
+
.${codeElement} {
|
|
18193
|
+
background-color: var(--gray-100);
|
|
18194
|
+
border-radius: var(--rounded-sm);
|
|
18195
|
+
display: block;
|
|
18196
|
+
font-family: var(--ff-mono);
|
|
18197
|
+
font-feature-settings: 'liga' 0;
|
|
18198
|
+
font-variant-ligatures: none;
|
|
18199
|
+
font-size: var(--fs-sm);
|
|
18200
|
+
margin-bottom: var(--spacing-base);
|
|
18201
|
+
padding: var(--spacing-sm);
|
|
18187
18202
|
|
|
18188
|
-
|
|
18189
|
-
|
|
18203
|
+
&:last-child {
|
|
18204
|
+
margin-bottom: 0;
|
|
18205
|
+
}
|
|
18190
18206
|
}
|
|
18191
|
-
|
|
18192
|
-
|
|
18193
|
-
|
|
18194
|
-
|
|
18195
|
-
|
|
18196
|
-
|
|
18197
|
-
|
|
18198
|
-
|
|
18199
|
-
outline: none;
|
|
18200
|
-
padding: var(--spacing-sm);
|
|
18201
|
-
position: relative;
|
|
18202
|
-
text-align: start;
|
|
18203
|
-
vertical-align: top;
|
|
18204
|
-
width: 7rem;
|
|
18207
|
+
.${tableElement} {
|
|
18208
|
+
border-collapse: collapse;
|
|
18209
|
+
border-spacing: 0;
|
|
18210
|
+
border-color: var(--gray-300);
|
|
18211
|
+
border-width: 1px;
|
|
18212
|
+
border-style: solid;
|
|
18213
|
+
margin-bottom: var(--spacing-base);
|
|
18214
|
+
margin-top: 0;
|
|
18205
18215
|
|
|
18206
|
-
|
|
18207
|
-
|
|
18208
|
-
|
|
18209
|
-
content: '';
|
|
18210
|
-
height: 5px;
|
|
18211
|
-
left: 0;
|
|
18212
|
-
position: absolute;
|
|
18213
|
-
top: 100%;
|
|
18214
|
-
width: 100%;
|
|
18215
|
-
z-index: 1;
|
|
18216
|
+
&:last-child {
|
|
18217
|
+
margin-bottom: 0;
|
|
18218
|
+
}
|
|
18216
18219
|
}
|
|
18220
|
+
.${tableCellElement} {
|
|
18221
|
+
background-color: var(--white);
|
|
18222
|
+
border-color: var(--gray-300);
|
|
18223
|
+
border-style: solid;
|
|
18224
|
+
border-width: 1px;
|
|
18225
|
+
box-sizing: unset;
|
|
18226
|
+
min-width: 2rem;
|
|
18227
|
+
outline: none;
|
|
18228
|
+
padding: var(--spacing-sm);
|
|
18229
|
+
position: relative;
|
|
18230
|
+
text-align: start;
|
|
18231
|
+
vertical-align: top;
|
|
18232
|
+
width: 7rem;
|
|
18217
18233
|
|
|
18218
|
-
|
|
18219
|
-
|
|
18220
|
-
|
|
18221
|
-
|
|
18222
|
-
|
|
18223
|
-
|
|
18224
|
-
|
|
18225
|
-
|
|
18234
|
+
&::after {
|
|
18235
|
+
content: '';
|
|
18236
|
+
height: 5px;
|
|
18237
|
+
left: 0;
|
|
18238
|
+
position: absolute;
|
|
18239
|
+
top: 100%;
|
|
18240
|
+
width: 100%;
|
|
18241
|
+
z-index: 1;
|
|
18242
|
+
}
|
|
18243
|
+
|
|
18244
|
+
&::before {
|
|
18245
|
+
content: '';
|
|
18246
|
+
width: 5px;
|
|
18247
|
+
height: 100%;
|
|
18248
|
+
position: absolute;
|
|
18249
|
+
top: 0;
|
|
18250
|
+
left: 100%;
|
|
18251
|
+
z-index: 1;
|
|
18252
|
+
}
|
|
18253
|
+
}
|
|
18254
|
+
.${tableHeaderElement} {
|
|
18255
|
+
background-color: var(--gray-100);
|
|
18256
|
+
border-color: var(--gray-300);
|
|
18257
|
+
border-style: solid;
|
|
18258
|
+
border-width: 1px;
|
|
18259
|
+
box-sizing: unset;
|
|
18260
|
+
font-weight: normal;
|
|
18261
|
+
min-width: 2rem;
|
|
18262
|
+
outline: none;
|
|
18263
|
+
padding: var(--spacing-sm);
|
|
18264
|
+
text-align: start;
|
|
18265
|
+
vertical-align: top;
|
|
18266
|
+
width: 7rem;
|
|
18226
18267
|
}
|
|
18227
|
-
`;
|
|
18228
|
-
var tableHeaderElement = import_css2.css`
|
|
18229
|
-
background-color: var(--gray-100);
|
|
18230
|
-
border-color: var(--gray-300);
|
|
18231
|
-
border-style: solid;
|
|
18232
|
-
border-width: 1px;
|
|
18233
|
-
box-sizing: unset;
|
|
18234
|
-
font-weight: normal;
|
|
18235
|
-
min-width: 2rem;
|
|
18236
|
-
outline: none;
|
|
18237
|
-
padding: var(--spacing-sm);
|
|
18238
|
-
text-align: start;
|
|
18239
|
-
vertical-align: top;
|
|
18240
|
-
width: 7rem;
|
|
18241
18268
|
`;
|
|
18242
18269
|
|
|
18243
18270
|
// src/components/ParameterInputs/rich-text/ImprovedAssetSelectionPlugin.tsx
|
|
@@ -18245,10 +18272,10 @@ init_emotion_jsx_shim();
|
|
|
18245
18272
|
var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
|
|
18246
18273
|
var import_utils6 = require("@lexical/utils");
|
|
18247
18274
|
var import_lexical2 = require("lexical");
|
|
18248
|
-
var
|
|
18275
|
+
var import_react166 = require("react");
|
|
18249
18276
|
var ImprovedAssetSelectionPlugin = () => {
|
|
18250
18277
|
const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
|
|
18251
|
-
(0,
|
|
18278
|
+
(0, import_react166.useEffect)(() => {
|
|
18252
18279
|
editor.getRootElement();
|
|
18253
18280
|
const onRootClick = (event) => {
|
|
18254
18281
|
if (event.target !== editor.getRootElement()) {
|
|
@@ -18297,13 +18324,13 @@ var ImprovedAssetSelectionPlugin_default = ImprovedAssetSelectionPlugin;
|
|
|
18297
18324
|
|
|
18298
18325
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
18299
18326
|
init_emotion_jsx_shim();
|
|
18300
|
-
var
|
|
18327
|
+
var import_react167 = require("@emotion/react");
|
|
18301
18328
|
var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
|
|
18302
18329
|
var import_LexicalNodeEventPlugin = require("@lexical/react/LexicalNodeEventPlugin");
|
|
18303
18330
|
var import_utils7 = require("@lexical/utils");
|
|
18304
18331
|
var import_fast_equals = require("fast-equals");
|
|
18305
18332
|
var import_lexical4 = require("lexical");
|
|
18306
|
-
var
|
|
18333
|
+
var import_react168 = require("react");
|
|
18307
18334
|
|
|
18308
18335
|
// src/components/ParameterInputs/rich-text/utils.ts
|
|
18309
18336
|
init_emotion_jsx_shim();
|
|
@@ -18651,18 +18678,18 @@ var OPEN_LINK_NODE_MODAL_COMMAND = (0, import_lexical4.createCommand)(
|
|
|
18651
18678
|
);
|
|
18652
18679
|
var LINK_POPOVER_OFFSET_X = 0;
|
|
18653
18680
|
var LINK_POPOVER_OFFSET_Y = 8;
|
|
18654
|
-
var linkPopover =
|
|
18681
|
+
var linkPopover = import_react167.css`
|
|
18655
18682
|
position: absolute;
|
|
18656
18683
|
z-index: 11;
|
|
18657
18684
|
`;
|
|
18658
|
-
var linkPopoverContainer =
|
|
18685
|
+
var linkPopoverContainer = import_react167.css`
|
|
18659
18686
|
${Popover};
|
|
18660
18687
|
${PopoverBody};
|
|
18661
18688
|
${PopoverVariantSmall};
|
|
18662
18689
|
align-items: center;
|
|
18663
18690
|
display: flex;
|
|
18664
18691
|
`;
|
|
18665
|
-
var linkPopoverAnchor =
|
|
18692
|
+
var linkPopoverAnchor = import_react167.css`
|
|
18666
18693
|
${link}
|
|
18667
18694
|
${linkColorDefault}
|
|
18668
18695
|
`;
|
|
@@ -18675,17 +18702,17 @@ function LinkNodePlugin({
|
|
|
18675
18702
|
return path;
|
|
18676
18703
|
};
|
|
18677
18704
|
const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
|
|
18678
|
-
const [linkPopoverState, setLinkPopoverState] = (0,
|
|
18679
|
-
const linkPopoverElRef = (0,
|
|
18680
|
-
const [isEditorFocused, setIsEditorFocused] = (0,
|
|
18681
|
-
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0,
|
|
18682
|
-
(0,
|
|
18705
|
+
const [linkPopoverState, setLinkPopoverState] = (0, import_react168.useState)();
|
|
18706
|
+
const linkPopoverElRef = (0, import_react168.useRef)(null);
|
|
18707
|
+
const [isEditorFocused, setIsEditorFocused] = (0, import_react168.useState)(false);
|
|
18708
|
+
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react168.useState)(false);
|
|
18709
|
+
(0, import_react168.useEffect)(() => {
|
|
18683
18710
|
if (!isEditorFocused && !isLinkPopoverFocused) {
|
|
18684
18711
|
setLinkPopoverState(void 0);
|
|
18685
18712
|
return;
|
|
18686
18713
|
}
|
|
18687
18714
|
}, [isEditorFocused, isLinkPopoverFocused]);
|
|
18688
|
-
(0,
|
|
18715
|
+
(0, import_react168.useEffect)(() => {
|
|
18689
18716
|
if (!editor.hasNodes([LinkNode])) {
|
|
18690
18717
|
throw new Error("LinkNode not registered on editor");
|
|
18691
18718
|
}
|
|
@@ -18789,7 +18816,7 @@ function LinkNodePlugin({
|
|
|
18789
18816
|
)
|
|
18790
18817
|
);
|
|
18791
18818
|
}, [editor, onConnectLink]);
|
|
18792
|
-
const maybeShowLinkToolbar = (0,
|
|
18819
|
+
const maybeShowLinkToolbar = (0, import_react168.useCallback)(() => {
|
|
18793
18820
|
if (!editor.isEditable()) {
|
|
18794
18821
|
return;
|
|
18795
18822
|
}
|
|
@@ -18823,7 +18850,7 @@ function LinkNodePlugin({
|
|
|
18823
18850
|
}
|
|
18824
18851
|
});
|
|
18825
18852
|
}, [editor, positioningAnchorEl]);
|
|
18826
|
-
(0,
|
|
18853
|
+
(0, import_react168.useEffect)(() => {
|
|
18827
18854
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
18828
18855
|
requestAnimationFrame(() => {
|
|
18829
18856
|
editorState.read(() => {
|
|
@@ -18911,7 +18938,7 @@ var import_list = require("@lexical/list");
|
|
|
18911
18938
|
var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
|
|
18912
18939
|
var import_utils10 = require("@lexical/utils");
|
|
18913
18940
|
var import_lexical5 = require("lexical");
|
|
18914
|
-
var
|
|
18941
|
+
var import_react169 = require("react");
|
|
18915
18942
|
function isIndentPermitted(maxDepth) {
|
|
18916
18943
|
const selection = (0, import_lexical5.$getSelection)();
|
|
18917
18944
|
if (!(0, import_lexical5.$isRangeSelection)(selection)) {
|
|
@@ -18966,8 +18993,8 @@ function $indentOverTab(selection) {
|
|
|
18966
18993
|
}
|
|
18967
18994
|
function ListIndentPlugin({ maxDepth }) {
|
|
18968
18995
|
const [editor] = (0, import_LexicalComposerContext4.useLexicalComposerContext)();
|
|
18969
|
-
const isInListItemNode = (0,
|
|
18970
|
-
(0,
|
|
18996
|
+
const isInListItemNode = (0, import_react169.useRef)(false);
|
|
18997
|
+
(0, import_react169.useEffect)(() => {
|
|
18971
18998
|
return editor.registerCommand(
|
|
18972
18999
|
import_lexical5.SELECTION_CHANGE_COMMAND,
|
|
18973
19000
|
() => {
|
|
@@ -18984,7 +19011,7 @@ function ListIndentPlugin({ maxDepth }) {
|
|
|
18984
19011
|
import_lexical5.COMMAND_PRIORITY_NORMAL
|
|
18985
19012
|
);
|
|
18986
19013
|
}, [editor]);
|
|
18987
|
-
(0,
|
|
19014
|
+
(0, import_react169.useEffect)(() => {
|
|
18988
19015
|
return (0, import_utils10.mergeRegister)(
|
|
18989
19016
|
editor.registerCommand(
|
|
18990
19017
|
import_lexical5.INDENT_CONTENT_COMMAND,
|
|
@@ -19014,12 +19041,12 @@ function ListIndentPlugin({ maxDepth }) {
|
|
|
19014
19041
|
|
|
19015
19042
|
// src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
|
|
19016
19043
|
init_emotion_jsx_shim();
|
|
19017
|
-
var
|
|
19044
|
+
var import_react170 = require("@emotion/react");
|
|
19018
19045
|
var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
|
|
19019
19046
|
var import_useLexicalEditable = require("@lexical/react/useLexicalEditable");
|
|
19020
19047
|
var import_table = require("@lexical/table");
|
|
19021
19048
|
var import_lexical6 = require("lexical");
|
|
19022
|
-
var
|
|
19049
|
+
var import_react171 = require("react");
|
|
19023
19050
|
var import_jsx_runtime141 = require("@emotion/react/jsx-runtime");
|
|
19024
19051
|
function computeSelectionCount(selection) {
|
|
19025
19052
|
const selectionShape = selection.getShape();
|
|
@@ -19028,14 +19055,14 @@ function computeSelectionCount(selection) {
|
|
|
19028
19055
|
rows: selectionShape.toY - selectionShape.fromY + 1
|
|
19029
19056
|
};
|
|
19030
19057
|
}
|
|
19031
|
-
var tableActionMenuTrigger =
|
|
19058
|
+
var tableActionMenuTrigger = import_react170.css`
|
|
19032
19059
|
position: absolute;
|
|
19033
19060
|
transform: translate(calc(-100% - 1px), 1px);
|
|
19034
19061
|
`;
|
|
19035
|
-
var TableActionMenuTrigger = (0,
|
|
19062
|
+
var TableActionMenuTrigger = (0, import_react171.forwardRef)((props, ref) => {
|
|
19036
19063
|
const { tableCellEl, positioningAnchorEl, ...rest } = props;
|
|
19037
|
-
const [coordinates, setCoordinates] = (0,
|
|
19038
|
-
(0,
|
|
19064
|
+
const [coordinates, setCoordinates] = (0, import_react171.useState)({ x: 0, y: 0 });
|
|
19065
|
+
(0, import_react171.useLayoutEffect)(() => {
|
|
19039
19066
|
const rect = tableCellEl.getBoundingClientRect();
|
|
19040
19067
|
const parentRect = positioningAnchorEl.getBoundingClientRect();
|
|
19041
19068
|
const relativeX = rect.right - parentRect.left + positioningAnchorEl.scrollLeft;
|
|
@@ -19068,16 +19095,16 @@ function TableActionMenu({
|
|
|
19068
19095
|
positioningAnchorEl
|
|
19069
19096
|
}) {
|
|
19070
19097
|
const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
|
|
19071
|
-
const [tableCellNode, updateTableCellNode] = (0,
|
|
19072
|
-
const [selectionCounts, updateSelectionCounts] = (0,
|
|
19098
|
+
const [tableCellNode, updateTableCellNode] = (0, import_react171.useState)(_tableCellNode);
|
|
19099
|
+
const [selectionCounts, updateSelectionCounts] = (0, import_react171.useState)({
|
|
19073
19100
|
columns: 1,
|
|
19074
19101
|
rows: 1
|
|
19075
19102
|
});
|
|
19076
|
-
const [menuTriggerKey, setMenuTriggerKey] = (0,
|
|
19103
|
+
const [menuTriggerKey, setMenuTriggerKey] = (0, import_react171.useState)(0);
|
|
19077
19104
|
const incrementMenuTriggerKey = () => {
|
|
19078
19105
|
setMenuTriggerKey((key) => key += 1);
|
|
19079
19106
|
};
|
|
19080
|
-
(0,
|
|
19107
|
+
(0, import_react171.useEffect)(() => {
|
|
19081
19108
|
return editor.registerMutationListener(
|
|
19082
19109
|
import_table.TableCellNode,
|
|
19083
19110
|
(nodeMutations) => {
|
|
@@ -19091,7 +19118,7 @@ function TableActionMenu({
|
|
|
19091
19118
|
{ skipInitialization: true }
|
|
19092
19119
|
);
|
|
19093
19120
|
}, [editor, tableCellNode]);
|
|
19094
|
-
(0,
|
|
19121
|
+
(0, import_react171.useEffect)(() => {
|
|
19095
19122
|
editor.getEditorState().read(() => {
|
|
19096
19123
|
const selection = (0, import_lexical6.$getSelection)();
|
|
19097
19124
|
if ((0, import_table.$isTableSelection)(selection)) {
|
|
@@ -19099,7 +19126,7 @@ function TableActionMenu({
|
|
|
19099
19126
|
}
|
|
19100
19127
|
});
|
|
19101
19128
|
}, [editor]);
|
|
19102
|
-
const clearTableSelection = (0,
|
|
19129
|
+
const clearTableSelection = (0, import_react171.useCallback)(() => {
|
|
19103
19130
|
editor.update(() => {
|
|
19104
19131
|
if (tableCellNode.isAttached()) {
|
|
19105
19132
|
const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
@@ -19116,7 +19143,7 @@ function TableActionMenu({
|
|
|
19116
19143
|
(0, import_lexical6.$setSelection)(null);
|
|
19117
19144
|
});
|
|
19118
19145
|
}, [editor, tableCellNode]);
|
|
19119
|
-
const insertTableRowAtSelection = (0,
|
|
19146
|
+
const insertTableRowAtSelection = (0, import_react171.useCallback)(
|
|
19120
19147
|
(shouldInsertAfter) => {
|
|
19121
19148
|
editor.update(() => {
|
|
19122
19149
|
for (let i = 0; i < selectionCounts.rows; i++) {
|
|
@@ -19126,7 +19153,7 @@ function TableActionMenu({
|
|
|
19126
19153
|
},
|
|
19127
19154
|
[editor, selectionCounts.rows]
|
|
19128
19155
|
);
|
|
19129
|
-
const insertTableColumnAtSelection = (0,
|
|
19156
|
+
const insertTableColumnAtSelection = (0, import_react171.useCallback)(
|
|
19130
19157
|
(shouldInsertAfter) => {
|
|
19131
19158
|
editor.update(() => {
|
|
19132
19159
|
for (let i = 0; i < selectionCounts.columns; i++) {
|
|
@@ -19136,26 +19163,26 @@ function TableActionMenu({
|
|
|
19136
19163
|
},
|
|
19137
19164
|
[editor, selectionCounts.columns]
|
|
19138
19165
|
);
|
|
19139
|
-
const deleteTableRowAtSelection = (0,
|
|
19166
|
+
const deleteTableRowAtSelection = (0, import_react171.useCallback)(() => {
|
|
19140
19167
|
editor.update(() => {
|
|
19141
19168
|
(0, import_table.$deleteTableRowAtSelection)();
|
|
19142
19169
|
});
|
|
19143
19170
|
incrementMenuTriggerKey();
|
|
19144
19171
|
}, [editor]);
|
|
19145
|
-
const deleteTableAtSelection = (0,
|
|
19172
|
+
const deleteTableAtSelection = (0, import_react171.useCallback)(() => {
|
|
19146
19173
|
editor.update(() => {
|
|
19147
19174
|
const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
19148
19175
|
tableNode.remove();
|
|
19149
19176
|
clearTableSelection();
|
|
19150
19177
|
});
|
|
19151
19178
|
}, [editor, tableCellNode, clearTableSelection]);
|
|
19152
|
-
const deleteTableColumnAtSelection = (0,
|
|
19179
|
+
const deleteTableColumnAtSelection = (0, import_react171.useCallback)(() => {
|
|
19153
19180
|
editor.update(() => {
|
|
19154
19181
|
(0, import_table.$deleteTableColumnAtSelection)();
|
|
19155
19182
|
});
|
|
19156
19183
|
incrementMenuTriggerKey();
|
|
19157
19184
|
}, [editor]);
|
|
19158
|
-
const toggleTableRowIsHeader = (0,
|
|
19185
|
+
const toggleTableRowIsHeader = (0, import_react171.useCallback)(() => {
|
|
19159
19186
|
editor.update(() => {
|
|
19160
19187
|
const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
19161
19188
|
const tableRowIndex = (0, import_table.$getTableRowIndexFromTableCellNode)(tableCellNode);
|
|
@@ -19175,7 +19202,7 @@ function TableActionMenu({
|
|
|
19175
19202
|
clearTableSelection();
|
|
19176
19203
|
});
|
|
19177
19204
|
}, [editor, tableCellNode, clearTableSelection]);
|
|
19178
|
-
const toggleTableColumnIsHeader = (0,
|
|
19205
|
+
const toggleTableColumnIsHeader = (0, import_react171.useCallback)(() => {
|
|
19179
19206
|
editor.update(() => {
|
|
19180
19207
|
const tableNode = (0, import_table.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
|
|
19181
19208
|
const tableColumnIndex = (0, import_table.$getTableColumnIndexFromTableCellNode)(tableCellNode);
|
|
@@ -19195,7 +19222,7 @@ function TableActionMenu({
|
|
|
19195
19222
|
clearTableSelection();
|
|
19196
19223
|
});
|
|
19197
19224
|
}, [editor, tableCellNode, clearTableSelection]);
|
|
19198
|
-
const menuItemCss = (0,
|
|
19225
|
+
const menuItemCss = (0, import_react170.css)({
|
|
19199
19226
|
fontSize: "var(--fs-sm)"
|
|
19200
19227
|
});
|
|
19201
19228
|
return /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
|
|
@@ -19266,10 +19293,10 @@ function TableCellActionMenuContainer({
|
|
|
19266
19293
|
positioningAnchorEl
|
|
19267
19294
|
}) {
|
|
19268
19295
|
const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
|
|
19269
|
-
const [tableCellNode, setTableMenuCellNode] = (0,
|
|
19270
|
-
const [tableCellNodeEl, _setTableMenuCellNodeEl] = (0,
|
|
19271
|
-
const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = (0,
|
|
19272
|
-
(0,
|
|
19296
|
+
const [tableCellNode, setTableMenuCellNode] = (0, import_react171.useState)(null);
|
|
19297
|
+
const [tableCellNodeEl, _setTableMenuCellNodeEl] = (0, import_react171.useState)(null);
|
|
19298
|
+
const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = (0, import_react171.useState)(null);
|
|
19299
|
+
(0, import_react171.useEffect)(() => {
|
|
19273
19300
|
const newPortalEl = document.createElement("div");
|
|
19274
19301
|
setTableMenuCellMenuPortalEl(newPortalEl);
|
|
19275
19302
|
menuPortalEl.appendChild(newPortalEl);
|
|
@@ -19277,14 +19304,14 @@ function TableCellActionMenuContainer({
|
|
|
19277
19304
|
newPortalEl.remove();
|
|
19278
19305
|
};
|
|
19279
19306
|
}, [menuPortalEl]);
|
|
19280
|
-
const setTableMenuCellNodeElem = (0,
|
|
19307
|
+
const setTableMenuCellNodeElem = (0, import_react171.useCallback)((elem) => {
|
|
19281
19308
|
if (elem) {
|
|
19282
19309
|
_setTableMenuCellNodeEl(elem);
|
|
19283
19310
|
} else {
|
|
19284
19311
|
_setTableMenuCellNodeEl(null);
|
|
19285
19312
|
}
|
|
19286
19313
|
}, []);
|
|
19287
|
-
const $moveMenu = (0,
|
|
19314
|
+
const $moveMenu = (0, import_react171.useCallback)(() => {
|
|
19288
19315
|
const selection = (0, import_lexical6.$getSelection)();
|
|
19289
19316
|
const nativeSelection = window.getSelection();
|
|
19290
19317
|
const activeElement = document.activeElement;
|
|
@@ -19313,7 +19340,7 @@ function TableCellActionMenuContainer({
|
|
|
19313
19340
|
setTableMenuCellNodeElem(null);
|
|
19314
19341
|
}
|
|
19315
19342
|
}, [editor, setTableMenuCellNodeElem]);
|
|
19316
|
-
(0,
|
|
19343
|
+
(0, import_react171.useEffect)(() => {
|
|
19317
19344
|
return editor.registerUpdateListener(() => {
|
|
19318
19345
|
editor.getEditorState().read(() => {
|
|
19319
19346
|
$moveMenu();
|
|
@@ -19341,18 +19368,18 @@ function TableActionMenuPlugin({
|
|
|
19341
19368
|
|
|
19342
19369
|
// src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
|
|
19343
19370
|
init_emotion_jsx_shim();
|
|
19344
|
-
var
|
|
19371
|
+
var import_react172 = require("@emotion/react");
|
|
19345
19372
|
var import_LexicalComposerContext6 = require("@lexical/react/LexicalComposerContext");
|
|
19346
19373
|
var import_useLexicalEditable2 = require("@lexical/react/useLexicalEditable");
|
|
19347
19374
|
var import_table2 = require("@lexical/table");
|
|
19348
19375
|
var import_utils12 = require("@lexical/utils");
|
|
19349
19376
|
var import_lexical7 = require("lexical");
|
|
19350
|
-
var
|
|
19377
|
+
var import_react173 = require("react");
|
|
19351
19378
|
var import_react_dom3 = require("react-dom");
|
|
19352
19379
|
var import_jsx_runtime142 = require("@emotion/react/jsx-runtime");
|
|
19353
19380
|
var MIN_ROW_HEIGHT = 33;
|
|
19354
19381
|
var MIN_COLUMN_WIDTH = 50;
|
|
19355
|
-
var tableResizer =
|
|
19382
|
+
var tableResizer = import_react172.css`
|
|
19356
19383
|
position: absolute;
|
|
19357
19384
|
z-index: var(--z-10);
|
|
19358
19385
|
`;
|
|
@@ -19374,15 +19401,15 @@ var fixedGetDOMCellFromTarget = (node) => {
|
|
|
19374
19401
|
return null;
|
|
19375
19402
|
};
|
|
19376
19403
|
function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
19377
|
-
const targetRef = (0,
|
|
19378
|
-
const resizerRef = (0,
|
|
19379
|
-
const tableRectRef = (0,
|
|
19380
|
-
const mouseStartPosRef = (0,
|
|
19381
|
-
const [mouseCurrentPos, updateMouseCurrentPos] = (0,
|
|
19382
|
-
const [activeCell, updateActiveCell] = (0,
|
|
19383
|
-
const [isMouseDown, updateIsMouseDown] = (0,
|
|
19384
|
-
const [draggingDirection, updateDraggingDirection] = (0,
|
|
19385
|
-
const resetState = (0,
|
|
19404
|
+
const targetRef = (0, import_react173.useRef)(null);
|
|
19405
|
+
const resizerRef = (0, import_react173.useRef)(null);
|
|
19406
|
+
const tableRectRef = (0, import_react173.useRef)(null);
|
|
19407
|
+
const mouseStartPosRef = (0, import_react173.useRef)(null);
|
|
19408
|
+
const [mouseCurrentPos, updateMouseCurrentPos] = (0, import_react173.useState)(null);
|
|
19409
|
+
const [activeCell, updateActiveCell] = (0, import_react173.useState)(null);
|
|
19410
|
+
const [isMouseDown, updateIsMouseDown] = (0, import_react173.useState)(false);
|
|
19411
|
+
const [draggingDirection, updateDraggingDirection] = (0, import_react173.useState)(null);
|
|
19412
|
+
const resetState = (0, import_react173.useCallback)(() => {
|
|
19386
19413
|
updateActiveCell(null);
|
|
19387
19414
|
targetRef.current = null;
|
|
19388
19415
|
updateDraggingDirection(null);
|
|
@@ -19392,7 +19419,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
19392
19419
|
const isMouseDownOnEvent = (event) => {
|
|
19393
19420
|
return (event.buttons & 1) === 1;
|
|
19394
19421
|
};
|
|
19395
|
-
(0,
|
|
19422
|
+
(0, import_react173.useEffect)(() => {
|
|
19396
19423
|
const onMouseMove = (event) => {
|
|
19397
19424
|
setTimeout(() => {
|
|
19398
19425
|
const target = event.target;
|
|
@@ -19459,7 +19486,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
19459
19486
|
}
|
|
19460
19487
|
return false;
|
|
19461
19488
|
};
|
|
19462
|
-
const updateRowHeight = (0,
|
|
19489
|
+
const updateRowHeight = (0, import_react173.useCallback)(
|
|
19463
19490
|
(heightChange) => {
|
|
19464
19491
|
if (!activeCell) {
|
|
19465
19492
|
throw new Error("TableCellResizer: Expected active cell.");
|
|
@@ -19521,7 +19548,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
19521
19548
|
}
|
|
19522
19549
|
}
|
|
19523
19550
|
};
|
|
19524
|
-
const updateColumnWidth = (0,
|
|
19551
|
+
const updateColumnWidth = (0, import_react173.useCallback)(
|
|
19525
19552
|
(widthChange) => {
|
|
19526
19553
|
if (!activeCell) {
|
|
19527
19554
|
throw new Error("TableCellResizer: Expected active cell.");
|
|
@@ -19555,7 +19582,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
19555
19582
|
},
|
|
19556
19583
|
[activeCell, editor]
|
|
19557
19584
|
);
|
|
19558
|
-
const mouseUpHandler = (0,
|
|
19585
|
+
const mouseUpHandler = (0, import_react173.useCallback)(
|
|
19559
19586
|
(direction) => {
|
|
19560
19587
|
const handler = (event) => {
|
|
19561
19588
|
event.preventDefault();
|
|
@@ -19584,7 +19611,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
19584
19611
|
},
|
|
19585
19612
|
[activeCell, resetState, updateColumnWidth, updateRowHeight]
|
|
19586
19613
|
);
|
|
19587
|
-
const toggleResize = (0,
|
|
19614
|
+
const toggleResize = (0, import_react173.useCallback)(
|
|
19588
19615
|
(direction) => (event) => {
|
|
19589
19616
|
event.preventDefault();
|
|
19590
19617
|
event.stopPropagation();
|
|
@@ -19601,7 +19628,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
19601
19628
|
},
|
|
19602
19629
|
[activeCell, mouseUpHandler]
|
|
19603
19630
|
);
|
|
19604
|
-
const getResizers = (0,
|
|
19631
|
+
const getResizers = (0, import_react173.useCallback)(() => {
|
|
19605
19632
|
if (activeCell) {
|
|
19606
19633
|
const { height, width, top: top2, left } = activeCell.elem.getBoundingClientRect();
|
|
19607
19634
|
const parentRect = positioningAnchorEl.getBoundingClientRect();
|
|
@@ -19672,7 +19699,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
19672
19699
|
function TableCellResizerPlugin({ positioningAnchorEl }) {
|
|
19673
19700
|
const [editor] = (0, import_LexicalComposerContext6.useLexicalComposerContext)();
|
|
19674
19701
|
const isEditable = (0, import_useLexicalEditable2.useLexicalEditable)();
|
|
19675
|
-
return (0,
|
|
19702
|
+
return (0, import_react173.useMemo)(
|
|
19676
19703
|
() => isEditable ? (0, import_react_dom3.createPortal)(
|
|
19677
19704
|
/* @__PURE__ */ (0, import_jsx_runtime142.jsx)(TableCellResizer, { editor, positioningAnchorEl }),
|
|
19678
19705
|
positioningAnchorEl
|
|
@@ -19686,11 +19713,11 @@ init_emotion_jsx_shim();
|
|
|
19686
19713
|
var import_LexicalComposerContext7 = require("@lexical/react/LexicalComposerContext");
|
|
19687
19714
|
var import_table3 = require("@lexical/table");
|
|
19688
19715
|
var import_lexical8 = require("lexical");
|
|
19689
|
-
var
|
|
19716
|
+
var import_react174 = require("react");
|
|
19690
19717
|
var TableSelectionPlugin = () => {
|
|
19691
19718
|
const [editor] = (0, import_LexicalComposerContext7.useLexicalComposerContext)();
|
|
19692
|
-
const [closestTableCellNode, setClosestTableCellNode] = (0,
|
|
19693
|
-
(0,
|
|
19719
|
+
const [closestTableCellNode, setClosestTableCellNode] = (0, import_react174.useState)(null);
|
|
19720
|
+
(0, import_react174.useEffect)(() => {
|
|
19694
19721
|
return editor.registerCommand(
|
|
19695
19722
|
import_lexical8.SELECTION_CHANGE_COMMAND,
|
|
19696
19723
|
() => {
|
|
@@ -19712,7 +19739,7 @@ var TableSelectionPlugin = () => {
|
|
|
19712
19739
|
import_lexical8.COMMAND_PRIORITY_NORMAL
|
|
19713
19740
|
);
|
|
19714
19741
|
}, [editor]);
|
|
19715
|
-
(0,
|
|
19742
|
+
(0, import_react174.useEffect)(() => {
|
|
19716
19743
|
const onControlA = (event) => {
|
|
19717
19744
|
if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
|
|
19718
19745
|
if (!closestTableCellNode) {
|
|
@@ -19736,7 +19763,7 @@ var TableSelectionPlugin_default = TableSelectionPlugin;
|
|
|
19736
19763
|
|
|
19737
19764
|
// src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
|
|
19738
19765
|
init_emotion_jsx_shim();
|
|
19739
|
-
var
|
|
19766
|
+
var import_react176 = require("@emotion/react");
|
|
19740
19767
|
var import_code2 = require("@lexical/code");
|
|
19741
19768
|
var import_list2 = require("@lexical/list");
|
|
19742
19769
|
var import_LexicalComposerContext8 = require("@lexical/react/LexicalComposerContext");
|
|
@@ -19745,7 +19772,7 @@ var import_selection2 = require("@lexical/selection");
|
|
|
19745
19772
|
var import_table4 = require("@lexical/table");
|
|
19746
19773
|
var import_utils13 = require("@lexical/utils");
|
|
19747
19774
|
var import_lexical9 = require("lexical");
|
|
19748
|
-
var
|
|
19775
|
+
var import_react177 = require("react");
|
|
19749
19776
|
|
|
19750
19777
|
// src/components/ParameterInputs/rich-text/toolbar/constants.ts
|
|
19751
19778
|
init_emotion_jsx_shim();
|
|
@@ -19763,29 +19790,29 @@ var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
|
|
|
19763
19790
|
|
|
19764
19791
|
// src/components/ParameterInputs/rich-text/toolbar/useRichTextToolbarState.ts
|
|
19765
19792
|
init_emotion_jsx_shim();
|
|
19766
|
-
var
|
|
19793
|
+
var import_react175 = require("react");
|
|
19767
19794
|
var useRichTextToolbarState = ({ config }) => {
|
|
19768
19795
|
var _a;
|
|
19769
|
-
const enabledBuiltInFormats = (0,
|
|
19796
|
+
const enabledBuiltInFormats = (0, import_react175.useMemo)(() => {
|
|
19770
19797
|
return richTextBuiltInFormats.filter((format) => {
|
|
19771
19798
|
var _a2, _b;
|
|
19772
19799
|
return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
|
|
19773
19800
|
});
|
|
19774
19801
|
}, [config]);
|
|
19775
|
-
const enabledBuiltInElements = (0,
|
|
19802
|
+
const enabledBuiltInElements = (0, import_react175.useMemo)(() => {
|
|
19776
19803
|
return richTextBuiltInElements.filter((element) => {
|
|
19777
19804
|
var _a2, _b;
|
|
19778
19805
|
return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
|
|
19779
19806
|
});
|
|
19780
19807
|
}, [config]);
|
|
19781
|
-
const enabledBuiltInFormatsWithIcon = (0,
|
|
19808
|
+
const enabledBuiltInFormatsWithIcon = (0, import_react175.useMemo)(() => {
|
|
19782
19809
|
return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
|
|
19783
19810
|
}, [enabledBuiltInFormats]);
|
|
19784
19811
|
const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
|
|
19785
19812
|
(format) => !FORMATS_WITH_ICON.has(format.type)
|
|
19786
19813
|
);
|
|
19787
|
-
const [activeFormats, setActiveFormats] = (0,
|
|
19788
|
-
const visibleFormatsWithIcon = (0,
|
|
19814
|
+
const [activeFormats, setActiveFormats] = (0, import_react175.useState)([]);
|
|
19815
|
+
const visibleFormatsWithIcon = (0, import_react175.useMemo)(() => {
|
|
19789
19816
|
const visibleFormats = /* @__PURE__ */ new Set();
|
|
19790
19817
|
activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
19791
19818
|
visibleFormats.add(type);
|
|
@@ -19795,7 +19822,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
19795
19822
|
});
|
|
19796
19823
|
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
19797
19824
|
}, [activeFormats, enabledBuiltInFormatsWithIcon]);
|
|
19798
|
-
const visibleFormatsWithoutIcon = (0,
|
|
19825
|
+
const visibleFormatsWithoutIcon = (0, import_react175.useMemo)(() => {
|
|
19799
19826
|
const visibleFormats = /* @__PURE__ */ new Set();
|
|
19800
19827
|
activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
19801
19828
|
visibleFormats.add(type);
|
|
@@ -19805,11 +19832,11 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
19805
19832
|
});
|
|
19806
19833
|
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
19807
19834
|
}, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
|
|
19808
|
-
const [activeElement, setActiveElement] = (0,
|
|
19835
|
+
const [activeElement, setActiveElement] = (0, import_react175.useState)("paragraph");
|
|
19809
19836
|
const enabledTextualElements = enabledBuiltInElements.filter(
|
|
19810
19837
|
(element) => TEXTUAL_ELEMENTS.includes(element.type)
|
|
19811
19838
|
);
|
|
19812
|
-
const visibleTextualElements = (0,
|
|
19839
|
+
const visibleTextualElements = (0, import_react175.useMemo)(() => {
|
|
19813
19840
|
if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
|
|
19814
19841
|
return enabledTextualElements;
|
|
19815
19842
|
}
|
|
@@ -19820,30 +19847,30 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
19820
19847
|
}
|
|
19821
19848
|
);
|
|
19822
19849
|
}, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
|
|
19823
|
-
const [isLink, setIsLink] = (0,
|
|
19824
|
-
const linkElementVisible = (0,
|
|
19850
|
+
const [isLink, setIsLink] = (0, import_react175.useState)(false);
|
|
19851
|
+
const linkElementVisible = (0, import_react175.useMemo)(() => {
|
|
19825
19852
|
return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
|
|
19826
19853
|
}, [isLink, enabledBuiltInElements]);
|
|
19827
|
-
const visibleLists = (0,
|
|
19854
|
+
const visibleLists = (0, import_react175.useMemo)(() => {
|
|
19828
19855
|
return new Set(
|
|
19829
19856
|
["orderedList", "unorderedList"].filter(
|
|
19830
19857
|
(type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
|
|
19831
19858
|
)
|
|
19832
19859
|
);
|
|
19833
19860
|
}, [activeElement, enabledBuiltInElements]);
|
|
19834
|
-
const quoteElementVisible = (0,
|
|
19861
|
+
const quoteElementVisible = (0, import_react175.useMemo)(() => {
|
|
19835
19862
|
return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
|
|
19836
19863
|
}, [activeElement, enabledBuiltInElements]);
|
|
19837
|
-
const codeElementVisible = (0,
|
|
19864
|
+
const codeElementVisible = (0, import_react175.useMemo)(() => {
|
|
19838
19865
|
return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
|
|
19839
19866
|
}, [activeElement, enabledBuiltInElements]);
|
|
19840
|
-
const tableElementVisible = (0,
|
|
19867
|
+
const tableElementVisible = (0, import_react175.useMemo)(() => {
|
|
19841
19868
|
return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
|
|
19842
19869
|
}, [activeElement, enabledBuiltInElements]);
|
|
19843
|
-
const assetElementVisible = (0,
|
|
19870
|
+
const assetElementVisible = (0, import_react175.useMemo)(() => {
|
|
19844
19871
|
return enabledBuiltInElements.some((element) => element.type === "asset") || activeElement === "asset";
|
|
19845
19872
|
}, [activeElement, enabledBuiltInElements]);
|
|
19846
|
-
const visibleElementsWithIcons = (0,
|
|
19873
|
+
const visibleElementsWithIcons = (0, import_react175.useMemo)(() => {
|
|
19847
19874
|
const visibleElements = /* @__PURE__ */ new Set();
|
|
19848
19875
|
if (linkElementVisible) {
|
|
19849
19876
|
visibleElements.add("link");
|
|
@@ -19855,7 +19882,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
19855
19882
|
}
|
|
19856
19883
|
return visibleElements;
|
|
19857
19884
|
}, [linkElementVisible, visibleLists]);
|
|
19858
|
-
const visibleInsertElementsWithIcons = (0,
|
|
19885
|
+
const visibleInsertElementsWithIcons = (0, import_react175.useMemo)(() => {
|
|
19859
19886
|
const visibleElements = /* @__PURE__ */ new Set();
|
|
19860
19887
|
if (quoteElementVisible) {
|
|
19861
19888
|
visibleElements.add("quote");
|
|
@@ -19894,7 +19921,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
19894
19921
|
|
|
19895
19922
|
// src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
|
|
19896
19923
|
var import_jsx_runtime143 = require("@emotion/react/jsx-runtime");
|
|
19897
|
-
var toolbar =
|
|
19924
|
+
var toolbar = import_react176.css`
|
|
19898
19925
|
${scrollbarStyles}
|
|
19899
19926
|
background: var(--gray-50);
|
|
19900
19927
|
border-radius: var(--rounded-base);
|
|
@@ -19908,7 +19935,7 @@ var toolbar = import_react174.css`
|
|
|
19908
19935
|
top: calc(var(--spacing-sm) * -2);
|
|
19909
19936
|
z-index: 10;
|
|
19910
19937
|
`;
|
|
19911
|
-
var toolbarGroup =
|
|
19938
|
+
var toolbarGroup = import_react176.css`
|
|
19912
19939
|
display: flex;
|
|
19913
19940
|
flex-shrink: 0;
|
|
19914
19941
|
gap: var(--spacing-xs);
|
|
@@ -19925,7 +19952,7 @@ var toolbarGroup = import_react174.css`
|
|
|
19925
19952
|
width: 1px;
|
|
19926
19953
|
}
|
|
19927
19954
|
`;
|
|
19928
|
-
var richTextToolbarButton =
|
|
19955
|
+
var richTextToolbarButton = import_react176.css`
|
|
19929
19956
|
align-items: center;
|
|
19930
19957
|
appearance: none;
|
|
19931
19958
|
border: 0;
|
|
@@ -19939,17 +19966,17 @@ var richTextToolbarButton = import_react174.css`
|
|
|
19939
19966
|
min-width: 32px;
|
|
19940
19967
|
padding: 0 var(--spacing-sm);
|
|
19941
19968
|
`;
|
|
19942
|
-
var richTextToolbarButtonActive =
|
|
19969
|
+
var richTextToolbarButtonActive = import_react176.css`
|
|
19943
19970
|
background: var(--gray-200);
|
|
19944
19971
|
`;
|
|
19945
|
-
var textStyleButton =
|
|
19972
|
+
var textStyleButton = import_react176.css`
|
|
19946
19973
|
justify-content: space-between;
|
|
19947
19974
|
min-width: 7rem;
|
|
19948
19975
|
`;
|
|
19949
|
-
var toolbarIcon =
|
|
19976
|
+
var toolbarIcon = import_react176.css`
|
|
19950
19977
|
color: inherit;
|
|
19951
19978
|
`;
|
|
19952
|
-
var toolbarChevron =
|
|
19979
|
+
var toolbarChevron = import_react176.css`
|
|
19953
19980
|
margin-left: var(--spacing-xs);
|
|
19954
19981
|
`;
|
|
19955
19982
|
var RichTextToolbarIcon = ({ icon }) => {
|
|
@@ -20009,7 +20036,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
20009
20036
|
});
|
|
20010
20037
|
});
|
|
20011
20038
|
};
|
|
20012
|
-
const updateToolbar = (0,
|
|
20039
|
+
const updateToolbar = (0, import_react177.useCallback)(() => {
|
|
20013
20040
|
const selection = (0, import_lexical9.$getSelection)();
|
|
20014
20041
|
if (!(0, import_lexical9.$isRangeSelection)(selection)) {
|
|
20015
20042
|
return;
|
|
@@ -20048,7 +20075,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
20048
20075
|
setIsLink(false);
|
|
20049
20076
|
}
|
|
20050
20077
|
}, [editor, setActiveElement, setActiveFormats, setIsLink]);
|
|
20051
|
-
(0,
|
|
20078
|
+
(0, import_react177.useEffect)(() => {
|
|
20052
20079
|
return editor.registerCommand(
|
|
20053
20080
|
import_lexical9.SELECTION_CHANGE_COMMAND,
|
|
20054
20081
|
(_payload) => {
|
|
@@ -20058,7 +20085,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
20058
20085
|
import_lexical9.COMMAND_PRIORITY_CRITICAL
|
|
20059
20086
|
);
|
|
20060
20087
|
}, [editor, updateToolbar]);
|
|
20061
|
-
(0,
|
|
20088
|
+
(0, import_react177.useEffect)(() => {
|
|
20062
20089
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
20063
20090
|
requestAnimationFrame(() => {
|
|
20064
20091
|
editorState.read(() => {
|
|
@@ -20248,42 +20275,10 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
20248
20275
|
};
|
|
20249
20276
|
var RichTextToolbar_default = RichTextToolbar;
|
|
20250
20277
|
|
|
20251
|
-
// src/components/ParameterInputs/ParameterRichText.
|
|
20252
|
-
|
|
20253
|
-
var
|
|
20254
|
-
|
|
20255
|
-
labelLeadingIcon,
|
|
20256
|
-
hiddenLabel,
|
|
20257
|
-
id,
|
|
20258
|
-
errorMessage,
|
|
20259
|
-
caption,
|
|
20260
|
-
errorTestId,
|
|
20261
|
-
captionTestId,
|
|
20262
|
-
menuItems,
|
|
20263
|
-
children,
|
|
20264
|
-
...innerProps
|
|
20265
|
-
}) => {
|
|
20266
|
-
return /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
|
|
20267
|
-
ParameterShell,
|
|
20268
|
-
{
|
|
20269
|
-
"data-testid": "parameter-richtext",
|
|
20270
|
-
label: label2,
|
|
20271
|
-
hiddenLabel,
|
|
20272
|
-
labelLeadingIcon,
|
|
20273
|
-
id,
|
|
20274
|
-
errorMessage,
|
|
20275
|
-
caption,
|
|
20276
|
-
errorTestId,
|
|
20277
|
-
captionTestId,
|
|
20278
|
-
menuItems,
|
|
20279
|
-
children: [
|
|
20280
|
-
/* @__PURE__ */ (0, import_jsx_runtime144.jsx)(ParameterRichTextInner, { ...innerProps, children }),
|
|
20281
|
-
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
|
|
20282
|
-
]
|
|
20283
|
-
}
|
|
20284
|
-
);
|
|
20285
|
-
};
|
|
20286
|
-
var editorContainerWrapper = import_react176.css`
|
|
20278
|
+
// src/components/ParameterInputs/styles/ParameterRichText.styles.ts
|
|
20279
|
+
init_emotion_jsx_shim();
|
|
20280
|
+
var import_react178 = require("@emotion/react");
|
|
20281
|
+
var editorContainerWrapper = import_react178.css`
|
|
20287
20282
|
position: relative;
|
|
20288
20283
|
|
|
20289
20284
|
&::before {
|
|
@@ -20299,12 +20294,12 @@ var editorContainerWrapper = import_react176.css`
|
|
|
20299
20294
|
z-index: 2;
|
|
20300
20295
|
}
|
|
20301
20296
|
`;
|
|
20302
|
-
var editorWrapper =
|
|
20297
|
+
var editorWrapper = import_react178.css`
|
|
20303
20298
|
display: flex;
|
|
20304
20299
|
flex-flow: column;
|
|
20305
20300
|
flex-grow: 1;
|
|
20306
20301
|
`;
|
|
20307
|
-
var editorContainer =
|
|
20302
|
+
var editorContainer = import_react178.css`
|
|
20308
20303
|
${scrollbarStyles}
|
|
20309
20304
|
background: var(--white);
|
|
20310
20305
|
border-radius: var(--rounded-sm);
|
|
@@ -20336,7 +20331,7 @@ var editorContainer = import_react176.css`
|
|
|
20336
20331
|
max-height: unset;
|
|
20337
20332
|
}
|
|
20338
20333
|
`;
|
|
20339
|
-
var editorContainerOverflowWrapper =
|
|
20334
|
+
var editorContainerOverflowWrapper = import_react178.css`
|
|
20340
20335
|
overflow: hidden;
|
|
20341
20336
|
pointer-events: none;
|
|
20342
20337
|
|
|
@@ -20344,7 +20339,7 @@ var editorContainerOverflowWrapper = import_react176.css`
|
|
|
20344
20339
|
pointer-events: auto;
|
|
20345
20340
|
}
|
|
20346
20341
|
`;
|
|
20347
|
-
var editorPlaceholder =
|
|
20342
|
+
var editorPlaceholder = import_react178.css`
|
|
20348
20343
|
color: var(--gray-500);
|
|
20349
20344
|
font-style: italic;
|
|
20350
20345
|
/* 1px is added to make sure caret is clearly visible when field is focused
|
|
@@ -20355,7 +20350,7 @@ var editorPlaceholder = import_react176.css`
|
|
|
20355
20350
|
top: calc(1rem + var(--spacing-sm));
|
|
20356
20351
|
user-select: none;
|
|
20357
20352
|
`;
|
|
20358
|
-
var editorInput =
|
|
20353
|
+
var editorInput = import_react178.css`
|
|
20359
20354
|
min-height: 100%;
|
|
20360
20355
|
flex-grow: 1;
|
|
20361
20356
|
|
|
@@ -20364,6 +20359,42 @@ var editorInput = import_react176.css`
|
|
|
20364
20359
|
outline: none;
|
|
20365
20360
|
}
|
|
20366
20361
|
`;
|
|
20362
|
+
|
|
20363
|
+
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
20364
|
+
var import_jsx_runtime144 = require("@emotion/react/jsx-runtime");
|
|
20365
|
+
var ParameterRichText = ({
|
|
20366
|
+
label: label2,
|
|
20367
|
+
labelLeadingIcon,
|
|
20368
|
+
hiddenLabel,
|
|
20369
|
+
id,
|
|
20370
|
+
errorMessage,
|
|
20371
|
+
caption,
|
|
20372
|
+
errorTestId,
|
|
20373
|
+
captionTestId,
|
|
20374
|
+
menuItems,
|
|
20375
|
+
children,
|
|
20376
|
+
...innerProps
|
|
20377
|
+
}) => {
|
|
20378
|
+
return /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
|
|
20379
|
+
ParameterShell,
|
|
20380
|
+
{
|
|
20381
|
+
"data-testid": "parameter-richtext",
|
|
20382
|
+
label: label2,
|
|
20383
|
+
hiddenLabel,
|
|
20384
|
+
labelLeadingIcon,
|
|
20385
|
+
id,
|
|
20386
|
+
errorMessage,
|
|
20387
|
+
caption,
|
|
20388
|
+
errorTestId,
|
|
20389
|
+
captionTestId,
|
|
20390
|
+
menuItems,
|
|
20391
|
+
children: [
|
|
20392
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsx)(ParameterRichTextInner, { ...innerProps, children }),
|
|
20393
|
+
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
|
|
20394
|
+
]
|
|
20395
|
+
}
|
|
20396
|
+
);
|
|
20397
|
+
};
|
|
20367
20398
|
var ParameterRichTextInner = ({
|
|
20368
20399
|
value,
|
|
20369
20400
|
editorFooter,
|
|
@@ -20429,7 +20460,7 @@ var ParameterRichTextInner = ({
|
|
|
20429
20460
|
editable: !richTextProps.readOnly
|
|
20430
20461
|
};
|
|
20431
20462
|
return /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(import_jsx_runtime144.Fragment, { children: [
|
|
20432
|
-
/* @__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 }) }) }),
|
|
20463
|
+
/* @__PURE__ */ (0, import_jsx_runtime144.jsx)("div", { css: [editorWrapper, editorThemeStyles], className: editorWrapperClassName, children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_LexicalComposer.LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(RichText, { ...richTextProps, children }) }) }),
|
|
20433
20464
|
editorFooter ? editorFooter : null
|
|
20434
20465
|
] });
|
|
20435
20466
|
};
|
|
@@ -20459,12 +20490,12 @@ var RichText = ({
|
|
|
20459
20490
|
placeholder
|
|
20460
20491
|
}) => {
|
|
20461
20492
|
const [editor] = (0, import_LexicalComposerContext9.useLexicalComposerContext)();
|
|
20462
|
-
(0,
|
|
20493
|
+
(0, import_react179.useEffect)(() => {
|
|
20463
20494
|
if (onRichTextInit) {
|
|
20464
20495
|
onRichTextInit(editor);
|
|
20465
20496
|
}
|
|
20466
20497
|
}, [editor, onRichTextInit]);
|
|
20467
|
-
(0,
|
|
20498
|
+
(0, import_react179.useEffect)(() => {
|
|
20468
20499
|
const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState, tags }) => {
|
|
20469
20500
|
requestAnimationFrame(() => {
|
|
20470
20501
|
const previousEditorState = prevEditorState.toJSON();
|
|
@@ -20481,16 +20512,16 @@ var RichText = ({
|
|
|
20481
20512
|
removeUpdateListener();
|
|
20482
20513
|
};
|
|
20483
20514
|
}, [editor, onChange]);
|
|
20484
|
-
(0,
|
|
20515
|
+
(0, import_react179.useEffect)(() => {
|
|
20485
20516
|
editor.setEditable(!readOnly);
|
|
20486
20517
|
}, [editor, readOnly]);
|
|
20487
|
-
const [editorContainerRef, setEditorContainerRef] = (0,
|
|
20518
|
+
const [editorContainerRef, setEditorContainerRef] = (0, import_react179.useState)(null);
|
|
20488
20519
|
const onEditorContainerRef = (_editorContainerRef) => {
|
|
20489
20520
|
if (_editorContainerRef !== null) {
|
|
20490
20521
|
setEditorContainerRef(_editorContainerRef);
|
|
20491
20522
|
}
|
|
20492
20523
|
};
|
|
20493
|
-
const [portalContainerRef, setPortalContainerRef] = (0,
|
|
20524
|
+
const [portalContainerRef, setPortalContainerRef] = (0, import_react179.useState)(null);
|
|
20494
20525
|
const onPortalContainerRef = (_portalContainerRef) => {
|
|
20495
20526
|
if (_portalContainerRef !== null) {
|
|
20496
20527
|
setPortalContainerRef(_portalContainerRef);
|
|
@@ -20568,15 +20599,15 @@ var RichText = ({
|
|
|
20568
20599
|
|
|
20569
20600
|
// src/components/ParameterInputs/ParameterSelect.tsx
|
|
20570
20601
|
init_emotion_jsx_shim();
|
|
20571
|
-
var
|
|
20602
|
+
var import_react180 = require("react");
|
|
20572
20603
|
var import_jsx_runtime145 = require("@emotion/react/jsx-runtime");
|
|
20573
|
-
var ParameterSelect = (0,
|
|
20604
|
+
var ParameterSelect = (0, import_react180.forwardRef)(
|
|
20574
20605
|
({ defaultOption, options, ...props }, ref) => {
|
|
20575
20606
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
20576
20607
|
return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
|
|
20577
20608
|
}
|
|
20578
20609
|
);
|
|
20579
|
-
var ParameterSelectInner = (0,
|
|
20610
|
+
var ParameterSelectInner = (0, import_react180.forwardRef)(
|
|
20580
20611
|
({ defaultOption, options, ...props }, ref) => {
|
|
20581
20612
|
const { id, label: label2, hiddenLabel } = useParameterShell();
|
|
20582
20613
|
return /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(
|
|
@@ -20601,24 +20632,24 @@ var ParameterSelectInner = (0, import_react178.forwardRef)(
|
|
|
20601
20632
|
|
|
20602
20633
|
// src/components/ParameterInputs/ParameterSelectSlider.tsx
|
|
20603
20634
|
init_emotion_jsx_shim();
|
|
20604
|
-
var
|
|
20635
|
+
var import_react181 = require("react");
|
|
20605
20636
|
var import_jsx_runtime146 = require("@emotion/react/jsx-runtime");
|
|
20606
|
-
var ParameterSelectSlider = (0,
|
|
20637
|
+
var ParameterSelectSlider = (0, import_react181.forwardRef)(
|
|
20607
20638
|
(props, ref) => {
|
|
20608
20639
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
20609
20640
|
return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(ParameterShell, { "data-testid": "parameter-select-slider", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(ParameterSelectSliderInner, { ref, ...innerProps }) });
|
|
20610
20641
|
}
|
|
20611
20642
|
);
|
|
20612
|
-
var ParameterSelectSliderInner = (0,
|
|
20643
|
+
var ParameterSelectSliderInner = (0, import_react181.forwardRef)(({ options, value, onChange, ...props }, ref) => {
|
|
20613
20644
|
const { id, label: label2, hiddenLabel } = useParameterShell();
|
|
20614
|
-
const numericValue = (0,
|
|
20645
|
+
const numericValue = (0, import_react181.useMemo)(() => {
|
|
20615
20646
|
if (value === void 0 || value === null || value === "") {
|
|
20616
20647
|
return void 0;
|
|
20617
20648
|
}
|
|
20618
20649
|
const index = options.findIndex((option) => option.value === value);
|
|
20619
20650
|
return index >= 0 ? index : void 0;
|
|
20620
20651
|
}, [options, value]);
|
|
20621
|
-
const handleChange = (0,
|
|
20652
|
+
const handleChange = (0, import_react181.useCallback)(
|
|
20622
20653
|
(newValue) => {
|
|
20623
20654
|
var _a;
|
|
20624
20655
|
if (newValue === void 0) {
|
|
@@ -20648,13 +20679,13 @@ ParameterSelectSliderInner.displayName = "ParameterSelectSliderInner";
|
|
|
20648
20679
|
|
|
20649
20680
|
// src/components/ParameterInputs/ParameterTextarea.tsx
|
|
20650
20681
|
init_emotion_jsx_shim();
|
|
20651
|
-
var
|
|
20682
|
+
var import_react182 = require("react");
|
|
20652
20683
|
var import_jsx_runtime147 = require("@emotion/react/jsx-runtime");
|
|
20653
|
-
var ParameterTextarea = (0,
|
|
20684
|
+
var ParameterTextarea = (0, import_react182.forwardRef)((props, ref) => {
|
|
20654
20685
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
20655
20686
|
return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
|
|
20656
20687
|
});
|
|
20657
|
-
var ParameterTextareaInner = (0,
|
|
20688
|
+
var ParameterTextareaInner = (0, import_react182.forwardRef)(({ ...props }, ref) => {
|
|
20658
20689
|
const { id, label: label2, hiddenLabel } = useParameterShell();
|
|
20659
20690
|
return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
|
|
20660
20691
|
"textarea",
|
|
@@ -20670,14 +20701,14 @@ var ParameterTextareaInner = (0, import_react180.forwardRef)(({ ...props }, ref)
|
|
|
20670
20701
|
|
|
20671
20702
|
// src/components/ParameterInputs/ParameterToggle.tsx
|
|
20672
20703
|
init_emotion_jsx_shim();
|
|
20673
|
-
var
|
|
20704
|
+
var import_react183 = require("react");
|
|
20674
20705
|
var import_jsx_runtime148 = require("@emotion/react/jsx-runtime");
|
|
20675
|
-
var ParameterToggle = (0,
|
|
20706
|
+
var ParameterToggle = (0, import_react183.forwardRef)((props, ref) => {
|
|
20676
20707
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
20677
20708
|
return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
|
|
20678
20709
|
});
|
|
20679
20710
|
ParameterToggle.displayName = "ParameterToggle";
|
|
20680
|
-
var ParameterToggleInner = (0,
|
|
20711
|
+
var ParameterToggleInner = (0, import_react183.forwardRef)(
|
|
20681
20712
|
({ children, ...props }, ref) => {
|
|
20682
20713
|
const { type, withoutIndeterminateState, ...otherProps } = props;
|
|
20683
20714
|
const { id, label: label2 } = useParameterShell();
|
|
@@ -20707,8 +20738,8 @@ init_emotion_jsx_shim();
|
|
|
20707
20738
|
|
|
20708
20739
|
// src/components/ProgressBar/ProgressBar.styles.ts
|
|
20709
20740
|
init_emotion_jsx_shim();
|
|
20710
|
-
var
|
|
20711
|
-
var container4 =
|
|
20741
|
+
var import_react184 = require("@emotion/react");
|
|
20742
|
+
var container4 = import_react184.css`
|
|
20712
20743
|
background: var(--gray-50);
|
|
20713
20744
|
margin-block: var(--spacing-sm);
|
|
20714
20745
|
position: relative;
|
|
@@ -20718,17 +20749,17 @@ var container4 = import_react182.css`
|
|
|
20718
20749
|
border: solid 1px var(--gray-300);
|
|
20719
20750
|
`;
|
|
20720
20751
|
var themeMap = {
|
|
20721
|
-
primary:
|
|
20752
|
+
primary: import_react184.css`
|
|
20722
20753
|
--progress-color: var(--accent-light);
|
|
20723
20754
|
`,
|
|
20724
|
-
secondary:
|
|
20755
|
+
secondary: import_react184.css`
|
|
20725
20756
|
--progress-color: var(--accent-alt-light);
|
|
20726
20757
|
`,
|
|
20727
|
-
destructive:
|
|
20758
|
+
destructive: import_react184.css`
|
|
20728
20759
|
--progress-color: var(--brand-secondary-5);
|
|
20729
20760
|
`
|
|
20730
20761
|
};
|
|
20731
|
-
var slidingBackgroundPosition =
|
|
20762
|
+
var slidingBackgroundPosition = import_react184.keyframes`
|
|
20732
20763
|
from {
|
|
20733
20764
|
background-position: 0 0;
|
|
20734
20765
|
}
|
|
@@ -20736,10 +20767,10 @@ var slidingBackgroundPosition = import_react182.keyframes`
|
|
|
20736
20767
|
background-position: 64px 0;
|
|
20737
20768
|
}
|
|
20738
20769
|
`;
|
|
20739
|
-
var determinate =
|
|
20770
|
+
var determinate = import_react184.css`
|
|
20740
20771
|
background-color: var(--progress-color);
|
|
20741
20772
|
`;
|
|
20742
|
-
var indeterminate =
|
|
20773
|
+
var indeterminate = import_react184.css`
|
|
20743
20774
|
background-image: linear-gradient(
|
|
20744
20775
|
45deg,
|
|
20745
20776
|
var(--progress-color) 25%,
|
|
@@ -20753,7 +20784,7 @@ var indeterminate = import_react182.css`
|
|
|
20753
20784
|
background-size: 64px 64px;
|
|
20754
20785
|
animation: ${slidingBackgroundPosition} 1s linear infinite;
|
|
20755
20786
|
`;
|
|
20756
|
-
var bar =
|
|
20787
|
+
var bar = import_react184.css`
|
|
20757
20788
|
position: absolute;
|
|
20758
20789
|
inset: 0;
|
|
20759
20790
|
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
@@ -20802,22 +20833,22 @@ function ProgressBar({
|
|
|
20802
20833
|
|
|
20803
20834
|
// src/components/ProgressList/ProgressList.tsx
|
|
20804
20835
|
init_emotion_jsx_shim();
|
|
20805
|
-
var
|
|
20836
|
+
var import_react186 = require("@emotion/react");
|
|
20806
20837
|
var import_CgCheckO4 = require("@react-icons/all-files/cg/CgCheckO");
|
|
20807
20838
|
var import_CgRadioCheck2 = require("@react-icons/all-files/cg/CgRadioCheck");
|
|
20808
20839
|
var import_CgRecord2 = require("@react-icons/all-files/cg/CgRecord");
|
|
20809
|
-
var
|
|
20840
|
+
var import_react187 = require("react");
|
|
20810
20841
|
|
|
20811
20842
|
// src/components/ProgressList/styles/ProgressList.styles.ts
|
|
20812
20843
|
init_emotion_jsx_shim();
|
|
20813
|
-
var
|
|
20814
|
-
var progressListStyles =
|
|
20844
|
+
var import_react185 = require("@emotion/react");
|
|
20845
|
+
var progressListStyles = import_react185.css`
|
|
20815
20846
|
display: flex;
|
|
20816
20847
|
flex-direction: column;
|
|
20817
20848
|
gap: var(--spacing-sm);
|
|
20818
20849
|
list-style-type: none;
|
|
20819
20850
|
`;
|
|
20820
|
-
var progressListItemStyles =
|
|
20851
|
+
var progressListItemStyles = import_react185.css`
|
|
20821
20852
|
display: flex;
|
|
20822
20853
|
gap: var(--spacing-base);
|
|
20823
20854
|
align-items: center;
|
|
@@ -20826,7 +20857,7 @@ var progressListItemStyles = import_react183.css`
|
|
|
20826
20857
|
// src/components/ProgressList/ProgressList.tsx
|
|
20827
20858
|
var import_jsx_runtime150 = require("@emotion/react/jsx-runtime");
|
|
20828
20859
|
var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
20829
|
-
const itemsWithStatus = (0,
|
|
20860
|
+
const itemsWithStatus = (0, import_react187.useMemo)(() => {
|
|
20830
20861
|
const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
|
|
20831
20862
|
return items.map((item, index) => {
|
|
20832
20863
|
let status = "queued";
|
|
@@ -20859,7 +20890,7 @@ var ProgressListItem = ({
|
|
|
20859
20890
|
errorLevel = "danger",
|
|
20860
20891
|
autoEllipsis = false
|
|
20861
20892
|
}) => {
|
|
20862
|
-
const icon = (0,
|
|
20893
|
+
const icon = (0, import_react187.useMemo)(() => {
|
|
20863
20894
|
if (error) {
|
|
20864
20895
|
return warningIcon;
|
|
20865
20896
|
}
|
|
@@ -20870,14 +20901,14 @@ var ProgressListItem = ({
|
|
|
20870
20901
|
};
|
|
20871
20902
|
return iconPerStatus[status];
|
|
20872
20903
|
}, [status, error]);
|
|
20873
|
-
const statusStyles = (0,
|
|
20904
|
+
const statusStyles = (0, import_react187.useMemo)(() => {
|
|
20874
20905
|
if (error) {
|
|
20875
|
-
return errorLevel === "caution" ?
|
|
20906
|
+
return errorLevel === "caution" ? import_react186.css`
|
|
20876
20907
|
color: rgb(161, 98, 7);
|
|
20877
20908
|
& svg {
|
|
20878
20909
|
color: rgb(250, 204, 21);
|
|
20879
20910
|
}
|
|
20880
|
-
` :
|
|
20911
|
+
` : import_react186.css`
|
|
20881
20912
|
color: rgb(185, 28, 28);
|
|
20882
20913
|
& svg {
|
|
20883
20914
|
color: var(--brand-primary-2);
|
|
@@ -20885,13 +20916,13 @@ var ProgressListItem = ({
|
|
|
20885
20916
|
`;
|
|
20886
20917
|
}
|
|
20887
20918
|
const colorPerStatus = {
|
|
20888
|
-
completed:
|
|
20919
|
+
completed: import_react186.css`
|
|
20889
20920
|
opacity: 0.75;
|
|
20890
20921
|
`,
|
|
20891
|
-
inProgress:
|
|
20922
|
+
inProgress: import_react186.css`
|
|
20892
20923
|
-webkit-text-stroke-width: thin;
|
|
20893
20924
|
`,
|
|
20894
|
-
queued:
|
|
20925
|
+
queued: import_react186.css`
|
|
20895
20926
|
opacity: 0.5;
|
|
20896
20927
|
`
|
|
20897
20928
|
};
|
|
@@ -20908,16 +20939,16 @@ var ProgressListItem = ({
|
|
|
20908
20939
|
|
|
20909
20940
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
20910
20941
|
init_emotion_jsx_shim();
|
|
20911
|
-
var
|
|
20912
|
-
var
|
|
20942
|
+
var import_react189 = require("@emotion/react");
|
|
20943
|
+
var import_react190 = require("react");
|
|
20913
20944
|
|
|
20914
20945
|
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
20915
20946
|
init_emotion_jsx_shim();
|
|
20916
|
-
var
|
|
20917
|
-
var segmentedControlRootStyles =
|
|
20947
|
+
var import_react188 = require("@emotion/react");
|
|
20948
|
+
var segmentedControlRootStyles = import_react188.css`
|
|
20918
20949
|
position: relative;
|
|
20919
20950
|
`;
|
|
20920
|
-
var segmentedControlScrollIndicatorsStyles =
|
|
20951
|
+
var segmentedControlScrollIndicatorsStyles = import_react188.css`
|
|
20921
20952
|
position: absolute;
|
|
20922
20953
|
inset: 0;
|
|
20923
20954
|
z-index: 1;
|
|
@@ -20945,17 +20976,17 @@ var segmentedControlScrollIndicatorsStyles = import_react186.css`
|
|
|
20945
20976
|
background: linear-gradient(to left, var(--background-color) 10%, transparent);
|
|
20946
20977
|
}
|
|
20947
20978
|
`;
|
|
20948
|
-
var segmentedControlScrollIndicatorStartVisibleStyles =
|
|
20979
|
+
var segmentedControlScrollIndicatorStartVisibleStyles = import_react188.css`
|
|
20949
20980
|
&::before {
|
|
20950
20981
|
opacity: 1;
|
|
20951
20982
|
}
|
|
20952
20983
|
`;
|
|
20953
|
-
var segmentedControlScrollIndicatorEndVisibleStyles =
|
|
20984
|
+
var segmentedControlScrollIndicatorEndVisibleStyles = import_react188.css`
|
|
20954
20985
|
&::after {
|
|
20955
20986
|
opacity: 1;
|
|
20956
20987
|
}
|
|
20957
20988
|
`;
|
|
20958
|
-
var segmentedControlWrapperStyles =
|
|
20989
|
+
var segmentedControlWrapperStyles = import_react188.css`
|
|
20959
20990
|
overflow-y: auto;
|
|
20960
20991
|
scroll-behavior: smooth;
|
|
20961
20992
|
scrollbar-width: none;
|
|
@@ -20964,7 +20995,7 @@ var segmentedControlWrapperStyles = import_react186.css`
|
|
|
20964
20995
|
height: 0px;
|
|
20965
20996
|
}
|
|
20966
20997
|
`;
|
|
20967
|
-
var segmentedControlStyles =
|
|
20998
|
+
var segmentedControlStyles = import_react188.css`
|
|
20968
20999
|
--segmented-control-rounded-value: var(--rounded-base);
|
|
20969
21000
|
--segmented-control-border-width: 1px;
|
|
20970
21001
|
--segmented-control-selected-color: var(--accent-dark);
|
|
@@ -20984,14 +21015,14 @@ var segmentedControlStyles = import_react186.css`
|
|
|
20984
21015
|
border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
|
|
20985
21016
|
font-size: var(--fs-xs);
|
|
20986
21017
|
`;
|
|
20987
|
-
var segmentedControlVerticalStyles =
|
|
21018
|
+
var segmentedControlVerticalStyles = import_react188.css`
|
|
20988
21019
|
flex-direction: column;
|
|
20989
21020
|
--segmented-control-first-border-radius: var(--segmented-control-rounded-value)
|
|
20990
21021
|
var(--segmented-control-rounded-value) 0 0;
|
|
20991
21022
|
--segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
|
|
20992
21023
|
var(--segmented-control-rounded-value);
|
|
20993
21024
|
`;
|
|
20994
|
-
var segmentedControlItemStyles =
|
|
21025
|
+
var segmentedControlItemStyles = import_react188.css`
|
|
20995
21026
|
position: relative;
|
|
20996
21027
|
|
|
20997
21028
|
&:first-of-type label {
|
|
@@ -21017,10 +21048,10 @@ var segmentedControlItemStyles = import_react186.css`
|
|
|
21017
21048
|
box-shadow: var(--segmented-control-border-width) 0 0 0 transparent;
|
|
21018
21049
|
}
|
|
21019
21050
|
`;
|
|
21020
|
-
var segmentedControlInputStyles =
|
|
21051
|
+
var segmentedControlInputStyles = import_react188.css`
|
|
21021
21052
|
${accessibleHidden}
|
|
21022
21053
|
`;
|
|
21023
|
-
var segmentedControlLabelStyles =
|
|
21054
|
+
var segmentedControlLabelStyles = import_react188.css`
|
|
21024
21055
|
position: relative;
|
|
21025
21056
|
display: flex;
|
|
21026
21057
|
align-items: center;
|
|
@@ -21055,20 +21086,20 @@ var segmentedControlLabelStyles = import_react186.css`
|
|
|
21055
21086
|
background-color: var(--gray-400);
|
|
21056
21087
|
}
|
|
21057
21088
|
`;
|
|
21058
|
-
var segmentedControlLabelIconOnlyStyles =
|
|
21089
|
+
var segmentedControlLabelIconOnlyStyles = import_react188.css`
|
|
21059
21090
|
padding-inline: 0.5em;
|
|
21060
21091
|
`;
|
|
21061
|
-
var segmentedControlLabelCheckStyles =
|
|
21092
|
+
var segmentedControlLabelCheckStyles = import_react188.css`
|
|
21062
21093
|
opacity: 0.5;
|
|
21063
21094
|
`;
|
|
21064
|
-
var segmentedControlLabelContentStyles =
|
|
21095
|
+
var segmentedControlLabelContentStyles = import_react188.css`
|
|
21065
21096
|
display: flex;
|
|
21066
21097
|
align-items: center;
|
|
21067
21098
|
justify-content: center;
|
|
21068
21099
|
gap: var(--spacing-sm);
|
|
21069
21100
|
height: 100%;
|
|
21070
21101
|
`;
|
|
21071
|
-
var segmentedControlLabelTextStyles =
|
|
21102
|
+
var segmentedControlLabelTextStyles = import_react188.css`
|
|
21072
21103
|
white-space: nowrap;
|
|
21073
21104
|
`;
|
|
21074
21105
|
|
|
@@ -21089,10 +21120,10 @@ var SegmentedControl = ({
|
|
|
21089
21120
|
// deprecated, destructured to prevent spreading to DOM
|
|
21090
21121
|
...props
|
|
21091
21122
|
}) => {
|
|
21092
|
-
const wrapperRef = (0,
|
|
21093
|
-
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0,
|
|
21094
|
-
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0,
|
|
21095
|
-
const onOptionChange = (0,
|
|
21123
|
+
const wrapperRef = (0, import_react190.useRef)(null);
|
|
21124
|
+
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react190.useState)(false);
|
|
21125
|
+
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react190.useState)(false);
|
|
21126
|
+
const onOptionChange = (0, import_react190.useCallback)(
|
|
21096
21127
|
(event) => {
|
|
21097
21128
|
if (event.target.checked) {
|
|
21098
21129
|
onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
|
|
@@ -21100,19 +21131,19 @@ var SegmentedControl = ({
|
|
|
21100
21131
|
},
|
|
21101
21132
|
[options, onChange]
|
|
21102
21133
|
);
|
|
21103
|
-
const sizeStyles = (0,
|
|
21134
|
+
const sizeStyles = (0, import_react190.useMemo)(() => {
|
|
21104
21135
|
const map = {
|
|
21105
|
-
sm: (0,
|
|
21106
|
-
md: (0,
|
|
21107
|
-
lg: (0,
|
|
21108
|
-
xl: (0,
|
|
21136
|
+
sm: (0, import_react189.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
|
|
21137
|
+
md: (0, import_react189.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
|
|
21138
|
+
lg: (0, import_react189.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
|
|
21139
|
+
xl: (0, import_react189.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
|
|
21109
21140
|
};
|
|
21110
21141
|
return map[size];
|
|
21111
21142
|
}, [size]);
|
|
21112
|
-
const isIconOnly = (0,
|
|
21143
|
+
const isIconOnly = (0, import_react190.useMemo)(() => {
|
|
21113
21144
|
return options.every((option) => option && option.icon && !option.label);
|
|
21114
21145
|
}, [options]);
|
|
21115
|
-
(0,
|
|
21146
|
+
(0, import_react190.useEffect)(() => {
|
|
21116
21147
|
const wrapperElement = wrapperRef.current;
|
|
21117
21148
|
const onScroll = () => {
|
|
21118
21149
|
if (!wrapperElement) {
|
|
@@ -21207,12 +21238,12 @@ init_emotion_jsx_shim();
|
|
|
21207
21238
|
|
|
21208
21239
|
// src/components/Skeleton/Skeleton.styles.ts
|
|
21209
21240
|
init_emotion_jsx_shim();
|
|
21210
|
-
var
|
|
21211
|
-
var lightFadingOut =
|
|
21241
|
+
var import_react191 = require("@emotion/react");
|
|
21242
|
+
var lightFadingOut = import_react191.keyframes`
|
|
21212
21243
|
from { opacity: 0.1; }
|
|
21213
21244
|
to { opacity: 0.025; }
|
|
21214
21245
|
`;
|
|
21215
|
-
var skeletonStyles =
|
|
21246
|
+
var skeletonStyles = import_react191.css`
|
|
21216
21247
|
animation: ${lightFadingOut} 1s ease-out infinite alternate;
|
|
21217
21248
|
background-color: var(--gray-500);
|
|
21218
21249
|
`;
|
|
@@ -21250,12 +21281,12 @@ init_emotion_jsx_shim();
|
|
|
21250
21281
|
|
|
21251
21282
|
// src/components/Spinner/Spinner.tsx
|
|
21252
21283
|
init_emotion_jsx_shim();
|
|
21253
|
-
var
|
|
21284
|
+
var import_react193 = require("react");
|
|
21254
21285
|
|
|
21255
21286
|
// src/components/Spinner/Spinner.styles.ts
|
|
21256
21287
|
init_emotion_jsx_shim();
|
|
21257
|
-
var
|
|
21258
|
-
var SpinnerStyles =
|
|
21288
|
+
var import_react192 = require("@emotion/react");
|
|
21289
|
+
var SpinnerStyles = import_react192.css`
|
|
21259
21290
|
--color: #00b4ff;
|
|
21260
21291
|
--speed: 5s;
|
|
21261
21292
|
--red: rgb(218, 63, 50);
|
|
@@ -21691,8 +21722,8 @@ var Spinner = ({
|
|
|
21691
21722
|
label: label2,
|
|
21692
21723
|
isPaused
|
|
21693
21724
|
}) => {
|
|
21694
|
-
const ref = (0,
|
|
21695
|
-
(0,
|
|
21725
|
+
const ref = (0, import_react193.useRef)(null);
|
|
21726
|
+
(0, import_react193.useEffect)(() => {
|
|
21696
21727
|
var _a, _b, _c;
|
|
21697
21728
|
(_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");
|
|
21698
21729
|
}, [width]);
|
|
@@ -21764,11 +21795,11 @@ init_emotion_jsx_shim();
|
|
|
21764
21795
|
|
|
21765
21796
|
// src/components/StackedModal/hooks/StackedModalProvider.tsx
|
|
21766
21797
|
init_emotion_jsx_shim();
|
|
21767
|
-
var
|
|
21798
|
+
var import_react194 = require("react");
|
|
21768
21799
|
var import_jsx_runtime154 = require("@emotion/react/jsx-runtime");
|
|
21769
|
-
var StackedModalContext = (0,
|
|
21800
|
+
var StackedModalContext = (0, import_react194.createContext)(null);
|
|
21770
21801
|
function useStackedModal() {
|
|
21771
|
-
const context = (0,
|
|
21802
|
+
const context = (0, import_react194.useContext)(StackedModalContext);
|
|
21772
21803
|
if (!context) {
|
|
21773
21804
|
throw new Error("useStackedModal must be used within a <StackedModal> component.");
|
|
21774
21805
|
}
|
|
@@ -21784,10 +21815,10 @@ function useStepTransition(index) {
|
|
|
21784
21815
|
};
|
|
21785
21816
|
}
|
|
21786
21817
|
function StackedModalProvider({ children, totalSteps, initialStep }) {
|
|
21787
|
-
const [currentStep, setCurrentStep] = (0,
|
|
21788
|
-
const [direction, setDirection] = (0,
|
|
21789
|
-
const previousStepRef = (0,
|
|
21790
|
-
const nextStep = (0,
|
|
21818
|
+
const [currentStep, setCurrentStep] = (0, import_react194.useState)(initialStep);
|
|
21819
|
+
const [direction, setDirection] = (0, import_react194.useState)("forward");
|
|
21820
|
+
const previousStepRef = (0, import_react194.useRef)(initialStep);
|
|
21821
|
+
const nextStep = (0, import_react194.useCallback)(() => {
|
|
21791
21822
|
setCurrentStep((prev) => {
|
|
21792
21823
|
if (prev >= totalSteps - 1) {
|
|
21793
21824
|
return prev;
|
|
@@ -21797,7 +21828,7 @@ function StackedModalProvider({ children, totalSteps, initialStep }) {
|
|
|
21797
21828
|
return prev + 1;
|
|
21798
21829
|
});
|
|
21799
21830
|
}, [totalSteps]);
|
|
21800
|
-
const goBack = (0,
|
|
21831
|
+
const goBack = (0, import_react194.useCallback)(() => {
|
|
21801
21832
|
setCurrentStep((prev) => {
|
|
21802
21833
|
if (prev <= 0) {
|
|
21803
21834
|
return prev;
|
|
@@ -21807,7 +21838,7 @@ function StackedModalProvider({ children, totalSteps, initialStep }) {
|
|
|
21807
21838
|
return prev - 1;
|
|
21808
21839
|
});
|
|
21809
21840
|
}, []);
|
|
21810
|
-
const goToStep = (0,
|
|
21841
|
+
const goToStep = (0, import_react194.useCallback)(
|
|
21811
21842
|
(index) => {
|
|
21812
21843
|
setCurrentStep((prev) => {
|
|
21813
21844
|
if (index < 0 || index >= totalSteps || index === prev) {
|
|
@@ -21820,7 +21851,7 @@ function StackedModalProvider({ children, totalSteps, initialStep }) {
|
|
|
21820
21851
|
},
|
|
21821
21852
|
[totalSteps]
|
|
21822
21853
|
);
|
|
21823
|
-
const value = (0,
|
|
21854
|
+
const value = (0, import_react194.useMemo)(
|
|
21824
21855
|
() => ({
|
|
21825
21856
|
currentStep,
|
|
21826
21857
|
totalSteps,
|
|
@@ -21837,7 +21868,7 @@ function StackedModalProvider({ children, totalSteps, initialStep }) {
|
|
|
21837
21868
|
|
|
21838
21869
|
// src/components/StackedModal/StackedModal.tsx
|
|
21839
21870
|
init_emotion_jsx_shim();
|
|
21840
|
-
var
|
|
21871
|
+
var import_react196 = __toESM(require("react"));
|
|
21841
21872
|
|
|
21842
21873
|
// src/components/StackedModal/AnimatedStepHeader.tsx
|
|
21843
21874
|
init_emotion_jsx_shim();
|
|
@@ -21847,13 +21878,13 @@ init_emotion_jsx_shim();
|
|
|
21847
21878
|
|
|
21848
21879
|
// src/components/StackedModal/styles/StackedModal.styles.ts
|
|
21849
21880
|
init_emotion_jsx_shim();
|
|
21850
|
-
var
|
|
21851
|
-
var stackedModalRootStyles =
|
|
21881
|
+
var import_react195 = require("@emotion/react");
|
|
21882
|
+
var stackedModalRootStyles = import_react195.css`
|
|
21852
21883
|
& > dialog > div {
|
|
21853
21884
|
background: var(--gray-50);
|
|
21854
21885
|
}
|
|
21855
21886
|
`;
|
|
21856
|
-
var slideInFromRight =
|
|
21887
|
+
var slideInFromRight = import_react195.keyframes`
|
|
21857
21888
|
from {
|
|
21858
21889
|
transform: translateX(100%);
|
|
21859
21890
|
opacity: 0;
|
|
@@ -21863,7 +21894,7 @@ var slideInFromRight = import_react193.keyframes`
|
|
|
21863
21894
|
opacity: 1;
|
|
21864
21895
|
}
|
|
21865
21896
|
`;
|
|
21866
|
-
var slideOutToLeft =
|
|
21897
|
+
var slideOutToLeft = import_react195.keyframes`
|
|
21867
21898
|
from {
|
|
21868
21899
|
transform: translateX(0);
|
|
21869
21900
|
opacity: 1;
|
|
@@ -21873,7 +21904,7 @@ var slideOutToLeft = import_react193.keyframes`
|
|
|
21873
21904
|
opacity: 0;
|
|
21874
21905
|
}
|
|
21875
21906
|
`;
|
|
21876
|
-
var slideInFromLeft =
|
|
21907
|
+
var slideInFromLeft = import_react195.keyframes`
|
|
21877
21908
|
from {
|
|
21878
21909
|
transform: translateX(-100%);
|
|
21879
21910
|
opacity: 0;
|
|
@@ -21883,7 +21914,7 @@ var slideInFromLeft = import_react193.keyframes`
|
|
|
21883
21914
|
opacity: 1;
|
|
21884
21915
|
}
|
|
21885
21916
|
`;
|
|
21886
|
-
var slideOutToRight =
|
|
21917
|
+
var slideOutToRight = import_react195.keyframes`
|
|
21887
21918
|
from {
|
|
21888
21919
|
transform: translateX(0);
|
|
21889
21920
|
opacity: 1;
|
|
@@ -21893,67 +21924,67 @@ var slideOutToRight = import_react193.keyframes`
|
|
|
21893
21924
|
opacity: 0;
|
|
21894
21925
|
}
|
|
21895
21926
|
`;
|
|
21896
|
-
var stepContainerStyles =
|
|
21927
|
+
var stepContainerStyles = import_react195.css`
|
|
21897
21928
|
position: relative;
|
|
21898
21929
|
flex: 1;
|
|
21899
21930
|
overflow: clip;
|
|
21900
21931
|
min-width: 0;
|
|
21901
21932
|
height: 100%;
|
|
21902
21933
|
`;
|
|
21903
|
-
var stepBaseStyles =
|
|
21934
|
+
var stepBaseStyles = import_react195.css`
|
|
21904
21935
|
position: absolute;
|
|
21905
21936
|
inset: 0;
|
|
21906
21937
|
display: flex;
|
|
21907
21938
|
flex-direction: column;
|
|
21908
21939
|
gap: var(--spacing-base);
|
|
21909
21940
|
`;
|
|
21910
|
-
var stepActiveStyles =
|
|
21941
|
+
var stepActiveStyles = import_react195.css`
|
|
21911
21942
|
visibility: visible;
|
|
21912
21943
|
`;
|
|
21913
|
-
var stepInactiveStyles =
|
|
21944
|
+
var stepInactiveStyles = import_react195.css`
|
|
21914
21945
|
visibility: hidden;
|
|
21915
21946
|
`;
|
|
21916
|
-
var stepEnterForwardStyles =
|
|
21947
|
+
var stepEnterForwardStyles = import_react195.css`
|
|
21917
21948
|
animation: ${slideInFromRight} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
21918
21949
|
|
|
21919
21950
|
${prefersReducedMotion("reduce")} {
|
|
21920
21951
|
animation: none;
|
|
21921
21952
|
}
|
|
21922
21953
|
`;
|
|
21923
|
-
var stepExitForwardStyles =
|
|
21954
|
+
var stepExitForwardStyles = import_react195.css`
|
|
21924
21955
|
animation: ${slideOutToLeft} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
21925
21956
|
|
|
21926
21957
|
${prefersReducedMotion("reduce")} {
|
|
21927
21958
|
animation: none;
|
|
21928
21959
|
}
|
|
21929
21960
|
`;
|
|
21930
|
-
var stepEnterBackwardStyles =
|
|
21961
|
+
var stepEnterBackwardStyles = import_react195.css`
|
|
21931
21962
|
animation: ${slideInFromLeft} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
21932
21963
|
|
|
21933
21964
|
${prefersReducedMotion("reduce")} {
|
|
21934
21965
|
animation: none;
|
|
21935
21966
|
}
|
|
21936
21967
|
`;
|
|
21937
|
-
var stepExitBackwardStyles =
|
|
21968
|
+
var stepExitBackwardStyles = import_react195.css`
|
|
21938
21969
|
animation: ${slideOutToRight} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
21939
21970
|
|
|
21940
21971
|
${prefersReducedMotion("reduce")} {
|
|
21941
21972
|
animation: none;
|
|
21942
21973
|
}
|
|
21943
21974
|
`;
|
|
21944
|
-
var headerContainerStyles =
|
|
21975
|
+
var headerContainerStyles = import_react195.css`
|
|
21945
21976
|
position: relative;
|
|
21946
21977
|
overflow: hidden;
|
|
21947
21978
|
flex: 1;
|
|
21948
21979
|
`;
|
|
21949
|
-
var headerItemStyles = (isActive) =>
|
|
21980
|
+
var headerItemStyles = (isActive) => import_react195.css`
|
|
21950
21981
|
position: ${isActive ? "relative" : "absolute"};
|
|
21951
21982
|
inset: 0;
|
|
21952
21983
|
white-space: nowrap;
|
|
21953
21984
|
overflow: hidden;
|
|
21954
21985
|
text-overflow: ellipsis;
|
|
21955
21986
|
`;
|
|
21956
|
-
var stepContentStyles =
|
|
21987
|
+
var stepContentStyles = import_react195.css`
|
|
21957
21988
|
position: relative;
|
|
21958
21989
|
flex: 1;
|
|
21959
21990
|
overflow: auto;
|
|
@@ -22027,18 +22058,18 @@ function StackedModalStep({ children, buttonGroup }) {
|
|
|
22027
22058
|
// src/components/StackedModal/StackedModal.tsx
|
|
22028
22059
|
var import_jsx_runtime157 = require("@emotion/react/jsx-runtime");
|
|
22029
22060
|
function filterSteps(children) {
|
|
22030
|
-
return
|
|
22031
|
-
(child) =>
|
|
22061
|
+
return import_react196.default.Children.toArray(children).filter(
|
|
22062
|
+
(child) => import_react196.default.isValidElement(child) && child.type === StackedModalStep
|
|
22032
22063
|
);
|
|
22033
22064
|
}
|
|
22034
|
-
var StackedModal =
|
|
22065
|
+
var StackedModal = import_react196.default.forwardRef(
|
|
22035
22066
|
({ children, initialStep = 0, ...rest }, ref) => {
|
|
22036
22067
|
const steps = filterSteps(children);
|
|
22037
22068
|
return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(StackedModalProvider, { totalSteps: steps.length, initialStep, children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(StackedModalInner, { ref, steps, ...rest }) });
|
|
22038
22069
|
}
|
|
22039
22070
|
);
|
|
22040
22071
|
StackedModal.displayName = "StackedModal";
|
|
22041
|
-
var StackedModalInner =
|
|
22072
|
+
var StackedModalInner = import_react196.default.forwardRef(
|
|
22042
22073
|
({ steps, onRequestClose, modalSize = "lg", width, height, "data-testid": dataTestId }, ref) => {
|
|
22043
22074
|
return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { css: stackedModalRootStyles, children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
|
|
22044
22075
|
Modal,
|
|
@@ -22080,12 +22111,12 @@ var StackedModalHeader = ({ children, onBack, icon = import_CgChevronLeft3.CgChe
|
|
|
22080
22111
|
|
|
22081
22112
|
// src/components/Switch/Switch.tsx
|
|
22082
22113
|
init_emotion_jsx_shim();
|
|
22083
|
-
var
|
|
22114
|
+
var import_react198 = require("react");
|
|
22084
22115
|
|
|
22085
22116
|
// src/components/Switch/Switch.styles.ts
|
|
22086
22117
|
init_emotion_jsx_shim();
|
|
22087
|
-
var
|
|
22088
|
-
var SwitchInputContainer =
|
|
22118
|
+
var import_react197 = require("@emotion/react");
|
|
22119
|
+
var SwitchInputContainer = import_react197.css`
|
|
22089
22120
|
cursor: pointer;
|
|
22090
22121
|
display: inline-flex;
|
|
22091
22122
|
position: relative;
|
|
@@ -22095,7 +22126,7 @@ var SwitchInputContainer = import_react195.css`
|
|
|
22095
22126
|
user-select: none;
|
|
22096
22127
|
z-index: 0;
|
|
22097
22128
|
`;
|
|
22098
|
-
var SwitchInput = (size) =>
|
|
22129
|
+
var SwitchInput = (size) => import_react197.css`
|
|
22099
22130
|
appearance: none;
|
|
22100
22131
|
border-radius: var(--rounded-full);
|
|
22101
22132
|
background-color: var(--white);
|
|
@@ -22146,18 +22177,18 @@ var SwitchInput = (size) => import_react195.css`
|
|
|
22146
22177
|
cursor: not-allowed;
|
|
22147
22178
|
}
|
|
22148
22179
|
`;
|
|
22149
|
-
var SwitchInputCheckedDirectionLeft =
|
|
22180
|
+
var SwitchInputCheckedDirectionLeft = import_react197.css`
|
|
22150
22181
|
&:checked {
|
|
22151
22182
|
transform: translateX(var(--spacing-base));
|
|
22152
22183
|
}
|
|
22153
22184
|
`;
|
|
22154
|
-
var SwitchInputCheckedDirectionRight =
|
|
22185
|
+
var SwitchInputCheckedDirectionRight = import_react197.css`
|
|
22155
22186
|
transform: translateX(-var(--spacing-base));
|
|
22156
22187
|
&:checked {
|
|
22157
22188
|
transform: translateX(0);
|
|
22158
22189
|
}
|
|
22159
22190
|
`;
|
|
22160
|
-
var SwitchInputDisabled =
|
|
22191
|
+
var SwitchInputDisabled = import_react197.css`
|
|
22161
22192
|
opacity: var(--opacity-50);
|
|
22162
22193
|
cursor: not-allowed;
|
|
22163
22194
|
|
|
@@ -22165,19 +22196,19 @@ var SwitchInputDisabled = import_react195.css`
|
|
|
22165
22196
|
cursor: not-allowed;
|
|
22166
22197
|
}
|
|
22167
22198
|
`;
|
|
22168
|
-
var SwitchInputLabelAlignmentLeft = (size) =>
|
|
22199
|
+
var SwitchInputLabelAlignmentLeft = (size) => import_react197.css`
|
|
22169
22200
|
padding-inline-start: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
22170
22201
|
&:before {
|
|
22171
22202
|
left: 0;
|
|
22172
22203
|
}
|
|
22173
22204
|
`;
|
|
22174
|
-
var SwitchInputLabelAlignmentRight = (size) =>
|
|
22205
|
+
var SwitchInputLabelAlignmentRight = (size) => import_react197.css`
|
|
22175
22206
|
padding-inline-end: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
22176
22207
|
&:before {
|
|
22177
22208
|
right: 0;
|
|
22178
22209
|
}
|
|
22179
22210
|
`;
|
|
22180
|
-
var SwitchInputLabel = (size) =>
|
|
22211
|
+
var SwitchInputLabel = (size) => import_react197.css`
|
|
22181
22212
|
align-items: center;
|
|
22182
22213
|
color: var(--typography-base);
|
|
22183
22214
|
display: inline-flex;
|
|
@@ -22198,26 +22229,26 @@ var SwitchInputLabel = (size) => import_react195.css`
|
|
|
22198
22229
|
top: 0;
|
|
22199
22230
|
}
|
|
22200
22231
|
`;
|
|
22201
|
-
var SwitchTextAlignmentLeft = (size) =>
|
|
22232
|
+
var SwitchTextAlignmentLeft = (size) => import_react197.css`
|
|
22202
22233
|
padding-inline-start: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
22203
22234
|
`;
|
|
22204
|
-
var SwitchTextAlignmentRight = (size) =>
|
|
22235
|
+
var SwitchTextAlignmentRight = (size) => import_react197.css`
|
|
22205
22236
|
padding-inline-end: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
22206
22237
|
`;
|
|
22207
|
-
var SwitchText =
|
|
22238
|
+
var SwitchText = import_react197.css`
|
|
22208
22239
|
color: var(--gray-500);
|
|
22209
22240
|
font-size: var(--fs-sm);
|
|
22210
22241
|
`;
|
|
22211
|
-
var SwitchInputContainerAlignmentLeft =
|
|
22242
|
+
var SwitchInputContainerAlignmentLeft = import_react197.css`
|
|
22212
22243
|
flex-direction: row;
|
|
22213
22244
|
`;
|
|
22214
|
-
var SwitchInputContainerAlignmentRight =
|
|
22245
|
+
var SwitchInputContainerAlignmentRight = import_react197.css`
|
|
22215
22246
|
flex-direction: row-reverse;
|
|
22216
22247
|
`;
|
|
22217
22248
|
|
|
22218
22249
|
// src/components/Switch/Switch.tsx
|
|
22219
22250
|
var import_jsx_runtime159 = require("@emotion/react/jsx-runtime");
|
|
22220
|
-
var Switch = (0,
|
|
22251
|
+
var Switch = (0, import_react198.forwardRef)(
|
|
22221
22252
|
({
|
|
22222
22253
|
label: label2,
|
|
22223
22254
|
infoText,
|
|
@@ -22228,7 +22259,7 @@ var Switch = (0, import_react196.forwardRef)(
|
|
|
22228
22259
|
...inputProps
|
|
22229
22260
|
}, ref) => {
|
|
22230
22261
|
let additionalText = infoText;
|
|
22231
|
-
const { SwitchInputContainerAlignmentStyles, SwitchInputCheckedDirection, SwitchInputLabelAlignment } = (0,
|
|
22262
|
+
const { SwitchInputContainerAlignmentStyles, SwitchInputCheckedDirection, SwitchInputLabelAlignment } = (0, import_react198.useMemo)(() => {
|
|
22232
22263
|
if (alignment === "left") {
|
|
22233
22264
|
return {
|
|
22234
22265
|
SwitchInputContainerAlignmentStyles: SwitchInputContainerAlignmentLeft,
|
|
@@ -22289,8 +22320,8 @@ init_emotion_jsx_shim();
|
|
|
22289
22320
|
|
|
22290
22321
|
// src/components/Table/Table.styles.ts
|
|
22291
22322
|
init_emotion_jsx_shim();
|
|
22292
|
-
var
|
|
22293
|
-
var table = ({ cellPadding = "var(--spacing-sm)" }) =>
|
|
22323
|
+
var import_react199 = require("@emotion/react");
|
|
22324
|
+
var table = ({ cellPadding = "var(--spacing-sm)" }) => import_react199.css`
|
|
22294
22325
|
border-bottom: 1px solid var(--gray-400);
|
|
22295
22326
|
border-collapse: collapse;
|
|
22296
22327
|
min-width: 100%;
|
|
@@ -22310,21 +22341,21 @@ var table = ({ cellPadding = "var(--spacing-sm)" }) => import_react197.css`
|
|
|
22310
22341
|
background-color: var(--gray-50);
|
|
22311
22342
|
}
|
|
22312
22343
|
`;
|
|
22313
|
-
var tableHead =
|
|
22344
|
+
var tableHead = import_react199.css`
|
|
22314
22345
|
color: var(--typography-base);
|
|
22315
22346
|
text-align: left;
|
|
22316
22347
|
`;
|
|
22317
|
-
var tableRow =
|
|
22348
|
+
var tableRow = import_react199.css`
|
|
22318
22349
|
border-bottom: 1px solid var(--gray-200);
|
|
22319
22350
|
font-size: var(--fs-sm);
|
|
22320
22351
|
`;
|
|
22321
|
-
var tableCellHead =
|
|
22352
|
+
var tableCellHead = import_react199.css`
|
|
22322
22353
|
font-size: var(--fs-sm);
|
|
22323
22354
|
font-weight: var(--fw-regular);
|
|
22324
22355
|
line-height: 1.2;
|
|
22325
22356
|
}
|
|
22326
22357
|
`;
|
|
22327
|
-
var responsiveTableContainer =
|
|
22358
|
+
var responsiveTableContainer = import_react199.css`
|
|
22328
22359
|
max-width: calc(100vw - var(--spacing-md) * 2);
|
|
22329
22360
|
overflow-x: auto;
|
|
22330
22361
|
${scrollbarStyles}
|
|
@@ -22391,12 +22422,12 @@ var TableCellData = React26.forwardRef(
|
|
|
22391
22422
|
// src/components/Tabs/Tabs.tsx
|
|
22392
22423
|
init_emotion_jsx_shim();
|
|
22393
22424
|
var import_tabs = require("@base-ui/react/tabs");
|
|
22394
|
-
var
|
|
22425
|
+
var import_react201 = require("react");
|
|
22395
22426
|
|
|
22396
22427
|
// src/components/Tabs/Tabs.styles.ts
|
|
22397
22428
|
init_emotion_jsx_shim();
|
|
22398
|
-
var
|
|
22399
|
-
var tabButtonStyles =
|
|
22429
|
+
var import_react200 = require("@emotion/react");
|
|
22430
|
+
var tabButtonStyles = import_react200.css`
|
|
22400
22431
|
align-items: center;
|
|
22401
22432
|
border: 0;
|
|
22402
22433
|
height: 2.5rem;
|
|
@@ -22413,7 +22444,7 @@ var tabButtonStyles = import_react198.css`
|
|
|
22413
22444
|
box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
|
|
22414
22445
|
}
|
|
22415
22446
|
`;
|
|
22416
|
-
var tabButtonGroupStyles =
|
|
22447
|
+
var tabButtonGroupStyles = import_react200.css`
|
|
22417
22448
|
display: flex;
|
|
22418
22449
|
gap: var(--spacing-base);
|
|
22419
22450
|
border-bottom: 1px solid var(--gray-300);
|
|
@@ -22421,16 +22452,16 @@ var tabButtonGroupStyles = import_react198.css`
|
|
|
22421
22452
|
|
|
22422
22453
|
// src/components/Tabs/Tabs.tsx
|
|
22423
22454
|
var import_jsx_runtime162 = require("@emotion/react/jsx-runtime");
|
|
22424
|
-
var TabsContext = (0,
|
|
22455
|
+
var TabsContext = (0, import_react201.createContext)(null);
|
|
22425
22456
|
var useCurrentTab = () => {
|
|
22426
|
-
const context = (0,
|
|
22457
|
+
const context = (0, import_react201.useContext)(TabsContext);
|
|
22427
22458
|
if (!context) {
|
|
22428
22459
|
throw new Error("This component can only be used inside <Tabs>");
|
|
22429
22460
|
}
|
|
22430
22461
|
return context;
|
|
22431
22462
|
};
|
|
22432
|
-
var ManualContext = (0,
|
|
22433
|
-
var TabRegistrationContext = (0,
|
|
22463
|
+
var ManualContext = (0, import_react201.createContext)(false);
|
|
22464
|
+
var TabRegistrationContext = (0, import_react201.createContext)(null);
|
|
22434
22465
|
var Tabs = ({
|
|
22435
22466
|
children,
|
|
22436
22467
|
onSelectedIdChange,
|
|
@@ -22441,14 +22472,14 @@ var Tabs = ({
|
|
|
22441
22472
|
className,
|
|
22442
22473
|
style
|
|
22443
22474
|
}) => {
|
|
22444
|
-
const selected = (0,
|
|
22475
|
+
const selected = (0, import_react201.useMemo)(() => {
|
|
22445
22476
|
if (selectedId) return selectedId;
|
|
22446
22477
|
return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
|
|
22447
22478
|
}, [selectedId, useHashForState]);
|
|
22448
22479
|
const isControlled = selected !== void 0;
|
|
22449
|
-
const [uncontrolledValue, setUncontrolledValue] = (0,
|
|
22450
|
-
const firstTabRegistered = (0,
|
|
22451
|
-
const registerTab = (0,
|
|
22480
|
+
const [uncontrolledValue, setUncontrolledValue] = (0, import_react201.useState)(void 0);
|
|
22481
|
+
const firstTabRegistered = (0, import_react201.useRef)(false);
|
|
22482
|
+
const registerTab = (0, import_react201.useCallback)(
|
|
22452
22483
|
(value) => {
|
|
22453
22484
|
if (!firstTabRegistered.current) {
|
|
22454
22485
|
firstTabRegistered.current = true;
|
|
@@ -22460,7 +22491,7 @@ var Tabs = ({
|
|
|
22460
22491
|
[isControlled]
|
|
22461
22492
|
);
|
|
22462
22493
|
const currentValue = isControlled ? selected : uncontrolledValue;
|
|
22463
|
-
const onTabSelect = (0,
|
|
22494
|
+
const onTabSelect = (0, import_react201.useCallback)(
|
|
22464
22495
|
(value) => {
|
|
22465
22496
|
const selectedValueWithoutNull = value != null ? value : void 0;
|
|
22466
22497
|
if (!isControlled) {
|
|
@@ -22474,7 +22505,7 @@ var Tabs = ({
|
|
|
22474
22505
|
},
|
|
22475
22506
|
[isControlled, onSelectedIdChange, useHashForState]
|
|
22476
22507
|
);
|
|
22477
|
-
const tabsContextValue = (0,
|
|
22508
|
+
const tabsContextValue = (0, import_react201.useMemo)(
|
|
22478
22509
|
() => ({
|
|
22479
22510
|
value: currentValue,
|
|
22480
22511
|
setValue: (v) => onTabSelect(v)
|
|
@@ -22494,7 +22525,7 @@ var Tabs = ({
|
|
|
22494
22525
|
) }) }) });
|
|
22495
22526
|
};
|
|
22496
22527
|
var TabButtonGroup = ({ children, ...props }) => {
|
|
22497
|
-
const manual = (0,
|
|
22528
|
+
const manual = (0, import_react201.useContext)(ManualContext);
|
|
22498
22529
|
return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(import_tabs.Tabs.List, { activateOnFocus: !manual, ...props, css: tabButtonGroupStyles, children });
|
|
22499
22530
|
};
|
|
22500
22531
|
var TabButton = ({
|
|
@@ -22502,8 +22533,8 @@ var TabButton = ({
|
|
|
22502
22533
|
id,
|
|
22503
22534
|
...props
|
|
22504
22535
|
}) => {
|
|
22505
|
-
const registration = (0,
|
|
22506
|
-
(0,
|
|
22536
|
+
const registration = (0, import_react201.useContext)(TabRegistrationContext);
|
|
22537
|
+
(0, import_react201.useEffect)(() => {
|
|
22507
22538
|
registration == null ? void 0 : registration.registerTab(id);
|
|
22508
22539
|
}, []);
|
|
22509
22540
|
return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(import_tabs.Tabs.Tab, { type: "button", value: id, "data-tab-id": id, ...props, css: tabButtonStyles, children });
|
|
@@ -22525,8 +22556,8 @@ init_emotion_jsx_shim();
|
|
|
22525
22556
|
|
|
22526
22557
|
// src/components/Validation/StatusBullet.styles.ts
|
|
22527
22558
|
init_emotion_jsx_shim();
|
|
22528
|
-
var
|
|
22529
|
-
var StatusBulletContainer =
|
|
22559
|
+
var import_react202 = require("@emotion/react");
|
|
22560
|
+
var StatusBulletContainer = import_react202.css`
|
|
22530
22561
|
align-items: center;
|
|
22531
22562
|
align-self: center;
|
|
22532
22563
|
color: var(--gray-500);
|
|
@@ -22542,33 +22573,33 @@ var StatusBulletContainer = import_react200.css`
|
|
|
22542
22573
|
display: block;
|
|
22543
22574
|
}
|
|
22544
22575
|
`;
|
|
22545
|
-
var StatusBulletBase =
|
|
22576
|
+
var StatusBulletBase = import_react202.css`
|
|
22546
22577
|
font-size: var(--fs-sm);
|
|
22547
22578
|
&:before {
|
|
22548
22579
|
width: var(--fs-xs);
|
|
22549
22580
|
height: var(--fs-xs);
|
|
22550
22581
|
}
|
|
22551
22582
|
`;
|
|
22552
|
-
var StatusBulletSmall =
|
|
22583
|
+
var StatusBulletSmall = import_react202.css`
|
|
22553
22584
|
font-size: var(--fs-xs);
|
|
22554
22585
|
&:before {
|
|
22555
22586
|
width: var(--fs-xxs);
|
|
22556
22587
|
height: var(--fs-xxs);
|
|
22557
22588
|
}
|
|
22558
22589
|
`;
|
|
22559
|
-
var StatusDraft =
|
|
22590
|
+
var StatusDraft = import_react202.css`
|
|
22560
22591
|
&:before {
|
|
22561
22592
|
background: var(--white);
|
|
22562
22593
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
22563
22594
|
}
|
|
22564
22595
|
`;
|
|
22565
|
-
var StatusModified =
|
|
22596
|
+
var StatusModified = import_react202.css`
|
|
22566
22597
|
&:before {
|
|
22567
22598
|
background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
|
|
22568
22599
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
22569
22600
|
}
|
|
22570
22601
|
`;
|
|
22571
|
-
var StatusError =
|
|
22602
|
+
var StatusError = import_react202.css`
|
|
22572
22603
|
color: var(--error);
|
|
22573
22604
|
&:before {
|
|
22574
22605
|
/* TODO: replace this with an svg icon */
|
|
@@ -22581,22 +22612,22 @@ var StatusError = import_react200.css`
|
|
|
22581
22612
|
);
|
|
22582
22613
|
}
|
|
22583
22614
|
`;
|
|
22584
|
-
var StatusPublished =
|
|
22615
|
+
var StatusPublished = import_react202.css`
|
|
22585
22616
|
&:before {
|
|
22586
22617
|
background: var(--accent-dark);
|
|
22587
22618
|
}
|
|
22588
22619
|
`;
|
|
22589
|
-
var StatusOrphan =
|
|
22620
|
+
var StatusOrphan = import_react202.css`
|
|
22590
22621
|
&:before {
|
|
22591
22622
|
background: var(--brand-secondary-5);
|
|
22592
22623
|
}
|
|
22593
22624
|
`;
|
|
22594
|
-
var StatusUnknown =
|
|
22625
|
+
var StatusUnknown = import_react202.css`
|
|
22595
22626
|
&:before {
|
|
22596
22627
|
background: var(--gray-800);
|
|
22597
22628
|
}
|
|
22598
22629
|
`;
|
|
22599
|
-
var StatusDeleted =
|
|
22630
|
+
var StatusDeleted = import_react202.css`
|
|
22600
22631
|
&:before {
|
|
22601
22632
|
background: var(--error);
|
|
22602
22633
|
}
|