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

package/dist/esm/index.js

@@ -1196,7 +1196,9 @@ var customIcons = {
 // src/components/Icons/IconsProvider.tsx
 import { jsx as jsx5 } from "@emotion/react/jsx-runtime";
 var IconContext = createContext({
+  /** object mapping of available icons */
   iconsMap: {},
+  /** sets the loading state of the icon */
   isLoading: true
 });
 function useIconContext() {
@@ -8275,6 +8277,7 @@ var Button = React5.forwardRef(
       ghost: buttonGhost,
       ghostDestructive: buttonGhostDestructive,
       unimportant: buttonUnimportant,
+      /** @deprecated */
       tertiary: buttonTertiary
     };
     const btnSize = {
@@ -9018,6 +9021,9 @@ var counterIcon = css24`
 // src/components/Counter/Counter.tsx
 import { jsx as jsx27, jsxs as jsxs15 } from "@emotion/react/jsx-runtime";
 var Counter = ({ count }) => {
+  if (typeof count === "undefined") {
+    return null;
+  }
   const isTripleDigits = count > 99 ? /* @__PURE__ */ jsxs15("span", { css: counterTripleValue, title: `${count}`, children: [
     "99",
     /* @__PURE__ */ jsx27(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon })
@@ -9078,6 +9084,7 @@ import * as React8 from "react";
 // src/components/Details/Details.styles.ts
 import { css as css26 } from "@emotion/react";
 var details = css26`
+  cursor: pointer;
   &[open] {
     & > summary svg {
       rotate: 0deg;
@@ -9712,6 +9719,7 @@ function InputComboBox(props) {
             ...base,
             margin: "0",
             padding: "0",
+            // Prevents input shadow when focused within the select area
             "& > input": {
               boxShadow: "none !important"
             },
@@ -9731,11 +9739,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"
@@ -10169,6 +10179,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;
@@ -11100,219 +11111,1237 @@ var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
   ] });
 };
 
-// src/components/Skeleton/Skeleton.styles.ts
-import { css as css51, keyframes as keyframes4 } from "@emotion/react";
-var lightFadingOut = keyframes4`
-  from { opacity: 0.1; }
-  to { opacity: 0.025; }
+// src/components/Tooltip/Tooltip.tsx
+import React13 from "react";
+import {
+  Tooltip as ReakitTooltip,
+  TooltipArrow,
+  TooltipReference,
+  useTooltipState
+} from "reakit/Tooltip";
+
+// src/components/Tooltip/Tooltip.styles.ts
+import { css as css51 } from "@emotion/react";
+var TooltipContainer = css51`
+  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 = css51`
-  animation: ${lightFadingOut} 1s ease-out infinite alternate;
-  background-color: var(--gray-900);
+var TooltipArrowStyles = css51`
+  svg {
+    fill: var(--gray-300);
+  }
 `;
 
-// src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx64 } from "@emotion/react/jsx-runtime";
-var Skeleton = ({
-  width = "100%",
-  height = "1.25rem",
-  inline = false,
-  circle = false,
+// src/components/Tooltip/Tooltip.tsx
+import { Fragment as Fragment9, jsx as jsx64, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
+function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
+  const tooltip = useTooltipState({ placement });
+  return /* @__PURE__ */ jsxs44(Fragment9, { children: [
+    /* @__PURE__ */ jsx64(TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => React13.cloneElement(children, referenceProps) }),
+    /* @__PURE__ */ jsxs44(ReakitTooltip, { ...tooltip, ...props, css: TooltipContainer, visible: visible != null ? visible : tooltip.visible, children: [
+      /* @__PURE__ */ jsx64(TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
+      title
+    ] })
+  ] });
+}
+
+// src/components/ParameterInputs/styles/ParameterBindingButton.styles.ts
+import { css as css52 } from "@emotion/react";
+var inputIconBtn = css52`
+  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
+import { jsx as jsx65, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
+var ConnectToDataElementButton = ({
+  icon,
+  iconColor,
   children,
-  ...otherProps
-}) => /* @__PURE__ */ jsx64(
-  "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__ */ jsx65(Tooltip, { title, children: /* @__PURE__ */ jsxs45("button", { css: inputIconBtn, type: "button", "aria-pressed": isBound, ...props, disabled: isLocked, children: [
+    /* @__PURE__ */ jsx65(
+      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
-import * as React13 from "react";
+// src/components/ParameterInputs/hooks/ParameterShellContext.tsx
+import { createContext as createContext4, useContext as useContext5 } from "react";
+var ParameterShellContext = createContext4({
+  id: "",
+  label: "",
+  hiddenLabel: void 0,
+  errorMessage: void 0,
+  onManuallySetErrorMessage: () => {
+  }
+});
+var useParameterShell = () => {
+  const { id, label, hiddenLabel, errorMessage, onManuallySetErrorMessage } = useContext5(ParameterShellContext);
+  return {
+    id,
+    label,
+    hiddenLabel,
+    errorMessage,
+    onManuallySetErrorMessage
+  };
+};
 
-// src/components/Switch/Switch.styles.ts
-import { css as css52 } from "@emotion/react";
-var SwitchInputContainer = css52`
-  cursor: pointer;
-  display: inline-block;
+// src/components/ParameterInputs/styles/ParameterInput.styles.ts
+import { css as css53 } from "@emotion/react";
+var inputContainer2 = css53`
   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 = css52`
-  appearance: none;
-  border-radius: var(--rounded-full);
-  background-color: var(--white);
-  border: 2px solid var(--gray-400);
-  cursor: pointer;
-  position: absolute;
+var labelText2 = css53`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-xs);
+  font-weight: var(--fw-regular);
+  margin: 0 0 var(--spacing-xs);
+`;
+var input2 = css53`
   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 = css52`
-  opacity: var(--opacity-50);
-  cursor: not-allowed;
 
-  & > :before {
+  &[readonly] {
     cursor: not-allowed;
+    color: var(--gray-400);
   }
 `;
-var SwitchInputLabel = css52`
+var selectInput = css53`
+  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 = css53`
+  display: flex; // used to correct overflow with chrome textarea
+  position: relative;
+`;
+var inputIcon2 = css53`
   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 = css53`
+  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 = css53`
+  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 = css52`
-  color: var(--gray-500);
-  font-size: var(--fs-sm);
-  padding-inline: var(--spacing-2xl) 0;
-`;
 
-// src/components/Switch/Switch.tsx
-import { Fragment as Fragment9, jsx as jsx65, jsxs as jsxs44 } from "@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__ */ jsxs44(Fragment9, { children: [
-      /* @__PURE__ */ jsxs44("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ jsx65("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ jsx65("span", { css: SwitchInputLabel, children: label })
-      ] }),
-      additionalText ? /* @__PURE__ */ jsx65("p", { css: SwitchText, children: additionalText }) : null,
-      children
-    ] });
+  &:where([type='checkbox']) {
+    border-radius: var(--rounded-md);
   }
-);
 
-// src/components/Table/Table.tsx
-import * as React14 from "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
-import { css as css53 } from "@emotion/react";
-var table = css53`
-  border-bottom: 1px solid var(--gray-400);
-  border-collapse: collapse;
-  min-width: 100%;
-  table-layout: auto;
-`;
-var tableHead = css53`
-  background: var(--gray-100);
-  color: var(--brand-secondary-1);
-  text-align: left;
-`;
-var tableRow = css53`
-  border-bottom: 1px solid var(--gray-200);
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--gray-400);
+    border-color: var(--gray-300);
+  }
 `;
-var tableCellHead = css53`
+var inlineLabel2 = css53`
+  padding-left: var(--spacing-lg);
   font-size: var(--fs-sm);
-  padding: var(--spacing-base) var(--spacing-md);
-  text-transform: uppercase;
+  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
+
+  > a {
+    color: var(--brand-secondary-3);
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+`;
+var inputMenu = css53`
+  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 = css53`
+  resize: vertical;
+  min-height: 2rem;
+`;
+var imageWrapper = css53`
+  background: var(--white);
+`;
+var img = css53`
+  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 = css53`
+  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 = css53`
+  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 = css53`
+  padding-right: calc(var(--spacing-2xl) + var(--spacing-base));
+`;
+var linkParameterIcon = css53`
+  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
+import { jsx as jsx66, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
+function ParameterDataResource({
+  label,
+  labelLeadingIcon,
+  id,
+  onConnectDatasource,
+  caption,
+  disabled,
+  children
+}) {
+  return /* @__PURE__ */ jsxs46("div", { "data-testid": "parameter-data-connect-button", children: [
+    /* @__PURE__ */ jsxs46("span", { css: labelText2, children: [
+      labelLeadingIcon ? labelLeadingIcon : null,
+      label
+    ] }),
+    /* @__PURE__ */ jsxs46(
+      "button",
+      {
+        type: "button",
+        css: dataConnectButton,
+        "aria-controls": id,
+        disabled,
+        onClick: onConnectDatasource,
+        children: [
+          /* @__PURE__ */ jsx66("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx66(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
+          children
+        ]
+      }
+    ),
+    caption ? /* @__PURE__ */ jsx66(Caption, { children: caption }) : null
+  ] });
+}
+
+// src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
+import { css as css54 } from "@emotion/react";
+var ParameterDrawerHeaderContainer = css54`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-base);
+  justify-content: space-between;
+  margin-bottom: var(--spacing-sm);
+`;
+var ParameterDrawerHeaderTitleGroup = css54`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-sm);
+`;
+var ParameterDrawerHeaderTitle = css54`
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 16ch;
+`;
+
+// src/components/ParameterInputs/ParameterDrawerHeader.tsx
+import { jsx as jsx67, jsxs as jsxs47 } from "@emotion/react/jsx-runtime";
+var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
+  return /* @__PURE__ */ jsxs47("div", { css: ParameterDrawerHeaderContainer, children: [
+    /* @__PURE__ */ jsxs47("header", { css: ParameterDrawerHeaderTitleGroup, children: [
+      iconBeforeTitle,
+      /* @__PURE__ */ jsx67(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title, children: title })
+    ] }),
+    children
+  ] });
+};
+
+// src/components/ParameterInputs/ParameterGroup.tsx
+import { forwardRef as forwardRef7 } from "react";
+
+// src/components/ParameterInputs/styles/ParameterGroup.styles.ts
+import { css as css55 } from "@emotion/react";
+var fieldsetStyles = css55`
+  &:disabled,
+  [readonly] {
+    pointer-events: none;
+
+    label,
+    legend {
+      opacity: var(--opacity-60);
+    }
+  }
+`;
+var fieldsetLegend2 = css55`
+  display: block;
+  font-weight: var(--fw-medium);
+  margin-bottom: var(--spacing-sm);
+`;
+
+// src/components/ParameterInputs/ParameterGroup.tsx
+import { jsx as jsx68, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
+var ParameterGroup = forwardRef7(
+  ({ legend, isDisabled, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs48("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
+      /* @__PURE__ */ jsx68("legend", { css: fieldsetLegend2, children: legend }),
+      children
+    ] });
+  }
+);
+
+// src/components/ParameterInputs/ParameterImage.tsx
+import { forwardRef as forwardRef9, useCallback as useCallback2, useDeferredValue, useState as useState8 } from "react";
+
+// src/components/ParameterInputs/ParameterShell.tsx
+import { useState as useState7 } from "react";
+
+// src/components/ParameterInputs/ParameterLabel.tsx
+import { jsx as jsx69 } from "@emotion/react/jsx-runtime";
+var ParameterLabel = ({ id, asSpan, children, ...props }) => {
+  return !asSpan ? /* @__PURE__ */ jsx69("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx69("span", { "aria-labelledby": id, css: labelText2, children });
+};
+
+// src/components/ParameterInputs/ParameterMenuButton.tsx
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx70 } from "@emotion/react/jsx-runtime";
+var ParameterMenuButton = forwardRef8(
+  ({ label, children }, ref) => {
+    return /* @__PURE__ */ jsx70(
+      Menu,
+      {
+        menuLabel: `${label} menu`,
+        menuTrigger: /* @__PURE__ */ jsx70(
+          "button",
+          {
+            className: "parameter-menu",
+            css: inputMenu,
+            type: "button",
+            "aria-label": `${label} options`,
+            ref,
+            children: /* @__PURE__ */ jsx70(Icon, { icon: "more-alt", iconColor: "currentColor" })
+          }
+        ),
+        children
+      }
+    );
+  }
+);
+
+// src/components/ParameterInputs/styles/ParameterShell.styles.ts
+import { css as css56 } from "@emotion/react";
+var emptyParameterShell = css56`
+  border-radius: var(--rounded-sm);
+  background: var(--white);
+  flex-grow: 1;
+  padding: var(--spacing-xs);
+  position: relative;
+`;
+var emptyParameterShellText = css56`
+  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 = css56`
+  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
+import { jsx as jsx71, jsxs as jsxs49 } from "@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] = useState7(void 0);
+  const setErrorMessage = (message) => setManualErrorMessage(message);
+  const errorMessaging = errorMessage || manualErrorMessage;
+  return /* @__PURE__ */ jsxs49("div", { css: inputContainer2, ...props, children: [
+    hiddenLabel || title ? null : /* @__PURE__ */ jsxs49(ParameterLabel, { id, css: labelText2, children: [
+      labelLeadingIcon ? labelLeadingIcon : null,
+      label
+    ] }),
+    !title ? null : /* @__PURE__ */ jsxs49(ParameterLabel, { id, asSpan: true, children: [
+      labelLeadingIcon ? labelLeadingIcon : null,
+      title
+    ] }),
+    /* @__PURE__ */ jsxs49("div", { css: inputWrapper, children: [
+      menuItems ? /* @__PURE__ */ jsx71(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
+      /* @__PURE__ */ jsx71(
+        ParameterShellContext.Provider,
+        {
+          value: {
+            id,
+            label,
+            hiddenLabel,
+            errorMessage: errorMessaging,
+            onManuallySetErrorMessage: (message) => setErrorMessage(message)
+          },
+          children: children ? /* @__PURE__ */ jsxs49("div", { css: emptyParameterShell, children: [
+            children,
+            hasOverridingParams ? /* @__PURE__ */ jsx71(ParameterOverrideMarker, {}) : null
+          ] }) : /* @__PURE__ */ jsx71(ParameterShellPlaceholder, { hasOverridingParams: true })
+        }
+      )
+    ] }),
+    caption ? /* @__PURE__ */ jsx71(Caption, { testId: captionTestId, children: caption }) : null,
+    errorMessaging ? /* @__PURE__ */ jsx71(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null
+  ] });
+};
+var ParameterShellPlaceholder = ({ hasOverridingParams }) => {
+  return /* @__PURE__ */ jsxs49("div", { role: "note", css: emptyParameterShell, children: [
+    /* @__PURE__ */ jsx71("p", { css: emptyParameterShellText, children: "Use component swap to replace with a parameter slot component" }),
+    hasOverridingParams ? /* @__PURE__ */ jsx71(ParameterOverrideMarker, {}) : null
+  ] });
+};
+var ParameterOverrideMarker = () => /* @__PURE__ */ jsx71(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx71("span", { role: "presentation", css: overrideMarker }) });
+
+// src/components/ParameterInputs/ParameterImage.tsx
+import { Fragment as Fragment10, jsx as jsx72, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
+var ParameterImage = forwardRef9((props, ref) => {
+  const { shellProps, innerProps } = extractParameterProps(props);
+  return /* @__PURE__ */ jsx72(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: /* @__PURE__ */ jsx72(ParameterImageInner, { ref, ...innerProps }) });
+});
+var BrokenImage = ({ ...props }) => {
+  return /* @__PURE__ */ jsxs50(
+    "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__ */ jsx72("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
+        /* @__PURE__ */ jsx72("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
+        /* @__PURE__ */ jsxs50("defs", { children: [
+          /* @__PURE__ */ jsx72("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx72("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
+          /* @__PURE__ */ jsx72(
+            "image",
+            {
+              id: "image0_761_4353",
+              width: "400",
+              height: "400",
+              xlinkHref: "data:image/png;base64,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UfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBsBDMtNUfKBgDEBDMtYXFKDgBuB/we75KcVO2CRagAAAABJRU5ErkJggg=="
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var ParameterImageInner = forwardRef9(
+  ({ ...props }, ref) => {
+    const { id, label, hiddenLabel, errorMessage, onManuallySetErrorMessage } = useParameterShell();
+    const [imageSrc, setImageSrc] = useState8();
+    const [loading, setLoading] = useState8(false);
+    const deferredValue = useDeferredValue(imageSrc);
+    const errorText = "The text you provided is not a valid URL";
+    const updateImageSrc = useCallback2(
+      (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__ */ jsxs50(Fragment10, { children: [
+      /* @__PURE__ */ jsx72(
+        "input",
+        {
+          css: input2,
+          type: "text",
+          id,
+          ref,
+          "aria-label": hiddenLabel ? label : void 0,
+          autoComplete: "off",
+          onChange: (e) => updateImageSrc(e),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxs50("div", { css: imageWrapper, children: [
+        deferredValue && !errorMessage ? /* @__PURE__ */ jsx72(
+          "img",
+          {
+            src: deferredValue,
+            css: img,
+            onLoad: handleLoadEvent,
+            onError: handleErrorEvent,
+            width: 214,
+            height: 214,
+            loading: "lazy"
+          }
+        ) : null,
+        deferredValue && errorMessage ? /* @__PURE__ */ jsx72(BrokenImage, { css: img }) : null
+      ] }),
+      loading ? /* @__PURE__ */ jsx72(LoadingIcon, {}) : null
+    ] });
+  }
+);
+
+// src/components/ParameterInputs/ParameterInput.tsx
+import { forwardRef as forwardRef10 } from "react";
+import { jsx as jsx73 } from "@emotion/react/jsx-runtime";
+var ParameterInput = forwardRef10((props, ref) => {
+  const { shellProps, innerProps } = extractParameterProps(props);
+  return /* @__PURE__ */ jsx73(ParameterShell, { "data-test-id": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx73(ParameterInputInner, { ref, ...innerProps }) });
+});
+var ParameterInputInner = forwardRef10(
+  ({ ...props }, ref) => {
+    const { id, label, hiddenLabel } = useParameterShell();
+    return /* @__PURE__ */ jsx73(
+      "input",
+      {
+        css: input2,
+        id,
+        type: props.type || "text",
+        "aria-label": hiddenLabel ? label : void 0,
+        autoComplete: "off",
+        ref,
+        ...props
+      }
+    );
+  }
+);
+
+// src/components/ParameterInputs/ParameterLink.tsx
+import { forwardRef as forwardRef11 } from "react";
+import { jsx as jsx74, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
+var ParameterLink = forwardRef11(
+  ({ buttonText = "Select project map node", disabled, onConnectLink, externalLink, ...props }, ref) => {
+    const { shellProps, innerProps } = extractParameterProps(props);
+    return /* @__PURE__ */ jsx74(
+      ParameterShell,
+      {
+        "data-test-id": "parameter-link",
+        ...shellProps,
+        label: innerProps.value ? shellProps.label : "",
+        title: !innerProps.value ? shellProps.label : void 0,
+        children: !innerProps.value ? /* @__PURE__ */ jsx74("button", { type: "button", css: dataConnectButton, disabled, onClick: onConnectLink, children: buttonText }) : /* @__PURE__ */ jsx74(
+          ParameterLinkInner,
+          {
+            onConnectLink,
+            externalLink,
+            ref,
+            ...innerProps
+          }
+        )
+      }
+    );
+  }
+);
+var ParameterLinkInner = forwardRef11(
+  ({ externalLink, onConnectLink, disabled, ...props }, ref) => {
+    const { id, label, hiddenLabel } = useParameterShell();
+    return /* @__PURE__ */ jsxs51("div", { css: inputWrapper, children: [
+      /* @__PURE__ */ jsx74(
+        "input",
+        {
+          type: "text",
+          css: [input2, linkParameterInput],
+          readOnly: Boolean(props.value),
+          id,
+          ref,
+          "aria-label": hiddenLabel ? label : void 0,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx74(
+        "button",
+        {
+          type: "button",
+          css: linkParameterBtn,
+          disabled,
+          onClick: onConnectLink,
+          title: "edit current selection",
+          children: "edit"
+        }
+      ),
+      externalLink ? /* @__PURE__ */ jsx74(
+        "a",
+        {
+          href: externalLink,
+          css: linkParameterIcon,
+          title: "Open link in new tab",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: /* @__PURE__ */ jsx74(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
+        }
+      ) : null
+    ] });
+  }
+);
+
+// src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
+import { Fragment as Fragment11, jsx as jsx75, jsxs as jsxs52 } from "@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__ */ jsxs52(Fragment11, { children: [
+    /* @__PURE__ */ jsx75(
+      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__ */ jsx75(
+      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__ */ jsx75(
+          MenuItem,
+          {
+            disabled: !values[publicIdFieldName],
+            icon: /* @__PURE__ */ jsx75(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__ */ jsx75(Callout, { type: "caution", children: warnOverLength.message }) : null
+  ] });
+};
+
+// src/components/ParameterInputs/ParameterRichText.tsx
+import { forwardRef as forwardRef12 } from "react";
+import { Fragment as Fragment12, jsx as jsx76, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
+var ParameterRichText = forwardRef12(
+  ({
+    label,
+    labelLeadingIcon,
+    hiddenLabel,
+    id,
+    errorMessage,
+    caption,
+    errorTestId,
+    captionTestId,
+    menuItems,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs53(
+      ParameterShell,
+      {
+        "data-test-id": "parameter-input",
+        label,
+        labelLeadingIcon,
+        id,
+        errorMessage,
+        caption,
+        errorTestId,
+        captionTestId,
+        menuItems,
+        children: [
+          /* @__PURE__ */ jsx76(ParameterRichTextInner, { ref, ...props }),
+          menuItems ? /* @__PURE__ */ jsx76(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx76(Fragment12, { children: menuItems }) }) : null
+        ]
+      }
+    );
+  }
+);
+var ParameterRichTextInner = forwardRef12(({ ...props }, ref) => {
+  const { id, label, hiddenLabel } = useParameterShell();
+  return /* @__PURE__ */ jsx76(
+    "textarea",
+    {
+      css: [input2, textarea2],
+      id,
+      ref,
+      "aria-label": hiddenLabel ? label : void 0,
+      ...props
+    }
+  );
+});
+
+// src/components/ParameterInputs/ParameterSelect.tsx
+import { forwardRef as forwardRef13 } from "react";
+import { jsx as jsx77, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
+var ParameterSelect = forwardRef13(
+  ({ defaultOption, options, ...props }, ref) => {
+    const { shellProps, innerProps } = extractParameterProps(props);
+    return /* @__PURE__ */ jsx77(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx77(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
+  }
+);
+var ParameterSelectInner = forwardRef13(
+  ({ defaultOption, options, ...props }, ref) => {
+    const { id, label, hiddenLabel } = useParameterShell();
+    return /* @__PURE__ */ jsxs54(
+      "select",
+      {
+        css: [input2, selectInput],
+        id,
+        "aria-label": hiddenLabel ? label : void 0,
+        ref,
+        ...props,
+        children: [
+          defaultOption ? /* @__PURE__ */ jsx77("option", { value: "", children: defaultOption }) : null,
+          options.map((option) => {
+            var _a;
+            return /* @__PURE__ */ jsx77("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
+          })
+        ]
+      }
+    );
+  }
+);
+
+// src/components/ParameterInputs/ParameterTextarea.tsx
+import { forwardRef as forwardRef14 } from "react";
+import { jsx as jsx78 } from "@emotion/react/jsx-runtime";
+var ParameterTextarea = forwardRef14((props, ref) => {
+  const { shellProps, innerProps } = extractParameterProps(props);
+  return /* @__PURE__ */ jsx78(ParameterShell, { "data-test-id": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx78(ParameterTextareaInner, { ref, ...innerProps }) });
+});
+var ParameterTextareaInner = forwardRef14(({ ...props }, ref) => {
+  const { id, label, hiddenLabel } = useParameterShell();
+  return /* @__PURE__ */ jsx78(
+    "textarea",
+    {
+      css: [input2, textarea2],
+      id,
+      ref,
+      "aria-label": hiddenLabel ? label : void 0,
+      ...props
+    }
+  );
+});
+
+// src/components/ParameterInputs/ParameterToggle.tsx
+import { forwardRef as forwardRef15 } from "react";
+import { jsx as jsx79, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
+var ParameterToggle = forwardRef15((props, ref) => {
+  const { shellProps, innerProps } = extractParameterProps(props);
+  return /* @__PURE__ */ jsx79(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx79(ParameterToggleInner, { ref, ...innerProps }) });
+});
+var ParameterToggleInner = forwardRef15(
+  ({ ...props }, ref) => {
+    const { id, label } = useParameterShell();
+    return /* @__PURE__ */ jsxs55("label", { css: inputToggleLabel2, children: [
+      /* @__PURE__ */ jsx79("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
+      /* @__PURE__ */ jsx79("span", { css: inlineLabel2, children: label })
+    ] });
+  }
+);
+
+// src/components/Skeleton/Skeleton.styles.ts
+import { css as css57, keyframes as keyframes4 } from "@emotion/react";
+var lightFadingOut = keyframes4`
+  from { opacity: 0.1; }
+  to { opacity: 0.025; }
+`;
+var skeletonStyles = css57`
+  animation: ${lightFadingOut} 1s ease-out infinite alternate;
+  background-color: var(--gray-900);
+`;
+
+// src/components/Skeleton/Skeleton.tsx
+import { jsx as jsx80 } from "@emotion/react/jsx-runtime";
+var Skeleton = ({
+  width = "100%",
+  height = "1.25rem",
+  inline = false,
+  circle = false,
+  children,
+  ...otherProps
+}) => /* @__PURE__ */ jsx80(
+  "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
+import * as React14 from "react";
+
+// src/components/Switch/Switch.styles.ts
+import { css as css58 } from "@emotion/react";
+var SwitchInputContainer = css58`
+  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 = css58`
+  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 = css58`
+  opacity: var(--opacity-50);
+  cursor: not-allowed;
+
+  & > :before {
+    cursor: not-allowed;
+  }
+`;
+var SwitchInputLabel = css58`
+  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 = css58`
+  color: var(--gray-500);
+  font-size: var(--fs-sm);
+  padding-inline: var(--spacing-2xl) 0;
+`;
+
+// src/components/Switch/Switch.tsx
+import { Fragment as Fragment13, jsx as jsx81, jsxs as jsxs56 } from "@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__ */ jsxs56(Fragment13, { children: [
+      /* @__PURE__ */ jsxs56("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
+        /* @__PURE__ */ jsx81("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ jsx81("span", { css: SwitchInputLabel, children: label })
+      ] }),
+      additionalText ? /* @__PURE__ */ jsx81("p", { css: SwitchText, children: additionalText }) : null,
+      children
+    ] });
+  }
+);
+
+// src/components/Table/Table.tsx
+import * as React15 from "react";
+
+// src/components/Table/Table.styles.ts
+import { css as css59 } from "@emotion/react";
+var table = css59`
+  border-bottom: 1px solid var(--gray-400);
+  border-collapse: collapse;
+  min-width: 100%;
+  table-layout: auto;
+`;
+var tableHead = css59`
+  background: var(--gray-100);
+  color: var(--brand-secondary-1);
+  text-align: left;
+`;
+var tableRow = css59`
+  border-bottom: 1px solid var(--gray-200);
+`;
+var tableCellHead = css59`
+  font-size: var(--fs-sm);
+  padding: var(--spacing-base) var(--spacing-md);
+  text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
-var tableCellData = css53`
+var tableCellData = css59`
   padding: var(--spacing-base) var(--spacing-md);
 `;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx66 } from "@emotion/react/jsx-runtime";
-var Table = React14.forwardRef(({ children, ...otherProps }, ref) => {
-  return /* @__PURE__ */ jsx66("table", { ref, css: table, ...otherProps, children });
+import { jsx as jsx82 } from "@emotion/react/jsx-runtime";
+var Table = React15.forwardRef(({ children, ...otherProps }, ref) => {
+  return /* @__PURE__ */ jsx82("table", { ref, css: table, ...otherProps, children });
 });
-var TableHead = React14.forwardRef(
+var TableHead = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx66("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx82("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React14.forwardRef(
+var TableBody = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx66("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx82("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React14.forwardRef(
+var TableFoot = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx66("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx82("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React14.forwardRef(
+var TableRow = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx66("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx82("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React14.forwardRef(
+var TableCellHead = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx66("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx82("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React14.forwardRef(
+var TableCellData = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx66("td", { ref, css: tableCellData, ...otherProps, children });
+    return /* @__PURE__ */ jsx82("td", { ref, css: tableCellData, ...otherProps, children });
   }
 );
 
 // src/components/Tabs/Tabs.tsx
-import { createContext as createContext4, useContext as useContext5, useEffect as useEffect7 } from "react";
+import { createContext as createContext5, useContext as useContext6, useEffect as useEffect7, useMemo as useMemo2 } from "react";
 import {
   Tab as ReakitTab,
   TabList as ReakitTabList,
@@ -11321,8 +12350,8 @@ import {
 } from "reakit/Tab";
 
 // src/components/Tabs/Tabs.styles.ts
-import { css as css54 } from "@emotion/react";
-var tabButtonStyles = css54`
+import { css as css60 } from "@emotion/react";
+var tabButtonStyles = css60`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -11339,86 +12368,60 @@ var tabButtonStyles = css54`
     -webkit-text-stroke-width: thin;
   }
 `;
-var tabButtonGroupStyles = css54`
+var tabButtonGroupStyles = css60`
   display: flex;
   gap: var(--spacing-base);
+  border-bottom: 1px solid var(--gray-300);
 `;
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx67 } from "@emotion/react/jsx-runtime";
-var CurrentTabContext = createContext4(null);
+import { jsx as jsx83 } from "@emotion/react/jsx-runtime";
+var CurrentTabContext = createContext5(null);
 var useCurrentTab = () => {
-  const context = useContext5(CurrentTabContext);
+  const context = useContext6(CurrentTabContext);
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
   return context;
 };
-var Tabs = ({ children, onSelectedIdChange, ...props }) => {
-  const tab = useTabState(props);
+var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }) => {
+  const selected = useMemo2(() => {
+    if (selectedId)
+      return selectedId;
+    return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
+  }, [selectedId, useHashForState]);
+  const tab = useTabState({ ...props, selectedId: selected });
   useEffect7(() => {
     var _a;
-    onSelectedIdChange == null ? void 0 : onSelectedIdChange((_a = tab.selectedId) != null ? _a : void 0);
-  }, [tab.selectedId, onSelectedIdChange]);
+    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]);
   useEffect7(() => {
-    tab.setSelectedId(props.selectedId);
-  }, [props.selectedId]);
-  return /* @__PURE__ */ jsx67(CurrentTabContext.Provider, { value: tab, children });
+    if (selected && selected !== tab.selectedId) {
+      tab.setSelectedId(selected);
+    }
+  }, [selected]);
+  return /* @__PURE__ */ jsx83(CurrentTabContext.Provider, { value: tab, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx67(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx83(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({ children, id, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx67(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx83(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx67(ReakitTabPanel, { ...props, ...currentTab, children });
+  return /* @__PURE__ */ jsx83(ReakitTabPanel, { ...props, ...currentTab, children });
 };
 
-// src/components/Tooltip/Tooltip.tsx
-import React16 from "react";
-import {
-  Tooltip as ReakitTooltip,
-  TooltipArrow,
-  TooltipReference,
-  useTooltipState
-} from "reakit/Tooltip";
-
-// src/components/Tooltip/Tooltip.styles.ts
-import { css as css55 } from "@emotion/react";
-var TooltipContainer = css55`
-  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 = css55`
-  svg {
-    fill: var(--gray-300);
-  }
-`;
-
-// src/components/Tooltip/Tooltip.tsx
-import { Fragment as Fragment10, jsx as jsx68, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
-function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
-  const tooltip = useTooltipState({ placement });
-  return /* @__PURE__ */ jsxs45(Fragment10, { children: [
-    /* @__PURE__ */ jsx68(TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => React16.cloneElement(children, referenceProps) }),
-    /* @__PURE__ */ jsxs45(ReakitTooltip, { ...tooltip, ...props, css: TooltipContainer, visible: visible != null ? visible : tooltip.visible, children: [
-      /* @__PURE__ */ jsx68(TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
-      title
-    ] })
-  ] });
-}
-
 // src/components/Validation/StatusBullet.styles.ts
-import { css as css56 } from "@emotion/react";
-var StatusBulletContainer = css56`
+import { css as css61 } from "@emotion/react";
+var StatusBulletContainer = css61`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -11438,19 +12441,19 @@ var StatusBulletContainer = css56`
     height: var(--fs-xs);
   }
 `;
-var StatusDraft = css56`
+var StatusDraft = css61`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
   }
 `;
-var StatusModified = css56`
+var StatusModified = css61`
   &: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 = css56`
+var StatusError = css61`
   color: var(--error);
   &:before {
     background: var(--error);
@@ -11466,19 +12469,19 @@ var StatusError = css56`
     rotate: -45deg;
   }
 `;
-var StatusPublished = css56`
+var StatusPublished = css61`
   &:before {
     background: var(--brand-secondary-3);
   }
 `;
-var StatusOrphan = css56`
+var StatusOrphan = css61`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
 
 // src/components/Validation/StatusBullet.tsx
-import { jsx as jsx69 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx84 } from "@emotion/react/jsx-runtime";
 var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   const currentStateStyles = {
     Error: StatusError,
@@ -11488,7 +12491,7 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
     Published: StatusPublished,
     Draft: StatusDraft
   };
-  return /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx84(
     "span",
     {
       css: [StatusBulletContainer, currentStateStyles[status]],
@@ -11510,6 +12513,7 @@ export {
   Card,
   CardContainer2 as CardContainer,
   CheckboxWithInfo,
+  ConnectToDataElementButton,
   Counter,
   CreateTeamIntegrationTile,
   DashedBox,
@@ -11553,6 +12557,30 @@ export {
   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,
@@ -11590,6 +12618,7 @@ export {
   buttonSecondaryInvert,
   buttonTertiary,
   buttonUnimportant,
+  extractParameterProps,
   fadeIn,
   fadeInBottom,
   fadeInLtr,
@@ -11614,5 +12643,6 @@ export {
   useIconContext,
   useMenuContext,
   useOutsideClick,
+  useParameterShell,
   useShortcut
 };