@uniformdev/design-system 19.173.1-alpha.17 → 19.176.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +562 -486
- package/dist/index.d.mts +36 -18
- package/dist/index.d.ts +36 -18
- package/dist/index.js +632 -552
- package/package.json +4 -4
package/dist/esm/index.js
CHANGED
|
@@ -3119,37 +3119,10 @@ var customIcons = {
|
|
|
3119
3119
|
|
|
3120
3120
|
// src/components/Icons/systemIcons.tsx
|
|
3121
3121
|
import { GenIcon as GenIcon2 } from "@react-icons/all-files";
|
|
3122
|
-
import { CgGlobeAlt } from "@react-icons/all-files/cg/CgGlobeAlt";
|
|
3123
3122
|
import { CgList } from "@react-icons/all-files/cg/CgList";
|
|
3124
3123
|
import { CgPen } from "@react-icons/all-files/cg/CgPen";
|
|
3125
|
-
import { TbBinaryTree2 } from "@react-icons/all-files/tb/TbBinaryTree2";
|
|
3126
3124
|
import { TbBox } from "@react-icons/all-files/tb/TbBox";
|
|
3127
3125
|
var uniformComponentIcon = TbBox;
|
|
3128
|
-
var uniformConditionalValuesIcon = TbBinaryTree2;
|
|
3129
|
-
var uniformAiIcon = customIcons["magic-wand"];
|
|
3130
|
-
var uniformLocaleIcon = CgGlobeAlt;
|
|
3131
|
-
var uniformLocaleDisabledIcon = GenIcon2({
|
|
3132
|
-
tag: "svg",
|
|
3133
|
-
attr: { fill: "currentColor", viewBox: "0 0 24 24", role: "img" },
|
|
3134
|
-
child: [
|
|
3135
|
-
{
|
|
3136
|
-
tag: "path",
|
|
3137
|
-
attr: {
|
|
3138
|
-
fillRule: "evenodd",
|
|
3139
|
-
d: "M20.123 15.88A9 9 0 0 0 8.12 3.877l2.787 2.787c.03-.073.06-.145.092-.216.294-.661.592-1.073.823-1.292a.988.988 0 0 1 .178-.14.991.991 0 0 1 .178.14c.23.22.528.63.823 1.292.366.825.665 1.901.838 3.148l3.593 3.594a9.739 9.739 0 0 0 1.548-.665 6.968 6.968 0 0 1-.385 1.827l1.528 1.528ZM14.805 5.585c.691 1.53 1.136 3.62 1.19 5.945a9.939 9.939 0 0 0 1.557-.53c.6-.266.994-.536 1.226-.756a7.016 7.016 0 0 0-3.973-4.66ZM3.877 8.12A9 9 0 0 0 15.88 20.123l-2.787-2.787a7.89 7.89 0 0 1-.092.216c-.294.661-.593 1.073-.823 1.292a.996.996 0 0 1-.178.14.99.99 0 0 1-.178-.14c-.23-.22-.529-.63-.823-1.292-.367-.825-.666-1.901-.838-3.148L6.967 11.21a8.334 8.334 0 0 1-.519-.21c-.6-.266-.995-.536-1.226-.756a6.95 6.95 0 0 1 .183-.596L3.877 8.12Zm5.317 10.295c-.577-1.278-.982-2.947-1.131-4.817-1.183-.256-2.22-.624-3.044-1.073a7.004 7.004 0 0 0 4.175 5.89Z",
|
|
3140
|
-
clipRule: "evenodd"
|
|
3141
|
-
},
|
|
3142
|
-
child: []
|
|
3143
|
-
},
|
|
3144
|
-
{
|
|
3145
|
-
tag: "path",
|
|
3146
|
-
attr: {
|
|
3147
|
-
d: "M20.031 20.031a1.5 1.5 0 0 1-2.121 0L3.06 5.182a1.5 1.5 0 0 1 2.122-2.121L20.03 17.91a1.5 1.5 0 0 1 0 2.121Z"
|
|
3148
|
-
},
|
|
3149
|
-
child: []
|
|
3150
|
-
}
|
|
3151
|
-
]
|
|
3152
|
-
});
|
|
3153
3126
|
var uniformComponentPatternIcon = GenIcon2({
|
|
3154
3127
|
tag: "svg",
|
|
3155
3128
|
attr: {
|
|
@@ -12316,7 +12289,6 @@ var menuItem = (textTheme, forceActive) => css26`
|
|
|
12316
12289
|
font-weight: var(--fw-regular);
|
|
12317
12290
|
flex-grow: 1;
|
|
12318
12291
|
gap: var(--spacing-xs);
|
|
12319
|
-
cursor: default;
|
|
12320
12292
|
white-space: nowrap;
|
|
12321
12293
|
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
12322
12294
|
${forceActive ? activeMenuItem : ""}
|
|
@@ -15230,19 +15202,17 @@ var MultilineChip = ({ children, onClick, ...props }) => {
|
|
|
15230
15202
|
|
|
15231
15203
|
// src/components/Counter/Counter.styles.ts
|
|
15232
15204
|
import { css as css50 } from "@emotion/react";
|
|
15233
|
-
var counterContainer = (bgColor
|
|
15205
|
+
var counterContainer = (bgColor) => css50`
|
|
15234
15206
|
align-items: center;
|
|
15235
15207
|
border-radius: var(--rounded-full);
|
|
15236
15208
|
border: 1px solid var(--gray-300);
|
|
15237
15209
|
background: ${bgColor};
|
|
15238
|
-
color:
|
|
15210
|
+
color: var(--typography-base);
|
|
15239
15211
|
display: inline-flex;
|
|
15240
|
-
|
|
15241
|
-
font-size: var(--fs-xs);
|
|
15212
|
+
font-size: var(--fs-xxs);
|
|
15242
15213
|
font-weight: var(--fw-regular);
|
|
15243
15214
|
justify-content: center;
|
|
15244
|
-
|
|
15245
|
-
width: ${hasIcon ? "auto" : "var(--spacing-base)"};
|
|
15215
|
+
width: var(--spacing-base);
|
|
15246
15216
|
height: var(--spacing-base);
|
|
15247
15217
|
`;
|
|
15248
15218
|
var counterZeroValue = css50`
|
|
@@ -15266,13 +15236,7 @@ var counterIcon = css50`
|
|
|
15266
15236
|
|
|
15267
15237
|
// src/components/Counter/Counter.tsx
|
|
15268
15238
|
import { jsx as jsx63, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
|
|
15269
|
-
var Counter = ({
|
|
15270
|
-
count,
|
|
15271
|
-
bgColor = "transparent",
|
|
15272
|
-
icon,
|
|
15273
|
-
iconColor = "auto",
|
|
15274
|
-
...props
|
|
15275
|
-
}) => {
|
|
15239
|
+
var Counter = ({ count, bgColor = "transparent", ...props }) => {
|
|
15276
15240
|
if (typeof count === "undefined") {
|
|
15277
15241
|
return null;
|
|
15278
15242
|
}
|
|
@@ -15281,19 +15245,7 @@ var Counter = ({
|
|
|
15281
15245
|
/* @__PURE__ */ jsx63(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon })
|
|
15282
15246
|
] }) : count;
|
|
15283
15247
|
const formatCount = count === 0 ? /* @__PURE__ */ jsx63("span", { css: counterZeroValue, title: `${count}` }) : isTripleDigits;
|
|
15284
|
-
return /* @__PURE__ */
|
|
15285
|
-
icon ? /* @__PURE__ */ jsx63(
|
|
15286
|
-
"span",
|
|
15287
|
-
{
|
|
15288
|
-
css: [
|
|
15289
|
-
iconColor ? functionalColors : void 0,
|
|
15290
|
-
{ color: iconColor ? iconColor === "red" ? "var(--brand-secondary-5)" : iconColor : "inherit" }
|
|
15291
|
-
],
|
|
15292
|
-
children: /* @__PURE__ */ jsx63(Icon, { icon, iconColor: "currentColor", size: "0.6rem" })
|
|
15293
|
-
}
|
|
15294
|
-
) : null,
|
|
15295
|
-
/* @__PURE__ */ jsx63("span", { children: formatCount })
|
|
15296
|
-
] });
|
|
15248
|
+
return /* @__PURE__ */ jsx63("div", { css: counterContainer(bgColor), ...props, children: formatCount });
|
|
15297
15249
|
};
|
|
15298
15250
|
|
|
15299
15251
|
// src/components/DashedBox/DashedBox.styles.ts
|
|
@@ -15383,6 +15335,7 @@ var input2 = css53`
|
|
|
15383
15335
|
padding: 0;
|
|
15384
15336
|
display: flex;
|
|
15385
15337
|
justify-content: space-between;
|
|
15338
|
+
gap: var(--spacing-xs);
|
|
15386
15339
|
`;
|
|
15387
15340
|
var inputLabel = css53`
|
|
15388
15341
|
flex-grow: 1;
|
|
@@ -15401,9 +15354,9 @@ var trigger = css53`
|
|
|
15401
15354
|
`;
|
|
15402
15355
|
var popover = css53`
|
|
15403
15356
|
padding: var(--spacing-md);
|
|
15404
|
-
max-width:
|
|
15357
|
+
max-width: unset;
|
|
15405
15358
|
container-type: inline-size;
|
|
15406
|
-
width: 100
|
|
15359
|
+
width: clamp(200px, 100%, 540px);
|
|
15407
15360
|
`;
|
|
15408
15361
|
var popoverInnerContent = css53`
|
|
15409
15362
|
display: grid;
|
|
@@ -15422,6 +15375,8 @@ var popoverInnerContent = css53`
|
|
|
15422
15375
|
var calendarSection = css53`
|
|
15423
15376
|
grid-column: 1;
|
|
15424
15377
|
grid-row: 1 / 3;
|
|
15378
|
+
max-width: 240px;
|
|
15379
|
+
margin-inline: auto;
|
|
15425
15380
|
|
|
15426
15381
|
[data-variant='date'] & {
|
|
15427
15382
|
grid-row: 1 / 2;
|
|
@@ -15443,6 +15398,7 @@ var datePart = css53`
|
|
|
15443
15398
|
var datePartButton = css53`
|
|
15444
15399
|
// this allows the button to be as wide as the text
|
|
15445
15400
|
min-width: 0;
|
|
15401
|
+
margin-right: auto;
|
|
15446
15402
|
`;
|
|
15447
15403
|
|
|
15448
15404
|
// src/components/DateTimePicker/DateTimePickerSummary.tsx
|
|
@@ -15591,10 +15547,12 @@ var DateTimePicker = ({
|
|
|
15591
15547
|
warningMessage,
|
|
15592
15548
|
disabled: disabled2,
|
|
15593
15549
|
onChange,
|
|
15594
|
-
testId,
|
|
15550
|
+
testId = "datetime-picker",
|
|
15551
|
+
placement = "bottom-start",
|
|
15552
|
+
offset,
|
|
15595
15553
|
...props
|
|
15596
15554
|
}) => {
|
|
15597
|
-
const popover2 = usePopoverState({ placement:
|
|
15555
|
+
const popover2 = usePopoverState({ placement, unstable_offset: offset });
|
|
15598
15556
|
const parsedValue = useMemo(() => tryParseAbsolute(value == null ? void 0 : value.datetime, value == null ? void 0 : value.timeZone), [value]);
|
|
15599
15557
|
const parsedMinVisible = useMemo(
|
|
15600
15558
|
() => tryParseAbsoluteToDateString(minVisible, value == null ? void 0 : value.timeZone),
|
|
@@ -15765,21 +15723,17 @@ import { css as css54 } from "@emotion/react";
|
|
|
15765
15723
|
var descriptionListHorizontal = css54`
|
|
15766
15724
|
display: grid;
|
|
15767
15725
|
grid-template-columns: max-content auto;
|
|
15768
|
-
gap: var(--spacing-
|
|
15726
|
+
gap: var(--spacing-sm) var(--spacing-md);
|
|
15769
15727
|
`;
|
|
15770
15728
|
var descriptionListVertical = css54`
|
|
15771
15729
|
display: flex;
|
|
15772
15730
|
flex-direction: column;
|
|
15773
|
-
gap: var(--spacing-
|
|
15731
|
+
gap: var(--spacing-sm);
|
|
15774
15732
|
`;
|
|
15775
15733
|
var descriptionListLabelStyles = css54`
|
|
15776
15734
|
display: flex;
|
|
15777
15735
|
align-items: center;
|
|
15778
15736
|
color: var(--gray-500);
|
|
15779
|
-
|
|
15780
|
-
dd + & {
|
|
15781
|
-
margin-top: var(--spacing-sm);
|
|
15782
|
-
}
|
|
15783
15737
|
`;
|
|
15784
15738
|
var descriptionListValueStyles = css54`
|
|
15785
15739
|
display: flex;
|
|
@@ -15834,7 +15788,10 @@ var detailsContent = css55`
|
|
|
15834
15788
|
position: relative;
|
|
15835
15789
|
animation: ${fadeInRtl} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
15836
15790
|
will-change: height;
|
|
15837
|
-
|
|
15791
|
+
|
|
15792
|
+
&:focus-within {
|
|
15793
|
+
z-index: 1;
|
|
15794
|
+
}
|
|
15838
15795
|
`;
|
|
15839
15796
|
var detailsContentIndented = css55`
|
|
15840
15797
|
margin-left: calc(1.25rem / 2);
|
|
@@ -15931,7 +15888,6 @@ var DragHandleStyles = css56`
|
|
|
15931
15888
|
background: transparent;
|
|
15932
15889
|
border: 0;
|
|
15933
15890
|
position: relative;
|
|
15934
|
-
height: 3.125rem;
|
|
15935
15891
|
width: 1rem;
|
|
15936
15892
|
cursor: grab;
|
|
15937
15893
|
|
|
@@ -15957,13 +15913,13 @@ var DragHandleDisabled = css56`
|
|
|
15957
15913
|
// src/components/DragHandle/DragHandle.tsx
|
|
15958
15914
|
import { jsx as jsx69 } from "@emotion/react/jsx-runtime";
|
|
15959
15915
|
var DragHandle = forwardRef14(
|
|
15960
|
-
({ disableDnd, ...props }, ref) => {
|
|
15916
|
+
({ disableDnd, height = "3.125rem", ...props }, ref) => {
|
|
15961
15917
|
return /* @__PURE__ */ jsx69(
|
|
15962
15918
|
"button",
|
|
15963
15919
|
{
|
|
15964
15920
|
type: "button",
|
|
15965
15921
|
ref,
|
|
15966
|
-
css: [DragHandleStyles, disableDnd ? DragHandleDisabled : null],
|
|
15922
|
+
css: [DragHandleStyles, disableDnd ? DragHandleDisabled : null, { height }],
|
|
15967
15923
|
disabled: disableDnd,
|
|
15968
15924
|
...props
|
|
15969
15925
|
}
|
|
@@ -18940,42 +18896,129 @@ var ObjectGridItemIconWithTooltip = ({
|
|
|
18940
18896
|
return /* @__PURE__ */ jsx107(Tooltip, { title: tooltipTitle, placement, children: /* @__PURE__ */ jsx107("span", { children: /* @__PURE__ */ jsx107(Icon, { icon, iconColor, size: "1rem" }) }) });
|
|
18941
18897
|
};
|
|
18942
18898
|
|
|
18943
|
-
// src/components/Objects/styles/
|
|
18899
|
+
// src/components/Objects/styles/ObjectGridItemLoadingSkeleton.styles.ts
|
|
18944
18900
|
import { css as css84 } from "@emotion/react";
|
|
18945
|
-
var
|
|
18946
|
-
|
|
18901
|
+
var ObjectGridItemLoadingSkeleton = css84`
|
|
18902
|
+
border-radius: var(--rounded-base);
|
|
18947
18903
|
display: flex;
|
|
18904
|
+
flex-direction: column;
|
|
18948
18905
|
gap: var(--spacing-sm);
|
|
18906
|
+
transition: border-color var(--duration-fast) var(--timing-ease-out);
|
|
18907
|
+
`;
|
|
18908
|
+
var ObjectGridItemLoadingText = (textLength) => css84`
|
|
18909
|
+
animation: ${fadeIn} 1s linear infinite alternate;
|
|
18910
|
+
border-radius: var(--rounded-base);
|
|
18911
|
+
background: var(--gray-300);
|
|
18912
|
+
display: block;
|
|
18913
|
+
width: clamp(24px, 100%, ${textLength});
|
|
18914
|
+
height: var(--fs-base);
|
|
18915
|
+
`;
|
|
18916
|
+
var ObjectGridItemLoadingImageWrapper = css84`
|
|
18917
|
+
aspect-ratio: 16/9;
|
|
18918
|
+
max-width: 100%;
|
|
18919
|
+
max-height: 100%;
|
|
18920
|
+
height: auto;
|
|
18921
|
+
padding: var(--spacing-sm);
|
|
18922
|
+
overflow: hidden;
|
|
18923
|
+
`;
|
|
18924
|
+
var ObjectGridItemLoadingImage = css84`
|
|
18925
|
+
animation: ${fadeIn} 1s linear infinite alternate;
|
|
18926
|
+
border-radius: var(--rounded-base);
|
|
18927
|
+
background: var(--gray-300);
|
|
18928
|
+
display: block;
|
|
18929
|
+
width: 100%;
|
|
18930
|
+
height: auto;
|
|
18931
|
+
aspect-ratio: 1;
|
|
18932
|
+
`;
|
|
18933
|
+
var ObjectGridItemLoadingContentWrapper = css84`
|
|
18934
|
+
padding: 0 var(--spacing-sm) var(--spacing-sm);
|
|
18935
|
+
min-height: 52px;
|
|
18936
|
+
`;
|
|
18937
|
+
var ObjectGridItemLoadingContentContainer = css84`
|
|
18949
18938
|
flex-grow: 1;
|
|
18939
|
+
gap: var(--spacing-xs);
|
|
18940
|
+
`;
|
|
18941
|
+
|
|
18942
|
+
// src/components/Objects/ObjectGridItemLoadingSkeleton.tsx
|
|
18943
|
+
import { jsx as jsx108, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
|
|
18944
|
+
var ObjectGridItemLoadingSkeleton2 = () => {
|
|
18945
|
+
return /* @__PURE__ */ jsxs72("div", { css: ObjectGridItemLoadingSkeleton, children: [
|
|
18946
|
+
/* @__PURE__ */ jsx108("div", { css: ObjectGridItemLoadingImageWrapper, "data-testid": "object-grid-item-cover-skeleton", children: /* @__PURE__ */ jsx108("span", { css: ObjectGridItemLoadingImage, role: "presentation" }) }),
|
|
18947
|
+
/* @__PURE__ */ jsxs72(
|
|
18948
|
+
HorizontalRhythm,
|
|
18949
|
+
{
|
|
18950
|
+
css: ObjectGridItemLoadingContentWrapper,
|
|
18951
|
+
align: "flex-start",
|
|
18952
|
+
justify: "space-between",
|
|
18953
|
+
gap: "sm",
|
|
18954
|
+
children: [
|
|
18955
|
+
/* @__PURE__ */ jsxs72(VerticalRhythm, { css: ObjectGridItemLoadingContentContainer, gap: "0", children: [
|
|
18956
|
+
/* @__PURE__ */ jsx108(HorizontalRhythm, { gap: "xs", align: "center", children: /* @__PURE__ */ jsx108("span", { role: "presentation", css: ObjectGridItemLoadingText("18ch") }) }),
|
|
18957
|
+
/* @__PURE__ */ jsx108("span", { role: "presentation", css: ObjectGridItemLoadingText("12ch") })
|
|
18958
|
+
] }),
|
|
18959
|
+
/* @__PURE__ */ jsxs72(HorizontalRhythm, { css: ObjectGridItemLoadingContentContainer, gap: "xs", justify: "flex-end", children: [
|
|
18960
|
+
/* @__PURE__ */ jsx108("span", { role: "presentation", css: ObjectGridItemLoadingText("6ch") }),
|
|
18961
|
+
/* @__PURE__ */ jsx108("span", { role: "presentation", css: ObjectGridItemLoadingText("24px") })
|
|
18962
|
+
] })
|
|
18963
|
+
]
|
|
18964
|
+
}
|
|
18965
|
+
)
|
|
18966
|
+
] });
|
|
18967
|
+
};
|
|
18968
|
+
|
|
18969
|
+
// src/components/Objects/styles/ObjectListItem.styles.ts
|
|
18970
|
+
import { css as css85 } from "@emotion/react";
|
|
18971
|
+
var ObjectListItem = css85`
|
|
18972
|
+
background: var(--white);
|
|
18973
|
+
display: grid;
|
|
18974
|
+
gap: var(--spacing-sm);
|
|
18950
18975
|
padding: var(--spacing-sm);
|
|
18951
18976
|
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
18977
|
+
container-type: inline-size;
|
|
18978
|
+
grid-template-columns: auto 1fr auto;
|
|
18952
18979
|
|
|
18953
18980
|
&:hover {
|
|
18954
18981
|
background: var(--gray-50);
|
|
18955
18982
|
}
|
|
18956
18983
|
`;
|
|
18957
|
-
var ObjectListItemSingle =
|
|
18984
|
+
var ObjectListItemSingle = css85`
|
|
18958
18985
|
align-items: center;
|
|
18959
18986
|
`;
|
|
18960
|
-
var ObjectListItemContentWrapper =
|
|
18987
|
+
var ObjectListItemContentWrapper = css85`
|
|
18988
|
+
display: grid;
|
|
18989
|
+
gap: var(--spacing-sm);
|
|
18990
|
+
justify-content: space-between;
|
|
18961
18991
|
flex-grow: 1;
|
|
18992
|
+
|
|
18993
|
+
${cq("34rem")} {
|
|
18994
|
+
grid-template-columns: auto 1fr auto;
|
|
18995
|
+
}
|
|
18996
|
+
`;
|
|
18997
|
+
var ObjectListItemRightSlot = css85`
|
|
18998
|
+
display: flex;
|
|
18999
|
+
gap: var(--spacing-sm);
|
|
18962
19000
|
`;
|
|
18963
|
-
var ObjectListItemContainer =
|
|
19001
|
+
var ObjectListItemContainer = css85`
|
|
18964
19002
|
> [role='listitem'] {
|
|
18965
19003
|
border-top: 1px solid var(--gray-200);
|
|
18966
19004
|
}
|
|
18967
19005
|
`;
|
|
18968
|
-
var ObjectListItemCover =
|
|
18969
|
-
|
|
18970
|
-
|
|
19006
|
+
var ObjectListItemCover = css85`
|
|
19007
|
+
align-items: center;
|
|
19008
|
+
background: var(--gray-100);
|
|
19009
|
+
color: var(--gray-500);
|
|
19010
|
+
display: flex;
|
|
19011
|
+
width: 80px;
|
|
19012
|
+
height: 45px;
|
|
19013
|
+
text-align: center;
|
|
19014
|
+
font-size: var(--fs-xs);
|
|
19015
|
+
`;
|
|
19016
|
+
var ObjectListItemImage = css85`
|
|
18971
19017
|
object-fit: cover;
|
|
18972
|
-
|
|
18973
|
-
|
|
18974
|
-
background: var(--gray-200);
|
|
18975
|
-
height: 45px;
|
|
18976
|
-
}
|
|
19018
|
+
width: 100%;
|
|
19019
|
+
height: 100%;
|
|
18977
19020
|
`;
|
|
18978
|
-
var ObjectListItemLoading =
|
|
19021
|
+
var ObjectListItemLoading = css85`
|
|
18979
19022
|
animation: ${skeletonLoading} 1s linear infinite alternate;
|
|
18980
19023
|
background: var(--white);
|
|
18981
19024
|
display: flex;
|
|
@@ -18983,15 +19026,18 @@ var ObjectListItemLoading = css84`
|
|
|
18983
19026
|
flex-grow: 1;
|
|
18984
19027
|
padding: var(--spacing-sm);
|
|
18985
19028
|
`;
|
|
18986
|
-
var
|
|
19029
|
+
var ObjectListItemLoadingInner = css85`
|
|
19030
|
+
flex-grow: 1;
|
|
19031
|
+
`;
|
|
19032
|
+
var ObjectListItemLoadingText = (textLength) => css85`
|
|
18987
19033
|
animation: ${fadeIn} 1s linear infinite alternate;
|
|
18988
19034
|
border-radius: var(--rounded-base);
|
|
18989
19035
|
background: var(--gray-300);
|
|
18990
19036
|
display: block;
|
|
18991
|
-
width: ${textLength};
|
|
19037
|
+
width: clamp(10ch, 100%, ${textLength});
|
|
18992
19038
|
height: var(--fs-base);
|
|
18993
19039
|
`;
|
|
18994
|
-
var ObjectListItemLoadingImage =
|
|
19040
|
+
var ObjectListItemLoadingImage = css85`
|
|
18995
19041
|
animation: ${fadeIn} 1s linear infinite alternate;
|
|
18996
19042
|
border-radius: var(--rounded-base);
|
|
18997
19043
|
background: var(--gray-300);
|
|
@@ -18999,30 +19045,42 @@ var ObjectListItemLoadingImage = css84`
|
|
|
18999
19045
|
width: 80px;
|
|
19000
19046
|
height: 55px;
|
|
19001
19047
|
`;
|
|
19048
|
+
var ObjectListItemHeadingWrapper = css85`
|
|
19049
|
+
display: flex;
|
|
19050
|
+
gap: var(--spacing-xs);
|
|
19051
|
+
`;
|
|
19002
19052
|
|
|
19003
19053
|
// src/components/Objects/ObjectItemLoadingSkeleton.tsx
|
|
19004
|
-
import { jsx as
|
|
19005
|
-
var ObjectItemLoadingSkeleton = ({
|
|
19006
|
-
|
|
19007
|
-
|
|
19008
|
-
|
|
19009
|
-
|
|
19010
|
-
|
|
19011
|
-
|
|
19012
|
-
|
|
19013
|
-
|
|
19014
|
-
|
|
19015
|
-
|
|
19016
|
-
|
|
19017
|
-
|
|
19018
|
-
|
|
19054
|
+
import { jsx as jsx109, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
|
|
19055
|
+
var ObjectItemLoadingSkeleton = ({
|
|
19056
|
+
showCover,
|
|
19057
|
+
renderAs = "single"
|
|
19058
|
+
}) => {
|
|
19059
|
+
return /* @__PURE__ */ jsxs73(
|
|
19060
|
+
"div",
|
|
19061
|
+
{
|
|
19062
|
+
css: [
|
|
19063
|
+
ObjectListItemLoading,
|
|
19064
|
+
{
|
|
19065
|
+
alignItems: renderAs === "multi" ? "flex-start" : "center"
|
|
19066
|
+
}
|
|
19067
|
+
],
|
|
19068
|
+
children: [
|
|
19069
|
+
showCover ? /* @__PURE__ */ jsx109("div", { "data-testid": "object-list-item-cover-skeleton", children: /* @__PURE__ */ jsx109("span", { role: "presentation", css: ObjectListItemLoadingImage }) }) : null,
|
|
19070
|
+
/* @__PURE__ */ jsx109(VerticalRhythm, { css: ObjectListItemLoadingInner, justify: "space-between", gap: "sm", children: /* @__PURE__ */ jsxs73(VerticalRhythm, { gap: "xs", children: [
|
|
19071
|
+
/* @__PURE__ */ jsx109(HorizontalRhythm, { gap: "xs", align: "center", children: /* @__PURE__ */ jsx109("span", { role: "presentation", css: ObjectListItemLoadingText("30ch") }) }),
|
|
19072
|
+
/* @__PURE__ */ jsx109("span", { role: "presentation", css: ObjectListItemLoadingText("20ch") })
|
|
19073
|
+
] }) })
|
|
19074
|
+
]
|
|
19075
|
+
}
|
|
19076
|
+
);
|
|
19019
19077
|
};
|
|
19020
19078
|
|
|
19021
19079
|
// src/components/Objects/ObjectListItem.tsx
|
|
19022
|
-
import { jsx as
|
|
19080
|
+
import { jsx as jsx110, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
|
|
19023
19081
|
var ObjectListItem2 = (props) => {
|
|
19024
|
-
const { renderAs, isSelected, cover, header: header2, rightSlot, menuItems, ...divProps } = props;
|
|
19025
|
-
return /* @__PURE__ */
|
|
19082
|
+
const { renderAs, isSelected, cover, header: header2, rightSlot, menuItems, dragHandle, ...divProps } = props;
|
|
19083
|
+
return /* @__PURE__ */ jsxs74(
|
|
19026
19084
|
"div",
|
|
19027
19085
|
{
|
|
19028
19086
|
role: "listitem",
|
|
@@ -19031,65 +19089,86 @@ var ObjectListItem2 = (props) => {
|
|
|
19031
19089
|
"aria-selected": isSelected,
|
|
19032
19090
|
...divProps,
|
|
19033
19091
|
children: [
|
|
19034
|
-
|
|
19035
|
-
/* @__PURE__ */
|
|
19036
|
-
/* @__PURE__ */
|
|
19037
|
-
|
|
19092
|
+
/* @__PURE__ */ jsx110(HorizontalRhythm, { gap: "sm", align: "center", children: dragHandle }),
|
|
19093
|
+
/* @__PURE__ */ jsxs74("div", { css: ObjectListItemContentWrapper, children: [
|
|
19094
|
+
/* @__PURE__ */ jsx110(HorizontalRhythm, { gap: "sm", align: "center", children: cover }),
|
|
19095
|
+
/* @__PURE__ */ jsxs74(VerticalRhythm, { gap: "0", children: [
|
|
19096
|
+
/* @__PURE__ */ jsx110(HorizontalRhythm, { gap: "xs", align: renderAs === "multi" ? "flex-start" : "center", children: header2 }),
|
|
19038
19097
|
renderAs === "multi" ? props.children : null
|
|
19039
19098
|
] }),
|
|
19040
|
-
/* @__PURE__ */
|
|
19041
|
-
|
|
19042
|
-
|
|
19043
|
-
|
|
19044
|
-
|
|
19045
|
-
|
|
19046
|
-
|
|
19047
|
-
|
|
19048
|
-
|
|
19049
|
-
|
|
19050
|
-
] })
|
|
19051
|
-
] })
|
|
19099
|
+
/* @__PURE__ */ jsx110(HorizontalRhythm, { gap: "xs", align: "flex-start", children: rightSlot })
|
|
19100
|
+
] }),
|
|
19101
|
+
menuItems ? /* @__PURE__ */ jsx110(HorizontalRhythm, { gap: "0", align: "flex-start", children: /* @__PURE__ */ jsx110(
|
|
19102
|
+
Menu,
|
|
19103
|
+
{
|
|
19104
|
+
menuTrigger: /* @__PURE__ */ jsx110(MenuThreeDots, { "data-testid": "object-list-item-menu-btn" }),
|
|
19105
|
+
placement: "bottom-end",
|
|
19106
|
+
children: menuItems
|
|
19107
|
+
}
|
|
19108
|
+
) }) : null
|
|
19052
19109
|
]
|
|
19053
19110
|
}
|
|
19054
19111
|
);
|
|
19055
19112
|
};
|
|
19056
19113
|
|
|
19057
19114
|
// src/components/Objects/ObjectListItemContainer.tsx
|
|
19058
|
-
import { jsx as
|
|
19059
|
-
var ObjectListItemContainer2 = ({ children, ...props }) => {
|
|
19060
|
-
return /* @__PURE__ */
|
|
19115
|
+
import { jsx as jsx111 } from "@emotion/react/jsx-runtime";
|
|
19116
|
+
var ObjectListItemContainer2 = ({ children, gap = "0", ...props }) => {
|
|
19117
|
+
return /* @__PURE__ */ jsx111(VerticalRhythm, { gap, css: ObjectListItemContainer, role: "list", ...props, children });
|
|
19061
19118
|
};
|
|
19062
19119
|
|
|
19063
19120
|
// src/components/Objects/ObjectListItemCover.tsx
|
|
19064
|
-
import { jsx as
|
|
19065
|
-
var ObjectListItemCover2 = ({
|
|
19121
|
+
import { jsx as jsx112 } from "@emotion/react/jsx-runtime";
|
|
19122
|
+
var ObjectListItemCover2 = ({
|
|
19123
|
+
imageUrl,
|
|
19124
|
+
noImageText = "Image not available",
|
|
19125
|
+
...props
|
|
19126
|
+
}) => {
|
|
19066
19127
|
if (!imageUrl) {
|
|
19067
|
-
return /* @__PURE__ */
|
|
19128
|
+
return /* @__PURE__ */ jsx112("div", { css: ObjectListItemCover, role: "presentation", "data-testid": "object-list-item-thumbnail", children: noImageText });
|
|
19068
19129
|
}
|
|
19069
|
-
return /* @__PURE__ */
|
|
19130
|
+
return /* @__PURE__ */ jsx112("div", { css: ObjectListItemCover, children: /* @__PURE__ */ jsx112(
|
|
19070
19131
|
"img",
|
|
19071
19132
|
{
|
|
19072
|
-
css: ObjectListItemCover,
|
|
19073
19133
|
src: imageUrl,
|
|
19134
|
+
css: ObjectListItemImage,
|
|
19074
19135
|
loading: "lazy",
|
|
19075
19136
|
"data-testid": "object-list-item-thumbnail",
|
|
19076
19137
|
...props
|
|
19077
19138
|
}
|
|
19078
|
-
);
|
|
19139
|
+
) });
|
|
19079
19140
|
};
|
|
19080
19141
|
|
|
19142
|
+
// src/components/Objects/styles/ObjectListItemHeading.styles.ts
|
|
19143
|
+
import { css as css86 } from "@emotion/react";
|
|
19144
|
+
var ObjectListItemHeading = css86`
|
|
19145
|
+
display: flex;
|
|
19146
|
+
flex-direction: column;
|
|
19147
|
+
gap: var(--spacing-xs);
|
|
19148
|
+
|
|
19149
|
+
${cq("34rem")} {
|
|
19150
|
+
align-items: center;
|
|
19151
|
+
flex-direction: row;
|
|
19152
|
+
}
|
|
19153
|
+
`;
|
|
19154
|
+
var ObjectListItemHeadingAfterWrapper = css86`
|
|
19155
|
+
line-height: 1.25;
|
|
19156
|
+
`;
|
|
19157
|
+
|
|
19081
19158
|
// src/components/Objects/ObjectListItemHeading.tsx
|
|
19082
|
-
import { jsx as
|
|
19083
|
-
var
|
|
19159
|
+
import { jsx as jsx113, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
|
|
19160
|
+
var ObjectListItemHeading2 = ({
|
|
19084
19161
|
heading,
|
|
19085
19162
|
beforeHeadingSlot,
|
|
19086
19163
|
afterHeadingSlot,
|
|
19087
19164
|
...props
|
|
19088
19165
|
}) => {
|
|
19089
|
-
return /* @__PURE__ */
|
|
19090
|
-
beforeHeadingSlot,
|
|
19091
|
-
/* @__PURE__ */
|
|
19092
|
-
|
|
19166
|
+
return /* @__PURE__ */ jsxs75("div", { css: ObjectListItemHeading, ...props, children: [
|
|
19167
|
+
beforeHeadingSlot ? /* @__PURE__ */ jsx113(HorizontalRhythm, { gap: "xs", align: "center", children: beforeHeadingSlot }) : null,
|
|
19168
|
+
/* @__PURE__ */ jsxs75(HorizontalRhythm, { css: ObjectListItemHeadingAfterWrapper, gap: "xs", align: "flex-start", children: [
|
|
19169
|
+
/* @__PURE__ */ jsx113("div", { role: "heading", children: heading }),
|
|
19170
|
+
afterHeadingSlot
|
|
19171
|
+
] })
|
|
19093
19172
|
] });
|
|
19094
19173
|
};
|
|
19095
19174
|
|
|
@@ -19097,35 +19176,35 @@ var ObjectListItemHeading = ({
|
|
|
19097
19176
|
import Paginate from "react-paginate";
|
|
19098
19177
|
|
|
19099
19178
|
// src/components/Pagination/Pagniation.styles.ts
|
|
19100
|
-
import { css as
|
|
19101
|
-
var container2 =
|
|
19179
|
+
import { css as css87 } from "@emotion/css";
|
|
19180
|
+
var container2 = css87`
|
|
19102
19181
|
align-items: center;
|
|
19103
19182
|
display: flex;
|
|
19104
19183
|
`;
|
|
19105
|
-
var disabled =
|
|
19184
|
+
var disabled = css87`
|
|
19106
19185
|
opacity: var(--opacity-50);
|
|
19107
19186
|
`;
|
|
19108
|
-
var disabledLink =
|
|
19187
|
+
var disabledLink = css87`
|
|
19109
19188
|
cursor: pointer-default;
|
|
19110
19189
|
`;
|
|
19111
|
-
var pageLink =
|
|
19190
|
+
var pageLink = css87`
|
|
19112
19191
|
display: block;
|
|
19113
19192
|
padding: var(--spacing-sm) var(--spacing-base);
|
|
19114
19193
|
`;
|
|
19115
|
-
var prevNextControls =
|
|
19194
|
+
var prevNextControls = css87`
|
|
19116
19195
|
padding: var(--spacing-sm) var(--spacing-base);
|
|
19117
19196
|
`;
|
|
19118
|
-
var active =
|
|
19197
|
+
var active = css87`
|
|
19119
19198
|
border-radius: var(--rounded-base);
|
|
19120
19199
|
background: var(--gray-200);
|
|
19121
19200
|
`;
|
|
19122
|
-
var page =
|
|
19201
|
+
var page = css87`
|
|
19123
19202
|
margin-left: var(--spacing-xs);
|
|
19124
19203
|
margin-right: var(--spacing-xs);
|
|
19125
19204
|
`;
|
|
19126
19205
|
|
|
19127
19206
|
// src/components/Pagination/Pagination.tsx
|
|
19128
|
-
import { jsx as
|
|
19207
|
+
import { jsx as jsx114 } from "@emotion/react/jsx-runtime";
|
|
19129
19208
|
function Pagination({
|
|
19130
19209
|
limit,
|
|
19131
19210
|
offset,
|
|
@@ -19140,12 +19219,12 @@ function Pagination({
|
|
|
19140
19219
|
if (pageCount <= 1) {
|
|
19141
19220
|
return null;
|
|
19142
19221
|
}
|
|
19143
|
-
return /* @__PURE__ */
|
|
19222
|
+
return /* @__PURE__ */ jsx114(
|
|
19144
19223
|
Paginate,
|
|
19145
19224
|
{
|
|
19146
19225
|
forcePage: currentPage,
|
|
19147
|
-
previousLabel: /* @__PURE__ */
|
|
19148
|
-
nextLabel: /* @__PURE__ */
|
|
19226
|
+
previousLabel: /* @__PURE__ */ jsx114("div", { className: prevNextControls, children: "<" }),
|
|
19227
|
+
nextLabel: /* @__PURE__ */ jsx114("div", { className: prevNextControls, children: ">" }),
|
|
19149
19228
|
breakLabel: "...",
|
|
19150
19229
|
pageCount,
|
|
19151
19230
|
marginPagesDisplayed: 2,
|
|
@@ -19185,8 +19264,8 @@ var useParameterShell = () => {
|
|
|
19185
19264
|
};
|
|
19186
19265
|
|
|
19187
19266
|
// src/components/ParameterInputs/styles/LabelLeadingIcon.styles.ts
|
|
19188
|
-
import { css as
|
|
19189
|
-
var inputIconBtn =
|
|
19267
|
+
import { css as css88 } from "@emotion/react";
|
|
19268
|
+
var inputIconBtn = css88`
|
|
19190
19269
|
align-items: center;
|
|
19191
19270
|
border: none;
|
|
19192
19271
|
border-radius: var(--rounded-base);
|
|
@@ -19212,7 +19291,7 @@ var inputIconBtn = css86`
|
|
|
19212
19291
|
`;
|
|
19213
19292
|
|
|
19214
19293
|
// src/components/ParameterInputs/LabelLeadingIcon.tsx
|
|
19215
|
-
import { jsx as
|
|
19294
|
+
import { jsx as jsx115, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
|
|
19216
19295
|
var LabelLeadingIcon = ({
|
|
19217
19296
|
icon,
|
|
19218
19297
|
iconColor,
|
|
@@ -19224,7 +19303,7 @@ var LabelLeadingIcon = ({
|
|
|
19224
19303
|
...props
|
|
19225
19304
|
}) => {
|
|
19226
19305
|
const titleFr = title2 != null ? title2 : isLocked ? "Read-only pattern parameter" : isBound ? "Connected to external content. Click to edit" : "Click to connect to external content";
|
|
19227
|
-
return /* @__PURE__ */
|
|
19306
|
+
return /* @__PURE__ */ jsx115(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs76(
|
|
19228
19307
|
"button",
|
|
19229
19308
|
{
|
|
19230
19309
|
css: inputIconBtn,
|
|
@@ -19234,7 +19313,7 @@ var LabelLeadingIcon = ({
|
|
|
19234
19313
|
...props,
|
|
19235
19314
|
"data-testid": "lock-button",
|
|
19236
19315
|
children: [
|
|
19237
|
-
/* @__PURE__ */
|
|
19316
|
+
/* @__PURE__ */ jsx115(
|
|
19238
19317
|
Icon,
|
|
19239
19318
|
{
|
|
19240
19319
|
icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
|
|
@@ -19250,8 +19329,8 @@ var LabelLeadingIcon = ({
|
|
|
19250
19329
|
var ConnectToDataElementButton = LabelLeadingIcon;
|
|
19251
19330
|
|
|
19252
19331
|
// src/components/ParameterInputs/styles/ParameterInput.styles.ts
|
|
19253
|
-
import { css as
|
|
19254
|
-
var inputContainer2 =
|
|
19332
|
+
import { css as css89 } from "@emotion/react";
|
|
19333
|
+
var inputContainer2 = css89`
|
|
19255
19334
|
position: relative;
|
|
19256
19335
|
scroll-margin: var(--spacing-2xl);
|
|
19257
19336
|
|
|
@@ -19264,14 +19343,14 @@ var inputContainer2 = css87`
|
|
|
19264
19343
|
}
|
|
19265
19344
|
}
|
|
19266
19345
|
`;
|
|
19267
|
-
var labelText2 =
|
|
19346
|
+
var labelText2 = css89`
|
|
19268
19347
|
align-items: center;
|
|
19269
19348
|
display: flex;
|
|
19270
19349
|
gap: var(--spacing-xs);
|
|
19271
19350
|
font-weight: var(--fw-regular);
|
|
19272
19351
|
margin: 0 0 var(--spacing-xs);
|
|
19273
19352
|
`;
|
|
19274
|
-
var input3 =
|
|
19353
|
+
var input3 = css89`
|
|
19275
19354
|
display: block;
|
|
19276
19355
|
appearance: none;
|
|
19277
19356
|
box-sizing: border-box;
|
|
@@ -19319,18 +19398,18 @@ var input3 = css87`
|
|
|
19319
19398
|
color: var(--gray-400);
|
|
19320
19399
|
}
|
|
19321
19400
|
`;
|
|
19322
|
-
var selectInput =
|
|
19401
|
+
var selectInput = css89`
|
|
19323
19402
|
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");
|
|
19324
19403
|
background-position: right var(--spacing-sm) center;
|
|
19325
19404
|
background-repeat: no-repeat;
|
|
19326
19405
|
background-size: 1rem;
|
|
19327
19406
|
padding-right: var(--spacing-xl);
|
|
19328
19407
|
`;
|
|
19329
|
-
var inputWrapper =
|
|
19408
|
+
var inputWrapper = css89`
|
|
19330
19409
|
display: flex; // used to correct overflow with chrome textarea
|
|
19331
19410
|
position: relative;
|
|
19332
19411
|
`;
|
|
19333
|
-
var inputIcon2 =
|
|
19412
|
+
var inputIcon2 = css89`
|
|
19334
19413
|
align-items: center;
|
|
19335
19414
|
background: var(--white);
|
|
19336
19415
|
border-radius: var(--rounded-md) 0 0 var(--rounded-md);
|
|
@@ -19346,7 +19425,7 @@ var inputIcon2 = css87`
|
|
|
19346
19425
|
width: var(--spacing-lg);
|
|
19347
19426
|
z-index: var(--z-10);
|
|
19348
19427
|
`;
|
|
19349
|
-
var inputToggleLabel2 =
|
|
19428
|
+
var inputToggleLabel2 = css89`
|
|
19350
19429
|
--inline-label-color: var(--typography-base);
|
|
19351
19430
|
align-items: center;
|
|
19352
19431
|
cursor: pointer;
|
|
@@ -19361,7 +19440,7 @@ var inputToggleLabel2 = css87`
|
|
|
19361
19440
|
--inline-label-color: var(--gray-400);
|
|
19362
19441
|
}
|
|
19363
19442
|
`;
|
|
19364
|
-
var toggleInput2 =
|
|
19443
|
+
var toggleInput2 = css89`
|
|
19365
19444
|
appearance: none;
|
|
19366
19445
|
border: 1px solid var(--gray-200);
|
|
19367
19446
|
background: var(--white);
|
|
@@ -19414,7 +19493,7 @@ var toggleInput2 = css87`
|
|
|
19414
19493
|
border-color: var(--gray-300);
|
|
19415
19494
|
}
|
|
19416
19495
|
`;
|
|
19417
|
-
var inlineLabel2 =
|
|
19496
|
+
var inlineLabel2 = css89`
|
|
19418
19497
|
color: var(--inline-label-color);
|
|
19419
19498
|
padding-left: var(--spacing-md);
|
|
19420
19499
|
font-size: var(--fs-sm);
|
|
@@ -19431,7 +19510,7 @@ var inlineLabel2 = css87`
|
|
|
19431
19510
|
}
|
|
19432
19511
|
}
|
|
19433
19512
|
`;
|
|
19434
|
-
var inputMenu =
|
|
19513
|
+
var inputMenu = css89`
|
|
19435
19514
|
background: none;
|
|
19436
19515
|
border: none;
|
|
19437
19516
|
padding: var(--spacing-2xs);
|
|
@@ -19439,10 +19518,10 @@ var inputMenu = css87`
|
|
|
19439
19518
|
top: calc(var(--spacing-md) * -1.2);
|
|
19440
19519
|
right: 0;
|
|
19441
19520
|
`;
|
|
19442
|
-
var inputActionItems =
|
|
19521
|
+
var inputActionItems = css89`
|
|
19443
19522
|
display: flex;
|
|
19444
19523
|
`;
|
|
19445
|
-
var inputMenuHover =
|
|
19524
|
+
var inputMenuHover = css89`
|
|
19446
19525
|
opacity: var(--opacity-50);
|
|
19447
19526
|
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
19448
19527
|
|
|
@@ -19452,11 +19531,11 @@ var inputMenuHover = css87`
|
|
|
19452
19531
|
background-color: var(--gray-200);
|
|
19453
19532
|
}
|
|
19454
19533
|
`;
|
|
19455
|
-
var textarea2 =
|
|
19534
|
+
var textarea2 = css89`
|
|
19456
19535
|
resize: vertical;
|
|
19457
19536
|
min-height: 2rem;
|
|
19458
19537
|
`;
|
|
19459
|
-
var dataConnectButton =
|
|
19538
|
+
var dataConnectButton = css89`
|
|
19460
19539
|
align-items: center;
|
|
19461
19540
|
appearance: none;
|
|
19462
19541
|
box-sizing: border-box;
|
|
@@ -19491,7 +19570,7 @@ var dataConnectButton = css87`
|
|
|
19491
19570
|
pointer-events: none;
|
|
19492
19571
|
}
|
|
19493
19572
|
`;
|
|
19494
|
-
var linkParameterBtn =
|
|
19573
|
+
var linkParameterBtn = css89`
|
|
19495
19574
|
border-radius: var(--rounded-base);
|
|
19496
19575
|
background: transparent;
|
|
19497
19576
|
border: none;
|
|
@@ -19500,7 +19579,7 @@ var linkParameterBtn = css87`
|
|
|
19500
19579
|
font-size: var(--fs-sm);
|
|
19501
19580
|
line-height: 1;
|
|
19502
19581
|
`;
|
|
19503
|
-
var linkParameterControls =
|
|
19582
|
+
var linkParameterControls = css89`
|
|
19504
19583
|
position: absolute;
|
|
19505
19584
|
inset: 0 0 0 auto;
|
|
19506
19585
|
padding: 0 var(--spacing-base);
|
|
@@ -19509,7 +19588,7 @@ var linkParameterControls = css87`
|
|
|
19509
19588
|
justify-content: center;
|
|
19510
19589
|
gap: var(--spacing-base);
|
|
19511
19590
|
`;
|
|
19512
|
-
var linkParameterInput = (withExternalLinkIcon) =>
|
|
19591
|
+
var linkParameterInput = (withExternalLinkIcon) => css89`
|
|
19513
19592
|
padding-right: calc(
|
|
19514
19593
|
${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
|
|
19515
19594
|
var(--spacing-base)
|
|
@@ -19522,7 +19601,7 @@ var linkParameterInput = (withExternalLinkIcon) => css87`
|
|
|
19522
19601
|
}
|
|
19523
19602
|
}
|
|
19524
19603
|
`;
|
|
19525
|
-
var linkParameterIcon =
|
|
19604
|
+
var linkParameterIcon = css89`
|
|
19526
19605
|
align-items: center;
|
|
19527
19606
|
color: var(--brand-secondary-3);
|
|
19528
19607
|
display: flex;
|
|
@@ -19537,7 +19616,7 @@ var linkParameterIcon = css87`
|
|
|
19537
19616
|
`;
|
|
19538
19617
|
|
|
19539
19618
|
// src/components/ParameterInputs/ParameterDataResource.tsx
|
|
19540
|
-
import { jsx as
|
|
19619
|
+
import { jsx as jsx116, jsxs as jsxs77 } from "@emotion/react/jsx-runtime";
|
|
19541
19620
|
function ParameterDataResource({
|
|
19542
19621
|
label,
|
|
19543
19622
|
labelLeadingIcon,
|
|
@@ -19547,12 +19626,12 @@ function ParameterDataResource({
|
|
|
19547
19626
|
disabled: disabled2,
|
|
19548
19627
|
children
|
|
19549
19628
|
}) {
|
|
19550
|
-
return /* @__PURE__ */
|
|
19551
|
-
/* @__PURE__ */
|
|
19629
|
+
return /* @__PURE__ */ jsxs77("div", { "data-testid": "parameter-data-connect-button", children: [
|
|
19630
|
+
/* @__PURE__ */ jsxs77("span", { css: labelText2, children: [
|
|
19552
19631
|
labelLeadingIcon ? labelLeadingIcon : null,
|
|
19553
19632
|
label
|
|
19554
19633
|
] }),
|
|
19555
|
-
/* @__PURE__ */
|
|
19634
|
+
/* @__PURE__ */ jsxs77(
|
|
19556
19635
|
"button",
|
|
19557
19636
|
{
|
|
19558
19637
|
type: "button",
|
|
@@ -19561,30 +19640,30 @@ function ParameterDataResource({
|
|
|
19561
19640
|
disabled: disabled2,
|
|
19562
19641
|
onClick: onConnectDatasource,
|
|
19563
19642
|
children: [
|
|
19564
|
-
/* @__PURE__ */
|
|
19643
|
+
/* @__PURE__ */ jsx116("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx116(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
|
|
19565
19644
|
children
|
|
19566
19645
|
]
|
|
19567
19646
|
}
|
|
19568
19647
|
),
|
|
19569
|
-
caption ? /* @__PURE__ */
|
|
19648
|
+
caption ? /* @__PURE__ */ jsx116(Caption, { children: caption }) : null
|
|
19570
19649
|
] });
|
|
19571
19650
|
}
|
|
19572
19651
|
|
|
19573
19652
|
// src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
|
|
19574
|
-
import { css as
|
|
19575
|
-
var ParameterDrawerHeaderContainer =
|
|
19653
|
+
import { css as css90 } from "@emotion/react";
|
|
19654
|
+
var ParameterDrawerHeaderContainer = css90`
|
|
19576
19655
|
align-items: center;
|
|
19577
19656
|
display: flex;
|
|
19578
19657
|
gap: var(--spacing-base);
|
|
19579
19658
|
justify-content: space-between;
|
|
19580
19659
|
margin-bottom: var(--spacing-sm);
|
|
19581
19660
|
`;
|
|
19582
|
-
var ParameterDrawerHeaderTitleGroup =
|
|
19661
|
+
var ParameterDrawerHeaderTitleGroup = css90`
|
|
19583
19662
|
align-items: center;
|
|
19584
19663
|
display: flex;
|
|
19585
19664
|
gap: var(--spacing-sm);
|
|
19586
19665
|
`;
|
|
19587
|
-
var ParameterDrawerHeaderTitle =
|
|
19666
|
+
var ParameterDrawerHeaderTitle = css90`
|
|
19588
19667
|
text-overflow: ellipsis;
|
|
19589
19668
|
white-space: nowrap;
|
|
19590
19669
|
overflow: hidden;
|
|
@@ -19592,12 +19671,12 @@ var ParameterDrawerHeaderTitle = css88`
|
|
|
19592
19671
|
`;
|
|
19593
19672
|
|
|
19594
19673
|
// src/components/ParameterInputs/ParameterDrawerHeader.tsx
|
|
19595
|
-
import { jsx as
|
|
19674
|
+
import { jsx as jsx117, jsxs as jsxs78 } from "@emotion/react/jsx-runtime";
|
|
19596
19675
|
var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
|
|
19597
|
-
return /* @__PURE__ */
|
|
19598
|
-
/* @__PURE__ */
|
|
19676
|
+
return /* @__PURE__ */ jsxs78("div", { css: ParameterDrawerHeaderContainer, children: [
|
|
19677
|
+
/* @__PURE__ */ jsxs78("header", { css: ParameterDrawerHeaderTitleGroup, children: [
|
|
19599
19678
|
iconBeforeTitle,
|
|
19600
|
-
/* @__PURE__ */
|
|
19679
|
+
/* @__PURE__ */ jsx117(Heading2, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
|
|
19601
19680
|
] }),
|
|
19602
19681
|
children
|
|
19603
19682
|
] });
|
|
@@ -19607,8 +19686,8 @@ var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
|
|
|
19607
19686
|
import { forwardRef as forwardRef17 } from "react";
|
|
19608
19687
|
|
|
19609
19688
|
// src/components/ParameterInputs/styles/ParameterGroup.styles.ts
|
|
19610
|
-
import { css as
|
|
19611
|
-
var fieldsetStyles =
|
|
19689
|
+
import { css as css91 } from "@emotion/react";
|
|
19690
|
+
var fieldsetStyles = css91`
|
|
19612
19691
|
&:disabled,
|
|
19613
19692
|
[readonly] {
|
|
19614
19693
|
pointer-events: none;
|
|
@@ -19619,7 +19698,7 @@ var fieldsetStyles = css89`
|
|
|
19619
19698
|
}
|
|
19620
19699
|
}
|
|
19621
19700
|
`;
|
|
19622
|
-
var fieldsetLegend2 =
|
|
19701
|
+
var fieldsetLegend2 = css91`
|
|
19623
19702
|
display: block;
|
|
19624
19703
|
font-weight: var(--fw-medium);
|
|
19625
19704
|
margin-bottom: var(--spacing-sm);
|
|
@@ -19627,11 +19706,11 @@ var fieldsetLegend2 = css89`
|
|
|
19627
19706
|
`;
|
|
19628
19707
|
|
|
19629
19708
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
19630
|
-
import { jsx as
|
|
19709
|
+
import { jsx as jsx118, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
|
|
19631
19710
|
var ParameterGroup = forwardRef17(
|
|
19632
19711
|
({ legend, isDisabled, children, ...props }, ref) => {
|
|
19633
|
-
return /* @__PURE__ */
|
|
19634
|
-
/* @__PURE__ */
|
|
19712
|
+
return /* @__PURE__ */ jsxs79("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
|
|
19713
|
+
/* @__PURE__ */ jsx118("legend", { css: fieldsetLegend2, children: legend }),
|
|
19635
19714
|
children
|
|
19636
19715
|
] });
|
|
19637
19716
|
}
|
|
@@ -19645,15 +19724,15 @@ import { useState as useState14 } from "react";
|
|
|
19645
19724
|
import { createPortal as createPortal2 } from "react-dom";
|
|
19646
19725
|
|
|
19647
19726
|
// src/components/ParameterInputs/styles/ParameterImage.styles.ts
|
|
19648
|
-
import { css as
|
|
19649
|
-
var previewWrapper =
|
|
19727
|
+
import { css as css92 } from "@emotion/react";
|
|
19728
|
+
var previewWrapper = css92`
|
|
19650
19729
|
margin-top: var(--spacing-xs);
|
|
19651
19730
|
background: var(--gray-50);
|
|
19652
19731
|
padding: var(--spacing-sm);
|
|
19653
19732
|
border: solid 1px var(--gray-300);
|
|
19654
19733
|
border-radius: var(--rounded-sm);
|
|
19655
19734
|
`;
|
|
19656
|
-
var previewLink =
|
|
19735
|
+
var previewLink = css92`
|
|
19657
19736
|
display: block;
|
|
19658
19737
|
width: 100%;
|
|
19659
19738
|
|
|
@@ -19661,7 +19740,7 @@ var previewLink = css90`
|
|
|
19661
19740
|
max-height: 9rem;
|
|
19662
19741
|
}
|
|
19663
19742
|
`;
|
|
19664
|
-
var previewModalWrapper =
|
|
19743
|
+
var previewModalWrapper = css92`
|
|
19665
19744
|
background: var(--gray-50);
|
|
19666
19745
|
display: flex;
|
|
19667
19746
|
height: 100%;
|
|
@@ -19670,7 +19749,7 @@ var previewModalWrapper = css90`
|
|
|
19670
19749
|
border: solid 1px var(--gray-300);
|
|
19671
19750
|
border-radius: var(--rounded-sm);
|
|
19672
19751
|
`;
|
|
19673
|
-
var previewModalImage =
|
|
19752
|
+
var previewModalImage = css92`
|
|
19674
19753
|
display: flex;
|
|
19675
19754
|
height: 100%;
|
|
19676
19755
|
width: 100%;
|
|
@@ -19682,32 +19761,32 @@ var previewModalImage = css90`
|
|
|
19682
19761
|
`;
|
|
19683
19762
|
|
|
19684
19763
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
19685
|
-
import { Fragment as Fragment15, jsx as
|
|
19764
|
+
import { Fragment as Fragment15, jsx as jsx119, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
|
|
19686
19765
|
function ParameterImagePreview({ imageSrc }) {
|
|
19687
19766
|
const [showModal, setShowModal] = useState14(false);
|
|
19688
|
-
return imageSrc ? /* @__PURE__ */
|
|
19689
|
-
/* @__PURE__ */
|
|
19690
|
-
/* @__PURE__ */
|
|
19767
|
+
return imageSrc ? /* @__PURE__ */ jsxs80("div", { css: previewWrapper, children: [
|
|
19768
|
+
/* @__PURE__ */ jsx119(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
|
|
19769
|
+
/* @__PURE__ */ jsx119(
|
|
19691
19770
|
"button",
|
|
19692
19771
|
{
|
|
19693
19772
|
css: previewLink,
|
|
19694
19773
|
onClick: () => {
|
|
19695
19774
|
setShowModal(true);
|
|
19696
19775
|
},
|
|
19697
|
-
children: /* @__PURE__ */
|
|
19776
|
+
children: /* @__PURE__ */ jsx119(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
|
|
19698
19777
|
}
|
|
19699
19778
|
)
|
|
19700
19779
|
] }) : null;
|
|
19701
19780
|
}
|
|
19702
19781
|
var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
19703
|
-
return open ? /* @__PURE__ */
|
|
19704
|
-
/* @__PURE__ */
|
|
19782
|
+
return open ? /* @__PURE__ */ jsx119(Fragment15, { children: createPortal2(
|
|
19783
|
+
/* @__PURE__ */ jsx119(
|
|
19705
19784
|
Modal,
|
|
19706
19785
|
{
|
|
19707
19786
|
header: "Image Preview",
|
|
19708
19787
|
onRequestClose,
|
|
19709
|
-
buttonGroup: /* @__PURE__ */
|
|
19710
|
-
children: /* @__PURE__ */
|
|
19788
|
+
buttonGroup: /* @__PURE__ */ jsx119(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
|
|
19789
|
+
children: /* @__PURE__ */ jsx119("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx119(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
|
|
19711
19790
|
}
|
|
19712
19791
|
),
|
|
19713
19792
|
document.body
|
|
@@ -19715,25 +19794,25 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
|
19715
19794
|
};
|
|
19716
19795
|
|
|
19717
19796
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
19718
|
-
import { css as
|
|
19797
|
+
import { css as css94 } from "@emotion/react";
|
|
19719
19798
|
import { useState as useState15 } from "react";
|
|
19720
19799
|
|
|
19721
19800
|
// src/components/ParameterInputs/ParameterLabel.tsx
|
|
19722
|
-
import { jsx as
|
|
19801
|
+
import { jsx as jsx120 } from "@emotion/react/jsx-runtime";
|
|
19723
19802
|
var ParameterLabel = ({ id, asSpan, children, ...props }) => {
|
|
19724
|
-
return !asSpan ? /* @__PURE__ */
|
|
19803
|
+
return !asSpan ? /* @__PURE__ */ jsx120("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx120("span", { "aria-labelledby": id, css: labelText2, children });
|
|
19725
19804
|
};
|
|
19726
19805
|
|
|
19727
19806
|
// src/components/ParameterInputs/ParameterMenuButton.tsx
|
|
19728
19807
|
import { forwardRef as forwardRef18 } from "react";
|
|
19729
|
-
import { jsx as
|
|
19808
|
+
import { jsx as jsx121 } from "@emotion/react/jsx-runtime";
|
|
19730
19809
|
var ParameterMenuButton = forwardRef18(
|
|
19731
19810
|
({ label, children }, ref) => {
|
|
19732
|
-
return /* @__PURE__ */
|
|
19811
|
+
return /* @__PURE__ */ jsx121(
|
|
19733
19812
|
Menu,
|
|
19734
19813
|
{
|
|
19735
19814
|
menuLabel: `${label} menu`,
|
|
19736
|
-
menuTrigger: /* @__PURE__ */
|
|
19815
|
+
menuTrigger: /* @__PURE__ */ jsx121(
|
|
19737
19816
|
"button",
|
|
19738
19817
|
{
|
|
19739
19818
|
className: "parameter-menu",
|
|
@@ -19741,7 +19820,7 @@ var ParameterMenuButton = forwardRef18(
|
|
|
19741
19820
|
type: "button",
|
|
19742
19821
|
"aria-label": `${label} options`,
|
|
19743
19822
|
ref,
|
|
19744
|
-
children: /* @__PURE__ */
|
|
19823
|
+
children: /* @__PURE__ */ jsx121(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
|
|
19745
19824
|
}
|
|
19746
19825
|
),
|
|
19747
19826
|
children
|
|
@@ -19751,14 +19830,14 @@ var ParameterMenuButton = forwardRef18(
|
|
|
19751
19830
|
);
|
|
19752
19831
|
|
|
19753
19832
|
// src/components/ParameterInputs/styles/ParameterShell.styles.ts
|
|
19754
|
-
import { css as
|
|
19755
|
-
var emptyParameterShell =
|
|
19833
|
+
import { css as css93 } from "@emotion/react";
|
|
19834
|
+
var emptyParameterShell = css93`
|
|
19756
19835
|
border-radius: var(--rounded-sm);
|
|
19757
19836
|
flex-grow: 1;
|
|
19758
19837
|
position: relative;
|
|
19759
19838
|
max-width: 100%;
|
|
19760
19839
|
`;
|
|
19761
|
-
var emptyParameterShellText =
|
|
19840
|
+
var emptyParameterShellText = css93`
|
|
19762
19841
|
background: var(--brand-secondary-6);
|
|
19763
19842
|
border-radius: var(--rounded-sm);
|
|
19764
19843
|
padding: var(--spacing-sm);
|
|
@@ -19766,7 +19845,7 @@ var emptyParameterShellText = css91`
|
|
|
19766
19845
|
font-size: var(--fs-sm);
|
|
19767
19846
|
margin: 0;
|
|
19768
19847
|
`;
|
|
19769
|
-
var overrideMarker =
|
|
19848
|
+
var overrideMarker = css93`
|
|
19770
19849
|
border-radius: var(--rounded-sm);
|
|
19771
19850
|
border: 10px solid var(--gray-300);
|
|
19772
19851
|
border-left-color: transparent;
|
|
@@ -19777,7 +19856,7 @@ var overrideMarker = css91`
|
|
|
19777
19856
|
`;
|
|
19778
19857
|
|
|
19779
19858
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
19780
|
-
import { jsx as
|
|
19859
|
+
import { jsx as jsx122, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
|
|
19781
19860
|
var extractParameterProps = (props) => {
|
|
19782
19861
|
const {
|
|
19783
19862
|
id,
|
|
@@ -19840,33 +19919,33 @@ var ParameterShell = ({
|
|
|
19840
19919
|
const [manualErrorMessage, setManualErrorMessage] = useState15(void 0);
|
|
19841
19920
|
const setErrorMessage = (message) => setManualErrorMessage(message);
|
|
19842
19921
|
const errorMessaging = errorMessage || manualErrorMessage;
|
|
19843
|
-
return /* @__PURE__ */
|
|
19844
|
-
hiddenLabel || title2 ? null : /* @__PURE__ */
|
|
19922
|
+
return /* @__PURE__ */ jsxs81("div", { css: inputContainer2, ...props, id, children: [
|
|
19923
|
+
hiddenLabel || title2 ? null : /* @__PURE__ */ jsxs81(ParameterLabel, { id, css: labelText2, children: [
|
|
19845
19924
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
19846
19925
|
label,
|
|
19847
19926
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
19848
19927
|
] }),
|
|
19849
|
-
!title2 ? null : /* @__PURE__ */
|
|
19928
|
+
!title2 ? null : /* @__PURE__ */ jsxs81(ParameterLabel, { id, asSpan: true, children: [
|
|
19850
19929
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
19851
19930
|
title2,
|
|
19852
19931
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
19853
19932
|
] }),
|
|
19854
|
-
/* @__PURE__ */
|
|
19855
|
-
actionItems ? /* @__PURE__ */
|
|
19933
|
+
/* @__PURE__ */ jsxs81("div", { css: inputWrapper, children: [
|
|
19934
|
+
actionItems ? /* @__PURE__ */ jsx122(
|
|
19856
19935
|
"div",
|
|
19857
19936
|
{
|
|
19858
19937
|
css: [
|
|
19859
19938
|
inputMenu,
|
|
19860
19939
|
inputActionItems,
|
|
19861
|
-
menuItems ?
|
|
19940
|
+
menuItems ? css94`
|
|
19862
19941
|
right: var(--spacing-md);
|
|
19863
19942
|
` : void 0
|
|
19864
19943
|
],
|
|
19865
19944
|
children: actionItems
|
|
19866
19945
|
}
|
|
19867
19946
|
) : null,
|
|
19868
|
-
menuItems ? /* @__PURE__ */
|
|
19869
|
-
/* @__PURE__ */
|
|
19947
|
+
menuItems ? /* @__PURE__ */ jsx122(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
|
|
19948
|
+
/* @__PURE__ */ jsx122(
|
|
19870
19949
|
ParameterShellContext.Provider,
|
|
19871
19950
|
{
|
|
19872
19951
|
value: {
|
|
@@ -19876,14 +19955,14 @@ var ParameterShell = ({
|
|
|
19876
19955
|
errorMessage: errorMessaging,
|
|
19877
19956
|
handleManuallySetErrorMessage: (message) => setErrorMessage(message)
|
|
19878
19957
|
},
|
|
19879
|
-
children: isParameterGroup ? /* @__PURE__ */
|
|
19958
|
+
children: isParameterGroup ? /* @__PURE__ */ jsx122("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ jsxs81(ParameterShellPlaceholder, { children: [
|
|
19880
19959
|
children,
|
|
19881
|
-
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */
|
|
19960
|
+
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx122(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
|
|
19882
19961
|
] })
|
|
19883
19962
|
}
|
|
19884
19963
|
)
|
|
19885
19964
|
] }),
|
|
19886
|
-
/* @__PURE__ */
|
|
19965
|
+
/* @__PURE__ */ jsx122(
|
|
19887
19966
|
FieldMessage,
|
|
19888
19967
|
{
|
|
19889
19968
|
helperMessageTestId: captionTestId,
|
|
@@ -19897,17 +19976,17 @@ var ParameterShell = ({
|
|
|
19897
19976
|
] });
|
|
19898
19977
|
};
|
|
19899
19978
|
var ParameterShellPlaceholder = ({ children }) => {
|
|
19900
|
-
return /* @__PURE__ */
|
|
19979
|
+
return /* @__PURE__ */ jsx122("div", { css: emptyParameterShell, children });
|
|
19901
19980
|
};
|
|
19902
|
-
var ParameterOverrideMarker = (props) => /* @__PURE__ */
|
|
19981
|
+
var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx122(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx122("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx122("span", { hidden: true, children: "reset overridden value to default" }) }) });
|
|
19903
19982
|
|
|
19904
19983
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
19905
|
-
import { Fragment as Fragment16, jsx as
|
|
19984
|
+
import { Fragment as Fragment16, jsx as jsx123, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
|
|
19906
19985
|
var ParameterImage = forwardRef19(
|
|
19907
19986
|
({ children, ...props }, ref) => {
|
|
19908
19987
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
19909
|
-
return /* @__PURE__ */
|
|
19910
|
-
/* @__PURE__ */
|
|
19988
|
+
return /* @__PURE__ */ jsxs82(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
|
|
19989
|
+
/* @__PURE__ */ jsx123(ParameterImageInner, { ref, ...innerProps }),
|
|
19911
19990
|
children
|
|
19912
19991
|
] });
|
|
19913
19992
|
}
|
|
@@ -19916,8 +19995,8 @@ var ParameterImageInner = forwardRef19((props, ref) => {
|
|
|
19916
19995
|
const { value } = props;
|
|
19917
19996
|
const { id, label, hiddenLabel, errorMessage } = useParameterShell();
|
|
19918
19997
|
const deferredValue = useDeferredValue(value);
|
|
19919
|
-
return /* @__PURE__ */
|
|
19920
|
-
/* @__PURE__ */
|
|
19998
|
+
return /* @__PURE__ */ jsxs82(Fragment16, { children: [
|
|
19999
|
+
/* @__PURE__ */ jsx123(
|
|
19921
20000
|
"input",
|
|
19922
20001
|
{
|
|
19923
20002
|
css: input3,
|
|
@@ -19929,21 +20008,21 @@ var ParameterImageInner = forwardRef19((props, ref) => {
|
|
|
19929
20008
|
...props
|
|
19930
20009
|
}
|
|
19931
20010
|
),
|
|
19932
|
-
errorMessage || props.disablePreview ? null : /* @__PURE__ */
|
|
20011
|
+
errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx123(ParameterImagePreview, { imageSrc: deferredValue })
|
|
19933
20012
|
] });
|
|
19934
20013
|
});
|
|
19935
20014
|
|
|
19936
20015
|
// src/components/ParameterInputs/ParameterInput.tsx
|
|
19937
20016
|
import { forwardRef as forwardRef20 } from "react";
|
|
19938
|
-
import { jsx as
|
|
20017
|
+
import { jsx as jsx124 } from "@emotion/react/jsx-runtime";
|
|
19939
20018
|
var ParameterInput = forwardRef20((props, ref) => {
|
|
19940
20019
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
19941
|
-
return /* @__PURE__ */
|
|
20020
|
+
return /* @__PURE__ */ jsx124(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx124(ParameterInputInner, { ref, ...innerProps }) });
|
|
19942
20021
|
});
|
|
19943
20022
|
var ParameterInputInner = forwardRef20(
|
|
19944
20023
|
({ ...props }, ref) => {
|
|
19945
20024
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
19946
|
-
return /* @__PURE__ */
|
|
20025
|
+
return /* @__PURE__ */ jsx124(
|
|
19947
20026
|
"input",
|
|
19948
20027
|
{
|
|
19949
20028
|
css: input3,
|
|
@@ -19960,18 +20039,18 @@ var ParameterInputInner = forwardRef20(
|
|
|
19960
20039
|
|
|
19961
20040
|
// src/components/ParameterInputs/ParameterLink.tsx
|
|
19962
20041
|
import { forwardRef as forwardRef21 } from "react";
|
|
19963
|
-
import { jsx as
|
|
20042
|
+
import { jsx as jsx125, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
|
|
19964
20043
|
var ParameterLink = forwardRef21(
|
|
19965
20044
|
({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
|
|
19966
20045
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
19967
|
-
return /* @__PURE__ */
|
|
20046
|
+
return /* @__PURE__ */ jsx125(
|
|
19968
20047
|
ParameterShell,
|
|
19969
20048
|
{
|
|
19970
20049
|
"data-testid": "link-parameter-editor",
|
|
19971
20050
|
...shellProps,
|
|
19972
20051
|
label: innerProps.value ? shellProps.label : "",
|
|
19973
20052
|
title: !innerProps.value ? shellProps.label : void 0,
|
|
19974
|
-
children: /* @__PURE__ */
|
|
20053
|
+
children: /* @__PURE__ */ jsx125(
|
|
19975
20054
|
ParameterLinkInner,
|
|
19976
20055
|
{
|
|
19977
20056
|
onConnectLink,
|
|
@@ -19988,9 +20067,9 @@ var ParameterLinkInner = forwardRef21(
|
|
|
19988
20067
|
({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
|
|
19989
20068
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
19990
20069
|
if (!props.value)
|
|
19991
|
-
return /* @__PURE__ */
|
|
19992
|
-
return /* @__PURE__ */
|
|
19993
|
-
/* @__PURE__ */
|
|
20070
|
+
return /* @__PURE__ */ jsx125("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
|
|
20071
|
+
return /* @__PURE__ */ jsxs83("div", { css: inputWrapper, children: [
|
|
20072
|
+
/* @__PURE__ */ jsx125(
|
|
19994
20073
|
"input",
|
|
19995
20074
|
{
|
|
19996
20075
|
type: "text",
|
|
@@ -20002,8 +20081,8 @@ var ParameterLinkInner = forwardRef21(
|
|
|
20002
20081
|
...props
|
|
20003
20082
|
}
|
|
20004
20083
|
),
|
|
20005
|
-
/* @__PURE__ */
|
|
20006
|
-
/* @__PURE__ */
|
|
20084
|
+
/* @__PURE__ */ jsxs83("div", { css: linkParameterControls, children: [
|
|
20085
|
+
/* @__PURE__ */ jsx125(
|
|
20007
20086
|
"button",
|
|
20008
20087
|
{
|
|
20009
20088
|
type: "button",
|
|
@@ -20014,7 +20093,7 @@ var ParameterLinkInner = forwardRef21(
|
|
|
20014
20093
|
children: "edit"
|
|
20015
20094
|
}
|
|
20016
20095
|
),
|
|
20017
|
-
externalLink ? /* @__PURE__ */
|
|
20096
|
+
externalLink ? /* @__PURE__ */ jsx125(
|
|
20018
20097
|
"a",
|
|
20019
20098
|
{
|
|
20020
20099
|
href: externalLink,
|
|
@@ -20022,7 +20101,7 @@ var ParameterLinkInner = forwardRef21(
|
|
|
20022
20101
|
title: "Open link in new tab",
|
|
20023
20102
|
target: "_blank",
|
|
20024
20103
|
rel: "noopener noreferrer",
|
|
20025
|
-
children: /* @__PURE__ */
|
|
20104
|
+
children: /* @__PURE__ */ jsx125(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
|
|
20026
20105
|
}
|
|
20027
20106
|
) : null
|
|
20028
20107
|
] })
|
|
@@ -20031,15 +20110,15 @@ var ParameterLinkInner = forwardRef21(
|
|
|
20031
20110
|
);
|
|
20032
20111
|
|
|
20033
20112
|
// src/components/ParameterInputs/ParameterMultiSelect.tsx
|
|
20034
|
-
import { jsx as
|
|
20113
|
+
import { jsx as jsx126 } from "@emotion/react/jsx-runtime";
|
|
20035
20114
|
var ParameterMultiSelect = ({ disabled: disabled2 = false, ...props }) => {
|
|
20036
20115
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
20037
|
-
return /* @__PURE__ */
|
|
20116
|
+
return /* @__PURE__ */ jsx126(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx126(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
|
|
20038
20117
|
};
|
|
20039
20118
|
var ParameterMultiSelectInner = (props) => {
|
|
20040
20119
|
var _a;
|
|
20041
20120
|
const { id, label } = useParameterShell();
|
|
20042
|
-
return /* @__PURE__ */
|
|
20121
|
+
return /* @__PURE__ */ jsx126(
|
|
20043
20122
|
InputComboBox,
|
|
20044
20123
|
{
|
|
20045
20124
|
menuPortalTarget: document.body,
|
|
@@ -20089,7 +20168,7 @@ var ParameterMultiSelectInner = (props) => {
|
|
|
20089
20168
|
};
|
|
20090
20169
|
|
|
20091
20170
|
// src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
|
|
20092
|
-
import { Fragment as Fragment17, jsx as
|
|
20171
|
+
import { Fragment as Fragment17, jsx as jsx127, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
|
|
20093
20172
|
var ParameterNameAndPublicIdInput = ({
|
|
20094
20173
|
id,
|
|
20095
20174
|
onBlur,
|
|
@@ -20115,8 +20194,8 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
20115
20194
|
navigator.clipboard.writeText(values[publicIdFieldName]);
|
|
20116
20195
|
};
|
|
20117
20196
|
autoFocus == null ? void 0 : autoFocus();
|
|
20118
|
-
return /* @__PURE__ */
|
|
20119
|
-
/* @__PURE__ */
|
|
20197
|
+
return /* @__PURE__ */ jsxs84(Fragment17, { children: [
|
|
20198
|
+
/* @__PURE__ */ jsx127(
|
|
20120
20199
|
ParameterInput,
|
|
20121
20200
|
{
|
|
20122
20201
|
id: nameIdField,
|
|
@@ -20135,7 +20214,7 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
20135
20214
|
value: values[nameIdField]
|
|
20136
20215
|
}
|
|
20137
20216
|
),
|
|
20138
|
-
/* @__PURE__ */
|
|
20217
|
+
/* @__PURE__ */ jsx127(
|
|
20139
20218
|
ParameterInput,
|
|
20140
20219
|
{
|
|
20141
20220
|
id: publicIdFieldName,
|
|
@@ -20149,11 +20228,11 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
20149
20228
|
caption: !publicIdError ? publicIdCaption : void 0,
|
|
20150
20229
|
placeholder: publicIdPlaceholderText,
|
|
20151
20230
|
errorMessage: publicIdError,
|
|
20152
|
-
menuItems: /* @__PURE__ */
|
|
20231
|
+
menuItems: /* @__PURE__ */ jsx127(
|
|
20153
20232
|
MenuItem,
|
|
20154
20233
|
{
|
|
20155
20234
|
disabled: !values[publicIdFieldName],
|
|
20156
|
-
icon: /* @__PURE__ */
|
|
20235
|
+
icon: /* @__PURE__ */ jsx127(Icon, { icon: "path-trim", iconColor: "currentColor" }),
|
|
20157
20236
|
onClick: handleCopyPidFieldValue,
|
|
20158
20237
|
children: "Copy"
|
|
20159
20238
|
}
|
|
@@ -20161,12 +20240,12 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
20161
20240
|
value: values[publicIdFieldName]
|
|
20162
20241
|
}
|
|
20163
20242
|
),
|
|
20164
|
-
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */
|
|
20243
|
+
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx127(Callout, { type: "caution", children: warnOverLength.message }) : null
|
|
20165
20244
|
] });
|
|
20166
20245
|
};
|
|
20167
20246
|
|
|
20168
20247
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
20169
|
-
import { css as
|
|
20248
|
+
import { css as css98 } from "@emotion/react";
|
|
20170
20249
|
import { ListItemNode, ListNode as ListNode2 } from "@lexical/list";
|
|
20171
20250
|
import {
|
|
20172
20251
|
CODE,
|
|
@@ -20318,23 +20397,23 @@ function DisableStylesPlugin() {
|
|
|
20318
20397
|
}
|
|
20319
20398
|
|
|
20320
20399
|
// src/components/ParameterInputs/rich-text/editorStyles.ts
|
|
20321
|
-
import { css as
|
|
20322
|
-
var textBold =
|
|
20400
|
+
import { css as css95 } from "@emotion/css";
|
|
20401
|
+
var textBold = css95`
|
|
20323
20402
|
font-weight: 700;
|
|
20324
20403
|
`;
|
|
20325
|
-
var textItalic =
|
|
20404
|
+
var textItalic = css95`
|
|
20326
20405
|
font-style: italic;
|
|
20327
20406
|
`;
|
|
20328
|
-
var textUnderline =
|
|
20407
|
+
var textUnderline = css95`
|
|
20329
20408
|
text-decoration: underline;
|
|
20330
20409
|
`;
|
|
20331
|
-
var textStrikethrough =
|
|
20410
|
+
var textStrikethrough = css95`
|
|
20332
20411
|
text-decoration: line-through;
|
|
20333
20412
|
`;
|
|
20334
|
-
var textUnderlineStrikethrough =
|
|
20413
|
+
var textUnderlineStrikethrough = css95`
|
|
20335
20414
|
text-decoration: underline line-through;
|
|
20336
20415
|
`;
|
|
20337
|
-
var textCode =
|
|
20416
|
+
var textCode = css95`
|
|
20338
20417
|
background-color: var(--gray-100);
|
|
20339
20418
|
border-radius: var(--rounded-sm);
|
|
20340
20419
|
display: inline-block;
|
|
@@ -20345,68 +20424,68 @@ var textCode = css93`
|
|
|
20345
20424
|
padding-left: var(--spacing-xs);
|
|
20346
20425
|
padding-right: var(--spacing-xs);
|
|
20347
20426
|
`;
|
|
20348
|
-
var textSuperscript =
|
|
20427
|
+
var textSuperscript = css95`
|
|
20349
20428
|
vertical-align: super;
|
|
20350
20429
|
font-size: smaller;
|
|
20351
20430
|
`;
|
|
20352
|
-
var textSubscript =
|
|
20431
|
+
var textSubscript = css95`
|
|
20353
20432
|
vertical-align: sub;
|
|
20354
20433
|
font-size: smaller;
|
|
20355
20434
|
`;
|
|
20356
|
-
var linkElement =
|
|
20435
|
+
var linkElement = css95`
|
|
20357
20436
|
${link}
|
|
20358
20437
|
${linkColorDefault}
|
|
20359
20438
|
text-decoration: underline;
|
|
20360
20439
|
`;
|
|
20361
|
-
var h12 =
|
|
20440
|
+
var h12 = css95`
|
|
20362
20441
|
font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
|
|
20363
20442
|
`;
|
|
20364
|
-
var h22 =
|
|
20443
|
+
var h22 = css95`
|
|
20365
20444
|
font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
|
|
20366
20445
|
`;
|
|
20367
|
-
var h32 =
|
|
20446
|
+
var h32 = css95`
|
|
20368
20447
|
font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
|
|
20369
20448
|
`;
|
|
20370
|
-
var h42 =
|
|
20449
|
+
var h42 = css95`
|
|
20371
20450
|
font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
|
|
20372
20451
|
`;
|
|
20373
|
-
var h52 =
|
|
20452
|
+
var h52 = css95`
|
|
20374
20453
|
font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
|
|
20375
20454
|
`;
|
|
20376
|
-
var h62 =
|
|
20455
|
+
var h62 = css95`
|
|
20377
20456
|
font-size: var(--fs-base);
|
|
20378
20457
|
`;
|
|
20379
|
-
var heading1Element =
|
|
20458
|
+
var heading1Element = css95`
|
|
20380
20459
|
${h12}
|
|
20381
20460
|
${commonHeadingAttr(true)}
|
|
20382
20461
|
${commonLineHeight}
|
|
20383
20462
|
`;
|
|
20384
|
-
var heading2Element =
|
|
20463
|
+
var heading2Element = css95`
|
|
20385
20464
|
${h22}
|
|
20386
20465
|
${commonHeadingAttr(true)}
|
|
20387
20466
|
${commonLineHeight}
|
|
20388
20467
|
`;
|
|
20389
|
-
var heading3Element =
|
|
20468
|
+
var heading3Element = css95`
|
|
20390
20469
|
${h32}
|
|
20391
20470
|
${commonHeadingAttr(true)}
|
|
20392
20471
|
${commonLineHeight}
|
|
20393
20472
|
`;
|
|
20394
|
-
var heading4Element =
|
|
20473
|
+
var heading4Element = css95`
|
|
20395
20474
|
${h42}
|
|
20396
20475
|
${commonHeadingAttr(true)}
|
|
20397
20476
|
${commonLineHeight}
|
|
20398
20477
|
`;
|
|
20399
|
-
var heading5Element =
|
|
20478
|
+
var heading5Element = css95`
|
|
20400
20479
|
${h52}
|
|
20401
20480
|
${commonHeadingAttr(true)}
|
|
20402
20481
|
${commonLineHeight}
|
|
20403
20482
|
`;
|
|
20404
|
-
var heading6Element =
|
|
20483
|
+
var heading6Element = css95`
|
|
20405
20484
|
${h62}
|
|
20406
20485
|
${commonHeadingAttr(true)}
|
|
20407
20486
|
${commonLineHeight}
|
|
20408
20487
|
`;
|
|
20409
|
-
var paragraphElement =
|
|
20488
|
+
var paragraphElement = css95`
|
|
20410
20489
|
line-height: 1.5;
|
|
20411
20490
|
margin-bottom: var(--spacing-base);
|
|
20412
20491
|
|
|
@@ -20414,7 +20493,7 @@ var paragraphElement = css93`
|
|
|
20414
20493
|
margin-bottom: 0;
|
|
20415
20494
|
}
|
|
20416
20495
|
`;
|
|
20417
|
-
var orderedListElement =
|
|
20496
|
+
var orderedListElement = css95`
|
|
20418
20497
|
${commonLineHeight}
|
|
20419
20498
|
display: block;
|
|
20420
20499
|
list-style: decimal;
|
|
@@ -20443,7 +20522,7 @@ var orderedListElement = css93`
|
|
|
20443
20522
|
}
|
|
20444
20523
|
}
|
|
20445
20524
|
`;
|
|
20446
|
-
var unorderedListElement =
|
|
20525
|
+
var unorderedListElement = css95`
|
|
20447
20526
|
${commonLineHeight}
|
|
20448
20527
|
display: block;
|
|
20449
20528
|
list-style: disc;
|
|
@@ -20464,13 +20543,13 @@ var unorderedListElement = css93`
|
|
|
20464
20543
|
}
|
|
20465
20544
|
}
|
|
20466
20545
|
`;
|
|
20467
|
-
var listItemElement =
|
|
20546
|
+
var listItemElement = css95`
|
|
20468
20547
|
margin-left: var(--spacing-md);
|
|
20469
20548
|
`;
|
|
20470
|
-
var nestedListItemElement =
|
|
20549
|
+
var nestedListItemElement = css95`
|
|
20471
20550
|
list-style-type: none;
|
|
20472
20551
|
`;
|
|
20473
|
-
var blockquoteElement =
|
|
20552
|
+
var blockquoteElement = css95`
|
|
20474
20553
|
border-left: 0.25rem solid var(--gray-300);
|
|
20475
20554
|
color: var(--gray-600);
|
|
20476
20555
|
margin-bottom: var(--spacing-base);
|
|
@@ -20480,7 +20559,7 @@ var blockquoteElement = css93`
|
|
|
20480
20559
|
margin-bottom: 0;
|
|
20481
20560
|
}
|
|
20482
20561
|
`;
|
|
20483
|
-
var codeElement =
|
|
20562
|
+
var codeElement = css95`
|
|
20484
20563
|
background-color: var(--gray-100);
|
|
20485
20564
|
border-radius: var(--rounded-sm);
|
|
20486
20565
|
display: block;
|
|
@@ -20497,7 +20576,7 @@ var codeElement = css93`
|
|
|
20497
20576
|
`;
|
|
20498
20577
|
|
|
20499
20578
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
20500
|
-
import { css as
|
|
20579
|
+
import { css as css96 } from "@emotion/react";
|
|
20501
20580
|
import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
|
|
20502
20581
|
import { NodeEventPlugin } from "@lexical/react/LexicalNodeEventPlugin";
|
|
20503
20582
|
import { addClassNamesToElement, isHTMLAnchorElement, mergeRegister as mergeRegister2 } from "@lexical/utils";
|
|
@@ -20550,7 +20629,7 @@ var getSelectedNode = (selection) => {
|
|
|
20550
20629
|
};
|
|
20551
20630
|
|
|
20552
20631
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
20553
|
-
import { Fragment as Fragment18, jsx as
|
|
20632
|
+
import { Fragment as Fragment18, jsx as jsx128, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
|
|
20554
20633
|
var isProjectMapLinkValue = (value) => {
|
|
20555
20634
|
return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
|
|
20556
20635
|
value.nodeId && value.path && value.projectMapId
|
|
@@ -20837,16 +20916,16 @@ var OPEN_LINK_NODE_MODAL_COMMAND = createCommand(
|
|
|
20837
20916
|
);
|
|
20838
20917
|
var LINK_POPOVER_OFFSET_X = 0;
|
|
20839
20918
|
var LINK_POPOVER_OFFSET_Y = 8;
|
|
20840
|
-
var linkPopover =
|
|
20919
|
+
var linkPopover = css96`
|
|
20841
20920
|
position: absolute;
|
|
20842
20921
|
z-index: 5;
|
|
20843
20922
|
`;
|
|
20844
|
-
var linkPopoverContainer =
|
|
20923
|
+
var linkPopoverContainer = css96`
|
|
20845
20924
|
${Popover()};
|
|
20846
20925
|
align-items: center;
|
|
20847
20926
|
display: flex;
|
|
20848
20927
|
`;
|
|
20849
|
-
var linkPopoverAnchor =
|
|
20928
|
+
var linkPopoverAnchor = css96`
|
|
20850
20929
|
${link}
|
|
20851
20930
|
${linkColorDefault}
|
|
20852
20931
|
`;
|
|
@@ -20993,8 +21072,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
20993
21072
|
});
|
|
20994
21073
|
});
|
|
20995
21074
|
};
|
|
20996
|
-
return /* @__PURE__ */
|
|
20997
|
-
/* @__PURE__ */
|
|
21075
|
+
return /* @__PURE__ */ jsxs85(Fragment18, { children: [
|
|
21076
|
+
/* @__PURE__ */ jsx128(
|
|
20998
21077
|
NodeEventPlugin,
|
|
20999
21078
|
{
|
|
21000
21079
|
nodeType: LinkNode,
|
|
@@ -21004,7 +21083,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
21004
21083
|
}
|
|
21005
21084
|
}
|
|
21006
21085
|
),
|
|
21007
|
-
linkPopoverState ? /* @__PURE__ */
|
|
21086
|
+
linkPopoverState ? /* @__PURE__ */ jsx128(
|
|
21008
21087
|
"div",
|
|
21009
21088
|
{
|
|
21010
21089
|
css: linkPopover,
|
|
@@ -21013,8 +21092,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
21013
21092
|
top: linkPopoverState.position.y
|
|
21014
21093
|
},
|
|
21015
21094
|
ref: linkPopoverElRef,
|
|
21016
|
-
children: /* @__PURE__ */
|
|
21017
|
-
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */
|
|
21095
|
+
children: /* @__PURE__ */ jsxs85("div", { css: linkPopoverContainer, children: [
|
|
21096
|
+
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx128(
|
|
21018
21097
|
"a",
|
|
21019
21098
|
{
|
|
21020
21099
|
href: parsePath(
|
|
@@ -21026,7 +21105,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
21026
21105
|
children: parsePath(linkPopoverState.node.__link.path)
|
|
21027
21106
|
}
|
|
21028
21107
|
),
|
|
21029
|
-
/* @__PURE__ */
|
|
21108
|
+
/* @__PURE__ */ jsx128(
|
|
21030
21109
|
Button,
|
|
21031
21110
|
{
|
|
21032
21111
|
size: "xs",
|
|
@@ -21034,7 +21113,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
21034
21113
|
onEditLinkNode(linkPopoverState.node);
|
|
21035
21114
|
},
|
|
21036
21115
|
buttonType: "ghost",
|
|
21037
|
-
children: /* @__PURE__ */
|
|
21116
|
+
children: /* @__PURE__ */ jsx128(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
|
|
21038
21117
|
}
|
|
21039
21118
|
)
|
|
21040
21119
|
] })
|
|
@@ -21059,7 +21138,7 @@ import {
|
|
|
21059
21138
|
INDENT_CONTENT_COMMAND
|
|
21060
21139
|
} from "lexical";
|
|
21061
21140
|
import { useEffect as useEffect19 } from "react";
|
|
21062
|
-
import { jsx as
|
|
21141
|
+
import { jsx as jsx129 } from "@emotion/react/jsx-runtime";
|
|
21063
21142
|
function isIndentPermitted(maxDepth) {
|
|
21064
21143
|
const selection = $getSelection2();
|
|
21065
21144
|
if (!$isRangeSelection2(selection)) {
|
|
@@ -21089,11 +21168,11 @@ function ListIndentPlugin({ maxDepth }) {
|
|
|
21089
21168
|
COMMAND_PRIORITY_CRITICAL
|
|
21090
21169
|
);
|
|
21091
21170
|
}, [editor, maxDepth]);
|
|
21092
|
-
return /* @__PURE__ */
|
|
21171
|
+
return /* @__PURE__ */ jsx129(TabIndentationPlugin, {});
|
|
21093
21172
|
}
|
|
21094
21173
|
|
|
21095
21174
|
// src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
|
|
21096
|
-
import { css as
|
|
21175
|
+
import { css as css97 } from "@emotion/react";
|
|
21097
21176
|
import { $createCodeNode } from "@lexical/code";
|
|
21098
21177
|
import {
|
|
21099
21178
|
$isListNode as $isListNode2,
|
|
@@ -21116,8 +21195,8 @@ import {
|
|
|
21116
21195
|
SELECTION_CHANGE_COMMAND
|
|
21117
21196
|
} from "lexical";
|
|
21118
21197
|
import { useCallback as useCallback11, useEffect as useEffect20, useMemo as useMemo6, useState as useState17 } from "react";
|
|
21119
|
-
import { Fragment as Fragment19, jsx as
|
|
21120
|
-
var toolbar =
|
|
21198
|
+
import { Fragment as Fragment19, jsx as jsx130, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
|
|
21199
|
+
var toolbar = css97`
|
|
21121
21200
|
background: var(--gray-50);
|
|
21122
21201
|
border-radius: var(--rounded-base);
|
|
21123
21202
|
display: flex;
|
|
@@ -21129,7 +21208,7 @@ var toolbar = css95`
|
|
|
21129
21208
|
top: calc(var(--spacing-sm) * -2);
|
|
21130
21209
|
z-index: 10;
|
|
21131
21210
|
`;
|
|
21132
|
-
var toolbarGroup =
|
|
21211
|
+
var toolbarGroup = css97`
|
|
21133
21212
|
display: flex;
|
|
21134
21213
|
gap: var(--spacing-xs);
|
|
21135
21214
|
position: relative;
|
|
@@ -21145,7 +21224,7 @@ var toolbarGroup = css95`
|
|
|
21145
21224
|
width: 1px;
|
|
21146
21225
|
}
|
|
21147
21226
|
`;
|
|
21148
|
-
var richTextToolbarButton =
|
|
21227
|
+
var richTextToolbarButton = css97`
|
|
21149
21228
|
align-items: center;
|
|
21150
21229
|
appearance: none;
|
|
21151
21230
|
border: 0;
|
|
@@ -21158,17 +21237,17 @@ var richTextToolbarButton = css95`
|
|
|
21158
21237
|
min-width: 32px;
|
|
21159
21238
|
padding: 0 var(--spacing-sm);
|
|
21160
21239
|
`;
|
|
21161
|
-
var richTextToolbarButtonActive =
|
|
21240
|
+
var richTextToolbarButtonActive = css97`
|
|
21162
21241
|
background: var(--gray-200);
|
|
21163
21242
|
`;
|
|
21164
|
-
var toolbarIcon =
|
|
21243
|
+
var toolbarIcon = css97`
|
|
21165
21244
|
color: inherit;
|
|
21166
21245
|
`;
|
|
21167
|
-
var toolbarChevron =
|
|
21246
|
+
var toolbarChevron = css97`
|
|
21168
21247
|
margin-left: var(--spacing-xs);
|
|
21169
21248
|
`;
|
|
21170
21249
|
var RichTextToolbarIcon = ({ icon }) => {
|
|
21171
|
-
return /* @__PURE__ */
|
|
21250
|
+
return /* @__PURE__ */ jsx130(Icon, { icon, css: toolbarIcon, size: "1rem" });
|
|
21172
21251
|
};
|
|
21173
21252
|
var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
|
|
21174
21253
|
["bold", "format-bold"],
|
|
@@ -21277,15 +21356,15 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
21277
21356
|
});
|
|
21278
21357
|
});
|
|
21279
21358
|
}, [editor, updateToolbar]);
|
|
21280
|
-
return /* @__PURE__ */
|
|
21281
|
-
/* @__PURE__ */
|
|
21359
|
+
return /* @__PURE__ */ jsxs86("div", { css: toolbar, children: [
|
|
21360
|
+
/* @__PURE__ */ jsxs86(
|
|
21282
21361
|
Menu,
|
|
21283
21362
|
{
|
|
21284
21363
|
menuLabel: "Elements",
|
|
21285
|
-
menuTrigger: /* @__PURE__ */
|
|
21364
|
+
menuTrigger: /* @__PURE__ */ jsxs86("button", { css: richTextToolbarButton, title: "Text styles", children: [
|
|
21286
21365
|
visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
|
|
21287
21366
|
" ",
|
|
21288
|
-
/* @__PURE__ */
|
|
21367
|
+
/* @__PURE__ */ jsx130(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
21289
21368
|
] }),
|
|
21290
21369
|
placement: "bottom-start",
|
|
21291
21370
|
children: [
|
|
@@ -21295,7 +21374,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
21295
21374
|
type: "paragraph"
|
|
21296
21375
|
},
|
|
21297
21376
|
...visibleTextualElements
|
|
21298
|
-
].map((element) => /* @__PURE__ */
|
|
21377
|
+
].map((element) => /* @__PURE__ */ jsx130(
|
|
21299
21378
|
MenuItem,
|
|
21300
21379
|
{
|
|
21301
21380
|
onClick: () => {
|
|
@@ -21305,12 +21384,12 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
21305
21384
|
},
|
|
21306
21385
|
element.type
|
|
21307
21386
|
)),
|
|
21308
|
-
visibleTextualElements.length === 0 ? /* @__PURE__ */
|
|
21387
|
+
visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx130(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
|
|
21309
21388
|
]
|
|
21310
21389
|
}
|
|
21311
21390
|
),
|
|
21312
|
-
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */
|
|
21313
|
-
visibleFormatsWithIcon.map((format) => /* @__PURE__ */
|
|
21391
|
+
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs86("div", { css: toolbarGroup, children: [
|
|
21392
|
+
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx130(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx130(
|
|
21314
21393
|
"button",
|
|
21315
21394
|
{
|
|
21316
21395
|
onClick: () => {
|
|
@@ -21320,16 +21399,16 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
21320
21399
|
richTextToolbarButton,
|
|
21321
21400
|
activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
|
|
21322
21401
|
],
|
|
21323
|
-
children: /* @__PURE__ */
|
|
21402
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
|
|
21324
21403
|
}
|
|
21325
21404
|
) }, format.type)),
|
|
21326
|
-
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */
|
|
21405
|
+
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx130(
|
|
21327
21406
|
Menu,
|
|
21328
21407
|
{
|
|
21329
21408
|
menuLabel: "Alternative text styles",
|
|
21330
|
-
menuTrigger: /* @__PURE__ */
|
|
21409
|
+
menuTrigger: /* @__PURE__ */ jsx130("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx130(Icon, { icon: "more-alt", css: toolbarIcon }) }),
|
|
21331
21410
|
placement: "bottom-start",
|
|
21332
|
-
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */
|
|
21411
|
+
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx130(
|
|
21333
21412
|
MenuItem,
|
|
21334
21413
|
{
|
|
21335
21414
|
onClick: () => {
|
|
@@ -21342,19 +21421,19 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
21342
21421
|
}
|
|
21343
21422
|
) : null
|
|
21344
21423
|
] }) : null,
|
|
21345
|
-
visibleElementsWithIcons.size > 0 ? /* @__PURE__ */
|
|
21346
|
-
linkElementVisible ? /* @__PURE__ */
|
|
21424
|
+
visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ jsxs86("div", { css: toolbarGroup, children: [
|
|
21425
|
+
linkElementVisible ? /* @__PURE__ */ jsx130(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx130(
|
|
21347
21426
|
"button",
|
|
21348
21427
|
{
|
|
21349
21428
|
onClick: () => {
|
|
21350
21429
|
isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
|
|
21351
21430
|
},
|
|
21352
21431
|
css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
|
|
21353
|
-
children: /* @__PURE__ */
|
|
21432
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "link" })
|
|
21354
21433
|
}
|
|
21355
21434
|
) }) : null,
|
|
21356
|
-
visibleLists.size > 0 ? /* @__PURE__ */
|
|
21357
|
-
visibleLists.has("unorderedList") ? /* @__PURE__ */
|
|
21435
|
+
visibleLists.size > 0 ? /* @__PURE__ */ jsxs86(Fragment19, { children: [
|
|
21436
|
+
visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx130(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx130(
|
|
21358
21437
|
"button",
|
|
21359
21438
|
{
|
|
21360
21439
|
onClick: () => {
|
|
@@ -21364,10 +21443,10 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
21364
21443
|
richTextToolbarButton,
|
|
21365
21444
|
activeElement === "unorderedList" ? richTextToolbarButtonActive : null
|
|
21366
21445
|
],
|
|
21367
|
-
children: /* @__PURE__ */
|
|
21446
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "layout-list" })
|
|
21368
21447
|
}
|
|
21369
21448
|
) }) : null,
|
|
21370
|
-
visibleLists.has("orderedList") ? /* @__PURE__ */
|
|
21449
|
+
visibleLists.has("orderedList") ? /* @__PURE__ */ jsx130(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx130(
|
|
21371
21450
|
"button",
|
|
21372
21451
|
{
|
|
21373
21452
|
onClick: () => {
|
|
@@ -21377,32 +21456,32 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
21377
21456
|
richTextToolbarButton,
|
|
21378
21457
|
activeElement === "orderedList" ? richTextToolbarButtonActive : null
|
|
21379
21458
|
],
|
|
21380
|
-
children: /* @__PURE__ */
|
|
21459
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "layout-list-numbered" })
|
|
21381
21460
|
}
|
|
21382
21461
|
) }) : null
|
|
21383
21462
|
] }) : null,
|
|
21384
|
-
quoteElementVisible ? /* @__PURE__ */
|
|
21463
|
+
quoteElementVisible ? /* @__PURE__ */ jsx130(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx130(
|
|
21385
21464
|
"button",
|
|
21386
21465
|
{
|
|
21387
21466
|
onClick: () => {
|
|
21388
21467
|
activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
|
|
21389
21468
|
},
|
|
21390
21469
|
css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
|
|
21391
|
-
children: /* @__PURE__ */
|
|
21470
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "quote" })
|
|
21392
21471
|
}
|
|
21393
21472
|
) }) : null,
|
|
21394
|
-
codeElementVisible ? /* @__PURE__ */
|
|
21473
|
+
codeElementVisible ? /* @__PURE__ */ jsx130(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx130(
|
|
21395
21474
|
"button",
|
|
21396
21475
|
{
|
|
21397
21476
|
onClick: () => {
|
|
21398
21477
|
activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
|
|
21399
21478
|
},
|
|
21400
21479
|
css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
|
|
21401
|
-
children: /* @__PURE__ */
|
|
21480
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "code-slash" })
|
|
21402
21481
|
}
|
|
21403
21482
|
) }) : null
|
|
21404
21483
|
] }) : null,
|
|
21405
|
-
customControls ? /* @__PURE__ */
|
|
21484
|
+
customControls ? /* @__PURE__ */ jsx130("div", { css: toolbarGroup, children: customControls }) : null
|
|
21406
21485
|
] });
|
|
21407
21486
|
};
|
|
21408
21487
|
var RichTextToolbar_default = RichTextToolbar;
|
|
@@ -21516,7 +21595,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
21516
21595
|
};
|
|
21517
21596
|
|
|
21518
21597
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
21519
|
-
import { Fragment as Fragment20, jsx as
|
|
21598
|
+
import { Fragment as Fragment20, jsx as jsx131, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
|
|
21520
21599
|
var ParameterRichText = ({
|
|
21521
21600
|
label,
|
|
21522
21601
|
labelLeadingIcon,
|
|
@@ -21541,7 +21620,7 @@ var ParameterRichText = ({
|
|
|
21541
21620
|
variables,
|
|
21542
21621
|
customControls
|
|
21543
21622
|
}) => {
|
|
21544
|
-
return /* @__PURE__ */
|
|
21623
|
+
return /* @__PURE__ */ jsxs87(
|
|
21545
21624
|
ParameterShell,
|
|
21546
21625
|
{
|
|
21547
21626
|
"data-testid": "parameter-richtext",
|
|
@@ -21555,7 +21634,7 @@ var ParameterRichText = ({
|
|
|
21555
21634
|
captionTestId,
|
|
21556
21635
|
menuItems,
|
|
21557
21636
|
children: [
|
|
21558
|
-
/* @__PURE__ */
|
|
21637
|
+
/* @__PURE__ */ jsx131(
|
|
21559
21638
|
ParameterRichTextInner,
|
|
21560
21639
|
{
|
|
21561
21640
|
value,
|
|
@@ -21573,23 +21652,23 @@ var ParameterRichText = ({
|
|
|
21573
21652
|
children
|
|
21574
21653
|
}
|
|
21575
21654
|
),
|
|
21576
|
-
menuItems ? /* @__PURE__ */
|
|
21655
|
+
menuItems ? /* @__PURE__ */ jsx131(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx131(Fragment20, { children: menuItems }) }) : null
|
|
21577
21656
|
]
|
|
21578
21657
|
}
|
|
21579
21658
|
);
|
|
21580
21659
|
};
|
|
21581
|
-
var editorWrapper =
|
|
21660
|
+
var editorWrapper = css98`
|
|
21582
21661
|
display: flex;
|
|
21583
21662
|
flex-flow: column;
|
|
21584
21663
|
flex-grow: 1;
|
|
21585
21664
|
`;
|
|
21586
|
-
var editorContainer =
|
|
21665
|
+
var editorContainer = css98`
|
|
21587
21666
|
display: flex;
|
|
21588
21667
|
flex-flow: column;
|
|
21589
21668
|
flex-grow: 1;
|
|
21590
21669
|
position: relative;
|
|
21591
21670
|
`;
|
|
21592
|
-
var editorPlaceholder =
|
|
21671
|
+
var editorPlaceholder = css98`
|
|
21593
21672
|
color: var(--gray-500);
|
|
21594
21673
|
font-style: italic;
|
|
21595
21674
|
/* 1px is added to make sure caret is clearly visible when field is focused
|
|
@@ -21600,7 +21679,7 @@ var editorPlaceholder = css96`
|
|
|
21600
21679
|
top: var(--spacing-sm);
|
|
21601
21680
|
user-select: none;
|
|
21602
21681
|
`;
|
|
21603
|
-
var editorInput =
|
|
21682
|
+
var editorInput = css98`
|
|
21604
21683
|
background: var(--white);
|
|
21605
21684
|
border: 1px solid var(--gray-200);
|
|
21606
21685
|
border-radius: var(--rounded-sm);
|
|
@@ -21684,8 +21763,8 @@ var ParameterRichTextInner = ({
|
|
|
21684
21763
|
},
|
|
21685
21764
|
editable: !readOnly
|
|
21686
21765
|
};
|
|
21687
|
-
return /* @__PURE__ */
|
|
21688
|
-
/* @__PURE__ */
|
|
21766
|
+
return /* @__PURE__ */ jsxs87(Fragment20, { children: [
|
|
21767
|
+
/* @__PURE__ */ jsx131("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx131(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx131(
|
|
21689
21768
|
RichText,
|
|
21690
21769
|
{
|
|
21691
21770
|
onChange,
|
|
@@ -21744,20 +21823,20 @@ var RichText = ({
|
|
|
21744
21823
|
useEffect21(() => {
|
|
21745
21824
|
editor.setEditable(!readOnly);
|
|
21746
21825
|
}, [editor, readOnly]);
|
|
21747
|
-
return /* @__PURE__ */
|
|
21748
|
-
readOnly ? null : /* @__PURE__ */
|
|
21749
|
-
/* @__PURE__ */
|
|
21750
|
-
/* @__PURE__ */
|
|
21826
|
+
return /* @__PURE__ */ jsxs87(Fragment20, { children: [
|
|
21827
|
+
readOnly ? null : /* @__PURE__ */ jsx131(RichTextToolbar_default, { config, customControls }),
|
|
21828
|
+
/* @__PURE__ */ jsxs87("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
|
|
21829
|
+
/* @__PURE__ */ jsx131(
|
|
21751
21830
|
RichTextPlugin,
|
|
21752
21831
|
{
|
|
21753
|
-
contentEditable: /* @__PURE__ */
|
|
21754
|
-
placeholder: /* @__PURE__ */
|
|
21832
|
+
contentEditable: /* @__PURE__ */ jsx131(ContentEditable, { css: editorInput, className: editorInputClassName }),
|
|
21833
|
+
placeholder: /* @__PURE__ */ jsx131("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
|
|
21755
21834
|
ErrorBoundary: LexicalErrorBoundary
|
|
21756
21835
|
}
|
|
21757
21836
|
),
|
|
21758
|
-
/* @__PURE__ */
|
|
21759
|
-
readOnly ? null : /* @__PURE__ */
|
|
21760
|
-
/* @__PURE__ */
|
|
21837
|
+
/* @__PURE__ */ jsx131(ListPlugin, {}),
|
|
21838
|
+
readOnly ? null : /* @__PURE__ */ jsx131(HistoryPlugin, {}),
|
|
21839
|
+
/* @__PURE__ */ jsx131(
|
|
21761
21840
|
LinkNodePlugin,
|
|
21762
21841
|
{
|
|
21763
21842
|
onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
|
|
@@ -21767,27 +21846,27 @@ var RichText = ({
|
|
|
21767
21846
|
} : void 0
|
|
21768
21847
|
}
|
|
21769
21848
|
),
|
|
21770
|
-
/* @__PURE__ */
|
|
21771
|
-
/* @__PURE__ */
|
|
21772
|
-
/* @__PURE__ */
|
|
21773
|
-
/* @__PURE__ */
|
|
21849
|
+
/* @__PURE__ */ jsx131(ListIndentPlugin, { maxDepth: 4 }),
|
|
21850
|
+
/* @__PURE__ */ jsx131(DisableStylesPlugin, {}),
|
|
21851
|
+
/* @__PURE__ */ jsx131(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
|
|
21852
|
+
/* @__PURE__ */ jsx131(Fragment20, { children })
|
|
21774
21853
|
] })
|
|
21775
21854
|
] });
|
|
21776
21855
|
};
|
|
21777
21856
|
|
|
21778
21857
|
// src/components/ParameterInputs/ParameterSelect.tsx
|
|
21779
21858
|
import { forwardRef as forwardRef22 } from "react";
|
|
21780
|
-
import { jsx as
|
|
21859
|
+
import { jsx as jsx132, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
|
|
21781
21860
|
var ParameterSelect = forwardRef22(
|
|
21782
21861
|
({ defaultOption, options, ...props }, ref) => {
|
|
21783
21862
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
21784
|
-
return /* @__PURE__ */
|
|
21863
|
+
return /* @__PURE__ */ jsx132(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx132(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
|
|
21785
21864
|
}
|
|
21786
21865
|
);
|
|
21787
21866
|
var ParameterSelectInner = forwardRef22(
|
|
21788
21867
|
({ defaultOption, options, ...props }, ref) => {
|
|
21789
21868
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
21790
|
-
return /* @__PURE__ */
|
|
21869
|
+
return /* @__PURE__ */ jsxs88(
|
|
21791
21870
|
"select",
|
|
21792
21871
|
{
|
|
21793
21872
|
css: [input3, selectInput],
|
|
@@ -21796,10 +21875,10 @@ var ParameterSelectInner = forwardRef22(
|
|
|
21796
21875
|
ref,
|
|
21797
21876
|
...props,
|
|
21798
21877
|
children: [
|
|
21799
|
-
defaultOption ? /* @__PURE__ */
|
|
21878
|
+
defaultOption ? /* @__PURE__ */ jsx132("option", { value: "", children: defaultOption }) : null,
|
|
21800
21879
|
options.map((option) => {
|
|
21801
21880
|
var _a;
|
|
21802
|
-
return /* @__PURE__ */
|
|
21881
|
+
return /* @__PURE__ */ jsx132("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
|
|
21803
21882
|
})
|
|
21804
21883
|
]
|
|
21805
21884
|
}
|
|
@@ -21809,14 +21888,14 @@ var ParameterSelectInner = forwardRef22(
|
|
|
21809
21888
|
|
|
21810
21889
|
// src/components/ParameterInputs/ParameterTextarea.tsx
|
|
21811
21890
|
import { forwardRef as forwardRef23 } from "react";
|
|
21812
|
-
import { jsx as
|
|
21891
|
+
import { jsx as jsx133 } from "@emotion/react/jsx-runtime";
|
|
21813
21892
|
var ParameterTextarea = forwardRef23((props, ref) => {
|
|
21814
21893
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
21815
|
-
return /* @__PURE__ */
|
|
21894
|
+
return /* @__PURE__ */ jsx133(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx133(ParameterTextareaInner, { ref, ...innerProps }) });
|
|
21816
21895
|
});
|
|
21817
21896
|
var ParameterTextareaInner = forwardRef23(({ ...props }, ref) => {
|
|
21818
21897
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
21819
|
-
return /* @__PURE__ */
|
|
21898
|
+
return /* @__PURE__ */ jsx133(
|
|
21820
21899
|
"textarea",
|
|
21821
21900
|
{
|
|
21822
21901
|
css: [input3, textarea2],
|
|
@@ -21830,25 +21909,25 @@ var ParameterTextareaInner = forwardRef23(({ ...props }, ref) => {
|
|
|
21830
21909
|
|
|
21831
21910
|
// src/components/ParameterInputs/ParameterToggle.tsx
|
|
21832
21911
|
import { forwardRef as forwardRef24 } from "react";
|
|
21833
|
-
import { jsx as
|
|
21912
|
+
import { jsx as jsx134, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
|
|
21834
21913
|
var ParameterToggle = forwardRef24((props, ref) => {
|
|
21835
21914
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
21836
|
-
return /* @__PURE__ */
|
|
21915
|
+
return /* @__PURE__ */ jsx134(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx134(ParameterToggleInner, { ref, ...innerProps }) });
|
|
21837
21916
|
});
|
|
21838
21917
|
var ParameterToggleInner = forwardRef24(
|
|
21839
21918
|
({ children, ...props }, ref) => {
|
|
21840
21919
|
const { id, label } = useParameterShell();
|
|
21841
|
-
return /* @__PURE__ */
|
|
21842
|
-
/* @__PURE__ */
|
|
21843
|
-
/* @__PURE__ */
|
|
21920
|
+
return /* @__PURE__ */ jsxs89("label", { css: inputToggleLabel2, children: [
|
|
21921
|
+
/* @__PURE__ */ jsx134("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
|
|
21922
|
+
/* @__PURE__ */ jsx134("span", { css: inlineLabel2, children: label }),
|
|
21844
21923
|
children
|
|
21845
21924
|
] });
|
|
21846
21925
|
}
|
|
21847
21926
|
);
|
|
21848
21927
|
|
|
21849
21928
|
// src/components/ProgressBar/ProgressBar.styles.ts
|
|
21850
|
-
import { css as
|
|
21851
|
-
var container3 =
|
|
21929
|
+
import { css as css99, keyframes as keyframes4 } from "@emotion/react";
|
|
21930
|
+
var container3 = css99`
|
|
21852
21931
|
background: var(--gray-50);
|
|
21853
21932
|
margin-block: var(--spacing-sm);
|
|
21854
21933
|
position: relative;
|
|
@@ -21858,13 +21937,13 @@ var container3 = css97`
|
|
|
21858
21937
|
border: solid 1px var(--gray-300);
|
|
21859
21938
|
`;
|
|
21860
21939
|
var themeMap = {
|
|
21861
|
-
primary:
|
|
21940
|
+
primary: css99`
|
|
21862
21941
|
--progress-color: var(--accent-light);
|
|
21863
21942
|
`,
|
|
21864
|
-
secondary:
|
|
21943
|
+
secondary: css99`
|
|
21865
21944
|
--progress-color: var(--accent-alt-light);
|
|
21866
21945
|
`,
|
|
21867
|
-
destructive:
|
|
21946
|
+
destructive: css99`
|
|
21868
21947
|
--progress-color: var(--brand-secondary-5);
|
|
21869
21948
|
`
|
|
21870
21949
|
};
|
|
@@ -21876,10 +21955,10 @@ var slidingBackgroundPosition = keyframes4`
|
|
|
21876
21955
|
background-position: 64px 0;
|
|
21877
21956
|
}
|
|
21878
21957
|
`;
|
|
21879
|
-
var determinate =
|
|
21958
|
+
var determinate = css99`
|
|
21880
21959
|
background-color: var(--progress-color);
|
|
21881
21960
|
`;
|
|
21882
|
-
var indeterminate =
|
|
21961
|
+
var indeterminate = css99`
|
|
21883
21962
|
background-image: linear-gradient(
|
|
21884
21963
|
45deg,
|
|
21885
21964
|
var(--progress-color) 25%,
|
|
@@ -21893,7 +21972,7 @@ var indeterminate = css97`
|
|
|
21893
21972
|
background-size: 64px 64px;
|
|
21894
21973
|
animation: ${slidingBackgroundPosition} 1s linear infinite;
|
|
21895
21974
|
`;
|
|
21896
|
-
var bar =
|
|
21975
|
+
var bar = css99`
|
|
21897
21976
|
position: absolute;
|
|
21898
21977
|
inset: 0;
|
|
21899
21978
|
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
@@ -21901,7 +21980,7 @@ var bar = css97`
|
|
|
21901
21980
|
`;
|
|
21902
21981
|
|
|
21903
21982
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
21904
|
-
import { jsx as
|
|
21983
|
+
import { jsx as jsx135 } from "@emotion/react/jsx-runtime";
|
|
21905
21984
|
function ProgressBar({
|
|
21906
21985
|
current,
|
|
21907
21986
|
max,
|
|
@@ -21911,7 +21990,7 @@ function ProgressBar({
|
|
|
21911
21990
|
}) {
|
|
21912
21991
|
const valueNow = Math.min(current, max);
|
|
21913
21992
|
const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
|
|
21914
|
-
return /* @__PURE__ */
|
|
21993
|
+
return /* @__PURE__ */ jsx135(
|
|
21915
21994
|
"div",
|
|
21916
21995
|
{
|
|
21917
21996
|
css: container3,
|
|
@@ -21922,7 +22001,7 @@ function ProgressBar({
|
|
|
21922
22001
|
"aria-valuemax": max,
|
|
21923
22002
|
"aria-valuenow": valueNow,
|
|
21924
22003
|
...props,
|
|
21925
|
-
children: /* @__PURE__ */
|
|
22004
|
+
children: /* @__PURE__ */ jsx135(
|
|
21926
22005
|
"div",
|
|
21927
22006
|
{
|
|
21928
22007
|
css: [
|
|
@@ -21941,28 +22020,28 @@ function ProgressBar({
|
|
|
21941
22020
|
}
|
|
21942
22021
|
|
|
21943
22022
|
// src/components/ProgressList/ProgressList.tsx
|
|
21944
|
-
import { css as
|
|
22023
|
+
import { css as css101 } from "@emotion/react";
|
|
21945
22024
|
import { CgCheckO as CgCheckO2 } from "@react-icons/all-files/cg/CgCheckO";
|
|
21946
22025
|
import { CgRadioCheck } from "@react-icons/all-files/cg/CgRadioCheck";
|
|
21947
22026
|
import { CgRecord } from "@react-icons/all-files/cg/CgRecord";
|
|
21948
22027
|
import { useMemo as useMemo7 } from "react";
|
|
21949
22028
|
|
|
21950
22029
|
// src/components/ProgressList/styles/ProgressList.styles.ts
|
|
21951
|
-
import { css as
|
|
21952
|
-
var progressListStyles =
|
|
22030
|
+
import { css as css100 } from "@emotion/react";
|
|
22031
|
+
var progressListStyles = css100`
|
|
21953
22032
|
display: flex;
|
|
21954
22033
|
flex-direction: column;
|
|
21955
22034
|
gap: var(--spacing-sm);
|
|
21956
22035
|
list-style-type: none;
|
|
21957
22036
|
`;
|
|
21958
|
-
var progressListItemStyles =
|
|
22037
|
+
var progressListItemStyles = css100`
|
|
21959
22038
|
display: flex;
|
|
21960
22039
|
gap: var(--spacing-base);
|
|
21961
22040
|
align-items: center;
|
|
21962
22041
|
`;
|
|
21963
22042
|
|
|
21964
22043
|
// src/components/ProgressList/ProgressList.tsx
|
|
21965
|
-
import { jsx as
|
|
22044
|
+
import { jsx as jsx136, jsxs as jsxs90 } from "@emotion/react/jsx-runtime";
|
|
21966
22045
|
var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
21967
22046
|
const itemsWithStatus = useMemo7(() => {
|
|
21968
22047
|
const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
|
|
@@ -21976,8 +22055,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
|
21976
22055
|
return { ...item, status };
|
|
21977
22056
|
});
|
|
21978
22057
|
}, [items, inProgressId]);
|
|
21979
|
-
return /* @__PURE__ */
|
|
21980
|
-
return /* @__PURE__ */
|
|
22058
|
+
return /* @__PURE__ */ jsx136("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
|
|
22059
|
+
return /* @__PURE__ */ jsx136(
|
|
21981
22060
|
ProgressListItem,
|
|
21982
22061
|
{
|
|
21983
22062
|
status,
|
|
@@ -22010,12 +22089,12 @@ var ProgressListItem = ({
|
|
|
22010
22089
|
}, [status, error]);
|
|
22011
22090
|
const statusStyles = useMemo7(() => {
|
|
22012
22091
|
if (error) {
|
|
22013
|
-
return errorLevel === "caution" ?
|
|
22092
|
+
return errorLevel === "caution" ? css101`
|
|
22014
22093
|
color: rgb(161, 98, 7);
|
|
22015
22094
|
& svg {
|
|
22016
22095
|
color: rgb(250, 204, 21);
|
|
22017
22096
|
}
|
|
22018
|
-
` :
|
|
22097
|
+
` : css101`
|
|
22019
22098
|
color: rgb(185, 28, 28);
|
|
22020
22099
|
& svg {
|
|
22021
22100
|
color: var(--brand-primary-2);
|
|
@@ -22023,38 +22102,38 @@ var ProgressListItem = ({
|
|
|
22023
22102
|
`;
|
|
22024
22103
|
}
|
|
22025
22104
|
const colorPerStatus = {
|
|
22026
|
-
completed:
|
|
22105
|
+
completed: css101`
|
|
22027
22106
|
opacity: 0.75;
|
|
22028
22107
|
`,
|
|
22029
|
-
inProgress:
|
|
22108
|
+
inProgress: css101`
|
|
22030
22109
|
-webkit-text-stroke-width: thin;
|
|
22031
22110
|
`,
|
|
22032
|
-
queued:
|
|
22111
|
+
queued: css101`
|
|
22033
22112
|
opacity: 0.5;
|
|
22034
22113
|
`
|
|
22035
22114
|
};
|
|
22036
22115
|
return colorPerStatus[status];
|
|
22037
22116
|
}, [status, error, errorLevel]);
|
|
22038
|
-
return /* @__PURE__ */
|
|
22039
|
-
/* @__PURE__ */
|
|
22040
|
-
/* @__PURE__ */
|
|
22117
|
+
return /* @__PURE__ */ jsxs90("li", { css: [progressListItemStyles, statusStyles], children: [
|
|
22118
|
+
/* @__PURE__ */ jsx136(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx136("div", { children: /* @__PURE__ */ jsx136(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
|
|
22119
|
+
/* @__PURE__ */ jsxs90("div", { children: [
|
|
22041
22120
|
children,
|
|
22042
|
-
/* @__PURE__ */
|
|
22121
|
+
/* @__PURE__ */ jsx136("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
|
|
22043
22122
|
] })
|
|
22044
22123
|
] });
|
|
22045
22124
|
};
|
|
22046
22125
|
|
|
22047
22126
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
22048
|
-
import { css as
|
|
22127
|
+
import { css as css103 } from "@emotion/react";
|
|
22049
22128
|
import { CgCheck as CgCheck5 } from "@react-icons/all-files/cg/CgCheck";
|
|
22050
22129
|
import { useCallback as useCallback12, useEffect as useEffect22, useMemo as useMemo8, useRef as useRef13, useState as useState18 } from "react";
|
|
22051
22130
|
|
|
22052
22131
|
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
22053
|
-
import { css as
|
|
22054
|
-
var segmentedControlRootStyles =
|
|
22132
|
+
import { css as css102 } from "@emotion/react";
|
|
22133
|
+
var segmentedControlRootStyles = css102`
|
|
22055
22134
|
position: relative;
|
|
22056
22135
|
`;
|
|
22057
|
-
var segmentedControlScrollIndicatorsStyles =
|
|
22136
|
+
var segmentedControlScrollIndicatorsStyles = css102`
|
|
22058
22137
|
position: absolute;
|
|
22059
22138
|
inset: 0;
|
|
22060
22139
|
z-index: 1;
|
|
@@ -22082,17 +22161,17 @@ var segmentedControlScrollIndicatorsStyles = css100`
|
|
|
22082
22161
|
background: linear-gradient(to left, var(--background-color) 10%, transparent);
|
|
22083
22162
|
}
|
|
22084
22163
|
`;
|
|
22085
|
-
var segmentedControlScrollIndicatorStartVisibleStyles =
|
|
22164
|
+
var segmentedControlScrollIndicatorStartVisibleStyles = css102`
|
|
22086
22165
|
&::before {
|
|
22087
22166
|
opacity: 1;
|
|
22088
22167
|
}
|
|
22089
22168
|
`;
|
|
22090
|
-
var segmentedControlScrollIndicatorEndVisibleStyles =
|
|
22169
|
+
var segmentedControlScrollIndicatorEndVisibleStyles = css102`
|
|
22091
22170
|
&::after {
|
|
22092
22171
|
opacity: 1;
|
|
22093
22172
|
}
|
|
22094
22173
|
`;
|
|
22095
|
-
var segmentedControlWrapperStyles =
|
|
22174
|
+
var segmentedControlWrapperStyles = css102`
|
|
22096
22175
|
overflow-y: auto;
|
|
22097
22176
|
scroll-behavior: smooth;
|
|
22098
22177
|
scrollbar-width: none;
|
|
@@ -22101,7 +22180,7 @@ var segmentedControlWrapperStyles = css100`
|
|
|
22101
22180
|
height: 0px;
|
|
22102
22181
|
}
|
|
22103
22182
|
`;
|
|
22104
|
-
var segmentedControlStyles =
|
|
22183
|
+
var segmentedControlStyles = css102`
|
|
22105
22184
|
--segmented-control-rounded-value: var(--rounded-base);
|
|
22106
22185
|
--segmented-control-border-width: 1px;
|
|
22107
22186
|
--segmented-control-selected-color: var(--brand-secondary-3);
|
|
@@ -22120,14 +22199,14 @@ var segmentedControlStyles = css100`
|
|
|
22120
22199
|
border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
|
|
22121
22200
|
font-size: var(--fs-xs);
|
|
22122
22201
|
`;
|
|
22123
|
-
var segmentedControlVerticalStyles =
|
|
22202
|
+
var segmentedControlVerticalStyles = css102`
|
|
22124
22203
|
flex-direction: column;
|
|
22125
22204
|
--segmented-control-first-border-radius: var(--segmented-control-rounded-value)
|
|
22126
22205
|
var(--segmented-control-rounded-value) 0 0;
|
|
22127
22206
|
--segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
|
|
22128
22207
|
var(--segmented-control-rounded-value);
|
|
22129
22208
|
`;
|
|
22130
|
-
var segmentedControlItemStyles =
|
|
22209
|
+
var segmentedControlItemStyles = css102`
|
|
22131
22210
|
&:first-of-type label {
|
|
22132
22211
|
border-radius: var(--segmented-control-first-border-radius);
|
|
22133
22212
|
}
|
|
@@ -22135,10 +22214,10 @@ var segmentedControlItemStyles = css100`
|
|
|
22135
22214
|
border-radius: var(--segmented-control-last-border-radius);
|
|
22136
22215
|
}
|
|
22137
22216
|
`;
|
|
22138
|
-
var segmentedControlInputStyles =
|
|
22217
|
+
var segmentedControlInputStyles = css102`
|
|
22139
22218
|
${accessibleHidden}
|
|
22140
22219
|
`;
|
|
22141
|
-
var segmentedControlLabelStyles = (checked, disabled2) =>
|
|
22220
|
+
var segmentedControlLabelStyles = (checked, disabled2) => css102`
|
|
22142
22221
|
position: relative;
|
|
22143
22222
|
display: flex;
|
|
22144
22223
|
align-items: center;
|
|
@@ -22205,25 +22284,25 @@ var segmentedControlLabelStyles = (checked, disabled2) => css100`
|
|
|
22205
22284
|
`}
|
|
22206
22285
|
}
|
|
22207
22286
|
`;
|
|
22208
|
-
var segmentedControlLabelIconOnlyStyles =
|
|
22287
|
+
var segmentedControlLabelIconOnlyStyles = css102`
|
|
22209
22288
|
padding-inline: 0.5em;
|
|
22210
22289
|
`;
|
|
22211
|
-
var segmentedControlLabelCheckStyles =
|
|
22290
|
+
var segmentedControlLabelCheckStyles = css102`
|
|
22212
22291
|
opacity: 0.5;
|
|
22213
22292
|
`;
|
|
22214
|
-
var segmentedControlLabelContentStyles =
|
|
22293
|
+
var segmentedControlLabelContentStyles = css102`
|
|
22215
22294
|
display: flex;
|
|
22216
22295
|
align-items: center;
|
|
22217
22296
|
justify-content: center;
|
|
22218
22297
|
gap: var(--spacing-sm);
|
|
22219
22298
|
height: 100%;
|
|
22220
22299
|
`;
|
|
22221
|
-
var segmentedControlLabelTextStyles =
|
|
22300
|
+
var segmentedControlLabelTextStyles = css102`
|
|
22222
22301
|
white-space: nowrap;
|
|
22223
22302
|
`;
|
|
22224
22303
|
|
|
22225
22304
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
22226
|
-
import { jsx as
|
|
22305
|
+
import { jsx as jsx137, jsxs as jsxs91 } from "@emotion/react/jsx-runtime";
|
|
22227
22306
|
var SegmentedControl = ({
|
|
22228
22307
|
name,
|
|
22229
22308
|
options,
|
|
@@ -22251,10 +22330,10 @@ var SegmentedControl = ({
|
|
|
22251
22330
|
);
|
|
22252
22331
|
const sizeStyles = useMemo8(() => {
|
|
22253
22332
|
const map = {
|
|
22254
|
-
sm:
|
|
22255
|
-
md:
|
|
22256
|
-
lg:
|
|
22257
|
-
xl:
|
|
22333
|
+
sm: css103({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
|
|
22334
|
+
md: css103({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
|
|
22335
|
+
lg: css103({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
|
|
22336
|
+
xl: css103({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
|
|
22258
22337
|
};
|
|
22259
22338
|
return map[size];
|
|
22260
22339
|
}, [size]);
|
|
@@ -22282,8 +22361,8 @@ var SegmentedControl = ({
|
|
|
22282
22361
|
wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
|
|
22283
22362
|
};
|
|
22284
22363
|
}, []);
|
|
22285
|
-
return /* @__PURE__ */
|
|
22286
|
-
/* @__PURE__ */
|
|
22364
|
+
return /* @__PURE__ */ jsxs91("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
|
|
22365
|
+
/* @__PURE__ */ jsx137("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ jsx137(
|
|
22287
22366
|
"div",
|
|
22288
22367
|
{
|
|
22289
22368
|
css: [
|
|
@@ -22299,12 +22378,12 @@ var SegmentedControl = ({
|
|
|
22299
22378
|
}
|
|
22300
22379
|
const text = option.label ? option.label : option.icon ? null : String(option.value);
|
|
22301
22380
|
const isDisabled = disabled2 || option.disabled;
|
|
22302
|
-
return /* @__PURE__ */
|
|
22381
|
+
return /* @__PURE__ */ jsx137(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx137(
|
|
22303
22382
|
"div",
|
|
22304
22383
|
{
|
|
22305
22384
|
css: segmentedControlItemStyles,
|
|
22306
22385
|
"data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
|
|
22307
|
-
children: /* @__PURE__ */
|
|
22386
|
+
children: /* @__PURE__ */ jsxs91(
|
|
22308
22387
|
"label",
|
|
22309
22388
|
{
|
|
22310
22389
|
css: [
|
|
@@ -22313,7 +22392,7 @@ var SegmentedControl = ({
|
|
|
22313
22392
|
isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
|
|
22314
22393
|
],
|
|
22315
22394
|
children: [
|
|
22316
|
-
/* @__PURE__ */
|
|
22395
|
+
/* @__PURE__ */ jsx137(
|
|
22317
22396
|
"input",
|
|
22318
22397
|
{
|
|
22319
22398
|
css: segmentedControlInputStyles,
|
|
@@ -22325,10 +22404,10 @@ var SegmentedControl = ({
|
|
|
22325
22404
|
disabled: isDisabled
|
|
22326
22405
|
}
|
|
22327
22406
|
),
|
|
22328
|
-
option.value !== value || noCheckmark ? null : /* @__PURE__ */
|
|
22329
|
-
/* @__PURE__ */
|
|
22330
|
-
!option.icon ? null : /* @__PURE__ */
|
|
22331
|
-
!text || hideOptionText ? null : /* @__PURE__ */
|
|
22407
|
+
option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx137(CgCheck5, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
|
|
22408
|
+
/* @__PURE__ */ jsxs91("span", { css: segmentedControlLabelContentStyles, children: [
|
|
22409
|
+
!option.icon ? null : /* @__PURE__ */ jsx137(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
|
|
22410
|
+
!text || hideOptionText ? null : /* @__PURE__ */ jsx137("span", { css: segmentedControlLabelTextStyles, children: text })
|
|
22332
22411
|
] })
|
|
22333
22412
|
]
|
|
22334
22413
|
}
|
|
@@ -22338,7 +22417,7 @@ var SegmentedControl = ({
|
|
|
22338
22417
|
})
|
|
22339
22418
|
}
|
|
22340
22419
|
) }),
|
|
22341
|
-
/* @__PURE__ */
|
|
22420
|
+
/* @__PURE__ */ jsx137(
|
|
22342
22421
|
"div",
|
|
22343
22422
|
{
|
|
22344
22423
|
css: [
|
|
@@ -22352,18 +22431,18 @@ var SegmentedControl = ({
|
|
|
22352
22431
|
};
|
|
22353
22432
|
|
|
22354
22433
|
// src/components/Skeleton/Skeleton.styles.ts
|
|
22355
|
-
import { css as
|
|
22434
|
+
import { css as css104, keyframes as keyframes5 } from "@emotion/react";
|
|
22356
22435
|
var lightFadingOut = keyframes5`
|
|
22357
22436
|
from { opacity: 0.1; }
|
|
22358
22437
|
to { opacity: 0.025; }
|
|
22359
22438
|
`;
|
|
22360
|
-
var skeletonStyles =
|
|
22439
|
+
var skeletonStyles = css104`
|
|
22361
22440
|
animation: ${lightFadingOut} 1s ease-out infinite alternate;
|
|
22362
22441
|
background-color: var(--gray-900);
|
|
22363
22442
|
`;
|
|
22364
22443
|
|
|
22365
22444
|
// src/components/Skeleton/Skeleton.tsx
|
|
22366
|
-
import { jsx as
|
|
22445
|
+
import { jsx as jsx138 } from "@emotion/react/jsx-runtime";
|
|
22367
22446
|
var Skeleton = ({
|
|
22368
22447
|
width = "100%",
|
|
22369
22448
|
height = "1.25rem",
|
|
@@ -22371,7 +22450,7 @@ var Skeleton = ({
|
|
|
22371
22450
|
circle = false,
|
|
22372
22451
|
children,
|
|
22373
22452
|
...otherProps
|
|
22374
|
-
}) => /* @__PURE__ */
|
|
22453
|
+
}) => /* @__PURE__ */ jsx138(
|
|
22375
22454
|
"div",
|
|
22376
22455
|
{
|
|
22377
22456
|
css: [
|
|
@@ -22394,8 +22473,8 @@ var Skeleton = ({
|
|
|
22394
22473
|
import { forwardRef as forwardRef25 } from "react";
|
|
22395
22474
|
|
|
22396
22475
|
// src/components/Switch/Switch.styles.ts
|
|
22397
|
-
import { css as
|
|
22398
|
-
var SwitchInputContainer =
|
|
22476
|
+
import { css as css105 } from "@emotion/react";
|
|
22477
|
+
var SwitchInputContainer = css105`
|
|
22399
22478
|
cursor: pointer;
|
|
22400
22479
|
display: inline-block;
|
|
22401
22480
|
position: relative;
|
|
@@ -22404,7 +22483,7 @@ var SwitchInputContainer = css103`
|
|
|
22404
22483
|
vertical-align: middle;
|
|
22405
22484
|
user-select: none;
|
|
22406
22485
|
`;
|
|
22407
|
-
var SwitchInput = (size) =>
|
|
22486
|
+
var SwitchInput = (size) => css105`
|
|
22408
22487
|
appearance: none;
|
|
22409
22488
|
border-radius: var(--rounded-full);
|
|
22410
22489
|
background-color: var(--white);
|
|
@@ -22443,7 +22522,7 @@ var SwitchInput = (size) => css103`
|
|
|
22443
22522
|
cursor: not-allowed;
|
|
22444
22523
|
}
|
|
22445
22524
|
`;
|
|
22446
|
-
var SwitchInputDisabled =
|
|
22525
|
+
var SwitchInputDisabled = css105`
|
|
22447
22526
|
opacity: var(--opacity-50);
|
|
22448
22527
|
cursor: not-allowed;
|
|
22449
22528
|
|
|
@@ -22451,7 +22530,7 @@ var SwitchInputDisabled = css103`
|
|
|
22451
22530
|
cursor: not-allowed;
|
|
22452
22531
|
}
|
|
22453
22532
|
`;
|
|
22454
|
-
var SwitchInputLabel = (size) =>
|
|
22533
|
+
var SwitchInputLabel = (size) => css105`
|
|
22455
22534
|
align-items: center;
|
|
22456
22535
|
color: var(--typography-base);
|
|
22457
22536
|
display: inline-flex;
|
|
@@ -22473,32 +22552,32 @@ var SwitchInputLabel = (size) => css103`
|
|
|
22473
22552
|
top: 0;
|
|
22474
22553
|
}
|
|
22475
22554
|
`;
|
|
22476
|
-
var SwitchText = (size) =>
|
|
22555
|
+
var SwitchText = (size) => css105`
|
|
22477
22556
|
color: var(--gray-500);
|
|
22478
22557
|
font-size: var(--fs-sm);
|
|
22479
22558
|
padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
|
|
22480
22559
|
`;
|
|
22481
22560
|
|
|
22482
22561
|
// src/components/Switch/Switch.tsx
|
|
22483
|
-
import { Fragment as Fragment21, jsx as
|
|
22562
|
+
import { Fragment as Fragment21, jsx as jsx139, jsxs as jsxs92 } from "@emotion/react/jsx-runtime";
|
|
22484
22563
|
var Switch = forwardRef25(
|
|
22485
22564
|
({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
|
|
22486
22565
|
let additionalText = infoText;
|
|
22487
22566
|
if (infoText && toggleText) {
|
|
22488
22567
|
additionalText = inputProps.checked ? toggleText : infoText;
|
|
22489
22568
|
}
|
|
22490
|
-
return /* @__PURE__ */
|
|
22491
|
-
/* @__PURE__ */
|
|
22569
|
+
return /* @__PURE__ */ jsxs92(Fragment21, { children: [
|
|
22570
|
+
/* @__PURE__ */ jsxs92(
|
|
22492
22571
|
"label",
|
|
22493
22572
|
{
|
|
22494
22573
|
css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0],
|
|
22495
22574
|
children: [
|
|
22496
|
-
/* @__PURE__ */
|
|
22497
|
-
/* @__PURE__ */
|
|
22575
|
+
/* @__PURE__ */ jsx139("input", { type: "checkbox", css: SwitchInput(switchSize), ...inputProps, ref }),
|
|
22576
|
+
/* @__PURE__ */ jsx139("span", { css: SwitchInputLabel(switchSize), children: label })
|
|
22498
22577
|
]
|
|
22499
22578
|
}
|
|
22500
22579
|
),
|
|
22501
|
-
additionalText ? /* @__PURE__ */
|
|
22580
|
+
additionalText ? /* @__PURE__ */ jsx139("p", { css: SwitchText(switchSize), children: additionalText }) : null,
|
|
22502
22581
|
children
|
|
22503
22582
|
] });
|
|
22504
22583
|
}
|
|
@@ -22508,8 +22587,8 @@ var Switch = forwardRef25(
|
|
|
22508
22587
|
import * as React24 from "react";
|
|
22509
22588
|
|
|
22510
22589
|
// src/components/Table/Table.styles.ts
|
|
22511
|
-
import { css as
|
|
22512
|
-
var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) =>
|
|
22590
|
+
import { css as css106 } from "@emotion/react";
|
|
22591
|
+
var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => css106`
|
|
22513
22592
|
border-bottom: 1px solid var(--gray-400);
|
|
22514
22593
|
border-collapse: collapse;
|
|
22515
22594
|
min-width: 100%;
|
|
@@ -22529,54 +22608,54 @@ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => css104`
|
|
|
22529
22608
|
background-color: var(--gray-50);
|
|
22530
22609
|
}
|
|
22531
22610
|
`;
|
|
22532
|
-
var tableHead =
|
|
22611
|
+
var tableHead = css106`
|
|
22533
22612
|
color: var(--typography-base);
|
|
22534
22613
|
text-align: left;
|
|
22535
22614
|
`;
|
|
22536
|
-
var tableRow =
|
|
22615
|
+
var tableRow = css106`
|
|
22537
22616
|
border-bottom: 1px solid var(--gray-100);
|
|
22538
22617
|
`;
|
|
22539
|
-
var tableCellHead =
|
|
22618
|
+
var tableCellHead = css106`
|
|
22540
22619
|
font-size: var(--fs-sm);
|
|
22541
22620
|
text-transform: uppercase;
|
|
22542
22621
|
font-weight: var(--fw-bold);
|
|
22543
22622
|
`;
|
|
22544
22623
|
|
|
22545
22624
|
// src/components/Table/Table.tsx
|
|
22546
|
-
import { jsx as
|
|
22625
|
+
import { jsx as jsx140 } from "@emotion/react/jsx-runtime";
|
|
22547
22626
|
var Table = React24.forwardRef(
|
|
22548
22627
|
({ children, cellPadding, ...otherProps }, ref) => {
|
|
22549
|
-
return /* @__PURE__ */
|
|
22628
|
+
return /* @__PURE__ */ jsx140("table", { ref, css: table({ cellPadding }), ...otherProps, children });
|
|
22550
22629
|
}
|
|
22551
22630
|
);
|
|
22552
22631
|
var TableHead = React24.forwardRef(
|
|
22553
22632
|
({ children, ...otherProps }, ref) => {
|
|
22554
|
-
return /* @__PURE__ */
|
|
22633
|
+
return /* @__PURE__ */ jsx140("thead", { ref, css: tableHead, ...otherProps, children });
|
|
22555
22634
|
}
|
|
22556
22635
|
);
|
|
22557
22636
|
var TableBody = React24.forwardRef(
|
|
22558
22637
|
({ children, ...otherProps }, ref) => {
|
|
22559
|
-
return /* @__PURE__ */
|
|
22638
|
+
return /* @__PURE__ */ jsx140("tbody", { ref, ...otherProps, children });
|
|
22560
22639
|
}
|
|
22561
22640
|
);
|
|
22562
22641
|
var TableFoot = React24.forwardRef(
|
|
22563
22642
|
({ children, ...otherProps }, ref) => {
|
|
22564
|
-
return /* @__PURE__ */
|
|
22643
|
+
return /* @__PURE__ */ jsx140("tfoot", { ref, ...otherProps, children });
|
|
22565
22644
|
}
|
|
22566
22645
|
);
|
|
22567
22646
|
var TableRow = React24.forwardRef(
|
|
22568
22647
|
({ children, ...otherProps }, ref) => {
|
|
22569
|
-
return /* @__PURE__ */
|
|
22648
|
+
return /* @__PURE__ */ jsx140("tr", { ref, css: tableRow, ...otherProps, children });
|
|
22570
22649
|
}
|
|
22571
22650
|
);
|
|
22572
22651
|
var TableCellHead = React24.forwardRef(
|
|
22573
22652
|
({ children, ...otherProps }, ref) => {
|
|
22574
|
-
return /* @__PURE__ */
|
|
22653
|
+
return /* @__PURE__ */ jsx140("th", { ref, css: tableCellHead, ...otherProps, children });
|
|
22575
22654
|
}
|
|
22576
22655
|
);
|
|
22577
22656
|
var TableCellData = React24.forwardRef(
|
|
22578
22657
|
({ children, ...otherProps }, ref) => {
|
|
22579
|
-
return /* @__PURE__ */
|
|
22658
|
+
return /* @__PURE__ */ jsx140("td", { ref, ...otherProps, children });
|
|
22580
22659
|
}
|
|
22581
22660
|
);
|
|
22582
22661
|
|
|
@@ -22591,8 +22670,8 @@ import {
|
|
|
22591
22670
|
import { useCallback as useCallback13, useEffect as useEffect23, useMemo as useMemo9 } from "react";
|
|
22592
22671
|
|
|
22593
22672
|
// src/components/Tabs/Tabs.styles.ts
|
|
22594
|
-
import { css as
|
|
22595
|
-
var tabButtonStyles =
|
|
22673
|
+
import { css as css107 } from "@emotion/react";
|
|
22674
|
+
var tabButtonStyles = css107`
|
|
22596
22675
|
align-items: center;
|
|
22597
22676
|
border: 0;
|
|
22598
22677
|
height: 2.5rem;
|
|
@@ -22609,14 +22688,14 @@ var tabButtonStyles = css105`
|
|
|
22609
22688
|
box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
|
|
22610
22689
|
}
|
|
22611
22690
|
`;
|
|
22612
|
-
var tabButtonGroupStyles =
|
|
22691
|
+
var tabButtonGroupStyles = css107`
|
|
22613
22692
|
display: flex;
|
|
22614
22693
|
gap: var(--spacing-base);
|
|
22615
22694
|
border-bottom: 1px solid var(--gray-300);
|
|
22616
22695
|
`;
|
|
22617
22696
|
|
|
22618
22697
|
// src/components/Tabs/Tabs.tsx
|
|
22619
|
-
import { jsx as
|
|
22698
|
+
import { jsx as jsx141 } from "@emotion/react/jsx-runtime";
|
|
22620
22699
|
var useCurrentTab = () => {
|
|
22621
22700
|
const context = useAriakitTabStore();
|
|
22622
22701
|
if (!context) {
|
|
@@ -22653,28 +22732,28 @@ var Tabs = ({
|
|
|
22653
22732
|
tab.setSelectedId(selected);
|
|
22654
22733
|
}
|
|
22655
22734
|
}, [selected, tab]);
|
|
22656
|
-
return /* @__PURE__ */
|
|
22735
|
+
return /* @__PURE__ */ jsx141(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
|
|
22657
22736
|
};
|
|
22658
22737
|
var TabButtonGroup = ({ children, ...props }) => {
|
|
22659
|
-
return /* @__PURE__ */
|
|
22738
|
+
return /* @__PURE__ */ jsx141(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
|
|
22660
22739
|
};
|
|
22661
22740
|
var TabButton = ({
|
|
22662
22741
|
children,
|
|
22663
22742
|
id,
|
|
22664
22743
|
...props
|
|
22665
22744
|
}) => {
|
|
22666
|
-
return /* @__PURE__ */
|
|
22745
|
+
return /* @__PURE__ */ jsx141(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
|
|
22667
22746
|
};
|
|
22668
22747
|
var TabContent = ({
|
|
22669
22748
|
children,
|
|
22670
22749
|
...props
|
|
22671
22750
|
}) => {
|
|
22672
|
-
return /* @__PURE__ */
|
|
22751
|
+
return /* @__PURE__ */ jsx141(AriakitTabPanel, { ...props, children });
|
|
22673
22752
|
};
|
|
22674
22753
|
|
|
22675
22754
|
// src/components/Validation/StatusBullet.styles.ts
|
|
22676
|
-
import { css as
|
|
22677
|
-
var StatusBulletContainer =
|
|
22755
|
+
import { css as css108 } from "@emotion/react";
|
|
22756
|
+
var StatusBulletContainer = css108`
|
|
22678
22757
|
align-items: center;
|
|
22679
22758
|
align-self: center;
|
|
22680
22759
|
color: var(--gray-500);
|
|
@@ -22691,33 +22770,33 @@ var StatusBulletContainer = css106`
|
|
|
22691
22770
|
display: block;
|
|
22692
22771
|
}
|
|
22693
22772
|
`;
|
|
22694
|
-
var StatusBulletBase =
|
|
22773
|
+
var StatusBulletBase = css108`
|
|
22695
22774
|
font-size: var(--fs-sm);
|
|
22696
22775
|
&:before {
|
|
22697
22776
|
width: var(--fs-xs);
|
|
22698
22777
|
height: var(--fs-xs);
|
|
22699
22778
|
}
|
|
22700
22779
|
`;
|
|
22701
|
-
var StatusBulletSmall =
|
|
22780
|
+
var StatusBulletSmall = css108`
|
|
22702
22781
|
font-size: var(--fs-xs);
|
|
22703
22782
|
&:before {
|
|
22704
22783
|
width: var(--fs-xxs);
|
|
22705
22784
|
height: var(--fs-xxs);
|
|
22706
22785
|
}
|
|
22707
22786
|
`;
|
|
22708
|
-
var StatusDraft =
|
|
22787
|
+
var StatusDraft = css108`
|
|
22709
22788
|
&:before {
|
|
22710
22789
|
background: var(--white);
|
|
22711
22790
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
22712
22791
|
}
|
|
22713
22792
|
`;
|
|
22714
|
-
var StatusModified =
|
|
22793
|
+
var StatusModified = css108`
|
|
22715
22794
|
&:before {
|
|
22716
22795
|
background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
|
|
22717
22796
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
22718
22797
|
}
|
|
22719
22798
|
`;
|
|
22720
|
-
var StatusError =
|
|
22799
|
+
var StatusError = css108`
|
|
22721
22800
|
color: var(--error);
|
|
22722
22801
|
&:before {
|
|
22723
22802
|
/* TODO: replace this with an svg icon */
|
|
@@ -22730,29 +22809,29 @@ var StatusError = css106`
|
|
|
22730
22809
|
);
|
|
22731
22810
|
}
|
|
22732
22811
|
`;
|
|
22733
|
-
var StatusPublished =
|
|
22812
|
+
var StatusPublished = css108`
|
|
22734
22813
|
&:before {
|
|
22735
22814
|
background: var(--accent-dark);
|
|
22736
22815
|
}
|
|
22737
22816
|
`;
|
|
22738
|
-
var StatusOrphan =
|
|
22817
|
+
var StatusOrphan = css108`
|
|
22739
22818
|
&:before {
|
|
22740
22819
|
background: var(--brand-secondary-5);
|
|
22741
22820
|
}
|
|
22742
22821
|
`;
|
|
22743
|
-
var StatusUnknown =
|
|
22822
|
+
var StatusUnknown = css108`
|
|
22744
22823
|
&:before {
|
|
22745
22824
|
background: var(--gray-800);
|
|
22746
22825
|
}
|
|
22747
22826
|
`;
|
|
22748
|
-
var StatusDeleted =
|
|
22827
|
+
var StatusDeleted = css108`
|
|
22749
22828
|
&:before {
|
|
22750
22829
|
background: var(--error);
|
|
22751
22830
|
}
|
|
22752
22831
|
`;
|
|
22753
22832
|
|
|
22754
22833
|
// src/components/Validation/StatusBullet.tsx
|
|
22755
|
-
import { jsx as
|
|
22834
|
+
import { jsx as jsx142 } from "@emotion/react/jsx-runtime";
|
|
22756
22835
|
var StatusBullet = ({
|
|
22757
22836
|
status,
|
|
22758
22837
|
hideText = false,
|
|
@@ -22772,7 +22851,7 @@ var StatusBullet = ({
|
|
|
22772
22851
|
Deleted: StatusDeleted
|
|
22773
22852
|
};
|
|
22774
22853
|
const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
|
|
22775
|
-
return /* @__PURE__ */
|
|
22854
|
+
return /* @__PURE__ */ jsx142(
|
|
22776
22855
|
"span",
|
|
22777
22856
|
{
|
|
22778
22857
|
role: "status",
|
|
@@ -22882,11 +22961,12 @@ export {
|
|
|
22882
22961
|
ObjectGridItemCoverButton,
|
|
22883
22962
|
ObjectGridItemHeading2 as ObjectGridItemHeading,
|
|
22884
22963
|
ObjectGridItemIconWithTooltip,
|
|
22964
|
+
ObjectGridItemLoadingSkeleton2 as ObjectGridItemLoadingSkeleton,
|
|
22885
22965
|
ObjectItemLoadingSkeleton,
|
|
22886
22966
|
ObjectListItem2 as ObjectListItem,
|
|
22887
22967
|
ObjectListItemContainer2 as ObjectListItemContainer,
|
|
22888
22968
|
ObjectListItemCover2 as ObjectListItemCover,
|
|
22889
|
-
ObjectListItemHeading,
|
|
22969
|
+
ObjectListItemHeading2 as ObjectListItemHeading,
|
|
22890
22970
|
PageHeaderSection,
|
|
22891
22971
|
Pagination,
|
|
22892
22972
|
Paragraph,
|
|
@@ -23030,16 +23110,12 @@ export {
|
|
|
23030
23110
|
supports,
|
|
23031
23111
|
textInput,
|
|
23032
23112
|
toast,
|
|
23033
|
-
uniformAiIcon,
|
|
23034
23113
|
uniformComponentIcon,
|
|
23035
23114
|
uniformComponentPatternIcon,
|
|
23036
23115
|
uniformCompositionPatternIcon,
|
|
23037
|
-
uniformConditionalValuesIcon,
|
|
23038
23116
|
uniformContentTypeIcon,
|
|
23039
23117
|
uniformEntryIcon,
|
|
23040
23118
|
uniformEntryPatternIcon,
|
|
23041
|
-
uniformLocaleDisabledIcon,
|
|
23042
|
-
uniformLocaleIcon,
|
|
23043
23119
|
useBreakpoint,
|
|
23044
23120
|
useCloseCurrentDrawer,
|
|
23045
23121
|
useCurrentDrawer,
|