@uniformdev/design-system 18.27.1-alpha.12 → 18.28.0

package/dist/esm/index.js

@@ -424,15 +424,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;
@@ -12124,7 +12120,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 +12147,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 +12158,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 +12174,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 +12192,7 @@ var InputSelect = ({
             ]
           }
         ) }) : null,
-        /* @__PURE__ */ jsxs26(
+        /* @__PURE__ */ jsxs25(
           "select",
           {
             title: label,
@@ -12242,7 +12221,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 +12235,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 +12253,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 +12264,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 +12424,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 +12435,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 +12479,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 +12513,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 +12590,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 +12598,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 +12610,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 +12690,9 @@ var loadingDot = css44`
 `;
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
-import { jsx as jsx55, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
 var LoadingIndicator = () => {
-  return /* @__PURE__ */ jsxs34("div", { css: loader, role: "alert", "data-test-id": "loading-indicator", children: [
+  return /* @__PURE__ */ jsxs33("div", { css: loader, role: "alert", "data-test-id": "loading-indicator", children: [
     /* @__PURE__ */ jsx55("span", { css: loadingDot }),
     /* @__PURE__ */ jsx55("span", { css: loadingDot }),
     /* @__PURE__ */ jsx55("span", { css: loadingDot })
@@ -12756,7 +12735,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 +12761,7 @@ var LoadingOverlay = ({
       (_f = lottieRef.current) == null ? void 0 : _f.stop();
     }
   }, [isPaused]);
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs34(
     "div",
     {
       role: "alert",
@@ -12790,7 +12769,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 +12804,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 +12956,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 +12964,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 +13005,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 +13016,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 +13043,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 +13052,7 @@ var EditTeamIntegrationTile = ({
   isPublic,
   canEdit = false
 }) => {
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs37(
     "div",
     {
       css: IntegrationTileContainer,
@@ -13104,7 +13083,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 +13105,7 @@ var IntegrationComingSoon = ({
       };
     }
   }, [upVote, setUpVote, timing]);
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs38(
     "div",
     {
       css: IntegrationTileContainer,
@@ -13136,7 +13115,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 +13136,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 +13193,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 +13218,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 +13232,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 +13251,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 +13263,7 @@ var IntegrationTile = ({
   authorIcon,
   ...btnProps
 }) => {
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs41(
     "button",
     {
       type: "button",
@@ -13355,9 +13334,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 +13355,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 +13375,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 +13415,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 +13452,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 +13462,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 +13760,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 +13770,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 +13815,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 +13850,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 +13926,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 +13982,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 +14003,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 +14020,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 +14039,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 +14093,7 @@ var ParameterImageInner = forwardRef9(
     useEffect8(() => {
       updateImageSrc();
     }, [value]);
-    return /* @__PURE__ */ jsxs50(Fragment10, { children: [
+    return /* @__PURE__ */ jsxs49(Fragment10, { children: [
       /* @__PURE__ */ jsx75(
         "input",
         {
@@ -14127,7 +14106,7 @@ var ParameterImageInner = forwardRef9(
           ...props
         }
       ),
-      /* @__PURE__ */ jsxs50("div", { css: imageWrapper, children: [
+      /* @__PURE__ */ jsxs49("div", { css: imageWrapper, children: [
         deferredValue && !errorMessage ? /* @__PURE__ */ jsx75(
           "img",
           {
@@ -14172,7 +14151,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 +14178,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 +14218,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 +14244,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 +14296,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 +14310,7 @@ var ParameterRichText = forwardRef12(
     menuItems,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxs53(
+    return /* @__PURE__ */ jsxs52(
       ParameterShell,
       {
         "data-test-id": "parameter-input",
@@ -14367,7 +14346,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 +14356,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 +14399,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 +14407,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 +14442,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 +14451,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 +14480,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 +14553,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 +14690,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 })
       ] }),

package/dist/index.js

@@ -611,15 +611,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;
@@ -12334,24 +12330,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "18.27.1-alpha.12+a2ae84d4d",
+  "version": "18.28.0",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -54,5 +54,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a2ae84d4d88dab29f6291a75d7628663dc2df8bd"
+  "gitHead": "97d916ca20965e8a86d2454847114068895ccddd"
 }