@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/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+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Quantico:wght@700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap",
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: 'Space Mono', monospace;
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(--brand-secondary-5);
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(--brand-secondary-5)",
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(--brand-secondary-5);
2670
+ color: var(--action-destructive-default);
2656
2671
 
2657
2672
  &:hover {
2658
- color: var(--brand-secondary-5);
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
- border-color: var(--gray-400);
2664
- color: var(--gray-400);
2679
+ color: var(--action-destructive-disabled);
2680
+ opacity: var(--opacity-50);
2665
2681
  }
2666
2682
 
2667
- ${buttonRippleEffect({ hoverColor: "var(--white)", activeColor: "var(--gray-100)" })}
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-caution-icon);
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: white;
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: 1px solid var(--gray-300);
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({ children, ...buttonProps }) {
13874
- return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { ...buttonProps, css: buttonStyle, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
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
- return false;
14117
- if (contentElement == null ? void 0 : contentElement.contains(target))
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: import_MdInfoOutline.MdInfoOutline, size: "1rem", iconColor: "currentColor" }) }),
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 selectedOptionValues = selectedValues.flatMap(
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)(ElementType, { css: [ChipContainer, chipSize[size], chipTheme[theme]], ...props, children: [
16744
- icon ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
16745
- /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { role: "presentation", css: [ChipIcon], children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon, { icon, iconColor: "currentColor", size: "1rem" }) }),
16746
- /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { role: "separator", css: ChipSeparator })
16747
- ] }) : null,
16748
- /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { css: ChipText, children: text }),
16749
- chipAction
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
- gap: var(--spacing-md);
17030
- grid-template-columns: 0.8fr 1fr;
17031
- grid-template-rows: 1fr 1fr;
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
- [data-variant='date'] & {
17034
- grid-template-rows: 1fr;
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 datePart = (value == null ? void 0 : value.datetime) ? dateFormat.format(new Date(value.datetime)) : null;
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 datePart ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { children: [
17094
- /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("em", { css: inputLabelFocal, children: datePart }),
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: inputLabel,
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: "calendar", iconColor: "currentColor" }) })
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.jsx)("div", { css: calendarSection, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
17297
- Calendar,
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: draftTimeZone,
17322
- options: TIMEZONE_OPTIONS,
17323
- onChange: handleTimezoneChange
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 import_jsx_runtime101 = require("@emotion/react/jsx-runtime");
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, import_jsx_runtime101.jsx)(
20418
+ return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
20014
20419
  import_react_paginate.default,
20015
20420
  {
20016
20421
  forcePage: currentPage,
20017
- previousLabel: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: prevNextControls, children: "<" }),
20018
- nextLabel: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: prevNextControls, children: ">" }),
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 import_react115 = require("react");
20039
- var ParameterShellContext = (0, import_react115.createContext)({
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, import_react115.useContext)(ParameterShellContext);
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 import_react116 = require("@emotion/react");
20064
- var inputIconBtn = import_react116.css`
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 import_jsx_runtime102 = require("@emotion/react/jsx-runtime");
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, import_jsx_runtime102.jsx)(Tooltip, { title: titleFr, children: /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
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, import_jsx_runtime102.jsx)(
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 import_react117 = require("@emotion/react");
20133
- var inputContainer2 = import_react117.css`
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 = import_react117.css`
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 = import_react117.css`
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 = import_react117.css`
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 = import_react117.css`
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 = import_react117.css`
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 = import_react117.css`
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 = import_react117.css`
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 = import_react117.css`
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 = import_react117.css`
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 = import_react117.css`
20726
+ var inputActionItems = import_react122.css`
20322
20727
  display: flex;
20323
20728
  `;
20324
- var inputMenuHover = import_react117.css`
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 = import_react117.css`
20739
+ var textarea2 = import_react122.css`
20335
20740
  resize: vertical;
20336
20741
  min-height: 2rem;
20337
20742
  `;
20338
- var dataConnectButton = import_react117.css`
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 = import_react117.css`
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 = import_react117.css`
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) => import_react117.css`
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 = import_react117.css`
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 import_jsx_runtime103 = require("@emotion/react/jsx-runtime");
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, import_jsx_runtime103.jsxs)("div", { "data-testid": "parameter-data-connect-button", children: [
20430
- /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("span", { css: labelText2, children: [
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, import_jsx_runtime103.jsxs)(
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, import_jsx_runtime103.jsx)("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
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, import_jsx_runtime103.jsx)(Caption, { children: caption }) : null
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 import_react118 = require("@emotion/react");
20458
- var ParameterDrawerHeaderContainer = import_react118.css`
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 = import_react118.css`
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 = import_react118.css`
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 import_jsx_runtime104 = require("@emotion/react/jsx-runtime");
20883
+ var import_jsx_runtime109 = require("@emotion/react/jsx-runtime");
20479
20884
  var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
20480
- return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { css: ParameterDrawerHeaderContainer, children: [
20481
- /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("header", { css: ParameterDrawerHeaderTitleGroup, children: [
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, import_jsx_runtime104.jsx)(Heading2, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title: title2, children: title2 })
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 import_react120 = require("react");
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 import_react119 = require("@emotion/react");
20496
- var fieldsetStyles = import_react119.css`
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 = import_react119.css`
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 import_jsx_runtime105 = require("@emotion/react/jsx-runtime");
20516
- var ParameterGroup = (0, import_react120.forwardRef)(
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, import_jsx_runtime105.jsxs)("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
20519
- /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("legend", { css: fieldsetLegend2, children: legend }),
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 import_react127 = require("react");
20932
+ var import_react132 = require("react");
20528
20933
 
20529
20934
  // src/components/ParameterInputs/ParameterImagePreview.tsx
20530
20935
  init_emotion_jsx_shim();
20531
- var import_react122 = require("react");
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 import_react121 = require("@emotion/react");
20537
- var previewWrapper = import_react121.css`
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 = import_react121.css`
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 = import_react121.css`
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 = import_react121.css`
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 import_jsx_runtime106 = require("@emotion/react/jsx-runtime");
20978
+ var import_jsx_runtime111 = require("@emotion/react/jsx-runtime");
20574
20979
  function ParameterImagePreview({ imageSrc }) {
20575
- const [showModal, setShowModal] = (0, import_react122.useState)(false);
20576
- return imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { css: previewWrapper, children: [
20577
- /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
20578
- /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
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, import_jsx_runtime106.jsx)(Image, { src: imageSrc, "data-testid": "parameter-image-preview" })
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, import_jsx_runtime106.jsx)(import_jsx_runtime106.Fragment, { children: (0, import_react_dom2.createPortal)(
20592
- /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
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, import_jsx_runtime106.jsx)(Button, { buttonType: "secondary", onClick: onRequestClose, children: "Ok" }),
20598
- children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { css: previewModalWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Image, { src: imageSrc, css: previewModalImage, "data-testid": "parameter-image-preview" }) })
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 import_react125 = require("@emotion/react");
20608
- var import_react126 = require("react");
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 import_jsx_runtime107 = require("@emotion/react/jsx-runtime");
21017
+ var import_jsx_runtime112 = require("@emotion/react/jsx-runtime");
20613
21018
  var ParameterLabel = ({ id, asSpan, children, ...props }) => {
20614
- return !asSpan ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { "aria-labelledby": id, css: labelText2, children });
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 import_react123 = require("react");
20620
- var import_jsx_runtime108 = require("@emotion/react/jsx-runtime");
20621
- var ParameterMenuButton = (0, import_react123.forwardRef)(
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, import_jsx_runtime108.jsx)(
21028
+ return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
20624
21029
  Menu,
20625
21030
  {
20626
21031
  menuLabel: `${label} menu`,
20627
- menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
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, import_jsx_runtime108.jsx)(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
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 import_react124 = require("@emotion/react");
20647
- var emptyParameterShell = import_react124.css`
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 = import_react124.css`
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 = import_react124.css`
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 import_jsx_runtime109 = require("@emotion/react/jsx-runtime");
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, import_react126.useState)(void 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, import_jsx_runtime109.jsxs)("div", { css: inputContainer2, ...props, id, children: [
20736
- hiddenLabel || title2 ? null : /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(ParameterLabel, { id, css: labelText2, children: [
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, import_jsx_runtime109.jsxs)(ParameterLabel, { id, asSpan: true, children: [
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, import_jsx_runtime109.jsxs)("div", { css: inputWrapper, children: [
20747
- actionItems ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
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 ? import_react125.css`
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, import_jsx_runtime109.jsx)(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
20761
- /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
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, import_jsx_runtime109.jsx)("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(ParameterShellPlaceholder, { children: [
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, import_jsx_runtime109.jsx)(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
21178
+ hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
20774
21179
  ] })
20775
21180
  }
20776
21181
  )
20777
21182
  ] }),
20778
- /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
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, import_jsx_runtime109.jsx)("div", { css: emptyParameterShell, children });
21197
+ return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { css: emptyParameterShell, children });
20793
21198
  };
20794
- var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { hidden: true, children: "reset overridden value to default" }) }) });
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 import_jsx_runtime110 = require("@emotion/react/jsx-runtime");
20798
- var ParameterImage = (0, import_react127.forwardRef)(
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, import_jsx_runtime110.jsxs)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
20802
- /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(ParameterImageInner, { ref, ...innerProps }),
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, import_react127.forwardRef)((props, ref) => {
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, import_react127.useDeferredValue)(value);
20811
- return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_jsx_runtime110.Fragment, { children: [
20812
- /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
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, import_jsx_runtime110.jsx)(ParameterImagePreview, { imageSrc: deferredValue })
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 import_react128 = require("react");
20831
- var import_jsx_runtime111 = require("@emotion/react/jsx-runtime");
20832
- var ParameterInput = (0, import_react128.forwardRef)((props, ref) => {
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, import_jsx_runtime111.jsx)(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(ParameterInputInner, { ref, ...innerProps }) });
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, import_react128.forwardRef)(
21241
+ var ParameterInputInner = (0, import_react133.forwardRef)(
20837
21242
  ({ ...props }, ref) => {
20838
21243
  const { id, label, hiddenLabel } = useParameterShell();
20839
- return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
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 import_react129 = require("react");
20857
- var import_jsx_runtime112 = require("@emotion/react/jsx-runtime");
20858
- var ParameterLink = (0, import_react129.forwardRef)(
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, import_jsx_runtime112.jsx)(
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, import_jsx_runtime112.jsx)(
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, import_react129.forwardRef)(
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, import_jsx_runtime112.jsx)("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
20886
- return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("div", { css: inputWrapper, children: [
20887
- /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
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, import_jsx_runtime112.jsxs)("div", { css: linkParameterControls, children: [
20900
- /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
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, import_jsx_runtime112.jsx)(
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, import_jsx_runtime112.jsx)(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
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 import_jsx_runtime113 = require("@emotion/react/jsx-runtime");
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, import_jsx_runtime113.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
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, import_jsx_runtime113.jsx)(
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 import_jsx_runtime114 = require("@emotion/react/jsx-runtime");
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, import_jsx_runtime114.jsxs)(import_jsx_runtime114.Fragment, { children: [
21015
- /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
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, import_jsx_runtime114.jsx)(
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, import_jsx_runtime114.jsx)(
21453
+ menuItems: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
21049
21454
  MenuItem,
21050
21455
  {
21051
21456
  disabled: !values[publicIdFieldName],
21052
- icon: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(Icon, { icon: "path-trim", iconColor: "currentColor" }),
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, import_jsx_runtime114.jsx)(Callout, { type: "caution", children: warnOverLength.message }) : null
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 import_react136 = require("@emotion/react");
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 import_react137 = require("react");
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 import_utils2 = require("@lexical/utils");
21599
+ var import_utils3 = require("@lexical/utils");
21195
21600
  var import_lexical = require("lexical");
21196
- var import_react130 = require("react");
21601
+ var import_react135 = require("react");
21197
21602
  function DisableStylesPlugin() {
21198
21603
  const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
21199
- (0, import_react130.useEffect)(() => {
21200
- return (0, import_utils2.mergeRegister)(
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 import_react131 = require("@emotion/react");
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 import_utils3 = require("@lexical/utils");
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 import_react132 = require("react");
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 import_jsx_runtime115 = require("@emotion/react/jsx-runtime");
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, import_utils3.isHTMLAnchorElement)(domNode)) {
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, import_utils3.addClassNamesToElement)(element, config.theme.link);
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 = import_react131.css`
22130
+ var linkPopover = import_react136.css`
21727
22131
  position: absolute;
21728
22132
  z-index: 5;
21729
22133
  `;
21730
- var linkPopoverContainer = import_react131.css`
22134
+ var linkPopoverContainer = import_react136.css`
21731
22135
  ${Popover};
21732
22136
  align-items: center;
21733
22137
  display: flex;
21734
22138
  `;
21735
- var linkPopoverAnchor = import_react131.css`
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, import_react132.useState)();
21745
- const linkPopoverElRef = (0, import_react132.useRef)(null);
21746
- const [isEditorFocused, setIsEditorFocused] = (0, import_react132.useState)(false);
21747
- const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react132.useState)(false);
21748
- (0, import_react132.useEffect)(() => {
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, import_react132.useEffect)(() => {
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, import_utils3.mergeRegister)(
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, import_react132.useCallback)(() => {
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, import_react132.useEffect)(() => {
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, import_jsx_runtime115.jsxs)(import_jsx_runtime115.Fragment, { children: [
21883
- /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
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, import_jsx_runtime115.jsx)(
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, import_jsx_runtime115.jsxs)("div", { css: linkPopoverContainer, children: [
21903
- linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
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, import_jsx_runtime115.jsx)(
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, import_jsx_runtime115.jsx)(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
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 import_react133 = require("react");
21944
- var import_jsx_runtime116 = require("@emotion/react/jsx-runtime");
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, import_react133.useEffect)(() => {
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, import_jsx_runtime116.jsx)(import_LexicalTabIndentationPlugin.TabIndentationPlugin, {});
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 import_react134 = require("@emotion/react");
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 import_utils6 = require("@lexical/utils");
22389
+ var import_utils7 = require("@lexical/utils");
21986
22390
  var import_lexical5 = require("lexical");
21987
- var import_react135 = require("react");
21988
- var import_jsx_runtime117 = require("@emotion/react/jsx-runtime");
21989
- var toolbar = import_react134.css`
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 = import_react134.css`
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 = import_react134.css`
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 = import_react134.css`
22434
+ var richTextToolbarButtonActive = import_react139.css`
22031
22435
  background: var(--gray-200);
22032
22436
  `;
22033
- var toolbarIcon = import_react134.css`
22437
+ var toolbarIcon = import_react139.css`
22034
22438
  color: inherit;
22035
22439
  `;
22036
- var toolbarChevron = import_react134.css`
22440
+ var toolbarChevron = import_react139.css`
22037
22441
  margin-left: var(--spacing-xs);
22038
22442
  `;
22039
22443
  var RichTextToolbarIcon = ({ icon }) => {
22040
- return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Icon, { icon, css: toolbarIcon, size: "1rem" });
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, import_react135.useCallback)(() => {
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, import_utils6.$findMatchingParent)(anchorNode, (e) => {
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, import_utils6.$getNearestNodeOfType)(anchorNode, import_list2.ListNode);
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, import_react135.useEffect)(() => {
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, import_react135.useEffect)(() => {
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, import_jsx_runtime117.jsxs)("div", { css: toolbar, children: [
22150
- /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
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, import_jsx_runtime117.jsxs)("button", { css: richTextToolbarButton, title: "Text styles", children: [
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, import_jsx_runtime117.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
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, import_jsx_runtime117.jsx)(
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, import_jsx_runtime117.jsx)(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
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, import_jsx_runtime117.jsxs)("div", { css: toolbarGroup, children: [
22182
- visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
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, import_jsx_runtime117.jsx)(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
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, import_jsx_runtime117.jsx)(
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, import_jsx_runtime117.jsx)("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
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, import_jsx_runtime117.jsx)(
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, import_jsx_runtime117.jsxs)("div", { css: toolbarGroup, children: [
22215
- linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
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, import_jsx_runtime117.jsx)(RichTextToolbarIcon, { icon: "link" })
22626
+ children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(RichTextToolbarIcon, { icon: "link" })
22223
22627
  }
22224
22628
  ) }) : null,
22225
- visibleLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(import_jsx_runtime117.Fragment, { children: [
22226
- visibleLists.has("unorderedList") ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
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, import_jsx_runtime117.jsx)(RichTextToolbarIcon, { icon: "layout-list" })
22640
+ children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(RichTextToolbarIcon, { icon: "layout-list" })
22237
22641
  }
22238
22642
  ) }) : null,
22239
- visibleLists.has("orderedList") ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
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, import_jsx_runtime117.jsx)(RichTextToolbarIcon, { icon: "layout-list-numbered" })
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, import_jsx_runtime117.jsx)(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
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, import_jsx_runtime117.jsx)(RichTextToolbarIcon, { icon: "quote" })
22664
+ children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(RichTextToolbarIcon, { icon: "quote" })
22261
22665
  }
22262
22666
  ) }) : null,
22263
- codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
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, import_jsx_runtime117.jsx)(RichTextToolbarIcon, { icon: "code-slash" })
22674
+ children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(RichTextToolbarIcon, { icon: "code-slash" })
22271
22675
  }
22272
22676
  ) }) : null
22273
22677
  ] }) : null,
22274
- customControls ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { css: toolbarGroup, children: customControls }) : null
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, import_react135.useMemo)(() => {
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, import_react135.useMemo)(() => {
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, import_react135.useMemo)(() => {
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, import_react135.useState)([]);
22299
- const visibleFormatsWithIcon = (0, import_react135.useMemo)(() => {
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, import_react135.useMemo)(() => {
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, import_react135.useState)("paragraph");
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, import_react135.useMemo)(() => {
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, import_react135.useState)(false);
22335
- const linkElementVisible = (0, import_react135.useMemo)(() => {
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, import_react135.useMemo)(() => {
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, import_react135.useMemo)(() => {
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, import_react135.useMemo)(() => {
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, import_react135.useMemo)(() => {
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 import_jsx_runtime118 = require("@emotion/react/jsx-runtime");
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, import_jsx_runtime118.jsxs)(
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, import_jsx_runtime118.jsx)(
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, import_jsx_runtime118.jsx)(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_jsx_runtime118.Fragment, { children: menuItems }) }) : null
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 = import_react136.css`
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 = import_react136.css`
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 = import_react136.css`
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 = import_react136.css`
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, import_jsx_runtime118.jsxs)(import_jsx_runtime118.Fragment, { children: [
22557
- /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_LexicalComposer.LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
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, import_react137.useRef)(null);
22998
+ const editorContainerRef = (0, import_react142.useRef)(null);
22595
22999
  const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
22596
- (0, import_react137.useEffect)(() => {
23000
+ (0, import_react142.useEffect)(() => {
22597
23001
  if (onRichTextInit) {
22598
23002
  onRichTextInit(editor);
22599
23003
  }
22600
23004
  }, [editor, onRichTextInit]);
22601
- (0, import_react137.useEffect)(() => {
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, import_react137.useEffect)(() => {
23017
+ (0, import_react142.useEffect)(() => {
22614
23018
  editor.setEditable(!readOnly);
22615
23019
  }, [editor, readOnly]);
22616
- return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(import_jsx_runtime118.Fragment, { children: [
22617
- readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(RichTextToolbar_default, { config, customControls }),
22618
- /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
22619
- /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
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, import_jsx_runtime118.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
22623
- placeholder: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
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, import_jsx_runtime118.jsx)(import_LexicalListPlugin.ListPlugin, {}),
22628
- readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
22629
- /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
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, import_jsx_runtime118.jsx)(ListIndentPlugin, { maxDepth: 4 }),
22640
- /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(DisableStylesPlugin, {}),
22641
- /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
22642
- /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_jsx_runtime118.Fragment, { children })
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 import_react138 = require("react");
22650
- var import_jsx_runtime119 = require("@emotion/react/jsx-runtime");
22651
- var ParameterSelect = (0, import_react138.forwardRef)(
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, import_jsx_runtime119.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
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, import_react138.forwardRef)(
23061
+ var ParameterSelectInner = (0, import_react143.forwardRef)(
22658
23062
  ({ defaultOption, options, ...props }, ref) => {
22659
23063
  const { id, label, hiddenLabel } = useParameterShell();
22660
- return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
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, import_jsx_runtime119.jsx)("option", { value: "", children: defaultOption }) : null,
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, import_jsx_runtime119.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
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 import_react139 = require("react");
22683
- var import_jsx_runtime120 = require("@emotion/react/jsx-runtime");
22684
- var ParameterTextarea = (0, import_react139.forwardRef)((props, ref) => {
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, import_jsx_runtime120.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
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, import_react139.forwardRef)(({ ...props }, ref) => {
23092
+ var ParameterTextareaInner = (0, import_react144.forwardRef)(({ ...props }, ref) => {
22689
23093
  const { id, label, hiddenLabel } = useParameterShell();
22690
- return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
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 import_react140 = require("react");
22705
- var import_jsx_runtime121 = require("@emotion/react/jsx-runtime");
22706
- var ParameterToggle = (0, import_react140.forwardRef)((props, ref) => {
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, import_jsx_runtime121.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
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, import_react140.forwardRef)(
23114
+ var ParameterToggleInner = (0, import_react145.forwardRef)(
22711
23115
  ({ children, ...props }, ref) => {
22712
23116
  const { id, label } = useParameterShell();
22713
- return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("label", { css: inputToggleLabel2, children: [
22714
- /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
22715
- /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { css: inlineLabel2, children: label }),
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 import_react141 = require("@emotion/react");
22727
- var container3 = import_react141.css`
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: import_react141.css`
23141
+ primary: import_react146.css`
22738
23142
  --progress-color: var(--accent-light);
22739
23143
  `,
22740
- secondary: import_react141.css`
23144
+ secondary: import_react146.css`
22741
23145
  --progress-color: var(--accent-alt-light);
22742
23146
  `,
22743
- destructive: import_react141.css`
23147
+ destructive: import_react146.css`
22744
23148
  --progress-color: var(--brand-secondary-5);
22745
23149
  `
22746
23150
  };
22747
- var slidingBackgroundPosition = import_react141.keyframes`
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 = import_react141.css`
23159
+ var determinate = import_react146.css`
22756
23160
  background-color: var(--progress-color);
22757
23161
  `;
22758
- var indeterminate = import_react141.css`
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 = import_react141.css`
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 import_jsx_runtime122 = require("@emotion/react/jsx-runtime");
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, import_jsx_runtime122.jsx)(
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, import_jsx_runtime122.jsx)(
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 import_react143 = require("@emotion/react");
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 import_react144 = require("react");
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 import_react142 = require("@emotion/react");
22830
- var progressListStyles = import_react142.css`
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 = import_react142.css`
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 import_jsx_runtime123 = require("@emotion/react/jsx-runtime");
23247
+ var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
22844
23248
  var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
22845
- const itemsWithStatus = (0, import_react144.useMemo)(() => {
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, import_jsx_runtime123.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
22858
- return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
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, import_react144.useMemo)(() => {
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, import_react144.useMemo)(() => {
23293
+ const statusStyles = (0, import_react149.useMemo)(() => {
22890
23294
  if (error) {
22891
- return errorLevel === "caution" ? import_react143.css`
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
- ` : import_react143.css`
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: import_react143.css`
23308
+ completed: import_react148.css`
22905
23309
  opacity: 0.75;
22906
23310
  `,
22907
- inProgress: import_react143.css`
23311
+ inProgress: import_react148.css`
22908
23312
  -webkit-text-stroke-width: thin;
22909
23313
  `,
22910
- queued: import_react143.css`
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, import_jsx_runtime123.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
22917
- /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
22918
- /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { children: [
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, import_jsx_runtime123.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
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 import_react146 = require("@emotion/react");
23331
+ var import_react151 = require("@emotion/react");
22928
23332
  var import_CgCheck6 = require("@react-icons/all-files/cg/CgCheck");
22929
- var import_react147 = require("react");
23333
+ var import_react152 = require("react");
22930
23334
 
22931
23335
  // src/components/SegmentedControl/SegmentedControl.styles.ts
22932
23336
  init_emotion_jsx_shim();
22933
- var import_react145 = require("@emotion/react");
22934
- var segmentedControlRootStyles = import_react145.css`
23337
+ var import_react150 = require("@emotion/react");
23338
+ var segmentedControlRootStyles = import_react150.css`
22935
23339
  position: relative;
22936
23340
  `;
22937
- var segmentedControlScrollIndicatorsStyles = import_react145.css`
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 = import_react145.css`
23369
+ var segmentedControlScrollIndicatorStartVisibleStyles = import_react150.css`
22966
23370
  &::before {
22967
23371
  opacity: 1;
22968
23372
  }
22969
23373
  `;
22970
- var segmentedControlScrollIndicatorEndVisibleStyles = import_react145.css`
23374
+ var segmentedControlScrollIndicatorEndVisibleStyles = import_react150.css`
22971
23375
  &::after {
22972
23376
  opacity: 1;
22973
23377
  }
22974
23378
  `;
22975
- var segmentedControlWrapperStyles = import_react145.css`
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 = import_react145.css`
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 = import_react145.css`
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 = import_react145.css`
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 = import_react145.css`
23422
+ var segmentedControlInputStyles = import_react150.css`
23019
23423
  ${accessibleHidden}
23020
23424
  `;
23021
- var segmentedControlLabelStyles = (checked, disabled2) => import_react145.css`
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 = import_react145.css`
23492
+ var segmentedControlLabelIconOnlyStyles = import_react150.css`
23089
23493
  padding-inline: 0.5em;
23090
23494
  `;
23091
- var segmentedControlLabelCheckStyles = import_react145.css`
23495
+ var segmentedControlLabelCheckStyles = import_react150.css`
23092
23496
  opacity: 0.5;
23093
23497
  `;
23094
- var segmentedControlLabelContentStyles = import_react145.css`
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 = import_react145.css`
23505
+ var segmentedControlLabelTextStyles = import_react150.css`
23102
23506
  white-space: nowrap;
23103
23507
  `;
23104
23508
 
23105
23509
  // src/components/SegmentedControl/SegmentedControl.tsx
23106
- var import_jsx_runtime124 = require("@emotion/react/jsx-runtime");
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, import_react147.useRef)(null);
23122
- const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react147.useState)(false);
23123
- const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react147.useState)(false);
23124
- const onOptionChange = (0, import_react147.useCallback)(
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, import_react147.useMemo)(() => {
23536
+ const sizeStyles = (0, import_react152.useMemo)(() => {
23133
23537
  const map = {
23134
- sm: (0, import_react146.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
23135
- md: (0, import_react146.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
23136
- lg: (0, import_react146.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
23137
- xl: (0, import_react146.css)({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
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, import_react147.useMemo)(() => {
23545
+ const isIconOnly = (0, import_react152.useMemo)(() => {
23142
23546
  return options.every((option) => option && option.icon && !option.label);
23143
23547
  }, [options]);
23144
- (0, import_react147.useEffect)(() => {
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, import_jsx_runtime124.jsxs)("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
23166
- /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
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, import_jsx_runtime124.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
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, import_jsx_runtime124.jsxs)(
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, import_jsx_runtime124.jsx)(
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, import_jsx_runtime124.jsx)(import_CgCheck6.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
23209
- /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
23210
- !option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
23211
- !text || hideOptionText ? null : /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
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, import_jsx_runtime124.jsx)(
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 import_react148 = require("@emotion/react");
23240
- var lightFadingOut = import_react148.keyframes`
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 = import_react148.css`
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 import_jsx_runtime125 = require("@emotion/react/jsx-runtime");
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, import_jsx_runtime125.jsx)(
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 React24 = __toESM(require("react"));
23683
+ var import_react155 = require("react");
23280
23684
 
23281
23685
  // src/components/Switch/Switch.styles.ts
23282
23686
  init_emotion_jsx_shim();
23283
- var import_react149 = require("@emotion/react");
23284
- var SwitchInputContainer = import_react149.css`
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 = import_react149.css`
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: 3px solid var(--gray-800);
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 = import_react149.css`
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 = import_react149.css`
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 = import_react149.css`
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 import_jsx_runtime126 = require("@emotion/react/jsx-runtime");
23368
- var Switch = React24.forwardRef(
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, import_jsx_runtime126.jsxs)(import_jsx_runtime126.Fragment, { children: [
23375
- /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
23376
- /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
23377
- /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("span", { css: SwitchInputLabel, children: label })
23378
- ] }),
23379
- additionalText ? /* @__PURE__ */ (0, import_jsx_runtime126.jsx)("p", { css: SwitchText, children: additionalText }) : null,
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 React25 = __toESM(require("react"));
23799
+ var React24 = __toESM(require("react"));
23388
23800
 
23389
23801
  // src/components/Table/Table.styles.ts
23390
23802
  init_emotion_jsx_shim();
23391
- var import_react150 = require("@emotion/react");
23392
- var table = ({ cellPadding = "var(--spacing-base) var(--spacing-md)" }) => import_react150.css`
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 = import_react150.css`
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 = import_react150.css`
23409
- border-bottom: 1px solid var(--gray-200);
23828
+ var tableRow = import_react156.css`
23829
+ border-bottom: 1px solid var(--gray-100);
23410
23830
  `;
23411
- var tableCellHead = import_react150.css`
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 import_jsx_runtime127 = require("@emotion/react/jsx-runtime");
23419
- var Table = React25.forwardRef(
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, import_jsx_runtime127.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
23841
+ return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
23422
23842
  }
23423
23843
  );
23424
- var TableHead = React25.forwardRef(
23844
+ var TableHead = React24.forwardRef(
23425
23845
  ({ children, ...otherProps }, ref) => {
23426
- return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
23846
+ return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
23427
23847
  }
23428
23848
  );
23429
- var TableBody = React25.forwardRef(
23849
+ var TableBody = React24.forwardRef(
23430
23850
  ({ children, ...otherProps }, ref) => {
23431
- return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("tbody", { ref, ...otherProps, children });
23851
+ return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("tbody", { ref, ...otherProps, children });
23432
23852
  }
23433
23853
  );
23434
- var TableFoot = React25.forwardRef(
23854
+ var TableFoot = React24.forwardRef(
23435
23855
  ({ children, ...otherProps }, ref) => {
23436
- return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("tfoot", { ref, ...otherProps, children });
23856
+ return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("tfoot", { ref, ...otherProps, children });
23437
23857
  }
23438
23858
  );
23439
- var TableRow = React25.forwardRef(
23859
+ var TableRow = React24.forwardRef(
23440
23860
  ({ children, ...otherProps }, ref) => {
23441
- return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
23861
+ return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
23442
23862
  }
23443
23863
  );
23444
- var TableCellHead = React25.forwardRef(
23864
+ var TableCellHead = React24.forwardRef(
23445
23865
  ({ children, ...otherProps }, ref) => {
23446
- return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
23866
+ return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
23447
23867
  }
23448
23868
  );
23449
- var TableCellData = React25.forwardRef(
23869
+ var TableCellData = React24.forwardRef(
23450
23870
  ({ children, ...otherProps }, ref) => {
23451
- return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("td", { ref, ...otherProps, children });
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 import_react152 = require("@ariakit/react");
23458
- var import_react153 = require("react");
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 import_react151 = require("@emotion/react");
23463
- var tabButtonStyles = import_react151.css`
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 = import_react151.css`
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 import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
23907
+ var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
23488
23908
  var useCurrentTab = () => {
23489
- const context = (0, import_react152.useTabStore)();
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, import_react153.useMemo)(() => {
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, import_react152.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
23509
- const onTabSelect = (0, import_react153.useCallback)(
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, import_react153.useEffect)(() => {
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, import_jsx_runtime128.jsx)(import_react152.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
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, import_jsx_runtime128.jsx)(import_react152.TabList, { ...props, css: tabButtonGroupStyles, children });
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, import_jsx_runtime128.jsx)(import_react152.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
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, import_jsx_runtime128.jsx)(import_react152.TabPanel, { ...props, children });
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 import_react154 = require("@emotion/react");
23550
- var StatusBulletContainer = import_react154.css`
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 = import_react154.css`
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 = import_react154.css`
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 = import_react154.css`
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 = import_react154.css`
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 = import_react154.css`
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 = import_react154.css`
24025
+ var StatusPublished = import_react160.css`
23607
24026
  &:before {
23608
24027
  background: var(--accent-dark);
23609
24028
  }
23610
24029
  `;
23611
- var StatusOrphan = import_react154.css`
24030
+ var StatusOrphan = import_react160.css`
23612
24031
  &:before {
23613
24032
  background: var(--brand-secondary-5);
23614
24033
  }
23615
24034
  `;
23616
- var StatusUnknown = import_react154.css`
24035
+ var StatusUnknown = import_react160.css`
23617
24036
  &:before {
23618
24037
  background: var(--gray-800);
23619
24038
  }
23620
24039
  `;
23621
- var StatusDeleted = import_react154.css`
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 import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
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, import_jsx_runtime129.jsx)(
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,