@vector-im/compound-web 8.4.0 → 9.0.0

package/dist/components/Toast/Toast.cjs

@@ -1,12 +1,21 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const classNames = require("classnames");
-const React = require("react");
-const Toast_module = require("./Toast.module.css.cjs");
-const Toast = React.forwardRef(function Toast2({ children, className, ...props }, ref) {
-  const classes = classNames(Toast_module.default["toast-container"], className);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: classes, ref, children });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_Toast_module = require("./Toast.module.cjs");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Toast/Toast.tsx
+var Toast = (0, react.forwardRef)(function Toast({ children, className, ...props }, ref) {
+	const classes = (0, classnames.default)(require_Toast_module.default["toast-container"], className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		className: classes,
+		ref,
+		children
+	});
 });
+//#endregion
 exports.Toast = Toast;
-//# sourceMappingURL=Toast.cjs.map
+
+//# sourceMappingURL=Toast.cjs.map

package/dist/components/Toast/Toast.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.cjs","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, { forwardRef, type PropsWithChildren } from \"react\";\nimport styles from \"./Toast.module.css\";\n\ntype ToastProps = {\n  className?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n  { children, className, ...props }: PropsWithChildren<ToastProps>,\n  ref,\n) {\n  const classes = classnames(styles[\"toast-container\"], className);\n  return (\n    <div {...props} className={classes} ref={ref}>\n      {children}\n    </div>\n  );\n});\n"],"names":["forwardRef","Toast","classnames","styles"],"mappings":";;;;;;AAeO,MAAM,QAAQA,MAAAA,WAAuC,SAASC,OACnE,EAAE,UAAU,WAAW,GAAG,MAAA,GAC1B,KACA;AACA,QAAM,UAAUC,WAAWC,aAAAA,QAAO,iBAAiB,GAAG,SAAS;AAC/D,wCACG,OAAA,EAAK,GAAG,OAAO,WAAW,SAAS,KACjC,UACH;AAEJ,CAAC;;"}
+{"version":3,"file":"Toast.cjs","names":[],"sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, { forwardRef, type PropsWithChildren } from \"react\";\nimport styles from \"./Toast.module.css\";\n\ntype ToastProps = {\n  className?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n  { children, className, ...props }: PropsWithChildren<ToastProps>,\n  ref,\n) {\n  const classes = classnames(styles[\"toast-container\"], className);\n  return (\n    <div {...props} className={classes} ref={ref}>\n      {children}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;AAeA,IAAa,SAAA,GAAA,MAAA,YAA+C,SAAS,MACnE,EAAE,UAAU,WAAW,GAAG,SAC1B,KACA;CACA,MAAM,WAAA,GAAA,WAAA,SAAqB,qBAAA,QAAO,oBAAoB,UAAU;AAChE,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,GAAI;EAAO,WAAW;EAAc;EACtC;EACG,CAAA;EAER"}

package/dist/components/Toast/Toast.js

@@ -1,12 +1,18 @@
-import { jsx } from "react/jsx-runtime";
+import Toast_module_default from "./Toast.module.js";
 import classNames from "classnames";
 import { forwardRef } from "react";
-import styles from "./Toast.module.css.js";
-const Toast = forwardRef(function Toast2({ children, className, ...props }, ref) {
-  const classes = classNames(styles["toast-container"], className);
-  return /* @__PURE__ */ jsx("div", { ...props, className: classes, ref, children });
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Toast/Toast.tsx
+var Toast = forwardRef(function Toast({ children, className, ...props }, ref) {
+	const classes = classNames(Toast_module_default["toast-container"], className);
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: classes,
+		ref,
+		children
+	});
 });
-export {
-  Toast
-};
-//# sourceMappingURL=Toast.js.map
+//#endregion
+export { Toast };
+
+//# sourceMappingURL=Toast.js.map

package/dist/components/Toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, { forwardRef, type PropsWithChildren } from \"react\";\nimport styles from \"./Toast.module.css\";\n\ntype ToastProps = {\n  className?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n  { children, className, ...props }: PropsWithChildren<ToastProps>,\n  ref,\n) {\n  const classes = classnames(styles[\"toast-container\"], className);\n  return (\n    <div {...props} className={classes} ref={ref}>\n      {children}\n    </div>\n  );\n});\n"],"names":["Toast","classnames"],"mappings":";;;;AAeO,MAAM,QAAQ,WAAuC,SAASA,OACnE,EAAE,UAAU,WAAW,GAAG,MAAA,GAC1B,KACA;AACA,QAAM,UAAUC,WAAW,OAAO,iBAAiB,GAAG,SAAS;AAC/D,6BACG,OAAA,EAAK,GAAG,OAAO,WAAW,SAAS,KACjC,UACH;AAEJ,CAAC;"}
+{"version":3,"file":"Toast.js","names":[],"sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classnames from \"classnames\";\nimport React, { forwardRef, type PropsWithChildren } from \"react\";\nimport styles from \"./Toast.module.css\";\n\ntype ToastProps = {\n  className?: string;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n  { children, className, ...props }: PropsWithChildren<ToastProps>,\n  ref,\n) {\n  const classes = classnames(styles[\"toast-container\"], className);\n  return (\n    <div {...props} className={classes} ref={ref}>\n      {children}\n    </div>\n  );\n});\n"],"mappings":";;;;;AAeA,IAAa,QAAQ,WAAuC,SAAS,MACnE,EAAE,UAAU,WAAW,GAAG,SAC1B,KACA;CACA,MAAM,UAAU,WAAW,qBAAO,oBAAoB,UAAU;AAChE,QACE,oBAAC,OAAD;EAAK,GAAI;EAAO,WAAW;EAAc;EACtC;EACG,CAAA;EAER"}

package/dist/components/Toast/Toast.module.cjs

@@ -0,0 +1,6 @@
+//#region src/components/Toast/Toast.module.css
+var Toast_module_default = { "toast-container": "_toast-container_1xofk_8" };
+//#endregion
+exports.default = Toast_module_default;
+
+//# sourceMappingURL=Toast.module.cjs.map

package/dist/components/Toast/Toast.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.module.cjs","names":[],"sources":["../../../src/components/Toast/Toast.module.css"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.toast-container {\n  inline-size: fit-content;\n  background-color: var(--cpd-color-alpha-gray-1300);\n  color: var(--cpd-color-text-on-solid-primary);\n  border-radius: 99px;\n  font-size: var(--cpd-font-body-sm-medium);\n  padding: var(--cpd-space-2x) var(--cpd-space-4x);\n}\n\n@media (forced-colors: active) {\n  .toast-container {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}

package/dist/components/Toast/Toast.module.js

@@ -0,0 +1,6 @@
+//#region src/components/Toast/Toast.module.css
+var Toast_module_default = { "toast-container": "_toast-container_1xofk_8" };
+//#endregion
+export { Toast_module_default as default };
+
+//# sourceMappingURL=Toast.module.js.map

package/dist/components/Toast/Toast.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.module.js","names":[],"sources":["../../../src/components/Toast/Toast.module.css"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n.toast-container {\n  inline-size: fit-content;\n  background-color: var(--cpd-color-alpha-gray-1300);\n  color: var(--cpd-color-text-on-solid-primary);\n  border-radius: 99px;\n  font-size: var(--cpd-font-body-sm-medium);\n  padding: var(--cpd-space-2x) var(--cpd-space-4x);\n}\n\n@media (forced-colors: active) {\n  .toast-container {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}

package/dist/components/Tooltip/Tooltip.cjs

@@ -1,124 +1,109 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const TooltipContext = require("./TooltipContext.cjs");
-const react = require("@floating-ui/react");
-const React = require("react");
-const classNames = require("classnames");
-const Tooltip_module = require("./Tooltip.module.css.cjs");
-const useTooltip = require("./useTooltip.cjs");
-const hasLabel = (props) => "label" in props && !!props.label;
-function Tooltip({
-  children,
-  isTriggerInteractive = true,
-  nonInteractiveTriggerTabIndex = 0,
-  ...props
-}) {
-  const context = useTooltip.useTooltip({ isTriggerInteractive, ...props });
-  return /* @__PURE__ */ jsxRuntime.jsxs(TooltipContext.TooltipContext.Provider, { value: context, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      TooltipAnchor,
-      {
-        isTriggerInteractive,
-        nonInteractiveTriggerTabIndex,
-        children
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(TooltipContent, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { id: context.labelId, children: hasLabel(props) ? props.label : props.description }),
-      /* @__PURE__ */ jsxRuntime.jsx(Caption, {})
-    ] })
-  ] });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_useTooltip = require("./useTooltip.cjs");
+const require_TooltipContext = require("./TooltipContext.cjs");
+const require_Tooltip_module = require("./Tooltip.module.cjs");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _floating_ui_react = require("@floating-ui/react");
+//#region src/components/Tooltip/Tooltip.tsx
+var hasLabel = (props) => "label" in props && !!props.label;
+/**
+* A tooltip component
+*/
+function Tooltip({ children, isTriggerInteractive = true, nonInteractiveTriggerTabIndex = 0, ...props }) {
+	const context = require_useTooltip.useTooltip({
+		isTriggerInteractive,
+		...props
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_TooltipContext.TooltipContext.Provider, {
+		value: context,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipAnchor, {
+			isTriggerInteractive,
+			nonInteractiveTriggerTabIndex,
+			children
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TooltipContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			id: context.labelId,
+			children: hasLabel(props) ? props.label : props.description
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Caption, {})] })]
+	});
 }
 function Caption() {
-  const { caption, captionId } = TooltipContext.useTooltipContext();
-  if (!caption) return null;
-  const isCaptionString = typeof caption === "string";
-  const Container = isCaptionString ? "span" : "div";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Container,
-    {
-      id: captionId,
-      className: classNames(Tooltip_module.default.caption, "cpd-theme-dark"),
-      children: caption
-    }
-  );
+	const { caption, captionId } = require_TooltipContext.useTooltipContext();
+	if (!caption) return null;
+	/**
+	* Forcing dark theme, so that we have the correct contrast when
+	* using the text color secondary on a solid dark background.
+	* This is temporary and should only remain until we figure out
+	* the approach to on-solid tokens
+	**/
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(typeof caption === "string" ? "span" : "div", {
+		id: captionId,
+		className: (0, classnames.default)(require_Tooltip_module.default.caption, "cpd-theme-dark"),
+		children: caption
+	});
 }
-function TooltipContent({
-  children
-}) {
-  const {
-    context: floatingContext,
-    open,
-    arrowRef,
-    purpose,
-    ...rest
-  } = TooltipContext.useTooltipContext();
-  if (!open && purpose !== "label") return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: rest.refs.setFloating,
-      style: rest.floatingStyles,
-      ...rest.tooltipProps,
-      ...rest.getFloatingProps(),
-      className: classNames(Tooltip_module.default.tooltip, {
-        [Tooltip_module.default.invisible]: purpose === "label" && !open
-      }),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          react.FloatingArrow,
-          {
-            ref: arrowRef,
-            context: floatingContext,
-            width: 10,
-            height: 6,
-            className: Tooltip_module.default.arrow
-          }
-        ),
-        children
-      ]
-    }
-  ) });
+/**
+* The content of the tooltip
+* @param children
+*/
+function TooltipContent({ children }) {
+	const { context: floatingContext, open, arrowRef, purpose, ...rest } = require_TooltipContext.useTooltipContext();
+	if (!open && purpose !== "label") return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_floating_ui_react.FloatingPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: rest.refs.setFloating,
+		style: rest.floatingStyles,
+		...rest.tooltipProps,
+		...rest.getFloatingProps(),
+		className: (0, classnames.default)(require_Tooltip_module.default.tooltip, { [require_Tooltip_module.default.invisible]: purpose === "label" && !open }),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_floating_ui_react.FloatingArrow, {
+			ref: arrowRef,
+			context: floatingContext,
+			width: 10,
+			height: 6,
+			className: require_Tooltip_module.default.arrow
+		}), children]
+	}) });
 }
-const TooltipAnchor = ({
-  children,
-  isTriggerInteractive,
-  nonInteractiveTriggerTabIndex
-}) => {
-  const context = TooltipContext.useTooltipContext();
-  const childrenRef = children?.ref;
-  const ref = react.useMergeRefs([context.refs.setReference, childrenRef]);
-  const element = React.useMemo(() => {
-    if (!React.isValidElement(children)) return;
-    if (isTriggerInteractive) {
-      const props = context.getReferenceProps({
-        // To support React 18, we need to explicitly pass the children's props. See  https://github.com/element-hq/compound/issues/333
-        // In React 19, this is not necessary. `getReferenceProps` is able to get the props directly from the ref.
-        ...typeof children.props === "object" ? children.props : {},
-        ref
-      });
-      return React.cloneElement(children, props);
-    } else {
-      const props = context.getReferenceProps({
-        ref,
-        tabIndex: nonInteractiveTriggerTabIndex
-      });
-      const {
-        "aria-labelledby": labelId,
-        "aria-describedby": descriptionId,
-        ...spanProps
-      } = props;
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { tabIndex: nonInteractiveTriggerTabIndex, ...spanProps, children: React.cloneElement(children, {
-        "aria-labelledby": labelId,
-        "aria-describedby": descriptionId
-      }) });
-    }
-  }, [context, ref, children]);
-  if (!element) {
-    throw new Error("Tooltip anchor must be a single valid React element");
-  }
-  return element;
+/**
+* The anchor of the tooltip
+* @param children
+*/
+var TooltipAnchor = ({ children, isTriggerInteractive, nonInteractiveTriggerTabIndex }) => {
+	const context = require_TooltipContext.useTooltipContext();
+	const childrenRef = children?.ref;
+	const ref = (0, _floating_ui_react.useMergeRefs)([context.refs.setReference, childrenRef]);
+	const element = (0, react.useMemo)(() => {
+		if (!(0, react.isValidElement)(children)) return;
+		if (isTriggerInteractive) return (0, react.cloneElement)(children, context.getReferenceProps({
+			...typeof children.props === "object" ? children.props : {},
+			ref
+		}));
+		else {
+			const { "aria-labelledby": labelId, "aria-describedby": descriptionId, ...spanProps } = context.getReferenceProps({
+				ref,
+				tabIndex: nonInteractiveTriggerTabIndex
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				tabIndex: nonInteractiveTriggerTabIndex,
+				...spanProps,
+				children: (0, react.cloneElement)(children, {
+					"aria-labelledby": labelId,
+					"aria-describedby": descriptionId
+				})
+			});
+		}
+	}, [
+		context,
+		ref,
+		children
+	]);
+	if (!element) throw new Error("Tooltip anchor must be a single valid React element");
+	return element;
 };
+//#endregion
 exports.Tooltip = Tooltip;
-//# sourceMappingURL=Tooltip.cjs.map
+
+//# sourceMappingURL=Tooltip.cjs.map

package/dist/components/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/*\nCopyright 2023, 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport { TooltipContext, useTooltipContext } from \"./TooltipContext\";\nimport {\n  FloatingArrow,\n  FloatingPortal,\n  useMergeRefs,\n} from \"@floating-ui/react\";\nimport React, {\n  type PropsWithChildren,\n  type Ref,\n  type JSX,\n  isValidElement,\n  cloneElement,\n  useMemo,\n  type ReactNode,\n  type FC,\n  type ReactElement,\n} from \"react\";\n\nimport classNames from \"classnames\";\nimport styles from \"./Tooltip.module.css\";\nimport {\n  type CommonUseTooltipProps,\n  type TooltipDescription,\n  type TooltipLabel,\n  useTooltip,\n} from \"./useTooltip\";\n\n// Unfortunately Omit doesn't distribute nicely over sum types, so we have to\n// piece together the useTooltip options type by hand\ntype TooltipProps = Omit<CommonUseTooltipProps, \"isTriggerInteractive\"> &\n  (TooltipLabel | TooltipDescription) & {\n    /**\n     * Whether the trigger element is interactive.\n     * When trigger is interactive:\n     *      - tooltip will be shown after a 300ms delay.\n     * When trigger is not interactive:\n     *      - tooltip will be shown instantly when pointer enters trigger.\n     *      - trigger will be wrapped in a span with a tab index from prop nonInteractiveTriggerTabIndex\n     * @default true\n     */\n    isTriggerInteractive?: boolean;\n    /**\n     * The tab index for the non interactive trigger.\n     * @default 0\n     */\n    nonInteractiveTriggerTabIndex?: number;\n  };\n\nconst hasLabel = (\n  props: TooltipLabel | TooltipDescription,\n): props is TooltipLabel => \"label\" in props && !!props.label;\n\n/**\n * A tooltip component\n */\nexport function Tooltip({\n  children,\n  isTriggerInteractive = true,\n  nonInteractiveTriggerTabIndex = 0,\n  ...props\n}: PropsWithChildren<TooltipProps>): JSX.Element {\n  const context = useTooltip({ isTriggerInteractive, ...props });\n\n  return (\n    <TooltipContext.Provider value={context}>\n      <TooltipAnchor\n        isTriggerInteractive={isTriggerInteractive}\n        nonInteractiveTriggerTabIndex={nonInteractiveTriggerTabIndex}\n      >\n        {children}\n      </TooltipAnchor>\n      <TooltipContent>\n        <span id={context.labelId}>\n          {hasLabel(props) ? props.label : props.description}\n        </span>\n        <Caption />\n      </TooltipContent>\n    </TooltipContext.Provider>\n  );\n}\n\nfunction Caption() {\n  const { caption, captionId } = useTooltipContext();\n  if (!caption) return null;\n\n  const isCaptionString = typeof caption === \"string\";\n  const Container = isCaptionString ? \"span\" : \"div\";\n\n  /**\n   * Forcing dark theme, so that we have the correct contrast when\n   * using the text color secondary on a solid dark background.\n   * This is temporary and should only remain until we figure out\n   * the approach to on-solid tokens\n   **/\n  return (\n    <Container\n      id={captionId}\n      className={classNames(styles.caption, \"cpd-theme-dark\")}\n    >\n      {caption}\n    </Container>\n  );\n}\n\n/**\n * The content of the tooltip\n * @param children\n */\nfunction TooltipContent({\n  children,\n}: Readonly<PropsWithChildren>): JSX.Element | null {\n  const {\n    context: floatingContext,\n    open,\n    arrowRef,\n    purpose,\n    ...rest\n  } = useTooltipContext();\n\n  // Label tooltips are kept in the DOM even when not visually open\n  if (!open && purpose !== \"label\") return null;\n\n  return (\n    <FloatingPortal>\n      <div\n        ref={rest.refs.setFloating}\n        style={rest.floatingStyles}\n        {...rest.tooltipProps}\n        {...rest.getFloatingProps()}\n        className={classNames(styles.tooltip, {\n          [styles.invisible]: purpose === \"label\" && !open,\n        })}\n      >\n        <FloatingArrow\n          ref={arrowRef}\n          context={floatingContext}\n          // design absolute value\n          width={10}\n          height={6}\n          className={styles.arrow}\n        />\n        {children}\n      </div>\n    </FloatingPortal>\n  );\n}\n\ninterface TooltipAnchorProps {\n  children: ReactNode;\n  isTriggerInteractive: boolean;\n  nonInteractiveTriggerTabIndex?: number;\n}\n\n/**\n * The anchor of the tooltip\n * @param children\n */\nconst TooltipAnchor: FC<TooltipAnchorProps> = ({\n  children,\n  isTriggerInteractive,\n  nonInteractiveTriggerTabIndex,\n}) => {\n  const context = useTooltipContext();\n\n  // The children can have a ref and we don't want to discard it\n  // Doing a dirty cast to get the optional ref\n  const childrenRef = (children as unknown as { ref?: Ref<HTMLElement> })?.ref;\n  const ref = useMergeRefs([context.refs.setReference, childrenRef]);\n\n  const element = useMemo(() => {\n    if (!isValidElement(children)) return;\n\n    if (isTriggerInteractive) {\n      const props = context.getReferenceProps({\n        // To support React 18, we need to explicitly pass the children's props. See  https://github.com/element-hq/compound/issues/333\n        // In React 19, this is not necessary. `getReferenceProps` is able to get the props directly from the ref.\n        ...(typeof children.props === \"object\" ? children.props : {}),\n        ref,\n      });\n      return cloneElement(children, props);\n    } else {\n      // For a non-interactive trigger, we want most of the props to go on the\n      // span element that we provide, since that's what receives focus, but it\n      // should still be the trigger that receives the label/description. It\n      // would be wrong to label the span element, as it lacks a role.\n      const props = context.getReferenceProps({\n        ref,\n        tabIndex: nonInteractiveTriggerTabIndex,\n      });\n      const {\n        \"aria-labelledby\": labelId,\n        \"aria-describedby\": descriptionId,\n        ...spanProps\n      } = props;\n      return (\n        <span tabIndex={nonInteractiveTriggerTabIndex} {...spanProps}>\n          {cloneElement(children as ReactElement<Record<string, unknown>>, {\n            \"aria-labelledby\": labelId,\n            \"aria-describedby\": descriptionId,\n          })}\n        </span>\n      );\n    }\n  }, [context, ref, children]);\n\n  if (!element) {\n    throw new Error(\"Tooltip anchor must be a single valid React element\");\n  }\n\n  return element;\n};\n"],"names":["useTooltip","jsxs","TooltipContext","jsx","useTooltipContext","styles","FloatingPortal","FloatingArrow","useMergeRefs","useMemo","isValidElement","cloneElement"],"mappings":"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"}
+{"version":3,"file":"Tooltip.cjs","names":[],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/*\nCopyright 2023, 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport { TooltipContext, useTooltipContext } from \"./TooltipContext\";\nimport {\n  FloatingArrow,\n  FloatingPortal,\n  useMergeRefs,\n} from \"@floating-ui/react\";\nimport React, {\n  type PropsWithChildren,\n  type Ref,\n  type JSX,\n  isValidElement,\n  cloneElement,\n  useMemo,\n  type ReactNode,\n  type FC,\n  type ReactElement,\n} from \"react\";\n\nimport classNames from \"classnames\";\nimport styles from \"./Tooltip.module.css\";\nimport {\n  type CommonUseTooltipProps,\n  type TooltipDescription,\n  type TooltipLabel,\n  useTooltip,\n} from \"./useTooltip\";\n\n// Unfortunately Omit doesn't distribute nicely over sum types, so we have to\n// piece together the useTooltip options type by hand\ntype TooltipProps = Omit<CommonUseTooltipProps, \"isTriggerInteractive\"> &\n  (TooltipLabel | TooltipDescription) & {\n    /**\n     * Whether the trigger element is interactive.\n     * When trigger is interactive:\n     *      - tooltip will be shown after a 300ms delay.\n     * When trigger is not interactive:\n     *      - tooltip will be shown instantly when pointer enters trigger.\n     *      - trigger will be wrapped in a span with a tab index from prop nonInteractiveTriggerTabIndex\n     * @default true\n     */\n    isTriggerInteractive?: boolean;\n    /**\n     * The tab index for the non interactive trigger.\n     * @default 0\n     */\n    nonInteractiveTriggerTabIndex?: number;\n  };\n\nconst hasLabel = (\n  props: TooltipLabel | TooltipDescription,\n): props is TooltipLabel => \"label\" in props && !!props.label;\n\n/**\n * A tooltip component\n */\nexport function Tooltip({\n  children,\n  isTriggerInteractive = true,\n  nonInteractiveTriggerTabIndex = 0,\n  ...props\n}: PropsWithChildren<TooltipProps>): JSX.Element {\n  const context = useTooltip({ isTriggerInteractive, ...props });\n\n  return (\n    <TooltipContext.Provider value={context}>\n      <TooltipAnchor\n        isTriggerInteractive={isTriggerInteractive}\n        nonInteractiveTriggerTabIndex={nonInteractiveTriggerTabIndex}\n      >\n        {children}\n      </TooltipAnchor>\n      <TooltipContent>\n        <span id={context.labelId}>\n          {hasLabel(props) ? props.label : props.description}\n        </span>\n        <Caption />\n      </TooltipContent>\n    </TooltipContext.Provider>\n  );\n}\n\nfunction Caption() {\n  const { caption, captionId } = useTooltipContext();\n  if (!caption) return null;\n\n  const isCaptionString = typeof caption === \"string\";\n  const Container = isCaptionString ? \"span\" : \"div\";\n\n  /**\n   * Forcing dark theme, so that we have the correct contrast when\n   * using the text color secondary on a solid dark background.\n   * This is temporary and should only remain until we figure out\n   * the approach to on-solid tokens\n   **/\n  return (\n    <Container\n      id={captionId}\n      className={classNames(styles.caption, \"cpd-theme-dark\")}\n    >\n      {caption}\n    </Container>\n  );\n}\n\n/**\n * The content of the tooltip\n * @param children\n */\nfunction TooltipContent({\n  children,\n}: Readonly<PropsWithChildren>): JSX.Element | null {\n  const {\n    context: floatingContext,\n    open,\n    arrowRef,\n    purpose,\n    ...rest\n  } = useTooltipContext();\n\n  // Label tooltips are kept in the DOM even when not visually open\n  if (!open && purpose !== \"label\") return null;\n\n  return (\n    <FloatingPortal>\n      <div\n        ref={rest.refs.setFloating}\n        style={rest.floatingStyles}\n        {...rest.tooltipProps}\n        {...rest.getFloatingProps()}\n        className={classNames(styles.tooltip, {\n          [styles.invisible]: purpose === \"label\" && !open,\n        })}\n      >\n        <FloatingArrow\n          ref={arrowRef}\n          context={floatingContext}\n          // design absolute value\n          width={10}\n          height={6}\n          className={styles.arrow}\n        />\n        {children}\n      </div>\n    </FloatingPortal>\n  );\n}\n\ninterface TooltipAnchorProps {\n  children: ReactNode;\n  isTriggerInteractive: boolean;\n  nonInteractiveTriggerTabIndex?: number;\n}\n\n/**\n * The anchor of the tooltip\n * @param children\n */\nconst TooltipAnchor: FC<TooltipAnchorProps> = ({\n  children,\n  isTriggerInteractive,\n  nonInteractiveTriggerTabIndex,\n}) => {\n  const context = useTooltipContext();\n\n  // The children can have a ref and we don't want to discard it\n  // Doing a dirty cast to get the optional ref\n  const childrenRef = (children as unknown as { ref?: Ref<HTMLElement> })?.ref;\n  const ref = useMergeRefs([context.refs.setReference, childrenRef]);\n\n  const element = useMemo(() => {\n    if (!isValidElement(children)) return;\n\n    if (isTriggerInteractive) {\n      const props = context.getReferenceProps({\n        // To support React 18, we need to explicitly pass the children's props. See  https://github.com/element-hq/compound/issues/333\n        // In React 19, this is not necessary. `getReferenceProps` is able to get the props directly from the ref.\n        ...(typeof children.props === \"object\" ? children.props : {}),\n        ref,\n      });\n      return cloneElement(children, props);\n    } else {\n      // For a non-interactive trigger, we want most of the props to go on the\n      // span element that we provide, since that's what receives focus, but it\n      // should still be the trigger that receives the label/description. It\n      // would be wrong to label the span element, as it lacks a role.\n      const props = context.getReferenceProps({\n        ref,\n        tabIndex: nonInteractiveTriggerTabIndex,\n      });\n      const {\n        \"aria-labelledby\": labelId,\n        \"aria-describedby\": descriptionId,\n        ...spanProps\n      } = props;\n      return (\n        <span tabIndex={nonInteractiveTriggerTabIndex} {...spanProps}>\n          {cloneElement(children as ReactElement<Record<string, unknown>>, {\n            \"aria-labelledby\": labelId,\n            \"aria-describedby\": descriptionId,\n          })}\n        </span>\n      );\n    }\n  }, [context, ref, children]);\n\n  if (!element) {\n    throw new Error(\"Tooltip anchor must be a single valid React element\");\n  }\n\n  return element;\n};\n"],"mappings":";;;;;;;;;;;AAuDA,IAAM,YACJ,UAC0B,WAAW,SAAS,CAAC,CAAC,MAAM;;;;AAKxD,SAAgB,QAAQ,EACtB,UACA,uBAAuB,MACvB,gCAAgC,GAChC,GAAG,SAC4C;CAC/C,MAAM,UAAU,mBAAA,WAAW;EAAE;EAAsB,GAAG;EAAO,CAAC;AAE9D,QACE,iBAAA,GAAA,kBAAA,MAAC,uBAAA,eAAe,UAAhB;EAAyB,OAAO;YAAhC,CACE,iBAAA,GAAA,kBAAA,KAAC,eAAD;GACwB;GACS;GAE9B;GACa,CAAA,EAChB,iBAAA,GAAA,kBAAA,MAAC,gBAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,IAAI,QAAQ;aACf,SAAS,MAAM,GAAG,MAAM,QAAQ,MAAM;GAClC,CAAA,EACP,iBAAA,GAAA,kBAAA,KAAC,SAAD,EAAW,CAAA,CACI,EAAA,CAAA,CACO;;;AAI9B,SAAS,UAAU;CACjB,MAAM,EAAE,SAAS,cAAc,uBAAA,mBAAmB;AAClD,KAAI,CAAC,QAAS,QAAO;;;;;;;AAWrB,QACE,iBAAA,GAAA,kBAAA,KAVsB,OAAO,YAAY,WACP,SAAS,OAS3C;EACE,IAAI;EACJ,YAAA,GAAA,WAAA,SAAsB,uBAAA,QAAO,SAAS,iBAAiB;YAEtD;EACS,CAAA;;;;;;AAQhB,SAAS,eAAe,EACtB,YACkD;CAClD,MAAM,EACJ,SAAS,iBACT,MACA,UACA,SACA,GAAG,SACD,uBAAA,mBAAmB;AAGvB,KAAI,CAAC,QAAQ,YAAY,QAAS,QAAO;AAEzC,QACE,iBAAA,GAAA,kBAAA,KAAC,mBAAA,gBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,KAAK,KAAK,KAAK;EACf,OAAO,KAAK;EACZ,GAAI,KAAK;EACT,GAAI,KAAK,kBAAkB;EAC3B,YAAA,GAAA,WAAA,SAAsB,uBAAA,QAAO,SAAS,GACnC,uBAAA,QAAO,YAAY,YAAY,WAAW,CAAC,MAC7C,CAAC;YAPJ,CASE,iBAAA,GAAA,kBAAA,KAAC,mBAAA,eAAD;GACE,KAAK;GACL,SAAS;GAET,OAAO;GACP,QAAQ;GACR,WAAW,uBAAA,QAAO;GAClB,CAAA,EACD,SACG;KACS,CAAA;;;;;;AAcrB,IAAM,iBAAyC,EAC7C,UACA,sBACA,oCACI;CACJ,MAAM,UAAU,uBAAA,mBAAmB;CAInC,MAAM,cAAe,UAAoD;CACzE,MAAM,OAAA,GAAA,mBAAA,cAAmB,CAAC,QAAQ,KAAK,cAAc,YAAY,CAAC;CAElE,MAAM,WAAA,GAAA,MAAA,eAAwB;AAC5B,MAAI,EAAA,GAAA,MAAA,gBAAgB,SAAS,CAAE;AAE/B,MAAI,qBAOF,SAAA,GAAA,MAAA,cAAoB,UANN,QAAQ,kBAAkB;GAGtC,GAAI,OAAO,SAAS,UAAU,WAAW,SAAS,QAAQ,EAAE;GAC5D;GACD,CAAC,CACkC;OAC/B;GASL,MAAM,EACJ,mBAAmB,SACnB,oBAAoB,eACpB,GAAG,cAPS,QAAQ,kBAAkB;IACtC;IACA,UAAU;IACX,CAAC;AAMF,UACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,UAAU;IAA+B,GAAI;sCACnC,UAAmD;KAC/D,mBAAmB;KACnB,oBAAoB;KACrB,CAAC;IACG,CAAA;;IAGV;EAAC;EAAS;EAAK;EAAS,CAAC;AAE5B,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,sDAAsD;AAGxE,QAAO"}

package/dist/components/Tooltip/Tooltip.js

@@ -1,124 +1,106 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { useTooltip } from "./useTooltip.js";
 import { TooltipContext, useTooltipContext } from "./TooltipContext.js";
-import { useMergeRefs, FloatingPortal, FloatingArrow } from "@floating-ui/react";
-import { useMemo, isValidElement, cloneElement } from "react";
+import Tooltip_module_default from "./Tooltip.module.js";
 import classNames from "classnames";
-import styles from "./Tooltip.module.css.js";
-import { useTooltip } from "./useTooltip.js";
-const hasLabel = (props) => "label" in props && !!props.label;
-function Tooltip({
-  children,
-  isTriggerInteractive = true,
-  nonInteractiveTriggerTabIndex = 0,
-  ...props
-}) {
-  const context = useTooltip({ isTriggerInteractive, ...props });
-  return /* @__PURE__ */ jsxs(TooltipContext.Provider, { value: context, children: [
-    /* @__PURE__ */ jsx(
-      TooltipAnchor,
-      {
-        isTriggerInteractive,
-        nonInteractiveTriggerTabIndex,
-        children
-      }
-    ),
-    /* @__PURE__ */ jsxs(TooltipContent, { children: [
-      /* @__PURE__ */ jsx("span", { id: context.labelId, children: hasLabel(props) ? props.label : props.description }),
-      /* @__PURE__ */ jsx(Caption, {})
-    ] })
-  ] });
+import { cloneElement, isValidElement, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FloatingArrow, FloatingPortal, useMergeRefs } from "@floating-ui/react";
+//#region src/components/Tooltip/Tooltip.tsx
+var hasLabel = (props) => "label" in props && !!props.label;
+/**
+* A tooltip component
+*/
+function Tooltip({ children, isTriggerInteractive = true, nonInteractiveTriggerTabIndex = 0, ...props }) {
+	const context = useTooltip({
+		isTriggerInteractive,
+		...props
+	});
+	return /* @__PURE__ */ jsxs(TooltipContext.Provider, {
+		value: context,
+		children: [/* @__PURE__ */ jsx(TooltipAnchor, {
+			isTriggerInteractive,
+			nonInteractiveTriggerTabIndex,
+			children
+		}), /* @__PURE__ */ jsxs(TooltipContent, { children: [/* @__PURE__ */ jsx("span", {
+			id: context.labelId,
+			children: hasLabel(props) ? props.label : props.description
+		}), /* @__PURE__ */ jsx(Caption, {})] })]
+	});
 }
 function Caption() {
-  const { caption, captionId } = useTooltipContext();
-  if (!caption) return null;
-  const isCaptionString = typeof caption === "string";
-  const Container = isCaptionString ? "span" : "div";
-  return /* @__PURE__ */ jsx(
-    Container,
-    {
-      id: captionId,
-      className: classNames(styles.caption, "cpd-theme-dark"),
-      children: caption
-    }
-  );
+	const { caption, captionId } = useTooltipContext();
+	if (!caption) return null;
+	/**
+	* Forcing dark theme, so that we have the correct contrast when
+	* using the text color secondary on a solid dark background.
+	* This is temporary and should only remain until we figure out
+	* the approach to on-solid tokens
+	**/
+	return /* @__PURE__ */ jsx(typeof caption === "string" ? "span" : "div", {
+		id: captionId,
+		className: classNames(Tooltip_module_default.caption, "cpd-theme-dark"),
+		children: caption
+	});
 }
-function TooltipContent({
-  children
-}) {
-  const {
-    context: floatingContext,
-    open,
-    arrowRef,
-    purpose,
-    ...rest
-  } = useTooltipContext();
-  if (!open && purpose !== "label") return null;
-  return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: rest.refs.setFloating,
-      style: rest.floatingStyles,
-      ...rest.tooltipProps,
-      ...rest.getFloatingProps(),
-      className: classNames(styles.tooltip, {
-        [styles.invisible]: purpose === "label" && !open
-      }),
-      children: [
-        /* @__PURE__ */ jsx(
-          FloatingArrow,
-          {
-            ref: arrowRef,
-            context: floatingContext,
-            width: 10,
-            height: 6,
-            className: styles.arrow
-          }
-        ),
-        children
-      ]
-    }
-  ) });
+/**
+* The content of the tooltip
+* @param children
+*/
+function TooltipContent({ children }) {
+	const { context: floatingContext, open, arrowRef, purpose, ...rest } = useTooltipContext();
+	if (!open && purpose !== "label") return null;
+	return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsxs("div", {
+		ref: rest.refs.setFloating,
+		style: rest.floatingStyles,
+		...rest.tooltipProps,
+		...rest.getFloatingProps(),
+		className: classNames(Tooltip_module_default.tooltip, { [Tooltip_module_default.invisible]: purpose === "label" && !open }),
+		children: [/* @__PURE__ */ jsx(FloatingArrow, {
+			ref: arrowRef,
+			context: floatingContext,
+			width: 10,
+			height: 6,
+			className: Tooltip_module_default.arrow
+		}), children]
+	}) });
 }
-const TooltipAnchor = ({
-  children,
-  isTriggerInteractive,
-  nonInteractiveTriggerTabIndex
-}) => {
-  const context = useTooltipContext();
-  const childrenRef = children?.ref;
-  const ref = useMergeRefs([context.refs.setReference, childrenRef]);
-  const element = useMemo(() => {
-    if (!isValidElement(children)) return;
-    if (isTriggerInteractive) {
-      const props = context.getReferenceProps({
-        // To support React 18, we need to explicitly pass the children's props. See  https://github.com/element-hq/compound/issues/333
-        // In React 19, this is not necessary. `getReferenceProps` is able to get the props directly from the ref.
-        ...typeof children.props === "object" ? children.props : {},
-        ref
-      });
-      return cloneElement(children, props);
-    } else {
-      const props = context.getReferenceProps({
-        ref,
-        tabIndex: nonInteractiveTriggerTabIndex
-      });
-      const {
-        "aria-labelledby": labelId,
-        "aria-describedby": descriptionId,
-        ...spanProps
-      } = props;
-      return /* @__PURE__ */ jsx("span", { tabIndex: nonInteractiveTriggerTabIndex, ...spanProps, children: cloneElement(children, {
-        "aria-labelledby": labelId,
-        "aria-describedby": descriptionId
-      }) });
-    }
-  }, [context, ref, children]);
-  if (!element) {
-    throw new Error("Tooltip anchor must be a single valid React element");
-  }
-  return element;
-};
-export {
-  Tooltip
+/**
+* The anchor of the tooltip
+* @param children
+*/
+var TooltipAnchor = ({ children, isTriggerInteractive, nonInteractiveTriggerTabIndex }) => {
+	const context = useTooltipContext();
+	const childrenRef = children?.ref;
+	const ref = useMergeRefs([context.refs.setReference, childrenRef]);
+	const element = useMemo(() => {
+		if (!isValidElement(children)) return;
+		if (isTriggerInteractive) return cloneElement(children, context.getReferenceProps({
+			...typeof children.props === "object" ? children.props : {},
+			ref
+		}));
+		else {
+			const { "aria-labelledby": labelId, "aria-describedby": descriptionId, ...spanProps } = context.getReferenceProps({
+				ref,
+				tabIndex: nonInteractiveTriggerTabIndex
+			});
+			return /* @__PURE__ */ jsx("span", {
+				tabIndex: nonInteractiveTriggerTabIndex,
+				...spanProps,
+				children: cloneElement(children, {
+					"aria-labelledby": labelId,
+					"aria-describedby": descriptionId
+				})
+			});
+		}
+	}, [
+		context,
+		ref,
+		children
+	]);
+	if (!element) throw new Error("Tooltip anchor must be a single valid React element");
+	return element;
 };
-//# sourceMappingURL=Tooltip.js.map
+//#endregion
+export { Tooltip };
+
+//# sourceMappingURL=Tooltip.js.map