@uniformdev/design-system 18.5.0 → 18.7.0

package/dist/index.js

@@ -84,6 +84,7 @@ __export(src_exports, {
   ScrollableListItem: () => ScrollableListItem,
   ShortcutContext: () => ShortcutContext,
   ShortcutRevealer: () => ShortcutRevealer,
+  Skeleton: () => Skeleton,
   StatusBullet: () => StatusBullet,
   Switch: () => Switch,
   TabButton: () => TabButton,
@@ -106,6 +107,7 @@ __export(src_exports, {
   breakpoints: () => breakpoints,
   button: () => button,
   buttonGhost: () => buttonGhost,
+  buttonGhostDestructive: () => buttonGhostDestructive,
   buttonPrimary: () => buttonPrimary,
   buttonRippleEffect: () => buttonRippleEffect,
   buttonSecondary: () => buttonSecondary,
@@ -134,6 +136,7 @@ __export(src_exports, {
   useDrawer: () => useDrawer,
   useIconContext: () => useIconContext,
   useMenuContext: () => useMenuContext,
+  useOutsideClick: () => useOutsideClick,
   useShortcut: () => useShortcut
 });
 module.exports = __toCommonJS(src_exports);
@@ -359,9 +362,23 @@ var useBreakpoint = (0, import_react_use.createBreakpoint)(breakpoints);
 var mq = (size) => `@media (min-width: ${breakpoints[size]}px)`;
 var supports = (cssProp) => `@supports (${cssProp})`;
 
+// src/utils/useOutsideClick.tsx
+var import_react2 = require("react");
+var useOutsideClick = (containerRef, handler) => {
+  (0, import_react2.useEffect)(() => {
+    const outsideClick = (event) => {
+      if ((containerRef == null ? void 0 : containerRef.current) && !containerRef.current.contains(event.target)) {
+        handler();
+      }
+    };
+    document.addEventListener("mousedown", outsideClick);
+    return () => document.removeEventListener("mousedown", outsideClick);
+  }, [containerRef, handler]);
+};
+
 // src/components/Button/Button.styles.ts
-var import_react2 = require("@emotion/react");
-var button = import_react2.css`
+var import_react3 = require("@emotion/react");
+var button = import_react3.css`
   align-items: center;
   border: none;
   border-radius: var(--rounded-sm);
@@ -382,7 +399,7 @@ var button = import_react2.css`
     pointer-events: none;
   }
 `;
-var buttonRippleEffect = (props) => import_react2.css`
+var buttonRippleEffect = (props) => import_react3.css`
   background-position: center;
   transition: background var(--duration-slow);
 
@@ -397,7 +414,7 @@ var buttonRippleEffect = (props) => import_react2.css`
     transition: background 0s;
   }
 `;
-var buttonPrimary = import_react2.css`
+var buttonPrimary = import_react3.css`
   background: var(--brand-secondary-1);
   color: var(--white);
 
@@ -408,7 +425,7 @@ var buttonPrimary = import_react2.css`
 
   ${buttonRippleEffect({ hoverColor: "var(--brand-secondary-1)" })}
 `;
-var buttonSecondary = import_react2.css`
+var buttonSecondary = import_react3.css`
   background: var(--brand-secondary-5);
   color: var(--white);
 
@@ -419,7 +436,7 @@ var buttonSecondary = import_react2.css`
 
   ${buttonRippleEffect({ hoverColor: "var(--brand-secondary-5)" })}
 `;
-var buttonSecondaryInvert = import_react2.css`
+var buttonSecondaryInvert = import_react3.css`
   background: var(--white);
   color: var(--brand-secondary-5);
   box-shadow: 0 0 0 1px var(--brand-secondary-5);
@@ -432,7 +449,7 @@ var buttonSecondaryInvert = import_react2.css`
 
   ${buttonRippleEffect({ hoverColor: "var(--gray-50)" })}
 `;
-var buttonUnimportant = import_react2.css`
+var buttonUnimportant = import_react3.css`
   background: var(--brand-secondary-2);
   color: var(--brand-secondary-1);
 
@@ -443,7 +460,7 @@ var buttonUnimportant = import_react2.css`
 
   ${buttonRippleEffect({ hoverColor: "var(--brand-secondary-2)" })}
 `;
-var buttonGhost = import_react2.css`
+var buttonGhost = import_react3.css`
   background: transparent;
   color: var(--brand-secondary-3);
 
@@ -459,7 +476,15 @@ var buttonGhost = import_react2.css`
 
   ${buttonRippleEffect({ hoverColor: "var(--white)", activeColor: "var(--gray-100)" })}
 `;
-var buttonTertiary = import_react2.css`
+var buttonGhostDestructive = import_react3.css`
+  ${buttonGhost}
+  color: var(--brand-secondary-5);
+
+  &:hover {
+    border-color: var(--brand-secondary-5);
+  }
+`;
+var buttonTertiary = import_react3.css`
   background: var(--brand-secondary-3);
   color: var(--white);
 
@@ -472,17 +497,17 @@ var buttonTertiary = import_react2.css`
 `;
 
 // src/components/Input/styles/Inputs.styles.ts
-var import_react3 = require("@emotion/react");
-var inputContainer = import_react3.css`
+var import_react4 = require("@emotion/react");
+var inputContainer = import_react4.css`
   position: relative;
 `;
-var labelText = import_react3.css`
+var labelText = import_react4.css`
   display: flex;
   font-weight: var(--fw-bold);
   margin: 0 0 var(--spacing-xs);
   align-items: center;
 `;
-var input = (whiteSpaceWrap) => import_react3.css`
+var input = (whiteSpaceWrap) => import_react4.css`
   appearance: none;
   background-color: var(--white);
   border: 1px solid var(--gray-400);
@@ -522,37 +547,37 @@ var input = (whiteSpaceWrap) => import_react3.css`
     background-size: contain;
   }
 `;
-var inputError = import_react3.css`
+var inputError = import_react4.css`
   border-color: var(--brand-secondary-5);
 `;
-var inputIcon = import_react3.css`
+var inputIcon = import_react4.css`
   align-items: center;
   display: flex;
   position: absolute;
   inset: 0 var(--spacing-base) 0 auto;
   pointer-events: none;
 `;
-var inputWithIcon = import_react3.css`
+var inputWithIcon = import_react4.css`
   padding-right: var(--spacing-2xl);
 `;
-var inputSelect = import_react3.css`
+var inputSelect = import_react4.css`
   background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z' fill='currentColor' /%3E%3C/svg%3E");
   background-position: right var(--spacing-sm) center;
   background-repeat: no-repeat;
   background-size: 1rem;
   padding-right: var(--spacing-xl);
 `;
-var inputSearchIcon = import_react3.css`
+var inputSearchIcon = import_react4.css`
   color: var(--brand-secondary-1);
   height: 1.25rem;
   width: 1.25rem;
 `;
-var inputSearchCloseIcon = import_react3.css`
+var inputSearchCloseIcon = import_react4.css`
   color: var(--brand-primary-2);
   height: 1.5rem;
   width: 1.5rem;
 `;
-var inputToggleLabel = import_react3.css`
+var inputToggleLabel = import_react4.css`
   align-items: flex-start;
   cursor: pointer;
   display: inline-flex;
@@ -563,7 +588,7 @@ var inputToggleLabel = import_react3.css`
   position: relative;
   min-height: var(--spacing-md);
 `;
-var toggleInput = import_react3.css`
+var toggleInput = import_react4.css`
   appearance: none;
   border: 1px solid var(--brand-secondary-1);
   background: var(--white);
@@ -601,7 +626,7 @@ var toggleInput = import_react3.css`
     border-color: var(--gray-300);
   }
 `;
-var inlineLabel = (fontWeight) => import_react3.css`
+var inlineLabel = (fontWeight) => import_react4.css`
   font-weight: ${fontWeight === "medium" ? "var(--fw-medium)" : fontWeight === "normal" ? "var(--fw-regular)" : "var(--fw-bold)"};
   padding-left: var(--spacing-lg);
 
@@ -614,11 +639,11 @@ var inlineLabel = (fontWeight) => import_react3.css`
     }
   }
 `;
-var inputDisabled = import_react3.css`
+var inputDisabled = import_react4.css`
   cursor: not-allowed;
   color: var(--gray-400);
 `;
-var inputToggleMessageContainer = import_react3.css`
+var inputToggleMessageContainer = import_react4.css`
   display: flex;
   flex-direction: column;
   flex-basis: 100%;
@@ -626,11 +651,11 @@ var inputToggleMessageContainer = import_react3.css`
   margin-top: -0.5rem;
   line-height: 1.15;
 `;
-var textarea = import_react3.css`
+var textarea = import_react4.css`
   ${input("wrap")};
   display: block;
 `;
-var inputSelectCompact = import_react3.css`
+var inputSelectCompact = import_react4.css`
   font-size: var(--fs-xs);
   padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-xs);
   border-color: var(--gray-300);
@@ -638,8 +663,8 @@ var inputSelectCompact = import_react3.css`
 `;
 
 // src/styles/Animations.styles.ts
-var import_react4 = require("@emotion/react");
-var growSubtle = import_react4.keyframes`
+var import_react5 = require("@emotion/react");
+var growSubtle = import_react5.keyframes`
   0%,
   100% {
     transform: scale(1);
@@ -650,7 +675,7 @@ var growSubtle = import_react4.keyframes`
     opacity: 1;
   }
 `;
-var fadeInBottom = import_react4.keyframes`
+var fadeInBottom = import_react5.keyframes`
   0% {
     opacity: 0;
     transform: translateY(10px);
@@ -660,7 +685,7 @@ var fadeInBottom = import_react4.keyframes`
     transform: translateY(0);
   }
 `;
-var fadeOutBottom = import_react4.keyframes`
+var fadeOutBottom = import_react5.keyframes`
   0% {
     opacity: 1;
     transform: translateY(0);
@@ -670,7 +695,7 @@ var fadeOutBottom = import_react4.keyframes`
     transform: translateY(10px);
   }
 `;
-var fadeIn = import_react4.keyframes`
+var fadeIn = import_react5.keyframes`
   0% {
     opacity: 0;
   }
@@ -678,11 +703,11 @@ var fadeIn = import_react4.keyframes`
     opacity: 1;
   }
 `;
-var ripple = import_react4.keyframes`
+var ripple = import_react5.keyframes`
 to {
   transform: scale(4);
 }`;
-var skeletonLoading = import_react4.keyframes`
+var skeletonLoading = import_react5.keyframes`
 0% {
   background-color: var(--gray-100);
 }
@@ -690,7 +715,7 @@ var skeletonLoading = import_react4.keyframes`
   background-color: var(--gray-200);
 }
 `;
-var fadeInLtr = import_react4.keyframes`
+var fadeInLtr = import_react5.keyframes`
 from {
   opacity: 0;
   transform: translateX(-10px);
@@ -700,7 +725,7 @@ to {
   transform: translateX(0);
 }
 `;
-var fadeInRtl = import_react4.keyframes`
+var fadeInRtl = import_react5.keyframes`
 from {
   opacity: 0;
   transform: translateX(10px);
@@ -712,8 +737,8 @@ to {
 `;
 
 // src/styles/Scrollbar.styles.ts
-var import_react5 = require("@emotion/react");
-var scrollbarStyles = import_react5.css`
+var import_react6 = require("@emotion/react");
+var scrollbarStyles = import_react6.css`
   @supports ((scrollbar-color: #d1d5db transparent) and (scrollbar-width: thin)) {
     /*
         #d1d5db = bg-gray-300
@@ -742,22 +767,22 @@ var scrollbarStyles = import_react5.css`
 `;
 
 // src/components/AddButton/AddButton.tsx
-var import_react9 = require("@emotion/react");
+var import_react10 = require("@emotion/react");
 
 // src/components/Shortcuts/ShortcutRevealer.tsx
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 
 // src/components/Shortcuts/ShortcutRevealer.styles.ts
-var import_react6 = require("@emotion/react");
-var ShortcutRevealerContainer = import_react6.css`
+var import_react7 = require("@emotion/react");
+var ShortcutRevealerContainer = import_react7.css`
   position: absolute;
 `;
-var ShortcutRevealerHotKeyContainer = import_react6.css`
+var ShortcutRevealerHotKeyContainer = import_react7.css`
   display: flex;
   gap: var(--spacing-sm);
   font-size: var(--fs-xs);
 `;
-var ShortcutRevealerHotKey = import_react6.css`
+var ShortcutRevealerHotKey = import_react7.css`
   background: linear-gradient(to bottom right, var(--gray-100), var(--gray-200));
   border-radius: var(--rounded-base);
   border: 1px solid var(--gray-600);
@@ -806,11 +831,11 @@ function useShortcut({
 // src/components/Shortcuts/ShortcutRevealer.tsx
 var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
 var loggedHotkeyConsole = false;
-var Context = import_react7.default.createContext(false);
+var Context = import_react8.default.createContext(false);
 var revealHotkey = ["ctrl+F1", "ctrl+shift+/"];
 function ShortcutContext({ children }) {
-  const [reveal, setReveal] = (0, import_react7.useState)(false);
-  (0, import_react7.useEffect)(() => {
+  const [reveal, setReveal] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
     if (!loggedHotkeyConsole) {
       loggedHotkeyConsole = true;
       console.log(
@@ -839,7 +864,7 @@ function ShortcutRevealer({
   macShortcut,
   className
 }) {
-  const reveal = (0, import_react7.useContext)(Context);
+  const reveal = (0, import_react8.useContext)(Context);
   if (!reveal || !shortcut.includes("+") && shortcut.length > 1) {
     return null;
   }
@@ -863,8 +888,8 @@ function Hotkey({ shortcut }) {
 }
 
 // src/components/AddButton/AddButton.styles.ts
-var import_react8 = require("@emotion/react");
-var addButton = import_react8.css`
+var import_react9 = require("@emotion/react");
+var addButton = import_react9.css`
   --max-size: clamp(2.5rem, 100vw, 3.5rem);
   align-items: center;
   box-shadow: var(--shadow-base);
@@ -940,7 +965,7 @@ var AddButton = ({
           ShortcutRevealer,
           {
             shortcut,
-            css: import_react9.css`
+            css: import_react10.css`
             top: -2rem;
             left: -1.5rem;
           `
@@ -956,11 +981,11 @@ var AddButton = ({
 var import_cg = require("react-icons/cg");
 
 // src/components/Icons/Icon.tsx
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 
 // src/components/Icons/Icon.styles.ts
-var import_react10 = require("@emotion/react");
-var IconImg = import_react10.css`
+var import_react11 = require("@emotion/react");
+var IconImg = import_react11.css`
   display: hidden;
 
   ${mq("sm")} {
@@ -972,22 +997,22 @@ var IconImg = import_react10.css`
     vertical-align: middle;
   }
 `;
-var IconColorGreen = import_react10.css`
+var IconColorGreen = import_react11.css`
   color: var(--brand-secondary-3);
 `;
-var IconColorRed = import_react10.css`
+var IconColorRed = import_react11.css`
   color: var(--brand-secondary-5);
 `;
-var IconColorGray = import_react10.css`
+var IconColorGray = import_react11.css`
   color: var(--gray-500);
 `;
-var IconColorCurrent = import_react10.css`
+var IconColorCurrent = import_react11.css`
   color: currentColor;
 `;
 
 // src/components/Icons/IconsProvider.tsx
 var import_param_case = require("param-case");
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/components/Icons/customIcons.tsx
 var import_react_icons = require("react-icons");
@@ -1303,16 +1328,16 @@ var customIcons = {
 
 // src/components/Icons/IconsProvider.tsx
 var import_jsx_runtime4 = require("@emotion/react/jsx-runtime");
-var IconContext = (0, import_react11.createContext)({
+var IconContext = (0, import_react12.createContext)({
   iconsMap: {},
   isLoading: true
 });
 function useIconContext() {
-  return (0, import_react11.useContext)(IconContext);
+  return (0, import_react12.useContext)(IconContext);
 }
 function IconsProvider({ children }) {
-  const [isLoading, setIsLoading] = (0, import_react11.useState)(true);
-  const [iconsMap, setIconsMap] = (0, import_react11.useState)({});
+  const [isLoading, setIsLoading] = (0, import_react12.useState)(true);
+  const [iconsMap, setIconsMap] = (0, import_react12.useState)({});
   const initializeIconsMap = async () => {
     const allCssGgIcons = await import("react-icons/cg");
     const iconMap = Object.entries(allCssGgIcons).reduce((map, [key, icon]) => {
@@ -1325,7 +1350,7 @@ function IconsProvider({ children }) {
     setIconsMap({ ...iconMap, ...customIcons });
     setIsLoading(false);
   };
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     initializeIconsMap();
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconContext.Provider, { value: { iconsMap, isLoading }, children });
@@ -1358,11 +1383,11 @@ var IconInner = ({ icon, iconColor = "green", size = "1.5rem", ...otherProps })
   }
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconComponent, { role: "img", size, ...otherProps, css: [IconImg, customColor[iconColor]] });
 };
-var Icon = import_react12.default.memo(IconInner);
+var Icon = import_react13.default.memo(IconInner);
 
 // src/components/AddListButton/AddListButton.styles.ts
-var import_react13 = require("@emotion/react");
-var AddListButtonBtn = import_react13.css`
+var import_react14 = require("@emotion/react");
+var AddListButtonBtn = import_react14.css`
   align-items: center;
   background: transparent;
   border: none;
@@ -1383,21 +1408,21 @@ var AddListButtonBtn = import_react13.css`
     box-shadow: var(--shadow-base);
   }
 `;
-var AddListButtonTheme = (theme) => import_react13.css`
+var AddListButtonTheme = (theme) => import_react14.css`
   color: ${theme};
 `;
-var AddListButtonBtnSmall = import_react13.css`
+var AddListButtonBtnSmall = import_react14.css`
   font-size: var(--fs-xs);
   font-weight: var(--fw-regular);
   margin-block: var(--spacing-md) 0;
 `;
-var AddListButtonIconMathPlus = (disabled, theme) => import_react13.css`
+var AddListButtonIconMathPlus = (disabled, theme) => import_react14.css`
   box-sizing: border-box;
   background: ${disabled ? "var(--gray-300)" : theme};
   color: var(--white);
   padding: calc(var(--spacing-xs) - 0.15rem);
 `;
-var AddListButtonIcon = import_react13.css`
+var AddListButtonIcon = import_react14.css`
   border-radius: var(--rounded-full);
   transition: box-shadow var(--duration-fast) var(--timing-ease-out);
 `;
@@ -1451,32 +1476,32 @@ var AddListButton = ({
 var import_cg4 = require("react-icons/cg");
 
 // src/components/Typography/styles/Heading.styles.ts
-var import_react14 = require("@emotion/react");
-var h1 = import_react14.css`
+var import_react15 = require("@emotion/react");
+var h1 = import_react15.css`
   font-size: clamp(1.35rem, var(--fluid-font-base), 2.25rem);
 `;
-var h2 = import_react14.css`
+var h2 = import_react15.css`
   font-size: clamp(1.35rem, var(--fluid-font-base), 2.25rem);
 `;
-var h3 = import_react14.css`
+var h3 = import_react15.css`
   font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
 `;
-var h4 = import_react14.css`
+var h4 = import_react15.css`
   font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
 `;
-var h5 = import_react14.css`
+var h5 = import_react15.css`
   font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
 `;
-var h6 = import_react14.css`
+var h6 = import_react15.css`
   font-size: var(--fs-base);
 `;
-var commonHeadingAttr = (withMarginBottom) => import_react14.css`
+var commonHeadingAttr = (withMarginBottom) => import_react15.css`
   font-weight: var(--fw-bold);
   font-family: var(--ff-base);
   margin-top: 0;
   margin-bottom: ${withMarginBottom ? "var(--spacing-base)" : "0"};
 `;
-var commonLineHeight = import_react14.css`
+var commonLineHeight = import_react15.css`
   line-height: 1.25;
 `;
 
@@ -1509,8 +1534,8 @@ var Heading = ({
 };
 
 // src/components/Badges/Badge.styles.ts
-var import_react15 = require("@emotion/react");
-var BadgeContainer = import_react15.css`
+var import_react16 = require("@emotion/react");
+var BadgeContainer = import_react16.css`
   background: var(--brand-secondary-2);
   border-radius: var(--rounded-base);
   color: var(--brand-secondary-1);
@@ -1530,8 +1555,8 @@ var React4 = __toESM(require("react"));
 var import_cg2 = require("react-icons/cg");
 
 // src/components/Typography/styles/Link.styles.ts
-var import_react16 = require("@emotion/react");
-var link = import_react16.css`
+var import_react17 = require("@emotion/react");
+var link = import_react17.css`
   display: inline-flex;
   text-decoration: underline;
 
@@ -1539,13 +1564,13 @@ var link = import_react16.css`
     text-decoration: none;
   }
 `;
-var linkColorGreen = import_react16.css`
+var linkColorGreen = import_react17.css`
   color: var(--brand-secondary-3);
 `;
-var linkColorRed = import_react16.css`
+var linkColorRed = import_react17.css`
   color: var(--brand-secondary-5);
 `;
-var linkColorCurrent = import_react16.css`
+var linkColorCurrent = import_react17.css`
   color: currentColor;
 `;
 
@@ -1572,8 +1597,8 @@ var Link = React4.forwardRef(
 var LinkWithRef = React4.forwardRef(({ linkManagerComponent: LinkManager, href, as, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LinkManager, { ...props, as, href, ref, passHref: true, legacyBehavior: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Link, { ...props }) }));
 
 // src/components/Typography/styles/Paragraph.styles.ts
-var import_react17 = require("@emotion/react");
-var paragraph = import_react17.css`
+var import_react18 = require("@emotion/react");
+var paragraph = import_react18.css`
   line-height: 1.5;
   margin-bottom: var(--spacing-base);
 
@@ -1584,10 +1609,10 @@ var paragraph = import_react17.css`
 
 // src/components/Typography/Paragraph.tsx
 var import_jsx_runtime10 = require("@emotion/react/jsx-runtime");
-var import_react18 = require("@emotion/react");
+var import_react19 = require("@emotion/react");
 var Paragraph = ({ className, htmlContent, children, ...pAttributes }) => {
   if (htmlContent && Array.isArray(htmlContent)) {
-    const paragraphContent = htmlContent.map((html, index) => /* @__PURE__ */ (0, import_react18.createElement)(
+    const paragraphContent = htmlContent.map((html, index) => /* @__PURE__ */ (0, import_react19.createElement)(
       "p",
       {
         ...pAttributes,
@@ -1619,17 +1644,17 @@ var Paragraph = ({ className, htmlContent, children, ...pAttributes }) => {
 };
 
 // src/components/Typography/styles/IntegrationHeaderSection.styles.ts
-var import_react19 = require("@emotion/react");
-var IntegrationHeaderSectionContainer = import_react19.css`
+var import_react20 = require("@emotion/react");
+var IntegrationHeaderSectionContainer = import_react20.css`
   margin-bottom: var(--spacing-lg);
 `;
-var IntegrationHeaderSectionTitleContainer = import_react19.css`
+var IntegrationHeaderSectionTitleContainer = import_react20.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-md);
   margin-bottom: var(--spacing-md);
 `;
-var IntegrationHeaderSectionTitleGroup = import_react19.css`
+var IntegrationHeaderSectionTitleGroup = import_react20.css`
   align-items: center;
   display: flex;
   flex-wrap: wrap;
@@ -1640,26 +1665,26 @@ var IntegrationHeaderSectionTitleGroup = import_react19.css`
     gap: var(--spacing-md);
   }
 `;
-var IntegrationHeaderSectionTitle = import_react19.css`
+var IntegrationHeaderSectionTitle = import_react20.css`
   font-size: clamp(1.75rem, var(--fluid-font-base), 3.25rem);
   font-weight: var(--fw-bold);
   margin: 0;
 `;
-var IntegrationHeaderSectionText = import_react19.css``;
-var IntegrationHeaderSectionIconContainer = import_react19.css`
+var IntegrationHeaderSectionText = import_react20.css``;
+var IntegrationHeaderSectionIconContainer = import_react20.css`
   position: relative;
   max-width: 100px;
 `;
-var IntegrationHeaderSectionIcon = import_react19.css`
+var IntegrationHeaderSectionIcon = import_react20.css`
   position: absolute;
   inset: 0;
   margin: auto;
   width: clamp(32px, calc(4vw + 1rem), 44px);
 `;
-var IntegrationHeaderSectionHexIcon = import_react19.css`
+var IntegrationHeaderSectionHexIcon = import_react20.css`
   width: clamp(52px, calc(6vw + 1rem), 100px);
 `;
-var IntegrationHeaderSectionDocsLink = import_react19.css`
+var IntegrationHeaderSectionDocsLink = import_react20.css`
   ${mq("sm")} {
     margin-left: auto;
   }
@@ -1748,8 +1773,8 @@ var IntegrationHeaderSection = ({
 var import_cg3 = require("react-icons/cg");
 
 // src/components/Typography/styles/PageHeaderSection.styles.ts
-var import_react20 = require("@emotion/react");
-var PageHeaderSectionContainer = import_react20.css`
+var import_react21 = require("@emotion/react");
+var PageHeaderSectionContainer = import_react21.css`
   display: flex;
   justify-content: space-between;
   margin-bottom: var(--spacing-lg);
@@ -1761,7 +1786,7 @@ var PageHeaderSectionContainer = import_react20.css`
     gap: var(--spacing-lg);
   }
 `;
-var PageHeaderSectionDetails = import_react20.css`
+var PageHeaderSectionDetails = import_react21.css`
   flex-grow: 1;
   max-width: var(--prose);
   order: 1;
@@ -1770,15 +1795,15 @@ var PageHeaderSectionDetails = import_react20.css`
     order: 0;
   }
 `;
-var PageHeaderSectionLinkContainer = import_react20.css`
+var PageHeaderSectionLinkContainer = import_react21.css`
   align-items: center;
   display: flex;
   flex-grow: 1;
 `;
-var PageHeaderSectionLinkIcon = import_react20.css`
+var PageHeaderSectionLinkIcon = import_react21.css`
   margin-left: -0.5rem;
 `;
-var PageHeaderSectionLink = import_react20.css`
+var PageHeaderSectionLink = import_react21.css`
   color: var(--brand-secondary-3);
   text-decoration: none;
   font-size: var(--fs-sm);
@@ -1786,7 +1811,7 @@ var PageHeaderSectionLink = import_react20.css`
     text-decoration: underline;
   }
 `;
-var PageHeaderSectionChildContainer = import_react20.css`
+var PageHeaderSectionChildContainer = import_react21.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-lg);
@@ -1803,7 +1828,7 @@ var PageHeaderSectionChildContainer = import_react20.css`
     order: 1;
   }
 `;
-var PageHeaderSectionTitle = import_react20.css`
+var PageHeaderSectionTitle = import_react21.css`
   margin-block: 0 var(--spacing-base);
 `;
 
@@ -1841,8 +1866,8 @@ var PageHeaderSection = ({
 };
 
 // src/components/Alerts/InlineAlert.styles.ts
-var import_react21 = require("@emotion/react");
-var InlineAlertContainer = import_react21.css`
+var import_react22 = require("@emotion/react");
+var InlineAlertContainer = import_react22.css`
   background: var(--brand-primary-1);
   border-radius: var(--rounded-2xl);
   color: var(--white);
@@ -1903,13 +1928,13 @@ var SetArrowPosition = (position) => {
   };
   return options[position];
 };
-var InlineAlertTriangle = (position) => import_react21.css`
+var InlineAlertTriangle = (position) => import_react22.css`
   &:before {
     border: 12px solid transparent;
     ${SetArrowPosition(position)}
   }
 `;
-var InlineAlertCloseBtn = import_react21.css`
+var InlineAlertCloseBtn = import_react22.css`
   background: none;
   border: none;
   padding: 0;
@@ -1917,10 +1942,10 @@ var InlineAlertCloseBtn = import_react21.css`
   top: var(--spacing-sm);
   right: var(--spacing-sm);
 `;
-var InlineAlertTitle = import_react21.css`
+var InlineAlertTitle = import_react22.css`
   margin: 0;
 `;
-var InlineAlertParagraph = import_react21.css`
+var InlineAlertParagraph = import_react22.css`
   margin: 0;
 `;
 
@@ -1942,15 +1967,15 @@ var InlineAlert = ({
 };
 
 // src/components/Brand/UniformLogo.styles.ts
-var import_react22 = require("@emotion/react");
-var SVG = import_react22.css`
+var import_react23 = require("@emotion/react");
+var SVG = import_react23.css`
   display: block;
 `;
-var SVGLight = import_react22.css`
+var SVGLight = import_react23.css`
   background: transparent;
   color: var(--brand-secondary-1);
 `;
-var SVGDark = import_react22.css`
+var SVGDark = import_react23.css`
   background: var(--brand-secondary-1);
   color: var(--white);
 `;
@@ -2042,6 +2067,7 @@ var Button = React5.forwardRef(
       secondary: buttonSecondary,
       secondaryInvert: buttonSecondaryInvert,
       ghost: buttonGhost,
+      ghostDestructive: buttonGhostDestructive,
       unimportant: buttonUnimportant,
       tertiary: buttonTertiary
     };
@@ -2064,8 +2090,8 @@ var React6 = __toESM(require("react"));
 var import_Menu = require("reakit/Menu");
 
 // src/components/Menu/Menu.styles.ts
-var import_react23 = require("@emotion/react");
-var menu = import_react23.css`
+var import_react24 = require("@emotion/react");
+var menu = import_react24.css`
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-base);
   background: var(--gray-50);
@@ -2115,8 +2141,8 @@ var React7 = __toESM(require("react"));
 var import_reakit = require("reakit");
 
 // src/components/Menu/MenuItem.styles.ts
-var import_react24 = require("@emotion/react");
-var menuItem = (textTheme) => import_react24.css`
+var import_react25 = require("@emotion/react");
+var menuItem = (textTheme) => import_react25.css`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -2142,7 +2168,7 @@ var menuItem = (textTheme) => import_react24.css`
     outline: none;
   }
 `;
-var menuItemWithIcon = import_react24.css`
+var menuItemWithIcon = import_react25.css`
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -2154,7 +2180,7 @@ var menuItemWithIcon = import_react24.css`
     height: var(--spacing-base);
   }
 `;
-var menuItemSeparator = import_react24.css`
+var menuItemSeparator = import_react25.css`
   border-top: 1px solid var(--gray-300);
   width: 100%;
   margin-block: var(--spacing-sm);
@@ -2206,8 +2232,8 @@ var import_jsx_runtime19 = require("@emotion/react/jsx-runtime");
 var MenuItemSeparator = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("hr", { css: menuItemSeparator });
 
 // src/components/ButtonWithMenu/ButtonWithMenu.styles.ts
-var import_react25 = require("@emotion/react");
-var ButtonWithMenuContainer = import_react25.css`
+var import_react26 = require("@emotion/react");
+var ButtonWithMenuContainer = import_react26.css`
   align-items: center;
   border: 1px solid transparent;
   border-radius: var(--rounded-sm);
@@ -2228,7 +2254,7 @@ var ButtonWithMenuContainer = import_react25.css`
     border-color: var(--gray-700);
   }
 `;
-var ButtonWithMenuBtn = import_react25.css`
+var ButtonWithMenuBtn = import_react26.css`
   border: 1px solid transparent;
   background: transparent;
   border-radius: var(--rounded-base);
@@ -2251,33 +2277,33 @@ var ButtonWithMenuBtn = import_react25.css`
     pointer-events: none;
   }
 `;
-var ButtonWithMenuIcon = import_react25.css`
+var ButtonWithMenuIcon = import_react26.css`
   padding: var(--spacing-sm);
   border-left: 1px solid currentColor;
 `;
-var buttonPrimary2 = import_react25.css`
+var buttonPrimary2 = import_react26.css`
   background: var(--brand-secondary-1);
   color: var(--white);
 `;
-var buttonPrimaryDisabled = import_react25.css`
+var buttonPrimaryDisabled = import_react26.css`
   background: var(--gray-300);
   color: var(--white);
 `;
-var buttonSecondary2 = import_react25.css`
+var buttonSecondary2 = import_react26.css`
   background: var(--brand-secondary-5);
   color: var(--white);
 `;
-var buttonSecondaryDisabled = import_react25.css`
+var buttonSecondaryDisabled = import_react26.css`
   ${buttonPrimaryDisabled}
 `;
-var buttonUnimportant2 = import_react25.css`
+var buttonUnimportant2 = import_react26.css`
   background: var(--brand-secondary-2);
   color: var(--brand-secondary-1);
 `;
-var buttonUnimportantDisabled = import_react25.css`
+var buttonUnimportantDisabled = import_react26.css`
   ${buttonPrimaryDisabled}
 `;
-var buttonGhost2 = import_react25.css`
+var buttonGhost2 = import_react26.css`
   background: transparent;
   color: var(--brand-secondary-3);
 
@@ -2285,7 +2311,7 @@ var buttonGhost2 = import_react25.css`
     border-color: var(--brand-secondary-3);
   }
 `;
-var buttonGhostDisabled = import_react25.css`
+var buttonGhostDisabled = import_react26.css`
   border-color: var(--gray-400);
   color: var(--gray-400);
 `;
@@ -2346,11 +2372,11 @@ var ButtonWithMenu = ({
 };
 
 // src/components/Callout/Callout.tsx
-var import_react27 = require("@emotion/react");
+var import_react28 = require("@emotion/react");
 
 // src/components/Callout/Callout.styles.ts
-var import_react26 = require("@emotion/react");
-var calloutContainer = import_react26.css`
+var import_react27 = require("@emotion/react");
+var calloutContainer = import_react27.css`
   --caution-desc: rgb(161, 98, 7);
   --caution-icon: rgb(250, 204, 21);
   --caution-title: rgb(133, 77, 14);
@@ -2380,7 +2406,7 @@ var calloutContainer = import_react26.css`
   border-radius: var(--rounded-base);
   padding: var(--spacing-base);
 `;
-var calloutContainerCompact = import_react26.css`
+var calloutContainerCompact = import_react27.css`
   font-size: var(--fs-xs);
   padding: var(--spacing-sm);
   border-radius: 0 var(--rounded-base) var(--rounded-base) 0;
@@ -2392,25 +2418,25 @@ var calloutContainerCompact = import_react26.css`
   --note-desc: var(--brand-secondary-1);
   --success-desc: var(--brand-secondary-1);
 `;
-var calloutInner = import_react26.css`
+var calloutInner = import_react27.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var calloutBody = import_react26.css`
+var calloutBody = import_react27.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-base);
 `;
-var calloutBodyCompact = import_react26.css`
+var calloutBodyCompact = import_react27.css`
   gap: var(--spacing-xs);
 `;
-var calloutIconWrap = import_react26.css`
+var calloutIconWrap = import_react27.css`
   flex-shrink: 0;
 `;
-var calloutTitle = import_react26.css`
+var calloutTitle = import_react27.css`
   font-weight: var(--fw-bold);
 `;
-var calloutIcon = import_react26.css`
+var calloutIcon = import_react27.css`
   width: 1.25rem;
   height: 1.25rem;
 `;
@@ -2544,91 +2570,91 @@ var import_jsx_runtime22 = require("@emotion/react/jsx-runtime");
 var calloutTypeDataMap = {
   caution: {
     icon: CautionIcon,
-    descriptionColor: import_react27.css`
+    descriptionColor: import_react28.css`
       color: var(--caution-desc);
     `,
-    iconColor: import_react27.css`
+    iconColor: import_react28.css`
       color: var(--caution-icon);
     `,
-    containerStyles: import_react27.css`
+    containerStyles: import_react28.css`
       color: var(--caution-title);
       background-color: var(--caution-container);
     `
   },
   danger: {
     icon: DangerIcon,
-    descriptionColor: import_react27.css`
+    descriptionColor: import_react28.css`
       color: var(--danger-desc);
     `,
-    iconColor: import_react27.css`
+    iconColor: import_react28.css`
       color: var(--danger-icon);
     `,
-    containerStyles: import_react27.css`
+    containerStyles: import_react28.css`
       color: var(--danger-title);
       background-color: var(--danger-container);
     `
   },
   error: {
     icon: CautionIcon,
-    descriptionColor: import_react27.css`
+    descriptionColor: import_react28.css`
       color: var(--danger-desc);
     `,
-    iconColor: import_react27.css`
+    iconColor: import_react28.css`
       color: var(--danger-icon);
     `,
-    containerStyles: import_react27.css`
+    containerStyles: import_react28.css`
       color: var(--danger-title);
       background-color: var(--danger-container);
     `
   },
   info: {
     icon: InfoIcon,
-    descriptionColor: import_react27.css`
+    descriptionColor: import_react28.css`
       color: var(--info-desc);
     `,
-    iconColor: import_react27.css`
+    iconColor: import_react28.css`
       color: var(--info-icon);
     `,
-    containerStyles: import_react27.css`
+    containerStyles: import_react28.css`
       color: var(--info-title);
       background-color: var(--info-container);
     `
   },
   note: {
     icon: NoteIcon,
-    descriptionColor: import_react27.css`
+    descriptionColor: import_react28.css`
       color: var(--note-desc);
     `,
-    iconColor: import_react27.css`
+    iconColor: import_react28.css`
       color: var(--note-icon);
     `,
-    containerStyles: import_react27.css`
+    containerStyles: import_react28.css`
       color: var(--note-title);
       background-color: var(--note-container);
     `
   },
   success: {
     icon: SuccessIcon,
-    descriptionColor: import_react27.css`
+    descriptionColor: import_react28.css`
       color: var(--success-desc);
     `,
-    iconColor: import_react27.css`
+    iconColor: import_react28.css`
       color: var(--success-icon);
     `,
-    containerStyles: import_react27.css`
+    containerStyles: import_react28.css`
       color: var(--success-title);
       background-color: var(--success-container);
     `
   },
   tip: {
     icon: TipIcon,
-    descriptionColor: import_react27.css`
+    descriptionColor: import_react28.css`
       color: var(--success-desc);
     `,
-    iconColor: import_react27.css`
+    iconColor: import_react28.css`
       color: var(--success-icon);
     `,
-    containerStyles: import_react27.css`
+    containerStyles: import_react28.css`
       color: var(--success-title);
       background-color: var(--success-container);
     `
@@ -2666,19 +2692,19 @@ var Callout = ({ type = "info", compact = false, title, children, className }) =
 var import_cg6 = require("react-icons/cg");
 
 // src/components/Card/Card.styles.ts
-var import_react28 = require("@emotion/react");
-var CardContainer = import_react28.css`
+var import_react29 = require("@emotion/react");
+var CardContainer = import_react29.css`
   background: var(--white);
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
   padding: var(--spacing-md);
   position: relative;
 `;
-var CardTitle = import_react28.css`
+var CardTitle = import_react29.css`
   margin: 0 0 var(--spacing-base);
   padding-right: var(--spacing-lg);
 `;
-var CardMenu = import_react28.css`
+var CardMenu = import_react29.css`
   background: transparent;
   border: none;
   padding: 0;
@@ -2716,11 +2742,11 @@ var Card = ({ title, menuItems, children, disabled, menuButtonTestId, ...props }
 };
 
 // src/components/Card/CardContainer.styles.ts
-var import_react29 = require("@emotion/react");
-var CardContainerWrapper = (bgColor) => import_react29.css`
+var import_react30 = require("@emotion/react");
+var CardContainerWrapper = (bgColor) => import_react30.css`
   background: ${bgColor === "gray" ? `var(--gray-50)` : `var(--white)`};
 `;
-var CardContainerInner = ({ padding, withLastColumn }) => import_react29.css`
+var CardContainerInner = ({ padding, withLastColumn }) => import_react30.css`
   display: grid;
   gap: var(--spacing-lg);
   max-width: var(--site-width);
@@ -2746,8 +2772,8 @@ var CardContainer2 = ({
 };
 
 // src/components/Counter/Counter.styles.ts
-var import_react30 = require("@emotion/react");
-var counterContainer = import_react30.css`
+var import_react31 = require("@emotion/react");
+var counterContainer = import_react31.css`
   align-items: center;
   border-radius: var(--rounded-full);
   border: 1px solid var(--gray-300);
@@ -2759,16 +2785,16 @@ var counterContainer = import_react30.css`
   width: var(--spacing-base);
   height: var(--spacing-base);
 `;
-var counterZeroValue = import_react30.css`
+var counterZeroValue = import_react31.css`
   background: var(--brand-secondary-1);
   border-radius: var(--rounded-full);
   width: 2px;
   height: 2px;
 `;
-var counterTripleValue = import_react30.css`
+var counterTripleValue = import_react31.css`
   position: relative;
 `;
-var counterIcon = import_react30.css`
+var counterIcon = import_react31.css`
   border-radius: var(--rounded-full);
   background: var(--white);
   color: var(--brand-secondary-3);
@@ -2790,7 +2816,7 @@ var Counter = ({ count }) => {
 };
 
 // src/components/DashedBox/DashedBox.styles.ts
-var import_react31 = require("@emotion/react");
+var import_react32 = require("@emotion/react");
 var minHeight = (prop) => {
   const values = {
     auto: "auto",
@@ -2809,7 +2835,7 @@ var alignItemsConvert = (props) => {
   };
   return alignment[props];
 };
-var DashedBoxContainer = ({ textAlign, boxHeight, bgColor }) => import_react31.css`
+var DashedBoxContainer = ({ textAlign, boxHeight, bgColor }) => import_react32.css`
   align-items: ${alignItemsConvert(textAlign)};
   border: 2px dashed var(--gray-300);
   border-radius: var(--rounded-base);
@@ -2839,19 +2865,19 @@ var DashedBox = ({
 var React8 = __toESM(require("react"));
 
 // src/components/Details/Details.styles.ts
-var import_react32 = require("@emotion/react");
-var details = import_react32.css`
+var import_react33 = require("@emotion/react");
+var details = import_react33.css`
   &[open] {
     & > summary svg {
       rotate: 0deg;
     }
   }
 `;
-var detailsContent = import_react32.css`
+var detailsContent = import_react33.css`
   animation: ${fadeInRtl} var(--duration-fast) var(--timing-ease-out) forwards;
   will-change: height;
 `;
-var summary = import_react32.css`
+var summary = import_react33.css`
   align-items: center;
   display: grid;
   grid-template-columns: 1.25rem 1fr;
@@ -2864,7 +2890,7 @@ var summary = import_react32.css`
     display: none;
   }
 `;
-var summaryIcon = import_react32.css`
+var summaryIcon = import_react33.css`
   transition: rotate var(--duration-fast) var(--timing-ease-out);
   rotate: -90deg;
 `;
@@ -2900,44 +2926,47 @@ var Details = ({ summary: summary2, children, isOpenByDefault = false, ...props
 };
 
 // src/components/Drawer/Drawer.tsx
-var import_react35 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var import_cg7 = require("react-icons/cg");
 
 // src/components/Drawer/Drawer.styles.ts
-var import_react33 = require("@emotion/react");
-var drawerStyles = (bgColor = "var(--white)") => import_react33.css`
+var import_react34 = require("@emotion/react");
+var drawerStyles = (bgColor = "var(--white)") => import_react34.css`
   background-color: ${bgColor};
   display: flex;
   gap: var(--spacing-sm);
   flex-direction: column;
   position: absolute;
   inset: 0;
-  padding: var(--spacing-base);
+  padding-top: var(--spacing-sm);
   height: 100%;
 `;
-var drawerCloseButtonStyles = import_react33.css`
+var drawerCloseButtonStyles = import_react34.css`
   align-self: flex-end;
   background: transparent;
   border: none;
   display: block;
   padding: var(--spacing-xs);
+  margin-right: var(--spacing-sm);
 `;
-var drawerHeaderStyles = import_react33.css`
+var drawerHeaderStyles = import_react34.css`
   font-size: var(--fs-lg);
   font-weight: var(--fw-bold);
+  padding-inline: var(--spacing-base);
 `;
-var drawerRendererStyles = (position) => import_react33.css`
+var drawerRendererStyles = (position) => import_react34.css`
   position: ${position};
   inset: 0;
   overflow: hidden;
-  z-index: var(--z-10);
+  z-index: 40;
 `;
-var drawerInnerStyles = import_react33.css`
+var drawerInnerStyles = import_react34.css`
   height: 100%;
+  padding: var(--spacing-base);
   overflow: auto;
   ${scrollbarStyles}
 `;
-var slideDrawerIn = import_react33.keyframes`
+var slideDrawerIn = import_react34.keyframes`
 0% {
   transform: translate(0);
   opacity: 0;
@@ -2952,7 +2981,7 @@ var slideDrawerIn = import_react33.keyframes`
   transform: translate(0);
 }
 `;
-var drawerWrapperStyles = import_react33.css`
+var drawerWrapperStyles = import_react34.css`
   position: absolute;
   inset-block: 0;
   right: 0;
@@ -2963,18 +2992,17 @@ var drawerWrapperStyles = import_react33.css`
   transition: width var(--duration-fast) ease-out;
   box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
 `;
-var drawerWrapperOverlayStyles = import_react33.css`
+var drawerWrapperOverlayStyles = import_react34.css`
   position: absolute;
   inset: 0;
-  background: rgba(100, 100, 100, 0.01);
-  backdrop-filter: blur(2px);
+  background: rgba(31, 43, 52, 0.4);
   animation: ${fadeIn} var(--duration-fast) ease-out;
 `;
 
 // src/components/Drawer/DrawerProvider.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_jsx_runtime28 = require("@emotion/react/jsx-runtime");
-var DrawerContext = (0, import_react34.createContext)({
+var DrawerContext = (0, import_react35.createContext)({
   drawersRegistry: [],
   registerDrawer: () => {
   },
@@ -2982,7 +3010,7 @@ var DrawerContext = (0, import_react34.createContext)({
   }
 });
 var DrawerProvider = ({ children }) => {
-  const [drawersRegistry, setDrawersRegistry] = (0, import_react34.useState)([]);
+  const [drawersRegistry, setDrawersRegistry] = (0, import_react35.useState)([]);
   useShortcut({
     handler: () => {
       var _a, _b;
@@ -2990,7 +3018,7 @@ var DrawerProvider = ({ children }) => {
     },
     shortcut: "escape"
   });
-  const registerDrawer = (0, import_react34.useCallback)(
+  const registerDrawer = (0, import_react35.useCallback)(
     ({ drawer, onFirstRender }) => {
       setDrawersRegistry((currentValue) => {
         var _a;
@@ -3012,7 +3040,7 @@ var DrawerProvider = ({ children }) => {
     },
     [setDrawersRegistry]
   );
-  const unregisterDrawer = (0, import_react34.useCallback)(
+  const unregisterDrawer = (0, import_react35.useCallback)(
     (drawer) => {
       setDrawersRegistry((currentValue) => {
         return currentValue.filter((d) => {
@@ -3025,7 +3053,7 @@ var DrawerProvider = ({ children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DrawerContext.Provider, { value: { drawersRegistry, registerDrawer, unregisterDrawer }, children });
 };
 var useDrawer = () => {
-  return (0, import_react34.useContext)(DrawerContext);
+  return (0, import_react35.useContext)(DrawerContext);
 };
 function isEqualDrawer(a, b) {
   return (a == null ? void 0 : a.id) === (b == null ? void 0 : b.id) && (a == null ? void 0 : a.stackId) === (b == null ? void 0 : b.stackId);
@@ -3036,11 +3064,11 @@ function isEqualDrawerInstance(a, b) {
 
 // src/components/Drawer/Drawer.tsx
 var import_jsx_runtime29 = require("@emotion/react/jsx-runtime");
-var Drawer = import_react35.default.forwardRef(
+var Drawer = import_react36.default.forwardRef(
   ({ id, stackId, instanceKey, onRequestClose, header, bgColor, children }, ref) => {
     const { registerDrawer, unregisterDrawer } = useDrawer();
-    const closeButtonRef = (0, import_react35.useRef)(null);
-    const component = (0, import_react35.useMemo)(() => {
+    const closeButtonRef = (0, import_react36.useRef)(null);
+    const component = (0, import_react36.useMemo)(() => {
       const headerId = `dialog-header-${stackId}-${id}`;
       return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
         "div",
@@ -3051,6 +3079,7 @@ var Drawer = import_react35.default.forwardRef(
           tabIndex: -1,
           "aria-labelledby": headerId,
           css: drawerStyles(bgColor),
+          "data-test-id": "side-dialog",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               Button,
@@ -3070,7 +3099,7 @@ var Drawer = import_react35.default.forwardRef(
         }
       );
     }, [children, header, id, stackId, bgColor, onRequestClose, ref]);
-    (0, import_react35.useEffect)(() => {
+    (0, import_react36.useEffect)(() => {
       registerDrawer({
         drawer: {
           id,
@@ -3087,7 +3116,7 @@ var Drawer = import_react35.default.forwardRef(
         }
       });
     }, [component, instanceKey, registerDrawer]);
-    (0, import_react35.useEffect)(() => {
+    (0, import_react36.useEffect)(() => {
       return () => unregisterDrawer({ id, stackId, instanceKey });
     }, [id, stackId, instanceKey, unregisterDrawer]);
     return null;
@@ -3147,8 +3176,8 @@ var DrawerWrapper = ({
 };
 
 // src/components/Input/styles/CaptionText.styles.ts
-var import_react36 = require("@emotion/react");
-var CaptionText = (dynamicSize) => import_react36.css`
+var import_react37 = require("@emotion/react");
+var CaptionText = (dynamicSize) => import_react37.css`
   color: var(--gray-500);
   display: block;
   font-size: ${dynamicSize ? "clamp(var(--fs-xs), 87.5%,var(--fs-sm))" : "var(--fs-sm)"};
@@ -3163,23 +3192,23 @@ var Caption = ({ children, testId, dynamicSize = false, ...props }) => {
 };
 
 // src/components/Input/CheckboxWithInfo.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 
 // src/components/Input/styles/CheckboxWithInfo.styles.ts
-var import_react37 = require("@emotion/react");
-var CheckboxWithInfoContainer = import_react37.css`
+var import_react38 = require("@emotion/react");
+var CheckboxWithInfoContainer = import_react38.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var CheckboxWithInfoLabel = import_react37.css`
+var CheckboxWithInfoLabel = import_react38.css`
   align-items: center;
   color: var(--gray-500);
   display: flex;
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
 `;
-var CheckboxWithInfoInput = import_react37.css`
+var CheckboxWithInfoInput = import_react38.css`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white) no-repeat bottom center;
@@ -3212,7 +3241,7 @@ var CheckboxWithInfoInput = import_react37.css`
     border-color: var(--gray-200);
   }
 `;
-var InfoDialogContainer = import_react37.css`
+var InfoDialogContainer = import_react38.css`
   position: relative;
 
   &:hover {
@@ -3221,7 +3250,7 @@ var InfoDialogContainer = import_react37.css`
     }
   }
 `;
-var InfoDialogMessage = import_react37.css`
+var InfoDialogMessage = import_react38.css`
   background: var(--white);
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-md);
@@ -3245,7 +3274,7 @@ var InfoDialog = ({ message }) => {
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { role: "paragraph", css: InfoDialogMessage, className: "info-message", children: message })
   ] });
 };
-var CheckboxWithInfo = (0, import_react38.forwardRef)(
+var CheckboxWithInfo = (0, import_react39.forwardRef)(
   ({ label, name, info, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { css: CheckboxWithInfoContainer, children: [
       /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { css: CheckboxWithInfoLabel, children: [
@@ -3261,8 +3290,8 @@ var CheckboxWithInfo = (0, import_react38.forwardRef)(
 var import_md = require("react-icons/md");
 
 // src/components/Input/styles/ErrorMessage.styles.ts
-var import_react39 = require("@emotion/react");
-var ErrorText = import_react39.css`
+var import_react40 = require("@emotion/react");
+var ErrorText = import_react40.css`
   align-items: center;
   color: var(--brand-secondary-5);
   display: flex;
@@ -3282,9 +3311,9 @@ var ErrorMessage = ({ message, testId, ...otherProps }) => {
 var React11 = __toESM(require("react"));
 
 // src/components/Input/styles/Fieldset.styles.ts
-var import_react40 = require("@emotion/react");
+var import_react41 = require("@emotion/react");
 function fieldsetContainer(invert) {
-  const base = import_react40.css`
+  const base = import_react41.css`
     border-radius: var(--rounded-base);
     border: 1px solid var(--gray-300);
 
@@ -3296,18 +3325,18 @@ function fieldsetContainer(invert) {
     }
   `;
   return invert ? [
-    import_react40.css`
+    import_react41.css`
           background: white;
         `,
     base
   ] : [
-    import_react40.css`
+    import_react41.css`
           background: var(--gray-50);
         `,
     base
   ];
 }
-var fieldsetLegend = import_react40.css`
+var fieldsetLegend = import_react41.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: flex;
@@ -3317,7 +3346,7 @@ var fieldsetLegend = import_react40.css`
   margin-bottom: var(--spacing-base);
   float: left; // allows the legend to be inside the fieldset and not sat on the border line
 `;
-var fieldsetBody = import_react40.css`
+var fieldsetBody = import_react41.css`
   clear: left;
 `;
 
@@ -3354,14 +3383,14 @@ var Label = ({ children, className, testId, ...props }) => {
 var import_md2 = require("react-icons/md");
 
 // src/components/Input/styles/WarningMessage.styles.tsx
-var import_react41 = require("@emotion/react");
-var WarningText = import_react41.css`
+var import_react42 = require("@emotion/react");
+var WarningText = import_react42.css`
   align-items: center;
   color: var(--alert-text);
   display: flex;
   gap: var(--spacing-sm);
 `;
-var WarningIcon = import_react41.css`
+var WarningIcon = import_react42.css`
   color: var(--alert);
 `;
 
@@ -3567,18 +3596,18 @@ function InputComboBox(props) {
 }
 
 // src/components/Input/InputInlineSelect.tsx
-var import_react43 = require("@emotion/react");
+var import_react44 = require("@emotion/react");
 var React13 = __toESM(require("react"));
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_cg8 = require("react-icons/cg");
 
 // src/components/Input/styles/InputInlineSelect.styles.ts
-var import_react42 = require("@emotion/react");
-var inlineSelectContainer = import_react42.css`
+var import_react43 = require("@emotion/react");
+var inlineSelectContainer = import_react43.css`
   margin-inline: auto;
   max-width: fit-content;
 `;
-var inlineSelectBtn = import_react42.css`
+var inlineSelectBtn = import_react43.css`
   align-items: center;
   background: var(--brand-secondary-3);
   border: 2px solid var(--brand-secondary-3);
@@ -3602,7 +3631,7 @@ var inlineSelectBtn = import_react42.css`
     outline: 2px solid var(--brand-secondary-1);
   }
 `;
-var inlineSelectMenu = import_react42.css`
+var inlineSelectMenu = import_react43.css`
   background: var(--white);
   border: 1px solid var(--brand-secondary-3);
   border-top: none;
@@ -3613,7 +3642,7 @@ var inlineSelectMenu = import_react42.css`
   inset: auto 0;
   transform: translateY(-0.2rem);
 `;
-var inlineSelectBtnOptions = import_react42.css`
+var inlineSelectBtnOptions = import_react43.css`
   cursor: pointer;
   display: block;
   font-size: var(--fs-sm);
@@ -3629,7 +3658,7 @@ var inlineSelectBtnOptions = import_react42.css`
     background: var(--gray-50);
   }
 `;
-var inlineSelectMenuClosed = import_react42.css`
+var inlineSelectMenuClosed = import_react43.css`
   position: absolute;
   overflow: hidden;
   height: 1px;
@@ -3649,8 +3678,8 @@ var InputInlineSelect = ({
   ...props
 }) => {
   var _a;
-  const [menuVisible, setMenuVisible] = (0, import_react44.useState)(false);
-  const divRef = (0, import_react44.useRef)(null);
+  const [menuVisible, setMenuVisible] = (0, import_react45.useState)(false);
+  const divRef = (0, import_react45.useRef)(null);
   React13.useEffect(() => {
     const outsideClick = (event) => {
       if (divRef.current && !divRef.current.contains(event.target)) {
@@ -3667,7 +3696,7 @@ var InputInlineSelect = ({
     "div",
     {
       ref: divRef,
-      css: !classNameContainer ? inlineSelectContainer : import_react43.css`
+      css: !classNameContainer ? inlineSelectContainer : import_react44.css`
               max-width: fit-content;
               ${typeof classNameContainer === "object" ? classNameContainer : void 0}
             `,
@@ -3746,7 +3775,7 @@ var InputKeywordSearch = ({
       placeholder,
       showLabel: false,
       value,
-      icon: value ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { onClick: onClear, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { icon: "close", css: inputSearchCloseIcon }) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+      icon: value ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { onClick: onClear, css: { pointerEvents: "all" }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { icon: "close", css: inputSearchCloseIcon }) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
         "svg",
         {
           width: "26",
@@ -3901,34 +3930,34 @@ var Textarea = ({
 };
 
 // src/components/LimitsBar/LimitsBar.styles.ts
-var import_react45 = require("@emotion/react");
-var LimitsBarContainer = import_react45.css`
+var import_react46 = require("@emotion/react");
+var LimitsBarContainer = import_react46.css`
   margin-block: var(--spacing-sm);
 `;
-var LimitsBarProgressBar = import_react45.css`
+var LimitsBarProgressBar = import_react46.css`
   background: var(--gray-100);
   margin-top: var(--spacing-sm);
   position: relative;
   overflow: hidden;
   height: 0.25rem;
 `;
-var LimitsBarProgressBarLine = import_react45.css`
+var LimitsBarProgressBarLine = import_react46.css`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
 `;
-var LimitsBarLabelContainer = import_react45.css`
+var LimitsBarLabelContainer = import_react46.css`
   display: flex;
   justify-content: space-between;
   font-weight: var(--fw-bold);
 `;
-var LimitsBarLabel = import_react45.css`
+var LimitsBarLabel = import_react46.css`
   font-size: var(--fs-baase);
 `;
-var LimitsBarBgColor = (statusColor) => import_react45.css`
+var LimitsBarBgColor = (statusColor) => import_react46.css`
   background: ${statusColor};
 `;
-var LimitsBarTextColor = (statusColor) => import_react45.css`
+var LimitsBarTextColor = (statusColor) => import_react46.css`
   color: ${statusColor};
 `;
 
@@ -3977,8 +4006,8 @@ var LimitsBar = ({ current, max, label }) => {
 };
 
 // src/components/LinkList/LinkList.styles.ts
-var import_react46 = require("@emotion/react");
-var LinkListContainer = import_react46.css`
+var import_react47 = require("@emotion/react");
+var LinkListContainer = import_react47.css`
   padding: var(--spacing-md) var(--spacing-lg) var(--spacing-2xl);
   ${mq("sm")} {
     grid-column: last-col / span 1;
@@ -3996,14 +4025,14 @@ var LinkList = ({ title, children, ...props }) => {
 };
 
 // src/components/List/ScrollableList.tsx
-var import_react48 = require("@emotion/react");
+var import_react49 = require("@emotion/react");
 
 // src/components/List/styles/ScrollableList.styles.ts
-var import_react47 = require("@emotion/react");
-var ScrollableListContainer = import_react47.css`
+var import_react48 = require("@emotion/react");
+var ScrollableListContainer = import_react48.css`
   position: relative;
 `;
-var ScrollableListInner = import_react47.css`
+var ScrollableListInner = import_react48.css`
   background: var(--gray-50);
   border-top: 1px solid var(--gray-200);
   border-bottom: 1px solid var(--gray-200);
@@ -4027,7 +4056,7 @@ var ScrollableList = ({ label, children, ...props }) => {
     label ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       "span",
       {
-        css: import_react48.css`
+        css: import_react49.css`
             ${labelText}
           `,
         children: label
@@ -4041,8 +4070,8 @@ var ScrollableList = ({ label, children, ...props }) => {
 var import_cg9 = require("react-icons/cg");
 
 // src/components/List/styles/ScrollableListItem.styles.ts
-var import_react49 = require("@emotion/react");
-var ScrollableListItemContainer = import_react49.css`
+var import_react50 = require("@emotion/react");
+var ScrollableListItemContainer = import_react50.css`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-base);
@@ -4052,10 +4081,10 @@ var ScrollableListItemContainer = import_react49.css`
   min-height: 52px;
   transition: border-color var(--duration-fast) var(--timing-ease-out);
 `;
-var ScrollableListItemActive = import_react49.css`
+var ScrollableListItemActive = import_react50.css`
   border-color: var(--brand-secondary-3);
 `;
-var ScrollableListItemBtn = import_react49.css`
+var ScrollableListItemBtn = import_react50.css`
   align-items: center;
   border: none;
   background: transparent;
@@ -4070,26 +4099,26 @@ var ScrollableListItemBtn = import_react49.css`
     outline: none;
   }
 `;
-var ScrollableListInputLabel = import_react49.css`
+var ScrollableListInputLabel = import_react50.css`
   align-items: center;
   display: flex;
   padding: var(--spacing-xs) var(--spacing-base) var(--spacing-xs);
   flex-grow: 1;
 `;
-var ScrollableListInputText = import_react49.css`
+var ScrollableListInputText = import_react50.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   font-weight: var(--fw-bold);
   flex-grow: 1;
 `;
-var ScrollableListHiddenInput = import_react49.css`
+var ScrollableListHiddenInput = import_react50.css`
   position: absolute;
   height: 0;
   width: 0;
   opacity: 0;
 `;
-var ScrollableListIcon = import_react49.css`
+var ScrollableListIcon = import_react50.css`
   border-radius: var(--rounded-full);
   background: var(--brand-secondary-3);
   color: var(--white);
@@ -4117,7 +4146,7 @@ var ScrollableListInputItem = ({
 };
 
 // src/components/List/ScrollableListItem.tsx
-var import_react50 = require("@emotion/react");
+var import_react51 = require("@emotion/react");
 var import_jsx_runtime49 = require("@emotion/react/jsx-runtime");
 var ScrollableListItem = ({ buttonText, active, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { css: [ScrollableListItemContainer, active ? ScrollableListItemActive : void 0], children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
@@ -4131,10 +4160,10 @@ var ScrollableListItem = ({ buttonText, active, ...props }) => {
         fill: "currentColor",
         xmlns: "http://www.w3.org/2000/svg",
         "aria-hidden": !active,
-        css: import_react50.css`
+        css: import_react51.css`
             color: var(--brand-secondary-3);
             transition: opacity var(--duration-fast) var(--timing-ease-out);
-            ${active ? import_react50.css`
+            ${active ? import_react51.css`
                   animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
                 ` : "opacity: 0;"}
           `,
@@ -4152,8 +4181,8 @@ var ScrollableListItem = ({ buttonText, active, ...props }) => {
 };
 
 // src/components/LoadingIndicator/LoadingIndicator.styles.ts
-var import_react51 = require("@emotion/react");
-var bounceFade = import_react51.keyframes`
+var import_react52 = require("@emotion/react");
+var bounceFade = import_react52.keyframes`
     0%, 100% {
         opacity: 1.0;
         transform: translateY(0);
@@ -4170,11 +4199,11 @@ var bounceFade = import_react51.keyframes`
         transform: translateY(-5px);
     }
 `;
-var loader = import_react51.css`
+var loader = import_react52.css`
   display: inline-flex;
   justify-content: center;
 `;
-var loadingDot = import_react51.css`
+var loadingDot = import_react52.css`
   background-color: var(--gray-700);
   display: block;
   border-radius: var(--rounded-full);
@@ -4208,35 +4237,35 @@ var LoadingIndicator = () => {
 };
 
 // src/components/LoadingOverlay/LoadingOverlay.tsx
-var import_react53 = require("@emotion/react");
+var import_react54 = require("@emotion/react");
 
 // src/components/LoadingOverlay/LoadingOverlay.styles.ts
-var import_react52 = require("@emotion/react");
-var loadingOverlayContainer = import_react52.css`
+var import_react53 = require("@emotion/react");
+var loadingOverlayContainer = import_react53.css`
   align-items: center;
   position: absolute;
   inset: 0;
   overflow: hidden;
   justify-content: center;
 `;
-var loadingOverlayVisible = import_react52.css`
+var loadingOverlayVisible = import_react53.css`
   display: flex;
 `;
-var loadingOverlayHidden = import_react52.css`
+var loadingOverlayHidden = import_react53.css`
   display: none;
 `;
-var loadingOverlayBackground = (bgColor) => import_react52.css`
+var loadingOverlayBackground = (bgColor) => import_react53.css`
   background: ${bgColor};
   opacity: var(--opacity-75);
   position: absolute;
   inset: 0 0;
 `;
-var loadingOverlayBody = import_react52.css`
+var loadingOverlayBody = import_react53.css`
   align-items: center;
   display: flex;
   flex-direction: column;
 `;
-var loadingOverlayMessage = import_react52.css`
+var loadingOverlayMessage = import_react53.css`
   color: var(--gray-600);
   margin: var(--spacing-base) 0 0;
 `;
@@ -4261,7 +4290,7 @@ var LoadingOverlay = ({
         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           "div",
           {
-            css: import_react53.css`
+            css: import_react54.css`
           position: relative;
         `,
             children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { css: loadingOverlayBody, children: [
@@ -4305,12 +4334,12 @@ var LoadingIcon = ({ height, width, ...props }) => {
 };
 
 // src/components/Tiles/CreateTeamIntegrationTile.tsx
-var import_react55 = require("@emotion/react");
+var import_react56 = require("@emotion/react");
 var import_cg10 = require("react-icons/cg");
 
 // src/components/Tiles/styles/IntegrationTile.styles.ts
-var import_react54 = require("@emotion/react");
-var IntegrationTileContainer = import_react54.css`
+var import_react55 = require("@emotion/react");
+var IntegrationTileContainer = import_react55.css`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -4341,22 +4370,22 @@ var IntegrationTileContainer = import_react54.css`
     }
   }
 `;
-var IntegrationTileBtnDashedBorder = import_react54.css`
+var IntegrationTileBtnDashedBorder = import_react55.css`
   border: 1px dashed var(--brand-secondary-1);
 `;
-var IntegrationTileTitle = import_react54.css`
+var IntegrationTileTitle = import_react55.css`
   display: block;
   font-weight: var(--fw-bold);
   margin: 0 0 var(--spacing-base);
   max-width: 13rem;
 `;
-var IntegrationTitleLogo = import_react54.css`
+var IntegrationTitleLogo = import_react55.css`
   display: block;
   max-width: 10rem;
   max-height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationTileName = import_react54.css`
+var IntegrationTileName = import_react55.css`
   color: var(--gray-500);
   display: -webkit-box;
   -webkit-line-clamp: 1;
@@ -4369,7 +4398,7 @@ var IntegrationTileName = import_react54.css`
   position: absolute;
   bottom: calc(var(--spacing-base) * 3.8);
 `;
-var IntegrationAddedText = import_react54.css`
+var IntegrationAddedText = import_react55.css`
   align-items: center;
   background: var(--brand-secondary-3);
   border-radius: 0 var(--rounded-md) 0 var(--rounded-md);
@@ -4384,7 +4413,7 @@ var IntegrationAddedText = import_react54.css`
   top: 0;
   right: 0;
 `;
-var IntegrationCustomBadgeText = (theme) => import_react54.css`
+var IntegrationCustomBadgeText = (theme) => import_react55.css`
   align-items: center;
   border-radius: var(--rounded-sm) 0 var(--rounded-sm) 0;
   background: ${theme === "gray" ? "var(--brand-secondary-2)" : "var(--brand-secondary-1)"};
@@ -4398,26 +4427,26 @@ var IntegrationCustomBadgeText = (theme) => import_react54.css`
   top: 0;
   left: 0;
 `;
-var IntegrationAuthorBadgeIcon = import_react54.css`
+var IntegrationAuthorBadgeIcon = import_react55.css`
   position: absolute;
   bottom: var(--spacing-sm);
   right: var(--spacing-xs);
   max-height: 1rem;
 `;
-var IntegrationTitleFakeButton = import_react54.css`
+var IntegrationTitleFakeButton = import_react55.css`
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-base);
   text-transform: uppercase;
 `;
-var IntegrationTileFloatingButton = import_react54.css`
+var IntegrationTileFloatingButton = import_react55.css`
   position: absolute;
   bottom: var(--spacing-base);
   gap: var(--spacing-sm);
   font-size: var(--fs-xs);
   overflow: hidden;
 `;
-var IntegrationTileFloatingButtonMessage = (clicked) => import_react54.css`
+var IntegrationTileFloatingButtonMessage = (clicked) => import_react55.css`
   strong,
   span:first-of-type {
     transition: opacity var(--duration-fast) var(--timing-ease-out);
@@ -4464,7 +4493,7 @@ var CreateTeamIntegrationTile = ({
               icon: import_cg10.CgChevronRight,
               iconColor: "currentColor",
               size: 20,
-              css: import_react55.css`
+              css: import_react56.css`
               order: 1;
             `
             }
@@ -4474,7 +4503,7 @@ var CreateTeamIntegrationTile = ({
               icon: import_cg10.CgAdd,
               iconColor: "currentColor",
               size: 16,
-              css: import_react55.css`
+              css: import_react56.css`
               order: -1;
             `
             }
@@ -4562,8 +4591,8 @@ var EditTeamIntegrationTile = ({
 };
 
 // src/components/Tiles/IntegrationComingSoon.tsx
-var import_react56 = require("@emotion/react");
-var import_react57 = require("react");
+var import_react57 = require("@emotion/react");
+var import_react58 = require("react");
 var import_cg12 = require("react-icons/cg");
 var import_jsx_runtime56 = require("@emotion/react/jsx-runtime");
 var IntegrationComingSoon = ({
@@ -4574,12 +4603,12 @@ var IntegrationComingSoon = ({
   timing = 1e3,
   ...props
 }) => {
-  const [upVote, setUpVote] = (0, import_react57.useState)(false);
+  const [upVote, setUpVote] = (0, import_react58.useState)(false);
   const handleUpVoteInteraction = () => {
     setUpVote((prev) => !prev);
     onUpVoteClick();
   };
-  (0, import_react57.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (upVote) {
       const timer = setTimeout(() => setUpVote(false), timing);
       return () => {
@@ -4611,7 +4640,7 @@ var IntegrationComingSoon = ({
               /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                 "span",
                 {
-                  css: import_react56.css`
+                  css: import_react57.css`
             text-transform: uppercase;
             color: var(--gray-500);
           `,
@@ -4631,8 +4660,8 @@ var IntegrationComingSoon = ({
 };
 
 // src/components/Tiles/styles/IntegrationLoadingTile.styles.ts
-var import_react58 = require("@emotion/react");
-var IntegrationLoadingTileContainer = import_react58.css`
+var import_react59 = require("@emotion/react");
+var IntegrationLoadingTileContainer = import_react59.css`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -4659,17 +4688,17 @@ var IntegrationLoadingTileContainer = import_react58.css`
     }
   }
 `;
-var IntegrationLoadingTileImg = import_react58.css`
+var IntegrationLoadingTileImg = import_react59.css`
   width: 10rem;
   height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationLoadingTileText = import_react58.css`
+var IntegrationLoadingTileText = import_react59.css`
   width: 5rem;
   height: var(--spacing-sm);
   margin: var(--spacing-sm) 0;
 `;
-var IntegrationLoadingFrame = import_react58.css`
+var IntegrationLoadingFrame = import_react59.css`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   border-radius: var(--rounded-base);
 `;
@@ -4685,13 +4714,13 @@ var IntegrationLoadingTile = ({ count = 1 }) => {
 };
 
 // src/components/Tiles/styles/IntegrationModalIcon.styles.ts
-var import_react59 = require("@emotion/react");
-var IntegrationModalIconContainer = import_react59.css`
+var import_react60 = require("@emotion/react");
+var IntegrationModalIconContainer = import_react60.css`
   position: relative;
   width: 50px;
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalImage = import_react59.css`
+var IntegrationModalImage = import_react60.css`
   position: absolute;
   inset: 0;
   margin: auto;
@@ -4767,13 +4796,13 @@ var IntegrationTile = ({
 };
 
 // src/components/Tiles/styles/TileContainer.styles.ts
-var import_react60 = require("@emotion/react");
-var TileContainerWrapper = import_react60.css`
+var import_react61 = require("@emotion/react");
+var TileContainerWrapper = import_react61.css`
   background: var(--brand-secondary-2);
   padding: var(--spacing-base);
   margin-bottom: var(--spacing-lg);
 `;
-var TileContainerInner = import_react60.css`
+var TileContainerInner = import_react61.css`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
   gap: var(--spacing-base);
@@ -4786,31 +4815,31 @@ var TileContainer = ({ children, ...props }) => {
 };
 
 // src/components/Modal/IntegrationModalHeader.styles.ts
-var import_react61 = require("@emotion/react");
-var IntegrationModalHeaderSVGBackground = import_react61.css`
+var import_react62 = require("@emotion/react");
+var IntegrationModalHeaderSVGBackground = import_react62.css`
   position: absolute;
   top: 0;
   left: 0;
 `;
-var IntegrationModalHeaderGroup = import_react61.css`
+var IntegrationModalHeaderGroup = import_react62.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   margin: 0 0 var(--spacing-md);
   position: relative;
 `;
-var IntegrationModalHeaderTitleGroup = import_react61.css`
+var IntegrationModalHeaderTitleGroup = import_react62.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
 `;
-var IntegrationModalHeaderTitle = import_react61.css`
+var IntegrationModalHeaderTitle = import_react62.css`
   margin-top: 0;
 `;
-var IntegrationModalHeaderMenuPlacement = import_react61.css`
+var IntegrationModalHeaderMenuPlacement = import_react62.css`
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalHeaderContentWrapper = import_react61.css`
+var IntegrationModalHeaderContentWrapper = import_react62.css`
   position: relative;
   z-index: var(--z-10);
 `;
@@ -4871,12 +4900,51 @@ var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
   ] });
 };
 
+// src/components/Skeleton/Skeleton.styles.ts
+var import_react63 = require("@emotion/react");
+var lightFadingOut = import_react63.keyframes`
+  from { opacity: 0.1; }
+  to { opacity: 0.025; }
+`;
+var skeletonStyles = import_react63.css`
+  animation: ${lightFadingOut} 1s ease-out infinite alternate;
+  background-color: var(--gray-900);
+`;
+
+// src/components/Skeleton/Skeleton.tsx
+var import_jsx_runtime62 = require("@emotion/react/jsx-runtime");
+var Skeleton = ({
+  width = "100%",
+  height = "1.25rem",
+  inline = false,
+  circle = false,
+  children,
+  ...otherProps
+}) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  "div",
+  {
+    css: [
+      skeletonStyles,
+      {
+        width: circle ? height : width,
+        height,
+        display: inline ? "inline-block" : "block",
+        borderRadius: circle ? "var(--rounded-full)" : "var(--rounded-md)"
+      }
+    ],
+    ...otherProps,
+    "aria-busy": "true",
+    "aria-label": "Loading...",
+    children
+  }
+);
+
 // src/components/Switch/Switch.tsx
 var React14 = __toESM(require("react"));
 
 // src/components/Switch/Switch.styles.ts
-var import_react62 = require("@emotion/react");
-var SwitchInputContainer = import_react62.css`
+var import_react64 = require("@emotion/react");
+var SwitchInputContainer = import_react64.css`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -4885,7 +4953,7 @@ var SwitchInputContainer = import_react62.css`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = import_react62.css`
+var SwitchInput = import_react64.css`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -4923,7 +4991,7 @@ var SwitchInput = import_react62.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = import_react62.css`
+var SwitchInputDisabled = import_react64.css`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -4931,7 +4999,7 @@ var SwitchInputDisabled = import_react62.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = import_react62.css`
+var SwitchInputLabel = import_react64.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -4953,26 +5021,26 @@ var SwitchInputLabel = import_react62.css`
     top: 0;
   }
 `;
-var SwitchText = import_react62.css`
+var SwitchText = import_react64.css`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
 `;
 
 // src/components/Switch/Switch.tsx
-var import_jsx_runtime62 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime63 = require("@emotion/react/jsx-runtime");
 var Switch = React14.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { css: SwitchInputLabel, children: label })
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -4982,74 +5050,74 @@ var Switch = React14.forwardRef(
 var React15 = __toESM(require("react"));
 
 // src/components/Table/Table.styles.ts
-var import_react63 = require("@emotion/react");
-var table = import_react63.css`
+var import_react65 = require("@emotion/react");
+var table = import_react65.css`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
   table-layout: auto;
 `;
-var tableHead = import_react63.css`
+var tableHead = import_react65.css`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = import_react63.css`
+var tableRow = import_react65.css`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = import_react63.css`
+var tableCellHead = import_react65.css`
   font-size: var(--fs-sm);
   padding: var(--spacing-base) var(--spacing-md);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
-var tableCellData = import_react63.css`
+var tableCellData = import_react65.css`
   padding: var(--spacing-base) var(--spacing-md);
 `;
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime63 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime64 = require("@emotion/react/jsx-runtime");
 var Table = React15.forwardRef(({ children, ...otherProps }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("table", { ref, css: table, ...otherProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("table", { ref, css: table, ...otherProps, children });
 });
 var TableHead = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("td", { ref, css: tableCellData, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("td", { ref, css: tableCellData, ...otherProps, children });
   }
 );
 
 // src/components/Tabs/Tabs.tsx
-var import_react65 = require("react");
+var import_react67 = require("react");
 var import_Tab = require("reakit/Tab");
 
 // src/components/Tabs/Tabs.styles.ts
-var import_react64 = require("@emotion/react");
-var tabButtonStyles = import_react64.css`
+var import_react66 = require("@emotion/react");
+var tabButtonStyles = import_react66.css`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -5066,16 +5134,16 @@ var tabButtonStyles = import_react64.css`
     -webkit-text-stroke-width: thin;
   }
 `;
-var tabButtonGroupStyles = import_react64.css`
+var tabButtonGroupStyles = import_react66.css`
   display: flex;
   gap: var(--spacing-base);
 `;
 
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime64 = require("@emotion/react/jsx-runtime");
-var CurrentTabContext = (0, import_react65.createContext)(null);
+var import_jsx_runtime65 = require("@emotion/react/jsx-runtime");
+var CurrentTabContext = (0, import_react67.createContext)(null);
 var useCurrentTab = () => {
-  const context = (0, import_react65.useContext)(CurrentTabContext);
+  const context = (0, import_react67.useContext)(CurrentTabContext);
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
@@ -5083,31 +5151,31 @@ var useCurrentTab = () => {
 };
 var Tabs = ({ children, onSelectedIdChange, ...props }) => {
   const tab = (0, import_Tab.useTabState)(props);
-  (0, import_react65.useEffect)(() => {
+  (0, import_react67.useEffect)(() => {
     var _a;
     onSelectedIdChange == null ? void 0 : onSelectedIdChange((_a = tab.selectedId) != null ? _a : void 0);
   }, [tab.selectedId, onSelectedIdChange]);
-  (0, import_react65.useEffect)(() => {
+  (0, import_react67.useEffect)(() => {
     tab.setSelectedId(props.selectedId);
   }, [props.selectedId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(CurrentTabContext.Provider, { value: tab, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(CurrentTabContext.Provider, { value: tab, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_Tab.TabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_Tab.TabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({ children, id, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_Tab.Tab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_Tab.Tab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_Tab.TabPanel, { ...props, ...currentTab, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_Tab.TabPanel, { ...props, ...currentTab, children });
 };
 
 // src/components/Validation/StatusBullet.styles.ts
-var import_react66 = require("@emotion/react");
-var StatusBulletContainer = import_react66.css`
+var import_react68 = require("@emotion/react");
+var StatusBulletContainer = import_react68.css`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -5127,18 +5195,18 @@ var StatusBulletContainer = import_react66.css`
     height: var(--fs-xs);
   }
 `;
-var StatusDraft = import_react66.css`
+var StatusDraft = import_react68.css`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
   }
 `;
-var StatusModified = import_react66.css`
+var StatusModified = import_react68.css`
   &:before {
     background: var(--brand-primary-1);
   }
 `;
-var StatusError = import_react66.css`
+var StatusError = import_react68.css`
   color: var(--error);
   &:before {
     background: var(--error);
@@ -5154,19 +5222,19 @@ var StatusError = import_react66.css`
     rotate: -45deg;
   }
 `;
-var StatusPublished = import_react66.css`
+var StatusPublished = import_react68.css`
   &:before {
     background: var(--brand-secondary-3);
   }
 `;
-var StatusOrphan = import_react66.css`
+var StatusOrphan = import_react68.css`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
 
 // src/components/Validation/StatusBullet.tsx
-var import_jsx_runtime65 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime66 = require("@emotion/react/jsx-runtime");
 var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   const currentStateStyles = {
     Error: StatusError,
@@ -5176,7 +5244,7 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
     Published: StatusPublished,
     Draft: StatusDraft
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     "span",
     {
       css: [StatusBulletContainer, currentStateStyles[status]],
@@ -5246,6 +5314,7 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   ScrollableListItem,
   ShortcutContext,
   ShortcutRevealer,
+  Skeleton,
   StatusBullet,
   Switch,
   TabButton,
@@ -5268,6 +5337,7 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   breakpoints,
   button,
   buttonGhost,
+  buttonGhostDestructive,
   buttonPrimary,
   buttonRippleEffect,
   buttonSecondary,
@@ -5296,5 +5366,6 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   useDrawer,
   useIconContext,
   useMenuContext,
+  useOutsideClick,
   useShortcut
 });