@uniformdev/design-system 19.159.0 → 19.159.1-alpha.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +888 -483
- package/dist/index.d.mts +110 -21
- package/dist/index.d.ts +110 -21
- package/dist/index.js +937 -508
- package/package.json +10 -10
package/dist/index.js
CHANGED
|
@@ -1371,6 +1371,7 @@ __export(src_exports, {
|
|
|
1371
1371
|
CurrentDrawerContext: () => CurrentDrawerContext,
|
|
1372
1372
|
DashedBox: () => DashedBox,
|
|
1373
1373
|
DateTimePicker: () => DateTimePicker,
|
|
1374
|
+
DateTimePickerSummary: () => DateTimePickerSummary,
|
|
1374
1375
|
DateTimePickerVariant: () => DateTimePickerVariant,
|
|
1375
1376
|
DebouncedInputKeywordSearch: () => DebouncedInputKeywordSearch,
|
|
1376
1377
|
DescriptionList: () => DescriptionList,
|
|
@@ -1434,6 +1435,13 @@ __export(src_exports, {
|
|
|
1434
1435
|
Modal: () => Modal,
|
|
1435
1436
|
ModalDialog: () => ModalDialog,
|
|
1436
1437
|
MultilineChip: () => MultilineChip,
|
|
1438
|
+
ObjectGridContainer: () => ObjectGridContainer2,
|
|
1439
|
+
ObjectGridItem: () => ObjectGridItem2,
|
|
1440
|
+
ObjectGridItemCardCover: () => ObjectGridItemCardCover,
|
|
1441
|
+
ObjectGridItemCover: () => ObjectGridItemCover,
|
|
1442
|
+
ObjectGridItemCoverButton: () => ObjectGridItemCoverButton,
|
|
1443
|
+
ObjectGridItemHeading: () => ObjectGridItemHeading2,
|
|
1444
|
+
ObjectGridItemIconWithTooltip: () => ObjectGridItemIconWithTooltip,
|
|
1437
1445
|
PageHeaderSection: () => PageHeaderSection,
|
|
1438
1446
|
Pagination: () => Pagination,
|
|
1439
1447
|
Paragraph: () => Paragraph,
|
|
@@ -1579,6 +1587,7 @@ __export(src_exports, {
|
|
|
1579
1587
|
toast: () => import_react_toastify.toast,
|
|
1580
1588
|
uniformComponentIcon: () => uniformComponentIcon,
|
|
1581
1589
|
uniformComponentPatternIcon: () => uniformComponentPatternIcon,
|
|
1590
|
+
uniformCompositionPatternIcon: () => uniformCompositionPatternIcon,
|
|
1582
1591
|
uniformContentTypeIcon: () => uniformContentTypeIcon,
|
|
1583
1592
|
uniformEntryIcon: () => uniformEntryIcon,
|
|
1584
1593
|
uniformEntryPatternIcon: () => uniformEntryPatternIcon,
|
|
@@ -1591,6 +1600,7 @@ __export(src_exports, {
|
|
|
1591
1600
|
useIconContext: () => useIconContext,
|
|
1592
1601
|
useOutsideClick: () => useOutsideClick,
|
|
1593
1602
|
useParameterShell: () => useParameterShell,
|
|
1603
|
+
usePopoverComponentContext: () => usePopoverComponentContext,
|
|
1594
1604
|
useShortcut: () => useShortcut,
|
|
1595
1605
|
utilityColors: () => functionalColors,
|
|
1596
1606
|
warningIcon: () => warningIcon,
|
|
@@ -1607,7 +1617,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
|
|
|
1607
1617
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
1608
1618
|
"link",
|
|
1609
1619
|
{
|
|
1610
|
-
href: "https://fonts.googleapis.com/css2?family=DM+
|
|
1620
|
+
href: "https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap",
|
|
1611
1621
|
rel: "stylesheet"
|
|
1612
1622
|
}
|
|
1613
1623
|
),
|
|
@@ -1666,6 +1676,10 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
|
|
|
1666
1676
|
|
|
1667
1677
|
--action-destructive-default: var(--brand-secondary-5);
|
|
1668
1678
|
--action-destructive-hover: #e07571;
|
|
1679
|
+
--action-destructive-active: rbga(210, 50, 45, 0.05); /* #d2322d */
|
|
1680
|
+
--action-destructive-disabled: #f87171;
|
|
1681
|
+
|
|
1682
|
+
|
|
1669
1683
|
|
|
1670
1684
|
/* tertiary action */
|
|
1671
1685
|
--tertiary-action-default: var(--gray-700);
|
|
@@ -1747,7 +1761,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
|
|
|
1747
1761
|
/* font family */
|
|
1748
1762
|
--ff-base: 'DM Sans', sans-serif;
|
|
1749
1763
|
--ff-heading: 'Quantico', sans-serif;
|
|
1750
|
-
--ff-mono: '
|
|
1764
|
+
--ff-mono: 'DM Mono', monospace;
|
|
1751
1765
|
|
|
1752
1766
|
/* max text width */
|
|
1753
1767
|
--prose: 65ch;
|
|
@@ -1773,6 +1787,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
|
|
|
1773
1787
|
--rounded-sm: 0.125rem; /* 2px */
|
|
1774
1788
|
--rounded-base: 0.25rem; /* 4px */
|
|
1775
1789
|
--rounded-md: 0.375rem; /* 6px */
|
|
1790
|
+
--rounded-lg: 0.5rem; /* 8px */
|
|
1776
1791
|
|
|
1777
1792
|
/* anything below here should be removed as its not in our style guide */
|
|
1778
1793
|
--rounded-xl: 0.75rem;
|
|
@@ -2565,16 +2580,16 @@ var buttonPrimary = import_react10.css`
|
|
|
2565
2580
|
})}
|
|
2566
2581
|
`;
|
|
2567
2582
|
var buttonDestructive = import_react10.css`
|
|
2568
|
-
background: var(--
|
|
2583
|
+
background: var(--action-destructive-default);
|
|
2569
2584
|
color: var(--white);
|
|
2570
2585
|
|
|
2571
2586
|
&:disabled {
|
|
2572
|
-
background: var(--gray-300);
|
|
2573
2587
|
color: var(--white);
|
|
2588
|
+
opacity: var(--opacity-50);
|
|
2574
2589
|
}
|
|
2575
2590
|
|
|
2576
2591
|
${buttonRippleEffect({
|
|
2577
|
-
hoverColor: "var(--
|
|
2592
|
+
hoverColor: "var(--action-destructive-default)",
|
|
2578
2593
|
activeColor: "var(--action-destructive-hover)"
|
|
2579
2594
|
})}
|
|
2580
2595
|
`;
|
|
@@ -2652,19 +2667,20 @@ var buttonGhost = import_react10.css`
|
|
|
2652
2667
|
`;
|
|
2653
2668
|
var buttonGhostDestructive = import_react10.css`
|
|
2654
2669
|
background: transparent;
|
|
2655
|
-
color: var(--
|
|
2670
|
+
color: var(--action-destructive-default);
|
|
2656
2671
|
|
|
2657
2672
|
&:hover {
|
|
2658
|
-
|
|
2673
|
+
outline: 1px solid var(--action-destructive-hover);
|
|
2674
|
+
color: var(--action-destructive-hover);
|
|
2659
2675
|
}
|
|
2660
2676
|
|
|
2661
2677
|
&:disabled {
|
|
2662
2678
|
background: transparent;
|
|
2663
|
-
|
|
2664
|
-
|
|
2679
|
+
color: var(--action-destructive-disabled);
|
|
2680
|
+
opacity: var(--opacity-50);
|
|
2665
2681
|
}
|
|
2666
2682
|
|
|
2667
|
-
${buttonRippleEffect({ hoverColor: "var(--white)", activeColor: "var(--
|
|
2683
|
+
${buttonRippleEffect({ hoverColor: "var(--white)", activeColor: "var(--action-destructive-active)" })}
|
|
2668
2684
|
`;
|
|
2669
2685
|
var buttonTertiary = import_react10.css`
|
|
2670
2686
|
background: var(--tertiary-action-default);
|
|
@@ -2792,7 +2808,7 @@ var toastContainerStyles = import_react12.css`
|
|
|
2792
2808
|
${functionalColors}
|
|
2793
2809
|
|
|
2794
2810
|
--toastify-color-light: white;
|
|
2795
|
-
--toastify-color-info: var(--utility-
|
|
2811
|
+
--toastify-color-info: var(--utility-info-icon);
|
|
2796
2812
|
--toastify-color-success: var(--utility-success-icon);
|
|
2797
2813
|
--toastify-color-warning: var(--utility-caution-icon);
|
|
2798
2814
|
--toastify-color-error: var(--utility-danger-icon);
|
|
@@ -4783,6 +4799,25 @@ var uniformComponentPatternIcon = (0, import_all_files2.GenIcon)({
|
|
|
4783
4799
|
}
|
|
4784
4800
|
]
|
|
4785
4801
|
});
|
|
4802
|
+
var uniformCompositionPatternIcon = (0, import_all_files2.GenIcon)({
|
|
4803
|
+
tag: "svg",
|
|
4804
|
+
attr: {
|
|
4805
|
+
role: "img",
|
|
4806
|
+
viewBox: "0 0 24 24"
|
|
4807
|
+
},
|
|
4808
|
+
child: [
|
|
4809
|
+
{
|
|
4810
|
+
tag: "path",
|
|
4811
|
+
attr: {
|
|
4812
|
+
fillRule: "evenodd",
|
|
4813
|
+
clipRule: "evenodd",
|
|
4814
|
+
fill: "currentColor",
|
|
4815
|
+
d: "M6.92163 12H4V13.5H8.42163L6.92163 12ZM12.7397 17.8181C12.6083 17.9314 12.4372 18 12.25 18H3.25C2.83579 18 2.5 17.6642 2.5 17.25V6.75C2.5 6.33579 2.83579 6 3.25 6H8.5V9.75H9.17163L10.6716 8.25H10V6.07501C10.7159 6.22033 11.3577 6.56957 11.8622 7.05945L12.9229 5.99871C11.9761 5.07158 10.6798 4.5 9.25 4.5H3.25C2.00736 4.5 1 5.50736 1 6.75V17.25C1 18.4926 2.00736 19.5 3.25 19.5H12.25C12.8514 19.5 13.3977 19.2641 13.8013 18.8797L12.7397 17.8181ZM11.4216 16.5H4V15H9.92163L11.4216 16.5ZM4 10.5H7V9H4V10.5ZM12.5784 12L16.3497 8.22876L20.1209 12L16.3497 15.7712L12.5784 12ZM16.3497 18.5997L9.75 12L16.3497 5.40034L22.9493 12L16.3497 18.5997Z"
|
|
4816
|
+
},
|
|
4817
|
+
child: []
|
|
4818
|
+
}
|
|
4819
|
+
]
|
|
4820
|
+
});
|
|
4786
4821
|
var uniformContentTypeIcon = import_CgList2.CgList;
|
|
4787
4822
|
var uniformEntryIcon = import_CgPen2.CgPen;
|
|
4788
4823
|
var uniformEntryPatternIcon = (0, import_all_files2.GenIcon)({
|
|
@@ -13854,15 +13889,18 @@ init_emotion_jsx_shim();
|
|
|
13854
13889
|
var import_react32 = require("@emotion/react");
|
|
13855
13890
|
var import_CgChevronDown2 = require("@react-icons/all-files/cg/CgChevronDown");
|
|
13856
13891
|
var import_jsx_runtime25 = require("@emotion/react/jsx-runtime");
|
|
13857
|
-
var buttonStyle = import_react32.css`
|
|
13892
|
+
var buttonStyle = (bgColor) => import_react32.css`
|
|
13858
13893
|
border: 0;
|
|
13859
|
-
background-color:
|
|
13894
|
+
background-color: ${bgColor};
|
|
13860
13895
|
display: block;
|
|
13861
13896
|
font-size: var(--fs-sm);
|
|
13862
13897
|
line-height: 1.5;
|
|
13898
|
+
transition: background-color var(--duration-fast) var(--timing-ease-out),
|
|
13899
|
+
outline var(--duration-fast) var(--timing-ease-out);
|
|
13900
|
+
outline: 1px solid transparent;
|
|
13863
13901
|
|
|
13864
13902
|
&:hover {
|
|
13865
|
-
outline:
|
|
13903
|
+
outline-color: var(--gray-300);
|
|
13866
13904
|
background-color: var(--gray-100);
|
|
13867
13905
|
}
|
|
13868
13906
|
|
|
@@ -13870,8 +13908,12 @@ var buttonStyle = import_react32.css`
|
|
|
13870
13908
|
color: var(--gray-400);
|
|
13871
13909
|
}
|
|
13872
13910
|
`;
|
|
13873
|
-
function DropdownStyleMenuTrigger({
|
|
13874
|
-
|
|
13911
|
+
function DropdownStyleMenuTrigger({
|
|
13912
|
+
bgColor = "var(--white)",
|
|
13913
|
+
children,
|
|
13914
|
+
...buttonProps
|
|
13915
|
+
}) {
|
|
13916
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { ...buttonProps, css: buttonStyle(bgColor), type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
|
|
13875
13917
|
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children }),
|
|
13876
13918
|
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_CgChevronDown2.CgChevronDown, { size: "1rem" })
|
|
13877
13919
|
] }) });
|
|
@@ -14105,19 +14147,14 @@ var Menu = React7.forwardRef(function Menu2({
|
|
|
14105
14147
|
"data-testid": testId != null ? testId : "more-menu",
|
|
14106
14148
|
hideOnHoverOutside: (event) => {
|
|
14107
14149
|
var _a;
|
|
14108
|
-
if (!menu.parent)
|
|
14109
|
-
return false;
|
|
14150
|
+
if (!menu.parent) return false;
|
|
14110
14151
|
const { contentElement, anchorElement } = menu.getState();
|
|
14111
14152
|
const [target] = event.composedPath();
|
|
14112
|
-
if (!target)
|
|
14113
|
-
return false;
|
|
14153
|
+
if (!target) return false;
|
|
14114
14154
|
const activeElement = (_a = target.ownerDocument) == null ? void 0 : _a.activeElement;
|
|
14115
|
-
if (anchorElement == null ? void 0 : anchorElement.contains(target))
|
|
14116
|
-
|
|
14117
|
-
if (
|
|
14118
|
-
return false;
|
|
14119
|
-
if (activeElement && target.contains(activeElement))
|
|
14120
|
-
return false;
|
|
14155
|
+
if (anchorElement == null ? void 0 : anchorElement.contains(target)) return false;
|
|
14156
|
+
if (contentElement == null ? void 0 : contentElement.contains(target)) return false;
|
|
14157
|
+
if (activeElement && target.contains(activeElement)) return false;
|
|
14121
14158
|
return true;
|
|
14122
14159
|
},
|
|
14123
14160
|
children: disableAutoSeparatorManagement ? children : filterMenuSeparators(children)
|
|
@@ -14401,9 +14438,9 @@ var InfoIcon2 = import_react44.css`
|
|
|
14401
14438
|
|
|
14402
14439
|
// src/components/Input/InfoMessage.tsx
|
|
14403
14440
|
var import_jsx_runtime34 = require("@emotion/react/jsx-runtime");
|
|
14404
|
-
var InfoMessage = ({ message, testId, ...props }) => {
|
|
14441
|
+
var InfoMessage = ({ message, testId, icon = import_MdInfoOutline.MdInfoOutline, ...props }) => {
|
|
14405
14442
|
return message ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { role: "status", css: InfoText, "data-testid": testId, ...props, children: [
|
|
14406
|
-
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { css: InfoIcon2, icon
|
|
14443
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { css: InfoIcon2, icon, size: "1rem", iconColor: "currentColor" }) }),
|
|
14407
14444
|
message
|
|
14408
14445
|
] }) : null;
|
|
14409
14446
|
};
|
|
@@ -14823,10 +14860,11 @@ function convertComboBoxGroupsToSelectableGroups(args) {
|
|
|
14823
14860
|
return { groupedOptions, selectedOptions };
|
|
14824
14861
|
}
|
|
14825
14862
|
function getComboBoxSelectedSelectableGroups(selectedValues) {
|
|
14826
|
-
const
|
|
14863
|
+
const selectedValuesNormalized = selectedValues ? Array.isArray(selectedValues) ? selectedValues : [selectedValues] : null;
|
|
14864
|
+
const selectedOptionValues = selectedValuesNormalized == null ? void 0 : selectedValuesNormalized.flatMap(
|
|
14827
14865
|
(selectedValue) => Array.isArray(selectedValue.value) ? selectedValue.value : [selectedValue.value]
|
|
14828
14866
|
);
|
|
14829
|
-
return new Set(selectedOptionValues.filter((value) => value !== void 0));
|
|
14867
|
+
return new Set(selectedOptionValues == null ? void 0 : selectedOptionValues.filter((value) => value !== void 0));
|
|
14830
14868
|
}
|
|
14831
14869
|
function flatMapOptionValues(options) {
|
|
14832
14870
|
return options.flatMap((option) => {
|
|
@@ -14963,8 +15001,7 @@ var InputInlineSelect = ({
|
|
|
14963
15001
|
"aria-expanded": menuVisible,
|
|
14964
15002
|
css: inlineSelectBtn,
|
|
14965
15003
|
onClick: () => {
|
|
14966
|
-
if (!disabled2)
|
|
14967
|
-
setMenuVisible((prev) => !prev);
|
|
15004
|
+
if (!disabled2) setMenuVisible((prev) => !prev);
|
|
14968
15005
|
},
|
|
14969
15006
|
disabled: disabled2,
|
|
14970
15007
|
...props,
|
|
@@ -15059,6 +15096,10 @@ var InputKeywordSearch = (0, import_react50.forwardRef)(
|
|
|
15059
15096
|
minHeight: 0,
|
|
15060
15097
|
padding: "var(--spacing-xs) var(--spacing-lg) var(--spacing-xs) var(--spacing-base)",
|
|
15061
15098
|
fontSize: "var(--fs-sm)"
|
|
15099
|
+
} : compact === "sm" ? {
|
|
15100
|
+
minHeight: "40px",
|
|
15101
|
+
padding: "var(--spacing-xs) var(--spacing-lg) var(--spacing-xs) var(--spacing-base)",
|
|
15102
|
+
fontSize: "var(--fs-sm)"
|
|
15062
15103
|
} : compact ? {
|
|
15063
15104
|
padding: "var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base)",
|
|
15064
15105
|
fontSize: "var(--fs-sm)"
|
|
@@ -15822,6 +15863,7 @@ var container = import_react59.css`
|
|
|
15822
15863
|
--calendar-cell-size: 1.8rem;
|
|
15823
15864
|
width: fit-content;
|
|
15824
15865
|
max-width: 100%;
|
|
15866
|
+
margin: 0 auto;
|
|
15825
15867
|
`;
|
|
15826
15868
|
var header = import_react59.css`
|
|
15827
15869
|
display: flex;
|
|
@@ -16593,6 +16635,7 @@ var ChipMultiline = import_react69.css`
|
|
|
16593
16635
|
padding-inline: var(--spacing-sm);
|
|
16594
16636
|
`;
|
|
16595
16637
|
var ChipThemeAccentLight = import_react69.css`
|
|
16638
|
+
--outline-color: var(--accent-light);
|
|
16596
16639
|
background: var(--accent-light);
|
|
16597
16640
|
color: var(--typography-base);
|
|
16598
16641
|
|
|
@@ -16618,6 +16661,7 @@ var ChipThemeAccentLight = import_react69.css`
|
|
|
16618
16661
|
}
|
|
16619
16662
|
`;
|
|
16620
16663
|
var ChipThemeAccentDark = import_react69.css`
|
|
16664
|
+
--outline-color: var(--accent-dark);
|
|
16621
16665
|
background: var(--accent-dark);
|
|
16622
16666
|
color: var(--white);
|
|
16623
16667
|
|
|
@@ -16639,6 +16683,7 @@ var ChipThemeAccentDark = import_react69.css`
|
|
|
16639
16683
|
}
|
|
16640
16684
|
`;
|
|
16641
16685
|
var ChipAltThemeAccentLight = import_react69.css`
|
|
16686
|
+
--outline-color: var(--accent-alt-light);
|
|
16642
16687
|
background: var(--accent-alt-light);
|
|
16643
16688
|
color: var(--typography-base);
|
|
16644
16689
|
|
|
@@ -16664,6 +16709,7 @@ var ChipAltThemeAccentLight = import_react69.css`
|
|
|
16664
16709
|
}
|
|
16665
16710
|
`;
|
|
16666
16711
|
var ChipAltThemeAccentDark = import_react69.css`
|
|
16712
|
+
--outline-color: var(--accent-alt-dark);
|
|
16667
16713
|
background: var(--accent-alt-dark);
|
|
16668
16714
|
color: var(--white);
|
|
16669
16715
|
|
|
@@ -16685,6 +16731,7 @@ var ChipAltThemeAccentDark = import_react69.css`
|
|
|
16685
16731
|
}
|
|
16686
16732
|
`;
|
|
16687
16733
|
var ChipThemeNeutralLight = import_react69.css`
|
|
16734
|
+
--outline-color: var(--gray-300);
|
|
16688
16735
|
background: var(--gray-100);
|
|
16689
16736
|
color: var(--typography-base);
|
|
16690
16737
|
:where([role='button']) {
|
|
@@ -16695,6 +16742,7 @@ var ChipThemeNeutralLight = import_react69.css`
|
|
|
16695
16742
|
}
|
|
16696
16743
|
`;
|
|
16697
16744
|
var ChipThemeNeutralDark = import_react69.css`
|
|
16745
|
+
--outline-color: var(--gray-700);
|
|
16698
16746
|
background: var(--gray-700);
|
|
16699
16747
|
color: var(--white);
|
|
16700
16748
|
:where([role='button']) {
|
|
@@ -16714,6 +16762,15 @@ var ChipActionButton = import_react69.css`
|
|
|
16714
16762
|
border-radius: 0 var(--rounded-full) var(--rounded-full) 0;
|
|
16715
16763
|
padding: 0;
|
|
16716
16764
|
`;
|
|
16765
|
+
var ChipOutlined = import_react69.css`
|
|
16766
|
+
background: var(--white);
|
|
16767
|
+
color: var(--typography-light);
|
|
16768
|
+
box-shadow: inset 0 0 0 1px var(--outline-color);
|
|
16769
|
+
|
|
16770
|
+
> [role='separator'] {
|
|
16771
|
+
border-color: var(--outline-color);
|
|
16772
|
+
}
|
|
16773
|
+
`;
|
|
16717
16774
|
|
|
16718
16775
|
// src/components/Chip/Chip.tsx
|
|
16719
16776
|
var import_jsx_runtime61 = require("@emotion/react/jsx-runtime");
|
|
@@ -16730,6 +16787,7 @@ var Chip = ({
|
|
|
16730
16787
|
text,
|
|
16731
16788
|
size = "sm",
|
|
16732
16789
|
theme = "accent-light",
|
|
16790
|
+
variant = "solid",
|
|
16733
16791
|
chipAction,
|
|
16734
16792
|
as = "span",
|
|
16735
16793
|
...props
|
|
@@ -16740,14 +16798,26 @@ var Chip = ({
|
|
|
16740
16798
|
md: ChipMedium
|
|
16741
16799
|
};
|
|
16742
16800
|
const ElementType = as;
|
|
16743
|
-
return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
|
|
16744
|
-
|
|
16745
|
-
|
|
16746
|
-
|
|
16747
|
-
|
|
16748
|
-
|
|
16749
|
-
|
|
16750
|
-
|
|
16801
|
+
return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
|
|
16802
|
+
ElementType,
|
|
16803
|
+
{
|
|
16804
|
+
css: [
|
|
16805
|
+
ChipContainer,
|
|
16806
|
+
chipSize[size],
|
|
16807
|
+
chipTheme[theme],
|
|
16808
|
+
variant === "outlined" ? ChipOutlined : void 0
|
|
16809
|
+
],
|
|
16810
|
+
...props,
|
|
16811
|
+
children: [
|
|
16812
|
+
icon ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
|
|
16813
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { role: "presentation", css: [ChipIcon], children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon, { icon, iconColor: "currentColor", size: "1rem" }) }),
|
|
16814
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { role: "separator", css: ChipSeparator })
|
|
16815
|
+
] }) : null,
|
|
16816
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { css: ChipText, children: text }),
|
|
16817
|
+
chipAction
|
|
16818
|
+
]
|
|
16819
|
+
}
|
|
16820
|
+
);
|
|
16751
16821
|
};
|
|
16752
16822
|
var DismissibleChipAction = ({ onDismiss, ...props }) => {
|
|
16753
16823
|
return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
@@ -16967,6 +17037,7 @@ init_emotion_jsx_shim();
|
|
|
16967
17037
|
// src/components/DateTimePicker/DateTimePicker.tsx
|
|
16968
17038
|
init_emotion_jsx_shim();
|
|
16969
17039
|
var import_date4 = require("@internationalized/date");
|
|
17040
|
+
var import_CgCalendar2 = require("@react-icons/all-files/cg/CgCalendar");
|
|
16970
17041
|
var import_react75 = require("react");
|
|
16971
17042
|
var import_Popover = require("reakit/Popover");
|
|
16972
17043
|
|
|
@@ -17026,12 +17097,21 @@ var trigger = import_react74.css`
|
|
|
17026
17097
|
var popover = import_react74.css`
|
|
17027
17098
|
padding: var(--spacing-md);
|
|
17028
17099
|
max-width: none;
|
|
17029
|
-
|
|
17030
|
-
|
|
17031
|
-
|
|
17100
|
+
container-type: inline-size;
|
|
17101
|
+
width: 100%;
|
|
17102
|
+
`;
|
|
17103
|
+
var popoverInnerContent = import_react74.css`
|
|
17104
|
+
display: grid;
|
|
17105
|
+
gap: var(--spacing-base);
|
|
17032
17106
|
|
|
17033
|
-
|
|
17034
|
-
grid-template-
|
|
17107
|
+
${cq("360px")} {
|
|
17108
|
+
grid-template-columns: 0.8fr 1fr;
|
|
17109
|
+
grid-template-rows: 1fr 1fr;
|
|
17110
|
+
gap: var(--spacing-md);
|
|
17111
|
+
|
|
17112
|
+
[data-variant='date'] & {
|
|
17113
|
+
grid-template-rows: 1fr;
|
|
17114
|
+
}
|
|
17035
17115
|
}
|
|
17036
17116
|
`;
|
|
17037
17117
|
var calendarSection = import_react74.css`
|
|
@@ -17050,6 +17130,15 @@ var timeSection = import_react74.css`
|
|
|
17050
17130
|
var tzSection = import_react74.css`
|
|
17051
17131
|
align-self: stretch;
|
|
17052
17132
|
`;
|
|
17133
|
+
var datePart = import_react74.css`
|
|
17134
|
+
text-overflow: ellipsis;
|
|
17135
|
+
overflow: hidden;
|
|
17136
|
+
white-space: nowrap;
|
|
17137
|
+
`;
|
|
17138
|
+
var datePartButton = import_react74.css`
|
|
17139
|
+
// this allows the button to be as wide as the text
|
|
17140
|
+
min-width: 0;
|
|
17141
|
+
`;
|
|
17053
17142
|
|
|
17054
17143
|
// src/components/DateTimePicker/DateTimePickerSummary.tsx
|
|
17055
17144
|
init_emotion_jsx_shim();
|
|
@@ -17088,10 +17177,10 @@ function DateTimePickerSummary({
|
|
|
17088
17177
|
}
|
|
17089
17178
|
}
|
|
17090
17179
|
}
|
|
17091
|
-
const
|
|
17180
|
+
const datePart2 = (value == null ? void 0 : value.datetime) ? dateFormat.format(new Date(value.datetime)) : null;
|
|
17092
17181
|
const timePart = (value == null ? void 0 : value.datetime) ? timeFormat.format(new Date(value.datetime)) : null;
|
|
17093
|
-
return
|
|
17094
|
-
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("em", { css: inputLabelFocal, children:
|
|
17182
|
+
return datePart2 ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { css: datePart, children: [
|
|
17183
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("em", { css: inputLabelFocal, children: datePart2 }),
|
|
17095
17184
|
!!timePart && `, ${timePart}`,
|
|
17096
17185
|
!!(value == null ? void 0 : value.timeZone) && timeZoneWasValid && ` in ${value == null ? void 0 : value.timeZone}`
|
|
17097
17186
|
] }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { children: placeholder });
|
|
@@ -17179,6 +17268,7 @@ function useDateTimePickerContext() {
|
|
|
17179
17268
|
var DateTimePicker = ({
|
|
17180
17269
|
id,
|
|
17181
17270
|
label,
|
|
17271
|
+
triggerIcon = import_CgCalendar2.CgCalendar,
|
|
17182
17272
|
value,
|
|
17183
17273
|
minVisible,
|
|
17184
17274
|
maxVisible,
|
|
@@ -17270,7 +17360,7 @@ var DateTimePicker = ({
|
|
|
17270
17360
|
import_Popover.PopoverDisclosure,
|
|
17271
17361
|
{
|
|
17272
17362
|
...popover2,
|
|
17273
|
-
css:
|
|
17363
|
+
css: datePartButton,
|
|
17274
17364
|
as: Button,
|
|
17275
17365
|
buttonType: "ghostUnimportant",
|
|
17276
17366
|
disabled: disabled2,
|
|
@@ -17288,41 +17378,53 @@ var DateTimePicker = ({
|
|
|
17288
17378
|
children: "clear"
|
|
17289
17379
|
}
|
|
17290
17380
|
),
|
|
17291
|
-
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { css: trigger, buttonType: "ghost", disabled: disabled2, onClick: popover2.show, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Icon, { icon:
|
|
17381
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { css: trigger, buttonType: "ghost", disabled: disabled2, onClick: popover2.show, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Icon, { icon: triggerIcon, iconColor: "currentColor" }) })
|
|
17292
17382
|
]
|
|
17293
17383
|
}
|
|
17294
17384
|
),
|
|
17295
17385
|
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_Popover.Popover, { ...popover2, css: [Popover, popover], "aria-label": "Pick a date", children: [
|
|
17296
|
-
/* @__PURE__ */ (0, import_jsx_runtime66.
|
|
17297
|
-
|
|
17298
|
-
|
|
17299
|
-
value: draftDate == null ? void 0 : draftDate.toString(),
|
|
17300
|
-
minValue: parsedMinVisible,
|
|
17301
|
-
maxValue: parseMaxVisible,
|
|
17302
|
-
timeZone: (draftTimeZone == null ? void 0 : draftTimeZone.value) || (parsedValue == null ? void 0 : parsedValue.timeZone) || getLocalTimeZone(),
|
|
17303
|
-
onChange: handleDateChange,
|
|
17304
|
-
"data-testid": `${testId}-calendar`
|
|
17305
|
-
}
|
|
17306
|
-
) }),
|
|
17307
|
-
variant !== "date" /* Date */ && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { css: timeSection, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
17308
|
-
InputTime,
|
|
17309
|
-
{
|
|
17310
|
-
label: "Time",
|
|
17311
|
-
value: draftTime == null ? void 0 : draftTime.toString(),
|
|
17312
|
-
belowInputSlot: belowTimeInputSlot,
|
|
17313
|
-
onChange: handleTimeChange
|
|
17314
|
-
}
|
|
17315
|
-
) }),
|
|
17316
|
-
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { css: tzSection, children: [
|
|
17317
|
-
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Label, { css: labelText, children: "Timezone" }),
|
|
17318
|
-
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
17319
|
-
InputComboBox,
|
|
17386
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { css: popoverInnerContent, children: [
|
|
17387
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { css: calendarSection, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
17388
|
+
Calendar,
|
|
17320
17389
|
{
|
|
17321
|
-
value:
|
|
17322
|
-
|
|
17323
|
-
|
|
17390
|
+
value: draftDate == null ? void 0 : draftDate.toString(),
|
|
17391
|
+
minValue: parsedMinVisible,
|
|
17392
|
+
maxValue: parseMaxVisible,
|
|
17393
|
+
timeZone: (draftTimeZone == null ? void 0 : draftTimeZone.value) || (parsedValue == null ? void 0 : parsedValue.timeZone) || getLocalTimeZone(),
|
|
17394
|
+
onChange: handleDateChange,
|
|
17395
|
+
"data-testid": `${testId}-calendar`
|
|
17324
17396
|
}
|
|
17325
|
-
)
|
|
17397
|
+
) }),
|
|
17398
|
+
variant !== "date" /* Date */ && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { css: timeSection, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
17399
|
+
InputTime,
|
|
17400
|
+
{
|
|
17401
|
+
label: "Time",
|
|
17402
|
+
value: draftTime == null ? void 0 : draftTime.toString(),
|
|
17403
|
+
belowInputSlot: belowTimeInputSlot,
|
|
17404
|
+
onChange: handleTimeChange
|
|
17405
|
+
}
|
|
17406
|
+
) }),
|
|
17407
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { css: tzSection, children: [
|
|
17408
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Label, { css: labelText, children: "Timezone" }),
|
|
17409
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
17410
|
+
InputComboBox,
|
|
17411
|
+
{
|
|
17412
|
+
value: draftTimeZone,
|
|
17413
|
+
options: TIMEZONE_OPTIONS,
|
|
17414
|
+
onChange: handleTimezoneChange,
|
|
17415
|
+
menuPlacement: "auto",
|
|
17416
|
+
styles: {
|
|
17417
|
+
menu(base) {
|
|
17418
|
+
return {
|
|
17419
|
+
...base,
|
|
17420
|
+
width: "fit-content",
|
|
17421
|
+
right: 0
|
|
17422
|
+
};
|
|
17423
|
+
}
|
|
17424
|
+
}
|
|
17425
|
+
}
|
|
17426
|
+
)
|
|
17427
|
+
] })
|
|
17326
17428
|
] }),
|
|
17327
17429
|
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(HorizontalRhythm, { gap: "0", children: [
|
|
17328
17430
|
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { buttonType: "secondary", onClick: handleSelectClick, children: "Select" }),
|
|
@@ -19580,6 +19682,10 @@ var Popover3 = ({
|
|
|
19580
19682
|
/* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_react108.Popover, { unmountOnHide: true, css: Popover, ...otherProps, "aria-label": ariaLabel, children })
|
|
19581
19683
|
] });
|
|
19582
19684
|
};
|
|
19685
|
+
var usePopoverComponentContext = () => {
|
|
19686
|
+
const contextValue = (0, import_react108.usePopoverContext)();
|
|
19687
|
+
return contextValue;
|
|
19688
|
+
};
|
|
19583
19689
|
|
|
19584
19690
|
// src/components/MediaCard/MediaCard.styles.ts
|
|
19585
19691
|
init_emotion_jsx_shim();
|
|
@@ -19961,6 +20067,305 @@ var ModalDialog = (0, import_react114.forwardRef)(
|
|
|
19961
20067
|
);
|
|
19962
20068
|
ModalDialog.displayName = "ModalDialog";
|
|
19963
20069
|
|
|
20070
|
+
// src/components/Objects/ObjectGridContainer.tsx
|
|
20071
|
+
init_emotion_jsx_shim();
|
|
20072
|
+
|
|
20073
|
+
// src/components/Objects/styles/ObjectGridContainer.styles.ts
|
|
20074
|
+
init_emotion_jsx_shim();
|
|
20075
|
+
var import_react115 = require("@emotion/react");
|
|
20076
|
+
var ObjectGridContainer = (gridCount) => import_react115.css`
|
|
20077
|
+
display: grid;
|
|
20078
|
+
grid-template-columns: repeat(${gridCount}, minmax(250px, 1fr));
|
|
20079
|
+
gap: var(--spacing-base);
|
|
20080
|
+
`;
|
|
20081
|
+
|
|
20082
|
+
// src/components/Objects/ObjectGridContainer.tsx
|
|
20083
|
+
var import_jsx_runtime101 = require("@emotion/react/jsx-runtime");
|
|
20084
|
+
var ObjectGridContainer2 = ({ gridCount = 3, children }) => {
|
|
20085
|
+
return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { "data-testid": "object-grid-container", css: ObjectGridContainer(gridCount), children });
|
|
20086
|
+
};
|
|
20087
|
+
|
|
20088
|
+
// src/components/Objects/ObjectGridItem.tsx
|
|
20089
|
+
init_emotion_jsx_shim();
|
|
20090
|
+
|
|
20091
|
+
// src/components/Objects/styles/ObjectGridItem.styles.ts
|
|
20092
|
+
init_emotion_jsx_shim();
|
|
20093
|
+
var import_react116 = require("@emotion/react");
|
|
20094
|
+
var ObjectGridItem = import_react116.css`
|
|
20095
|
+
border: 1px solid var(--gray-300);
|
|
20096
|
+
border-radius: var(--rounded-base);
|
|
20097
|
+
background: var(--white);
|
|
20098
|
+
display: flex;
|
|
20099
|
+
flex-direction: column;
|
|
20100
|
+
transition: border-color var(--duration-fast) var(--timing-ease-out);
|
|
20101
|
+
|
|
20102
|
+
&[aria-selected='true'] {
|
|
20103
|
+
border: 1px solid var(--accent-dark);
|
|
20104
|
+
}
|
|
20105
|
+
|
|
20106
|
+
&[aria-selected='false'] {
|
|
20107
|
+
&:hover {
|
|
20108
|
+
border: 1px solid var(--accent-dark);
|
|
20109
|
+
}
|
|
20110
|
+
}
|
|
20111
|
+
`;
|
|
20112
|
+
var ObjectGridItemMediaWrapper = import_react116.css`
|
|
20113
|
+
display: flex;
|
|
20114
|
+
flex: 1 1 0;
|
|
20115
|
+
position: relative;
|
|
20116
|
+
`;
|
|
20117
|
+
var ObjectGridItemContentWrapper = import_react116.css`
|
|
20118
|
+
padding: 0 var(--spacing-sm) var(--spacing-sm);
|
|
20119
|
+
min-height: 52px;
|
|
20120
|
+
`;
|
|
20121
|
+
var ObjectGridItemImage = import_react116.css`
|
|
20122
|
+
object-fit: cover;
|
|
20123
|
+
width: 100%;
|
|
20124
|
+
height: auto;
|
|
20125
|
+
`;
|
|
20126
|
+
var MenuBtn = import_react116.css`
|
|
20127
|
+
border: none;
|
|
20128
|
+
background: transparent;
|
|
20129
|
+
padding: var(--spacing-xs);
|
|
20130
|
+
color: var(--gray-300);
|
|
20131
|
+
transition: color var(--duration-fast) var(--timing-ease-out);
|
|
20132
|
+
|
|
20133
|
+
&:focus,
|
|
20134
|
+
&:hover {
|
|
20135
|
+
outline: none;
|
|
20136
|
+
color: var(--gray-500);
|
|
20137
|
+
}
|
|
20138
|
+
`;
|
|
20139
|
+
|
|
20140
|
+
// src/components/Objects/ObjectGridItem.tsx
|
|
20141
|
+
var import_jsx_runtime102 = require("@emotion/react/jsx-runtime");
|
|
20142
|
+
var ObjectGridItem2 = ({
|
|
20143
|
+
header: header2,
|
|
20144
|
+
cover,
|
|
20145
|
+
rightSlot,
|
|
20146
|
+
menuItems,
|
|
20147
|
+
isSelected,
|
|
20148
|
+
children
|
|
20149
|
+
}) => {
|
|
20150
|
+
return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { css: ObjectGridItem, "aria-selected": isSelected, children: [
|
|
20151
|
+
/* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { css: ObjectGridItemMediaWrapper, children: cover }),
|
|
20152
|
+
/* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(HorizontalRhythm, { css: ObjectGridItemContentWrapper, justify: "space-between", gap: "sm", children: [
|
|
20153
|
+
/* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(VerticalRhythm, { gap: "0", children: [
|
|
20154
|
+
/* @__PURE__ */ (0, import_jsx_runtime102.jsx)(HorizontalRhythm, { gap: "xs", align: "center", children: header2 }),
|
|
20155
|
+
children
|
|
20156
|
+
] }),
|
|
20157
|
+
/* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(HorizontalRhythm, { gap: "xs", align: "flex-start", children: [
|
|
20158
|
+
rightSlot,
|
|
20159
|
+
menuItems ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
|
|
20160
|
+
Menu,
|
|
20161
|
+
{
|
|
20162
|
+
menuTrigger: (
|
|
20163
|
+
// TODO: once insights lands we should be able to replace this with MenuTrigger component
|
|
20164
|
+
/* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
|
|
20165
|
+
"button",
|
|
20166
|
+
{
|
|
20167
|
+
type: "button",
|
|
20168
|
+
"data-testid": "object-grid-item-menu-btn",
|
|
20169
|
+
title: "menu options",
|
|
20170
|
+
css: MenuBtn,
|
|
20171
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(Icon, { icon: "more-alt", size: "1rem", iconColor: "currentColor" })
|
|
20172
|
+
}
|
|
20173
|
+
)
|
|
20174
|
+
),
|
|
20175
|
+
placement: "bottom-end",
|
|
20176
|
+
children: menuItems
|
|
20177
|
+
}
|
|
20178
|
+
) : null
|
|
20179
|
+
] })
|
|
20180
|
+
] })
|
|
20181
|
+
] });
|
|
20182
|
+
};
|
|
20183
|
+
|
|
20184
|
+
// src/components/Objects/ObjectGridItemCardCover.tsx
|
|
20185
|
+
init_emotion_jsx_shim();
|
|
20186
|
+
|
|
20187
|
+
// src/components/Objects/styles/ObjectGridItemCardCover.styles.ts
|
|
20188
|
+
init_emotion_jsx_shim();
|
|
20189
|
+
var import_react117 = require("@emotion/react");
|
|
20190
|
+
var CoverImage = import_react117.css`
|
|
20191
|
+
aspect-ratio: 16/9;
|
|
20192
|
+
max-width: 100%;
|
|
20193
|
+
max-height: 100%;
|
|
20194
|
+
height: auto;
|
|
20195
|
+
padding: var(--spacing-sm);
|
|
20196
|
+
`;
|
|
20197
|
+
var CoverIconWrapper = import_react117.css`
|
|
20198
|
+
position: relative;
|
|
20199
|
+
display: flex;
|
|
20200
|
+
align-items: center;
|
|
20201
|
+
justify-content: center;
|
|
20202
|
+
flex: 1;
|
|
20203
|
+
overflow: hidden;
|
|
20204
|
+
`;
|
|
20205
|
+
var CoverIconGhost = import_react117.css`
|
|
20206
|
+
position: absolute;
|
|
20207
|
+
width: 60%;
|
|
20208
|
+
height: auto;
|
|
20209
|
+
aspect-ratio: 1;
|
|
20210
|
+
opacity: 0.05;
|
|
20211
|
+
transform: rotateZ(-15deg) translate(35%, 30%);
|
|
20212
|
+
`;
|
|
20213
|
+
var CoverSlot = import_react117.css`
|
|
20214
|
+
align-items: center;
|
|
20215
|
+
background: var(--white);
|
|
20216
|
+
display: flex;
|
|
20217
|
+
justify-content: center;
|
|
20218
|
+
position: absolute;
|
|
20219
|
+
top: var(--spacing-sm);
|
|
20220
|
+
z-index: 1;
|
|
20221
|
+
width: 24px;
|
|
20222
|
+
height: 24px;
|
|
20223
|
+
`;
|
|
20224
|
+
var CoverSlotLeft = import_react117.css`
|
|
20225
|
+
border-bottom-right-radius: var(--rounded-base);
|
|
20226
|
+
left: var(--spacing-sm);
|
|
20227
|
+
`;
|
|
20228
|
+
var CoverSlotRight = import_react117.css`
|
|
20229
|
+
border-bottom-left-radius: var(--rounded-base);
|
|
20230
|
+
right: var(--spacing-sm);
|
|
20231
|
+
`;
|
|
20232
|
+
var CoverButton = import_react117.css`
|
|
20233
|
+
align-items: stretch;
|
|
20234
|
+
border: none;
|
|
20235
|
+
background: none;
|
|
20236
|
+
display: flex;
|
|
20237
|
+
flex: 1 1 0;
|
|
20238
|
+
padding: 0;
|
|
20239
|
+
|
|
20240
|
+
&:focus,
|
|
20241
|
+
&:hover {
|
|
20242
|
+
outline: none;
|
|
20243
|
+
}
|
|
20244
|
+
`;
|
|
20245
|
+
var CoverSelectedChip = import_react117.css`
|
|
20246
|
+
animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
|
|
20247
|
+
opacity: 0;
|
|
20248
|
+
position: absolute;
|
|
20249
|
+
bottom: var(--spacing-base);
|
|
20250
|
+
right: var(--spacing-base);
|
|
20251
|
+
`;
|
|
20252
|
+
|
|
20253
|
+
// src/components/Objects/ObjectGridItemCardCover.tsx
|
|
20254
|
+
var import_jsx_runtime103 = require("@emotion/react/jsx-runtime");
|
|
20255
|
+
var ObjectGridItemCardCover = (props) => {
|
|
20256
|
+
if ("imageUrl" in props && props.imageUrl) {
|
|
20257
|
+
const { imageUrl } = props;
|
|
20258
|
+
return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
|
|
20259
|
+
"img",
|
|
20260
|
+
{
|
|
20261
|
+
src: imageUrl,
|
|
20262
|
+
css: CoverImage,
|
|
20263
|
+
loading: "lazy",
|
|
20264
|
+
role: "presentation",
|
|
20265
|
+
"data-testid": "object-grid-item-thumbnail"
|
|
20266
|
+
}
|
|
20267
|
+
);
|
|
20268
|
+
}
|
|
20269
|
+
if ("icon" in props && props.icon) {
|
|
20270
|
+
const { icon } = props;
|
|
20271
|
+
return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", children: [
|
|
20272
|
+
/* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Icon, { icon, iconColor: "currentColor", css: CoverIconGhost }),
|
|
20273
|
+
/* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Icon, { icon, iconColor: "currentColor", size: 48 })
|
|
20274
|
+
] });
|
|
20275
|
+
}
|
|
20276
|
+
};
|
|
20277
|
+
var ObjectGridItemCover = ({
|
|
20278
|
+
coverSlotLeft,
|
|
20279
|
+
coverSlotRight,
|
|
20280
|
+
...props
|
|
20281
|
+
}) => {
|
|
20282
|
+
return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(import_jsx_runtime103.Fragment, { children: [
|
|
20283
|
+
coverSlotLeft ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
|
|
20284
|
+
/* @__PURE__ */ (0, import_jsx_runtime103.jsx)(ObjectGridItemCardCover, { ...props }),
|
|
20285
|
+
coverSlotRight ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null
|
|
20286
|
+
] });
|
|
20287
|
+
};
|
|
20288
|
+
var ObjectGridItemCoverButton = ({
|
|
20289
|
+
id,
|
|
20290
|
+
isSelected,
|
|
20291
|
+
onSelection,
|
|
20292
|
+
coverSlotLeft,
|
|
20293
|
+
coverSlotRight,
|
|
20294
|
+
selectedText = "selected",
|
|
20295
|
+
...props
|
|
20296
|
+
}) => {
|
|
20297
|
+
return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("button", { type: "button", css: CoverButton, onClick: () => onSelection(id), "aria-selected": isSelected, children: [
|
|
20298
|
+
coverSlotLeft ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
|
|
20299
|
+
/* @__PURE__ */ (0, import_jsx_runtime103.jsx)(ObjectGridItemCardCover, { ...props }),
|
|
20300
|
+
coverSlotRight ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null,
|
|
20301
|
+
isSelected ? /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { css: CoverSelectedChip, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Chip, { text: selectedText, size: "xs", theme: "accent-dark" }) }) : null
|
|
20302
|
+
] });
|
|
20303
|
+
};
|
|
20304
|
+
|
|
20305
|
+
// src/components/Objects/ObjectGridItemHeading.tsx
|
|
20306
|
+
init_emotion_jsx_shim();
|
|
20307
|
+
var import_react119 = require("react");
|
|
20308
|
+
|
|
20309
|
+
// src/components/Objects/styles/ObjectGridItemHeading.styles.ts
|
|
20310
|
+
init_emotion_jsx_shim();
|
|
20311
|
+
var import_react118 = require("@emotion/react");
|
|
20312
|
+
var ObjectGridItemHeading = import_react118.css`
|
|
20313
|
+
overflow: hidden;
|
|
20314
|
+
text-overflow: ellipsis;
|
|
20315
|
+
white-space: initial;
|
|
20316
|
+
display: -webkit-box;
|
|
20317
|
+
-webkit-line-clamp: 1;
|
|
20318
|
+
-webkit-box-orient: vertical;
|
|
20319
|
+
`;
|
|
20320
|
+
var PopoverContent = import_react118.css`
|
|
20321
|
+
min-width: 50px;
|
|
20322
|
+
`;
|
|
20323
|
+
|
|
20324
|
+
// src/components/Objects/ObjectGridItemHeading.tsx
|
|
20325
|
+
var import_jsx_runtime104 = require("@emotion/react/jsx-runtime");
|
|
20326
|
+
var ObjectGridItemHeading2 = ({
|
|
20327
|
+
heading,
|
|
20328
|
+
beforeHeadingSlot,
|
|
20329
|
+
afterHeadingSlot
|
|
20330
|
+
}) => {
|
|
20331
|
+
const [hasTruncation, setHasTruncation] = (0, import_react119.useState)(false);
|
|
20332
|
+
const headingRef = (0, import_react119.useRef)(null);
|
|
20333
|
+
(0, import_react119.useEffect)(() => {
|
|
20334
|
+
const currentHeading = headingRef.current;
|
|
20335
|
+
const observer = new ResizeObserver((entries) => {
|
|
20336
|
+
for (const entry of entries) {
|
|
20337
|
+
const isHeadingTruncated = entry.target.scrollHeight > entry.target.clientHeight;
|
|
20338
|
+
setHasTruncation(isHeadingTruncated);
|
|
20339
|
+
}
|
|
20340
|
+
});
|
|
20341
|
+
if (currentHeading) {
|
|
20342
|
+
observer.observe(currentHeading);
|
|
20343
|
+
}
|
|
20344
|
+
return () => {
|
|
20345
|
+
if (currentHeading) {
|
|
20346
|
+
observer.unobserve(currentHeading);
|
|
20347
|
+
}
|
|
20348
|
+
};
|
|
20349
|
+
}, []);
|
|
20350
|
+
return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
|
|
20351
|
+
beforeHeadingSlot,
|
|
20352
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsx)(Tooltip, { title: hasTruncation ? heading : "", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { role: "heading", css: ObjectGridItemHeading, ref: headingRef, children: heading }) }),
|
|
20353
|
+
afterHeadingSlot
|
|
20354
|
+
] });
|
|
20355
|
+
};
|
|
20356
|
+
|
|
20357
|
+
// src/components/Objects/ObjectGridItemIconWithTooltip.tsx
|
|
20358
|
+
init_emotion_jsx_shim();
|
|
20359
|
+
var import_jsx_runtime105 = require("@emotion/react/jsx-runtime");
|
|
20360
|
+
var ObjectGridItemIconWithTooltip = ({
|
|
20361
|
+
tooltipTitle,
|
|
20362
|
+
placement = "bottom-start",
|
|
20363
|
+
icon,
|
|
20364
|
+
iconColor = "accent-dark"
|
|
20365
|
+
}) => {
|
|
20366
|
+
return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Tooltip, { title: tooltipTitle, placement, children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(Icon, { icon, iconColor, size: "1rem" }) }) });
|
|
20367
|
+
};
|
|
20368
|
+
|
|
19964
20369
|
// src/components/Pagination/Pagination.tsx
|
|
19965
20370
|
init_emotion_jsx_shim();
|
|
19966
20371
|
var import_react_paginate = __toESM(require("react-paginate"));
|
|
@@ -19995,7 +20400,7 @@ var page = import_css.css`
|
|
|
19995
20400
|
`;
|
|
19996
20401
|
|
|
19997
20402
|
// src/components/Pagination/Pagination.tsx
|
|
19998
|
-
var
|
|
20403
|
+
var import_jsx_runtime106 = require("@emotion/react/jsx-runtime");
|
|
19999
20404
|
function Pagination({
|
|
20000
20405
|
limit,
|
|
20001
20406
|
offset,
|
|
@@ -20010,12 +20415,12 @@ function Pagination({
|
|
|
20010
20415
|
if (pageCount <= 1) {
|
|
20011
20416
|
return null;
|
|
20012
20417
|
}
|
|
20013
|
-
return /* @__PURE__ */ (0,
|
|
20418
|
+
return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
|
|
20014
20419
|
import_react_paginate.default,
|
|
20015
20420
|
{
|
|
20016
20421
|
forcePage: currentPage,
|
|
20017
|
-
previousLabel: /* @__PURE__ */ (0,
|
|
20018
|
-
nextLabel: /* @__PURE__ */ (0,
|
|
20422
|
+
previousLabel: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: prevNextControls, children: "<" }),
|
|
20423
|
+
nextLabel: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: prevNextControls, children: ">" }),
|
|
20019
20424
|
breakLabel: "...",
|
|
20020
20425
|
pageCount,
|
|
20021
20426
|
marginPagesDisplayed: 2,
|
|
@@ -20035,8 +20440,8 @@ function Pagination({
|
|
|
20035
20440
|
|
|
20036
20441
|
// src/components/ParameterInputs/hooks/ParameterShellContext.tsx
|
|
20037
20442
|
init_emotion_jsx_shim();
|
|
20038
|
-
var
|
|
20039
|
-
var ParameterShellContext = (0,
|
|
20443
|
+
var import_react120 = require("react");
|
|
20444
|
+
var ParameterShellContext = (0, import_react120.createContext)({
|
|
20040
20445
|
id: "",
|
|
20041
20446
|
label: "",
|
|
20042
20447
|
hiddenLabel: void 0,
|
|
@@ -20045,7 +20450,7 @@ var ParameterShellContext = (0, import_react115.createContext)({
|
|
|
20045
20450
|
}
|
|
20046
20451
|
});
|
|
20047
20452
|
var useParameterShell = () => {
|
|
20048
|
-
const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0,
|
|
20453
|
+
const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0, import_react120.useContext)(ParameterShellContext);
|
|
20049
20454
|
return {
|
|
20050
20455
|
id,
|
|
20051
20456
|
label,
|
|
@@ -20060,8 +20465,8 @@ init_emotion_jsx_shim();
|
|
|
20060
20465
|
|
|
20061
20466
|
// src/components/ParameterInputs/styles/LabelLeadingIcon.styles.ts
|
|
20062
20467
|
init_emotion_jsx_shim();
|
|
20063
|
-
var
|
|
20064
|
-
var inputIconBtn =
|
|
20468
|
+
var import_react121 = require("@emotion/react");
|
|
20469
|
+
var inputIconBtn = import_react121.css`
|
|
20065
20470
|
align-items: center;
|
|
20066
20471
|
border: none;
|
|
20067
20472
|
border-radius: var(--rounded-base);
|
|
@@ -20087,7 +20492,7 @@ var inputIconBtn = import_react116.css`
|
|
|
20087
20492
|
`;
|
|
20088
20493
|
|
|
20089
20494
|
// src/components/ParameterInputs/LabelLeadingIcon.tsx
|
|
20090
|
-
var
|
|
20495
|
+
var import_jsx_runtime107 = require("@emotion/react/jsx-runtime");
|
|
20091
20496
|
var LabelLeadingIcon = ({
|
|
20092
20497
|
icon,
|
|
20093
20498
|
iconColor,
|
|
@@ -20099,7 +20504,7 @@ var LabelLeadingIcon = ({
|
|
|
20099
20504
|
...props
|
|
20100
20505
|
}) => {
|
|
20101
20506
|
const titleFr = title2 != null ? title2 : isLocked ? "Read-only pattern parameter" : isBound ? "Connected to external content. Click to edit" : "Click to connect to external content";
|
|
20102
|
-
return /* @__PURE__ */ (0,
|
|
20507
|
+
return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Tooltip, { title: titleFr, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
|
|
20103
20508
|
"button",
|
|
20104
20509
|
{
|
|
20105
20510
|
css: inputIconBtn,
|
|
@@ -20109,7 +20514,7 @@ var LabelLeadingIcon = ({
|
|
|
20109
20514
|
...props,
|
|
20110
20515
|
"data-testid": "lock-button",
|
|
20111
20516
|
children: [
|
|
20112
|
-
/* @__PURE__ */ (0,
|
|
20517
|
+
/* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
|
|
20113
20518
|
Icon,
|
|
20114
20519
|
{
|
|
20115
20520
|
icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
|
|
@@ -20129,8 +20534,8 @@ init_emotion_jsx_shim();
|
|
|
20129
20534
|
|
|
20130
20535
|
// src/components/ParameterInputs/styles/ParameterInput.styles.ts
|
|
20131
20536
|
init_emotion_jsx_shim();
|
|
20132
|
-
var
|
|
20133
|
-
var inputContainer2 =
|
|
20537
|
+
var import_react122 = require("@emotion/react");
|
|
20538
|
+
var inputContainer2 = import_react122.css`
|
|
20134
20539
|
position: relative;
|
|
20135
20540
|
scroll-margin: var(--spacing-2xl);
|
|
20136
20541
|
|
|
@@ -20143,14 +20548,14 @@ var inputContainer2 = import_react117.css`
|
|
|
20143
20548
|
}
|
|
20144
20549
|
}
|
|
20145
20550
|
`;
|
|
20146
|
-
var labelText2 =
|
|
20551
|
+
var labelText2 = import_react122.css`
|
|
20147
20552
|
align-items: center;
|
|
20148
20553
|
display: flex;
|
|
20149
20554
|
gap: var(--spacing-xs);
|
|
20150
20555
|
font-weight: var(--fw-regular);
|
|
20151
20556
|
margin: 0 0 var(--spacing-xs);
|
|
20152
20557
|
`;
|
|
20153
|
-
var input3 =
|
|
20558
|
+
var input3 = import_react122.css`
|
|
20154
20559
|
display: block;
|
|
20155
20560
|
appearance: none;
|
|
20156
20561
|
box-sizing: border-box;
|
|
@@ -20198,18 +20603,18 @@ var input3 = import_react117.css`
|
|
|
20198
20603
|
color: var(--gray-400);
|
|
20199
20604
|
}
|
|
20200
20605
|
`;
|
|
20201
|
-
var selectInput =
|
|
20606
|
+
var selectInput = import_react122.css`
|
|
20202
20607
|
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");
|
|
20203
20608
|
background-position: right var(--spacing-sm) center;
|
|
20204
20609
|
background-repeat: no-repeat;
|
|
20205
20610
|
background-size: 1rem;
|
|
20206
20611
|
padding-right: var(--spacing-xl);
|
|
20207
20612
|
`;
|
|
20208
|
-
var inputWrapper =
|
|
20613
|
+
var inputWrapper = import_react122.css`
|
|
20209
20614
|
display: flex; // used to correct overflow with chrome textarea
|
|
20210
20615
|
position: relative;
|
|
20211
20616
|
`;
|
|
20212
|
-
var inputIcon2 =
|
|
20617
|
+
var inputIcon2 = import_react122.css`
|
|
20213
20618
|
align-items: center;
|
|
20214
20619
|
background: var(--white);
|
|
20215
20620
|
border-radius: var(--rounded-md) 0 0 var(--rounded-md);
|
|
@@ -20225,7 +20630,7 @@ var inputIcon2 = import_react117.css`
|
|
|
20225
20630
|
width: var(--spacing-lg);
|
|
20226
20631
|
z-index: var(--z-10);
|
|
20227
20632
|
`;
|
|
20228
|
-
var inputToggleLabel2 =
|
|
20633
|
+
var inputToggleLabel2 = import_react122.css`
|
|
20229
20634
|
--inline-label-color: var(--typography-base);
|
|
20230
20635
|
align-items: center;
|
|
20231
20636
|
cursor: pointer;
|
|
@@ -20240,7 +20645,7 @@ var inputToggleLabel2 = import_react117.css`
|
|
|
20240
20645
|
--inline-label-color: var(--gray-400);
|
|
20241
20646
|
}
|
|
20242
20647
|
`;
|
|
20243
|
-
var toggleInput2 =
|
|
20648
|
+
var toggleInput2 = import_react122.css`
|
|
20244
20649
|
appearance: none;
|
|
20245
20650
|
border: 1px solid var(--gray-200);
|
|
20246
20651
|
background: var(--white);
|
|
@@ -20293,7 +20698,7 @@ var toggleInput2 = import_react117.css`
|
|
|
20293
20698
|
border-color: var(--gray-300);
|
|
20294
20699
|
}
|
|
20295
20700
|
`;
|
|
20296
|
-
var inlineLabel2 =
|
|
20701
|
+
var inlineLabel2 = import_react122.css`
|
|
20297
20702
|
color: var(--inline-label-color);
|
|
20298
20703
|
padding-left: var(--spacing-md);
|
|
20299
20704
|
font-size: var(--fs-sm);
|
|
@@ -20310,7 +20715,7 @@ var inlineLabel2 = import_react117.css`
|
|
|
20310
20715
|
}
|
|
20311
20716
|
}
|
|
20312
20717
|
`;
|
|
20313
|
-
var inputMenu =
|
|
20718
|
+
var inputMenu = import_react122.css`
|
|
20314
20719
|
background: none;
|
|
20315
20720
|
border: none;
|
|
20316
20721
|
padding: var(--spacing-2xs);
|
|
@@ -20318,10 +20723,10 @@ var inputMenu = import_react117.css`
|
|
|
20318
20723
|
top: calc(var(--spacing-md) * -1.2);
|
|
20319
20724
|
right: 0;
|
|
20320
20725
|
`;
|
|
20321
|
-
var inputActionItems =
|
|
20726
|
+
var inputActionItems = import_react122.css`
|
|
20322
20727
|
display: flex;
|
|
20323
20728
|
`;
|
|
20324
|
-
var inputMenuHover =
|
|
20729
|
+
var inputMenuHover = import_react122.css`
|
|
20325
20730
|
opacity: var(--opacity-50);
|
|
20326
20731
|
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
20327
20732
|
|
|
@@ -20331,11 +20736,11 @@ var inputMenuHover = import_react117.css`
|
|
|
20331
20736
|
background-color: var(--gray-200);
|
|
20332
20737
|
}
|
|
20333
20738
|
`;
|
|
20334
|
-
var textarea2 =
|
|
20739
|
+
var textarea2 = import_react122.css`
|
|
20335
20740
|
resize: vertical;
|
|
20336
20741
|
min-height: 2rem;
|
|
20337
20742
|
`;
|
|
20338
|
-
var dataConnectButton =
|
|
20743
|
+
var dataConnectButton = import_react122.css`
|
|
20339
20744
|
align-items: center;
|
|
20340
20745
|
appearance: none;
|
|
20341
20746
|
box-sizing: border-box;
|
|
@@ -20370,7 +20775,7 @@ var dataConnectButton = import_react117.css`
|
|
|
20370
20775
|
pointer-events: none;
|
|
20371
20776
|
}
|
|
20372
20777
|
`;
|
|
20373
|
-
var linkParameterBtn =
|
|
20778
|
+
var linkParameterBtn = import_react122.css`
|
|
20374
20779
|
border-radius: var(--rounded-base);
|
|
20375
20780
|
background: transparent;
|
|
20376
20781
|
border: none;
|
|
@@ -20379,7 +20784,7 @@ var linkParameterBtn = import_react117.css`
|
|
|
20379
20784
|
font-size: var(--fs-sm);
|
|
20380
20785
|
line-height: 1;
|
|
20381
20786
|
`;
|
|
20382
|
-
var linkParameterControls =
|
|
20787
|
+
var linkParameterControls = import_react122.css`
|
|
20383
20788
|
position: absolute;
|
|
20384
20789
|
inset: 0 0 0 auto;
|
|
20385
20790
|
padding: 0 var(--spacing-base);
|
|
@@ -20388,7 +20793,7 @@ var linkParameterControls = import_react117.css`
|
|
|
20388
20793
|
justify-content: center;
|
|
20389
20794
|
gap: var(--spacing-base);
|
|
20390
20795
|
`;
|
|
20391
|
-
var linkParameterInput = (withExternalLinkIcon) =>
|
|
20796
|
+
var linkParameterInput = (withExternalLinkIcon) => import_react122.css`
|
|
20392
20797
|
padding-right: calc(
|
|
20393
20798
|
${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
|
|
20394
20799
|
var(--spacing-base)
|
|
@@ -20401,7 +20806,7 @@ var linkParameterInput = (withExternalLinkIcon) => import_react117.css`
|
|
|
20401
20806
|
}
|
|
20402
20807
|
}
|
|
20403
20808
|
`;
|
|
20404
|
-
var linkParameterIcon =
|
|
20809
|
+
var linkParameterIcon = import_react122.css`
|
|
20405
20810
|
align-items: center;
|
|
20406
20811
|
color: var(--brand-secondary-3);
|
|
20407
20812
|
display: flex;
|
|
@@ -20416,7 +20821,7 @@ var linkParameterIcon = import_react117.css`
|
|
|
20416
20821
|
`;
|
|
20417
20822
|
|
|
20418
20823
|
// src/components/ParameterInputs/ParameterDataResource.tsx
|
|
20419
|
-
var
|
|
20824
|
+
var import_jsx_runtime108 = require("@emotion/react/jsx-runtime");
|
|
20420
20825
|
function ParameterDataResource({
|
|
20421
20826
|
label,
|
|
20422
20827
|
labelLeadingIcon,
|
|
@@ -20426,12 +20831,12 @@ function ParameterDataResource({
|
|
|
20426
20831
|
disabled: disabled2,
|
|
20427
20832
|
children
|
|
20428
20833
|
}) {
|
|
20429
|
-
return /* @__PURE__ */ (0,
|
|
20430
|
-
/* @__PURE__ */ (0,
|
|
20834
|
+
return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { "data-testid": "parameter-data-connect-button", children: [
|
|
20835
|
+
/* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("span", { css: labelText2, children: [
|
|
20431
20836
|
labelLeadingIcon ? labelLeadingIcon : null,
|
|
20432
20837
|
label
|
|
20433
20838
|
] }),
|
|
20434
|
-
/* @__PURE__ */ (0,
|
|
20839
|
+
/* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
|
|
20435
20840
|
"button",
|
|
20436
20841
|
{
|
|
20437
20842
|
type: "button",
|
|
@@ -20440,12 +20845,12 @@ function ParameterDataResource({
|
|
|
20440
20845
|
disabled: disabled2,
|
|
20441
20846
|
onClick: onConnectDatasource,
|
|
20442
20847
|
children: [
|
|
20443
|
-
/* @__PURE__ */ (0,
|
|
20848
|
+
/* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
|
|
20444
20849
|
children
|
|
20445
20850
|
]
|
|
20446
20851
|
}
|
|
20447
20852
|
),
|
|
20448
|
-
caption ? /* @__PURE__ */ (0,
|
|
20853
|
+
caption ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Caption, { children: caption }) : null
|
|
20449
20854
|
] });
|
|
20450
20855
|
}
|
|
20451
20856
|
|
|
@@ -20454,20 +20859,20 @@ init_emotion_jsx_shim();
|
|
|
20454
20859
|
|
|
20455
20860
|
// src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
|
|
20456
20861
|
init_emotion_jsx_shim();
|
|
20457
|
-
var
|
|
20458
|
-
var ParameterDrawerHeaderContainer =
|
|
20862
|
+
var import_react123 = require("@emotion/react");
|
|
20863
|
+
var ParameterDrawerHeaderContainer = import_react123.css`
|
|
20459
20864
|
align-items: center;
|
|
20460
20865
|
display: flex;
|
|
20461
20866
|
gap: var(--spacing-base);
|
|
20462
20867
|
justify-content: space-between;
|
|
20463
20868
|
margin-bottom: var(--spacing-sm);
|
|
20464
20869
|
`;
|
|
20465
|
-
var ParameterDrawerHeaderTitleGroup =
|
|
20870
|
+
var ParameterDrawerHeaderTitleGroup = import_react123.css`
|
|
20466
20871
|
align-items: center;
|
|
20467
20872
|
display: flex;
|
|
20468
20873
|
gap: var(--spacing-sm);
|
|
20469
20874
|
`;
|
|
20470
|
-
var ParameterDrawerHeaderTitle =
|
|
20875
|
+
var ParameterDrawerHeaderTitle = import_react123.css`
|
|
20471
20876
|
text-overflow: ellipsis;
|
|
20472
20877
|
white-space: nowrap;
|
|
20473
20878
|
overflow: hidden;
|
|
@@ -20475,12 +20880,12 @@ var ParameterDrawerHeaderTitle = import_react118.css`
|
|
|
20475
20880
|
`;
|
|
20476
20881
|
|
|
20477
20882
|
// src/components/ParameterInputs/ParameterDrawerHeader.tsx
|
|
20478
|
-
var
|
|
20883
|
+
var import_jsx_runtime109 = require("@emotion/react/jsx-runtime");
|
|
20479
20884
|
var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
|
|
20480
|
-
return /* @__PURE__ */ (0,
|
|
20481
|
-
/* @__PURE__ */ (0,
|
|
20885
|
+
return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { css: ParameterDrawerHeaderContainer, children: [
|
|
20886
|
+
/* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("header", { css: ParameterDrawerHeaderTitleGroup, children: [
|
|
20482
20887
|
iconBeforeTitle,
|
|
20483
|
-
/* @__PURE__ */ (0,
|
|
20888
|
+
/* @__PURE__ */ (0, import_jsx_runtime109.jsx)(Heading2, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
|
|
20484
20889
|
] }),
|
|
20485
20890
|
children
|
|
20486
20891
|
] });
|
|
@@ -20488,12 +20893,12 @@ var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
|
|
|
20488
20893
|
|
|
20489
20894
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
20490
20895
|
init_emotion_jsx_shim();
|
|
20491
|
-
var
|
|
20896
|
+
var import_react125 = require("react");
|
|
20492
20897
|
|
|
20493
20898
|
// src/components/ParameterInputs/styles/ParameterGroup.styles.ts
|
|
20494
20899
|
init_emotion_jsx_shim();
|
|
20495
|
-
var
|
|
20496
|
-
var fieldsetStyles =
|
|
20900
|
+
var import_react124 = require("@emotion/react");
|
|
20901
|
+
var fieldsetStyles = import_react124.css`
|
|
20497
20902
|
&:disabled,
|
|
20498
20903
|
[readonly] {
|
|
20499
20904
|
pointer-events: none;
|
|
@@ -20504,7 +20909,7 @@ var fieldsetStyles = import_react119.css`
|
|
|
20504
20909
|
}
|
|
20505
20910
|
}
|
|
20506
20911
|
`;
|
|
20507
|
-
var fieldsetLegend2 =
|
|
20912
|
+
var fieldsetLegend2 = import_react124.css`
|
|
20508
20913
|
display: block;
|
|
20509
20914
|
font-weight: var(--fw-medium);
|
|
20510
20915
|
margin-bottom: var(--spacing-sm);
|
|
@@ -20512,11 +20917,11 @@ var fieldsetLegend2 = import_react119.css`
|
|
|
20512
20917
|
`;
|
|
20513
20918
|
|
|
20514
20919
|
// src/components/ParameterInputs/ParameterGroup.tsx
|
|
20515
|
-
var
|
|
20516
|
-
var ParameterGroup = (0,
|
|
20920
|
+
var import_jsx_runtime110 = require("@emotion/react/jsx-runtime");
|
|
20921
|
+
var ParameterGroup = (0, import_react125.forwardRef)(
|
|
20517
20922
|
({ legend, isDisabled, children, ...props }, ref) => {
|
|
20518
|
-
return /* @__PURE__ */ (0,
|
|
20519
|
-
/* @__PURE__ */ (0,
|
|
20923
|
+
return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
|
|
20924
|
+
/* @__PURE__ */ (0, import_jsx_runtime110.jsx)("legend", { css: fieldsetLegend2, children: legend }),
|
|
20520
20925
|
children
|
|
20521
20926
|
] });
|
|
20522
20927
|
}
|
|
@@ -20524,24 +20929,24 @@ var ParameterGroup = (0, import_react120.forwardRef)(
|
|
|
20524
20929
|
|
|
20525
20930
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
20526
20931
|
init_emotion_jsx_shim();
|
|
20527
|
-
var
|
|
20932
|
+
var import_react132 = require("react");
|
|
20528
20933
|
|
|
20529
20934
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
20530
20935
|
init_emotion_jsx_shim();
|
|
20531
|
-
var
|
|
20936
|
+
var import_react127 = require("react");
|
|
20532
20937
|
var import_react_dom2 = require("react-dom");
|
|
20533
20938
|
|
|
20534
20939
|
// src/components/ParameterInputs/styles/ParameterImage.styles.ts
|
|
20535
20940
|
init_emotion_jsx_shim();
|
|
20536
|
-
var
|
|
20537
|
-
var previewWrapper =
|
|
20941
|
+
var import_react126 = require("@emotion/react");
|
|
20942
|
+
var previewWrapper = import_react126.css`
|
|
20538
20943
|
margin-top: var(--spacing-xs);
|
|
20539
20944
|
background: var(--gray-50);
|
|
20540
20945
|
padding: var(--spacing-sm);
|
|
20541
20946
|
border: solid 1px var(--gray-300);
|
|
20542
20947
|
border-radius: var(--rounded-sm);
|
|
20543
20948
|
`;
|
|
20544
|
-
var previewLink =
|
|
20949
|
+
var previewLink = import_react126.css`
|
|
20545
20950
|
display: block;
|
|
20546
20951
|
width: 100%;
|
|
20547
20952
|
|
|
@@ -20549,7 +20954,7 @@ var previewLink = import_react121.css`
|
|
|
20549
20954
|
max-height: 9rem;
|
|
20550
20955
|
}
|
|
20551
20956
|
`;
|
|
20552
|
-
var previewModalWrapper =
|
|
20957
|
+
var previewModalWrapper = import_react126.css`
|
|
20553
20958
|
background: var(--gray-50);
|
|
20554
20959
|
display: flex;
|
|
20555
20960
|
height: 100%;
|
|
@@ -20558,7 +20963,7 @@ var previewModalWrapper = import_react121.css`
|
|
|
20558
20963
|
border: solid 1px var(--gray-300);
|
|
20559
20964
|
border-radius: var(--rounded-sm);
|
|
20560
20965
|
`;
|
|
20561
|
-
var previewModalImage =
|
|
20966
|
+
var previewModalImage = import_react126.css`
|
|
20562
20967
|
display: flex;
|
|
20563
20968
|
height: 100%;
|
|
20564
20969
|
width: 100%;
|
|
@@ -20570,32 +20975,32 @@ var previewModalImage = import_react121.css`
|
|
|
20570
20975
|
`;
|
|
20571
20976
|
|
|
20572
20977
|
// src/components/ParameterInputs/ParameterImagePreview.tsx
|
|
20573
|
-
var
|
|
20978
|
+
var import_jsx_runtime111 = require("@emotion/react/jsx-runtime");
|
|
20574
20979
|
function ParameterImagePreview({ imageSrc }) {
|
|
20575
|
-
const [showModal, setShowModal] = (0,
|
|
20576
|
-
return imageSrc ? /* @__PURE__ */ (0,
|
|
20577
|
-
/* @__PURE__ */ (0,
|
|
20578
|
-
/* @__PURE__ */ (0,
|
|
20980
|
+
const [showModal, setShowModal] = (0, import_react127.useState)(false);
|
|
20981
|
+
return imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { css: previewWrapper, children: [
|
|
20982
|
+
/* @__PURE__ */ (0, import_jsx_runtime111.jsx)(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
|
|
20983
|
+
/* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
|
|
20579
20984
|
"button",
|
|
20580
20985
|
{
|
|
20581
20986
|
css: previewLink,
|
|
20582
20987
|
onClick: () => {
|
|
20583
20988
|
setShowModal(true);
|
|
20584
20989
|
},
|
|
20585
|
-
children: /* @__PURE__ */ (0,
|
|
20990
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
|
|
20586
20991
|
}
|
|
20587
20992
|
)
|
|
20588
20993
|
] }) : null;
|
|
20589
20994
|
}
|
|
20590
20995
|
var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
20591
|
-
return open ? /* @__PURE__ */ (0,
|
|
20592
|
-
/* @__PURE__ */ (0,
|
|
20996
|
+
return open ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_jsx_runtime111.Fragment, { children: (0, import_react_dom2.createPortal)(
|
|
20997
|
+
/* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
|
|
20593
20998
|
Modal,
|
|
20594
20999
|
{
|
|
20595
21000
|
header: "Image Preview",
|
|
20596
21001
|
onRequestClose,
|
|
20597
|
-
buttonGroup: /* @__PURE__ */ (0,
|
|
20598
|
-
children: /* @__PURE__ */ (0,
|
|
21002
|
+
buttonGroup: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
|
|
21003
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { css: previewModalWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
|
|
20599
21004
|
}
|
|
20600
21005
|
),
|
|
20601
21006
|
document.body
|
|
@@ -20604,27 +21009,27 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
|
|
|
20604
21009
|
|
|
20605
21010
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
20606
21011
|
init_emotion_jsx_shim();
|
|
20607
|
-
var
|
|
20608
|
-
var
|
|
21012
|
+
var import_react130 = require("@emotion/react");
|
|
21013
|
+
var import_react131 = require("react");
|
|
20609
21014
|
|
|
20610
21015
|
// src/components/ParameterInputs/ParameterLabel.tsx
|
|
20611
21016
|
init_emotion_jsx_shim();
|
|
20612
|
-
var
|
|
21017
|
+
var import_jsx_runtime112 = require("@emotion/react/jsx-runtime");
|
|
20613
21018
|
var ParameterLabel = ({ id, asSpan, children, ...props }) => {
|
|
20614
|
-
return !asSpan ? /* @__PURE__ */ (0,
|
|
21019
|
+
return !asSpan ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("span", { "aria-labelledby": id, css: labelText2, children });
|
|
20615
21020
|
};
|
|
20616
21021
|
|
|
20617
21022
|
// src/components/ParameterInputs/ParameterMenuButton.tsx
|
|
20618
21023
|
init_emotion_jsx_shim();
|
|
20619
|
-
var
|
|
20620
|
-
var
|
|
20621
|
-
var ParameterMenuButton = (0,
|
|
21024
|
+
var import_react128 = require("react");
|
|
21025
|
+
var import_jsx_runtime113 = require("@emotion/react/jsx-runtime");
|
|
21026
|
+
var ParameterMenuButton = (0, import_react128.forwardRef)(
|
|
20622
21027
|
({ label, children }, ref) => {
|
|
20623
|
-
return /* @__PURE__ */ (0,
|
|
21028
|
+
return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
|
|
20624
21029
|
Menu,
|
|
20625
21030
|
{
|
|
20626
21031
|
menuLabel: `${label} menu`,
|
|
20627
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
21032
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
|
|
20628
21033
|
"button",
|
|
20629
21034
|
{
|
|
20630
21035
|
className: "parameter-menu",
|
|
@@ -20632,7 +21037,7 @@ var ParameterMenuButton = (0, import_react123.forwardRef)(
|
|
|
20632
21037
|
type: "button",
|
|
20633
21038
|
"aria-label": `${label} options`,
|
|
20634
21039
|
ref,
|
|
20635
|
-
children: /* @__PURE__ */ (0,
|
|
21040
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
|
|
20636
21041
|
}
|
|
20637
21042
|
),
|
|
20638
21043
|
children
|
|
@@ -20643,14 +21048,14 @@ var ParameterMenuButton = (0, import_react123.forwardRef)(
|
|
|
20643
21048
|
|
|
20644
21049
|
// src/components/ParameterInputs/styles/ParameterShell.styles.ts
|
|
20645
21050
|
init_emotion_jsx_shim();
|
|
20646
|
-
var
|
|
20647
|
-
var emptyParameterShell =
|
|
21051
|
+
var import_react129 = require("@emotion/react");
|
|
21052
|
+
var emptyParameterShell = import_react129.css`
|
|
20648
21053
|
border-radius: var(--rounded-sm);
|
|
20649
21054
|
flex-grow: 1;
|
|
20650
21055
|
position: relative;
|
|
20651
21056
|
max-width: 100%;
|
|
20652
21057
|
`;
|
|
20653
|
-
var emptyParameterShellText =
|
|
21058
|
+
var emptyParameterShellText = import_react129.css`
|
|
20654
21059
|
background: var(--brand-secondary-6);
|
|
20655
21060
|
border-radius: var(--rounded-sm);
|
|
20656
21061
|
padding: var(--spacing-sm);
|
|
@@ -20658,7 +21063,7 @@ var emptyParameterShellText = import_react124.css`
|
|
|
20658
21063
|
font-size: var(--fs-sm);
|
|
20659
21064
|
margin: 0;
|
|
20660
21065
|
`;
|
|
20661
|
-
var overrideMarker =
|
|
21066
|
+
var overrideMarker = import_react129.css`
|
|
20662
21067
|
border-radius: var(--rounded-sm);
|
|
20663
21068
|
border: 10px solid var(--gray-300);
|
|
20664
21069
|
border-left-color: transparent;
|
|
@@ -20669,7 +21074,7 @@ var overrideMarker = import_react124.css`
|
|
|
20669
21074
|
`;
|
|
20670
21075
|
|
|
20671
21076
|
// src/components/ParameterInputs/ParameterShell.tsx
|
|
20672
|
-
var
|
|
21077
|
+
var import_jsx_runtime114 = require("@emotion/react/jsx-runtime");
|
|
20673
21078
|
var extractParameterProps = (props) => {
|
|
20674
21079
|
const {
|
|
20675
21080
|
id,
|
|
@@ -20729,36 +21134,36 @@ var ParameterShell = ({
|
|
|
20729
21134
|
isParameterGroup = false,
|
|
20730
21135
|
...props
|
|
20731
21136
|
}) => {
|
|
20732
|
-
const [manualErrorMessage, setManualErrorMessage] = (0,
|
|
21137
|
+
const [manualErrorMessage, setManualErrorMessage] = (0, import_react131.useState)(void 0);
|
|
20733
21138
|
const setErrorMessage = (message) => setManualErrorMessage(message);
|
|
20734
21139
|
const errorMessaging = errorMessage || manualErrorMessage;
|
|
20735
|
-
return /* @__PURE__ */ (0,
|
|
20736
|
-
hiddenLabel || title2 ? null : /* @__PURE__ */ (0,
|
|
21140
|
+
return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { css: inputContainer2, ...props, id, children: [
|
|
21141
|
+
hiddenLabel || title2 ? null : /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(ParameterLabel, { id, css: labelText2, children: [
|
|
20737
21142
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
20738
21143
|
label,
|
|
20739
21144
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
20740
21145
|
] }),
|
|
20741
|
-
!title2 ? null : /* @__PURE__ */ (0,
|
|
21146
|
+
!title2 ? null : /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(ParameterLabel, { id, asSpan: true, children: [
|
|
20742
21147
|
labelLeadingIcon != null ? labelLeadingIcon : null,
|
|
20743
21148
|
title2,
|
|
20744
21149
|
labelTrailingIcon != null ? labelTrailingIcon : null
|
|
20745
21150
|
] }),
|
|
20746
|
-
/* @__PURE__ */ (0,
|
|
20747
|
-
actionItems ? /* @__PURE__ */ (0,
|
|
21151
|
+
/* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { css: inputWrapper, children: [
|
|
21152
|
+
actionItems ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
|
|
20748
21153
|
"div",
|
|
20749
21154
|
{
|
|
20750
21155
|
css: [
|
|
20751
21156
|
inputMenu,
|
|
20752
21157
|
inputActionItems,
|
|
20753
|
-
menuItems ?
|
|
21158
|
+
menuItems ? import_react130.css`
|
|
20754
21159
|
right: var(--spacing-md);
|
|
20755
21160
|
` : void 0
|
|
20756
21161
|
],
|
|
20757
21162
|
children: actionItems
|
|
20758
21163
|
}
|
|
20759
21164
|
) : null,
|
|
20760
|
-
menuItems ? /* @__PURE__ */ (0,
|
|
20761
|
-
/* @__PURE__ */ (0,
|
|
21165
|
+
menuItems ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
|
|
21166
|
+
/* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
|
|
20762
21167
|
ParameterShellContext.Provider,
|
|
20763
21168
|
{
|
|
20764
21169
|
value: {
|
|
@@ -20768,14 +21173,14 @@ var ParameterShell = ({
|
|
|
20768
21173
|
errorMessage: errorMessaging,
|
|
20769
21174
|
handleManuallySetErrorMessage: (message) => setErrorMessage(message)
|
|
20770
21175
|
},
|
|
20771
|
-
children: isParameterGroup ? /* @__PURE__ */ (0,
|
|
21176
|
+
children: isParameterGroup ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(ParameterShellPlaceholder, { children: [
|
|
20772
21177
|
children,
|
|
20773
|
-
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ (0,
|
|
21178
|
+
hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
|
|
20774
21179
|
] })
|
|
20775
21180
|
}
|
|
20776
21181
|
)
|
|
20777
21182
|
] }),
|
|
20778
|
-
/* @__PURE__ */ (0,
|
|
21183
|
+
/* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
|
|
20779
21184
|
FieldMessage,
|
|
20780
21185
|
{
|
|
20781
21186
|
helperMessageTestId: captionTestId,
|
|
@@ -20789,27 +21194,27 @@ var ParameterShell = ({
|
|
|
20789
21194
|
] });
|
|
20790
21195
|
};
|
|
20791
21196
|
var ParameterShellPlaceholder = ({ children }) => {
|
|
20792
|
-
return /* @__PURE__ */ (0,
|
|
21197
|
+
return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { css: emptyParameterShell, children });
|
|
20793
21198
|
};
|
|
20794
|
-
var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0,
|
|
21199
|
+
var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("span", { hidden: true, children: "reset overridden value to default" }) }) });
|
|
20795
21200
|
|
|
20796
21201
|
// src/components/ParameterInputs/ParameterImage.tsx
|
|
20797
|
-
var
|
|
20798
|
-
var ParameterImage = (0,
|
|
21202
|
+
var import_jsx_runtime115 = require("@emotion/react/jsx-runtime");
|
|
21203
|
+
var ParameterImage = (0, import_react132.forwardRef)(
|
|
20799
21204
|
({ children, ...props }, ref) => {
|
|
20800
21205
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
20801
|
-
return /* @__PURE__ */ (0,
|
|
20802
|
-
/* @__PURE__ */ (0,
|
|
21206
|
+
return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
|
|
21207
|
+
/* @__PURE__ */ (0, import_jsx_runtime115.jsx)(ParameterImageInner, { ref, ...innerProps }),
|
|
20803
21208
|
children
|
|
20804
21209
|
] });
|
|
20805
21210
|
}
|
|
20806
21211
|
);
|
|
20807
|
-
var ParameterImageInner = (0,
|
|
21212
|
+
var ParameterImageInner = (0, import_react132.forwardRef)((props, ref) => {
|
|
20808
21213
|
const { value } = props;
|
|
20809
21214
|
const { id, label, hiddenLabel, errorMessage } = useParameterShell();
|
|
20810
|
-
const deferredValue = (0,
|
|
20811
|
-
return /* @__PURE__ */ (0,
|
|
20812
|
-
/* @__PURE__ */ (0,
|
|
21215
|
+
const deferredValue = (0, import_react132.useDeferredValue)(value);
|
|
21216
|
+
return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(import_jsx_runtime115.Fragment, { children: [
|
|
21217
|
+
/* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
|
|
20813
21218
|
"input",
|
|
20814
21219
|
{
|
|
20815
21220
|
css: input3,
|
|
@@ -20821,22 +21226,22 @@ var ParameterImageInner = (0, import_react127.forwardRef)((props, ref) => {
|
|
|
20821
21226
|
...props
|
|
20822
21227
|
}
|
|
20823
21228
|
),
|
|
20824
|
-
errorMessage || props.disablePreview ? null : /* @__PURE__ */ (0,
|
|
21229
|
+
errorMessage || props.disablePreview ? null : /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(ParameterImagePreview, { imageSrc: deferredValue })
|
|
20825
21230
|
] });
|
|
20826
21231
|
});
|
|
20827
21232
|
|
|
20828
21233
|
// src/components/ParameterInputs/ParameterInput.tsx
|
|
20829
21234
|
init_emotion_jsx_shim();
|
|
20830
|
-
var
|
|
20831
|
-
var
|
|
20832
|
-
var ParameterInput = (0,
|
|
21235
|
+
var import_react133 = require("react");
|
|
21236
|
+
var import_jsx_runtime116 = require("@emotion/react/jsx-runtime");
|
|
21237
|
+
var ParameterInput = (0, import_react133.forwardRef)((props, ref) => {
|
|
20833
21238
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
20834
|
-
return /* @__PURE__ */ (0,
|
|
21239
|
+
return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(ParameterInputInner, { ref, ...innerProps }) });
|
|
20835
21240
|
});
|
|
20836
|
-
var ParameterInputInner = (0,
|
|
21241
|
+
var ParameterInputInner = (0, import_react133.forwardRef)(
|
|
20837
21242
|
({ ...props }, ref) => {
|
|
20838
21243
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
20839
|
-
return /* @__PURE__ */ (0,
|
|
21244
|
+
return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
|
|
20840
21245
|
"input",
|
|
20841
21246
|
{
|
|
20842
21247
|
css: input3,
|
|
@@ -20853,19 +21258,19 @@ var ParameterInputInner = (0, import_react128.forwardRef)(
|
|
|
20853
21258
|
|
|
20854
21259
|
// src/components/ParameterInputs/ParameterLink.tsx
|
|
20855
21260
|
init_emotion_jsx_shim();
|
|
20856
|
-
var
|
|
20857
|
-
var
|
|
20858
|
-
var ParameterLink = (0,
|
|
21261
|
+
var import_react134 = require("react");
|
|
21262
|
+
var import_jsx_runtime117 = require("@emotion/react/jsx-runtime");
|
|
21263
|
+
var ParameterLink = (0, import_react134.forwardRef)(
|
|
20859
21264
|
({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
|
|
20860
21265
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
20861
|
-
return /* @__PURE__ */ (0,
|
|
21266
|
+
return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
|
|
20862
21267
|
ParameterShell,
|
|
20863
21268
|
{
|
|
20864
21269
|
"data-testid": "link-parameter-editor",
|
|
20865
21270
|
...shellProps,
|
|
20866
21271
|
label: innerProps.value ? shellProps.label : "",
|
|
20867
21272
|
title: !innerProps.value ? shellProps.label : void 0,
|
|
20868
|
-
children: /* @__PURE__ */ (0,
|
|
21273
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
|
|
20869
21274
|
ParameterLinkInner,
|
|
20870
21275
|
{
|
|
20871
21276
|
onConnectLink,
|
|
@@ -20878,13 +21283,13 @@ var ParameterLink = (0, import_react129.forwardRef)(
|
|
|
20878
21283
|
);
|
|
20879
21284
|
}
|
|
20880
21285
|
);
|
|
20881
|
-
var ParameterLinkInner = (0,
|
|
21286
|
+
var ParameterLinkInner = (0, import_react134.forwardRef)(
|
|
20882
21287
|
({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
|
|
20883
21288
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
20884
21289
|
if (!props.value)
|
|
20885
|
-
return /* @__PURE__ */ (0,
|
|
20886
|
-
return /* @__PURE__ */ (0,
|
|
20887
|
-
/* @__PURE__ */ (0,
|
|
21290
|
+
return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
|
|
21291
|
+
return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { css: inputWrapper, children: [
|
|
21292
|
+
/* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
|
|
20888
21293
|
"input",
|
|
20889
21294
|
{
|
|
20890
21295
|
type: "text",
|
|
@@ -20896,8 +21301,8 @@ var ParameterLinkInner = (0, import_react129.forwardRef)(
|
|
|
20896
21301
|
...props
|
|
20897
21302
|
}
|
|
20898
21303
|
),
|
|
20899
|
-
/* @__PURE__ */ (0,
|
|
20900
|
-
/* @__PURE__ */ (0,
|
|
21304
|
+
/* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("div", { css: linkParameterControls, children: [
|
|
21305
|
+
/* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
|
|
20901
21306
|
"button",
|
|
20902
21307
|
{
|
|
20903
21308
|
type: "button",
|
|
@@ -20908,7 +21313,7 @@ var ParameterLinkInner = (0, import_react129.forwardRef)(
|
|
|
20908
21313
|
children: "edit"
|
|
20909
21314
|
}
|
|
20910
21315
|
),
|
|
20911
|
-
externalLink ? /* @__PURE__ */ (0,
|
|
21316
|
+
externalLink ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
|
|
20912
21317
|
"a",
|
|
20913
21318
|
{
|
|
20914
21319
|
href: externalLink,
|
|
@@ -20916,7 +21321,7 @@ var ParameterLinkInner = (0, import_react129.forwardRef)(
|
|
|
20916
21321
|
title: "Open link in new tab",
|
|
20917
21322
|
target: "_blank",
|
|
20918
21323
|
rel: "noopener noreferrer",
|
|
20919
|
-
children: /* @__PURE__ */ (0,
|
|
21324
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
|
|
20920
21325
|
}
|
|
20921
21326
|
) : null
|
|
20922
21327
|
] })
|
|
@@ -20926,15 +21331,15 @@ var ParameterLinkInner = (0, import_react129.forwardRef)(
|
|
|
20926
21331
|
|
|
20927
21332
|
// src/components/ParameterInputs/ParameterMultiSelect.tsx
|
|
20928
21333
|
init_emotion_jsx_shim();
|
|
20929
|
-
var
|
|
21334
|
+
var import_jsx_runtime118 = require("@emotion/react/jsx-runtime");
|
|
20930
21335
|
var ParameterMultiSelect = ({ disabled: disabled2 = false, ...props }) => {
|
|
20931
21336
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
20932
|
-
return /* @__PURE__ */ (0,
|
|
21337
|
+
return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
|
|
20933
21338
|
};
|
|
20934
21339
|
var ParameterMultiSelectInner = (props) => {
|
|
20935
21340
|
var _a;
|
|
20936
21341
|
const { id, label } = useParameterShell();
|
|
20937
|
-
return /* @__PURE__ */ (0,
|
|
21342
|
+
return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
|
|
20938
21343
|
InputComboBox,
|
|
20939
21344
|
{
|
|
20940
21345
|
menuPortalTarget: document.body,
|
|
@@ -20985,7 +21390,7 @@ var ParameterMultiSelectInner = (props) => {
|
|
|
20985
21390
|
|
|
20986
21391
|
// src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
|
|
20987
21392
|
init_emotion_jsx_shim();
|
|
20988
|
-
var
|
|
21393
|
+
var import_jsx_runtime119 = require("@emotion/react/jsx-runtime");
|
|
20989
21394
|
var ParameterNameAndPublicIdInput = ({
|
|
20990
21395
|
id,
|
|
20991
21396
|
onBlur,
|
|
@@ -21011,8 +21416,8 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
21011
21416
|
navigator.clipboard.writeText(values[publicIdFieldName]);
|
|
21012
21417
|
};
|
|
21013
21418
|
autoFocus == null ? void 0 : autoFocus();
|
|
21014
|
-
return /* @__PURE__ */ (0,
|
|
21015
|
-
/* @__PURE__ */ (0,
|
|
21419
|
+
return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_jsx_runtime119.Fragment, { children: [
|
|
21420
|
+
/* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
|
|
21016
21421
|
ParameterInput,
|
|
21017
21422
|
{
|
|
21018
21423
|
id: nameIdField,
|
|
@@ -21031,7 +21436,7 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
21031
21436
|
value: values[nameIdField]
|
|
21032
21437
|
}
|
|
21033
21438
|
),
|
|
21034
|
-
/* @__PURE__ */ (0,
|
|
21439
|
+
/* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
|
|
21035
21440
|
ParameterInput,
|
|
21036
21441
|
{
|
|
21037
21442
|
id: publicIdFieldName,
|
|
@@ -21045,11 +21450,11 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
21045
21450
|
caption: !publicIdError ? publicIdCaption : void 0,
|
|
21046
21451
|
placeholder: publicIdPlaceholderText,
|
|
21047
21452
|
errorMessage: publicIdError,
|
|
21048
|
-
menuItems: /* @__PURE__ */ (0,
|
|
21453
|
+
menuItems: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
|
|
21049
21454
|
MenuItem,
|
|
21050
21455
|
{
|
|
21051
21456
|
disabled: !values[publicIdFieldName],
|
|
21052
|
-
icon: /* @__PURE__ */ (0,
|
|
21457
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Icon, { icon: "path-trim", iconColor: "currentColor" }),
|
|
21053
21458
|
onClick: handleCopyPidFieldValue,
|
|
21054
21459
|
children: "Copy"
|
|
21055
21460
|
}
|
|
@@ -21057,13 +21462,13 @@ var ParameterNameAndPublicIdInput = ({
|
|
|
21057
21462
|
value: values[publicIdFieldName]
|
|
21058
21463
|
}
|
|
21059
21464
|
),
|
|
21060
|
-
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ (0,
|
|
21465
|
+
(warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(Callout, { type: "caution", children: warnOverLength.message }) : null
|
|
21061
21466
|
] });
|
|
21062
21467
|
};
|
|
21063
21468
|
|
|
21064
21469
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
21065
21470
|
init_emotion_jsx_shim();
|
|
21066
|
-
var
|
|
21471
|
+
var import_react141 = require("@emotion/react");
|
|
21067
21472
|
var import_list3 = require("@lexical/list");
|
|
21068
21473
|
var import_markdown = require("@lexical/markdown");
|
|
21069
21474
|
var import_LexicalComposer = require("@lexical/react/LexicalComposer");
|
|
@@ -21170,7 +21575,7 @@ var getLabelForElement = (type) => {
|
|
|
21170
21575
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
21171
21576
|
var import_fast_equals2 = require("fast-equals");
|
|
21172
21577
|
var import_lexical6 = require("lexical");
|
|
21173
|
-
var
|
|
21578
|
+
var import_react142 = require("react");
|
|
21174
21579
|
|
|
21175
21580
|
// src/components/ParameterInputs/rich-text/CustomCodeNode.ts
|
|
21176
21581
|
init_emotion_jsx_shim();
|
|
@@ -21191,13 +21596,13 @@ CustomCodeNode.importDOM = function() {
|
|
|
21191
21596
|
// src/components/ParameterInputs/rich-text/DisableStylesPlugin.ts
|
|
21192
21597
|
init_emotion_jsx_shim();
|
|
21193
21598
|
var import_LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
|
|
21194
|
-
var
|
|
21599
|
+
var import_utils3 = require("@lexical/utils");
|
|
21195
21600
|
var import_lexical = require("lexical");
|
|
21196
|
-
var
|
|
21601
|
+
var import_react135 = require("react");
|
|
21197
21602
|
function DisableStylesPlugin() {
|
|
21198
21603
|
const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
|
|
21199
|
-
(0,
|
|
21200
|
-
return (0,
|
|
21604
|
+
(0, import_react135.useEffect)(() => {
|
|
21605
|
+
return (0, import_utils3.mergeRegister)(
|
|
21201
21606
|
// Disable text alignment on paragraph nodes
|
|
21202
21607
|
editor.registerNodeTransform(import_lexical.ParagraphNode, (node) => {
|
|
21203
21608
|
if (node.getFormatType() !== "") {
|
|
@@ -21391,13 +21796,13 @@ var codeElement = import_css2.css`
|
|
|
21391
21796
|
|
|
21392
21797
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
21393
21798
|
init_emotion_jsx_shim();
|
|
21394
|
-
var
|
|
21799
|
+
var import_react136 = require("@emotion/react");
|
|
21395
21800
|
var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
|
|
21396
21801
|
var import_LexicalNodeEventPlugin = require("@lexical/react/LexicalNodeEventPlugin");
|
|
21397
|
-
var
|
|
21802
|
+
var import_utils4 = require("@lexical/utils");
|
|
21398
21803
|
var import_fast_equals = require("fast-equals");
|
|
21399
21804
|
var import_lexical3 = require("lexical");
|
|
21400
|
-
var
|
|
21805
|
+
var import_react137 = require("react");
|
|
21401
21806
|
|
|
21402
21807
|
// src/components/ParameterInputs/rich-text/utils.ts
|
|
21403
21808
|
init_emotion_jsx_shim();
|
|
@@ -21415,8 +21820,7 @@ var getElementNodesInSelection = (selection) => {
|
|
|
21415
21820
|
};
|
|
21416
21821
|
var getAncestor = (node, predicate) => {
|
|
21417
21822
|
let parent = node;
|
|
21418
|
-
while (parent !== null && (parent = parent.getParent()) !== null && !predicate(parent))
|
|
21419
|
-
;
|
|
21823
|
+
while (parent !== null && (parent = parent.getParent()) !== null && !predicate(parent)) ;
|
|
21420
21824
|
return parent;
|
|
21421
21825
|
};
|
|
21422
21826
|
var getSelectedNode = (selection) => {
|
|
@@ -21436,7 +21840,7 @@ var getSelectedNode = (selection) => {
|
|
|
21436
21840
|
};
|
|
21437
21841
|
|
|
21438
21842
|
// src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
|
|
21439
|
-
var
|
|
21843
|
+
var import_jsx_runtime120 = require("@emotion/react/jsx-runtime");
|
|
21440
21844
|
var isProjectMapLinkValue = (value) => {
|
|
21441
21845
|
return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
|
|
21442
21846
|
value.nodeId && value.path && value.projectMapId
|
|
@@ -21459,7 +21863,7 @@ var guessLinkTypeFromPath = (path) => {
|
|
|
21459
21863
|
};
|
|
21460
21864
|
function convertAnchorElement(domNode) {
|
|
21461
21865
|
let node = null;
|
|
21462
|
-
if (!(0,
|
|
21866
|
+
if (!(0, import_utils4.isHTMLAnchorElement)(domNode)) {
|
|
21463
21867
|
return { node };
|
|
21464
21868
|
}
|
|
21465
21869
|
const textContent = domNode.textContent;
|
|
@@ -21568,7 +21972,7 @@ var LinkNode = class _LinkNode extends import_lexical3.ElementNode {
|
|
|
21568
21972
|
element.setAttribute("href", `mailto:${this.__link.path}`);
|
|
21569
21973
|
}
|
|
21570
21974
|
}
|
|
21571
|
-
(0,
|
|
21975
|
+
(0, import_utils4.addClassNamesToElement)(element, config.theme.link);
|
|
21572
21976
|
return element;
|
|
21573
21977
|
}
|
|
21574
21978
|
updateDOM(prevNode, a) {
|
|
@@ -21723,16 +22127,16 @@ var OPEN_LINK_NODE_MODAL_COMMAND = (0, import_lexical3.createCommand)(
|
|
|
21723
22127
|
);
|
|
21724
22128
|
var LINK_POPOVER_OFFSET_X = 0;
|
|
21725
22129
|
var LINK_POPOVER_OFFSET_Y = 8;
|
|
21726
|
-
var linkPopover =
|
|
22130
|
+
var linkPopover = import_react136.css`
|
|
21727
22131
|
position: absolute;
|
|
21728
22132
|
z-index: 5;
|
|
21729
22133
|
`;
|
|
21730
|
-
var linkPopoverContainer =
|
|
22134
|
+
var linkPopoverContainer = import_react136.css`
|
|
21731
22135
|
${Popover};
|
|
21732
22136
|
align-items: center;
|
|
21733
22137
|
display: flex;
|
|
21734
22138
|
`;
|
|
21735
|
-
var linkPopoverAnchor =
|
|
22139
|
+
var linkPopoverAnchor = import_react136.css`
|
|
21736
22140
|
${link}
|
|
21737
22141
|
${linkColorDefault}
|
|
21738
22142
|
`;
|
|
@@ -21741,21 +22145,21 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
21741
22145
|
return path;
|
|
21742
22146
|
};
|
|
21743
22147
|
const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
|
|
21744
|
-
const [linkPopoverState, setLinkPopoverState] = (0,
|
|
21745
|
-
const linkPopoverElRef = (0,
|
|
21746
|
-
const [isEditorFocused, setIsEditorFocused] = (0,
|
|
21747
|
-
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0,
|
|
21748
|
-
(0,
|
|
22148
|
+
const [linkPopoverState, setLinkPopoverState] = (0, import_react137.useState)();
|
|
22149
|
+
const linkPopoverElRef = (0, import_react137.useRef)(null);
|
|
22150
|
+
const [isEditorFocused, setIsEditorFocused] = (0, import_react137.useState)(false);
|
|
22151
|
+
const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react137.useState)(false);
|
|
22152
|
+
(0, import_react137.useEffect)(() => {
|
|
21749
22153
|
if (!isEditorFocused && !isLinkPopoverFocused) {
|
|
21750
22154
|
setLinkPopoverState(void 0);
|
|
21751
22155
|
return;
|
|
21752
22156
|
}
|
|
21753
22157
|
}, [isEditorFocused, isLinkPopoverFocused]);
|
|
21754
|
-
(0,
|
|
22158
|
+
(0, import_react137.useEffect)(() => {
|
|
21755
22159
|
if (!editor.hasNodes([LinkNode])) {
|
|
21756
22160
|
throw new Error("LinkNode not registered on editor");
|
|
21757
22161
|
}
|
|
21758
|
-
return (0,
|
|
22162
|
+
return (0, import_utils4.mergeRegister)(
|
|
21759
22163
|
editor.registerCommand(
|
|
21760
22164
|
UPSERT_LINK_NODE_COMMAND,
|
|
21761
22165
|
(payload) => {
|
|
@@ -21820,7 +22224,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
21820
22224
|
)
|
|
21821
22225
|
);
|
|
21822
22226
|
}, [editor, onConnectLink]);
|
|
21823
|
-
const maybeShowLinkToolbar = (0,
|
|
22227
|
+
const maybeShowLinkToolbar = (0, import_react137.useCallback)(() => {
|
|
21824
22228
|
if (!editor.isEditable()) {
|
|
21825
22229
|
return;
|
|
21826
22230
|
}
|
|
@@ -21852,7 +22256,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
21852
22256
|
}
|
|
21853
22257
|
});
|
|
21854
22258
|
}, [editor]);
|
|
21855
|
-
(0,
|
|
22259
|
+
(0, import_react137.useEffect)(() => {
|
|
21856
22260
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
21857
22261
|
requestAnimationFrame(() => {
|
|
21858
22262
|
editorState.read(() => {
|
|
@@ -21879,8 +22283,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
21879
22283
|
});
|
|
21880
22284
|
});
|
|
21881
22285
|
};
|
|
21882
|
-
return /* @__PURE__ */ (0,
|
|
21883
|
-
/* @__PURE__ */ (0,
|
|
22286
|
+
return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(import_jsx_runtime120.Fragment, { children: [
|
|
22287
|
+
/* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
|
|
21884
22288
|
import_LexicalNodeEventPlugin.NodeEventPlugin,
|
|
21885
22289
|
{
|
|
21886
22290
|
nodeType: LinkNode,
|
|
@@ -21890,7 +22294,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
21890
22294
|
}
|
|
21891
22295
|
}
|
|
21892
22296
|
),
|
|
21893
|
-
linkPopoverState ? /* @__PURE__ */ (0,
|
|
22297
|
+
linkPopoverState ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
|
|
21894
22298
|
"div",
|
|
21895
22299
|
{
|
|
21896
22300
|
css: linkPopover,
|
|
@@ -21899,8 +22303,8 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
21899
22303
|
top: linkPopoverState.position.y
|
|
21900
22304
|
},
|
|
21901
22305
|
ref: linkPopoverElRef,
|
|
21902
|
-
children: /* @__PURE__ */ (0,
|
|
21903
|
-
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0,
|
|
22306
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { css: linkPopoverContainer, children: [
|
|
22307
|
+
linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
|
|
21904
22308
|
"a",
|
|
21905
22309
|
{
|
|
21906
22310
|
href: parsePath(
|
|
@@ -21912,7 +22316,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
21912
22316
|
children: parsePath(linkPopoverState.node.__link.path)
|
|
21913
22317
|
}
|
|
21914
22318
|
),
|
|
21915
|
-
/* @__PURE__ */ (0,
|
|
22319
|
+
/* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
|
|
21916
22320
|
Button,
|
|
21917
22321
|
{
|
|
21918
22322
|
size: "xs",
|
|
@@ -21920,7 +22324,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
|
|
|
21920
22324
|
onEditLinkNode(linkPopoverState.node);
|
|
21921
22325
|
},
|
|
21922
22326
|
buttonType: "ghost",
|
|
21923
|
-
children: /* @__PURE__ */ (0,
|
|
22327
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
|
|
21924
22328
|
}
|
|
21925
22329
|
)
|
|
21926
22330
|
] })
|
|
@@ -21940,8 +22344,8 @@ var import_list = require("@lexical/list");
|
|
|
21940
22344
|
var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
|
|
21941
22345
|
var import_LexicalTabIndentationPlugin = require("@lexical/react/LexicalTabIndentationPlugin");
|
|
21942
22346
|
var import_lexical4 = require("lexical");
|
|
21943
|
-
var
|
|
21944
|
-
var
|
|
22347
|
+
var import_react138 = require("react");
|
|
22348
|
+
var import_jsx_runtime121 = require("@emotion/react/jsx-runtime");
|
|
21945
22349
|
function isIndentPermitted(maxDepth) {
|
|
21946
22350
|
const selection = (0, import_lexical4.$getSelection)();
|
|
21947
22351
|
if (!(0, import_lexical4.$isRangeSelection)(selection)) {
|
|
@@ -21964,29 +22368,29 @@ function isIndentPermitted(maxDepth) {
|
|
|
21964
22368
|
}
|
|
21965
22369
|
function ListIndentPlugin({ maxDepth }) {
|
|
21966
22370
|
const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
|
|
21967
|
-
(0,
|
|
22371
|
+
(0, import_react138.useEffect)(() => {
|
|
21968
22372
|
return editor.registerCommand(
|
|
21969
22373
|
import_lexical4.INDENT_CONTENT_COMMAND,
|
|
21970
22374
|
() => !isIndentPermitted(maxDepth),
|
|
21971
22375
|
import_lexical4.COMMAND_PRIORITY_CRITICAL
|
|
21972
22376
|
);
|
|
21973
22377
|
}, [editor, maxDepth]);
|
|
21974
|
-
return /* @__PURE__ */ (0,
|
|
22378
|
+
return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_LexicalTabIndentationPlugin.TabIndentationPlugin, {});
|
|
21975
22379
|
}
|
|
21976
22380
|
|
|
21977
22381
|
// src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
|
|
21978
22382
|
init_emotion_jsx_shim();
|
|
21979
|
-
var
|
|
22383
|
+
var import_react139 = require("@emotion/react");
|
|
21980
22384
|
var import_code2 = require("@lexical/code");
|
|
21981
22385
|
var import_list2 = require("@lexical/list");
|
|
21982
22386
|
var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
|
|
21983
22387
|
var import_rich_text = require("@lexical/rich-text");
|
|
21984
22388
|
var import_selection2 = require("@lexical/selection");
|
|
21985
|
-
var
|
|
22389
|
+
var import_utils7 = require("@lexical/utils");
|
|
21986
22390
|
var import_lexical5 = require("lexical");
|
|
21987
|
-
var
|
|
21988
|
-
var
|
|
21989
|
-
var toolbar =
|
|
22391
|
+
var import_react140 = require("react");
|
|
22392
|
+
var import_jsx_runtime122 = require("@emotion/react/jsx-runtime");
|
|
22393
|
+
var toolbar = import_react139.css`
|
|
21990
22394
|
background: var(--gray-50);
|
|
21991
22395
|
border-radius: var(--rounded-base);
|
|
21992
22396
|
display: flex;
|
|
@@ -21998,7 +22402,7 @@ var toolbar = import_react134.css`
|
|
|
21998
22402
|
top: calc(var(--spacing-sm) * -2);
|
|
21999
22403
|
z-index: 10;
|
|
22000
22404
|
`;
|
|
22001
|
-
var toolbarGroup =
|
|
22405
|
+
var toolbarGroup = import_react139.css`
|
|
22002
22406
|
display: flex;
|
|
22003
22407
|
gap: var(--spacing-xs);
|
|
22004
22408
|
position: relative;
|
|
@@ -22014,7 +22418,7 @@ var toolbarGroup = import_react134.css`
|
|
|
22014
22418
|
width: 1px;
|
|
22015
22419
|
}
|
|
22016
22420
|
`;
|
|
22017
|
-
var richTextToolbarButton =
|
|
22421
|
+
var richTextToolbarButton = import_react139.css`
|
|
22018
22422
|
align-items: center;
|
|
22019
22423
|
appearance: none;
|
|
22020
22424
|
border: 0;
|
|
@@ -22027,17 +22431,17 @@ var richTextToolbarButton = import_react134.css`
|
|
|
22027
22431
|
min-width: 32px;
|
|
22028
22432
|
padding: 0 var(--spacing-sm);
|
|
22029
22433
|
`;
|
|
22030
|
-
var richTextToolbarButtonActive =
|
|
22434
|
+
var richTextToolbarButtonActive = import_react139.css`
|
|
22031
22435
|
background: var(--gray-200);
|
|
22032
22436
|
`;
|
|
22033
|
-
var toolbarIcon =
|
|
22437
|
+
var toolbarIcon = import_react139.css`
|
|
22034
22438
|
color: inherit;
|
|
22035
22439
|
`;
|
|
22036
|
-
var toolbarChevron =
|
|
22440
|
+
var toolbarChevron = import_react139.css`
|
|
22037
22441
|
margin-left: var(--spacing-xs);
|
|
22038
22442
|
`;
|
|
22039
22443
|
var RichTextToolbarIcon = ({ icon }) => {
|
|
22040
|
-
return /* @__PURE__ */ (0,
|
|
22444
|
+
return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Icon, { icon, css: toolbarIcon, size: "1rem" });
|
|
22041
22445
|
};
|
|
22042
22446
|
var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
|
|
22043
22447
|
["bold", "format-bold"],
|
|
@@ -22088,7 +22492,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
22088
22492
|
}
|
|
22089
22493
|
});
|
|
22090
22494
|
};
|
|
22091
|
-
const updateToolbar = (0,
|
|
22495
|
+
const updateToolbar = (0, import_react140.useCallback)(() => {
|
|
22092
22496
|
const selection = (0, import_lexical5.$getSelection)();
|
|
22093
22497
|
if (!(0, import_lexical5.$isRangeSelection)(selection)) {
|
|
22094
22498
|
return;
|
|
@@ -22101,7 +22505,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
22101
22505
|
}
|
|
22102
22506
|
setActiveFormats(newActiveFormats);
|
|
22103
22507
|
const anchorNode = selection.anchor.getNode();
|
|
22104
|
-
let element = anchorNode.getKey() === "root" ? anchorNode : (0,
|
|
22508
|
+
let element = anchorNode.getKey() === "root" ? anchorNode : (0, import_utils7.$findMatchingParent)(anchorNode, (e) => {
|
|
22105
22509
|
const parent = e.getParent();
|
|
22106
22510
|
return parent !== null && (0, import_lexical5.$isRootOrShadowRoot)(parent);
|
|
22107
22511
|
});
|
|
@@ -22112,7 +22516,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
22112
22516
|
const elementDOM = editor.getElementByKey(elementKey);
|
|
22113
22517
|
if (elementDOM !== null) {
|
|
22114
22518
|
if ((0, import_list2.$isListNode)(element)) {
|
|
22115
|
-
const parentList = (0,
|
|
22519
|
+
const parentList = (0, import_utils7.$getNearestNodeOfType)(anchorNode, import_list2.ListNode);
|
|
22116
22520
|
const type = parentList ? parentList.getListType() : element.getListType();
|
|
22117
22521
|
setActiveElement(type === "bullet" ? "unorderedList" : "orderedList");
|
|
22118
22522
|
} else {
|
|
@@ -22127,7 +22531,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
22127
22531
|
setIsLink(false);
|
|
22128
22532
|
}
|
|
22129
22533
|
}, [editor, setActiveElement, setActiveFormats, setIsLink]);
|
|
22130
|
-
(0,
|
|
22534
|
+
(0, import_react140.useEffect)(() => {
|
|
22131
22535
|
return editor.registerCommand(
|
|
22132
22536
|
import_lexical5.SELECTION_CHANGE_COMMAND,
|
|
22133
22537
|
(_payload) => {
|
|
@@ -22137,7 +22541,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
22137
22541
|
import_lexical5.COMMAND_PRIORITY_CRITICAL
|
|
22138
22542
|
);
|
|
22139
22543
|
}, [editor, updateToolbar]);
|
|
22140
|
-
(0,
|
|
22544
|
+
(0, import_react140.useEffect)(() => {
|
|
22141
22545
|
return editor.registerUpdateListener(({ editorState }) => {
|
|
22142
22546
|
requestAnimationFrame(() => {
|
|
22143
22547
|
editorState.read(() => {
|
|
@@ -22146,15 +22550,15 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
22146
22550
|
});
|
|
22147
22551
|
});
|
|
22148
22552
|
}, [editor, updateToolbar]);
|
|
22149
|
-
return /* @__PURE__ */ (0,
|
|
22150
|
-
/* @__PURE__ */ (0,
|
|
22553
|
+
return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { css: toolbar, children: [
|
|
22554
|
+
/* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(
|
|
22151
22555
|
Menu,
|
|
22152
22556
|
{
|
|
22153
22557
|
menuLabel: "Elements",
|
|
22154
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
22558
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("button", { css: richTextToolbarButton, title: "Text styles", children: [
|
|
22155
22559
|
visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
|
|
22156
22560
|
" ",
|
|
22157
|
-
/* @__PURE__ */ (0,
|
|
22561
|
+
/* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
|
|
22158
22562
|
] }),
|
|
22159
22563
|
placement: "bottom-start",
|
|
22160
22564
|
children: [
|
|
@@ -22164,7 +22568,7 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
22164
22568
|
type: "paragraph"
|
|
22165
22569
|
},
|
|
22166
22570
|
...visibleTextualElements
|
|
22167
|
-
].map((element) => /* @__PURE__ */ (0,
|
|
22571
|
+
].map((element) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
22168
22572
|
MenuItem,
|
|
22169
22573
|
{
|
|
22170
22574
|
onClick: () => {
|
|
@@ -22174,12 +22578,12 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
22174
22578
|
},
|
|
22175
22579
|
element.type
|
|
22176
22580
|
)),
|
|
22177
|
-
visibleTextualElements.length === 0 ? /* @__PURE__ */ (0,
|
|
22581
|
+
visibleTextualElements.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
|
|
22178
22582
|
]
|
|
22179
22583
|
}
|
|
22180
22584
|
),
|
|
22181
|
-
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0,
|
|
22182
|
-
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0,
|
|
22585
|
+
visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { css: toolbarGroup, children: [
|
|
22586
|
+
visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
22183
22587
|
"button",
|
|
22184
22588
|
{
|
|
22185
22589
|
onClick: () => {
|
|
@@ -22189,16 +22593,16 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
22189
22593
|
richTextToolbarButton,
|
|
22190
22594
|
activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
|
|
22191
22595
|
],
|
|
22192
|
-
children: /* @__PURE__ */ (0,
|
|
22596
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
|
|
22193
22597
|
}
|
|
22194
22598
|
) }, format.type)),
|
|
22195
|
-
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0,
|
|
22599
|
+
visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
22196
22600
|
Menu,
|
|
22197
22601
|
{
|
|
22198
22602
|
menuLabel: "Alternative text styles",
|
|
22199
|
-
menuTrigger: /* @__PURE__ */ (0,
|
|
22603
|
+
menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
|
|
22200
22604
|
placement: "bottom-start",
|
|
22201
|
-
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0,
|
|
22605
|
+
children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
22202
22606
|
MenuItem,
|
|
22203
22607
|
{
|
|
22204
22608
|
onClick: () => {
|
|
@@ -22211,19 +22615,19 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
22211
22615
|
}
|
|
22212
22616
|
) : null
|
|
22213
22617
|
] }) : null,
|
|
22214
|
-
visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ (0,
|
|
22215
|
-
linkElementVisible ? /* @__PURE__ */ (0,
|
|
22618
|
+
visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { css: toolbarGroup, children: [
|
|
22619
|
+
linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
22216
22620
|
"button",
|
|
22217
22621
|
{
|
|
22218
22622
|
onClick: () => {
|
|
22219
22623
|
isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
|
|
22220
22624
|
},
|
|
22221
22625
|
css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
|
|
22222
|
-
children: /* @__PURE__ */ (0,
|
|
22626
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(RichTextToolbarIcon, { icon: "link" })
|
|
22223
22627
|
}
|
|
22224
22628
|
) }) : null,
|
|
22225
|
-
visibleLists.size > 0 ? /* @__PURE__ */ (0,
|
|
22226
|
-
visibleLists.has("unorderedList") ? /* @__PURE__ */ (0,
|
|
22629
|
+
visibleLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(import_jsx_runtime122.Fragment, { children: [
|
|
22630
|
+
visibleLists.has("unorderedList") ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
22227
22631
|
"button",
|
|
22228
22632
|
{
|
|
22229
22633
|
onClick: () => {
|
|
@@ -22233,10 +22637,10 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
22233
22637
|
richTextToolbarButton,
|
|
22234
22638
|
activeElement === "unorderedList" ? richTextToolbarButtonActive : null
|
|
22235
22639
|
],
|
|
22236
|
-
children: /* @__PURE__ */ (0,
|
|
22640
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(RichTextToolbarIcon, { icon: "layout-list" })
|
|
22237
22641
|
}
|
|
22238
22642
|
) }) : null,
|
|
22239
|
-
visibleLists.has("orderedList") ? /* @__PURE__ */ (0,
|
|
22643
|
+
visibleLists.has("orderedList") ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
22240
22644
|
"button",
|
|
22241
22645
|
{
|
|
22242
22646
|
onClick: () => {
|
|
@@ -22246,57 +22650,57 @@ var RichTextToolbar = ({ config, customControls }) => {
|
|
|
22246
22650
|
richTextToolbarButton,
|
|
22247
22651
|
activeElement === "orderedList" ? richTextToolbarButtonActive : null
|
|
22248
22652
|
],
|
|
22249
|
-
children: /* @__PURE__ */ (0,
|
|
22653
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(RichTextToolbarIcon, { icon: "layout-list-numbered" })
|
|
22250
22654
|
}
|
|
22251
22655
|
) }) : null
|
|
22252
22656
|
] }) : null,
|
|
22253
|
-
quoteElementVisible ? /* @__PURE__ */ (0,
|
|
22657
|
+
quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
22254
22658
|
"button",
|
|
22255
22659
|
{
|
|
22256
22660
|
onClick: () => {
|
|
22257
22661
|
activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
|
|
22258
22662
|
},
|
|
22259
22663
|
css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
|
|
22260
|
-
children: /* @__PURE__ */ (0,
|
|
22664
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(RichTextToolbarIcon, { icon: "quote" })
|
|
22261
22665
|
}
|
|
22262
22666
|
) }) : null,
|
|
22263
|
-
codeElementVisible ? /* @__PURE__ */ (0,
|
|
22667
|
+
codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
|
|
22264
22668
|
"button",
|
|
22265
22669
|
{
|
|
22266
22670
|
onClick: () => {
|
|
22267
22671
|
activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
|
|
22268
22672
|
},
|
|
22269
22673
|
css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
|
|
22270
|
-
children: /* @__PURE__ */ (0,
|
|
22674
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(RichTextToolbarIcon, { icon: "code-slash" })
|
|
22271
22675
|
}
|
|
22272
22676
|
) }) : null
|
|
22273
22677
|
] }) : null,
|
|
22274
|
-
customControls ? /* @__PURE__ */ (0,
|
|
22678
|
+
customControls ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { css: toolbarGroup, children: customControls }) : null
|
|
22275
22679
|
] });
|
|
22276
22680
|
};
|
|
22277
22681
|
var RichTextToolbar_default = RichTextToolbar;
|
|
22278
22682
|
var useRichTextToolbarState = ({ config }) => {
|
|
22279
22683
|
var _a;
|
|
22280
|
-
const enabledBuiltInFormats = (0,
|
|
22684
|
+
const enabledBuiltInFormats = (0, import_react140.useMemo)(() => {
|
|
22281
22685
|
return richTextBuiltInFormats.filter((format) => {
|
|
22282
22686
|
var _a2, _b;
|
|
22283
22687
|
return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
|
|
22284
22688
|
});
|
|
22285
22689
|
}, [config]);
|
|
22286
|
-
const enabledBuiltInElements = (0,
|
|
22690
|
+
const enabledBuiltInElements = (0, import_react140.useMemo)(() => {
|
|
22287
22691
|
return richTextBuiltInElements.filter((element) => {
|
|
22288
22692
|
var _a2, _b;
|
|
22289
22693
|
return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
|
|
22290
22694
|
});
|
|
22291
22695
|
}, [config]);
|
|
22292
|
-
const enabledBuiltInFormatsWithIcon = (0,
|
|
22696
|
+
const enabledBuiltInFormatsWithIcon = (0, import_react140.useMemo)(() => {
|
|
22293
22697
|
return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
|
|
22294
22698
|
}, [enabledBuiltInFormats]);
|
|
22295
22699
|
const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
|
|
22296
22700
|
(format) => !FORMATS_WITH_ICON.has(format.type)
|
|
22297
22701
|
);
|
|
22298
|
-
const [activeFormats, setActiveFormats] = (0,
|
|
22299
|
-
const visibleFormatsWithIcon = (0,
|
|
22702
|
+
const [activeFormats, setActiveFormats] = (0, import_react140.useState)([]);
|
|
22703
|
+
const visibleFormatsWithIcon = (0, import_react140.useMemo)(() => {
|
|
22300
22704
|
const visibleFormats = /* @__PURE__ */ new Set();
|
|
22301
22705
|
activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
22302
22706
|
visibleFormats.add(type);
|
|
@@ -22306,7 +22710,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
22306
22710
|
});
|
|
22307
22711
|
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
22308
22712
|
}, [activeFormats, enabledBuiltInFormatsWithIcon]);
|
|
22309
|
-
const visibleFormatsWithoutIcon = (0,
|
|
22713
|
+
const visibleFormatsWithoutIcon = (0, import_react140.useMemo)(() => {
|
|
22310
22714
|
const visibleFormats = /* @__PURE__ */ new Set();
|
|
22311
22715
|
activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
|
|
22312
22716
|
visibleFormats.add(type);
|
|
@@ -22316,11 +22720,11 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
22316
22720
|
});
|
|
22317
22721
|
return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
|
|
22318
22722
|
}, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
|
|
22319
|
-
const [activeElement, setActiveElement] = (0,
|
|
22723
|
+
const [activeElement, setActiveElement] = (0, import_react140.useState)("paragraph");
|
|
22320
22724
|
const enabledTextualElements = enabledBuiltInElements.filter(
|
|
22321
22725
|
(element) => TEXTUAL_ELEMENTS.includes(element.type)
|
|
22322
22726
|
);
|
|
22323
|
-
const visibleTextualElements = (0,
|
|
22727
|
+
const visibleTextualElements = (0, import_react140.useMemo)(() => {
|
|
22324
22728
|
if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
|
|
22325
22729
|
return enabledTextualElements;
|
|
22326
22730
|
}
|
|
@@ -22331,24 +22735,24 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
22331
22735
|
}
|
|
22332
22736
|
);
|
|
22333
22737
|
}, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
|
|
22334
|
-
const [isLink, setIsLink] = (0,
|
|
22335
|
-
const linkElementVisible = (0,
|
|
22738
|
+
const [isLink, setIsLink] = (0, import_react140.useState)(false);
|
|
22739
|
+
const linkElementVisible = (0, import_react140.useMemo)(() => {
|
|
22336
22740
|
return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
|
|
22337
22741
|
}, [isLink, enabledBuiltInElements]);
|
|
22338
|
-
const visibleLists = (0,
|
|
22742
|
+
const visibleLists = (0, import_react140.useMemo)(() => {
|
|
22339
22743
|
return new Set(
|
|
22340
22744
|
["orderedList", "unorderedList"].filter(
|
|
22341
22745
|
(type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
|
|
22342
22746
|
)
|
|
22343
22747
|
);
|
|
22344
22748
|
}, [activeElement, enabledBuiltInElements]);
|
|
22345
|
-
const quoteElementVisible = (0,
|
|
22749
|
+
const quoteElementVisible = (0, import_react140.useMemo)(() => {
|
|
22346
22750
|
return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
|
|
22347
22751
|
}, [activeElement, enabledBuiltInElements]);
|
|
22348
|
-
const codeElementVisible = (0,
|
|
22752
|
+
const codeElementVisible = (0, import_react140.useMemo)(() => {
|
|
22349
22753
|
return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
|
|
22350
22754
|
}, [activeElement, enabledBuiltInElements]);
|
|
22351
|
-
const visibleElementsWithIcons = (0,
|
|
22755
|
+
const visibleElementsWithIcons = (0, import_react140.useMemo)(() => {
|
|
22352
22756
|
const visibleElements = /* @__PURE__ */ new Set();
|
|
22353
22757
|
if (linkElementVisible) {
|
|
22354
22758
|
visibleElements.add("link");
|
|
@@ -22385,7 +22789,7 @@ var useRichTextToolbarState = ({ config }) => {
|
|
|
22385
22789
|
};
|
|
22386
22790
|
|
|
22387
22791
|
// src/components/ParameterInputs/ParameterRichText.tsx
|
|
22388
|
-
var
|
|
22792
|
+
var import_jsx_runtime123 = require("@emotion/react/jsx-runtime");
|
|
22389
22793
|
var ParameterRichText = ({
|
|
22390
22794
|
label,
|
|
22391
22795
|
labelLeadingIcon,
|
|
@@ -22410,7 +22814,7 @@ var ParameterRichText = ({
|
|
|
22410
22814
|
variables,
|
|
22411
22815
|
customControls
|
|
22412
22816
|
}) => {
|
|
22413
|
-
return /* @__PURE__ */ (0,
|
|
22817
|
+
return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
|
|
22414
22818
|
ParameterShell,
|
|
22415
22819
|
{
|
|
22416
22820
|
"data-testid": "parameter-richtext",
|
|
@@ -22424,7 +22828,7 @@ var ParameterRichText = ({
|
|
|
22424
22828
|
captionTestId,
|
|
22425
22829
|
menuItems,
|
|
22426
22830
|
children: [
|
|
22427
|
-
/* @__PURE__ */ (0,
|
|
22831
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
|
|
22428
22832
|
ParameterRichTextInner,
|
|
22429
22833
|
{
|
|
22430
22834
|
value,
|
|
@@ -22442,23 +22846,23 @@ var ParameterRichText = ({
|
|
|
22442
22846
|
children
|
|
22443
22847
|
}
|
|
22444
22848
|
),
|
|
22445
|
-
menuItems ? /* @__PURE__ */ (0,
|
|
22849
|
+
menuItems ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_jsx_runtime123.Fragment, { children: menuItems }) }) : null
|
|
22446
22850
|
]
|
|
22447
22851
|
}
|
|
22448
22852
|
);
|
|
22449
22853
|
};
|
|
22450
|
-
var editorWrapper =
|
|
22854
|
+
var editorWrapper = import_react141.css`
|
|
22451
22855
|
display: flex;
|
|
22452
22856
|
flex-flow: column;
|
|
22453
22857
|
flex-grow: 1;
|
|
22454
22858
|
`;
|
|
22455
|
-
var editorContainer =
|
|
22859
|
+
var editorContainer = import_react141.css`
|
|
22456
22860
|
display: flex;
|
|
22457
22861
|
flex-flow: column;
|
|
22458
22862
|
flex-grow: 1;
|
|
22459
22863
|
position: relative;
|
|
22460
22864
|
`;
|
|
22461
|
-
var editorPlaceholder =
|
|
22865
|
+
var editorPlaceholder = import_react141.css`
|
|
22462
22866
|
color: var(--gray-500);
|
|
22463
22867
|
font-style: italic;
|
|
22464
22868
|
/* 1px is added to make sure caret is clearly visible when field is focused
|
|
@@ -22469,7 +22873,7 @@ var editorPlaceholder = import_react136.css`
|
|
|
22469
22873
|
top: var(--spacing-sm);
|
|
22470
22874
|
user-select: none;
|
|
22471
22875
|
`;
|
|
22472
|
-
var editorInput =
|
|
22876
|
+
var editorInput = import_react141.css`
|
|
22473
22877
|
background: var(--white);
|
|
22474
22878
|
border: 1px solid var(--gray-200);
|
|
22475
22879
|
border-radius: var(--rounded-sm);
|
|
@@ -22553,8 +22957,8 @@ var ParameterRichTextInner = ({
|
|
|
22553
22957
|
},
|
|
22554
22958
|
editable: !readOnly
|
|
22555
22959
|
};
|
|
22556
|
-
return /* @__PURE__ */ (0,
|
|
22557
|
-
/* @__PURE__ */ (0,
|
|
22960
|
+
return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_jsx_runtime123.Fragment, { children: [
|
|
22961
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_LexicalComposer.LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
|
|
22558
22962
|
RichText,
|
|
22559
22963
|
{
|
|
22560
22964
|
onChange,
|
|
@@ -22591,14 +22995,14 @@ var RichText = ({
|
|
|
22591
22995
|
variables,
|
|
22592
22996
|
customControls
|
|
22593
22997
|
}) => {
|
|
22594
|
-
const editorContainerRef = (0,
|
|
22998
|
+
const editorContainerRef = (0, import_react142.useRef)(null);
|
|
22595
22999
|
const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
|
|
22596
|
-
(0,
|
|
23000
|
+
(0, import_react142.useEffect)(() => {
|
|
22597
23001
|
if (onRichTextInit) {
|
|
22598
23002
|
onRichTextInit(editor);
|
|
22599
23003
|
}
|
|
22600
23004
|
}, [editor, onRichTextInit]);
|
|
22601
|
-
(0,
|
|
23005
|
+
(0, import_react142.useEffect)(() => {
|
|
22602
23006
|
const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
|
|
22603
23007
|
requestAnimationFrame(() => {
|
|
22604
23008
|
if (!(0, import_fast_equals2.deepEqual)(editorState.toJSON(), prevEditorState.toJSON())) {
|
|
@@ -22610,23 +23014,23 @@ var RichText = ({
|
|
|
22610
23014
|
removeUpdateListener();
|
|
22611
23015
|
};
|
|
22612
23016
|
}, [editor, onChange]);
|
|
22613
|
-
(0,
|
|
23017
|
+
(0, import_react142.useEffect)(() => {
|
|
22614
23018
|
editor.setEditable(!readOnly);
|
|
22615
23019
|
}, [editor, readOnly]);
|
|
22616
|
-
return /* @__PURE__ */ (0,
|
|
22617
|
-
readOnly ? null : /* @__PURE__ */ (0,
|
|
22618
|
-
/* @__PURE__ */ (0,
|
|
22619
|
-
/* @__PURE__ */ (0,
|
|
23020
|
+
return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_jsx_runtime123.Fragment, { children: [
|
|
23021
|
+
readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(RichTextToolbar_default, { config, customControls }),
|
|
23022
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
|
|
23023
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
|
|
22620
23024
|
import_LexicalRichTextPlugin.RichTextPlugin,
|
|
22621
23025
|
{
|
|
22622
|
-
contentEditable: /* @__PURE__ */ (0,
|
|
22623
|
-
placeholder: /* @__PURE__ */ (0,
|
|
23026
|
+
contentEditable: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
|
|
23027
|
+
placeholder: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
|
|
22624
23028
|
ErrorBoundary: import_LexicalErrorBoundary.default
|
|
22625
23029
|
}
|
|
22626
23030
|
),
|
|
22627
|
-
/* @__PURE__ */ (0,
|
|
22628
|
-
readOnly ? null : /* @__PURE__ */ (0,
|
|
22629
|
-
/* @__PURE__ */ (0,
|
|
23031
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_LexicalListPlugin.ListPlugin, {}),
|
|
23032
|
+
readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
|
|
23033
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
|
|
22630
23034
|
LinkNodePlugin,
|
|
22631
23035
|
{
|
|
22632
23036
|
onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
|
|
@@ -22636,28 +23040,28 @@ var RichText = ({
|
|
|
22636
23040
|
} : void 0
|
|
22637
23041
|
}
|
|
22638
23042
|
),
|
|
22639
|
-
/* @__PURE__ */ (0,
|
|
22640
|
-
/* @__PURE__ */ (0,
|
|
22641
|
-
/* @__PURE__ */ (0,
|
|
22642
|
-
/* @__PURE__ */ (0,
|
|
23043
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsx)(ListIndentPlugin, { maxDepth: 4 }),
|
|
23044
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsx)(DisableStylesPlugin, {}),
|
|
23045
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
|
|
23046
|
+
/* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_jsx_runtime123.Fragment, { children })
|
|
22643
23047
|
] })
|
|
22644
23048
|
] });
|
|
22645
23049
|
};
|
|
22646
23050
|
|
|
22647
23051
|
// src/components/ParameterInputs/ParameterSelect.tsx
|
|
22648
23052
|
init_emotion_jsx_shim();
|
|
22649
|
-
var
|
|
22650
|
-
var
|
|
22651
|
-
var ParameterSelect = (0,
|
|
23053
|
+
var import_react143 = require("react");
|
|
23054
|
+
var import_jsx_runtime124 = require("@emotion/react/jsx-runtime");
|
|
23055
|
+
var ParameterSelect = (0, import_react143.forwardRef)(
|
|
22652
23056
|
({ defaultOption, options, ...props }, ref) => {
|
|
22653
23057
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
22654
|
-
return /* @__PURE__ */ (0,
|
|
23058
|
+
return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
|
|
22655
23059
|
}
|
|
22656
23060
|
);
|
|
22657
|
-
var ParameterSelectInner = (0,
|
|
23061
|
+
var ParameterSelectInner = (0, import_react143.forwardRef)(
|
|
22658
23062
|
({ defaultOption, options, ...props }, ref) => {
|
|
22659
23063
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
22660
|
-
return /* @__PURE__ */ (0,
|
|
23064
|
+
return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
|
|
22661
23065
|
"select",
|
|
22662
23066
|
{
|
|
22663
23067
|
css: [input3, selectInput],
|
|
@@ -22666,10 +23070,10 @@ var ParameterSelectInner = (0, import_react138.forwardRef)(
|
|
|
22666
23070
|
ref,
|
|
22667
23071
|
...props,
|
|
22668
23072
|
children: [
|
|
22669
|
-
defaultOption ? /* @__PURE__ */ (0,
|
|
23073
|
+
defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("option", { value: "", children: defaultOption }) : null,
|
|
22670
23074
|
options.map((option) => {
|
|
22671
23075
|
var _a;
|
|
22672
|
-
return /* @__PURE__ */ (0,
|
|
23076
|
+
return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
|
|
22673
23077
|
})
|
|
22674
23078
|
]
|
|
22675
23079
|
}
|
|
@@ -22679,15 +23083,15 @@ var ParameterSelectInner = (0, import_react138.forwardRef)(
|
|
|
22679
23083
|
|
|
22680
23084
|
// src/components/ParameterInputs/ParameterTextarea.tsx
|
|
22681
23085
|
init_emotion_jsx_shim();
|
|
22682
|
-
var
|
|
22683
|
-
var
|
|
22684
|
-
var ParameterTextarea = (0,
|
|
23086
|
+
var import_react144 = require("react");
|
|
23087
|
+
var import_jsx_runtime125 = require("@emotion/react/jsx-runtime");
|
|
23088
|
+
var ParameterTextarea = (0, import_react144.forwardRef)((props, ref) => {
|
|
22685
23089
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
22686
|
-
return /* @__PURE__ */ (0,
|
|
23090
|
+
return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
|
|
22687
23091
|
});
|
|
22688
|
-
var ParameterTextareaInner = (0,
|
|
23092
|
+
var ParameterTextareaInner = (0, import_react144.forwardRef)(({ ...props }, ref) => {
|
|
22689
23093
|
const { id, label, hiddenLabel } = useParameterShell();
|
|
22690
|
-
return /* @__PURE__ */ (0,
|
|
23094
|
+
return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
|
|
22691
23095
|
"textarea",
|
|
22692
23096
|
{
|
|
22693
23097
|
css: [input3, textarea2],
|
|
@@ -22701,18 +23105,18 @@ var ParameterTextareaInner = (0, import_react139.forwardRef)(({ ...props }, ref)
|
|
|
22701
23105
|
|
|
22702
23106
|
// src/components/ParameterInputs/ParameterToggle.tsx
|
|
22703
23107
|
init_emotion_jsx_shim();
|
|
22704
|
-
var
|
|
22705
|
-
var
|
|
22706
|
-
var ParameterToggle = (0,
|
|
23108
|
+
var import_react145 = require("react");
|
|
23109
|
+
var import_jsx_runtime126 = require("@emotion/react/jsx-runtime");
|
|
23110
|
+
var ParameterToggle = (0, import_react145.forwardRef)((props, ref) => {
|
|
22707
23111
|
const { shellProps, innerProps } = extractParameterProps(props);
|
|
22708
|
-
return /* @__PURE__ */ (0,
|
|
23112
|
+
return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
|
|
22709
23113
|
});
|
|
22710
|
-
var ParameterToggleInner = (0,
|
|
23114
|
+
var ParameterToggleInner = (0, import_react145.forwardRef)(
|
|
22711
23115
|
({ children, ...props }, ref) => {
|
|
22712
23116
|
const { id, label } = useParameterShell();
|
|
22713
|
-
return /* @__PURE__ */ (0,
|
|
22714
|
-
/* @__PURE__ */ (0,
|
|
22715
|
-
/* @__PURE__ */ (0,
|
|
23117
|
+
return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("label", { css: inputToggleLabel2, children: [
|
|
23118
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
|
|
23119
|
+
/* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { css: inlineLabel2, children: label }),
|
|
22716
23120
|
children
|
|
22717
23121
|
] });
|
|
22718
23122
|
}
|
|
@@ -22723,8 +23127,8 @@ init_emotion_jsx_shim();
|
|
|
22723
23127
|
|
|
22724
23128
|
// src/components/ProgressBar/ProgressBar.styles.ts
|
|
22725
23129
|
init_emotion_jsx_shim();
|
|
22726
|
-
var
|
|
22727
|
-
var container3 =
|
|
23130
|
+
var import_react146 = require("@emotion/react");
|
|
23131
|
+
var container3 = import_react146.css`
|
|
22728
23132
|
background: var(--gray-50);
|
|
22729
23133
|
margin-block: var(--spacing-sm);
|
|
22730
23134
|
position: relative;
|
|
@@ -22734,17 +23138,17 @@ var container3 = import_react141.css`
|
|
|
22734
23138
|
border: solid 1px var(--gray-300);
|
|
22735
23139
|
`;
|
|
22736
23140
|
var themeMap = {
|
|
22737
|
-
primary:
|
|
23141
|
+
primary: import_react146.css`
|
|
22738
23142
|
--progress-color: var(--accent-light);
|
|
22739
23143
|
`,
|
|
22740
|
-
secondary:
|
|
23144
|
+
secondary: import_react146.css`
|
|
22741
23145
|
--progress-color: var(--accent-alt-light);
|
|
22742
23146
|
`,
|
|
22743
|
-
destructive:
|
|
23147
|
+
destructive: import_react146.css`
|
|
22744
23148
|
--progress-color: var(--brand-secondary-5);
|
|
22745
23149
|
`
|
|
22746
23150
|
};
|
|
22747
|
-
var slidingBackgroundPosition =
|
|
23151
|
+
var slidingBackgroundPosition = import_react146.keyframes`
|
|
22748
23152
|
from {
|
|
22749
23153
|
background-position: 0 0;
|
|
22750
23154
|
}
|
|
@@ -22752,10 +23156,10 @@ var slidingBackgroundPosition = import_react141.keyframes`
|
|
|
22752
23156
|
background-position: 64px 0;
|
|
22753
23157
|
}
|
|
22754
23158
|
`;
|
|
22755
|
-
var determinate =
|
|
23159
|
+
var determinate = import_react146.css`
|
|
22756
23160
|
background-color: var(--progress-color);
|
|
22757
23161
|
`;
|
|
22758
|
-
var indeterminate =
|
|
23162
|
+
var indeterminate = import_react146.css`
|
|
22759
23163
|
background-image: linear-gradient(
|
|
22760
23164
|
45deg,
|
|
22761
23165
|
var(--progress-color) 25%,
|
|
@@ -22769,7 +23173,7 @@ var indeterminate = import_react141.css`
|
|
|
22769
23173
|
background-size: 64px 64px;
|
|
22770
23174
|
animation: ${slidingBackgroundPosition} 1s linear infinite;
|
|
22771
23175
|
`;
|
|
22772
|
-
var bar =
|
|
23176
|
+
var bar = import_react146.css`
|
|
22773
23177
|
position: absolute;
|
|
22774
23178
|
inset: 0;
|
|
22775
23179
|
transition: transform var(--duration-fast) var(--timing-ease-out);
|
|
@@ -22777,7 +23181,7 @@ var bar = import_react141.css`
|
|
|
22777
23181
|
`;
|
|
22778
23182
|
|
|
22779
23183
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
22780
|
-
var
|
|
23184
|
+
var import_jsx_runtime127 = require("@emotion/react/jsx-runtime");
|
|
22781
23185
|
function ProgressBar({
|
|
22782
23186
|
current,
|
|
22783
23187
|
max,
|
|
@@ -22787,7 +23191,7 @@ function ProgressBar({
|
|
|
22787
23191
|
}) {
|
|
22788
23192
|
const valueNow = Math.min(current, max);
|
|
22789
23193
|
const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
|
|
22790
|
-
return /* @__PURE__ */ (0,
|
|
23194
|
+
return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
22791
23195
|
"div",
|
|
22792
23196
|
{
|
|
22793
23197
|
css: container3,
|
|
@@ -22798,7 +23202,7 @@ function ProgressBar({
|
|
|
22798
23202
|
"aria-valuemax": max,
|
|
22799
23203
|
"aria-valuenow": valueNow,
|
|
22800
23204
|
...props,
|
|
22801
|
-
children: /* @__PURE__ */ (0,
|
|
23205
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
|
|
22802
23206
|
"div",
|
|
22803
23207
|
{
|
|
22804
23208
|
css: [
|
|
@@ -22818,31 +23222,31 @@ function ProgressBar({
|
|
|
22818
23222
|
|
|
22819
23223
|
// src/components/ProgressList/ProgressList.tsx
|
|
22820
23224
|
init_emotion_jsx_shim();
|
|
22821
|
-
var
|
|
23225
|
+
var import_react148 = require("@emotion/react");
|
|
22822
23226
|
var import_CgCheckO3 = require("@react-icons/all-files/cg/CgCheckO");
|
|
22823
23227
|
var import_CgRadioCheck2 = require("@react-icons/all-files/cg/CgRadioCheck");
|
|
22824
23228
|
var import_CgRecord2 = require("@react-icons/all-files/cg/CgRecord");
|
|
22825
|
-
var
|
|
23229
|
+
var import_react149 = require("react");
|
|
22826
23230
|
|
|
22827
23231
|
// src/components/ProgressList/styles/ProgressList.styles.ts
|
|
22828
23232
|
init_emotion_jsx_shim();
|
|
22829
|
-
var
|
|
22830
|
-
var progressListStyles =
|
|
23233
|
+
var import_react147 = require("@emotion/react");
|
|
23234
|
+
var progressListStyles = import_react147.css`
|
|
22831
23235
|
display: flex;
|
|
22832
23236
|
flex-direction: column;
|
|
22833
23237
|
gap: var(--spacing-sm);
|
|
22834
23238
|
list-style-type: none;
|
|
22835
23239
|
`;
|
|
22836
|
-
var progressListItemStyles =
|
|
23240
|
+
var progressListItemStyles = import_react147.css`
|
|
22837
23241
|
display: flex;
|
|
22838
23242
|
gap: var(--spacing-base);
|
|
22839
23243
|
align-items: center;
|
|
22840
23244
|
`;
|
|
22841
23245
|
|
|
22842
23246
|
// src/components/ProgressList/ProgressList.tsx
|
|
22843
|
-
var
|
|
23247
|
+
var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
|
|
22844
23248
|
var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
22845
|
-
const itemsWithStatus = (0,
|
|
23249
|
+
const itemsWithStatus = (0, import_react149.useMemo)(() => {
|
|
22846
23250
|
const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
|
|
22847
23251
|
return items.map((item, index) => {
|
|
22848
23252
|
let status = "queued";
|
|
@@ -22854,8 +23258,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
|
|
|
22854
23258
|
return { ...item, status };
|
|
22855
23259
|
});
|
|
22856
23260
|
}, [items, inProgressId]);
|
|
22857
|
-
return /* @__PURE__ */ (0,
|
|
22858
|
-
return /* @__PURE__ */ (0,
|
|
23261
|
+
return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
|
|
23262
|
+
return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
|
|
22859
23263
|
ProgressListItem,
|
|
22860
23264
|
{
|
|
22861
23265
|
status,
|
|
@@ -22875,7 +23279,7 @@ var ProgressListItem = ({
|
|
|
22875
23279
|
errorLevel = "danger",
|
|
22876
23280
|
autoEllipsis = false
|
|
22877
23281
|
}) => {
|
|
22878
|
-
const icon = (0,
|
|
23282
|
+
const icon = (0, import_react149.useMemo)(() => {
|
|
22879
23283
|
if (error) {
|
|
22880
23284
|
return warningIcon;
|
|
22881
23285
|
}
|
|
@@ -22886,14 +23290,14 @@ var ProgressListItem = ({
|
|
|
22886
23290
|
};
|
|
22887
23291
|
return iconPerStatus[status];
|
|
22888
23292
|
}, [status, error]);
|
|
22889
|
-
const statusStyles = (0,
|
|
23293
|
+
const statusStyles = (0, import_react149.useMemo)(() => {
|
|
22890
23294
|
if (error) {
|
|
22891
|
-
return errorLevel === "caution" ?
|
|
23295
|
+
return errorLevel === "caution" ? import_react148.css`
|
|
22892
23296
|
color: rgb(161, 98, 7);
|
|
22893
23297
|
& svg {
|
|
22894
23298
|
color: rgb(250, 204, 21);
|
|
22895
23299
|
}
|
|
22896
|
-
` :
|
|
23300
|
+
` : import_react148.css`
|
|
22897
23301
|
color: rgb(185, 28, 28);
|
|
22898
23302
|
& svg {
|
|
22899
23303
|
color: var(--brand-primary-2);
|
|
@@ -22901,40 +23305,40 @@ var ProgressListItem = ({
|
|
|
22901
23305
|
`;
|
|
22902
23306
|
}
|
|
22903
23307
|
const colorPerStatus = {
|
|
22904
|
-
completed:
|
|
23308
|
+
completed: import_react148.css`
|
|
22905
23309
|
opacity: 0.75;
|
|
22906
23310
|
`,
|
|
22907
|
-
inProgress:
|
|
23311
|
+
inProgress: import_react148.css`
|
|
22908
23312
|
-webkit-text-stroke-width: thin;
|
|
22909
23313
|
`,
|
|
22910
|
-
queued:
|
|
23314
|
+
queued: import_react148.css`
|
|
22911
23315
|
opacity: 0.5;
|
|
22912
23316
|
`
|
|
22913
23317
|
};
|
|
22914
23318
|
return colorPerStatus[status];
|
|
22915
23319
|
}, [status, error, errorLevel]);
|
|
22916
|
-
return /* @__PURE__ */ (0,
|
|
22917
|
-
/* @__PURE__ */ (0,
|
|
22918
|
-
/* @__PURE__ */ (0,
|
|
23320
|
+
return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
|
|
23321
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
|
|
23322
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { children: [
|
|
22919
23323
|
children,
|
|
22920
|
-
/* @__PURE__ */ (0,
|
|
23324
|
+
/* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
|
|
22921
23325
|
] })
|
|
22922
23326
|
] });
|
|
22923
23327
|
};
|
|
22924
23328
|
|
|
22925
23329
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
22926
23330
|
init_emotion_jsx_shim();
|
|
22927
|
-
var
|
|
23331
|
+
var import_react151 = require("@emotion/react");
|
|
22928
23332
|
var import_CgCheck6 = require("@react-icons/all-files/cg/CgCheck");
|
|
22929
|
-
var
|
|
23333
|
+
var import_react152 = require("react");
|
|
22930
23334
|
|
|
22931
23335
|
// src/components/SegmentedControl/SegmentedControl.styles.ts
|
|
22932
23336
|
init_emotion_jsx_shim();
|
|
22933
|
-
var
|
|
22934
|
-
var segmentedControlRootStyles =
|
|
23337
|
+
var import_react150 = require("@emotion/react");
|
|
23338
|
+
var segmentedControlRootStyles = import_react150.css`
|
|
22935
23339
|
position: relative;
|
|
22936
23340
|
`;
|
|
22937
|
-
var segmentedControlScrollIndicatorsStyles =
|
|
23341
|
+
var segmentedControlScrollIndicatorsStyles = import_react150.css`
|
|
22938
23342
|
position: absolute;
|
|
22939
23343
|
inset: 0;
|
|
22940
23344
|
z-index: 1;
|
|
@@ -22962,17 +23366,17 @@ var segmentedControlScrollIndicatorsStyles = import_react145.css`
|
|
|
22962
23366
|
background: linear-gradient(to left, var(--background-color) 10%, transparent);
|
|
22963
23367
|
}
|
|
22964
23368
|
`;
|
|
22965
|
-
var segmentedControlScrollIndicatorStartVisibleStyles =
|
|
23369
|
+
var segmentedControlScrollIndicatorStartVisibleStyles = import_react150.css`
|
|
22966
23370
|
&::before {
|
|
22967
23371
|
opacity: 1;
|
|
22968
23372
|
}
|
|
22969
23373
|
`;
|
|
22970
|
-
var segmentedControlScrollIndicatorEndVisibleStyles =
|
|
23374
|
+
var segmentedControlScrollIndicatorEndVisibleStyles = import_react150.css`
|
|
22971
23375
|
&::after {
|
|
22972
23376
|
opacity: 1;
|
|
22973
23377
|
}
|
|
22974
23378
|
`;
|
|
22975
|
-
var segmentedControlWrapperStyles =
|
|
23379
|
+
var segmentedControlWrapperStyles = import_react150.css`
|
|
22976
23380
|
overflow-y: auto;
|
|
22977
23381
|
scroll-behavior: smooth;
|
|
22978
23382
|
scrollbar-width: none;
|
|
@@ -22981,7 +23385,7 @@ var segmentedControlWrapperStyles = import_react145.css`
|
|
|
22981
23385
|
height: 0px;
|
|
22982
23386
|
}
|
|
22983
23387
|
`;
|
|
22984
|
-
var segmentedControlStyles =
|
|
23388
|
+
var segmentedControlStyles = import_react150.css`
|
|
22985
23389
|
--segmented-control-rounded-value: var(--rounded-base);
|
|
22986
23390
|
--segmented-control-border-width: 1px;
|
|
22987
23391
|
--segmented-control-selected-color: var(--brand-secondary-3);
|
|
@@ -23000,14 +23404,14 @@ var segmentedControlStyles = import_react145.css`
|
|
|
23000
23404
|
border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
|
|
23001
23405
|
font-size: var(--fs-xs);
|
|
23002
23406
|
`;
|
|
23003
|
-
var segmentedControlVerticalStyles =
|
|
23407
|
+
var segmentedControlVerticalStyles = import_react150.css`
|
|
23004
23408
|
flex-direction: column;
|
|
23005
23409
|
--segmented-control-first-border-radius: var(--segmented-control-rounded-value)
|
|
23006
23410
|
var(--segmented-control-rounded-value) 0 0;
|
|
23007
23411
|
--segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
|
|
23008
23412
|
var(--segmented-control-rounded-value);
|
|
23009
23413
|
`;
|
|
23010
|
-
var segmentedControlItemStyles =
|
|
23414
|
+
var segmentedControlItemStyles = import_react150.css`
|
|
23011
23415
|
&:first-of-type label {
|
|
23012
23416
|
border-radius: var(--segmented-control-first-border-radius);
|
|
23013
23417
|
}
|
|
@@ -23015,10 +23419,10 @@ var segmentedControlItemStyles = import_react145.css`
|
|
|
23015
23419
|
border-radius: var(--segmented-control-last-border-radius);
|
|
23016
23420
|
}
|
|
23017
23421
|
`;
|
|
23018
|
-
var segmentedControlInputStyles =
|
|
23422
|
+
var segmentedControlInputStyles = import_react150.css`
|
|
23019
23423
|
${accessibleHidden}
|
|
23020
23424
|
`;
|
|
23021
|
-
var segmentedControlLabelStyles = (checked, disabled2) =>
|
|
23425
|
+
var segmentedControlLabelStyles = (checked, disabled2) => import_react150.css`
|
|
23022
23426
|
position: relative;
|
|
23023
23427
|
display: flex;
|
|
23024
23428
|
align-items: center;
|
|
@@ -23085,25 +23489,25 @@ var segmentedControlLabelStyles = (checked, disabled2) => import_react145.css`
|
|
|
23085
23489
|
`}
|
|
23086
23490
|
}
|
|
23087
23491
|
`;
|
|
23088
|
-
var segmentedControlLabelIconOnlyStyles =
|
|
23492
|
+
var segmentedControlLabelIconOnlyStyles = import_react150.css`
|
|
23089
23493
|
padding-inline: 0.5em;
|
|
23090
23494
|
`;
|
|
23091
|
-
var segmentedControlLabelCheckStyles =
|
|
23495
|
+
var segmentedControlLabelCheckStyles = import_react150.css`
|
|
23092
23496
|
opacity: 0.5;
|
|
23093
23497
|
`;
|
|
23094
|
-
var segmentedControlLabelContentStyles =
|
|
23498
|
+
var segmentedControlLabelContentStyles = import_react150.css`
|
|
23095
23499
|
display: flex;
|
|
23096
23500
|
align-items: center;
|
|
23097
23501
|
justify-content: center;
|
|
23098
23502
|
gap: var(--spacing-sm);
|
|
23099
23503
|
height: 100%;
|
|
23100
23504
|
`;
|
|
23101
|
-
var segmentedControlLabelTextStyles =
|
|
23505
|
+
var segmentedControlLabelTextStyles = import_react150.css`
|
|
23102
23506
|
white-space: nowrap;
|
|
23103
23507
|
`;
|
|
23104
23508
|
|
|
23105
23509
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
23106
|
-
var
|
|
23510
|
+
var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
|
|
23107
23511
|
var SegmentedControl = ({
|
|
23108
23512
|
name,
|
|
23109
23513
|
options,
|
|
@@ -23118,10 +23522,10 @@ var SegmentedControl = ({
|
|
|
23118
23522
|
currentBackgroundColor = "white",
|
|
23119
23523
|
...props
|
|
23120
23524
|
}) => {
|
|
23121
|
-
const wrapperRef = (0,
|
|
23122
|
-
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0,
|
|
23123
|
-
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0,
|
|
23124
|
-
const onOptionChange = (0,
|
|
23525
|
+
const wrapperRef = (0, import_react152.useRef)(null);
|
|
23526
|
+
const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react152.useState)(false);
|
|
23527
|
+
const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react152.useState)(false);
|
|
23528
|
+
const onOptionChange = (0, import_react152.useCallback)(
|
|
23125
23529
|
(event) => {
|
|
23126
23530
|
if (event.target.checked) {
|
|
23127
23531
|
onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
|
|
@@ -23129,19 +23533,19 @@ var SegmentedControl = ({
|
|
|
23129
23533
|
},
|
|
23130
23534
|
[options, onChange]
|
|
23131
23535
|
);
|
|
23132
|
-
const sizeStyles = (0,
|
|
23536
|
+
const sizeStyles = (0, import_react152.useMemo)(() => {
|
|
23133
23537
|
const map = {
|
|
23134
|
-
sm: (0,
|
|
23135
|
-
md: (0,
|
|
23136
|
-
lg: (0,
|
|
23137
|
-
xl: (0,
|
|
23538
|
+
sm: (0, import_react151.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
|
|
23539
|
+
md: (0, import_react151.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
|
|
23540
|
+
lg: (0, import_react151.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
|
|
23541
|
+
xl: (0, import_react151.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
|
|
23138
23542
|
};
|
|
23139
23543
|
return map[size];
|
|
23140
23544
|
}, [size]);
|
|
23141
|
-
const isIconOnly = (0,
|
|
23545
|
+
const isIconOnly = (0, import_react152.useMemo)(() => {
|
|
23142
23546
|
return options.every((option) => option && option.icon && !option.label);
|
|
23143
23547
|
}, [options]);
|
|
23144
|
-
(0,
|
|
23548
|
+
(0, import_react152.useEffect)(() => {
|
|
23145
23549
|
const wrapperElement = wrapperRef.current;
|
|
23146
23550
|
const onScroll = () => {
|
|
23147
23551
|
if (!wrapperElement) {
|
|
@@ -23162,8 +23566,8 @@ var SegmentedControl = ({
|
|
|
23162
23566
|
wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
|
|
23163
23567
|
};
|
|
23164
23568
|
}, []);
|
|
23165
|
-
return /* @__PURE__ */ (0,
|
|
23166
|
-
/* @__PURE__ */ (0,
|
|
23569
|
+
return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
|
|
23570
|
+
/* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
|
|
23167
23571
|
"div",
|
|
23168
23572
|
{
|
|
23169
23573
|
css: [
|
|
@@ -23179,12 +23583,12 @@ var SegmentedControl = ({
|
|
|
23179
23583
|
}
|
|
23180
23584
|
const text = option.label ? option.label : option.icon ? null : String(option.value);
|
|
23181
23585
|
const isDisabled = disabled2 || option.disabled;
|
|
23182
|
-
return /* @__PURE__ */ (0,
|
|
23586
|
+
return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
|
|
23183
23587
|
"div",
|
|
23184
23588
|
{
|
|
23185
23589
|
css: segmentedControlItemStyles,
|
|
23186
23590
|
"data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
|
|
23187
|
-
children: /* @__PURE__ */ (0,
|
|
23591
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
|
|
23188
23592
|
"label",
|
|
23189
23593
|
{
|
|
23190
23594
|
css: [
|
|
@@ -23193,7 +23597,7 @@ var SegmentedControl = ({
|
|
|
23193
23597
|
isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
|
|
23194
23598
|
],
|
|
23195
23599
|
children: [
|
|
23196
|
-
/* @__PURE__ */ (0,
|
|
23600
|
+
/* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
|
|
23197
23601
|
"input",
|
|
23198
23602
|
{
|
|
23199
23603
|
css: segmentedControlInputStyles,
|
|
@@ -23205,10 +23609,10 @@ var SegmentedControl = ({
|
|
|
23205
23609
|
disabled: isDisabled
|
|
23206
23610
|
}
|
|
23207
23611
|
),
|
|
23208
|
-
option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0,
|
|
23209
|
-
/* @__PURE__ */ (0,
|
|
23210
|
-
!option.icon ? null : /* @__PURE__ */ (0,
|
|
23211
|
-
!text || hideOptionText ? null : /* @__PURE__ */ (0,
|
|
23612
|
+
option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_CgCheck6.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
|
|
23613
|
+
/* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
|
|
23614
|
+
!option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
|
|
23615
|
+
!text || hideOptionText ? null : /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
|
|
23212
23616
|
] })
|
|
23213
23617
|
]
|
|
23214
23618
|
}
|
|
@@ -23218,7 +23622,7 @@ var SegmentedControl = ({
|
|
|
23218
23622
|
})
|
|
23219
23623
|
}
|
|
23220
23624
|
) }),
|
|
23221
|
-
/* @__PURE__ */ (0,
|
|
23625
|
+
/* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
|
|
23222
23626
|
"div",
|
|
23223
23627
|
{
|
|
23224
23628
|
css: [
|
|
@@ -23236,18 +23640,18 @@ init_emotion_jsx_shim();
|
|
|
23236
23640
|
|
|
23237
23641
|
// src/components/Skeleton/Skeleton.styles.ts
|
|
23238
23642
|
init_emotion_jsx_shim();
|
|
23239
|
-
var
|
|
23240
|
-
var lightFadingOut =
|
|
23643
|
+
var import_react153 = require("@emotion/react");
|
|
23644
|
+
var lightFadingOut = import_react153.keyframes`
|
|
23241
23645
|
from { opacity: 0.1; }
|
|
23242
23646
|
to { opacity: 0.025; }
|
|
23243
23647
|
`;
|
|
23244
|
-
var skeletonStyles =
|
|
23648
|
+
var skeletonStyles = import_react153.css`
|
|
23245
23649
|
animation: ${lightFadingOut} 1s ease-out infinite alternate;
|
|
23246
23650
|
background-color: var(--gray-900);
|
|
23247
23651
|
`;
|
|
23248
23652
|
|
|
23249
23653
|
// src/components/Skeleton/Skeleton.tsx
|
|
23250
|
-
var
|
|
23654
|
+
var import_jsx_runtime130 = require("@emotion/react/jsx-runtime");
|
|
23251
23655
|
var Skeleton = ({
|
|
23252
23656
|
width = "100%",
|
|
23253
23657
|
height = "1.25rem",
|
|
@@ -23255,7 +23659,7 @@ var Skeleton = ({
|
|
|
23255
23659
|
circle = false,
|
|
23256
23660
|
children,
|
|
23257
23661
|
...otherProps
|
|
23258
|
-
}) => /* @__PURE__ */ (0,
|
|
23662
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
|
|
23259
23663
|
"div",
|
|
23260
23664
|
{
|
|
23261
23665
|
css: [
|
|
@@ -23276,12 +23680,12 @@ var Skeleton = ({
|
|
|
23276
23680
|
|
|
23277
23681
|
// src/components/Switch/Switch.tsx
|
|
23278
23682
|
init_emotion_jsx_shim();
|
|
23279
|
-
var
|
|
23683
|
+
var import_react155 = require("react");
|
|
23280
23684
|
|
|
23281
23685
|
// src/components/Switch/Switch.styles.ts
|
|
23282
23686
|
init_emotion_jsx_shim();
|
|
23283
|
-
var
|
|
23284
|
-
var SwitchInputContainer =
|
|
23687
|
+
var import_react154 = require("@emotion/react");
|
|
23688
|
+
var SwitchInputContainer = import_react154.css`
|
|
23285
23689
|
cursor: pointer;
|
|
23286
23690
|
display: inline-block;
|
|
23287
23691
|
position: relative;
|
|
@@ -23290,7 +23694,7 @@ var SwitchInputContainer = import_react149.css`
|
|
|
23290
23694
|
vertical-align: middle;
|
|
23291
23695
|
user-select: none;
|
|
23292
23696
|
`;
|
|
23293
|
-
var SwitchInput =
|
|
23697
|
+
var SwitchInput = (size) => import_react154.css`
|
|
23294
23698
|
appearance: none;
|
|
23295
23699
|
border-radius: var(--rounded-full);
|
|
23296
23700
|
background-color: var(--white);
|
|
@@ -23298,15 +23702,16 @@ var SwitchInput = import_react149.css`
|
|
|
23298
23702
|
cursor: pointer;
|
|
23299
23703
|
position: absolute;
|
|
23300
23704
|
display: block;
|
|
23301
|
-
width: var(--spacing-md);
|
|
23302
|
-
height: var(--spacing-md);
|
|
23705
|
+
width: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
|
|
23706
|
+
height: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
|
|
23707
|
+
margin-top: ${size === "sm" ? "var(--spacing-xs)" : "none"};
|
|
23303
23708
|
transition: transform var(--duration-fast) var(--timing-ease-out),
|
|
23304
23709
|
background-color var(--duration-fast) var(--timing-ease-out),
|
|
23305
23710
|
background-image var(--duration-fast) var(--timing-ease-out);
|
|
23306
23711
|
z-index: var(--z-10);
|
|
23307
23712
|
|
|
23308
23713
|
&:focus {
|
|
23309
|
-
outline:
|
|
23714
|
+
outline: 2px solid var(--gray-800);
|
|
23310
23715
|
outline-offset: 2px;
|
|
23311
23716
|
}
|
|
23312
23717
|
|
|
@@ -23328,7 +23733,7 @@ var SwitchInput = import_react149.css`
|
|
|
23328
23733
|
cursor: not-allowed;
|
|
23329
23734
|
}
|
|
23330
23735
|
`;
|
|
23331
|
-
var SwitchInputDisabled =
|
|
23736
|
+
var SwitchInputDisabled = import_react154.css`
|
|
23332
23737
|
opacity: var(--opacity-50);
|
|
23333
23738
|
cursor: not-allowed;
|
|
23334
23739
|
|
|
@@ -23336,12 +23741,12 @@ var SwitchInputDisabled = import_react149.css`
|
|
|
23336
23741
|
cursor: not-allowed;
|
|
23337
23742
|
}
|
|
23338
23743
|
`;
|
|
23339
|
-
var SwitchInputLabel =
|
|
23744
|
+
var SwitchInputLabel = (size) => import_react154.css`
|
|
23340
23745
|
align-items: center;
|
|
23341
23746
|
color: var(--typography-base);
|
|
23342
23747
|
display: inline-flex;
|
|
23343
23748
|
line-height: 1.25;
|
|
23344
|
-
padding-inline: var(--spacing-2xl) 0;
|
|
23749
|
+
padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
|
|
23345
23750
|
|
|
23346
23751
|
&:before {
|
|
23347
23752
|
border-radius: var(--rounded-full);
|
|
@@ -23350,33 +23755,40 @@ var SwitchInputLabel = import_react149.css`
|
|
|
23350
23755
|
cursor: pointer;
|
|
23351
23756
|
display: block;
|
|
23352
23757
|
overflow: hidden;
|
|
23353
|
-
width: var(--spacing-xl);
|
|
23354
|
-
height: var(--spacing-md);
|
|
23758
|
+
width: ${size === "sm" ? "var(--spacing-lg)" : "var(--spacing-xl)"};
|
|
23759
|
+
height: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
|
|
23760
|
+
margin-top: ${size === "sm" ? "var(--spacing-xs)" : "none"};
|
|
23355
23761
|
position: absolute;
|
|
23356
23762
|
left: 0;
|
|
23357
23763
|
top: 0;
|
|
23358
23764
|
}
|
|
23359
23765
|
`;
|
|
23360
|
-
var SwitchText =
|
|
23766
|
+
var SwitchText = (size) => import_react154.css`
|
|
23361
23767
|
color: var(--gray-500);
|
|
23362
23768
|
font-size: var(--fs-sm);
|
|
23363
|
-
padding-inline: var(--spacing-2xl) 0;
|
|
23769
|
+
padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
|
|
23364
23770
|
`;
|
|
23365
23771
|
|
|
23366
23772
|
// src/components/Switch/Switch.tsx
|
|
23367
|
-
var
|
|
23368
|
-
var Switch =
|
|
23369
|
-
({ label, infoText, toggleText, children, ...inputProps }, ref) => {
|
|
23773
|
+
var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
|
|
23774
|
+
var Switch = (0, import_react155.forwardRef)(
|
|
23775
|
+
({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
|
|
23370
23776
|
let additionalText = infoText;
|
|
23371
23777
|
if (infoText && toggleText) {
|
|
23372
23778
|
additionalText = inputProps.checked ? toggleText : infoText;
|
|
23373
23779
|
}
|
|
23374
|
-
return /* @__PURE__ */ (0,
|
|
23375
|
-
/* @__PURE__ */ (0,
|
|
23376
|
-
|
|
23377
|
-
|
|
23378
|
-
|
|
23379
|
-
|
|
23780
|
+
return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
|
|
23781
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
|
|
23782
|
+
"label",
|
|
23783
|
+
{
|
|
23784
|
+
css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0],
|
|
23785
|
+
children: [
|
|
23786
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)("input", { type: "checkbox", css: SwitchInput(switchSize), ...inputProps, ref }),
|
|
23787
|
+
/* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { css: SwitchInputLabel(switchSize), children: label })
|
|
23788
|
+
]
|
|
23789
|
+
}
|
|
23790
|
+
),
|
|
23791
|
+
additionalText ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { css: SwitchText(switchSize), children: additionalText }) : null,
|
|
23380
23792
|
children
|
|
23381
23793
|
] });
|
|
23382
23794
|
}
|
|
@@ -23384,83 +23796,91 @@ var Switch = React24.forwardRef(
|
|
|
23384
23796
|
|
|
23385
23797
|
// src/components/Table/Table.tsx
|
|
23386
23798
|
init_emotion_jsx_shim();
|
|
23387
|
-
var
|
|
23799
|
+
var React24 = __toESM(require("react"));
|
|
23388
23800
|
|
|
23389
23801
|
// src/components/Table/Table.styles.ts
|
|
23390
23802
|
init_emotion_jsx_shim();
|
|
23391
|
-
var
|
|
23392
|
-
var table = ({ cellPadding = "var(--spacing-
|
|
23803
|
+
var import_react156 = require("@emotion/react");
|
|
23804
|
+
var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_react156.css`
|
|
23393
23805
|
border-bottom: 1px solid var(--gray-400);
|
|
23394
23806
|
border-collapse: collapse;
|
|
23395
23807
|
min-width: 100%;
|
|
23396
23808
|
table-layout: auto;
|
|
23809
|
+
transition: background-color var(--duration-fast) var(--timing-ease-out);
|
|
23397
23810
|
|
|
23398
23811
|
th,
|
|
23399
23812
|
td {
|
|
23400
23813
|
padding: ${cellPadding};
|
|
23401
23814
|
}
|
|
23815
|
+
|
|
23816
|
+
thead tr {
|
|
23817
|
+
border-color: var(--gray-300);
|
|
23818
|
+
}
|
|
23819
|
+
|
|
23820
|
+
tbody tr:hover {
|
|
23821
|
+
background-color: var(--gray-50);
|
|
23822
|
+
}
|
|
23402
23823
|
`;
|
|
23403
|
-
var tableHead =
|
|
23404
|
-
background: var(--gray-100);
|
|
23824
|
+
var tableHead = import_react156.css`
|
|
23405
23825
|
color: var(--typography-base);
|
|
23406
23826
|
text-align: left;
|
|
23407
23827
|
`;
|
|
23408
|
-
var tableRow =
|
|
23409
|
-
border-bottom: 1px solid var(--gray-
|
|
23828
|
+
var tableRow = import_react156.css`
|
|
23829
|
+
border-bottom: 1px solid var(--gray-100);
|
|
23410
23830
|
`;
|
|
23411
|
-
var tableCellHead =
|
|
23831
|
+
var tableCellHead = import_react156.css`
|
|
23412
23832
|
font-size: var(--fs-sm);
|
|
23413
23833
|
text-transform: uppercase;
|
|
23414
23834
|
font-weight: var(--fw-bold);
|
|
23415
23835
|
`;
|
|
23416
23836
|
|
|
23417
23837
|
// src/components/Table/Table.tsx
|
|
23418
|
-
var
|
|
23419
|
-
var Table =
|
|
23838
|
+
var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
|
|
23839
|
+
var Table = React24.forwardRef(
|
|
23420
23840
|
({ children, cellPadding, ...otherProps }, ref) => {
|
|
23421
|
-
return /* @__PURE__ */ (0,
|
|
23841
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
|
|
23422
23842
|
}
|
|
23423
23843
|
);
|
|
23424
|
-
var TableHead =
|
|
23844
|
+
var TableHead = React24.forwardRef(
|
|
23425
23845
|
({ children, ...otherProps }, ref) => {
|
|
23426
|
-
return /* @__PURE__ */ (0,
|
|
23846
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
|
|
23427
23847
|
}
|
|
23428
23848
|
);
|
|
23429
|
-
var TableBody =
|
|
23849
|
+
var TableBody = React24.forwardRef(
|
|
23430
23850
|
({ children, ...otherProps }, ref) => {
|
|
23431
|
-
return /* @__PURE__ */ (0,
|
|
23851
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("tbody", { ref, ...otherProps, children });
|
|
23432
23852
|
}
|
|
23433
23853
|
);
|
|
23434
|
-
var TableFoot =
|
|
23854
|
+
var TableFoot = React24.forwardRef(
|
|
23435
23855
|
({ children, ...otherProps }, ref) => {
|
|
23436
|
-
return /* @__PURE__ */ (0,
|
|
23856
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("tfoot", { ref, ...otherProps, children });
|
|
23437
23857
|
}
|
|
23438
23858
|
);
|
|
23439
|
-
var TableRow =
|
|
23859
|
+
var TableRow = React24.forwardRef(
|
|
23440
23860
|
({ children, ...otherProps }, ref) => {
|
|
23441
|
-
return /* @__PURE__ */ (0,
|
|
23861
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
|
|
23442
23862
|
}
|
|
23443
23863
|
);
|
|
23444
|
-
var TableCellHead =
|
|
23864
|
+
var TableCellHead = React24.forwardRef(
|
|
23445
23865
|
({ children, ...otherProps }, ref) => {
|
|
23446
|
-
return /* @__PURE__ */ (0,
|
|
23866
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
|
|
23447
23867
|
}
|
|
23448
23868
|
);
|
|
23449
|
-
var TableCellData =
|
|
23869
|
+
var TableCellData = React24.forwardRef(
|
|
23450
23870
|
({ children, ...otherProps }, ref) => {
|
|
23451
|
-
return /* @__PURE__ */ (0,
|
|
23871
|
+
return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("td", { ref, ...otherProps, children });
|
|
23452
23872
|
}
|
|
23453
23873
|
);
|
|
23454
23874
|
|
|
23455
23875
|
// src/components/Tabs/Tabs.tsx
|
|
23456
23876
|
init_emotion_jsx_shim();
|
|
23457
|
-
var
|
|
23458
|
-
var
|
|
23877
|
+
var import_react158 = require("@ariakit/react");
|
|
23878
|
+
var import_react159 = require("react");
|
|
23459
23879
|
|
|
23460
23880
|
// src/components/Tabs/Tabs.styles.ts
|
|
23461
23881
|
init_emotion_jsx_shim();
|
|
23462
|
-
var
|
|
23463
|
-
var tabButtonStyles =
|
|
23882
|
+
var import_react157 = require("@emotion/react");
|
|
23883
|
+
var tabButtonStyles = import_react157.css`
|
|
23464
23884
|
align-items: center;
|
|
23465
23885
|
border: 0;
|
|
23466
23886
|
height: 2.5rem;
|
|
@@ -23477,16 +23897,16 @@ var tabButtonStyles = import_react151.css`
|
|
|
23477
23897
|
box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
|
|
23478
23898
|
}
|
|
23479
23899
|
`;
|
|
23480
|
-
var tabButtonGroupStyles =
|
|
23900
|
+
var tabButtonGroupStyles = import_react157.css`
|
|
23481
23901
|
display: flex;
|
|
23482
23902
|
gap: var(--spacing-base);
|
|
23483
23903
|
border-bottom: 1px solid var(--gray-300);
|
|
23484
23904
|
`;
|
|
23485
23905
|
|
|
23486
23906
|
// src/components/Tabs/Tabs.tsx
|
|
23487
|
-
var
|
|
23907
|
+
var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
|
|
23488
23908
|
var useCurrentTab = () => {
|
|
23489
|
-
const context = (0,
|
|
23909
|
+
const context = (0, import_react158.useTabStore)();
|
|
23490
23910
|
if (!context) {
|
|
23491
23911
|
throw new Error("This component can only be used inside <Tabs>");
|
|
23492
23912
|
}
|
|
@@ -23500,13 +23920,12 @@ var Tabs = ({
|
|
|
23500
23920
|
manual,
|
|
23501
23921
|
...props
|
|
23502
23922
|
}) => {
|
|
23503
|
-
const selected = (0,
|
|
23504
|
-
if (selectedId)
|
|
23505
|
-
return selectedId;
|
|
23923
|
+
const selected = (0, import_react159.useMemo)(() => {
|
|
23924
|
+
if (selectedId) return selectedId;
|
|
23506
23925
|
return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
|
|
23507
23926
|
}, [selectedId, useHashForState]);
|
|
23508
|
-
const tab = (0,
|
|
23509
|
-
const onTabSelect = (0,
|
|
23927
|
+
const tab = (0, import_react158.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
|
|
23928
|
+
const onTabSelect = (0, import_react159.useCallback)(
|
|
23510
23929
|
(value) => {
|
|
23511
23930
|
const selectedValueWithoutNull = value != null ? value : void 0;
|
|
23512
23931
|
onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
|
|
@@ -23517,28 +23936,28 @@ var Tabs = ({
|
|
|
23517
23936
|
},
|
|
23518
23937
|
[onSelectedIdChange, useHashForState]
|
|
23519
23938
|
);
|
|
23520
|
-
(0,
|
|
23939
|
+
(0, import_react159.useEffect)(() => {
|
|
23521
23940
|
if (selected && selected !== tab.getState().activeId) {
|
|
23522
23941
|
tab.setSelectedId(selected);
|
|
23523
23942
|
}
|
|
23524
23943
|
}, [selected, tab]);
|
|
23525
|
-
return /* @__PURE__ */ (0,
|
|
23944
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react158.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
|
|
23526
23945
|
};
|
|
23527
23946
|
var TabButtonGroup = ({ children, ...props }) => {
|
|
23528
|
-
return /* @__PURE__ */ (0,
|
|
23947
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react158.TabList, { ...props, css: tabButtonGroupStyles, children });
|
|
23529
23948
|
};
|
|
23530
23949
|
var TabButton = ({
|
|
23531
23950
|
children,
|
|
23532
23951
|
id,
|
|
23533
23952
|
...props
|
|
23534
23953
|
}) => {
|
|
23535
|
-
return /* @__PURE__ */ (0,
|
|
23954
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react158.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
|
|
23536
23955
|
};
|
|
23537
23956
|
var TabContent = ({
|
|
23538
23957
|
children,
|
|
23539
23958
|
...props
|
|
23540
23959
|
}) => {
|
|
23541
|
-
return /* @__PURE__ */ (0,
|
|
23960
|
+
return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react158.TabPanel, { ...props, children });
|
|
23542
23961
|
};
|
|
23543
23962
|
|
|
23544
23963
|
// src/components/Validation/StatusBullet.tsx
|
|
@@ -23546,8 +23965,8 @@ init_emotion_jsx_shim();
|
|
|
23546
23965
|
|
|
23547
23966
|
// src/components/Validation/StatusBullet.styles.ts
|
|
23548
23967
|
init_emotion_jsx_shim();
|
|
23549
|
-
var
|
|
23550
|
-
var StatusBulletContainer =
|
|
23968
|
+
var import_react160 = require("@emotion/react");
|
|
23969
|
+
var StatusBulletContainer = import_react160.css`
|
|
23551
23970
|
align-items: center;
|
|
23552
23971
|
align-self: center;
|
|
23553
23972
|
color: var(--gray-500);
|
|
@@ -23564,33 +23983,33 @@ var StatusBulletContainer = import_react154.css`
|
|
|
23564
23983
|
display: block;
|
|
23565
23984
|
}
|
|
23566
23985
|
`;
|
|
23567
|
-
var StatusBulletBase =
|
|
23986
|
+
var StatusBulletBase = import_react160.css`
|
|
23568
23987
|
font-size: var(--fs-sm);
|
|
23569
23988
|
&:before {
|
|
23570
23989
|
width: var(--fs-xs);
|
|
23571
23990
|
height: var(--fs-xs);
|
|
23572
23991
|
}
|
|
23573
23992
|
`;
|
|
23574
|
-
var StatusBulletSmall =
|
|
23993
|
+
var StatusBulletSmall = import_react160.css`
|
|
23575
23994
|
font-size: var(--fs-xs);
|
|
23576
23995
|
&:before {
|
|
23577
23996
|
width: var(--fs-xxs);
|
|
23578
23997
|
height: var(--fs-xxs);
|
|
23579
23998
|
}
|
|
23580
23999
|
`;
|
|
23581
|
-
var StatusDraft =
|
|
24000
|
+
var StatusDraft = import_react160.css`
|
|
23582
24001
|
&:before {
|
|
23583
24002
|
background: var(--white);
|
|
23584
24003
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
23585
24004
|
}
|
|
23586
24005
|
`;
|
|
23587
|
-
var StatusModified =
|
|
24006
|
+
var StatusModified = import_react160.css`
|
|
23588
24007
|
&:before {
|
|
23589
24008
|
background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
|
|
23590
24009
|
box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
|
|
23591
24010
|
}
|
|
23592
24011
|
`;
|
|
23593
|
-
var StatusError =
|
|
24012
|
+
var StatusError = import_react160.css`
|
|
23594
24013
|
color: var(--error);
|
|
23595
24014
|
&:before {
|
|
23596
24015
|
/* TODO: replace this with an svg icon */
|
|
@@ -23603,29 +24022,29 @@ var StatusError = import_react154.css`
|
|
|
23603
24022
|
);
|
|
23604
24023
|
}
|
|
23605
24024
|
`;
|
|
23606
|
-
var StatusPublished =
|
|
24025
|
+
var StatusPublished = import_react160.css`
|
|
23607
24026
|
&:before {
|
|
23608
24027
|
background: var(--accent-dark);
|
|
23609
24028
|
}
|
|
23610
24029
|
`;
|
|
23611
|
-
var StatusOrphan =
|
|
24030
|
+
var StatusOrphan = import_react160.css`
|
|
23612
24031
|
&:before {
|
|
23613
24032
|
background: var(--brand-secondary-5);
|
|
23614
24033
|
}
|
|
23615
24034
|
`;
|
|
23616
|
-
var StatusUnknown =
|
|
24035
|
+
var StatusUnknown = import_react160.css`
|
|
23617
24036
|
&:before {
|
|
23618
24037
|
background: var(--gray-800);
|
|
23619
24038
|
}
|
|
23620
24039
|
`;
|
|
23621
|
-
var StatusDeleted =
|
|
24040
|
+
var StatusDeleted = import_react160.css`
|
|
23622
24041
|
&:before {
|
|
23623
24042
|
background: var(--error);
|
|
23624
24043
|
}
|
|
23625
24044
|
`;
|
|
23626
24045
|
|
|
23627
24046
|
// src/components/Validation/StatusBullet.tsx
|
|
23628
|
-
var
|
|
24047
|
+
var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
|
|
23629
24048
|
var StatusBullet = ({
|
|
23630
24049
|
status,
|
|
23631
24050
|
hideText = false,
|
|
@@ -23645,7 +24064,7 @@ var StatusBullet = ({
|
|
|
23645
24064
|
Deleted: StatusDeleted
|
|
23646
24065
|
};
|
|
23647
24066
|
const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
|
|
23648
|
-
return /* @__PURE__ */ (0,
|
|
24067
|
+
return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
|
|
23649
24068
|
"span",
|
|
23650
24069
|
{
|
|
23651
24070
|
role: "status",
|
|
@@ -23683,6 +24102,7 @@ var StatusBullet = ({
|
|
|
23683
24102
|
CurrentDrawerContext,
|
|
23684
24103
|
DashedBox,
|
|
23685
24104
|
DateTimePicker,
|
|
24105
|
+
DateTimePickerSummary,
|
|
23686
24106
|
DateTimePickerVariant,
|
|
23687
24107
|
DebouncedInputKeywordSearch,
|
|
23688
24108
|
DescriptionList,
|
|
@@ -23746,6 +24166,13 @@ var StatusBullet = ({
|
|
|
23746
24166
|
Modal,
|
|
23747
24167
|
ModalDialog,
|
|
23748
24168
|
MultilineChip,
|
|
24169
|
+
ObjectGridContainer,
|
|
24170
|
+
ObjectGridItem,
|
|
24171
|
+
ObjectGridItemCardCover,
|
|
24172
|
+
ObjectGridItemCover,
|
|
24173
|
+
ObjectGridItemCoverButton,
|
|
24174
|
+
ObjectGridItemHeading,
|
|
24175
|
+
ObjectGridItemIconWithTooltip,
|
|
23749
24176
|
PageHeaderSection,
|
|
23750
24177
|
Pagination,
|
|
23751
24178
|
Paragraph,
|
|
@@ -23891,6 +24318,7 @@ var StatusBullet = ({
|
|
|
23891
24318
|
toast,
|
|
23892
24319
|
uniformComponentIcon,
|
|
23893
24320
|
uniformComponentPatternIcon,
|
|
24321
|
+
uniformCompositionPatternIcon,
|
|
23894
24322
|
uniformContentTypeIcon,
|
|
23895
24323
|
uniformEntryIcon,
|
|
23896
24324
|
uniformEntryPatternIcon,
|
|
@@ -23903,6 +24331,7 @@ var StatusBullet = ({
|
|
|
23903
24331
|
useIconContext,
|
|
23904
24332
|
useOutsideClick,
|
|
23905
24333
|
useParameterShell,
|
|
24334
|
+
usePopoverComponentContext,
|
|
23906
24335
|
useShortcut,
|
|
23907
24336
|
utilityColors,
|
|
23908
24337
|
warningIcon,
|