@uniformdev/design-system 18.18.1-alpha.12 → 18.19.1-alpha.7

package/dist/index.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -37,6 +41,7 @@ __export(src_exports, {
   Card: () => Card,
   CardContainer: () => CardContainer2,
   CheckboxWithInfo: () => CheckboxWithInfo,
+  ConnectToDataElementButton: () => ConnectToDataElementButton,
   Counter: () => Counter,
   CreateTeamIntegrationTile: () => CreateTeamIntegrationTile,
   DashedBox: () => DashedBox,
@@ -80,6 +85,30 @@ __export(src_exports, {
   MenuItemSeparator: () => MenuItemSeparator,
   PageHeaderSection: () => PageHeaderSection,
   Paragraph: () => Paragraph,
+  ParameterDataResource: () => ParameterDataResource,
+  ParameterDrawerHeader: () => ParameterDrawerHeader,
+  ParameterGroup: () => ParameterGroup,
+  ParameterImage: () => ParameterImage,
+  ParameterImageInner: () => ParameterImageInner,
+  ParameterInput: () => ParameterInput,
+  ParameterInputInner: () => ParameterInputInner,
+  ParameterLabel: () => ParameterLabel,
+  ParameterLink: () => ParameterLink,
+  ParameterLinkInner: () => ParameterLinkInner,
+  ParameterMenuButton: () => ParameterMenuButton,
+  ParameterNameAndPublicIdInput: () => ParameterNameAndPublicIdInput,
+  ParameterOverrideMarker: () => ParameterOverrideMarker,
+  ParameterRichText: () => ParameterRichText,
+  ParameterRichTextInner: () => ParameterRichTextInner,
+  ParameterSelect: () => ParameterSelect,
+  ParameterSelectInner: () => ParameterSelectInner,
+  ParameterShell: () => ParameterShell,
+  ParameterShellContext: () => ParameterShellContext,
+  ParameterShellPlaceholder: () => ParameterShellPlaceholder,
+  ParameterTextarea: () => ParameterTextarea,
+  ParameterTextareaInner: () => ParameterTextareaInner,
+  ParameterToggle: () => ParameterToggle,
+  ParameterToggleInner: () => ParameterToggleInner,
   ResolveIcon: () => ResolveIcon,
   ScrollableList: () => ScrollableList,
   ScrollableListInputItem: () => ScrollableListInputItem,
@@ -117,6 +146,7 @@ __export(src_exports, {
   buttonSecondaryInvert: () => buttonSecondaryInvert,
   buttonTertiary: () => buttonTertiary,
   buttonUnimportant: () => buttonUnimportant,
+  extractParameterProps: () => extractParameterProps,
   fadeIn: () => fadeIn,
   fadeInBottom: () => fadeInBottom,
   fadeInLtr: () => fadeInLtr,
@@ -141,6 +171,7 @@ __export(src_exports, {
   useIconContext: () => useIconContext,
   useMenuContext: () => useMenuContext,
   useOutsideClick: () => useOutsideClick,
+  useParameterShell: () => useParameterShell,
   useShortcut: () => useShortcut
 });
 module.exports = __toCommonJS(src_exports);
@@ -1343,7 +1374,9 @@ var customIcons = {
 // src/components/Icons/IconsProvider.tsx
 var import_jsx_runtime4 = require("@emotion/react/jsx-runtime");
 var IconContext = (0, import_react12.createContext)({
+  /** object mapping of available icons */
   iconsMap: {},
+  /** sets the loading state of the icon */
   isLoading: true
 });
 function useIconContext() {
@@ -8422,6 +8455,7 @@ var Button = React5.forwardRef(
       ghost: buttonGhost,
       ghostDestructive: buttonGhostDestructive,
       unimportant: buttonUnimportant,
+      /** @deprecated */
       tertiary: buttonTertiary
     };
     const btnSize = {
@@ -9161,6 +9195,9 @@ var counterIcon = import_react31.css`
 // src/components/Counter/Counter.tsx
 var import_jsx_runtime26 = require("@emotion/react/jsx-runtime");
 var Counter = ({ count }) => {
+  if (typeof count === "undefined") {
+    return null;
+  }
   const isTripleDigits = count > 99 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { css: counterTripleValue, title: `${count}`, children: [
     "99",
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon })
@@ -9221,6 +9258,7 @@ var React8 = __toESM(require("react"));
 // src/components/Details/Details.styles.ts
 var import_react33 = require("@emotion/react");
 var details = import_react33.css`
+  cursor: pointer;
   &[open] {
     & > summary svg {
       rotate: 0deg;
@@ -9855,6 +9893,7 @@ function InputComboBox(props) {
             ...base,
             margin: "0",
             padding: "0",
+            // Prevents input shadow when focused within the select area
             "& > input": {
               boxShadow: "none !important"
             },
@@ -9874,11 +9913,13 @@ function InputComboBox(props) {
           return {
             ...base,
             className: "input-combobox-control",
+            // Used to provide overriding styles for blue focus ring and offset borders
             border: state.isFocused ? "1px solid transparent" : "1px solid var(--gray-400)",
             lineHeight: 1.25,
             outline: state.isFocused ? "1px solid var(--brand-secondary-1)" : "none",
             outlineOffset: 0,
             minHeight: "58px",
+            // matches the min-height of other input fields
             boxShadow: "none",
             "&:hover": {
               boxShadow: "none"
@@ -10312,6 +10353,7 @@ var LimitsBar = ({ current, max, label }) => {
   const colorMap = {
     base: "var(--gray-400)",
     warn: "#facc15",
+    // Not in the design system token at present
     danger: "var(--brand-secondary-5)"
   };
   const statusColor = progressBarValue === 100 ? colorMap.danger : progressBarValue >= 75 ? colorMap.warn : colorMap.base;
@@ -11243,224 +11285,1237 @@ var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
   ] });
 };
 
-// src/components/Skeleton/Skeleton.styles.ts
+// src/components/Tooltip/Tooltip.tsx
+var import_react64 = __toESM(require("react"));
+var import_Tooltip = require("reakit/Tooltip");
+
+// src/components/Tooltip/Tooltip.styles.ts
 var import_react63 = require("@emotion/react");
-var lightFadingOut = import_react63.keyframes`
-  from { opacity: 0.1; }
-  to { opacity: 0.025; }
+var TooltipContainer = import_react63.css`
+  border: 2px solid var(--gray-300);
+  border-radius: var(--rounded-base);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  color: var(--gray-500);
+  font-size: var(--fs-xs);
+  background: var(--white);
 `;
-var skeletonStyles = import_react63.css`
-  animation: ${lightFadingOut} 1s ease-out infinite alternate;
-  background-color: var(--gray-900);
+var TooltipArrowStyles = import_react63.css`
+  svg {
+    fill: var(--gray-300);
+  }
 `;
 
-// src/components/Skeleton/Skeleton.tsx
+// src/components/Tooltip/Tooltip.tsx
 var import_jsx_runtime63 = require("@emotion/react/jsx-runtime");
-var Skeleton = ({
-  width = "100%",
-  height = "1.25rem",
-  inline = false,
-  circle = false,
+function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
+  const tooltip = (0, import_Tooltip.useTooltipState)({ placement });
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_Tooltip.TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => import_react64.default.cloneElement(children, referenceProps) }),
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_Tooltip.Tooltip, { ...tooltip, ...props, css: TooltipContainer, visible: visible != null ? visible : tooltip.visible, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_Tooltip.TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
+      title
+    ] })
+  ] });
+}
+
+// src/components/ParameterInputs/styles/ParameterBindingButton.styles.ts
+var import_react65 = require("@emotion/react");
+var inputIconBtn = import_react65.css`
+  align-items: center;
+  border: none;
+  border-radius: var(--rounded-base);
+  background: none;
+  display: flex;
+  padding: var(--spacing-2xs);
+  transition: background var(--duration-fast) var(--timing-ease-out),
+    color var(--duration-fast) var(--timing-ease-out);
+
+  &:hover,
+  &[aria-pressed='true']:not(:disabled) {
+    background: var(--brand-secondary-3);
+    color: var(--white);
+  }
+`;
+
+// src/components/ParameterInputs/ConnectToDataElementButton.tsx
+var import_jsx_runtime64 = require("@emotion/react/jsx-runtime");
+var ConnectToDataElementButton = ({
+  icon,
+  iconColor,
   children,
-  ...otherProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-  "div",
-  {
-    css: [
-      skeletonStyles,
+  isBound,
+  isLocked,
+  ...props
+}) => {
+  const title = isLocked ? "Read-only pattern parameter" : isBound ? "Connected to external content. Click to edit" : "Click to connect to external content";
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Tooltip, { title, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("button", { css: inputIconBtn, type: "button", "aria-pressed": isBound, ...props, disabled: isLocked, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      Icon,
       {
-        width: circle ? height : width,
-        height,
-        display: inline ? "inline-block" : "block",
-        borderRadius: circle ? "var(--rounded-full)" : "var(--rounded-md)"
+        icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
+        iconColor: iconColor ? iconColor : "currentColor",
+        size: "1rem"
       }
-    ],
-    ...otherProps,
-    "aria-busy": "true",
-    "aria-label": "Loading...",
+    ),
     children
-  }
-);
+  ] }) });
+};
 
-// src/components/Switch/Switch.tsx
-var React13 = __toESM(require("react"));
+// src/components/ParameterInputs/hooks/ParameterShellContext.tsx
+var import_react66 = require("react");
+var ParameterShellContext = (0, import_react66.createContext)({
+  id: "",
+  label: "",
+  hiddenLabel: void 0,
+  errorMessage: void 0,
+  onManuallySetErrorMessage: () => {
+  }
+});
+var useParameterShell = () => {
+  const { id, label, hiddenLabel, errorMessage, onManuallySetErrorMessage } = (0, import_react66.useContext)(ParameterShellContext);
+  return {
+    id,
+    label,
+    hiddenLabel,
+    errorMessage,
+    onManuallySetErrorMessage
+  };
+};
 
-// src/components/Switch/Switch.styles.ts
-var import_react64 = require("@emotion/react");
-var SwitchInputContainer = import_react64.css`
-  cursor: pointer;
-  display: inline-block;
+// src/components/ParameterInputs/styles/ParameterInput.styles.ts
+var import_react67 = require("@emotion/react");
+var inputContainer2 = import_react67.css`
   position: relative;
-  margin-right: var(--spacing-sm);
-  transition: var(--duration-fast) var(--timing-ease-out);
-  vertical-align: middle;
-  user-select: none;
+
+  &:hover,
+  &:focus,
+  &:focus-within {
+    .parameter-menu {
+      opacity: var(--opacity-100);
+      translate: 0 0;
+    }
+  }
 `;
-var SwitchInput = import_react64.css`
-  appearance: none;
-  border-radius: var(--rounded-full);
-  background-color: var(--white);
-  border: 2px solid var(--gray-400);
-  cursor: pointer;
-  position: absolute;
+var labelText2 = import_react67.css`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-xs);
+  font-weight: var(--fw-regular);
+  margin: 0 0 var(--spacing-xs);
+`;
+var input2 = import_react67.css`
   display: block;
-  width: var(--spacing-md);
-  height: var(--spacing-md);
-  transition: transform var(--duration-fast) var(--timing-ease-out),
-    background-color var(--duration-fast) var(--timing-ease-out),
-    background-image var(--duration-fast) var(--timing-ease-out);
-  z-index: var(--z-10);
+  appearance: none;
+  box-sizing: border-box;
+  background: var(--white);
+  border: 1px solid var(--white);
+  border-radius: var(--rounded-sm);
+  color: var(--gray-700);
+  font-size: var(--fs-sm);
+  line-height: 1.2;
+  min-height: 2rem;
+  padding: var(--spacing-sm);
+  width: 100%;
+  position: relative;
+  white-space: wrap;
+  transition-property: background, border-color, color, box-shadow, border-radius;
+  transition-duration: var(--duration-fast);
+  transition-timing-function: var(--timing-ease-out);
 
-  &:focus {
-    outline: 3px solid var(--brand-secondary-1);
-    outline-offset: 2px;
+  &::placeholder {
+    color: var(--gray-400);
   }
 
-  &:checked {
-    background-color: var(--brand-secondary-3);
-    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='M10.5858 13.4142L7.75735 10.5858L6.34314 12L10.5858 16.2427L17.6568 9.1716L16.2426 7.75739L10.5858 13.4142Z' fill='%23fff' /%3E%3C/svg%3E");
-    background-position: center center;
-    border-color: var(--brand-secondary-3);
-    transform: translateX(var(--spacing-base));
-
-    &:hover,
-    &:focus {
-      border-color: var(--brand-secondary-1);
-      background-color: var(--brand-secondary-1);
-    }
+  &:focus,
+  &:focus-within {
+    border-radius: var(--rounded-md);
+    box-shadow: none;
+    border: 1px solid var(--gray-300);
+    outline: none;
   }
 
-  &:disabled {
+  &:disabled,
+  &:disabled::placeholder,
+  &:disabled:hover {
+    border-radius: var(--rounded-md);
     cursor: not-allowed;
+    color: var(--gray-400);
   }
-`;
-var SwitchInputDisabled = import_react64.css`
-  opacity: var(--opacity-50);
-  cursor: not-allowed;
 
-  & > :before {
+  &[readonly] {
     cursor: not-allowed;
+    color: var(--gray-400);
   }
 `;
-var SwitchInputLabel = import_react64.css`
+var selectInput = import_react67.css`
+  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");
+  background-position: right var(--spacing-sm) center;
+  background-repeat: no-repeat;
+  background-size: 1rem;
+  padding-right: var(--spacing-xl);
+`;
+var inputWrapper = import_react67.css`
+  display: flex; // used to correct overflow with chrome textarea
+  position: relative;
+`;
+var inputIcon2 = import_react67.css`
   align-items: center;
-  color: var(--brand-secondary-1);
+  background: var(--white);
+  border-radius: var(--rounded-md) 0 0 var(--rounded-md);
+  border-right: 1px solid var(--gray-100);
+  color: var(--gray-300);
+  display: flex;
+  justify-content: center;
+  transition: background var(--duration-fast) var(--timing-ease-out);
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: var(--spacing-lg);
+  z-index: var(--z-10);
+`;
+var inputToggleLabel2 = import_react67.css`
+  align-items: center;
+  background: var(--white);
+  cursor: pointer;
   display: inline-flex;
-  font-weight: var(--fw-bold);
-  line-height: 1.25;
-  padding-inline: var(--spacing-2xl) 0;
+  gap: var(--spacing-sm);
+  font-weight: var(--fw-regular);
+  font-size: var(--fs-sm);
+  min-height: var(--spacing-md);
+  position: relative;
+`;
+var toggleInput2 = import_react67.css`
+  appearance: none;
+  border: 1px solid var(--gray-300);
+  background: var(--white);
+  width: var(--spacing-md);
+  height: var(--spacing-md);
+  transition: background var(--duration-fast) var(--timing-ease-out),
+    border-color var(--duration-fast) var(--timing-ease-out),
+    color var(--duration-fast) var(--timing-ease-out);
+  font-size: var(--fs-sm);
+  line-height: 1;
 
-  &:before {
+  position: absolute;
+  left: 0;
+
+  &:where([type='radio']) {
     border-radius: var(--rounded-full);
-    background-color: var(--gray-300);
-    content: '';
-    cursor: pointer;
-    display: block;
-    overflow: hidden;
-    width: var(--spacing-xl);
-    height: var(--spacing-md);
-    position: absolute;
-    left: 0;
-    top: 0;
   }
-`;
-var SwitchText = import_react64.css`
-  color: var(--gray-500);
-  font-size: var(--fs-sm);
-  padding-inline: var(--spacing-2xl) 0;
-`;
 
-// src/components/Switch/Switch.tsx
-var import_jsx_runtime64 = require("@emotion/react/jsx-runtime");
-var Switch = React13.forwardRef(
-  ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
-    let additionalText = infoText;
-    if (infoText && toggleText) {
-      additionalText = inputProps.checked ? toggleText : infoText;
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { css: SwitchInputLabel, children: label })
-      ] }),
-      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { css: SwitchText, children: additionalText }) : null,
-      children
-    ] });
+  &:where([type='checkbox']) {
+    border-radius: var(--rounded-md);
   }
-);
 
-// src/components/Table/Table.tsx
-var React14 = __toESM(require("react"));
+  &:checked,
+  &:checked:hover,
+  &:checked:focus {
+    background: var(--brand-secondary-3)
+      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='M10.5858 13.4142L7.75735 10.5858L6.34314 12L10.5858 16.2427L17.6568 9.1716L16.2426 7.75739L10.5858 13.4142Z' fill='%23fff' /%3E%3C/svg%3E")
+      no-repeat center center;
+    border-color: var(--brand-secondary-3);
+    color: var(--white);
+  }
 
-// src/components/Table/Table.styles.ts
-var import_react65 = require("@emotion/react");
-var table = import_react65.css`
-  border-bottom: 1px solid var(--gray-400);
-  border-collapse: collapse;
-  min-width: 100%;
-  table-layout: auto;
-`;
-var tableHead = import_react65.css`
-  background: var(--gray-100);
-  color: var(--brand-secondary-1);
-  text-align: left;
-`;
-var tableRow = import_react65.css`
-  border-bottom: 1px solid var(--gray-200);
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--gray-400);
+    border-color: var(--gray-300);
+  }
 `;
-var tableCellHead = import_react65.css`
+var inlineLabel2 = import_react67.css`
+  padding-left: var(--spacing-lg);
   font-size: var(--fs-sm);
-  padding: var(--spacing-base) var(--spacing-md);
-  text-transform: uppercase;
-  font-weight: var(--fw-bold);
-`;
-var tableCellData = import_react65.css`
-  padding: var(--spacing-base) var(--spacing-md);
-`;
+  font-weight: var(--fw-regular);
+  translate: 0 1px; // brings the span into central alignment
+  pointer-events: none; // prevents e2e failing on click event, this does not happen to the end user
 
-// src/components/Table/Table.tsx
+  > a {
+    color: var(--brand-secondary-3);
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+`;
+var inputMenu = import_react67.css`
+  background: none;
+  border: none;
+  padding: 0;
+  position: absolute;
+  top: calc(var(--spacing-md) * -1.2);
+  right: 0;
+  opacity: var(--opacity-50);
+  transition: opacity var(--duration-fast) var(--timing-ease-out);
+
+  // css trick to style the input like a hover or active state when the menu button is active or hovered
+  &:hover,
+  &[aria-expanded='true'] {
+    ~ input,
+    ~ select,
+    ~ textarea {
+      'order-radius: var(--rounded-md);
+    }
+
+  }
+`;
+var textarea2 = import_react67.css`
+  resize: vertical;
+  min-height: 2rem;
+`;
+var imageWrapper = import_react67.css`
+  background: var(--white);
+`;
+var img = import_react67.css`
+  animation: ${fadeIn} var(--duration-fast) var(--timing-ease-out) forwards;
+  aspect-ratio: 1 / 1;
+  max-width: 100%;
+  height: auto;
+  opacity: var(--opacity-0);
+  margin-top: var(--spacing-sm);
+`;
+var dataConnectButton = import_react67.css`
+  align-items: center;
+  appearance: none;
+  box-sizing: border-box;
+  background-color: var(--white);
+  border: 1px solid var(--brand-secondary-3);
+  border-radius: var(--rounded-md);
+  color: var(--brand-secondary-3);
+  display: flex;
+  padding: var(--spacing-sm);
+  position: relative;
+  transition: background var(--duration-fast) var(--timing-ease-out),
+    outline-color var(--duration-fast) var(--timing-ease-out),
+    color var(--duration-fast) var(--timing-ease-out);
+  width: 100%;
+  font-weight: var(--fw-medium);
+  font-size: var(--fs-sm);
+  line-height: 1;
+  min-height: 34px;
+  justify-content: center;
+
+  &:focus,
+  &:focus-within {
+    outline: 1px solid var(--gray-300);
+    border-radius: var(--rounded-md);
+  }
+
+  &:disabled:hover,
+  &:disabled {
+    border-radius: var(--rounded-md);
+    cursor: not-allowed;
+    color: var(--gray-400);
+    pointer-events: none;
+  }
+`;
+var linkParameterBtn = import_react67.css`
+  border-radius: var(--rounded-base);
+  background: var(--white);
+  border: none;
+  color: var(--brand-secondary-3);
+  font-weight: var(--fw-regular);
+  font-size: var(--fs-sm);
+  line-height: 1;
+  position: absolute;
+  inset: 0 var(--spacing-base) 0 auto;
+  padding: 0 var(--spacing-base);
+`;
+var linkParameterInput = import_react67.css`
+  padding-right: calc(var(--spacing-2xl) + var(--spacing-base));
+`;
+var linkParameterIcon = import_react67.css`
+  align-items: center;
+  color: var(--brand-secondary-3);
+  display: flex;
+  justify-content: center;
+  padding: var(--spacing-2xs);
+  transition: color var(--duration-fast) var(--timing-ease-out);
+  margin-left: auto;
+
+  &:hover {
+    color: var(--brand-secondary-1);
+  }
+`;
+
+// src/components/ParameterInputs/ParameterDataResource.tsx
 var import_jsx_runtime65 = require("@emotion/react/jsx-runtime");
-var Table = React14.forwardRef(({ children, ...otherProps }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("table", { ref, css: table, ...otherProps, children });
+function ParameterDataResource({
+  label,
+  labelLeadingIcon,
+  id,
+  onConnectDatasource,
+  caption,
+  disabled,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { "data-testid": "parameter-data-connect-button", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { css: labelText2, children: [
+      labelLeadingIcon ? labelLeadingIcon : null,
+      label
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+      "button",
+      {
+        type: "button",
+        css: dataConnectButton,
+        "aria-controls": id,
+        disabled,
+        onClick: onConnectDatasource,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
+          children
+        ]
+      }
+    ),
+    caption ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Caption, { children: caption }) : null
+  ] });
+}
+
+// src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
+var import_react68 = require("@emotion/react");
+var ParameterDrawerHeaderContainer = import_react68.css`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-base);
+  justify-content: space-between;
+  margin-bottom: var(--spacing-sm);
+`;
+var ParameterDrawerHeaderTitleGroup = import_react68.css`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-sm);
+`;
+var ParameterDrawerHeaderTitle = import_react68.css`
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 16ch;
+`;
+
+// src/components/ParameterInputs/ParameterDrawerHeader.tsx
+var import_jsx_runtime66 = require("@emotion/react/jsx-runtime");
+var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { css: ParameterDrawerHeaderContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("header", { css: ParameterDrawerHeaderTitleGroup, children: [
+      iconBeforeTitle,
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title, children: title })
+    ] }),
+    children
+  ] });
+};
+
+// src/components/ParameterInputs/ParameterGroup.tsx
+var import_react70 = require("react");
+
+// src/components/ParameterInputs/styles/ParameterGroup.styles.ts
+var import_react69 = require("@emotion/react");
+var fieldsetStyles = import_react69.css`
+  &:disabled,
+  [readonly] {
+    pointer-events: none;
+
+    label,
+    legend {
+      opacity: var(--opacity-60);
+    }
+  }
+`;
+var fieldsetLegend2 = import_react69.css`
+  display: block;
+  font-weight: var(--fw-medium);
+  margin-bottom: var(--spacing-sm);
+`;
+
+// src/components/ParameterInputs/ParameterGroup.tsx
+var import_jsx_runtime67 = require("@emotion/react/jsx-runtime");
+var ParameterGroup = (0, import_react70.forwardRef)(
+  ({ legend, isDisabled, children, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("legend", { css: fieldsetLegend2, children: legend }),
+      children
+    ] });
+  }
+);
+
+// src/components/ParameterInputs/ParameterImage.tsx
+var import_react74 = require("react");
+
+// src/components/ParameterInputs/ParameterShell.tsx
+var import_react73 = require("react");
+
+// src/components/ParameterInputs/ParameterLabel.tsx
+var import_jsx_runtime68 = require("@emotion/react/jsx-runtime");
+var ParameterLabel = ({ id, asSpan, children, ...props }) => {
+  return !asSpan ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { "aria-labelledby": id, css: labelText2, children });
+};
+
+// src/components/ParameterInputs/ParameterMenuButton.tsx
+var import_react71 = require("react");
+var import_jsx_runtime69 = require("@emotion/react/jsx-runtime");
+var ParameterMenuButton = (0, import_react71.forwardRef)(
+  ({ label, children }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+      Menu,
+      {
+        menuLabel: `${label} menu`,
+        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+          "button",
+          {
+            className: "parameter-menu",
+            css: inputMenu,
+            type: "button",
+            "aria-label": `${label} options`,
+            ref,
+            children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Icon, { icon: "more-alt", iconColor: "currentColor" })
+          }
+        ),
+        children
+      }
+    );
+  }
+);
+
+// src/components/ParameterInputs/styles/ParameterShell.styles.ts
+var import_react72 = require("@emotion/react");
+var emptyParameterShell = import_react72.css`
+  border-radius: var(--rounded-sm);
+  background: var(--white);
+  flex-grow: 1;
+  padding: var(--spacing-xs);
+  position: relative;
+`;
+var emptyParameterShellText = import_react72.css`
+  background: var(--brand-secondary-6);
+  border-radius: var(--rounded-sm);
+  padding: var(--spacing-sm);
+  text-align: center;
+  font-size: var(--fs-sm);
+  margin: 0;
+`;
+var overrideMarker = import_react72.css`
+  border-radius: var(--rounded-sm);
+  border: 10px solid var(--gray-300);
+  border-left-color: transparent;
+  border-bottom-color: transparent;
+  position: absolute;
+  top: 0;
+  right: 0;
+`;
+
+// src/components/ParameterInputs/ParameterShell.tsx
+var import_jsx_runtime70 = require("@emotion/react/jsx-runtime");
+var extractParameterProps = (props) => {
+  const {
+    id,
+    label,
+    caption,
+    captionTestId,
+    errorMessage,
+    errorTestId,
+    hiddenLabel,
+    labelLeadingIcon,
+    menuItems,
+    onManuallySetErrorMessage,
+    title,
+    hasOverridingParams,
+    ...innerProps
+  } = props;
+  return {
+    shellProps: {
+      id,
+      label,
+      caption,
+      captionTestId,
+      errorMessage,
+      errorTestId,
+      hiddenLabel,
+      labelLeadingIcon,
+      menuItems,
+      onManuallySetErrorMessage,
+      title,
+      hasOverridingParams
+    },
+    innerProps
+  };
+};
+var ParameterShell = ({
+  label,
+  labelLeadingIcon,
+  hiddenLabel,
+  id,
+  errorMessage,
+  caption,
+  errorTestId,
+  captionTestId,
+  menuItems,
+  hasOverridingParams,
+  title,
+  children,
+  ...props
+}) => {
+  const [manualErrorMessage, setManualErrorMessage] = (0, import_react73.useState)(void 0);
+  const setErrorMessage = (message) => setManualErrorMessage(message);
+  const errorMessaging = errorMessage || manualErrorMessage;
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { css: inputContainer2, ...props, children: [
+    hiddenLabel || title ? null : /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(ParameterLabel, { id, css: labelText2, children: [
+      labelLeadingIcon ? labelLeadingIcon : null,
+      label
+    ] }),
+    !title ? null : /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(ParameterLabel, { id, asSpan: true, children: [
+      labelLeadingIcon ? labelLeadingIcon : null,
+      title
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { css: inputWrapper, children: [
+      menuItems ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        ParameterShellContext.Provider,
+        {
+          value: {
+            id,
+            label,
+            hiddenLabel,
+            errorMessage: errorMessaging,
+            onManuallySetErrorMessage: (message) => setErrorMessage(message)
+          },
+          children: children ? /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { css: emptyParameterShell, children: [
+            children,
+            hasOverridingParams ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ParameterOverrideMarker, {}) : null
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ParameterShellPlaceholder, { hasOverridingParams: true })
+        }
+      )
+    ] }),
+    caption ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Caption, { testId: captionTestId, children: caption }) : null,
+    errorMessaging ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null
+  ] });
+};
+var ParameterShellPlaceholder = ({ hasOverridingParams }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { role: "note", css: emptyParameterShell, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { css: emptyParameterShellText, children: "Use component swap to replace with a parameter slot component" }),
+    hasOverridingParams ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ParameterOverrideMarker, {}) : null
+  ] });
+};
+var ParameterOverrideMarker = () => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { role: "presentation", css: overrideMarker }) });
+
+// src/components/ParameterInputs/ParameterImage.tsx
+var import_jsx_runtime71 = require("@emotion/react/jsx-runtime");
+var ParameterImage = (0, import_react74.forwardRef)((props, ref) => {
+  const { shellProps, innerProps } = extractParameterProps(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ParameterImageInner, { ref, ...innerProps }) });
+});
+var BrokenImage = ({ ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+    "svg",
+    {
+      width: "214",
+      height: "214",
+      viewBox: "0 0 214 214",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlnsXlink: "http://www.w3.org/1999/xlink",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("defs", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            "image",
+            {
+              id: "image0_761_4353",
+              width: "400",
+              height: "400",
+              xlinkHref: "data:image/png;base64,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UfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBuB/we75KcVO2CRagAAAABJRU5ErkJggg=="
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var ParameterImageInner = (0, import_react74.forwardRef)(
+  ({ ...props }, ref) => {
+    const { id, label, hiddenLabel, errorMessage, onManuallySetErrorMessage } = useParameterShell();
+    const [imageSrc, setImageSrc] = (0, import_react74.useState)();
+    const [loading, setLoading] = (0, import_react74.useState)(false);
+    const deferredValue = (0, import_react74.useDeferredValue)(imageSrc);
+    const errorText = "The text you provided is not a valid URL";
+    const updateImageSrc = (0, import_react74.useCallback)(
+      (e) => {
+        let message = void 0;
+        try {
+          if (e.currentTarget.value !== "") {
+            new URL(e.currentTarget.value);
+            setImageSrc(e.currentTarget.value);
+          }
+          message = void 0;
+        } catch (e2) {
+          message = errorText;
+        }
+        if (onManuallySetErrorMessage) {
+          onManuallySetErrorMessage(message);
+        }
+      },
+      [onManuallySetErrorMessage]
+    );
+    const handleLoadEvent = () => {
+      if (deferredValue) {
+        setLoading(true);
+      }
+      const timer = setTimeout(() => {
+        setLoading(false);
+      }, 200);
+      return () => clearTimeout(timer);
+    };
+    const handleErrorEvent = () => {
+      if (onManuallySetErrorMessage) {
+        onManuallySetErrorMessage(errorText);
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+        "input",
+        {
+          css: input2,
+          type: "text",
+          id,
+          ref,
+          "aria-label": hiddenLabel ? label : void 0,
+          autoComplete: "off",
+          onChange: (e) => updateImageSrc(e),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { css: imageWrapper, children: [
+        deferredValue && !errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+          "img",
+          {
+            src: deferredValue,
+            css: img,
+            onLoad: handleLoadEvent,
+            onError: handleErrorEvent,
+            width: 214,
+            height: 214,
+            loading: "lazy"
+          }
+        ) : null,
+        deferredValue && errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(BrokenImage, { css: img }) : null
+      ] }),
+      loading ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(LoadingIcon, {}) : null
+    ] });
+  }
+);
+
+// src/components/ParameterInputs/ParameterInput.tsx
+var import_react75 = require("react");
+var import_jsx_runtime72 = require("@emotion/react/jsx-runtime");
+var ParameterInput = (0, import_react75.forwardRef)((props, ref) => {
+  const { shellProps, innerProps } = extractParameterProps(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ParameterShell, { "data-test-id": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ParameterInputInner, { ref, ...innerProps }) });
+});
+var ParameterInputInner = (0, import_react75.forwardRef)(
+  ({ ...props }, ref) => {
+    const { id, label, hiddenLabel } = useParameterShell();
+    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+      "input",
+      {
+        css: input2,
+        id,
+        type: props.type || "text",
+        "aria-label": hiddenLabel ? label : void 0,
+        autoComplete: "off",
+        ref,
+        ...props
+      }
+    );
+  }
+);
+
+// src/components/ParameterInputs/ParameterLink.tsx
+var import_react76 = require("react");
+var import_jsx_runtime73 = require("@emotion/react/jsx-runtime");
+var ParameterLink = (0, import_react76.forwardRef)(
+  ({ buttonText = "Select project map node", disabled, onConnectLink, externalLink, ...props }, ref) => {
+    const { shellProps, innerProps } = extractParameterProps(props);
+    return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+      ParameterShell,
+      {
+        "data-test-id": "parameter-link",
+        ...shellProps,
+        label: innerProps.value ? shellProps.label : "",
+        title: !innerProps.value ? shellProps.label : void 0,
+        children: !innerProps.value ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("button", { type: "button", css: dataConnectButton, disabled, onClick: onConnectLink, children: buttonText }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+          ParameterLinkInner,
+          {
+            onConnectLink,
+            externalLink,
+            ref,
+            ...innerProps
+          }
+        )
+      }
+    );
+  }
+);
+var ParameterLinkInner = (0, import_react76.forwardRef)(
+  ({ externalLink, onConnectLink, disabled, ...props }, ref) => {
+    const { id, label, hiddenLabel } = useParameterShell();
+    return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { css: inputWrapper, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+        "input",
+        {
+          type: "text",
+          css: [input2, linkParameterInput],
+          readOnly: Boolean(props.value),
+          id,
+          ref,
+          "aria-label": hiddenLabel ? label : void 0,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+        "button",
+        {
+          type: "button",
+          css: linkParameterBtn,
+          disabled,
+          onClick: onConnectLink,
+          title: "edit current selection",
+          children: "edit"
+        }
+      ),
+      externalLink ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+        "a",
+        {
+          href: externalLink,
+          css: linkParameterIcon,
+          title: "Open link in new tab",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
+        }
+      ) : null
+    ] });
+  }
+);
+
+// src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
+var import_jsx_runtime74 = require("@emotion/react/jsx-runtime");
+var ParameterNameAndPublicIdInput = ({
+  id,
+  onBlur,
+  autoFocus,
+  onNameChange,
+  onPublicIdChange,
+  nameIdError,
+  publicIdError,
+  readOnly = false,
+  hasInitialPublicIdField,
+  label = "Name",
+  warnOverLength,
+  nameIdField = "name",
+  nameCaption,
+  namePlaceholderText,
+  publicIdFieldName = "public_id",
+  publicIdCaption = "This cannot change once created.",
+  publicIdPlaceholderText,
+  values
+}) => {
+  const isReadonly = !!hasInitialPublicIdField || readOnly;
+  const handleCopyPidFieldValue = () => {
+    navigator.clipboard.writeText(values[publicIdFieldName]);
+  };
+  autoFocus == null ? void 0 : autoFocus();
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+      ParameterInput,
+      {
+        id: nameIdField,
+        name: nameIdField,
+        label,
+        "data-test-id": "name-field",
+        autoComplete: "off",
+        "data-af": "true",
+        onBlur,
+        onChange: onNameChange,
+        caption: nameCaption,
+        placeholder: namePlaceholderText,
+        readOnly,
+        errorMessage: nameIdError,
+        disabled: readOnly,
+        value: values[nameIdField]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+      ParameterInput,
+      {
+        id: publicIdFieldName,
+        name: publicIdFieldName,
+        label: "Public ID",
+        disabled: Boolean(id) || isReadonly,
+        "data-test-id": "public-id-field",
+        autoComplete: "off",
+        onBlur,
+        onChange: onPublicIdChange,
+        caption: publicIdCaption,
+        placeholder: publicIdPlaceholderText,
+        errorMessage: publicIdError,
+        menuItems: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+          MenuItem,
+          {
+            disabled: !values[publicIdFieldName],
+            icon: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Icon, { icon: "path-trim", iconColor: "currentColor" }),
+            onClick: handleCopyPidFieldValue,
+            children: "Copy"
+          }
+        ),
+        value: values[publicIdFieldName]
+      }
+    ),
+    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Callout, { type: "caution", children: warnOverLength.message }) : null
+  ] });
+};
+
+// src/components/ParameterInputs/ParameterRichText.tsx
+var import_react77 = require("react");
+var import_jsx_runtime75 = require("@emotion/react/jsx-runtime");
+var ParameterRichText = (0, import_react77.forwardRef)(
+  ({
+    label,
+    labelLeadingIcon,
+    hiddenLabel,
+    id,
+    errorMessage,
+    caption,
+    errorTestId,
+    captionTestId,
+    menuItems,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+      ParameterShell,
+      {
+        "data-test-id": "parameter-input",
+        label,
+        labelLeadingIcon,
+        id,
+        errorMessage,
+        caption,
+        errorTestId,
+        captionTestId,
+        menuItems,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ParameterRichTextInner, { ref, ...props }),
+          menuItems ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_jsx_runtime75.Fragment, { children: menuItems }) }) : null
+        ]
+      }
+    );
+  }
+);
+var ParameterRichTextInner = (0, import_react77.forwardRef)(({ ...props }, ref) => {
+  const { id, label, hiddenLabel } = useParameterShell();
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+    "textarea",
+    {
+      css: [input2, textarea2],
+      id,
+      ref,
+      "aria-label": hiddenLabel ? label : void 0,
+      ...props
+    }
+  );
+});
+
+// src/components/ParameterInputs/ParameterSelect.tsx
+var import_react78 = require("react");
+var import_jsx_runtime76 = require("@emotion/react/jsx-runtime");
+var ParameterSelect = (0, import_react78.forwardRef)(
+  ({ defaultOption, options, ...props }, ref) => {
+    const { shellProps, innerProps } = extractParameterProps(props);
+    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
+  }
+);
+var ParameterSelectInner = (0, import_react78.forwardRef)(
+  ({ defaultOption, options, ...props }, ref) => {
+    const { id, label, hiddenLabel } = useParameterShell();
+    return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+      "select",
+      {
+        css: [input2, selectInput],
+        id,
+        "aria-label": hiddenLabel ? label : void 0,
+        ref,
+        ...props,
+        children: [
+          defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("option", { value: "", children: defaultOption }) : null,
+          options.map((option) => {
+            var _a;
+            return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
+          })
+        ]
+      }
+    );
+  }
+);
+
+// src/components/ParameterInputs/ParameterTextarea.tsx
+var import_react79 = require("react");
+var import_jsx_runtime77 = require("@emotion/react/jsx-runtime");
+var ParameterTextarea = (0, import_react79.forwardRef)((props, ref) => {
+  const { shellProps, innerProps } = extractParameterProps(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ParameterShell, { "data-test-id": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
+});
+var ParameterTextareaInner = (0, import_react79.forwardRef)(({ ...props }, ref) => {
+  const { id, label, hiddenLabel } = useParameterShell();
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+    "textarea",
+    {
+      css: [input2, textarea2],
+      id,
+      ref,
+      "aria-label": hiddenLabel ? label : void 0,
+      ...props
+    }
+  );
+});
+
+// src/components/ParameterInputs/ParameterToggle.tsx
+var import_react80 = require("react");
+var import_jsx_runtime78 = require("@emotion/react/jsx-runtime");
+var ParameterToggle = (0, import_react80.forwardRef)((props, ref) => {
+  const { shellProps, innerProps } = extractParameterProps(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
 });
-var TableHead = React14.forwardRef(
+var ParameterToggleInner = (0, import_react80.forwardRef)(
+  ({ ...props }, ref) => {
+    const { id, label } = useParameterShell();
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("label", { css: inputToggleLabel2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { css: inlineLabel2, children: label })
+    ] });
+  }
+);
+
+// src/components/Skeleton/Skeleton.styles.ts
+var import_react81 = require("@emotion/react");
+var lightFadingOut = import_react81.keyframes`
+  from { opacity: 0.1; }
+  to { opacity: 0.025; }
+`;
+var skeletonStyles = import_react81.css`
+  animation: ${lightFadingOut} 1s ease-out infinite alternate;
+  background-color: var(--gray-900);
+`;
+
+// src/components/Skeleton/Skeleton.tsx
+var import_jsx_runtime79 = require("@emotion/react/jsx-runtime");
+var Skeleton = ({
+  width = "100%",
+  height = "1.25rem",
+  inline = false,
+  circle = false,
+  children,
+  ...otherProps
+}) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  "div",
+  {
+    css: [
+      skeletonStyles,
+      {
+        width: circle ? height : width,
+        height,
+        display: inline ? "inline-block" : "block",
+        borderRadius: circle ? "var(--rounded-full)" : "var(--rounded-md)"
+      }
+    ],
+    ...otherProps,
+    "aria-busy": "true",
+    "aria-label": "Loading...",
+    children
+  }
+);
+
+// src/components/Switch/Switch.tsx
+var React14 = __toESM(require("react"));
+
+// src/components/Switch/Switch.styles.ts
+var import_react82 = require("@emotion/react");
+var SwitchInputContainer = import_react82.css`
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  margin-right: var(--spacing-sm);
+  transition: var(--duration-fast) var(--timing-ease-out);
+  vertical-align: middle;
+  user-select: none;
+`;
+var SwitchInput = import_react82.css`
+  appearance: none;
+  border-radius: var(--rounded-full);
+  background-color: var(--white);
+  border: 2px solid var(--gray-400);
+  cursor: pointer;
+  position: absolute;
+  display: block;
+  width: var(--spacing-md);
+  height: var(--spacing-md);
+  transition: transform var(--duration-fast) var(--timing-ease-out),
+    background-color var(--duration-fast) var(--timing-ease-out),
+    background-image var(--duration-fast) var(--timing-ease-out);
+  z-index: var(--z-10);
+
+  &:focus {
+    outline: 3px solid var(--brand-secondary-1);
+    outline-offset: 2px;
+  }
+
+  &:checked {
+    background-color: var(--brand-secondary-3);
+    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='M10.5858 13.4142L7.75735 10.5858L6.34314 12L10.5858 16.2427L17.6568 9.1716L16.2426 7.75739L10.5858 13.4142Z' fill='%23fff' /%3E%3C/svg%3E");
+    background-position: center center;
+    border-color: var(--brand-secondary-3);
+    transform: translateX(var(--spacing-base));
+
+    &:hover,
+    &:focus {
+      border-color: var(--brand-secondary-1);
+      background-color: var(--brand-secondary-1);
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+var SwitchInputDisabled = import_react82.css`
+  opacity: var(--opacity-50);
+  cursor: not-allowed;
+
+  & > :before {
+    cursor: not-allowed;
+  }
+`;
+var SwitchInputLabel = import_react82.css`
+  align-items: center;
+  color: var(--brand-secondary-1);
+  display: inline-flex;
+  font-weight: var(--fw-bold);
+  line-height: 1.25;
+  padding-inline: var(--spacing-2xl) 0;
+
+  &:before {
+    border-radius: var(--rounded-full);
+    background-color: var(--gray-300);
+    content: '';
+    cursor: pointer;
+    display: block;
+    overflow: hidden;
+    width: var(--spacing-xl);
+    height: var(--spacing-md);
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+`;
+var SwitchText = import_react82.css`
+  color: var(--gray-500);
+  font-size: var(--fs-sm);
+  padding-inline: var(--spacing-2xl) 0;
+`;
+
+// src/components/Switch/Switch.tsx
+var import_jsx_runtime80 = require("@emotion/react/jsx-runtime");
+var Switch = React14.forwardRef(
+  ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
+    let additionalText = infoText;
+    if (infoText && toggleText) {
+      additionalText = inputProps.checked ? toggleText : infoText;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { css: SwitchInputLabel, children: label })
+      ] }),
+      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { css: SwitchText, children: additionalText }) : null,
+      children
+    ] });
+  }
+);
+
+// src/components/Table/Table.tsx
+var React15 = __toESM(require("react"));
+
+// src/components/Table/Table.styles.ts
+var import_react83 = require("@emotion/react");
+var table = import_react83.css`
+  border-bottom: 1px solid var(--gray-400);
+  border-collapse: collapse;
+  min-width: 100%;
+  table-layout: auto;
+`;
+var tableHead = import_react83.css`
+  background: var(--gray-100);
+  color: var(--brand-secondary-1);
+  text-align: left;
+`;
+var tableRow = import_react83.css`
+  border-bottom: 1px solid var(--gray-200);
+`;
+var tableCellHead = import_react83.css`
+  font-size: var(--fs-sm);
+  padding: var(--spacing-base) var(--spacing-md);
+  text-transform: uppercase;
+  font-weight: var(--fw-bold);
+`;
+var tableCellData = import_react83.css`
+  padding: var(--spacing-base) var(--spacing-md);
+`;
+
+// src/components/Table/Table.tsx
+var import_jsx_runtime81 = require("@emotion/react/jsx-runtime");
+var Table = React15.forwardRef(({ children, ...otherProps }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("table", { ref, css: table, ...otherProps, children });
+});
+var TableHead = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React14.forwardRef(
+var TableBody = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React14.forwardRef(
+var TableFoot = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React14.forwardRef(
+var TableRow = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React14.forwardRef(
+var TableCellHead = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React14.forwardRef(
+var TableCellData = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("td", { ref, css: tableCellData, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("td", { ref, css: tableCellData, ...otherProps, children });
   }
 );
 
 // src/components/Tabs/Tabs.tsx
-var import_react67 = require("react");
+var import_react85 = require("react");
 var import_Tab = require("reakit/Tab");
 
 // src/components/Tabs/Tabs.styles.ts
-var import_react66 = require("@emotion/react");
-var tabButtonStyles = import_react66.css`
+var import_react84 = require("@emotion/react");
+var tabButtonStyles = import_react84.css`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -11477,81 +12532,60 @@ var tabButtonStyles = import_react66.css`
     -webkit-text-stroke-width: thin;
   }
 `;
-var tabButtonGroupStyles = import_react66.css`
+var tabButtonGroupStyles = import_react84.css`
   display: flex;
   gap: var(--spacing-base);
+  border-bottom: 1px solid var(--gray-300);
 `;
 
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime66 = require("@emotion/react/jsx-runtime");
-var CurrentTabContext = (0, import_react67.createContext)(null);
+var import_jsx_runtime82 = require("@emotion/react/jsx-runtime");
+var CurrentTabContext = (0, import_react85.createContext)(null);
 var useCurrentTab = () => {
-  const context = (0, import_react67.useContext)(CurrentTabContext);
+  const context = (0, import_react85.useContext)(CurrentTabContext);
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
   return context;
 };
-var Tabs = ({ children, onSelectedIdChange, ...props }) => {
-  const tab = (0, import_Tab.useTabState)(props);
-  (0, import_react67.useEffect)(() => {
+var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }) => {
+  const selected = (0, import_react85.useMemo)(() => {
+    if (selectedId)
+      return selectedId;
+    return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
+  }, [selectedId, useHashForState]);
+  const tab = (0, import_Tab.useTabState)({ ...props, selectedId: selected });
+  (0, import_react85.useEffect)(() => {
     var _a;
-    onSelectedIdChange == null ? void 0 : onSelectedIdChange((_a = tab.selectedId) != null ? _a : void 0);
-  }, [tab.selectedId, onSelectedIdChange]);
-  (0, import_react67.useEffect)(() => {
-    tab.setSelectedId(props.selectedId);
-  }, [props.selectedId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(CurrentTabContext.Provider, { value: tab, children });
+    const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
+    onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
+    if (useHashForState && typeof window !== "undefined") {
+      window.location.hash = selectedValueWithoutNull != null ? selectedValueWithoutNull : "";
+    }
+  }, [tab.selectedId, onSelectedIdChange, useHashForState]);
+  (0, import_react85.useEffect)(() => {
+    if (selected && selected !== tab.selectedId) {
+      tab.setSelectedId(selected);
+    }
+  }, [selected]);
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(CurrentTabContext.Provider, { value: tab, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_Tab.TabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_Tab.TabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({ children, id, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_Tab.Tab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_Tab.Tab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_Tab.TabPanel, { ...props, ...currentTab, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_Tab.TabPanel, { ...props, ...currentTab, children });
 };
 
-// src/components/Tooltip/Tooltip.tsx
-var import_react69 = __toESM(require("react"));
-var import_Tooltip = require("reakit/Tooltip");
-
-// src/components/Tooltip/Tooltip.styles.ts
-var import_react68 = require("@emotion/react");
-var TooltipContainer = import_react68.css`
-  border: 2px solid var(--gray-300);
-  border-radius: var(--rounded-base);
-  padding: var(--spacing-xs) var(--spacing-sm);
-  color: var(--gray-500);
-  font-size: var(--fs-xs);
-  background: var(--white);
-`;
-var TooltipArrowStyles = import_react68.css`
-  svg {
-    fill: var(--gray-300);
-  }
-`;
-
-// src/components/Tooltip/Tooltip.tsx
-var import_jsx_runtime67 = require("@emotion/react/jsx-runtime");
-function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
-  const tooltip = (0, import_Tooltip.useTooltipState)({ placement });
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_Tooltip.TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => import_react69.default.cloneElement(children, referenceProps) }),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_Tooltip.Tooltip, { ...tooltip, ...props, css: TooltipContainer, visible: visible != null ? visible : tooltip.visible, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_Tooltip.TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
-      title
-    ] })
-  ] });
-}
-
 // src/components/Validation/StatusBullet.styles.ts
-var import_react70 = require("@emotion/react");
-var StatusBulletContainer = import_react70.css`
+var import_react86 = require("@emotion/react");
+var StatusBulletContainer = import_react86.css`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -11571,19 +12605,19 @@ var StatusBulletContainer = import_react70.css`
     height: var(--fs-xs);
   }
 `;
-var StatusDraft = import_react70.css`
+var StatusDraft = import_react86.css`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
   }
 `;
-var StatusModified = import_react70.css`
+var StatusModified = import_react86.css`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--brand-primary-1) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
   }
 `;
-var StatusError = import_react70.css`
+var StatusError = import_react86.css`
   color: var(--error);
   &:before {
     background: var(--error);
@@ -11599,19 +12633,19 @@ var StatusError = import_react70.css`
     rotate: -45deg;
   }
 `;
-var StatusPublished = import_react70.css`
+var StatusPublished = import_react86.css`
   &:before {
     background: var(--brand-secondary-3);
   }
 `;
-var StatusOrphan = import_react70.css`
+var StatusOrphan = import_react86.css`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
 
 // src/components/Validation/StatusBullet.tsx
-var import_jsx_runtime68 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime83 = require("@emotion/react/jsx-runtime");
 var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   const currentStateStyles = {
     Error: StatusError,
@@ -11621,7 +12655,7 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
     Published: StatusPublished,
     Draft: StatusDraft
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
     "span",
     {
       css: [StatusBulletContainer, currentStateStyles[status]],
@@ -11644,6 +12678,7 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   Card,
   CardContainer,
   CheckboxWithInfo,
+  ConnectToDataElementButton,
   Counter,
   CreateTeamIntegrationTile,
   DashedBox,
@@ -11687,6 +12722,30 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   MenuItemSeparator,
   PageHeaderSection,
   Paragraph,
+  ParameterDataResource,
+  ParameterDrawerHeader,
+  ParameterGroup,
+  ParameterImage,
+  ParameterImageInner,
+  ParameterInput,
+  ParameterInputInner,
+  ParameterLabel,
+  ParameterLink,
+  ParameterLinkInner,
+  ParameterMenuButton,
+  ParameterNameAndPublicIdInput,
+  ParameterOverrideMarker,
+  ParameterRichText,
+  ParameterRichTextInner,
+  ParameterSelect,
+  ParameterSelectInner,
+  ParameterShell,
+  ParameterShellContext,
+  ParameterShellPlaceholder,
+  ParameterTextarea,
+  ParameterTextareaInner,
+  ParameterToggle,
+  ParameterToggleInner,
   ResolveIcon,
   ScrollableList,
   ScrollableListInputItem,
@@ -11724,6 +12783,7 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   buttonSecondaryInvert,
   buttonTertiary,
   buttonUnimportant,
+  extractParameterProps,
   fadeIn,
   fadeInBottom,
   fadeInLtr,
@@ -11748,5 +12808,6 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   useIconContext,
   useMenuContext,
   useOutsideClick,
+  useParameterShell,
   useShortcut
 });