@guardian/stand 0.0.61 → 0.0.62

package/dist/Tooltip.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_tooltip = require("./styleD/build/typescript/component/tooltip.cjs");
+const require_Tooltip = require("./components/Tooltip/Tooltip.cjs");
+exports.Tooltip = require_Tooltip.Tooltip;
+exports.componentTooltip = require_tooltip.componentTooltip;

package/dist/Tooltip.d.cts

@@ -0,0 +1,5 @@
+import { ComponentTooltip, componentTooltip } from "./styleD/build/typescript/component/tooltip.cjs";
+import { PartialTooltipTheme } from "./components/Tooltip/styles.cjs";
+import { TooltipProps } from "./components/Tooltip/types.cjs";
+import { Tooltip } from "./components/Tooltip/Tooltip.cjs";
+export { type ComponentTooltip, Tooltip, type TooltipProps, type PartialTooltipTheme as TooltipTheme, componentTooltip };

package/dist/Tooltip.d.ts

@@ -0,0 +1,5 @@
+import { ComponentTooltip, componentTooltip } from "./styleD/build/typescript/component/tooltip.js";
+import { PartialTooltipTheme } from "./components/Tooltip/styles.js";
+import { TooltipProps } from "./components/Tooltip/types.js";
+import { Tooltip } from "./components/Tooltip/Tooltip.js";
+export { type ComponentTooltip, Tooltip, type TooltipProps, type PartialTooltipTheme as TooltipTheme, componentTooltip };

package/dist/Tooltip.js

@@ -0,0 +1,3 @@
+import { componentTooltip } from "./styleD/build/typescript/component/tooltip.js";
+import { Tooltip } from "./components/Tooltip/Tooltip.js";
+export { Tooltip, componentTooltip };

package/dist/components/Tooltip/Tooltip.cjs

@@ -0,0 +1,42 @@
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_Icon = require("../Icon/Icon.cjs");
+const require_Typography = require("../Typography/Typography.cjs");
+const require_styles = require("./styles.cjs");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
+//#region src/components/Tooltip/Tooltip.tsx
+const Tooltip = ({ children, placement = "end", theme = {}, cssOverrides, className, ...props }) => {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultTooltipTheme, theme);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react_aria_components.TooltipTrigger, {
+		delay: 0,
+		closeDelay: 0,
+		...props,
+		children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Button, {
+			"aria-label": "Information",
+			css: require_styles.tooltipTriggerStyles(mergedTheme),
+			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+				size: "xs",
+				symbol: "question_mark"
+			})
+		}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react_aria_components.Tooltip, {
+			css: [require_styles.tooltipStyles(mergedTheme), cssOverrides],
+			placement,
+			className,
+			children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(TooltipArrow, { theme: mergedTheme }), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Typography.Typography, {
+				variant: "metaMd",
+				theme: { color: mergedTheme.shared.color },
+				children
+			})]
+		})]
+	});
+};
+const TooltipArrow = ({ theme }) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.OverlayArrow, { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "9",
+	height: "14",
+	viewBox: "0 0 9 14",
+	css: require_styles.tooltipArrowStyles(theme),
+	children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("path", { d: "M0 6.928 9 0v13.856z" })
+}) });
+//#endregion
+exports.Tooltip = Tooltip;

package/dist/components/Tooltip/Tooltip.d.cts

@@ -0,0 +1,5 @@
+import { TooltipProps } from "./types.cjs";
+//#region src/components/Tooltip/Tooltip.d.ts
+declare const Tooltip: ({ children, placement, theme, cssOverrides, className, ...props }: TooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { Tooltip };

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

@@ -0,0 +1,5 @@
+import { TooltipProps } from "./types.js";
+//#region src/components/Tooltip/Tooltip.d.ts
+declare const Tooltip: ({ children, placement, theme, cssOverrides, className, ...props }: TooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { Tooltip };

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,42 @@
+import { mergeDeep } from "../../util/mergeDeep.js";
+import { Icon } from "../Icon/Icon.js";
+import { Typography } from "../Typography/Typography.js";
+import { defaultTooltipTheme, tooltipArrowStyles, tooltipStyles, tooltipTriggerStyles } from "./styles.js";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { Button, OverlayArrow, Tooltip, TooltipTrigger } from "react-aria-components";
+//#region src/components/Tooltip/Tooltip.tsx
+const Tooltip$1 = ({ children, placement = "end", theme = {}, cssOverrides, className, ...props }) => {
+	const mergedTheme = mergeDeep(defaultTooltipTheme, theme);
+	return /* @__PURE__ */ jsxs(TooltipTrigger, {
+		delay: 0,
+		closeDelay: 0,
+		...props,
+		children: [/* @__PURE__ */ jsx(Button, {
+			"aria-label": "Information",
+			css: tooltipTriggerStyles(mergedTheme),
+			children: /* @__PURE__ */ jsx(Icon, {
+				size: "xs",
+				symbol: "question_mark"
+			})
+		}), /* @__PURE__ */ jsxs(Tooltip, {
+			css: [tooltipStyles(mergedTheme), cssOverrides],
+			placement,
+			className,
+			children: [/* @__PURE__ */ jsx(TooltipArrow, { theme: mergedTheme }), /* @__PURE__ */ jsx(Typography, {
+				variant: "metaMd",
+				theme: { color: mergedTheme.shared.color },
+				children
+			})]
+		})]
+	});
+};
+const TooltipArrow = ({ theme }) => /* @__PURE__ */ jsx(OverlayArrow, { children: /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "9",
+	height: "14",
+	viewBox: "0 0 9 14",
+	css: tooltipArrowStyles(theme),
+	children: /* @__PURE__ */ jsx("path", { d: "M0 6.928 9 0v13.856z" })
+}) });
+//#endregion
+export { Tooltip$1 as Tooltip };

package/dist/components/Tooltip/styles.cjs

@@ -0,0 +1,58 @@
+const require_tooltip = require("../../styleD/build/typescript/component/tooltip.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/Tooltip/styles.ts
+const defaultTooltipTheme = require_tooltip.componentTooltip;
+const tooltipTriggerStyles = (theme) => _emotion_react.css`
+	display: inline-flex;
+	appearance: none;
+	border: none;
+	padding: 0;
+	width: ${theme.trigger.size};
+	height: ${theme.trigger.size};
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	color: ${theme.shared.color};
+	background-color: ${theme.shared.backgroundColor};
+`;
+const tooltipStyles = (theme) => _emotion_react.css`
+	padding: ${theme.tooltip.padding};
+	max-width: ${theme.tooltip.maxWidth};
+	background-color: ${theme.shared.backgroundColor};
+	border-radius: ${theme.tooltip.borderRadius};
+	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
+
+	&[data-placement='top'] {
+		margin-bottom: ${theme.tooltip.offset};
+		svg {
+			transform: rotate(-90deg) translateX(3px);
+		}
+	}
+
+	&[data-placement='bottom'] {
+		margin-top: ${theme.tooltip.offset};
+		svg {
+			transform: rotate(90deg) translateX(3px);
+		}
+	}
+
+	&[data-placement='right'] {
+		margin-left: ${theme.tooltip.offset};
+	}
+
+	&[data-placement='left'] {
+		margin-right: ${theme.tooltip.offset};
+		svg {
+			transform: rotate(180deg);
+		}
+	}
+`;
+const tooltipArrowStyles = (theme) => _emotion_react.css`
+	display: block;
+	fill: ${theme.shared.backgroundColor};
+`;
+//#endregion
+exports.defaultTooltipTheme = defaultTooltipTheme;
+exports.tooltipArrowStyles = tooltipArrowStyles;
+exports.tooltipStyles = tooltipStyles;
+exports.tooltipTriggerStyles = tooltipTriggerStyles;

package/dist/components/Tooltip/styles.d.cts

@@ -0,0 +1,8 @@
+import { DeepPartial, Prettify } from "../../util/types.cjs";
+import { ComponentTooltip } from "../../styleD/build/typescript/component/tooltip.cjs";
+import { SerializedStyles } from "@emotion/react";
+//#region src/components/Tooltip/styles.d.ts
+type TooltipTheme = Prettify<ComponentTooltip>;
+type PartialTooltipTheme = Prettify<DeepPartial<TooltipTheme>>;
+//#endregion
+export { PartialTooltipTheme, TooltipTheme };

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

@@ -0,0 +1,8 @@
+import { DeepPartial, Prettify } from "../../util/types.js";
+import { ComponentTooltip } from "../../styleD/build/typescript/component/tooltip.js";
+import { SerializedStyles } from "@emotion/react";
+//#region src/components/Tooltip/styles.d.ts
+type TooltipTheme = Prettify<ComponentTooltip>;
+type PartialTooltipTheme = Prettify<DeepPartial<TooltipTheme>>;
+//#endregion
+export { PartialTooltipTheme, TooltipTheme };

package/dist/components/Tooltip/styles.js

@@ -0,0 +1,55 @@
+import { componentTooltip } from "../../styleD/build/typescript/component/tooltip.js";
+import { css } from "@emotion/react";
+//#region src/components/Tooltip/styles.ts
+const defaultTooltipTheme = componentTooltip;
+const tooltipTriggerStyles = (theme) => css`
+	display: inline-flex;
+	appearance: none;
+	border: none;
+	padding: 0;
+	width: ${theme.trigger.size};
+	height: ${theme.trigger.size};
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	color: ${theme.shared.color};
+	background-color: ${theme.shared.backgroundColor};
+`;
+const tooltipStyles = (theme) => css`
+	padding: ${theme.tooltip.padding};
+	max-width: ${theme.tooltip.maxWidth};
+	background-color: ${theme.shared.backgroundColor};
+	border-radius: ${theme.tooltip.borderRadius};
+	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
+
+	&[data-placement='top'] {
+		margin-bottom: ${theme.tooltip.offset};
+		svg {
+			transform: rotate(-90deg) translateX(3px);
+		}
+	}
+
+	&[data-placement='bottom'] {
+		margin-top: ${theme.tooltip.offset};
+		svg {
+			transform: rotate(90deg) translateX(3px);
+		}
+	}
+
+	&[data-placement='right'] {
+		margin-left: ${theme.tooltip.offset};
+	}
+
+	&[data-placement='left'] {
+		margin-right: ${theme.tooltip.offset};
+		svg {
+			transform: rotate(180deg);
+		}
+	}
+`;
+const tooltipArrowStyles = (theme) => css`
+	display: block;
+	fill: ${theme.shared.backgroundColor};
+`;
+//#endregion
+export { defaultTooltipTheme, tooltipArrowStyles, tooltipStyles, tooltipTriggerStyles };

package/dist/components/Tooltip/types.d.cts

@@ -0,0 +1,8 @@
+import { DefaultPropsWithChildren } from "../../util/types.cjs";
+import { TooltipTheme } from "./styles.cjs";
+//#region src/components/Tooltip/types.d.ts
+type TooltipProps = DefaultPropsWithChildren<TooltipTheme> & {
+  placement?: 'top' | 'bottom' | 'start' | 'end';
+};
+//#endregion
+export { TooltipProps };

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

@@ -0,0 +1,8 @@
+import { DefaultPropsWithChildren } from "../../util/types.js";
+import { TooltipTheme } from "./styles.js";
+//#region src/components/Tooltip/types.d.ts
+type TooltipProps = DefaultPropsWithChildren<TooltipTheme> & {
+  placement?: 'top' | 'bottom' | 'start' | 'end';
+};
+//#endregion
+export { TooltipProps };

package/dist/index.cjs

@@ -24,6 +24,7 @@ const require_radioGroup = require("./styleD/build/typescript/component/radioGro
 const require_select = require("./styleD/build/typescript/component/select.cjs");
 const require_textArea = require("./styleD/build/typescript/component/textArea.cjs");
 const require_textInput = require("./styleD/build/typescript/component/textInput.cjs");
+const require_tooltip = require("./styleD/build/typescript/component/tooltip.cjs");
 const require_topBar = require("./styleD/build/typescript/component/topBar.cjs");
 const require_typography = require("./styleD/build/typescript/component/typography.cjs");
 const require_tabs = require("./styleD/build/typescript/component/tabs.cjs");
@@ -68,6 +69,7 @@ exports.componentTabs = require_tabs.componentTabs;
 exports.componentTagTable = require_tagTable.componentTagTable;
 exports.componentTextArea = require_textArea.componentTextArea;
 exports.componentTextInput = require_textInput.componentTextInput;
+exports.componentTooltip = require_tooltip.componentTooltip;
 exports.componentTopBar = require_topBar.componentTopBar;
 exports.componentTypography = require_typography.componentTypography;
 exports.componentUserMenu = require_userMenu.componentUserMenu;

package/dist/index.d.cts

@@ -25,6 +25,7 @@ import { ComponentAutocomplete, componentAutocomplete } from "./styleD/build/typ
 import { ComponentTagTable, componentTagTable } from "./styleD/build/typescript/component/tagTable.cjs";
 import { ComponentTextArea, componentTextArea } from "./styleD/build/typescript/component/textArea.cjs";
 import { ComponentTextInput, componentTextInput } from "./styleD/build/typescript/component/textInput.cjs";
+import { ComponentTooltip, componentTooltip } from "./styleD/build/typescript/component/tooltip.cjs";
 import { ComponentTopBar, componentTopBar } from "./styleD/build/typescript/component/topBar.cjs";
 import { ComponentUserMenu, componentUserMenu } from "./styleD/build/typescript/component/userMenu.cjs";
 import { BaseColors, baseColors } from "./styleD/build/typescript/base/colors.cjs";
@@ -38,4 +39,4 @@ import { SemanticSizing, semanticSizing } from "./styleD/build/typescript/semant
 import { SemanticShadow, semanticShadow } from "./styleD/build/typescript/semantic/shadow.cjs";
 import { SemanticRadius, semanticRadius } from "./styleD/build/typescript/semantic/radius.cjs";
 import { SemanticSpacing, semanticSpacing } from "./styleD/build/typescript/semantic/spacing.cjs";
-export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTopBar, type ComponentTypography, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.d.ts

@@ -25,6 +25,7 @@ import { ComponentAutocomplete, componentAutocomplete } from "./styleD/build/typ
 import { ComponentTagTable, componentTagTable } from "./styleD/build/typescript/component/tagTable.js";
 import { ComponentTextArea, componentTextArea } from "./styleD/build/typescript/component/textArea.js";
 import { ComponentTextInput, componentTextInput } from "./styleD/build/typescript/component/textInput.js";
+import { ComponentTooltip, componentTooltip } from "./styleD/build/typescript/component/tooltip.js";
 import { ComponentTopBar, componentTopBar } from "./styleD/build/typescript/component/topBar.js";
 import { ComponentUserMenu, componentUserMenu } from "./styleD/build/typescript/component/userMenu.js";
 import { BaseColors, baseColors } from "./styleD/build/typescript/base/colors.js";
@@ -38,4 +39,4 @@ import { SemanticSizing, semanticSizing } from "./styleD/build/typescript/semant
 import { SemanticShadow, semanticShadow } from "./styleD/build/typescript/semantic/shadow.js";
 import { SemanticRadius, semanticRadius } from "./styleD/build/typescript/semantic/radius.js";
 import { SemanticSpacing, semanticSpacing } from "./styleD/build/typescript/semantic/spacing.js";
-export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTopBar, type ComponentTypography, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTabs, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTooltip, type ComponentTopBar, type ComponentTypography, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.js

@@ -23,6 +23,7 @@ import { componentRadioGroup } from "./styleD/build/typescript/component/radioGr
 import { componentSelect } from "./styleD/build/typescript/component/select.js";
 import { componentTextArea } from "./styleD/build/typescript/component/textArea.js";
 import { componentTextInput } from "./styleD/build/typescript/component/textInput.js";
+import { componentTooltip } from "./styleD/build/typescript/component/tooltip.js";
 import { componentTopBar } from "./styleD/build/typescript/component/topBar.js";
 import { componentTypography } from "./styleD/build/typescript/component/typography.js";
 import { componentTabs } from "./styleD/build/typescript/component/tabs.js";
@@ -38,4 +39,4 @@ import { semanticSizing } from "./styleD/build/typescript/semantic/sizing.js";
 import { semanticShadow } from "./styleD/build/typescript/semantic/shadow.js";
 import { semanticRadius } from "./styleD/build/typescript/semantic/radius.js";
 import { semanticSpacing } from "./styleD/build/typescript/semantic/spacing.js";
-export { baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTabs, componentTagTable, componentTextArea, componentTextInput, componentTooltip, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/styleD/build/css/component/tooltip.css

@@ -0,0 +1,13 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-tooltip-shared-color: #000000;
+	--component-tooltip-shared-background-color: #e8f0fb;
+	--component-tooltip-trigger-size: 1.25rem;
+	--component-tooltip-tooltip-offset: 1rem;
+	--component-tooltip-tooltip-padding: 1rem;
+	--component-tooltip-tooltip-max-width: 26ch;
+	--component-tooltip-tooltip-border-radius: 0.25rem;
+}

package/dist/styleD/build/typescript/component/tooltip.cjs

@@ -0,0 +1,19 @@
+//#region src/styleD/build/typescript/component/tooltip.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentTooltip = {
+	shared: {
+		color: "#000000",
+		backgroundColor: "#e8f0fb"
+	},
+	trigger: { size: "1.25rem" },
+	tooltip: {
+		offset: "1rem",
+		padding: "1rem",
+		maxWidth: "26ch",
+		borderRadius: "0.25rem"
+	}
+};
+//#endregion
+exports.componentTooltip = componentTooltip;

package/dist/styleD/build/typescript/component/tooltip.d.cts

@@ -0,0 +1,22 @@
+//#region src/styleD/build/typescript/component/tooltip.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const componentTooltip: {
+  shared: {
+    color: string;
+    backgroundColor: string;
+  };
+  trigger: {
+    size: string;
+  };
+  tooltip: {
+    offset: string;
+    padding: string;
+    maxWidth: string;
+    borderRadius: string;
+  };
+};
+type ComponentTooltip = typeof componentTooltip;
+//#endregion
+export { ComponentTooltip, componentTooltip };

package/dist/styleD/build/typescript/component/tooltip.d.ts

@@ -0,0 +1,22 @@
+//#region src/styleD/build/typescript/component/tooltip.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const componentTooltip: {
+  shared: {
+    color: string;
+    backgroundColor: string;
+  };
+  trigger: {
+    size: string;
+  };
+  tooltip: {
+    offset: string;
+    padding: string;
+    maxWidth: string;
+    borderRadius: string;
+  };
+};
+type ComponentTooltip = typeof componentTooltip;
+//#endregion
+export { ComponentTooltip, componentTooltip };

package/dist/styleD/build/typescript/component/tooltip.js

@@ -0,0 +1,19 @@
+//#region src/styleD/build/typescript/component/tooltip.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentTooltip = {
+	shared: {
+		color: "#000000",
+		backgroundColor: "#e8f0fb"
+	},
+	trigger: { size: "1.25rem" },
+	tooltip: {
+		offset: "1rem",
+		padding: "1rem",
+		maxWidth: "26ch",
+		borderRadius: "0.25rem"
+	}
+};
+//#endregion
+export { componentTooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.61",
+  "version": "0.0.62",
   "repository": {
     "url": "https://github.com/guardian/stand"
   },
@@ -337,6 +337,16 @@
         "default": "./dist/HtmlPreviewLoader.cjs"
       }
     },
+    "./Tooltip": {
+      "import": {
+        "types": "./dist/Tooltip.d.ts",
+        "default": "./dist/Tooltip.js"
+      },
+      "require": {
+        "types": "./dist/Tooltip.d.cts",
+        "default": "./dist/Tooltip.cjs"
+      }
+    },
     "./utils": {
       "import": {
         "types": "./dist/utils.d.ts",
@@ -391,7 +401,8 @@
     "./component/grid.css": "./dist/styleD/build/css/component/grid.css",
     "./component/layout.css": "./dist/styleD/build/css/component/layout.css",
     "./component/modal.css": "./dist/styleD/build/css/component/modal.css",
-    "./component/tabs.css": "./dist/styleD/build/css/component/tabs.css"
+    "./component/tabs.css": "./dist/styleD/build/css/component/tabs.css",
+    "./component/tooltip.css": "./dist/styleD/build/css/component/tooltip.css"
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -496,6 +507,9 @@
       ],
       "HtmlPreviewLoader": [
         "./dist/HtmlPreviewLoader.d.ts"
+      ],
+      "Tooltip": [
+        "./dist/Tooltip.d.ts"
       ]
     }
   },