@uniformdev/design-system 18.9.1-alpha.4 → 18.10.1-alpha.7

package/dist/esm/index.js

@@ -9797,7 +9797,6 @@ function InputComboBox(props) {
 
 // src/components/Input/InputInlineSelect.tsx
 import { css as css34 } from "@emotion/react";
-import * as React13 from "react";
 import { useRef as useRef3, useState as useState5 } from "react";
 import { CgChevronDown as CgChevronDown2 } from "react-icons/cg";
 
@@ -9880,17 +9879,7 @@ var InputInlineSelect = ({
   var _a;
   const [menuVisible, setMenuVisible] = useState5(false);
   const divRef = useRef3(null);
-  React13.useEffect(() => {
-    const outsideClick = (event) => {
-      if (divRef.current && !divRef.current.contains(event.target)) {
-        setMenuVisible(false);
-      }
-    };
-    document.addEventListener("mousedown", outsideClick);
-    return () => {
-      document.removeEventListener("mousedown", outsideClick);
-    };
-  }, [divRef]);
+  useOutsideClick(divRef, () => setMenuVisible(false));
   const selected = options.find((option) => option.value === value);
   return /* @__PURE__ */ jsxs24(
     "div",
@@ -10792,7 +10781,7 @@ var EditTeamIntegrationTile = ({
 
 // src/components/Tiles/IntegrationComingSoon.tsx
 import { css as css46 } from "@emotion/react";
-import { useEffect as useEffect7, useState as useState6 } from "react";
+import { useEffect as useEffect6, useState as useState6 } from "react";
 import { CgHeart } from "react-icons/cg";
 import { jsx as jsx58, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
 var IntegrationComingSoon = ({
@@ -10808,7 +10797,7 @@ var IntegrationComingSoon = ({
     setUpVote((prev) => !prev);
     onUpVoteClick();
   };
-  useEffect7(() => {
+  useEffect6(() => {
     if (upVote) {
       const timer = setTimeout(() => setUpVote(false), timing);
       return () => {
@@ -11140,7 +11129,7 @@ var Skeleton = ({
 );
 
 // src/components/Switch/Switch.tsx
-import * as React14 from "react";
+import * as React13 from "react";
 
 // src/components/Switch/Switch.styles.ts
 import { css as css52 } from "@emotion/react";
@@ -11229,7 +11218,7 @@ var SwitchText = css52`
 
 // src/components/Switch/Switch.tsx
 import { Fragment as Fragment9, jsx as jsx65, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
-var Switch = React14.forwardRef(
+var Switch = React13.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
@@ -11247,7 +11236,7 @@ var Switch = React14.forwardRef(
 );
 
 // src/components/Table/Table.tsx
-import * as React15 from "react";
+import * as React14 from "react";
 
 // src/components/Table/Table.styles.ts
 import { css as css53 } from "@emotion/react";
@@ -11277,42 +11266,42 @@ var tableCellData = css53`
 
 // src/components/Table/Table.tsx
 import { jsx as jsx66 } from "@emotion/react/jsx-runtime";
-var Table = React15.forwardRef(({ children, ...otherProps }, ref) => {
+var Table = React14.forwardRef(({ children, ...otherProps }, ref) => {
   return /* @__PURE__ */ jsx66("table", { ref, css: table, ...otherProps, children });
 });
-var TableHead = React15.forwardRef(
+var TableHead = React14.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx66("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React15.forwardRef(
+var TableBody = React14.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx66("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React15.forwardRef(
+var TableFoot = React14.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx66("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React15.forwardRef(
+var TableRow = React14.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx66("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React15.forwardRef(
+var TableCellHead = React14.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx66("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React15.forwardRef(
+var TableCellData = React14.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx66("td", { ref, css: tableCellData, ...otherProps, children });
   }
 );
 
 // src/components/Tabs/Tabs.tsx
-import { createContext as createContext4, useContext as useContext5, useEffect as useEffect8 } from "react";
+import { createContext as createContext4, useContext as useContext5, useEffect as useEffect7 } from "react";
 import {
   Tab as ReakitTab,
   TabList as ReakitTabList,
@@ -11356,11 +11345,11 @@ var useCurrentTab = () => {
 };
 var Tabs = ({ children, onSelectedIdChange, ...props }) => {
   const tab = useTabState(props);
-  useEffect8(() => {
+  useEffect7(() => {
     var _a;
     onSelectedIdChange == null ? void 0 : onSelectedIdChange((_a = tab.selectedId) != null ? _a : void 0);
   }, [tab.selectedId, onSelectedIdChange]);
-  useEffect8(() => {
+  useEffect7(() => {
     tab.setSelectedId(props.selectedId);
   }, [props.selectedId]);
   return /* @__PURE__ */ jsx67(CurrentTabContext.Provider, { value: tab, children });
@@ -11378,9 +11367,47 @@ var TabContent = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx67(ReakitTabPanel, { ...props, ...currentTab, children });
 };
 
-// src/components/Validation/StatusBullet.styles.ts
+// src/components/Tooltip/Tooltip.tsx
+import React16 from "react";
+import {
+  Tooltip as ReakitTooltip,
+  TooltipArrow,
+  TooltipReference,
+  useTooltipState
+} from "reakit/Tooltip";
+
+// src/components/Tooltip/Tooltip.styles.ts
 import { css as css55 } from "@emotion/react";
-var StatusBulletContainer = css55`
+var TooltipContainer = css55`
+  border: 2px solid var(--gray-300);
+  border-radius: var(--rounded-base);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  color: var(--gray-500);
+  font-size: var(--fs-xs);
+  background: var(--white);
+`;
+var TooltipArrowStyles = css55`
+  svg {
+    fill: var(--gray-300);
+  }
+`;
+
+// src/components/Tooltip/Tooltip.tsx
+import { Fragment as Fragment10, jsx as jsx68, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
+function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
+  const tooltip = useTooltipState({ placement });
+  return /* @__PURE__ */ jsxs45(Fragment10, { children: [
+    /* @__PURE__ */ jsx68(TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => React16.cloneElement(children, referenceProps) }),
+    /* @__PURE__ */ jsxs45(ReakitTooltip, { ...tooltip, ...props, css: TooltipContainer, visible: visible != null ? visible : tooltip.visible, children: [
+      /* @__PURE__ */ jsx68(TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
+      title
+    ] })
+  ] });
+}
+
+// src/components/Validation/StatusBullet.styles.ts
+import { css as css56 } from "@emotion/react";
+var StatusBulletContainer = css56`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -11400,18 +11427,18 @@ var StatusBulletContainer = css55`
     height: var(--fs-xs);
   }
 `;
-var StatusDraft = css55`
+var StatusDraft = css56`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
   }
 `;
-var StatusModified = css55`
+var StatusModified = css56`
   &:before {
     background: var(--brand-primary-1);
   }
 `;
-var StatusError = css55`
+var StatusError = css56`
   color: var(--error);
   &:before {
     background: var(--error);
@@ -11427,19 +11454,19 @@ var StatusError = css55`
     rotate: -45deg;
   }
 `;
-var StatusPublished = css55`
+var StatusPublished = css56`
   &:before {
     background: var(--brand-secondary-3);
   }
 `;
-var StatusOrphan = css55`
+var StatusOrphan = css56`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
 
 // src/components/Validation/StatusBullet.tsx
-import { jsx as jsx68 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx69 } from "@emotion/react/jsx-runtime";
 var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   const currentStateStyles = {
     Error: StatusError,
@@ -11449,7 +11476,7 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
     Published: StatusPublished,
     Draft: StatusDraft
   };
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx69(
     "span",
     {
       css: [StatusBulletContainer, currentStateStyles[status]],
@@ -11537,6 +11564,7 @@ export {
   Textarea,
   Theme,
   TileContainer,
+  Tooltip,
   UniformBadge,
   UniformLogo,
   WarningMessage,

package/dist/index.d.ts

@@ -12,6 +12,7 @@ import InternalSelect from 'react-select/dist/declarations/src/Select';
 import { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager';
 import { MenuHTMLProps, MenuProps as MenuProps$2, MenuStateReturn } from 'reakit/Menu';
 import { TabState, TabListProps, TabProps, TabPanelProps } from 'reakit/Tab';
+import { TooltipOptions, TooltipInitialState } from 'reakit/Tooltip';
 
 /** @todo: line 144 onwards will be brought into a title, paragraph, list and link components */
 type ThemeProps = {
@@ -1242,6 +1243,17 @@ type TileContainerProps = React$1.HtmlHTMLAttributes<HTMLDivElement> & {
  */
 declare const TileContainer: ({ children, ...props }: TileContainerProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
+type TooltipProps = TooltipOptions & {
+    /** Content of tooltip popover */
+    title: string | React__default.ReactElement;
+    /** Optional ability to specify alternative placement. By default - bottom center */
+    placement?: TooltipInitialState['placement'];
+    /** Optional ability to control visibility of Tooltip manually, useful for showing tooltip on click instead of on hover */
+    visible?: TooltipInitialState['visible'];
+    children: JSX.Element;
+};
+declare function Tooltip({ children, title, placement, visible, ...props }: TooltipProps): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
 /** Available heading weights e.g. 1 - 6 */
 type LevelProps = 1 | 2 | 3 | 4 | 5 | 6;
 type HeadingProps = {
@@ -1375,4 +1387,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, AnimationFile, AnimationFileProps, ArrowPositionProps, Badge, BadgeProps, BoxHeightProps, BreakpointSize, BreakpointsMap, Button, ButtonProps, ButtonSizeProps, ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, ButtonWithMenuProps, Callout, CalloutProps, CalloutType, Caption, CaptionProps, Card, CardContainer, CardContainerBgColorProps, CardContainerProps, CardProps, CheckboxWithInfo, CheckboxWithInforProps, ChildFunction, ComboBoxGroupBase, 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, LottieFile, LottieFileKeyProps, LottieFileProps, 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 };
+export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, AddListButtonThemeProps, AnimationFile, AnimationFileProps, ArrowPositionProps, Badge, BadgeProps, BoxHeightProps, BreakpointSize, BreakpointsMap, Button, ButtonProps, ButtonSizeProps, ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, ButtonWithMenuProps, Callout, CalloutProps, CalloutType, Caption, CaptionProps, Card, CardContainer, CardContainerBgColorProps, CardContainerProps, CardProps, CheckboxWithInfo, CheckboxWithInforProps, ChildFunction, ComboBoxGroupBase, 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, LottieFile, LottieFileKeyProps, LottieFileProps, 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, Tooltip, TooltipProps, 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 };

package/dist/index.js

@@ -103,6 +103,7 @@ __export(src_exports, {
   Textarea: () => Textarea,
   Theme: () => Theme,
   TileContainer: () => TileContainer,
+  Tooltip: () => Tooltip,
   UniformBadge: () => UniformBadge,
   UniformLogo: () => UniformLogo,
   WarningMessage: () => WarningMessage,
@@ -9938,7 +9939,6 @@ function InputComboBox(props) {
 
 // src/components/Input/InputInlineSelect.tsx
 var import_react44 = require("@emotion/react");
-var React13 = __toESM(require("react"));
 var import_react45 = require("react");
 var import_cg8 = require("react-icons/cg");
 
@@ -10021,17 +10021,7 @@ var InputInlineSelect = ({
   var _a;
   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)) {
-        setMenuVisible(false);
-      }
-    };
-    document.addEventListener("mousedown", outsideClick);
-    return () => {
-      document.removeEventListener("mousedown", outsideClick);
-    };
-  }, [divRef]);
+  useOutsideClick(divRef, () => setMenuVisible(false));
   const selected = options.find((option) => option.value === value);
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "div",
@@ -11281,7 +11271,7 @@ var Skeleton = ({
 );
 
 // src/components/Switch/Switch.tsx
-var React14 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 
 // src/components/Switch/Switch.styles.ts
 var import_react64 = require("@emotion/react");
@@ -11370,7 +11360,7 @@ var SwitchText = import_react64.css`
 
 // src/components/Switch/Switch.tsx
 var import_jsx_runtime64 = require("@emotion/react/jsx-runtime");
-var Switch = React14.forwardRef(
+var Switch = React13.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
@@ -11388,7 +11378,7 @@ var Switch = React14.forwardRef(
 );
 
 // src/components/Table/Table.tsx
-var React15 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 
 // src/components/Table/Table.styles.ts
 var import_react65 = require("@emotion/react");
@@ -11418,35 +11408,35 @@ var tableCellData = import_react65.css`
 
 // src/components/Table/Table.tsx
 var import_jsx_runtime65 = require("@emotion/react/jsx-runtime");
-var Table = React15.forwardRef(({ children, ...otherProps }, ref) => {
+var Table = React14.forwardRef(({ children, ...otherProps }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("table", { ref, css: table, ...otherProps, children });
 });
-var TableHead = React15.forwardRef(
+var TableHead = React14.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React15.forwardRef(
+var TableBody = React14.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React15.forwardRef(
+var TableFoot = React14.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React15.forwardRef(
+var TableRow = React14.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React15.forwardRef(
+var TableCellHead = React14.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React15.forwardRef(
+var TableCellData = React14.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("td", { ref, css: tableCellData, ...otherProps, children });
   }
@@ -11514,9 +11504,42 @@ var TabContent = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_Tab.TabPanel, { ...props, ...currentTab, children });
 };
 
-// src/components/Validation/StatusBullet.styles.ts
+// src/components/Tooltip/Tooltip.tsx
+var import_react69 = __toESM(require("react"));
+var import_Tooltip = require("reakit/Tooltip");
+
+// src/components/Tooltip/Tooltip.styles.ts
 var import_react68 = require("@emotion/react");
-var StatusBulletContainer = import_react68.css`
+var TooltipContainer = import_react68.css`
+  border: 2px solid var(--gray-300);
+  border-radius: var(--rounded-base);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  color: var(--gray-500);
+  font-size: var(--fs-xs);
+  background: var(--white);
+`;
+var TooltipArrowStyles = import_react68.css`
+  svg {
+    fill: var(--gray-300);
+  }
+`;
+
+// src/components/Tooltip/Tooltip.tsx
+var import_jsx_runtime67 = require("@emotion/react/jsx-runtime");
+function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
+  const tooltip = (0, import_Tooltip.useTooltipState)({ placement });
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_Tooltip.TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => import_react69.default.cloneElement(children, referenceProps) }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_Tooltip.Tooltip, { ...tooltip, ...props, css: TooltipContainer, visible: visible != null ? visible : tooltip.visible, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_Tooltip.TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
+      title
+    ] })
+  ] });
+}
+
+// src/components/Validation/StatusBullet.styles.ts
+var import_react70 = require("@emotion/react");
+var StatusBulletContainer = import_react70.css`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -11536,18 +11559,18 @@ var StatusBulletContainer = import_react68.css`
     height: var(--fs-xs);
   }
 `;
-var StatusDraft = import_react68.css`
+var StatusDraft = import_react70.css`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
   }
 `;
-var StatusModified = import_react68.css`
+var StatusModified = import_react70.css`
   &:before {
     background: var(--brand-primary-1);
   }
 `;
-var StatusError = import_react68.css`
+var StatusError = import_react70.css`
   color: var(--error);
   &:before {
     background: var(--error);
@@ -11563,19 +11586,19 @@ var StatusError = import_react68.css`
     rotate: -45deg;
   }
 `;
-var StatusPublished = import_react68.css`
+var StatusPublished = import_react70.css`
   &:before {
     background: var(--brand-secondary-3);
   }
 `;
-var StatusOrphan = import_react68.css`
+var StatusOrphan = import_react70.css`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
 
 // src/components/Validation/StatusBullet.tsx
-var import_jsx_runtime67 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime68 = require("@emotion/react/jsx-runtime");
 var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   const currentStateStyles = {
     Error: StatusError,
@@ -11585,7 +11608,7 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
     Published: StatusPublished,
     Draft: StatusDraft
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     "span",
     {
       css: [StatusBulletContainer, currentStateStyles[status]],
@@ -11674,6 +11697,7 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   Textarea,
   Theme,
   TileContainer,
+  Tooltip,
   UniformBadge,
   UniformLogo,
   WarningMessage,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "18.9.1-alpha.4+62fc5d7ec",
+  "version": "18.10.1-alpha.7+f2a138dc5",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -49,5 +49,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "62fc5d7ecb13c2a8e74fab5b19524479c9d550df"
+  "gitHead": "f2a138dc52971e9e89b453928f938a84283701bc"
 }