@uniformdev/design-system 18.38.2-alpha.6 → 19.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +793 -555
- package/dist/index.d.ts +295 -183
- package/dist/index.js +904 -662
- package/package.json +2 -2
package/dist/esm/index.js
CHANGED
|
@@ -220,6 +220,16 @@ var mq = (size) => `@media (min-width: ${breakpoints[size]}px)`;
|
|
|
220
220
|
var supports = (cssProp) => `@supports (${cssProp})`;
|
|
221
221
|
var cq = (size) => `@container (min-width: ${size})`;
|
|
222
222
|
|
|
223
|
+
// src/utils/formatDate.ts
|
|
224
|
+
var formatDate = (date) => {
|
|
225
|
+
const normalizeDate = new Date(date).toLocaleDateString(navigator.language, {
|
|
226
|
+
year: "numeric",
|
|
227
|
+
month: "short",
|
|
228
|
+
day: "numeric"
|
|
229
|
+
});
|
|
230
|
+
return normalizeDate;
|
|
231
|
+
};
|
|
232
|
+
|
|
223
233
|
// src/utils/replaceUnderscoreInString.ts
|
|
224
234
|
var replaceUnderscoreInString = (title) => (title == null ? void 0 : title.includes("_")) ? title.replaceAll("_", " ") : title;
|
|
225
235
|
|
|
@@ -11452,6 +11462,7 @@ var TwoColumnLayoutMain = css28``;
|
|
|
11452
11462
|
var TwoColumnLayoutSupporting = css28`
|
|
11453
11463
|
display: flex;
|
|
11454
11464
|
flex-direction: column;
|
|
11465
|
+
gap: var(--spacing-md);
|
|
11455
11466
|
`;
|
|
11456
11467
|
|
|
11457
11468
|
// src/components/Layout/TwoColumnLayout.tsx
|
|
@@ -12680,30 +12691,44 @@ var InputSelect = ({
|
|
|
12680
12691
|
};
|
|
12681
12692
|
|
|
12682
12693
|
// src/components/Input/InputToggle.tsx
|
|
12694
|
+
import * as React14 from "react";
|
|
12683
12695
|
import { jsx as jsx52, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
|
|
12684
|
-
var InputToggle = (
|
|
12685
|
-
|
|
12686
|
-
|
|
12687
|
-
|
|
12688
|
-
|
|
12689
|
-
|
|
12690
|
-
|
|
12691
|
-
|
|
12692
|
-
|
|
12693
|
-
|
|
12694
|
-
|
|
12695
|
-
|
|
12696
|
-
|
|
12697
|
-
|
|
12698
|
-
/* @__PURE__ */
|
|
12699
|
-
|
|
12700
|
-
|
|
12701
|
-
|
|
12702
|
-
|
|
12703
|
-
|
|
12704
|
-
|
|
12705
|
-
|
|
12706
|
-
|
|
12696
|
+
var InputToggle = React14.forwardRef(
|
|
12697
|
+
({
|
|
12698
|
+
label,
|
|
12699
|
+
type,
|
|
12700
|
+
disabled,
|
|
12701
|
+
checked,
|
|
12702
|
+
name,
|
|
12703
|
+
caption,
|
|
12704
|
+
errorMessage,
|
|
12705
|
+
warningMessage,
|
|
12706
|
+
testId,
|
|
12707
|
+
fontWeight = "medium",
|
|
12708
|
+
...props
|
|
12709
|
+
}, ref) => {
|
|
12710
|
+
return /* @__PURE__ */ jsxs31(Label, { css: [inputToggleLabel, disabled ? inputDisabled : void 0], "data-test-id": testId, children: [
|
|
12711
|
+
/* @__PURE__ */ jsx52(
|
|
12712
|
+
"input",
|
|
12713
|
+
{
|
|
12714
|
+
ref,
|
|
12715
|
+
type,
|
|
12716
|
+
css: toggleInput,
|
|
12717
|
+
checked,
|
|
12718
|
+
name,
|
|
12719
|
+
disabled,
|
|
12720
|
+
...props
|
|
12721
|
+
}
|
|
12722
|
+
),
|
|
12723
|
+
/* @__PURE__ */ jsx52("span", { css: inlineLabel(fontWeight), dangerouslySetInnerHTML: { __html: label } }),
|
|
12724
|
+
caption || errorMessage ? /* @__PURE__ */ jsxs31("span", { css: inputToggleMessageContainer, children: [
|
|
12725
|
+
caption ? /* @__PURE__ */ jsx52(Caption, { children: caption }) : null,
|
|
12726
|
+
errorMessage ? /* @__PURE__ */ jsx52(ErrorMessage, { message: errorMessage }) : null,
|
|
12727
|
+
warningMessage && !errorMessage ? /* @__PURE__ */ jsx52(WarningMessage, { message: warningMessage }) : null
|
|
12728
|
+
] }) : null
|
|
12729
|
+
] });
|
|
12730
|
+
}
|
|
12731
|
+
);
|
|
12707
12732
|
|
|
12708
12733
|
// src/components/Input/Legend.tsx
|
|
12709
12734
|
import { jsx as jsx53 } from "@emotion/react/jsx-runtime";
|
|
@@ -13801,8 +13826,205 @@ var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
|
|
|
13801
13826
|
] });
|
|
13802
13827
|
};
|
|
13803
13828
|
|
|
13829
|
+
// src/components/ObjectList/ObjectCompositionListItem.tsx
|
|
13830
|
+
import { forwardRef as forwardRef8 } from "react";
|
|
13831
|
+
|
|
13832
|
+
// src/components/Validation/StatusBullet.styles.ts
|
|
13833
|
+
import { css as css58 } from "@emotion/react";
|
|
13834
|
+
var StatusBulletContainer = css58`
|
|
13835
|
+
align-items: center;
|
|
13836
|
+
align-self: center;
|
|
13837
|
+
color: var(--gray-500);
|
|
13838
|
+
display: inline-flex;
|
|
13839
|
+
font-weight: var(--fw-regular);
|
|
13840
|
+
gap: var(--spacing-xs);
|
|
13841
|
+
line-height: 1;
|
|
13842
|
+
position: relative;
|
|
13843
|
+
text-transform: lowercase;
|
|
13844
|
+
|
|
13845
|
+
&:before {
|
|
13846
|
+
border-radius: var(--rounded-full);
|
|
13847
|
+
content: '';
|
|
13848
|
+
display: block;
|
|
13849
|
+
}
|
|
13850
|
+
`;
|
|
13851
|
+
var StatusBulletBase = css58`
|
|
13852
|
+
font-size: var(--fs-sm);
|
|
13853
|
+
&:before {
|
|
13854
|
+
width: var(--fs-xs);
|
|
13855
|
+
height: var(--fs-xs);
|
|
13856
|
+
}
|
|
13857
|
+
`;
|
|
13858
|
+
var StatusBulletSmall = css58`
|
|
13859
|
+
font-size: var(--fs-xs);
|
|
13860
|
+
&:before {
|
|
13861
|
+
width: var(--fs-xxs);
|
|
13862
|
+
height: var(--fs-xxs);
|
|
13863
|
+
}
|
|
13864
|
+
`;
|
|
13865
|
+
var StatusDraft = css58`
|
|
13866
|
+
&:before {
|
|
13867
|
+
background: var(--white);
|
|
13868
|
+
box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
|
|
13869
|
+
}
|
|
13870
|
+
`;
|
|
13871
|
+
var StatusModified = css58`
|
|
13872
|
+
&:before {
|
|
13873
|
+
background: linear-gradient(to right, var(--white) 50%, var(--brand-primary-1) 50% 100%);
|
|
13874
|
+
box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
|
|
13875
|
+
}
|
|
13876
|
+
`;
|
|
13877
|
+
var StatusError = css58`
|
|
13878
|
+
color: var(--error);
|
|
13879
|
+
&:before {
|
|
13880
|
+
background: linear-gradient(120deg, var(--error) 40%, var(--white) 50%, var(--error) 60%);
|
|
13881
|
+
}
|
|
13882
|
+
`;
|
|
13883
|
+
var StatusPublished = css58`
|
|
13884
|
+
&:before {
|
|
13885
|
+
background: var(--brand-secondary-3);
|
|
13886
|
+
}
|
|
13887
|
+
`;
|
|
13888
|
+
var StatusOrphan = css58`
|
|
13889
|
+
&:before {
|
|
13890
|
+
background: var(--brand-secondary-5);
|
|
13891
|
+
}
|
|
13892
|
+
`;
|
|
13893
|
+
|
|
13894
|
+
// src/components/Validation/StatusBullet.tsx
|
|
13895
|
+
import { jsx as jsx73 } from "@emotion/react/jsx-runtime";
|
|
13896
|
+
var StatusBullet = ({
|
|
13897
|
+
status,
|
|
13898
|
+
hideText = false,
|
|
13899
|
+
size = "base",
|
|
13900
|
+
message,
|
|
13901
|
+
...props
|
|
13902
|
+
}) => {
|
|
13903
|
+
const currentStateStyles = {
|
|
13904
|
+
Error: StatusError,
|
|
13905
|
+
Modified: StatusModified,
|
|
13906
|
+
Unsaved: StatusDraft,
|
|
13907
|
+
Orphan: StatusOrphan,
|
|
13908
|
+
Published: StatusPublished,
|
|
13909
|
+
Draft: StatusDraft
|
|
13910
|
+
};
|
|
13911
|
+
const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
|
|
13912
|
+
return /* @__PURE__ */ jsx73(
|
|
13913
|
+
"span",
|
|
13914
|
+
{
|
|
13915
|
+
role: "status",
|
|
13916
|
+
css: [StatusBulletContainer, currentStateStyles[status], statusSize],
|
|
13917
|
+
title: message != null ? message : status,
|
|
13918
|
+
...props,
|
|
13919
|
+
children: hideText ? null : message ? message : status
|
|
13920
|
+
}
|
|
13921
|
+
);
|
|
13922
|
+
};
|
|
13923
|
+
|
|
13924
|
+
// src/components/ObjectList/styles/ObjectListItem.styles.ts
|
|
13925
|
+
import { css as css59 } from "@emotion/react";
|
|
13926
|
+
var ObjectListItemContainer = css59`
|
|
13927
|
+
border-top: 1px solid var(--gray-300);
|
|
13928
|
+
border-bottom: 1px solid var(--gray-300);
|
|
13929
|
+
display: block;
|
|
13930
|
+
padding: var(--spacing-base) var(--spacing-sm);
|
|
13931
|
+
font-size: var(--fs-sm);
|
|
13932
|
+
margin-bottom: -1px;
|
|
13933
|
+
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
13934
|
+
text-decoration: none;
|
|
13935
|
+
|
|
13936
|
+
&:hover {
|
|
13937
|
+
background: var(--gray-50);
|
|
13938
|
+
|
|
13939
|
+
& [role='heading'] {
|
|
13940
|
+
text-decoration: underline;
|
|
13941
|
+
}
|
|
13942
|
+
}
|
|
13943
|
+
`;
|
|
13944
|
+
var ObjectListItemLoading = css59`
|
|
13945
|
+
animation: ${skeletonLoading} 1s linear infinite alternate;
|
|
13946
|
+
border-color: var(--white);
|
|
13947
|
+
display: flex;
|
|
13948
|
+
flex-direction: column;
|
|
13949
|
+
padding: var(--spacing-base) var(--spacing-sm);
|
|
13950
|
+
gap: var(--spacing-sm);
|
|
13951
|
+
`;
|
|
13952
|
+
var ObjectListItemLoadingText = (textLength) => css59`
|
|
13953
|
+
animation: ${fadeIn} 1s linear infinite alternate;
|
|
13954
|
+
border-radius: var(--rounded-base);
|
|
13955
|
+
background: var(--gray-300);
|
|
13956
|
+
display: block;
|
|
13957
|
+
width: ${textLength};
|
|
13958
|
+
height: var(--fs-sm);
|
|
13959
|
+
`;
|
|
13960
|
+
var ObjectListItemInlineGroup = css59`
|
|
13961
|
+
align-items: center;
|
|
13962
|
+
display: flex;
|
|
13963
|
+
gap: var(--spacing-sm);
|
|
13964
|
+
`;
|
|
13965
|
+
var ObjectListItemInlineHeadingGroup = css59`
|
|
13966
|
+
justify-content: space-between;
|
|
13967
|
+
`;
|
|
13968
|
+
var ObjectListItemTitle = css59`
|
|
13969
|
+
color: var(--brand-secondary-1);
|
|
13970
|
+
font-size: var(--fs-sm);
|
|
13971
|
+
`;
|
|
13972
|
+
var ObjectListItemSmallText = css59`
|
|
13973
|
+
color: var(--brand-secondary-1);
|
|
13974
|
+
font-size: var(--fs-xs);
|
|
13975
|
+
min-width: max-content;
|
|
13976
|
+
`;
|
|
13977
|
+
var ObjectListKeyText = css59`
|
|
13978
|
+
color: var(--gray-400);
|
|
13979
|
+
font-size: var(--fs-xs);
|
|
13980
|
+
text-transform: capitalize;
|
|
13981
|
+
`;
|
|
13982
|
+
var ObjectListValueText = css59`
|
|
13983
|
+
color: var(--gray-500);
|
|
13984
|
+
font-size: var(--fs-xs);
|
|
13985
|
+
text-transform: none;
|
|
13986
|
+
`;
|
|
13987
|
+
|
|
13988
|
+
// src/components/ObjectList/ObjectCompositionListItem.tsx
|
|
13989
|
+
import { jsx as jsx74, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
|
|
13990
|
+
var ObjectCompositionListItem = forwardRef8(
|
|
13991
|
+
({
|
|
13992
|
+
title,
|
|
13993
|
+
date,
|
|
13994
|
+
componentName,
|
|
13995
|
+
icon,
|
|
13996
|
+
publishStatus,
|
|
13997
|
+
href,
|
|
13998
|
+
as,
|
|
13999
|
+
linkManagerComponent: LinkManager,
|
|
14000
|
+
...props
|
|
14001
|
+
}, ref) => {
|
|
14002
|
+
return /* @__PURE__ */ jsx74(LinkManager, { ...props, as, href, ref, passHref: true, legacyBehavior: true, role: "listitem", children: /* @__PURE__ */ jsxs48("a", { css: ObjectListItemContainer, children: [
|
|
14003
|
+
/* @__PURE__ */ jsxs48("div", { css: [ObjectListItemInlineGroup, ObjectListItemInlineHeadingGroup], children: [
|
|
14004
|
+
/* @__PURE__ */ jsx74("span", { role: "heading", css: ObjectListItemTitle, children: title }),
|
|
14005
|
+
/* @__PURE__ */ jsx74("time", { role: "time", dateTime: `${date}`, css: ObjectListItemSmallText, children: formatDate(date) })
|
|
14006
|
+
] }),
|
|
14007
|
+
/* @__PURE__ */ jsxs48("div", { css: ObjectListItemInlineGroup, children: [
|
|
14008
|
+
!icon && !componentName ? null : /* @__PURE__ */ jsxs48("div", { css: [ObjectListItemInlineGroup, ObjectListItemSmallText], children: [
|
|
14009
|
+
!icon ? null : /* @__PURE__ */ jsx74(Icon, { icon, size: "1rem" }),
|
|
14010
|
+
!componentName ? null : /* @__PURE__ */ jsx74("span", { children: componentName })
|
|
14011
|
+
] }),
|
|
14012
|
+
!publishStatus ? null : /* @__PURE__ */ jsx74(StatusBullet, { status: publishStatus, size: "sm" })
|
|
14013
|
+
] })
|
|
14014
|
+
] }) });
|
|
14015
|
+
}
|
|
14016
|
+
);
|
|
14017
|
+
|
|
14018
|
+
// src/components/ObjectList/ObjectListContainer.tsx
|
|
14019
|
+
import * as React18 from "react";
|
|
14020
|
+
|
|
14021
|
+
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
14022
|
+
import { css as css62 } from "@emotion/react";
|
|
14023
|
+
import { useCallback as useCallback3, useMemo as useMemo2 } from "react";
|
|
14024
|
+
import { CgCheck as CgCheck3 } from "react-icons/cg";
|
|
14025
|
+
|
|
13804
14026
|
// src/components/Tooltip/Tooltip.tsx
|
|
13805
|
-
import
|
|
14027
|
+
import React16 from "react";
|
|
13806
14028
|
import {
|
|
13807
14029
|
Tooltip as ReakitTooltip,
|
|
13808
14030
|
TooltipArrow,
|
|
@@ -13811,8 +14033,8 @@ import {
|
|
|
13811
14033
|
} from "reakit/Tooltip";
|
|
13812
14034
|
|
|
13813
14035
|
// src/components/Tooltip/Tooltip.styles.ts
|
|
13814
|
-
import { css as
|
|
13815
|
-
var TooltipContainer =
|
|
14036
|
+
import { css as css60 } from "@emotion/react";
|
|
14037
|
+
var TooltipContainer = css60`
|
|
13816
14038
|
border: 2px solid var(--gray-300);
|
|
13817
14039
|
border-radius: var(--rounded-base);
|
|
13818
14040
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
@@ -13820,61 +14042,346 @@ var TooltipContainer = css58`
|
|
|
13820
14042
|
font-size: var(--fs-xs);
|
|
13821
14043
|
background: var(--white);
|
|
13822
14044
|
`;
|
|
13823
|
-
var TooltipArrowStyles =
|
|
14045
|
+
var TooltipArrowStyles = css60`
|
|
13824
14046
|
svg {
|
|
13825
14047
|
fill: var(--gray-300);
|
|
13826
14048
|
}
|
|
13827
14049
|
`;
|
|
13828
14050
|
|
|
13829
14051
|
// src/components/Tooltip/Tooltip.tsx
|
|
13830
|
-
import { Fragment as Fragment9, jsx as
|
|
14052
|
+
import { Fragment as Fragment9, jsx as jsx75, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
|
|
13831
14053
|
function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
|
|
13832
14054
|
const tooltip = useTooltipState({ placement });
|
|
13833
|
-
return !title ? children : /* @__PURE__ */
|
|
13834
|
-
/* @__PURE__ */
|
|
13835
|
-
/* @__PURE__ */
|
|
13836
|
-
/* @__PURE__ */
|
|
14055
|
+
return !title ? children : /* @__PURE__ */ jsxs49(Fragment9, { children: [
|
|
14056
|
+
/* @__PURE__ */ jsx75(TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => React16.cloneElement(children, referenceProps) }),
|
|
14057
|
+
/* @__PURE__ */ jsxs49(ReakitTooltip, { ...tooltip, ...props, css: TooltipContainer, visible: visible != null ? visible : tooltip.visible, children: [
|
|
14058
|
+
/* @__PURE__ */ jsx75(TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
|
|
13837
14059
|
title
|
|
13838
14060
|
] })
|
|
13839
14061
|
] });
|
|
13840
14062
|
}
|
|
13841
14063
|
|
|
13842
|
-
// src/components/
|
|
13843
|
-
import { css as
|
|
13844
|
-
var
|
|
13845
|
-
|
|
13846
|
-
border:
|
|
13847
|
-
|
|
13848
|
-
|
|
14064
|
+
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
14065
|
+
import { css as css61 } from "@emotion/react";
|
|
14066
|
+
var segmentedControlStyles = css61`
|
|
14067
|
+
--segmented-control-rounded-value: var(--rounded-base);
|
|
14068
|
+
--segmented-control-border-width: 1px;
|
|
14069
|
+
--segmented-control-selected-color: var(--brand-secondary-3);
|
|
14070
|
+
--segmented-control-first-border-radius: var(--segmented-control-rounded-value) 0 0
|
|
14071
|
+
var(--segmented-control-rounded-value);
|
|
14072
|
+
--segmented-control-last-border-radius: 0 var(--segmented-control-rounded-value)
|
|
14073
|
+
var(--segmented-control-rounded-value) 0;
|
|
14074
|
+
|
|
14075
|
+
position: relative;
|
|
13849
14076
|
display: flex;
|
|
13850
|
-
|
|
13851
|
-
|
|
13852
|
-
|
|
14077
|
+
justify-content: flex-start;
|
|
14078
|
+
width: fit-content;
|
|
14079
|
+
background-color: var(--gray-300);
|
|
14080
|
+
padding: var(--segmented-control-border-width);
|
|
14081
|
+
gap: var(--segmented-control-border-width);
|
|
14082
|
+
border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
|
|
14083
|
+
font-size: var(--fs-xs);
|
|
14084
|
+
`;
|
|
14085
|
+
var segmentedControlVerticalStyles = css61`
|
|
14086
|
+
flex-direction: column;
|
|
14087
|
+
--segmented-control-first-border-radius: var(--segmented-control-rounded-value)
|
|
14088
|
+
var(--segmented-control-rounded-value) 0 0;
|
|
14089
|
+
--segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
|
|
14090
|
+
var(--segmented-control-rounded-value);
|
|
14091
|
+
`;
|
|
14092
|
+
var segmentedControlItemStyles = css61`
|
|
14093
|
+
&:first-of-type label {
|
|
14094
|
+
border-radius: var(--segmented-control-first-border-radius);
|
|
14095
|
+
}
|
|
14096
|
+
&:last-of-type label {
|
|
14097
|
+
border-radius: var(--segmented-control-last-border-radius);
|
|
14098
|
+
}
|
|
14099
|
+
`;
|
|
14100
|
+
var segmentedControlInputStyles = css61`
|
|
14101
|
+
clip: rect(0, 0, 0, 0);
|
|
14102
|
+
position: absolute;
|
|
14103
|
+
width: 1px;
|
|
14104
|
+
height: 1px;
|
|
14105
|
+
overflow: hidden;
|
|
14106
|
+
`;
|
|
14107
|
+
var segmentedControlLabelStyles = css61`
|
|
14108
|
+
position: relative;
|
|
14109
|
+
display: flex;
|
|
14110
|
+
align-items: center;
|
|
14111
|
+
justify-content: center;
|
|
14112
|
+
height: 2rem;
|
|
14113
|
+
padding-inline: var(--spacing-base);
|
|
14114
|
+
background-color: white;
|
|
14115
|
+
transition-property: background-color, color, box-shadow;
|
|
14116
|
+
transition-duration: var(--duration-xfast);
|
|
14117
|
+
transition-timing-function: ease-in-out;
|
|
14118
|
+
z-index: 1;
|
|
14119
|
+
cursor: pointer;
|
|
13853
14120
|
|
|
13854
|
-
&:
|
|
13855
|
-
|
|
13856
|
-
|
|
13857
|
-
|
|
14121
|
+
&:has(:checked:not(:disabled)) {
|
|
14122
|
+
background-color: var(--segmented-control-selected-color);
|
|
14123
|
+
outline: var(--segmented-control-border-width) solid var(--segmented-control-selected-color);
|
|
14124
|
+
box-shadow: 0 0.43em 1.7em 0 rgba(0, 0, 0, 0.15);
|
|
14125
|
+
color: white;
|
|
14126
|
+
-webkit-text-stroke-width: thin;
|
|
14127
|
+
z-index: 0;
|
|
13858
14128
|
}
|
|
13859
14129
|
|
|
13860
|
-
|
|
13861
|
-
background:
|
|
13862
|
-
color: currentColor;
|
|
14130
|
+
&:hover:not(:has(:disabled, :checked)) {
|
|
14131
|
+
background-color: var(--gray-100);
|
|
13863
14132
|
}
|
|
13864
|
-
`;
|
|
13865
14133
|
|
|
13866
|
-
|
|
13867
|
-
|
|
13868
|
-
|
|
13869
|
-
|
|
13870
|
-
|
|
14134
|
+
&:has(:disabled) {
|
|
14135
|
+
color: var(--gray-400);
|
|
14136
|
+
cursor: default;
|
|
14137
|
+
}
|
|
14138
|
+
|
|
14139
|
+
&:has(:checked:disabled) {
|
|
14140
|
+
color: var(--gray-50);
|
|
14141
|
+
background-color: var(--gray-400);
|
|
14142
|
+
}
|
|
14143
|
+
`;
|
|
14144
|
+
var segmentedControlLabelIconOnlyStyles = css61`
|
|
14145
|
+
padding-inline: 0.5em;
|
|
14146
|
+
`;
|
|
14147
|
+
var segmentedControlLabelCheckStyles = css61`
|
|
14148
|
+
opacity: 0.5;
|
|
14149
|
+
`;
|
|
14150
|
+
var segmentedControlLabelContentStyles = css61`
|
|
14151
|
+
display: flex;
|
|
14152
|
+
align-items: center;
|
|
14153
|
+
justify-content: center;
|
|
14154
|
+
gap: var(--spacing-sm);
|
|
14155
|
+
height: 100%;
|
|
14156
|
+
`;
|
|
14157
|
+
var segmentedControlLabelTextStyles = css61``;
|
|
14158
|
+
|
|
14159
|
+
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
14160
|
+
import { jsx as jsx76, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
|
|
14161
|
+
var SegmentedControl = ({
|
|
14162
|
+
name,
|
|
14163
|
+
options,
|
|
14164
|
+
value,
|
|
14165
|
+
onChange,
|
|
14166
|
+
noCheckmark = false,
|
|
14167
|
+
disabled = false,
|
|
14168
|
+
orientation = "horizontal",
|
|
14169
|
+
size = "md",
|
|
14170
|
+
...props
|
|
14171
|
+
}) => {
|
|
14172
|
+
const onOptionChange = useCallback3(
|
|
14173
|
+
(event) => {
|
|
14174
|
+
if (event.target.checked) {
|
|
14175
|
+
onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
|
|
14176
|
+
}
|
|
14177
|
+
},
|
|
14178
|
+
[options, onChange]
|
|
14179
|
+
);
|
|
14180
|
+
const sizeStyles = useMemo2(() => {
|
|
14181
|
+
const map = {
|
|
14182
|
+
sm: css62({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
|
|
14183
|
+
md: css62({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
|
|
14184
|
+
lg: css62({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
|
|
14185
|
+
};
|
|
14186
|
+
return map[size];
|
|
14187
|
+
}, [size]);
|
|
14188
|
+
const isIconOnly = useMemo2(() => {
|
|
14189
|
+
return options.every((option) => option.icon && !option.label);
|
|
14190
|
+
}, [options]);
|
|
14191
|
+
return /* @__PURE__ */ jsx76(
|
|
14192
|
+
"div",
|
|
14193
|
+
{
|
|
14194
|
+
css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
|
|
14195
|
+
...props,
|
|
14196
|
+
children: options.map((option, index) => {
|
|
14197
|
+
const text = option.label ? option.label : option.icon ? null : String(option.value);
|
|
14198
|
+
const isDisabled = disabled || option.disabled;
|
|
14199
|
+
return /* @__PURE__ */ jsx76(
|
|
14200
|
+
Tooltip,
|
|
14201
|
+
{
|
|
14202
|
+
title: isDisabled || !option.tooltip ? "" : option.tooltip,
|
|
14203
|
+
children: /* @__PURE__ */ jsx76("div", { css: segmentedControlItemStyles, children: /* @__PURE__ */ jsxs50(
|
|
14204
|
+
"label",
|
|
14205
|
+
{
|
|
14206
|
+
css: [
|
|
14207
|
+
segmentedControlLabelStyles,
|
|
14208
|
+
sizeStyles,
|
|
14209
|
+
isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
|
|
14210
|
+
],
|
|
14211
|
+
children: [
|
|
14212
|
+
/* @__PURE__ */ jsx76(
|
|
14213
|
+
"input",
|
|
14214
|
+
{
|
|
14215
|
+
css: segmentedControlInputStyles,
|
|
14216
|
+
type: "radio",
|
|
14217
|
+
name,
|
|
14218
|
+
value: index,
|
|
14219
|
+
checked: option.value === value,
|
|
14220
|
+
onChange: onOptionChange,
|
|
14221
|
+
disabled: isDisabled
|
|
14222
|
+
}
|
|
14223
|
+
),
|
|
14224
|
+
option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx76(CgCheck3, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
|
|
14225
|
+
/* @__PURE__ */ jsxs50("span", { css: segmentedControlLabelContentStyles, children: [
|
|
14226
|
+
!option.icon ? null : /* @__PURE__ */ jsx76(option.icon, { size: "1.5em" }),
|
|
14227
|
+
!text ? null : /* @__PURE__ */ jsx76("span", { css: segmentedControlLabelTextStyles, children: text })
|
|
14228
|
+
] })
|
|
14229
|
+
]
|
|
14230
|
+
}
|
|
14231
|
+
) })
|
|
14232
|
+
},
|
|
14233
|
+
JSON.stringify(option.value)
|
|
14234
|
+
);
|
|
14235
|
+
})
|
|
14236
|
+
}
|
|
14237
|
+
);
|
|
14238
|
+
};
|
|
14239
|
+
|
|
14240
|
+
// src/components/ObjectList/ObjectListItemLoadingSkeleton.tsx
|
|
14241
|
+
import { jsx as jsx77, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
|
|
14242
|
+
var ObjectListItemLoadingSkeleton = () => {
|
|
14243
|
+
return /* @__PURE__ */ jsxs51("div", { css: [ObjectListItemContainer, ObjectListItemLoading], children: [
|
|
14244
|
+
/* @__PURE__ */ jsxs51("div", { css: [ObjectListItemInlineGroup, ObjectListItemInlineHeadingGroup], children: [
|
|
14245
|
+
/* @__PURE__ */ jsx77("span", { css: ObjectListItemLoadingText("30ch") }),
|
|
14246
|
+
/* @__PURE__ */ jsx77("span", { css: ObjectListItemLoadingText("5ch") })
|
|
14247
|
+
] }),
|
|
14248
|
+
/* @__PURE__ */ jsxs51("div", { css: ObjectListItemInlineGroup, children: [
|
|
14249
|
+
/* @__PURE__ */ jsx77("span", { css: ObjectListItemLoadingText("10ch") }),
|
|
14250
|
+
/* @__PURE__ */ jsx77("span", { css: ObjectListItemLoadingText("10ch") })
|
|
14251
|
+
] })
|
|
14252
|
+
] });
|
|
14253
|
+
};
|
|
14254
|
+
|
|
14255
|
+
// src/components/ObjectList/styles/ObjectListContainer.styles.ts
|
|
14256
|
+
import { css as css63 } from "@emotion/react";
|
|
14257
|
+
var InlineGroup = css63`
|
|
14258
|
+
align-items: center;
|
|
14259
|
+
display: flex;
|
|
14260
|
+
gap: var(--spacing-base);
|
|
14261
|
+
`;
|
|
14262
|
+
var FilterGroup = css63`
|
|
14263
|
+
${InlineGroup}
|
|
14264
|
+
justify-content: space-between
|
|
14265
|
+
`;
|
|
14266
|
+
var GroupLabel = css63`
|
|
14267
|
+
font-size: var(--fs-sm);
|
|
14268
|
+
`;
|
|
14269
|
+
|
|
14270
|
+
// src/components/ObjectList/ObjectListContainer.tsx
|
|
14271
|
+
import { jsx as jsx78, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
|
|
14272
|
+
var ObjectListContainer = ({
|
|
14273
|
+
title = "Recent Compositions",
|
|
14274
|
+
list,
|
|
14275
|
+
filterOptions,
|
|
14276
|
+
filterValue,
|
|
14277
|
+
isLoading,
|
|
14278
|
+
onSetFilterOption,
|
|
14279
|
+
resolveDefaultComponent = (value) => /* @__PURE__ */ jsx78(ObjectCompositionListItem, { ...value }),
|
|
14280
|
+
children,
|
|
14281
|
+
...props
|
|
14282
|
+
}) => {
|
|
14283
|
+
const [loadingList, setLoadingList] = React18.useState(5);
|
|
14284
|
+
React18.useEffect(() => {
|
|
14285
|
+
if (list.length) {
|
|
14286
|
+
setLoadingList(list.length);
|
|
14287
|
+
}
|
|
14288
|
+
}, [list]);
|
|
14289
|
+
return /* @__PURE__ */ jsxs52(VerticalRhythm, { ...props, children: [
|
|
14290
|
+
/* @__PURE__ */ jsxs52("div", { css: FilterGroup, children: [
|
|
14291
|
+
/* @__PURE__ */ jsx78(Heading, { level: 4, withMarginBottom: false, children: title }),
|
|
14292
|
+
/* @__PURE__ */ jsxs52("div", { css: InlineGroup, children: [
|
|
14293
|
+
/* @__PURE__ */ jsx78("span", { css: GroupLabel, children: "Show" }),
|
|
14294
|
+
/* @__PURE__ */ jsx78(
|
|
14295
|
+
SegmentedControl,
|
|
14296
|
+
{
|
|
14297
|
+
name: "recent-filter-options",
|
|
14298
|
+
options: filterOptions,
|
|
14299
|
+
value: filterValue,
|
|
14300
|
+
onChange: (e) => onSetFilterOption(e),
|
|
14301
|
+
noCheckmark: true,
|
|
14302
|
+
disabled: list.length === 0
|
|
14303
|
+
}
|
|
14304
|
+
)
|
|
14305
|
+
] })
|
|
14306
|
+
] }),
|
|
14307
|
+
isLoading ? /* @__PURE__ */ jsx78("div", { children: Array.from(Array(loadingList).keys()).map((item) => /* @__PURE__ */ jsx78(ObjectListItemLoadingSkeleton, {}, item)) }) : null,
|
|
14308
|
+
list.length && !isLoading ? /* @__PURE__ */ jsx78("div", { role: "list", children: list == null ? void 0 : list.map((item) => resolveDefaultComponent(item)) }) : null,
|
|
14309
|
+
children
|
|
14310
|
+
] });
|
|
14311
|
+
};
|
|
14312
|
+
|
|
14313
|
+
// src/components/ObjectList/ObjectPersonalizationListItem.tsx
|
|
14314
|
+
import { forwardRef as forwardRef9 } from "react";
|
|
14315
|
+
import { jsx as jsx79, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
|
|
14316
|
+
var ObjectPersonalizationListItem = forwardRef9(({ title, date, id, data, linkManagerComponent: LinkManager, as, ...props }, ref) => {
|
|
14317
|
+
return /* @__PURE__ */ jsxs53(
|
|
14318
|
+
LinkManager,
|
|
14319
|
+
{
|
|
14320
|
+
...props,
|
|
14321
|
+
as,
|
|
14322
|
+
href: props.href,
|
|
14323
|
+
ref,
|
|
14324
|
+
passHref: true,
|
|
14325
|
+
legacyBehavior: true,
|
|
14326
|
+
css: ObjectListItemContainer,
|
|
14327
|
+
role: "listitem",
|
|
14328
|
+
children: [
|
|
14329
|
+
/* @__PURE__ */ jsxs53("div", { css: [ObjectListItemInlineGroup, ObjectListItemInlineHeadingGroup], children: [
|
|
14330
|
+
/* @__PURE__ */ jsx79("span", { role: "heading", css: ObjectListItemTitle, children: title }),
|
|
14331
|
+
/* @__PURE__ */ jsx79("time", { role: "time", dateTime: `${date}`, css: ObjectListItemSmallText, children: formatDate(date) })
|
|
14332
|
+
] }),
|
|
14333
|
+
/* @__PURE__ */ jsxs53("div", { css: ObjectListItemInlineGroup, children: [
|
|
14334
|
+
/* @__PURE__ */ jsxs53("span", { css: ObjectListKeyText, children: [
|
|
14335
|
+
"ID: ",
|
|
14336
|
+
/* @__PURE__ */ jsx79("span", { css: ObjectListValueText, children: id })
|
|
14337
|
+
] }),
|
|
14338
|
+
Object.entries(data).map(([key, value], i) => /* @__PURE__ */ jsxs53("span", { css: ObjectListKeyText, children: [
|
|
14339
|
+
key,
|
|
14340
|
+
": ",
|
|
14341
|
+
/* @__PURE__ */ jsx79("span", { css: ObjectListValueText, children: value })
|
|
14342
|
+
] }, i))
|
|
14343
|
+
] })
|
|
14344
|
+
]
|
|
14345
|
+
}
|
|
14346
|
+
);
|
|
14347
|
+
});
|
|
14348
|
+
|
|
14349
|
+
// src/components/ParameterInputs/styles/ParameterBindingButton.styles.ts
|
|
14350
|
+
import { css as css64 } from "@emotion/react";
|
|
14351
|
+
var inputIconBtn = css64`
|
|
14352
|
+
align-items: center;
|
|
14353
|
+
border: none;
|
|
14354
|
+
border-radius: var(--rounded-base);
|
|
14355
|
+
background: none;
|
|
14356
|
+
display: flex;
|
|
14357
|
+
padding: var(--spacing-2xs);
|
|
14358
|
+
transition: background var(--duration-fast) var(--timing-ease-out),
|
|
14359
|
+
color var(--duration-fast) var(--timing-ease-out);
|
|
14360
|
+
|
|
14361
|
+
&:hover,
|
|
14362
|
+
&[aria-pressed='true']:not(:disabled) {
|
|
14363
|
+
background: var(--brand-secondary-3);
|
|
14364
|
+
color: var(--white);
|
|
14365
|
+
}
|
|
14366
|
+
|
|
14367
|
+
&[aria-disabled='true'] {
|
|
14368
|
+
background: none;
|
|
14369
|
+
color: currentColor;
|
|
14370
|
+
}
|
|
14371
|
+
`;
|
|
14372
|
+
|
|
14373
|
+
// src/components/ParameterInputs/ConnectToDataElementButton.tsx
|
|
14374
|
+
import { jsx as jsx80, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
|
|
14375
|
+
var ConnectToDataElementButton = ({
|
|
14376
|
+
icon,
|
|
14377
|
+
iconColor,
|
|
13871
14378
|
children,
|
|
13872
14379
|
isBound,
|
|
13873
14380
|
isLocked,
|
|
13874
14381
|
...props
|
|
13875
14382
|
}) => {
|
|
13876
14383
|
const title = isLocked ? "Read-only pattern parameter" : isBound ? "Connected to external content. Click to edit" : "Click to connect to external content";
|
|
13877
|
-
return /* @__PURE__ */
|
|
14384
|
+
return /* @__PURE__ */ jsx80(Tooltip, { title, children: /* @__PURE__ */ jsxs54(
|
|
13878
14385
|
"button",
|
|
13879
14386
|
{
|
|
13880
14387
|
css: inputIconBtn,
|
|
@@ -13883,7 +14390,7 @@ var ConnectToDataElementButton = ({
|
|
|
13883
14390
|
"aria-disabled": isLocked,
|
|
13884
14391
|
...props,
|
|
13885
14392
|
children: [
|
|
13886
|
-
/* @__PURE__ */
|
|
14393
|
+
/* @__PURE__ */ jsx80(
|
|
13887
14394
|
Icon,
|
|
13888
14395
|
{
|
|
13889
14396
|
icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
|
|
@@ -13919,8 +14426,8 @@ var useParameterShell = () => {
|
|
|
13919
14426
|
};
|
|
13920
14427
|
|
|
13921
14428
|
// src/components/ParameterInputs/styles/ParameterInput.styles.ts
|
|
13922
|
-
import { css as
|
|
13923
|
-
var inputContainer2 =
|
|
14429
|
+
import { css as css65 } from "@emotion/react";
|
|
14430
|
+
var inputContainer2 = css65`
|
|
13924
14431
|
position: relative;
|
|
13925
14432
|
|
|
13926
14433
|
&:hover,
|
|
@@ -13932,14 +14439,14 @@ var inputContainer2 = css60`
|
|
|
13932
14439
|
}
|
|
13933
14440
|
}
|
|
13934
14441
|
`;
|
|
13935
|
-
var labelText2 =
|
|
14442
|
+
var labelText2 = css65`
|
|
13936
14443
|
align-items: center;
|
|
13937
14444
|
display: flex;
|
|
13938
14445
|
gap: var(--spacing-xs);
|
|
13939
14446
|
font-weight: var(--fw-regular);
|
|
13940
14447
|
margin: 0 0 var(--spacing-xs);
|
|
13941
14448
|
`;
|
|
13942
|
-
var input2 =
|
|
14449
|
+
var input2 = css65`
|
|
13943
14450
|
display: block;
|
|
13944
14451
|
appearance: none;
|
|
13945
14452
|
box-sizing: border-box;
|
|
@@ -13983,18 +14490,18 @@ var input2 = css60`
|
|
|
13983
14490
|
color: var(--gray-400);
|
|
13984
14491
|
}
|
|
13985
14492
|
`;
|
|
13986
|
-
var selectInput =
|
|
14493
|
+
var selectInput = css65`
|
|
13987
14494
|
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");
|
|
13988
14495
|
background-position: right var(--spacing-sm) center;
|
|
13989
14496
|
background-repeat: no-repeat;
|
|
13990
14497
|
background-size: 1rem;
|
|
13991
14498
|
padding-right: var(--spacing-xl);
|
|
13992
14499
|
`;
|
|
13993
|
-
var inputWrapper =
|
|
14500
|
+
var inputWrapper = css65`
|
|
13994
14501
|
display: flex; // used to correct overflow with chrome textarea
|
|
13995
14502
|
position: relative;
|
|
13996
14503
|
`;
|
|
13997
|
-
var inputIcon2 =
|
|
14504
|
+
var inputIcon2 = css65`
|
|
13998
14505
|
align-items: center;
|
|
13999
14506
|
background: var(--white);
|
|
14000
14507
|
border-radius: var(--rounded-md) 0 0 var(--rounded-md);
|
|
@@ -14010,7 +14517,7 @@ var inputIcon2 = css60`
|
|
|
14010
14517
|
width: var(--spacing-lg);
|
|
14011
14518
|
z-index: var(--z-10);
|
|
14012
14519
|
`;
|
|
14013
|
-
var inputToggleLabel2 =
|
|
14520
|
+
var inputToggleLabel2 = css65`
|
|
14014
14521
|
align-items: center;
|
|
14015
14522
|
background: var(--white);
|
|
14016
14523
|
cursor: pointer;
|
|
@@ -14021,7 +14528,7 @@ var inputToggleLabel2 = css60`
|
|
|
14021
14528
|
min-height: var(--spacing-md);
|
|
14022
14529
|
position: relative;
|
|
14023
14530
|
`;
|
|
14024
|
-
var toggleInput2 =
|
|
14531
|
+
var toggleInput2 = css65`
|
|
14025
14532
|
appearance: none;
|
|
14026
14533
|
border: 1px solid var(--gray-300);
|
|
14027
14534
|
background: var(--white);
|
|
@@ -14060,7 +14567,7 @@ var toggleInput2 = css60`
|
|
|
14060
14567
|
border-color: var(--gray-300);
|
|
14061
14568
|
}
|
|
14062
14569
|
`;
|
|
14063
|
-
var inlineLabel2 =
|
|
14570
|
+
var inlineLabel2 = css65`
|
|
14064
14571
|
padding-left: var(--spacing-lg);
|
|
14065
14572
|
font-size: var(--fs-sm);
|
|
14066
14573
|
font-weight: var(--fw-regular);
|
|
@@ -14076,7 +14583,7 @@ var inlineLabel2 = css60`
|
|
|
14076
14583
|
}
|
|
14077
14584
|
}
|
|
14078
14585
|
`;
|
|
14079
|
-
var inputMenu =
|
|
14586
|
+
var inputMenu = css65`
|
|
14080
14587
|
background: none;
|
|
14081
14588
|
border: none;
|
|
14082
14589
|
padding: var(--spacing-2xs);
|
|
@@ -14092,14 +14599,14 @@ var inputMenu = css60`
|
|
|
14092
14599
|
background-color: var(--gray-200);
|
|
14093
14600
|
}
|
|
14094
14601
|
`;
|
|
14095
|
-
var textarea2 =
|
|
14602
|
+
var textarea2 = css65`
|
|
14096
14603
|
resize: vertical;
|
|
14097
14604
|
min-height: 2rem;
|
|
14098
14605
|
`;
|
|
14099
|
-
var imageWrapper =
|
|
14606
|
+
var imageWrapper = css65`
|
|
14100
14607
|
background: var(--white);
|
|
14101
14608
|
`;
|
|
14102
|
-
var img =
|
|
14609
|
+
var img = css65`
|
|
14103
14610
|
animation: ${fadeIn} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
14104
14611
|
object-fit: contain;
|
|
14105
14612
|
max-width: 100%;
|
|
@@ -14107,7 +14614,7 @@ var img = css60`
|
|
|
14107
14614
|
opacity: var(--opacity-0);
|
|
14108
14615
|
margin: var(--spacing-sm) auto 0;
|
|
14109
14616
|
`;
|
|
14110
|
-
var dataConnectButton =
|
|
14617
|
+
var dataConnectButton = css65`
|
|
14111
14618
|
align-items: center;
|
|
14112
14619
|
appearance: none;
|
|
14113
14620
|
box-sizing: border-box;
|
|
@@ -14142,7 +14649,7 @@ var dataConnectButton = css60`
|
|
|
14142
14649
|
pointer-events: none;
|
|
14143
14650
|
}
|
|
14144
14651
|
`;
|
|
14145
|
-
var linkParameterBtn =
|
|
14652
|
+
var linkParameterBtn = css65`
|
|
14146
14653
|
border-radius: var(--rounded-base);
|
|
14147
14654
|
background: var(--white);
|
|
14148
14655
|
border: none;
|
|
@@ -14151,7 +14658,7 @@ var linkParameterBtn = css60`
|
|
|
14151
14658
|
font-size: var(--fs-sm);
|
|
14152
14659
|
line-height: 1;
|
|
14153
14660
|
`;
|
|
14154
|
-
var linkParameterControls =
|
|
14661
|
+
var linkParameterControls = css65`
|
|
14155
14662
|
position: absolute;
|
|
14156
14663
|
inset: 0 0 0 auto;
|
|
14157
14664
|
padding: 0 var(--spacing-base);
|
|
@@ -14160,12 +14667,12 @@ var linkParameterControls = css60`
|
|
|
14160
14667
|
justify-content: center;
|
|
14161
14668
|
gap: var(--spacing-base);
|
|
14162
14669
|
`;
|
|
14163
|
-
var linkParameterInput = (withExternalLinkIcon) =>
|
|
14670
|
+
var linkParameterInput = (withExternalLinkIcon) => css65`
|
|
14164
14671
|
padding-right: calc(
|
|
14165
14672
|
${withExternalLinkIcon ? "var(--spacing-2xl)" : "var(--spacing-xl)"} + var(--spacing-base)
|
|
14166
14673
|
);
|
|
14167
14674
|
`;
|
|
14168
|
-
var linkParameterIcon =
|
|
14675
|
+
var linkParameterIcon = css65`
|
|
14169
14676
|
align-items: center;
|
|
14170
14677
|
color: var(--brand-secondary-3);
|
|
14171
14678
|
display: flex;
|
|
@@ -14180,7 +14687,7 @@ var linkParameterIcon = css60`
|
|
|
14180
14687
|
`;
|
|
14181
14688
|
|
|
14182
14689
|
// src/components/ParameterInputs/ParameterDataResource.tsx
|
|
14183
|
-
import { jsx as
|
|
14690
|
+
import { jsx as jsx81, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
|
|
14184
14691
|
function ParameterDataResource({
|
|
14185
14692
|
label,
|
|
14186
14693
|
labelLeadingIcon,
|
|
@@ -14190,12 +14697,12 @@ function ParameterDataResource({
|
|
|
14190
14697
|
disabled,
|
|
14191
14698
|
children
|
|
14192
14699
|
}) {
|
|
14193
|
-
return /* @__PURE__ */
|
|
14194
|
-
/* @__PURE__ */
|
|
14700
|
+
return /* @__PURE__ */ jsxs55("div", { "data-testid": "parameter-data-connect-button", children: [
|
|
14701
|
+
/* @__PURE__ */ jsxs55("span", { css: labelText2, children: [
|
|
14195
14702
|
labelLeadingIcon ? labelLeadingIcon : null,
|
|
14196
14703
|
label
|
|
14197
14704
|
] }),
|
|
14198
|
-
/* @__PURE__ */
|
|
14705
|
+
/* @__PURE__ */ jsxs55(
|
|
14199
14706
|
"button",
|
|
14200
14707
|
{
|
|
14201
14708
|
type: "button",
|
|
@@ -14204,30 +14711,30 @@ function ParameterDataResource({
|
|
|
14204
14711
|
disabled,
|
|
14205
14712
|
onClick: onConnectDatasource,
|
|
14206
14713
|
children: [
|
|
14207
|
-
/* @__PURE__ */
|
|
14714
|
+
/* @__PURE__ */ jsx81("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx81(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
|
|
14208
14715
|
children
|
|
14209
14716
|
]
|
|
14210
14717
|
}
|
|
14211
14718
|
),
|
|
14212
|
-
caption ? /* @__PURE__ */
|
|
14719
|
+
caption ? /* @__PURE__ */ jsx81(Caption, { children: caption }) : null
|
|
14213
14720
|
] });
|
|
14214
14721
|
}
|
|
14215
14722
|
|
|
14216
14723
|
// src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
|
|
14217
|
-
import { css as
|
|
14218
|
-
var ParameterDrawerHeaderContainer =
|
|
14724
|
+
import { css as css66 } from "@emotion/react";
|
|
14725
|
+
var ParameterDrawerHeaderContainer = css66`
|
|
14219
14726
|
align-items: center;
|
|
14220
14727
|
display: flex;
|
|
14221
14728
|
gap: var(--spacing-base);
|
|
14222
14729
|
justify-content: space-between;
|
|
14223
14730
|
margin-bottom: var(--spacing-sm);
|
|
14224
14731
|
`;
|
|
14225
|
-
var ParameterDrawerHeaderTitleGroup =
|
|
14732
|
+
var ParameterDrawerHeaderTitleGroup = css66`
|
|
14226
14733
|
align-items: center;
|
|
14227
14734
|
display: flex;
|
|
14228
14735
|
gap: var(--spacing-sm);
|
|
14229
14736
|
`;
|
|
14230
|
-
var ParameterDrawerHeaderTitle =
|
|
14737
|
+
var ParameterDrawerHeaderTitle = css66`
|
|
14231
14738
|
text-overflow: ellipsis;
|
|
14232
14739
|
white-space: nowrap;
|
|
14233
14740
|
overflow: hidden;
|
|
@@ -14235,23 +14742,23 @@ var ParameterDrawerHeaderTitle = css61`
|
|
|
14235
14742
|
`;
|
|
14236
14743
|
|
|
14237
14744
|
// src/components/ParameterInputs/ParameterDrawerHeader.tsx
|
|
14238
|
-
import { jsx as
|
|
14745
|
+
import { jsx as jsx82, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
|
|
14239
14746
|
var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
|
|
14240
|
-
return /* @__PURE__ */
|
|
14241
|
-
/* @__PURE__ */
|
|
14747
|
+
return /* @__PURE__ */ jsxs56("div", { css: ParameterDrawerHeaderContainer, children: [
|
|
14748
|
+
/* @__PURE__ */ jsxs56("header", { css: ParameterDrawerHeaderTitleGroup, children: [
|
|
14242
14749
|
iconBeforeTitle,
|
|
14243
|
-
/* @__PURE__ */
|
|
14750
|
+
/* @__PURE__ */ jsx82(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title, children: title })
|
|
14244
14751
|
] }),
|
|
14245
14752
|
children
|
|
14246
14753
|
] });
|
|
14247
14754
|
};
|
|
14248
14755
|
|
|
14249
14756
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
14250
|
-
import { forwardRef as
|
|
14757
|
+
import { forwardRef as forwardRef10 } from "react";
|
|
14251
14758
|
|
|
14252
14759
|
// src/components/ParameterInputs/styles/ParameterGroup.styles.ts
|
|
14253
|
-
import { css as
|
|
14254
|
-
var fieldsetStyles =
|
|
14760
|
+
import { css as css67 } from "@emotion/react";
|
|
14761
|
+
var fieldsetStyles = css67`
|
|
14255
14762
|
&:disabled,
|
|
14256
14763
|
[readonly] {
|
|
14257
14764
|
pointer-events: none;
|
|
@@ -14262,7 +14769,7 @@ var fieldsetStyles = css62`
|
|
|
14262
14769
|
}
|
|
14263
14770
|
}
|
|
14264
14771
|
`;
|
|
14265
|
-
var fieldsetLegend2 =
|
|
14772
|
+
var fieldsetLegend2 = css67`
|
|
14266
14773
|
display: block;
|
|
14267
14774
|
font-weight: var(--fw-medium);
|
|
14268
14775
|
margin-bottom: var(--spacing-sm);
|
|
@@ -14270,38 +14777,38 @@ var fieldsetLegend2 = css62`
|
|
|
14270
14777
|
`;
|
|
14271
14778
|
|
|
14272
14779
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
14273
|
-
import { jsx as
|
|
14274
|
-
var ParameterGroup =
|
|
14780
|
+
import { jsx as jsx83, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
|
|
14781
|
+
var ParameterGroup = forwardRef10(
|
|
14275
14782
|
({ legend, isDisabled, children, ...props }, ref) => {
|
|
14276
|
-
return /* @__PURE__ */
|
|
14277
|
-
/* @__PURE__ */
|
|
14783
|
+
return /* @__PURE__ */ jsxs57("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
|
|
14784
|
+
/* @__PURE__ */ jsx83("legend", { css: fieldsetLegend2, children: legend }),
|
|
14278
14785
|
children
|
|
14279
14786
|
] });
|
|
14280
14787
|
}
|
|
14281
14788
|
);
|
|
14282
14789
|
|
|
14283
14790
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
14284
|
-
import { forwardRef as
|
|
14791
|
+
import { forwardRef as forwardRef12, useCallback as useCallback4, useDeferredValue, useEffect as useEffect10, useState as useState9 } from "react";
|
|
14285
14792
|
|
|
14286
14793
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
14287
|
-
import { useState as
|
|
14794
|
+
import { useState as useState8 } from "react";
|
|
14288
14795
|
|
|
14289
14796
|
// src/components/ParameterInputs/ParameterLabel.tsx
|
|
14290
|
-
import { jsx as
|
|
14797
|
+
import { jsx as jsx84 } from "@emotion/react/jsx-runtime";
|
|
14291
14798
|
var ParameterLabel = ({ id, asSpan, children, ...props }) => {
|
|
14292
|
-
return !asSpan ? /* @__PURE__ */
|
|
14799
|
+
return !asSpan ? /* @__PURE__ */ jsx84("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx84("span", { "aria-labelledby": id, css: labelText2, children });
|
|
14293
14800
|
};
|
|
14294
14801
|
|
|
14295
14802
|
// src/components/ParameterInputs/ParameterMenuButton.tsx
|
|
14296
|
-
import { forwardRef as
|
|
14297
|
-
import { jsx as
|
|
14298
|
-
var ParameterMenuButton =
|
|
14803
|
+
import { forwardRef as forwardRef11 } from "react";
|
|
14804
|
+
import { jsx as jsx85 } from "@emotion/react/jsx-runtime";
|
|
14805
|
+
var ParameterMenuButton = forwardRef11(
|
|
14299
14806
|
({ label, children }, ref) => {
|
|
14300
|
-
return /* @__PURE__ */
|
|
14807
|
+
return /* @__PURE__ */ jsx85(
|
|
14301
14808
|
Menu,
|
|
14302
14809
|
{
|
|
14303
14810
|
menuLabel: `${label} menu`,
|
|
14304
|
-
menuTrigger: /* @__PURE__ */
|
|
14811
|
+
menuTrigger: /* @__PURE__ */ jsx85(
|
|
14305
14812
|
"button",
|
|
14306
14813
|
{
|
|
14307
14814
|
className: "parameter-menu",
|
|
@@ -14309,7 +14816,7 @@ var ParameterMenuButton = forwardRef8(
|
|
|
14309
14816
|
type: "button",
|
|
14310
14817
|
"aria-label": `${label} options`,
|
|
14311
14818
|
ref,
|
|
14312
|
-
children: /* @__PURE__ */
|
|
14819
|
+
children: /* @__PURE__ */ jsx85(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
|
|
14313
14820
|
}
|
|
14314
14821
|
),
|
|
14315
14822
|
children
|
|
@@ -14319,15 +14826,15 @@ var ParameterMenuButton = forwardRef8(
|
|
|
14319
14826
|
);
|
|
14320
14827
|
|
|
14321
14828
|
// src/components/ParameterInputs/styles/ParameterShell.styles.ts
|
|
14322
|
-
import { css as
|
|
14323
|
-
var emptyParameterShell =
|
|
14829
|
+
import { css as css68 } from "@emotion/react";
|
|
14830
|
+
var emptyParameterShell = css68`
|
|
14324
14831
|
border-radius: var(--rounded-sm);
|
|
14325
14832
|
background: var(--white);
|
|
14326
14833
|
flex-grow: 1;
|
|
14327
14834
|
padding: var(--spacing-xs);
|
|
14328
14835
|
position: relative;
|
|
14329
14836
|
`;
|
|
14330
|
-
var emptyParameterShellText =
|
|
14837
|
+
var emptyParameterShellText = css68`
|
|
14331
14838
|
background: var(--brand-secondary-6);
|
|
14332
14839
|
border-radius: var(--rounded-sm);
|
|
14333
14840
|
padding: var(--spacing-sm);
|
|
@@ -14335,7 +14842,7 @@ var emptyParameterShellText = css63`
|
|
|
14335
14842
|
font-size: var(--fs-sm);
|
|
14336
14843
|
margin: 0;
|
|
14337
14844
|
`;
|
|
14338
|
-
var overrideMarker =
|
|
14845
|
+
var overrideMarker = css68`
|
|
14339
14846
|
border-radius: var(--rounded-sm);
|
|
14340
14847
|
border: 10px solid var(--gray-300);
|
|
14341
14848
|
border-left-color: transparent;
|
|
@@ -14346,7 +14853,7 @@ var overrideMarker = css63`
|
|
|
14346
14853
|
`;
|
|
14347
14854
|
|
|
14348
14855
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
14349
|
-
import { jsx as
|
|
14856
|
+
import { jsx as jsx86, jsxs as jsxs58 } from "@emotion/react/jsx-runtime";
|
|
14350
14857
|
var extractParameterProps = (props) => {
|
|
14351
14858
|
const {
|
|
14352
14859
|
id,
|
|
@@ -14405,21 +14912,21 @@ var ParameterShell = ({
|
|
|
14405
14912
|
children,
|
|
14406
14913
|
...props
|
|
14407
14914
|
}) => {
|
|
14408
|
-
const [manualErrorMessage, setManualErrorMessage] =
|
|
14915
|
+
const [manualErrorMessage, setManualErrorMessage] = useState8(void 0);
|
|
14409
14916
|
const setErrorMessage = (message) => setManualErrorMessage(message);
|
|
14410
14917
|
const errorMessaging = errorMessage || manualErrorMessage;
|
|
14411
|
-
return /* @__PURE__ */
|
|
14412
|
-
hiddenLabel || title ? null : /* @__PURE__ */
|
|
14918
|
+
return /* @__PURE__ */ jsxs58("div", { css: inputContainer2, ...props, children: [
|
|
14919
|
+
hiddenLabel || title ? null : /* @__PURE__ */ jsxs58(ParameterLabel, { id, css: labelText2, children: [
|
|
14413
14920
|
labelLeadingIcon ? labelLeadingIcon : null,
|
|
14414
14921
|
label
|
|
14415
14922
|
] }),
|
|
14416
|
-
!title ? null : /* @__PURE__ */
|
|
14923
|
+
!title ? null : /* @__PURE__ */ jsxs58(ParameterLabel, { id, asSpan: true, children: [
|
|
14417
14924
|
labelLeadingIcon ? labelLeadingIcon : null,
|
|
14418
14925
|
title
|
|
14419
14926
|
] }),
|
|
14420
|
-
/* @__PURE__ */
|
|
14421
|
-
menuItems ? /* @__PURE__ */
|
|
14422
|
-
/* @__PURE__ */
|
|
14927
|
+
/* @__PURE__ */ jsxs58("div", { css: inputWrapper, children: [
|
|
14928
|
+
menuItems ? /* @__PURE__ */ jsx86(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
|
|
14929
|
+
/* @__PURE__ */ jsx86(
|
|
14423
14930
|
ParameterShellContext.Provider,
|
|
14424
14931
|
{
|
|
14425
14932
|
value: {
|
|
@@ -14429,32 +14936,32 @@ var ParameterShell = ({
|
|
|
14429
14936
|
errorMessage: errorMessaging,
|
|
14430
14937
|
onManuallySetErrorMessage: (message) => setErrorMessage(message)
|
|
14431
14938
|
},
|
|
14432
|
-
children: /* @__PURE__ */
|
|
14939
|
+
children: /* @__PURE__ */ jsxs58(ParameterShellPlaceholder, { children: [
|
|
14433
14940
|
children,
|
|
14434
|
-
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */
|
|
14941
|
+
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx86(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
|
|
14435
14942
|
] })
|
|
14436
14943
|
}
|
|
14437
14944
|
)
|
|
14438
14945
|
] }),
|
|
14439
|
-
caption ? /* @__PURE__ */
|
|
14440
|
-
errorMessaging ? /* @__PURE__ */
|
|
14441
|
-
warningMessage ? /* @__PURE__ */
|
|
14442
|
-
infoMessage ? /* @__PURE__ */
|
|
14946
|
+
caption ? /* @__PURE__ */ jsx86(Caption, { testId: captionTestId, children: caption }) : null,
|
|
14947
|
+
errorMessaging ? /* @__PURE__ */ jsx86(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null,
|
|
14948
|
+
warningMessage ? /* @__PURE__ */ jsx86(WarningMessage, { message: warningMessage }) : null,
|
|
14949
|
+
infoMessage ? /* @__PURE__ */ jsx86(InfoMessage, { message: infoMessage }) : null
|
|
14443
14950
|
] });
|
|
14444
14951
|
};
|
|
14445
14952
|
var ParameterShellPlaceholder = ({ children }) => {
|
|
14446
|
-
return /* @__PURE__ */
|
|
14953
|
+
return /* @__PURE__ */ jsx86("div", { css: emptyParameterShell, children });
|
|
14447
14954
|
};
|
|
14448
|
-
var ParameterOverrideMarker = (props) => /* @__PURE__ */
|
|
14955
|
+
var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx86(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx86("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx86("span", { hidden: true, children: "reset overridden value to default" }) }) });
|
|
14449
14956
|
|
|
14450
14957
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
14451
|
-
import { Fragment as Fragment10, jsx as
|
|
14452
|
-
var ParameterImage =
|
|
14958
|
+
import { Fragment as Fragment10, jsx as jsx87, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
|
|
14959
|
+
var ParameterImage = forwardRef12((props, ref) => {
|
|
14453
14960
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
14454
|
-
return /* @__PURE__ */
|
|
14961
|
+
return /* @__PURE__ */ jsx87(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: /* @__PURE__ */ jsx87(ParameterImageInner, { ref, ...innerProps }) });
|
|
14455
14962
|
});
|
|
14456
14963
|
var BrokenImage = ({ ...props }) => {
|
|
14457
|
-
return /* @__PURE__ */
|
|
14964
|
+
return /* @__PURE__ */ jsxs59(
|
|
14458
14965
|
"svg",
|
|
14459
14966
|
{
|
|
14460
14967
|
width: "214",
|
|
@@ -14465,11 +14972,11 @@ var BrokenImage = ({ ...props }) => {
|
|
|
14465
14972
|
xmlnsXlink: "http://www.w3.org/1999/xlink",
|
|
14466
14973
|
...props,
|
|
14467
14974
|
children: [
|
|
14468
|
-
/* @__PURE__ */
|
|
14469
|
-
/* @__PURE__ */
|
|
14470
|
-
/* @__PURE__ */
|
|
14471
|
-
/* @__PURE__ */
|
|
14472
|
-
/* @__PURE__ */
|
|
14975
|
+
/* @__PURE__ */ jsx87("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
|
|
14976
|
+
/* @__PURE__ */ jsx87("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
|
|
14977
|
+
/* @__PURE__ */ jsxs59("defs", { children: [
|
|
14978
|
+
/* @__PURE__ */ jsx87("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx87("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
|
|
14979
|
+
/* @__PURE__ */ jsx87(
|
|
14473
14980
|
"image",
|
|
14474
14981
|
{
|
|
14475
14982
|
id: "image0_761_4353",
|
|
@@ -14483,14 +14990,14 @@ var BrokenImage = ({ ...props }) => {
|
|
|
14483
14990
|
}
|
|
14484
14991
|
);
|
|
14485
14992
|
};
|
|
14486
|
-
var ParameterImageInner =
|
|
14993
|
+
var ParameterImageInner = forwardRef12(
|
|
14487
14994
|
({ ...props }, ref) => {
|
|
14488
14995
|
const { value } = props;
|
|
14489
14996
|
const { id, label, hiddenLabel, errorMessage, onManuallySetErrorMessage } = useParameterShell();
|
|
14490
|
-
const [loading, setLoading] =
|
|
14997
|
+
const [loading, setLoading] = useState9(false);
|
|
14491
14998
|
const deferredValue = useDeferredValue(value);
|
|
14492
14999
|
const errorText = "The text you provided is not a valid URL";
|
|
14493
|
-
const updateImageSrc =
|
|
15000
|
+
const updateImageSrc = useCallback4(() => {
|
|
14494
15001
|
let message = void 0;
|
|
14495
15002
|
try {
|
|
14496
15003
|
if (value !== "") {
|
|
@@ -14518,11 +15025,11 @@ var ParameterImageInner = forwardRef9(
|
|
|
14518
15025
|
onManuallySetErrorMessage(errorText);
|
|
14519
15026
|
}
|
|
14520
15027
|
};
|
|
14521
|
-
|
|
15028
|
+
useEffect10(() => {
|
|
14522
15029
|
updateImageSrc();
|
|
14523
15030
|
}, [value]);
|
|
14524
|
-
return /* @__PURE__ */
|
|
14525
|
-
/* @__PURE__ */
|
|
15031
|
+
return /* @__PURE__ */ jsxs59(Fragment10, { children: [
|
|
15032
|
+
/* @__PURE__ */ jsx87(
|
|
14526
15033
|
"input",
|
|
14527
15034
|
{
|
|
14528
15035
|
css: input2,
|
|
@@ -14534,8 +15041,8 @@ var ParameterImageInner = forwardRef9(
|
|
|
14534
15041
|
...props
|
|
14535
15042
|
}
|
|
14536
15043
|
),
|
|
14537
|
-
/* @__PURE__ */
|
|
14538
|
-
deferredValue && !errorMessage ? /* @__PURE__ */
|
|
15044
|
+
/* @__PURE__ */ jsxs59("div", { css: imageWrapper, children: [
|
|
15045
|
+
deferredValue && !errorMessage ? /* @__PURE__ */ jsx87(
|
|
14539
15046
|
"img",
|
|
14540
15047
|
{
|
|
14541
15048
|
src: deferredValue,
|
|
@@ -14545,24 +15052,24 @@ var ParameterImageInner = forwardRef9(
|
|
|
14545
15052
|
loading: "lazy"
|
|
14546
15053
|
}
|
|
14547
15054
|
) : null,
|
|
14548
|
-
deferredValue && errorMessage ? /* @__PURE__ */
|
|
15055
|
+
deferredValue && errorMessage ? /* @__PURE__ */ jsx87(BrokenImage, { css: img }) : null
|
|
14549
15056
|
] }),
|
|
14550
|
-
loading ? /* @__PURE__ */
|
|
15057
|
+
loading ? /* @__PURE__ */ jsx87(LoadingIcon, {}) : null
|
|
14551
15058
|
] });
|
|
14552
15059
|
}
|
|
14553
15060
|
);
|
|
14554
15061
|
|
|
14555
15062
|
// src/components/ParameterInputs/ParameterInput.tsx
|
|
14556
|
-
import { forwardRef as
|
|
14557
|
-
import { jsx as
|
|
14558
|
-
var ParameterInput =
|
|
15063
|
+
import { forwardRef as forwardRef13 } from "react";
|
|
15064
|
+
import { jsx as jsx88 } from "@emotion/react/jsx-runtime";
|
|
15065
|
+
var ParameterInput = forwardRef13((props, ref) => {
|
|
14559
15066
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
14560
|
-
return /* @__PURE__ */
|
|
15067
|
+
return /* @__PURE__ */ jsx88(ParameterShell, { "data-test-id": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx88(ParameterInputInner, { ref, ...innerProps }) });
|
|
14561
15068
|
});
|
|
14562
|
-
var ParameterInputInner =
|
|
15069
|
+
var ParameterInputInner = forwardRef13(
|
|
14563
15070
|
({ ...props }, ref) => {
|
|
14564
15071
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
14565
|
-
return /* @__PURE__ */
|
|
15072
|
+
return /* @__PURE__ */ jsx88(
|
|
14566
15073
|
"input",
|
|
14567
15074
|
{
|
|
14568
15075
|
css: input2,
|
|
@@ -14578,19 +15085,19 @@ var ParameterInputInner = forwardRef10(
|
|
|
14578
15085
|
);
|
|
14579
15086
|
|
|
14580
15087
|
// src/components/ParameterInputs/ParameterLink.tsx
|
|
14581
|
-
import { forwardRef as
|
|
14582
|
-
import { jsx as
|
|
14583
|
-
var ParameterLink =
|
|
15088
|
+
import { forwardRef as forwardRef14 } from "react";
|
|
15089
|
+
import { jsx as jsx89, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
|
|
15090
|
+
var ParameterLink = forwardRef14(
|
|
14584
15091
|
({ buttonText = "Select link", disabled, onConnectLink, externalLink, ...props }, ref) => {
|
|
14585
15092
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
14586
|
-
return /* @__PURE__ */
|
|
15093
|
+
return /* @__PURE__ */ jsx89(
|
|
14587
15094
|
ParameterShell,
|
|
14588
15095
|
{
|
|
14589
15096
|
"data-test-id": "link-parameter-editor",
|
|
14590
15097
|
...shellProps,
|
|
14591
15098
|
label: innerProps.value ? shellProps.label : "",
|
|
14592
15099
|
title: !innerProps.value ? shellProps.label : void 0,
|
|
14593
|
-
children: !innerProps.value ? /* @__PURE__ */
|
|
15100
|
+
children: !innerProps.value ? /* @__PURE__ */ jsx89("button", { type: "button", css: dataConnectButton, disabled, onClick: onConnectLink, children: buttonText }) : /* @__PURE__ */ jsx89(
|
|
14594
15101
|
ParameterLinkInner,
|
|
14595
15102
|
{
|
|
14596
15103
|
onConnectLink,
|
|
@@ -14603,11 +15110,11 @@ var ParameterLink = forwardRef11(
|
|
|
14603
15110
|
);
|
|
14604
15111
|
}
|
|
14605
15112
|
);
|
|
14606
|
-
var ParameterLinkInner =
|
|
15113
|
+
var ParameterLinkInner = forwardRef14(
|
|
14607
15114
|
({ externalLink, onConnectLink, disabled, ...props }, ref) => {
|
|
14608
15115
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
14609
|
-
return /* @__PURE__ */
|
|
14610
|
-
/* @__PURE__ */
|
|
15116
|
+
return /* @__PURE__ */ jsxs60("div", { css: inputWrapper, children: [
|
|
15117
|
+
/* @__PURE__ */ jsx89(
|
|
14611
15118
|
"input",
|
|
14612
15119
|
{
|
|
14613
15120
|
type: "text",
|
|
@@ -14619,8 +15126,8 @@ var ParameterLinkInner = forwardRef11(
|
|
|
14619
15126
|
...props
|
|
14620
15127
|
}
|
|
14621
15128
|
),
|
|
14622
|
-
/* @__PURE__ */
|
|
14623
|
-
/* @__PURE__ */
|
|
15129
|
+
/* @__PURE__ */ jsxs60("div", { css: linkParameterControls, children: [
|
|
15130
|
+
/* @__PURE__ */ jsx89(
|
|
14624
15131
|
"button",
|
|
14625
15132
|
{
|
|
14626
15133
|
type: "button",
|
|
@@ -14631,7 +15138,7 @@ var ParameterLinkInner = forwardRef11(
|
|
|
14631
15138
|
children: "edit"
|
|
14632
15139
|
}
|
|
14633
15140
|
),
|
|
14634
|
-
externalLink ? /* @__PURE__ */
|
|
15141
|
+
externalLink ? /* @__PURE__ */ jsx89(
|
|
14635
15142
|
"a",
|
|
14636
15143
|
{
|
|
14637
15144
|
href: externalLink,
|
|
@@ -14639,7 +15146,7 @@ var ParameterLinkInner = forwardRef11(
|
|
|
14639
15146
|
title: "Open link in new tab",
|
|
14640
15147
|
target: "_blank",
|
|
14641
15148
|
rel: "noopener noreferrer",
|
|
14642
|
-
children: /* @__PURE__ */
|
|
15149
|
+
children: /* @__PURE__ */ jsx89(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
|
|
14643
15150
|
}
|
|
14644
15151
|
) : null
|
|
14645
15152
|
] })
|
|
@@ -14648,7 +15155,7 @@ var ParameterLinkInner = forwardRef11(
|
|
|
14648
15155
|
);
|
|
14649
15156
|
|
|
14650
15157
|
// src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
|
|
14651
|
-
import { Fragment as Fragment11, jsx as
|
|
15158
|
+
import { Fragment as Fragment11, jsx as jsx90, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
|
|
14652
15159
|
var ParameterNameAndPublicIdInput = ({
|
|
14653
15160
|
id,
|
|
14654
15161
|
onBlur,
|
|
@@ -14674,8 +15181,8 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
14674
15181
|
navigator.clipboard.writeText(values[publicIdFieldName]);
|
|
14675
15182
|
};
|
|
14676
15183
|
autoFocus == null ? void 0 : autoFocus();
|
|
14677
|
-
return /* @__PURE__ */
|
|
14678
|
-
/* @__PURE__ */
|
|
15184
|
+
return /* @__PURE__ */ jsxs61(Fragment11, { children: [
|
|
15185
|
+
/* @__PURE__ */ jsx90(
|
|
14679
15186
|
ParameterInput,
|
|
14680
15187
|
{
|
|
14681
15188
|
id: nameIdField,
|
|
@@ -14694,7 +15201,7 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
14694
15201
|
value: values[nameIdField]
|
|
14695
15202
|
}
|
|
14696
15203
|
),
|
|
14697
|
-
/* @__PURE__ */
|
|
15204
|
+
/* @__PURE__ */ jsx90(
|
|
14698
15205
|
ParameterInput,
|
|
14699
15206
|
{
|
|
14700
15207
|
id: publicIdFieldName,
|
|
@@ -14708,11 +15215,11 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
14708
15215
|
caption: publicIdCaption,
|
|
14709
15216
|
placeholder: publicIdPlaceholderText,
|
|
14710
15217
|
errorMessage: publicIdError,
|
|
14711
|
-
menuItems: /* @__PURE__ */
|
|
15218
|
+
menuItems: /* @__PURE__ */ jsx90(
|
|
14712
15219
|
MenuItem,
|
|
14713
15220
|
{
|
|
14714
15221
|
disabled: !values[publicIdFieldName],
|
|
14715
|
-
icon: /* @__PURE__ */
|
|
15222
|
+
icon: /* @__PURE__ */ jsx90(Icon, { icon: "path-trim", iconColor: "currentColor" }),
|
|
14716
15223
|
onClick: handleCopyPidFieldValue,
|
|
14717
15224
|
children: "Copy"
|
|
14718
15225
|
}
|
|
@@ -14720,14 +15227,14 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
14720
15227
|
value: values[publicIdFieldName]
|
|
14721
15228
|
}
|
|
14722
15229
|
),
|
|
14723
|
-
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */
|
|
15230
|
+
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx90(Callout, { type: "caution", children: warnOverLength.message }) : null
|
|
14724
15231
|
] });
|
|
14725
15232
|
};
|
|
14726
15233
|
|
|
14727
15234
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
14728
|
-
import { forwardRef as
|
|
14729
|
-
import { Fragment as Fragment12, jsx as
|
|
14730
|
-
var ParameterRichText =
|
|
15235
|
+
import { forwardRef as forwardRef15 } from "react";
|
|
15236
|
+
import { Fragment as Fragment12, jsx as jsx91, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
|
|
15237
|
+
var ParameterRichText = forwardRef15(
|
|
14731
15238
|
({
|
|
14732
15239
|
label,
|
|
14733
15240
|
labelLeadingIcon,
|
|
@@ -14740,7 +15247,7 @@ var ParameterRichText = forwardRef12(
|
|
|
14740
15247
|
menuItems,
|
|
14741
15248
|
...props
|
|
14742
15249
|
}, ref) => {
|
|
14743
|
-
return /* @__PURE__ */
|
|
15250
|
+
return /* @__PURE__ */ jsxs62(
|
|
14744
15251
|
ParameterShell,
|
|
14745
15252
|
{
|
|
14746
15253
|
"data-test-id": "parameter-input",
|
|
@@ -14753,16 +15260,16 @@ var ParameterRichText = forwardRef12(
|
|
|
14753
15260
|
captionTestId,
|
|
14754
15261
|
menuItems,
|
|
14755
15262
|
children: [
|
|
14756
|
-
/* @__PURE__ */
|
|
14757
|
-
menuItems ? /* @__PURE__ */
|
|
15263
|
+
/* @__PURE__ */ jsx91(ParameterRichTextInner, { ref, ...props }),
|
|
15264
|
+
menuItems ? /* @__PURE__ */ jsx91(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx91(Fragment12, { children: menuItems }) }) : null
|
|
14758
15265
|
]
|
|
14759
15266
|
}
|
|
14760
15267
|
);
|
|
14761
15268
|
}
|
|
14762
15269
|
);
|
|
14763
|
-
var ParameterRichTextInner =
|
|
15270
|
+
var ParameterRichTextInner = forwardRef15(({ ...props }, ref) => {
|
|
14764
15271
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
14765
|
-
return /* @__PURE__ */
|
|
15272
|
+
return /* @__PURE__ */ jsx91(
|
|
14766
15273
|
"textarea",
|
|
14767
15274
|
{
|
|
14768
15275
|
css: [input2, textarea2],
|
|
@@ -14775,18 +15282,18 @@ var ParameterRichTextInner = forwardRef12(({ ...props }, ref) => {
|
|
|
14775
15282
|
});
|
|
14776
15283
|
|
|
14777
15284
|
// src/components/ParameterInputs/ParameterSelect.tsx
|
|
14778
|
-
import { forwardRef as
|
|
14779
|
-
import { jsx as
|
|
14780
|
-
var ParameterSelect =
|
|
15285
|
+
import { forwardRef as forwardRef16 } from "react";
|
|
15286
|
+
import { jsx as jsx92, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
|
|
15287
|
+
var ParameterSelect = forwardRef16(
|
|
14781
15288
|
({ defaultOption, options, ...props }, ref) => {
|
|
14782
15289
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
14783
|
-
return /* @__PURE__ */
|
|
15290
|
+
return /* @__PURE__ */ jsx92(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx92(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
|
|
14784
15291
|
}
|
|
14785
15292
|
);
|
|
14786
|
-
var ParameterSelectInner =
|
|
15293
|
+
var ParameterSelectInner = forwardRef16(
|
|
14787
15294
|
({ defaultOption, options, ...props }, ref) => {
|
|
14788
15295
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
14789
|
-
return /* @__PURE__ */
|
|
15296
|
+
return /* @__PURE__ */ jsxs63(
|
|
14790
15297
|
"select",
|
|
14791
15298
|
{
|
|
14792
15299
|
css: [input2, selectInput],
|
|
@@ -14795,10 +15302,10 @@ var ParameterSelectInner = forwardRef13(
|
|
|
14795
15302
|
ref,
|
|
14796
15303
|
...props,
|
|
14797
15304
|
children: [
|
|
14798
|
-
defaultOption ? /* @__PURE__ */
|
|
15305
|
+
defaultOption ? /* @__PURE__ */ jsx92("option", { value: "", children: defaultOption }) : null,
|
|
14799
15306
|
options.map((option) => {
|
|
14800
15307
|
var _a;
|
|
14801
|
-
return /* @__PURE__ */
|
|
15308
|
+
return /* @__PURE__ */ jsx92("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
|
|
14802
15309
|
})
|
|
14803
15310
|
]
|
|
14804
15311
|
}
|
|
@@ -14807,15 +15314,15 @@ var ParameterSelectInner = forwardRef13(
|
|
|
14807
15314
|
);
|
|
14808
15315
|
|
|
14809
15316
|
// src/components/ParameterInputs/ParameterTextarea.tsx
|
|
14810
|
-
import { forwardRef as
|
|
14811
|
-
import { jsx as
|
|
14812
|
-
var ParameterTextarea =
|
|
15317
|
+
import { forwardRef as forwardRef17 } from "react";
|
|
15318
|
+
import { jsx as jsx93 } from "@emotion/react/jsx-runtime";
|
|
15319
|
+
var ParameterTextarea = forwardRef17((props, ref) => {
|
|
14813
15320
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
14814
|
-
return /* @__PURE__ */
|
|
15321
|
+
return /* @__PURE__ */ jsx93(ParameterShell, { "data-test-id": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx93(ParameterTextareaInner, { ref, ...innerProps }) });
|
|
14815
15322
|
});
|
|
14816
|
-
var ParameterTextareaInner =
|
|
15323
|
+
var ParameterTextareaInner = forwardRef17(({ ...props }, ref) => {
|
|
14817
15324
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
14818
|
-
return /* @__PURE__ */
|
|
15325
|
+
return /* @__PURE__ */ jsx93(
|
|
14819
15326
|
"textarea",
|
|
14820
15327
|
{
|
|
14821
15328
|
css: [input2, textarea2],
|
|
@@ -14828,18 +15335,18 @@ var ParameterTextareaInner = forwardRef14(({ ...props }, ref) => {
|
|
|
14828
15335
|
});
|
|
14829
15336
|
|
|
14830
15337
|
// src/components/ParameterInputs/ParameterToggle.tsx
|
|
14831
|
-
import { forwardRef as
|
|
14832
|
-
import { jsx as
|
|
14833
|
-
var ParameterToggle =
|
|
15338
|
+
import { forwardRef as forwardRef18 } from "react";
|
|
15339
|
+
import { jsx as jsx94, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
|
|
15340
|
+
var ParameterToggle = forwardRef18((props, ref) => {
|
|
14834
15341
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
14835
|
-
return /* @__PURE__ */
|
|
15342
|
+
return /* @__PURE__ */ jsx94(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx94(ParameterToggleInner, { ref, ...innerProps }) });
|
|
14836
15343
|
});
|
|
14837
|
-
var ParameterToggleInner =
|
|
15344
|
+
var ParameterToggleInner = forwardRef18(
|
|
14838
15345
|
({ ...props }, ref) => {
|
|
14839
15346
|
const { id, label } = useParameterShell();
|
|
14840
|
-
return /* @__PURE__ */
|
|
14841
|
-
/* @__PURE__ */
|
|
14842
|
-
/* @__PURE__ */
|
|
15347
|
+
return /* @__PURE__ */ jsxs64("label", { css: inputToggleLabel2, children: [
|
|
15348
|
+
/* @__PURE__ */ jsx94("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
|
|
15349
|
+
/* @__PURE__ */ jsx94("span", { css: inlineLabel2, children: label })
|
|
14843
15350
|
] });
|
|
14844
15351
|
}
|
|
14845
15352
|
);
|
|
@@ -14853,13 +15360,13 @@ import {
|
|
|
14853
15360
|
import { Portal as Portal2 } from "reakit/Portal";
|
|
14854
15361
|
|
|
14855
15362
|
// src/components/Popover/Popover.styles.ts
|
|
14856
|
-
import { css as
|
|
14857
|
-
var PopoverBtn =
|
|
15363
|
+
import { css as css69 } from "@emotion/react";
|
|
15364
|
+
var PopoverBtn = css69`
|
|
14858
15365
|
border: none;
|
|
14859
15366
|
background: none;
|
|
14860
15367
|
padding: 0;
|
|
14861
15368
|
`;
|
|
14862
|
-
var Popover =
|
|
15369
|
+
var Popover = css69`
|
|
14863
15370
|
border-left: var(--spacing-xs) solid var(--brand-secondary-3);
|
|
14864
15371
|
border-radius: var(--rounded-base);
|
|
14865
15372
|
box-shadow: var(--shadow-base);
|
|
@@ -14872,7 +15379,7 @@ var Popover = css64`
|
|
|
14872
15379
|
`;
|
|
14873
15380
|
|
|
14874
15381
|
// src/components/Popover/Popover.tsx
|
|
14875
|
-
import { Fragment as Fragment13, jsx as
|
|
15382
|
+
import { Fragment as Fragment13, jsx as jsx95, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
|
|
14876
15383
|
var Popover2 = ({
|
|
14877
15384
|
iconColor = "green",
|
|
14878
15385
|
buttonText,
|
|
@@ -14881,38 +15388,38 @@ var Popover2 = ({
|
|
|
14881
15388
|
children
|
|
14882
15389
|
}) => {
|
|
14883
15390
|
const popover = usePopoverState({ placement });
|
|
14884
|
-
return /* @__PURE__ */
|
|
14885
|
-
/* @__PURE__ */
|
|
14886
|
-
/* @__PURE__ */
|
|
14887
|
-
/* @__PURE__ */
|
|
15391
|
+
return /* @__PURE__ */ jsxs65(Fragment13, { children: [
|
|
15392
|
+
/* @__PURE__ */ jsxs65(PopoverDisclosure, { ...popover, css: PopoverBtn, title: buttonText, children: [
|
|
15393
|
+
/* @__PURE__ */ jsx95(Icon, { icon: "info", iconColor, size: "1rem" }),
|
|
15394
|
+
/* @__PURE__ */ jsx95("span", { hidden: true, children: buttonText })
|
|
14888
15395
|
] }),
|
|
14889
|
-
/* @__PURE__ */
|
|
15396
|
+
/* @__PURE__ */ jsx95(Portal2, { children: /* @__PURE__ */ jsx95(ReakitPopover, { css: Popover, ...popover, "aria-label": ariaLabel, children }) })
|
|
14890
15397
|
] });
|
|
14891
15398
|
};
|
|
14892
15399
|
|
|
14893
15400
|
// src/components/ProgressList/ProgressList.tsx
|
|
14894
|
-
import { css as
|
|
14895
|
-
import { useMemo as
|
|
15401
|
+
import { css as css71 } from "@emotion/react";
|
|
15402
|
+
import { useMemo as useMemo3 } from "react";
|
|
14896
15403
|
import { CgCheckO, CgRadioCheck, CgRecord } from "react-icons/cg";
|
|
14897
15404
|
|
|
14898
15405
|
// src/components/ProgressList/styles/ProgressList.styles.ts
|
|
14899
|
-
import { css as
|
|
14900
|
-
var progressListStyles =
|
|
15406
|
+
import { css as css70 } from "@emotion/react";
|
|
15407
|
+
var progressListStyles = css70`
|
|
14901
15408
|
display: flex;
|
|
14902
15409
|
flex-direction: column;
|
|
14903
15410
|
gap: var(--spacing-sm);
|
|
14904
15411
|
list-style-type: none;
|
|
14905
15412
|
`;
|
|
14906
|
-
var progressListItemStyles =
|
|
15413
|
+
var progressListItemStyles = css70`
|
|
14907
15414
|
display: flex;
|
|
14908
15415
|
gap: var(--spacing-base);
|
|
14909
15416
|
align-items: center;
|
|
14910
15417
|
`;
|
|
14911
15418
|
|
|
14912
15419
|
// src/components/ProgressList/ProgressList.tsx
|
|
14913
|
-
import { jsx as
|
|
15420
|
+
import { jsx as jsx96, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
|
|
14914
15421
|
var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
14915
|
-
const itemsWithStatus =
|
|
15422
|
+
const itemsWithStatus = useMemo3(() => {
|
|
14916
15423
|
const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
|
|
14917
15424
|
return items.map((item, index) => {
|
|
14918
15425
|
let status = "queued";
|
|
@@ -14924,8 +15431,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
|
14924
15431
|
return { ...item, status };
|
|
14925
15432
|
});
|
|
14926
15433
|
}, [items, inProgressId]);
|
|
14927
|
-
return /* @__PURE__ */
|
|
14928
|
-
return /* @__PURE__ */
|
|
15434
|
+
return /* @__PURE__ */ jsx96("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
|
|
15435
|
+
return /* @__PURE__ */ jsx96(
|
|
14929
15436
|
ProgressListItem,
|
|
14930
15437
|
{
|
|
14931
15438
|
status,
|
|
@@ -14945,7 +15452,7 @@ var ProgressListItem = ({
|
|
|
14945
15452
|
errorLevel = "danger",
|
|
14946
15453
|
autoEllipsis = false
|
|
14947
15454
|
}) => {
|
|
14948
|
-
const Icon2 =
|
|
15455
|
+
const Icon2 = useMemo3(() => {
|
|
14949
15456
|
if (error) {
|
|
14950
15457
|
return warningIcon;
|
|
14951
15458
|
}
|
|
@@ -14956,14 +15463,14 @@ var ProgressListItem = ({
|
|
|
14956
15463
|
};
|
|
14957
15464
|
return iconPerStatus[status];
|
|
14958
15465
|
}, [status, error]);
|
|
14959
|
-
const statusStyles =
|
|
15466
|
+
const statusStyles = useMemo3(() => {
|
|
14960
15467
|
if (error) {
|
|
14961
|
-
return errorLevel === "caution" ?
|
|
15468
|
+
return errorLevel === "caution" ? css71`
|
|
14962
15469
|
color: rgb(161, 98, 7);
|
|
14963
15470
|
& svg {
|
|
14964
15471
|
color: rgb(250, 204, 21);
|
|
14965
15472
|
}
|
|
14966
|
-
` :
|
|
15473
|
+
` : css71`
|
|
14967
15474
|
color: rgb(185, 28, 28);
|
|
14968
15475
|
& svg {
|
|
14969
15476
|
color: var(--brand-primary-2);
|
|
@@ -14971,221 +15478,40 @@ var ProgressListItem = ({
|
|
|
14971
15478
|
`;
|
|
14972
15479
|
}
|
|
14973
15480
|
const colorPerStatus = {
|
|
14974
|
-
completed:
|
|
15481
|
+
completed: css71`
|
|
14975
15482
|
opacity: 0.75;
|
|
14976
15483
|
`,
|
|
14977
|
-
inProgress:
|
|
15484
|
+
inProgress: css71`
|
|
14978
15485
|
-webkit-text-stroke-width: thin;
|
|
14979
15486
|
`,
|
|
14980
|
-
queued:
|
|
15487
|
+
queued: css71`
|
|
14981
15488
|
opacity: 0.5;
|
|
14982
15489
|
`
|
|
14983
15490
|
};
|
|
14984
15491
|
return colorPerStatus[status];
|
|
14985
15492
|
}, [status, error, errorLevel]);
|
|
14986
|
-
return /* @__PURE__ */
|
|
14987
|
-
/* @__PURE__ */
|
|
14988
|
-
/* @__PURE__ */
|
|
15493
|
+
return /* @__PURE__ */ jsxs66("li", { css: [progressListItemStyles, statusStyles], children: [
|
|
15494
|
+
/* @__PURE__ */ jsx96(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx96("div", { children: /* @__PURE__ */ jsx96(Icon2, { size: 20 }) }) }),
|
|
15495
|
+
/* @__PURE__ */ jsxs66("div", { children: [
|
|
14989
15496
|
children,
|
|
14990
|
-
/* @__PURE__ */
|
|
15497
|
+
/* @__PURE__ */ jsx96("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
|
|
14991
15498
|
] })
|
|
14992
15499
|
] });
|
|
14993
15500
|
};
|
|
14994
15501
|
|
|
14995
|
-
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
14996
|
-
import { css as css68 } from "@emotion/react";
|
|
14997
|
-
import { useCallback as useCallback4, useMemo as useMemo3 } from "react";
|
|
14998
|
-
import { CgCheck as CgCheck3 } from "react-icons/cg";
|
|
14999
|
-
|
|
15000
|
-
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
15001
|
-
import { css as css67 } from "@emotion/react";
|
|
15002
|
-
var segmentedControlStyles = css67`
|
|
15003
|
-
--segmented-control-rounded-value: var(--rounded-base);
|
|
15004
|
-
--segmented-control-border-width: 1px;
|
|
15005
|
-
--segmented-control-selected-color: var(--brand-secondary-3);
|
|
15006
|
-
--segmented-control-first-border-radius: var(--segmented-control-rounded-value) 0 0
|
|
15007
|
-
var(--segmented-control-rounded-value);
|
|
15008
|
-
--segmented-control-last-border-radius: 0 var(--segmented-control-rounded-value)
|
|
15009
|
-
var(--segmented-control-rounded-value) 0;
|
|
15010
|
-
|
|
15011
|
-
position: relative;
|
|
15012
|
-
display: flex;
|
|
15013
|
-
justify-content: flex-start;
|
|
15014
|
-
width: fit-content;
|
|
15015
|
-
background-color: var(--gray-300);
|
|
15016
|
-
padding: var(--segmented-control-border-width);
|
|
15017
|
-
gap: var(--segmented-control-border-width);
|
|
15018
|
-
border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
|
|
15019
|
-
font-size: var(--fs-xs);
|
|
15020
|
-
`;
|
|
15021
|
-
var segmentedControlVerticalStyles = css67`
|
|
15022
|
-
flex-direction: column;
|
|
15023
|
-
--segmented-control-first-border-radius: var(--segmented-control-rounded-value)
|
|
15024
|
-
var(--segmented-control-rounded-value) 0 0;
|
|
15025
|
-
--segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
|
|
15026
|
-
var(--segmented-control-rounded-value);
|
|
15027
|
-
`;
|
|
15028
|
-
var segmentedControlItemStyles = css67`
|
|
15029
|
-
&:first-of-type label {
|
|
15030
|
-
border-radius: var(--segmented-control-first-border-radius);
|
|
15031
|
-
}
|
|
15032
|
-
&:last-of-type label {
|
|
15033
|
-
border-radius: var(--segmented-control-last-border-radius);
|
|
15034
|
-
}
|
|
15035
|
-
`;
|
|
15036
|
-
var segmentedControlInputStyles = css67`
|
|
15037
|
-
clip: rect(0, 0, 0, 0);
|
|
15038
|
-
position: absolute;
|
|
15039
|
-
width: 1px;
|
|
15040
|
-
height: 1px;
|
|
15041
|
-
overflow: hidden;
|
|
15042
|
-
`;
|
|
15043
|
-
var segmentedControlLabelStyles = css67`
|
|
15044
|
-
position: relative;
|
|
15045
|
-
display: flex;
|
|
15046
|
-
align-items: center;
|
|
15047
|
-
justify-content: center;
|
|
15048
|
-
height: 2rem;
|
|
15049
|
-
padding-inline: var(--spacing-base);
|
|
15050
|
-
background-color: white;
|
|
15051
|
-
transition-property: background-color, color, box-shadow;
|
|
15052
|
-
transition-duration: var(--duration-xfast);
|
|
15053
|
-
transition-timing-function: ease-in-out;
|
|
15054
|
-
z-index: 1;
|
|
15055
|
-
cursor: pointer;
|
|
15056
|
-
|
|
15057
|
-
&:has(:checked:not(:disabled)) {
|
|
15058
|
-
background-color: var(--segmented-control-selected-color);
|
|
15059
|
-
outline: var(--segmented-control-border-width) solid var(--segmented-control-selected-color);
|
|
15060
|
-
box-shadow: 0 0.43em 1.7em 0 rgba(0, 0, 0, 0.15);
|
|
15061
|
-
color: white;
|
|
15062
|
-
-webkit-text-stroke-width: thin;
|
|
15063
|
-
z-index: 0;
|
|
15064
|
-
}
|
|
15065
|
-
|
|
15066
|
-
&:hover:not(:has(:disabled, :checked)) {
|
|
15067
|
-
background-color: var(--gray-100);
|
|
15068
|
-
}
|
|
15069
|
-
|
|
15070
|
-
&:has(:disabled) {
|
|
15071
|
-
color: var(--gray-400);
|
|
15072
|
-
cursor: default;
|
|
15073
|
-
}
|
|
15074
|
-
|
|
15075
|
-
&:has(:checked:disabled) {
|
|
15076
|
-
color: var(--gray-50);
|
|
15077
|
-
background-color: var(--gray-400);
|
|
15078
|
-
}
|
|
15079
|
-
`;
|
|
15080
|
-
var segmentedControlLabelIconOnlyStyles = css67`
|
|
15081
|
-
padding-inline: 0.5em;
|
|
15082
|
-
`;
|
|
15083
|
-
var segmentedControlLabelCheckStyles = css67`
|
|
15084
|
-
opacity: 0.5;
|
|
15085
|
-
`;
|
|
15086
|
-
var segmentedControlLabelContentStyles = css67`
|
|
15087
|
-
display: flex;
|
|
15088
|
-
align-items: center;
|
|
15089
|
-
justify-content: center;
|
|
15090
|
-
gap: var(--spacing-sm);
|
|
15091
|
-
height: 100%;
|
|
15092
|
-
`;
|
|
15093
|
-
var segmentedControlLabelTextStyles = css67``;
|
|
15094
|
-
|
|
15095
|
-
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
15096
|
-
import { jsx as jsx91, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
|
|
15097
|
-
var SegmentedControl = ({
|
|
15098
|
-
name,
|
|
15099
|
-
options,
|
|
15100
|
-
value,
|
|
15101
|
-
onChange,
|
|
15102
|
-
noCheckmark = false,
|
|
15103
|
-
disabled = false,
|
|
15104
|
-
orientation = "horizontal",
|
|
15105
|
-
size = "md",
|
|
15106
|
-
...props
|
|
15107
|
-
}) => {
|
|
15108
|
-
const onOptionChange = useCallback4(
|
|
15109
|
-
(event) => {
|
|
15110
|
-
if (event.target.checked) {
|
|
15111
|
-
onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
|
|
15112
|
-
}
|
|
15113
|
-
},
|
|
15114
|
-
[options, onChange]
|
|
15115
|
-
);
|
|
15116
|
-
const sizeStyles = useMemo3(() => {
|
|
15117
|
-
const map = {
|
|
15118
|
-
sm: css68({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
|
|
15119
|
-
md: css68({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
|
|
15120
|
-
lg: css68({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
|
|
15121
|
-
};
|
|
15122
|
-
return map[size];
|
|
15123
|
-
}, [size]);
|
|
15124
|
-
const isIconOnly = useMemo3(() => {
|
|
15125
|
-
return options.every((option) => option.icon && !option.label);
|
|
15126
|
-
}, [options]);
|
|
15127
|
-
return /* @__PURE__ */ jsx91(
|
|
15128
|
-
"div",
|
|
15129
|
-
{
|
|
15130
|
-
css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
|
|
15131
|
-
...props,
|
|
15132
|
-
children: options.map((option, index) => {
|
|
15133
|
-
const text = option.label ? option.label : option.icon ? null : String(option.value);
|
|
15134
|
-
const isDisabled = disabled || option.disabled;
|
|
15135
|
-
return /* @__PURE__ */ jsx91(
|
|
15136
|
-
Tooltip,
|
|
15137
|
-
{
|
|
15138
|
-
title: isDisabled || !option.tooltip ? "" : option.tooltip,
|
|
15139
|
-
children: /* @__PURE__ */ jsx91("div", { css: segmentedControlItemStyles, children: /* @__PURE__ */ jsxs62(
|
|
15140
|
-
"label",
|
|
15141
|
-
{
|
|
15142
|
-
css: [
|
|
15143
|
-
segmentedControlLabelStyles,
|
|
15144
|
-
sizeStyles,
|
|
15145
|
-
isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
|
|
15146
|
-
],
|
|
15147
|
-
children: [
|
|
15148
|
-
/* @__PURE__ */ jsx91(
|
|
15149
|
-
"input",
|
|
15150
|
-
{
|
|
15151
|
-
css: segmentedControlInputStyles,
|
|
15152
|
-
type: "radio",
|
|
15153
|
-
name,
|
|
15154
|
-
value: index,
|
|
15155
|
-
checked: option.value === value,
|
|
15156
|
-
onChange: onOptionChange,
|
|
15157
|
-
disabled: isDisabled
|
|
15158
|
-
}
|
|
15159
|
-
),
|
|
15160
|
-
option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx91(CgCheck3, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
|
|
15161
|
-
/* @__PURE__ */ jsxs62("span", { css: segmentedControlLabelContentStyles, children: [
|
|
15162
|
-
!option.icon ? null : /* @__PURE__ */ jsx91(option.icon, { size: "1.5em" }),
|
|
15163
|
-
!text ? null : /* @__PURE__ */ jsx91("span", { css: segmentedControlLabelTextStyles, children: text })
|
|
15164
|
-
] })
|
|
15165
|
-
]
|
|
15166
|
-
}
|
|
15167
|
-
) })
|
|
15168
|
-
},
|
|
15169
|
-
JSON.stringify(option.value)
|
|
15170
|
-
);
|
|
15171
|
-
})
|
|
15172
|
-
}
|
|
15173
|
-
);
|
|
15174
|
-
};
|
|
15175
|
-
|
|
15176
15502
|
// src/components/Skeleton/Skeleton.styles.ts
|
|
15177
|
-
import { css as
|
|
15503
|
+
import { css as css72, keyframes as keyframes4 } from "@emotion/react";
|
|
15178
15504
|
var lightFadingOut = keyframes4`
|
|
15179
15505
|
from { opacity: 0.1; }
|
|
15180
15506
|
to { opacity: 0.025; }
|
|
15181
15507
|
`;
|
|
15182
|
-
var skeletonStyles =
|
|
15508
|
+
var skeletonStyles = css72`
|
|
15183
15509
|
animation: ${lightFadingOut} 1s ease-out infinite alternate;
|
|
15184
15510
|
background-color: var(--gray-900);
|
|
15185
15511
|
`;
|
|
15186
15512
|
|
|
15187
15513
|
// src/components/Skeleton/Skeleton.tsx
|
|
15188
|
-
import { jsx as
|
|
15514
|
+
import { jsx as jsx97 } from "@emotion/react/jsx-runtime";
|
|
15189
15515
|
var Skeleton = ({
|
|
15190
15516
|
width = "100%",
|
|
15191
15517
|
height = "1.25rem",
|
|
@@ -15193,7 +15519,7 @@ var Skeleton = ({
|
|
|
15193
15519
|
circle = false,
|
|
15194
15520
|
children,
|
|
15195
15521
|
...otherProps
|
|
15196
|
-
}) => /* @__PURE__ */
|
|
15522
|
+
}) => /* @__PURE__ */ jsx97(
|
|
15197
15523
|
"div",
|
|
15198
15524
|
{
|
|
15199
15525
|
css: [
|
|
@@ -15213,11 +15539,11 @@ var Skeleton = ({
|
|
|
15213
15539
|
);
|
|
15214
15540
|
|
|
15215
15541
|
// src/components/Switch/Switch.tsx
|
|
15216
|
-
import * as
|
|
15542
|
+
import * as React20 from "react";
|
|
15217
15543
|
|
|
15218
15544
|
// src/components/Switch/Switch.styles.ts
|
|
15219
|
-
import { css as
|
|
15220
|
-
var SwitchInputContainer =
|
|
15545
|
+
import { css as css73 } from "@emotion/react";
|
|
15546
|
+
var SwitchInputContainer = css73`
|
|
15221
15547
|
cursor: pointer;
|
|
15222
15548
|
display: inline-block;
|
|
15223
15549
|
position: relative;
|
|
@@ -15226,7 +15552,7 @@ var SwitchInputContainer = css70`
|
|
|
15226
15552
|
vertical-align: middle;
|
|
15227
15553
|
user-select: none;
|
|
15228
15554
|
`;
|
|
15229
|
-
var SwitchInput =
|
|
15555
|
+
var SwitchInput = css73`
|
|
15230
15556
|
appearance: none;
|
|
15231
15557
|
border-radius: var(--rounded-full);
|
|
15232
15558
|
background-color: var(--white);
|
|
@@ -15264,7 +15590,7 @@ var SwitchInput = css70`
|
|
|
15264
15590
|
cursor: not-allowed;
|
|
15265
15591
|
}
|
|
15266
15592
|
`;
|
|
15267
|
-
var SwitchInputDisabled =
|
|
15593
|
+
var SwitchInputDisabled = css73`
|
|
15268
15594
|
opacity: var(--opacity-50);
|
|
15269
15595
|
cursor: not-allowed;
|
|
15270
15596
|
|
|
@@ -15272,7 +15598,7 @@ var SwitchInputDisabled = css70`
|
|
|
15272
15598
|
cursor: not-allowed;
|
|
15273
15599
|
}
|
|
15274
15600
|
`;
|
|
15275
|
-
var SwitchInputLabel =
|
|
15601
|
+
var SwitchInputLabel = css73`
|
|
15276
15602
|
align-items: center;
|
|
15277
15603
|
color: var(--brand-secondary-1);
|
|
15278
15604
|
display: inline-flex;
|
|
@@ -15294,98 +15620,98 @@ var SwitchInputLabel = css70`
|
|
|
15294
15620
|
top: 0;
|
|
15295
15621
|
}
|
|
15296
15622
|
`;
|
|
15297
|
-
var SwitchText =
|
|
15623
|
+
var SwitchText = css73`
|
|
15298
15624
|
color: var(--gray-500);
|
|
15299
15625
|
font-size: var(--fs-sm);
|
|
15300
15626
|
padding-inline: var(--spacing-2xl) 0;
|
|
15301
15627
|
`;
|
|
15302
15628
|
|
|
15303
15629
|
// src/components/Switch/Switch.tsx
|
|
15304
|
-
import { Fragment as Fragment14, jsx as
|
|
15305
|
-
var Switch =
|
|
15630
|
+
import { Fragment as Fragment14, jsx as jsx98, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
|
|
15631
|
+
var Switch = React20.forwardRef(
|
|
15306
15632
|
({ label, infoText, toggleText, children, ...inputProps }, ref) => {
|
|
15307
15633
|
let additionalText = infoText;
|
|
15308
15634
|
if (infoText && toggleText) {
|
|
15309
15635
|
additionalText = inputProps.checked ? toggleText : infoText;
|
|
15310
15636
|
}
|
|
15311
|
-
return /* @__PURE__ */
|
|
15312
|
-
/* @__PURE__ */
|
|
15313
|
-
/* @__PURE__ */
|
|
15314
|
-
/* @__PURE__ */
|
|
15637
|
+
return /* @__PURE__ */ jsxs67(Fragment14, { children: [
|
|
15638
|
+
/* @__PURE__ */ jsxs67("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
|
|
15639
|
+
/* @__PURE__ */ jsx98("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
|
|
15640
|
+
/* @__PURE__ */ jsx98("span", { css: SwitchInputLabel, children: label })
|
|
15315
15641
|
] }),
|
|
15316
|
-
additionalText ? /* @__PURE__ */
|
|
15642
|
+
additionalText ? /* @__PURE__ */ jsx98("p", { css: SwitchText, children: additionalText }) : null,
|
|
15317
15643
|
children
|
|
15318
15644
|
] });
|
|
15319
15645
|
}
|
|
15320
15646
|
);
|
|
15321
15647
|
|
|
15322
15648
|
// src/components/Table/Table.tsx
|
|
15323
|
-
import * as
|
|
15649
|
+
import * as React21 from "react";
|
|
15324
15650
|
|
|
15325
15651
|
// src/components/Table/Table.styles.ts
|
|
15326
|
-
import { css as
|
|
15327
|
-
var table =
|
|
15652
|
+
import { css as css74 } from "@emotion/react";
|
|
15653
|
+
var table = css74`
|
|
15328
15654
|
border-bottom: 1px solid var(--gray-400);
|
|
15329
15655
|
border-collapse: collapse;
|
|
15330
15656
|
min-width: 100%;
|
|
15331
15657
|
table-layout: auto;
|
|
15332
15658
|
`;
|
|
15333
|
-
var tableHead =
|
|
15659
|
+
var tableHead = css74`
|
|
15334
15660
|
background: var(--gray-100);
|
|
15335
15661
|
color: var(--brand-secondary-1);
|
|
15336
15662
|
text-align: left;
|
|
15337
15663
|
`;
|
|
15338
|
-
var tableRow =
|
|
15664
|
+
var tableRow = css74`
|
|
15339
15665
|
border-bottom: 1px solid var(--gray-200);
|
|
15340
15666
|
`;
|
|
15341
|
-
var tableCellHead =
|
|
15667
|
+
var tableCellHead = css74`
|
|
15342
15668
|
font-size: var(--fs-sm);
|
|
15343
15669
|
padding: var(--spacing-base) var(--spacing-md);
|
|
15344
15670
|
text-transform: uppercase;
|
|
15345
15671
|
font-weight: var(--fw-bold);
|
|
15346
15672
|
`;
|
|
15347
|
-
var tableCellData =
|
|
15673
|
+
var tableCellData = css74`
|
|
15348
15674
|
padding: var(--spacing-base) var(--spacing-md);
|
|
15349
15675
|
`;
|
|
15350
15676
|
|
|
15351
15677
|
// src/components/Table/Table.tsx
|
|
15352
|
-
import { jsx as
|
|
15353
|
-
var Table =
|
|
15354
|
-
return /* @__PURE__ */
|
|
15678
|
+
import { jsx as jsx99 } from "@emotion/react/jsx-runtime";
|
|
15679
|
+
var Table = React21.forwardRef(({ children, ...otherProps }, ref) => {
|
|
15680
|
+
return /* @__PURE__ */ jsx99("table", { ref, css: table, ...otherProps, children });
|
|
15355
15681
|
});
|
|
15356
|
-
var TableHead =
|
|
15682
|
+
var TableHead = React21.forwardRef(
|
|
15357
15683
|
({ children, ...otherProps }, ref) => {
|
|
15358
|
-
return /* @__PURE__ */
|
|
15684
|
+
return /* @__PURE__ */ jsx99("thead", { ref, css: tableHead, ...otherProps, children });
|
|
15359
15685
|
}
|
|
15360
15686
|
);
|
|
15361
|
-
var TableBody =
|
|
15687
|
+
var TableBody = React21.forwardRef(
|
|
15362
15688
|
({ children, ...otherProps }, ref) => {
|
|
15363
|
-
return /* @__PURE__ */
|
|
15689
|
+
return /* @__PURE__ */ jsx99("tbody", { ref, ...otherProps, children });
|
|
15364
15690
|
}
|
|
15365
15691
|
);
|
|
15366
|
-
var TableFoot =
|
|
15692
|
+
var TableFoot = React21.forwardRef(
|
|
15367
15693
|
({ children, ...otherProps }, ref) => {
|
|
15368
|
-
return /* @__PURE__ */
|
|
15694
|
+
return /* @__PURE__ */ jsx99("tfoot", { ref, ...otherProps, children });
|
|
15369
15695
|
}
|
|
15370
15696
|
);
|
|
15371
|
-
var TableRow =
|
|
15697
|
+
var TableRow = React21.forwardRef(
|
|
15372
15698
|
({ children, ...otherProps }, ref) => {
|
|
15373
|
-
return /* @__PURE__ */
|
|
15699
|
+
return /* @__PURE__ */ jsx99("tr", { ref, css: tableRow, ...otherProps, children });
|
|
15374
15700
|
}
|
|
15375
15701
|
);
|
|
15376
|
-
var TableCellHead =
|
|
15702
|
+
var TableCellHead = React21.forwardRef(
|
|
15377
15703
|
({ children, ...otherProps }, ref) => {
|
|
15378
|
-
return /* @__PURE__ */
|
|
15704
|
+
return /* @__PURE__ */ jsx99("th", { ref, css: tableCellHead, ...otherProps, children });
|
|
15379
15705
|
}
|
|
15380
15706
|
);
|
|
15381
|
-
var TableCellData =
|
|
15707
|
+
var TableCellData = React21.forwardRef(
|
|
15382
15708
|
({ children, ...otherProps }, ref) => {
|
|
15383
|
-
return /* @__PURE__ */
|
|
15709
|
+
return /* @__PURE__ */ jsx99("td", { ref, css: tableCellData, ...otherProps, children });
|
|
15384
15710
|
}
|
|
15385
15711
|
);
|
|
15386
15712
|
|
|
15387
15713
|
// src/components/Tabs/Tabs.tsx
|
|
15388
|
-
import { createContext as createContext6, useContext as useContext7, useEffect as
|
|
15714
|
+
import { createContext as createContext6, useContext as useContext7, useEffect as useEffect11, useMemo as useMemo4 } from "react";
|
|
15389
15715
|
import {
|
|
15390
15716
|
Tab as ReakitTab,
|
|
15391
15717
|
TabList as ReakitTabList,
|
|
@@ -15394,8 +15720,8 @@ import {
|
|
|
15394
15720
|
} from "reakit/Tab";
|
|
15395
15721
|
|
|
15396
15722
|
// src/components/Tabs/Tabs.styles.ts
|
|
15397
|
-
import { css as
|
|
15398
|
-
var tabButtonStyles =
|
|
15723
|
+
import { css as css75 } from "@emotion/react";
|
|
15724
|
+
var tabButtonStyles = css75`
|
|
15399
15725
|
align-items: center;
|
|
15400
15726
|
border: 0;
|
|
15401
15727
|
height: 2.5rem;
|
|
@@ -15412,14 +15738,14 @@ var tabButtonStyles = css72`
|
|
|
15412
15738
|
-webkit-text-stroke-width: thin;
|
|
15413
15739
|
}
|
|
15414
15740
|
`;
|
|
15415
|
-
var tabButtonGroupStyles =
|
|
15741
|
+
var tabButtonGroupStyles = css75`
|
|
15416
15742
|
display: flex;
|
|
15417
15743
|
gap: var(--spacing-base);
|
|
15418
15744
|
border-bottom: 1px solid var(--gray-300);
|
|
15419
15745
|
`;
|
|
15420
15746
|
|
|
15421
15747
|
// src/components/Tabs/Tabs.tsx
|
|
15422
|
-
import { jsx as
|
|
15748
|
+
import { jsx as jsx100 } from "@emotion/react/jsx-runtime";
|
|
15423
15749
|
var CurrentTabContext = createContext6(null);
|
|
15424
15750
|
var useCurrentTab = () => {
|
|
15425
15751
|
const context = useContext7(CurrentTabContext);
|
|
@@ -15435,7 +15761,7 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
|
|
|
15435
15761
|
return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
|
|
15436
15762
|
}, [selectedId, useHashForState]);
|
|
15437
15763
|
const tab = useTabState({ ...props, selectedId: selected });
|
|
15438
|
-
|
|
15764
|
+
useEffect11(() => {
|
|
15439
15765
|
var _a;
|
|
15440
15766
|
const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
|
|
15441
15767
|
onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
|
|
@@ -15443,116 +15769,24 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
|
|
|
15443
15769
|
window.location.hash = selectedValueWithoutNull != null ? selectedValueWithoutNull : "";
|
|
15444
15770
|
}
|
|
15445
15771
|
}, [tab.selectedId, onSelectedIdChange, useHashForState]);
|
|
15446
|
-
|
|
15772
|
+
useEffect11(() => {
|
|
15447
15773
|
if (selected && selected !== tab.selectedId) {
|
|
15448
15774
|
tab.setSelectedId(selected);
|
|
15449
15775
|
}
|
|
15450
15776
|
}, [selected]);
|
|
15451
|
-
return /* @__PURE__ */
|
|
15777
|
+
return /* @__PURE__ */ jsx100(CurrentTabContext.Provider, { value: tab, children });
|
|
15452
15778
|
};
|
|
15453
15779
|
var TabButtonGroup = ({ children, ...props }) => {
|
|
15454
15780
|
const currentTab = useCurrentTab();
|
|
15455
|
-
return /* @__PURE__ */
|
|
15781
|
+
return /* @__PURE__ */ jsx100(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
|
|
15456
15782
|
};
|
|
15457
15783
|
var TabButton = ({ children, id, ...props }) => {
|
|
15458
15784
|
const currentTab = useCurrentTab();
|
|
15459
|
-
return /* @__PURE__ */
|
|
15785
|
+
return /* @__PURE__ */ jsx100(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
|
|
15460
15786
|
};
|
|
15461
15787
|
var TabContent = ({ children, ...props }) => {
|
|
15462
15788
|
const currentTab = useCurrentTab();
|
|
15463
|
-
return /* @__PURE__ */
|
|
15464
|
-
};
|
|
15465
|
-
|
|
15466
|
-
// src/components/Validation/StatusBullet.styles.ts
|
|
15467
|
-
import { css as css73 } from "@emotion/react";
|
|
15468
|
-
var StatusBulletContainer = css73`
|
|
15469
|
-
align-items: center;
|
|
15470
|
-
align-self: center;
|
|
15471
|
-
color: var(--gray-500);
|
|
15472
|
-
display: inline-flex;
|
|
15473
|
-
font-weight: var(--fw-regular);
|
|
15474
|
-
gap: var(--spacing-xs);
|
|
15475
|
-
line-height: 1;
|
|
15476
|
-
position: relative;
|
|
15477
|
-
text-transform: lowercase;
|
|
15478
|
-
|
|
15479
|
-
&:before {
|
|
15480
|
-
border-radius: var(--rounded-full);
|
|
15481
|
-
content: '';
|
|
15482
|
-
display: block;
|
|
15483
|
-
}
|
|
15484
|
-
`;
|
|
15485
|
-
var StatusBulletBase = css73`
|
|
15486
|
-
font-size: var(--fs-sm);
|
|
15487
|
-
&:before {
|
|
15488
|
-
width: var(--fs-xs);
|
|
15489
|
-
height: var(--fs-xs);
|
|
15490
|
-
}
|
|
15491
|
-
`;
|
|
15492
|
-
var StatusBulletSmall = css73`
|
|
15493
|
-
font-size: var(--fs-xs);
|
|
15494
|
-
&:before {
|
|
15495
|
-
width: var(--fs-xxs);
|
|
15496
|
-
height: var(--fs-xxs);
|
|
15497
|
-
}
|
|
15498
|
-
`;
|
|
15499
|
-
var StatusDraft = css73`
|
|
15500
|
-
&:before {
|
|
15501
|
-
background: var(--white);
|
|
15502
|
-
box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
|
|
15503
|
-
}
|
|
15504
|
-
`;
|
|
15505
|
-
var StatusModified = css73`
|
|
15506
|
-
&:before {
|
|
15507
|
-
background: linear-gradient(to right, var(--white) 50%, var(--brand-primary-1) 50% 100%);
|
|
15508
|
-
box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
|
|
15509
|
-
}
|
|
15510
|
-
`;
|
|
15511
|
-
var StatusError = css73`
|
|
15512
|
-
color: var(--error);
|
|
15513
|
-
&:before {
|
|
15514
|
-
background: linear-gradient(120deg, var(--error) 40%, var(--white) 50%, var(--error) 60%);
|
|
15515
|
-
}
|
|
15516
|
-
`;
|
|
15517
|
-
var StatusPublished = css73`
|
|
15518
|
-
&:before {
|
|
15519
|
-
background: var(--brand-secondary-3);
|
|
15520
|
-
}
|
|
15521
|
-
`;
|
|
15522
|
-
var StatusOrphan = css73`
|
|
15523
|
-
&:before {
|
|
15524
|
-
background: var(--brand-secondary-5);
|
|
15525
|
-
}
|
|
15526
|
-
`;
|
|
15527
|
-
|
|
15528
|
-
// src/components/Validation/StatusBullet.tsx
|
|
15529
|
-
import { jsx as jsx96 } from "@emotion/react/jsx-runtime";
|
|
15530
|
-
var StatusBullet = ({
|
|
15531
|
-
status,
|
|
15532
|
-
hideText = false,
|
|
15533
|
-
size = "base",
|
|
15534
|
-
message,
|
|
15535
|
-
...props
|
|
15536
|
-
}) => {
|
|
15537
|
-
const currentStateStyles = {
|
|
15538
|
-
Error: StatusError,
|
|
15539
|
-
Modified: StatusModified,
|
|
15540
|
-
Unsaved: StatusDraft,
|
|
15541
|
-
Orphan: StatusOrphan,
|
|
15542
|
-
Published: StatusPublished,
|
|
15543
|
-
Draft: StatusDraft
|
|
15544
|
-
};
|
|
15545
|
-
const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
|
|
15546
|
-
return /* @__PURE__ */ jsx96(
|
|
15547
|
-
"span",
|
|
15548
|
-
{
|
|
15549
|
-
role: "status",
|
|
15550
|
-
css: [StatusBulletContainer, currentStateStyles[status], statusSize],
|
|
15551
|
-
title: message != null ? message : status,
|
|
15552
|
-
...props,
|
|
15553
|
-
children: hideText ? null : message ? message : status
|
|
15554
|
-
}
|
|
15555
|
-
);
|
|
15789
|
+
return /* @__PURE__ */ jsx100(ReakitTabPanel, { ...props, ...currentTab, children });
|
|
15556
15790
|
};
|
|
15557
15791
|
export {
|
|
15558
15792
|
AddButton,
|
|
@@ -15614,6 +15848,10 @@ export {
|
|
|
15614
15848
|
MenuGroup,
|
|
15615
15849
|
MenuItem,
|
|
15616
15850
|
MenuItemSeparator,
|
|
15851
|
+
ObjectCompositionListItem,
|
|
15852
|
+
ObjectListContainer,
|
|
15853
|
+
ObjectListItemLoadingSkeleton,
|
|
15854
|
+
ObjectPersonalizationListItem,
|
|
15617
15855
|
PageHeaderSection,
|
|
15618
15856
|
Paragraph,
|
|
15619
15857
|
ParameterDataResource,
|