@common-origin/design-system 2.23.0 → 3.1.0

package/dist/components/atoms/DateFormatter/DateFormatter.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 /**
- * How DateFormatter shows a date. `'relative'` is deprecated: it has always behaved exactly like
- * `'smart'`, so use `'smart'`. It keeps working until it is removed in 3.0 (#82).
+ * How DateFormatter shows a date. `'relative'`, an alias of `'smart'`, was removed in 3.0 (#82).
  */
-export type DateFormatMode = 'absolute' | 'relative' | 'smart';
+export type DateFormatMode = 'absolute' | 'smart';
 export interface DateFormatterProps {
     /** ISO date string to format */
     dateString: string;
@@ -12,8 +11,6 @@ export interface DateFormatterProps {
     /**
      * `'absolute'` always uses `formatString`. `'smart'` shows "Today", "Yesterday" or the day name
      * for dates this week, and formats older dates with `formatString`.
-     * `'relative'` is deprecated: it behaves exactly like `'smart'`, so use `'smart'`. It keeps
-     * working until it is removed in 3.0 (#82).
      * @default 'absolute'
      */
     mode?: DateFormatMode;

package/dist/components/atoms/DateFormatter/DateFormatter.mjs

@@ -41,7 +41,6 @@ var DateFormatter = function DateFormatter(_a) {
   var date = parseISO(dateString);
   var displayText;
   switch (mode) {
-    case 'relative': // Deprecated alias for 'smart', removed in 3.0 (#82)
     case 'smart':
       // Today, Yesterday or the day name for recent dates; formatted for older ones
       displayText = formatDateSmart(date, formatString);

package/dist/components/atoms/StatusLabel/StatusLabel.mjs

@@ -19,11 +19,8 @@ import { StatusLabelBase } from './StatusLabelBase.mjs';
  * <StatusLabel status="pending" label="Awaiting approval" size="small" />
  * ```
  */
-// showIcon comes last so no caller (for example plain JavaScript) can hide the icon
 var StatusLabel = function StatusLabel(props) {
-  return jsx(StatusLabelBase, __assign({}, props, {
-    showIcon: true
-  }));
+  return jsx(StatusLabelBase, __assign({}, props));
 };
 StatusLabel.displayName = 'StatusLabel';
 

package/dist/components/atoms/StatusLabel/StatusLabel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StatusLabel.mjs","sources":["../../../../src/components/atoms/StatusLabel/StatusLabel.tsx"],"sourcesContent":["import React from 'react'\nimport { StatusLabelBase, type StatusLabelProps } from './StatusLabelBase'\n\nexport type { StatusLabelProps, StatusType, StatusSize } from './StatusLabelBase'\n\n/**\n * StatusLabel conveys the status of something, such as a transaction or task (decision 0018).\n *\n * Uses only the status colour tokens and always shows its text, so status is never conveyed by\n * colour alone (decision 0045). Medium shows the status icon. Small shows the status shape for\n * completed, failed and processing, and text only for the neutral pending, scheduled and\n * cancelled, so keep the label visible. Not interactive. Announces changes politely to screen\n * readers.\n *\n * @example\n * ```tsx\n * <StatusLabel status=\"completed\" />\n *\n * <StatusLabel status=\"pending\" label=\"Awaiting approval\" size=\"small\" />\n * ```\n */\n// showIcon comes last so no caller (for example plain JavaScript) can hide the icon\nexport const StatusLabel: React.FC<StatusLabelProps> = (props) => <StatusLabelBase {...props} showIcon />\n\nStatusLabel.displayName = 'StatusLabel'\n"],"names":["StatusLabel","props","_jsx","StatusLabelBase","showIcon","displayName"],"mappings":";;;;;AAKA;;;;;;;;;;;;;;;AAeG;AACH;IACaA,WAAW,GAA+B,SAA1CA,WAAWA,CAAgCC,KAAK,EAAK;EAAA,OAAAC,GAAC,CAAAC,eAAe,eAAKF,KAAK,EAAA;AAAEG,IAAAA,QAAQ,EAAG,IAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAAvC,EAAuC;AAEzGJ,WAAW,CAACK,WAAW,GAAG,aAAa;;;;"}
+{"version":3,"file":"StatusLabel.mjs","sources":["../../../../src/components/atoms/StatusLabel/StatusLabel.tsx"],"sourcesContent":["import React from 'react'\nimport { StatusLabelBase, type StatusLabelProps } from './StatusLabelBase'\n\nexport type { StatusLabelProps, StatusType, StatusSize } from './StatusLabelBase'\n\n/**\n * StatusLabel conveys the status of something, such as a transaction or task (decision 0018).\n *\n * Uses only the status colour tokens and always shows its text, so status is never conveyed by\n * colour alone (decision 0045). Medium shows the status icon. Small shows the status shape for\n * completed, failed and processing, and text only for the neutral pending, scheduled and\n * cancelled, so keep the label visible. Not interactive. Announces changes politely to screen\n * readers.\n *\n * @example\n * ```tsx\n * <StatusLabel status=\"completed\" />\n *\n * <StatusLabel status=\"pending\" label=\"Awaiting approval\" size=\"small\" />\n * ```\n */\nexport const StatusLabel: React.FC<StatusLabelProps> = (props) => <StatusLabelBase {...props} />\n\nStatusLabel.displayName = 'StatusLabel'\n"],"names":["StatusLabel","props","_jsx","StatusLabelBase","__assign","displayName"],"mappings":";;;;;AAKA;;;;;;;;;;;;;;;AAeG;IACUA,WAAW,GAA+B,SAA1CA,WAAWA,CAAgCC,KAAK,EAAA;EAAK,OAAAC,GAAA,CAACC,eAAe,EAAKC,QAAA,CAAA,EAAA,EAAAH,KAAK,CAAI,CAAA,CAAA;AAA9B,EAA8B;AAEhGD,WAAW,CAACK,WAAW,GAAG,aAAa;;;;"}

package/dist/components/atoms/StatusLabel/StatusLabelBase.d.mts

@@ -8,7 +8,7 @@ export type StatusType = 'pending' | 'completed' | 'failed' | 'cancelled' | 'pro
  */
 export type StatusSize = 'small' | 'medium';
 /**
- * Props shared by StatusLabel and the deprecated StatusBadge
+ * Props for StatusLabel
  */
 export interface StatusLabelProps {
     /**
@@ -40,10 +40,8 @@ export interface StatusLabelProps {
     'aria-label'?: string;
 }
 /**
- * Shared implementation of StatusLabel and the deprecated StatusBadge. Internal: not exported
- * from the package. `showIcon` exists only for StatusBadge. StatusLabel always shows the status icon
- * at the medium size, and at the small size the shape for coloured statuses (decisions 0018, 0045).
+ * StatusLabel's implementation. Internal: not exported from the package. It always shows the status
+ * icon at the medium size, and at the small size the shape for coloured statuses (decisions 0018,
+ * 0045).
  */
-export declare const StatusLabelBase: React.FC<StatusLabelProps & {
-    showIcon?: boolean;
-}>;
+export declare const StatusLabelBase: React.FC<StatusLabelProps>;

package/dist/components/atoms/StatusLabel/StatusLabelBase.d.ts

@@ -8,7 +8,7 @@ export type StatusType = 'pending' | 'completed' | 'failed' | 'cancelled' | 'pro
  */
 export type StatusSize = 'small' | 'medium';
 /**
- * Props shared by StatusLabel and the deprecated StatusBadge
+ * Props for StatusLabel
  */
 export interface StatusLabelProps {
     /**
@@ -40,10 +40,8 @@ export interface StatusLabelProps {
     'aria-label'?: string;
 }
 /**
- * Shared implementation of StatusLabel and the deprecated StatusBadge. Internal: not exported
- * from the package. `showIcon` exists only for StatusBadge. StatusLabel always shows the status icon
- * at the medium size, and at the small size the shape for coloured statuses (decisions 0018, 0045).
+ * StatusLabel's implementation. Internal: not exported from the package. It always shows the status
+ * icon at the medium size, and at the small size the shape for coloured statuses (decisions 0018,
+ * 0045).
  */
-export declare const StatusLabelBase: React.FC<StatusLabelProps & {
-    showIcon?: boolean;
-}>;
+export declare const StatusLabelBase: React.FC<StatusLabelProps>;

package/dist/components/atoms/StatusLabel/StatusLabelBase.mjs

@@ -112,24 +112,22 @@ var VisibleContent = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-1ye9xz5-2"
 })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"
 /**
- * Shared implementation of StatusLabel and the deprecated StatusBadge. Internal: not exported
- * from the package. `showIcon` exists only for StatusBadge. StatusLabel always shows the status icon
- * at the medium size, and at the small size the shape for coloured statuses (decisions 0018, 0045).
+ * StatusLabel's implementation. Internal: not exported from the package. It always shows the status
+ * icon at the medium size, and at the small size the shape for coloured statuses (decisions 0018,
+ * 0045).
  */])));
 /**
- * Shared implementation of StatusLabel and the deprecated StatusBadge. Internal: not exported
- * from the package. `showIcon` exists only for StatusBadge. StatusLabel always shows the status icon
- * at the medium size, and at the small size the shape for coloured statuses (decisions 0018, 0045).
+ * StatusLabel's implementation. Internal: not exported from the package. It always shows the status
+ * icon at the medium size, and at the small size the shape for coloured statuses (decisions 0018,
+ * 0045).
  */
 var StatusLabelBase = function StatusLabelBase(_a) {
   var status = _a.status,
     label = _a.label,
     _b = _a.size,
     size = _b === void 0 ? 'medium' : _b,
-    _c = _a.showIcon,
-    showIcon = _c === void 0 ? true : _c,
-    _d = _a.liveRegion,
-    liveRegion = _d === void 0 ? true : _d,
+    _c = _a.liveRegion,
+    liveRegion = _c === void 0 ? true : _c,
     dataTestId = _a["data-testid"],
     ariaLabel = _a["aria-label"];
   var statusConfig = getStatusConfig(status);
@@ -147,11 +145,11 @@ var StatusLabelBase = function StatusLabelBase(_a) {
     "data-testid": dataTestId,
     children: [jsxs(VisibleContent, {
       "aria-hidden": accessibleLabel ? 'true' : undefined,
-      children: [showIcon && size === 'medium' && jsx(Icon, {
+      children: [size === 'medium' && jsx(Icon, {
         name: statusConfig.icon,
         size: sizeStyles.iconSize,
         iconColor: "inherit"
-      }), showIcon && size === 'small' && statusConfig.shape && jsx(StatusShape, {
+      }), size === 'small' && statusConfig.shape && jsx(StatusShape, {
         shape: statusConfig.shape
       }), displayLabel, jsxs(ScreenReaderOnly, {
         children: [status, " status"]

package/dist/components/atoms/Tag/Tag.d.mts

@@ -6,12 +6,10 @@ export interface TagProps {
     children: React.ReactNode;
     /**
      * Visual variant. Tag is neutral metadata: use `default`, or `emphasis` (near-black) to make a
-     * tag stand out. `success`, `warning` and `error` are deprecated (status belongs to
-     * `StatusLabel`), and so is `interactive` (a blue fill on a static label is decoration).
-     * They keep working until they are removed in 3.0 (decision 0029).
+     * tag stand out. For a status, use `StatusLabel` (decision 0029).
      * @default 'default'
      */
-    variant?: 'default' | 'interactive' | 'success' | 'warning' | 'error' | 'emphasis';
+    variant?: 'default' | 'emphasis';
     /**
      * Whether to show a border
      * @default true

package/dist/components/atoms/Tag/Tag.d.ts

@@ -6,12 +6,10 @@ export interface TagProps {
     children: React.ReactNode;
     /**
      * Visual variant. Tag is neutral metadata: use `default`, or `emphasis` (near-black) to make a
-     * tag stand out. `success`, `warning` and `error` are deprecated (status belongs to
-     * `StatusLabel`), and so is `interactive` (a blue fill on a static label is decoration).
-     * They keep working until they are removed in 3.0 (decision 0029).
+     * tag stand out. For a status, use `StatusLabel` (decision 0029).
      * @default 'default'
      */
-    variant?: 'default' | 'interactive' | 'success' | 'warning' | 'error' | 'emphasis';
+    variant?: 'default' | 'emphasis';
     /**
      * Whether to show a border
      * @default true

package/dist/components/atoms/Tag/Tag.mjs

@@ -32,14 +32,6 @@ var StyledTag = /*#__PURE__*/styled.span.withConfig({
 }, label.typography.small, label.fontWeight, function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
-    case 'interactive':
-      return color.fill['accent-muted'];
-    case 'success':
-      return color.fill['success-muted'];
-    case 'warning':
-      return color.fill['warning-muted'];
-    case 'error':
-      return color.fill['danger-muted'];
     case 'emphasis':
       return color.fill.emphasis;
     default:
@@ -48,14 +40,6 @@ var StyledTag = /*#__PURE__*/styled.span.withConfig({
 }, function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
-    case 'interactive':
-      return color.text.accent;
-    case 'success':
-      return color.text.success;
-    case 'warning':
-      return color.text.warning;
-    case 'error':
-      return color.text.danger;
     case 'emphasis':
       return color.text.inverse;
     default:
@@ -66,14 +50,6 @@ var StyledTag = /*#__PURE__*/styled.span.withConfig({
     $border = _a.$border;
   if (!$border) return 'none';
   switch ($variant) {
-    case 'interactive':
-      return "".concat(semantic.border.width.thin, " solid ").concat(color.border.accent);
-    case 'success':
-      return "".concat(semantic.border.width.thin, " solid ").concat(color.border.success);
-    case 'warning':
-      return "".concat(semantic.border.width.thin, " solid ").concat(color.border.warning);
-    case 'error':
-      return "".concat(semantic.border.width.thin, " solid ").concat(color.border.danger);
     case 'emphasis':
       return "".concat(semantic.border.width.thin, " solid ").concat(color.fill.emphasis);
     default:

package/dist/components/atoms/Tooltip/Tooltip.d.mts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { type FloatingAlign, type FloatingSide } from '../../../lib/floatingPosition.mjs';
+export type TooltipSide = FloatingSide;
+export type TooltipAlign = FloatingAlign;
+export interface TooltipProps {
+    /** The tooltip's text. In `label` mode it repeats the trigger's existing accessible name. */
+    text: string;
+    /**
+     * `label` (default) shows the name the trigger already has, such as an IconButton's
+     * `aria-label`, and is hidden from assistive technology so the name isn't announced twice.
+     * `description` adds non-essential help, linked to the trigger with `aria-describedby`. Hover
+     * text can't be reached on touch screens, so anything a user needs must be visible text.
+     * @default 'label'
+     */
+    kind?: 'label' | 'description';
+    /**
+     * The side of the trigger it opens on. It flips to the opposite side when there's no room.
+     * @default 'top'
+     */
+    side?: TooltipSide;
+    /**
+     * Where it lines up along the trigger's edge.
+     * @default 'center'
+     */
+    align?: TooltipAlign;
+    /** One focusable element: the trigger */
+    children: React.ReactElement;
+    /** Test identifier for the tooltip bubble */
+    'data-testid'?: string;
+}
+/**
+ * A short label or hint that appears beside a control on hover or keyboard focus (#326).
+ *
+ * Opens after `motion.delay.hint` of hover, at once on keyboard focus, and at once when the pointer
+ * moves on from another tooltip. Stays open while the pointer is over it; closes on pointer leave,
+ * blur, scroll and Escape. Doesn't open on touch.
+ */
+export declare const Tooltip: {
+    ({ text, kind, side, align, children, "data-testid": dataTestId, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/atoms/Tooltip/Tooltip.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { type FloatingAlign, type FloatingSide } from '../../../lib/floatingPosition';
+export type TooltipSide = FloatingSide;
+export type TooltipAlign = FloatingAlign;
+export interface TooltipProps {
+    /** The tooltip's text. In `label` mode it repeats the trigger's existing accessible name. */
+    text: string;
+    /**
+     * `label` (default) shows the name the trigger already has, such as an IconButton's
+     * `aria-label`, and is hidden from assistive technology so the name isn't announced twice.
+     * `description` adds non-essential help, linked to the trigger with `aria-describedby`. Hover
+     * text can't be reached on touch screens, so anything a user needs must be visible text.
+     * @default 'label'
+     */
+    kind?: 'label' | 'description';
+    /**
+     * The side of the trigger it opens on. It flips to the opposite side when there's no room.
+     * @default 'top'
+     */
+    side?: TooltipSide;
+    /**
+     * Where it lines up along the trigger's edge.
+     * @default 'center'
+     */
+    align?: TooltipAlign;
+    /** One focusable element: the trigger */
+    children: React.ReactElement;
+    /** Test identifier for the tooltip bubble */
+    'data-testid'?: string;
+}
+/**
+ * A short label or hint that appears beside a control on hover or keyboard focus (#326).
+ *
+ * Opens after `motion.delay.hint` of hover, at once on keyboard focus, and at once when the pointer
+ * moves on from another tooltip. Stays open while the pointer is over it; closes on pointer leave,
+ * blur, scroll and Escape. Doesn't open on touch.
+ */
+export declare const Tooltip: {
+    ({ text, kind, side, align, children, "data-testid": dataTestId, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/atoms/Tooltip/Tooltip.mjs

@@ -0,0 +1,204 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useId, useRef, useState, useCallback, useEffect } from 'react';
+import styled$module, { keyframes, css } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import tokensJson from '../../../styles/tokens.json.mjs';
+import { exitAnimation, forcedColorsEdge, visuallyHidden } from '../../../lib/styleUtils.mjs';
+import { usePresence } from '../../../lib/usePresence.mjs';
+import { useFloatingLayer } from '../../../lib/useFloatingLayer.mjs';
+import { isKeyboardFocus } from '../../../lib/keyboardFocus.mjs';
+
+var semantic = tokens.semantic;
+var motion = tokensJson.semantic.motion;
+// How long the pointer rests before the tooltip opens (#326)
+var HINT_DELAY_MS = parseInt(motion.delay.hint, 10);
+// Moving to another trigger within this window opens its tooltip at once, so a rail feels immediate
+var SKIP_DELAY_MS = parseInt(motion.duration.slow, 10);
+// The grace period for the pointer to cross from the trigger onto the tooltip (WCAG 1.4.13)
+var CLOSE_GRACE_MS = parseInt(motion.duration.fast, 10);
+// Shared by every Tooltip: only one is open at a time, and the next one opens at once while one
+// is open or within the skip-delay window after it closed
+var lastClosedAt = 0;
+var active = null;
+var fadeIn = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from { opacity: 0; }\n"], ["\n  from { opacity: 0; }\n"
+// A fade, so it needs no reduced-motion fallback (0015). Entrances decelerate (0037).
+])));
+// A fade, so it needs no reduced-motion fallback (0015). Entrances decelerate (0037).
+var Bubble = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Tooltip__Bubble",
+  componentId: "sc-ajez94-0"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /* Reset the popover defaults: it's placed with top and left */\n  position: fixed;\n  inset: auto;\n  top: 0;\n  left: 0;\n  margin: 0;\n  overflow: visible;\n  box-sizing: border-box;\n  max-width: ", ";\n  padding: ", " ", ";\n  border: none;\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  font: ", ";\n  overflow-wrap: break-word;\n  pointer-events: auto;\n  animation: ", " ", " ", "\n    ", ";\n\n  ", "\n"], ["\n  /* Reset the popover defaults: it's placed with top and left */\n  position: fixed;\n  inset: auto;\n  top: 0;\n  left: 0;\n  margin: 0;\n  overflow: visible;\n  box-sizing: border-box;\n  max-width: ", ";\n  padding: ", " ", ";\n  border: none;\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  font: ", ";\n  overflow-wrap: break-word;\n  pointer-events: auto;\n  animation: ", " ", " ", "\n    ", ";\n\n  ", "\n"])), semantic.size[7500], semantic.space.inset.xs, semantic.space.inset.sm, semantic.radius.sm, semantic.color.fill.inverse, semantic.color.text.inverse, semantic.typography.small, fadeIn, semantic.motion.duration.fast, semantic.motion.easing.decelerate, function (_a) {
+  var $exiting = _a.$exiting;
+  return $exiting ? exitAnimation : css(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+}, forcedColorsEdge);
+var Description = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Tooltip__Description",
+  componentId: "sc-ajez94-1"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
+// The trigger's wrapper takes no box of its own, so the trigger lays out as if unwrapped
+])), visuallyHidden);
+// The trigger's wrapper takes no box of its own, so the trigger lays out as if unwrapped
+var Anchor = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Tooltip__Anchor",
+  componentId: "sc-ajez94-2"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"
+/**
+ * A short label or hint that appears beside a control on hover or keyboard focus (#326).
+ *
+ * Opens after `motion.delay.hint` of hover, at once on keyboard focus, and at once when the pointer
+ * moves on from another tooltip. Stays open while the pointer is over it; closes on pointer leave,
+ * blur, scroll and Escape. Doesn't open on touch.
+ */])));
+/**
+ * A short label or hint that appears beside a control on hover or keyboard focus (#326).
+ *
+ * Opens after `motion.delay.hint` of hover, at once on keyboard focus, and at once when the pointer
+ * moves on from another tooltip. Stays open while the pointer is over it; closes on pointer leave,
+ * blur, scroll and Escape. Doesn't open on touch.
+ */
+var Tooltip = function Tooltip(_a) {
+  var text = _a.text,
+    _b = _a.kind,
+    kind = _b === void 0 ? 'label' : _b,
+    _c = _a.side,
+    side = _c === void 0 ? 'top' : _c,
+    _d = _a.align,
+    align = _d === void 0 ? 'center' : _d,
+    children = _a.children,
+    dataTestId = _a["data-testid"];
+  var descriptionId = useId();
+  var anchorRef = useRef(null);
+  var bubbleRef = useRef(null);
+  var openTimer = useRef(undefined);
+  var closeTimer = useRef(undefined);
+  var owner = useState(function () {
+    return {};
+  })[0];
+  // Set by a press, so the focus that follows a click or tap doesn't reopen the tooltip
+  var pressed = useRef(false);
+  var _e = useState(false),
+    isOpen = _e[0],
+    setIsOpen = _e[1];
+  var _f = usePresence(isOpen),
+    isPresent = _f.isPresent,
+    isExiting = _f.isExiting;
+  var clearTimers = function clearTimers() {
+    clearTimeout(openTimer.current);
+    clearTimeout(closeTimer.current);
+  };
+  var close = useCallback(function () {
+    clearTimers();
+    if ((active === null || active === void 0 ? void 0 : active.owner) === owner) {
+      active = null;
+      lastClosedAt = Date.now();
+    }
+    setIsOpen(false);
+  }, [owner]);
+  var open = useCallback(function () {
+    clearTimers();
+    if (active && active.owner !== owner) active.close();
+    active = {
+      owner: owner,
+      close: close
+    };
+    setIsOpen(true);
+  }, [owner, close]);
+  var scheduleOpen = function scheduleOpen() {
+    clearTimeout(closeTimer.current);
+    if (isOpen) return;
+    // Moving straight from one trigger to the next (another tooltip still open) or just after one
+    // closed skips the delay, so a rail feels immediate
+    if (active || Date.now() - lastClosedAt < SKIP_DELAY_MS) return open();
+    clearTimeout(openTimer.current);
+    openTimer.current = setTimeout(open, HINT_DELAY_MS);
+  };
+  var scheduleClose = function scheduleClose() {
+    clearTimeout(openTimer.current);
+    clearTimeout(closeTimer.current);
+    closeTimer.current = setTimeout(close, CLOSE_GRACE_MS);
+  };
+  useEffect(function () {
+    return function () {
+      clearTimers();
+      if ((active === null || active === void 0 ? void 0 : active.owner) === owner) active = null;
+    };
+  }, [owner]);
+  // While open: Escape closes it without moving focus, and before anything else hears the key
+  // (an Escape meant for the tooltip mustn't also close a Modal)
+  useEffect(function () {
+    if (!isOpen) return;
+    var onKeyDown = function onKeyDown(event) {
+      if (event.key !== 'Escape') return;
+      event.stopPropagation();
+      close();
+    };
+    window.addEventListener('keydown', onKeyDown, true);
+    return function () {
+      return window.removeEventListener('keydown', onKeyDown, true);
+    };
+  }, [isOpen, close]);
+  // In the top layer beside the trigger; scrolling or resizing closes it, since the trigger moves
+  useFloatingLayer({
+    isPresent: isPresent,
+    floatingRef: bubbleRef,
+    anchorRef: anchorRef,
+    side: side,
+    align: align,
+    onDetach: close
+  });
+  var child = React.Children.only(children);
+  var describedBy = [child.props['aria-describedby'], kind === 'description' ? descriptionId : undefined].filter(Boolean).join(' ') || undefined;
+  return jsxs(Anchor, {
+    ref: anchorRef,
+    onPointerEnter: function onPointerEnter(event) {
+      return event.pointerType !== 'touch' && scheduleOpen();
+    },
+    onPointerLeave: function onPointerLeave(event) {
+      return event.pointerType !== 'touch' && scheduleClose();
+    },
+    onFocus: function onFocus(event) {
+      // Keyboard focus opens it at once; a click's or tap's focus doesn't
+      if (pressed.current) {
+        pressed.current = false;
+        return;
+      }
+      if (isKeyboardFocus(event.target)) open();
+    },
+    onBlur: function onBlur() {
+      // A press on an already focused trigger has no focus to skip; don't carry it over
+      pressed.current = false;
+      close();
+    },
+    // Pressing the trigger acts on it, so the hint has done its job
+    onPointerDown: function onPointerDown() {
+      pressed.current = true;
+      close();
+    },
+    children: [/*#__PURE__*/React.cloneElement(child, {
+      'aria-describedby': describedBy
+    }), kind === 'description' && jsx(Description, {
+      id: descriptionId,
+      children: text
+    }), isPresent &&
+    // Hidden from assistive technology: a label repeats the trigger's name, and a
+    // description reaches it through aria-describedby on the always-present text above
+    jsx(Bubble, {
+      ref: bubbleRef,
+      "aria-hidden": "true",
+      "$exiting": isExiting,
+      "data-testid": dataTestId,
+      children: text
+    })]
+  });
+};
+Tooltip.displayName = 'Tooltip';
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+
+export { Tooltip };
+//# sourceMappingURL=Tooltip.mjs.map

package/dist/components/atoms/Tooltip/Tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/atoms/Tooltip/index.d.mts

@@ -0,0 +1,2 @@
+export { Tooltip } from './Tooltip.mjs';
+export type { TooltipProps, TooltipSide, TooltipAlign } from './Tooltip.mjs';

package/dist/components/atoms/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { Tooltip } from './Tooltip';
+export type { TooltipProps, TooltipSide, TooltipAlign } from './Tooltip';

package/dist/components/atoms/index.d.mts

@@ -2,7 +2,6 @@ export * from './Avatar/index.mjs';
 export * from './Badge/index.mjs';
 export * from './Box/index.mjs';
 export * from './Button/index.mjs';
-export * from './CategoryBadge/index.mjs';
 export * from './CategoryLabel/index.mjs';
 export * from './Chip/index.mjs';
 export * from './Container/index.mjs';
@@ -14,8 +13,8 @@ export * from './MoneyDisplay/index.mjs';
 export * from './ProgressBar/index.mjs';
 export * from './Divider/index.mjs';
 export * from './Stack/index.mjs';
-export * from './StatusBadge/index.mjs';
 export * from './StatusLabel/index.mjs';
 export * from './Tag/index.mjs';
+export * from './Tooltip/index.mjs';
 export * from './Typography/index.mjs';
 export * from './AILabel/index.mjs';

package/dist/components/atoms/index.d.ts

@@ -2,7 +2,6 @@ export * from './Avatar';
 export * from './Badge';
 export * from './Box';
 export * from './Button';
-export * from './CategoryBadge';
 export * from './CategoryLabel';
 export * from './Chip';
 export * from './Container';
@@ -14,8 +13,8 @@ export * from './MoneyDisplay';
 export * from './ProgressBar';
 export * from './Divider';
 export * from './Stack';
-export * from './StatusBadge';
 export * from './StatusLabel';
 export * from './Tag';
+export * from './Tooltip';
 export * from './Typography';
 export * from './AILabel';

package/dist/components/index.d.mts

@@ -1,4 +1,5 @@
 export * from './atoms//index.mjs';
 export * from './molecules//index.mjs';
+export * from './organisms//index.mjs';
 export * from './layout//index.mjs';
 export { ResponsiveGrid, GridCol, Grid } from './layout/GridSystem/index.mjs';

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './atoms/';
 export * from './molecules/';
+export * from './organisms/';
 export * from './layout/';
 export { ResponsiveGrid, GridCol, Grid } from './layout/GridSystem';

package/dist/components/layout/GridSystem/GridSystem.d.mts

@@ -1,10 +1,15 @@
 import React from 'react';
 import type { Tokens } from '../../../types/tokens.mjs';
+/**
+ * A grid gap: a `base.dimension` step (the 4px scale, so `4` is 16px), or `auto`. Before 3.0 the
+ * gap props took `base.spacing` keys, which had the same values (#188).
+ */
+type GridGap = keyof Tokens['base']['dimension'] | 'auto';
 interface GridProps {
     cols?: number;
-    gap?: keyof Tokens['base']['spacing'];
-    gapX?: keyof Tokens['base']['spacing'];
-    gapY?: keyof Tokens['base']['spacing'];
+    gap?: GridGap;
+    gapX?: GridGap;
+    gapY?: GridGap;
     className?: string;
     /** Test identifier for automated testing */
     'data-testid'?: string;
@@ -34,21 +39,21 @@ interface ResponsiveGridProps {
     colsMd?: number;
     colsLg?: number;
     colsXl?: number;
-    gap?: keyof Tokens['base']['spacing'];
-    gapSm?: keyof Tokens['base']['spacing'];
-    gapMd?: keyof Tokens['base']['spacing'];
-    gapLg?: keyof Tokens['base']['spacing'];
-    gapXl?: keyof Tokens['base']['spacing'];
-    gapX?: keyof Tokens['base']['spacing'];
-    gapXSm?: keyof Tokens['base']['spacing'];
-    gapXMd?: keyof Tokens['base']['spacing'];
-    gapXLg?: keyof Tokens['base']['spacing'];
-    gapXXl?: keyof Tokens['base']['spacing'];
-    gapY?: keyof Tokens['base']['spacing'];
-    gapYSm?: keyof Tokens['base']['spacing'];
-    gapYMd?: keyof Tokens['base']['spacing'];
-    gapYLg?: keyof Tokens['base']['spacing'];
-    gapYXl?: keyof Tokens['base']['spacing'];
+    gap?: GridGap;
+    gapSm?: GridGap;
+    gapMd?: GridGap;
+    gapLg?: GridGap;
+    gapXl?: GridGap;
+    gapX?: GridGap;
+    gapXSm?: GridGap;
+    gapXMd?: GridGap;
+    gapXLg?: GridGap;
+    gapXXl?: GridGap;
+    gapY?: GridGap;
+    gapYSm?: GridGap;
+    gapYMd?: GridGap;
+    gapYLg?: GridGap;
+    gapYXl?: GridGap;
     className?: string;
     /** Test identifier for automated testing */
     'data-testid'?: string;