@uniformdev/design-system 18.27.0 → 18.27.1-alpha.23

package/dist/esm/index.js

@@ -306,6 +306,20 @@ var buttonSecondaryInvert = css`
 
   ${buttonRippleEffect({ hoverColor: "var(--gray-50)" })}
 `;
+var buttonPrimaryInvert = css`
+  background: var(--white);
+  color: var(--brand-secondary-1);
+  box-shadow: 0 0 0 1px var(--brand-secondary-1);
+  transition: box-shadow var(--duration-fast) var(--timing-ease-out);
+  gap: var(--spacing-sm);
+
+  &:disabled {
+    color: var(--gray-300);
+    box-shadow: 0 0 0 1px var(--gray-300);
+  }
+
+  ${buttonRippleEffect({ hoverColor: "var(--gray-50)" })}
+`;
 var buttonUnimportant = css`
   background: var(--brand-secondary-2);
   color: var(--brand-secondary-1);
@@ -424,15 +438,11 @@ var inputSelect = css2`
   background-size: 1rem;
   padding-right: var(--spacing-xl);
 `;
-var inputSearchIcon = css2`
-  color: var(--brand-secondary-1);
-  height: 1.25rem;
-  width: 1.25rem;
-`;
-var inputSearchCloseIcon = css2`
-  color: var(--brand-primary-2);
-  height: 1.5rem;
-  width: 1.5rem;
+var inputSearchCloseBtn = css2`
+  background: none;
+  border: none;
+  padding: 0;
+  pointer-events: all;
 `;
 var inputToggleLabel = css2`
   align-items: flex-start;
@@ -10395,6 +10405,7 @@ var Button = React5.forwardRef(
   ({ buttonType = "primary", size = "md", children, ...props }, ref) => {
     const buttonTheme = {
       primary: buttonPrimary,
+      primaryInvert: buttonPrimaryInvert,
       secondary: buttonSecondary,
       secondaryInvert: buttonSecondaryInvert,
       ghost: buttonGhost,
@@ -12124,7 +12135,7 @@ var InputInlineSelect = ({
 };
 
 // src/components/Input/InputKeywordSearch.tsx
-import { jsx as jsx42, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx42 } from "@emotion/react/jsx-runtime";
 var InputKeywordSearch = ({
   onSearchTextChanged,
   disabled = false,
@@ -12151,24 +12162,7 @@ var InputKeywordSearch = ({
       placeholder,
       showLabel: false,
       value,
-      icon: value ? /* @__PURE__ */ jsx42("button", { onClick: onClear, css: { pointerEvents: "all" }, children: /* @__PURE__ */ jsx42(Icon, { icon: "close", css: inputSearchCloseIcon }) }) : /* @__PURE__ */ jsxs25(
-        "svg",
-        {
-          width: "26",
-          height: "24",
-          viewBox: "0 0 26 24",
-          fill: "currentColor",
-          xmlns: "http://www.w3.org/2000/svg",
-          css: inputSearchIcon,
-          children: [
-            /* @__PURE__ */ jsxs25("g", { clipPath: "url(#clip0)", children: [
-              /* @__PURE__ */ jsx42("path", { d: "M11.539 0C5.48429 0 0.558105 4.74145 0.558105 10.5691C0.558105 16.3971 5.48429 21.1382 11.539 21.1382C17.594 21.1382 22.5199 16.3971 22.5199 10.5691C22.5199 4.74145 17.594 0 11.539 0ZM11.539 19.187C6.60198 19.187 2.58535 15.321 2.58535 10.5691C2.58535 5.81728 6.60198 1.95122 11.539 1.95122C16.476 1.95122 20.4926 5.81723 20.4926 10.5691C20.4926 15.321 16.476 19.187 11.539 19.187Z" }),
-              /* @__PURE__ */ jsx42("path", { d: "M25.196 22.3344L19.3846 16.7409C18.9886 16.3598 18.3473 16.3598 17.9513 16.7409C17.5553 17.1217 17.5553 17.7397 17.9513 18.1205L23.7627 23.714C23.9607 23.9045 24.2199 23.9998 24.4794 23.9998C24.7385 23.9998 24.998 23.9045 25.196 23.714C25.592 23.3332 25.592 22.7153 25.196 22.3344Z" })
-            ] }),
-            /* @__PURE__ */ jsx42("defs", { children: /* @__PURE__ */ jsx42("clipPath", { id: "clip0", children: /* @__PURE__ */ jsx42("rect", { width: "24.9351", height: "24", fill: "white", transform: "translate(0.558105)" }) }) })
-          ]
-        }
-      ),
+      icon: value ? /* @__PURE__ */ jsx42("button", { css: inputSearchCloseBtn, onClick: onClear, children: /* @__PURE__ */ jsx42(Icon, { icon: "close", iconColor: "red", size: "1rem" }) }) : /* @__PURE__ */ jsx42(Icon, { icon: "search", iconColor: "gray", size: "1rem" }),
       onChange: handleSearchTextChanged,
       onKeyPress: preventSubmitOnField,
       disabled,
@@ -12179,7 +12173,7 @@ var InputKeywordSearch = ({
 };
 
 // src/components/Input/InputSelect.tsx
-import { Fragment as Fragment5, jsx as jsx43, jsxs as jsxs26 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx43, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
 var InputSelect = ({
   label,
   defaultOption,
@@ -12195,13 +12189,13 @@ var InputSelect = ({
   classNameLabel,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       css: [inputContainer, typeof classNameContainer === "object" ? classNameContainer : void 0],
       className: typeof classNameContainer === "string" ? classNameContainer : "",
       children: [
-        showLabel ? /* @__PURE__ */ jsx43(Fragment5, { children: /* @__PURE__ */ jsxs26(
+        showLabel ? /* @__PURE__ */ jsx43(Fragment5, { children: /* @__PURE__ */ jsxs25(
           Label,
           {
             htmlFor: props.id,
@@ -12213,7 +12207,7 @@ var InputSelect = ({
             ]
           }
         ) }) : null,
-        /* @__PURE__ */ jsxs26(
+        /* @__PURE__ */ jsxs25(
           "select",
           {
             title: label,
@@ -12242,7 +12236,7 @@ var InputSelect = ({
 };
 
 // src/components/Input/InputToggle.tsx
-import { jsx as jsx44, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs26 } from "@emotion/react/jsx-runtime";
 var InputToggle = ({
   label,
   type,
@@ -12256,10 +12250,10 @@ var InputToggle = ({
   fontWeight = "medium",
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs27(Label, { css: [inputToggleLabel, disabled ? inputDisabled : void 0], "data-test-id": testId, children: [
+  return /* @__PURE__ */ jsxs26(Label, { css: [inputToggleLabel, disabled ? inputDisabled : void 0], "data-test-id": testId, children: [
     /* @__PURE__ */ jsx44("input", { type, css: toggleInput, checked, name, disabled, ...props }),
     /* @__PURE__ */ jsx44("span", { css: inlineLabel(fontWeight), dangerouslySetInnerHTML: { __html: label } }),
-    caption || errorMessage ? /* @__PURE__ */ jsxs27("span", { css: inputToggleMessageContainer, children: [
+    caption || errorMessage ? /* @__PURE__ */ jsxs26("span", { css: inputToggleMessageContainer, children: [
       caption ? /* @__PURE__ */ jsx44(Caption, { children: caption }) : null,
       errorMessage ? /* @__PURE__ */ jsx44(ErrorMessage, { message: errorMessage }) : null,
       warningMessage && !errorMessage ? /* @__PURE__ */ jsx44(WarningMessage, { message: warningMessage }) : null
@@ -12274,7 +12268,7 @@ var Legend = ({ children }) => {
 };
 
 // src/components/Input/Textarea.tsx
-import { Fragment as Fragment6, jsx as jsx46, jsxs as jsxs28 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx46, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
 var Textarea = ({
   label,
   icon,
@@ -12285,9 +12279,9 @@ var Textarea = ({
   warningMessage,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs28(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs27(Fragment6, { children: [
     showLabel ? /* @__PURE__ */ jsx46("label", { htmlFor: id, css: [labelText], children: label }) : null,
-    /* @__PURE__ */ jsxs28("div", { css: [inputContainer], children: [
+    /* @__PURE__ */ jsxs27("div", { css: [inputContainer], children: [
       /* @__PURE__ */ jsx46(
         "textarea",
         {
@@ -12445,7 +12439,7 @@ var LimitsBarTextColor = (statusColor) => css38`
 `;
 
 // src/components/LimitsBar/LimitsBar.tsx
-import { jsx as jsx50, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs28 } from "@emotion/react/jsx-runtime";
 var LimitsBar = ({ current, max, label }) => {
   const maxPercentage = 100;
   const progressBarValue = Math.ceil(current / max * maxPercentage);
@@ -12456,10 +12450,10 @@ var LimitsBar = ({ current, max, label }) => {
     danger: "var(--brand-secondary-5)"
   };
   const statusColor = progressBarValue === 100 ? colorMap.danger : progressBarValue >= 75 ? colorMap.warn : colorMap.base;
-  return /* @__PURE__ */ jsxs29("div", { css: LimitsBarContainer, children: [
-    /* @__PURE__ */ jsxs29("div", { css: LimitsBarLabelContainer, children: [
+  return /* @__PURE__ */ jsxs28("div", { css: LimitsBarContainer, children: [
+    /* @__PURE__ */ jsxs28("div", { css: LimitsBarLabelContainer, children: [
       /* @__PURE__ */ jsx50("span", { css: LimitsBarLabel, children: label }),
-      /* @__PURE__ */ jsxs29("span", { css: [LimitsBarLabel, LimitsBarTextColor(statusColor)], children: [
+      /* @__PURE__ */ jsxs28("span", { css: [LimitsBarLabel, LimitsBarTextColor(statusColor)], children: [
         current,
         " of ",
         max
@@ -12500,9 +12494,9 @@ var LinkListContainer = css39`
 `;
 
 // src/components/LinkList/LinkList.tsx
-import { jsx as jsx51, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
 var LinkList = ({ title, children, ...props }) => {
-  return /* @__PURE__ */ jsxs30("div", { css: LinkListContainer, ...props, children: [
+  return /* @__PURE__ */ jsxs29("div", { css: LinkListContainer, ...props, children: [
     /* @__PURE__ */ jsx51(Heading, { level: 3, children: title }),
     children
   ] });
@@ -12534,9 +12528,9 @@ var ScrollableListInner = css40`
 `;
 
 // src/components/List/ScrollableList.tsx
-import { jsx as jsx52, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
 var ScrollableList = ({ label, children, ...props }) => {
-  return /* @__PURE__ */ jsxs31("div", { css: [ScrollableListContainer, scrollbarStyles], ...props, children: [
+  return /* @__PURE__ */ jsxs30("div", { css: [ScrollableListContainer, scrollbarStyles], ...props, children: [
     label ? /* @__PURE__ */ jsx52(
       "span",
       {
@@ -12611,7 +12605,7 @@ var ScrollableListIcon = css42`
 `;
 
 // src/components/List/ScrollableListInputItem.tsx
-import { jsx as jsx53, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
 var ScrollableListInputItem = ({
   label,
   icon,
@@ -12619,8 +12613,8 @@ var ScrollableListInputItem = ({
   children,
   labelTestId
 }) => {
-  return /* @__PURE__ */ jsx53("div", { css: [ScrollableListItemContainer, active ? ScrollableListItemActive : void 0], children: /* @__PURE__ */ jsxs32("label", { "data-test-id": labelTestId, css: ScrollableListInputLabel, children: [
-    /* @__PURE__ */ jsxs32("span", { css: ScrollableListInputText, children: [
+  return /* @__PURE__ */ jsx53("div", { css: [ScrollableListItemContainer, active ? ScrollableListItemActive : void 0], children: /* @__PURE__ */ jsxs31("label", { "data-test-id": labelTestId, css: ScrollableListInputLabel, children: [
+    /* @__PURE__ */ jsxs31("span", { css: ScrollableListInputText, children: [
       icon,
       label
     ] }),
@@ -12631,9 +12625,9 @@ var ScrollableListInputItem = ({
 
 // src/components/List/ScrollableListItem.tsx
 import { css as css43 } from "@emotion/react";
-import { jsx as jsx54, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
 var ScrollableListItem = ({ buttonText, active, ...props }) => {
-  return /* @__PURE__ */ jsx54("div", { css: [ScrollableListItemContainer, active ? ScrollableListItemActive : void 0], children: /* @__PURE__ */ jsxs33("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
+  return /* @__PURE__ */ jsx54("div", { css: [ScrollableListItemContainer, active ? ScrollableListItemActive : void 0], children: /* @__PURE__ */ jsxs32("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
     /* @__PURE__ */ jsx54("span", { children: buttonText }),
     /* @__PURE__ */ jsx54(
       "svg",
@@ -12711,9 +12705,9 @@ var loadingDot = css44`
 `;
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
-import { jsx as jsx55, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
-var LoadingIndicator = () => {
-  return /* @__PURE__ */ jsxs34("div", { css: loader, role: "alert", "data-test-id": "loading-indicator", children: [
+import { jsx as jsx55, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
+var LoadingIndicator = ({ ...props }) => {
+  return /* @__PURE__ */ jsxs33("div", { role: "alert", css: loader, "data-test-id": "loading-indicator", ...props, children: [
     /* @__PURE__ */ jsx55("span", { css: loadingDot }),
     /* @__PURE__ */ jsx55("span", { css: loadingDot }),
     /* @__PURE__ */ jsx55("span", { css: loadingDot })
@@ -12756,7 +12750,7 @@ var loadingOverlayMessage = css45`
 `;
 
 // src/components/LoadingOverlay/LoadingOverlay.tsx
-import { jsx as jsx56, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
 var LoadingOverlay = ({
   isActive,
   statusMessage,
@@ -12782,7 +12776,7 @@ var LoadingOverlay = ({
       (_f = lottieRef.current) == null ? void 0 : _f.stop();
     }
   }, [isPaused]);
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs34(
     "div",
     {
       role: "alert",
@@ -12790,7 +12784,7 @@ var LoadingOverlay = ({
       "aria-hidden": !isActive,
       children: [
         /* @__PURE__ */ jsx56("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
-        /* @__PURE__ */ jsx56("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ jsxs35("div", { css: loadingOverlayBody, children: [
+        /* @__PURE__ */ jsx56("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ jsxs34("div", { css: loadingOverlayBody, children: [
           /* @__PURE__ */ jsx56(
             AnimationFile,
             {
@@ -12825,7 +12819,7 @@ var LoadingIcon = ({ height, width, ...props }) => {
       stroke: "currentColor",
       ...props,
       "data-test-id": "loading-icon",
-      children: /* @__PURE__ */ jsx56("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs35("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
+      children: /* @__PURE__ */ jsx56("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs34("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
         /* @__PURE__ */ jsx56("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
         /* @__PURE__ */ jsx56("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ jsx56(
           "animateTransform",
@@ -12977,7 +12971,7 @@ var IntegrationTileFloatingButtonMessage = (clicked) => css46`
 `;
 
 // src/components/Tiles/CreateTeamIntegrationTile.tsx
-import { jsx as jsx57, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
 var CreateTeamIntegrationTile = ({
   title = "Create a custom integration for your team",
   buttonText = "Add Integration",
@@ -12985,9 +12979,9 @@ var CreateTeamIntegrationTile = ({
   asDeepLink = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs36("div", { css: [IntegrationTileContainer, IntegrationTileBtnDashedBorder], ...props, children: [
+  return /* @__PURE__ */ jsxs35("div", { css: [IntegrationTileContainer, IntegrationTileBtnDashedBorder], ...props, children: [
     /* @__PURE__ */ jsx57("span", { css: IntegrationTileTitle, title, children: title }),
-    /* @__PURE__ */ jsxs36(
+    /* @__PURE__ */ jsxs35(
       Button,
       {
         buttonType: "tertiary",
@@ -13026,9 +13020,9 @@ var CreateTeamIntegrationTile = ({
 
 // src/components/Tiles/IntegrationBadges.tsx
 import { CgCheck as CgCheck2, CgLock, CgSandClock } from "react-icons/cg";
-import { jsx as jsx58, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
 var IntegrationedAddedBadge = ({ text = "Added" }) => {
-  return /* @__PURE__ */ jsxs37("span", { "data-testid": "integration-icon-installed", css: IntegrationAddedText, children: [
+  return /* @__PURE__ */ jsxs36("span", { "data-testid": "integration-icon-installed", css: IntegrationAddedText, children: [
     /* @__PURE__ */ jsx58(Icon, { icon: CgCheck2, iconColor: "currentColor" }),
     text
   ] });
@@ -13037,13 +13031,13 @@ var IntegrationCustomBadge = ({ text = "Custom" }) => {
   return /* @__PURE__ */ jsx58("span", { "data-testid": "integration-is-private", css: IntegrationCustomBadgeText("gray"), children: text });
 };
 var IntegrationPremiumBadge = ({ text = "Premium" }) => {
-  return /* @__PURE__ */ jsxs37("span", { css: IntegrationCustomBadgeText("blue"), children: [
+  return /* @__PURE__ */ jsxs36("span", { css: IntegrationCustomBadgeText("blue"), children: [
     /* @__PURE__ */ jsx58(Icon, { icon: CgLock, iconColor: "currentColor", size: 12 }),
     text
   ] });
 };
 var IntegrationComingSoonBadge = ({ text = "Coming soon" }) => {
-  return /* @__PURE__ */ jsxs37("span", { css: IntegrationCustomBadgeText("blue"), children: [
+  return /* @__PURE__ */ jsxs36("span", { css: IntegrationCustomBadgeText("blue"), children: [
     /* @__PURE__ */ jsx58(Icon, { icon: CgSandClock, iconColor: "currentColor", size: 12 }),
     text
   ] });
@@ -13064,7 +13058,7 @@ var ResolveIcon = ({ icon, name, styleType = "logo", ...props }) => {
 };
 
 // src/components/Tiles/EditTeamIntegrationTile.tsx
-import { jsx as jsx60, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
 var EditTeamIntegrationTile = ({
   id,
   icon,
@@ -13073,7 +13067,7 @@ var EditTeamIntegrationTile = ({
   isPublic,
   canEdit = false
 }) => {
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs37(
     "div",
     {
       css: IntegrationTileContainer,
@@ -13104,7 +13098,7 @@ var EditTeamIntegrationTile = ({
 import { css as css48 } from "@emotion/react";
 import { useEffect as useEffect7, useState as useState6 } from "react";
 import { CgHeart } from "react-icons/cg";
-import { jsx as jsx61, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
 var IntegrationComingSoon = ({
   name,
   icon,
@@ -13126,7 +13120,7 @@ var IntegrationComingSoon = ({
       };
     }
   }, [upVote, setUpVote, timing]);
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs38(
     "div",
     {
       css: IntegrationTileContainer,
@@ -13136,7 +13130,7 @@ var IntegrationComingSoon = ({
         /* @__PURE__ */ jsx61(IntegrationComingSoonBadge, {}),
         /* @__PURE__ */ jsx61(ResolveIcon, { icon, name }),
         /* @__PURE__ */ jsx61("span", { css: IntegrationTileName, title: name, children: name }),
-        /* @__PURE__ */ jsxs39(
+        /* @__PURE__ */ jsxs38(
           Button,
           {
             buttonType: "unimportant",
@@ -13157,7 +13151,7 @@ var IntegrationComingSoon = ({
                   children: "(I want this)"
                 }
               ),
-              /* @__PURE__ */ jsxs39("span", { "aria-hidden": !upVote, children: [
+              /* @__PURE__ */ jsxs38("span", { "aria-hidden": !upVote, children: [
                 /* @__PURE__ */ jsx61(Icon, { icon: CgHeart, iconColor: "currentColor", size: 18 }),
                 "Thanks!"
               ] })
@@ -13214,10 +13208,10 @@ var IntegrationLoadingFrame = css49`
 `;
 
 // src/components/Tiles/IntegrationLoadingTile.tsx
-import { Fragment as Fragment7, jsx as jsx62, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx62, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
 var IntegrationLoadingTile = ({ count = 1 }) => {
   const componentCount = Array.from(Array(count).keys());
-  return /* @__PURE__ */ jsx62(Fragment7, { children: componentCount.map((i) => /* @__PURE__ */ jsxs40("div", { css: IntegrationLoadingTileContainer, children: [
+  return /* @__PURE__ */ jsx62(Fragment7, { children: componentCount.map((i) => /* @__PURE__ */ jsxs39("div", { css: IntegrationLoadingTileContainer, children: [
     /* @__PURE__ */ jsx62("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
     /* @__PURE__ */ jsx62("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
   ] }, i)) });
@@ -13239,11 +13233,11 @@ var IntegrationModalImage = css50`
 `;
 
 // src/components/Tiles/IntegrationModalIcon.tsx
-import { jsx as jsx63, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
 var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
   const CompIcon = icon && typeof icon !== "string" ? icon : null;
-  return /* @__PURE__ */ jsxs41("div", { css: IntegrationModalIconContainer, children: [
-    /* @__PURE__ */ jsxs41("svg", { width: "49", height: "57", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", children: [
+  return /* @__PURE__ */ jsxs40("div", { css: IntegrationModalIconContainer, children: [
+    /* @__PURE__ */ jsxs40("svg", { width: "49", height: "57", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", children: [
       /* @__PURE__ */ jsx63(
         "path",
         {
@@ -13253,7 +13247,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
           strokeWidth: "2"
         }
       ),
-      /* @__PURE__ */ jsx63("defs", { children: /* @__PURE__ */ jsxs41("linearGradient", { id: "a", x1: "41.353", y1: "49.107", x2: "8.048", y2: "4.478", gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ jsx63("defs", { children: /* @__PURE__ */ jsxs40("linearGradient", { id: "a", x1: "41.353", y1: "49.107", x2: "8.048", y2: "4.478", gradientUnits: "userSpaceOnUse", children: [
         /* @__PURE__ */ jsx63("stop", { stopColor: "#1768B2" }),
         /* @__PURE__ */ jsx63("stop", { offset: "1", stopColor: "#B3EFE4" })
       ] }) })
@@ -13272,7 +13266,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
 };
 
 // src/components/Tiles/IntegrationTile.tsx
-import { jsx as jsx64, jsxs as jsxs42 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
 var IntegrationTile = ({
   id,
   icon,
@@ -13284,7 +13278,7 @@ var IntegrationTile = ({
   authorIcon,
   ...btnProps
 }) => {
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs41(
     "button",
     {
       type: "button",
@@ -13355,9 +13349,9 @@ var IntegrationModalHeaderContentWrapper = css52`
 `;
 
 // src/components/Modal/IntegrationModalHeader.tsx
-import { Fragment as Fragment8, jsx as jsx66, jsxs as jsxs43 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx66, jsxs as jsxs42 } from "@emotion/react/jsx-runtime";
 var HexModalBackground = ({ ...props }) => {
-  return /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs42(
     "svg",
     {
       width: "236",
@@ -13376,7 +13370,7 @@ var HexModalBackground = ({ ...props }) => {
             fill: "url(#paint0_linear_196_2737)"
           }
         ),
-        /* @__PURE__ */ jsx66("defs", { children: /* @__PURE__ */ jsxs43(
+        /* @__PURE__ */ jsx66("defs", { children: /* @__PURE__ */ jsxs42(
           "linearGradient",
           {
             id: "paint0_linear_196_2737",
@@ -13396,12 +13390,12 @@ var HexModalBackground = ({ ...props }) => {
   );
 };
 var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
-  return /* @__PURE__ */ jsxs43(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs42(Fragment8, { children: [
     /* @__PURE__ */ jsx66(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
-    /* @__PURE__ */ jsx66("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs43("div", { css: IntegrationModalHeaderTitleGroup, children: [
+    /* @__PURE__ */ jsx66("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs42("div", { css: IntegrationModalHeaderTitleGroup, children: [
       icon ? /* @__PURE__ */ jsx66(IntegrationModalIcon, { icon, name: name || "" }) : null,
       /* @__PURE__ */ jsx66(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-test-id": "integration-modal-title", children: name || "Create Team Integration" }),
-      menu2 ? /* @__PURE__ */ jsxs43("div", { css: IntegrationModalHeaderMenuPlacement, children: [
+      menu2 ? /* @__PURE__ */ jsxs42("div", { css: IntegrationModalHeaderMenuPlacement, children: [
         menu2,
         " "
       ] }) : null
@@ -13436,12 +13430,12 @@ var TooltipArrowStyles = css53`
 `;
 
 // src/components/Tooltip/Tooltip.tsx
-import { Fragment as Fragment9, jsx as jsx67, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx67, jsxs as jsxs43 } from "@emotion/react/jsx-runtime";
 function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
   const tooltip = useTooltipState({ placement });
-  return /* @__PURE__ */ jsxs44(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs43(Fragment9, { children: [
     /* @__PURE__ */ jsx67(TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => React15.cloneElement(children, referenceProps) }),
-    !title ? null : /* @__PURE__ */ jsxs44(ReakitTooltip, { ...tooltip, ...props, css: TooltipContainer, visible: visible != null ? visible : tooltip.visible, children: [
+    !title ? null : /* @__PURE__ */ jsxs43(ReakitTooltip, { ...tooltip, ...props, css: TooltipContainer, visible: visible != null ? visible : tooltip.visible, children: [
       /* @__PURE__ */ jsx67(TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
       title
     ] })
@@ -13473,7 +13467,7 @@ var inputIconBtn = css54`
 `;
 
 // src/components/ParameterInputs/ConnectToDataElementButton.tsx
-import { jsx as jsx68, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
 var ConnectToDataElementButton = ({
   icon,
   iconColor,
@@ -13483,7 +13477,7 @@ var ConnectToDataElementButton = ({
   ...props
 }) => {
   const title = isLocked ? "Read-only pattern parameter" : isBound ? "Connected to external content. Click to edit" : "Click to connect to external content";
-  return /* @__PURE__ */ jsx68(Tooltip, { title, children: /* @__PURE__ */ jsxs45(
+  return /* @__PURE__ */ jsx68(Tooltip, { title, children: /* @__PURE__ */ jsxs44(
     "button",
     {
       css: inputIconBtn,
@@ -13781,7 +13775,7 @@ var linkParameterIcon = css55`
 `;
 
 // src/components/ParameterInputs/ParameterDataResource.tsx
-import { jsx as jsx69, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
 function ParameterDataResource({
   label,
   labelLeadingIcon,
@@ -13791,12 +13785,12 @@ function ParameterDataResource({
   disabled,
   children
 }) {
-  return /* @__PURE__ */ jsxs46("div", { "data-testid": "parameter-data-connect-button", children: [
-    /* @__PURE__ */ jsxs46("span", { css: labelText2, children: [
+  return /* @__PURE__ */ jsxs45("div", { "data-testid": "parameter-data-connect-button", children: [
+    /* @__PURE__ */ jsxs45("span", { css: labelText2, children: [
       labelLeadingIcon ? labelLeadingIcon : null,
       label
     ] }),
-    /* @__PURE__ */ jsxs46(
+    /* @__PURE__ */ jsxs45(
       "button",
       {
         type: "button",
@@ -13836,10 +13830,10 @@ var ParameterDrawerHeaderTitle = css56`
 `;
 
 // src/components/ParameterInputs/ParameterDrawerHeader.tsx
-import { jsx as jsx70, jsxs as jsxs47 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
 var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
-  return /* @__PURE__ */ jsxs47("div", { css: ParameterDrawerHeaderContainer, children: [
-    /* @__PURE__ */ jsxs47("header", { css: ParameterDrawerHeaderTitleGroup, children: [
+  return /* @__PURE__ */ jsxs46("div", { css: ParameterDrawerHeaderContainer, children: [
+    /* @__PURE__ */ jsxs46("header", { css: ParameterDrawerHeaderTitleGroup, children: [
       iconBeforeTitle,
       /* @__PURE__ */ jsx70(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title, children: title })
     ] }),
@@ -13871,10 +13865,10 @@ var fieldsetLegend2 = css57`
 `;
 
 // src/components/ParameterInputs/ParameterGroup.tsx
-import { jsx as jsx71, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs47 } from "@emotion/react/jsx-runtime";
 var ParameterGroup = forwardRef7(
   ({ legend, isDisabled, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs48("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
+    return /* @__PURE__ */ jsxs47("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
       /* @__PURE__ */ jsx71("legend", { css: fieldsetLegend2, children: legend }),
       children
     ] });
@@ -13947,7 +13941,7 @@ var overrideMarker = css58`
 `;
 
 // src/components/ParameterInputs/ParameterShell.tsx
-import { jsx as jsx74, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
 var extractParameterProps = (props) => {
   const {
     id,
@@ -14003,16 +13997,16 @@ var ParameterShell = ({
   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: [
+  return /* @__PURE__ */ jsxs48("div", { css: inputContainer2, ...props, children: [
+    hiddenLabel || title ? null : /* @__PURE__ */ jsxs48(ParameterLabel, { id, css: labelText2, children: [
       labelLeadingIcon ? labelLeadingIcon : null,
       label
     ] }),
-    !title ? null : /* @__PURE__ */ jsxs49(ParameterLabel, { id, asSpan: true, children: [
+    !title ? null : /* @__PURE__ */ jsxs48(ParameterLabel, { id, asSpan: true, children: [
       labelLeadingIcon ? labelLeadingIcon : null,
       title
     ] }),
-    /* @__PURE__ */ jsxs49("div", { css: inputWrapper, children: [
+    /* @__PURE__ */ jsxs48("div", { css: inputWrapper, children: [
       menuItems ? /* @__PURE__ */ jsx74(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
       /* @__PURE__ */ jsx74(
         ParameterShellContext.Provider,
@@ -14024,7 +14018,7 @@ var ParameterShell = ({
             errorMessage: errorMessaging,
             onManuallySetErrorMessage: (message) => setErrorMessage(message)
           },
-          children: /* @__PURE__ */ jsxs49(ParameterShellPlaceholder, { children: [
+          children: /* @__PURE__ */ jsxs48(ParameterShellPlaceholder, { children: [
             children,
             hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx74(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
           ] })
@@ -14041,13 +14035,13 @@ var ParameterShellPlaceholder = ({ children }) => {
 var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx74(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx74("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx74("span", { hidden: true, children: "reset overridden value to default" }) }) });
 
 // src/components/ParameterInputs/ParameterImage.tsx
-import { Fragment as Fragment10, jsx as jsx75, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx75, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
 var ParameterImage = forwardRef9((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ jsx75(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: /* @__PURE__ */ jsx75(ParameterImageInner, { ref, ...innerProps }) });
 });
 var BrokenImage = ({ ...props }) => {
-  return /* @__PURE__ */ jsxs50(
+  return /* @__PURE__ */ jsxs49(
     "svg",
     {
       width: "214",
@@ -14060,7 +14054,7 @@ var BrokenImage = ({ ...props }) => {
       children: [
         /* @__PURE__ */ jsx75("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
         /* @__PURE__ */ jsx75("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
-        /* @__PURE__ */ jsxs50("defs", { children: [
+        /* @__PURE__ */ jsxs49("defs", { children: [
           /* @__PURE__ */ jsx75("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx75("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
           /* @__PURE__ */ jsx75(
             "image",
@@ -14114,7 +14108,7 @@ var ParameterImageInner = forwardRef9(
     useEffect8(() => {
       updateImageSrc();
     }, [value]);
-    return /* @__PURE__ */ jsxs50(Fragment10, { children: [
+    return /* @__PURE__ */ jsxs49(Fragment10, { children: [
       /* @__PURE__ */ jsx75(
         "input",
         {
@@ -14127,7 +14121,7 @@ var ParameterImageInner = forwardRef9(
           ...props
         }
       ),
-      /* @__PURE__ */ jsxs50("div", { css: imageWrapper, children: [
+      /* @__PURE__ */ jsxs49("div", { css: imageWrapper, children: [
         deferredValue && !errorMessage ? /* @__PURE__ */ jsx75(
           "img",
           {
@@ -14172,7 +14166,7 @@ var ParameterInputInner = forwardRef10(
 
 // src/components/ParameterInputs/ParameterLink.tsx
 import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx77, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
 var ParameterLink = forwardRef11(
   ({ buttonText = "Select project map node", disabled, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
@@ -14199,7 +14193,7 @@ var ParameterLink = forwardRef11(
 var ParameterLinkInner = forwardRef11(
   ({ externalLink, onConnectLink, disabled, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ jsxs51("div", { css: inputWrapper, children: [
+    return /* @__PURE__ */ jsxs50("div", { css: inputWrapper, children: [
       /* @__PURE__ */ jsx77(
         "input",
         {
@@ -14239,7 +14233,7 @@ var ParameterLinkInner = forwardRef11(
 );
 
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
-import { Fragment as Fragment11, jsx as jsx78, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx78, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -14265,7 +14259,7 @@ var ParameterNameAndPublicIdInput = ({
     navigator.clipboard.writeText(values[publicIdFieldName]);
   };
   autoFocus == null ? void 0 : autoFocus();
-  return /* @__PURE__ */ jsxs52(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs51(Fragment11, { children: [
     /* @__PURE__ */ jsx78(
       ParameterInput,
       {
@@ -14317,7 +14311,7 @@ var ParameterNameAndPublicIdInput = ({
 
 // src/components/ParameterInputs/ParameterRichText.tsx
 import { forwardRef as forwardRef12 } from "react";
-import { Fragment as Fragment12, jsx as jsx79, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx79, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
 var ParameterRichText = forwardRef12(
   ({
     label,
@@ -14331,7 +14325,7 @@ var ParameterRichText = forwardRef12(
     menuItems,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxs53(
+    return /* @__PURE__ */ jsxs52(
       ParameterShell,
       {
         "data-test-id": "parameter-input",
@@ -14367,7 +14361,7 @@ var ParameterRichTextInner = forwardRef12(({ ...props }, ref) => {
 
 // src/components/ParameterInputs/ParameterSelect.tsx
 import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx80, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
 var ParameterSelect = forwardRef13(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
@@ -14377,7 +14371,7 @@ var ParameterSelect = forwardRef13(
 var ParameterSelectInner = forwardRef13(
   ({ defaultOption, options, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ jsxs54(
+    return /* @__PURE__ */ jsxs53(
       "select",
       {
         css: [input2, selectInput],
@@ -14420,7 +14414,7 @@ var ParameterTextareaInner = forwardRef14(({ ...props }, ref) => {
 
 // src/components/ParameterInputs/ParameterToggle.tsx
 import { forwardRef as forwardRef15 } from "react";
-import { jsx as jsx82, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
 var ParameterToggle = forwardRef15((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ jsx82(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx82(ParameterToggleInner, { ref, ...innerProps }) });
@@ -14428,7 +14422,7 @@ var ParameterToggle = forwardRef15((props, ref) => {
 var ParameterToggleInner = forwardRef15(
   ({ ...props }, ref) => {
     const { id, label } = useParameterShell();
-    return /* @__PURE__ */ jsxs55("label", { css: inputToggleLabel2, children: [
+    return /* @__PURE__ */ jsxs54("label", { css: inputToggleLabel2, children: [
       /* @__PURE__ */ jsx82("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
       /* @__PURE__ */ jsx82("span", { css: inlineLabel2, children: label })
     ] });
@@ -14463,7 +14457,7 @@ var Popover = css59`
 `;
 
 // src/components/Popover/Popover.tsx
-import { Fragment as Fragment13, jsx as jsx83, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx83, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
 var Popover2 = ({
   iconColor = "green",
   buttonText,
@@ -14472,8 +14466,8 @@ var Popover2 = ({
   children
 }) => {
   const popover = usePopoverState({ placement });
-  return /* @__PURE__ */ jsxs56(Fragment13, { children: [
-    /* @__PURE__ */ jsxs56(PopoverDisclosure, { ...popover, css: PopoverBtn, title: buttonText, children: [
+  return /* @__PURE__ */ jsxs55(Fragment13, { children: [
+    /* @__PURE__ */ jsxs55(PopoverDisclosure, { ...popover, css: PopoverBtn, title: buttonText, children: [
       /* @__PURE__ */ jsx83(Icon, { icon: "info", iconColor, size: "1rem" }),
       /* @__PURE__ */ jsx83("span", { hidden: true, children: buttonText })
     ] }),
@@ -14501,7 +14495,7 @@ var progressListItemStyles = css60`
 `;
 
 // src/components/ProgressList/ProgressList.tsx
-import { jsx as jsx84, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
   const itemsWithStatus = useMemo2(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
@@ -14574,9 +14568,9 @@ var ProgressListItem = ({
     };
     return colorPerStatus[status];
   }, [status, error, errorLevel]);
-  return /* @__PURE__ */ jsxs57("li", { css: [progressListItemStyles, statusStyles], children: [
+  return /* @__PURE__ */ jsxs56("li", { css: [progressListItemStyles, statusStyles], children: [
     /* @__PURE__ */ jsx84(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx84("div", { children: /* @__PURE__ */ jsx84(Icon2, { size: 20 }) }) }),
-    /* @__PURE__ */ jsxs57("div", { children: [
+    /* @__PURE__ */ jsxs56("div", { children: [
       children,
       /* @__PURE__ */ jsx84("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
     ] })
@@ -14711,15 +14705,15 @@ var SwitchText = css63`
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment14, jsx as jsx86, jsxs as jsxs58 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx86, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
 var Switch = React17.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ jsxs58(Fragment14, { children: [
-      /* @__PURE__ */ jsxs58("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
+    return /* @__PURE__ */ jsxs57(Fragment14, { children: [
+      /* @__PURE__ */ jsxs57("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
         /* @__PURE__ */ jsx86("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
         /* @__PURE__ */ jsx86("span", { css: SwitchInputLabel, children: label })
       ] }),
@@ -15081,6 +15075,7 @@ export {
   buttonGhost,
   buttonGhostDestructive,
   buttonPrimary,
+  buttonPrimaryInvert,
   buttonRippleEffect,
   buttonSecondary,
   buttonSecondaryInvert,

package/dist/index.d.ts

@@ -67,6 +67,7 @@ declare const buttonRippleEffect: (props: {
 declare const buttonPrimary: _emotion_react.SerializedStyles;
 declare const buttonSecondary: _emotion_react.SerializedStyles;
 declare const buttonSecondaryInvert: _emotion_react.SerializedStyles;
+declare const buttonPrimaryInvert: _emotion_react.SerializedStyles;
 declare const buttonUnimportant: _emotion_react.SerializedStyles;
 declare const buttonGhost: _emotion_react.SerializedStyles;
 declare const buttonGhostDestructive: _emotion_react.SerializedStyles;
@@ -20184,7 +20185,7 @@ declare const UniformBadge: ({ theme, ...props }: React__default.SVGAttributes<S
 declare const UniformLogo: ({ theme, ...props }: UniformLogoProps & React.SVGAttributes<SVGElement>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /** Button themes that are available to use with our brand */
-type ButtonThemeProps$1 = 'primary' | 'secondary' | 'tertiary' | 'unimportant' | 'ghost' | 'ghostDestructive' | 'secondaryInvert';
+type ButtonThemeProps$1 = 'primary' | 'secondary' | 'tertiary' | 'unimportant' | 'ghost' | 'ghostDestructive' | 'primaryInvert' | 'secondaryInvert';
 /** Button sizes that are available to use with our brand */
 type ButtonSizeProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type ButtonProps = ButtonProps$1 & {
@@ -20925,7 +20926,7 @@ declare const ScrollableListItem: ({ buttonText, active, ...props }: ScrollableL
  * Loading Indicator
  * @example <LoadingIndicator />
  */
-declare const LoadingIndicator: () => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const LoadingIndicator: ({ ...props }: HTMLAttributes<HTMLDivElement>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 interface LoadingOverlayProps {
     /** sets whether to display the loading overlay components */
@@ -21786,4 +21787,4 @@ type StatusBulletProps = React$1.HTMLAttributes<HTMLSpanElement> & {
 };
 declare const StatusBullet: ({ status, hideText, size, message, ...props }: StatusBulletProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, AddListButtonThemeProps, AnimationFile, AnimationFileProps, ArrowPositionProps, Badge, BadgeProps, BoxHeightProps, BreakpointSize, BreakpointsMap, Button, ButtonProps, ButtonSizeProps, ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, ButtonWithMenuProps, Callout, CalloutProps, CalloutType, Caption, CaptionProps, Card, CardContainer, CardContainerBgColorProps, CardContainerProps, CardProps, CheckboxWithInfo, CheckboxWithInforProps, ChildFunction, ComboBoxGroupBase, ConnectToDataElementButton, ConnectToDataElementButtonProps, Container, ContainerProps, Counter, CounterProps, CreateTeamIntegrationTile, CreateTeamIntegrationTileProps, DashedBox, DashedBoxProps, Details, DetailsProps, Drawer, DrawerContextValue, DrawerItem, DrawerProps, DrawerProvider, DrawerRenderer, DrawerRendererItemProps, DrawerRendererProps, EditTeamIntegrationTile, EditTeamIntegrationTileProps, ErrorMessage, ErrorMessageProps, Fieldset, FieldsetProps, Heading, HeadingProps, HexModalBackground, Icon, IconColor, IconName, IconProps, IconType, IconsProvider, InlineAlert, InlineAlertProps, Input, InputComboBox, InputComboBoxOption, InputComboBoxProps, InputInlineSelect, InputInlineSelectOption, InputInlineSelectProps, InputKeywordSearch, InputKeywordSearchProps, InputProps, InputSelect, InputSelectProps, InputToggle, InputToggleProps, IntegrationComingSoon, IntegrationComingSoonProps, IntegrationHeaderSection, IntegrationHeaderSectionProps, IntegrationLoadingTile, IntegrationLoadingTileProps, IntegrationModalHeader, IntegrationModalHeaderProps, IntegrationModalIcon, IntegrationModalIconProps, IntegrationTile, IntegrationTileProps, JsonEditor, JsonEditorProps, Label, LabelProps, Legend, LegendProps, LevelProps, LimitsBar, LimitsBarProps, Link, LinkColorProps, LinkList, LinkListProps, LinkManagerWithRefType, LinkProps, LinkWithRef, LoadingIcon, LoadingIconProps, LoadingIndicator, LoadingOverlay, LoadingOverlayProps, Menu, MenuContext, MenuItem, MenuItemProps, MenuItemSeparator, MenuItemTextThemeProps, MenuProps, PageHeaderSection, PageHeaderSectionProps, Paragraph, ParagraphProps, ParameterDataConnectButtonProps, ParameterDataResource, ParameterDrawerHeader, ParameterDrawerHeaderProps, ParameterGroup, ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImageProps, ParameterInput, ParameterInputInner, ParameterInputProps, ParameterLabel, ParameterLabelProps, ParameterLink, ParameterLinkInner, ParameterLinkProps, ParameterMenuButton, ParameterMenuButtonProps, ParameterNameAndPublicIdInput, ParameterNameAndPublicIdInputProps, ParameterOverrideMarker, ParameterRichText, ParameterRichTextInner, ParameterRichTextProps, ParameterSelect, ParameterSelectInner, ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellPlaceholder, ParameterShellProps, ParameterTextarea, ParameterTextareaInner, ParameterTextareaProps, ParameterToggle, ParameterToggleInner, ParameterToggleProps, Popover, PopoverProps, ProgressList, ProgressListItem, ProgressListItemProps, ProgressListProps, RegisterDrawerProps, ResolveIcon, ResolveIconProps, ScrollableItemProps, ScrollableList, ScrollableListInputItem, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, ShortcutContext, ShortcutRevealer, Skeleton, SkeletonProps, StatusBullet, StatusBulletProps, StatusTypeProps, Switch, SwitchProps, TabButton, TabButtonGroup, TabButtonProps, TabContent, TabContentProps, Table, TableBody, TableBodyProps, TableCellData, TableCellDataProps, TableCellHead, TableCellHeadProps, TableFoot, TableFootProps, TableHead, TableHeadProps, TableProps, TableRow, TableRowProps, Tabs, TabsProps, TextAlignProps, Textarea, TextareaProps, Theme, ThemeProps, TileContainer, TileContainerProps, Tooltip, TooltipProps, UniformBadge, UniformLogo, UniformLogoProps, UseShortcutOptions, VerticalRhythm, VerticalRhythmProps, WarningMessage, WarningMessageProps, breakpoints, button, buttonGhost, buttonGhostDestructive, buttonPrimary, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonUnimportant, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, growSubtle, input, inputError, inputSelect, isMacLike, labelText, loader as loaderAnimationData, macifyShortcut, mq, ripple, scrollbarStyles, skeletonLoading, spinner as spinnerAnimationData, supports, useBreakpoint, useCloseCurrentDrawer, useCurrentDrawerRenderer, useCurrentTab, useDrawer, useIconContext, useMenuContext, useOutsideClick, useParameterShell, useShortcut };
+export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, AddListButtonThemeProps, AnimationFile, AnimationFileProps, ArrowPositionProps, Badge, BadgeProps, BoxHeightProps, BreakpointSize, BreakpointsMap, Button, ButtonProps, ButtonSizeProps, ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, ButtonWithMenuProps, Callout, CalloutProps, CalloutType, Caption, CaptionProps, Card, CardContainer, CardContainerBgColorProps, CardContainerProps, CardProps, CheckboxWithInfo, CheckboxWithInforProps, ChildFunction, ComboBoxGroupBase, ConnectToDataElementButton, ConnectToDataElementButtonProps, Container, ContainerProps, Counter, CounterProps, CreateTeamIntegrationTile, CreateTeamIntegrationTileProps, DashedBox, DashedBoxProps, Details, DetailsProps, Drawer, DrawerContextValue, DrawerItem, DrawerProps, DrawerProvider, DrawerRenderer, DrawerRendererItemProps, DrawerRendererProps, EditTeamIntegrationTile, EditTeamIntegrationTileProps, ErrorMessage, ErrorMessageProps, Fieldset, FieldsetProps, Heading, HeadingProps, HexModalBackground, Icon, IconColor, IconName, IconProps, IconType, IconsProvider, InlineAlert, InlineAlertProps, Input, InputComboBox, InputComboBoxOption, InputComboBoxProps, InputInlineSelect, InputInlineSelectOption, InputInlineSelectProps, InputKeywordSearch, InputKeywordSearchProps, InputProps, InputSelect, InputSelectProps, InputToggle, InputToggleProps, IntegrationComingSoon, IntegrationComingSoonProps, IntegrationHeaderSection, IntegrationHeaderSectionProps, IntegrationLoadingTile, IntegrationLoadingTileProps, IntegrationModalHeader, IntegrationModalHeaderProps, IntegrationModalIcon, IntegrationModalIconProps, IntegrationTile, IntegrationTileProps, JsonEditor, JsonEditorProps, Label, LabelProps, Legend, LegendProps, LevelProps, LimitsBar, LimitsBarProps, Link, LinkColorProps, LinkList, LinkListProps, LinkManagerWithRefType, LinkProps, LinkWithRef, LoadingIcon, LoadingIconProps, LoadingIndicator, LoadingOverlay, LoadingOverlayProps, Menu, MenuContext, MenuItem, MenuItemProps, MenuItemSeparator, MenuItemTextThemeProps, MenuProps, PageHeaderSection, PageHeaderSectionProps, Paragraph, ParagraphProps, ParameterDataConnectButtonProps, ParameterDataResource, ParameterDrawerHeader, ParameterDrawerHeaderProps, ParameterGroup, ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImageProps, ParameterInput, ParameterInputInner, ParameterInputProps, ParameterLabel, ParameterLabelProps, ParameterLink, ParameterLinkInner, ParameterLinkProps, ParameterMenuButton, ParameterMenuButtonProps, ParameterNameAndPublicIdInput, ParameterNameAndPublicIdInputProps, ParameterOverrideMarker, ParameterRichText, ParameterRichTextInner, ParameterRichTextProps, ParameterSelect, ParameterSelectInner, ParameterSelectProps, ParameterShell, ParameterShellContext, ParameterShellPlaceholder, ParameterShellProps, ParameterTextarea, ParameterTextareaInner, ParameterTextareaProps, ParameterToggle, ParameterToggleInner, ParameterToggleProps, Popover, PopoverProps, ProgressList, ProgressListItem, ProgressListItemProps, ProgressListProps, RegisterDrawerProps, ResolveIcon, ResolveIconProps, ScrollableItemProps, ScrollableList, ScrollableListInputItem, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, ShortcutContext, ShortcutRevealer, Skeleton, SkeletonProps, StatusBullet, StatusBulletProps, StatusTypeProps, Switch, SwitchProps, TabButton, TabButtonGroup, TabButtonProps, TabContent, TabContentProps, Table, TableBody, TableBodyProps, TableCellData, TableCellDataProps, TableCellHead, TableCellHeadProps, TableFoot, TableFootProps, TableHead, TableHeadProps, TableProps, TableRow, TableRowProps, Tabs, TabsProps, TextAlignProps, Textarea, TextareaProps, Theme, ThemeProps, TileContainer, TileContainerProps, Tooltip, TooltipProps, UniformBadge, UniformLogo, UniformLogoProps, UseShortcutOptions, VerticalRhythm, VerticalRhythmProps, WarningMessage, WarningMessageProps, breakpoints, button, buttonGhost, buttonGhostDestructive, buttonPrimary, buttonPrimaryInvert, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonUnimportant, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, growSubtle, input, inputError, inputSelect, isMacLike, labelText, loader as loaderAnimationData, macifyShortcut, mq, ripple, scrollbarStyles, skeletonLoading, spinner as spinnerAnimationData, supports, useBreakpoint, useCloseCurrentDrawer, useCurrentDrawerRenderer, useCurrentTab, useDrawer, useIconContext, useMenuContext, useOutsideClick, useParameterShell, useShortcut };

package/dist/index.js

@@ -146,6 +146,7 @@ __export(src_exports, {
   buttonGhost: () => buttonGhost,
   buttonGhostDestructive: () => buttonGhostDestructive,
   buttonPrimary: () => buttonPrimary,
+  buttonPrimaryInvert: () => buttonPrimaryInvert,
   buttonRippleEffect: () => buttonRippleEffect,
   buttonSecondary: () => buttonSecondary,
   buttonSecondaryInvert: () => buttonSecondaryInvert,
@@ -493,6 +494,20 @@ var buttonSecondaryInvert = import_react3.css`
 
   ${buttonRippleEffect({ hoverColor: "var(--gray-50)" })}
 `;
+var buttonPrimaryInvert = import_react3.css`
+  background: var(--white);
+  color: var(--brand-secondary-1);
+  box-shadow: 0 0 0 1px var(--brand-secondary-1);
+  transition: box-shadow var(--duration-fast) var(--timing-ease-out);
+  gap: var(--spacing-sm);
+
+  &:disabled {
+    color: var(--gray-300);
+    box-shadow: 0 0 0 1px var(--gray-300);
+  }
+
+  ${buttonRippleEffect({ hoverColor: "var(--gray-50)" })}
+`;
 var buttonUnimportant = import_react3.css`
   background: var(--brand-secondary-2);
   color: var(--brand-secondary-1);
@@ -611,15 +626,11 @@ var inputSelect = import_react4.css`
   background-size: 1rem;
   padding-right: var(--spacing-xl);
 `;
-var inputSearchIcon = import_react4.css`
-  color: var(--brand-secondary-1);
-  height: 1.25rem;
-  width: 1.25rem;
-`;
-var inputSearchCloseIcon = import_react4.css`
-  color: var(--brand-primary-2);
-  height: 1.5rem;
-  width: 1.5rem;
+var inputSearchCloseBtn = import_react4.css`
+  background: none;
+  border: none;
+  padding: 0;
+  pointer-events: all;
 `;
 var inputToggleLabel = import_react4.css`
   align-items: flex-start;
@@ -10582,6 +10593,7 @@ var Button = React5.forwardRef(
   ({ buttonType = "primary", size = "md", children, ...props }, ref) => {
     const buttonTheme = {
       primary: buttonPrimary,
+      primaryInvert: buttonPrimaryInvert,
       secondary: buttonSecondary,
       secondaryInvert: buttonSecondaryInvert,
       ghost: buttonGhost,
@@ -12334,24 +12346,7 @@ var InputKeywordSearch = ({
       placeholder,
       showLabel: false,
       value,
-      icon: value ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { onClick: onClear, css: { pointerEvents: "all" }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { icon: "close", css: inputSearchCloseIcon }) }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-        "svg",
-        {
-          width: "26",
-          height: "24",
-          viewBox: "0 0 26 24",
-          fill: "currentColor",
-          xmlns: "http://www.w3.org/2000/svg",
-          css: inputSearchIcon,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("g", { clipPath: "url(#clip0)", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M11.539 0C5.48429 0 0.558105 4.74145 0.558105 10.5691C0.558105 16.3971 5.48429 21.1382 11.539 21.1382C17.594 21.1382 22.5199 16.3971 22.5199 10.5691C22.5199 4.74145 17.594 0 11.539 0ZM11.539 19.187C6.60198 19.187 2.58535 15.321 2.58535 10.5691C2.58535 5.81728 6.60198 1.95122 11.539 1.95122C16.476 1.95122 20.4926 5.81723 20.4926 10.5691C20.4926 15.321 16.476 19.187 11.539 19.187Z" }),
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M25.196 22.3344L19.3846 16.7409C18.9886 16.3598 18.3473 16.3598 17.9513 16.7409C17.5553 17.1217 17.5553 17.7397 17.9513 18.1205L23.7627 23.714C23.9607 23.9045 24.2199 23.9998 24.4794 23.9998C24.7385 23.9998 24.998 23.9045 25.196 23.714C25.592 23.3332 25.592 22.7153 25.196 22.3344Z" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("clipPath", { id: "clip0", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("rect", { width: "24.9351", height: "24", fill: "white", transform: "translate(0.558105)" }) }) })
-          ]
-        }
-      ),
+      icon: value ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { css: inputSearchCloseBtn, onClick: onClear, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { icon: "close", iconColor: "red", size: "1rem" }) }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { icon: "search", iconColor: "gray", size: "1rem" }),
       onChange: handleSearchTextChanged,
       onKeyPress: preventSubmitOnField,
       disabled,
@@ -12895,8 +12890,8 @@ var loadingDot = import_react58.css`
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
 var import_jsx_runtime54 = require("@emotion/react/jsx-runtime");
-var LoadingIndicator = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { css: loader, role: "alert", "data-test-id": "loading-indicator", children: [
+var LoadingIndicator = ({ ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { role: "alert", css: loader, "data-test-id": "loading-indicator", ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { css: loadingDot }),
     /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { css: loadingDot }),
     /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { css: loadingDot })
@@ -15251,6 +15246,7 @@ var StatusBullet = ({
   buttonGhost,
   buttonGhostDestructive,
   buttonPrimary,
+  buttonPrimaryInvert,
   buttonRippleEffect,
   buttonSecondary,
   buttonSecondaryInvert,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "18.27.0",
+  "version": "18.27.1-alpha.23+ed7d9bfa0",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -54,5 +54,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2f40af577d2f8ce537e857f8fbc08b4030e73cd1"
+  "gitHead": "ed7d9bfa014db103691c2d2030b1549770a48d6b"
 }