@uniformdev/design-system 20.59.1 → 20.60.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +615 -554
- package/dist/index.d.mts +266 -50
- package/dist/index.d.ts +266 -50
- package/dist/index.js +766 -700
- package/package.json +5 -6
package/dist/esm/index.js
CHANGED
|
@@ -4327,7 +4327,7 @@ var LoadingOverlay = ({
|
|
|
4327
4327
|
var LoadingAnimation = ({
|
|
4328
4328
|
label: label2,
|
|
4329
4329
|
width,
|
|
4330
|
-
css:
|
|
4330
|
+
css: css120,
|
|
4331
4331
|
isPaused
|
|
4332
4332
|
}) => {
|
|
4333
4333
|
return /* @__PURE__ */ jsxs13(
|
|
@@ -4338,7 +4338,7 @@ var LoadingAnimation = ({
|
|
|
4338
4338
|
width: typeof width === "number" ? `${width}px` : width,
|
|
4339
4339
|
height: typeof width === "number" ? `${width}px` : width
|
|
4340
4340
|
},
|
|
4341
|
-
css: [loaderAnimationContainer,
|
|
4341
|
+
css: [loaderAnimationContainer, css120],
|
|
4342
4342
|
className: `loader-container${isPaused ? " paused" : ""}`,
|
|
4343
4343
|
children: [
|
|
4344
4344
|
/* @__PURE__ */ jsxs13("div", { className: "bottom-cubes", children: [
|
|
@@ -12722,6 +12722,9 @@ var ObjectListItem = css89`
|
|
|
12722
12722
|
var ObjectListItemSingle = css89`
|
|
12723
12723
|
align-items: center;
|
|
12724
12724
|
`;
|
|
12725
|
+
var ObjectListItemDragHandleContainer = css89`
|
|
12726
|
+
height: 100%;
|
|
12727
|
+
`;
|
|
12725
12728
|
var ObjectListItemContentWrapper = css89`
|
|
12726
12729
|
display: grid;
|
|
12727
12730
|
gap: var(--spacing-sm);
|
|
@@ -12733,7 +12736,7 @@ var ObjectListItemRightSlot = css89`
|
|
|
12733
12736
|
gap: var(--spacing-sm);
|
|
12734
12737
|
`;
|
|
12735
12738
|
var ObjectListItemContainer = css89`
|
|
12736
|
-
> [role='listitem']:not(:first-
|
|
12739
|
+
> [role='listitem']:not(:first-child) {
|
|
12737
12740
|
border-top: 1px solid var(--gray-200);
|
|
12738
12741
|
}
|
|
12739
12742
|
`;
|
|
@@ -12747,6 +12750,15 @@ var ObjectListItemCover = css89`
|
|
|
12747
12750
|
text-align: center;
|
|
12748
12751
|
font-size: var(--fs-xs);
|
|
12749
12752
|
`;
|
|
12753
|
+
var ObjectListItemIconCover = css89`
|
|
12754
|
+
position: relative;
|
|
12755
|
+
align-items: center;
|
|
12756
|
+
display: flex;
|
|
12757
|
+
width: 80px;
|
|
12758
|
+
height: 45px;
|
|
12759
|
+
text-align: center;
|
|
12760
|
+
font-size: var(--fs-xs);
|
|
12761
|
+
`;
|
|
12750
12762
|
var ObjectListItemImage = css89`
|
|
12751
12763
|
object-fit: cover;
|
|
12752
12764
|
width: 100%;
|
|
@@ -12783,6 +12795,17 @@ var ObjectListItemHeadingWrapper = css89`
|
|
|
12783
12795
|
display: flex;
|
|
12784
12796
|
gap: var(--spacing-xs);
|
|
12785
12797
|
`;
|
|
12798
|
+
var ObjectListItemCoverIconGhost = css89`
|
|
12799
|
+
position: absolute;
|
|
12800
|
+
width: 40%;
|
|
12801
|
+
height: auto;
|
|
12802
|
+
aspect-ratio: 1;
|
|
12803
|
+
opacity: 0.05;
|
|
12804
|
+
transform: rotateZ(-15deg) translate(80%, 40%);
|
|
12805
|
+
`;
|
|
12806
|
+
var ObjectListItemCoverIcon = css89`
|
|
12807
|
+
transform: translate(40%, 0);
|
|
12808
|
+
`;
|
|
12786
12809
|
|
|
12787
12810
|
// src/components/Objects/ObjectItemLoadingSkeleton.tsx
|
|
12788
12811
|
import { jsx as jsx116, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
|
|
@@ -12819,6 +12842,7 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
|
|
|
12819
12842
|
cover,
|
|
12820
12843
|
header: header2,
|
|
12821
12844
|
rightSlot,
|
|
12845
|
+
leftSlot,
|
|
12822
12846
|
menuItems,
|
|
12823
12847
|
dragHandle,
|
|
12824
12848
|
portalElement,
|
|
@@ -12833,7 +12857,16 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
|
|
|
12833
12857
|
"aria-selected": isSelected,
|
|
12834
12858
|
...divProps,
|
|
12835
12859
|
children: [
|
|
12836
|
-
/* @__PURE__ */ jsx117(
|
|
12860
|
+
/* @__PURE__ */ jsx117(
|
|
12861
|
+
HorizontalRhythm,
|
|
12862
|
+
{
|
|
12863
|
+
gap: "sm",
|
|
12864
|
+
align: "center",
|
|
12865
|
+
"data-testid": "drag-container",
|
|
12866
|
+
css: ObjectListItemDragHandleContainer,
|
|
12867
|
+
children: dragHandle
|
|
12868
|
+
}
|
|
12869
|
+
),
|
|
12837
12870
|
/* @__PURE__ */ jsxs80(
|
|
12838
12871
|
"div",
|
|
12839
12872
|
{
|
|
@@ -12841,30 +12874,34 @@ var ObjectListItem2 = ({ minContainerQueryWidth = "34rem", ...props }) => {
|
|
|
12841
12874
|
ObjectListItemContentWrapper,
|
|
12842
12875
|
`${cq(minContainerQueryWidth)} {
|
|
12843
12876
|
grid-template-columns: ${cover ? "minmax(0, auto)" : ""} minmax(0, 1fr) minmax(0, auto);
|
|
12844
|
-
}
|
|
12877
|
+
}`,
|
|
12878
|
+
renderAs === "single" ? ObjectListItemSingle : null
|
|
12845
12879
|
],
|
|
12846
12880
|
children: [
|
|
12847
12881
|
cover ? /* @__PURE__ */ jsx117(HorizontalRhythm, { gap: "sm", align: "center", children: cover }) : null,
|
|
12848
|
-
/* @__PURE__ */ jsxs80(
|
|
12849
|
-
|
|
12850
|
-
|
|
12851
|
-
|
|
12852
|
-
|
|
12853
|
-
|
|
12854
|
-
|
|
12855
|
-
|
|
12856
|
-
|
|
12857
|
-
|
|
12858
|
-
|
|
12859
|
-
|
|
12860
|
-
|
|
12861
|
-
|
|
12862
|
-
|
|
12863
|
-
|
|
12864
|
-
|
|
12865
|
-
|
|
12866
|
-
|
|
12867
|
-
|
|
12882
|
+
/* @__PURE__ */ jsxs80(HorizontalRhythm, { gap: "xs", align: renderAs === "multi" ? "flex-start" : "center", children: [
|
|
12883
|
+
leftSlot ? /* @__PURE__ */ jsx117(HorizontalRhythm, { gap: "xs", align: "baseline", children: leftSlot }) : null,
|
|
12884
|
+
/* @__PURE__ */ jsxs80(
|
|
12885
|
+
VerticalRhythm,
|
|
12886
|
+
{
|
|
12887
|
+
gap: "0",
|
|
12888
|
+
justify: renderAs === "multi" ? "flex-start" : "center",
|
|
12889
|
+
"data-testid": "title-container",
|
|
12890
|
+
children: [
|
|
12891
|
+
/* @__PURE__ */ jsx117(
|
|
12892
|
+
HorizontalRhythm,
|
|
12893
|
+
{
|
|
12894
|
+
gap: "xs",
|
|
12895
|
+
align: renderAs === "multi" ? "flex-start" : "center",
|
|
12896
|
+
"data-testid": "title",
|
|
12897
|
+
children: header2
|
|
12898
|
+
}
|
|
12899
|
+
),
|
|
12900
|
+
renderAs === "multi" ? props.children : null
|
|
12901
|
+
]
|
|
12902
|
+
}
|
|
12903
|
+
)
|
|
12904
|
+
] }),
|
|
12868
12905
|
/* @__PURE__ */ jsx117(HorizontalRhythm, { gap: "xs", align: renderAs === "multi" ? "flex-start" : "center", children: rightSlot })
|
|
12869
12906
|
]
|
|
12870
12907
|
}
|
|
@@ -12890,12 +12927,19 @@ var ObjectListItemContainer2 = ({ children, gap = "0", ...props }) => {
|
|
|
12890
12927
|
};
|
|
12891
12928
|
|
|
12892
12929
|
// src/components/Objects/ObjectListItemCover.tsx
|
|
12893
|
-
import { jsx as jsx119 } from "@emotion/react/jsx-runtime";
|
|
12930
|
+
import { jsx as jsx119, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
|
|
12894
12931
|
var ObjectListItemCover2 = ({
|
|
12895
12932
|
imageUrl,
|
|
12896
12933
|
noImageText = "Image not available",
|
|
12934
|
+
icon,
|
|
12897
12935
|
...props
|
|
12898
12936
|
}) => {
|
|
12937
|
+
if (icon) {
|
|
12938
|
+
return /* @__PURE__ */ jsxs81("div", { css: ObjectListItemIconCover, ...props, children: [
|
|
12939
|
+
/* @__PURE__ */ jsx119(Icon, { icon, iconColor: "currentColor", css: ObjectListItemCoverIconGhost }),
|
|
12940
|
+
/* @__PURE__ */ jsx119(Icon, { icon, iconColor: "currentColor", size: 36, css: ObjectListItemCoverIcon })
|
|
12941
|
+
] });
|
|
12942
|
+
}
|
|
12899
12943
|
if (!imageUrl) {
|
|
12900
12944
|
return /* @__PURE__ */ jsx119("div", { css: ObjectListItemCover, role: "presentation", "data-testid": "object-list-item-thumbnail", children: noImageText });
|
|
12901
12945
|
}
|
|
@@ -12928,55 +12972,69 @@ var ObjectListItemHeadingAfterWrapper = css90`
|
|
|
12928
12972
|
`;
|
|
12929
12973
|
|
|
12930
12974
|
// src/components/Objects/ObjectListItemHeading.tsx
|
|
12931
|
-
import { jsx as jsx120, jsxs as
|
|
12975
|
+
import { jsx as jsx120, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
|
|
12932
12976
|
var ObjectListItemHeading2 = ({
|
|
12933
12977
|
heading,
|
|
12934
12978
|
beforeHeadingSlot,
|
|
12935
12979
|
afterHeadingSlot,
|
|
12980
|
+
headingTestId = "reference-item-name",
|
|
12936
12981
|
...props
|
|
12937
12982
|
}) => {
|
|
12938
|
-
return /* @__PURE__ */
|
|
12983
|
+
return /* @__PURE__ */ jsxs82("div", { css: ObjectListItemHeading, ...props, children: [
|
|
12939
12984
|
beforeHeadingSlot ? /* @__PURE__ */ jsx120(HorizontalRhythm, { gap: "xs", align: "center", children: beforeHeadingSlot }) : null,
|
|
12940
|
-
/* @__PURE__ */
|
|
12941
|
-
/* @__PURE__ */ jsx120("div", { role: "heading", "data-testid":
|
|
12985
|
+
/* @__PURE__ */ jsxs82(HorizontalRhythm, { css: ObjectListItemHeadingAfterWrapper, gap: "xs", align: "flex-start", children: [
|
|
12986
|
+
/* @__PURE__ */ jsx120("div", { role: "heading", "data-testid": headingTestId, children: heading }),
|
|
12942
12987
|
afterHeadingSlot
|
|
12943
12988
|
] })
|
|
12944
12989
|
] });
|
|
12945
12990
|
};
|
|
12946
12991
|
|
|
12992
|
+
// src/components/Objects/styles/ObjectListSubText.styles.ts
|
|
12993
|
+
import { css as css91 } from "@emotion/react";
|
|
12994
|
+
var ObjectListSubText = css91`
|
|
12995
|
+
color: var(--gray-500);
|
|
12996
|
+
font-size: var(--fs-sm);
|
|
12997
|
+
`;
|
|
12998
|
+
|
|
12999
|
+
// src/components/Objects/ObjectListSubText.tsx
|
|
13000
|
+
import { jsx as jsx121 } from "@emotion/react/jsx-runtime";
|
|
13001
|
+
var ObjectListSubText2 = ({ children, ...props }) => {
|
|
13002
|
+
return /* @__PURE__ */ jsx121("div", { css: ObjectListSubText, ...props, children });
|
|
13003
|
+
};
|
|
13004
|
+
|
|
12947
13005
|
// src/components/Pagination/Pagination.tsx
|
|
12948
13006
|
import Paginate from "react-paginate";
|
|
12949
13007
|
|
|
12950
13008
|
// src/components/Pagination/Pagniation.styles.ts
|
|
12951
|
-
import { css as
|
|
12952
|
-
var container2 =
|
|
13009
|
+
import { css as css92 } from "@emotion/css";
|
|
13010
|
+
var container2 = css92`
|
|
12953
13011
|
align-items: center;
|
|
12954
13012
|
display: flex;
|
|
12955
13013
|
`;
|
|
12956
|
-
var disabled =
|
|
13014
|
+
var disabled = css92`
|
|
12957
13015
|
opacity: var(--opacity-50);
|
|
12958
13016
|
`;
|
|
12959
|
-
var disabledLink =
|
|
13017
|
+
var disabledLink = css92`
|
|
12960
13018
|
cursor: pointer-default;
|
|
12961
13019
|
`;
|
|
12962
|
-
var pageLink =
|
|
13020
|
+
var pageLink = css92`
|
|
12963
13021
|
display: block;
|
|
12964
13022
|
padding: var(--spacing-sm) var(--spacing-base);
|
|
12965
13023
|
`;
|
|
12966
|
-
var prevNextControls =
|
|
13024
|
+
var prevNextControls = css92`
|
|
12967
13025
|
padding: var(--spacing-sm) var(--spacing-base);
|
|
12968
13026
|
`;
|
|
12969
|
-
var active =
|
|
13027
|
+
var active = css92`
|
|
12970
13028
|
border-radius: var(--rounded-base);
|
|
12971
13029
|
background: var(--gray-200);
|
|
12972
13030
|
`;
|
|
12973
|
-
var page =
|
|
13031
|
+
var page = css92`
|
|
12974
13032
|
margin-left: var(--spacing-xs);
|
|
12975
13033
|
margin-right: var(--spacing-xs);
|
|
12976
13034
|
`;
|
|
12977
13035
|
|
|
12978
13036
|
// src/components/Pagination/Pagination.tsx
|
|
12979
|
-
import { jsx as
|
|
13037
|
+
import { jsx as jsx122 } from "@emotion/react/jsx-runtime";
|
|
12980
13038
|
function Pagination({
|
|
12981
13039
|
limit,
|
|
12982
13040
|
offset,
|
|
@@ -12991,12 +13049,12 @@ function Pagination({
|
|
|
12991
13049
|
if (pageCount <= 1) {
|
|
12992
13050
|
return null;
|
|
12993
13051
|
}
|
|
12994
|
-
return /* @__PURE__ */
|
|
13052
|
+
return /* @__PURE__ */ jsx122(
|
|
12995
13053
|
Paginate,
|
|
12996
13054
|
{
|
|
12997
13055
|
forcePage: currentPage,
|
|
12998
|
-
previousLabel: /* @__PURE__ */
|
|
12999
|
-
nextLabel: /* @__PURE__ */
|
|
13056
|
+
previousLabel: /* @__PURE__ */ jsx122("div", { className: prevNextControls, children: "<" }),
|
|
13057
|
+
nextLabel: /* @__PURE__ */ jsx122("div", { className: prevNextControls, children: ">" }),
|
|
13000
13058
|
breakLabel: "...",
|
|
13001
13059
|
pageCount,
|
|
13002
13060
|
marginPagesDisplayed: 2,
|
|
@@ -13036,8 +13094,8 @@ var useParameterShell = () => {
|
|
|
13036
13094
|
};
|
|
13037
13095
|
|
|
13038
13096
|
// src/components/ParameterInputs/styles/LabelLeadingIcon.styles.ts
|
|
13039
|
-
import { css as
|
|
13040
|
-
var inputIconBtn =
|
|
13097
|
+
import { css as css93 } from "@emotion/react";
|
|
13098
|
+
var inputIconBtn = css93`
|
|
13041
13099
|
align-items: center;
|
|
13042
13100
|
border: none;
|
|
13043
13101
|
border-radius: var(--rounded-base);
|
|
@@ -13065,7 +13123,7 @@ var inputIconBtn = css92`
|
|
|
13065
13123
|
`;
|
|
13066
13124
|
|
|
13067
13125
|
// src/components/ParameterInputs/LabelLeadingIcon.tsx
|
|
13068
|
-
import { jsx as
|
|
13126
|
+
import { jsx as jsx123, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
|
|
13069
13127
|
var LabelLeadingIcon = ({
|
|
13070
13128
|
icon,
|
|
13071
13129
|
iconColor,
|
|
@@ -13076,7 +13134,7 @@ var LabelLeadingIcon = ({
|
|
|
13076
13134
|
...props
|
|
13077
13135
|
}) => {
|
|
13078
13136
|
const titleFr = title != null ? title : isLocked ? "Read-only pattern parameter" : "Click to connect to external content";
|
|
13079
|
-
return /* @__PURE__ */
|
|
13137
|
+
return /* @__PURE__ */ jsx123(Tooltip, { title: titleFr, children: /* @__PURE__ */ jsxs83(
|
|
13080
13138
|
"button",
|
|
13081
13139
|
{
|
|
13082
13140
|
css: inputIconBtn,
|
|
@@ -13086,7 +13144,7 @@ var LabelLeadingIcon = ({
|
|
|
13086
13144
|
...props,
|
|
13087
13145
|
"data-testid": "lock-button",
|
|
13088
13146
|
children: [
|
|
13089
|
-
/* @__PURE__ */
|
|
13147
|
+
/* @__PURE__ */ jsx123(
|
|
13090
13148
|
Icon,
|
|
13091
13149
|
{
|
|
13092
13150
|
icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
|
|
@@ -13104,8 +13162,8 @@ var LabelLeadingIcon = ({
|
|
|
13104
13162
|
import React17 from "react";
|
|
13105
13163
|
|
|
13106
13164
|
// src/components/ParameterInputs/styles/ParameterActionButton.styles.ts
|
|
13107
|
-
import { css as
|
|
13108
|
-
var baseStyles =
|
|
13165
|
+
import { css as css94 } from "@emotion/react";
|
|
13166
|
+
var baseStyles = css94`
|
|
13109
13167
|
--hover-color: var(--accent-dark-hover);
|
|
13110
13168
|
--active-color: var(--accent-dark-active);
|
|
13111
13169
|
border: 1px solid transparent;
|
|
@@ -13130,7 +13188,7 @@ var baseStyles = css93`
|
|
|
13130
13188
|
cursor: default;
|
|
13131
13189
|
}
|
|
13132
13190
|
`;
|
|
13133
|
-
var solidHoverStyles =
|
|
13191
|
+
var solidHoverStyles = css94`
|
|
13134
13192
|
--text-color: var(--typography-inverted);
|
|
13135
13193
|
&:hover,
|
|
13136
13194
|
&:focus,
|
|
@@ -13147,7 +13205,7 @@ var solidHoverStyles = css93`
|
|
|
13147
13205
|
color: var(--text-color);
|
|
13148
13206
|
}
|
|
13149
13207
|
`;
|
|
13150
|
-
var outlineHoverStyles =
|
|
13208
|
+
var outlineHoverStyles = css94`
|
|
13151
13209
|
--text-color: var(--typography-light);
|
|
13152
13210
|
&:hover:not([aria-disabled='true']),
|
|
13153
13211
|
&:focus:not([aria-disabled='true']),
|
|
@@ -13160,7 +13218,7 @@ var outlineHoverStyles = css93`
|
|
|
13160
13218
|
border-color: var(--active-color);
|
|
13161
13219
|
}
|
|
13162
13220
|
`;
|
|
13163
|
-
var invertedStyles =
|
|
13221
|
+
var invertedStyles = css94`
|
|
13164
13222
|
--text-color: var(--typography-inverted);
|
|
13165
13223
|
box-shadow: inset 0 0 0 1px transparent;
|
|
13166
13224
|
&:hover,
|
|
@@ -13177,7 +13235,7 @@ var invertedStyles = css93`
|
|
|
13177
13235
|
`;
|
|
13178
13236
|
|
|
13179
13237
|
// src/components/ParameterInputs/ParameterActionButton.tsx
|
|
13180
|
-
import { jsx as
|
|
13238
|
+
import { jsx as jsx124 } from "@emotion/react/jsx-runtime";
|
|
13181
13239
|
var ParameterActionButton = ({
|
|
13182
13240
|
children,
|
|
13183
13241
|
themeType,
|
|
@@ -13190,7 +13248,7 @@ var ParameterActionButton = ({
|
|
|
13190
13248
|
const { inverted, ...restProps } = props;
|
|
13191
13249
|
const shouldApplyInverted = themeType === "filled" && inverted;
|
|
13192
13250
|
const ComponentWrapper = renderAs === "div" ? "div" : "button";
|
|
13193
|
-
const buttonElement = /* @__PURE__ */
|
|
13251
|
+
const buttonElement = /* @__PURE__ */ jsx124(
|
|
13194
13252
|
ComponentWrapper,
|
|
13195
13253
|
{
|
|
13196
13254
|
css: [
|
|
@@ -13206,26 +13264,26 @@ var ParameterActionButton = ({
|
|
|
13206
13264
|
}
|
|
13207
13265
|
);
|
|
13208
13266
|
if (tooltip && (typeof tooltip === "string" || React17.isValidElement(tooltip))) {
|
|
13209
|
-
return /* @__PURE__ */
|
|
13267
|
+
return /* @__PURE__ */ jsx124(Tooltip, { title: tooltip, ...tooltipProps, children: buttonElement });
|
|
13210
13268
|
}
|
|
13211
13269
|
return buttonElement;
|
|
13212
13270
|
};
|
|
13213
13271
|
|
|
13214
13272
|
// src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
|
|
13215
|
-
import { css as
|
|
13216
|
-
var ParameterDrawerHeaderContainer =
|
|
13273
|
+
import { css as css95 } from "@emotion/react";
|
|
13274
|
+
var ParameterDrawerHeaderContainer = css95`
|
|
13217
13275
|
align-items: center;
|
|
13218
13276
|
display: flex;
|
|
13219
13277
|
gap: var(--spacing-base);
|
|
13220
13278
|
justify-content: space-between;
|
|
13221
13279
|
margin-bottom: var(--spacing-sm);
|
|
13222
13280
|
`;
|
|
13223
|
-
var ParameterDrawerHeaderTitleGroup =
|
|
13281
|
+
var ParameterDrawerHeaderTitleGroup = css95`
|
|
13224
13282
|
align-items: center;
|
|
13225
13283
|
display: flex;
|
|
13226
13284
|
gap: var(--spacing-sm);
|
|
13227
13285
|
`;
|
|
13228
|
-
var ParameterDrawerHeaderTitle =
|
|
13286
|
+
var ParameterDrawerHeaderTitle = css95`
|
|
13229
13287
|
text-overflow: ellipsis;
|
|
13230
13288
|
white-space: nowrap;
|
|
13231
13289
|
overflow: hidden;
|
|
@@ -13233,12 +13291,12 @@ var ParameterDrawerHeaderTitle = css94`
|
|
|
13233
13291
|
`;
|
|
13234
13292
|
|
|
13235
13293
|
// src/components/ParameterInputs/ParameterDrawerHeader.tsx
|
|
13236
|
-
import { jsx as
|
|
13294
|
+
import { jsx as jsx125, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
|
|
13237
13295
|
var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
|
|
13238
|
-
return /* @__PURE__ */
|
|
13239
|
-
/* @__PURE__ */
|
|
13296
|
+
return /* @__PURE__ */ jsxs84("div", { css: ParameterDrawerHeaderContainer, children: [
|
|
13297
|
+
/* @__PURE__ */ jsxs84("header", { css: ParameterDrawerHeaderTitleGroup, children: [
|
|
13240
13298
|
iconBeforeTitle,
|
|
13241
|
-
/* @__PURE__ */
|
|
13299
|
+
/* @__PURE__ */ jsx125(Heading2, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title, children: title })
|
|
13242
13300
|
] }),
|
|
13243
13301
|
children
|
|
13244
13302
|
] });
|
|
@@ -13248,8 +13306,8 @@ var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
|
|
|
13248
13306
|
import { forwardRef as forwardRef21 } from "react";
|
|
13249
13307
|
|
|
13250
13308
|
// src/components/ParameterInputs/styles/ParameterGroup.styles.ts
|
|
13251
|
-
import { css as
|
|
13252
|
-
var fieldsetStyles =
|
|
13309
|
+
import { css as css96 } from "@emotion/react";
|
|
13310
|
+
var fieldsetStyles = css96`
|
|
13253
13311
|
&:disabled,
|
|
13254
13312
|
[readonly] {
|
|
13255
13313
|
input,
|
|
@@ -13264,7 +13322,7 @@ var fieldsetStyles = css95`
|
|
|
13264
13322
|
}
|
|
13265
13323
|
}
|
|
13266
13324
|
`;
|
|
13267
|
-
var fieldsetLegend2 =
|
|
13325
|
+
var fieldsetLegend2 = css96`
|
|
13268
13326
|
display: block;
|
|
13269
13327
|
font-weight: var(--fw-medium);
|
|
13270
13328
|
margin-bottom: var(--spacing-base);
|
|
@@ -13272,11 +13330,11 @@ var fieldsetLegend2 = css95`
|
|
|
13272
13330
|
`;
|
|
13273
13331
|
|
|
13274
13332
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
13275
|
-
import { jsx as
|
|
13333
|
+
import { jsx as jsx126, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
|
|
13276
13334
|
var ParameterGroup = forwardRef21(
|
|
13277
13335
|
({ legend, isDisabled, children, ...props }, ref) => {
|
|
13278
|
-
return /* @__PURE__ */
|
|
13279
|
-
/* @__PURE__ */
|
|
13336
|
+
return /* @__PURE__ */ jsxs85("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
|
|
13337
|
+
/* @__PURE__ */ jsx126("legend", { css: fieldsetLegend2, children: legend }),
|
|
13280
13338
|
children
|
|
13281
13339
|
] });
|
|
13282
13340
|
}
|
|
@@ -13290,15 +13348,15 @@ import { useState as useState19 } from "react";
|
|
|
13290
13348
|
import { createPortal as createPortal2 } from "react-dom";
|
|
13291
13349
|
|
|
13292
13350
|
// src/components/ParameterInputs/styles/ParameterImage.styles.ts
|
|
13293
|
-
import { css as
|
|
13294
|
-
var previewWrapper =
|
|
13351
|
+
import { css as css97 } from "@emotion/react";
|
|
13352
|
+
var previewWrapper = css97`
|
|
13295
13353
|
margin-top: var(--spacing-xs);
|
|
13296
13354
|
background: var(--gray-50);
|
|
13297
13355
|
padding: var(--spacing-sm);
|
|
13298
13356
|
border: solid 1px var(--gray-300);
|
|
13299
13357
|
border-radius: var(--rounded-sm);
|
|
13300
13358
|
`;
|
|
13301
|
-
var previewLink =
|
|
13359
|
+
var previewLink = css97`
|
|
13302
13360
|
display: block;
|
|
13303
13361
|
width: 100%;
|
|
13304
13362
|
|
|
@@ -13306,7 +13364,7 @@ var previewLink = css96`
|
|
|
13306
13364
|
max-height: 9rem;
|
|
13307
13365
|
}
|
|
13308
13366
|
`;
|
|
13309
|
-
var previewModalWrapper =
|
|
13367
|
+
var previewModalWrapper = css97`
|
|
13310
13368
|
background: var(--gray-50);
|
|
13311
13369
|
display: flex;
|
|
13312
13370
|
height: 100%;
|
|
@@ -13315,7 +13373,7 @@ var previewModalWrapper = css96`
|
|
|
13315
13373
|
border: solid 1px var(--gray-300);
|
|
13316
13374
|
border-radius: var(--rounded-sm);
|
|
13317
13375
|
`;
|
|
13318
|
-
var previewModalImage =
|
|
13376
|
+
var previewModalImage = css97`
|
|
13319
13377
|
display: flex;
|
|
13320
13378
|
height: 100%;
|
|
13321
13379
|
width: 100%;
|
|
@@ -13327,32 +13385,33 @@ var previewModalImage = css96`
|
|
|
13327
13385
|
`;
|
|
13328
13386
|
|
|
13329
13387
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
13330
|
-
import { Fragment as Fragment13, jsx as
|
|
13388
|
+
import { Fragment as Fragment13, jsx as jsx127, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
|
|
13331
13389
|
function ParameterImagePreview({ imageSrc }) {
|
|
13332
13390
|
const [showModal, setShowModal] = useState19(false);
|
|
13333
|
-
return imageSrc ? /* @__PURE__ */
|
|
13334
|
-
/* @__PURE__ */
|
|
13335
|
-
/* @__PURE__ */
|
|
13391
|
+
return imageSrc ? /* @__PURE__ */ jsxs86("div", { css: previewWrapper, children: [
|
|
13392
|
+
/* @__PURE__ */ jsx127(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
|
|
13393
|
+
/* @__PURE__ */ jsx127(
|
|
13336
13394
|
"button",
|
|
13337
13395
|
{
|
|
13396
|
+
type: "button",
|
|
13338
13397
|
css: previewLink,
|
|
13339
13398
|
onClick: () => {
|
|
13340
13399
|
setShowModal(true);
|
|
13341
13400
|
},
|
|
13342
|
-
children: /* @__PURE__ */
|
|
13401
|
+
children: /* @__PURE__ */ jsx127(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
|
|
13343
13402
|
}
|
|
13344
13403
|
)
|
|
13345
13404
|
] }) : null;
|
|
13346
13405
|
}
|
|
13347
13406
|
var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
13348
|
-
return open ? /* @__PURE__ */
|
|
13349
|
-
/* @__PURE__ */
|
|
13407
|
+
return open ? /* @__PURE__ */ jsx127(Fragment13, { children: createPortal2(
|
|
13408
|
+
/* @__PURE__ */ jsx127(
|
|
13350
13409
|
Modal,
|
|
13351
13410
|
{
|
|
13352
13411
|
header: "Image Preview",
|
|
13353
13412
|
onRequestClose,
|
|
13354
|
-
buttonGroup: /* @__PURE__ */
|
|
13355
|
-
children: /* @__PURE__ */
|
|
13413
|
+
buttonGroup: /* @__PURE__ */ jsx127(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
|
|
13414
|
+
children: /* @__PURE__ */ jsx127("div", { css: previewModalWrapper, children: /* @__PURE__ */ jsx127(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
|
|
13356
13415
|
}
|
|
13357
13416
|
),
|
|
13358
13417
|
document.body
|
|
@@ -13360,12 +13419,12 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
|
13360
13419
|
};
|
|
13361
13420
|
|
|
13362
13421
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
13363
|
-
import { css as
|
|
13422
|
+
import { css as css100 } from "@emotion/react";
|
|
13364
13423
|
import { useState as useState20 } from "react";
|
|
13365
13424
|
|
|
13366
13425
|
// src/components/ParameterInputs/styles/ParameterInput.styles.ts
|
|
13367
|
-
import { css as
|
|
13368
|
-
var actionBarVisibilityStyles =
|
|
13426
|
+
import { css as css98 } from "@emotion/react";
|
|
13427
|
+
var actionBarVisibilityStyles = css98`
|
|
13369
13428
|
[data-action-bar] {
|
|
13370
13429
|
opacity: 1;
|
|
13371
13430
|
transform: translateX(0);
|
|
@@ -13374,14 +13433,14 @@ var actionBarVisibilityStyles = css97`
|
|
|
13374
13433
|
transform var(--duration-fast) var(--timing-ease-out);
|
|
13375
13434
|
}
|
|
13376
13435
|
`;
|
|
13377
|
-
var actionBarVisibilityHiddenStyles =
|
|
13436
|
+
var actionBarVisibilityHiddenStyles = css98`
|
|
13378
13437
|
opacity: 0;
|
|
13379
13438
|
transform: translateX(1rem);
|
|
13380
13439
|
transition:
|
|
13381
13440
|
opacity var(--duration-fast) var(--timing-ease-out),
|
|
13382
13441
|
transform var(--duration-fast) var(--timing-ease-out);
|
|
13383
13442
|
`;
|
|
13384
|
-
var inputContainer2 =
|
|
13443
|
+
var inputContainer2 = css98`
|
|
13385
13444
|
position: relative;
|
|
13386
13445
|
scroll-margin: var(--spacing-2xl);
|
|
13387
13446
|
|
|
@@ -13395,14 +13454,14 @@ var inputContainer2 = css97`
|
|
|
13395
13454
|
${actionBarVisibilityStyles}
|
|
13396
13455
|
}
|
|
13397
13456
|
`;
|
|
13398
|
-
var labelText2 =
|
|
13457
|
+
var labelText2 = css98`
|
|
13399
13458
|
align-items: center;
|
|
13400
13459
|
display: flex;
|
|
13401
13460
|
gap: var(--spacing-xs);
|
|
13402
13461
|
font-weight: var(--fw-regular);
|
|
13403
13462
|
margin: 0 0 var(--spacing-xs);
|
|
13404
13463
|
`;
|
|
13405
|
-
var input3 =
|
|
13464
|
+
var input3 = css98`
|
|
13406
13465
|
display: block;
|
|
13407
13466
|
appearance: none;
|
|
13408
13467
|
box-sizing: border-box;
|
|
@@ -13455,18 +13514,18 @@ var input3 = css97`
|
|
|
13455
13514
|
opacity: var(--opacity-50);
|
|
13456
13515
|
}
|
|
13457
13516
|
`;
|
|
13458
|
-
var selectInput =
|
|
13517
|
+
var selectInput = css98`
|
|
13459
13518
|
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");
|
|
13460
13519
|
background-position: right var(--spacing-sm) center;
|
|
13461
13520
|
background-repeat: no-repeat;
|
|
13462
13521
|
background-size: 1rem;
|
|
13463
13522
|
padding-right: var(--spacing-xl);
|
|
13464
13523
|
`;
|
|
13465
|
-
var inputWrapper =
|
|
13524
|
+
var inputWrapper = css98`
|
|
13466
13525
|
display: flex; // used to correct overflow with chrome textarea
|
|
13467
13526
|
position: relative;
|
|
13468
13527
|
`;
|
|
13469
|
-
var inputIcon2 =
|
|
13528
|
+
var inputIcon2 = css98`
|
|
13470
13529
|
align-items: center;
|
|
13471
13530
|
background: var(--white);
|
|
13472
13531
|
border-radius: var(--rounded-md) 0 0 var(--rounded-md);
|
|
@@ -13482,7 +13541,7 @@ var inputIcon2 = css97`
|
|
|
13482
13541
|
width: var(--spacing-lg);
|
|
13483
13542
|
z-index: var(--z-10);
|
|
13484
13543
|
`;
|
|
13485
|
-
var inputToggleLabel2 =
|
|
13544
|
+
var inputToggleLabel2 = css98`
|
|
13486
13545
|
--inline-label-color: var(--typography-base);
|
|
13487
13546
|
align-items: center;
|
|
13488
13547
|
cursor: pointer;
|
|
@@ -13497,7 +13556,7 @@ var inputToggleLabel2 = css97`
|
|
|
13497
13556
|
--inline-label-color: var(--gray-400);
|
|
13498
13557
|
}
|
|
13499
13558
|
`;
|
|
13500
|
-
var toggleInput2 =
|
|
13559
|
+
var toggleInput2 = css98`
|
|
13501
13560
|
appearance: none;
|
|
13502
13561
|
border: 1px solid var(--gray-200);
|
|
13503
13562
|
background: var(--white);
|
|
@@ -13541,7 +13600,7 @@ var toggleInput2 = css97`
|
|
|
13541
13600
|
border-color: var(--gray-200);
|
|
13542
13601
|
}
|
|
13543
13602
|
`;
|
|
13544
|
-
var toggleInputIndeterminateState =
|
|
13603
|
+
var toggleInputIndeterminateState = css98`
|
|
13545
13604
|
&:indeterminate,
|
|
13546
13605
|
&:indeterminate:hover,
|
|
13547
13606
|
&:indeterminate:focus {
|
|
@@ -13552,7 +13611,7 @@ var toggleInputIndeterminateState = css97`
|
|
|
13552
13611
|
color: var(--accent-dark-active);
|
|
13553
13612
|
}
|
|
13554
13613
|
`;
|
|
13555
|
-
var inlineLabel2 =
|
|
13614
|
+
var inlineLabel2 = css98`
|
|
13556
13615
|
color: var(--inline-label-color);
|
|
13557
13616
|
padding-left: var(--spacing-md);
|
|
13558
13617
|
font-size: var(--fs-sm);
|
|
@@ -13569,7 +13628,7 @@ var inlineLabel2 = css97`
|
|
|
13569
13628
|
}
|
|
13570
13629
|
}
|
|
13571
13630
|
`;
|
|
13572
|
-
var inputMenu =
|
|
13631
|
+
var inputMenu = css98`
|
|
13573
13632
|
background: none;
|
|
13574
13633
|
border: none;
|
|
13575
13634
|
padding: var(--spacing-2xs);
|
|
@@ -13583,12 +13642,12 @@ var inputMenu = css97`
|
|
|
13583
13642
|
cursor: default;
|
|
13584
13643
|
}
|
|
13585
13644
|
`;
|
|
13586
|
-
var inputActionItems =
|
|
13645
|
+
var inputActionItems = css98`
|
|
13587
13646
|
display: flex;
|
|
13588
13647
|
z-index: var(--z-1);
|
|
13589
13648
|
${actionBarVisibilityHiddenStyles}
|
|
13590
13649
|
`;
|
|
13591
|
-
var inputMenuHover =
|
|
13650
|
+
var inputMenuHover = css98`
|
|
13592
13651
|
opacity: var(--opacity-50);
|
|
13593
13652
|
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
13594
13653
|
margin-top: 0.25rem;
|
|
@@ -13600,11 +13659,11 @@ var inputMenuHover = css97`
|
|
|
13600
13659
|
background-color: var(--gray-200);
|
|
13601
13660
|
}
|
|
13602
13661
|
`;
|
|
13603
|
-
var textarea2 =
|
|
13662
|
+
var textarea2 = css98`
|
|
13604
13663
|
resize: vertical;
|
|
13605
13664
|
min-height: 2rem;
|
|
13606
13665
|
`;
|
|
13607
|
-
var dataConnectButton =
|
|
13666
|
+
var dataConnectButton = css98`
|
|
13608
13667
|
align-items: center;
|
|
13609
13668
|
appearance: none;
|
|
13610
13669
|
box-sizing: border-box;
|
|
@@ -13640,7 +13699,7 @@ var dataConnectButton = css97`
|
|
|
13640
13699
|
pointer-events: none;
|
|
13641
13700
|
}
|
|
13642
13701
|
`;
|
|
13643
|
-
var linkParameterEmptyContainer =
|
|
13702
|
+
var linkParameterEmptyContainer = css98`
|
|
13644
13703
|
box-sizing: border-box;
|
|
13645
13704
|
background: var(--white);
|
|
13646
13705
|
border: 1px solid var(--gray-200);
|
|
@@ -13652,7 +13711,7 @@ var linkParameterEmptyContainer = css97`
|
|
|
13652
13711
|
min-height: 2rem;
|
|
13653
13712
|
width: 100%;
|
|
13654
13713
|
`;
|
|
13655
|
-
var linkParameterControls =
|
|
13714
|
+
var linkParameterControls = css98`
|
|
13656
13715
|
position: absolute;
|
|
13657
13716
|
inset: 0 0 0 auto;
|
|
13658
13717
|
padding: 0 var(--spacing-base);
|
|
@@ -13661,7 +13720,7 @@ var linkParameterControls = css97`
|
|
|
13661
13720
|
justify-content: center;
|
|
13662
13721
|
gap: var(--spacing-base);
|
|
13663
13722
|
`;
|
|
13664
|
-
var linkParameterInput = (withExternalLinkIcon) =>
|
|
13723
|
+
var linkParameterInput = (withExternalLinkIcon) => css98`
|
|
13665
13724
|
padding-right: calc(
|
|
13666
13725
|
${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
|
|
13667
13726
|
var(--spacing-base)
|
|
@@ -13674,7 +13733,7 @@ var linkParameterInput = (withExternalLinkIcon) => css97`
|
|
|
13674
13733
|
}
|
|
13675
13734
|
}
|
|
13676
13735
|
`;
|
|
13677
|
-
var linkParameterIcon =
|
|
13736
|
+
var linkParameterIcon = css98`
|
|
13678
13737
|
align-items: center;
|
|
13679
13738
|
color: var(--primary-action-default);
|
|
13680
13739
|
display: flex;
|
|
@@ -13693,30 +13752,31 @@ var linkParameterIcon = css97`
|
|
|
13693
13752
|
`;
|
|
13694
13753
|
|
|
13695
13754
|
// src/components/ParameterInputs/ParameterLabel.tsx
|
|
13696
|
-
import { jsx as
|
|
13755
|
+
import { jsx as jsx128 } from "@emotion/react/jsx-runtime";
|
|
13697
13756
|
var ParameterLabel = ({ id, asSpan, children, testId, ...props }) => {
|
|
13698
|
-
return !asSpan ? /* @__PURE__ */
|
|
13757
|
+
return !asSpan ? /* @__PURE__ */ jsx128("label", { ...props, htmlFor: id, css: labelText2, "data-testid": testId, children }) : /* @__PURE__ */ jsx128("span", { "aria-labelledby": id, css: labelText2, children });
|
|
13699
13758
|
};
|
|
13700
13759
|
|
|
13701
13760
|
// src/components/ParameterInputs/ParameterMenuButton.tsx
|
|
13702
13761
|
import { forwardRef as forwardRef22 } from "react";
|
|
13703
|
-
import { jsx as
|
|
13762
|
+
import { jsx as jsx129 } from "@emotion/react/jsx-runtime";
|
|
13704
13763
|
var ParameterMenuButton = forwardRef22(
|
|
13705
13764
|
({ label: label2, children, disabled: disabled2, withoutPortal }, ref) => {
|
|
13706
|
-
return /* @__PURE__ */
|
|
13765
|
+
return /* @__PURE__ */ jsx129(
|
|
13707
13766
|
Menu,
|
|
13708
13767
|
{
|
|
13709
|
-
menuTrigger: /* @__PURE__ */
|
|
13768
|
+
menuTrigger: /* @__PURE__ */ jsx129(
|
|
13710
13769
|
"button",
|
|
13711
13770
|
{
|
|
13712
13771
|
"data-action-bar": true,
|
|
13772
|
+
"data-testid": "parameter-menu-button",
|
|
13713
13773
|
className: "parameter-menu",
|
|
13714
13774
|
css: [inputMenu, inputMenuHover],
|
|
13715
13775
|
type: "button",
|
|
13716
13776
|
"aria-label": `${label2} options`,
|
|
13717
13777
|
ref,
|
|
13718
13778
|
disabled: disabled2,
|
|
13719
|
-
children: /* @__PURE__ */
|
|
13779
|
+
children: /* @__PURE__ */ jsx129(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
|
|
13720
13780
|
}
|
|
13721
13781
|
),
|
|
13722
13782
|
withoutPortal,
|
|
@@ -13727,14 +13787,14 @@ var ParameterMenuButton = forwardRef22(
|
|
|
13727
13787
|
);
|
|
13728
13788
|
|
|
13729
13789
|
// src/components/ParameterInputs/styles/ParameterShell.styles.ts
|
|
13730
|
-
import { css as
|
|
13731
|
-
var emptyParameterShell =
|
|
13790
|
+
import { css as css99 } from "@emotion/react";
|
|
13791
|
+
var emptyParameterShell = css99`
|
|
13732
13792
|
border-radius: var(--rounded-sm);
|
|
13733
13793
|
flex-grow: 1;
|
|
13734
13794
|
position: relative;
|
|
13735
13795
|
max-width: 100%;
|
|
13736
13796
|
`;
|
|
13737
|
-
var emptyParameterShellText =
|
|
13797
|
+
var emptyParameterShellText = css99`
|
|
13738
13798
|
background: var(--brand-secondary-6);
|
|
13739
13799
|
border-radius: var(--rounded-sm);
|
|
13740
13800
|
padding: var(--spacing-sm);
|
|
@@ -13742,7 +13802,7 @@ var emptyParameterShellText = css98`
|
|
|
13742
13802
|
font-size: var(--fs-sm);
|
|
13743
13803
|
margin: 0;
|
|
13744
13804
|
`;
|
|
13745
|
-
var overrideMarker =
|
|
13805
|
+
var overrideMarker = css99`
|
|
13746
13806
|
border-radius: var(--rounded-sm);
|
|
13747
13807
|
border: 10px solid var(--gray-300);
|
|
13748
13808
|
border-left-color: transparent;
|
|
@@ -13753,7 +13813,7 @@ var overrideMarker = css98`
|
|
|
13753
13813
|
`;
|
|
13754
13814
|
|
|
13755
13815
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
13756
|
-
import { jsx as
|
|
13816
|
+
import { jsx as jsx130, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
|
|
13757
13817
|
var extractParameterProps = (props) => {
|
|
13758
13818
|
const {
|
|
13759
13819
|
id,
|
|
@@ -13817,33 +13877,33 @@ var ParameterShell = ({
|
|
|
13817
13877
|
const [manualErrorMessage, setManualErrorMessage] = useState20(void 0);
|
|
13818
13878
|
const setErrorMessage = (message) => setManualErrorMessage(message);
|
|
13819
13879
|
const errorMessaging = errorMessage || manualErrorMessage;
|
|
13820
|
-
return /* @__PURE__ */
|
|
13821
|
-
hiddenLabel || title ? null : /* @__PURE__ */
|
|
13880
|
+
return /* @__PURE__ */ jsxs87("div", { css: inputContainer2, ...props, id, children: [
|
|
13881
|
+
hiddenLabel || title ? null : /* @__PURE__ */ jsxs87(ParameterLabel, { id, css: labelText2, children: [
|
|
13822
13882
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
13823
13883
|
label2,
|
|
13824
13884
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
13825
13885
|
] }),
|
|
13826
|
-
!title ? null : /* @__PURE__ */
|
|
13886
|
+
!title ? null : /* @__PURE__ */ jsxs87(ParameterLabel, { id, asSpan: true, testId: "parameter-label", children: [
|
|
13827
13887
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
13828
13888
|
title,
|
|
13829
13889
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
13830
13890
|
] }),
|
|
13831
|
-
/* @__PURE__ */
|
|
13832
|
-
actionItems ? /* @__PURE__ */
|
|
13891
|
+
/* @__PURE__ */ jsxs87("div", { css: inputWrapper, children: [
|
|
13892
|
+
actionItems ? /* @__PURE__ */ jsx130(
|
|
13833
13893
|
"div",
|
|
13834
13894
|
{
|
|
13835
13895
|
"data-action-bar": true,
|
|
13836
13896
|
css: [
|
|
13837
13897
|
inputMenu,
|
|
13838
13898
|
inputActionItems,
|
|
13839
|
-
menuItems ?
|
|
13899
|
+
menuItems ? css100`
|
|
13840
13900
|
right: var(--spacing-md);
|
|
13841
13901
|
` : void 0
|
|
13842
13902
|
],
|
|
13843
13903
|
children: actionItems
|
|
13844
13904
|
}
|
|
13845
13905
|
) : null,
|
|
13846
|
-
menuItems ? /* @__PURE__ */
|
|
13906
|
+
menuItems ? /* @__PURE__ */ jsx130(
|
|
13847
13907
|
ParameterMenuButton,
|
|
13848
13908
|
{
|
|
13849
13909
|
label: `${label2} menu`,
|
|
@@ -13852,7 +13912,7 @@ var ParameterShell = ({
|
|
|
13852
13912
|
children: menuItems
|
|
13853
13913
|
}
|
|
13854
13914
|
) : null,
|
|
13855
|
-
/* @__PURE__ */
|
|
13915
|
+
/* @__PURE__ */ jsx130(
|
|
13856
13916
|
ParameterShellContext.Provider,
|
|
13857
13917
|
{
|
|
13858
13918
|
value: {
|
|
@@ -13862,9 +13922,9 @@ var ParameterShell = ({
|
|
|
13862
13922
|
errorMessage: errorMessaging,
|
|
13863
13923
|
handleManuallySetErrorMessage: (message) => setErrorMessage(message)
|
|
13864
13924
|
},
|
|
13865
|
-
children: isParameterGroup ? /* @__PURE__ */
|
|
13925
|
+
children: isParameterGroup ? /* @__PURE__ */ jsx130("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ jsxs87(ParameterShellPlaceholder, { children: [
|
|
13866
13926
|
children,
|
|
13867
|
-
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */
|
|
13927
|
+
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx130(
|
|
13868
13928
|
ParameterOverrideMarker,
|
|
13869
13929
|
{
|
|
13870
13930
|
onClick: onResetOverriddenValue,
|
|
@@ -13875,7 +13935,7 @@ var ParameterShell = ({
|
|
|
13875
13935
|
}
|
|
13876
13936
|
)
|
|
13877
13937
|
] }),
|
|
13878
|
-
/* @__PURE__ */
|
|
13938
|
+
/* @__PURE__ */ jsx130(
|
|
13879
13939
|
FieldMessage,
|
|
13880
13940
|
{
|
|
13881
13941
|
helperMessageTestId: captionTestId,
|
|
@@ -13889,17 +13949,17 @@ var ParameterShell = ({
|
|
|
13889
13949
|
] });
|
|
13890
13950
|
};
|
|
13891
13951
|
var ParameterShellPlaceholder = ({ children }) => {
|
|
13892
|
-
return /* @__PURE__ */
|
|
13952
|
+
return /* @__PURE__ */ jsx130("div", { css: emptyParameterShell, children });
|
|
13893
13953
|
};
|
|
13894
|
-
var ParameterOverrideMarker = (props) => /* @__PURE__ */
|
|
13954
|
+
var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx130(Tooltip, { title: "The default value has been overridden", ...props.tooltipProps, children: /* @__PURE__ */ jsx130("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx130("span", { hidden: true, children: "reset overridden value to default" }) }) });
|
|
13895
13955
|
|
|
13896
13956
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
13897
|
-
import { Fragment as Fragment14, jsx as
|
|
13957
|
+
import { Fragment as Fragment14, jsx as jsx131, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
|
|
13898
13958
|
var ParameterImage = forwardRef23(
|
|
13899
13959
|
({ children, ...props }, ref) => {
|
|
13900
13960
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
13901
|
-
return /* @__PURE__ */
|
|
13902
|
-
/* @__PURE__ */
|
|
13961
|
+
return /* @__PURE__ */ jsxs88(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
|
|
13962
|
+
/* @__PURE__ */ jsx131(ParameterImageInner, { ref, ...innerProps }),
|
|
13903
13963
|
children
|
|
13904
13964
|
] });
|
|
13905
13965
|
}
|
|
@@ -13908,8 +13968,8 @@ var ParameterImageInner = forwardRef23((props, ref) => {
|
|
|
13908
13968
|
const { value } = props;
|
|
13909
13969
|
const { id, label: label2, hiddenLabel, errorMessage } = useParameterShell();
|
|
13910
13970
|
const deferredValue = useDeferredValue(value);
|
|
13911
|
-
return /* @__PURE__ */
|
|
13912
|
-
/* @__PURE__ */
|
|
13971
|
+
return /* @__PURE__ */ jsxs88(Fragment14, { children: [
|
|
13972
|
+
/* @__PURE__ */ jsx131(
|
|
13913
13973
|
"input",
|
|
13914
13974
|
{
|
|
13915
13975
|
css: input3,
|
|
@@ -13921,21 +13981,21 @@ var ParameterImageInner = forwardRef23((props, ref) => {
|
|
|
13921
13981
|
...props
|
|
13922
13982
|
}
|
|
13923
13983
|
),
|
|
13924
|
-
errorMessage || props.disablePreview ? null : /* @__PURE__ */
|
|
13984
|
+
errorMessage || props.disablePreview ? null : /* @__PURE__ */ jsx131(ParameterImagePreview, { imageSrc: deferredValue })
|
|
13925
13985
|
] });
|
|
13926
13986
|
});
|
|
13927
13987
|
|
|
13928
13988
|
// src/components/ParameterInputs/ParameterInput.tsx
|
|
13929
13989
|
import { forwardRef as forwardRef24 } from "react";
|
|
13930
|
-
import { jsx as
|
|
13990
|
+
import { jsx as jsx132 } from "@emotion/react/jsx-runtime";
|
|
13931
13991
|
var ParameterInput = forwardRef24((props, ref) => {
|
|
13932
13992
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
13933
|
-
return /* @__PURE__ */
|
|
13993
|
+
return /* @__PURE__ */ jsx132(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx132(ParameterInputInner, { ref, ...innerProps }) });
|
|
13934
13994
|
});
|
|
13935
13995
|
var ParameterInputInner = forwardRef24(({ enableMouseWheel = false, ...props }, ref) => {
|
|
13936
13996
|
const { id, label: label2, hiddenLabel } = useParameterShell();
|
|
13937
13997
|
const isNumberInputAndMouseWheelDisabled = enableMouseWheel !== true && props.type === "number";
|
|
13938
|
-
return /* @__PURE__ */
|
|
13998
|
+
return /* @__PURE__ */ jsx132(
|
|
13939
13999
|
"input",
|
|
13940
14000
|
{
|
|
13941
14001
|
css: input3,
|
|
@@ -13952,10 +14012,10 @@ var ParameterInputInner = forwardRef24(({ enableMouseWheel = false, ...props },
|
|
|
13952
14012
|
|
|
13953
14013
|
// src/components/ParameterInputs/ParameterLabels.tsx
|
|
13954
14014
|
import { useMemo as useMemo7, useRef as useRef12 } from "react";
|
|
13955
|
-
import { jsx as
|
|
14015
|
+
import { jsx as jsx133 } from "@emotion/react/jsx-runtime";
|
|
13956
14016
|
var ParameterLabels = ({ disabled: disabled2 = false, ...props }) => {
|
|
13957
14017
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
13958
|
-
return /* @__PURE__ */
|
|
14018
|
+
return /* @__PURE__ */ jsx133(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx133(ParameterLabelsInner, { isDisabled: disabled2, ...innerProps }) });
|
|
13959
14019
|
};
|
|
13960
14020
|
function convertOptionsToItems(options) {
|
|
13961
14021
|
var _a, _b;
|
|
@@ -14057,7 +14117,7 @@ var ParameterLabelsInner = (props) => {
|
|
|
14057
14117
|
removedValue: removedOption
|
|
14058
14118
|
});
|
|
14059
14119
|
};
|
|
14060
|
-
return /* @__PURE__ */
|
|
14120
|
+
return /* @__PURE__ */ jsx133(
|
|
14061
14121
|
"div",
|
|
14062
14122
|
{
|
|
14063
14123
|
ref: containerRef,
|
|
@@ -14066,7 +14126,7 @@ var ParameterLabelsInner = (props) => {
|
|
|
14066
14126
|
// this prevents the quick filter from triggering the responsive styles
|
|
14067
14127
|
containerType: "inline-size"
|
|
14068
14128
|
},
|
|
14069
|
-
children: /* @__PURE__ */
|
|
14129
|
+
children: /* @__PURE__ */ jsx133(
|
|
14070
14130
|
LabelsQuickFilter,
|
|
14071
14131
|
{
|
|
14072
14132
|
testId: "parameter-labels-quick-filter",
|
|
@@ -14115,18 +14175,18 @@ var ParameterLabelsInner = (props) => {
|
|
|
14115
14175
|
|
|
14116
14176
|
// src/components/ParameterInputs/ParameterLink.tsx
|
|
14117
14177
|
import { forwardRef as forwardRef25 } from "react";
|
|
14118
|
-
import { jsx as
|
|
14178
|
+
import { jsx as jsx134, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
|
|
14119
14179
|
var ParameterLink = forwardRef25(
|
|
14120
14180
|
({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
|
|
14121
14181
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
14122
|
-
return /* @__PURE__ */
|
|
14182
|
+
return /* @__PURE__ */ jsx134(
|
|
14123
14183
|
ParameterShell,
|
|
14124
14184
|
{
|
|
14125
14185
|
"data-testid": "link-parameter-editor",
|
|
14126
14186
|
...shellProps,
|
|
14127
14187
|
label: innerProps.value ? shellProps.label : "",
|
|
14128
14188
|
title: !innerProps.value && typeof shellProps.label === "string" ? shellProps.label : void 0,
|
|
14129
|
-
children: /* @__PURE__ */
|
|
14189
|
+
children: /* @__PURE__ */ jsx134(
|
|
14130
14190
|
ParameterLinkInner,
|
|
14131
14191
|
{
|
|
14132
14192
|
onConnectLink,
|
|
@@ -14144,9 +14204,9 @@ var ParameterLinkInner = forwardRef25(
|
|
|
14144
14204
|
({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
|
|
14145
14205
|
const { id, label: label2, hiddenLabel } = useParameterShell();
|
|
14146
14206
|
if (!props.value)
|
|
14147
|
-
return /* @__PURE__ */
|
|
14148
|
-
return /* @__PURE__ */
|
|
14149
|
-
/* @__PURE__ */
|
|
14207
|
+
return /* @__PURE__ */ jsx134("div", { css: linkParameterEmptyContainer, children: /* @__PURE__ */ jsx134(Button, { buttonType: "ghost", size: "sm", disabled: disabled2, onClick: onConnectLink, children: buttonText }) });
|
|
14208
|
+
return /* @__PURE__ */ jsxs89("div", { css: inputWrapper, children: [
|
|
14209
|
+
/* @__PURE__ */ jsx134(
|
|
14150
14210
|
"input",
|
|
14151
14211
|
{
|
|
14152
14212
|
type: "text",
|
|
@@ -14158,8 +14218,8 @@ var ParameterLinkInner = forwardRef25(
|
|
|
14158
14218
|
...props
|
|
14159
14219
|
}
|
|
14160
14220
|
),
|
|
14161
|
-
/* @__PURE__ */
|
|
14162
|
-
/* @__PURE__ */
|
|
14221
|
+
/* @__PURE__ */ jsxs89("div", { css: linkParameterControls, children: [
|
|
14222
|
+
/* @__PURE__ */ jsx134(
|
|
14163
14223
|
Button,
|
|
14164
14224
|
{
|
|
14165
14225
|
buttonType: "ghost",
|
|
@@ -14171,7 +14231,7 @@ var ParameterLinkInner = forwardRef25(
|
|
|
14171
14231
|
children: "edit"
|
|
14172
14232
|
}
|
|
14173
14233
|
),
|
|
14174
|
-
externalLink ? /* @__PURE__ */
|
|
14234
|
+
externalLink ? /* @__PURE__ */ jsx134(
|
|
14175
14235
|
"a",
|
|
14176
14236
|
{
|
|
14177
14237
|
href: externalLink,
|
|
@@ -14179,7 +14239,7 @@ var ParameterLinkInner = forwardRef25(
|
|
|
14179
14239
|
title: "Open link in new tab",
|
|
14180
14240
|
target: "_blank",
|
|
14181
14241
|
rel: "noopener noreferrer",
|
|
14182
|
-
children: /* @__PURE__ */
|
|
14242
|
+
children: /* @__PURE__ */ jsx134(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
|
|
14183
14243
|
}
|
|
14184
14244
|
) : null
|
|
14185
14245
|
] })
|
|
@@ -14188,15 +14248,15 @@ var ParameterLinkInner = forwardRef25(
|
|
|
14188
14248
|
);
|
|
14189
14249
|
|
|
14190
14250
|
// src/components/ParameterInputs/ParameterMultiSelect.tsx
|
|
14191
|
-
import { jsx as
|
|
14251
|
+
import { jsx as jsx135 } from "@emotion/react/jsx-runtime";
|
|
14192
14252
|
var ParameterMultiSelect = ({ disabled: disabled2 = false, ...props }) => {
|
|
14193
14253
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
14194
|
-
return /* @__PURE__ */
|
|
14254
|
+
return /* @__PURE__ */ jsx135(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx135(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
|
|
14195
14255
|
};
|
|
14196
14256
|
var ParameterMultiSelectInner = (props) => {
|
|
14197
14257
|
var _a;
|
|
14198
14258
|
const { id, label: label2 } = useParameterShell();
|
|
14199
|
-
return /* @__PURE__ */
|
|
14259
|
+
return /* @__PURE__ */ jsx135(
|
|
14200
14260
|
InputComboBox,
|
|
14201
14261
|
{
|
|
14202
14262
|
menuPortalTarget: document.body,
|
|
@@ -14246,7 +14306,7 @@ var ParameterMultiSelectInner = (props) => {
|
|
|
14246
14306
|
};
|
|
14247
14307
|
|
|
14248
14308
|
// src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
|
|
14249
|
-
import { Fragment as Fragment15, jsx as
|
|
14309
|
+
import { Fragment as Fragment15, jsx as jsx136, jsxs as jsxs90 } from "@emotion/react/jsx-runtime";
|
|
14250
14310
|
var ParameterNameAndPublicIdInput = ({
|
|
14251
14311
|
id,
|
|
14252
14312
|
onBlur,
|
|
@@ -14272,8 +14332,8 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
14272
14332
|
navigator.clipboard.writeText(values[publicIdFieldName]);
|
|
14273
14333
|
};
|
|
14274
14334
|
autoFocus == null ? void 0 : autoFocus();
|
|
14275
|
-
return /* @__PURE__ */
|
|
14276
|
-
/* @__PURE__ */
|
|
14335
|
+
return /* @__PURE__ */ jsxs90(Fragment15, { children: [
|
|
14336
|
+
/* @__PURE__ */ jsx136(
|
|
14277
14337
|
ParameterInput,
|
|
14278
14338
|
{
|
|
14279
14339
|
id: nameIdField,
|
|
@@ -14292,7 +14352,7 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
14292
14352
|
value: values[nameIdField]
|
|
14293
14353
|
}
|
|
14294
14354
|
),
|
|
14295
|
-
/* @__PURE__ */
|
|
14355
|
+
/* @__PURE__ */ jsx136(
|
|
14296
14356
|
ParameterInput,
|
|
14297
14357
|
{
|
|
14298
14358
|
id: publicIdFieldName,
|
|
@@ -14306,11 +14366,11 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
14306
14366
|
caption: !publicIdError ? publicIdCaption : void 0,
|
|
14307
14367
|
placeholder: publicIdPlaceholderText,
|
|
14308
14368
|
errorMessage: publicIdError,
|
|
14309
|
-
menuItems: /* @__PURE__ */
|
|
14369
|
+
menuItems: /* @__PURE__ */ jsx136(
|
|
14310
14370
|
MenuItem,
|
|
14311
14371
|
{
|
|
14312
14372
|
disabled: !values[publicIdFieldName],
|
|
14313
|
-
icon: /* @__PURE__ */
|
|
14373
|
+
icon: /* @__PURE__ */ jsx136(Icon, { icon: "path-trim", iconColor: "currentColor" }),
|
|
14314
14374
|
onClick: handleCopyPidFieldValue,
|
|
14315
14375
|
children: "Copy"
|
|
14316
14376
|
}
|
|
@@ -14318,7 +14378,7 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
14318
14378
|
value: values[publicIdFieldName]
|
|
14319
14379
|
}
|
|
14320
14380
|
),
|
|
14321
|
-
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */
|
|
14381
|
+
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx136(Callout, { type: "caution", children: warnOverLength.message }) : null
|
|
14322
14382
|
] });
|
|
14323
14383
|
};
|
|
14324
14384
|
|
|
@@ -14332,9 +14392,9 @@ import { forwardRef as forwardRef26, useCallback as useCallback10, useMemo as us
|
|
|
14332
14392
|
import { useEffect as useEffect18, useRef as useRef13, useState as useState21 } from "react";
|
|
14333
14393
|
|
|
14334
14394
|
// src/components/Slider/styles/Slider.styles.ts
|
|
14335
|
-
import { css as
|
|
14395
|
+
import { css as css101 } from "@emotion/react";
|
|
14336
14396
|
var thumbSize = "20px";
|
|
14337
|
-
var disabledThumbStyles =
|
|
14397
|
+
var disabledThumbStyles = css101`
|
|
14338
14398
|
background: var(--white);
|
|
14339
14399
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cline x1='4' y1='9' x2='16' y2='9' stroke='%236b7280' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
14340
14400
|
background-repeat: no-repeat;
|
|
@@ -14342,22 +14402,22 @@ var disabledThumbStyles = css100`
|
|
|
14342
14402
|
background-size: 12px 12px;
|
|
14343
14403
|
border: 1px solid var(--gray-500);
|
|
14344
14404
|
`;
|
|
14345
|
-
var container3 =
|
|
14405
|
+
var container3 = css101`
|
|
14346
14406
|
display: flex;
|
|
14347
14407
|
align-items: flex-start;
|
|
14348
14408
|
gap: var(--spacing-base);
|
|
14349
14409
|
width: 100%;
|
|
14350
14410
|
`;
|
|
14351
|
-
var sliderContainer =
|
|
14411
|
+
var sliderContainer = css101`
|
|
14352
14412
|
flex: 1;
|
|
14353
14413
|
display: flex;
|
|
14354
14414
|
flex-direction: column;
|
|
14355
14415
|
`;
|
|
14356
|
-
var sliderTrackContainer =
|
|
14416
|
+
var sliderTrackContainer = css101`
|
|
14357
14417
|
position: relative;
|
|
14358
14418
|
padding: var(--spacing-xs) 0;
|
|
14359
14419
|
`;
|
|
14360
|
-
var progressTrack =
|
|
14420
|
+
var progressTrack = css101`
|
|
14361
14421
|
position: absolute;
|
|
14362
14422
|
top: 50%;
|
|
14363
14423
|
left: 0;
|
|
@@ -14367,7 +14427,7 @@ var progressTrack = css100`
|
|
|
14367
14427
|
margin-top: -3px;
|
|
14368
14428
|
border-radius: var(--rounded-sm);
|
|
14369
14429
|
`;
|
|
14370
|
-
var progressTrackBackground =
|
|
14430
|
+
var progressTrackBackground = css101`
|
|
14371
14431
|
position: absolute;
|
|
14372
14432
|
top: 0;
|
|
14373
14433
|
left: 0;
|
|
@@ -14377,7 +14437,7 @@ var progressTrackBackground = css100`
|
|
|
14377
14437
|
border: 1px solid var(--gray-200);
|
|
14378
14438
|
border-radius: var(--rounded-sm);
|
|
14379
14439
|
`;
|
|
14380
|
-
var progressTrackFill =
|
|
14440
|
+
var progressTrackFill = css101`
|
|
14381
14441
|
position: absolute;
|
|
14382
14442
|
top: 0;
|
|
14383
14443
|
left: 0;
|
|
@@ -14385,19 +14445,19 @@ var progressTrackFill = css100`
|
|
|
14385
14445
|
background: var(--accent-light);
|
|
14386
14446
|
border-radius: var(--rounded-sm);
|
|
14387
14447
|
`;
|
|
14388
|
-
var tickMarksContainer =
|
|
14448
|
+
var tickMarksContainer = css101`
|
|
14389
14449
|
position: relative;
|
|
14390
14450
|
height: 1rem;
|
|
14391
14451
|
margin-top: calc(-1 * var(--spacing-base) + var(--spacing-xs));
|
|
14392
14452
|
`;
|
|
14393
|
-
var tickMark =
|
|
14453
|
+
var tickMark = css101`
|
|
14394
14454
|
position: absolute;
|
|
14395
14455
|
top: 0;
|
|
14396
14456
|
width: 0.5px;
|
|
14397
14457
|
height: 8px;
|
|
14398
14458
|
background-color: var(--gray-300);
|
|
14399
14459
|
`;
|
|
14400
|
-
var largeTickMark =
|
|
14460
|
+
var largeTickMark = css101`
|
|
14401
14461
|
position: absolute;
|
|
14402
14462
|
top: 0;
|
|
14403
14463
|
width: 1px;
|
|
@@ -14405,7 +14465,7 @@ var largeTickMark = css100`
|
|
|
14405
14465
|
background-color: var(--gray-400);
|
|
14406
14466
|
transform: translateX(-50%);
|
|
14407
14467
|
`;
|
|
14408
|
-
var slider =
|
|
14468
|
+
var slider = css101`
|
|
14409
14469
|
appearance: none;
|
|
14410
14470
|
width: 100%;
|
|
14411
14471
|
width: calc(100% + ${thumbSize});
|
|
@@ -14522,12 +14582,12 @@ var slider = css100`
|
|
|
14522
14582
|
0 0 0 3px var(--accent-light);
|
|
14523
14583
|
}
|
|
14524
14584
|
`;
|
|
14525
|
-
var labelsContainer =
|
|
14585
|
+
var labelsContainer = css101`
|
|
14526
14586
|
position: relative;
|
|
14527
14587
|
height: 1.5rem;
|
|
14528
14588
|
width: 100%;
|
|
14529
14589
|
`;
|
|
14530
|
-
var label =
|
|
14590
|
+
var label = css101`
|
|
14531
14591
|
position: absolute;
|
|
14532
14592
|
top: 0;
|
|
14533
14593
|
font-size: var(--text-sm);
|
|
@@ -14571,12 +14631,12 @@ var label = css100`
|
|
|
14571
14631
|
max-width: 100%;
|
|
14572
14632
|
}
|
|
14573
14633
|
`;
|
|
14574
|
-
var numberInputContainer =
|
|
14634
|
+
var numberInputContainer = css101`
|
|
14575
14635
|
flex-shrink: 0;
|
|
14576
14636
|
min-width: 2rem;
|
|
14577
14637
|
margin-top: var(--spacing-sm);
|
|
14578
14638
|
`;
|
|
14579
|
-
var numberInput2 =
|
|
14639
|
+
var numberInput2 = css101`
|
|
14580
14640
|
appearance: none;
|
|
14581
14641
|
background-color: var(--white);
|
|
14582
14642
|
border: 1px solid var(--gray-200);
|
|
@@ -14627,7 +14687,7 @@ var numberInput2 = css100`
|
|
|
14627
14687
|
`;
|
|
14628
14688
|
|
|
14629
14689
|
// src/components/Slider/SliderLabels.tsx
|
|
14630
|
-
import { jsx as
|
|
14690
|
+
import { jsx as jsx137 } from "@emotion/react/jsx-runtime";
|
|
14631
14691
|
function estimateLabelWidth(text) {
|
|
14632
14692
|
const fontSize = 14;
|
|
14633
14693
|
const avgCharWidthRatio = 0.7;
|
|
@@ -14770,10 +14830,10 @@ function SliderLabels({ ticks, currentValue, containerWidth = 300 }) {
|
|
|
14770
14830
|
}, []);
|
|
14771
14831
|
const labelVisibilities = calculateLabelVisibility(ticks, currentValue, measuredWidth);
|
|
14772
14832
|
const visibilityMap = new Map(labelVisibilities.map((lv) => [lv.tickIndex, lv.isVisible]));
|
|
14773
|
-
return /* @__PURE__ */
|
|
14833
|
+
return /* @__PURE__ */ jsx137("div", { ref: containerRef, css: labelsContainer, children: ticks.map((tick, index) => ({ tick, index })).filter(({ tick }) => tick.label).map(({ tick, index }) => {
|
|
14774
14834
|
var _a;
|
|
14775
14835
|
const isVisible = (_a = visibilityMap.get(index)) != null ? _a : false;
|
|
14776
|
-
return /* @__PURE__ */
|
|
14836
|
+
return /* @__PURE__ */ jsx137(
|
|
14777
14837
|
"div",
|
|
14778
14838
|
{
|
|
14779
14839
|
css: label,
|
|
@@ -14792,7 +14852,7 @@ function SliderLabels({ ticks, currentValue, containerWidth = 300 }) {
|
|
|
14792
14852
|
}
|
|
14793
14853
|
|
|
14794
14854
|
// src/components/Slider/Slider.tsx
|
|
14795
|
-
import { jsx as
|
|
14855
|
+
import { jsx as jsx138, jsxs as jsxs91 } from "@emotion/react/jsx-runtime";
|
|
14796
14856
|
var Slider = forwardRef26(
|
|
14797
14857
|
({
|
|
14798
14858
|
value,
|
|
@@ -14907,14 +14967,14 @@ var Slider = forwardRef26(
|
|
|
14907
14967
|
[onChange]
|
|
14908
14968
|
);
|
|
14909
14969
|
const fillPercentage = max === min ? 0 : (clampedValue - min) / (max - min) * 100;
|
|
14910
|
-
return /* @__PURE__ */
|
|
14911
|
-
/* @__PURE__ */
|
|
14912
|
-
/* @__PURE__ */
|
|
14913
|
-
/* @__PURE__ */
|
|
14914
|
-
/* @__PURE__ */
|
|
14915
|
-
/* @__PURE__ */
|
|
14970
|
+
return /* @__PURE__ */ jsxs91("div", { css: container3, children: [
|
|
14971
|
+
/* @__PURE__ */ jsxs91("div", { css: sliderContainer, children: [
|
|
14972
|
+
/* @__PURE__ */ jsxs91("div", { css: sliderTrackContainer, children: [
|
|
14973
|
+
/* @__PURE__ */ jsxs91("div", { css: progressTrack, children: [
|
|
14974
|
+
/* @__PURE__ */ jsx138("div", { css: progressTrackBackground }),
|
|
14975
|
+
/* @__PURE__ */ jsx138("div", { css: progressTrackFill, style: { width: `${fillPercentage}%` } })
|
|
14916
14976
|
] }),
|
|
14917
|
-
/* @__PURE__ */
|
|
14977
|
+
/* @__PURE__ */ jsx138(
|
|
14918
14978
|
"input",
|
|
14919
14979
|
{
|
|
14920
14980
|
ref,
|
|
@@ -14934,9 +14994,9 @@ var Slider = forwardRef26(
|
|
|
14934
14994
|
}
|
|
14935
14995
|
)
|
|
14936
14996
|
] }),
|
|
14937
|
-
/* @__PURE__ */
|
|
14938
|
-
smallTicks.map((tick, index) => /* @__PURE__ */
|
|
14939
|
-
largeTicks.map((tick, index) => /* @__PURE__ */
|
|
14997
|
+
/* @__PURE__ */ jsxs91("div", { css: tickMarksContainer, children: [
|
|
14998
|
+
smallTicks.map((tick, index) => /* @__PURE__ */ jsx138("div", { css: tickMark, style: { left: `${tick.percentage}%` } }, `small-${index}`)),
|
|
14999
|
+
largeTicks.map((tick, index) => /* @__PURE__ */ jsx138(
|
|
14940
15000
|
"div",
|
|
14941
15001
|
{
|
|
14942
15002
|
css: largeTickMark,
|
|
@@ -14945,9 +15005,9 @@ var Slider = forwardRef26(
|
|
|
14945
15005
|
`large-${index}`
|
|
14946
15006
|
))
|
|
14947
15007
|
] }),
|
|
14948
|
-
largeTicks.some((tick) => tick.label) && /* @__PURE__ */
|
|
15008
|
+
largeTicks.some((tick) => tick.label) && /* @__PURE__ */ jsx138(SliderLabels, { ticks: largeTicks, currentValue: isValueUnset ? void 0 : clampedValue })
|
|
14949
15009
|
] }),
|
|
14950
|
-
showNumberInput && !isOptionsMode && /* @__PURE__ */
|
|
15010
|
+
showNumberInput && !isOptionsMode && /* @__PURE__ */ jsx138("div", { css: numberInputContainer, children: /* @__PURE__ */ jsx138(
|
|
14951
15011
|
"input",
|
|
14952
15012
|
{
|
|
14953
15013
|
type: "number",
|
|
@@ -14967,16 +15027,16 @@ var Slider = forwardRef26(
|
|
|
14967
15027
|
Slider.displayName = "Slider";
|
|
14968
15028
|
|
|
14969
15029
|
// src/components/ParameterInputs/ParameterNumberSlider.tsx
|
|
14970
|
-
import { jsx as
|
|
15030
|
+
import { jsx as jsx139 } from "@emotion/react/jsx-runtime";
|
|
14971
15031
|
var ParameterNumberSlider = forwardRef27(
|
|
14972
15032
|
(props, ref) => {
|
|
14973
15033
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
14974
|
-
return /* @__PURE__ */
|
|
15034
|
+
return /* @__PURE__ */ jsx139(ParameterShell, { "data-testid": "parameter-number-slider", ...shellProps, children: /* @__PURE__ */ jsx139(ParameterNumberSliderInner, { ref, ...innerProps }) });
|
|
14975
15035
|
}
|
|
14976
15036
|
);
|
|
14977
15037
|
var ParameterNumberSliderInner = forwardRef27(({ ...props }, ref) => {
|
|
14978
15038
|
const { id, label: label2, hiddenLabel } = useParameterShell();
|
|
14979
|
-
return /* @__PURE__ */
|
|
15039
|
+
return /* @__PURE__ */ jsx139(
|
|
14980
15040
|
Slider,
|
|
14981
15041
|
{
|
|
14982
15042
|
ref,
|
|
@@ -14990,7 +15050,7 @@ ParameterNumberSlider.displayName = "ParameterNumberSlider";
|
|
|
14990
15050
|
ParameterNumberSliderInner.displayName = "ParameterNumberSliderInner";
|
|
14991
15051
|
|
|
14992
15052
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
14993
|
-
import { css as
|
|
15053
|
+
import { css as css107 } from "@emotion/react";
|
|
14994
15054
|
import { ListItemNode, ListNode as ListNode3 } from "@lexical/list";
|
|
14995
15055
|
import {
|
|
14996
15056
|
CODE,
|
|
@@ -15172,23 +15232,23 @@ function DisableStylesPlugin() {
|
|
|
15172
15232
|
}
|
|
15173
15233
|
|
|
15174
15234
|
// src/components/ParameterInputs/rich-text/editorStyles.ts
|
|
15175
|
-
import { css as
|
|
15176
|
-
var textBold =
|
|
15235
|
+
import { css as css102 } from "@emotion/css";
|
|
15236
|
+
var textBold = css102`
|
|
15177
15237
|
font-weight: 700;
|
|
15178
15238
|
`;
|
|
15179
|
-
var textItalic =
|
|
15239
|
+
var textItalic = css102`
|
|
15180
15240
|
font-style: italic;
|
|
15181
15241
|
`;
|
|
15182
|
-
var textUnderline =
|
|
15242
|
+
var textUnderline = css102`
|
|
15183
15243
|
text-decoration: underline;
|
|
15184
15244
|
`;
|
|
15185
|
-
var textStrikethrough =
|
|
15245
|
+
var textStrikethrough = css102`
|
|
15186
15246
|
text-decoration: line-through;
|
|
15187
15247
|
`;
|
|
15188
|
-
var textUnderlineStrikethrough =
|
|
15248
|
+
var textUnderlineStrikethrough = css102`
|
|
15189
15249
|
text-decoration: underline line-through;
|
|
15190
15250
|
`;
|
|
15191
|
-
var textCode =
|
|
15251
|
+
var textCode = css102`
|
|
15192
15252
|
background-color: var(--gray-100);
|
|
15193
15253
|
border-radius: var(--rounded-sm);
|
|
15194
15254
|
display: inline-block;
|
|
@@ -15199,68 +15259,68 @@ var textCode = css101`
|
|
|
15199
15259
|
padding-left: var(--spacing-xs);
|
|
15200
15260
|
padding-right: var(--spacing-xs);
|
|
15201
15261
|
`;
|
|
15202
|
-
var textSuperscript =
|
|
15262
|
+
var textSuperscript = css102`
|
|
15203
15263
|
vertical-align: super;
|
|
15204
15264
|
font-size: smaller;
|
|
15205
15265
|
`;
|
|
15206
|
-
var textSubscript =
|
|
15266
|
+
var textSubscript = css102`
|
|
15207
15267
|
vertical-align: sub;
|
|
15208
15268
|
font-size: smaller;
|
|
15209
15269
|
`;
|
|
15210
|
-
var linkElement =
|
|
15270
|
+
var linkElement = css102`
|
|
15211
15271
|
${link}
|
|
15212
15272
|
${linkColorDefault}
|
|
15213
15273
|
text-decoration: underline;
|
|
15214
15274
|
`;
|
|
15215
|
-
var h12 =
|
|
15275
|
+
var h12 = css102`
|
|
15216
15276
|
font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
|
|
15217
15277
|
`;
|
|
15218
|
-
var h22 =
|
|
15278
|
+
var h22 = css102`
|
|
15219
15279
|
font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
|
|
15220
15280
|
`;
|
|
15221
|
-
var h32 =
|
|
15281
|
+
var h32 = css102`
|
|
15222
15282
|
font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
|
|
15223
15283
|
`;
|
|
15224
|
-
var h42 =
|
|
15284
|
+
var h42 = css102`
|
|
15225
15285
|
font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
|
|
15226
15286
|
`;
|
|
15227
|
-
var h52 =
|
|
15287
|
+
var h52 = css102`
|
|
15228
15288
|
font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
|
|
15229
15289
|
`;
|
|
15230
|
-
var h62 =
|
|
15290
|
+
var h62 = css102`
|
|
15231
15291
|
font-size: var(--fs-base);
|
|
15232
15292
|
`;
|
|
15233
|
-
var heading1Element =
|
|
15293
|
+
var heading1Element = css102`
|
|
15234
15294
|
${h12}
|
|
15235
15295
|
${commonHeadingAttr(true)}
|
|
15236
15296
|
${commonLineHeight}
|
|
15237
15297
|
`;
|
|
15238
|
-
var heading2Element =
|
|
15298
|
+
var heading2Element = css102`
|
|
15239
15299
|
${h22}
|
|
15240
15300
|
${commonHeadingAttr(true)}
|
|
15241
15301
|
${commonLineHeight}
|
|
15242
15302
|
`;
|
|
15243
|
-
var heading3Element =
|
|
15303
|
+
var heading3Element = css102`
|
|
15244
15304
|
${h32}
|
|
15245
15305
|
${commonHeadingAttr(true)}
|
|
15246
15306
|
${commonLineHeight}
|
|
15247
15307
|
`;
|
|
15248
|
-
var heading4Element =
|
|
15308
|
+
var heading4Element = css102`
|
|
15249
15309
|
${h42}
|
|
15250
15310
|
${commonHeadingAttr(true)}
|
|
15251
15311
|
${commonLineHeight}
|
|
15252
15312
|
`;
|
|
15253
|
-
var heading5Element =
|
|
15313
|
+
var heading5Element = css102`
|
|
15254
15314
|
${h52}
|
|
15255
15315
|
${commonHeadingAttr(true)}
|
|
15256
15316
|
${commonLineHeight}
|
|
15257
15317
|
`;
|
|
15258
|
-
var heading6Element =
|
|
15318
|
+
var heading6Element = css102`
|
|
15259
15319
|
${h62}
|
|
15260
15320
|
${commonHeadingAttr(true)}
|
|
15261
15321
|
${commonLineHeight}
|
|
15262
15322
|
`;
|
|
15263
|
-
var paragraphElement =
|
|
15323
|
+
var paragraphElement = css102`
|
|
15264
15324
|
line-height: 1.5;
|
|
15265
15325
|
margin-bottom: var(--spacing-base);
|
|
15266
15326
|
|
|
@@ -15268,7 +15328,7 @@ var paragraphElement = css101`
|
|
|
15268
15328
|
margin-bottom: 0;
|
|
15269
15329
|
}
|
|
15270
15330
|
`;
|
|
15271
|
-
var orderedListElement =
|
|
15331
|
+
var orderedListElement = css102`
|
|
15272
15332
|
${commonLineHeight}
|
|
15273
15333
|
display: block;
|
|
15274
15334
|
list-style: decimal;
|
|
@@ -15297,7 +15357,7 @@ var orderedListElement = css101`
|
|
|
15297
15357
|
}
|
|
15298
15358
|
}
|
|
15299
15359
|
`;
|
|
15300
|
-
var unorderedListElement =
|
|
15360
|
+
var unorderedListElement = css102`
|
|
15301
15361
|
${commonLineHeight}
|
|
15302
15362
|
display: block;
|
|
15303
15363
|
list-style: disc;
|
|
@@ -15318,13 +15378,13 @@ var unorderedListElement = css101`
|
|
|
15318
15378
|
}
|
|
15319
15379
|
}
|
|
15320
15380
|
`;
|
|
15321
|
-
var listItemElement =
|
|
15381
|
+
var listItemElement = css102`
|
|
15322
15382
|
margin-left: var(--spacing-md);
|
|
15323
15383
|
`;
|
|
15324
|
-
var nestedListItemElement =
|
|
15384
|
+
var nestedListItemElement = css102`
|
|
15325
15385
|
list-style-type: none;
|
|
15326
15386
|
`;
|
|
15327
|
-
var blockquoteElement =
|
|
15387
|
+
var blockquoteElement = css102`
|
|
15328
15388
|
border-left: 0.25rem solid var(--gray-300);
|
|
15329
15389
|
color: var(--gray-600);
|
|
15330
15390
|
margin-bottom: var(--spacing-base);
|
|
@@ -15334,7 +15394,7 @@ var blockquoteElement = css101`
|
|
|
15334
15394
|
margin-bottom: 0;
|
|
15335
15395
|
}
|
|
15336
15396
|
`;
|
|
15337
|
-
var codeElement =
|
|
15397
|
+
var codeElement = css102`
|
|
15338
15398
|
background-color: var(--gray-100);
|
|
15339
15399
|
border-radius: var(--rounded-sm);
|
|
15340
15400
|
display: block;
|
|
@@ -15349,7 +15409,7 @@ var codeElement = css101`
|
|
|
15349
15409
|
margin-bottom: 0;
|
|
15350
15410
|
}
|
|
15351
15411
|
`;
|
|
15352
|
-
var tableElement =
|
|
15412
|
+
var tableElement = css102`
|
|
15353
15413
|
border-collapse: collapse;
|
|
15354
15414
|
border-spacing: 0;
|
|
15355
15415
|
border-color: var(--gray-300);
|
|
@@ -15362,7 +15422,7 @@ var tableElement = css101`
|
|
|
15362
15422
|
margin-bottom: 0;
|
|
15363
15423
|
}
|
|
15364
15424
|
`;
|
|
15365
|
-
var tableCellElement =
|
|
15425
|
+
var tableCellElement = css102`
|
|
15366
15426
|
background-color: var(--white);
|
|
15367
15427
|
border-color: var(--gray-300);
|
|
15368
15428
|
border-style: solid;
|
|
@@ -15398,7 +15458,7 @@ var tableCellElement = css101`
|
|
|
15398
15458
|
z-index: 1;
|
|
15399
15459
|
}
|
|
15400
15460
|
`;
|
|
15401
|
-
var tableHeaderElement =
|
|
15461
|
+
var tableHeaderElement = css102`
|
|
15402
15462
|
background-color: var(--gray-100);
|
|
15403
15463
|
border-color: var(--gray-300);
|
|
15404
15464
|
border-style: solid;
|
|
@@ -15468,7 +15528,7 @@ var ImprovedAssetSelectionPlugin = () => {
|
|
|
15468
15528
|
var ImprovedAssetSelectionPlugin_default = ImprovedAssetSelectionPlugin;
|
|
15469
15529
|
|
|
15470
15530
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
15471
|
-
import { css as
|
|
15531
|
+
import { css as css103 } from "@emotion/react";
|
|
15472
15532
|
import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexical/react/LexicalComposerContext";
|
|
15473
15533
|
import { NodeEventPlugin } from "@lexical/react/LexicalNodeEventPlugin";
|
|
15474
15534
|
import {
|
|
@@ -15551,7 +15611,7 @@ var normalizeStateForDeepEqualComparison = (editorState) => {
|
|
|
15551
15611
|
};
|
|
15552
15612
|
|
|
15553
15613
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
15554
|
-
import { Fragment as Fragment16, jsx as
|
|
15614
|
+
import { Fragment as Fragment16, jsx as jsx140, jsxs as jsxs92 } from "@emotion/react/jsx-runtime";
|
|
15555
15615
|
var isProjectMapLinkValue = (value) => {
|
|
15556
15616
|
return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
|
|
15557
15617
|
value.nodeId && value.path && value.projectMapId
|
|
@@ -15840,18 +15900,18 @@ var OPEN_LINK_NODE_MODAL_COMMAND = createCommand(
|
|
|
15840
15900
|
);
|
|
15841
15901
|
var LINK_POPOVER_OFFSET_X = 0;
|
|
15842
15902
|
var LINK_POPOVER_OFFSET_Y = 8;
|
|
15843
|
-
var linkPopover =
|
|
15903
|
+
var linkPopover = css103`
|
|
15844
15904
|
position: absolute;
|
|
15845
15905
|
z-index: 11;
|
|
15846
15906
|
`;
|
|
15847
|
-
var linkPopoverContainer =
|
|
15907
|
+
var linkPopoverContainer = css103`
|
|
15848
15908
|
${Popover};
|
|
15849
15909
|
${PopoverBody};
|
|
15850
15910
|
${PopoverVariantSmall};
|
|
15851
15911
|
align-items: center;
|
|
15852
15912
|
display: flex;
|
|
15853
15913
|
`;
|
|
15854
|
-
var linkPopoverAnchor =
|
|
15914
|
+
var linkPopoverAnchor = css103`
|
|
15855
15915
|
${link}
|
|
15856
15916
|
${linkColorDefault}
|
|
15857
15917
|
`;
|
|
@@ -16039,8 +16099,8 @@ function LinkNodePlugin({
|
|
|
16039
16099
|
});
|
|
16040
16100
|
});
|
|
16041
16101
|
};
|
|
16042
|
-
return /* @__PURE__ */
|
|
16043
|
-
/* @__PURE__ */
|
|
16102
|
+
return /* @__PURE__ */ jsxs92(Fragment16, { children: [
|
|
16103
|
+
/* @__PURE__ */ jsx140(
|
|
16044
16104
|
NodeEventPlugin,
|
|
16045
16105
|
{
|
|
16046
16106
|
nodeType: LinkNode,
|
|
@@ -16050,7 +16110,7 @@ function LinkNodePlugin({
|
|
|
16050
16110
|
}
|
|
16051
16111
|
}
|
|
16052
16112
|
),
|
|
16053
|
-
linkPopoverState ? /* @__PURE__ */
|
|
16113
|
+
linkPopoverState ? /* @__PURE__ */ jsx140(
|
|
16054
16114
|
"div",
|
|
16055
16115
|
{
|
|
16056
16116
|
css: linkPopover,
|
|
@@ -16059,8 +16119,8 @@ function LinkNodePlugin({
|
|
|
16059
16119
|
top: linkPopoverState.position.y
|
|
16060
16120
|
},
|
|
16061
16121
|
ref: linkPopoverElRef,
|
|
16062
|
-
children: /* @__PURE__ */
|
|
16063
|
-
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */
|
|
16122
|
+
children: /* @__PURE__ */ jsxs92("div", { css: linkPopoverContainer, children: [
|
|
16123
|
+
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx140(
|
|
16064
16124
|
"a",
|
|
16065
16125
|
{
|
|
16066
16126
|
href: parsePath(
|
|
@@ -16072,7 +16132,7 @@ function LinkNodePlugin({
|
|
|
16072
16132
|
children: parsePath(linkPopoverState.node.__link.path)
|
|
16073
16133
|
}
|
|
16074
16134
|
),
|
|
16075
|
-
/* @__PURE__ */
|
|
16135
|
+
/* @__PURE__ */ jsx140(
|
|
16076
16136
|
Button,
|
|
16077
16137
|
{
|
|
16078
16138
|
size: "xs",
|
|
@@ -16080,7 +16140,7 @@ function LinkNodePlugin({
|
|
|
16080
16140
|
onEditLinkNode(linkPopoverState.node);
|
|
16081
16141
|
},
|
|
16082
16142
|
buttonType: "ghost",
|
|
16083
|
-
children: /* @__PURE__ */
|
|
16143
|
+
children: /* @__PURE__ */ jsx140(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
|
|
16084
16144
|
}
|
|
16085
16145
|
)
|
|
16086
16146
|
] })
|
|
@@ -16218,7 +16278,7 @@ function ListIndentPlugin({ maxDepth }) {
|
|
|
16218
16278
|
}
|
|
16219
16279
|
|
|
16220
16280
|
// src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
|
|
16221
|
-
import { css as
|
|
16281
|
+
import { css as css104 } from "@emotion/react";
|
|
16222
16282
|
import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
|
|
16223
16283
|
import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
|
|
16224
16284
|
import {
|
|
@@ -16239,7 +16299,7 @@ import {
|
|
|
16239
16299
|
} from "@lexical/table";
|
|
16240
16300
|
import { $getSelection as $getSelection3, $isRangeSelection as $isRangeSelection3, $setSelection } from "lexical";
|
|
16241
16301
|
import { forwardRef as forwardRef28, useCallback as useCallback12, useEffect as useEffect23, useLayoutEffect, useState as useState23 } from "react";
|
|
16242
|
-
import { jsx as
|
|
16302
|
+
import { jsx as jsx141, jsxs as jsxs93 } from "@emotion/react/jsx-runtime";
|
|
16243
16303
|
function computeSelectionCount(selection) {
|
|
16244
16304
|
const selectionShape = selection.getShape();
|
|
16245
16305
|
return {
|
|
@@ -16247,7 +16307,7 @@ function computeSelectionCount(selection) {
|
|
|
16247
16307
|
rows: selectionShape.toY - selectionShape.fromY + 1
|
|
16248
16308
|
};
|
|
16249
16309
|
}
|
|
16250
|
-
var tableActionMenuTrigger =
|
|
16310
|
+
var tableActionMenuTrigger = css104`
|
|
16251
16311
|
position: absolute;
|
|
16252
16312
|
transform: translate(calc(-100% - 1px), 1px);
|
|
16253
16313
|
`;
|
|
@@ -16261,7 +16321,7 @@ var TableActionMenuTrigger = forwardRef28((props, ref) => {
|
|
|
16261
16321
|
const relativeY = rect.top - parentRect.top + positioningAnchorEl.scrollTop;
|
|
16262
16322
|
setCoordinates({ x: relativeX, y: relativeY });
|
|
16263
16323
|
}, [tableCellEl, positioningAnchorEl]);
|
|
16264
|
-
return /* @__PURE__ */
|
|
16324
|
+
return /* @__PURE__ */ jsx141(
|
|
16265
16325
|
IconButton,
|
|
16266
16326
|
{
|
|
16267
16327
|
ref,
|
|
@@ -16275,7 +16335,7 @@ var TableActionMenuTrigger = forwardRef28((props, ref) => {
|
|
|
16275
16335
|
size: "xs",
|
|
16276
16336
|
buttonType: "unimportant",
|
|
16277
16337
|
...rest,
|
|
16278
|
-
children: /* @__PURE__ */
|
|
16338
|
+
children: /* @__PURE__ */ jsx141(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
|
|
16279
16339
|
}
|
|
16280
16340
|
);
|
|
16281
16341
|
});
|
|
@@ -16414,13 +16474,13 @@ function TableActionMenu({
|
|
|
16414
16474
|
clearTableSelection();
|
|
16415
16475
|
});
|
|
16416
16476
|
}, [editor, tableCellNode, clearTableSelection]);
|
|
16417
|
-
const menuItemCss =
|
|
16477
|
+
const menuItemCss = css104({
|
|
16418
16478
|
fontSize: "var(--fs-sm)"
|
|
16419
16479
|
});
|
|
16420
|
-
return /* @__PURE__ */
|
|
16480
|
+
return /* @__PURE__ */ jsxs93(
|
|
16421
16481
|
Menu,
|
|
16422
16482
|
{
|
|
16423
|
-
menuTrigger: /* @__PURE__ */
|
|
16483
|
+
menuTrigger: /* @__PURE__ */ jsx141(
|
|
16424
16484
|
TableActionMenuTrigger,
|
|
16425
16485
|
{
|
|
16426
16486
|
tableCellEl,
|
|
@@ -16431,7 +16491,7 @@ function TableActionMenu({
|
|
|
16431
16491
|
portalElement: menuPortalEl,
|
|
16432
16492
|
maxMenuHeight: "300px",
|
|
16433
16493
|
children: [
|
|
16434
|
-
/* @__PURE__ */
|
|
16494
|
+
/* @__PURE__ */ jsxs93(
|
|
16435
16495
|
MenuItem,
|
|
16436
16496
|
{
|
|
16437
16497
|
onClick: () => {
|
|
@@ -16445,33 +16505,33 @@ function TableActionMenu({
|
|
|
16445
16505
|
]
|
|
16446
16506
|
}
|
|
16447
16507
|
),
|
|
16448
|
-
/* @__PURE__ */
|
|
16508
|
+
/* @__PURE__ */ jsxs93(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
|
|
16449
16509
|
"Insert ",
|
|
16450
16510
|
selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
|
|
16451
16511
|
" below"
|
|
16452
16512
|
] }),
|
|
16453
|
-
/* @__PURE__ */
|
|
16454
|
-
/* @__PURE__ */
|
|
16513
|
+
/* @__PURE__ */ jsx141(MenuItemSeparator, {}),
|
|
16514
|
+
/* @__PURE__ */ jsxs93(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
|
|
16455
16515
|
"Insert ",
|
|
16456
16516
|
selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
|
|
16457
16517
|
" left"
|
|
16458
16518
|
] }),
|
|
16459
|
-
/* @__PURE__ */
|
|
16519
|
+
/* @__PURE__ */ jsxs93(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
|
|
16460
16520
|
"Insert ",
|
|
16461
16521
|
selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
|
|
16462
16522
|
" right"
|
|
16463
16523
|
] }),
|
|
16464
|
-
/* @__PURE__ */
|
|
16465
|
-
/* @__PURE__ */
|
|
16466
|
-
/* @__PURE__ */
|
|
16467
|
-
/* @__PURE__ */
|
|
16468
|
-
/* @__PURE__ */
|
|
16469
|
-
/* @__PURE__ */
|
|
16524
|
+
/* @__PURE__ */ jsx141(MenuItemSeparator, {}),
|
|
16525
|
+
/* @__PURE__ */ jsx141(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
|
|
16526
|
+
/* @__PURE__ */ jsx141(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
|
|
16527
|
+
/* @__PURE__ */ jsx141(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
|
|
16528
|
+
/* @__PURE__ */ jsx141(MenuItemSeparator, {}),
|
|
16529
|
+
/* @__PURE__ */ jsxs93(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
|
|
16470
16530
|
(tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? "Remove" : "Add",
|
|
16471
16531
|
" ",
|
|
16472
16532
|
"row header"
|
|
16473
16533
|
] }),
|
|
16474
|
-
/* @__PURE__ */
|
|
16534
|
+
/* @__PURE__ */ jsxs93(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
|
|
16475
16535
|
(tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN ? "Remove" : "Add",
|
|
16476
16536
|
" ",
|
|
16477
16537
|
"column header"
|
|
@@ -16539,7 +16599,7 @@ function TableCellActionMenuContainer({
|
|
|
16539
16599
|
});
|
|
16540
16600
|
});
|
|
16541
16601
|
}, [editor, $moveMenu]);
|
|
16542
|
-
return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */
|
|
16602
|
+
return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ jsx141(
|
|
16543
16603
|
TableActionMenu,
|
|
16544
16604
|
{
|
|
16545
16605
|
tableCellNode,
|
|
@@ -16555,11 +16615,11 @@ function TableActionMenuPlugin({
|
|
|
16555
16615
|
menuPortalEl
|
|
16556
16616
|
}) {
|
|
16557
16617
|
const isEditable = useLexicalEditable();
|
|
16558
|
-
return isEditable ? /* @__PURE__ */
|
|
16618
|
+
return isEditable ? /* @__PURE__ */ jsx141(TableCellActionMenuContainer, { menuPortalEl, positioningAnchorEl }) : null;
|
|
16559
16619
|
}
|
|
16560
16620
|
|
|
16561
16621
|
// src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
|
|
16562
|
-
import { css as
|
|
16622
|
+
import { css as css105 } from "@emotion/react";
|
|
16563
16623
|
import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
|
|
16564
16624
|
import { useLexicalEditable as useLexicalEditable2 } from "@lexical/react/useLexicalEditable";
|
|
16565
16625
|
import {
|
|
@@ -16573,10 +16633,10 @@ import { calculateZoomLevel } from "@lexical/utils";
|
|
|
16573
16633
|
import { $getNearestNodeFromDOMNode } from "lexical";
|
|
16574
16634
|
import { useCallback as useCallback13, useEffect as useEffect24, useMemo as useMemo9, useRef as useRef16, useState as useState24 } from "react";
|
|
16575
16635
|
import { createPortal as createPortal3 } from "react-dom";
|
|
16576
|
-
import { Fragment as Fragment17, jsx as
|
|
16636
|
+
import { Fragment as Fragment17, jsx as jsx142, jsxs as jsxs94 } from "@emotion/react/jsx-runtime";
|
|
16577
16637
|
var MIN_ROW_HEIGHT = 33;
|
|
16578
16638
|
var MIN_COLUMN_WIDTH = 50;
|
|
16579
|
-
var tableResizer =
|
|
16639
|
+
var tableResizer = css105`
|
|
16580
16640
|
position: absolute;
|
|
16581
16641
|
z-index: var(--z-10);
|
|
16582
16642
|
`;
|
|
@@ -16874,8 +16934,8 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
16874
16934
|
};
|
|
16875
16935
|
}, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
|
|
16876
16936
|
const resizerStyles = getResizers();
|
|
16877
|
-
return /* @__PURE__ */
|
|
16878
|
-
/* @__PURE__ */
|
|
16937
|
+
return /* @__PURE__ */ jsx142("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ jsxs94(Fragment17, { children: [
|
|
16938
|
+
/* @__PURE__ */ jsx142(
|
|
16879
16939
|
"div",
|
|
16880
16940
|
{
|
|
16881
16941
|
css: tableResizer,
|
|
@@ -16883,7 +16943,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
|
|
|
16883
16943
|
onMouseDown: toggleResize("right")
|
|
16884
16944
|
}
|
|
16885
16945
|
),
|
|
16886
|
-
/* @__PURE__ */
|
|
16946
|
+
/* @__PURE__ */ jsx142(
|
|
16887
16947
|
"div",
|
|
16888
16948
|
{
|
|
16889
16949
|
css: tableResizer,
|
|
@@ -16898,7 +16958,7 @@ function TableCellResizerPlugin({ positioningAnchorEl }) {
|
|
|
16898
16958
|
const isEditable = useLexicalEditable2();
|
|
16899
16959
|
return useMemo9(
|
|
16900
16960
|
() => isEditable ? createPortal3(
|
|
16901
|
-
/* @__PURE__ */
|
|
16961
|
+
/* @__PURE__ */ jsx142(TableCellResizer, { editor, positioningAnchorEl }),
|
|
16902
16962
|
positioningAnchorEl
|
|
16903
16963
|
) : null,
|
|
16904
16964
|
[editor, isEditable, positioningAnchorEl]
|
|
@@ -16964,7 +17024,7 @@ var TableSelectionPlugin = () => {
|
|
|
16964
17024
|
var TableSelectionPlugin_default = TableSelectionPlugin;
|
|
16965
17025
|
|
|
16966
17026
|
// src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
|
|
16967
|
-
import { css as
|
|
17027
|
+
import { css as css106 } from "@emotion/react";
|
|
16968
17028
|
import { $createCodeNode } from "@lexical/code";
|
|
16969
17029
|
import {
|
|
16970
17030
|
$isListNode as $isListNode2,
|
|
@@ -17134,8 +17194,8 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
17134
17194
|
};
|
|
17135
17195
|
|
|
17136
17196
|
// src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
|
|
17137
|
-
import { Fragment as Fragment18, jsx as
|
|
17138
|
-
var toolbar =
|
|
17197
|
+
import { Fragment as Fragment18, jsx as jsx143, jsxs as jsxs95 } from "@emotion/react/jsx-runtime";
|
|
17198
|
+
var toolbar = css106`
|
|
17139
17199
|
${scrollbarStyles}
|
|
17140
17200
|
background: var(--gray-50);
|
|
17141
17201
|
border-radius: var(--rounded-base);
|
|
@@ -17149,7 +17209,7 @@ var toolbar = css105`
|
|
|
17149
17209
|
top: calc(var(--spacing-sm) * -2);
|
|
17150
17210
|
z-index: 10;
|
|
17151
17211
|
`;
|
|
17152
|
-
var toolbarGroup =
|
|
17212
|
+
var toolbarGroup = css106`
|
|
17153
17213
|
display: flex;
|
|
17154
17214
|
flex-shrink: 0;
|
|
17155
17215
|
gap: var(--spacing-xs);
|
|
@@ -17166,7 +17226,7 @@ var toolbarGroup = css105`
|
|
|
17166
17226
|
width: 1px;
|
|
17167
17227
|
}
|
|
17168
17228
|
`;
|
|
17169
|
-
var richTextToolbarButton =
|
|
17229
|
+
var richTextToolbarButton = css106`
|
|
17170
17230
|
align-items: center;
|
|
17171
17231
|
appearance: none;
|
|
17172
17232
|
border: 0;
|
|
@@ -17180,21 +17240,21 @@ var richTextToolbarButton = css105`
|
|
|
17180
17240
|
min-width: 32px;
|
|
17181
17241
|
padding: 0 var(--spacing-sm);
|
|
17182
17242
|
`;
|
|
17183
|
-
var richTextToolbarButtonActive =
|
|
17243
|
+
var richTextToolbarButtonActive = css106`
|
|
17184
17244
|
background: var(--gray-200);
|
|
17185
17245
|
`;
|
|
17186
|
-
var textStyleButton =
|
|
17246
|
+
var textStyleButton = css106`
|
|
17187
17247
|
justify-content: space-between;
|
|
17188
17248
|
min-width: 7rem;
|
|
17189
17249
|
`;
|
|
17190
|
-
var toolbarIcon =
|
|
17250
|
+
var toolbarIcon = css106`
|
|
17191
17251
|
color: inherit;
|
|
17192
17252
|
`;
|
|
17193
|
-
var toolbarChevron =
|
|
17253
|
+
var toolbarChevron = css106`
|
|
17194
17254
|
margin-left: var(--spacing-xs);
|
|
17195
17255
|
`;
|
|
17196
17256
|
var RichTextToolbarIcon = ({ icon }) => {
|
|
17197
|
-
return /* @__PURE__ */
|
|
17257
|
+
return /* @__PURE__ */ jsx143(Icon, { icon, css: toolbarIcon, size: "1rem" });
|
|
17198
17258
|
};
|
|
17199
17259
|
var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset }) => {
|
|
17200
17260
|
const [editor] = useLexicalComposerContext8();
|
|
@@ -17308,14 +17368,14 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
17308
17368
|
});
|
|
17309
17369
|
});
|
|
17310
17370
|
}, [editor, updateToolbar]);
|
|
17311
|
-
return /* @__PURE__ */
|
|
17312
|
-
/* @__PURE__ */
|
|
17371
|
+
return /* @__PURE__ */ jsxs95("div", { css: toolbar, "data-testid": "rich-text-toolbar", children: [
|
|
17372
|
+
/* @__PURE__ */ jsxs95(
|
|
17313
17373
|
Menu,
|
|
17314
17374
|
{
|
|
17315
|
-
menuTrigger: /* @__PURE__ */
|
|
17375
|
+
menuTrigger: /* @__PURE__ */ jsxs95("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", type: "button", children: [
|
|
17316
17376
|
visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
|
|
17317
17377
|
" ",
|
|
17318
|
-
/* @__PURE__ */
|
|
17378
|
+
/* @__PURE__ */ jsx143(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
17319
17379
|
] }),
|
|
17320
17380
|
placement: "bottom-start",
|
|
17321
17381
|
children: [
|
|
@@ -17325,7 +17385,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
17325
17385
|
type: "paragraph"
|
|
17326
17386
|
},
|
|
17327
17387
|
...visibleTextualElements
|
|
17328
|
-
].map((element) => /* @__PURE__ */
|
|
17388
|
+
].map((element) => /* @__PURE__ */ jsx143(
|
|
17329
17389
|
MenuItem,
|
|
17330
17390
|
{
|
|
17331
17391
|
"data-testid": "menu-item",
|
|
@@ -17336,12 +17396,12 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
17336
17396
|
},
|
|
17337
17397
|
element.type
|
|
17338
17398
|
)),
|
|
17339
|
-
visibleTextualElements.length === 0 ? /* @__PURE__ */
|
|
17399
|
+
visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx143(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
|
|
17340
17400
|
]
|
|
17341
17401
|
}
|
|
17342
17402
|
),
|
|
17343
|
-
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */
|
|
17344
|
-
visibleFormatsWithIcon.map((format) => /* @__PURE__ */
|
|
17403
|
+
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs95("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-formatting", children: [
|
|
17404
|
+
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx143(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx143(
|
|
17345
17405
|
"button",
|
|
17346
17406
|
{
|
|
17347
17407
|
"data-testid": `formatting-button-${format.type}`,
|
|
@@ -17353,15 +17413,15 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
17353
17413
|
richTextToolbarButton,
|
|
17354
17414
|
activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
|
|
17355
17415
|
],
|
|
17356
|
-
children: /* @__PURE__ */
|
|
17416
|
+
children: /* @__PURE__ */ jsx143(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
|
|
17357
17417
|
}
|
|
17358
17418
|
) }, format.type)),
|
|
17359
|
-
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */
|
|
17419
|
+
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx143(
|
|
17360
17420
|
Menu,
|
|
17361
17421
|
{
|
|
17362
|
-
menuTrigger: /* @__PURE__ */
|
|
17422
|
+
menuTrigger: /* @__PURE__ */ jsx143("button", { css: richTextToolbarButton, title: "Alternative text styles", type: "button", children: /* @__PURE__ */ jsx143(Icon, { icon: "more-alt", css: toolbarIcon }) }),
|
|
17363
17423
|
placement: "bottom-start",
|
|
17364
|
-
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */
|
|
17424
|
+
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx143(
|
|
17365
17425
|
MenuItem,
|
|
17366
17426
|
{
|
|
17367
17427
|
onClick: () => {
|
|
@@ -17374,8 +17434,8 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
17374
17434
|
}
|
|
17375
17435
|
) : null
|
|
17376
17436
|
] }) : null,
|
|
17377
|
-
visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */
|
|
17378
|
-
linkElementVisible ? /* @__PURE__ */
|
|
17437
|
+
visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ jsxs95("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-elements", children: [
|
|
17438
|
+
linkElementVisible ? /* @__PURE__ */ jsx143(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx143(
|
|
17379
17439
|
"button",
|
|
17380
17440
|
{
|
|
17381
17441
|
"data-testid": "element-link",
|
|
@@ -17388,11 +17448,11 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
17388
17448
|
}
|
|
17389
17449
|
},
|
|
17390
17450
|
css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
|
|
17391
|
-
children: /* @__PURE__ */
|
|
17451
|
+
children: /* @__PURE__ */ jsx143(RichTextToolbarIcon, { icon: "link" })
|
|
17392
17452
|
}
|
|
17393
17453
|
) }) : null,
|
|
17394
|
-
visibleLists.size > 0 ? /* @__PURE__ */
|
|
17395
|
-
visibleLists.has("unorderedList") ? /* @__PURE__ */
|
|
17454
|
+
visibleLists.size > 0 ? /* @__PURE__ */ jsxs95(Fragment18, { children: [
|
|
17455
|
+
visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx143(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx143(
|
|
17396
17456
|
"button",
|
|
17397
17457
|
{
|
|
17398
17458
|
"data-testid": "element-unordered-list",
|
|
@@ -17408,10 +17468,10 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
17408
17468
|
richTextToolbarButton,
|
|
17409
17469
|
activeElement === "unorderedList" ? richTextToolbarButtonActive : null
|
|
17410
17470
|
],
|
|
17411
|
-
children: /* @__PURE__ */
|
|
17471
|
+
children: /* @__PURE__ */ jsx143(RichTextToolbarIcon, { icon: "layout-list" })
|
|
17412
17472
|
}
|
|
17413
17473
|
) }) : null,
|
|
17414
|
-
visibleLists.has("orderedList") ? /* @__PURE__ */
|
|
17474
|
+
visibleLists.has("orderedList") ? /* @__PURE__ */ jsx143(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx143(
|
|
17415
17475
|
"button",
|
|
17416
17476
|
{
|
|
17417
17477
|
"data-testid": "element-ordered-list",
|
|
@@ -17427,58 +17487,58 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
17427
17487
|
richTextToolbarButton,
|
|
17428
17488
|
activeElement === "orderedList" ? richTextToolbarButtonActive : null
|
|
17429
17489
|
],
|
|
17430
|
-
children: /* @__PURE__ */
|
|
17490
|
+
children: /* @__PURE__ */ jsx143(RichTextToolbarIcon, { icon: "layout-list-numbered" })
|
|
17431
17491
|
}
|
|
17432
17492
|
) }) : null
|
|
17433
17493
|
] }) : null,
|
|
17434
17494
|
customControls ? customControls : null
|
|
17435
17495
|
] }) : null,
|
|
17436
|
-
visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */
|
|
17496
|
+
visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ jsx143("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-insert", children: /* @__PURE__ */ jsxs95(
|
|
17437
17497
|
Menu,
|
|
17438
17498
|
{
|
|
17439
|
-
menuTrigger: /* @__PURE__ */
|
|
17499
|
+
menuTrigger: /* @__PURE__ */ jsxs95("button", { css: richTextToolbarButton, title: "Insert block element", type: "button", children: [
|
|
17440
17500
|
"Insert",
|
|
17441
|
-
/* @__PURE__ */
|
|
17501
|
+
/* @__PURE__ */ jsx143(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
17442
17502
|
] }),
|
|
17443
17503
|
placement: "bottom-start",
|
|
17444
17504
|
children: [
|
|
17445
|
-
quoteElementVisible ? /* @__PURE__ */
|
|
17505
|
+
quoteElementVisible ? /* @__PURE__ */ jsx143(
|
|
17446
17506
|
MenuItem,
|
|
17447
17507
|
{
|
|
17448
17508
|
onClick: () => {
|
|
17449
17509
|
onSelectElement("quote");
|
|
17450
17510
|
},
|
|
17451
|
-
icon: /* @__PURE__ */
|
|
17511
|
+
icon: /* @__PURE__ */ jsx143(Icon, { icon: "quote", iconColor: "currentColor" }),
|
|
17452
17512
|
children: "Quote"
|
|
17453
17513
|
}
|
|
17454
17514
|
) : null,
|
|
17455
|
-
codeElementVisible ? /* @__PURE__ */
|
|
17515
|
+
codeElementVisible ? /* @__PURE__ */ jsx143(
|
|
17456
17516
|
MenuItem,
|
|
17457
17517
|
{
|
|
17458
17518
|
onClick: () => {
|
|
17459
17519
|
onSelectElement("code");
|
|
17460
17520
|
},
|
|
17461
|
-
icon: /* @__PURE__ */
|
|
17521
|
+
icon: /* @__PURE__ */ jsx143(Icon, { icon: "code-slash", iconColor: "currentColor" }),
|
|
17462
17522
|
children: "Code"
|
|
17463
17523
|
}
|
|
17464
17524
|
) : null,
|
|
17465
|
-
tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */
|
|
17525
|
+
tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ jsx143(
|
|
17466
17526
|
MenuItem,
|
|
17467
17527
|
{
|
|
17468
17528
|
onClick: () => {
|
|
17469
17529
|
onSelectElement("table");
|
|
17470
17530
|
},
|
|
17471
|
-
icon: /* @__PURE__ */
|
|
17531
|
+
icon: /* @__PURE__ */ jsx143(Icon, { icon: "view-grid", iconColor: "currentColor" }),
|
|
17472
17532
|
children: "Table"
|
|
17473
17533
|
}
|
|
17474
17534
|
) : null,
|
|
17475
|
-
assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */
|
|
17535
|
+
assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */ jsx143(
|
|
17476
17536
|
MenuItem,
|
|
17477
17537
|
{
|
|
17478
17538
|
onClick: () => {
|
|
17479
17539
|
onSelectElement("asset");
|
|
17480
17540
|
},
|
|
17481
|
-
icon: /* @__PURE__ */
|
|
17541
|
+
icon: /* @__PURE__ */ jsx143(Icon, { icon: "image", iconColor: "currentColor" }),
|
|
17482
17542
|
children: "Asset"
|
|
17483
17543
|
}
|
|
17484
17544
|
) : null
|
|
@@ -17490,7 +17550,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
|
|
|
17490
17550
|
var RichTextToolbar_default = RichTextToolbar;
|
|
17491
17551
|
|
|
17492
17552
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
17493
|
-
import { Fragment as Fragment19, jsx as
|
|
17553
|
+
import { Fragment as Fragment19, jsx as jsx144, jsxs as jsxs96 } from "@emotion/react/jsx-runtime";
|
|
17494
17554
|
var ParameterRichText = ({
|
|
17495
17555
|
label: label2,
|
|
17496
17556
|
labelLeadingIcon,
|
|
@@ -17504,7 +17564,7 @@ var ParameterRichText = ({
|
|
|
17504
17564
|
children,
|
|
17505
17565
|
...innerProps
|
|
17506
17566
|
}) => {
|
|
17507
|
-
return /* @__PURE__ */
|
|
17567
|
+
return /* @__PURE__ */ jsxs96(
|
|
17508
17568
|
ParameterShell,
|
|
17509
17569
|
{
|
|
17510
17570
|
"data-testid": "parameter-richtext",
|
|
@@ -17518,13 +17578,13 @@ var ParameterRichText = ({
|
|
|
17518
17578
|
captionTestId,
|
|
17519
17579
|
menuItems,
|
|
17520
17580
|
children: [
|
|
17521
|
-
/* @__PURE__ */
|
|
17522
|
-
menuItems ? /* @__PURE__ */
|
|
17581
|
+
/* @__PURE__ */ jsx144(ParameterRichTextInner, { ...innerProps, children }),
|
|
17582
|
+
menuItems ? /* @__PURE__ */ jsx144(ParameterMenuButton, { label: `${label2} menu`, children: /* @__PURE__ */ jsx144(Fragment19, { children: menuItems }) }) : null
|
|
17523
17583
|
]
|
|
17524
17584
|
}
|
|
17525
17585
|
);
|
|
17526
17586
|
};
|
|
17527
|
-
var editorContainerWrapper =
|
|
17587
|
+
var editorContainerWrapper = css107`
|
|
17528
17588
|
position: relative;
|
|
17529
17589
|
|
|
17530
17590
|
&::before {
|
|
@@ -17540,12 +17600,12 @@ var editorContainerWrapper = css106`
|
|
|
17540
17600
|
z-index: 2;
|
|
17541
17601
|
}
|
|
17542
17602
|
`;
|
|
17543
|
-
var editorWrapper =
|
|
17603
|
+
var editorWrapper = css107`
|
|
17544
17604
|
display: flex;
|
|
17545
17605
|
flex-flow: column;
|
|
17546
17606
|
flex-grow: 1;
|
|
17547
17607
|
`;
|
|
17548
|
-
var editorContainer =
|
|
17608
|
+
var editorContainer = css107`
|
|
17549
17609
|
${scrollbarStyles}
|
|
17550
17610
|
background: var(--white);
|
|
17551
17611
|
border-radius: var(--rounded-sm);
|
|
@@ -17577,7 +17637,7 @@ var editorContainer = css106`
|
|
|
17577
17637
|
max-height: unset;
|
|
17578
17638
|
}
|
|
17579
17639
|
`;
|
|
17580
|
-
var editorContainerOverflowWrapper =
|
|
17640
|
+
var editorContainerOverflowWrapper = css107`
|
|
17581
17641
|
overflow: hidden;
|
|
17582
17642
|
pointer-events: none;
|
|
17583
17643
|
|
|
@@ -17585,7 +17645,7 @@ var editorContainerOverflowWrapper = css106`
|
|
|
17585
17645
|
pointer-events: auto;
|
|
17586
17646
|
}
|
|
17587
17647
|
`;
|
|
17588
|
-
var editorPlaceholder =
|
|
17648
|
+
var editorPlaceholder = css107`
|
|
17589
17649
|
color: var(--gray-500);
|
|
17590
17650
|
font-style: italic;
|
|
17591
17651
|
/* 1px is added to make sure caret is clearly visible when field is focused
|
|
@@ -17596,7 +17656,7 @@ var editorPlaceholder = css106`
|
|
|
17596
17656
|
top: calc(1rem + var(--spacing-sm));
|
|
17597
17657
|
user-select: none;
|
|
17598
17658
|
`;
|
|
17599
|
-
var editorInput =
|
|
17659
|
+
var editorInput = css107`
|
|
17600
17660
|
min-height: 100%;
|
|
17601
17661
|
flex-grow: 1;
|
|
17602
17662
|
|
|
@@ -17669,8 +17729,8 @@ var ParameterRichTextInner = ({
|
|
|
17669
17729
|
},
|
|
17670
17730
|
editable: !richTextProps.readOnly
|
|
17671
17731
|
};
|
|
17672
|
-
return /* @__PURE__ */
|
|
17673
|
-
/* @__PURE__ */
|
|
17732
|
+
return /* @__PURE__ */ jsxs96(Fragment19, { children: [
|
|
17733
|
+
/* @__PURE__ */ jsx144("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx144(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx144(RichText, { ...richTextProps, children }) }) }),
|
|
17674
17734
|
editorFooter ? editorFooter : null
|
|
17675
17735
|
] });
|
|
17676
17736
|
};
|
|
@@ -17737,8 +17797,8 @@ var RichText = ({
|
|
|
17737
17797
|
setPortalContainerRef(_portalContainerRef);
|
|
17738
17798
|
}
|
|
17739
17799
|
};
|
|
17740
|
-
return /* @__PURE__ */
|
|
17741
|
-
readOnly || minimalInteractivity ? null : /* @__PURE__ */
|
|
17800
|
+
return /* @__PURE__ */ jsxs96(Fragment19, { children: [
|
|
17801
|
+
readOnly || minimalInteractivity ? null : /* @__PURE__ */ jsx144(
|
|
17742
17802
|
RichTextToolbar_default,
|
|
17743
17803
|
{
|
|
17744
17804
|
config,
|
|
@@ -17747,14 +17807,14 @@ var RichText = ({
|
|
|
17747
17807
|
onInsertAsset
|
|
17748
17808
|
}
|
|
17749
17809
|
),
|
|
17750
|
-
/* @__PURE__ */
|
|
17810
|
+
/* @__PURE__ */ jsxs96(
|
|
17751
17811
|
"div",
|
|
17752
17812
|
{
|
|
17753
17813
|
css: editorContainerWrapper,
|
|
17754
17814
|
"data-editor-container-wrapper": true,
|
|
17755
17815
|
ref: onPortalContainerRef,
|
|
17756
17816
|
children: [
|
|
17757
|
-
/* @__PURE__ */
|
|
17817
|
+
/* @__PURE__ */ jsxs96(
|
|
17758
17818
|
"div",
|
|
17759
17819
|
{
|
|
17760
17820
|
css: editorContainer,
|
|
@@ -17762,33 +17822,33 @@ var RichText = ({
|
|
|
17762
17822
|
ref: onEditorContainerRef,
|
|
17763
17823
|
"data-testid": "value-container",
|
|
17764
17824
|
children: [
|
|
17765
|
-
/* @__PURE__ */
|
|
17825
|
+
/* @__PURE__ */ jsx144(
|
|
17766
17826
|
RichTextPlugin,
|
|
17767
17827
|
{
|
|
17768
|
-
contentEditable: /* @__PURE__ */
|
|
17769
|
-
placeholder: /* @__PURE__ */
|
|
17828
|
+
contentEditable: /* @__PURE__ */ jsx144(ContentEditable, { css: editorInput, className: editorInputClassName }),
|
|
17829
|
+
placeholder: /* @__PURE__ */ jsx144("div", { css: editorPlaceholder, "data-placeholder": true, children: placeholder != null ? placeholder : readOnly ? "empty" : "start editing..." }),
|
|
17770
17830
|
ErrorBoundary: LexicalErrorBoundary
|
|
17771
17831
|
}
|
|
17772
17832
|
),
|
|
17773
|
-
/* @__PURE__ */
|
|
17774
|
-
/* @__PURE__ */
|
|
17775
|
-
/* @__PURE__ */
|
|
17776
|
-
/* @__PURE__ */
|
|
17833
|
+
/* @__PURE__ */ jsx144(ListPlugin, {}),
|
|
17834
|
+
/* @__PURE__ */ jsx144(ListIndentPlugin, { maxDepth: 4 }),
|
|
17835
|
+
/* @__PURE__ */ jsx144(TablePlugin, { hasCellMerge: false, hasCellBackgroundColor: false }),
|
|
17836
|
+
/* @__PURE__ */ jsx144("div", { css: editorContainerOverflowWrapper, "data-testid": "table-action-menu-plugin", children: editorContainerRef && portalContainerRef && !minimalInteractivity ? /* @__PURE__ */ jsx144(
|
|
17777
17837
|
TableActionMenuPlugin,
|
|
17778
17838
|
{
|
|
17779
17839
|
positioningAnchorEl: editorContainerRef,
|
|
17780
17840
|
menuPortalEl: portalContainerRef
|
|
17781
17841
|
}
|
|
17782
17842
|
) : null }),
|
|
17783
|
-
editorContainerRef && !minimalInteractivity ? /* @__PURE__ */
|
|
17784
|
-
readOnly ? null : /* @__PURE__ */
|
|
17785
|
-
/* @__PURE__ */
|
|
17786
|
-
/* @__PURE__ */
|
|
17843
|
+
editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ jsx144(TableCellResizerPlugin, { positioningAnchorEl: editorContainerRef }) : null,
|
|
17844
|
+
readOnly ? null : /* @__PURE__ */ jsx144(HistoryPlugin, {}),
|
|
17845
|
+
/* @__PURE__ */ jsx144(DisableStylesPlugin, {}),
|
|
17846
|
+
/* @__PURE__ */ jsx144(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS })
|
|
17787
17847
|
]
|
|
17788
17848
|
}
|
|
17789
17849
|
),
|
|
17790
|
-
/* @__PURE__ */
|
|
17791
|
-
editorContainerRef ? /* @__PURE__ */
|
|
17850
|
+
/* @__PURE__ */ jsx144(Fragment19, { children }),
|
|
17851
|
+
editorContainerRef ? /* @__PURE__ */ jsx144(
|
|
17792
17852
|
LinkNodePlugin,
|
|
17793
17853
|
{
|
|
17794
17854
|
onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
|
|
@@ -17799,8 +17859,8 @@ var RichText = ({
|
|
|
17799
17859
|
positioningAnchorEl: editorContainerRef
|
|
17800
17860
|
}
|
|
17801
17861
|
) : null,
|
|
17802
|
-
/* @__PURE__ */
|
|
17803
|
-
/* @__PURE__ */
|
|
17862
|
+
/* @__PURE__ */ jsx144(TableSelectionPlugin_default, {}),
|
|
17863
|
+
/* @__PURE__ */ jsx144(ImprovedAssetSelectionPlugin_default, {})
|
|
17804
17864
|
]
|
|
17805
17865
|
}
|
|
17806
17866
|
)
|
|
@@ -17809,17 +17869,17 @@ var RichText = ({
|
|
|
17809
17869
|
|
|
17810
17870
|
// src/components/ParameterInputs/ParameterSelect.tsx
|
|
17811
17871
|
import { forwardRef as forwardRef29 } from "react";
|
|
17812
|
-
import { jsx as
|
|
17872
|
+
import { jsx as jsx145, jsxs as jsxs97 } from "@emotion/react/jsx-runtime";
|
|
17813
17873
|
var ParameterSelect = forwardRef29(
|
|
17814
17874
|
({ defaultOption, options, ...props }, ref) => {
|
|
17815
17875
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
17816
|
-
return /* @__PURE__ */
|
|
17876
|
+
return /* @__PURE__ */ jsx145(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx145(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
|
|
17817
17877
|
}
|
|
17818
17878
|
);
|
|
17819
17879
|
var ParameterSelectInner = forwardRef29(
|
|
17820
17880
|
({ defaultOption, options, ...props }, ref) => {
|
|
17821
17881
|
const { id, label: label2, hiddenLabel } = useParameterShell();
|
|
17822
|
-
return /* @__PURE__ */
|
|
17882
|
+
return /* @__PURE__ */ jsxs97(
|
|
17823
17883
|
"select",
|
|
17824
17884
|
{
|
|
17825
17885
|
css: [input3, selectInput],
|
|
@@ -17828,10 +17888,10 @@ var ParameterSelectInner = forwardRef29(
|
|
|
17828
17888
|
ref,
|
|
17829
17889
|
...props,
|
|
17830
17890
|
children: [
|
|
17831
|
-
defaultOption ? /* @__PURE__ */
|
|
17891
|
+
defaultOption ? /* @__PURE__ */ jsx145("option", { value: "", children: defaultOption }) : null,
|
|
17832
17892
|
options.map((option) => {
|
|
17833
17893
|
var _a;
|
|
17834
|
-
return /* @__PURE__ */
|
|
17894
|
+
return /* @__PURE__ */ jsx145("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
|
|
17835
17895
|
})
|
|
17836
17896
|
]
|
|
17837
17897
|
}
|
|
@@ -17841,11 +17901,11 @@ var ParameterSelectInner = forwardRef29(
|
|
|
17841
17901
|
|
|
17842
17902
|
// src/components/ParameterInputs/ParameterSelectSlider.tsx
|
|
17843
17903
|
import { forwardRef as forwardRef30, useCallback as useCallback15, useMemo as useMemo11 } from "react";
|
|
17844
|
-
import { jsx as
|
|
17904
|
+
import { jsx as jsx146 } from "@emotion/react/jsx-runtime";
|
|
17845
17905
|
var ParameterSelectSlider = forwardRef30(
|
|
17846
17906
|
(props, ref) => {
|
|
17847
17907
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
17848
|
-
return /* @__PURE__ */
|
|
17908
|
+
return /* @__PURE__ */ jsx146(ParameterShell, { "data-testid": "parameter-select-slider", ...shellProps, children: /* @__PURE__ */ jsx146(ParameterSelectSliderInner, { ref, ...innerProps }) });
|
|
17849
17909
|
}
|
|
17850
17910
|
);
|
|
17851
17911
|
var ParameterSelectSliderInner = forwardRef30(({ options, value, onChange, ...props }, ref) => {
|
|
@@ -17868,7 +17928,7 @@ var ParameterSelectSliderInner = forwardRef30(({ options, value, onChange, ...pr
|
|
|
17868
17928
|
},
|
|
17869
17929
|
[options, onChange]
|
|
17870
17930
|
);
|
|
17871
|
-
return /* @__PURE__ */
|
|
17931
|
+
return /* @__PURE__ */ jsx146(
|
|
17872
17932
|
Slider,
|
|
17873
17933
|
{
|
|
17874
17934
|
ref,
|
|
@@ -17887,14 +17947,14 @@ ParameterSelectSliderInner.displayName = "ParameterSelectSliderInner";
|
|
|
17887
17947
|
|
|
17888
17948
|
// src/components/ParameterInputs/ParameterTextarea.tsx
|
|
17889
17949
|
import { forwardRef as forwardRef31 } from "react";
|
|
17890
|
-
import { jsx as
|
|
17950
|
+
import { jsx as jsx147 } from "@emotion/react/jsx-runtime";
|
|
17891
17951
|
var ParameterTextarea = forwardRef31((props, ref) => {
|
|
17892
17952
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
17893
|
-
return /* @__PURE__ */
|
|
17953
|
+
return /* @__PURE__ */ jsx147(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx147(ParameterTextareaInner, { ref, ...innerProps }) });
|
|
17894
17954
|
});
|
|
17895
17955
|
var ParameterTextareaInner = forwardRef31(({ ...props }, ref) => {
|
|
17896
17956
|
const { id, label: label2, hiddenLabel } = useParameterShell();
|
|
17897
|
-
return /* @__PURE__ */
|
|
17957
|
+
return /* @__PURE__ */ jsx147(
|
|
17898
17958
|
"textarea",
|
|
17899
17959
|
{
|
|
17900
17960
|
css: [input3, textarea2],
|
|
@@ -17908,18 +17968,18 @@ var ParameterTextareaInner = forwardRef31(({ ...props }, ref) => {
|
|
|
17908
17968
|
|
|
17909
17969
|
// src/components/ParameterInputs/ParameterToggle.tsx
|
|
17910
17970
|
import { forwardRef as forwardRef32 } from "react";
|
|
17911
|
-
import { jsx as
|
|
17971
|
+
import { jsx as jsx148, jsxs as jsxs98 } from "@emotion/react/jsx-runtime";
|
|
17912
17972
|
var ParameterToggle = forwardRef32((props, ref) => {
|
|
17913
17973
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
17914
|
-
return /* @__PURE__ */
|
|
17974
|
+
return /* @__PURE__ */ jsx148(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx148(ParameterToggleInner, { ref, ...innerProps }) });
|
|
17915
17975
|
});
|
|
17916
17976
|
ParameterToggle.displayName = "ParameterToggle";
|
|
17917
17977
|
var ParameterToggleInner = forwardRef32(
|
|
17918
17978
|
({ children, ...props }, ref) => {
|
|
17919
17979
|
const { type, withoutIndeterminateState, ...otherProps } = props;
|
|
17920
17980
|
const { id, label: label2 } = useParameterShell();
|
|
17921
|
-
return /* @__PURE__ */
|
|
17922
|
-
/* @__PURE__ */
|
|
17981
|
+
return /* @__PURE__ */ jsxs98("label", { css: inputToggleLabel2, children: [
|
|
17982
|
+
/* @__PURE__ */ jsx148(
|
|
17923
17983
|
"input",
|
|
17924
17984
|
{
|
|
17925
17985
|
css: [
|
|
@@ -17932,7 +17992,7 @@ var ParameterToggleInner = forwardRef32(
|
|
|
17932
17992
|
...otherProps
|
|
17933
17993
|
}
|
|
17934
17994
|
),
|
|
17935
|
-
/* @__PURE__ */
|
|
17995
|
+
/* @__PURE__ */ jsx148("span", { css: inlineLabel2, children: label2 }),
|
|
17936
17996
|
children
|
|
17937
17997
|
] });
|
|
17938
17998
|
}
|
|
@@ -17940,8 +18000,8 @@ var ParameterToggleInner = forwardRef32(
|
|
|
17940
18000
|
ParameterToggleInner.displayName = "ParameterToggleInner";
|
|
17941
18001
|
|
|
17942
18002
|
// src/components/ProgressBar/ProgressBar.styles.ts
|
|
17943
|
-
import { css as
|
|
17944
|
-
var container4 =
|
|
18003
|
+
import { css as css108, keyframes as keyframes4 } from "@emotion/react";
|
|
18004
|
+
var container4 = css108`
|
|
17945
18005
|
background: var(--gray-50);
|
|
17946
18006
|
margin-block: var(--spacing-sm);
|
|
17947
18007
|
position: relative;
|
|
@@ -17951,13 +18011,13 @@ var container4 = css107`
|
|
|
17951
18011
|
border: solid 1px var(--gray-300);
|
|
17952
18012
|
`;
|
|
17953
18013
|
var themeMap = {
|
|
17954
|
-
primary:
|
|
18014
|
+
primary: css108`
|
|
17955
18015
|
--progress-color: var(--accent-light);
|
|
17956
18016
|
`,
|
|
17957
|
-
secondary:
|
|
18017
|
+
secondary: css108`
|
|
17958
18018
|
--progress-color: var(--accent-alt-light);
|
|
17959
18019
|
`,
|
|
17960
|
-
destructive:
|
|
18020
|
+
destructive: css108`
|
|
17961
18021
|
--progress-color: var(--brand-secondary-5);
|
|
17962
18022
|
`
|
|
17963
18023
|
};
|
|
@@ -17969,10 +18029,10 @@ var slidingBackgroundPosition = keyframes4`
|
|
|
17969
18029
|
background-position: 64px 0;
|
|
17970
18030
|
}
|
|
17971
18031
|
`;
|
|
17972
|
-
var determinate =
|
|
18032
|
+
var determinate = css108`
|
|
17973
18033
|
background-color: var(--progress-color);
|
|
17974
18034
|
`;
|
|
17975
|
-
var indeterminate =
|
|
18035
|
+
var indeterminate = css108`
|
|
17976
18036
|
background-image: linear-gradient(
|
|
17977
18037
|
45deg,
|
|
17978
18038
|
var(--progress-color) 25%,
|
|
@@ -17986,7 +18046,7 @@ var indeterminate = css107`
|
|
|
17986
18046
|
background-size: 64px 64px;
|
|
17987
18047
|
animation: ${slidingBackgroundPosition} 1s linear infinite;
|
|
17988
18048
|
`;
|
|
17989
|
-
var bar =
|
|
18049
|
+
var bar = css108`
|
|
17990
18050
|
position: absolute;
|
|
17991
18051
|
inset: 0;
|
|
17992
18052
|
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
@@ -17994,7 +18054,7 @@ var bar = css107`
|
|
|
17994
18054
|
`;
|
|
17995
18055
|
|
|
17996
18056
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
17997
|
-
import { jsx as
|
|
18057
|
+
import { jsx as jsx149 } from "@emotion/react/jsx-runtime";
|
|
17998
18058
|
function ProgressBar({
|
|
17999
18059
|
current,
|
|
18000
18060
|
max,
|
|
@@ -18004,7 +18064,7 @@ function ProgressBar({
|
|
|
18004
18064
|
}) {
|
|
18005
18065
|
const valueNow = Math.min(current, max);
|
|
18006
18066
|
const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
|
|
18007
|
-
return /* @__PURE__ */
|
|
18067
|
+
return /* @__PURE__ */ jsx149(
|
|
18008
18068
|
"div",
|
|
18009
18069
|
{
|
|
18010
18070
|
css: container4,
|
|
@@ -18015,7 +18075,7 @@ function ProgressBar({
|
|
|
18015
18075
|
"aria-valuemax": max,
|
|
18016
18076
|
"aria-valuenow": valueNow,
|
|
18017
18077
|
...props,
|
|
18018
|
-
children: /* @__PURE__ */
|
|
18078
|
+
children: /* @__PURE__ */ jsx149(
|
|
18019
18079
|
"div",
|
|
18020
18080
|
{
|
|
18021
18081
|
css: [
|
|
@@ -18034,28 +18094,28 @@ function ProgressBar({
|
|
|
18034
18094
|
}
|
|
18035
18095
|
|
|
18036
18096
|
// src/components/ProgressList/ProgressList.tsx
|
|
18037
|
-
import { css as
|
|
18097
|
+
import { css as css110 } from "@emotion/react";
|
|
18038
18098
|
import { CgCheckO as CgCheckO2 } from "@react-icons/all-files/cg/CgCheckO";
|
|
18039
18099
|
import { CgRadioCheck } from "@react-icons/all-files/cg/CgRadioCheck";
|
|
18040
18100
|
import { CgRecord } from "@react-icons/all-files/cg/CgRecord";
|
|
18041
18101
|
import { useMemo as useMemo12 } from "react";
|
|
18042
18102
|
|
|
18043
18103
|
// src/components/ProgressList/styles/ProgressList.styles.ts
|
|
18044
|
-
import { css as
|
|
18045
|
-
var progressListStyles =
|
|
18104
|
+
import { css as css109 } from "@emotion/react";
|
|
18105
|
+
var progressListStyles = css109`
|
|
18046
18106
|
display: flex;
|
|
18047
18107
|
flex-direction: column;
|
|
18048
18108
|
gap: var(--spacing-sm);
|
|
18049
18109
|
list-style-type: none;
|
|
18050
18110
|
`;
|
|
18051
|
-
var progressListItemStyles =
|
|
18111
|
+
var progressListItemStyles = css109`
|
|
18052
18112
|
display: flex;
|
|
18053
18113
|
gap: var(--spacing-base);
|
|
18054
18114
|
align-items: center;
|
|
18055
18115
|
`;
|
|
18056
18116
|
|
|
18057
18117
|
// src/components/ProgressList/ProgressList.tsx
|
|
18058
|
-
import { jsx as
|
|
18118
|
+
import { jsx as jsx150, jsxs as jsxs99 } from "@emotion/react/jsx-runtime";
|
|
18059
18119
|
var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
18060
18120
|
const itemsWithStatus = useMemo12(() => {
|
|
18061
18121
|
const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
|
|
@@ -18069,8 +18129,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
|
18069
18129
|
return { ...item, status };
|
|
18070
18130
|
});
|
|
18071
18131
|
}, [items, inProgressId]);
|
|
18072
|
-
return /* @__PURE__ */
|
|
18073
|
-
return /* @__PURE__ */
|
|
18132
|
+
return /* @__PURE__ */ jsx150("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label: label2, status, error, errorLevel }) => {
|
|
18133
|
+
return /* @__PURE__ */ jsx150(
|
|
18074
18134
|
ProgressListItem,
|
|
18075
18135
|
{
|
|
18076
18136
|
status,
|
|
@@ -18103,12 +18163,12 @@ var ProgressListItem = ({
|
|
|
18103
18163
|
}, [status, error]);
|
|
18104
18164
|
const statusStyles = useMemo12(() => {
|
|
18105
18165
|
if (error) {
|
|
18106
|
-
return errorLevel === "caution" ?
|
|
18166
|
+
return errorLevel === "caution" ? css110`
|
|
18107
18167
|
color: rgb(161, 98, 7);
|
|
18108
18168
|
& svg {
|
|
18109
18169
|
color: rgb(250, 204, 21);
|
|
18110
18170
|
}
|
|
18111
|
-
` :
|
|
18171
|
+
` : css110`
|
|
18112
18172
|
color: rgb(185, 28, 28);
|
|
18113
18173
|
& svg {
|
|
18114
18174
|
color: var(--brand-primary-2);
|
|
@@ -18116,37 +18176,37 @@ var ProgressListItem = ({
|
|
|
18116
18176
|
`;
|
|
18117
18177
|
}
|
|
18118
18178
|
const colorPerStatus = {
|
|
18119
|
-
completed:
|
|
18179
|
+
completed: css110`
|
|
18120
18180
|
opacity: 0.75;
|
|
18121
18181
|
`,
|
|
18122
|
-
inProgress:
|
|
18182
|
+
inProgress: css110`
|
|
18123
18183
|
-webkit-text-stroke-width: thin;
|
|
18124
18184
|
`,
|
|
18125
|
-
queued:
|
|
18185
|
+
queued: css110`
|
|
18126
18186
|
opacity: 0.5;
|
|
18127
18187
|
`
|
|
18128
18188
|
};
|
|
18129
18189
|
return colorPerStatus[status];
|
|
18130
18190
|
}, [status, error, errorLevel]);
|
|
18131
|
-
return /* @__PURE__ */
|
|
18132
|
-
/* @__PURE__ */
|
|
18133
|
-
/* @__PURE__ */
|
|
18191
|
+
return /* @__PURE__ */ jsxs99("li", { css: [progressListItemStyles, statusStyles], children: [
|
|
18192
|
+
/* @__PURE__ */ jsx150(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx150("div", { children: /* @__PURE__ */ jsx150(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
|
|
18193
|
+
/* @__PURE__ */ jsxs99("div", { children: [
|
|
18134
18194
|
children,
|
|
18135
|
-
/* @__PURE__ */
|
|
18195
|
+
/* @__PURE__ */ jsx150("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
|
|
18136
18196
|
] })
|
|
18137
18197
|
] });
|
|
18138
18198
|
};
|
|
18139
18199
|
|
|
18140
18200
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
18141
|
-
import { css as
|
|
18201
|
+
import { css as css112 } from "@emotion/react";
|
|
18142
18202
|
import { useCallback as useCallback16, useEffect as useEffect28, useMemo as useMemo13, useRef as useRef17, useState as useState28 } from "react";
|
|
18143
18203
|
|
|
18144
18204
|
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
18145
|
-
import { css as
|
|
18146
|
-
var segmentedControlRootStyles =
|
|
18205
|
+
import { css as css111 } from "@emotion/react";
|
|
18206
|
+
var segmentedControlRootStyles = css111`
|
|
18147
18207
|
position: relative;
|
|
18148
18208
|
`;
|
|
18149
|
-
var segmentedControlScrollIndicatorsStyles =
|
|
18209
|
+
var segmentedControlScrollIndicatorsStyles = css111`
|
|
18150
18210
|
position: absolute;
|
|
18151
18211
|
inset: 0;
|
|
18152
18212
|
z-index: 1;
|
|
@@ -18174,17 +18234,17 @@ var segmentedControlScrollIndicatorsStyles = css110`
|
|
|
18174
18234
|
background: linear-gradient(to left, var(--background-color) 10%, transparent);
|
|
18175
18235
|
}
|
|
18176
18236
|
`;
|
|
18177
|
-
var segmentedControlScrollIndicatorStartVisibleStyles =
|
|
18237
|
+
var segmentedControlScrollIndicatorStartVisibleStyles = css111`
|
|
18178
18238
|
&::before {
|
|
18179
18239
|
opacity: 1;
|
|
18180
18240
|
}
|
|
18181
18241
|
`;
|
|
18182
|
-
var segmentedControlScrollIndicatorEndVisibleStyles =
|
|
18242
|
+
var segmentedControlScrollIndicatorEndVisibleStyles = css111`
|
|
18183
18243
|
&::after {
|
|
18184
18244
|
opacity: 1;
|
|
18185
18245
|
}
|
|
18186
18246
|
`;
|
|
18187
|
-
var segmentedControlWrapperStyles =
|
|
18247
|
+
var segmentedControlWrapperStyles = css111`
|
|
18188
18248
|
overflow-y: auto;
|
|
18189
18249
|
scroll-behavior: smooth;
|
|
18190
18250
|
scrollbar-width: none;
|
|
@@ -18193,7 +18253,7 @@ var segmentedControlWrapperStyles = css110`
|
|
|
18193
18253
|
height: 0px;
|
|
18194
18254
|
}
|
|
18195
18255
|
`;
|
|
18196
|
-
var segmentedControlStyles =
|
|
18256
|
+
var segmentedControlStyles = css111`
|
|
18197
18257
|
--segmented-control-rounded-value: var(--rounded-base);
|
|
18198
18258
|
--segmented-control-border-width: 1px;
|
|
18199
18259
|
--segmented-control-selected-color: var(--accent-dark);
|
|
@@ -18213,14 +18273,14 @@ var segmentedControlStyles = css110`
|
|
|
18213
18273
|
border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
|
|
18214
18274
|
font-size: var(--fs-xs);
|
|
18215
18275
|
`;
|
|
18216
|
-
var segmentedControlVerticalStyles =
|
|
18276
|
+
var segmentedControlVerticalStyles = css111`
|
|
18217
18277
|
flex-direction: column;
|
|
18218
18278
|
--segmented-control-first-border-radius: var(--segmented-control-rounded-value)
|
|
18219
18279
|
var(--segmented-control-rounded-value) 0 0;
|
|
18220
18280
|
--segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
|
|
18221
18281
|
var(--segmented-control-rounded-value);
|
|
18222
18282
|
`;
|
|
18223
|
-
var segmentedControlItemStyles =
|
|
18283
|
+
var segmentedControlItemStyles = css111`
|
|
18224
18284
|
position: relative;
|
|
18225
18285
|
|
|
18226
18286
|
&:first-of-type label {
|
|
@@ -18242,14 +18302,14 @@ var segmentedControlItemStyles = css110`
|
|
|
18242
18302
|
|
|
18243
18303
|
/* Hide separator before next item when next item is hovered or selected */
|
|
18244
18304
|
&:has(+ *:hover) label,
|
|
18245
|
-
&:has(+
|
|
18305
|
+
&:has(+ * :checked) label {
|
|
18246
18306
|
box-shadow: var(--segmented-control-border-width) 0 0 0 transparent;
|
|
18247
18307
|
}
|
|
18248
18308
|
`;
|
|
18249
|
-
var segmentedControlInputStyles =
|
|
18309
|
+
var segmentedControlInputStyles = css111`
|
|
18250
18310
|
${accessibleHidden}
|
|
18251
18311
|
`;
|
|
18252
|
-
var segmentedControlLabelStyles =
|
|
18312
|
+
var segmentedControlLabelStyles = css111`
|
|
18253
18313
|
position: relative;
|
|
18254
18314
|
display: flex;
|
|
18255
18315
|
align-items: center;
|
|
@@ -18284,25 +18344,25 @@ var segmentedControlLabelStyles = css110`
|
|
|
18284
18344
|
background-color: var(--gray-400);
|
|
18285
18345
|
}
|
|
18286
18346
|
`;
|
|
18287
|
-
var segmentedControlLabelIconOnlyStyles =
|
|
18347
|
+
var segmentedControlLabelIconOnlyStyles = css111`
|
|
18288
18348
|
padding-inline: 0.5em;
|
|
18289
18349
|
`;
|
|
18290
|
-
var segmentedControlLabelCheckStyles =
|
|
18350
|
+
var segmentedControlLabelCheckStyles = css111`
|
|
18291
18351
|
opacity: 0.5;
|
|
18292
18352
|
`;
|
|
18293
|
-
var segmentedControlLabelContentStyles =
|
|
18353
|
+
var segmentedControlLabelContentStyles = css111`
|
|
18294
18354
|
display: flex;
|
|
18295
18355
|
align-items: center;
|
|
18296
18356
|
justify-content: center;
|
|
18297
18357
|
gap: var(--spacing-sm);
|
|
18298
18358
|
height: 100%;
|
|
18299
18359
|
`;
|
|
18300
|
-
var segmentedControlLabelTextStyles =
|
|
18360
|
+
var segmentedControlLabelTextStyles = css111`
|
|
18301
18361
|
white-space: nowrap;
|
|
18302
18362
|
`;
|
|
18303
18363
|
|
|
18304
18364
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
18305
|
-
import { jsx as
|
|
18365
|
+
import { jsx as jsx151, jsxs as jsxs100 } from "@emotion/react/jsx-runtime";
|
|
18306
18366
|
var SegmentedControl = ({
|
|
18307
18367
|
name,
|
|
18308
18368
|
options,
|
|
@@ -18331,10 +18391,10 @@ var SegmentedControl = ({
|
|
|
18331
18391
|
);
|
|
18332
18392
|
const sizeStyles = useMemo13(() => {
|
|
18333
18393
|
const map = {
|
|
18334
|
-
sm:
|
|
18335
|
-
md:
|
|
18336
|
-
lg:
|
|
18337
|
-
xl:
|
|
18394
|
+
sm: css112({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
|
|
18395
|
+
md: css112({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
|
|
18396
|
+
lg: css112({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
|
|
18397
|
+
xl: css112({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
|
|
18338
18398
|
};
|
|
18339
18399
|
return map[size];
|
|
18340
18400
|
}, [size]);
|
|
@@ -18362,8 +18422,8 @@ var SegmentedControl = ({
|
|
|
18362
18422
|
wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
|
|
18363
18423
|
};
|
|
18364
18424
|
}, []);
|
|
18365
|
-
return /* @__PURE__ */
|
|
18366
|
-
/* @__PURE__ */
|
|
18425
|
+
return /* @__PURE__ */ jsxs100("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
|
|
18426
|
+
/* @__PURE__ */ jsx151("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ jsx151(
|
|
18367
18427
|
"div",
|
|
18368
18428
|
{
|
|
18369
18429
|
css: [
|
|
@@ -18380,12 +18440,12 @@ var SegmentedControl = ({
|
|
|
18380
18440
|
const text = option.label ? option.label : option.icon ? null : String(option.value);
|
|
18381
18441
|
const isDisabled = disabled2 || option.disabled;
|
|
18382
18442
|
const isChecked = option.value === value;
|
|
18383
|
-
return /* @__PURE__ */
|
|
18443
|
+
return /* @__PURE__ */ jsx151(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx151(
|
|
18384
18444
|
"div",
|
|
18385
18445
|
{
|
|
18386
18446
|
css: segmentedControlItemStyles,
|
|
18387
18447
|
"data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
|
|
18388
|
-
children: /* @__PURE__ */
|
|
18448
|
+
children: /* @__PURE__ */ jsxs100(
|
|
18389
18449
|
"label",
|
|
18390
18450
|
{
|
|
18391
18451
|
css: [
|
|
@@ -18394,7 +18454,7 @@ var SegmentedControl = ({
|
|
|
18394
18454
|
isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
|
|
18395
18455
|
],
|
|
18396
18456
|
children: [
|
|
18397
|
-
/* @__PURE__ */
|
|
18457
|
+
/* @__PURE__ */ jsx151(
|
|
18398
18458
|
"input",
|
|
18399
18459
|
{
|
|
18400
18460
|
css: segmentedControlInputStyles,
|
|
@@ -18406,9 +18466,9 @@ var SegmentedControl = ({
|
|
|
18406
18466
|
disabled: isDisabled
|
|
18407
18467
|
}
|
|
18408
18468
|
),
|
|
18409
|
-
/* @__PURE__ */
|
|
18410
|
-
!option.icon ? null : /* @__PURE__ */
|
|
18411
|
-
!text || hideOptionText ? null : /* @__PURE__ */
|
|
18469
|
+
/* @__PURE__ */ jsxs100("span", { css: segmentedControlLabelContentStyles, children: [
|
|
18470
|
+
!option.icon ? null : /* @__PURE__ */ jsx151(Icon, { icon: option.icon, size: iconSize2, iconColor: "currentColor" }),
|
|
18471
|
+
!text || hideOptionText ? null : /* @__PURE__ */ jsx151("span", { css: segmentedControlLabelTextStyles, children: text })
|
|
18412
18472
|
] })
|
|
18413
18473
|
]
|
|
18414
18474
|
}
|
|
@@ -18418,7 +18478,7 @@ var SegmentedControl = ({
|
|
|
18418
18478
|
})
|
|
18419
18479
|
}
|
|
18420
18480
|
) }),
|
|
18421
|
-
/* @__PURE__ */
|
|
18481
|
+
/* @__PURE__ */ jsx151(
|
|
18422
18482
|
"div",
|
|
18423
18483
|
{
|
|
18424
18484
|
css: [
|
|
@@ -18432,18 +18492,18 @@ var SegmentedControl = ({
|
|
|
18432
18492
|
};
|
|
18433
18493
|
|
|
18434
18494
|
// src/components/Skeleton/Skeleton.styles.ts
|
|
18435
|
-
import { css as
|
|
18495
|
+
import { css as css113, keyframes as keyframes5 } from "@emotion/react";
|
|
18436
18496
|
var lightFadingOut = keyframes5`
|
|
18437
18497
|
from { opacity: 0.1; }
|
|
18438
18498
|
to { opacity: 0.025; }
|
|
18439
18499
|
`;
|
|
18440
|
-
var skeletonStyles =
|
|
18500
|
+
var skeletonStyles = css113`
|
|
18441
18501
|
animation: ${lightFadingOut} 1s ease-out infinite alternate;
|
|
18442
18502
|
background-color: var(--gray-500);
|
|
18443
18503
|
`;
|
|
18444
18504
|
|
|
18445
18505
|
// src/components/Skeleton/Skeleton.tsx
|
|
18446
|
-
import { jsx as
|
|
18506
|
+
import { jsx as jsx152 } from "@emotion/react/jsx-runtime";
|
|
18447
18507
|
var Skeleton = ({
|
|
18448
18508
|
width = "100%",
|
|
18449
18509
|
height = "1.25rem",
|
|
@@ -18451,7 +18511,7 @@ var Skeleton = ({
|
|
|
18451
18511
|
circle = false,
|
|
18452
18512
|
children,
|
|
18453
18513
|
...otherProps
|
|
18454
|
-
}) => /* @__PURE__ */
|
|
18514
|
+
}) => /* @__PURE__ */ jsx152(
|
|
18455
18515
|
"div",
|
|
18456
18516
|
{
|
|
18457
18517
|
css: [
|
|
@@ -18474,8 +18534,8 @@ var Skeleton = ({
|
|
|
18474
18534
|
import { useEffect as useEffect29, useRef as useRef18 } from "react";
|
|
18475
18535
|
|
|
18476
18536
|
// src/components/Spinner/Spinner.styles.ts
|
|
18477
|
-
import { css as
|
|
18478
|
-
var SpinnerStyles =
|
|
18537
|
+
import { css as css114 } from "@emotion/react";
|
|
18538
|
+
var SpinnerStyles = css114`
|
|
18479
18539
|
--color: #00b4ff;
|
|
18480
18540
|
--speed: 5s;
|
|
18481
18541
|
--red: rgb(218, 63, 50);
|
|
@@ -18905,7 +18965,7 @@ var SpinnerStyles = css113`
|
|
|
18905
18965
|
`;
|
|
18906
18966
|
|
|
18907
18967
|
// src/components/Spinner/Spinner.tsx
|
|
18908
|
-
import { jsx as
|
|
18968
|
+
import { jsx as jsx153, jsxs as jsxs101 } from "@emotion/react/jsx-runtime";
|
|
18909
18969
|
var Spinner = ({
|
|
18910
18970
|
width,
|
|
18911
18971
|
label: label2,
|
|
@@ -18916,7 +18976,7 @@ var Spinner = ({
|
|
|
18916
18976
|
var _a, _b, _c;
|
|
18917
18977
|
(_c = ref.current) == null ? void 0 : _c.style.setProperty("--pyramid-size", ((_b = (_a = ref.current) == null ? void 0 : _a.clientWidth) != null ? _b : 200) / 6 + "px");
|
|
18918
18978
|
}, [width]);
|
|
18919
|
-
return /* @__PURE__ */
|
|
18979
|
+
return /* @__PURE__ */ jsxs101(
|
|
18920
18980
|
"div",
|
|
18921
18981
|
{
|
|
18922
18982
|
ref,
|
|
@@ -18928,51 +18988,51 @@ var Spinner = ({
|
|
|
18928
18988
|
css: SpinnerStyles,
|
|
18929
18989
|
className: `container${isPaused ? " paused" : ""}`,
|
|
18930
18990
|
children: [
|
|
18931
|
-
/* @__PURE__ */
|
|
18932
|
-
/* @__PURE__ */
|
|
18933
|
-
/* @__PURE__ */
|
|
18934
|
-
/* @__PURE__ */
|
|
18935
|
-
/* @__PURE__ */
|
|
18936
|
-
/* @__PURE__ */
|
|
18937
|
-
/* @__PURE__ */
|
|
18938
|
-
/* @__PURE__ */
|
|
18939
|
-
/* @__PURE__ */
|
|
18940
|
-
/* @__PURE__ */
|
|
18991
|
+
/* @__PURE__ */ jsx153("div", { className: "pyramid-container", children: /* @__PURE__ */ jsxs101("div", { className: "pyramid top", children: [
|
|
18992
|
+
/* @__PURE__ */ jsx153("div", { className: "side one" }),
|
|
18993
|
+
/* @__PURE__ */ jsx153("div", { className: "side two" }),
|
|
18994
|
+
/* @__PURE__ */ jsx153("div", { className: "side three" }),
|
|
18995
|
+
/* @__PURE__ */ jsx153("div", { className: "side four" }),
|
|
18996
|
+
/* @__PURE__ */ jsxs101("div", { className: "bottom-pyramid", children: [
|
|
18997
|
+
/* @__PURE__ */ jsx153("div", { className: "side five" }),
|
|
18998
|
+
/* @__PURE__ */ jsx153("div", { className: "side six" }),
|
|
18999
|
+
/* @__PURE__ */ jsx153("div", { className: "side seven" }),
|
|
19000
|
+
/* @__PURE__ */ jsx153("div", { className: "side eight" })
|
|
18941
19001
|
] })
|
|
18942
19002
|
] }) }),
|
|
18943
|
-
/* @__PURE__ */
|
|
18944
|
-
/* @__PURE__ */
|
|
18945
|
-
/* @__PURE__ */
|
|
18946
|
-
/* @__PURE__ */
|
|
18947
|
-
/* @__PURE__ */
|
|
18948
|
-
/* @__PURE__ */
|
|
18949
|
-
/* @__PURE__ */
|
|
19003
|
+
/* @__PURE__ */ jsx153("div", { className: "turning-circle" }),
|
|
19004
|
+
/* @__PURE__ */ jsxs101("div", { className: "pulsating-star delay-top-right", children: [
|
|
19005
|
+
/* @__PURE__ */ jsx153("div", { className: "star-inner star-center" }),
|
|
19006
|
+
/* @__PURE__ */ jsx153("div", { className: "star-inner star-top" }),
|
|
19007
|
+
/* @__PURE__ */ jsx153("div", { className: "star-inner star-bottom" }),
|
|
19008
|
+
/* @__PURE__ */ jsx153("div", { className: "star-inner star-left" }),
|
|
19009
|
+
/* @__PURE__ */ jsx153("div", { className: "star-inner star-right" })
|
|
18950
19010
|
] }),
|
|
18951
|
-
/* @__PURE__ */
|
|
18952
|
-
/* @__PURE__ */
|
|
18953
|
-
/* @__PURE__ */
|
|
18954
|
-
/* @__PURE__ */
|
|
18955
|
-
/* @__PURE__ */
|
|
18956
|
-
/* @__PURE__ */
|
|
19011
|
+
/* @__PURE__ */ jsxs101("div", { className: "pulsating-star delay-top-left-2", children: [
|
|
19012
|
+
/* @__PURE__ */ jsx153("div", { className: "star-inner star-center" }),
|
|
19013
|
+
/* @__PURE__ */ jsx153("div", { className: "star-inner star-top" }),
|
|
19014
|
+
/* @__PURE__ */ jsx153("div", { className: "star-inner star-bottom" }),
|
|
19015
|
+
/* @__PURE__ */ jsx153("div", { className: "star-inner star-left" }),
|
|
19016
|
+
/* @__PURE__ */ jsx153("div", { className: "star-inner star-right" })
|
|
18957
19017
|
] }),
|
|
18958
|
-
/* @__PURE__ */
|
|
18959
|
-
/* @__PURE__ */
|
|
18960
|
-
/* @__PURE__ */
|
|
18961
|
-
/* @__PURE__ */
|
|
18962
|
-
/* @__PURE__ */
|
|
19018
|
+
/* @__PURE__ */ jsxs101("div", { className: "pulsating-star delay-top-left", children: [
|
|
19019
|
+
/* @__PURE__ */ jsx153("div", { className: "star-inner star-top" }),
|
|
19020
|
+
/* @__PURE__ */ jsx153("div", { className: "star-inner star-bottom" }),
|
|
19021
|
+
/* @__PURE__ */ jsx153("div", { className: "star-inner star-left" }),
|
|
19022
|
+
/* @__PURE__ */ jsx153("div", { className: "star-inner star-right" })
|
|
18963
19023
|
] }),
|
|
18964
|
-
/* @__PURE__ */
|
|
18965
|
-
/* @__PURE__ */
|
|
18966
|
-
/* @__PURE__ */
|
|
18967
|
-
/* @__PURE__ */
|
|
18968
|
-
/* @__PURE__ */
|
|
19024
|
+
/* @__PURE__ */ jsxs101("div", { className: "pulsating-star delay-bottom-right", children: [
|
|
19025
|
+
/* @__PURE__ */ jsx153("div", { className: "star-inner star-top" }),
|
|
19026
|
+
/* @__PURE__ */ jsx153("div", { className: "star-inner star-bottom" }),
|
|
19027
|
+
/* @__PURE__ */ jsx153("div", { className: "star-inner star-left" }),
|
|
19028
|
+
/* @__PURE__ */ jsx153("div", { className: "star-inner star-right" })
|
|
18969
19029
|
] }),
|
|
18970
|
-
/* @__PURE__ */
|
|
18971
|
-
/* @__PURE__ */
|
|
18972
|
-
/* @__PURE__ */
|
|
18973
|
-
/* @__PURE__ */
|
|
18974
|
-
/* @__PURE__ */
|
|
18975
|
-
/* @__PURE__ */
|
|
19030
|
+
/* @__PURE__ */ jsxs101("div", { className: "pulsating-star delay-bottom-left", children: [
|
|
19031
|
+
/* @__PURE__ */ jsx153("div", { className: "star-inner star-center" }),
|
|
19032
|
+
/* @__PURE__ */ jsx153("div", { className: "star-inner star-top" }),
|
|
19033
|
+
/* @__PURE__ */ jsx153("div", { className: "star-inner star-bottom" }),
|
|
19034
|
+
/* @__PURE__ */ jsx153("div", { className: "star-inner star-left" }),
|
|
19035
|
+
/* @__PURE__ */ jsx153("div", { className: "star-inner star-right" })
|
|
18976
19036
|
] })
|
|
18977
19037
|
]
|
|
18978
19038
|
}
|
|
@@ -18981,7 +19041,7 @@ var Spinner = ({
|
|
|
18981
19041
|
|
|
18982
19042
|
// src/components/StackedModal/hooks/StackedModalProvider.tsx
|
|
18983
19043
|
import { createContext as createContext6, useCallback as useCallback17, useContext as useContext6, useMemo as useMemo14, useRef as useRef19, useState as useState29 } from "react";
|
|
18984
|
-
import { jsx as
|
|
19044
|
+
import { jsx as jsx154 } from "@emotion/react/jsx-runtime";
|
|
18985
19045
|
var StackedModalContext = createContext6(null);
|
|
18986
19046
|
function useStackedModal() {
|
|
18987
19047
|
const context = useContext6(StackedModalContext);
|
|
@@ -19048,15 +19108,15 @@ function StackedModalProvider({ children, totalSteps, initialStep }) {
|
|
|
19048
19108
|
}),
|
|
19049
19109
|
[currentStep, totalSteps, direction, nextStep, goBack, goToStep]
|
|
19050
19110
|
);
|
|
19051
|
-
return /* @__PURE__ */
|
|
19111
|
+
return /* @__PURE__ */ jsx154(StackedModalContext.Provider, { value, children });
|
|
19052
19112
|
}
|
|
19053
19113
|
|
|
19054
19114
|
// src/components/StackedModal/StackedModal.tsx
|
|
19055
19115
|
import React21 from "react";
|
|
19056
19116
|
|
|
19057
19117
|
// src/components/StackedModal/styles/StackedModal.styles.ts
|
|
19058
|
-
import { css as
|
|
19059
|
-
var stackedModalRootStyles =
|
|
19118
|
+
import { css as css115, keyframes as keyframes6 } from "@emotion/react";
|
|
19119
|
+
var stackedModalRootStyles = css115`
|
|
19060
19120
|
dialog > div {
|
|
19061
19121
|
background: var(--white);
|
|
19062
19122
|
}
|
|
@@ -19101,64 +19161,64 @@ var slideOutToRight = keyframes6`
|
|
|
19101
19161
|
opacity: 0;
|
|
19102
19162
|
}
|
|
19103
19163
|
`;
|
|
19104
|
-
var stepContainerStyles =
|
|
19164
|
+
var stepContainerStyles = css115`
|
|
19105
19165
|
position: relative;
|
|
19106
19166
|
flex: 1;
|
|
19107
19167
|
overflow: hidden;
|
|
19108
19168
|
height: 100%;
|
|
19109
19169
|
`;
|
|
19110
|
-
var stepBaseStyles =
|
|
19170
|
+
var stepBaseStyles = css115`
|
|
19111
19171
|
position: absolute;
|
|
19112
19172
|
inset: 0;
|
|
19113
19173
|
display: flex;
|
|
19114
19174
|
flex-direction: column;
|
|
19115
19175
|
gap: var(--spacing-base);
|
|
19116
19176
|
`;
|
|
19117
|
-
var stepActiveStyles =
|
|
19177
|
+
var stepActiveStyles = css115`
|
|
19118
19178
|
visibility: visible;
|
|
19119
19179
|
`;
|
|
19120
|
-
var stepInactiveStyles =
|
|
19180
|
+
var stepInactiveStyles = css115`
|
|
19121
19181
|
visibility: hidden;
|
|
19122
19182
|
`;
|
|
19123
|
-
var stepEnterForwardStyles =
|
|
19183
|
+
var stepEnterForwardStyles = css115`
|
|
19124
19184
|
animation: ${slideInFromRight} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
19125
19185
|
|
|
19126
19186
|
${prefersReducedMotion("reduce")} {
|
|
19127
19187
|
animation: none;
|
|
19128
19188
|
}
|
|
19129
19189
|
`;
|
|
19130
|
-
var stepExitForwardStyles =
|
|
19190
|
+
var stepExitForwardStyles = css115`
|
|
19131
19191
|
animation: ${slideOutToLeft} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
19132
19192
|
|
|
19133
19193
|
${prefersReducedMotion("reduce")} {
|
|
19134
19194
|
animation: none;
|
|
19135
19195
|
}
|
|
19136
19196
|
`;
|
|
19137
|
-
var stepEnterBackwardStyles =
|
|
19197
|
+
var stepEnterBackwardStyles = css115`
|
|
19138
19198
|
animation: ${slideInFromLeft} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
19139
19199
|
|
|
19140
19200
|
${prefersReducedMotion("reduce")} {
|
|
19141
19201
|
animation: none;
|
|
19142
19202
|
}
|
|
19143
19203
|
`;
|
|
19144
|
-
var stepExitBackwardStyles =
|
|
19204
|
+
var stepExitBackwardStyles = css115`
|
|
19145
19205
|
animation: ${slideOutToRight} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
19146
19206
|
|
|
19147
19207
|
${prefersReducedMotion("reduce")} {
|
|
19148
19208
|
animation: none;
|
|
19149
19209
|
}
|
|
19150
19210
|
`;
|
|
19151
|
-
var headerContainerStyles =
|
|
19211
|
+
var headerContainerStyles = css115`
|
|
19152
19212
|
position: relative;
|
|
19153
19213
|
overflow: hidden;
|
|
19154
19214
|
flex: 1;
|
|
19155
19215
|
`;
|
|
19156
|
-
var headerItemStyles = (isActive) =>
|
|
19216
|
+
var headerItemStyles = (isActive) => css115`
|
|
19157
19217
|
position: ${isActive ? "relative" : "absolute"};
|
|
19158
19218
|
inset: 0;
|
|
19159
19219
|
white-space: nowrap;
|
|
19160
19220
|
`;
|
|
19161
|
-
var stepContentStyles =
|
|
19221
|
+
var stepContentStyles = css115`
|
|
19162
19222
|
position: relative;
|
|
19163
19223
|
flex: 1;
|
|
19164
19224
|
overflow: auto;
|
|
@@ -19187,18 +19247,18 @@ function getStepAnimationStyles({
|
|
|
19187
19247
|
}
|
|
19188
19248
|
|
|
19189
19249
|
// src/components/StackedModal/AnimatedStepHeader.tsx
|
|
19190
|
-
import { jsx as
|
|
19250
|
+
import { jsx as jsx155 } from "@emotion/react/jsx-runtime";
|
|
19191
19251
|
function AnimatedStepHeader({ steps }) {
|
|
19192
|
-
return /* @__PURE__ */
|
|
19252
|
+
return /* @__PURE__ */ jsx155("div", { css: headerContainerStyles, children: steps.map((step, index) => {
|
|
19193
19253
|
var _a;
|
|
19194
19254
|
const header2 = step.props.header;
|
|
19195
19255
|
if (!header2) return null;
|
|
19196
|
-
return /* @__PURE__ */
|
|
19256
|
+
return /* @__PURE__ */ jsx155(AnimatedHeaderItem, { index, children: header2 }, (_a = step.key) != null ? _a : index);
|
|
19197
19257
|
}) });
|
|
19198
19258
|
}
|
|
19199
19259
|
function AnimatedHeaderItem({ index, children }) {
|
|
19200
19260
|
const transition = useStepTransition(index);
|
|
19201
|
-
return /* @__PURE__ */
|
|
19261
|
+
return /* @__PURE__ */ jsx155(
|
|
19202
19262
|
"div",
|
|
19203
19263
|
{
|
|
19204
19264
|
css: [headerItemStyles(transition.isActive), getStepAnimationStyles(transition)],
|
|
@@ -19209,16 +19269,16 @@ function AnimatedHeaderItem({ index, children }) {
|
|
|
19209
19269
|
}
|
|
19210
19270
|
|
|
19211
19271
|
// src/components/StackedModal/StackedModalStep.tsx
|
|
19212
|
-
import { Fragment as Fragment20, jsx as
|
|
19272
|
+
import { Fragment as Fragment20, jsx as jsx156, jsxs as jsxs102 } from "@emotion/react/jsx-runtime";
|
|
19213
19273
|
function StackedModalStep({ children, buttonGroup }) {
|
|
19214
|
-
return /* @__PURE__ */
|
|
19215
|
-
/* @__PURE__ */
|
|
19216
|
-
buttonGroup ? /* @__PURE__ */
|
|
19274
|
+
return /* @__PURE__ */ jsxs102(Fragment20, { children: [
|
|
19275
|
+
/* @__PURE__ */ jsx156("div", { css: stepContentStyles, children }),
|
|
19276
|
+
buttonGroup ? /* @__PURE__ */ jsx156(HorizontalRhythm, { gap: "sm", align: "center", children: buttonGroup }) : null
|
|
19217
19277
|
] });
|
|
19218
19278
|
}
|
|
19219
19279
|
|
|
19220
19280
|
// src/components/StackedModal/StackedModal.tsx
|
|
19221
|
-
import { jsx as
|
|
19281
|
+
import { jsx as jsx157 } from "@emotion/react/jsx-runtime";
|
|
19222
19282
|
function filterSteps(children) {
|
|
19223
19283
|
return React21.Children.toArray(children).filter(
|
|
19224
19284
|
(child) => React21.isValidElement(child) && child.type === StackedModalStep
|
|
@@ -19227,17 +19287,17 @@ function filterSteps(children) {
|
|
|
19227
19287
|
var StackedModal = React21.forwardRef(
|
|
19228
19288
|
({ children, initialStep = 0, ...rest }, ref) => {
|
|
19229
19289
|
const steps = filterSteps(children);
|
|
19230
|
-
return /* @__PURE__ */
|
|
19290
|
+
return /* @__PURE__ */ jsx157(StackedModalProvider, { totalSteps: steps.length, initialStep, children: /* @__PURE__ */ jsx157(StackedModalInner, { ref, steps, ...rest }) });
|
|
19231
19291
|
}
|
|
19232
19292
|
);
|
|
19233
19293
|
StackedModal.displayName = "StackedModal";
|
|
19234
19294
|
var StackedModalInner = React21.forwardRef(
|
|
19235
19295
|
({ steps, onRequestClose, modalSize = "lg", width, height }, ref) => {
|
|
19236
|
-
return /* @__PURE__ */
|
|
19296
|
+
return /* @__PURE__ */ jsx157("div", { css: stackedModalRootStyles, children: /* @__PURE__ */ jsx157(
|
|
19237
19297
|
Modal,
|
|
19238
19298
|
{
|
|
19239
19299
|
ref,
|
|
19240
|
-
header: /* @__PURE__ */
|
|
19300
|
+
header: /* @__PURE__ */ jsx157(AnimatedStepHeader, { steps }),
|
|
19241
19301
|
onRequestClose,
|
|
19242
19302
|
modalSize,
|
|
19243
19303
|
width,
|
|
@@ -19245,9 +19305,9 @@ var StackedModalInner = React21.forwardRef(
|
|
|
19245
19305
|
withoutContentPadding: true,
|
|
19246
19306
|
withoutContentBackground: true,
|
|
19247
19307
|
disableBodyScroll: true,
|
|
19248
|
-
children: /* @__PURE__ */
|
|
19308
|
+
children: /* @__PURE__ */ jsx157("div", { css: stepContainerStyles, children: steps.map((step, index) => {
|
|
19249
19309
|
var _a;
|
|
19250
|
-
return /* @__PURE__ */
|
|
19310
|
+
return /* @__PURE__ */ jsx157(StackedModalStepWrapper, { index, children: step }, (_a = step.key) != null ? _a : index);
|
|
19251
19311
|
}) })
|
|
19252
19312
|
}
|
|
19253
19313
|
) });
|
|
@@ -19256,15 +19316,15 @@ var StackedModalInner = React21.forwardRef(
|
|
|
19256
19316
|
StackedModalInner.displayName = "StackedModalInner";
|
|
19257
19317
|
function StackedModalStepWrapper({ index, children }) {
|
|
19258
19318
|
const transition = useStepTransition(index);
|
|
19259
|
-
return /* @__PURE__ */
|
|
19319
|
+
return /* @__PURE__ */ jsx157("div", { css: [stepBaseStyles, getStepAnimationStyles(transition)], "aria-hidden": !transition.isActive, children });
|
|
19260
19320
|
}
|
|
19261
19321
|
|
|
19262
19322
|
// src/components/Switch/Switch.tsx
|
|
19263
19323
|
import { forwardRef as forwardRef33, useMemo as useMemo15 } from "react";
|
|
19264
19324
|
|
|
19265
19325
|
// src/components/Switch/Switch.styles.ts
|
|
19266
|
-
import { css as
|
|
19267
|
-
var SwitchInputContainer =
|
|
19326
|
+
import { css as css116 } from "@emotion/react";
|
|
19327
|
+
var SwitchInputContainer = css116`
|
|
19268
19328
|
cursor: pointer;
|
|
19269
19329
|
display: inline-flex;
|
|
19270
19330
|
position: relative;
|
|
@@ -19274,7 +19334,7 @@ var SwitchInputContainer = css115`
|
|
|
19274
19334
|
user-select: none;
|
|
19275
19335
|
z-index: 0;
|
|
19276
19336
|
`;
|
|
19277
|
-
var SwitchInput = (size) =>
|
|
19337
|
+
var SwitchInput = (size) => css116`
|
|
19278
19338
|
appearance: none;
|
|
19279
19339
|
border-radius: var(--rounded-full);
|
|
19280
19340
|
background-color: var(--white);
|
|
@@ -19325,18 +19385,18 @@ var SwitchInput = (size) => css115`
|
|
|
19325
19385
|
cursor: not-allowed;
|
|
19326
19386
|
}
|
|
19327
19387
|
`;
|
|
19328
|
-
var SwitchInputCheckedDirectionLeft =
|
|
19388
|
+
var SwitchInputCheckedDirectionLeft = css116`
|
|
19329
19389
|
&:checked {
|
|
19330
19390
|
transform: translateX(var(--spacing-base));
|
|
19331
19391
|
}
|
|
19332
19392
|
`;
|
|
19333
|
-
var SwitchInputCheckedDirectionRight =
|
|
19393
|
+
var SwitchInputCheckedDirectionRight = css116`
|
|
19334
19394
|
transform: translateX(-var(--spacing-base));
|
|
19335
19395
|
&:checked {
|
|
19336
19396
|
transform: translateX(0);
|
|
19337
19397
|
}
|
|
19338
19398
|
`;
|
|
19339
|
-
var SwitchInputDisabled =
|
|
19399
|
+
var SwitchInputDisabled = css116`
|
|
19340
19400
|
opacity: var(--opacity-50);
|
|
19341
19401
|
cursor: not-allowed;
|
|
19342
19402
|
|
|
@@ -19344,19 +19404,19 @@ var SwitchInputDisabled = css115`
|
|
|
19344
19404
|
cursor: not-allowed;
|
|
19345
19405
|
}
|
|
19346
19406
|
`;
|
|
19347
|
-
var SwitchInputLabelAlignmentLeft = (size) =>
|
|
19407
|
+
var SwitchInputLabelAlignmentLeft = (size) => css116`
|
|
19348
19408
|
padding-inline-start: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
19349
19409
|
&:before {
|
|
19350
19410
|
left: 0;
|
|
19351
19411
|
}
|
|
19352
19412
|
`;
|
|
19353
|
-
var SwitchInputLabelAlignmentRight = (size) =>
|
|
19413
|
+
var SwitchInputLabelAlignmentRight = (size) => css116`
|
|
19354
19414
|
padding-inline-end: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
19355
19415
|
&:before {
|
|
19356
19416
|
right: 0;
|
|
19357
19417
|
}
|
|
19358
19418
|
`;
|
|
19359
|
-
var SwitchInputLabel = (size) =>
|
|
19419
|
+
var SwitchInputLabel = (size) => css116`
|
|
19360
19420
|
align-items: center;
|
|
19361
19421
|
color: var(--typography-base);
|
|
19362
19422
|
display: inline-flex;
|
|
@@ -19377,25 +19437,25 @@ var SwitchInputLabel = (size) => css115`
|
|
|
19377
19437
|
top: 0;
|
|
19378
19438
|
}
|
|
19379
19439
|
`;
|
|
19380
|
-
var SwitchTextAlignmentLeft = (size) =>
|
|
19440
|
+
var SwitchTextAlignmentLeft = (size) => css116`
|
|
19381
19441
|
padding-inline-start: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
19382
19442
|
`;
|
|
19383
|
-
var SwitchTextAlignmentRight = (size) =>
|
|
19443
|
+
var SwitchTextAlignmentRight = (size) => css116`
|
|
19384
19444
|
padding-inline-end: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
|
|
19385
19445
|
`;
|
|
19386
|
-
var SwitchText =
|
|
19446
|
+
var SwitchText = css116`
|
|
19387
19447
|
color: var(--gray-500);
|
|
19388
19448
|
font-size: var(--fs-sm);
|
|
19389
19449
|
`;
|
|
19390
|
-
var SwitchInputContainerAlignmentLeft =
|
|
19450
|
+
var SwitchInputContainerAlignmentLeft = css116`
|
|
19391
19451
|
flex-direction: row;
|
|
19392
19452
|
`;
|
|
19393
|
-
var SwitchInputContainerAlignmentRight =
|
|
19453
|
+
var SwitchInputContainerAlignmentRight = css116`
|
|
19394
19454
|
flex-direction: row-reverse;
|
|
19395
19455
|
`;
|
|
19396
19456
|
|
|
19397
19457
|
// src/components/Switch/Switch.tsx
|
|
19398
|
-
import { Fragment as Fragment21, jsx as
|
|
19458
|
+
import { Fragment as Fragment21, jsx as jsx158, jsxs as jsxs103 } from "@emotion/react/jsx-runtime";
|
|
19399
19459
|
var Switch = forwardRef33(
|
|
19400
19460
|
({
|
|
19401
19461
|
label: label2,
|
|
@@ -19424,8 +19484,8 @@ var Switch = forwardRef33(
|
|
|
19424
19484
|
if (infoText && toggleText) {
|
|
19425
19485
|
additionalText = inputProps.checked ? toggleText : infoText;
|
|
19426
19486
|
}
|
|
19427
|
-
return /* @__PURE__ */
|
|
19428
|
-
/* @__PURE__ */
|
|
19487
|
+
return /* @__PURE__ */ jsxs103(Fragment21, { children: [
|
|
19488
|
+
/* @__PURE__ */ jsxs103(
|
|
19429
19489
|
"label",
|
|
19430
19490
|
{
|
|
19431
19491
|
css: [
|
|
@@ -19435,7 +19495,7 @@ var Switch = forwardRef33(
|
|
|
19435
19495
|
inputProps.disabled ? SwitchInputDisabled : void 0
|
|
19436
19496
|
],
|
|
19437
19497
|
children: [
|
|
19438
|
-
/* @__PURE__ */
|
|
19498
|
+
/* @__PURE__ */ jsx158(
|
|
19439
19499
|
"input",
|
|
19440
19500
|
{
|
|
19441
19501
|
type: "checkbox",
|
|
@@ -19444,11 +19504,11 @@ var Switch = forwardRef33(
|
|
|
19444
19504
|
ref
|
|
19445
19505
|
}
|
|
19446
19506
|
),
|
|
19447
|
-
/* @__PURE__ */
|
|
19507
|
+
/* @__PURE__ */ jsx158("span", { css: [SwitchInputLabel(switchSize), SwitchInputLabelAlignment], children: label2 })
|
|
19448
19508
|
]
|
|
19449
19509
|
}
|
|
19450
19510
|
),
|
|
19451
|
-
additionalText ? /* @__PURE__ */
|
|
19511
|
+
additionalText ? /* @__PURE__ */ jsx158(
|
|
19452
19512
|
"p",
|
|
19453
19513
|
{
|
|
19454
19514
|
css: [
|
|
@@ -19464,8 +19524,8 @@ var Switch = forwardRef33(
|
|
|
19464
19524
|
);
|
|
19465
19525
|
|
|
19466
19526
|
// src/components/Table/Table.styles.ts
|
|
19467
|
-
import { css as
|
|
19468
|
-
var table = ({ cellPadding = "var(--spacing-sm)" }) =>
|
|
19527
|
+
import { css as css117 } from "@emotion/react";
|
|
19528
|
+
var table = ({ cellPadding = "var(--spacing-sm)" }) => css117`
|
|
19469
19529
|
border-bottom: 1px solid var(--gray-400);
|
|
19470
19530
|
border-collapse: collapse;
|
|
19471
19531
|
min-width: 100%;
|
|
@@ -19485,21 +19545,21 @@ var table = ({ cellPadding = "var(--spacing-sm)" }) => css116`
|
|
|
19485
19545
|
background-color: var(--gray-50);
|
|
19486
19546
|
}
|
|
19487
19547
|
`;
|
|
19488
|
-
var tableHead =
|
|
19548
|
+
var tableHead = css117`
|
|
19489
19549
|
color: var(--typography-base);
|
|
19490
19550
|
text-align: left;
|
|
19491
19551
|
`;
|
|
19492
|
-
var tableRow =
|
|
19552
|
+
var tableRow = css117`
|
|
19493
19553
|
border-bottom: 1px solid var(--gray-200);
|
|
19494
19554
|
font-size: var(--fs-sm);
|
|
19495
19555
|
`;
|
|
19496
|
-
var tableCellHead =
|
|
19556
|
+
var tableCellHead = css117`
|
|
19497
19557
|
font-size: var(--fs-sm);
|
|
19498
19558
|
font-weight: var(--fw-regular);
|
|
19499
19559
|
line-height: 1.2;
|
|
19500
19560
|
}
|
|
19501
19561
|
`;
|
|
19502
|
-
var responsiveTableContainer =
|
|
19562
|
+
var responsiveTableContainer = css117`
|
|
19503
19563
|
max-width: calc(100vw - var(--spacing-md) * 2);
|
|
19504
19564
|
overflow-x: auto;
|
|
19505
19565
|
${scrollbarStyles}
|
|
@@ -19518,47 +19578,47 @@ var responsiveTableContainer = css116`
|
|
|
19518
19578
|
`;
|
|
19519
19579
|
|
|
19520
19580
|
// src/components/Table/ResponsiveTableContainer.tsx
|
|
19521
|
-
import { jsx as
|
|
19581
|
+
import { jsx as jsx159 } from "@emotion/react/jsx-runtime";
|
|
19522
19582
|
var ResponsiveTableContainer = ({ children }) => {
|
|
19523
|
-
return /* @__PURE__ */
|
|
19583
|
+
return /* @__PURE__ */ jsx159("div", { css: responsiveTableContainer, children });
|
|
19524
19584
|
};
|
|
19525
19585
|
|
|
19526
19586
|
// src/components/Table/Table.tsx
|
|
19527
19587
|
import * as React22 from "react";
|
|
19528
|
-
import { jsx as
|
|
19588
|
+
import { jsx as jsx160 } from "@emotion/react/jsx-runtime";
|
|
19529
19589
|
var Table = React22.forwardRef(
|
|
19530
19590
|
({ children, cellPadding, ...otherProps }, ref) => {
|
|
19531
|
-
return /* @__PURE__ */
|
|
19591
|
+
return /* @__PURE__ */ jsx160("table", { ref, css: table({ cellPadding }), ...otherProps, children });
|
|
19532
19592
|
}
|
|
19533
19593
|
);
|
|
19534
19594
|
var TableHead = React22.forwardRef(
|
|
19535
19595
|
({ children, ...otherProps }, ref) => {
|
|
19536
|
-
return /* @__PURE__ */
|
|
19596
|
+
return /* @__PURE__ */ jsx160("thead", { ref, css: tableHead, ...otherProps, children });
|
|
19537
19597
|
}
|
|
19538
19598
|
);
|
|
19539
19599
|
var TableBody = React22.forwardRef(
|
|
19540
19600
|
({ children, ...otherProps }, ref) => {
|
|
19541
|
-
return /* @__PURE__ */
|
|
19601
|
+
return /* @__PURE__ */ jsx160("tbody", { ref, ...otherProps, children });
|
|
19542
19602
|
}
|
|
19543
19603
|
);
|
|
19544
19604
|
var TableFoot = React22.forwardRef(
|
|
19545
19605
|
({ children, ...otherProps }, ref) => {
|
|
19546
|
-
return /* @__PURE__ */
|
|
19606
|
+
return /* @__PURE__ */ jsx160("tfoot", { ref, ...otherProps, children });
|
|
19547
19607
|
}
|
|
19548
19608
|
);
|
|
19549
19609
|
var TableRow = React22.forwardRef(
|
|
19550
19610
|
({ children, ...otherProps }, ref) => {
|
|
19551
|
-
return /* @__PURE__ */
|
|
19611
|
+
return /* @__PURE__ */ jsx160("tr", { ref, css: tableRow, ...otherProps, children });
|
|
19552
19612
|
}
|
|
19553
19613
|
);
|
|
19554
19614
|
var TableCellHead = React22.forwardRef(
|
|
19555
19615
|
({ children, ...otherProps }, ref) => {
|
|
19556
|
-
return /* @__PURE__ */
|
|
19616
|
+
return /* @__PURE__ */ jsx160("th", { ref, css: tableCellHead, ...otherProps, children });
|
|
19557
19617
|
}
|
|
19558
19618
|
);
|
|
19559
19619
|
var TableCellData = React22.forwardRef(
|
|
19560
19620
|
({ children, ...otherProps }, ref) => {
|
|
19561
|
-
return /* @__PURE__ */
|
|
19621
|
+
return /* @__PURE__ */ jsx160("td", { ref, ...otherProps, children });
|
|
19562
19622
|
}
|
|
19563
19623
|
);
|
|
19564
19624
|
|
|
@@ -19573,8 +19633,8 @@ import {
|
|
|
19573
19633
|
import { useCallback as useCallback18, useMemo as useMemo16 } from "react";
|
|
19574
19634
|
|
|
19575
19635
|
// src/components/Tabs/Tabs.styles.ts
|
|
19576
|
-
import { css as
|
|
19577
|
-
var tabButtonStyles =
|
|
19636
|
+
import { css as css118 } from "@emotion/react";
|
|
19637
|
+
var tabButtonStyles = css118`
|
|
19578
19638
|
align-items: center;
|
|
19579
19639
|
border: 0;
|
|
19580
19640
|
height: 2.5rem;
|
|
@@ -19591,14 +19651,14 @@ var tabButtonStyles = css117`
|
|
|
19591
19651
|
box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
|
|
19592
19652
|
}
|
|
19593
19653
|
`;
|
|
19594
|
-
var tabButtonGroupStyles =
|
|
19654
|
+
var tabButtonGroupStyles = css118`
|
|
19595
19655
|
display: flex;
|
|
19596
19656
|
gap: var(--spacing-base);
|
|
19597
19657
|
border-bottom: 1px solid var(--gray-300);
|
|
19598
19658
|
`;
|
|
19599
19659
|
|
|
19600
19660
|
// src/components/Tabs/Tabs.tsx
|
|
19601
|
-
import { jsx as
|
|
19661
|
+
import { jsx as jsx161 } from "@emotion/react/jsx-runtime";
|
|
19602
19662
|
var useCurrentTab = () => {
|
|
19603
19663
|
const context = useAriakitTabStore();
|
|
19604
19664
|
if (!context) {
|
|
@@ -19629,28 +19689,28 @@ var Tabs = ({
|
|
|
19629
19689
|
},
|
|
19630
19690
|
[onSelectedIdChange, useHashForState]
|
|
19631
19691
|
);
|
|
19632
|
-
return /* @__PURE__ */
|
|
19692
|
+
return /* @__PURE__ */ jsx161(AriakitTabProvider, { selectedId: selected, selectOnMove: !manual, setSelectedId: onTabSelect, ...props, children });
|
|
19633
19693
|
};
|
|
19634
19694
|
var TabButtonGroup = ({ children, ...props }) => {
|
|
19635
|
-
return /* @__PURE__ */
|
|
19695
|
+
return /* @__PURE__ */ jsx161(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
|
|
19636
19696
|
};
|
|
19637
19697
|
var TabButton = ({
|
|
19638
19698
|
children,
|
|
19639
19699
|
id,
|
|
19640
19700
|
...props
|
|
19641
19701
|
}) => {
|
|
19642
|
-
return /* @__PURE__ */
|
|
19702
|
+
return /* @__PURE__ */ jsx161(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
|
|
19643
19703
|
};
|
|
19644
19704
|
var TabContent = ({
|
|
19645
19705
|
children,
|
|
19646
19706
|
...props
|
|
19647
19707
|
}) => {
|
|
19648
|
-
return /* @__PURE__ */
|
|
19708
|
+
return /* @__PURE__ */ jsx161(AriakitTabPanel, { ...props, children });
|
|
19649
19709
|
};
|
|
19650
19710
|
|
|
19651
19711
|
// src/components/Validation/StatusBullet.styles.ts
|
|
19652
|
-
import { css as
|
|
19653
|
-
var StatusBulletContainer =
|
|
19712
|
+
import { css as css119 } from "@emotion/react";
|
|
19713
|
+
var StatusBulletContainer = css119`
|
|
19654
19714
|
align-items: center;
|
|
19655
19715
|
align-self: center;
|
|
19656
19716
|
color: var(--gray-500);
|
|
@@ -19666,33 +19726,33 @@ var StatusBulletContainer = css118`
|
|
|
19666
19726
|
display: block;
|
|
19667
19727
|
}
|
|
19668
19728
|
`;
|
|
19669
|
-
var StatusBulletBase =
|
|
19729
|
+
var StatusBulletBase = css119`
|
|
19670
19730
|
font-size: var(--fs-sm);
|
|
19671
19731
|
&:before {
|
|
19672
19732
|
width: var(--fs-xs);
|
|
19673
19733
|
height: var(--fs-xs);
|
|
19674
19734
|
}
|
|
19675
19735
|
`;
|
|
19676
|
-
var StatusBulletSmall =
|
|
19736
|
+
var StatusBulletSmall = css119`
|
|
19677
19737
|
font-size: var(--fs-xs);
|
|
19678
19738
|
&:before {
|
|
19679
19739
|
width: var(--fs-xxs);
|
|
19680
19740
|
height: var(--fs-xxs);
|
|
19681
19741
|
}
|
|
19682
19742
|
`;
|
|
19683
|
-
var StatusDraft =
|
|
19743
|
+
var StatusDraft = css119`
|
|
19684
19744
|
&:before {
|
|
19685
19745
|
background: var(--white);
|
|
19686
19746
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
19687
19747
|
}
|
|
19688
19748
|
`;
|
|
19689
|
-
var StatusModified =
|
|
19749
|
+
var StatusModified = css119`
|
|
19690
19750
|
&:before {
|
|
19691
19751
|
background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
|
|
19692
19752
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
19693
19753
|
}
|
|
19694
19754
|
`;
|
|
19695
|
-
var StatusError =
|
|
19755
|
+
var StatusError = css119`
|
|
19696
19756
|
color: var(--error);
|
|
19697
19757
|
&:before {
|
|
19698
19758
|
/* TODO: replace this with an svg icon */
|
|
@@ -19705,29 +19765,29 @@ var StatusError = css118`
|
|
|
19705
19765
|
);
|
|
19706
19766
|
}
|
|
19707
19767
|
`;
|
|
19708
|
-
var StatusPublished =
|
|
19768
|
+
var StatusPublished = css119`
|
|
19709
19769
|
&:before {
|
|
19710
19770
|
background: var(--accent-dark);
|
|
19711
19771
|
}
|
|
19712
19772
|
`;
|
|
19713
|
-
var StatusOrphan =
|
|
19773
|
+
var StatusOrphan = css119`
|
|
19714
19774
|
&:before {
|
|
19715
19775
|
background: var(--brand-secondary-5);
|
|
19716
19776
|
}
|
|
19717
19777
|
`;
|
|
19718
|
-
var StatusUnknown =
|
|
19778
|
+
var StatusUnknown = css119`
|
|
19719
19779
|
&:before {
|
|
19720
19780
|
background: var(--gray-800);
|
|
19721
19781
|
}
|
|
19722
19782
|
`;
|
|
19723
|
-
var StatusDeleted =
|
|
19783
|
+
var StatusDeleted = css119`
|
|
19724
19784
|
&:before {
|
|
19725
19785
|
background: var(--error);
|
|
19726
19786
|
}
|
|
19727
19787
|
`;
|
|
19728
19788
|
|
|
19729
19789
|
// src/components/Validation/StatusBullet.tsx
|
|
19730
|
-
import { jsx as
|
|
19790
|
+
import { jsx as jsx162 } from "@emotion/react/jsx-runtime";
|
|
19731
19791
|
var currentStateStyles = {
|
|
19732
19792
|
Error: StatusError,
|
|
19733
19793
|
Modified: StatusModified,
|
|
@@ -19751,7 +19811,7 @@ var StatusBullet = ({
|
|
|
19751
19811
|
compact = false,
|
|
19752
19812
|
...props
|
|
19753
19813
|
}) => {
|
|
19754
|
-
const StatusComponent = () => /* @__PURE__ */
|
|
19814
|
+
const StatusComponent = () => /* @__PURE__ */ jsx162(
|
|
19755
19815
|
"span",
|
|
19756
19816
|
{
|
|
19757
19817
|
role: "status",
|
|
@@ -19762,9 +19822,9 @@ var StatusBullet = ({
|
|
|
19762
19822
|
}
|
|
19763
19823
|
);
|
|
19764
19824
|
if (compact) {
|
|
19765
|
-
return /* @__PURE__ */
|
|
19825
|
+
return /* @__PURE__ */ jsx162(StatusComponent, {});
|
|
19766
19826
|
}
|
|
19767
|
-
return /* @__PURE__ */
|
|
19827
|
+
return /* @__PURE__ */ jsx162(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ jsx162("div", { children: /* @__PURE__ */ jsx162(StatusComponent, {}) }) });
|
|
19768
19828
|
};
|
|
19769
19829
|
export {
|
|
19770
19830
|
AddButton,
|
|
@@ -19874,6 +19934,7 @@ export {
|
|
|
19874
19934
|
ObjectListItemContainer2 as ObjectListItemContainer,
|
|
19875
19935
|
ObjectListItemCover2 as ObjectListItemCover,
|
|
19876
19936
|
ObjectListItemHeading2 as ObjectListItemHeading,
|
|
19937
|
+
ObjectListSubText2 as ObjectListSubText,
|
|
19877
19938
|
PageHeaderSection,
|
|
19878
19939
|
Pagination,
|
|
19879
19940
|
Paragraph,
|