@uniformdev/design-system 19.159.0 → 19.159.1-alpha.27
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 +888 -483
- package/dist/index.d.mts +110 -21
- package/dist/index.d.ts +110 -21
- package/dist/index.js +937 -508
- package/package.json +10 -10
package/dist/esm/index.js
CHANGED
|
@@ -7,7 +7,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
|
|
|
7
7
|
/* @__PURE__ */ jsx2(
|
|
8
8
|
"link",
|
|
9
9
|
{
|
|
10
|
-
href: "https://fonts.googleapis.com/css2?family=DM+
|
|
10
|
+
href: "https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap",
|
|
11
11
|
rel: "stylesheet"
|
|
12
12
|
}
|
|
13
13
|
),
|
|
@@ -66,6 +66,10 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
|
|
|
66
66
|
|
|
67
67
|
--action-destructive-default: var(--brand-secondary-5);
|
|
68
68
|
--action-destructive-hover: #e07571;
|
|
69
|
+
--action-destructive-active: rbga(210, 50, 45, 0.05); /* #d2322d */
|
|
70
|
+
--action-destructive-disabled: #f87171;
|
|
71
|
+
|
|
72
|
+
|
|
69
73
|
|
|
70
74
|
/* tertiary action */
|
|
71
75
|
--tertiary-action-default: var(--gray-700);
|
|
@@ -147,7 +151,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
|
|
|
147
151
|
/* font family */
|
|
148
152
|
--ff-base: 'DM Sans', sans-serif;
|
|
149
153
|
--ff-heading: 'Quantico', sans-serif;
|
|
150
|
-
--ff-mono: '
|
|
154
|
+
--ff-mono: 'DM Mono', monospace;
|
|
151
155
|
|
|
152
156
|
/* max text width */
|
|
153
157
|
--prose: 65ch;
|
|
@@ -173,6 +177,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
|
|
|
173
177
|
--rounded-sm: 0.125rem; /* 2px */
|
|
174
178
|
--rounded-base: 0.25rem; /* 4px */
|
|
175
179
|
--rounded-md: 0.375rem; /* 6px */
|
|
180
|
+
--rounded-lg: 0.5rem; /* 8px */
|
|
176
181
|
|
|
177
182
|
/* anything below here should be removed as its not in our style guide */
|
|
178
183
|
--rounded-xl: 0.75rem;
|
|
@@ -934,16 +939,16 @@ var buttonPrimary = css8`
|
|
|
934
939
|
})}
|
|
935
940
|
`;
|
|
936
941
|
var buttonDestructive = css8`
|
|
937
|
-
background: var(--
|
|
942
|
+
background: var(--action-destructive-default);
|
|
938
943
|
color: var(--white);
|
|
939
944
|
|
|
940
945
|
&:disabled {
|
|
941
|
-
background: var(--gray-300);
|
|
942
946
|
color: var(--white);
|
|
947
|
+
opacity: var(--opacity-50);
|
|
943
948
|
}
|
|
944
949
|
|
|
945
950
|
${buttonRippleEffect({
|
|
946
|
-
hoverColor: "var(--
|
|
951
|
+
hoverColor: "var(--action-destructive-default)",
|
|
947
952
|
activeColor: "var(--action-destructive-hover)"
|
|
948
953
|
})}
|
|
949
954
|
`;
|
|
@@ -1021,19 +1026,20 @@ var buttonGhost = css8`
|
|
|
1021
1026
|
`;
|
|
1022
1027
|
var buttonGhostDestructive = css8`
|
|
1023
1028
|
background: transparent;
|
|
1024
|
-
color: var(--
|
|
1029
|
+
color: var(--action-destructive-default);
|
|
1025
1030
|
|
|
1026
1031
|
&:hover {
|
|
1027
|
-
|
|
1032
|
+
outline: 1px solid var(--action-destructive-hover);
|
|
1033
|
+
color: var(--action-destructive-hover);
|
|
1028
1034
|
}
|
|
1029
1035
|
|
|
1030
1036
|
&:disabled {
|
|
1031
1037
|
background: transparent;
|
|
1032
|
-
|
|
1033
|
-
|
|
1038
|
+
color: var(--action-destructive-disabled);
|
|
1039
|
+
opacity: var(--opacity-50);
|
|
1034
1040
|
}
|
|
1035
1041
|
|
|
1036
|
-
${buttonRippleEffect({ hoverColor: "var(--white)", activeColor: "var(--
|
|
1042
|
+
${buttonRippleEffect({ hoverColor: "var(--white)", activeColor: "var(--action-destructive-active)" })}
|
|
1037
1043
|
`;
|
|
1038
1044
|
var buttonTertiary = css8`
|
|
1039
1045
|
background: var(--tertiary-action-default);
|
|
@@ -1150,7 +1156,7 @@ var toastContainerStyles = css10`
|
|
|
1150
1156
|
${functionalColors}
|
|
1151
1157
|
|
|
1152
1158
|
--toastify-color-light: white;
|
|
1153
|
-
--toastify-color-info: var(--utility-
|
|
1159
|
+
--toastify-color-info: var(--utility-info-icon);
|
|
1154
1160
|
--toastify-color-success: var(--utility-success-icon);
|
|
1155
1161
|
--toastify-color-warning: var(--utility-caution-icon);
|
|
1156
1162
|
--toastify-color-error: var(--utility-danger-icon);
|
|
@@ -3132,6 +3138,25 @@ var uniformComponentPatternIcon = GenIcon2({
|
|
|
3132
3138
|
}
|
|
3133
3139
|
]
|
|
3134
3140
|
});
|
|
3141
|
+
var uniformCompositionPatternIcon = GenIcon2({
|
|
3142
|
+
tag: "svg",
|
|
3143
|
+
attr: {
|
|
3144
|
+
role: "img",
|
|
3145
|
+
viewBox: "0 0 24 24"
|
|
3146
|
+
},
|
|
3147
|
+
child: [
|
|
3148
|
+
{
|
|
3149
|
+
tag: "path",
|
|
3150
|
+
attr: {
|
|
3151
|
+
fillRule: "evenodd",
|
|
3152
|
+
clipRule: "evenodd",
|
|
3153
|
+
fill: "currentColor",
|
|
3154
|
+
d: "M6.92163 12H4V13.5H8.42163L6.92163 12ZM12.7397 17.8181C12.6083 17.9314 12.4372 18 12.25 18H3.25C2.83579 18 2.5 17.6642 2.5 17.25V6.75C2.5 6.33579 2.83579 6 3.25 6H8.5V9.75H9.17163L10.6716 8.25H10V6.07501C10.7159 6.22033 11.3577 6.56957 11.8622 7.05945L12.9229 5.99871C11.9761 5.07158 10.6798 4.5 9.25 4.5H3.25C2.00736 4.5 1 5.50736 1 6.75V17.25C1 18.4926 2.00736 19.5 3.25 19.5H12.25C12.8514 19.5 13.3977 19.2641 13.8013 18.8797L12.7397 17.8181ZM11.4216 16.5H4V15H9.92163L11.4216 16.5ZM4 10.5H7V9H4V10.5ZM12.5784 12L16.3497 8.22876L20.1209 12L16.3497 15.7712L12.5784 12ZM16.3497 18.5997L9.75 12L16.3497 5.40034L22.9493 12L16.3497 18.5997Z"
|
|
3155
|
+
},
|
|
3156
|
+
child: []
|
|
3157
|
+
}
|
|
3158
|
+
]
|
|
3159
|
+
});
|
|
3135
3160
|
var uniformContentTypeIcon = CgList;
|
|
3136
3161
|
var uniformEntryIcon = CgPen;
|
|
3137
3162
|
var uniformEntryPatternIcon = GenIcon2({
|
|
@@ -12177,15 +12202,18 @@ import { CgChevronDown as CgChevronDown3 } from "@react-icons/all-files/cg/CgChe
|
|
|
12177
12202
|
import { css as css24 } from "@emotion/react";
|
|
12178
12203
|
import { CgChevronDown } from "@react-icons/all-files/cg/CgChevronDown";
|
|
12179
12204
|
import { jsx as jsx25, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
|
|
12180
|
-
var buttonStyle = css24`
|
|
12205
|
+
var buttonStyle = (bgColor) => css24`
|
|
12181
12206
|
border: 0;
|
|
12182
|
-
background-color:
|
|
12207
|
+
background-color: ${bgColor};
|
|
12183
12208
|
display: block;
|
|
12184
12209
|
font-size: var(--fs-sm);
|
|
12185
12210
|
line-height: 1.5;
|
|
12211
|
+
transition: background-color var(--duration-fast) var(--timing-ease-out),
|
|
12212
|
+
outline var(--duration-fast) var(--timing-ease-out);
|
|
12213
|
+
outline: 1px solid transparent;
|
|
12186
12214
|
|
|
12187
12215
|
&:hover {
|
|
12188
|
-
outline:
|
|
12216
|
+
outline-color: var(--gray-300);
|
|
12189
12217
|
background-color: var(--gray-100);
|
|
12190
12218
|
}
|
|
12191
12219
|
|
|
@@ -12193,8 +12221,12 @@ var buttonStyle = css24`
|
|
|
12193
12221
|
color: var(--gray-400);
|
|
12194
12222
|
}
|
|
12195
12223
|
`;
|
|
12196
|
-
function DropdownStyleMenuTrigger({
|
|
12197
|
-
|
|
12224
|
+
function DropdownStyleMenuTrigger({
|
|
12225
|
+
bgColor = "var(--white)",
|
|
12226
|
+
children,
|
|
12227
|
+
...buttonProps
|
|
12228
|
+
}) {
|
|
12229
|
+
return /* @__PURE__ */ jsx25("button", { ...buttonProps, css: buttonStyle(bgColor), type: "button", children: /* @__PURE__ */ jsxs13(HorizontalRhythm, { align: "center", gap: "xs", children: [
|
|
12198
12230
|
/* @__PURE__ */ jsx25("div", { children }),
|
|
12199
12231
|
/* @__PURE__ */ jsx25(CgChevronDown, { size: "1rem" })
|
|
12200
12232
|
] }) });
|
|
@@ -12422,19 +12454,14 @@ var Menu = React7.forwardRef(function Menu2({
|
|
|
12422
12454
|
"data-testid": testId != null ? testId : "more-menu",
|
|
12423
12455
|
hideOnHoverOutside: (event) => {
|
|
12424
12456
|
var _a;
|
|
12425
|
-
if (!menu.parent)
|
|
12426
|
-
return false;
|
|
12457
|
+
if (!menu.parent) return false;
|
|
12427
12458
|
const { contentElement, anchorElement } = menu.getState();
|
|
12428
12459
|
const [target] = event.composedPath();
|
|
12429
|
-
if (!target)
|
|
12430
|
-
return false;
|
|
12460
|
+
if (!target) return false;
|
|
12431
12461
|
const activeElement = (_a = target.ownerDocument) == null ? void 0 : _a.activeElement;
|
|
12432
|
-
if (anchorElement == null ? void 0 : anchorElement.contains(target))
|
|
12433
|
-
|
|
12434
|
-
if (
|
|
12435
|
-
return false;
|
|
12436
|
-
if (activeElement && target.contains(activeElement))
|
|
12437
|
-
return false;
|
|
12462
|
+
if (anchorElement == null ? void 0 : anchorElement.contains(target)) return false;
|
|
12463
|
+
if (contentElement == null ? void 0 : contentElement.contains(target)) return false;
|
|
12464
|
+
if (activeElement && target.contains(activeElement)) return false;
|
|
12438
12465
|
return true;
|
|
12439
12466
|
},
|
|
12440
12467
|
children: disableAutoSeparatorManagement ? children : filterMenuSeparators(children)
|
|
@@ -12702,9 +12729,9 @@ var InfoIcon2 = css31`
|
|
|
12702
12729
|
|
|
12703
12730
|
// src/components/Input/InfoMessage.tsx
|
|
12704
12731
|
import { jsx as jsx34, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
|
|
12705
|
-
var InfoMessage = ({ message, testId, ...props }) => {
|
|
12732
|
+
var InfoMessage = ({ message, testId, icon = MdInfoOutline, ...props }) => {
|
|
12706
12733
|
return message ? /* @__PURE__ */ jsxs19("span", { role: "status", css: InfoText, "data-testid": testId, ...props, children: [
|
|
12707
|
-
/* @__PURE__ */ jsx34("span", { children: /* @__PURE__ */ jsx34(Icon, { css: InfoIcon2, icon
|
|
12734
|
+
/* @__PURE__ */ jsx34("span", { children: /* @__PURE__ */ jsx34(Icon, { css: InfoIcon2, icon, size: "1rem", iconColor: "currentColor" }) }),
|
|
12708
12735
|
message
|
|
12709
12736
|
] }) : null;
|
|
12710
12737
|
};
|
|
@@ -13116,10 +13143,11 @@ function convertComboBoxGroupsToSelectableGroups(args) {
|
|
|
13116
13143
|
return { groupedOptions, selectedOptions };
|
|
13117
13144
|
}
|
|
13118
13145
|
function getComboBoxSelectedSelectableGroups(selectedValues) {
|
|
13119
|
-
const
|
|
13146
|
+
const selectedValuesNormalized = selectedValues ? Array.isArray(selectedValues) ? selectedValues : [selectedValues] : null;
|
|
13147
|
+
const selectedOptionValues = selectedValuesNormalized == null ? void 0 : selectedValuesNormalized.flatMap(
|
|
13120
13148
|
(selectedValue) => Array.isArray(selectedValue.value) ? selectedValue.value : [selectedValue.value]
|
|
13121
13149
|
);
|
|
13122
|
-
return new Set(selectedOptionValues.filter((value) => value !== void 0));
|
|
13150
|
+
return new Set(selectedOptionValues == null ? void 0 : selectedOptionValues.filter((value) => value !== void 0));
|
|
13123
13151
|
}
|
|
13124
13152
|
function flatMapOptionValues(options) {
|
|
13125
13153
|
return options.flatMap((option) => {
|
|
@@ -13254,8 +13282,7 @@ var InputInlineSelect = ({
|
|
|
13254
13282
|
"aria-expanded": menuVisible,
|
|
13255
13283
|
css: inlineSelectBtn,
|
|
13256
13284
|
onClick: () => {
|
|
13257
|
-
if (!disabled2)
|
|
13258
|
-
setMenuVisible((prev) => !prev);
|
|
13285
|
+
if (!disabled2) setMenuVisible((prev) => !prev);
|
|
13259
13286
|
},
|
|
13260
13287
|
disabled: disabled2,
|
|
13261
13288
|
...props,
|
|
@@ -13349,6 +13376,10 @@ var InputKeywordSearch = forwardRef8(
|
|
|
13349
13376
|
minHeight: 0,
|
|
13350
13377
|
padding: "var(--spacing-xs) var(--spacing-lg) var(--spacing-xs) var(--spacing-base)",
|
|
13351
13378
|
fontSize: "var(--fs-sm)"
|
|
13379
|
+
} : compact === "sm" ? {
|
|
13380
|
+
minHeight: "40px",
|
|
13381
|
+
padding: "var(--spacing-xs) var(--spacing-lg) var(--spacing-xs) var(--spacing-base)",
|
|
13382
|
+
fontSize: "var(--fs-sm)"
|
|
13352
13383
|
} : compact ? {
|
|
13353
13384
|
padding: "var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base)",
|
|
13354
13385
|
fontSize: "var(--fs-sm)"
|
|
@@ -14110,6 +14141,7 @@ var container = css40`
|
|
|
14110
14141
|
--calendar-cell-size: 1.8rem;
|
|
14111
14142
|
width: fit-content;
|
|
14112
14143
|
max-width: 100%;
|
|
14144
|
+
margin: 0 auto;
|
|
14113
14145
|
`;
|
|
14114
14146
|
var header = css40`
|
|
14115
14147
|
display: flex;
|
|
@@ -14855,6 +14887,7 @@ var ChipMultiline = css48`
|
|
|
14855
14887
|
padding-inline: var(--spacing-sm);
|
|
14856
14888
|
`;
|
|
14857
14889
|
var ChipThemeAccentLight = css48`
|
|
14890
|
+
--outline-color: var(--accent-light);
|
|
14858
14891
|
background: var(--accent-light);
|
|
14859
14892
|
color: var(--typography-base);
|
|
14860
14893
|
|
|
@@ -14880,6 +14913,7 @@ var ChipThemeAccentLight = css48`
|
|
|
14880
14913
|
}
|
|
14881
14914
|
`;
|
|
14882
14915
|
var ChipThemeAccentDark = css48`
|
|
14916
|
+
--outline-color: var(--accent-dark);
|
|
14883
14917
|
background: var(--accent-dark);
|
|
14884
14918
|
color: var(--white);
|
|
14885
14919
|
|
|
@@ -14901,6 +14935,7 @@ var ChipThemeAccentDark = css48`
|
|
|
14901
14935
|
}
|
|
14902
14936
|
`;
|
|
14903
14937
|
var ChipAltThemeAccentLight = css48`
|
|
14938
|
+
--outline-color: var(--accent-alt-light);
|
|
14904
14939
|
background: var(--accent-alt-light);
|
|
14905
14940
|
color: var(--typography-base);
|
|
14906
14941
|
|
|
@@ -14926,6 +14961,7 @@ var ChipAltThemeAccentLight = css48`
|
|
|
14926
14961
|
}
|
|
14927
14962
|
`;
|
|
14928
14963
|
var ChipAltThemeAccentDark = css48`
|
|
14964
|
+
--outline-color: var(--accent-alt-dark);
|
|
14929
14965
|
background: var(--accent-alt-dark);
|
|
14930
14966
|
color: var(--white);
|
|
14931
14967
|
|
|
@@ -14947,6 +14983,7 @@ var ChipAltThemeAccentDark = css48`
|
|
|
14947
14983
|
}
|
|
14948
14984
|
`;
|
|
14949
14985
|
var ChipThemeNeutralLight = css48`
|
|
14986
|
+
--outline-color: var(--gray-300);
|
|
14950
14987
|
background: var(--gray-100);
|
|
14951
14988
|
color: var(--typography-base);
|
|
14952
14989
|
:where([role='button']) {
|
|
@@ -14957,6 +14994,7 @@ var ChipThemeNeutralLight = css48`
|
|
|
14957
14994
|
}
|
|
14958
14995
|
`;
|
|
14959
14996
|
var ChipThemeNeutralDark = css48`
|
|
14997
|
+
--outline-color: var(--gray-700);
|
|
14960
14998
|
background: var(--gray-700);
|
|
14961
14999
|
color: var(--white);
|
|
14962
15000
|
:where([role='button']) {
|
|
@@ -14976,6 +15014,15 @@ var ChipActionButton = css48`
|
|
|
14976
15014
|
border-radius: 0 var(--rounded-full) var(--rounded-full) 0;
|
|
14977
15015
|
padding: 0;
|
|
14978
15016
|
`;
|
|
15017
|
+
var ChipOutlined = css48`
|
|
15018
|
+
background: var(--white);
|
|
15019
|
+
color: var(--typography-light);
|
|
15020
|
+
box-shadow: inset 0 0 0 1px var(--outline-color);
|
|
15021
|
+
|
|
15022
|
+
> [role='separator'] {
|
|
15023
|
+
border-color: var(--outline-color);
|
|
15024
|
+
}
|
|
15025
|
+
`;
|
|
14979
15026
|
|
|
14980
15027
|
// src/components/Chip/Chip.tsx
|
|
14981
15028
|
import { Fragment as Fragment9, jsx as jsx61, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
|
|
@@ -14992,6 +15039,7 @@ var Chip = ({
|
|
|
14992
15039
|
text,
|
|
14993
15040
|
size = "sm",
|
|
14994
15041
|
theme = "accent-light",
|
|
15042
|
+
variant = "solid",
|
|
14995
15043
|
chipAction,
|
|
14996
15044
|
as = "span",
|
|
14997
15045
|
...props
|
|
@@ -15002,14 +15050,26 @@ var Chip = ({
|
|
|
15002
15050
|
md: ChipMedium
|
|
15003
15051
|
};
|
|
15004
15052
|
const ElementType = as;
|
|
15005
|
-
return /* @__PURE__ */ jsxs38(
|
|
15006
|
-
|
|
15007
|
-
|
|
15008
|
-
|
|
15009
|
-
|
|
15010
|
-
|
|
15011
|
-
|
|
15012
|
-
|
|
15053
|
+
return /* @__PURE__ */ jsxs38(
|
|
15054
|
+
ElementType,
|
|
15055
|
+
{
|
|
15056
|
+
css: [
|
|
15057
|
+
ChipContainer,
|
|
15058
|
+
chipSize[size],
|
|
15059
|
+
chipTheme[theme],
|
|
15060
|
+
variant === "outlined" ? ChipOutlined : void 0
|
|
15061
|
+
],
|
|
15062
|
+
...props,
|
|
15063
|
+
children: [
|
|
15064
|
+
icon ? /* @__PURE__ */ jsxs38(Fragment9, { children: [
|
|
15065
|
+
/* @__PURE__ */ jsx61("span", { role: "presentation", css: [ChipIcon], children: /* @__PURE__ */ jsx61(Icon, { icon, iconColor: "currentColor", size: "1rem" }) }),
|
|
15066
|
+
/* @__PURE__ */ jsx61("span", { role: "separator", css: ChipSeparator })
|
|
15067
|
+
] }) : null,
|
|
15068
|
+
/* @__PURE__ */ jsx61("span", { css: ChipText, children: text }),
|
|
15069
|
+
chipAction
|
|
15070
|
+
]
|
|
15071
|
+
}
|
|
15072
|
+
);
|
|
15013
15073
|
};
|
|
15014
15074
|
var DismissibleChipAction = ({ onDismiss, ...props }) => {
|
|
15015
15075
|
return /* @__PURE__ */ jsx61(
|
|
@@ -15213,6 +15273,7 @@ var DashedBox = ({
|
|
|
15213
15273
|
|
|
15214
15274
|
// src/components/DateTimePicker/DateTimePicker.tsx
|
|
15215
15275
|
import { CalendarDate as CalendarDate3, parseDate as parseDate2, parseTime as parseTime2, Time as Time2 } from "@internationalized/date";
|
|
15276
|
+
import { CgCalendar } from "@react-icons/all-files/cg/CgCalendar";
|
|
15216
15277
|
import { createContext as createContext2, useCallback as useCallback4, useContext as useContext3, useEffect as useEffect5, useMemo, useState as useState6 } from "react";
|
|
15217
15278
|
import { Popover as Popover2, PopoverDisclosure, usePopoverState } from "reakit/Popover";
|
|
15218
15279
|
|
|
@@ -15270,12 +15331,21 @@ var trigger = css53`
|
|
|
15270
15331
|
var popover = css53`
|
|
15271
15332
|
padding: var(--spacing-md);
|
|
15272
15333
|
max-width: none;
|
|
15273
|
-
|
|
15274
|
-
|
|
15275
|
-
|
|
15334
|
+
container-type: inline-size;
|
|
15335
|
+
width: 100%;
|
|
15336
|
+
`;
|
|
15337
|
+
var popoverInnerContent = css53`
|
|
15338
|
+
display: grid;
|
|
15339
|
+
gap: var(--spacing-base);
|
|
15276
15340
|
|
|
15277
|
-
|
|
15278
|
-
grid-template-
|
|
15341
|
+
${cq("360px")} {
|
|
15342
|
+
grid-template-columns: 0.8fr 1fr;
|
|
15343
|
+
grid-template-rows: 1fr 1fr;
|
|
15344
|
+
gap: var(--spacing-md);
|
|
15345
|
+
|
|
15346
|
+
[data-variant='date'] & {
|
|
15347
|
+
grid-template-rows: 1fr;
|
|
15348
|
+
}
|
|
15279
15349
|
}
|
|
15280
15350
|
`;
|
|
15281
15351
|
var calendarSection = css53`
|
|
@@ -15294,6 +15364,15 @@ var timeSection = css53`
|
|
|
15294
15364
|
var tzSection = css53`
|
|
15295
15365
|
align-self: stretch;
|
|
15296
15366
|
`;
|
|
15367
|
+
var datePart = css53`
|
|
15368
|
+
text-overflow: ellipsis;
|
|
15369
|
+
overflow: hidden;
|
|
15370
|
+
white-space: nowrap;
|
|
15371
|
+
`;
|
|
15372
|
+
var datePartButton = css53`
|
|
15373
|
+
// this allows the button to be as wide as the text
|
|
15374
|
+
min-width: 0;
|
|
15375
|
+
`;
|
|
15297
15376
|
|
|
15298
15377
|
// src/components/DateTimePicker/DateTimePickerSummary.tsx
|
|
15299
15378
|
import { jsx as jsx65, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
|
|
@@ -15331,10 +15410,10 @@ function DateTimePickerSummary({
|
|
|
15331
15410
|
}
|
|
15332
15411
|
}
|
|
15333
15412
|
}
|
|
15334
|
-
const
|
|
15413
|
+
const datePart2 = (value == null ? void 0 : value.datetime) ? dateFormat.format(new Date(value.datetime)) : null;
|
|
15335
15414
|
const timePart = (value == null ? void 0 : value.datetime) ? timeFormat.format(new Date(value.datetime)) : null;
|
|
15336
|
-
return
|
|
15337
|
-
/* @__PURE__ */ jsx65("em", { css: inputLabelFocal, children:
|
|
15415
|
+
return datePart2 ? /* @__PURE__ */ jsxs40("span", { css: datePart, children: [
|
|
15416
|
+
/* @__PURE__ */ jsx65("em", { css: inputLabelFocal, children: datePart2 }),
|
|
15338
15417
|
!!timePart && `, ${timePart}`,
|
|
15339
15418
|
!!(value == null ? void 0 : value.timeZone) && timeZoneWasValid && ` in ${value == null ? void 0 : value.timeZone}`
|
|
15340
15419
|
] }) : /* @__PURE__ */ jsx65("span", { children: placeholder });
|
|
@@ -15428,6 +15507,7 @@ function useDateTimePickerContext() {
|
|
|
15428
15507
|
var DateTimePicker = ({
|
|
15429
15508
|
id,
|
|
15430
15509
|
label,
|
|
15510
|
+
triggerIcon = CgCalendar,
|
|
15431
15511
|
value,
|
|
15432
15512
|
minVisible,
|
|
15433
15513
|
maxVisible,
|
|
@@ -15519,7 +15599,7 @@ var DateTimePicker = ({
|
|
|
15519
15599
|
PopoverDisclosure,
|
|
15520
15600
|
{
|
|
15521
15601
|
...popover2,
|
|
15522
|
-
css:
|
|
15602
|
+
css: datePartButton,
|
|
15523
15603
|
as: Button,
|
|
15524
15604
|
buttonType: "ghostUnimportant",
|
|
15525
15605
|
disabled: disabled2,
|
|
@@ -15537,41 +15617,53 @@ var DateTimePicker = ({
|
|
|
15537
15617
|
children: "clear"
|
|
15538
15618
|
}
|
|
15539
15619
|
),
|
|
15540
|
-
/* @__PURE__ */ jsx66(Button, { css: trigger, buttonType: "ghost", disabled: disabled2, onClick: popover2.show, children: /* @__PURE__ */ jsx66(Icon, { icon:
|
|
15620
|
+
/* @__PURE__ */ jsx66(Button, { css: trigger, buttonType: "ghost", disabled: disabled2, onClick: popover2.show, children: /* @__PURE__ */ jsx66(Icon, { icon: triggerIcon, iconColor: "currentColor" }) })
|
|
15541
15621
|
]
|
|
15542
15622
|
}
|
|
15543
15623
|
),
|
|
15544
15624
|
/* @__PURE__ */ jsxs41(Popover2, { ...popover2, css: [Popover, popover], "aria-label": "Pick a date", children: [
|
|
15545
|
-
/* @__PURE__ */
|
|
15546
|
-
|
|
15547
|
-
|
|
15548
|
-
value: draftDate == null ? void 0 : draftDate.toString(),
|
|
15549
|
-
minValue: parsedMinVisible,
|
|
15550
|
-
maxValue: parseMaxVisible,
|
|
15551
|
-
timeZone: (draftTimeZone == null ? void 0 : draftTimeZone.value) || (parsedValue == null ? void 0 : parsedValue.timeZone) || getLocalTimeZone(),
|
|
15552
|
-
onChange: handleDateChange,
|
|
15553
|
-
"data-testid": `${testId}-calendar`
|
|
15554
|
-
}
|
|
15555
|
-
) }),
|
|
15556
|
-
variant !== "date" /* Date */ && /* @__PURE__ */ jsx66("div", { css: timeSection, children: /* @__PURE__ */ jsx66(
|
|
15557
|
-
InputTime,
|
|
15558
|
-
{
|
|
15559
|
-
label: "Time",
|
|
15560
|
-
value: draftTime == null ? void 0 : draftTime.toString(),
|
|
15561
|
-
belowInputSlot: belowTimeInputSlot,
|
|
15562
|
-
onChange: handleTimeChange
|
|
15563
|
-
}
|
|
15564
|
-
) }),
|
|
15565
|
-
/* @__PURE__ */ jsxs41("div", { css: tzSection, children: [
|
|
15566
|
-
/* @__PURE__ */ jsx66(Label, { css: labelText, children: "Timezone" }),
|
|
15567
|
-
/* @__PURE__ */ jsx66(
|
|
15568
|
-
InputComboBox,
|
|
15625
|
+
/* @__PURE__ */ jsxs41("div", { css: popoverInnerContent, children: [
|
|
15626
|
+
/* @__PURE__ */ jsx66("div", { css: calendarSection, children: /* @__PURE__ */ jsx66(
|
|
15627
|
+
Calendar,
|
|
15569
15628
|
{
|
|
15570
|
-
value:
|
|
15571
|
-
|
|
15572
|
-
|
|
15629
|
+
value: draftDate == null ? void 0 : draftDate.toString(),
|
|
15630
|
+
minValue: parsedMinVisible,
|
|
15631
|
+
maxValue: parseMaxVisible,
|
|
15632
|
+
timeZone: (draftTimeZone == null ? void 0 : draftTimeZone.value) || (parsedValue == null ? void 0 : parsedValue.timeZone) || getLocalTimeZone(),
|
|
15633
|
+
onChange: handleDateChange,
|
|
15634
|
+
"data-testid": `${testId}-calendar`
|
|
15573
15635
|
}
|
|
15574
|
-
)
|
|
15636
|
+
) }),
|
|
15637
|
+
variant !== "date" /* Date */ && /* @__PURE__ */ jsx66("div", { css: timeSection, children: /* @__PURE__ */ jsx66(
|
|
15638
|
+
InputTime,
|
|
15639
|
+
{
|
|
15640
|
+
label: "Time",
|
|
15641
|
+
value: draftTime == null ? void 0 : draftTime.toString(),
|
|
15642
|
+
belowInputSlot: belowTimeInputSlot,
|
|
15643
|
+
onChange: handleTimeChange
|
|
15644
|
+
}
|
|
15645
|
+
) }),
|
|
15646
|
+
/* @__PURE__ */ jsxs41("div", { css: tzSection, children: [
|
|
15647
|
+
/* @__PURE__ */ jsx66(Label, { css: labelText, children: "Timezone" }),
|
|
15648
|
+
/* @__PURE__ */ jsx66(
|
|
15649
|
+
InputComboBox,
|
|
15650
|
+
{
|
|
15651
|
+
value: draftTimeZone,
|
|
15652
|
+
options: TIMEZONE_OPTIONS,
|
|
15653
|
+
onChange: handleTimezoneChange,
|
|
15654
|
+
menuPlacement: "auto",
|
|
15655
|
+
styles: {
|
|
15656
|
+
menu(base) {
|
|
15657
|
+
return {
|
|
15658
|
+
...base,
|
|
15659
|
+
width: "fit-content",
|
|
15660
|
+
right: 0
|
|
15661
|
+
};
|
|
15662
|
+
}
|
|
15663
|
+
}
|
|
15664
|
+
}
|
|
15665
|
+
)
|
|
15666
|
+
] })
|
|
15575
15667
|
] }),
|
|
15576
15668
|
/* @__PURE__ */ jsxs41(HorizontalRhythm, { gap: "0", children: [
|
|
15577
15669
|
/* @__PURE__ */ jsx66(Button, { buttonType: "secondary", onClick: handleSelectClick, children: "Select" }),
|
|
@@ -17714,6 +17806,7 @@ import {
|
|
|
17714
17806
|
Popover as AriakitPopover,
|
|
17715
17807
|
PopoverDisclosure as PopoverDisclosure2,
|
|
17716
17808
|
PopoverProvider,
|
|
17809
|
+
usePopoverContext,
|
|
17717
17810
|
usePopoverStore
|
|
17718
17811
|
} from "@ariakit/react";
|
|
17719
17812
|
import { useEffect as useEffect12 } from "react";
|
|
@@ -17752,6 +17845,10 @@ var Popover3 = ({
|
|
|
17752
17845
|
/* @__PURE__ */ jsx97(AriakitPopover, { unmountOnHide: true, css: Popover, ...otherProps, "aria-label": ariaLabel, children })
|
|
17753
17846
|
] });
|
|
17754
17847
|
};
|
|
17848
|
+
var usePopoverComponentContext = () => {
|
|
17849
|
+
const contextValue = usePopoverContext();
|
|
17850
|
+
return contextValue;
|
|
17851
|
+
};
|
|
17755
17852
|
|
|
17756
17853
|
// src/components/MediaCard/MediaCard.styles.ts
|
|
17757
17854
|
import { css as css76 } from "@emotion/react";
|
|
@@ -18129,39 +18226,323 @@ var ModalDialog = forwardRef15(
|
|
|
18129
18226
|
);
|
|
18130
18227
|
ModalDialog.displayName = "ModalDialog";
|
|
18131
18228
|
|
|
18229
|
+
// src/components/Objects/styles/ObjectGridContainer.styles.ts
|
|
18230
|
+
import { css as css78 } from "@emotion/react";
|
|
18231
|
+
var ObjectGridContainer = (gridCount) => css78`
|
|
18232
|
+
display: grid;
|
|
18233
|
+
grid-template-columns: repeat(${gridCount}, minmax(250px, 1fr));
|
|
18234
|
+
gap: var(--spacing-base);
|
|
18235
|
+
`;
|
|
18236
|
+
|
|
18237
|
+
// src/components/Objects/ObjectGridContainer.tsx
|
|
18238
|
+
import { jsx as jsx101 } from "@emotion/react/jsx-runtime";
|
|
18239
|
+
var ObjectGridContainer2 = ({ gridCount = 3, children }) => {
|
|
18240
|
+
return /* @__PURE__ */ jsx101("div", { "data-testid": "object-grid-container", css: ObjectGridContainer(gridCount), children });
|
|
18241
|
+
};
|
|
18242
|
+
|
|
18243
|
+
// src/components/Objects/styles/ObjectGridItem.styles.ts
|
|
18244
|
+
import { css as css79 } from "@emotion/react";
|
|
18245
|
+
var ObjectGridItem = css79`
|
|
18246
|
+
border: 1px solid var(--gray-300);
|
|
18247
|
+
border-radius: var(--rounded-base);
|
|
18248
|
+
background: var(--white);
|
|
18249
|
+
display: flex;
|
|
18250
|
+
flex-direction: column;
|
|
18251
|
+
transition: border-color var(--duration-fast) var(--timing-ease-out);
|
|
18252
|
+
|
|
18253
|
+
&[aria-selected='true'] {
|
|
18254
|
+
border: 1px solid var(--accent-dark);
|
|
18255
|
+
}
|
|
18256
|
+
|
|
18257
|
+
&[aria-selected='false'] {
|
|
18258
|
+
&:hover {
|
|
18259
|
+
border: 1px solid var(--accent-dark);
|
|
18260
|
+
}
|
|
18261
|
+
}
|
|
18262
|
+
`;
|
|
18263
|
+
var ObjectGridItemMediaWrapper = css79`
|
|
18264
|
+
display: flex;
|
|
18265
|
+
flex: 1 1 0;
|
|
18266
|
+
position: relative;
|
|
18267
|
+
`;
|
|
18268
|
+
var ObjectGridItemContentWrapper = css79`
|
|
18269
|
+
padding: 0 var(--spacing-sm) var(--spacing-sm);
|
|
18270
|
+
min-height: 52px;
|
|
18271
|
+
`;
|
|
18272
|
+
var ObjectGridItemImage = css79`
|
|
18273
|
+
object-fit: cover;
|
|
18274
|
+
width: 100%;
|
|
18275
|
+
height: auto;
|
|
18276
|
+
`;
|
|
18277
|
+
var MenuBtn = css79`
|
|
18278
|
+
border: none;
|
|
18279
|
+
background: transparent;
|
|
18280
|
+
padding: var(--spacing-xs);
|
|
18281
|
+
color: var(--gray-300);
|
|
18282
|
+
transition: color var(--duration-fast) var(--timing-ease-out);
|
|
18283
|
+
|
|
18284
|
+
&:focus,
|
|
18285
|
+
&:hover {
|
|
18286
|
+
outline: none;
|
|
18287
|
+
color: var(--gray-500);
|
|
18288
|
+
}
|
|
18289
|
+
`;
|
|
18290
|
+
|
|
18291
|
+
// src/components/Objects/ObjectGridItem.tsx
|
|
18292
|
+
import { jsx as jsx102, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
|
|
18293
|
+
var ObjectGridItem2 = ({
|
|
18294
|
+
header: header2,
|
|
18295
|
+
cover,
|
|
18296
|
+
rightSlot,
|
|
18297
|
+
menuItems,
|
|
18298
|
+
isSelected,
|
|
18299
|
+
children
|
|
18300
|
+
}) => {
|
|
18301
|
+
return /* @__PURE__ */ jsxs68("div", { css: ObjectGridItem, "aria-selected": isSelected, children: [
|
|
18302
|
+
/* @__PURE__ */ jsx102("div", { css: ObjectGridItemMediaWrapper, children: cover }),
|
|
18303
|
+
/* @__PURE__ */ jsxs68(HorizontalRhythm, { css: ObjectGridItemContentWrapper, justify: "space-between", gap: "sm", children: [
|
|
18304
|
+
/* @__PURE__ */ jsxs68(VerticalRhythm, { gap: "0", children: [
|
|
18305
|
+
/* @__PURE__ */ jsx102(HorizontalRhythm, { gap: "xs", align: "center", children: header2 }),
|
|
18306
|
+
children
|
|
18307
|
+
] }),
|
|
18308
|
+
/* @__PURE__ */ jsxs68(HorizontalRhythm, { gap: "xs", align: "flex-start", children: [
|
|
18309
|
+
rightSlot,
|
|
18310
|
+
menuItems ? /* @__PURE__ */ jsx102(
|
|
18311
|
+
Menu,
|
|
18312
|
+
{
|
|
18313
|
+
menuTrigger: (
|
|
18314
|
+
// TODO: once insights lands we should be able to replace this with MenuTrigger component
|
|
18315
|
+
/* @__PURE__ */ jsx102(
|
|
18316
|
+
"button",
|
|
18317
|
+
{
|
|
18318
|
+
type: "button",
|
|
18319
|
+
"data-testid": "object-grid-item-menu-btn",
|
|
18320
|
+
title: "menu options",
|
|
18321
|
+
css: MenuBtn,
|
|
18322
|
+
children: /* @__PURE__ */ jsx102(Icon, { icon: "more-alt", size: "1rem", iconColor: "currentColor" })
|
|
18323
|
+
}
|
|
18324
|
+
)
|
|
18325
|
+
),
|
|
18326
|
+
placement: "bottom-end",
|
|
18327
|
+
children: menuItems
|
|
18328
|
+
}
|
|
18329
|
+
) : null
|
|
18330
|
+
] })
|
|
18331
|
+
] })
|
|
18332
|
+
] });
|
|
18333
|
+
};
|
|
18334
|
+
|
|
18335
|
+
// src/components/Objects/styles/ObjectGridItemCardCover.styles.ts
|
|
18336
|
+
import { css as css80 } from "@emotion/react";
|
|
18337
|
+
var CoverImage = css80`
|
|
18338
|
+
aspect-ratio: 16/9;
|
|
18339
|
+
max-width: 100%;
|
|
18340
|
+
max-height: 100%;
|
|
18341
|
+
height: auto;
|
|
18342
|
+
padding: var(--spacing-sm);
|
|
18343
|
+
`;
|
|
18344
|
+
var CoverIconWrapper = css80`
|
|
18345
|
+
position: relative;
|
|
18346
|
+
display: flex;
|
|
18347
|
+
align-items: center;
|
|
18348
|
+
justify-content: center;
|
|
18349
|
+
flex: 1;
|
|
18350
|
+
overflow: hidden;
|
|
18351
|
+
`;
|
|
18352
|
+
var CoverIconGhost = css80`
|
|
18353
|
+
position: absolute;
|
|
18354
|
+
width: 60%;
|
|
18355
|
+
height: auto;
|
|
18356
|
+
aspect-ratio: 1;
|
|
18357
|
+
opacity: 0.05;
|
|
18358
|
+
transform: rotateZ(-15deg) translate(35%, 30%);
|
|
18359
|
+
`;
|
|
18360
|
+
var CoverSlot = css80`
|
|
18361
|
+
align-items: center;
|
|
18362
|
+
background: var(--white);
|
|
18363
|
+
display: flex;
|
|
18364
|
+
justify-content: center;
|
|
18365
|
+
position: absolute;
|
|
18366
|
+
top: var(--spacing-sm);
|
|
18367
|
+
z-index: 1;
|
|
18368
|
+
width: 24px;
|
|
18369
|
+
height: 24px;
|
|
18370
|
+
`;
|
|
18371
|
+
var CoverSlotLeft = css80`
|
|
18372
|
+
border-bottom-right-radius: var(--rounded-base);
|
|
18373
|
+
left: var(--spacing-sm);
|
|
18374
|
+
`;
|
|
18375
|
+
var CoverSlotRight = css80`
|
|
18376
|
+
border-bottom-left-radius: var(--rounded-base);
|
|
18377
|
+
right: var(--spacing-sm);
|
|
18378
|
+
`;
|
|
18379
|
+
var CoverButton = css80`
|
|
18380
|
+
align-items: stretch;
|
|
18381
|
+
border: none;
|
|
18382
|
+
background: none;
|
|
18383
|
+
display: flex;
|
|
18384
|
+
flex: 1 1 0;
|
|
18385
|
+
padding: 0;
|
|
18386
|
+
|
|
18387
|
+
&:focus,
|
|
18388
|
+
&:hover {
|
|
18389
|
+
outline: none;
|
|
18390
|
+
}
|
|
18391
|
+
`;
|
|
18392
|
+
var CoverSelectedChip = css80`
|
|
18393
|
+
animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
18394
|
+
opacity: 0;
|
|
18395
|
+
position: absolute;
|
|
18396
|
+
bottom: var(--spacing-base);
|
|
18397
|
+
right: var(--spacing-base);
|
|
18398
|
+
`;
|
|
18399
|
+
|
|
18400
|
+
// src/components/Objects/ObjectGridItemCardCover.tsx
|
|
18401
|
+
import { Fragment as Fragment14, jsx as jsx103, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
|
|
18402
|
+
var ObjectGridItemCardCover = (props) => {
|
|
18403
|
+
if ("imageUrl" in props && props.imageUrl) {
|
|
18404
|
+
const { imageUrl } = props;
|
|
18405
|
+
return /* @__PURE__ */ jsx103(
|
|
18406
|
+
"img",
|
|
18407
|
+
{
|
|
18408
|
+
src: imageUrl,
|
|
18409
|
+
css: CoverImage,
|
|
18410
|
+
loading: "lazy",
|
|
18411
|
+
role: "presentation",
|
|
18412
|
+
"data-testid": "object-grid-item-thumbnail"
|
|
18413
|
+
}
|
|
18414
|
+
);
|
|
18415
|
+
}
|
|
18416
|
+
if ("icon" in props && props.icon) {
|
|
18417
|
+
const { icon } = props;
|
|
18418
|
+
return /* @__PURE__ */ jsxs69("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", children: [
|
|
18419
|
+
/* @__PURE__ */ jsx103(Icon, { icon, iconColor: "currentColor", css: CoverIconGhost }),
|
|
18420
|
+
/* @__PURE__ */ jsx103(Icon, { icon, iconColor: "currentColor", size: 48 })
|
|
18421
|
+
] });
|
|
18422
|
+
}
|
|
18423
|
+
};
|
|
18424
|
+
var ObjectGridItemCover = ({
|
|
18425
|
+
coverSlotLeft,
|
|
18426
|
+
coverSlotRight,
|
|
18427
|
+
...props
|
|
18428
|
+
}) => {
|
|
18429
|
+
return /* @__PURE__ */ jsxs69(Fragment14, { children: [
|
|
18430
|
+
coverSlotLeft ? /* @__PURE__ */ jsx103("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
|
|
18431
|
+
/* @__PURE__ */ jsx103(ObjectGridItemCardCover, { ...props }),
|
|
18432
|
+
coverSlotRight ? /* @__PURE__ */ jsx103("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null
|
|
18433
|
+
] });
|
|
18434
|
+
};
|
|
18435
|
+
var ObjectGridItemCoverButton = ({
|
|
18436
|
+
id,
|
|
18437
|
+
isSelected,
|
|
18438
|
+
onSelection,
|
|
18439
|
+
coverSlotLeft,
|
|
18440
|
+
coverSlotRight,
|
|
18441
|
+
selectedText = "selected",
|
|
18442
|
+
...props
|
|
18443
|
+
}) => {
|
|
18444
|
+
return /* @__PURE__ */ jsxs69("button", { type: "button", css: CoverButton, onClick: () => onSelection(id), "aria-selected": isSelected, children: [
|
|
18445
|
+
coverSlotLeft ? /* @__PURE__ */ jsx103("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
|
|
18446
|
+
/* @__PURE__ */ jsx103(ObjectGridItemCardCover, { ...props }),
|
|
18447
|
+
coverSlotRight ? /* @__PURE__ */ jsx103("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null,
|
|
18448
|
+
isSelected ? /* @__PURE__ */ jsx103("div", { css: CoverSelectedChip, children: /* @__PURE__ */ jsx103(Chip, { text: selectedText, size: "xs", theme: "accent-dark" }) }) : null
|
|
18449
|
+
] });
|
|
18450
|
+
};
|
|
18451
|
+
|
|
18452
|
+
// src/components/Objects/ObjectGridItemHeading.tsx
|
|
18453
|
+
import { useEffect as useEffect14, useRef as useRef8, useState as useState12 } from "react";
|
|
18454
|
+
|
|
18455
|
+
// src/components/Objects/styles/ObjectGridItemHeading.styles.ts
|
|
18456
|
+
import { css as css81 } from "@emotion/react";
|
|
18457
|
+
var ObjectGridItemHeading = css81`
|
|
18458
|
+
overflow: hidden;
|
|
18459
|
+
text-overflow: ellipsis;
|
|
18460
|
+
white-space: initial;
|
|
18461
|
+
display: -webkit-box;
|
|
18462
|
+
-webkit-line-clamp: 1;
|
|
18463
|
+
-webkit-box-orient: vertical;
|
|
18464
|
+
`;
|
|
18465
|
+
var PopoverContent = css81`
|
|
18466
|
+
min-width: 50px;
|
|
18467
|
+
`;
|
|
18468
|
+
|
|
18469
|
+
// src/components/Objects/ObjectGridItemHeading.tsx
|
|
18470
|
+
import { jsx as jsx104, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
|
|
18471
|
+
var ObjectGridItemHeading2 = ({
|
|
18472
|
+
heading,
|
|
18473
|
+
beforeHeadingSlot,
|
|
18474
|
+
afterHeadingSlot
|
|
18475
|
+
}) => {
|
|
18476
|
+
const [hasTruncation, setHasTruncation] = useState12(false);
|
|
18477
|
+
const headingRef = useRef8(null);
|
|
18478
|
+
useEffect14(() => {
|
|
18479
|
+
const currentHeading = headingRef.current;
|
|
18480
|
+
const observer = new ResizeObserver((entries) => {
|
|
18481
|
+
for (const entry of entries) {
|
|
18482
|
+
const isHeadingTruncated = entry.target.scrollHeight > entry.target.clientHeight;
|
|
18483
|
+
setHasTruncation(isHeadingTruncated);
|
|
18484
|
+
}
|
|
18485
|
+
});
|
|
18486
|
+
if (currentHeading) {
|
|
18487
|
+
observer.observe(currentHeading);
|
|
18488
|
+
}
|
|
18489
|
+
return () => {
|
|
18490
|
+
if (currentHeading) {
|
|
18491
|
+
observer.unobserve(currentHeading);
|
|
18492
|
+
}
|
|
18493
|
+
};
|
|
18494
|
+
}, []);
|
|
18495
|
+
return /* @__PURE__ */ jsxs70(HorizontalRhythm, { align: "center", gap: "xs", children: [
|
|
18496
|
+
beforeHeadingSlot,
|
|
18497
|
+
/* @__PURE__ */ jsx104(Tooltip, { title: hasTruncation ? heading : "", children: /* @__PURE__ */ jsx104("div", { role: "heading", css: ObjectGridItemHeading, ref: headingRef, children: heading }) }),
|
|
18498
|
+
afterHeadingSlot
|
|
18499
|
+
] });
|
|
18500
|
+
};
|
|
18501
|
+
|
|
18502
|
+
// src/components/Objects/ObjectGridItemIconWithTooltip.tsx
|
|
18503
|
+
import { jsx as jsx105 } from "@emotion/react/jsx-runtime";
|
|
18504
|
+
var ObjectGridItemIconWithTooltip = ({
|
|
18505
|
+
tooltipTitle,
|
|
18506
|
+
placement = "bottom-start",
|
|
18507
|
+
icon,
|
|
18508
|
+
iconColor = "accent-dark"
|
|
18509
|
+
}) => {
|
|
18510
|
+
return /* @__PURE__ */ jsx105(Tooltip, { title: tooltipTitle, placement, children: /* @__PURE__ */ jsx105("span", { children: /* @__PURE__ */ jsx105(Icon, { icon, iconColor, size: "1rem" }) }) });
|
|
18511
|
+
};
|
|
18512
|
+
|
|
18132
18513
|
// src/components/Pagination/Pagination.tsx
|
|
18133
18514
|
import Paginate from "react-paginate";
|
|
18134
18515
|
|
|
18135
18516
|
// src/components/Pagination/Pagniation.styles.ts
|
|
18136
|
-
import { css as
|
|
18137
|
-
var container2 =
|
|
18517
|
+
import { css as css82 } from "@emotion/css";
|
|
18518
|
+
var container2 = css82`
|
|
18138
18519
|
align-items: center;
|
|
18139
18520
|
display: flex;
|
|
18140
18521
|
`;
|
|
18141
|
-
var disabled =
|
|
18522
|
+
var disabled = css82`
|
|
18142
18523
|
opacity: var(--opacity-50);
|
|
18143
18524
|
`;
|
|
18144
|
-
var disabledLink =
|
|
18525
|
+
var disabledLink = css82`
|
|
18145
18526
|
cursor: pointer-default;
|
|
18146
18527
|
`;
|
|
18147
|
-
var pageLink =
|
|
18528
|
+
var pageLink = css82`
|
|
18148
18529
|
display: block;
|
|
18149
18530
|
padding: var(--spacing-sm) var(--spacing-base);
|
|
18150
18531
|
`;
|
|
18151
|
-
var prevNextControls =
|
|
18532
|
+
var prevNextControls = css82`
|
|
18152
18533
|
padding: var(--spacing-sm) var(--spacing-base);
|
|
18153
18534
|
`;
|
|
18154
|
-
var active =
|
|
18535
|
+
var active = css82`
|
|
18155
18536
|
border-radius: var(--rounded-base);
|
|
18156
18537
|
background: var(--gray-200);
|
|
18157
18538
|
`;
|
|
18158
|
-
var page =
|
|
18539
|
+
var page = css82`
|
|
18159
18540
|
margin-left: var(--spacing-xs);
|
|
18160
18541
|
margin-right: var(--spacing-xs);
|
|
18161
18542
|
`;
|
|
18162
18543
|
|
|
18163
18544
|
// src/components/Pagination/Pagination.tsx
|
|
18164
|
-
import { jsx as
|
|
18545
|
+
import { jsx as jsx106 } from "@emotion/react/jsx-runtime";
|
|
18165
18546
|
function Pagination({
|
|
18166
18547
|
limit,
|
|
18167
18548
|
offset,
|
|
@@ -18176,12 +18557,12 @@ function Pagination({
|
|
|
18176
18557
|
if (pageCount <= 1) {
|
|
18177
18558
|
return null;
|
|
18178
18559
|
}
|
|
18179
|
-
return /* @__PURE__ */
|
|
18560
|
+
return /* @__PURE__ */ jsx106(
|
|
18180
18561
|
Paginate,
|
|
18181
18562
|
{
|
|
18182
18563
|
forcePage: currentPage,
|
|
18183
|
-
previousLabel: /* @__PURE__ */
|
|
18184
|
-
nextLabel: /* @__PURE__ */
|
|
18564
|
+
previousLabel: /* @__PURE__ */ jsx106("div", { className: prevNextControls, children: "<" }),
|
|
18565
|
+
nextLabel: /* @__PURE__ */ jsx106("div", { className: prevNextControls, children: ">" }),
|
|
18185
18566
|
breakLabel: "...",
|
|
18186
18567
|
pageCount,
|
|
18187
18568
|
marginPagesDisplayed: 2,
|
|
@@ -18221,8 +18602,8 @@ var useParameterShell = () => {
|
|
|
18221
18602
|
};
|
|
18222
18603
|
|
|
18223
18604
|
// src/components/ParameterInputs/styles/LabelLeadingIcon.styles.ts
|
|
18224
|
-
import { css as
|
|
18225
|
-
var inputIconBtn =
|
|
18605
|
+
import { css as css83 } from "@emotion/react";
|
|
18606
|
+
var inputIconBtn = css83`
|
|
18226
18607
|
align-items: center;
|
|
18227
18608
|
border: none;
|
|
18228
18609
|
border-radius: var(--rounded-base);
|
|
@@ -18248,7 +18629,7 @@ var inputIconBtn = css79`
|
|
|
18248
18629
|
`;
|
|
18249
18630
|
|
|
18250
18631
|
// src/components/ParameterInputs/LabelLeadingIcon.tsx
|
|
18251
|
-
import { jsx as
|
|
18632
|
+
import { jsx as jsx107, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
|
|
18252
18633
|
var LabelLeadingIcon = ({
|
|
18253
18634
|
icon,
|
|
18254
18635
|
iconColor,
|
|
@@ -18260,7 +18641,7 @@ var LabelLeadingIcon = ({
|
|
|
18260
18641
|
...props
|
|
18261
18642
|
}) => {
|
|
18262
18643
|
const titleFr = title2 != null ? title2 : isLocked ? "Read-only pattern parameter" : isBound ? "Connected to external content. Click to edit" : "Click to connect to external content";
|
|
18263
|
-
return /* @__PURE__ */
|
|
18644
|
+
return /* @__PURE__ */ jsx107(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs71(
|
|
18264
18645
|
"button",
|
|
18265
18646
|
{
|
|
18266
18647
|
css: inputIconBtn,
|
|
@@ -18270,7 +18651,7 @@ var LabelLeadingIcon = ({
|
|
|
18270
18651
|
...props,
|
|
18271
18652
|
"data-testid": "lock-button",
|
|
18272
18653
|
children: [
|
|
18273
|
-
/* @__PURE__ */
|
|
18654
|
+
/* @__PURE__ */ jsx107(
|
|
18274
18655
|
Icon,
|
|
18275
18656
|
{
|
|
18276
18657
|
icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
|
|
@@ -18286,8 +18667,8 @@ var LabelLeadingIcon = ({
|
|
|
18286
18667
|
var ConnectToDataElementButton = LabelLeadingIcon;
|
|
18287
18668
|
|
|
18288
18669
|
// src/components/ParameterInputs/styles/ParameterInput.styles.ts
|
|
18289
|
-
import { css as
|
|
18290
|
-
var inputContainer2 =
|
|
18670
|
+
import { css as css84 } from "@emotion/react";
|
|
18671
|
+
var inputContainer2 = css84`
|
|
18291
18672
|
position: relative;
|
|
18292
18673
|
scroll-margin: var(--spacing-2xl);
|
|
18293
18674
|
|
|
@@ -18300,14 +18681,14 @@ var inputContainer2 = css80`
|
|
|
18300
18681
|
}
|
|
18301
18682
|
}
|
|
18302
18683
|
`;
|
|
18303
|
-
var labelText2 =
|
|
18684
|
+
var labelText2 = css84`
|
|
18304
18685
|
align-items: center;
|
|
18305
18686
|
display: flex;
|
|
18306
18687
|
gap: var(--spacing-xs);
|
|
18307
18688
|
font-weight: var(--fw-regular);
|
|
18308
18689
|
margin: 0 0 var(--spacing-xs);
|
|
18309
18690
|
`;
|
|
18310
|
-
var input3 =
|
|
18691
|
+
var input3 = css84`
|
|
18311
18692
|
display: block;
|
|
18312
18693
|
appearance: none;
|
|
18313
18694
|
box-sizing: border-box;
|
|
@@ -18355,18 +18736,18 @@ var input3 = css80`
|
|
|
18355
18736
|
color: var(--gray-400);
|
|
18356
18737
|
}
|
|
18357
18738
|
`;
|
|
18358
|
-
var selectInput =
|
|
18739
|
+
var selectInput = css84`
|
|
18359
18740
|
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");
|
|
18360
18741
|
background-position: right var(--spacing-sm) center;
|
|
18361
18742
|
background-repeat: no-repeat;
|
|
18362
18743
|
background-size: 1rem;
|
|
18363
18744
|
padding-right: var(--spacing-xl);
|
|
18364
18745
|
`;
|
|
18365
|
-
var inputWrapper =
|
|
18746
|
+
var inputWrapper = css84`
|
|
18366
18747
|
display: flex; // used to correct overflow with chrome textarea
|
|
18367
18748
|
position: relative;
|
|
18368
18749
|
`;
|
|
18369
|
-
var inputIcon2 =
|
|
18750
|
+
var inputIcon2 = css84`
|
|
18370
18751
|
align-items: center;
|
|
18371
18752
|
background: var(--white);
|
|
18372
18753
|
border-radius: var(--rounded-md) 0 0 var(--rounded-md);
|
|
@@ -18382,7 +18763,7 @@ var inputIcon2 = css80`
|
|
|
18382
18763
|
width: var(--spacing-lg);
|
|
18383
18764
|
z-index: var(--z-10);
|
|
18384
18765
|
`;
|
|
18385
|
-
var inputToggleLabel2 =
|
|
18766
|
+
var inputToggleLabel2 = css84`
|
|
18386
18767
|
--inline-label-color: var(--typography-base);
|
|
18387
18768
|
align-items: center;
|
|
18388
18769
|
cursor: pointer;
|
|
@@ -18397,7 +18778,7 @@ var inputToggleLabel2 = css80`
|
|
|
18397
18778
|
--inline-label-color: var(--gray-400);
|
|
18398
18779
|
}
|
|
18399
18780
|
`;
|
|
18400
|
-
var toggleInput2 =
|
|
18781
|
+
var toggleInput2 = css84`
|
|
18401
18782
|
appearance: none;
|
|
18402
18783
|
border: 1px solid var(--gray-200);
|
|
18403
18784
|
background: var(--white);
|
|
@@ -18450,7 +18831,7 @@ var toggleInput2 = css80`
|
|
|
18450
18831
|
border-color: var(--gray-300);
|
|
18451
18832
|
}
|
|
18452
18833
|
`;
|
|
18453
|
-
var inlineLabel2 =
|
|
18834
|
+
var inlineLabel2 = css84`
|
|
18454
18835
|
color: var(--inline-label-color);
|
|
18455
18836
|
padding-left: var(--spacing-md);
|
|
18456
18837
|
font-size: var(--fs-sm);
|
|
@@ -18467,7 +18848,7 @@ var inlineLabel2 = css80`
|
|
|
18467
18848
|
}
|
|
18468
18849
|
}
|
|
18469
18850
|
`;
|
|
18470
|
-
var inputMenu =
|
|
18851
|
+
var inputMenu = css84`
|
|
18471
18852
|
background: none;
|
|
18472
18853
|
border: none;
|
|
18473
18854
|
padding: var(--spacing-2xs);
|
|
@@ -18475,10 +18856,10 @@ var inputMenu = css80`
|
|
|
18475
18856
|
top: calc(var(--spacing-md) * -1.2);
|
|
18476
18857
|
right: 0;
|
|
18477
18858
|
`;
|
|
18478
|
-
var inputActionItems =
|
|
18859
|
+
var inputActionItems = css84`
|
|
18479
18860
|
display: flex;
|
|
18480
18861
|
`;
|
|
18481
|
-
var inputMenuHover =
|
|
18862
|
+
var inputMenuHover = css84`
|
|
18482
18863
|
opacity: var(--opacity-50);
|
|
18483
18864
|
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
18484
18865
|
|
|
@@ -18488,11 +18869,11 @@ var inputMenuHover = css80`
|
|
|
18488
18869
|
background-color: var(--gray-200);
|
|
18489
18870
|
}
|
|
18490
18871
|
`;
|
|
18491
|
-
var textarea2 =
|
|
18872
|
+
var textarea2 = css84`
|
|
18492
18873
|
resize: vertical;
|
|
18493
18874
|
min-height: 2rem;
|
|
18494
18875
|
`;
|
|
18495
|
-
var dataConnectButton =
|
|
18876
|
+
var dataConnectButton = css84`
|
|
18496
18877
|
align-items: center;
|
|
18497
18878
|
appearance: none;
|
|
18498
18879
|
box-sizing: border-box;
|
|
@@ -18527,7 +18908,7 @@ var dataConnectButton = css80`
|
|
|
18527
18908
|
pointer-events: none;
|
|
18528
18909
|
}
|
|
18529
18910
|
`;
|
|
18530
|
-
var linkParameterBtn =
|
|
18911
|
+
var linkParameterBtn = css84`
|
|
18531
18912
|
border-radius: var(--rounded-base);
|
|
18532
18913
|
background: transparent;
|
|
18533
18914
|
border: none;
|
|
@@ -18536,7 +18917,7 @@ var linkParameterBtn = css80`
|
|
|
18536
18917
|
font-size: var(--fs-sm);
|
|
18537
18918
|
line-height: 1;
|
|
18538
18919
|
`;
|
|
18539
|
-
var linkParameterControls =
|
|
18920
|
+
var linkParameterControls = css84`
|
|
18540
18921
|
position: absolute;
|
|
18541
18922
|
inset: 0 0 0 auto;
|
|
18542
18923
|
padding: 0 var(--spacing-base);
|
|
@@ -18545,7 +18926,7 @@ var linkParameterControls = css80`
|
|
|
18545
18926
|
justify-content: center;
|
|
18546
18927
|
gap: var(--spacing-base);
|
|
18547
18928
|
`;
|
|
18548
|
-
var linkParameterInput = (withExternalLinkIcon) =>
|
|
18929
|
+
var linkParameterInput = (withExternalLinkIcon) => css84`
|
|
18549
18930
|
padding-right: calc(
|
|
18550
18931
|
${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
|
|
18551
18932
|
var(--spacing-base)
|
|
@@ -18558,7 +18939,7 @@ var linkParameterInput = (withExternalLinkIcon) => css80`
|
|
|
18558
18939
|
}
|
|
18559
18940
|
}
|
|
18560
18941
|
`;
|
|
18561
|
-
var linkParameterIcon =
|
|
18942
|
+
var linkParameterIcon = css84`
|
|
18562
18943
|
align-items: center;
|
|
18563
18944
|
color: var(--brand-secondary-3);
|
|
18564
18945
|
display: flex;
|
|
@@ -18573,7 +18954,7 @@ var linkParameterIcon = css80`
|
|
|
18573
18954
|
`;
|
|
18574
18955
|
|
|
18575
18956
|
// src/components/ParameterInputs/ParameterDataResource.tsx
|
|
18576
|
-
import { jsx as
|
|
18957
|
+
import { jsx as jsx108, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
|
|
18577
18958
|
function ParameterDataResource({
|
|
18578
18959
|
label,
|
|
18579
18960
|
labelLeadingIcon,
|
|
@@ -18583,12 +18964,12 @@ function ParameterDataResource({
|
|
|
18583
18964
|
disabled: disabled2,
|
|
18584
18965
|
children
|
|
18585
18966
|
}) {
|
|
18586
|
-
return /* @__PURE__ */
|
|
18587
|
-
/* @__PURE__ */
|
|
18967
|
+
return /* @__PURE__ */ jsxs72("div", { "data-testid": "parameter-data-connect-button", children: [
|
|
18968
|
+
/* @__PURE__ */ jsxs72("span", { css: labelText2, children: [
|
|
18588
18969
|
labelLeadingIcon ? labelLeadingIcon : null,
|
|
18589
18970
|
label
|
|
18590
18971
|
] }),
|
|
18591
|
-
/* @__PURE__ */
|
|
18972
|
+
/* @__PURE__ */ jsxs72(
|
|
18592
18973
|
"button",
|
|
18593
18974
|
{
|
|
18594
18975
|
type: "button",
|
|
@@ -18597,30 +18978,30 @@ function ParameterDataResource({
|
|
|
18597
18978
|
disabled: disabled2,
|
|
18598
18979
|
onClick: onConnectDatasource,
|
|
18599
18980
|
children: [
|
|
18600
|
-
/* @__PURE__ */
|
|
18981
|
+
/* @__PURE__ */ jsx108("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx108(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
|
|
18601
18982
|
children
|
|
18602
18983
|
]
|
|
18603
18984
|
}
|
|
18604
18985
|
),
|
|
18605
|
-
caption ? /* @__PURE__ */
|
|
18986
|
+
caption ? /* @__PURE__ */ jsx108(Caption, { children: caption }) : null
|
|
18606
18987
|
] });
|
|
18607
18988
|
}
|
|
18608
18989
|
|
|
18609
18990
|
// src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
|
|
18610
|
-
import { css as
|
|
18611
|
-
var ParameterDrawerHeaderContainer =
|
|
18991
|
+
import { css as css85 } from "@emotion/react";
|
|
18992
|
+
var ParameterDrawerHeaderContainer = css85`
|
|
18612
18993
|
align-items: center;
|
|
18613
18994
|
display: flex;
|
|
18614
18995
|
gap: var(--spacing-base);
|
|
18615
18996
|
justify-content: space-between;
|
|
18616
18997
|
margin-bottom: var(--spacing-sm);
|
|
18617
18998
|
`;
|
|
18618
|
-
var ParameterDrawerHeaderTitleGroup =
|
|
18999
|
+
var ParameterDrawerHeaderTitleGroup = css85`
|
|
18619
19000
|
align-items: center;
|
|
18620
19001
|
display: flex;
|
|
18621
19002
|
gap: var(--spacing-sm);
|
|
18622
19003
|
`;
|
|
18623
|
-
var ParameterDrawerHeaderTitle =
|
|
19004
|
+
var ParameterDrawerHeaderTitle = css85`
|
|
18624
19005
|
text-overflow: ellipsis;
|
|
18625
19006
|
white-space: nowrap;
|
|
18626
19007
|
overflow: hidden;
|
|
@@ -18628,12 +19009,12 @@ var ParameterDrawerHeaderTitle = css81`
|
|
|
18628
19009
|
`;
|
|
18629
19010
|
|
|
18630
19011
|
// src/components/ParameterInputs/ParameterDrawerHeader.tsx
|
|
18631
|
-
import { jsx as
|
|
19012
|
+
import { jsx as jsx109, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
|
|
18632
19013
|
var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
|
|
18633
|
-
return /* @__PURE__ */
|
|
18634
|
-
/* @__PURE__ */
|
|
19014
|
+
return /* @__PURE__ */ jsxs73("div", { css: ParameterDrawerHeaderContainer, children: [
|
|
19015
|
+
/* @__PURE__ */ jsxs73("header", { css: ParameterDrawerHeaderTitleGroup, children: [
|
|
18635
19016
|
iconBeforeTitle,
|
|
18636
|
-
/* @__PURE__ */
|
|
19017
|
+
/* @__PURE__ */ jsx109(Heading2, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
|
|
18637
19018
|
] }),
|
|
18638
19019
|
children
|
|
18639
19020
|
] });
|
|
@@ -18643,8 +19024,8 @@ var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
|
|
|
18643
19024
|
import { forwardRef as forwardRef16 } from "react";
|
|
18644
19025
|
|
|
18645
19026
|
// src/components/ParameterInputs/styles/ParameterGroup.styles.ts
|
|
18646
|
-
import { css as
|
|
18647
|
-
var fieldsetStyles =
|
|
19027
|
+
import { css as css86 } from "@emotion/react";
|
|
19028
|
+
var fieldsetStyles = css86`
|
|
18648
19029
|
&:disabled,
|
|
18649
19030
|
[readonly] {
|
|
18650
19031
|
pointer-events: none;
|
|
@@ -18655,7 +19036,7 @@ var fieldsetStyles = css82`
|
|
|
18655
19036
|
}
|
|
18656
19037
|
}
|
|
18657
19038
|
`;
|
|
18658
|
-
var fieldsetLegend2 =
|
|
19039
|
+
var fieldsetLegend2 = css86`
|
|
18659
19040
|
display: block;
|
|
18660
19041
|
font-weight: var(--fw-medium);
|
|
18661
19042
|
margin-bottom: var(--spacing-sm);
|
|
@@ -18663,11 +19044,11 @@ var fieldsetLegend2 = css82`
|
|
|
18663
19044
|
`;
|
|
18664
19045
|
|
|
18665
19046
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
18666
|
-
import { jsx as
|
|
19047
|
+
import { jsx as jsx110, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
|
|
18667
19048
|
var ParameterGroup = forwardRef16(
|
|
18668
19049
|
({ legend, isDisabled, children, ...props }, ref) => {
|
|
18669
|
-
return /* @__PURE__ */
|
|
18670
|
-
/* @__PURE__ */
|
|
19050
|
+
return /* @__PURE__ */ jsxs74("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
|
|
19051
|
+
/* @__PURE__ */ jsx110("legend", { css: fieldsetLegend2, children: legend }),
|
|
18671
19052
|
children
|
|
18672
19053
|
] });
|
|
18673
19054
|
}
|
|
@@ -18677,19 +19058,19 @@ var ParameterGroup = forwardRef16(
|
|
|
18677
19058
|
import { forwardRef as forwardRef18, useDeferredValue } from "react";
|
|
18678
19059
|
|
|
18679
19060
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
18680
|
-
import { useState as
|
|
19061
|
+
import { useState as useState13 } from "react";
|
|
18681
19062
|
import { createPortal as createPortal2 } from "react-dom";
|
|
18682
19063
|
|
|
18683
19064
|
// src/components/ParameterInputs/styles/ParameterImage.styles.ts
|
|
18684
|
-
import { css as
|
|
18685
|
-
var previewWrapper =
|
|
19065
|
+
import { css as css87 } from "@emotion/react";
|
|
19066
|
+
var previewWrapper = css87`
|
|
18686
19067
|
margin-top: var(--spacing-xs);
|
|
18687
19068
|
background: var(--gray-50);
|
|
18688
19069
|
padding: var(--spacing-sm);
|
|
18689
19070
|
border: solid 1px var(--gray-300);
|
|
18690
19071
|
border-radius: var(--rounded-sm);
|
|
18691
19072
|
`;
|
|
18692
|
-
var previewLink =
|
|
19073
|
+
var previewLink = css87`
|
|
18693
19074
|
display: block;
|
|
18694
19075
|
width: 100%;
|
|
18695
19076
|
|
|
@@ -18697,7 +19078,7 @@ var previewLink = css83`
|
|
|
18697
19078
|
max-height: 9rem;
|
|
18698
19079
|
}
|
|
18699
19080
|
`;
|
|
18700
|
-
var previewModalWrapper =
|
|
19081
|
+
var previewModalWrapper = css87`
|
|
18701
19082
|
background: var(--gray-50);
|
|
18702
19083
|
display: flex;
|
|
18703
19084
|
height: 100%;
|
|
@@ -18706,7 +19087,7 @@ var previewModalWrapper = css83`
|
|
|
18706
19087
|
border: solid 1px var(--gray-300);
|
|
18707
19088
|
border-radius: var(--rounded-sm);
|
|
18708
19089
|
`;
|
|
18709
|
-
var previewModalImage =
|
|
19090
|
+
var previewModalImage = css87`
|
|
18710
19091
|
display: flex;
|
|
18711
19092
|
height: 100%;
|
|
18712
19093
|
width: 100%;
|
|
@@ -18718,32 +19099,32 @@ var previewModalImage = css83`
|
|
|
18718
19099
|
`;
|
|
18719
19100
|
|
|
18720
19101
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
18721
|
-
import { Fragment as
|
|
19102
|
+
import { Fragment as Fragment15, jsx as jsx111, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
|
|
18722
19103
|
function ParameterImagePreview({ imageSrc }) {
|
|
18723
|
-
const [showModal, setShowModal] =
|
|
18724
|
-
return imageSrc ? /* @__PURE__ */
|
|
18725
|
-
/* @__PURE__ */
|
|
18726
|
-
/* @__PURE__ */
|
|
19104
|
+
const [showModal, setShowModal] = useState13(false);
|
|
19105
|
+
return imageSrc ? /* @__PURE__ */ jsxs75("div", { css: previewWrapper, children: [
|
|
19106
|
+
/* @__PURE__ */ jsx111(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
|
|
19107
|
+
/* @__PURE__ */ jsx111(
|
|
18727
19108
|
"button",
|
|
18728
19109
|
{
|
|
18729
19110
|
css: previewLink,
|
|
18730
19111
|
onClick: () => {
|
|
18731
19112
|
setShowModal(true);
|
|
18732
19113
|
},
|
|
18733
|
-
children: /* @__PURE__ */
|
|
19114
|
+
children: /* @__PURE__ */ jsx111(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
|
|
18734
19115
|
}
|
|
18735
19116
|
)
|
|
18736
19117
|
] }) : null;
|
|
18737
19118
|
}
|
|
18738
19119
|
var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
18739
|
-
return open ? /* @__PURE__ */
|
|
18740
|
-
/* @__PURE__ */
|
|
19120
|
+
return open ? /* @__PURE__ */ jsx111(Fragment15, { children: createPortal2(
|
|
19121
|
+
/* @__PURE__ */ jsx111(
|
|
18741
19122
|
Modal,
|
|
18742
19123
|
{
|
|
18743
19124
|
header: "Image Preview",
|
|
18744
19125
|
onRequestClose,
|
|
18745
|
-
buttonGroup: /* @__PURE__ */
|
|
18746
|
-
children: /* @__PURE__ */
|
|
19126
|
+
buttonGroup: /* @__PURE__ */ jsx111(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
|
|
19127
|
+
children: /* @__PURE__ */ jsx111("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx111(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
|
|
18747
19128
|
}
|
|
18748
19129
|
),
|
|
18749
19130
|
document.body
|
|
@@ -18751,25 +19132,25 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
|
18751
19132
|
};
|
|
18752
19133
|
|
|
18753
19134
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
18754
|
-
import { css as
|
|
18755
|
-
import { useState as
|
|
19135
|
+
import { css as css89 } from "@emotion/react";
|
|
19136
|
+
import { useState as useState14 } from "react";
|
|
18756
19137
|
|
|
18757
19138
|
// src/components/ParameterInputs/ParameterLabel.tsx
|
|
18758
|
-
import { jsx as
|
|
19139
|
+
import { jsx as jsx112 } from "@emotion/react/jsx-runtime";
|
|
18759
19140
|
var ParameterLabel = ({ id, asSpan, children, ...props }) => {
|
|
18760
|
-
return !asSpan ? /* @__PURE__ */
|
|
19141
|
+
return !asSpan ? /* @__PURE__ */ jsx112("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx112("span", { "aria-labelledby": id, css: labelText2, children });
|
|
18761
19142
|
};
|
|
18762
19143
|
|
|
18763
19144
|
// src/components/ParameterInputs/ParameterMenuButton.tsx
|
|
18764
19145
|
import { forwardRef as forwardRef17 } from "react";
|
|
18765
|
-
import { jsx as
|
|
19146
|
+
import { jsx as jsx113 } from "@emotion/react/jsx-runtime";
|
|
18766
19147
|
var ParameterMenuButton = forwardRef17(
|
|
18767
19148
|
({ label, children }, ref) => {
|
|
18768
|
-
return /* @__PURE__ */
|
|
19149
|
+
return /* @__PURE__ */ jsx113(
|
|
18769
19150
|
Menu,
|
|
18770
19151
|
{
|
|
18771
19152
|
menuLabel: `${label} menu`,
|
|
18772
|
-
menuTrigger: /* @__PURE__ */
|
|
19153
|
+
menuTrigger: /* @__PURE__ */ jsx113(
|
|
18773
19154
|
"button",
|
|
18774
19155
|
{
|
|
18775
19156
|
className: "parameter-menu",
|
|
@@ -18777,7 +19158,7 @@ var ParameterMenuButton = forwardRef17(
|
|
|
18777
19158
|
type: "button",
|
|
18778
19159
|
"aria-label": `${label} options`,
|
|
18779
19160
|
ref,
|
|
18780
|
-
children: /* @__PURE__ */
|
|
19161
|
+
children: /* @__PURE__ */ jsx113(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
|
|
18781
19162
|
}
|
|
18782
19163
|
),
|
|
18783
19164
|
children
|
|
@@ -18787,14 +19168,14 @@ var ParameterMenuButton = forwardRef17(
|
|
|
18787
19168
|
);
|
|
18788
19169
|
|
|
18789
19170
|
// src/components/ParameterInputs/styles/ParameterShell.styles.ts
|
|
18790
|
-
import { css as
|
|
18791
|
-
var emptyParameterShell =
|
|
19171
|
+
import { css as css88 } from "@emotion/react";
|
|
19172
|
+
var emptyParameterShell = css88`
|
|
18792
19173
|
border-radius: var(--rounded-sm);
|
|
18793
19174
|
flex-grow: 1;
|
|
18794
19175
|
position: relative;
|
|
18795
19176
|
max-width: 100%;
|
|
18796
19177
|
`;
|
|
18797
|
-
var emptyParameterShellText =
|
|
19178
|
+
var emptyParameterShellText = css88`
|
|
18798
19179
|
background: var(--brand-secondary-6);
|
|
18799
19180
|
border-radius: var(--rounded-sm);
|
|
18800
19181
|
padding: var(--spacing-sm);
|
|
@@ -18802,7 +19183,7 @@ var emptyParameterShellText = css84`
|
|
|
18802
19183
|
font-size: var(--fs-sm);
|
|
18803
19184
|
margin: 0;
|
|
18804
19185
|
`;
|
|
18805
|
-
var overrideMarker =
|
|
19186
|
+
var overrideMarker = css88`
|
|
18806
19187
|
border-radius: var(--rounded-sm);
|
|
18807
19188
|
border: 10px solid var(--gray-300);
|
|
18808
19189
|
border-left-color: transparent;
|
|
@@ -18813,7 +19194,7 @@ var overrideMarker = css84`
|
|
|
18813
19194
|
`;
|
|
18814
19195
|
|
|
18815
19196
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
18816
|
-
import { jsx as
|
|
19197
|
+
import { jsx as jsx114, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
|
|
18817
19198
|
var extractParameterProps = (props) => {
|
|
18818
19199
|
const {
|
|
18819
19200
|
id,
|
|
@@ -18873,36 +19254,36 @@ var ParameterShell = ({
|
|
|
18873
19254
|
isParameterGroup = false,
|
|
18874
19255
|
...props
|
|
18875
19256
|
}) => {
|
|
18876
|
-
const [manualErrorMessage, setManualErrorMessage] =
|
|
19257
|
+
const [manualErrorMessage, setManualErrorMessage] = useState14(void 0);
|
|
18877
19258
|
const setErrorMessage = (message) => setManualErrorMessage(message);
|
|
18878
19259
|
const errorMessaging = errorMessage || manualErrorMessage;
|
|
18879
|
-
return /* @__PURE__ */
|
|
18880
|
-
hiddenLabel || title2 ? null : /* @__PURE__ */
|
|
19260
|
+
return /* @__PURE__ */ jsxs76("div", { css: inputContainer2, ...props, id, children: [
|
|
19261
|
+
hiddenLabel || title2 ? null : /* @__PURE__ */ jsxs76(ParameterLabel, { id, css: labelText2, children: [
|
|
18881
19262
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
18882
19263
|
label,
|
|
18883
19264
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
18884
19265
|
] }),
|
|
18885
|
-
!title2 ? null : /* @__PURE__ */
|
|
19266
|
+
!title2 ? null : /* @__PURE__ */ jsxs76(ParameterLabel, { id, asSpan: true, children: [
|
|
18886
19267
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
18887
19268
|
title2,
|
|
18888
19269
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
18889
19270
|
] }),
|
|
18890
|
-
/* @__PURE__ */
|
|
18891
|
-
actionItems ? /* @__PURE__ */
|
|
19271
|
+
/* @__PURE__ */ jsxs76("div", { css: inputWrapper, children: [
|
|
19272
|
+
actionItems ? /* @__PURE__ */ jsx114(
|
|
18892
19273
|
"div",
|
|
18893
19274
|
{
|
|
18894
19275
|
css: [
|
|
18895
19276
|
inputMenu,
|
|
18896
19277
|
inputActionItems,
|
|
18897
|
-
menuItems ?
|
|
19278
|
+
menuItems ? css89`
|
|
18898
19279
|
right: var(--spacing-md);
|
|
18899
19280
|
` : void 0
|
|
18900
19281
|
],
|
|
18901
19282
|
children: actionItems
|
|
18902
19283
|
}
|
|
18903
19284
|
) : null,
|
|
18904
|
-
menuItems ? /* @__PURE__ */
|
|
18905
|
-
/* @__PURE__ */
|
|
19285
|
+
menuItems ? /* @__PURE__ */ jsx114(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
|
|
19286
|
+
/* @__PURE__ */ jsx114(
|
|
18906
19287
|
ParameterShellContext.Provider,
|
|
18907
19288
|
{
|
|
18908
19289
|
value: {
|
|
@@ -18912,14 +19293,14 @@ var ParameterShell = ({
|
|
|
18912
19293
|
errorMessage: errorMessaging,
|
|
18913
19294
|
handleManuallySetErrorMessage: (message) => setErrorMessage(message)
|
|
18914
19295
|
},
|
|
18915
|
-
children: isParameterGroup ? /* @__PURE__ */
|
|
19296
|
+
children: isParameterGroup ? /* @__PURE__ */ jsx114("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ jsxs76(ParameterShellPlaceholder, { children: [
|
|
18916
19297
|
children,
|
|
18917
|
-
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */
|
|
19298
|
+
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx114(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
|
|
18918
19299
|
] })
|
|
18919
19300
|
}
|
|
18920
19301
|
)
|
|
18921
19302
|
] }),
|
|
18922
|
-
/* @__PURE__ */
|
|
19303
|
+
/* @__PURE__ */ jsx114(
|
|
18923
19304
|
FieldMessage,
|
|
18924
19305
|
{
|
|
18925
19306
|
helperMessageTestId: captionTestId,
|
|
@@ -18933,17 +19314,17 @@ var ParameterShell = ({
|
|
|
18933
19314
|
] });
|
|
18934
19315
|
};
|
|
18935
19316
|
var ParameterShellPlaceholder = ({ children }) => {
|
|
18936
|
-
return /* @__PURE__ */
|
|
19317
|
+
return /* @__PURE__ */ jsx114("div", { css: emptyParameterShell, children });
|
|
18937
19318
|
};
|
|
18938
|
-
var ParameterOverrideMarker = (props) => /* @__PURE__ */
|
|
19319
|
+
var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx114(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx114("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx114("span", { hidden: true, children: "reset overridden value to default" }) }) });
|
|
18939
19320
|
|
|
18940
19321
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
18941
|
-
import { Fragment as
|
|
19322
|
+
import { Fragment as Fragment16, jsx as jsx115, jsxs as jsxs77 } from "@emotion/react/jsx-runtime";
|
|
18942
19323
|
var ParameterImage = forwardRef18(
|
|
18943
19324
|
({ children, ...props }, ref) => {
|
|
18944
19325
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
18945
|
-
return /* @__PURE__ */
|
|
18946
|
-
/* @__PURE__ */
|
|
19326
|
+
return /* @__PURE__ */ jsxs77(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
|
|
19327
|
+
/* @__PURE__ */ jsx115(ParameterImageInner, { ref, ...innerProps }),
|
|
18947
19328
|
children
|
|
18948
19329
|
] });
|
|
18949
19330
|
}
|
|
@@ -18952,8 +19333,8 @@ var ParameterImageInner = forwardRef18((props, ref) => {
|
|
|
18952
19333
|
const { value } = props;
|
|
18953
19334
|
const { id, label, hiddenLabel, errorMessage } = useParameterShell();
|
|
18954
19335
|
const deferredValue = useDeferredValue(value);
|
|
18955
|
-
return /* @__PURE__ */
|
|
18956
|
-
/* @__PURE__ */
|
|
19336
|
+
return /* @__PURE__ */ jsxs77(Fragment16, { children: [
|
|
19337
|
+
/* @__PURE__ */ jsx115(
|
|
18957
19338
|
"input",
|
|
18958
19339
|
{
|
|
18959
19340
|
css: input3,
|
|
@@ -18965,21 +19346,21 @@ var ParameterImageInner = forwardRef18((props, ref) => {
|
|
|
18965
19346
|
...props
|
|
18966
19347
|
}
|
|
18967
19348
|
),
|
|
18968
|
-
errorMessage || props.disablePreview ? null : /* @__PURE__ */
|
|
19349
|
+
errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx115(ParameterImagePreview, { imageSrc: deferredValue })
|
|
18969
19350
|
] });
|
|
18970
19351
|
});
|
|
18971
19352
|
|
|
18972
19353
|
// src/components/ParameterInputs/ParameterInput.tsx
|
|
18973
19354
|
import { forwardRef as forwardRef19 } from "react";
|
|
18974
|
-
import { jsx as
|
|
19355
|
+
import { jsx as jsx116 } from "@emotion/react/jsx-runtime";
|
|
18975
19356
|
var ParameterInput = forwardRef19((props, ref) => {
|
|
18976
19357
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
18977
|
-
return /* @__PURE__ */
|
|
19358
|
+
return /* @__PURE__ */ jsx116(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx116(ParameterInputInner, { ref, ...innerProps }) });
|
|
18978
19359
|
});
|
|
18979
19360
|
var ParameterInputInner = forwardRef19(
|
|
18980
19361
|
({ ...props }, ref) => {
|
|
18981
19362
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
18982
|
-
return /* @__PURE__ */
|
|
19363
|
+
return /* @__PURE__ */ jsx116(
|
|
18983
19364
|
"input",
|
|
18984
19365
|
{
|
|
18985
19366
|
css: input3,
|
|
@@ -18996,18 +19377,18 @@ var ParameterInputInner = forwardRef19(
|
|
|
18996
19377
|
|
|
18997
19378
|
// src/components/ParameterInputs/ParameterLink.tsx
|
|
18998
19379
|
import { forwardRef as forwardRef20 } from "react";
|
|
18999
|
-
import { jsx as
|
|
19380
|
+
import { jsx as jsx117, jsxs as jsxs78 } from "@emotion/react/jsx-runtime";
|
|
19000
19381
|
var ParameterLink = forwardRef20(
|
|
19001
19382
|
({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
|
|
19002
19383
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
19003
|
-
return /* @__PURE__ */
|
|
19384
|
+
return /* @__PURE__ */ jsx117(
|
|
19004
19385
|
ParameterShell,
|
|
19005
19386
|
{
|
|
19006
19387
|
"data-testid": "link-parameter-editor",
|
|
19007
19388
|
...shellProps,
|
|
19008
19389
|
label: innerProps.value ? shellProps.label : "",
|
|
19009
19390
|
title: !innerProps.value ? shellProps.label : void 0,
|
|
19010
|
-
children: /* @__PURE__ */
|
|
19391
|
+
children: /* @__PURE__ */ jsx117(
|
|
19011
19392
|
ParameterLinkInner,
|
|
19012
19393
|
{
|
|
19013
19394
|
onConnectLink,
|
|
@@ -19024,9 +19405,9 @@ var ParameterLinkInner = forwardRef20(
|
|
|
19024
19405
|
({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
|
|
19025
19406
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
19026
19407
|
if (!props.value)
|
|
19027
|
-
return /* @__PURE__ */
|
|
19028
|
-
return /* @__PURE__ */
|
|
19029
|
-
/* @__PURE__ */
|
|
19408
|
+
return /* @__PURE__ */ jsx117("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
|
|
19409
|
+
return /* @__PURE__ */ jsxs78("div", { css: inputWrapper, children: [
|
|
19410
|
+
/* @__PURE__ */ jsx117(
|
|
19030
19411
|
"input",
|
|
19031
19412
|
{
|
|
19032
19413
|
type: "text",
|
|
@@ -19038,8 +19419,8 @@ var ParameterLinkInner = forwardRef20(
|
|
|
19038
19419
|
...props
|
|
19039
19420
|
}
|
|
19040
19421
|
),
|
|
19041
|
-
/* @__PURE__ */
|
|
19042
|
-
/* @__PURE__ */
|
|
19422
|
+
/* @__PURE__ */ jsxs78("div", { css: linkParameterControls, children: [
|
|
19423
|
+
/* @__PURE__ */ jsx117(
|
|
19043
19424
|
"button",
|
|
19044
19425
|
{
|
|
19045
19426
|
type: "button",
|
|
@@ -19050,7 +19431,7 @@ var ParameterLinkInner = forwardRef20(
|
|
|
19050
19431
|
children: "edit"
|
|
19051
19432
|
}
|
|
19052
19433
|
),
|
|
19053
|
-
externalLink ? /* @__PURE__ */
|
|
19434
|
+
externalLink ? /* @__PURE__ */ jsx117(
|
|
19054
19435
|
"a",
|
|
19055
19436
|
{
|
|
19056
19437
|
href: externalLink,
|
|
@@ -19058,7 +19439,7 @@ var ParameterLinkInner = forwardRef20(
|
|
|
19058
19439
|
title: "Open link in new tab",
|
|
19059
19440
|
target: "_blank",
|
|
19060
19441
|
rel: "noopener noreferrer",
|
|
19061
|
-
children: /* @__PURE__ */
|
|
19442
|
+
children: /* @__PURE__ */ jsx117(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
|
|
19062
19443
|
}
|
|
19063
19444
|
) : null
|
|
19064
19445
|
] })
|
|
@@ -19067,15 +19448,15 @@ var ParameterLinkInner = forwardRef20(
|
|
|
19067
19448
|
);
|
|
19068
19449
|
|
|
19069
19450
|
// src/components/ParameterInputs/ParameterMultiSelect.tsx
|
|
19070
|
-
import { jsx as
|
|
19451
|
+
import { jsx as jsx118 } from "@emotion/react/jsx-runtime";
|
|
19071
19452
|
var ParameterMultiSelect = ({ disabled: disabled2 = false, ...props }) => {
|
|
19072
19453
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
19073
|
-
return /* @__PURE__ */
|
|
19454
|
+
return /* @__PURE__ */ jsx118(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx118(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
|
|
19074
19455
|
};
|
|
19075
19456
|
var ParameterMultiSelectInner = (props) => {
|
|
19076
19457
|
var _a;
|
|
19077
19458
|
const { id, label } = useParameterShell();
|
|
19078
|
-
return /* @__PURE__ */
|
|
19459
|
+
return /* @__PURE__ */ jsx118(
|
|
19079
19460
|
InputComboBox,
|
|
19080
19461
|
{
|
|
19081
19462
|
menuPortalTarget: document.body,
|
|
@@ -19125,7 +19506,7 @@ var ParameterMultiSelectInner = (props) => {
|
|
|
19125
19506
|
};
|
|
19126
19507
|
|
|
19127
19508
|
// src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
|
|
19128
|
-
import { Fragment as
|
|
19509
|
+
import { Fragment as Fragment17, jsx as jsx119, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
|
|
19129
19510
|
var ParameterNameAndPublicIdInput = ({
|
|
19130
19511
|
id,
|
|
19131
19512
|
onBlur,
|
|
@@ -19151,8 +19532,8 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
19151
19532
|
navigator.clipboard.writeText(values[publicIdFieldName]);
|
|
19152
19533
|
};
|
|
19153
19534
|
autoFocus == null ? void 0 : autoFocus();
|
|
19154
|
-
return /* @__PURE__ */
|
|
19155
|
-
/* @__PURE__ */
|
|
19535
|
+
return /* @__PURE__ */ jsxs79(Fragment17, { children: [
|
|
19536
|
+
/* @__PURE__ */ jsx119(
|
|
19156
19537
|
ParameterInput,
|
|
19157
19538
|
{
|
|
19158
19539
|
id: nameIdField,
|
|
@@ -19171,7 +19552,7 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
19171
19552
|
value: values[nameIdField]
|
|
19172
19553
|
}
|
|
19173
19554
|
),
|
|
19174
|
-
/* @__PURE__ */
|
|
19555
|
+
/* @__PURE__ */ jsx119(
|
|
19175
19556
|
ParameterInput,
|
|
19176
19557
|
{
|
|
19177
19558
|
id: publicIdFieldName,
|
|
@@ -19185,11 +19566,11 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
19185
19566
|
caption: !publicIdError ? publicIdCaption : void 0,
|
|
19186
19567
|
placeholder: publicIdPlaceholderText,
|
|
19187
19568
|
errorMessage: publicIdError,
|
|
19188
|
-
menuItems: /* @__PURE__ */
|
|
19569
|
+
menuItems: /* @__PURE__ */ jsx119(
|
|
19189
19570
|
MenuItem,
|
|
19190
19571
|
{
|
|
19191
19572
|
disabled: !values[publicIdFieldName],
|
|
19192
|
-
icon: /* @__PURE__ */
|
|
19573
|
+
icon: /* @__PURE__ */ jsx119(Icon, { icon: "path-trim", iconColor: "currentColor" }),
|
|
19193
19574
|
onClick: handleCopyPidFieldValue,
|
|
19194
19575
|
children: "Copy"
|
|
19195
19576
|
}
|
|
@@ -19197,12 +19578,12 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
19197
19578
|
value: values[publicIdFieldName]
|
|
19198
19579
|
}
|
|
19199
19580
|
),
|
|
19200
|
-
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */
|
|
19581
|
+
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx119(Callout, { type: "caution", children: warnOverLength.message }) : null
|
|
19201
19582
|
] });
|
|
19202
19583
|
};
|
|
19203
19584
|
|
|
19204
19585
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
19205
|
-
import { css as
|
|
19586
|
+
import { css as css93 } from "@emotion/react";
|
|
19206
19587
|
import { ListItemNode, ListNode as ListNode2 } from "@lexical/list";
|
|
19207
19588
|
import {
|
|
19208
19589
|
CODE,
|
|
@@ -19316,7 +19697,7 @@ var getLabelForElement = (type) => {
|
|
|
19316
19697
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
19317
19698
|
import { deepEqual as deepEqual2 } from "fast-equals";
|
|
19318
19699
|
import { ParagraphNode as ParagraphNode2 } from "lexical";
|
|
19319
|
-
import { useEffect as
|
|
19700
|
+
import { useEffect as useEffect19, useRef as useRef10 } from "react";
|
|
19320
19701
|
|
|
19321
19702
|
// src/components/ParameterInputs/rich-text/CustomCodeNode.ts
|
|
19322
19703
|
import { CodeNode } from "@lexical/code";
|
|
@@ -19337,10 +19718,10 @@ CustomCodeNode.importDOM = function() {
|
|
|
19337
19718
|
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
|
|
19338
19719
|
import { mergeRegister } from "@lexical/utils";
|
|
19339
19720
|
import { ParagraphNode } from "lexical";
|
|
19340
|
-
import { useEffect as
|
|
19721
|
+
import { useEffect as useEffect15 } from "react";
|
|
19341
19722
|
function DisableStylesPlugin() {
|
|
19342
19723
|
const [editor] = useLexicalComposerContext();
|
|
19343
|
-
|
|
19724
|
+
useEffect15(() => {
|
|
19344
19725
|
return mergeRegister(
|
|
19345
19726
|
// Disable text alignment on paragraph nodes
|
|
19346
19727
|
editor.registerNodeTransform(ParagraphNode, (node) => {
|
|
@@ -19354,23 +19735,23 @@ function DisableStylesPlugin() {
|
|
|
19354
19735
|
}
|
|
19355
19736
|
|
|
19356
19737
|
// src/components/ParameterInputs/rich-text/editorStyles.ts
|
|
19357
|
-
import { css as
|
|
19358
|
-
var textBold =
|
|
19738
|
+
import { css as css90 } from "@emotion/css";
|
|
19739
|
+
var textBold = css90`
|
|
19359
19740
|
font-weight: 700;
|
|
19360
19741
|
`;
|
|
19361
|
-
var textItalic =
|
|
19742
|
+
var textItalic = css90`
|
|
19362
19743
|
font-style: italic;
|
|
19363
19744
|
`;
|
|
19364
|
-
var textUnderline =
|
|
19745
|
+
var textUnderline = css90`
|
|
19365
19746
|
text-decoration: underline;
|
|
19366
19747
|
`;
|
|
19367
|
-
var textStrikethrough =
|
|
19748
|
+
var textStrikethrough = css90`
|
|
19368
19749
|
text-decoration: line-through;
|
|
19369
19750
|
`;
|
|
19370
|
-
var textUnderlineStrikethrough =
|
|
19751
|
+
var textUnderlineStrikethrough = css90`
|
|
19371
19752
|
text-decoration: underline line-through;
|
|
19372
19753
|
`;
|
|
19373
|
-
var textCode =
|
|
19754
|
+
var textCode = css90`
|
|
19374
19755
|
background-color: var(--gray-100);
|
|
19375
19756
|
border-radius: var(--rounded-sm);
|
|
19376
19757
|
display: inline-block;
|
|
@@ -19381,68 +19762,68 @@ var textCode = css86`
|
|
|
19381
19762
|
padding-left: var(--spacing-xs);
|
|
19382
19763
|
padding-right: var(--spacing-xs);
|
|
19383
19764
|
`;
|
|
19384
|
-
var textSuperscript =
|
|
19765
|
+
var textSuperscript = css90`
|
|
19385
19766
|
vertical-align: super;
|
|
19386
19767
|
font-size: smaller;
|
|
19387
19768
|
`;
|
|
19388
|
-
var textSubscript =
|
|
19769
|
+
var textSubscript = css90`
|
|
19389
19770
|
vertical-align: sub;
|
|
19390
19771
|
font-size: smaller;
|
|
19391
19772
|
`;
|
|
19392
|
-
var linkElement =
|
|
19773
|
+
var linkElement = css90`
|
|
19393
19774
|
${link}
|
|
19394
19775
|
${linkColorDefault}
|
|
19395
19776
|
text-decoration: underline;
|
|
19396
19777
|
`;
|
|
19397
|
-
var h12 =
|
|
19778
|
+
var h12 = css90`
|
|
19398
19779
|
font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
|
|
19399
19780
|
`;
|
|
19400
|
-
var h22 =
|
|
19781
|
+
var h22 = css90`
|
|
19401
19782
|
font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
|
|
19402
19783
|
`;
|
|
19403
|
-
var h32 =
|
|
19784
|
+
var h32 = css90`
|
|
19404
19785
|
font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
|
|
19405
19786
|
`;
|
|
19406
|
-
var h42 =
|
|
19787
|
+
var h42 = css90`
|
|
19407
19788
|
font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
|
|
19408
19789
|
`;
|
|
19409
|
-
var h52 =
|
|
19790
|
+
var h52 = css90`
|
|
19410
19791
|
font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
|
|
19411
19792
|
`;
|
|
19412
|
-
var h62 =
|
|
19793
|
+
var h62 = css90`
|
|
19413
19794
|
font-size: var(--fs-base);
|
|
19414
19795
|
`;
|
|
19415
|
-
var heading1Element =
|
|
19796
|
+
var heading1Element = css90`
|
|
19416
19797
|
${h12}
|
|
19417
19798
|
${commonHeadingAttr(true)}
|
|
19418
19799
|
${commonLineHeight}
|
|
19419
19800
|
`;
|
|
19420
|
-
var heading2Element =
|
|
19801
|
+
var heading2Element = css90`
|
|
19421
19802
|
${h22}
|
|
19422
19803
|
${commonHeadingAttr(true)}
|
|
19423
19804
|
${commonLineHeight}
|
|
19424
19805
|
`;
|
|
19425
|
-
var heading3Element =
|
|
19806
|
+
var heading3Element = css90`
|
|
19426
19807
|
${h32}
|
|
19427
19808
|
${commonHeadingAttr(true)}
|
|
19428
19809
|
${commonLineHeight}
|
|
19429
19810
|
`;
|
|
19430
|
-
var heading4Element =
|
|
19811
|
+
var heading4Element = css90`
|
|
19431
19812
|
${h42}
|
|
19432
19813
|
${commonHeadingAttr(true)}
|
|
19433
19814
|
${commonLineHeight}
|
|
19434
19815
|
`;
|
|
19435
|
-
var heading5Element =
|
|
19816
|
+
var heading5Element = css90`
|
|
19436
19817
|
${h52}
|
|
19437
19818
|
${commonHeadingAttr(true)}
|
|
19438
19819
|
${commonLineHeight}
|
|
19439
19820
|
`;
|
|
19440
|
-
var heading6Element =
|
|
19821
|
+
var heading6Element = css90`
|
|
19441
19822
|
${h62}
|
|
19442
19823
|
${commonHeadingAttr(true)}
|
|
19443
19824
|
${commonLineHeight}
|
|
19444
19825
|
`;
|
|
19445
|
-
var paragraphElement =
|
|
19826
|
+
var paragraphElement = css90`
|
|
19446
19827
|
line-height: 1.5;
|
|
19447
19828
|
margin-bottom: var(--spacing-base);
|
|
19448
19829
|
|
|
@@ -19450,7 +19831,7 @@ var paragraphElement = css86`
|
|
|
19450
19831
|
margin-bottom: 0;
|
|
19451
19832
|
}
|
|
19452
19833
|
`;
|
|
19453
|
-
var orderedListElement =
|
|
19834
|
+
var orderedListElement = css90`
|
|
19454
19835
|
${commonLineHeight}
|
|
19455
19836
|
display: block;
|
|
19456
19837
|
list-style: decimal;
|
|
@@ -19479,7 +19860,7 @@ var orderedListElement = css86`
|
|
|
19479
19860
|
}
|
|
19480
19861
|
}
|
|
19481
19862
|
`;
|
|
19482
|
-
var unorderedListElement =
|
|
19863
|
+
var unorderedListElement = css90`
|
|
19483
19864
|
${commonLineHeight}
|
|
19484
19865
|
display: block;
|
|
19485
19866
|
list-style: disc;
|
|
@@ -19500,13 +19881,13 @@ var unorderedListElement = css86`
|
|
|
19500
19881
|
}
|
|
19501
19882
|
}
|
|
19502
19883
|
`;
|
|
19503
|
-
var listItemElement =
|
|
19884
|
+
var listItemElement = css90`
|
|
19504
19885
|
margin-left: var(--spacing-md);
|
|
19505
19886
|
`;
|
|
19506
|
-
var nestedListItemElement =
|
|
19887
|
+
var nestedListItemElement = css90`
|
|
19507
19888
|
list-style-type: none;
|
|
19508
19889
|
`;
|
|
19509
|
-
var blockquoteElement =
|
|
19890
|
+
var blockquoteElement = css90`
|
|
19510
19891
|
border-left: 0.25rem solid var(--gray-300);
|
|
19511
19892
|
color: var(--gray-600);
|
|
19512
19893
|
margin-bottom: var(--spacing-base);
|
|
@@ -19516,7 +19897,7 @@ var blockquoteElement = css86`
|
|
|
19516
19897
|
margin-bottom: 0;
|
|
19517
19898
|
}
|
|
19518
19899
|
`;
|
|
19519
|
-
var codeElement =
|
|
19900
|
+
var codeElement = css90`
|
|
19520
19901
|
background-color: var(--gray-100);
|
|
19521
19902
|
border-radius: var(--rounded-sm);
|
|
19522
19903
|
display: block;
|
|
@@ -19533,7 +19914,7 @@ var codeElement = css86`
|
|
|
19533
19914
|
`;
|
|
19534
19915
|
|
|
19535
19916
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
19536
|
-
import { css as
|
|
19917
|
+
import { css as css91 } from "@emotion/react";
|
|
19537
19918
|
import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
|
|
19538
19919
|
import { NodeEventPlugin } from "@lexical/react/LexicalNodeEventPlugin";
|
|
19539
19920
|
import { addClassNamesToElement, isHTMLAnchorElement, mergeRegister as mergeRegister2 } from "@lexical/utils";
|
|
@@ -19549,7 +19930,7 @@ import {
|
|
|
19549
19930
|
ElementNode as ElementNode2,
|
|
19550
19931
|
FOCUS_COMMAND
|
|
19551
19932
|
} from "lexical";
|
|
19552
|
-
import { useCallback as useCallback9, useEffect as
|
|
19933
|
+
import { useCallback as useCallback9, useEffect as useEffect16, useRef as useRef9, useState as useState15 } from "react";
|
|
19553
19934
|
|
|
19554
19935
|
// src/components/ParameterInputs/rich-text/utils.ts
|
|
19555
19936
|
import { $isAtNodeEnd } from "@lexical/selection";
|
|
@@ -19566,8 +19947,7 @@ var getElementNodesInSelection = (selection) => {
|
|
|
19566
19947
|
};
|
|
19567
19948
|
var getAncestor = (node, predicate) => {
|
|
19568
19949
|
let parent = node;
|
|
19569
|
-
while (parent !== null && (parent = parent.getParent()) !== null && !predicate(parent))
|
|
19570
|
-
;
|
|
19950
|
+
while (parent !== null && (parent = parent.getParent()) !== null && !predicate(parent)) ;
|
|
19571
19951
|
return parent;
|
|
19572
19952
|
};
|
|
19573
19953
|
var getSelectedNode = (selection) => {
|
|
@@ -19587,7 +19967,7 @@ var getSelectedNode = (selection) => {
|
|
|
19587
19967
|
};
|
|
19588
19968
|
|
|
19589
19969
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
19590
|
-
import { Fragment as
|
|
19970
|
+
import { Fragment as Fragment18, jsx as jsx120, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
|
|
19591
19971
|
var isProjectMapLinkValue = (value) => {
|
|
19592
19972
|
return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
|
|
19593
19973
|
value.nodeId && value.path && value.projectMapId
|
|
@@ -19874,16 +20254,16 @@ var OPEN_LINK_NODE_MODAL_COMMAND = createCommand(
|
|
|
19874
20254
|
);
|
|
19875
20255
|
var LINK_POPOVER_OFFSET_X = 0;
|
|
19876
20256
|
var LINK_POPOVER_OFFSET_Y = 8;
|
|
19877
|
-
var linkPopover =
|
|
20257
|
+
var linkPopover = css91`
|
|
19878
20258
|
position: absolute;
|
|
19879
20259
|
z-index: 5;
|
|
19880
20260
|
`;
|
|
19881
|
-
var linkPopoverContainer =
|
|
20261
|
+
var linkPopoverContainer = css91`
|
|
19882
20262
|
${Popover};
|
|
19883
20263
|
align-items: center;
|
|
19884
20264
|
display: flex;
|
|
19885
20265
|
`;
|
|
19886
|
-
var linkPopoverAnchor =
|
|
20266
|
+
var linkPopoverAnchor = css91`
|
|
19887
20267
|
${link}
|
|
19888
20268
|
${linkColorDefault}
|
|
19889
20269
|
`;
|
|
@@ -19892,17 +20272,17 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
19892
20272
|
return path;
|
|
19893
20273
|
};
|
|
19894
20274
|
const [editor] = useLexicalComposerContext2();
|
|
19895
|
-
const [linkPopoverState, setLinkPopoverState] =
|
|
19896
|
-
const linkPopoverElRef =
|
|
19897
|
-
const [isEditorFocused, setIsEditorFocused] =
|
|
19898
|
-
const [isLinkPopoverFocused, setIsLinkPopoverFocused] =
|
|
19899
|
-
|
|
20275
|
+
const [linkPopoverState, setLinkPopoverState] = useState15();
|
|
20276
|
+
const linkPopoverElRef = useRef9(null);
|
|
20277
|
+
const [isEditorFocused, setIsEditorFocused] = useState15(false);
|
|
20278
|
+
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState15(false);
|
|
20279
|
+
useEffect16(() => {
|
|
19900
20280
|
if (!isEditorFocused && !isLinkPopoverFocused) {
|
|
19901
20281
|
setLinkPopoverState(void 0);
|
|
19902
20282
|
return;
|
|
19903
20283
|
}
|
|
19904
20284
|
}, [isEditorFocused, isLinkPopoverFocused]);
|
|
19905
|
-
|
|
20285
|
+
useEffect16(() => {
|
|
19906
20286
|
if (!editor.hasNodes([LinkNode])) {
|
|
19907
20287
|
throw new Error("LinkNode not registered on editor");
|
|
19908
20288
|
}
|
|
@@ -20003,7 +20383,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
20003
20383
|
}
|
|
20004
20384
|
});
|
|
20005
20385
|
}, [editor]);
|
|
20006
|
-
|
|
20386
|
+
useEffect16(() => {
|
|
20007
20387
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
20008
20388
|
requestAnimationFrame(() => {
|
|
20009
20389
|
editorState.read(() => {
|
|
@@ -20030,8 +20410,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
20030
20410
|
});
|
|
20031
20411
|
});
|
|
20032
20412
|
};
|
|
20033
|
-
return /* @__PURE__ */
|
|
20034
|
-
/* @__PURE__ */
|
|
20413
|
+
return /* @__PURE__ */ jsxs80(Fragment18, { children: [
|
|
20414
|
+
/* @__PURE__ */ jsx120(
|
|
20035
20415
|
NodeEventPlugin,
|
|
20036
20416
|
{
|
|
20037
20417
|
nodeType: LinkNode,
|
|
@@ -20041,7 +20421,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
20041
20421
|
}
|
|
20042
20422
|
}
|
|
20043
20423
|
),
|
|
20044
|
-
linkPopoverState ? /* @__PURE__ */
|
|
20424
|
+
linkPopoverState ? /* @__PURE__ */ jsx120(
|
|
20045
20425
|
"div",
|
|
20046
20426
|
{
|
|
20047
20427
|
css: linkPopover,
|
|
@@ -20050,8 +20430,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
20050
20430
|
top: linkPopoverState.position.y
|
|
20051
20431
|
},
|
|
20052
20432
|
ref: linkPopoverElRef,
|
|
20053
|
-
children: /* @__PURE__ */
|
|
20054
|
-
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */
|
|
20433
|
+
children: /* @__PURE__ */ jsxs80("div", { css: linkPopoverContainer, children: [
|
|
20434
|
+
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx120(
|
|
20055
20435
|
"a",
|
|
20056
20436
|
{
|
|
20057
20437
|
href: parsePath(
|
|
@@ -20063,7 +20443,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
20063
20443
|
children: parsePath(linkPopoverState.node.__link.path)
|
|
20064
20444
|
}
|
|
20065
20445
|
),
|
|
20066
|
-
/* @__PURE__ */
|
|
20446
|
+
/* @__PURE__ */ jsx120(
|
|
20067
20447
|
Button,
|
|
20068
20448
|
{
|
|
20069
20449
|
size: "xs",
|
|
@@ -20071,7 +20451,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
20071
20451
|
onEditLinkNode(linkPopoverState.node);
|
|
20072
20452
|
},
|
|
20073
20453
|
buttonType: "ghost",
|
|
20074
|
-
children: /* @__PURE__ */
|
|
20454
|
+
children: /* @__PURE__ */ jsx120(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
|
|
20075
20455
|
}
|
|
20076
20456
|
)
|
|
20077
20457
|
] })
|
|
@@ -20095,8 +20475,8 @@ import {
|
|
|
20095
20475
|
COMMAND_PRIORITY_CRITICAL,
|
|
20096
20476
|
INDENT_CONTENT_COMMAND
|
|
20097
20477
|
} from "lexical";
|
|
20098
|
-
import { useEffect as
|
|
20099
|
-
import { jsx as
|
|
20478
|
+
import { useEffect as useEffect17 } from "react";
|
|
20479
|
+
import { jsx as jsx121 } from "@emotion/react/jsx-runtime";
|
|
20100
20480
|
function isIndentPermitted(maxDepth) {
|
|
20101
20481
|
const selection = $getSelection2();
|
|
20102
20482
|
if (!$isRangeSelection2(selection)) {
|
|
@@ -20119,18 +20499,18 @@ function isIndentPermitted(maxDepth) {
|
|
|
20119
20499
|
}
|
|
20120
20500
|
function ListIndentPlugin({ maxDepth }) {
|
|
20121
20501
|
const [editor] = useLexicalComposerContext3();
|
|
20122
|
-
|
|
20502
|
+
useEffect17(() => {
|
|
20123
20503
|
return editor.registerCommand(
|
|
20124
20504
|
INDENT_CONTENT_COMMAND,
|
|
20125
20505
|
() => !isIndentPermitted(maxDepth),
|
|
20126
20506
|
COMMAND_PRIORITY_CRITICAL
|
|
20127
20507
|
);
|
|
20128
20508
|
}, [editor, maxDepth]);
|
|
20129
|
-
return /* @__PURE__ */
|
|
20509
|
+
return /* @__PURE__ */ jsx121(TabIndentationPlugin, {});
|
|
20130
20510
|
}
|
|
20131
20511
|
|
|
20132
20512
|
// src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
|
|
20133
|
-
import { css as
|
|
20513
|
+
import { css as css92 } from "@emotion/react";
|
|
20134
20514
|
import { $createCodeNode } from "@lexical/code";
|
|
20135
20515
|
import {
|
|
20136
20516
|
$isListNode as $isListNode2,
|
|
@@ -20152,9 +20532,9 @@ import {
|
|
|
20152
20532
|
FORMAT_TEXT_COMMAND,
|
|
20153
20533
|
SELECTION_CHANGE_COMMAND
|
|
20154
20534
|
} from "lexical";
|
|
20155
|
-
import { useCallback as useCallback10, useEffect as
|
|
20156
|
-
import { Fragment as
|
|
20157
|
-
var toolbar =
|
|
20535
|
+
import { useCallback as useCallback10, useEffect as useEffect18, useMemo as useMemo4, useState as useState16 } from "react";
|
|
20536
|
+
import { Fragment as Fragment19, jsx as jsx122, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
|
|
20537
|
+
var toolbar = css92`
|
|
20158
20538
|
background: var(--gray-50);
|
|
20159
20539
|
border-radius: var(--rounded-base);
|
|
20160
20540
|
display: flex;
|
|
@@ -20166,7 +20546,7 @@ var toolbar = css88`
|
|
|
20166
20546
|
top: calc(var(--spacing-sm) * -2);
|
|
20167
20547
|
z-index: 10;
|
|
20168
20548
|
`;
|
|
20169
|
-
var toolbarGroup =
|
|
20549
|
+
var toolbarGroup = css92`
|
|
20170
20550
|
display: flex;
|
|
20171
20551
|
gap: var(--spacing-xs);
|
|
20172
20552
|
position: relative;
|
|
@@ -20182,7 +20562,7 @@ var toolbarGroup = css88`
|
|
|
20182
20562
|
width: 1px;
|
|
20183
20563
|
}
|
|
20184
20564
|
`;
|
|
20185
|
-
var richTextToolbarButton =
|
|
20565
|
+
var richTextToolbarButton = css92`
|
|
20186
20566
|
align-items: center;
|
|
20187
20567
|
appearance: none;
|
|
20188
20568
|
border: 0;
|
|
@@ -20195,17 +20575,17 @@ var richTextToolbarButton = css88`
|
|
|
20195
20575
|
min-width: 32px;
|
|
20196
20576
|
padding: 0 var(--spacing-sm);
|
|
20197
20577
|
`;
|
|
20198
|
-
var richTextToolbarButtonActive =
|
|
20578
|
+
var richTextToolbarButtonActive = css92`
|
|
20199
20579
|
background: var(--gray-200);
|
|
20200
20580
|
`;
|
|
20201
|
-
var toolbarIcon =
|
|
20581
|
+
var toolbarIcon = css92`
|
|
20202
20582
|
color: inherit;
|
|
20203
20583
|
`;
|
|
20204
|
-
var toolbarChevron =
|
|
20584
|
+
var toolbarChevron = css92`
|
|
20205
20585
|
margin-left: var(--spacing-xs);
|
|
20206
20586
|
`;
|
|
20207
20587
|
var RichTextToolbarIcon = ({ icon }) => {
|
|
20208
|
-
return /* @__PURE__ */
|
|
20588
|
+
return /* @__PURE__ */ jsx122(Icon, { icon, css: toolbarIcon, size: "1rem" });
|
|
20209
20589
|
};
|
|
20210
20590
|
var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
|
|
20211
20591
|
["bold", "format-bold"],
|
|
@@ -20295,7 +20675,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
20295
20675
|
setIsLink(false);
|
|
20296
20676
|
}
|
|
20297
20677
|
}, [editor, setActiveElement, setActiveFormats, setIsLink]);
|
|
20298
|
-
|
|
20678
|
+
useEffect18(() => {
|
|
20299
20679
|
return editor.registerCommand(
|
|
20300
20680
|
SELECTION_CHANGE_COMMAND,
|
|
20301
20681
|
(_payload) => {
|
|
@@ -20305,7 +20685,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
20305
20685
|
COMMAND_PRIORITY_CRITICAL2
|
|
20306
20686
|
);
|
|
20307
20687
|
}, [editor, updateToolbar]);
|
|
20308
|
-
|
|
20688
|
+
useEffect18(() => {
|
|
20309
20689
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
20310
20690
|
requestAnimationFrame(() => {
|
|
20311
20691
|
editorState.read(() => {
|
|
@@ -20314,15 +20694,15 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
20314
20694
|
});
|
|
20315
20695
|
});
|
|
20316
20696
|
}, [editor, updateToolbar]);
|
|
20317
|
-
return /* @__PURE__ */
|
|
20318
|
-
/* @__PURE__ */
|
|
20697
|
+
return /* @__PURE__ */ jsxs81("div", { css: toolbar, children: [
|
|
20698
|
+
/* @__PURE__ */ jsxs81(
|
|
20319
20699
|
Menu,
|
|
20320
20700
|
{
|
|
20321
20701
|
menuLabel: "Elements",
|
|
20322
|
-
menuTrigger: /* @__PURE__ */
|
|
20702
|
+
menuTrigger: /* @__PURE__ */ jsxs81("button", { css: richTextToolbarButton, title: "Text styles", children: [
|
|
20323
20703
|
visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
|
|
20324
20704
|
" ",
|
|
20325
|
-
/* @__PURE__ */
|
|
20705
|
+
/* @__PURE__ */ jsx122(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
20326
20706
|
] }),
|
|
20327
20707
|
placement: "bottom-start",
|
|
20328
20708
|
children: [
|
|
@@ -20332,7 +20712,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
20332
20712
|
type: "paragraph"
|
|
20333
20713
|
},
|
|
20334
20714
|
...visibleTextualElements
|
|
20335
|
-
].map((element) => /* @__PURE__ */
|
|
20715
|
+
].map((element) => /* @__PURE__ */ jsx122(
|
|
20336
20716
|
MenuItem,
|
|
20337
20717
|
{
|
|
20338
20718
|
onClick: () => {
|
|
@@ -20342,12 +20722,12 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
20342
20722
|
},
|
|
20343
20723
|
element.type
|
|
20344
20724
|
)),
|
|
20345
|
-
visibleTextualElements.length === 0 ? /* @__PURE__ */
|
|
20725
|
+
visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx122(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
|
|
20346
20726
|
]
|
|
20347
20727
|
}
|
|
20348
20728
|
),
|
|
20349
|
-
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */
|
|
20350
|
-
visibleFormatsWithIcon.map((format) => /* @__PURE__ */
|
|
20729
|
+
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs81("div", { css: toolbarGroup, children: [
|
|
20730
|
+
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx122(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx122(
|
|
20351
20731
|
"button",
|
|
20352
20732
|
{
|
|
20353
20733
|
onClick: () => {
|
|
@@ -20357,16 +20737,16 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
20357
20737
|
richTextToolbarButton,
|
|
20358
20738
|
activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
|
|
20359
20739
|
],
|
|
20360
|
-
children: /* @__PURE__ */
|
|
20740
|
+
children: /* @__PURE__ */ jsx122(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
|
|
20361
20741
|
}
|
|
20362
20742
|
) }, format.type)),
|
|
20363
|
-
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */
|
|
20743
|
+
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx122(
|
|
20364
20744
|
Menu,
|
|
20365
20745
|
{
|
|
20366
20746
|
menuLabel: "Alternative text styles",
|
|
20367
|
-
menuTrigger: /* @__PURE__ */
|
|
20747
|
+
menuTrigger: /* @__PURE__ */ jsx122("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx122(Icon, { icon: "more-alt", css: toolbarIcon }) }),
|
|
20368
20748
|
placement: "bottom-start",
|
|
20369
|
-
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */
|
|
20749
|
+
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx122(
|
|
20370
20750
|
MenuItem,
|
|
20371
20751
|
{
|
|
20372
20752
|
onClick: () => {
|
|
@@ -20379,19 +20759,19 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
20379
20759
|
}
|
|
20380
20760
|
) : null
|
|
20381
20761
|
] }) : null,
|
|
20382
|
-
visibleElementsWithIcons.size > 0 ? /* @__PURE__ */
|
|
20383
|
-
linkElementVisible ? /* @__PURE__ */
|
|
20762
|
+
visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ jsxs81("div", { css: toolbarGroup, children: [
|
|
20763
|
+
linkElementVisible ? /* @__PURE__ */ jsx122(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx122(
|
|
20384
20764
|
"button",
|
|
20385
20765
|
{
|
|
20386
20766
|
onClick: () => {
|
|
20387
20767
|
isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
|
|
20388
20768
|
},
|
|
20389
20769
|
css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
|
|
20390
|
-
children: /* @__PURE__ */
|
|
20770
|
+
children: /* @__PURE__ */ jsx122(RichTextToolbarIcon, { icon: "link" })
|
|
20391
20771
|
}
|
|
20392
20772
|
) }) : null,
|
|
20393
|
-
visibleLists.size > 0 ? /* @__PURE__ */
|
|
20394
|
-
visibleLists.has("unorderedList") ? /* @__PURE__ */
|
|
20773
|
+
visibleLists.size > 0 ? /* @__PURE__ */ jsxs81(Fragment19, { children: [
|
|
20774
|
+
visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx122(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx122(
|
|
20395
20775
|
"button",
|
|
20396
20776
|
{
|
|
20397
20777
|
onClick: () => {
|
|
@@ -20401,10 +20781,10 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
20401
20781
|
richTextToolbarButton,
|
|
20402
20782
|
activeElement === "unorderedList" ? richTextToolbarButtonActive : null
|
|
20403
20783
|
],
|
|
20404
|
-
children: /* @__PURE__ */
|
|
20784
|
+
children: /* @__PURE__ */ jsx122(RichTextToolbarIcon, { icon: "layout-list" })
|
|
20405
20785
|
}
|
|
20406
20786
|
) }) : null,
|
|
20407
|
-
visibleLists.has("orderedList") ? /* @__PURE__ */
|
|
20787
|
+
visibleLists.has("orderedList") ? /* @__PURE__ */ jsx122(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx122(
|
|
20408
20788
|
"button",
|
|
20409
20789
|
{
|
|
20410
20790
|
onClick: () => {
|
|
@@ -20414,32 +20794,32 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
20414
20794
|
richTextToolbarButton,
|
|
20415
20795
|
activeElement === "orderedList" ? richTextToolbarButtonActive : null
|
|
20416
20796
|
],
|
|
20417
|
-
children: /* @__PURE__ */
|
|
20797
|
+
children: /* @__PURE__ */ jsx122(RichTextToolbarIcon, { icon: "layout-list-numbered" })
|
|
20418
20798
|
}
|
|
20419
20799
|
) }) : null
|
|
20420
20800
|
] }) : null,
|
|
20421
|
-
quoteElementVisible ? /* @__PURE__ */
|
|
20801
|
+
quoteElementVisible ? /* @__PURE__ */ jsx122(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx122(
|
|
20422
20802
|
"button",
|
|
20423
20803
|
{
|
|
20424
20804
|
onClick: () => {
|
|
20425
20805
|
activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
|
|
20426
20806
|
},
|
|
20427
20807
|
css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
|
|
20428
|
-
children: /* @__PURE__ */
|
|
20808
|
+
children: /* @__PURE__ */ jsx122(RichTextToolbarIcon, { icon: "quote" })
|
|
20429
20809
|
}
|
|
20430
20810
|
) }) : null,
|
|
20431
|
-
codeElementVisible ? /* @__PURE__ */
|
|
20811
|
+
codeElementVisible ? /* @__PURE__ */ jsx122(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx122(
|
|
20432
20812
|
"button",
|
|
20433
20813
|
{
|
|
20434
20814
|
onClick: () => {
|
|
20435
20815
|
activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
|
|
20436
20816
|
},
|
|
20437
20817
|
css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
|
|
20438
|
-
children: /* @__PURE__ */
|
|
20818
|
+
children: /* @__PURE__ */ jsx122(RichTextToolbarIcon, { icon: "code-slash" })
|
|
20439
20819
|
}
|
|
20440
20820
|
) }) : null
|
|
20441
20821
|
] }) : null,
|
|
20442
|
-
customControls ? /* @__PURE__ */
|
|
20822
|
+
customControls ? /* @__PURE__ */ jsx122("div", { css: toolbarGroup, children: customControls }) : null
|
|
20443
20823
|
] });
|
|
20444
20824
|
};
|
|
20445
20825
|
var RichTextToolbar_default = RichTextToolbar;
|
|
@@ -20463,7 +20843,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
20463
20843
|
const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
|
|
20464
20844
|
(format) => !FORMATS_WITH_ICON.has(format.type)
|
|
20465
20845
|
);
|
|
20466
|
-
const [activeFormats, setActiveFormats] =
|
|
20846
|
+
const [activeFormats, setActiveFormats] = useState16([]);
|
|
20467
20847
|
const visibleFormatsWithIcon = useMemo4(() => {
|
|
20468
20848
|
const visibleFormats = /* @__PURE__ */ new Set();
|
|
20469
20849
|
activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
@@ -20484,7 +20864,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
20484
20864
|
});
|
|
20485
20865
|
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
20486
20866
|
}, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
|
|
20487
|
-
const [activeElement, setActiveElement] =
|
|
20867
|
+
const [activeElement, setActiveElement] = useState16("paragraph");
|
|
20488
20868
|
const enabledTextualElements = enabledBuiltInElements.filter(
|
|
20489
20869
|
(element) => TEXTUAL_ELEMENTS.includes(element.type)
|
|
20490
20870
|
);
|
|
@@ -20499,7 +20879,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
20499
20879
|
}
|
|
20500
20880
|
);
|
|
20501
20881
|
}, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
|
|
20502
|
-
const [isLink, setIsLink] =
|
|
20882
|
+
const [isLink, setIsLink] = useState16(false);
|
|
20503
20883
|
const linkElementVisible = useMemo4(() => {
|
|
20504
20884
|
return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
|
|
20505
20885
|
}, [isLink, enabledBuiltInElements]);
|
|
@@ -20553,7 +20933,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
20553
20933
|
};
|
|
20554
20934
|
|
|
20555
20935
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
20556
|
-
import { Fragment as
|
|
20936
|
+
import { Fragment as Fragment20, jsx as jsx123, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
|
|
20557
20937
|
var ParameterRichText = ({
|
|
20558
20938
|
label,
|
|
20559
20939
|
labelLeadingIcon,
|
|
@@ -20578,7 +20958,7 @@ var ParameterRichText = ({
|
|
|
20578
20958
|
variables,
|
|
20579
20959
|
customControls
|
|
20580
20960
|
}) => {
|
|
20581
|
-
return /* @__PURE__ */
|
|
20961
|
+
return /* @__PURE__ */ jsxs82(
|
|
20582
20962
|
ParameterShell,
|
|
20583
20963
|
{
|
|
20584
20964
|
"data-testid": "parameter-richtext",
|
|
@@ -20592,7 +20972,7 @@ var ParameterRichText = ({
|
|
|
20592
20972
|
captionTestId,
|
|
20593
20973
|
menuItems,
|
|
20594
20974
|
children: [
|
|
20595
|
-
/* @__PURE__ */
|
|
20975
|
+
/* @__PURE__ */ jsx123(
|
|
20596
20976
|
ParameterRichTextInner,
|
|
20597
20977
|
{
|
|
20598
20978
|
value,
|
|
@@ -20610,23 +20990,23 @@ var ParameterRichText = ({
|
|
|
20610
20990
|
children
|
|
20611
20991
|
}
|
|
20612
20992
|
),
|
|
20613
|
-
menuItems ? /* @__PURE__ */
|
|
20993
|
+
menuItems ? /* @__PURE__ */ jsx123(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx123(Fragment20, { children: menuItems }) }) : null
|
|
20614
20994
|
]
|
|
20615
20995
|
}
|
|
20616
20996
|
);
|
|
20617
20997
|
};
|
|
20618
|
-
var editorWrapper =
|
|
20998
|
+
var editorWrapper = css93`
|
|
20619
20999
|
display: flex;
|
|
20620
21000
|
flex-flow: column;
|
|
20621
21001
|
flex-grow: 1;
|
|
20622
21002
|
`;
|
|
20623
|
-
var editorContainer =
|
|
21003
|
+
var editorContainer = css93`
|
|
20624
21004
|
display: flex;
|
|
20625
21005
|
flex-flow: column;
|
|
20626
21006
|
flex-grow: 1;
|
|
20627
21007
|
position: relative;
|
|
20628
21008
|
`;
|
|
20629
|
-
var editorPlaceholder =
|
|
21009
|
+
var editorPlaceholder = css93`
|
|
20630
21010
|
color: var(--gray-500);
|
|
20631
21011
|
font-style: italic;
|
|
20632
21012
|
/* 1px is added to make sure caret is clearly visible when field is focused
|
|
@@ -20637,7 +21017,7 @@ var editorPlaceholder = css89`
|
|
|
20637
21017
|
top: var(--spacing-sm);
|
|
20638
21018
|
user-select: none;
|
|
20639
21019
|
`;
|
|
20640
|
-
var editorInput =
|
|
21020
|
+
var editorInput = css93`
|
|
20641
21021
|
background: var(--white);
|
|
20642
21022
|
border: 1px solid var(--gray-200);
|
|
20643
21023
|
border-radius: var(--rounded-sm);
|
|
@@ -20721,8 +21101,8 @@ var ParameterRichTextInner = ({
|
|
|
20721
21101
|
},
|
|
20722
21102
|
editable: !readOnly
|
|
20723
21103
|
};
|
|
20724
|
-
return /* @__PURE__ */
|
|
20725
|
-
/* @__PURE__ */
|
|
21104
|
+
return /* @__PURE__ */ jsxs82(Fragment20, { children: [
|
|
21105
|
+
/* @__PURE__ */ jsx123("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx123(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx123(
|
|
20726
21106
|
RichText,
|
|
20727
21107
|
{
|
|
20728
21108
|
onChange,
|
|
@@ -20759,14 +21139,14 @@ var RichText = ({
|
|
|
20759
21139
|
variables,
|
|
20760
21140
|
customControls
|
|
20761
21141
|
}) => {
|
|
20762
|
-
const editorContainerRef =
|
|
21142
|
+
const editorContainerRef = useRef10(null);
|
|
20763
21143
|
const [editor] = useLexicalComposerContext5();
|
|
20764
|
-
|
|
21144
|
+
useEffect19(() => {
|
|
20765
21145
|
if (onRichTextInit) {
|
|
20766
21146
|
onRichTextInit(editor);
|
|
20767
21147
|
}
|
|
20768
21148
|
}, [editor, onRichTextInit]);
|
|
20769
|
-
|
|
21149
|
+
useEffect19(() => {
|
|
20770
21150
|
const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
|
|
20771
21151
|
requestAnimationFrame(() => {
|
|
20772
21152
|
if (!deepEqual2(editorState.toJSON(), prevEditorState.toJSON())) {
|
|
@@ -20778,23 +21158,23 @@ var RichText = ({
|
|
|
20778
21158
|
removeUpdateListener();
|
|
20779
21159
|
};
|
|
20780
21160
|
}, [editor, onChange]);
|
|
20781
|
-
|
|
21161
|
+
useEffect19(() => {
|
|
20782
21162
|
editor.setEditable(!readOnly);
|
|
20783
21163
|
}, [editor, readOnly]);
|
|
20784
|
-
return /* @__PURE__ */
|
|
20785
|
-
readOnly ? null : /* @__PURE__ */
|
|
20786
|
-
/* @__PURE__ */
|
|
20787
|
-
/* @__PURE__ */
|
|
21164
|
+
return /* @__PURE__ */ jsxs82(Fragment20, { children: [
|
|
21165
|
+
readOnly ? null : /* @__PURE__ */ jsx123(RichTextToolbar_default, { config, customControls }),
|
|
21166
|
+
/* @__PURE__ */ jsxs82("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
|
|
21167
|
+
/* @__PURE__ */ jsx123(
|
|
20788
21168
|
RichTextPlugin,
|
|
20789
21169
|
{
|
|
20790
|
-
contentEditable: /* @__PURE__ */
|
|
20791
|
-
placeholder: /* @__PURE__ */
|
|
21170
|
+
contentEditable: /* @__PURE__ */ jsx123(ContentEditable, { css: editorInput, className: editorInputClassName }),
|
|
21171
|
+
placeholder: /* @__PURE__ */ jsx123("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
|
|
20792
21172
|
ErrorBoundary: LexicalErrorBoundary
|
|
20793
21173
|
}
|
|
20794
21174
|
),
|
|
20795
|
-
/* @__PURE__ */
|
|
20796
|
-
readOnly ? null : /* @__PURE__ */
|
|
20797
|
-
/* @__PURE__ */
|
|
21175
|
+
/* @__PURE__ */ jsx123(ListPlugin, {}),
|
|
21176
|
+
readOnly ? null : /* @__PURE__ */ jsx123(HistoryPlugin, {}),
|
|
21177
|
+
/* @__PURE__ */ jsx123(
|
|
20798
21178
|
LinkNodePlugin,
|
|
20799
21179
|
{
|
|
20800
21180
|
onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
|
|
@@ -20804,27 +21184,27 @@ var RichText = ({
|
|
|
20804
21184
|
} : void 0
|
|
20805
21185
|
}
|
|
20806
21186
|
),
|
|
20807
|
-
/* @__PURE__ */
|
|
20808
|
-
/* @__PURE__ */
|
|
20809
|
-
/* @__PURE__ */
|
|
20810
|
-
/* @__PURE__ */
|
|
21187
|
+
/* @__PURE__ */ jsx123(ListIndentPlugin, { maxDepth: 4 }),
|
|
21188
|
+
/* @__PURE__ */ jsx123(DisableStylesPlugin, {}),
|
|
21189
|
+
/* @__PURE__ */ jsx123(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
|
|
21190
|
+
/* @__PURE__ */ jsx123(Fragment20, { children })
|
|
20811
21191
|
] })
|
|
20812
21192
|
] });
|
|
20813
21193
|
};
|
|
20814
21194
|
|
|
20815
21195
|
// src/components/ParameterInputs/ParameterSelect.tsx
|
|
20816
21196
|
import { forwardRef as forwardRef21 } from "react";
|
|
20817
|
-
import { jsx as
|
|
21197
|
+
import { jsx as jsx124, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
|
|
20818
21198
|
var ParameterSelect = forwardRef21(
|
|
20819
21199
|
({ defaultOption, options, ...props }, ref) => {
|
|
20820
21200
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
20821
|
-
return /* @__PURE__ */
|
|
21201
|
+
return /* @__PURE__ */ jsx124(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx124(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
|
|
20822
21202
|
}
|
|
20823
21203
|
);
|
|
20824
21204
|
var ParameterSelectInner = forwardRef21(
|
|
20825
21205
|
({ defaultOption, options, ...props }, ref) => {
|
|
20826
21206
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
20827
|
-
return /* @__PURE__ */
|
|
21207
|
+
return /* @__PURE__ */ jsxs83(
|
|
20828
21208
|
"select",
|
|
20829
21209
|
{
|
|
20830
21210
|
css: [input3, selectInput],
|
|
@@ -20833,10 +21213,10 @@ var ParameterSelectInner = forwardRef21(
|
|
|
20833
21213
|
ref,
|
|
20834
21214
|
...props,
|
|
20835
21215
|
children: [
|
|
20836
|
-
defaultOption ? /* @__PURE__ */
|
|
21216
|
+
defaultOption ? /* @__PURE__ */ jsx124("option", { value: "", children: defaultOption }) : null,
|
|
20837
21217
|
options.map((option) => {
|
|
20838
21218
|
var _a;
|
|
20839
|
-
return /* @__PURE__ */
|
|
21219
|
+
return /* @__PURE__ */ jsx124("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
|
|
20840
21220
|
})
|
|
20841
21221
|
]
|
|
20842
21222
|
}
|
|
@@ -20846,14 +21226,14 @@ var ParameterSelectInner = forwardRef21(
|
|
|
20846
21226
|
|
|
20847
21227
|
// src/components/ParameterInputs/ParameterTextarea.tsx
|
|
20848
21228
|
import { forwardRef as forwardRef22 } from "react";
|
|
20849
|
-
import { jsx as
|
|
21229
|
+
import { jsx as jsx125 } from "@emotion/react/jsx-runtime";
|
|
20850
21230
|
var ParameterTextarea = forwardRef22((props, ref) => {
|
|
20851
21231
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
20852
|
-
return /* @__PURE__ */
|
|
21232
|
+
return /* @__PURE__ */ jsx125(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx125(ParameterTextareaInner, { ref, ...innerProps }) });
|
|
20853
21233
|
});
|
|
20854
21234
|
var ParameterTextareaInner = forwardRef22(({ ...props }, ref) => {
|
|
20855
21235
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
20856
|
-
return /* @__PURE__ */
|
|
21236
|
+
return /* @__PURE__ */ jsx125(
|
|
20857
21237
|
"textarea",
|
|
20858
21238
|
{
|
|
20859
21239
|
css: [input3, textarea2],
|
|
@@ -20867,25 +21247,25 @@ var ParameterTextareaInner = forwardRef22(({ ...props }, ref) => {
|
|
|
20867
21247
|
|
|
20868
21248
|
// src/components/ParameterInputs/ParameterToggle.tsx
|
|
20869
21249
|
import { forwardRef as forwardRef23 } from "react";
|
|
20870
|
-
import { jsx as
|
|
21250
|
+
import { jsx as jsx126, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
|
|
20871
21251
|
var ParameterToggle = forwardRef23((props, ref) => {
|
|
20872
21252
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
20873
|
-
return /* @__PURE__ */
|
|
21253
|
+
return /* @__PURE__ */ jsx126(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx126(ParameterToggleInner, { ref, ...innerProps }) });
|
|
20874
21254
|
});
|
|
20875
21255
|
var ParameterToggleInner = forwardRef23(
|
|
20876
21256
|
({ children, ...props }, ref) => {
|
|
20877
21257
|
const { id, label } = useParameterShell();
|
|
20878
|
-
return /* @__PURE__ */
|
|
20879
|
-
/* @__PURE__ */
|
|
20880
|
-
/* @__PURE__ */
|
|
21258
|
+
return /* @__PURE__ */ jsxs84("label", { css: inputToggleLabel2, children: [
|
|
21259
|
+
/* @__PURE__ */ jsx126("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
|
|
21260
|
+
/* @__PURE__ */ jsx126("span", { css: inlineLabel2, children: label }),
|
|
20881
21261
|
children
|
|
20882
21262
|
] });
|
|
20883
21263
|
}
|
|
20884
21264
|
);
|
|
20885
21265
|
|
|
20886
21266
|
// src/components/ProgressBar/ProgressBar.styles.ts
|
|
20887
|
-
import { css as
|
|
20888
|
-
var container3 =
|
|
21267
|
+
import { css as css94, keyframes as keyframes4 } from "@emotion/react";
|
|
21268
|
+
var container3 = css94`
|
|
20889
21269
|
background: var(--gray-50);
|
|
20890
21270
|
margin-block: var(--spacing-sm);
|
|
20891
21271
|
position: relative;
|
|
@@ -20895,13 +21275,13 @@ var container3 = css90`
|
|
|
20895
21275
|
border: solid 1px var(--gray-300);
|
|
20896
21276
|
`;
|
|
20897
21277
|
var themeMap = {
|
|
20898
|
-
primary:
|
|
21278
|
+
primary: css94`
|
|
20899
21279
|
--progress-color: var(--accent-light);
|
|
20900
21280
|
`,
|
|
20901
|
-
secondary:
|
|
21281
|
+
secondary: css94`
|
|
20902
21282
|
--progress-color: var(--accent-alt-light);
|
|
20903
21283
|
`,
|
|
20904
|
-
destructive:
|
|
21284
|
+
destructive: css94`
|
|
20905
21285
|
--progress-color: var(--brand-secondary-5);
|
|
20906
21286
|
`
|
|
20907
21287
|
};
|
|
@@ -20913,10 +21293,10 @@ var slidingBackgroundPosition = keyframes4`
|
|
|
20913
21293
|
background-position: 64px 0;
|
|
20914
21294
|
}
|
|
20915
21295
|
`;
|
|
20916
|
-
var determinate =
|
|
21296
|
+
var determinate = css94`
|
|
20917
21297
|
background-color: var(--progress-color);
|
|
20918
21298
|
`;
|
|
20919
|
-
var indeterminate =
|
|
21299
|
+
var indeterminate = css94`
|
|
20920
21300
|
background-image: linear-gradient(
|
|
20921
21301
|
45deg,
|
|
20922
21302
|
var(--progress-color) 25%,
|
|
@@ -20930,7 +21310,7 @@ var indeterminate = css90`
|
|
|
20930
21310
|
background-size: 64px 64px;
|
|
20931
21311
|
animation: ${slidingBackgroundPosition} 1s linear infinite;
|
|
20932
21312
|
`;
|
|
20933
|
-
var bar =
|
|
21313
|
+
var bar = css94`
|
|
20934
21314
|
position: absolute;
|
|
20935
21315
|
inset: 0;
|
|
20936
21316
|
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
@@ -20938,7 +21318,7 @@ var bar = css90`
|
|
|
20938
21318
|
`;
|
|
20939
21319
|
|
|
20940
21320
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
20941
|
-
import { jsx as
|
|
21321
|
+
import { jsx as jsx127 } from "@emotion/react/jsx-runtime";
|
|
20942
21322
|
function ProgressBar({
|
|
20943
21323
|
current,
|
|
20944
21324
|
max,
|
|
@@ -20948,7 +21328,7 @@ function ProgressBar({
|
|
|
20948
21328
|
}) {
|
|
20949
21329
|
const valueNow = Math.min(current, max);
|
|
20950
21330
|
const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
|
|
20951
|
-
return /* @__PURE__ */
|
|
21331
|
+
return /* @__PURE__ */ jsx127(
|
|
20952
21332
|
"div",
|
|
20953
21333
|
{
|
|
20954
21334
|
css: container3,
|
|
@@ -20959,7 +21339,7 @@ function ProgressBar({
|
|
|
20959
21339
|
"aria-valuemax": max,
|
|
20960
21340
|
"aria-valuenow": valueNow,
|
|
20961
21341
|
...props,
|
|
20962
|
-
children: /* @__PURE__ */
|
|
21342
|
+
children: /* @__PURE__ */ jsx127(
|
|
20963
21343
|
"div",
|
|
20964
21344
|
{
|
|
20965
21345
|
css: [
|
|
@@ -20978,28 +21358,28 @@ function ProgressBar({
|
|
|
20978
21358
|
}
|
|
20979
21359
|
|
|
20980
21360
|
// src/components/ProgressList/ProgressList.tsx
|
|
20981
|
-
import { css as
|
|
21361
|
+
import { css as css96 } from "@emotion/react";
|
|
20982
21362
|
import { CgCheckO as CgCheckO2 } from "@react-icons/all-files/cg/CgCheckO";
|
|
20983
21363
|
import { CgRadioCheck } from "@react-icons/all-files/cg/CgRadioCheck";
|
|
20984
21364
|
import { CgRecord } from "@react-icons/all-files/cg/CgRecord";
|
|
20985
21365
|
import { useMemo as useMemo5 } from "react";
|
|
20986
21366
|
|
|
20987
21367
|
// src/components/ProgressList/styles/ProgressList.styles.ts
|
|
20988
|
-
import { css as
|
|
20989
|
-
var progressListStyles =
|
|
21368
|
+
import { css as css95 } from "@emotion/react";
|
|
21369
|
+
var progressListStyles = css95`
|
|
20990
21370
|
display: flex;
|
|
20991
21371
|
flex-direction: column;
|
|
20992
21372
|
gap: var(--spacing-sm);
|
|
20993
21373
|
list-style-type: none;
|
|
20994
21374
|
`;
|
|
20995
|
-
var progressListItemStyles =
|
|
21375
|
+
var progressListItemStyles = css95`
|
|
20996
21376
|
display: flex;
|
|
20997
21377
|
gap: var(--spacing-base);
|
|
20998
21378
|
align-items: center;
|
|
20999
21379
|
`;
|
|
21000
21380
|
|
|
21001
21381
|
// src/components/ProgressList/ProgressList.tsx
|
|
21002
|
-
import { jsx as
|
|
21382
|
+
import { jsx as jsx128, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
|
|
21003
21383
|
var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
21004
21384
|
const itemsWithStatus = useMemo5(() => {
|
|
21005
21385
|
const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
|
|
@@ -21013,8 +21393,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
|
21013
21393
|
return { ...item, status };
|
|
21014
21394
|
});
|
|
21015
21395
|
}, [items, inProgressId]);
|
|
21016
|
-
return /* @__PURE__ */
|
|
21017
|
-
return /* @__PURE__ */
|
|
21396
|
+
return /* @__PURE__ */ jsx128("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
|
|
21397
|
+
return /* @__PURE__ */ jsx128(
|
|
21018
21398
|
ProgressListItem,
|
|
21019
21399
|
{
|
|
21020
21400
|
status,
|
|
@@ -21047,12 +21427,12 @@ var ProgressListItem = ({
|
|
|
21047
21427
|
}, [status, error]);
|
|
21048
21428
|
const statusStyles = useMemo5(() => {
|
|
21049
21429
|
if (error) {
|
|
21050
|
-
return errorLevel === "caution" ?
|
|
21430
|
+
return errorLevel === "caution" ? css96`
|
|
21051
21431
|
color: rgb(161, 98, 7);
|
|
21052
21432
|
& svg {
|
|
21053
21433
|
color: rgb(250, 204, 21);
|
|
21054
21434
|
}
|
|
21055
|
-
` :
|
|
21435
|
+
` : css96`
|
|
21056
21436
|
color: rgb(185, 28, 28);
|
|
21057
21437
|
& svg {
|
|
21058
21438
|
color: var(--brand-primary-2);
|
|
@@ -21060,38 +21440,38 @@ var ProgressListItem = ({
|
|
|
21060
21440
|
`;
|
|
21061
21441
|
}
|
|
21062
21442
|
const colorPerStatus = {
|
|
21063
|
-
completed:
|
|
21443
|
+
completed: css96`
|
|
21064
21444
|
opacity: 0.75;
|
|
21065
21445
|
`,
|
|
21066
|
-
inProgress:
|
|
21446
|
+
inProgress: css96`
|
|
21067
21447
|
-webkit-text-stroke-width: thin;
|
|
21068
21448
|
`,
|
|
21069
|
-
queued:
|
|
21449
|
+
queued: css96`
|
|
21070
21450
|
opacity: 0.5;
|
|
21071
21451
|
`
|
|
21072
21452
|
};
|
|
21073
21453
|
return colorPerStatus[status];
|
|
21074
21454
|
}, [status, error, errorLevel]);
|
|
21075
|
-
return /* @__PURE__ */
|
|
21076
|
-
/* @__PURE__ */
|
|
21077
|
-
/* @__PURE__ */
|
|
21455
|
+
return /* @__PURE__ */ jsxs85("li", { css: [progressListItemStyles, statusStyles], children: [
|
|
21456
|
+
/* @__PURE__ */ jsx128(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx128("div", { children: /* @__PURE__ */ jsx128(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
|
|
21457
|
+
/* @__PURE__ */ jsxs85("div", { children: [
|
|
21078
21458
|
children,
|
|
21079
|
-
/* @__PURE__ */
|
|
21459
|
+
/* @__PURE__ */ jsx128("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
|
|
21080
21460
|
] })
|
|
21081
21461
|
] });
|
|
21082
21462
|
};
|
|
21083
21463
|
|
|
21084
21464
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
21085
|
-
import { css as
|
|
21465
|
+
import { css as css98 } from "@emotion/react";
|
|
21086
21466
|
import { CgCheck as CgCheck5 } from "@react-icons/all-files/cg/CgCheck";
|
|
21087
|
-
import { useCallback as useCallback11, useEffect as
|
|
21467
|
+
import { useCallback as useCallback11, useEffect as useEffect20, useMemo as useMemo6, useRef as useRef11, useState as useState17 } from "react";
|
|
21088
21468
|
|
|
21089
21469
|
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
21090
|
-
import { css as
|
|
21091
|
-
var segmentedControlRootStyles =
|
|
21470
|
+
import { css as css97 } from "@emotion/react";
|
|
21471
|
+
var segmentedControlRootStyles = css97`
|
|
21092
21472
|
position: relative;
|
|
21093
21473
|
`;
|
|
21094
|
-
var segmentedControlScrollIndicatorsStyles =
|
|
21474
|
+
var segmentedControlScrollIndicatorsStyles = css97`
|
|
21095
21475
|
position: absolute;
|
|
21096
21476
|
inset: 0;
|
|
21097
21477
|
z-index: 1;
|
|
@@ -21119,17 +21499,17 @@ var segmentedControlScrollIndicatorsStyles = css93`
|
|
|
21119
21499
|
background: linear-gradient(to left, var(--background-color) 10%, transparent);
|
|
21120
21500
|
}
|
|
21121
21501
|
`;
|
|
21122
|
-
var segmentedControlScrollIndicatorStartVisibleStyles =
|
|
21502
|
+
var segmentedControlScrollIndicatorStartVisibleStyles = css97`
|
|
21123
21503
|
&::before {
|
|
21124
21504
|
opacity: 1;
|
|
21125
21505
|
}
|
|
21126
21506
|
`;
|
|
21127
|
-
var segmentedControlScrollIndicatorEndVisibleStyles =
|
|
21507
|
+
var segmentedControlScrollIndicatorEndVisibleStyles = css97`
|
|
21128
21508
|
&::after {
|
|
21129
21509
|
opacity: 1;
|
|
21130
21510
|
}
|
|
21131
21511
|
`;
|
|
21132
|
-
var segmentedControlWrapperStyles =
|
|
21512
|
+
var segmentedControlWrapperStyles = css97`
|
|
21133
21513
|
overflow-y: auto;
|
|
21134
21514
|
scroll-behavior: smooth;
|
|
21135
21515
|
scrollbar-width: none;
|
|
@@ -21138,7 +21518,7 @@ var segmentedControlWrapperStyles = css93`
|
|
|
21138
21518
|
height: 0px;
|
|
21139
21519
|
}
|
|
21140
21520
|
`;
|
|
21141
|
-
var segmentedControlStyles =
|
|
21521
|
+
var segmentedControlStyles = css97`
|
|
21142
21522
|
--segmented-control-rounded-value: var(--rounded-base);
|
|
21143
21523
|
--segmented-control-border-width: 1px;
|
|
21144
21524
|
--segmented-control-selected-color: var(--brand-secondary-3);
|
|
@@ -21157,14 +21537,14 @@ var segmentedControlStyles = css93`
|
|
|
21157
21537
|
border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
|
|
21158
21538
|
font-size: var(--fs-xs);
|
|
21159
21539
|
`;
|
|
21160
|
-
var segmentedControlVerticalStyles =
|
|
21540
|
+
var segmentedControlVerticalStyles = css97`
|
|
21161
21541
|
flex-direction: column;
|
|
21162
21542
|
--segmented-control-first-border-radius: var(--segmented-control-rounded-value)
|
|
21163
21543
|
var(--segmented-control-rounded-value) 0 0;
|
|
21164
21544
|
--segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
|
|
21165
21545
|
var(--segmented-control-rounded-value);
|
|
21166
21546
|
`;
|
|
21167
|
-
var segmentedControlItemStyles =
|
|
21547
|
+
var segmentedControlItemStyles = css97`
|
|
21168
21548
|
&:first-of-type label {
|
|
21169
21549
|
border-radius: var(--segmented-control-first-border-radius);
|
|
21170
21550
|
}
|
|
@@ -21172,10 +21552,10 @@ var segmentedControlItemStyles = css93`
|
|
|
21172
21552
|
border-radius: var(--segmented-control-last-border-radius);
|
|
21173
21553
|
}
|
|
21174
21554
|
`;
|
|
21175
|
-
var segmentedControlInputStyles =
|
|
21555
|
+
var segmentedControlInputStyles = css97`
|
|
21176
21556
|
${accessibleHidden}
|
|
21177
21557
|
`;
|
|
21178
|
-
var segmentedControlLabelStyles = (checked, disabled2) =>
|
|
21558
|
+
var segmentedControlLabelStyles = (checked, disabled2) => css97`
|
|
21179
21559
|
position: relative;
|
|
21180
21560
|
display: flex;
|
|
21181
21561
|
align-items: center;
|
|
@@ -21242,25 +21622,25 @@ var segmentedControlLabelStyles = (checked, disabled2) => css93`
|
|
|
21242
21622
|
`}
|
|
21243
21623
|
}
|
|
21244
21624
|
`;
|
|
21245
|
-
var segmentedControlLabelIconOnlyStyles =
|
|
21625
|
+
var segmentedControlLabelIconOnlyStyles = css97`
|
|
21246
21626
|
padding-inline: 0.5em;
|
|
21247
21627
|
`;
|
|
21248
|
-
var segmentedControlLabelCheckStyles =
|
|
21628
|
+
var segmentedControlLabelCheckStyles = css97`
|
|
21249
21629
|
opacity: 0.5;
|
|
21250
21630
|
`;
|
|
21251
|
-
var segmentedControlLabelContentStyles =
|
|
21631
|
+
var segmentedControlLabelContentStyles = css97`
|
|
21252
21632
|
display: flex;
|
|
21253
21633
|
align-items: center;
|
|
21254
21634
|
justify-content: center;
|
|
21255
21635
|
gap: var(--spacing-sm);
|
|
21256
21636
|
height: 100%;
|
|
21257
21637
|
`;
|
|
21258
|
-
var segmentedControlLabelTextStyles =
|
|
21638
|
+
var segmentedControlLabelTextStyles = css97`
|
|
21259
21639
|
white-space: nowrap;
|
|
21260
21640
|
`;
|
|
21261
21641
|
|
|
21262
21642
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
21263
|
-
import { jsx as
|
|
21643
|
+
import { jsx as jsx129, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
|
|
21264
21644
|
var SegmentedControl = ({
|
|
21265
21645
|
name,
|
|
21266
21646
|
options,
|
|
@@ -21275,9 +21655,9 @@ var SegmentedControl = ({
|
|
|
21275
21655
|
currentBackgroundColor = "white",
|
|
21276
21656
|
...props
|
|
21277
21657
|
}) => {
|
|
21278
|
-
const wrapperRef =
|
|
21279
|
-
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] =
|
|
21280
|
-
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] =
|
|
21658
|
+
const wrapperRef = useRef11(null);
|
|
21659
|
+
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = useState17(false);
|
|
21660
|
+
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = useState17(false);
|
|
21281
21661
|
const onOptionChange = useCallback11(
|
|
21282
21662
|
(event) => {
|
|
21283
21663
|
if (event.target.checked) {
|
|
@@ -21288,17 +21668,17 @@ var SegmentedControl = ({
|
|
|
21288
21668
|
);
|
|
21289
21669
|
const sizeStyles = useMemo6(() => {
|
|
21290
21670
|
const map = {
|
|
21291
|
-
sm:
|
|
21292
|
-
md:
|
|
21293
|
-
lg:
|
|
21294
|
-
xl:
|
|
21671
|
+
sm: css98({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
|
|
21672
|
+
md: css98({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
|
|
21673
|
+
lg: css98({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
|
|
21674
|
+
xl: css98({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
|
|
21295
21675
|
};
|
|
21296
21676
|
return map[size];
|
|
21297
21677
|
}, [size]);
|
|
21298
21678
|
const isIconOnly = useMemo6(() => {
|
|
21299
21679
|
return options.every((option) => option && option.icon && !option.label);
|
|
21300
21680
|
}, [options]);
|
|
21301
|
-
|
|
21681
|
+
useEffect20(() => {
|
|
21302
21682
|
const wrapperElement = wrapperRef.current;
|
|
21303
21683
|
const onScroll = () => {
|
|
21304
21684
|
if (!wrapperElement) {
|
|
@@ -21319,8 +21699,8 @@ var SegmentedControl = ({
|
|
|
21319
21699
|
wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
|
|
21320
21700
|
};
|
|
21321
21701
|
}, []);
|
|
21322
|
-
return /* @__PURE__ */
|
|
21323
|
-
/* @__PURE__ */
|
|
21702
|
+
return /* @__PURE__ */ jsxs86("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
|
|
21703
|
+
/* @__PURE__ */ jsx129("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ jsx129(
|
|
21324
21704
|
"div",
|
|
21325
21705
|
{
|
|
21326
21706
|
css: [
|
|
@@ -21336,12 +21716,12 @@ var SegmentedControl = ({
|
|
|
21336
21716
|
}
|
|
21337
21717
|
const text = option.label ? option.label : option.icon ? null : String(option.value);
|
|
21338
21718
|
const isDisabled = disabled2 || option.disabled;
|
|
21339
|
-
return /* @__PURE__ */
|
|
21719
|
+
return /* @__PURE__ */ jsx129(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx129(
|
|
21340
21720
|
"div",
|
|
21341
21721
|
{
|
|
21342
21722
|
css: segmentedControlItemStyles,
|
|
21343
21723
|
"data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
|
|
21344
|
-
children: /* @__PURE__ */
|
|
21724
|
+
children: /* @__PURE__ */ jsxs86(
|
|
21345
21725
|
"label",
|
|
21346
21726
|
{
|
|
21347
21727
|
css: [
|
|
@@ -21350,7 +21730,7 @@ var SegmentedControl = ({
|
|
|
21350
21730
|
isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
|
|
21351
21731
|
],
|
|
21352
21732
|
children: [
|
|
21353
|
-
/* @__PURE__ */
|
|
21733
|
+
/* @__PURE__ */ jsx129(
|
|
21354
21734
|
"input",
|
|
21355
21735
|
{
|
|
21356
21736
|
css: segmentedControlInputStyles,
|
|
@@ -21362,10 +21742,10 @@ var SegmentedControl = ({
|
|
|
21362
21742
|
disabled: isDisabled
|
|
21363
21743
|
}
|
|
21364
21744
|
),
|
|
21365
|
-
option.value !== value || noCheckmark ? null : /* @__PURE__ */
|
|
21366
|
-
/* @__PURE__ */
|
|
21367
|
-
!option.icon ? null : /* @__PURE__ */
|
|
21368
|
-
!text || hideOptionText ? null : /* @__PURE__ */
|
|
21745
|
+
option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx129(CgCheck5, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
|
|
21746
|
+
/* @__PURE__ */ jsxs86("span", { css: segmentedControlLabelContentStyles, children: [
|
|
21747
|
+
!option.icon ? null : /* @__PURE__ */ jsx129(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
|
|
21748
|
+
!text || hideOptionText ? null : /* @__PURE__ */ jsx129("span", { css: segmentedControlLabelTextStyles, children: text })
|
|
21369
21749
|
] })
|
|
21370
21750
|
]
|
|
21371
21751
|
}
|
|
@@ -21375,7 +21755,7 @@ var SegmentedControl = ({
|
|
|
21375
21755
|
})
|
|
21376
21756
|
}
|
|
21377
21757
|
) }),
|
|
21378
|
-
/* @__PURE__ */
|
|
21758
|
+
/* @__PURE__ */ jsx129(
|
|
21379
21759
|
"div",
|
|
21380
21760
|
{
|
|
21381
21761
|
css: [
|
|
@@ -21389,18 +21769,18 @@ var SegmentedControl = ({
|
|
|
21389
21769
|
};
|
|
21390
21770
|
|
|
21391
21771
|
// src/components/Skeleton/Skeleton.styles.ts
|
|
21392
|
-
import { css as
|
|
21772
|
+
import { css as css99, keyframes as keyframes5 } from "@emotion/react";
|
|
21393
21773
|
var lightFadingOut = keyframes5`
|
|
21394
21774
|
from { opacity: 0.1; }
|
|
21395
21775
|
to { opacity: 0.025; }
|
|
21396
21776
|
`;
|
|
21397
|
-
var skeletonStyles =
|
|
21777
|
+
var skeletonStyles = css99`
|
|
21398
21778
|
animation: ${lightFadingOut} 1s ease-out infinite alternate;
|
|
21399
21779
|
background-color: var(--gray-900);
|
|
21400
21780
|
`;
|
|
21401
21781
|
|
|
21402
21782
|
// src/components/Skeleton/Skeleton.tsx
|
|
21403
|
-
import { jsx as
|
|
21783
|
+
import { jsx as jsx130 } from "@emotion/react/jsx-runtime";
|
|
21404
21784
|
var Skeleton = ({
|
|
21405
21785
|
width = "100%",
|
|
21406
21786
|
height = "1.25rem",
|
|
@@ -21408,7 +21788,7 @@ var Skeleton = ({
|
|
|
21408
21788
|
circle = false,
|
|
21409
21789
|
children,
|
|
21410
21790
|
...otherProps
|
|
21411
|
-
}) => /* @__PURE__ */
|
|
21791
|
+
}) => /* @__PURE__ */ jsx130(
|
|
21412
21792
|
"div",
|
|
21413
21793
|
{
|
|
21414
21794
|
css: [
|
|
@@ -21428,11 +21808,11 @@ var Skeleton = ({
|
|
|
21428
21808
|
);
|
|
21429
21809
|
|
|
21430
21810
|
// src/components/Switch/Switch.tsx
|
|
21431
|
-
import
|
|
21811
|
+
import { forwardRef as forwardRef24 } from "react";
|
|
21432
21812
|
|
|
21433
21813
|
// src/components/Switch/Switch.styles.ts
|
|
21434
|
-
import { css as
|
|
21435
|
-
var SwitchInputContainer =
|
|
21814
|
+
import { css as css100 } from "@emotion/react";
|
|
21815
|
+
var SwitchInputContainer = css100`
|
|
21436
21816
|
cursor: pointer;
|
|
21437
21817
|
display: inline-block;
|
|
21438
21818
|
position: relative;
|
|
@@ -21441,7 +21821,7 @@ var SwitchInputContainer = css96`
|
|
|
21441
21821
|
vertical-align: middle;
|
|
21442
21822
|
user-select: none;
|
|
21443
21823
|
`;
|
|
21444
|
-
var SwitchInput =
|
|
21824
|
+
var SwitchInput = (size) => css100`
|
|
21445
21825
|
appearance: none;
|
|
21446
21826
|
border-radius: var(--rounded-full);
|
|
21447
21827
|
background-color: var(--white);
|
|
@@ -21449,15 +21829,16 @@ var SwitchInput = css96`
|
|
|
21449
21829
|
cursor: pointer;
|
|
21450
21830
|
position: absolute;
|
|
21451
21831
|
display: block;
|
|
21452
|
-
width: var(--spacing-md);
|
|
21453
|
-
height: var(--spacing-md);
|
|
21832
|
+
width: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
|
|
21833
|
+
height: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
|
|
21834
|
+
margin-top: ${size === "sm" ? "var(--spacing-xs)" : "none"};
|
|
21454
21835
|
transition: transform var(--duration-fast) var(--timing-ease-out),
|
|
21455
21836
|
background-color var(--duration-fast) var(--timing-ease-out),
|
|
21456
21837
|
background-image var(--duration-fast) var(--timing-ease-out);
|
|
21457
21838
|
z-index: var(--z-10);
|
|
21458
21839
|
|
|
21459
21840
|
&:focus {
|
|
21460
|
-
outline:
|
|
21841
|
+
outline: 2px solid var(--gray-800);
|
|
21461
21842
|
outline-offset: 2px;
|
|
21462
21843
|
}
|
|
21463
21844
|
|
|
@@ -21479,7 +21860,7 @@ var SwitchInput = css96`
|
|
|
21479
21860
|
cursor: not-allowed;
|
|
21480
21861
|
}
|
|
21481
21862
|
`;
|
|
21482
|
-
var SwitchInputDisabled =
|
|
21863
|
+
var SwitchInputDisabled = css100`
|
|
21483
21864
|
opacity: var(--opacity-50);
|
|
21484
21865
|
cursor: not-allowed;
|
|
21485
21866
|
|
|
@@ -21487,12 +21868,12 @@ var SwitchInputDisabled = css96`
|
|
|
21487
21868
|
cursor: not-allowed;
|
|
21488
21869
|
}
|
|
21489
21870
|
`;
|
|
21490
|
-
var SwitchInputLabel =
|
|
21871
|
+
var SwitchInputLabel = (size) => css100`
|
|
21491
21872
|
align-items: center;
|
|
21492
21873
|
color: var(--typography-base);
|
|
21493
21874
|
display: inline-flex;
|
|
21494
21875
|
line-height: 1.25;
|
|
21495
|
-
padding-inline: var(--spacing-2xl) 0;
|
|
21876
|
+
padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
|
|
21496
21877
|
|
|
21497
21878
|
&:before {
|
|
21498
21879
|
border-radius: var(--rounded-full);
|
|
@@ -21501,103 +21882,118 @@ var SwitchInputLabel = css96`
|
|
|
21501
21882
|
cursor: pointer;
|
|
21502
21883
|
display: block;
|
|
21503
21884
|
overflow: hidden;
|
|
21504
|
-
width: var(--spacing-xl);
|
|
21505
|
-
height: var(--spacing-md);
|
|
21885
|
+
width: ${size === "sm" ? "var(--spacing-lg)" : "var(--spacing-xl)"};
|
|
21886
|
+
height: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
|
|
21887
|
+
margin-top: ${size === "sm" ? "var(--spacing-xs)" : "none"};
|
|
21506
21888
|
position: absolute;
|
|
21507
21889
|
left: 0;
|
|
21508
21890
|
top: 0;
|
|
21509
21891
|
}
|
|
21510
21892
|
`;
|
|
21511
|
-
var SwitchText =
|
|
21893
|
+
var SwitchText = (size) => css100`
|
|
21512
21894
|
color: var(--gray-500);
|
|
21513
21895
|
font-size: var(--fs-sm);
|
|
21514
|
-
padding-inline: var(--spacing-2xl) 0;
|
|
21896
|
+
padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
|
|
21515
21897
|
`;
|
|
21516
21898
|
|
|
21517
21899
|
// src/components/Switch/Switch.tsx
|
|
21518
|
-
import { Fragment as
|
|
21519
|
-
var Switch =
|
|
21520
|
-
({ label, infoText, toggleText, children, ...inputProps }, ref) => {
|
|
21900
|
+
import { Fragment as Fragment21, jsx as jsx131, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
|
|
21901
|
+
var Switch = forwardRef24(
|
|
21902
|
+
({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
|
|
21521
21903
|
let additionalText = infoText;
|
|
21522
21904
|
if (infoText && toggleText) {
|
|
21523
21905
|
additionalText = inputProps.checked ? toggleText : infoText;
|
|
21524
21906
|
}
|
|
21525
|
-
return /* @__PURE__ */
|
|
21526
|
-
/* @__PURE__ */
|
|
21527
|
-
|
|
21528
|
-
|
|
21529
|
-
|
|
21530
|
-
|
|
21907
|
+
return /* @__PURE__ */ jsxs87(Fragment21, { children: [
|
|
21908
|
+
/* @__PURE__ */ jsxs87(
|
|
21909
|
+
"label",
|
|
21910
|
+
{
|
|
21911
|
+
css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0],
|
|
21912
|
+
children: [
|
|
21913
|
+
/* @__PURE__ */ jsx131("input", { type: "checkbox", css: SwitchInput(switchSize), ...inputProps, ref }),
|
|
21914
|
+
/* @__PURE__ */ jsx131("span", { css: SwitchInputLabel(switchSize), children: label })
|
|
21915
|
+
]
|
|
21916
|
+
}
|
|
21917
|
+
),
|
|
21918
|
+
additionalText ? /* @__PURE__ */ jsx131("p", { css: SwitchText(switchSize), children: additionalText }) : null,
|
|
21531
21919
|
children
|
|
21532
21920
|
] });
|
|
21533
21921
|
}
|
|
21534
21922
|
);
|
|
21535
21923
|
|
|
21536
21924
|
// src/components/Table/Table.tsx
|
|
21537
|
-
import * as
|
|
21925
|
+
import * as React24 from "react";
|
|
21538
21926
|
|
|
21539
21927
|
// src/components/Table/Table.styles.ts
|
|
21540
|
-
import { css as
|
|
21541
|
-
var table = ({ cellPadding = "var(--spacing-
|
|
21928
|
+
import { css as css101 } from "@emotion/react";
|
|
21929
|
+
var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => css101`
|
|
21542
21930
|
border-bottom: 1px solid var(--gray-400);
|
|
21543
21931
|
border-collapse: collapse;
|
|
21544
21932
|
min-width: 100%;
|
|
21545
21933
|
table-layout: auto;
|
|
21934
|
+
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
21546
21935
|
|
|
21547
21936
|
th,
|
|
21548
21937
|
td {
|
|
21549
21938
|
padding: ${cellPadding};
|
|
21550
21939
|
}
|
|
21940
|
+
|
|
21941
|
+
thead tr {
|
|
21942
|
+
border-color: var(--gray-300);
|
|
21943
|
+
}
|
|
21944
|
+
|
|
21945
|
+
tbody tr:hover {
|
|
21946
|
+
background-color: var(--gray-50);
|
|
21947
|
+
}
|
|
21551
21948
|
`;
|
|
21552
|
-
var tableHead =
|
|
21553
|
-
background: var(--gray-100);
|
|
21949
|
+
var tableHead = css101`
|
|
21554
21950
|
color: var(--typography-base);
|
|
21555
21951
|
text-align: left;
|
|
21556
21952
|
`;
|
|
21557
|
-
var tableRow =
|
|
21558
|
-
border-bottom: 1px solid var(--gray-
|
|
21953
|
+
var tableRow = css101`
|
|
21954
|
+
border-bottom: 1px solid var(--gray-100);
|
|
21559
21955
|
`;
|
|
21560
|
-
var tableCellHead =
|
|
21956
|
+
var tableCellHead = css101`
|
|
21561
21957
|
font-size: var(--fs-sm);
|
|
21562
21958
|
text-transform: uppercase;
|
|
21563
21959
|
font-weight: var(--fw-bold);
|
|
21564
21960
|
`;
|
|
21565
21961
|
|
|
21566
21962
|
// src/components/Table/Table.tsx
|
|
21567
|
-
import { jsx as
|
|
21568
|
-
var Table =
|
|
21963
|
+
import { jsx as jsx132 } from "@emotion/react/jsx-runtime";
|
|
21964
|
+
var Table = React24.forwardRef(
|
|
21569
21965
|
({ children, cellPadding, ...otherProps }, ref) => {
|
|
21570
|
-
return /* @__PURE__ */
|
|
21966
|
+
return /* @__PURE__ */ jsx132("table", { ref, css: table({ cellPadding }), ...otherProps, children });
|
|
21571
21967
|
}
|
|
21572
21968
|
);
|
|
21573
|
-
var TableHead =
|
|
21969
|
+
var TableHead = React24.forwardRef(
|
|
21574
21970
|
({ children, ...otherProps }, ref) => {
|
|
21575
|
-
return /* @__PURE__ */
|
|
21971
|
+
return /* @__PURE__ */ jsx132("thead", { ref, css: tableHead, ...otherProps, children });
|
|
21576
21972
|
}
|
|
21577
21973
|
);
|
|
21578
|
-
var TableBody =
|
|
21974
|
+
var TableBody = React24.forwardRef(
|
|
21579
21975
|
({ children, ...otherProps }, ref) => {
|
|
21580
|
-
return /* @__PURE__ */
|
|
21976
|
+
return /* @__PURE__ */ jsx132("tbody", { ref, ...otherProps, children });
|
|
21581
21977
|
}
|
|
21582
21978
|
);
|
|
21583
|
-
var TableFoot =
|
|
21979
|
+
var TableFoot = React24.forwardRef(
|
|
21584
21980
|
({ children, ...otherProps }, ref) => {
|
|
21585
|
-
return /* @__PURE__ */
|
|
21981
|
+
return /* @__PURE__ */ jsx132("tfoot", { ref, ...otherProps, children });
|
|
21586
21982
|
}
|
|
21587
21983
|
);
|
|
21588
|
-
var TableRow =
|
|
21984
|
+
var TableRow = React24.forwardRef(
|
|
21589
21985
|
({ children, ...otherProps }, ref) => {
|
|
21590
|
-
return /* @__PURE__ */
|
|
21986
|
+
return /* @__PURE__ */ jsx132("tr", { ref, css: tableRow, ...otherProps, children });
|
|
21591
21987
|
}
|
|
21592
21988
|
);
|
|
21593
|
-
var TableCellHead =
|
|
21989
|
+
var TableCellHead = React24.forwardRef(
|
|
21594
21990
|
({ children, ...otherProps }, ref) => {
|
|
21595
|
-
return /* @__PURE__ */
|
|
21991
|
+
return /* @__PURE__ */ jsx132("th", { ref, css: tableCellHead, ...otherProps, children });
|
|
21596
21992
|
}
|
|
21597
21993
|
);
|
|
21598
|
-
var TableCellData =
|
|
21994
|
+
var TableCellData = React24.forwardRef(
|
|
21599
21995
|
({ children, ...otherProps }, ref) => {
|
|
21600
|
-
return /* @__PURE__ */
|
|
21996
|
+
return /* @__PURE__ */ jsx132("td", { ref, ...otherProps, children });
|
|
21601
21997
|
}
|
|
21602
21998
|
);
|
|
21603
21999
|
|
|
@@ -21609,11 +22005,11 @@ import {
|
|
|
21609
22005
|
TabProvider as AriakitTabProvider,
|
|
21610
22006
|
useTabStore as useAriakitTabStore
|
|
21611
22007
|
} from "@ariakit/react";
|
|
21612
|
-
import { useCallback as useCallback12, useEffect as
|
|
22008
|
+
import { useCallback as useCallback12, useEffect as useEffect21, useMemo as useMemo7 } from "react";
|
|
21613
22009
|
|
|
21614
22010
|
// src/components/Tabs/Tabs.styles.ts
|
|
21615
|
-
import { css as
|
|
21616
|
-
var tabButtonStyles =
|
|
22011
|
+
import { css as css102 } from "@emotion/react";
|
|
22012
|
+
var tabButtonStyles = css102`
|
|
21617
22013
|
align-items: center;
|
|
21618
22014
|
border: 0;
|
|
21619
22015
|
height: 2.5rem;
|
|
@@ -21630,14 +22026,14 @@ var tabButtonStyles = css98`
|
|
|
21630
22026
|
box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
|
|
21631
22027
|
}
|
|
21632
22028
|
`;
|
|
21633
|
-
var tabButtonGroupStyles =
|
|
22029
|
+
var tabButtonGroupStyles = css102`
|
|
21634
22030
|
display: flex;
|
|
21635
22031
|
gap: var(--spacing-base);
|
|
21636
22032
|
border-bottom: 1px solid var(--gray-300);
|
|
21637
22033
|
`;
|
|
21638
22034
|
|
|
21639
22035
|
// src/components/Tabs/Tabs.tsx
|
|
21640
|
-
import { jsx as
|
|
22036
|
+
import { jsx as jsx133 } from "@emotion/react/jsx-runtime";
|
|
21641
22037
|
var useCurrentTab = () => {
|
|
21642
22038
|
const context = useAriakitTabStore();
|
|
21643
22039
|
if (!context) {
|
|
@@ -21654,8 +22050,7 @@ var Tabs = ({
|
|
|
21654
22050
|
...props
|
|
21655
22051
|
}) => {
|
|
21656
22052
|
const selected = useMemo7(() => {
|
|
21657
|
-
if (selectedId)
|
|
21658
|
-
return selectedId;
|
|
22053
|
+
if (selectedId) return selectedId;
|
|
21659
22054
|
return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
|
|
21660
22055
|
}, [selectedId, useHashForState]);
|
|
21661
22056
|
const tab = useAriakitTabStore({ ...props, selectOnMove: !manual, selectedId: selected });
|
|
@@ -21670,33 +22065,33 @@ var Tabs = ({
|
|
|
21670
22065
|
},
|
|
21671
22066
|
[onSelectedIdChange, useHashForState]
|
|
21672
22067
|
);
|
|
21673
|
-
|
|
22068
|
+
useEffect21(() => {
|
|
21674
22069
|
if (selected && selected !== tab.getState().activeId) {
|
|
21675
22070
|
tab.setSelectedId(selected);
|
|
21676
22071
|
}
|
|
21677
22072
|
}, [selected, tab]);
|
|
21678
|
-
return /* @__PURE__ */
|
|
22073
|
+
return /* @__PURE__ */ jsx133(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
|
|
21679
22074
|
};
|
|
21680
22075
|
var TabButtonGroup = ({ children, ...props }) => {
|
|
21681
|
-
return /* @__PURE__ */
|
|
22076
|
+
return /* @__PURE__ */ jsx133(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
|
|
21682
22077
|
};
|
|
21683
22078
|
var TabButton = ({
|
|
21684
22079
|
children,
|
|
21685
22080
|
id,
|
|
21686
22081
|
...props
|
|
21687
22082
|
}) => {
|
|
21688
|
-
return /* @__PURE__ */
|
|
22083
|
+
return /* @__PURE__ */ jsx133(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
|
|
21689
22084
|
};
|
|
21690
22085
|
var TabContent = ({
|
|
21691
22086
|
children,
|
|
21692
22087
|
...props
|
|
21693
22088
|
}) => {
|
|
21694
|
-
return /* @__PURE__ */
|
|
22089
|
+
return /* @__PURE__ */ jsx133(AriakitTabPanel, { ...props, children });
|
|
21695
22090
|
};
|
|
21696
22091
|
|
|
21697
22092
|
// src/components/Validation/StatusBullet.styles.ts
|
|
21698
|
-
import { css as
|
|
21699
|
-
var StatusBulletContainer =
|
|
22093
|
+
import { css as css103 } from "@emotion/react";
|
|
22094
|
+
var StatusBulletContainer = css103`
|
|
21700
22095
|
align-items: center;
|
|
21701
22096
|
align-self: center;
|
|
21702
22097
|
color: var(--gray-500);
|
|
@@ -21713,33 +22108,33 @@ var StatusBulletContainer = css99`
|
|
|
21713
22108
|
display: block;
|
|
21714
22109
|
}
|
|
21715
22110
|
`;
|
|
21716
|
-
var StatusBulletBase =
|
|
22111
|
+
var StatusBulletBase = css103`
|
|
21717
22112
|
font-size: var(--fs-sm);
|
|
21718
22113
|
&:before {
|
|
21719
22114
|
width: var(--fs-xs);
|
|
21720
22115
|
height: var(--fs-xs);
|
|
21721
22116
|
}
|
|
21722
22117
|
`;
|
|
21723
|
-
var StatusBulletSmall =
|
|
22118
|
+
var StatusBulletSmall = css103`
|
|
21724
22119
|
font-size: var(--fs-xs);
|
|
21725
22120
|
&:before {
|
|
21726
22121
|
width: var(--fs-xxs);
|
|
21727
22122
|
height: var(--fs-xxs);
|
|
21728
22123
|
}
|
|
21729
22124
|
`;
|
|
21730
|
-
var StatusDraft =
|
|
22125
|
+
var StatusDraft = css103`
|
|
21731
22126
|
&:before {
|
|
21732
22127
|
background: var(--white);
|
|
21733
22128
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
21734
22129
|
}
|
|
21735
22130
|
`;
|
|
21736
|
-
var StatusModified =
|
|
22131
|
+
var StatusModified = css103`
|
|
21737
22132
|
&:before {
|
|
21738
22133
|
background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
|
|
21739
22134
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
21740
22135
|
}
|
|
21741
22136
|
`;
|
|
21742
|
-
var StatusError =
|
|
22137
|
+
var StatusError = css103`
|
|
21743
22138
|
color: var(--error);
|
|
21744
22139
|
&:before {
|
|
21745
22140
|
/* TODO: replace this with an svg icon */
|
|
@@ -21752,29 +22147,29 @@ var StatusError = css99`
|
|
|
21752
22147
|
);
|
|
21753
22148
|
}
|
|
21754
22149
|
`;
|
|
21755
|
-
var StatusPublished =
|
|
22150
|
+
var StatusPublished = css103`
|
|
21756
22151
|
&:before {
|
|
21757
22152
|
background: var(--accent-dark);
|
|
21758
22153
|
}
|
|
21759
22154
|
`;
|
|
21760
|
-
var StatusOrphan =
|
|
22155
|
+
var StatusOrphan = css103`
|
|
21761
22156
|
&:before {
|
|
21762
22157
|
background: var(--brand-secondary-5);
|
|
21763
22158
|
}
|
|
21764
22159
|
`;
|
|
21765
|
-
var StatusUnknown =
|
|
22160
|
+
var StatusUnknown = css103`
|
|
21766
22161
|
&:before {
|
|
21767
22162
|
background: var(--gray-800);
|
|
21768
22163
|
}
|
|
21769
22164
|
`;
|
|
21770
|
-
var StatusDeleted =
|
|
22165
|
+
var StatusDeleted = css103`
|
|
21771
22166
|
&:before {
|
|
21772
22167
|
background: var(--error);
|
|
21773
22168
|
}
|
|
21774
22169
|
`;
|
|
21775
22170
|
|
|
21776
22171
|
// src/components/Validation/StatusBullet.tsx
|
|
21777
|
-
import { jsx as
|
|
22172
|
+
import { jsx as jsx134 } from "@emotion/react/jsx-runtime";
|
|
21778
22173
|
var StatusBullet = ({
|
|
21779
22174
|
status,
|
|
21780
22175
|
hideText = false,
|
|
@@ -21794,7 +22189,7 @@ var StatusBullet = ({
|
|
|
21794
22189
|
Deleted: StatusDeleted
|
|
21795
22190
|
};
|
|
21796
22191
|
const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
|
|
21797
|
-
return /* @__PURE__ */
|
|
22192
|
+
return /* @__PURE__ */ jsx134(
|
|
21798
22193
|
"span",
|
|
21799
22194
|
{
|
|
21800
22195
|
role: "status",
|
|
@@ -21831,6 +22226,7 @@ export {
|
|
|
21831
22226
|
CurrentDrawerContext,
|
|
21832
22227
|
DashedBox,
|
|
21833
22228
|
DateTimePicker,
|
|
22229
|
+
DateTimePickerSummary,
|
|
21834
22230
|
DateTimePickerVariant,
|
|
21835
22231
|
DebouncedInputKeywordSearch,
|
|
21836
22232
|
DescriptionList,
|
|
@@ -21894,6 +22290,13 @@ export {
|
|
|
21894
22290
|
Modal,
|
|
21895
22291
|
ModalDialog,
|
|
21896
22292
|
MultilineChip,
|
|
22293
|
+
ObjectGridContainer2 as ObjectGridContainer,
|
|
22294
|
+
ObjectGridItem2 as ObjectGridItem,
|
|
22295
|
+
ObjectGridItemCardCover,
|
|
22296
|
+
ObjectGridItemCover,
|
|
22297
|
+
ObjectGridItemCoverButton,
|
|
22298
|
+
ObjectGridItemHeading2 as ObjectGridItemHeading,
|
|
22299
|
+
ObjectGridItemIconWithTooltip,
|
|
21897
22300
|
PageHeaderSection,
|
|
21898
22301
|
Pagination,
|
|
21899
22302
|
Paragraph,
|
|
@@ -22039,6 +22442,7 @@ export {
|
|
|
22039
22442
|
toast,
|
|
22040
22443
|
uniformComponentIcon,
|
|
22041
22444
|
uniformComponentPatternIcon,
|
|
22445
|
+
uniformCompositionPatternIcon,
|
|
22042
22446
|
uniformContentTypeIcon,
|
|
22043
22447
|
uniformEntryIcon,
|
|
22044
22448
|
uniformEntryPatternIcon,
|
|
@@ -22051,6 +22455,7 @@ export {
|
|
|
22051
22455
|
useIconContext,
|
|
22052
22456
|
useOutsideClick,
|
|
22053
22457
|
useParameterShell,
|
|
22458
|
+
usePopoverComponentContext,
|
|
22054
22459
|
useShortcut,
|
|
22055
22460
|
functionalColors as utilityColors,
|
|
22056
22461
|
warningIcon,
|