@uniformdev/design-system 19.173.2-alpha.8 → 19.175.1-alpha.35
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 +556 -429
- package/dist/index.d.mts +33 -5
- package/dist/index.d.ts +33 -5
- package/dist/index.js +626 -491
- package/package.json +4 -4
package/dist/esm/index.js
CHANGED
|
@@ -12289,7 +12289,6 @@ var menuItem = (textTheme, forceActive) => css26`
|
|
|
12289
12289
|
font-weight: var(--fw-regular);
|
|
12290
12290
|
flex-grow: 1;
|
|
12291
12291
|
gap: var(--spacing-xs);
|
|
12292
|
-
cursor: default;
|
|
12293
12292
|
white-space: nowrap;
|
|
12294
12293
|
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
12295
12294
|
${forceActive ? activeMenuItem : ""}
|
|
@@ -15336,6 +15335,7 @@ var input2 = css53`
|
|
|
15336
15335
|
padding: 0;
|
|
15337
15336
|
display: flex;
|
|
15338
15337
|
justify-content: space-between;
|
|
15338
|
+
gap: var(--spacing-xs);
|
|
15339
15339
|
`;
|
|
15340
15340
|
var inputLabel = css53`
|
|
15341
15341
|
flex-grow: 1;
|
|
@@ -15354,9 +15354,9 @@ var trigger = css53`
|
|
|
15354
15354
|
`;
|
|
15355
15355
|
var popover = css53`
|
|
15356
15356
|
padding: var(--spacing-md);
|
|
15357
|
-
max-width:
|
|
15357
|
+
max-width: unset;
|
|
15358
15358
|
container-type: inline-size;
|
|
15359
|
-
width: 100
|
|
15359
|
+
width: clamp(200px, 100%, 540px);
|
|
15360
15360
|
`;
|
|
15361
15361
|
var popoverInnerContent = css53`
|
|
15362
15362
|
display: grid;
|
|
@@ -15375,6 +15375,8 @@ var popoverInnerContent = css53`
|
|
|
15375
15375
|
var calendarSection = css53`
|
|
15376
15376
|
grid-column: 1;
|
|
15377
15377
|
grid-row: 1 / 3;
|
|
15378
|
+
max-width: 240px;
|
|
15379
|
+
margin-inline: auto;
|
|
15378
15380
|
|
|
15379
15381
|
[data-variant='date'] & {
|
|
15380
15382
|
grid-row: 1 / 2;
|
|
@@ -15396,6 +15398,7 @@ var datePart = css53`
|
|
|
15396
15398
|
var datePartButton = css53`
|
|
15397
15399
|
// this allows the button to be as wide as the text
|
|
15398
15400
|
min-width: 0;
|
|
15401
|
+
margin-right: auto;
|
|
15399
15402
|
`;
|
|
15400
15403
|
|
|
15401
15404
|
// src/components/DateTimePicker/DateTimePickerSummary.tsx
|
|
@@ -15544,10 +15547,12 @@ var DateTimePicker = ({
|
|
|
15544
15547
|
warningMessage,
|
|
15545
15548
|
disabled: disabled2,
|
|
15546
15549
|
onChange,
|
|
15547
|
-
testId,
|
|
15550
|
+
testId = "datetime-picker",
|
|
15551
|
+
placement = "bottom-start",
|
|
15552
|
+
offset,
|
|
15548
15553
|
...props
|
|
15549
15554
|
}) => {
|
|
15550
|
-
const popover2 = usePopoverState({ placement:
|
|
15555
|
+
const popover2 = usePopoverState({ placement, unstable_offset: offset });
|
|
15551
15556
|
const parsedValue = useMemo(() => tryParseAbsolute(value == null ? void 0 : value.datetime, value == null ? void 0 : value.timeZone), [value]);
|
|
15552
15557
|
const parsedMinVisible = useMemo(
|
|
15553
15558
|
() => tryParseAbsoluteToDateString(minVisible, value == null ? void 0 : value.timeZone),
|
|
@@ -15718,21 +15723,17 @@ import { css as css54 } from "@emotion/react";
|
|
|
15718
15723
|
var descriptionListHorizontal = css54`
|
|
15719
15724
|
display: grid;
|
|
15720
15725
|
grid-template-columns: max-content auto;
|
|
15721
|
-
gap: var(--spacing-
|
|
15726
|
+
gap: var(--spacing-sm) var(--spacing-md);
|
|
15722
15727
|
`;
|
|
15723
15728
|
var descriptionListVertical = css54`
|
|
15724
15729
|
display: flex;
|
|
15725
15730
|
flex-direction: column;
|
|
15726
|
-
gap: var(--spacing-
|
|
15731
|
+
gap: var(--spacing-sm);
|
|
15727
15732
|
`;
|
|
15728
15733
|
var descriptionListLabelStyles = css54`
|
|
15729
15734
|
display: flex;
|
|
15730
15735
|
align-items: center;
|
|
15731
15736
|
color: var(--gray-500);
|
|
15732
|
-
|
|
15733
|
-
dd + & {
|
|
15734
|
-
margin-top: var(--spacing-sm);
|
|
15735
|
-
}
|
|
15736
15737
|
`;
|
|
15737
15738
|
var descriptionListValueStyles = css54`
|
|
15738
15739
|
display: flex;
|
|
@@ -15787,7 +15788,10 @@ var detailsContent = css55`
|
|
|
15787
15788
|
position: relative;
|
|
15788
15789
|
animation: ${fadeInRtl} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
15789
15790
|
will-change: height;
|
|
15790
|
-
|
|
15791
|
+
|
|
15792
|
+
&:focus-within {
|
|
15793
|
+
z-index: 1;
|
|
15794
|
+
}
|
|
15791
15795
|
`;
|
|
15792
15796
|
var detailsContentIndented = css55`
|
|
15793
15797
|
margin-left: calc(1.25rem / 2);
|
|
@@ -15884,7 +15888,6 @@ var DragHandleStyles = css56`
|
|
|
15884
15888
|
background: transparent;
|
|
15885
15889
|
border: 0;
|
|
15886
15890
|
position: relative;
|
|
15887
|
-
height: 3.125rem;
|
|
15888
15891
|
width: 1rem;
|
|
15889
15892
|
cursor: grab;
|
|
15890
15893
|
|
|
@@ -15910,13 +15913,13 @@ var DragHandleDisabled = css56`
|
|
|
15910
15913
|
// src/components/DragHandle/DragHandle.tsx
|
|
15911
15914
|
import { jsx as jsx69 } from "@emotion/react/jsx-runtime";
|
|
15912
15915
|
var DragHandle = forwardRef14(
|
|
15913
|
-
({ disableDnd, ...props }, ref) => {
|
|
15916
|
+
({ disableDnd, height = "3.125rem", ...props }, ref) => {
|
|
15914
15917
|
return /* @__PURE__ */ jsx69(
|
|
15915
15918
|
"button",
|
|
15916
15919
|
{
|
|
15917
15920
|
type: "button",
|
|
15918
15921
|
ref,
|
|
15919
|
-
css: [DragHandleStyles, disableDnd ? DragHandleDisabled : null],
|
|
15922
|
+
css: [DragHandleStyles, disableDnd ? DragHandleDisabled : null, { height }],
|
|
15920
15923
|
disabled: disableDnd,
|
|
15921
15924
|
...props
|
|
15922
15925
|
}
|
|
@@ -18893,42 +18896,129 @@ var ObjectGridItemIconWithTooltip = ({
|
|
|
18893
18896
|
return /* @__PURE__ */ jsx107(Tooltip, { title: tooltipTitle, placement, children: /* @__PURE__ */ jsx107("span", { children: /* @__PURE__ */ jsx107(Icon, { icon, iconColor, size: "1rem" }) }) });
|
|
18894
18897
|
};
|
|
18895
18898
|
|
|
18896
|
-
// src/components/Objects/styles/
|
|
18899
|
+
// src/components/Objects/styles/ObjectGridItemLoadingSkeleton.styles.ts
|
|
18897
18900
|
import { css as css84 } from "@emotion/react";
|
|
18898
|
-
var
|
|
18899
|
-
|
|
18901
|
+
var ObjectGridItemLoadingSkeleton = css84`
|
|
18902
|
+
border-radius: var(--rounded-base);
|
|
18900
18903
|
display: flex;
|
|
18904
|
+
flex-direction: column;
|
|
18901
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`
|
|
18902
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);
|
|
18903
18975
|
padding: var(--spacing-sm);
|
|
18904
18976
|
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
18977
|
+
container-type: inline-size;
|
|
18978
|
+
grid-template-columns: auto 1fr auto;
|
|
18905
18979
|
|
|
18906
18980
|
&:hover {
|
|
18907
18981
|
background: var(--gray-50);
|
|
18908
18982
|
}
|
|
18909
18983
|
`;
|
|
18910
|
-
var ObjectListItemSingle =
|
|
18984
|
+
var ObjectListItemSingle = css85`
|
|
18911
18985
|
align-items: center;
|
|
18912
18986
|
`;
|
|
18913
|
-
var ObjectListItemContentWrapper =
|
|
18987
|
+
var ObjectListItemContentWrapper = css85`
|
|
18988
|
+
display: grid;
|
|
18989
|
+
gap: var(--spacing-sm);
|
|
18990
|
+
justify-content: space-between;
|
|
18914
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);
|
|
18915
19000
|
`;
|
|
18916
|
-
var ObjectListItemContainer =
|
|
19001
|
+
var ObjectListItemContainer = css85`
|
|
18917
19002
|
> [role='listitem'] {
|
|
18918
19003
|
border-top: 1px solid var(--gray-200);
|
|
18919
19004
|
}
|
|
18920
19005
|
`;
|
|
18921
|
-
var ObjectListItemCover =
|
|
18922
|
-
|
|
18923
|
-
|
|
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`
|
|
18924
19017
|
object-fit: cover;
|
|
18925
|
-
|
|
18926
|
-
|
|
18927
|
-
background: var(--gray-200);
|
|
18928
|
-
height: 45px;
|
|
18929
|
-
}
|
|
19018
|
+
width: 100%;
|
|
19019
|
+
height: 100%;
|
|
18930
19020
|
`;
|
|
18931
|
-
var ObjectListItemLoading =
|
|
19021
|
+
var ObjectListItemLoading = css85`
|
|
18932
19022
|
animation: ${skeletonLoading} 1s linear infinite alternate;
|
|
18933
19023
|
background: var(--white);
|
|
18934
19024
|
display: flex;
|
|
@@ -18936,15 +19026,18 @@ var ObjectListItemLoading = css84`
|
|
|
18936
19026
|
flex-grow: 1;
|
|
18937
19027
|
padding: var(--spacing-sm);
|
|
18938
19028
|
`;
|
|
18939
|
-
var
|
|
19029
|
+
var ObjectListItemLoadingInner = css85`
|
|
19030
|
+
flex-grow: 1;
|
|
19031
|
+
`;
|
|
19032
|
+
var ObjectListItemLoadingText = (textLength) => css85`
|
|
18940
19033
|
animation: ${fadeIn} 1s linear infinite alternate;
|
|
18941
19034
|
border-radius: var(--rounded-base);
|
|
18942
19035
|
background: var(--gray-300);
|
|
18943
19036
|
display: block;
|
|
18944
|
-
width: ${textLength};
|
|
19037
|
+
width: clamp(10ch, 100%, ${textLength});
|
|
18945
19038
|
height: var(--fs-base);
|
|
18946
19039
|
`;
|
|
18947
|
-
var ObjectListItemLoadingImage =
|
|
19040
|
+
var ObjectListItemLoadingImage = css85`
|
|
18948
19041
|
animation: ${fadeIn} 1s linear infinite alternate;
|
|
18949
19042
|
border-radius: var(--rounded-base);
|
|
18950
19043
|
background: var(--gray-300);
|
|
@@ -18952,30 +19045,42 @@ var ObjectListItemLoadingImage = css84`
|
|
|
18952
19045
|
width: 80px;
|
|
18953
19046
|
height: 55px;
|
|
18954
19047
|
`;
|
|
19048
|
+
var ObjectListItemHeadingWrapper = css85`
|
|
19049
|
+
display: flex;
|
|
19050
|
+
gap: var(--spacing-xs);
|
|
19051
|
+
`;
|
|
18955
19052
|
|
|
18956
19053
|
// src/components/Objects/ObjectItemLoadingSkeleton.tsx
|
|
18957
|
-
import { jsx as
|
|
18958
|
-
var ObjectItemLoadingSkeleton = ({
|
|
18959
|
-
|
|
18960
|
-
|
|
18961
|
-
|
|
18962
|
-
|
|
18963
|
-
|
|
18964
|
-
|
|
18965
|
-
|
|
18966
|
-
|
|
18967
|
-
|
|
18968
|
-
|
|
18969
|
-
|
|
18970
|
-
|
|
18971
|
-
|
|
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
|
+
);
|
|
18972
19077
|
};
|
|
18973
19078
|
|
|
18974
19079
|
// src/components/Objects/ObjectListItem.tsx
|
|
18975
|
-
import { jsx as
|
|
19080
|
+
import { jsx as jsx110, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
|
|
18976
19081
|
var ObjectListItem2 = (props) => {
|
|
18977
|
-
const { renderAs, isSelected, cover, header: header2, rightSlot, menuItems, ...divProps } = props;
|
|
18978
|
-
return /* @__PURE__ */
|
|
19082
|
+
const { renderAs, isSelected, cover, header: header2, rightSlot, menuItems, dragHandle, ...divProps } = props;
|
|
19083
|
+
return /* @__PURE__ */ jsxs74(
|
|
18979
19084
|
"div",
|
|
18980
19085
|
{
|
|
18981
19086
|
role: "listitem",
|
|
@@ -18984,65 +19089,86 @@ var ObjectListItem2 = (props) => {
|
|
|
18984
19089
|
"aria-selected": isSelected,
|
|
18985
19090
|
...divProps,
|
|
18986
19091
|
children: [
|
|
18987
|
-
|
|
18988
|
-
/* @__PURE__ */
|
|
18989
|
-
/* @__PURE__ */
|
|
18990
|
-
|
|
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 }),
|
|
18991
19097
|
renderAs === "multi" ? props.children : null
|
|
18992
19098
|
] }),
|
|
18993
|
-
/* @__PURE__ */
|
|
18994
|
-
|
|
18995
|
-
|
|
18996
|
-
|
|
18997
|
-
|
|
18998
|
-
|
|
18999
|
-
|
|
19000
|
-
|
|
19001
|
-
|
|
19002
|
-
|
|
19003
|
-
] })
|
|
19004
|
-
] })
|
|
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
|
|
19005
19109
|
]
|
|
19006
19110
|
}
|
|
19007
19111
|
);
|
|
19008
19112
|
};
|
|
19009
19113
|
|
|
19010
19114
|
// src/components/Objects/ObjectListItemContainer.tsx
|
|
19011
|
-
import { jsx as
|
|
19012
|
-
var ObjectListItemContainer2 = ({ children, ...props }) => {
|
|
19013
|
-
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 });
|
|
19014
19118
|
};
|
|
19015
19119
|
|
|
19016
19120
|
// src/components/Objects/ObjectListItemCover.tsx
|
|
19017
|
-
import { jsx as
|
|
19018
|
-
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
|
+
}) => {
|
|
19019
19127
|
if (!imageUrl) {
|
|
19020
|
-
return /* @__PURE__ */
|
|
19128
|
+
return /* @__PURE__ */ jsx112("div", { css: ObjectListItemCover, role: "presentation", "data-testid": "object-list-item-thumbnail", children: noImageText });
|
|
19021
19129
|
}
|
|
19022
|
-
return /* @__PURE__ */
|
|
19130
|
+
return /* @__PURE__ */ jsx112("div", { css: ObjectListItemCover, children: /* @__PURE__ */ jsx112(
|
|
19023
19131
|
"img",
|
|
19024
19132
|
{
|
|
19025
|
-
css: ObjectListItemCover,
|
|
19026
19133
|
src: imageUrl,
|
|
19134
|
+
css: ObjectListItemImage,
|
|
19027
19135
|
loading: "lazy",
|
|
19028
19136
|
"data-testid": "object-list-item-thumbnail",
|
|
19029
19137
|
...props
|
|
19030
19138
|
}
|
|
19031
|
-
);
|
|
19139
|
+
) });
|
|
19032
19140
|
};
|
|
19033
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
|
+
|
|
19034
19158
|
// src/components/Objects/ObjectListItemHeading.tsx
|
|
19035
|
-
import { jsx as
|
|
19036
|
-
var
|
|
19159
|
+
import { jsx as jsx113, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
|
|
19160
|
+
var ObjectListItemHeading2 = ({
|
|
19037
19161
|
heading,
|
|
19038
19162
|
beforeHeadingSlot,
|
|
19039
19163
|
afterHeadingSlot,
|
|
19040
19164
|
...props
|
|
19041
19165
|
}) => {
|
|
19042
|
-
return /* @__PURE__ */
|
|
19043
|
-
beforeHeadingSlot,
|
|
19044
|
-
/* @__PURE__ */
|
|
19045
|
-
|
|
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
|
+
] })
|
|
19046
19172
|
] });
|
|
19047
19173
|
};
|
|
19048
19174
|
|
|
@@ -19050,35 +19176,35 @@ var ObjectListItemHeading = ({
|
|
|
19050
19176
|
import Paginate from "react-paginate";
|
|
19051
19177
|
|
|
19052
19178
|
// src/components/Pagination/Pagniation.styles.ts
|
|
19053
|
-
import { css as
|
|
19054
|
-
var container2 =
|
|
19179
|
+
import { css as css87 } from "@emotion/css";
|
|
19180
|
+
var container2 = css87`
|
|
19055
19181
|
align-items: center;
|
|
19056
19182
|
display: flex;
|
|
19057
19183
|
`;
|
|
19058
|
-
var disabled =
|
|
19184
|
+
var disabled = css87`
|
|
19059
19185
|
opacity: var(--opacity-50);
|
|
19060
19186
|
`;
|
|
19061
|
-
var disabledLink =
|
|
19187
|
+
var disabledLink = css87`
|
|
19062
19188
|
cursor: pointer-default;
|
|
19063
19189
|
`;
|
|
19064
|
-
var pageLink =
|
|
19190
|
+
var pageLink = css87`
|
|
19065
19191
|
display: block;
|
|
19066
19192
|
padding: var(--spacing-sm) var(--spacing-base);
|
|
19067
19193
|
`;
|
|
19068
|
-
var prevNextControls =
|
|
19194
|
+
var prevNextControls = css87`
|
|
19069
19195
|
padding: var(--spacing-sm) var(--spacing-base);
|
|
19070
19196
|
`;
|
|
19071
|
-
var active =
|
|
19197
|
+
var active = css87`
|
|
19072
19198
|
border-radius: var(--rounded-base);
|
|
19073
19199
|
background: var(--gray-200);
|
|
19074
19200
|
`;
|
|
19075
|
-
var page =
|
|
19201
|
+
var page = css87`
|
|
19076
19202
|
margin-left: var(--spacing-xs);
|
|
19077
19203
|
margin-right: var(--spacing-xs);
|
|
19078
19204
|
`;
|
|
19079
19205
|
|
|
19080
19206
|
// src/components/Pagination/Pagination.tsx
|
|
19081
|
-
import { jsx as
|
|
19207
|
+
import { jsx as jsx114 } from "@emotion/react/jsx-runtime";
|
|
19082
19208
|
function Pagination({
|
|
19083
19209
|
limit,
|
|
19084
19210
|
offset,
|
|
@@ -19093,12 +19219,12 @@ function Pagination({
|
|
|
19093
19219
|
if (pageCount <= 1) {
|
|
19094
19220
|
return null;
|
|
19095
19221
|
}
|
|
19096
|
-
return /* @__PURE__ */
|
|
19222
|
+
return /* @__PURE__ */ jsx114(
|
|
19097
19223
|
Paginate,
|
|
19098
19224
|
{
|
|
19099
19225
|
forcePage: currentPage,
|
|
19100
|
-
previousLabel: /* @__PURE__ */
|
|
19101
|
-
nextLabel: /* @__PURE__ */
|
|
19226
|
+
previousLabel: /* @__PURE__ */ jsx114("div", { className: prevNextControls, children: "<" }),
|
|
19227
|
+
nextLabel: /* @__PURE__ */ jsx114("div", { className: prevNextControls, children: ">" }),
|
|
19102
19228
|
breakLabel: "...",
|
|
19103
19229
|
pageCount,
|
|
19104
19230
|
marginPagesDisplayed: 2,
|
|
@@ -19138,8 +19264,8 @@ var useParameterShell = () => {
|
|
|
19138
19264
|
};
|
|
19139
19265
|
|
|
19140
19266
|
// src/components/ParameterInputs/styles/LabelLeadingIcon.styles.ts
|
|
19141
|
-
import { css as
|
|
19142
|
-
var inputIconBtn =
|
|
19267
|
+
import { css as css88 } from "@emotion/react";
|
|
19268
|
+
var inputIconBtn = css88`
|
|
19143
19269
|
align-items: center;
|
|
19144
19270
|
border: none;
|
|
19145
19271
|
border-radius: var(--rounded-base);
|
|
@@ -19165,7 +19291,7 @@ var inputIconBtn = css86`
|
|
|
19165
19291
|
`;
|
|
19166
19292
|
|
|
19167
19293
|
// src/components/ParameterInputs/LabelLeadingIcon.tsx
|
|
19168
|
-
import { jsx as
|
|
19294
|
+
import { jsx as jsx115, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
|
|
19169
19295
|
var LabelLeadingIcon = ({
|
|
19170
19296
|
icon,
|
|
19171
19297
|
iconColor,
|
|
@@ -19177,7 +19303,7 @@ var LabelLeadingIcon = ({
|
|
|
19177
19303
|
...props
|
|
19178
19304
|
}) => {
|
|
19179
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";
|
|
19180
|
-
return /* @__PURE__ */
|
|
19306
|
+
return /* @__PURE__ */ jsx115(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs76(
|
|
19181
19307
|
"button",
|
|
19182
19308
|
{
|
|
19183
19309
|
css: inputIconBtn,
|
|
@@ -19187,7 +19313,7 @@ var LabelLeadingIcon = ({
|
|
|
19187
19313
|
...props,
|
|
19188
19314
|
"data-testid": "lock-button",
|
|
19189
19315
|
children: [
|
|
19190
|
-
/* @__PURE__ */
|
|
19316
|
+
/* @__PURE__ */ jsx115(
|
|
19191
19317
|
Icon,
|
|
19192
19318
|
{
|
|
19193
19319
|
icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
|
|
@@ -19203,8 +19329,8 @@ var LabelLeadingIcon = ({
|
|
|
19203
19329
|
var ConnectToDataElementButton = LabelLeadingIcon;
|
|
19204
19330
|
|
|
19205
19331
|
// src/components/ParameterInputs/styles/ParameterInput.styles.ts
|
|
19206
|
-
import { css as
|
|
19207
|
-
var inputContainer2 =
|
|
19332
|
+
import { css as css89 } from "@emotion/react";
|
|
19333
|
+
var inputContainer2 = css89`
|
|
19208
19334
|
position: relative;
|
|
19209
19335
|
scroll-margin: var(--spacing-2xl);
|
|
19210
19336
|
|
|
@@ -19217,14 +19343,14 @@ var inputContainer2 = css87`
|
|
|
19217
19343
|
}
|
|
19218
19344
|
}
|
|
19219
19345
|
`;
|
|
19220
|
-
var labelText2 =
|
|
19346
|
+
var labelText2 = css89`
|
|
19221
19347
|
align-items: center;
|
|
19222
19348
|
display: flex;
|
|
19223
19349
|
gap: var(--spacing-xs);
|
|
19224
19350
|
font-weight: var(--fw-regular);
|
|
19225
19351
|
margin: 0 0 var(--spacing-xs);
|
|
19226
19352
|
`;
|
|
19227
|
-
var input3 =
|
|
19353
|
+
var input3 = css89`
|
|
19228
19354
|
display: block;
|
|
19229
19355
|
appearance: none;
|
|
19230
19356
|
box-sizing: border-box;
|
|
@@ -19272,18 +19398,18 @@ var input3 = css87`
|
|
|
19272
19398
|
color: var(--gray-400);
|
|
19273
19399
|
}
|
|
19274
19400
|
`;
|
|
19275
|
-
var selectInput =
|
|
19401
|
+
var selectInput = css89`
|
|
19276
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");
|
|
19277
19403
|
background-position: right var(--spacing-sm) center;
|
|
19278
19404
|
background-repeat: no-repeat;
|
|
19279
19405
|
background-size: 1rem;
|
|
19280
19406
|
padding-right: var(--spacing-xl);
|
|
19281
19407
|
`;
|
|
19282
|
-
var inputWrapper =
|
|
19408
|
+
var inputWrapper = css89`
|
|
19283
19409
|
display: flex; // used to correct overflow with chrome textarea
|
|
19284
19410
|
position: relative;
|
|
19285
19411
|
`;
|
|
19286
|
-
var inputIcon2 =
|
|
19412
|
+
var inputIcon2 = css89`
|
|
19287
19413
|
align-items: center;
|
|
19288
19414
|
background: var(--white);
|
|
19289
19415
|
border-radius: var(--rounded-md) 0 0 var(--rounded-md);
|
|
@@ -19299,7 +19425,7 @@ var inputIcon2 = css87`
|
|
|
19299
19425
|
width: var(--spacing-lg);
|
|
19300
19426
|
z-index: var(--z-10);
|
|
19301
19427
|
`;
|
|
19302
|
-
var inputToggleLabel2 =
|
|
19428
|
+
var inputToggleLabel2 = css89`
|
|
19303
19429
|
--inline-label-color: var(--typography-base);
|
|
19304
19430
|
align-items: center;
|
|
19305
19431
|
cursor: pointer;
|
|
@@ -19314,7 +19440,7 @@ var inputToggleLabel2 = css87`
|
|
|
19314
19440
|
--inline-label-color: var(--gray-400);
|
|
19315
19441
|
}
|
|
19316
19442
|
`;
|
|
19317
|
-
var toggleInput2 =
|
|
19443
|
+
var toggleInput2 = css89`
|
|
19318
19444
|
appearance: none;
|
|
19319
19445
|
border: 1px solid var(--gray-200);
|
|
19320
19446
|
background: var(--white);
|
|
@@ -19367,7 +19493,7 @@ var toggleInput2 = css87`
|
|
|
19367
19493
|
border-color: var(--gray-300);
|
|
19368
19494
|
}
|
|
19369
19495
|
`;
|
|
19370
|
-
var inlineLabel2 =
|
|
19496
|
+
var inlineLabel2 = css89`
|
|
19371
19497
|
color: var(--inline-label-color);
|
|
19372
19498
|
padding-left: var(--spacing-md);
|
|
19373
19499
|
font-size: var(--fs-sm);
|
|
@@ -19384,7 +19510,7 @@ var inlineLabel2 = css87`
|
|
|
19384
19510
|
}
|
|
19385
19511
|
}
|
|
19386
19512
|
`;
|
|
19387
|
-
var inputMenu =
|
|
19513
|
+
var inputMenu = css89`
|
|
19388
19514
|
background: none;
|
|
19389
19515
|
border: none;
|
|
19390
19516
|
padding: var(--spacing-2xs);
|
|
@@ -19392,10 +19518,10 @@ var inputMenu = css87`
|
|
|
19392
19518
|
top: calc(var(--spacing-md) * -1.2);
|
|
19393
19519
|
right: 0;
|
|
19394
19520
|
`;
|
|
19395
|
-
var inputActionItems =
|
|
19521
|
+
var inputActionItems = css89`
|
|
19396
19522
|
display: flex;
|
|
19397
19523
|
`;
|
|
19398
|
-
var inputMenuHover =
|
|
19524
|
+
var inputMenuHover = css89`
|
|
19399
19525
|
opacity: var(--opacity-50);
|
|
19400
19526
|
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
19401
19527
|
|
|
@@ -19405,11 +19531,11 @@ var inputMenuHover = css87`
|
|
|
19405
19531
|
background-color: var(--gray-200);
|
|
19406
19532
|
}
|
|
19407
19533
|
`;
|
|
19408
|
-
var textarea2 =
|
|
19534
|
+
var textarea2 = css89`
|
|
19409
19535
|
resize: vertical;
|
|
19410
19536
|
min-height: 2rem;
|
|
19411
19537
|
`;
|
|
19412
|
-
var dataConnectButton =
|
|
19538
|
+
var dataConnectButton = css89`
|
|
19413
19539
|
align-items: center;
|
|
19414
19540
|
appearance: none;
|
|
19415
19541
|
box-sizing: border-box;
|
|
@@ -19444,7 +19570,7 @@ var dataConnectButton = css87`
|
|
|
19444
19570
|
pointer-events: none;
|
|
19445
19571
|
}
|
|
19446
19572
|
`;
|
|
19447
|
-
var linkParameterBtn =
|
|
19573
|
+
var linkParameterBtn = css89`
|
|
19448
19574
|
border-radius: var(--rounded-base);
|
|
19449
19575
|
background: transparent;
|
|
19450
19576
|
border: none;
|
|
@@ -19453,7 +19579,7 @@ var linkParameterBtn = css87`
|
|
|
19453
19579
|
font-size: var(--fs-sm);
|
|
19454
19580
|
line-height: 1;
|
|
19455
19581
|
`;
|
|
19456
|
-
var linkParameterControls =
|
|
19582
|
+
var linkParameterControls = css89`
|
|
19457
19583
|
position: absolute;
|
|
19458
19584
|
inset: 0 0 0 auto;
|
|
19459
19585
|
padding: 0 var(--spacing-base);
|
|
@@ -19462,7 +19588,7 @@ var linkParameterControls = css87`
|
|
|
19462
19588
|
justify-content: center;
|
|
19463
19589
|
gap: var(--spacing-base);
|
|
19464
19590
|
`;
|
|
19465
|
-
var linkParameterInput = (withExternalLinkIcon) =>
|
|
19591
|
+
var linkParameterInput = (withExternalLinkIcon) => css89`
|
|
19466
19592
|
padding-right: calc(
|
|
19467
19593
|
${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
|
|
19468
19594
|
var(--spacing-base)
|
|
@@ -19475,7 +19601,7 @@ var linkParameterInput = (withExternalLinkIcon) => css87`
|
|
|
19475
19601
|
}
|
|
19476
19602
|
}
|
|
19477
19603
|
`;
|
|
19478
|
-
var linkParameterIcon =
|
|
19604
|
+
var linkParameterIcon = css89`
|
|
19479
19605
|
align-items: center;
|
|
19480
19606
|
color: var(--brand-secondary-3);
|
|
19481
19607
|
display: flex;
|
|
@@ -19490,7 +19616,7 @@ var linkParameterIcon = css87`
|
|
|
19490
19616
|
`;
|
|
19491
19617
|
|
|
19492
19618
|
// src/components/ParameterInputs/ParameterDataResource.tsx
|
|
19493
|
-
import { jsx as
|
|
19619
|
+
import { jsx as jsx116, jsxs as jsxs77 } from "@emotion/react/jsx-runtime";
|
|
19494
19620
|
function ParameterDataResource({
|
|
19495
19621
|
label,
|
|
19496
19622
|
labelLeadingIcon,
|
|
@@ -19500,12 +19626,12 @@ function ParameterDataResource({
|
|
|
19500
19626
|
disabled: disabled2,
|
|
19501
19627
|
children
|
|
19502
19628
|
}) {
|
|
19503
|
-
return /* @__PURE__ */
|
|
19504
|
-
/* @__PURE__ */
|
|
19629
|
+
return /* @__PURE__ */ jsxs77("div", { "data-testid": "parameter-data-connect-button", children: [
|
|
19630
|
+
/* @__PURE__ */ jsxs77("span", { css: labelText2, children: [
|
|
19505
19631
|
labelLeadingIcon ? labelLeadingIcon : null,
|
|
19506
19632
|
label
|
|
19507
19633
|
] }),
|
|
19508
|
-
/* @__PURE__ */
|
|
19634
|
+
/* @__PURE__ */ jsxs77(
|
|
19509
19635
|
"button",
|
|
19510
19636
|
{
|
|
19511
19637
|
type: "button",
|
|
@@ -19514,30 +19640,30 @@ function ParameterDataResource({
|
|
|
19514
19640
|
disabled: disabled2,
|
|
19515
19641
|
onClick: onConnectDatasource,
|
|
19516
19642
|
children: [
|
|
19517
|
-
/* @__PURE__ */
|
|
19643
|
+
/* @__PURE__ */ jsx116("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx116(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
|
|
19518
19644
|
children
|
|
19519
19645
|
]
|
|
19520
19646
|
}
|
|
19521
19647
|
),
|
|
19522
|
-
caption ? /* @__PURE__ */
|
|
19648
|
+
caption ? /* @__PURE__ */ jsx116(Caption, { children: caption }) : null
|
|
19523
19649
|
] });
|
|
19524
19650
|
}
|
|
19525
19651
|
|
|
19526
19652
|
// src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
|
|
19527
|
-
import { css as
|
|
19528
|
-
var ParameterDrawerHeaderContainer =
|
|
19653
|
+
import { css as css90 } from "@emotion/react";
|
|
19654
|
+
var ParameterDrawerHeaderContainer = css90`
|
|
19529
19655
|
align-items: center;
|
|
19530
19656
|
display: flex;
|
|
19531
19657
|
gap: var(--spacing-base);
|
|
19532
19658
|
justify-content: space-between;
|
|
19533
19659
|
margin-bottom: var(--spacing-sm);
|
|
19534
19660
|
`;
|
|
19535
|
-
var ParameterDrawerHeaderTitleGroup =
|
|
19661
|
+
var ParameterDrawerHeaderTitleGroup = css90`
|
|
19536
19662
|
align-items: center;
|
|
19537
19663
|
display: flex;
|
|
19538
19664
|
gap: var(--spacing-sm);
|
|
19539
19665
|
`;
|
|
19540
|
-
var ParameterDrawerHeaderTitle =
|
|
19666
|
+
var ParameterDrawerHeaderTitle = css90`
|
|
19541
19667
|
text-overflow: ellipsis;
|
|
19542
19668
|
white-space: nowrap;
|
|
19543
19669
|
overflow: hidden;
|
|
@@ -19545,12 +19671,12 @@ var ParameterDrawerHeaderTitle = css88`
|
|
|
19545
19671
|
`;
|
|
19546
19672
|
|
|
19547
19673
|
// src/components/ParameterInputs/ParameterDrawerHeader.tsx
|
|
19548
|
-
import { jsx as
|
|
19674
|
+
import { jsx as jsx117, jsxs as jsxs78 } from "@emotion/react/jsx-runtime";
|
|
19549
19675
|
var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
|
|
19550
|
-
return /* @__PURE__ */
|
|
19551
|
-
/* @__PURE__ */
|
|
19676
|
+
return /* @__PURE__ */ jsxs78("div", { css: ParameterDrawerHeaderContainer, children: [
|
|
19677
|
+
/* @__PURE__ */ jsxs78("header", { css: ParameterDrawerHeaderTitleGroup, children: [
|
|
19552
19678
|
iconBeforeTitle,
|
|
19553
|
-
/* @__PURE__ */
|
|
19679
|
+
/* @__PURE__ */ jsx117(Heading2, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
|
|
19554
19680
|
] }),
|
|
19555
19681
|
children
|
|
19556
19682
|
] });
|
|
@@ -19560,8 +19686,8 @@ var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
|
|
|
19560
19686
|
import { forwardRef as forwardRef17 } from "react";
|
|
19561
19687
|
|
|
19562
19688
|
// src/components/ParameterInputs/styles/ParameterGroup.styles.ts
|
|
19563
|
-
import { css as
|
|
19564
|
-
var fieldsetStyles =
|
|
19689
|
+
import { css as css91 } from "@emotion/react";
|
|
19690
|
+
var fieldsetStyles = css91`
|
|
19565
19691
|
&:disabled,
|
|
19566
19692
|
[readonly] {
|
|
19567
19693
|
pointer-events: none;
|
|
@@ -19572,7 +19698,7 @@ var fieldsetStyles = css89`
|
|
|
19572
19698
|
}
|
|
19573
19699
|
}
|
|
19574
19700
|
`;
|
|
19575
|
-
var fieldsetLegend2 =
|
|
19701
|
+
var fieldsetLegend2 = css91`
|
|
19576
19702
|
display: block;
|
|
19577
19703
|
font-weight: var(--fw-medium);
|
|
19578
19704
|
margin-bottom: var(--spacing-sm);
|
|
@@ -19580,11 +19706,11 @@ var fieldsetLegend2 = css89`
|
|
|
19580
19706
|
`;
|
|
19581
19707
|
|
|
19582
19708
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
19583
|
-
import { jsx as
|
|
19709
|
+
import { jsx as jsx118, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
|
|
19584
19710
|
var ParameterGroup = forwardRef17(
|
|
19585
19711
|
({ legend, isDisabled, children, ...props }, ref) => {
|
|
19586
|
-
return /* @__PURE__ */
|
|
19587
|
-
/* @__PURE__ */
|
|
19712
|
+
return /* @__PURE__ */ jsxs79("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
|
|
19713
|
+
/* @__PURE__ */ jsx118("legend", { css: fieldsetLegend2, children: legend }),
|
|
19588
19714
|
children
|
|
19589
19715
|
] });
|
|
19590
19716
|
}
|
|
@@ -19598,15 +19724,15 @@ import { useState as useState14 } from "react";
|
|
|
19598
19724
|
import { createPortal as createPortal2 } from "react-dom";
|
|
19599
19725
|
|
|
19600
19726
|
// src/components/ParameterInputs/styles/ParameterImage.styles.ts
|
|
19601
|
-
import { css as
|
|
19602
|
-
var previewWrapper =
|
|
19727
|
+
import { css as css92 } from "@emotion/react";
|
|
19728
|
+
var previewWrapper = css92`
|
|
19603
19729
|
margin-top: var(--spacing-xs);
|
|
19604
19730
|
background: var(--gray-50);
|
|
19605
19731
|
padding: var(--spacing-sm);
|
|
19606
19732
|
border: solid 1px var(--gray-300);
|
|
19607
19733
|
border-radius: var(--rounded-sm);
|
|
19608
19734
|
`;
|
|
19609
|
-
var previewLink =
|
|
19735
|
+
var previewLink = css92`
|
|
19610
19736
|
display: block;
|
|
19611
19737
|
width: 100%;
|
|
19612
19738
|
|
|
@@ -19614,7 +19740,7 @@ var previewLink = css90`
|
|
|
19614
19740
|
max-height: 9rem;
|
|
19615
19741
|
}
|
|
19616
19742
|
`;
|
|
19617
|
-
var previewModalWrapper =
|
|
19743
|
+
var previewModalWrapper = css92`
|
|
19618
19744
|
background: var(--gray-50);
|
|
19619
19745
|
display: flex;
|
|
19620
19746
|
height: 100%;
|
|
@@ -19623,7 +19749,7 @@ var previewModalWrapper = css90`
|
|
|
19623
19749
|
border: solid 1px var(--gray-300);
|
|
19624
19750
|
border-radius: var(--rounded-sm);
|
|
19625
19751
|
`;
|
|
19626
|
-
var previewModalImage =
|
|
19752
|
+
var previewModalImage = css92`
|
|
19627
19753
|
display: flex;
|
|
19628
19754
|
height: 100%;
|
|
19629
19755
|
width: 100%;
|
|
@@ -19635,32 +19761,32 @@ var previewModalImage = css90`
|
|
|
19635
19761
|
`;
|
|
19636
19762
|
|
|
19637
19763
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
19638
|
-
import { Fragment as Fragment15, jsx as
|
|
19764
|
+
import { Fragment as Fragment15, jsx as jsx119, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
|
|
19639
19765
|
function ParameterImagePreview({ imageSrc }) {
|
|
19640
19766
|
const [showModal, setShowModal] = useState14(false);
|
|
19641
|
-
return imageSrc ? /* @__PURE__ */
|
|
19642
|
-
/* @__PURE__ */
|
|
19643
|
-
/* @__PURE__ */
|
|
19767
|
+
return imageSrc ? /* @__PURE__ */ jsxs80("div", { css: previewWrapper, children: [
|
|
19768
|
+
/* @__PURE__ */ jsx119(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
|
|
19769
|
+
/* @__PURE__ */ jsx119(
|
|
19644
19770
|
"button",
|
|
19645
19771
|
{
|
|
19646
19772
|
css: previewLink,
|
|
19647
19773
|
onClick: () => {
|
|
19648
19774
|
setShowModal(true);
|
|
19649
19775
|
},
|
|
19650
|
-
children: /* @__PURE__ */
|
|
19776
|
+
children: /* @__PURE__ */ jsx119(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
|
|
19651
19777
|
}
|
|
19652
19778
|
)
|
|
19653
19779
|
] }) : null;
|
|
19654
19780
|
}
|
|
19655
19781
|
var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
19656
|
-
return open ? /* @__PURE__ */
|
|
19657
|
-
/* @__PURE__ */
|
|
19782
|
+
return open ? /* @__PURE__ */ jsx119(Fragment15, { children: createPortal2(
|
|
19783
|
+
/* @__PURE__ */ jsx119(
|
|
19658
19784
|
Modal,
|
|
19659
19785
|
{
|
|
19660
19786
|
header: "Image Preview",
|
|
19661
19787
|
onRequestClose,
|
|
19662
|
-
buttonGroup: /* @__PURE__ */
|
|
19663
|
-
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" }) })
|
|
19664
19790
|
}
|
|
19665
19791
|
),
|
|
19666
19792
|
document.body
|
|
@@ -19668,25 +19794,25 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
|
19668
19794
|
};
|
|
19669
19795
|
|
|
19670
19796
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
19671
|
-
import { css as
|
|
19797
|
+
import { css as css94 } from "@emotion/react";
|
|
19672
19798
|
import { useState as useState15 } from "react";
|
|
19673
19799
|
|
|
19674
19800
|
// src/components/ParameterInputs/ParameterLabel.tsx
|
|
19675
|
-
import { jsx as
|
|
19801
|
+
import { jsx as jsx120 } from "@emotion/react/jsx-runtime";
|
|
19676
19802
|
var ParameterLabel = ({ id, asSpan, children, ...props }) => {
|
|
19677
|
-
return !asSpan ? /* @__PURE__ */
|
|
19803
|
+
return !asSpan ? /* @__PURE__ */ jsx120("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx120("span", { "aria-labelledby": id, css: labelText2, children });
|
|
19678
19804
|
};
|
|
19679
19805
|
|
|
19680
19806
|
// src/components/ParameterInputs/ParameterMenuButton.tsx
|
|
19681
19807
|
import { forwardRef as forwardRef18 } from "react";
|
|
19682
|
-
import { jsx as
|
|
19808
|
+
import { jsx as jsx121 } from "@emotion/react/jsx-runtime";
|
|
19683
19809
|
var ParameterMenuButton = forwardRef18(
|
|
19684
19810
|
({ label, children }, ref) => {
|
|
19685
|
-
return /* @__PURE__ */
|
|
19811
|
+
return /* @__PURE__ */ jsx121(
|
|
19686
19812
|
Menu,
|
|
19687
19813
|
{
|
|
19688
19814
|
menuLabel: `${label} menu`,
|
|
19689
|
-
menuTrigger: /* @__PURE__ */
|
|
19815
|
+
menuTrigger: /* @__PURE__ */ jsx121(
|
|
19690
19816
|
"button",
|
|
19691
19817
|
{
|
|
19692
19818
|
className: "parameter-menu",
|
|
@@ -19694,7 +19820,7 @@ var ParameterMenuButton = forwardRef18(
|
|
|
19694
19820
|
type: "button",
|
|
19695
19821
|
"aria-label": `${label} options`,
|
|
19696
19822
|
ref,
|
|
19697
|
-
children: /* @__PURE__ */
|
|
19823
|
+
children: /* @__PURE__ */ jsx121(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
|
|
19698
19824
|
}
|
|
19699
19825
|
),
|
|
19700
19826
|
children
|
|
@@ -19704,14 +19830,14 @@ var ParameterMenuButton = forwardRef18(
|
|
|
19704
19830
|
);
|
|
19705
19831
|
|
|
19706
19832
|
// src/components/ParameterInputs/styles/ParameterShell.styles.ts
|
|
19707
|
-
import { css as
|
|
19708
|
-
var emptyParameterShell =
|
|
19833
|
+
import { css as css93 } from "@emotion/react";
|
|
19834
|
+
var emptyParameterShell = css93`
|
|
19709
19835
|
border-radius: var(--rounded-sm);
|
|
19710
19836
|
flex-grow: 1;
|
|
19711
19837
|
position: relative;
|
|
19712
19838
|
max-width: 100%;
|
|
19713
19839
|
`;
|
|
19714
|
-
var emptyParameterShellText =
|
|
19840
|
+
var emptyParameterShellText = css93`
|
|
19715
19841
|
background: var(--brand-secondary-6);
|
|
19716
19842
|
border-radius: var(--rounded-sm);
|
|
19717
19843
|
padding: var(--spacing-sm);
|
|
@@ -19719,7 +19845,7 @@ var emptyParameterShellText = css91`
|
|
|
19719
19845
|
font-size: var(--fs-sm);
|
|
19720
19846
|
margin: 0;
|
|
19721
19847
|
`;
|
|
19722
|
-
var overrideMarker =
|
|
19848
|
+
var overrideMarker = css93`
|
|
19723
19849
|
border-radius: var(--rounded-sm);
|
|
19724
19850
|
border: 10px solid var(--gray-300);
|
|
19725
19851
|
border-left-color: transparent;
|
|
@@ -19730,7 +19856,7 @@ var overrideMarker = css91`
|
|
|
19730
19856
|
`;
|
|
19731
19857
|
|
|
19732
19858
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
19733
|
-
import { jsx as
|
|
19859
|
+
import { jsx as jsx122, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
|
|
19734
19860
|
var extractParameterProps = (props) => {
|
|
19735
19861
|
const {
|
|
19736
19862
|
id,
|
|
@@ -19793,33 +19919,33 @@ var ParameterShell = ({
|
|
|
19793
19919
|
const [manualErrorMessage, setManualErrorMessage] = useState15(void 0);
|
|
19794
19920
|
const setErrorMessage = (message) => setManualErrorMessage(message);
|
|
19795
19921
|
const errorMessaging = errorMessage || manualErrorMessage;
|
|
19796
|
-
return /* @__PURE__ */
|
|
19797
|
-
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: [
|
|
19798
19924
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
19799
19925
|
label,
|
|
19800
19926
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
19801
19927
|
] }),
|
|
19802
|
-
!title2 ? null : /* @__PURE__ */
|
|
19928
|
+
!title2 ? null : /* @__PURE__ */ jsxs81(ParameterLabel, { id, asSpan: true, children: [
|
|
19803
19929
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
19804
19930
|
title2,
|
|
19805
19931
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
19806
19932
|
] }),
|
|
19807
|
-
/* @__PURE__ */
|
|
19808
|
-
actionItems ? /* @__PURE__ */
|
|
19933
|
+
/* @__PURE__ */ jsxs81("div", { css: inputWrapper, children: [
|
|
19934
|
+
actionItems ? /* @__PURE__ */ jsx122(
|
|
19809
19935
|
"div",
|
|
19810
19936
|
{
|
|
19811
19937
|
css: [
|
|
19812
19938
|
inputMenu,
|
|
19813
19939
|
inputActionItems,
|
|
19814
|
-
menuItems ?
|
|
19940
|
+
menuItems ? css94`
|
|
19815
19941
|
right: var(--spacing-md);
|
|
19816
19942
|
` : void 0
|
|
19817
19943
|
],
|
|
19818
19944
|
children: actionItems
|
|
19819
19945
|
}
|
|
19820
19946
|
) : null,
|
|
19821
|
-
menuItems ? /* @__PURE__ */
|
|
19822
|
-
/* @__PURE__ */
|
|
19947
|
+
menuItems ? /* @__PURE__ */ jsx122(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
|
|
19948
|
+
/* @__PURE__ */ jsx122(
|
|
19823
19949
|
ParameterShellContext.Provider,
|
|
19824
19950
|
{
|
|
19825
19951
|
value: {
|
|
@@ -19829,14 +19955,14 @@ var ParameterShell = ({
|
|
|
19829
19955
|
errorMessage: errorMessaging,
|
|
19830
19956
|
handleManuallySetErrorMessage: (message) => setErrorMessage(message)
|
|
19831
19957
|
},
|
|
19832
|
-
children: isParameterGroup ? /* @__PURE__ */
|
|
19958
|
+
children: isParameterGroup ? /* @__PURE__ */ jsx122("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ jsxs81(ParameterShellPlaceholder, { children: [
|
|
19833
19959
|
children,
|
|
19834
|
-
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */
|
|
19960
|
+
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx122(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
|
|
19835
19961
|
] })
|
|
19836
19962
|
}
|
|
19837
19963
|
)
|
|
19838
19964
|
] }),
|
|
19839
|
-
/* @__PURE__ */
|
|
19965
|
+
/* @__PURE__ */ jsx122(
|
|
19840
19966
|
FieldMessage,
|
|
19841
19967
|
{
|
|
19842
19968
|
helperMessageTestId: captionTestId,
|
|
@@ -19850,17 +19976,17 @@ var ParameterShell = ({
|
|
|
19850
19976
|
] });
|
|
19851
19977
|
};
|
|
19852
19978
|
var ParameterShellPlaceholder = ({ children }) => {
|
|
19853
|
-
return /* @__PURE__ */
|
|
19979
|
+
return /* @__PURE__ */ jsx122("div", { css: emptyParameterShell, children });
|
|
19854
19980
|
};
|
|
19855
|
-
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" }) }) });
|
|
19856
19982
|
|
|
19857
19983
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
19858
|
-
import { Fragment as Fragment16, jsx as
|
|
19984
|
+
import { Fragment as Fragment16, jsx as jsx123, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
|
|
19859
19985
|
var ParameterImage = forwardRef19(
|
|
19860
19986
|
({ children, ...props }, ref) => {
|
|
19861
19987
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
19862
|
-
return /* @__PURE__ */
|
|
19863
|
-
/* @__PURE__ */
|
|
19988
|
+
return /* @__PURE__ */ jsxs82(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
|
|
19989
|
+
/* @__PURE__ */ jsx123(ParameterImageInner, { ref, ...innerProps }),
|
|
19864
19990
|
children
|
|
19865
19991
|
] });
|
|
19866
19992
|
}
|
|
@@ -19869,8 +19995,8 @@ var ParameterImageInner = forwardRef19((props, ref) => {
|
|
|
19869
19995
|
const { value } = props;
|
|
19870
19996
|
const { id, label, hiddenLabel, errorMessage } = useParameterShell();
|
|
19871
19997
|
const deferredValue = useDeferredValue(value);
|
|
19872
|
-
return /* @__PURE__ */
|
|
19873
|
-
/* @__PURE__ */
|
|
19998
|
+
return /* @__PURE__ */ jsxs82(Fragment16, { children: [
|
|
19999
|
+
/* @__PURE__ */ jsx123(
|
|
19874
20000
|
"input",
|
|
19875
20001
|
{
|
|
19876
20002
|
css: input3,
|
|
@@ -19882,21 +20008,21 @@ var ParameterImageInner = forwardRef19((props, ref) => {
|
|
|
19882
20008
|
...props
|
|
19883
20009
|
}
|
|
19884
20010
|
),
|
|
19885
|
-
errorMessage || props.disablePreview ? null : /* @__PURE__ */
|
|
20011
|
+
errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx123(ParameterImagePreview, { imageSrc: deferredValue })
|
|
19886
20012
|
] });
|
|
19887
20013
|
});
|
|
19888
20014
|
|
|
19889
20015
|
// src/components/ParameterInputs/ParameterInput.tsx
|
|
19890
20016
|
import { forwardRef as forwardRef20 } from "react";
|
|
19891
|
-
import { jsx as
|
|
20017
|
+
import { jsx as jsx124 } from "@emotion/react/jsx-runtime";
|
|
19892
20018
|
var ParameterInput = forwardRef20((props, ref) => {
|
|
19893
20019
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
19894
|
-
return /* @__PURE__ */
|
|
20020
|
+
return /* @__PURE__ */ jsx124(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx124(ParameterInputInner, { ref, ...innerProps }) });
|
|
19895
20021
|
});
|
|
19896
20022
|
var ParameterInputInner = forwardRef20(
|
|
19897
20023
|
({ ...props }, ref) => {
|
|
19898
20024
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
19899
|
-
return /* @__PURE__ */
|
|
20025
|
+
return /* @__PURE__ */ jsx124(
|
|
19900
20026
|
"input",
|
|
19901
20027
|
{
|
|
19902
20028
|
css: input3,
|
|
@@ -19913,18 +20039,18 @@ var ParameterInputInner = forwardRef20(
|
|
|
19913
20039
|
|
|
19914
20040
|
// src/components/ParameterInputs/ParameterLink.tsx
|
|
19915
20041
|
import { forwardRef as forwardRef21 } from "react";
|
|
19916
|
-
import { jsx as
|
|
20042
|
+
import { jsx as jsx125, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
|
|
19917
20043
|
var ParameterLink = forwardRef21(
|
|
19918
20044
|
({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
|
|
19919
20045
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
19920
|
-
return /* @__PURE__ */
|
|
20046
|
+
return /* @__PURE__ */ jsx125(
|
|
19921
20047
|
ParameterShell,
|
|
19922
20048
|
{
|
|
19923
20049
|
"data-testid": "link-parameter-editor",
|
|
19924
20050
|
...shellProps,
|
|
19925
20051
|
label: innerProps.value ? shellProps.label : "",
|
|
19926
20052
|
title: !innerProps.value ? shellProps.label : void 0,
|
|
19927
|
-
children: /* @__PURE__ */
|
|
20053
|
+
children: /* @__PURE__ */ jsx125(
|
|
19928
20054
|
ParameterLinkInner,
|
|
19929
20055
|
{
|
|
19930
20056
|
onConnectLink,
|
|
@@ -19941,9 +20067,9 @@ var ParameterLinkInner = forwardRef21(
|
|
|
19941
20067
|
({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
|
|
19942
20068
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
19943
20069
|
if (!props.value)
|
|
19944
|
-
return /* @__PURE__ */
|
|
19945
|
-
return /* @__PURE__ */
|
|
19946
|
-
/* @__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(
|
|
19947
20073
|
"input",
|
|
19948
20074
|
{
|
|
19949
20075
|
type: "text",
|
|
@@ -19955,8 +20081,8 @@ var ParameterLinkInner = forwardRef21(
|
|
|
19955
20081
|
...props
|
|
19956
20082
|
}
|
|
19957
20083
|
),
|
|
19958
|
-
/* @__PURE__ */
|
|
19959
|
-
/* @__PURE__ */
|
|
20084
|
+
/* @__PURE__ */ jsxs83("div", { css: linkParameterControls, children: [
|
|
20085
|
+
/* @__PURE__ */ jsx125(
|
|
19960
20086
|
"button",
|
|
19961
20087
|
{
|
|
19962
20088
|
type: "button",
|
|
@@ -19967,7 +20093,7 @@ var ParameterLinkInner = forwardRef21(
|
|
|
19967
20093
|
children: "edit"
|
|
19968
20094
|
}
|
|
19969
20095
|
),
|
|
19970
|
-
externalLink ? /* @__PURE__ */
|
|
20096
|
+
externalLink ? /* @__PURE__ */ jsx125(
|
|
19971
20097
|
"a",
|
|
19972
20098
|
{
|
|
19973
20099
|
href: externalLink,
|
|
@@ -19975,7 +20101,7 @@ var ParameterLinkInner = forwardRef21(
|
|
|
19975
20101
|
title: "Open link in new tab",
|
|
19976
20102
|
target: "_blank",
|
|
19977
20103
|
rel: "noopener noreferrer",
|
|
19978
|
-
children: /* @__PURE__ */
|
|
20104
|
+
children: /* @__PURE__ */ jsx125(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
|
|
19979
20105
|
}
|
|
19980
20106
|
) : null
|
|
19981
20107
|
] })
|
|
@@ -19984,15 +20110,15 @@ var ParameterLinkInner = forwardRef21(
|
|
|
19984
20110
|
);
|
|
19985
20111
|
|
|
19986
20112
|
// src/components/ParameterInputs/ParameterMultiSelect.tsx
|
|
19987
|
-
import { jsx as
|
|
20113
|
+
import { jsx as jsx126 } from "@emotion/react/jsx-runtime";
|
|
19988
20114
|
var ParameterMultiSelect = ({ disabled: disabled2 = false, ...props }) => {
|
|
19989
20115
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
19990
|
-
return /* @__PURE__ */
|
|
20116
|
+
return /* @__PURE__ */ jsx126(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx126(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
|
|
19991
20117
|
};
|
|
19992
20118
|
var ParameterMultiSelectInner = (props) => {
|
|
19993
20119
|
var _a;
|
|
19994
20120
|
const { id, label } = useParameterShell();
|
|
19995
|
-
return /* @__PURE__ */
|
|
20121
|
+
return /* @__PURE__ */ jsx126(
|
|
19996
20122
|
InputComboBox,
|
|
19997
20123
|
{
|
|
19998
20124
|
menuPortalTarget: document.body,
|
|
@@ -20042,7 +20168,7 @@ var ParameterMultiSelectInner = (props) => {
|
|
|
20042
20168
|
};
|
|
20043
20169
|
|
|
20044
20170
|
// src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
|
|
20045
|
-
import { Fragment as Fragment17, jsx as
|
|
20171
|
+
import { Fragment as Fragment17, jsx as jsx127, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
|
|
20046
20172
|
var ParameterNameAndPublicIdInput = ({
|
|
20047
20173
|
id,
|
|
20048
20174
|
onBlur,
|
|
@@ -20068,8 +20194,8 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
20068
20194
|
navigator.clipboard.writeText(values[publicIdFieldName]);
|
|
20069
20195
|
};
|
|
20070
20196
|
autoFocus == null ? void 0 : autoFocus();
|
|
20071
|
-
return /* @__PURE__ */
|
|
20072
|
-
/* @__PURE__ */
|
|
20197
|
+
return /* @__PURE__ */ jsxs84(Fragment17, { children: [
|
|
20198
|
+
/* @__PURE__ */ jsx127(
|
|
20073
20199
|
ParameterInput,
|
|
20074
20200
|
{
|
|
20075
20201
|
id: nameIdField,
|
|
@@ -20088,7 +20214,7 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
20088
20214
|
value: values[nameIdField]
|
|
20089
20215
|
}
|
|
20090
20216
|
),
|
|
20091
|
-
/* @__PURE__ */
|
|
20217
|
+
/* @__PURE__ */ jsx127(
|
|
20092
20218
|
ParameterInput,
|
|
20093
20219
|
{
|
|
20094
20220
|
id: publicIdFieldName,
|
|
@@ -20102,11 +20228,11 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
20102
20228
|
caption: !publicIdError ? publicIdCaption : void 0,
|
|
20103
20229
|
placeholder: publicIdPlaceholderText,
|
|
20104
20230
|
errorMessage: publicIdError,
|
|
20105
|
-
menuItems: /* @__PURE__ */
|
|
20231
|
+
menuItems: /* @__PURE__ */ jsx127(
|
|
20106
20232
|
MenuItem,
|
|
20107
20233
|
{
|
|
20108
20234
|
disabled: !values[publicIdFieldName],
|
|
20109
|
-
icon: /* @__PURE__ */
|
|
20235
|
+
icon: /* @__PURE__ */ jsx127(Icon, { icon: "path-trim", iconColor: "currentColor" }),
|
|
20110
20236
|
onClick: handleCopyPidFieldValue,
|
|
20111
20237
|
children: "Copy"
|
|
20112
20238
|
}
|
|
@@ -20114,12 +20240,12 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
20114
20240
|
value: values[publicIdFieldName]
|
|
20115
20241
|
}
|
|
20116
20242
|
),
|
|
20117
|
-
(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
|
|
20118
20244
|
] });
|
|
20119
20245
|
};
|
|
20120
20246
|
|
|
20121
20247
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
20122
|
-
import { css as
|
|
20248
|
+
import { css as css98 } from "@emotion/react";
|
|
20123
20249
|
import { ListItemNode, ListNode as ListNode2 } from "@lexical/list";
|
|
20124
20250
|
import {
|
|
20125
20251
|
CODE,
|
|
@@ -20271,23 +20397,23 @@ function DisableStylesPlugin() {
|
|
|
20271
20397
|
}
|
|
20272
20398
|
|
|
20273
20399
|
// src/components/ParameterInputs/rich-text/editorStyles.ts
|
|
20274
|
-
import { css as
|
|
20275
|
-
var textBold =
|
|
20400
|
+
import { css as css95 } from "@emotion/css";
|
|
20401
|
+
var textBold = css95`
|
|
20276
20402
|
font-weight: 700;
|
|
20277
20403
|
`;
|
|
20278
|
-
var textItalic =
|
|
20404
|
+
var textItalic = css95`
|
|
20279
20405
|
font-style: italic;
|
|
20280
20406
|
`;
|
|
20281
|
-
var textUnderline =
|
|
20407
|
+
var textUnderline = css95`
|
|
20282
20408
|
text-decoration: underline;
|
|
20283
20409
|
`;
|
|
20284
|
-
var textStrikethrough =
|
|
20410
|
+
var textStrikethrough = css95`
|
|
20285
20411
|
text-decoration: line-through;
|
|
20286
20412
|
`;
|
|
20287
|
-
var textUnderlineStrikethrough =
|
|
20413
|
+
var textUnderlineStrikethrough = css95`
|
|
20288
20414
|
text-decoration: underline line-through;
|
|
20289
20415
|
`;
|
|
20290
|
-
var textCode =
|
|
20416
|
+
var textCode = css95`
|
|
20291
20417
|
background-color: var(--gray-100);
|
|
20292
20418
|
border-radius: var(--rounded-sm);
|
|
20293
20419
|
display: inline-block;
|
|
@@ -20298,68 +20424,68 @@ var textCode = css93`
|
|
|
20298
20424
|
padding-left: var(--spacing-xs);
|
|
20299
20425
|
padding-right: var(--spacing-xs);
|
|
20300
20426
|
`;
|
|
20301
|
-
var textSuperscript =
|
|
20427
|
+
var textSuperscript = css95`
|
|
20302
20428
|
vertical-align: super;
|
|
20303
20429
|
font-size: smaller;
|
|
20304
20430
|
`;
|
|
20305
|
-
var textSubscript =
|
|
20431
|
+
var textSubscript = css95`
|
|
20306
20432
|
vertical-align: sub;
|
|
20307
20433
|
font-size: smaller;
|
|
20308
20434
|
`;
|
|
20309
|
-
var linkElement =
|
|
20435
|
+
var linkElement = css95`
|
|
20310
20436
|
${link}
|
|
20311
20437
|
${linkColorDefault}
|
|
20312
20438
|
text-decoration: underline;
|
|
20313
20439
|
`;
|
|
20314
|
-
var h12 =
|
|
20440
|
+
var h12 = css95`
|
|
20315
20441
|
font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
|
|
20316
20442
|
`;
|
|
20317
|
-
var h22 =
|
|
20443
|
+
var h22 = css95`
|
|
20318
20444
|
font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
|
|
20319
20445
|
`;
|
|
20320
|
-
var h32 =
|
|
20446
|
+
var h32 = css95`
|
|
20321
20447
|
font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
|
|
20322
20448
|
`;
|
|
20323
|
-
var h42 =
|
|
20449
|
+
var h42 = css95`
|
|
20324
20450
|
font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
|
|
20325
20451
|
`;
|
|
20326
|
-
var h52 =
|
|
20452
|
+
var h52 = css95`
|
|
20327
20453
|
font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
|
|
20328
20454
|
`;
|
|
20329
|
-
var h62 =
|
|
20455
|
+
var h62 = css95`
|
|
20330
20456
|
font-size: var(--fs-base);
|
|
20331
20457
|
`;
|
|
20332
|
-
var heading1Element =
|
|
20458
|
+
var heading1Element = css95`
|
|
20333
20459
|
${h12}
|
|
20334
20460
|
${commonHeadingAttr(true)}
|
|
20335
20461
|
${commonLineHeight}
|
|
20336
20462
|
`;
|
|
20337
|
-
var heading2Element =
|
|
20463
|
+
var heading2Element = css95`
|
|
20338
20464
|
${h22}
|
|
20339
20465
|
${commonHeadingAttr(true)}
|
|
20340
20466
|
${commonLineHeight}
|
|
20341
20467
|
`;
|
|
20342
|
-
var heading3Element =
|
|
20468
|
+
var heading3Element = css95`
|
|
20343
20469
|
${h32}
|
|
20344
20470
|
${commonHeadingAttr(true)}
|
|
20345
20471
|
${commonLineHeight}
|
|
20346
20472
|
`;
|
|
20347
|
-
var heading4Element =
|
|
20473
|
+
var heading4Element = css95`
|
|
20348
20474
|
${h42}
|
|
20349
20475
|
${commonHeadingAttr(true)}
|
|
20350
20476
|
${commonLineHeight}
|
|
20351
20477
|
`;
|
|
20352
|
-
var heading5Element =
|
|
20478
|
+
var heading5Element = css95`
|
|
20353
20479
|
${h52}
|
|
20354
20480
|
${commonHeadingAttr(true)}
|
|
20355
20481
|
${commonLineHeight}
|
|
20356
20482
|
`;
|
|
20357
|
-
var heading6Element =
|
|
20483
|
+
var heading6Element = css95`
|
|
20358
20484
|
${h62}
|
|
20359
20485
|
${commonHeadingAttr(true)}
|
|
20360
20486
|
${commonLineHeight}
|
|
20361
20487
|
`;
|
|
20362
|
-
var paragraphElement =
|
|
20488
|
+
var paragraphElement = css95`
|
|
20363
20489
|
line-height: 1.5;
|
|
20364
20490
|
margin-bottom: var(--spacing-base);
|
|
20365
20491
|
|
|
@@ -20367,7 +20493,7 @@ var paragraphElement = css93`
|
|
|
20367
20493
|
margin-bottom: 0;
|
|
20368
20494
|
}
|
|
20369
20495
|
`;
|
|
20370
|
-
var orderedListElement =
|
|
20496
|
+
var orderedListElement = css95`
|
|
20371
20497
|
${commonLineHeight}
|
|
20372
20498
|
display: block;
|
|
20373
20499
|
list-style: decimal;
|
|
@@ -20396,7 +20522,7 @@ var orderedListElement = css93`
|
|
|
20396
20522
|
}
|
|
20397
20523
|
}
|
|
20398
20524
|
`;
|
|
20399
|
-
var unorderedListElement =
|
|
20525
|
+
var unorderedListElement = css95`
|
|
20400
20526
|
${commonLineHeight}
|
|
20401
20527
|
display: block;
|
|
20402
20528
|
list-style: disc;
|
|
@@ -20417,13 +20543,13 @@ var unorderedListElement = css93`
|
|
|
20417
20543
|
}
|
|
20418
20544
|
}
|
|
20419
20545
|
`;
|
|
20420
|
-
var listItemElement =
|
|
20546
|
+
var listItemElement = css95`
|
|
20421
20547
|
margin-left: var(--spacing-md);
|
|
20422
20548
|
`;
|
|
20423
|
-
var nestedListItemElement =
|
|
20549
|
+
var nestedListItemElement = css95`
|
|
20424
20550
|
list-style-type: none;
|
|
20425
20551
|
`;
|
|
20426
|
-
var blockquoteElement =
|
|
20552
|
+
var blockquoteElement = css95`
|
|
20427
20553
|
border-left: 0.25rem solid var(--gray-300);
|
|
20428
20554
|
color: var(--gray-600);
|
|
20429
20555
|
margin-bottom: var(--spacing-base);
|
|
@@ -20433,7 +20559,7 @@ var blockquoteElement = css93`
|
|
|
20433
20559
|
margin-bottom: 0;
|
|
20434
20560
|
}
|
|
20435
20561
|
`;
|
|
20436
|
-
var codeElement =
|
|
20562
|
+
var codeElement = css95`
|
|
20437
20563
|
background-color: var(--gray-100);
|
|
20438
20564
|
border-radius: var(--rounded-sm);
|
|
20439
20565
|
display: block;
|
|
@@ -20450,7 +20576,7 @@ var codeElement = css93`
|
|
|
20450
20576
|
`;
|
|
20451
20577
|
|
|
20452
20578
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
20453
|
-
import { css as
|
|
20579
|
+
import { css as css96 } from "@emotion/react";
|
|
20454
20580
|
import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
|
|
20455
20581
|
import { NodeEventPlugin } from "@lexical/react/LexicalNodeEventPlugin";
|
|
20456
20582
|
import { addClassNamesToElement, isHTMLAnchorElement, mergeRegister as mergeRegister2 } from "@lexical/utils";
|
|
@@ -20503,7 +20629,7 @@ var getSelectedNode = (selection) => {
|
|
|
20503
20629
|
};
|
|
20504
20630
|
|
|
20505
20631
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
20506
|
-
import { Fragment as Fragment18, jsx as
|
|
20632
|
+
import { Fragment as Fragment18, jsx as jsx128, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
|
|
20507
20633
|
var isProjectMapLinkValue = (value) => {
|
|
20508
20634
|
return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
|
|
20509
20635
|
value.nodeId && value.path && value.projectMapId
|
|
@@ -20790,16 +20916,16 @@ var OPEN_LINK_NODE_MODAL_COMMAND = createCommand(
|
|
|
20790
20916
|
);
|
|
20791
20917
|
var LINK_POPOVER_OFFSET_X = 0;
|
|
20792
20918
|
var LINK_POPOVER_OFFSET_Y = 8;
|
|
20793
|
-
var linkPopover =
|
|
20919
|
+
var linkPopover = css96`
|
|
20794
20920
|
position: absolute;
|
|
20795
20921
|
z-index: 5;
|
|
20796
20922
|
`;
|
|
20797
|
-
var linkPopoverContainer =
|
|
20923
|
+
var linkPopoverContainer = css96`
|
|
20798
20924
|
${Popover()};
|
|
20799
20925
|
align-items: center;
|
|
20800
20926
|
display: flex;
|
|
20801
20927
|
`;
|
|
20802
|
-
var linkPopoverAnchor =
|
|
20928
|
+
var linkPopoverAnchor = css96`
|
|
20803
20929
|
${link}
|
|
20804
20930
|
${linkColorDefault}
|
|
20805
20931
|
`;
|
|
@@ -20946,8 +21072,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
20946
21072
|
});
|
|
20947
21073
|
});
|
|
20948
21074
|
};
|
|
20949
|
-
return /* @__PURE__ */
|
|
20950
|
-
/* @__PURE__ */
|
|
21075
|
+
return /* @__PURE__ */ jsxs85(Fragment18, { children: [
|
|
21076
|
+
/* @__PURE__ */ jsx128(
|
|
20951
21077
|
NodeEventPlugin,
|
|
20952
21078
|
{
|
|
20953
21079
|
nodeType: LinkNode,
|
|
@@ -20957,7 +21083,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
20957
21083
|
}
|
|
20958
21084
|
}
|
|
20959
21085
|
),
|
|
20960
|
-
linkPopoverState ? /* @__PURE__ */
|
|
21086
|
+
linkPopoverState ? /* @__PURE__ */ jsx128(
|
|
20961
21087
|
"div",
|
|
20962
21088
|
{
|
|
20963
21089
|
css: linkPopover,
|
|
@@ -20966,8 +21092,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
20966
21092
|
top: linkPopoverState.position.y
|
|
20967
21093
|
},
|
|
20968
21094
|
ref: linkPopoverElRef,
|
|
20969
|
-
children: /* @__PURE__ */
|
|
20970
|
-
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(
|
|
20971
21097
|
"a",
|
|
20972
21098
|
{
|
|
20973
21099
|
href: parsePath(
|
|
@@ -20979,7 +21105,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
20979
21105
|
children: parsePath(linkPopoverState.node.__link.path)
|
|
20980
21106
|
}
|
|
20981
21107
|
),
|
|
20982
|
-
/* @__PURE__ */
|
|
21108
|
+
/* @__PURE__ */ jsx128(
|
|
20983
21109
|
Button,
|
|
20984
21110
|
{
|
|
20985
21111
|
size: "xs",
|
|
@@ -20987,7 +21113,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
20987
21113
|
onEditLinkNode(linkPopoverState.node);
|
|
20988
21114
|
},
|
|
20989
21115
|
buttonType: "ghost",
|
|
20990
|
-
children: /* @__PURE__ */
|
|
21116
|
+
children: /* @__PURE__ */ jsx128(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
|
|
20991
21117
|
}
|
|
20992
21118
|
)
|
|
20993
21119
|
] })
|
|
@@ -21012,7 +21138,7 @@ import {
|
|
|
21012
21138
|
INDENT_CONTENT_COMMAND
|
|
21013
21139
|
} from "lexical";
|
|
21014
21140
|
import { useEffect as useEffect19 } from "react";
|
|
21015
|
-
import { jsx as
|
|
21141
|
+
import { jsx as jsx129 } from "@emotion/react/jsx-runtime";
|
|
21016
21142
|
function isIndentPermitted(maxDepth) {
|
|
21017
21143
|
const selection = $getSelection2();
|
|
21018
21144
|
if (!$isRangeSelection2(selection)) {
|
|
@@ -21042,11 +21168,11 @@ function ListIndentPlugin({ maxDepth }) {
|
|
|
21042
21168
|
COMMAND_PRIORITY_CRITICAL
|
|
21043
21169
|
);
|
|
21044
21170
|
}, [editor, maxDepth]);
|
|
21045
|
-
return /* @__PURE__ */
|
|
21171
|
+
return /* @__PURE__ */ jsx129(TabIndentationPlugin, {});
|
|
21046
21172
|
}
|
|
21047
21173
|
|
|
21048
21174
|
// src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
|
|
21049
|
-
import { css as
|
|
21175
|
+
import { css as css97 } from "@emotion/react";
|
|
21050
21176
|
import { $createCodeNode } from "@lexical/code";
|
|
21051
21177
|
import {
|
|
21052
21178
|
$isListNode as $isListNode2,
|
|
@@ -21069,8 +21195,8 @@ import {
|
|
|
21069
21195
|
SELECTION_CHANGE_COMMAND
|
|
21070
21196
|
} from "lexical";
|
|
21071
21197
|
import { useCallback as useCallback11, useEffect as useEffect20, useMemo as useMemo6, useState as useState17 } from "react";
|
|
21072
|
-
import { Fragment as Fragment19, jsx as
|
|
21073
|
-
var toolbar =
|
|
21198
|
+
import { Fragment as Fragment19, jsx as jsx130, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
|
|
21199
|
+
var toolbar = css97`
|
|
21074
21200
|
background: var(--gray-50);
|
|
21075
21201
|
border-radius: var(--rounded-base);
|
|
21076
21202
|
display: flex;
|
|
@@ -21082,7 +21208,7 @@ var toolbar = css95`
|
|
|
21082
21208
|
top: calc(var(--spacing-sm) * -2);
|
|
21083
21209
|
z-index: 10;
|
|
21084
21210
|
`;
|
|
21085
|
-
var toolbarGroup =
|
|
21211
|
+
var toolbarGroup = css97`
|
|
21086
21212
|
display: flex;
|
|
21087
21213
|
gap: var(--spacing-xs);
|
|
21088
21214
|
position: relative;
|
|
@@ -21098,7 +21224,7 @@ var toolbarGroup = css95`
|
|
|
21098
21224
|
width: 1px;
|
|
21099
21225
|
}
|
|
21100
21226
|
`;
|
|
21101
|
-
var richTextToolbarButton =
|
|
21227
|
+
var richTextToolbarButton = css97`
|
|
21102
21228
|
align-items: center;
|
|
21103
21229
|
appearance: none;
|
|
21104
21230
|
border: 0;
|
|
@@ -21111,17 +21237,17 @@ var richTextToolbarButton = css95`
|
|
|
21111
21237
|
min-width: 32px;
|
|
21112
21238
|
padding: 0 var(--spacing-sm);
|
|
21113
21239
|
`;
|
|
21114
|
-
var richTextToolbarButtonActive =
|
|
21240
|
+
var richTextToolbarButtonActive = css97`
|
|
21115
21241
|
background: var(--gray-200);
|
|
21116
21242
|
`;
|
|
21117
|
-
var toolbarIcon =
|
|
21243
|
+
var toolbarIcon = css97`
|
|
21118
21244
|
color: inherit;
|
|
21119
21245
|
`;
|
|
21120
|
-
var toolbarChevron =
|
|
21246
|
+
var toolbarChevron = css97`
|
|
21121
21247
|
margin-left: var(--spacing-xs);
|
|
21122
21248
|
`;
|
|
21123
21249
|
var RichTextToolbarIcon = ({ icon }) => {
|
|
21124
|
-
return /* @__PURE__ */
|
|
21250
|
+
return /* @__PURE__ */ jsx130(Icon, { icon, css: toolbarIcon, size: "1rem" });
|
|
21125
21251
|
};
|
|
21126
21252
|
var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
|
|
21127
21253
|
["bold", "format-bold"],
|
|
@@ -21230,15 +21356,15 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
21230
21356
|
});
|
|
21231
21357
|
});
|
|
21232
21358
|
}, [editor, updateToolbar]);
|
|
21233
|
-
return /* @__PURE__ */
|
|
21234
|
-
/* @__PURE__ */
|
|
21359
|
+
return /* @__PURE__ */ jsxs86("div", { css: toolbar, children: [
|
|
21360
|
+
/* @__PURE__ */ jsxs86(
|
|
21235
21361
|
Menu,
|
|
21236
21362
|
{
|
|
21237
21363
|
menuLabel: "Elements",
|
|
21238
|
-
menuTrigger: /* @__PURE__ */
|
|
21364
|
+
menuTrigger: /* @__PURE__ */ jsxs86("button", { css: richTextToolbarButton, title: "Text styles", children: [
|
|
21239
21365
|
visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
|
|
21240
21366
|
" ",
|
|
21241
|
-
/* @__PURE__ */
|
|
21367
|
+
/* @__PURE__ */ jsx130(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
21242
21368
|
] }),
|
|
21243
21369
|
placement: "bottom-start",
|
|
21244
21370
|
children: [
|
|
@@ -21248,7 +21374,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
21248
21374
|
type: "paragraph"
|
|
21249
21375
|
},
|
|
21250
21376
|
...visibleTextualElements
|
|
21251
|
-
].map((element) => /* @__PURE__ */
|
|
21377
|
+
].map((element) => /* @__PURE__ */ jsx130(
|
|
21252
21378
|
MenuItem,
|
|
21253
21379
|
{
|
|
21254
21380
|
onClick: () => {
|
|
@@ -21258,12 +21384,12 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
21258
21384
|
},
|
|
21259
21385
|
element.type
|
|
21260
21386
|
)),
|
|
21261
|
-
visibleTextualElements.length === 0 ? /* @__PURE__ */
|
|
21387
|
+
visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx130(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
|
|
21262
21388
|
]
|
|
21263
21389
|
}
|
|
21264
21390
|
),
|
|
21265
|
-
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */
|
|
21266
|
-
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(
|
|
21267
21393
|
"button",
|
|
21268
21394
|
{
|
|
21269
21395
|
onClick: () => {
|
|
@@ -21273,16 +21399,16 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
21273
21399
|
richTextToolbarButton,
|
|
21274
21400
|
activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
|
|
21275
21401
|
],
|
|
21276
|
-
children: /* @__PURE__ */
|
|
21402
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
|
|
21277
21403
|
}
|
|
21278
21404
|
) }, format.type)),
|
|
21279
|
-
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */
|
|
21405
|
+
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx130(
|
|
21280
21406
|
Menu,
|
|
21281
21407
|
{
|
|
21282
21408
|
menuLabel: "Alternative text styles",
|
|
21283
|
-
menuTrigger: /* @__PURE__ */
|
|
21409
|
+
menuTrigger: /* @__PURE__ */ jsx130("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx130(Icon, { icon: "more-alt", css: toolbarIcon }) }),
|
|
21284
21410
|
placement: "bottom-start",
|
|
21285
|
-
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */
|
|
21411
|
+
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx130(
|
|
21286
21412
|
MenuItem,
|
|
21287
21413
|
{
|
|
21288
21414
|
onClick: () => {
|
|
@@ -21295,19 +21421,19 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
21295
21421
|
}
|
|
21296
21422
|
) : null
|
|
21297
21423
|
] }) : null,
|
|
21298
|
-
visibleElementsWithIcons.size > 0 ? /* @__PURE__ */
|
|
21299
|
-
linkElementVisible ? /* @__PURE__ */
|
|
21424
|
+
visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ jsxs86("div", { css: toolbarGroup, children: [
|
|
21425
|
+
linkElementVisible ? /* @__PURE__ */ jsx130(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx130(
|
|
21300
21426
|
"button",
|
|
21301
21427
|
{
|
|
21302
21428
|
onClick: () => {
|
|
21303
21429
|
isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
|
|
21304
21430
|
},
|
|
21305
21431
|
css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
|
|
21306
|
-
children: /* @__PURE__ */
|
|
21432
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "link" })
|
|
21307
21433
|
}
|
|
21308
21434
|
) }) : null,
|
|
21309
|
-
visibleLists.size > 0 ? /* @__PURE__ */
|
|
21310
|
-
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(
|
|
21311
21437
|
"button",
|
|
21312
21438
|
{
|
|
21313
21439
|
onClick: () => {
|
|
@@ -21317,10 +21443,10 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
21317
21443
|
richTextToolbarButton,
|
|
21318
21444
|
activeElement === "unorderedList" ? richTextToolbarButtonActive : null
|
|
21319
21445
|
],
|
|
21320
|
-
children: /* @__PURE__ */
|
|
21446
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "layout-list" })
|
|
21321
21447
|
}
|
|
21322
21448
|
) }) : null,
|
|
21323
|
-
visibleLists.has("orderedList") ? /* @__PURE__ */
|
|
21449
|
+
visibleLists.has("orderedList") ? /* @__PURE__ */ jsx130(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx130(
|
|
21324
21450
|
"button",
|
|
21325
21451
|
{
|
|
21326
21452
|
onClick: () => {
|
|
@@ -21330,32 +21456,32 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
21330
21456
|
richTextToolbarButton,
|
|
21331
21457
|
activeElement === "orderedList" ? richTextToolbarButtonActive : null
|
|
21332
21458
|
],
|
|
21333
|
-
children: /* @__PURE__ */
|
|
21459
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "layout-list-numbered" })
|
|
21334
21460
|
}
|
|
21335
21461
|
) }) : null
|
|
21336
21462
|
] }) : null,
|
|
21337
|
-
quoteElementVisible ? /* @__PURE__ */
|
|
21463
|
+
quoteElementVisible ? /* @__PURE__ */ jsx130(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx130(
|
|
21338
21464
|
"button",
|
|
21339
21465
|
{
|
|
21340
21466
|
onClick: () => {
|
|
21341
21467
|
activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
|
|
21342
21468
|
},
|
|
21343
21469
|
css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
|
|
21344
|
-
children: /* @__PURE__ */
|
|
21470
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "quote" })
|
|
21345
21471
|
}
|
|
21346
21472
|
) }) : null,
|
|
21347
|
-
codeElementVisible ? /* @__PURE__ */
|
|
21473
|
+
codeElementVisible ? /* @__PURE__ */ jsx130(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx130(
|
|
21348
21474
|
"button",
|
|
21349
21475
|
{
|
|
21350
21476
|
onClick: () => {
|
|
21351
21477
|
activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
|
|
21352
21478
|
},
|
|
21353
21479
|
css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
|
|
21354
|
-
children: /* @__PURE__ */
|
|
21480
|
+
children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "code-slash" })
|
|
21355
21481
|
}
|
|
21356
21482
|
) }) : null
|
|
21357
21483
|
] }) : null,
|
|
21358
|
-
customControls ? /* @__PURE__ */
|
|
21484
|
+
customControls ? /* @__PURE__ */ jsx130("div", { css: toolbarGroup, children: customControls }) : null
|
|
21359
21485
|
] });
|
|
21360
21486
|
};
|
|
21361
21487
|
var RichTextToolbar_default = RichTextToolbar;
|
|
@@ -21469,7 +21595,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
21469
21595
|
};
|
|
21470
21596
|
|
|
21471
21597
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
21472
|
-
import { Fragment as Fragment20, jsx as
|
|
21598
|
+
import { Fragment as Fragment20, jsx as jsx131, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
|
|
21473
21599
|
var ParameterRichText = ({
|
|
21474
21600
|
label,
|
|
21475
21601
|
labelLeadingIcon,
|
|
@@ -21494,7 +21620,7 @@ var ParameterRichText = ({
|
|
|
21494
21620
|
variables,
|
|
21495
21621
|
customControls
|
|
21496
21622
|
}) => {
|
|
21497
|
-
return /* @__PURE__ */
|
|
21623
|
+
return /* @__PURE__ */ jsxs87(
|
|
21498
21624
|
ParameterShell,
|
|
21499
21625
|
{
|
|
21500
21626
|
"data-testid": "parameter-richtext",
|
|
@@ -21508,7 +21634,7 @@ var ParameterRichText = ({
|
|
|
21508
21634
|
captionTestId,
|
|
21509
21635
|
menuItems,
|
|
21510
21636
|
children: [
|
|
21511
|
-
/* @__PURE__ */
|
|
21637
|
+
/* @__PURE__ */ jsx131(
|
|
21512
21638
|
ParameterRichTextInner,
|
|
21513
21639
|
{
|
|
21514
21640
|
value,
|
|
@@ -21526,23 +21652,23 @@ var ParameterRichText = ({
|
|
|
21526
21652
|
children
|
|
21527
21653
|
}
|
|
21528
21654
|
),
|
|
21529
|
-
menuItems ? /* @__PURE__ */
|
|
21655
|
+
menuItems ? /* @__PURE__ */ jsx131(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx131(Fragment20, { children: menuItems }) }) : null
|
|
21530
21656
|
]
|
|
21531
21657
|
}
|
|
21532
21658
|
);
|
|
21533
21659
|
};
|
|
21534
|
-
var editorWrapper =
|
|
21660
|
+
var editorWrapper = css98`
|
|
21535
21661
|
display: flex;
|
|
21536
21662
|
flex-flow: column;
|
|
21537
21663
|
flex-grow: 1;
|
|
21538
21664
|
`;
|
|
21539
|
-
var editorContainer =
|
|
21665
|
+
var editorContainer = css98`
|
|
21540
21666
|
display: flex;
|
|
21541
21667
|
flex-flow: column;
|
|
21542
21668
|
flex-grow: 1;
|
|
21543
21669
|
position: relative;
|
|
21544
21670
|
`;
|
|
21545
|
-
var editorPlaceholder =
|
|
21671
|
+
var editorPlaceholder = css98`
|
|
21546
21672
|
color: var(--gray-500);
|
|
21547
21673
|
font-style: italic;
|
|
21548
21674
|
/* 1px is added to make sure caret is clearly visible when field is focused
|
|
@@ -21553,7 +21679,7 @@ var editorPlaceholder = css96`
|
|
|
21553
21679
|
top: var(--spacing-sm);
|
|
21554
21680
|
user-select: none;
|
|
21555
21681
|
`;
|
|
21556
|
-
var editorInput =
|
|
21682
|
+
var editorInput = css98`
|
|
21557
21683
|
background: var(--white);
|
|
21558
21684
|
border: 1px solid var(--gray-200);
|
|
21559
21685
|
border-radius: var(--rounded-sm);
|
|
@@ -21637,8 +21763,8 @@ var ParameterRichTextInner = ({
|
|
|
21637
21763
|
},
|
|
21638
21764
|
editable: !readOnly
|
|
21639
21765
|
};
|
|
21640
|
-
return /* @__PURE__ */
|
|
21641
|
-
/* @__PURE__ */
|
|
21766
|
+
return /* @__PURE__ */ jsxs87(Fragment20, { children: [
|
|
21767
|
+
/* @__PURE__ */ jsx131("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx131(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx131(
|
|
21642
21768
|
RichText,
|
|
21643
21769
|
{
|
|
21644
21770
|
onChange,
|
|
@@ -21697,20 +21823,20 @@ var RichText = ({
|
|
|
21697
21823
|
useEffect21(() => {
|
|
21698
21824
|
editor.setEditable(!readOnly);
|
|
21699
21825
|
}, [editor, readOnly]);
|
|
21700
|
-
return /* @__PURE__ */
|
|
21701
|
-
readOnly ? null : /* @__PURE__ */
|
|
21702
|
-
/* @__PURE__ */
|
|
21703
|
-
/* @__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(
|
|
21704
21830
|
RichTextPlugin,
|
|
21705
21831
|
{
|
|
21706
|
-
contentEditable: /* @__PURE__ */
|
|
21707
|
-
placeholder: /* @__PURE__ */
|
|
21832
|
+
contentEditable: /* @__PURE__ */ jsx131(ContentEditable, { css: editorInput, className: editorInputClassName }),
|
|
21833
|
+
placeholder: /* @__PURE__ */ jsx131("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
|
|
21708
21834
|
ErrorBoundary: LexicalErrorBoundary
|
|
21709
21835
|
}
|
|
21710
21836
|
),
|
|
21711
|
-
/* @__PURE__ */
|
|
21712
|
-
readOnly ? null : /* @__PURE__ */
|
|
21713
|
-
/* @__PURE__ */
|
|
21837
|
+
/* @__PURE__ */ jsx131(ListPlugin, {}),
|
|
21838
|
+
readOnly ? null : /* @__PURE__ */ jsx131(HistoryPlugin, {}),
|
|
21839
|
+
/* @__PURE__ */ jsx131(
|
|
21714
21840
|
LinkNodePlugin,
|
|
21715
21841
|
{
|
|
21716
21842
|
onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
|
|
@@ -21720,27 +21846,27 @@ var RichText = ({
|
|
|
21720
21846
|
} : void 0
|
|
21721
21847
|
}
|
|
21722
21848
|
),
|
|
21723
|
-
/* @__PURE__ */
|
|
21724
|
-
/* @__PURE__ */
|
|
21725
|
-
/* @__PURE__ */
|
|
21726
|
-
/* @__PURE__ */
|
|
21849
|
+
/* @__PURE__ */ jsx131(ListIndentPlugin, { maxDepth: 4 }),
|
|
21850
|
+
/* @__PURE__ */ jsx131(DisableStylesPlugin, {}),
|
|
21851
|
+
/* @__PURE__ */ jsx131(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
|
|
21852
|
+
/* @__PURE__ */ jsx131(Fragment20, { children })
|
|
21727
21853
|
] })
|
|
21728
21854
|
] });
|
|
21729
21855
|
};
|
|
21730
21856
|
|
|
21731
21857
|
// src/components/ParameterInputs/ParameterSelect.tsx
|
|
21732
21858
|
import { forwardRef as forwardRef22 } from "react";
|
|
21733
|
-
import { jsx as
|
|
21859
|
+
import { jsx as jsx132, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
|
|
21734
21860
|
var ParameterSelect = forwardRef22(
|
|
21735
21861
|
({ defaultOption, options, ...props }, ref) => {
|
|
21736
21862
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
21737
|
-
return /* @__PURE__ */
|
|
21863
|
+
return /* @__PURE__ */ jsx132(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx132(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
|
|
21738
21864
|
}
|
|
21739
21865
|
);
|
|
21740
21866
|
var ParameterSelectInner = forwardRef22(
|
|
21741
21867
|
({ defaultOption, options, ...props }, ref) => {
|
|
21742
21868
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
21743
|
-
return /* @__PURE__ */
|
|
21869
|
+
return /* @__PURE__ */ jsxs88(
|
|
21744
21870
|
"select",
|
|
21745
21871
|
{
|
|
21746
21872
|
css: [input3, selectInput],
|
|
@@ -21749,10 +21875,10 @@ var ParameterSelectInner = forwardRef22(
|
|
|
21749
21875
|
ref,
|
|
21750
21876
|
...props,
|
|
21751
21877
|
children: [
|
|
21752
|
-
defaultOption ? /* @__PURE__ */
|
|
21878
|
+
defaultOption ? /* @__PURE__ */ jsx132("option", { value: "", children: defaultOption }) : null,
|
|
21753
21879
|
options.map((option) => {
|
|
21754
21880
|
var _a;
|
|
21755
|
-
return /* @__PURE__ */
|
|
21881
|
+
return /* @__PURE__ */ jsx132("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
|
|
21756
21882
|
})
|
|
21757
21883
|
]
|
|
21758
21884
|
}
|
|
@@ -21762,14 +21888,14 @@ var ParameterSelectInner = forwardRef22(
|
|
|
21762
21888
|
|
|
21763
21889
|
// src/components/ParameterInputs/ParameterTextarea.tsx
|
|
21764
21890
|
import { forwardRef as forwardRef23 } from "react";
|
|
21765
|
-
import { jsx as
|
|
21891
|
+
import { jsx as jsx133 } from "@emotion/react/jsx-runtime";
|
|
21766
21892
|
var ParameterTextarea = forwardRef23((props, ref) => {
|
|
21767
21893
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
21768
|
-
return /* @__PURE__ */
|
|
21894
|
+
return /* @__PURE__ */ jsx133(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx133(ParameterTextareaInner, { ref, ...innerProps }) });
|
|
21769
21895
|
});
|
|
21770
21896
|
var ParameterTextareaInner = forwardRef23(({ ...props }, ref) => {
|
|
21771
21897
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
21772
|
-
return /* @__PURE__ */
|
|
21898
|
+
return /* @__PURE__ */ jsx133(
|
|
21773
21899
|
"textarea",
|
|
21774
21900
|
{
|
|
21775
21901
|
css: [input3, textarea2],
|
|
@@ -21783,25 +21909,25 @@ var ParameterTextareaInner = forwardRef23(({ ...props }, ref) => {
|
|
|
21783
21909
|
|
|
21784
21910
|
// src/components/ParameterInputs/ParameterToggle.tsx
|
|
21785
21911
|
import { forwardRef as forwardRef24 } from "react";
|
|
21786
|
-
import { jsx as
|
|
21912
|
+
import { jsx as jsx134, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
|
|
21787
21913
|
var ParameterToggle = forwardRef24((props, ref) => {
|
|
21788
21914
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
21789
|
-
return /* @__PURE__ */
|
|
21915
|
+
return /* @__PURE__ */ jsx134(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx134(ParameterToggleInner, { ref, ...innerProps }) });
|
|
21790
21916
|
});
|
|
21791
21917
|
var ParameterToggleInner = forwardRef24(
|
|
21792
21918
|
({ children, ...props }, ref) => {
|
|
21793
21919
|
const { id, label } = useParameterShell();
|
|
21794
|
-
return /* @__PURE__ */
|
|
21795
|
-
/* @__PURE__ */
|
|
21796
|
-
/* @__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 }),
|
|
21797
21923
|
children
|
|
21798
21924
|
] });
|
|
21799
21925
|
}
|
|
21800
21926
|
);
|
|
21801
21927
|
|
|
21802
21928
|
// src/components/ProgressBar/ProgressBar.styles.ts
|
|
21803
|
-
import { css as
|
|
21804
|
-
var container3 =
|
|
21929
|
+
import { css as css99, keyframes as keyframes4 } from "@emotion/react";
|
|
21930
|
+
var container3 = css99`
|
|
21805
21931
|
background: var(--gray-50);
|
|
21806
21932
|
margin-block: var(--spacing-sm);
|
|
21807
21933
|
position: relative;
|
|
@@ -21811,13 +21937,13 @@ var container3 = css97`
|
|
|
21811
21937
|
border: solid 1px var(--gray-300);
|
|
21812
21938
|
`;
|
|
21813
21939
|
var themeMap = {
|
|
21814
|
-
primary:
|
|
21940
|
+
primary: css99`
|
|
21815
21941
|
--progress-color: var(--accent-light);
|
|
21816
21942
|
`,
|
|
21817
|
-
secondary:
|
|
21943
|
+
secondary: css99`
|
|
21818
21944
|
--progress-color: var(--accent-alt-light);
|
|
21819
21945
|
`,
|
|
21820
|
-
destructive:
|
|
21946
|
+
destructive: css99`
|
|
21821
21947
|
--progress-color: var(--brand-secondary-5);
|
|
21822
21948
|
`
|
|
21823
21949
|
};
|
|
@@ -21829,10 +21955,10 @@ var slidingBackgroundPosition = keyframes4`
|
|
|
21829
21955
|
background-position: 64px 0;
|
|
21830
21956
|
}
|
|
21831
21957
|
`;
|
|
21832
|
-
var determinate =
|
|
21958
|
+
var determinate = css99`
|
|
21833
21959
|
background-color: var(--progress-color);
|
|
21834
21960
|
`;
|
|
21835
|
-
var indeterminate =
|
|
21961
|
+
var indeterminate = css99`
|
|
21836
21962
|
background-image: linear-gradient(
|
|
21837
21963
|
45deg,
|
|
21838
21964
|
var(--progress-color) 25%,
|
|
@@ -21846,7 +21972,7 @@ var indeterminate = css97`
|
|
|
21846
21972
|
background-size: 64px 64px;
|
|
21847
21973
|
animation: ${slidingBackgroundPosition} 1s linear infinite;
|
|
21848
21974
|
`;
|
|
21849
|
-
var bar =
|
|
21975
|
+
var bar = css99`
|
|
21850
21976
|
position: absolute;
|
|
21851
21977
|
inset: 0;
|
|
21852
21978
|
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
@@ -21854,7 +21980,7 @@ var bar = css97`
|
|
|
21854
21980
|
`;
|
|
21855
21981
|
|
|
21856
21982
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
21857
|
-
import { jsx as
|
|
21983
|
+
import { jsx as jsx135 } from "@emotion/react/jsx-runtime";
|
|
21858
21984
|
function ProgressBar({
|
|
21859
21985
|
current,
|
|
21860
21986
|
max,
|
|
@@ -21864,7 +21990,7 @@ function ProgressBar({
|
|
|
21864
21990
|
}) {
|
|
21865
21991
|
const valueNow = Math.min(current, max);
|
|
21866
21992
|
const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
|
|
21867
|
-
return /* @__PURE__ */
|
|
21993
|
+
return /* @__PURE__ */ jsx135(
|
|
21868
21994
|
"div",
|
|
21869
21995
|
{
|
|
21870
21996
|
css: container3,
|
|
@@ -21875,7 +22001,7 @@ function ProgressBar({
|
|
|
21875
22001
|
"aria-valuemax": max,
|
|
21876
22002
|
"aria-valuenow": valueNow,
|
|
21877
22003
|
...props,
|
|
21878
|
-
children: /* @__PURE__ */
|
|
22004
|
+
children: /* @__PURE__ */ jsx135(
|
|
21879
22005
|
"div",
|
|
21880
22006
|
{
|
|
21881
22007
|
css: [
|
|
@@ -21894,28 +22020,28 @@ function ProgressBar({
|
|
|
21894
22020
|
}
|
|
21895
22021
|
|
|
21896
22022
|
// src/components/ProgressList/ProgressList.tsx
|
|
21897
|
-
import { css as
|
|
22023
|
+
import { css as css101 } from "@emotion/react";
|
|
21898
22024
|
import { CgCheckO as CgCheckO2 } from "@react-icons/all-files/cg/CgCheckO";
|
|
21899
22025
|
import { CgRadioCheck } from "@react-icons/all-files/cg/CgRadioCheck";
|
|
21900
22026
|
import { CgRecord } from "@react-icons/all-files/cg/CgRecord";
|
|
21901
22027
|
import { useMemo as useMemo7 } from "react";
|
|
21902
22028
|
|
|
21903
22029
|
// src/components/ProgressList/styles/ProgressList.styles.ts
|
|
21904
|
-
import { css as
|
|
21905
|
-
var progressListStyles =
|
|
22030
|
+
import { css as css100 } from "@emotion/react";
|
|
22031
|
+
var progressListStyles = css100`
|
|
21906
22032
|
display: flex;
|
|
21907
22033
|
flex-direction: column;
|
|
21908
22034
|
gap: var(--spacing-sm);
|
|
21909
22035
|
list-style-type: none;
|
|
21910
22036
|
`;
|
|
21911
|
-
var progressListItemStyles =
|
|
22037
|
+
var progressListItemStyles = css100`
|
|
21912
22038
|
display: flex;
|
|
21913
22039
|
gap: var(--spacing-base);
|
|
21914
22040
|
align-items: center;
|
|
21915
22041
|
`;
|
|
21916
22042
|
|
|
21917
22043
|
// src/components/ProgressList/ProgressList.tsx
|
|
21918
|
-
import { jsx as
|
|
22044
|
+
import { jsx as jsx136, jsxs as jsxs90 } from "@emotion/react/jsx-runtime";
|
|
21919
22045
|
var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
21920
22046
|
const itemsWithStatus = useMemo7(() => {
|
|
21921
22047
|
const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
|
|
@@ -21929,8 +22055,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
|
21929
22055
|
return { ...item, status };
|
|
21930
22056
|
});
|
|
21931
22057
|
}, [items, inProgressId]);
|
|
21932
|
-
return /* @__PURE__ */
|
|
21933
|
-
return /* @__PURE__ */
|
|
22058
|
+
return /* @__PURE__ */ jsx136("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
|
|
22059
|
+
return /* @__PURE__ */ jsx136(
|
|
21934
22060
|
ProgressListItem,
|
|
21935
22061
|
{
|
|
21936
22062
|
status,
|
|
@@ -21963,12 +22089,12 @@ var ProgressListItem = ({
|
|
|
21963
22089
|
}, [status, error]);
|
|
21964
22090
|
const statusStyles = useMemo7(() => {
|
|
21965
22091
|
if (error) {
|
|
21966
|
-
return errorLevel === "caution" ?
|
|
22092
|
+
return errorLevel === "caution" ? css101`
|
|
21967
22093
|
color: rgb(161, 98, 7);
|
|
21968
22094
|
& svg {
|
|
21969
22095
|
color: rgb(250, 204, 21);
|
|
21970
22096
|
}
|
|
21971
|
-
` :
|
|
22097
|
+
` : css101`
|
|
21972
22098
|
color: rgb(185, 28, 28);
|
|
21973
22099
|
& svg {
|
|
21974
22100
|
color: var(--brand-primary-2);
|
|
@@ -21976,38 +22102,38 @@ var ProgressListItem = ({
|
|
|
21976
22102
|
`;
|
|
21977
22103
|
}
|
|
21978
22104
|
const colorPerStatus = {
|
|
21979
|
-
completed:
|
|
22105
|
+
completed: css101`
|
|
21980
22106
|
opacity: 0.75;
|
|
21981
22107
|
`,
|
|
21982
|
-
inProgress:
|
|
22108
|
+
inProgress: css101`
|
|
21983
22109
|
-webkit-text-stroke-width: thin;
|
|
21984
22110
|
`,
|
|
21985
|
-
queued:
|
|
22111
|
+
queued: css101`
|
|
21986
22112
|
opacity: 0.5;
|
|
21987
22113
|
`
|
|
21988
22114
|
};
|
|
21989
22115
|
return colorPerStatus[status];
|
|
21990
22116
|
}, [status, error, errorLevel]);
|
|
21991
|
-
return /* @__PURE__ */
|
|
21992
|
-
/* @__PURE__ */
|
|
21993
|
-
/* @__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: [
|
|
21994
22120
|
children,
|
|
21995
|
-
/* @__PURE__ */
|
|
22121
|
+
/* @__PURE__ */ jsx136("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
|
|
21996
22122
|
] })
|
|
21997
22123
|
] });
|
|
21998
22124
|
};
|
|
21999
22125
|
|
|
22000
22126
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
22001
|
-
import { css as
|
|
22127
|
+
import { css as css103 } from "@emotion/react";
|
|
22002
22128
|
import { CgCheck as CgCheck5 } from "@react-icons/all-files/cg/CgCheck";
|
|
22003
22129
|
import { useCallback as useCallback12, useEffect as useEffect22, useMemo as useMemo8, useRef as useRef13, useState as useState18 } from "react";
|
|
22004
22130
|
|
|
22005
22131
|
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
22006
|
-
import { css as
|
|
22007
|
-
var segmentedControlRootStyles =
|
|
22132
|
+
import { css as css102 } from "@emotion/react";
|
|
22133
|
+
var segmentedControlRootStyles = css102`
|
|
22008
22134
|
position: relative;
|
|
22009
22135
|
`;
|
|
22010
|
-
var segmentedControlScrollIndicatorsStyles =
|
|
22136
|
+
var segmentedControlScrollIndicatorsStyles = css102`
|
|
22011
22137
|
position: absolute;
|
|
22012
22138
|
inset: 0;
|
|
22013
22139
|
z-index: 1;
|
|
@@ -22035,17 +22161,17 @@ var segmentedControlScrollIndicatorsStyles = css100`
|
|
|
22035
22161
|
background: linear-gradient(to left, var(--background-color) 10%, transparent);
|
|
22036
22162
|
}
|
|
22037
22163
|
`;
|
|
22038
|
-
var segmentedControlScrollIndicatorStartVisibleStyles =
|
|
22164
|
+
var segmentedControlScrollIndicatorStartVisibleStyles = css102`
|
|
22039
22165
|
&::before {
|
|
22040
22166
|
opacity: 1;
|
|
22041
22167
|
}
|
|
22042
22168
|
`;
|
|
22043
|
-
var segmentedControlScrollIndicatorEndVisibleStyles =
|
|
22169
|
+
var segmentedControlScrollIndicatorEndVisibleStyles = css102`
|
|
22044
22170
|
&::after {
|
|
22045
22171
|
opacity: 1;
|
|
22046
22172
|
}
|
|
22047
22173
|
`;
|
|
22048
|
-
var segmentedControlWrapperStyles =
|
|
22174
|
+
var segmentedControlWrapperStyles = css102`
|
|
22049
22175
|
overflow-y: auto;
|
|
22050
22176
|
scroll-behavior: smooth;
|
|
22051
22177
|
scrollbar-width: none;
|
|
@@ -22054,7 +22180,7 @@ var segmentedControlWrapperStyles = css100`
|
|
|
22054
22180
|
height: 0px;
|
|
22055
22181
|
}
|
|
22056
22182
|
`;
|
|
22057
|
-
var segmentedControlStyles =
|
|
22183
|
+
var segmentedControlStyles = css102`
|
|
22058
22184
|
--segmented-control-rounded-value: var(--rounded-base);
|
|
22059
22185
|
--segmented-control-border-width: 1px;
|
|
22060
22186
|
--segmented-control-selected-color: var(--brand-secondary-3);
|
|
@@ -22073,14 +22199,14 @@ var segmentedControlStyles = css100`
|
|
|
22073
22199
|
border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
|
|
22074
22200
|
font-size: var(--fs-xs);
|
|
22075
22201
|
`;
|
|
22076
|
-
var segmentedControlVerticalStyles =
|
|
22202
|
+
var segmentedControlVerticalStyles = css102`
|
|
22077
22203
|
flex-direction: column;
|
|
22078
22204
|
--segmented-control-first-border-radius: var(--segmented-control-rounded-value)
|
|
22079
22205
|
var(--segmented-control-rounded-value) 0 0;
|
|
22080
22206
|
--segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
|
|
22081
22207
|
var(--segmented-control-rounded-value);
|
|
22082
22208
|
`;
|
|
22083
|
-
var segmentedControlItemStyles =
|
|
22209
|
+
var segmentedControlItemStyles = css102`
|
|
22084
22210
|
&:first-of-type label {
|
|
22085
22211
|
border-radius: var(--segmented-control-first-border-radius);
|
|
22086
22212
|
}
|
|
@@ -22088,10 +22214,10 @@ var segmentedControlItemStyles = css100`
|
|
|
22088
22214
|
border-radius: var(--segmented-control-last-border-radius);
|
|
22089
22215
|
}
|
|
22090
22216
|
`;
|
|
22091
|
-
var segmentedControlInputStyles =
|
|
22217
|
+
var segmentedControlInputStyles = css102`
|
|
22092
22218
|
${accessibleHidden}
|
|
22093
22219
|
`;
|
|
22094
|
-
var segmentedControlLabelStyles = (checked, disabled2) =>
|
|
22220
|
+
var segmentedControlLabelStyles = (checked, disabled2) => css102`
|
|
22095
22221
|
position: relative;
|
|
22096
22222
|
display: flex;
|
|
22097
22223
|
align-items: center;
|
|
@@ -22158,25 +22284,25 @@ var segmentedControlLabelStyles = (checked, disabled2) => css100`
|
|
|
22158
22284
|
`}
|
|
22159
22285
|
}
|
|
22160
22286
|
`;
|
|
22161
|
-
var segmentedControlLabelIconOnlyStyles =
|
|
22287
|
+
var segmentedControlLabelIconOnlyStyles = css102`
|
|
22162
22288
|
padding-inline: 0.5em;
|
|
22163
22289
|
`;
|
|
22164
|
-
var segmentedControlLabelCheckStyles =
|
|
22290
|
+
var segmentedControlLabelCheckStyles = css102`
|
|
22165
22291
|
opacity: 0.5;
|
|
22166
22292
|
`;
|
|
22167
|
-
var segmentedControlLabelContentStyles =
|
|
22293
|
+
var segmentedControlLabelContentStyles = css102`
|
|
22168
22294
|
display: flex;
|
|
22169
22295
|
align-items: center;
|
|
22170
22296
|
justify-content: center;
|
|
22171
22297
|
gap: var(--spacing-sm);
|
|
22172
22298
|
height: 100%;
|
|
22173
22299
|
`;
|
|
22174
|
-
var segmentedControlLabelTextStyles =
|
|
22300
|
+
var segmentedControlLabelTextStyles = css102`
|
|
22175
22301
|
white-space: nowrap;
|
|
22176
22302
|
`;
|
|
22177
22303
|
|
|
22178
22304
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
22179
|
-
import { jsx as
|
|
22305
|
+
import { jsx as jsx137, jsxs as jsxs91 } from "@emotion/react/jsx-runtime";
|
|
22180
22306
|
var SegmentedControl = ({
|
|
22181
22307
|
name,
|
|
22182
22308
|
options,
|
|
@@ -22204,10 +22330,10 @@ var SegmentedControl = ({
|
|
|
22204
22330
|
);
|
|
22205
22331
|
const sizeStyles = useMemo8(() => {
|
|
22206
22332
|
const map = {
|
|
22207
|
-
sm:
|
|
22208
|
-
md:
|
|
22209
|
-
lg:
|
|
22210
|
-
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)" })
|
|
22211
22337
|
};
|
|
22212
22338
|
return map[size];
|
|
22213
22339
|
}, [size]);
|
|
@@ -22235,8 +22361,8 @@ var SegmentedControl = ({
|
|
|
22235
22361
|
wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
|
|
22236
22362
|
};
|
|
22237
22363
|
}, []);
|
|
22238
|
-
return /* @__PURE__ */
|
|
22239
|
-
/* @__PURE__ */
|
|
22364
|
+
return /* @__PURE__ */ jsxs91("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
|
|
22365
|
+
/* @__PURE__ */ jsx137("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ jsx137(
|
|
22240
22366
|
"div",
|
|
22241
22367
|
{
|
|
22242
22368
|
css: [
|
|
@@ -22252,12 +22378,12 @@ var SegmentedControl = ({
|
|
|
22252
22378
|
}
|
|
22253
22379
|
const text = option.label ? option.label : option.icon ? null : String(option.value);
|
|
22254
22380
|
const isDisabled = disabled2 || option.disabled;
|
|
22255
|
-
return /* @__PURE__ */
|
|
22381
|
+
return /* @__PURE__ */ jsx137(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx137(
|
|
22256
22382
|
"div",
|
|
22257
22383
|
{
|
|
22258
22384
|
css: segmentedControlItemStyles,
|
|
22259
22385
|
"data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
|
|
22260
|
-
children: /* @__PURE__ */
|
|
22386
|
+
children: /* @__PURE__ */ jsxs91(
|
|
22261
22387
|
"label",
|
|
22262
22388
|
{
|
|
22263
22389
|
css: [
|
|
@@ -22266,7 +22392,7 @@ var SegmentedControl = ({
|
|
|
22266
22392
|
isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
|
|
22267
22393
|
],
|
|
22268
22394
|
children: [
|
|
22269
|
-
/* @__PURE__ */
|
|
22395
|
+
/* @__PURE__ */ jsx137(
|
|
22270
22396
|
"input",
|
|
22271
22397
|
{
|
|
22272
22398
|
css: segmentedControlInputStyles,
|
|
@@ -22278,10 +22404,10 @@ var SegmentedControl = ({
|
|
|
22278
22404
|
disabled: isDisabled
|
|
22279
22405
|
}
|
|
22280
22406
|
),
|
|
22281
|
-
option.value !== value || noCheckmark ? null : /* @__PURE__ */
|
|
22282
|
-
/* @__PURE__ */
|
|
22283
|
-
!option.icon ? null : /* @__PURE__ */
|
|
22284
|
-
!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 })
|
|
22285
22411
|
] })
|
|
22286
22412
|
]
|
|
22287
22413
|
}
|
|
@@ -22291,7 +22417,7 @@ var SegmentedControl = ({
|
|
|
22291
22417
|
})
|
|
22292
22418
|
}
|
|
22293
22419
|
) }),
|
|
22294
|
-
/* @__PURE__ */
|
|
22420
|
+
/* @__PURE__ */ jsx137(
|
|
22295
22421
|
"div",
|
|
22296
22422
|
{
|
|
22297
22423
|
css: [
|
|
@@ -22305,18 +22431,18 @@ var SegmentedControl = ({
|
|
|
22305
22431
|
};
|
|
22306
22432
|
|
|
22307
22433
|
// src/components/Skeleton/Skeleton.styles.ts
|
|
22308
|
-
import { css as
|
|
22434
|
+
import { css as css104, keyframes as keyframes5 } from "@emotion/react";
|
|
22309
22435
|
var lightFadingOut = keyframes5`
|
|
22310
22436
|
from { opacity: 0.1; }
|
|
22311
22437
|
to { opacity: 0.025; }
|
|
22312
22438
|
`;
|
|
22313
|
-
var skeletonStyles =
|
|
22439
|
+
var skeletonStyles = css104`
|
|
22314
22440
|
animation: ${lightFadingOut} 1s ease-out infinite alternate;
|
|
22315
22441
|
background-color: var(--gray-900);
|
|
22316
22442
|
`;
|
|
22317
22443
|
|
|
22318
22444
|
// src/components/Skeleton/Skeleton.tsx
|
|
22319
|
-
import { jsx as
|
|
22445
|
+
import { jsx as jsx138 } from "@emotion/react/jsx-runtime";
|
|
22320
22446
|
var Skeleton = ({
|
|
22321
22447
|
width = "100%",
|
|
22322
22448
|
height = "1.25rem",
|
|
@@ -22324,7 +22450,7 @@ var Skeleton = ({
|
|
|
22324
22450
|
circle = false,
|
|
22325
22451
|
children,
|
|
22326
22452
|
...otherProps
|
|
22327
|
-
}) => /* @__PURE__ */
|
|
22453
|
+
}) => /* @__PURE__ */ jsx138(
|
|
22328
22454
|
"div",
|
|
22329
22455
|
{
|
|
22330
22456
|
css: [
|
|
@@ -22347,8 +22473,8 @@ var Skeleton = ({
|
|
|
22347
22473
|
import { forwardRef as forwardRef25 } from "react";
|
|
22348
22474
|
|
|
22349
22475
|
// src/components/Switch/Switch.styles.ts
|
|
22350
|
-
import { css as
|
|
22351
|
-
var SwitchInputContainer =
|
|
22476
|
+
import { css as css105 } from "@emotion/react";
|
|
22477
|
+
var SwitchInputContainer = css105`
|
|
22352
22478
|
cursor: pointer;
|
|
22353
22479
|
display: inline-block;
|
|
22354
22480
|
position: relative;
|
|
@@ -22357,7 +22483,7 @@ var SwitchInputContainer = css103`
|
|
|
22357
22483
|
vertical-align: middle;
|
|
22358
22484
|
user-select: none;
|
|
22359
22485
|
`;
|
|
22360
|
-
var SwitchInput = (size) =>
|
|
22486
|
+
var SwitchInput = (size) => css105`
|
|
22361
22487
|
appearance: none;
|
|
22362
22488
|
border-radius: var(--rounded-full);
|
|
22363
22489
|
background-color: var(--white);
|
|
@@ -22396,7 +22522,7 @@ var SwitchInput = (size) => css103`
|
|
|
22396
22522
|
cursor: not-allowed;
|
|
22397
22523
|
}
|
|
22398
22524
|
`;
|
|
22399
|
-
var SwitchInputDisabled =
|
|
22525
|
+
var SwitchInputDisabled = css105`
|
|
22400
22526
|
opacity: var(--opacity-50);
|
|
22401
22527
|
cursor: not-allowed;
|
|
22402
22528
|
|
|
@@ -22404,7 +22530,7 @@ var SwitchInputDisabled = css103`
|
|
|
22404
22530
|
cursor: not-allowed;
|
|
22405
22531
|
}
|
|
22406
22532
|
`;
|
|
22407
|
-
var SwitchInputLabel = (size) =>
|
|
22533
|
+
var SwitchInputLabel = (size) => css105`
|
|
22408
22534
|
align-items: center;
|
|
22409
22535
|
color: var(--typography-base);
|
|
22410
22536
|
display: inline-flex;
|
|
@@ -22426,32 +22552,32 @@ var SwitchInputLabel = (size) => css103`
|
|
|
22426
22552
|
top: 0;
|
|
22427
22553
|
}
|
|
22428
22554
|
`;
|
|
22429
|
-
var SwitchText = (size) =>
|
|
22555
|
+
var SwitchText = (size) => css105`
|
|
22430
22556
|
color: var(--gray-500);
|
|
22431
22557
|
font-size: var(--fs-sm);
|
|
22432
22558
|
padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
|
|
22433
22559
|
`;
|
|
22434
22560
|
|
|
22435
22561
|
// src/components/Switch/Switch.tsx
|
|
22436
|
-
import { Fragment as Fragment21, jsx as
|
|
22562
|
+
import { Fragment as Fragment21, jsx as jsx139, jsxs as jsxs92 } from "@emotion/react/jsx-runtime";
|
|
22437
22563
|
var Switch = forwardRef25(
|
|
22438
22564
|
({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
|
|
22439
22565
|
let additionalText = infoText;
|
|
22440
22566
|
if (infoText && toggleText) {
|
|
22441
22567
|
additionalText = inputProps.checked ? toggleText : infoText;
|
|
22442
22568
|
}
|
|
22443
|
-
return /* @__PURE__ */
|
|
22444
|
-
/* @__PURE__ */
|
|
22569
|
+
return /* @__PURE__ */ jsxs92(Fragment21, { children: [
|
|
22570
|
+
/* @__PURE__ */ jsxs92(
|
|
22445
22571
|
"label",
|
|
22446
22572
|
{
|
|
22447
22573
|
css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0],
|
|
22448
22574
|
children: [
|
|
22449
|
-
/* @__PURE__ */
|
|
22450
|
-
/* @__PURE__ */
|
|
22575
|
+
/* @__PURE__ */ jsx139("input", { type: "checkbox", css: SwitchInput(switchSize), ...inputProps, ref }),
|
|
22576
|
+
/* @__PURE__ */ jsx139("span", { css: SwitchInputLabel(switchSize), children: label })
|
|
22451
22577
|
]
|
|
22452
22578
|
}
|
|
22453
22579
|
),
|
|
22454
|
-
additionalText ? /* @__PURE__ */
|
|
22580
|
+
additionalText ? /* @__PURE__ */ jsx139("p", { css: SwitchText(switchSize), children: additionalText }) : null,
|
|
22455
22581
|
children
|
|
22456
22582
|
] });
|
|
22457
22583
|
}
|
|
@@ -22461,8 +22587,8 @@ var Switch = forwardRef25(
|
|
|
22461
22587
|
import * as React24 from "react";
|
|
22462
22588
|
|
|
22463
22589
|
// src/components/Table/Table.styles.ts
|
|
22464
|
-
import { css as
|
|
22465
|
-
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`
|
|
22466
22592
|
border-bottom: 1px solid var(--gray-400);
|
|
22467
22593
|
border-collapse: collapse;
|
|
22468
22594
|
min-width: 100%;
|
|
@@ -22482,54 +22608,54 @@ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => css104`
|
|
|
22482
22608
|
background-color: var(--gray-50);
|
|
22483
22609
|
}
|
|
22484
22610
|
`;
|
|
22485
|
-
var tableHead =
|
|
22611
|
+
var tableHead = css106`
|
|
22486
22612
|
color: var(--typography-base);
|
|
22487
22613
|
text-align: left;
|
|
22488
22614
|
`;
|
|
22489
|
-
var tableRow =
|
|
22615
|
+
var tableRow = css106`
|
|
22490
22616
|
border-bottom: 1px solid var(--gray-100);
|
|
22491
22617
|
`;
|
|
22492
|
-
var tableCellHead =
|
|
22618
|
+
var tableCellHead = css106`
|
|
22493
22619
|
font-size: var(--fs-sm);
|
|
22494
22620
|
text-transform: uppercase;
|
|
22495
22621
|
font-weight: var(--fw-bold);
|
|
22496
22622
|
`;
|
|
22497
22623
|
|
|
22498
22624
|
// src/components/Table/Table.tsx
|
|
22499
|
-
import { jsx as
|
|
22625
|
+
import { jsx as jsx140 } from "@emotion/react/jsx-runtime";
|
|
22500
22626
|
var Table = React24.forwardRef(
|
|
22501
22627
|
({ children, cellPadding, ...otherProps }, ref) => {
|
|
22502
|
-
return /* @__PURE__ */
|
|
22628
|
+
return /* @__PURE__ */ jsx140("table", { ref, css: table({ cellPadding }), ...otherProps, children });
|
|
22503
22629
|
}
|
|
22504
22630
|
);
|
|
22505
22631
|
var TableHead = React24.forwardRef(
|
|
22506
22632
|
({ children, ...otherProps }, ref) => {
|
|
22507
|
-
return /* @__PURE__ */
|
|
22633
|
+
return /* @__PURE__ */ jsx140("thead", { ref, css: tableHead, ...otherProps, children });
|
|
22508
22634
|
}
|
|
22509
22635
|
);
|
|
22510
22636
|
var TableBody = React24.forwardRef(
|
|
22511
22637
|
({ children, ...otherProps }, ref) => {
|
|
22512
|
-
return /* @__PURE__ */
|
|
22638
|
+
return /* @__PURE__ */ jsx140("tbody", { ref, ...otherProps, children });
|
|
22513
22639
|
}
|
|
22514
22640
|
);
|
|
22515
22641
|
var TableFoot = React24.forwardRef(
|
|
22516
22642
|
({ children, ...otherProps }, ref) => {
|
|
22517
|
-
return /* @__PURE__ */
|
|
22643
|
+
return /* @__PURE__ */ jsx140("tfoot", { ref, ...otherProps, children });
|
|
22518
22644
|
}
|
|
22519
22645
|
);
|
|
22520
22646
|
var TableRow = React24.forwardRef(
|
|
22521
22647
|
({ children, ...otherProps }, ref) => {
|
|
22522
|
-
return /* @__PURE__ */
|
|
22648
|
+
return /* @__PURE__ */ jsx140("tr", { ref, css: tableRow, ...otherProps, children });
|
|
22523
22649
|
}
|
|
22524
22650
|
);
|
|
22525
22651
|
var TableCellHead = React24.forwardRef(
|
|
22526
22652
|
({ children, ...otherProps }, ref) => {
|
|
22527
|
-
return /* @__PURE__ */
|
|
22653
|
+
return /* @__PURE__ */ jsx140("th", { ref, css: tableCellHead, ...otherProps, children });
|
|
22528
22654
|
}
|
|
22529
22655
|
);
|
|
22530
22656
|
var TableCellData = React24.forwardRef(
|
|
22531
22657
|
({ children, ...otherProps }, ref) => {
|
|
22532
|
-
return /* @__PURE__ */
|
|
22658
|
+
return /* @__PURE__ */ jsx140("td", { ref, ...otherProps, children });
|
|
22533
22659
|
}
|
|
22534
22660
|
);
|
|
22535
22661
|
|
|
@@ -22544,8 +22670,8 @@ import {
|
|
|
22544
22670
|
import { useCallback as useCallback13, useEffect as useEffect23, useMemo as useMemo9 } from "react";
|
|
22545
22671
|
|
|
22546
22672
|
// src/components/Tabs/Tabs.styles.ts
|
|
22547
|
-
import { css as
|
|
22548
|
-
var tabButtonStyles =
|
|
22673
|
+
import { css as css107 } from "@emotion/react";
|
|
22674
|
+
var tabButtonStyles = css107`
|
|
22549
22675
|
align-items: center;
|
|
22550
22676
|
border: 0;
|
|
22551
22677
|
height: 2.5rem;
|
|
@@ -22562,14 +22688,14 @@ var tabButtonStyles = css105`
|
|
|
22562
22688
|
box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
|
|
22563
22689
|
}
|
|
22564
22690
|
`;
|
|
22565
|
-
var tabButtonGroupStyles =
|
|
22691
|
+
var tabButtonGroupStyles = css107`
|
|
22566
22692
|
display: flex;
|
|
22567
22693
|
gap: var(--spacing-base);
|
|
22568
22694
|
border-bottom: 1px solid var(--gray-300);
|
|
22569
22695
|
`;
|
|
22570
22696
|
|
|
22571
22697
|
// src/components/Tabs/Tabs.tsx
|
|
22572
|
-
import { jsx as
|
|
22698
|
+
import { jsx as jsx141 } from "@emotion/react/jsx-runtime";
|
|
22573
22699
|
var useCurrentTab = () => {
|
|
22574
22700
|
const context = useAriakitTabStore();
|
|
22575
22701
|
if (!context) {
|
|
@@ -22606,28 +22732,28 @@ var Tabs = ({
|
|
|
22606
22732
|
tab.setSelectedId(selected);
|
|
22607
22733
|
}
|
|
22608
22734
|
}, [selected, tab]);
|
|
22609
|
-
return /* @__PURE__ */
|
|
22735
|
+
return /* @__PURE__ */ jsx141(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
|
|
22610
22736
|
};
|
|
22611
22737
|
var TabButtonGroup = ({ children, ...props }) => {
|
|
22612
|
-
return /* @__PURE__ */
|
|
22738
|
+
return /* @__PURE__ */ jsx141(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
|
|
22613
22739
|
};
|
|
22614
22740
|
var TabButton = ({
|
|
22615
22741
|
children,
|
|
22616
22742
|
id,
|
|
22617
22743
|
...props
|
|
22618
22744
|
}) => {
|
|
22619
|
-
return /* @__PURE__ */
|
|
22745
|
+
return /* @__PURE__ */ jsx141(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
|
|
22620
22746
|
};
|
|
22621
22747
|
var TabContent = ({
|
|
22622
22748
|
children,
|
|
22623
22749
|
...props
|
|
22624
22750
|
}) => {
|
|
22625
|
-
return /* @__PURE__ */
|
|
22751
|
+
return /* @__PURE__ */ jsx141(AriakitTabPanel, { ...props, children });
|
|
22626
22752
|
};
|
|
22627
22753
|
|
|
22628
22754
|
// src/components/Validation/StatusBullet.styles.ts
|
|
22629
|
-
import { css as
|
|
22630
|
-
var StatusBulletContainer =
|
|
22755
|
+
import { css as css108 } from "@emotion/react";
|
|
22756
|
+
var StatusBulletContainer = css108`
|
|
22631
22757
|
align-items: center;
|
|
22632
22758
|
align-self: center;
|
|
22633
22759
|
color: var(--gray-500);
|
|
@@ -22644,33 +22770,33 @@ var StatusBulletContainer = css106`
|
|
|
22644
22770
|
display: block;
|
|
22645
22771
|
}
|
|
22646
22772
|
`;
|
|
22647
|
-
var StatusBulletBase =
|
|
22773
|
+
var StatusBulletBase = css108`
|
|
22648
22774
|
font-size: var(--fs-sm);
|
|
22649
22775
|
&:before {
|
|
22650
22776
|
width: var(--fs-xs);
|
|
22651
22777
|
height: var(--fs-xs);
|
|
22652
22778
|
}
|
|
22653
22779
|
`;
|
|
22654
|
-
var StatusBulletSmall =
|
|
22780
|
+
var StatusBulletSmall = css108`
|
|
22655
22781
|
font-size: var(--fs-xs);
|
|
22656
22782
|
&:before {
|
|
22657
22783
|
width: var(--fs-xxs);
|
|
22658
22784
|
height: var(--fs-xxs);
|
|
22659
22785
|
}
|
|
22660
22786
|
`;
|
|
22661
|
-
var StatusDraft =
|
|
22787
|
+
var StatusDraft = css108`
|
|
22662
22788
|
&:before {
|
|
22663
22789
|
background: var(--white);
|
|
22664
22790
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
22665
22791
|
}
|
|
22666
22792
|
`;
|
|
22667
|
-
var StatusModified =
|
|
22793
|
+
var StatusModified = css108`
|
|
22668
22794
|
&:before {
|
|
22669
22795
|
background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
|
|
22670
22796
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
22671
22797
|
}
|
|
22672
22798
|
`;
|
|
22673
|
-
var StatusError =
|
|
22799
|
+
var StatusError = css108`
|
|
22674
22800
|
color: var(--error);
|
|
22675
22801
|
&:before {
|
|
22676
22802
|
/* TODO: replace this with an svg icon */
|
|
@@ -22683,29 +22809,29 @@ var StatusError = css106`
|
|
|
22683
22809
|
);
|
|
22684
22810
|
}
|
|
22685
22811
|
`;
|
|
22686
|
-
var StatusPublished =
|
|
22812
|
+
var StatusPublished = css108`
|
|
22687
22813
|
&:before {
|
|
22688
22814
|
background: var(--accent-dark);
|
|
22689
22815
|
}
|
|
22690
22816
|
`;
|
|
22691
|
-
var StatusOrphan =
|
|
22817
|
+
var StatusOrphan = css108`
|
|
22692
22818
|
&:before {
|
|
22693
22819
|
background: var(--brand-secondary-5);
|
|
22694
22820
|
}
|
|
22695
22821
|
`;
|
|
22696
|
-
var StatusUnknown =
|
|
22822
|
+
var StatusUnknown = css108`
|
|
22697
22823
|
&:before {
|
|
22698
22824
|
background: var(--gray-800);
|
|
22699
22825
|
}
|
|
22700
22826
|
`;
|
|
22701
|
-
var StatusDeleted =
|
|
22827
|
+
var StatusDeleted = css108`
|
|
22702
22828
|
&:before {
|
|
22703
22829
|
background: var(--error);
|
|
22704
22830
|
}
|
|
22705
22831
|
`;
|
|
22706
22832
|
|
|
22707
22833
|
// src/components/Validation/StatusBullet.tsx
|
|
22708
|
-
import { jsx as
|
|
22834
|
+
import { jsx as jsx142 } from "@emotion/react/jsx-runtime";
|
|
22709
22835
|
var StatusBullet = ({
|
|
22710
22836
|
status,
|
|
22711
22837
|
hideText = false,
|
|
@@ -22725,7 +22851,7 @@ var StatusBullet = ({
|
|
|
22725
22851
|
Deleted: StatusDeleted
|
|
22726
22852
|
};
|
|
22727
22853
|
const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
|
|
22728
|
-
return /* @__PURE__ */
|
|
22854
|
+
return /* @__PURE__ */ jsx142(
|
|
22729
22855
|
"span",
|
|
22730
22856
|
{
|
|
22731
22857
|
role: "status",
|
|
@@ -22835,11 +22961,12 @@ export {
|
|
|
22835
22961
|
ObjectGridItemCoverButton,
|
|
22836
22962
|
ObjectGridItemHeading2 as ObjectGridItemHeading,
|
|
22837
22963
|
ObjectGridItemIconWithTooltip,
|
|
22964
|
+
ObjectGridItemLoadingSkeleton2 as ObjectGridItemLoadingSkeleton,
|
|
22838
22965
|
ObjectItemLoadingSkeleton,
|
|
22839
22966
|
ObjectListItem2 as ObjectListItem,
|
|
22840
22967
|
ObjectListItemContainer2 as ObjectListItemContainer,
|
|
22841
22968
|
ObjectListItemCover2 as ObjectListItemCover,
|
|
22842
|
-
ObjectListItemHeading,
|
|
22969
|
+
ObjectListItemHeading2 as ObjectListItemHeading,
|
|
22843
22970
|
PageHeaderSection,
|
|
22844
22971
|
Pagination,
|
|
22845
22972
|
Paragraph,
|