@uniformdev/design-system 18.5.0 → 18.7.0

package/dist/esm/index.js

@@ -219,6 +219,20 @@ var useBreakpoint = createBreakpoint(breakpoints);
 var mq = (size) => `@media (min-width: ${breakpoints[size]}px)`;
 var supports = (cssProp) => `@supports (${cssProp})`;
 
+// src/utils/useOutsideClick.tsx
+import { useEffect } from "react";
+var useOutsideClick = (containerRef, handler) => {
+  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
 import { css } from "@emotion/react";
 var button = css`
@@ -319,6 +333,14 @@ var buttonGhost = css`
 
   ${buttonRippleEffect({ hoverColor: "var(--white)", activeColor: "var(--gray-100)" })}
 `;
+var buttonGhostDestructive = css`
+  ${buttonGhost}
+  color: var(--brand-secondary-5);
+
+  &:hover {
+    border-color: var(--brand-secondary-5);
+  }
+`;
 var buttonTertiary = css`
   background: var(--brand-secondary-3);
   color: var(--white);
@@ -605,7 +627,7 @@ var scrollbarStyles = css3`
 import { css as css6 } from "@emotion/react";
 
 // src/components/Shortcuts/ShortcutRevealer.tsx
-import React2, { useContext, useEffect, useState } from "react";
+import React2, { useContext, useEffect as useEffect2, useState } from "react";
 
 // src/components/Shortcuts/ShortcutRevealer.styles.ts
 import { css as css4 } from "@emotion/react";
@@ -670,7 +692,7 @@ var Context = React2.createContext(false);
 var revealHotkey = ["ctrl+F1", "ctrl+shift+/"];
 function ShortcutContext({ children }) {
   const [reveal, setReveal] = useState(false);
-  useEffect(() => {
+  useEffect2(() => {
     if (!loggedHotkeyConsole) {
       loggedHotkeyConsole = true;
       console.log(
@@ -847,7 +869,7 @@ var IconColorCurrent = css7`
 
 // src/components/Icons/IconsProvider.tsx
 import { paramCase } from "param-case";
-import { createContext, useContext as useContext2, useEffect as useEffect2, useState as useState2 } from "react";
+import { createContext, useContext as useContext2, useEffect as useEffect3, useState as useState2 } from "react";
 
 // src/components/Icons/customIcons.tsx
 import { GenIcon } from "react-icons";
@@ -1185,7 +1207,7 @@ function IconsProvider({ children }) {
     setIconsMap({ ...iconMap, ...customIcons });
     setIsLoading(false);
   };
-  useEffect2(() => {
+  useEffect3(() => {
     initializeIconsMap();
   }, []);
   return /* @__PURE__ */ jsx5(IconContext.Provider, { value: { iconsMap, isLoading }, children });
@@ -1902,6 +1924,7 @@ var Button = React5.forwardRef(
       secondary: buttonSecondary,
       secondaryInvert: buttonSecondaryInvert,
       ghost: buttonGhost,
+      ghostDestructive: buttonGhostDestructive,
       unimportant: buttonUnimportant,
       tertiary: buttonTertiary
     };
@@ -2764,7 +2787,7 @@ var Details = ({ summary: summary2, children, isOpenByDefault = false, ...props
 };
 
 // src/components/Drawer/Drawer.tsx
-import React10, { useEffect as useEffect4, useMemo, useRef as useRef2 } from "react";
+import React10, { useEffect as useEffect5, useMemo, useRef as useRef2 } from "react";
 import { CgChevronRight } from "react-icons/cg";
 
 // src/components/Drawer/Drawer.styles.ts
@@ -2776,7 +2799,7 @@ var drawerStyles = (bgColor = "var(--white)") => css27`
   flex-direction: column;
   position: absolute;
   inset: 0;
-  padding: var(--spacing-base);
+  padding-top: var(--spacing-sm);
   height: 100%;
 `;
 var drawerCloseButtonStyles = css27`
@@ -2785,19 +2808,22 @@ var drawerCloseButtonStyles = css27`
   border: none;
   display: block;
   padding: var(--spacing-xs);
+  margin-right: var(--spacing-sm);
 `;
 var drawerHeaderStyles = css27`
   font-size: var(--fs-lg);
   font-weight: var(--fw-bold);
+  padding-inline: var(--spacing-base);
 `;
 var drawerRendererStyles = (position) => css27`
   position: ${position};
   inset: 0;
   overflow: hidden;
-  z-index: var(--z-10);
+  z-index: 40;
 `;
 var drawerInnerStyles = css27`
   height: 100%;
+  padding: var(--spacing-base);
   overflow: auto;
   ${scrollbarStyles}
 `;
@@ -2830,8 +2856,7 @@ var drawerWrapperStyles = css27`
 var drawerWrapperOverlayStyles = css27`
   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;
 `;
 
@@ -2915,6 +2940,7 @@ var Drawer = React10.forwardRef(
           tabIndex: -1,
           "aria-labelledby": headerId,
           css: drawerStyles(bgColor),
+          "data-test-id": "side-dialog",
           children: [
             /* @__PURE__ */ jsx30(
               Button,
@@ -2934,7 +2960,7 @@ var Drawer = React10.forwardRef(
         }
       );
     }, [children, header, id, stackId, bgColor, onRequestClose, ref]);
-    useEffect4(() => {
+    useEffect5(() => {
       registerDrawer({
         drawer: {
           id,
@@ -2951,7 +2977,7 @@ var Drawer = React10.forwardRef(
         }
       });
     }, [component, instanceKey, registerDrawer]);
-    useEffect4(() => {
+    useEffect5(() => {
       return () => unregisterDrawer({ id, stackId, instanceKey });
     }, [id, stackId, instanceKey, unregisterDrawer]);
     return null;
@@ -3610,7 +3636,7 @@ var InputKeywordSearch = ({
       placeholder,
       showLabel: false,
       value,
-      icon: value ? /* @__PURE__ */ jsx41("button", { onClick: onClear, children: /* @__PURE__ */ jsx41(Icon, { icon: "close", css: inputSearchCloseIcon }) }) : /* @__PURE__ */ jsxs25(
+      icon: value ? /* @__PURE__ */ jsx41("button", { onClick: onClear, css: { pointerEvents: "all" }, children: /* @__PURE__ */ jsx41(Icon, { icon: "close", css: inputSearchCloseIcon }) }) : /* @__PURE__ */ jsxs25(
         "svg",
         {
           width: "26",
@@ -4427,7 +4453,7 @@ var EditTeamIntegrationTile = ({
 
 // src/components/Tiles/IntegrationComingSoon.tsx
 import { css as css46 } from "@emotion/react";
-import { useEffect as useEffect6, useState as useState6 } from "react";
+import { useEffect as useEffect7, useState as useState6 } from "react";
 import { CgHeart } from "react-icons/cg";
 import { jsx as jsx57, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
 var IntegrationComingSoon = ({
@@ -4443,7 +4469,7 @@ var IntegrationComingSoon = ({
     setUpVote((prev) => !prev);
     onUpVoteClick();
   };
-  useEffect6(() => {
+  useEffect7(() => {
     if (upVote) {
       const timer = setTimeout(() => setUpVote(false), timing);
       return () => {
@@ -4735,12 +4761,51 @@ var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
   ] });
 };
 
+// src/components/Skeleton/Skeleton.styles.ts
+import { css as css51, keyframes as keyframes4 } from "@emotion/react";
+var lightFadingOut = keyframes4`
+  from { opacity: 0.1; }
+  to { opacity: 0.025; }
+`;
+var skeletonStyles = css51`
+  animation: ${lightFadingOut} 1s ease-out infinite alternate;
+  background-color: var(--gray-900);
+`;
+
+// src/components/Skeleton/Skeleton.tsx
+import { jsx as jsx63 } from "@emotion/react/jsx-runtime";
+var Skeleton = ({
+  width = "100%",
+  height = "1.25rem",
+  inline = false,
+  circle = false,
+  children,
+  ...otherProps
+}) => /* @__PURE__ */ jsx63(
+  "div",
+  {
+    css: [
+      skeletonStyles,
+      {
+        width: circle ? height : width,
+        height,
+        display: inline ? "inline-block" : "block",
+        borderRadius: circle ? "var(--rounded-full)" : "var(--rounded-md)"
+      }
+    ],
+    ...otherProps,
+    "aria-busy": "true",
+    "aria-label": "Loading...",
+    children
+  }
+);
+
 // src/components/Switch/Switch.tsx
 import * as React14 from "react";
 
 // src/components/Switch/Switch.styles.ts
-import { css as css51 } from "@emotion/react";
-var SwitchInputContainer = css51`
+import { css as css52 } from "@emotion/react";
+var SwitchInputContainer = css52`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -4749,7 +4814,7 @@ var SwitchInputContainer = css51`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = css51`
+var SwitchInput = css52`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -4787,7 +4852,7 @@ var SwitchInput = css51`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css51`
+var SwitchInputDisabled = css52`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -4795,7 +4860,7 @@ var SwitchInputDisabled = css51`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = css51`
+var SwitchInputLabel = css52`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -4817,14 +4882,14 @@ var SwitchInputLabel = css51`
     top: 0;
   }
 `;
-var SwitchText = css51`
+var SwitchText = css52`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment9, jsx as jsx63, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx64, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
 var Switch = React14.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
@@ -4833,10 +4898,10 @@ var Switch = React14.forwardRef(
     }
     return /* @__PURE__ */ jsxs44(Fragment9, { children: [
       /* @__PURE__ */ jsxs44("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ jsx63("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ jsx63("span", { css: SwitchInputLabel, children: label })
+        /* @__PURE__ */ jsx64("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ jsx64("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ jsx63("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ jsx64("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -4846,69 +4911,69 @@ var Switch = React14.forwardRef(
 import * as React15 from "react";
 
 // src/components/Table/Table.styles.ts
-import { css as css52 } from "@emotion/react";
-var table = css52`
+import { css as css53 } from "@emotion/react";
+var table = css53`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
   table-layout: auto;
 `;
-var tableHead = css52`
+var tableHead = css53`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = css52`
+var tableRow = css53`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = css52`
+var tableCellHead = css53`
   font-size: var(--fs-sm);
   padding: var(--spacing-base) var(--spacing-md);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
-var tableCellData = css52`
+var tableCellData = css53`
   padding: var(--spacing-base) var(--spacing-md);
 `;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx64 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx65 } from "@emotion/react/jsx-runtime";
 var Table = React15.forwardRef(({ children, ...otherProps }, ref) => {
-  return /* @__PURE__ */ jsx64("table", { ref, css: table, ...otherProps, children });
+  return /* @__PURE__ */ jsx65("table", { ref, css: table, ...otherProps, children });
 });
 var TableHead = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx64("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx65("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx64("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx65("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx64("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx65("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx64("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx65("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx64("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx65("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React15.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx64("td", { ref, css: tableCellData, ...otherProps, children });
+    return /* @__PURE__ */ jsx65("td", { ref, css: tableCellData, ...otherProps, children });
   }
 );
 
 // src/components/Tabs/Tabs.tsx
-import { createContext as createContext4, useContext as useContext5, useEffect as useEffect7 } from "react";
+import { createContext as createContext4, useContext as useContext5, useEffect as useEffect8 } from "react";
 import {
   Tab as ReakitTab,
   TabList as ReakitTabList,
@@ -4917,8 +4982,8 @@ import {
 } from "reakit/Tab";
 
 // src/components/Tabs/Tabs.styles.ts
-import { css as css53 } from "@emotion/react";
-var tabButtonStyles = css53`
+import { css as css54 } from "@emotion/react";
+var tabButtonStyles = css54`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -4935,13 +5000,13 @@ var tabButtonStyles = css53`
     -webkit-text-stroke-width: thin;
   }
 `;
-var tabButtonGroupStyles = css53`
+var tabButtonGroupStyles = css54`
   display: flex;
   gap: var(--spacing-base);
 `;
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx65 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx66 } from "@emotion/react/jsx-runtime";
 var CurrentTabContext = createContext4(null);
 var useCurrentTab = () => {
   const context = useContext5(CurrentTabContext);
@@ -4952,31 +5017,31 @@ var useCurrentTab = () => {
 };
 var Tabs = ({ children, onSelectedIdChange, ...props }) => {
   const tab = useTabState(props);
-  useEffect7(() => {
+  useEffect8(() => {
     var _a;
     onSelectedIdChange == null ? void 0 : onSelectedIdChange((_a = tab.selectedId) != null ? _a : void 0);
   }, [tab.selectedId, onSelectedIdChange]);
-  useEffect7(() => {
+  useEffect8(() => {
     tab.setSelectedId(props.selectedId);
   }, [props.selectedId]);
-  return /* @__PURE__ */ jsx65(CurrentTabContext.Provider, { value: tab, children });
+  return /* @__PURE__ */ jsx66(CurrentTabContext.Provider, { value: tab, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx65(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx66(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({ children, id, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx65(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx66(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx65(ReakitTabPanel, { ...props, ...currentTab, children });
+  return /* @__PURE__ */ jsx66(ReakitTabPanel, { ...props, ...currentTab, children });
 };
 
 // src/components/Validation/StatusBullet.styles.ts
-import { css as css54 } from "@emotion/react";
-var StatusBulletContainer = css54`
+import { css as css55 } from "@emotion/react";
+var StatusBulletContainer = css55`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -4996,18 +5061,18 @@ var StatusBulletContainer = css54`
     height: var(--fs-xs);
   }
 `;
-var StatusDraft = css54`
+var StatusDraft = css55`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
   }
 `;
-var StatusModified = css54`
+var StatusModified = css55`
   &:before {
     background: var(--brand-primary-1);
   }
 `;
-var StatusError = css54`
+var StatusError = css55`
   color: var(--error);
   &:before {
     background: var(--error);
@@ -5023,19 +5088,19 @@ var StatusError = css54`
     rotate: -45deg;
   }
 `;
-var StatusPublished = css54`
+var StatusPublished = css55`
   &:before {
     background: var(--brand-secondary-3);
   }
 `;
-var StatusOrphan = css54`
+var StatusOrphan = css55`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
 
 // src/components/Validation/StatusBullet.tsx
-import { jsx as jsx66 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx67 } from "@emotion/react/jsx-runtime";
 var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   const currentStateStyles = {
     Error: StatusError,
@@ -5045,7 +5110,7 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
     Published: StatusPublished,
     Draft: StatusDraft
   };
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx67(
     "span",
     {
       css: [StatusBulletContainer, currentStateStyles[status]],
@@ -5114,6 +5179,7 @@ export {
   ScrollableListItem,
   ShortcutContext,
   ShortcutRevealer,
+  Skeleton,
   StatusBullet,
   Switch,
   TabButton,
@@ -5136,6 +5202,7 @@ export {
   breakpoints,
   button,
   buttonGhost,
+  buttonGhostDestructive,
   buttonPrimary,
   buttonRippleEffect,
   buttonSecondary,
@@ -5164,5 +5231,6 @@ export {
   useDrawer,
   useIconContext,
   useMenuContext,
+  useOutsideClick,
   useShortcut
 };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default, { ReactNode, HTMLAttributes } from 'react';
+import React__default, { RefObject, ReactNode, HTMLAttributes } from 'react';
 import * as _emotion_react from '@emotion/react';
 import { SerializedStyles } from '@emotion/react';
 import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
@@ -52,6 +52,8 @@ declare const mq: (size: BreakpointSize) => string;
  */
 declare const supports: (cssProp: string) => string;
 
+declare const useOutsideClick: (containerRef: RefObject<HTMLElement | null>, handler: () => void) => void;
+
 declare const button: _emotion_react.SerializedStyles;
 declare const buttonRippleEffect: (props: {
     hoverColor: string;
@@ -62,6 +64,7 @@ declare const buttonSecondary: _emotion_react.SerializedStyles;
 declare const buttonSecondaryInvert: _emotion_react.SerializedStyles;
 declare const buttonUnimportant: _emotion_react.SerializedStyles;
 declare const buttonGhost: _emotion_react.SerializedStyles;
+declare const buttonGhostDestructive: _emotion_react.SerializedStyles;
 declare const buttonTertiary: _emotion_react.SerializedStyles;
 
 declare const labelText: _emotion_react.SerializedStyles;
@@ -203,7 +206,7 @@ declare const UniformBadge: ({ theme, ...props }: React__default.SVGAttributes<S
 declare const UniformLogo: ({ theme, ...props }: UniformLogoProps & React.SVGAttributes<SVGElement>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /** Button themes that are available to use with our brand */
-type ButtonThemeProps$1 = 'primary' | 'secondary' | 'tertiary' | 'unimportant' | 'ghost' | 'secondaryInvert';
+type ButtonThemeProps$1 = 'primary' | 'secondary' | 'tertiary' | 'unimportant' | 'ghost' | 'ghostDestructive' | 'secondaryInvert';
 /** Button sizes that are available to use with our brand */
 type ButtonSizeProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type ButtonProps = ButtonProps$1 & {
@@ -735,7 +738,7 @@ type InputSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
  */
 declare const InputSelect: ({ label, defaultOption, options, caption, errorMessage, warningMessage, showLabel, labelCta, compact, classNameContainer, classNameControl, classNameLabel, ...props }: InputSelectProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-type InputToggleProps = React$1.HTMLAttributes<HTMLInputElement> & {
+type InputToggleProps = React$1.InputHTMLAttributes<HTMLInputElement> & {
     /** sets the label value */
     label: string;
     /** sets the type of input to use, either radio or checkbox */
@@ -1004,6 +1007,18 @@ type UseShortcutOptions = {
 declare function macifyShortcut(shortcut: string | null): string | null;
 declare function useShortcut({ handler, shortcut, macShortcut, doNotPreventDefault, activeWhenEditing, }: UseShortcutOptions): void;
 
+type SkeletonProps = React__default.PropsWithChildren<React__default.HTMLAttributes<HTMLDivElement>> & {
+    width?: string;
+    height?: string;
+    inline?: boolean;
+    circle?: boolean;
+};
+/**
+ * A loading skeleton
+ * @example <Skeleton width="50%" height="32px" />
+ */
+declare const Skeleton: ({ width, height, inline, circle, children, ...otherProps }: SkeletonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
 type SwitchProps = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
     /** sets the label value */
     label: string;
@@ -1337,4 +1352,4 @@ type StatusBulletProps = React$1.HTMLAttributes<HTMLSpanElement> & {
 };
 declare const StatusBullet: ({ status, hideText, message, ...props }: StatusBulletProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, AddListButtonThemeProps, ArrowPositionProps, Badge, BadgeProps, BoxHeightProps, BreakpointSize, BreakpointsMap, Button, ButtonProps, ButtonSizeProps, ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, ButtonWithMenuProps, Callout, CalloutProps, CalloutType, Caption, CaptionProps, Card, CardContainer, CardContainerBgColorProps, CardContainerProps, CardProps, CheckboxWithInfo, CheckboxWithInforProps, ChildFunction, ComboBoxGroupBase, Counter, CounterProps, CreateTeamIntegrationTile, CreateTeamIntegrationTileProps, DashedBox, DashedBoxProps, Details, DetailsProps, Drawer, DrawerContextValue, DrawerItem, DrawerProps, DrawerProvider, DrawerRenderer, DrawerRendererItemProps, DrawerRendererProps, EditTeamIntegrationTile, EditTeamIntegrationTileProps, ErrorMessage, ErrorMessageProps, Fieldset, FieldsetProps, Heading, HeadingProps, HexModalBackground, Icon, IconColor, IconName, IconProps, IconType, IconsProvider, InlineAlert, InlineAlertProps, Input, InputComboBox, InputComboBoxOption, InputComboBoxProps, InputInlineSelect, InputInlineSelectOption, InputInlineSelectProps, InputKeywordSearch, InputKeywordSearchProps, InputProps, InputSelect, InputSelectProps, InputToggle, InputToggleProps, IntegrationComingSoon, IntegrationComingSoonProps, IntegrationHeaderSection, IntegrationHeaderSectionProps, IntegrationLoadingTile, IntegrationLoadingTileProps, IntegrationModalHeader, IntegrationModalHeaderProps, IntegrationModalIcon, IntegrationModalIconProps, IntegrationTile, IntegrationTileProps, Label, LabelProps, Legend, LegendProps, LevelProps, LimitsBar, LimitsBarProps, Link, LinkColorProps, LinkList, LinkListProps, LinkManagerWithRefType, LinkProps, LinkWithRef, LoadingIcon, LoadingIconProps, LoadingIndicator, LoadingOverlay, LoadingOverlayProps, Menu, MenuContext, MenuItem, MenuItemProps, MenuItemSeparator, MenuItemTextThemeProps, MenuProps, PageHeaderSection, PageHeaderSectionProps, Paragraph, ParagraphProps, RegisterDrawerProps, ResolveIcon, ResolveIconProps, ScrollableItemProps, ScrollableList, ScrollableListInputItem, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, ShortcutContext, ShortcutRevealer, StatusBullet, StatusBulletProps, StatusTypeProps, Switch, SwitchProps, TabButton, TabButtonGroup, TabButtonProps, TabContent, TabContentProps, Table, TableBody, TableBodyProps, TableCellData, TableCellDataProps, TableCellHead, TableCellHeadProps, TableFoot, TableFootProps, TableHead, TableHeadProps, TableProps, TableRow, TableRowProps, Tabs, TabsProps, TextAlignProps, Textarea, TextareaProps, Theme, ThemeProps, TileContainer, TileContainerProps, UniformBadge, UniformLogo, UniformLogoProps, UseShortcutOptions, WarningMessage, WarningMessageProps, breakpoints, button, buttonGhost, buttonPrimary, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonUnimportant, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeOutBottom, growSubtle, input, inputError, inputSelect, isMacLike, labelText, macifyShortcut, mq, ripple, scrollbarStyles, skeletonLoading, supports, useBreakpoint, useCurrentTab, useDrawer, useIconContext, useMenuContext, useShortcut };
+export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, AddListButtonThemeProps, ArrowPositionProps, Badge, BadgeProps, BoxHeightProps, BreakpointSize, BreakpointsMap, Button, ButtonProps, ButtonSizeProps, ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, ButtonWithMenuProps, Callout, CalloutProps, CalloutType, Caption, CaptionProps, Card, CardContainer, CardContainerBgColorProps, CardContainerProps, CardProps, CheckboxWithInfo, CheckboxWithInforProps, ChildFunction, ComboBoxGroupBase, Counter, CounterProps, CreateTeamIntegrationTile, CreateTeamIntegrationTileProps, DashedBox, DashedBoxProps, Details, DetailsProps, Drawer, DrawerContextValue, DrawerItem, DrawerProps, DrawerProvider, DrawerRenderer, DrawerRendererItemProps, DrawerRendererProps, EditTeamIntegrationTile, EditTeamIntegrationTileProps, ErrorMessage, ErrorMessageProps, Fieldset, FieldsetProps, Heading, HeadingProps, HexModalBackground, Icon, IconColor, IconName, IconProps, IconType, IconsProvider, InlineAlert, InlineAlertProps, Input, InputComboBox, InputComboBoxOption, InputComboBoxProps, InputInlineSelect, InputInlineSelectOption, InputInlineSelectProps, InputKeywordSearch, InputKeywordSearchProps, InputProps, InputSelect, InputSelectProps, InputToggle, InputToggleProps, IntegrationComingSoon, IntegrationComingSoonProps, IntegrationHeaderSection, IntegrationHeaderSectionProps, IntegrationLoadingTile, IntegrationLoadingTileProps, IntegrationModalHeader, IntegrationModalHeaderProps, IntegrationModalIcon, IntegrationModalIconProps, IntegrationTile, IntegrationTileProps, Label, LabelProps, Legend, LegendProps, LevelProps, LimitsBar, LimitsBarProps, Link, LinkColorProps, LinkList, LinkListProps, LinkManagerWithRefType, LinkProps, LinkWithRef, LoadingIcon, LoadingIconProps, LoadingIndicator, LoadingOverlay, LoadingOverlayProps, Menu, MenuContext, MenuItem, MenuItemProps, MenuItemSeparator, MenuItemTextThemeProps, MenuProps, PageHeaderSection, PageHeaderSectionProps, Paragraph, ParagraphProps, RegisterDrawerProps, ResolveIcon, ResolveIconProps, ScrollableItemProps, ScrollableList, ScrollableListInputItem, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, ShortcutContext, ShortcutRevealer, Skeleton, SkeletonProps, StatusBullet, StatusBulletProps, StatusTypeProps, Switch, SwitchProps, TabButton, TabButtonGroup, TabButtonProps, TabContent, TabContentProps, Table, TableBody, TableBodyProps, TableCellData, TableCellDataProps, TableCellHead, TableCellHeadProps, TableFoot, TableFootProps, TableHead, TableHeadProps, TableProps, TableRow, TableRowProps, Tabs, TabsProps, TextAlignProps, Textarea, TextareaProps, Theme, ThemeProps, TileContainer, TileContainerProps, UniformBadge, UniformLogo, UniformLogoProps, UseShortcutOptions, WarningMessage, WarningMessageProps, breakpoints, button, buttonGhost, buttonGhostDestructive, buttonPrimary, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonTertiary, buttonUnimportant, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeOutBottom, growSubtle, input, inputError, inputSelect, isMacLike, labelText, macifyShortcut, mq, ripple, scrollbarStyles, skeletonLoading, supports, useBreakpoint, useCurrentTab, useDrawer, useIconContext, useMenuContext, useOutsideClick, useShortcut };