boreal-ui 0.0.72 → 0.0.74

package/dist/next/Toolbar-roQbIEcD.cjs

@@ -0,0 +1,190 @@
+"use strict";
+const require$$2 = require("react/jsx-runtime");
+const Avatar = require("./Avatar-DL_juTQA.cjs");
+const React = require("react");
+const classNames = require("./classNames-BcWMx052.cjs");
+const capitalize = require("./capitalize-DoV-nOmN.cjs");
+const borealStyleConfig = require("./boreal-style-config-C1UIwOFN.cjs");
+const noScroll = "_noScroll_1w7wb_109";
+const errorMessage = "_errorMessage_1w7wb_110";
+const loadingContainer = "_loadingContainer_1w7wb_111";
+const hideScrollbar = "_hideScrollbar_1w7wb_103";
+const sr_only = "_sr_only_1w7wb_112";
+const toolbar = "_toolbar_1w7wb_637";
+const primary = "_primary_1w7wb_660";
+const secondary = "_secondary_1w7wb_664";
+const tertiary = "_tertiary_1w7wb_668";
+const quaternary = "_quaternary_1w7wb_672";
+const clear = "_clear_1w7wb_676";
+const section = "_section_1w7wb_681";
+const title = "_title_1w7wb_709";
+const avatarWrapper = "_avatarWrapper_1w7wb_729";
+const roundNone = "_roundNone_1w7wb_739";
+const roundSmall = "_roundSmall_1w7wb_744";
+const roundMedium = "_roundMedium_1w7wb_749";
+const roundLarge = "_roundLarge_1w7wb_754";
+const roundFull = "_roundFull_1w7wb_759";
+const shadowNone = "_shadowNone_1w7wb_764";
+const shadowLight = "_shadowLight_1w7wb_768";
+const shadowMedium = "_shadowMedium_1w7wb_772";
+const shadowStrong = "_shadowStrong_1w7wb_776";
+const shadowIntense = "_shadowIntense_1w7wb_780";
+const spin = "_spin_1w7wb_1";
+const pulse = "_pulse_1w7wb_1";
+const styles = {
+  noScroll,
+  errorMessage,
+  loadingContainer,
+  hideScrollbar,
+  sr_only,
+  toolbar,
+  primary,
+  secondary,
+  tertiary,
+  quaternary,
+  clear,
+  section,
+  title,
+  avatarWrapper,
+  roundNone,
+  roundSmall,
+  roundMedium,
+  roundLarge,
+  roundFull,
+  shadowNone,
+  shadowLight,
+  shadowMedium,
+  shadowStrong,
+  shadowIntense,
+  "fade-in": "_fade-in_1w7wb_1",
+  "slide-up": "_slide-up_1w7wb_1",
+  "spin-3d": "_spin-3d_1w7wb_1",
+  spin,
+  pulse,
+  "fade-in-up": "_fade-in-up_1w7wb_1",
+  "progress-grow": "_progress-grow_1w7wb_1",
+  "indeterminate-move": "_indeterminate-move_1w7wb_1",
+  "skeleton-loading": "_skeleton-loading_1w7wb_1"
+};
+const ToolbarBase = ({
+  title: title2,
+  titleId,
+  left,
+  center,
+  right,
+  avatar,
+  theme = borealStyleConfig.getDefaultTheme(),
+  shadow = borealStyleConfig.getDefaultShadow(),
+  rounding = borealStyleConfig.getDefaultRounding(),
+  className = "",
+  "data-testid": testId = "toolbar",
+  "aria-label": ariaLabelProp,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  leftAriaLabel = "Toolbar left section",
+  centerAriaLabel = "Toolbar center section",
+  rightAriaLabel = "Toolbar right section",
+  AvatarComponent,
+  classMap,
+  "aria-label": ariaLabel = "Toolbar",
+  headingLevel = 1
+}) => {
+  const safeHeading = Math.min(6, Math.max(1, headingLevel));
+  const TitleTag = `h${safeHeading}`;
+  const toolbarClass = React.useMemo(
+    () => classNames.combineClassNames(
+      classMap.toolbar,
+      classMap[theme],
+      className,
+      shadow && classMap[`shadow${capitalize.capitalize(shadow)}`],
+      rounding && classMap[`round${capitalize.capitalize(rounding)}`]
+    ),
+    [classMap, theme, className, shadow, rounding]
+  );
+  const resolvedAriaLabel = ariaLabelledBy ? void 0 : ariaLabelProp ?? ariaLabel;
+  const avatarAriaHidden = avatar && !avatar.name && !avatar.onClick && !avatar["aria-label"] ? true : void 0;
+  const resolvedTitleId = title2 ? titleId ?? `${testId}-title` : void 0;
+  return /* @__PURE__ */ require$$2.jsxs(
+    "div",
+    {
+      className: toolbarClass,
+      role: "toolbar",
+      "aria-orientation": "horizontal",
+      "aria-label": resolvedAriaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ require$$2.jsx(
+          "div",
+          {
+            className: classMap.section,
+            role: "group",
+            "aria-label": leftAriaLabel,
+            "data-testid": `${testId}-left`,
+            children: left
+          }
+        ),
+        /* @__PURE__ */ require$$2.jsxs(
+          "div",
+          {
+            className: classMap.section,
+            role: "group",
+            "aria-label": centerAriaLabel,
+            "data-testid": `${testId}-center`,
+            children: [
+              title2 && /* @__PURE__ */ require$$2.jsx(
+                TitleTag,
+                {
+                  id: resolvedTitleId,
+                  className: classMap.title,
+                  "data-testid": `${testId}-title`,
+                  children: title2
+                }
+              ),
+              center
+            ]
+          }
+        ),
+        /* @__PURE__ */ require$$2.jsxs(
+          "div",
+          {
+            className: classMap.section,
+            role: "group",
+            "aria-label": rightAriaLabel,
+            "data-testid": `${testId}-right`,
+            children: [
+              right,
+              avatar && /* @__PURE__ */ require$$2.jsx(
+                "div",
+                {
+                  className: classMap.avatarWrapper,
+                  "data-testid": `${testId}-avatar`,
+                  children: /* @__PURE__ */ require$$2.jsx(
+                    AvatarComponent,
+                    {
+                      name: avatar.name,
+                      src: avatar.src,
+                      size: avatar.size || "medium",
+                      shape: avatar.shape || "circle",
+                      theme: avatar.theme,
+                      outline: avatar.outline,
+                      onClick: avatar.onClick,
+                      "aria-label": avatar["aria-label"],
+                      "aria-hidden": avatarAriaHidden
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+ToolbarBase.displayName = "ToolbarBase";
+const Toolbar = (props) => /* @__PURE__ */ require$$2.jsx(ToolbarBase, { ...props, AvatarComponent: Avatar.Avatar, classMap: styles });
+Toolbar.displayName = "Toolbar";
+exports.Toolbar = Toolbar;
+//# sourceMappingURL=Toolbar-roQbIEcD.cjs.map

package/dist/next/Toolbar-roQbIEcD.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar-roQbIEcD.cjs","sources":["../../src/components/Toolbar/ToolbarBase.tsx","../../src/components/Toolbar/next/Toolbar.tsx"],"sourcesContent":["import React, { JSX, useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { ToolbarBaseProps } from \"./Toolbar.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst ToolbarBase: React.FC<ToolbarBaseProps> = ({\r\n  title,\r\n  titleId,\r\n  left,\r\n  center,\r\n  right,\r\n  avatar,\r\n  theme = getDefaultTheme(),\r\n  shadow = getDefaultShadow(),\r\n  rounding = getDefaultRounding(),\r\n  className = \"\",\r\n  \"data-testid\": testId = \"toolbar\",\r\n  \"aria-label\": ariaLabelProp,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  leftAriaLabel = \"Toolbar left section\",\r\n  centerAriaLabel = \"Toolbar center section\",\r\n  rightAriaLabel = \"Toolbar right section\",\r\n  AvatarComponent,\r\n  classMap,\r\n  \"aria-label\": ariaLabel = \"Toolbar\",\r\n  headingLevel = 1,\r\n}): JSX.Element => {\r\n  const safeHeading = Math.min(6, Math.max(1, headingLevel));\r\n  const TitleTag = `h${safeHeading}` as keyof JSX.IntrinsicElements;\r\n\r\n  const toolbarClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.toolbar,\r\n        classMap[theme],\r\n        className,\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n      ),\r\n    [classMap, theme, className, shadow, rounding],\r\n  );\r\n\r\n  const resolvedAriaLabel = ariaLabelledBy\r\n    ? undefined\r\n    : (ariaLabelProp ?? ariaLabel);\r\n\r\n  const avatarAriaHidden =\r\n    avatar && !avatar.name && !avatar.onClick && !avatar[\"aria-label\"]\r\n      ? true\r\n      : undefined;\r\n\r\n  const resolvedTitleId = title ? (titleId ?? `${testId}-title`) : undefined;\r\n\r\n  return (\r\n    <div\r\n      className={toolbarClass}\r\n      role=\"toolbar\"\r\n      aria-orientation=\"horizontal\"\r\n      aria-label={resolvedAriaLabel}\r\n      aria-labelledby={ariaLabelledBy}\r\n      aria-describedby={ariaDescribedBy}\r\n      data-testid={testId}\r\n    >\r\n      <div\r\n        className={classMap.section}\r\n        role=\"group\"\r\n        aria-label={leftAriaLabel}\r\n        data-testid={`${testId}-left`}\r\n      >\r\n        {left}\r\n      </div>\r\n\r\n      <div\r\n        className={classMap.section}\r\n        role=\"group\"\r\n        aria-label={centerAriaLabel}\r\n        data-testid={`${testId}-center`}\r\n      >\r\n        {title && (\r\n          <TitleTag\r\n            id={resolvedTitleId}\r\n            className={classMap.title}\r\n            data-testid={`${testId}-title`}\r\n          >\r\n            {title}\r\n          </TitleTag>\r\n        )}\r\n        {center}\r\n      </div>\r\n\r\n      <div\r\n        className={classMap.section}\r\n        role=\"group\"\r\n        aria-label={rightAriaLabel}\r\n        data-testid={`${testId}-right`}\r\n      >\r\n        {right}\r\n        {avatar && (\r\n          <div\r\n            className={classMap.avatarWrapper}\r\n            data-testid={`${testId}-avatar`}\r\n          >\r\n            <AvatarComponent\r\n              name={avatar.name}\r\n              src={avatar.src}\r\n              size={avatar.size || \"medium\"}\r\n              shape={avatar.shape || \"circle\"}\r\n              theme={avatar.theme}\r\n              outline={avatar.outline}\r\n              onClick={avatar.onClick}\r\n              aria-label={avatar[\"aria-label\"]}\r\n              aria-hidden={avatarAriaHidden}\r\n            />\r\n          </div>\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nToolbarBase.displayName = \"ToolbarBase\";\r\nexport default ToolbarBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport styles from \"./Toolbar.module.scss\";\r\nimport Avatar from \"../../Avatar/next/Avatar\";\r\nimport ToolbarBase from \"../ToolbarBase\";\r\nimport { ToolbarProps } from \"../Toolbar.types\";\r\n\r\nconst Toolbar: React.FC<ToolbarProps> = (props) => (\r\n  <ToolbarBase {...props} AvatarComponent={Avatar} classMap={styles} />\r\n);\r\nToolbar.displayName = \"Toolbar\";\r\nexport default Toolbar;\r\n"],"names":["title","getDefaultTheme","getDefaultShadow","getDefaultRounding","useMemo","combineClassNames","capitalize","jsxs","jsx","Avatar"],"mappings":"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"}

package/dist/next/Toolbar.cjs.js

@@ -1,4 +1,4 @@
 "use strict";
-const Toolbar = require("./Toolbar-C5uFJJ9N.cjs");
+const Toolbar = require("./Toolbar-roQbIEcD.cjs");
 module.exports = Toolbar.Toolbar;
 //# sourceMappingURL=Toolbar.cjs.js.map

package/dist/next/Toolbar.js

@@ -1,4 +1,4 @@
-import { T } from "./Toolbar-CIm4HBqd.js";
+import { T } from "./Toolbar-Be-YQqmX.js";
 export {
   T as default
 };

package/dist/next/Tooltip-DVI61ebD.cjs

@@ -0,0 +1,214 @@
+"use strict";
+const require$$2 = require("react/jsx-runtime");
+const React = require("react");
+const classNames = require("./classNames-BcWMx052.cjs");
+const capitalize = require("./capitalize-DoV-nOmN.cjs");
+const borealStyleConfig = require("./boreal-style-config-C1UIwOFN.cjs");
+const noScroll = "_noScroll_142th_109";
+const errorMessage = "_errorMessage_142th_110";
+const loadingContainer = "_loadingContainer_142th_111";
+const hideScrollbar = "_hideScrollbar_142th_103";
+const sr_only = "_sr_only_142th_112";
+const container = "_container_142th_637";
+const tooltip = "_tooltip_142th_641";
+const top = "_top_142th_688";
+const bottom = "_bottom_142th_700";
+const left = "_left_142th_712";
+const right = "_right_142th_724";
+const primary = "_primary_142th_736";
+const secondary = "_secondary_142th_753";
+const tertiary = "_tertiary_142th_770";
+const quaternary = "_quaternary_142th_787";
+const clear = "_clear_142th_804";
+const success = "_success_142th_821";
+const error = "_error_142th_110";
+const warning = "_warning_142th_855";
+const roundNone = "_roundNone_142th_891";
+const roundSmall = "_roundSmall_142th_895";
+const roundMedium = "_roundMedium_142th_899";
+const roundLarge = "_roundLarge_142th_903";
+const roundFull = "_roundFull_142th_907";
+const shadowNone = "_shadowNone_142th_911";
+const shadowLight = "_shadowLight_142th_915";
+const shadowMedium = "_shadowMedium_142th_919";
+const shadowStrong = "_shadowStrong_142th_923";
+const shadowIntense = "_shadowIntense_142th_927";
+const spin = "_spin_142th_1";
+const pulse = "_pulse_142th_1";
+const styles = {
+  noScroll,
+  errorMessage,
+  loadingContainer,
+  hideScrollbar,
+  sr_only,
+  container,
+  tooltip,
+  top,
+  bottom,
+  left,
+  right,
+  primary,
+  secondary,
+  tertiary,
+  quaternary,
+  clear,
+  success,
+  error,
+  warning,
+  roundNone,
+  roundSmall,
+  roundMedium,
+  roundLarge,
+  roundFull,
+  shadowNone,
+  shadowLight,
+  shadowMedium,
+  shadowStrong,
+  shadowIntense,
+  "fade-in": "_fade-in_142th_1",
+  "slide-up": "_slide-up_142th_1",
+  "spin-3d": "_spin-3d_142th_1",
+  spin,
+  pulse,
+  "fade-in-up": "_fade-in-up_142th_1",
+  "progress-grow": "_progress-grow_142th_1",
+  "indeterminate-move": "_indeterminate-move_142th_1",
+  "skeleton-loading": "_skeleton-loading_142th_1"
+};
+function mergeIds(...values) {
+  return values.filter(Boolean).join(" ") || void 0;
+}
+function callAll(...handlers) {
+  return (event) => {
+    handlers.forEach((handler) => handler == null ? void 0 : handler(event));
+  };
+}
+const TooltipBase = React.forwardRef(function TooltipBase2({
+  content,
+  position = "top",
+  theme = borealStyleConfig.getDefaultTheme(),
+  rounding = borealStyleConfig.getDefaultRounding(),
+  shadow = borealStyleConfig.getDefaultShadow(),
+  state = "",
+  children,
+  className = "",
+  id,
+  triggerId,
+  triggerAriaLabel,
+  triggerAriaLabelledBy,
+  triggerAriaDescribedBy,
+  keepMountedWhenHidden = true,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "data-testid": testId = "tooltip",
+  classMap,
+  ...rest
+}, ref) {
+  const generatedId = React.useId();
+  const tooltipId = id ?? generatedId;
+  const [visible, setVisible] = React.useState(false);
+  const show = () => setVisible(true);
+  const hide = () => setVisible(false);
+  React.useEffect(() => {
+    if (!visible) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") hide();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [visible]);
+  const toolTipClassName = React.useMemo(
+    () => classNames.combineClassNames(
+      classMap.tooltip,
+      classMap[position],
+      classMap[theme],
+      classMap[state],
+      visible && classMap.visible,
+      shadow && classMap[`shadow${capitalize.capitalize(shadow)}`],
+      rounding && classMap[`round${capitalize.capitalize(rounding)}`]
+    ),
+    [classMap, position, theme, state, visible, shadow, rounding]
+  );
+  let trigger;
+  if (React.isValidElement(children)) {
+    const child = children;
+    const childProps = child.props;
+    const isNaturallyFocusable = typeof child.type === "string" && ["a", "button", "input", "textarea", "select"].includes(child.type);
+    const maybeTabIndex = isNaturallyFocusable || childProps.tabIndex !== void 0 ? {} : { tabIndex: 0 };
+    const mergedAriaDescribedBy = mergeIds(
+      childProps["aria-describedby"],
+      triggerAriaDescribedBy,
+      visible ? tooltipId : void 0
+    );
+    trigger = React.cloneElement(child, {
+      ...maybeTabIndex,
+      id: triggerId ?? childProps.id,
+      "aria-label": triggerAriaLabel ?? childProps["aria-label"],
+      "aria-labelledby": triggerAriaLabelledBy ?? childProps["aria-labelledby"],
+      "aria-describedby": mergedAriaDescribedBy,
+      "data-testid": `${testId}-trigger`,
+      onMouseEnter: callAll(
+        childProps.onMouseEnter,
+        show
+      ),
+      onMouseLeave: callAll(
+        childProps.onMouseLeave,
+        hide
+      ),
+      onFocus: callAll(childProps.onFocus, show),
+      onBlur: callAll(childProps.onBlur, hide)
+    });
+  } else {
+    trigger = /* @__PURE__ */ require$$2.jsx(
+      "span",
+      {
+        id: triggerId,
+        tabIndex: 0,
+        className: classMap.triggerWrapper,
+        "aria-label": triggerAriaLabel,
+        "aria-labelledby": triggerAriaLabelledBy,
+        "aria-describedby": mergeIds(
+          triggerAriaDescribedBy,
+          visible ? tooltipId : void 0
+        ),
+        "data-testid": `${testId}-trigger`,
+        onMouseEnter: show,
+        onMouseLeave: hide,
+        onFocus: show,
+        onBlur: hide,
+        children
+      }
+    );
+  }
+  const shouldRenderTooltip = keepMountedWhenHidden || visible;
+  return /* @__PURE__ */ require$$2.jsxs(
+    "div",
+    {
+      className: classNames.combineClassNames(classMap.container, className),
+      "data-testid": `${testId}-container`,
+      children: [
+        trigger,
+        shouldRenderTooltip && /* @__PURE__ */ require$$2.jsx(
+          "div",
+          {
+            ref,
+            id: tooltipId,
+            className: toolTipClassName,
+            role: "tooltip",
+            "aria-hidden": !visible,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "data-testid": testId,
+            ...rest,
+            children: content
+          }
+        )
+      ]
+    }
+  );
+});
+TooltipBase.displayName = "TooltipBase";
+const Tooltip = React.forwardRef((props, ref) => /* @__PURE__ */ require$$2.jsx(TooltipBase, { ...props, ref, classMap: styles }));
+Tooltip.displayName = "Tooltip";
+exports.Tooltip = Tooltip;
+//# sourceMappingURL=Tooltip-DVI61ebD.cjs.map

package/dist/next/Tooltip-DVI61ebD.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip-DVI61ebD.cjs","sources":["../../src/components/Tooltip/TooltipBase.tsx","../../src/components/Tooltip/next/Tooltip.tsx"],"sourcesContent":["import React, {\r\n  forwardRef,\r\n  useEffect,\r\n  useId,\r\n  useMemo,\r\n  useState,\r\n  isValidElement,\r\n  cloneElement,\r\n} from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { TooltipProps, TriggerElementProps } from \"./Tooltip.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nfunction mergeIds(...values: Array<string | undefined>) {\r\n  return values.filter(Boolean).join(\" \") || undefined;\r\n}\r\n\r\nfunction callAll<E>(...handlers: Array<((event: E) => void) | undefined>) {\r\n  return (event: E) => {\r\n    handlers.forEach((handler) => handler?.(event));\r\n  };\r\n}\r\n\r\nconst TooltipBase = forwardRef<\r\n  HTMLDivElement,\r\n  TooltipProps & { classMap: Record<string, string> }\r\n>(function TooltipBase(\r\n  {\r\n    content,\r\n    position = \"top\",\r\n    theme = getDefaultTheme(),\r\n    rounding = getDefaultRounding(),\r\n    shadow = getDefaultShadow(),\r\n    state = \"\",\r\n    children,\r\n    className = \"\",\r\n    id,\r\n    triggerId,\r\n    triggerAriaLabel,\r\n    triggerAriaLabelledBy,\r\n    triggerAriaDescribedBy,\r\n    keepMountedWhenHidden = true,\r\n    \"aria-label\": ariaLabel,\r\n    \"aria-labelledby\": ariaLabelledBy,\r\n    \"data-testid\": testId = \"tooltip\",\r\n    classMap,\r\n    ...rest\r\n  },\r\n  ref,\r\n) {\r\n  const generatedId = useId();\r\n  const tooltipId = id ?? generatedId;\r\n\r\n  const [visible, setVisible] = useState(false);\r\n\r\n  const show = () => setVisible(true);\r\n  const hide = () => setVisible(false);\r\n\r\n  useEffect(() => {\r\n    if (!visible) return;\r\n\r\n    const onKey = (e: KeyboardEvent) => {\r\n      if (e.key === \"Escape\") hide();\r\n    };\r\n\r\n    document.addEventListener(\"keydown\", onKey);\r\n    return () => document.removeEventListener(\"keydown\", onKey);\r\n  }, [visible]);\r\n\r\n  const toolTipClassName = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.tooltip,\r\n        classMap[position],\r\n        classMap[theme],\r\n        classMap[state],\r\n        visible && classMap.visible,\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n      ),\r\n    [classMap, position, theme, state, visible, shadow, rounding],\r\n  );\r\n\r\n  let trigger: React.ReactNode;\r\n\r\n  if (isValidElement(children)) {\r\n    const child = children as React.ReactElement<TriggerElementProps>;\r\n    const childProps = child.props;\r\n\r\n    const isNaturallyFocusable =\r\n      typeof child.type === \"string\" &&\r\n      [\"a\", \"button\", \"input\", \"textarea\", \"select\"].includes(child.type);\r\n\r\n    const maybeTabIndex =\r\n      isNaturallyFocusable || childProps.tabIndex !== undefined\r\n        ? {}\r\n        : { tabIndex: 0 };\r\n\r\n    const mergedAriaDescribedBy = mergeIds(\r\n      childProps[\"aria-describedby\"],\r\n      triggerAriaDescribedBy,\r\n      visible ? tooltipId : undefined,\r\n    );\r\n\r\n    trigger = cloneElement(child, {\r\n      ...maybeTabIndex,\r\n      id: triggerId ?? childProps.id,\r\n      \"aria-label\": triggerAriaLabel ?? childProps[\"aria-label\"],\r\n      \"aria-labelledby\": triggerAriaLabelledBy ?? childProps[\"aria-labelledby\"],\r\n      \"aria-describedby\": mergedAriaDescribedBy,\r\n      \"data-testid\": `${testId}-trigger`,\r\n      onMouseEnter: callAll<React.MouseEvent<HTMLElement>>(\r\n        childProps.onMouseEnter,\r\n        show,\r\n      ),\r\n      onMouseLeave: callAll<React.MouseEvent<HTMLElement>>(\r\n        childProps.onMouseLeave,\r\n        hide,\r\n      ),\r\n      onFocus: callAll<React.FocusEvent<HTMLElement>>(childProps.onFocus, show),\r\n      onBlur: callAll<React.FocusEvent<HTMLElement>>(childProps.onBlur, hide),\r\n    });\r\n  } else {\r\n    trigger = (\r\n      <span\r\n        id={triggerId}\r\n        tabIndex={0}\r\n        className={classMap.triggerWrapper}\r\n        aria-label={triggerAriaLabel}\r\n        aria-labelledby={triggerAriaLabelledBy}\r\n        aria-describedby={mergeIds(\r\n          triggerAriaDescribedBy,\r\n          visible ? tooltipId : undefined,\r\n        )}\r\n        data-testid={`${testId}-trigger`}\r\n        onMouseEnter={show}\r\n        onMouseLeave={hide}\r\n        onFocus={show}\r\n        onBlur={hide}\r\n      >\r\n        {children}\r\n      </span>\r\n    );\r\n  }\r\n\r\n  const shouldRenderTooltip = keepMountedWhenHidden || visible;\r\n\r\n  return (\r\n    <div\r\n      className={combineClassNames(classMap.container, className)}\r\n      data-testid={`${testId}-container`}\r\n    >\r\n      {trigger}\r\n\r\n      {shouldRenderTooltip && (\r\n        <div\r\n          ref={ref}\r\n          id={tooltipId}\r\n          className={toolTipClassName}\r\n          role=\"tooltip\"\r\n          aria-hidden={!visible}\r\n          aria-label={ariaLabel}\r\n          aria-labelledby={ariaLabelledBy}\r\n          data-testid={testId}\r\n          {...rest}\r\n        >\r\n          {content}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n});\r\n\r\nTooltipBase.displayName = \"TooltipBase\";\r\nexport default TooltipBase;\r\n","\"use client\";\r\n\r\nimport { forwardRef } from \"react\";\r\nimport styles from \"./Tooltip.module.scss\";\r\nimport TooltipBase from \"../TooltipBase\";\r\nimport { TooltipProps } from \"../Tooltip.types\";\r\n\r\nconst Tooltip = forwardRef<HTMLDivElement, TooltipProps>((props, ref) => (\r\n  <TooltipBase {...props} ref={ref} classMap={styles} />\r\n));\r\n\r\nTooltip.displayName = \"Tooltip\";\r\n\r\nexport default Tooltip;\r\n"],"names":["forwardRef","TooltipBase","getDefaultTheme","getDefaultRounding","getDefaultShadow","useId","useState","useEffect","useMemo","combineClassNames","capitalize","isValidElement","cloneElement","jsx","jsxs"],"mappings":"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"}

package/dist/next/Tooltip-lxpnIfpO.js

@@ -0,0 +1,215 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState, useEffect, useMemo, isValidElement, cloneElement } from "react";
+import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
+import { c as capitalize } from "./capitalize-C0TSQSPh.js";
+import { d as getDefaultTheme, a as getDefaultRounding, b as getDefaultShadow } from "./boreal-style-config-DsaRlxmw.js";
+const noScroll = "_noScroll_142th_109";
+const errorMessage = "_errorMessage_142th_110";
+const loadingContainer = "_loadingContainer_142th_111";
+const hideScrollbar = "_hideScrollbar_142th_103";
+const sr_only = "_sr_only_142th_112";
+const container = "_container_142th_637";
+const tooltip = "_tooltip_142th_641";
+const top = "_top_142th_688";
+const bottom = "_bottom_142th_700";
+const left = "_left_142th_712";
+const right = "_right_142th_724";
+const primary = "_primary_142th_736";
+const secondary = "_secondary_142th_753";
+const tertiary = "_tertiary_142th_770";
+const quaternary = "_quaternary_142th_787";
+const clear = "_clear_142th_804";
+const success = "_success_142th_821";
+const error = "_error_142th_110";
+const warning = "_warning_142th_855";
+const roundNone = "_roundNone_142th_891";
+const roundSmall = "_roundSmall_142th_895";
+const roundMedium = "_roundMedium_142th_899";
+const roundLarge = "_roundLarge_142th_903";
+const roundFull = "_roundFull_142th_907";
+const shadowNone = "_shadowNone_142th_911";
+const shadowLight = "_shadowLight_142th_915";
+const shadowMedium = "_shadowMedium_142th_919";
+const shadowStrong = "_shadowStrong_142th_923";
+const shadowIntense = "_shadowIntense_142th_927";
+const spin = "_spin_142th_1";
+const pulse = "_pulse_142th_1";
+const styles = {
+  noScroll,
+  errorMessage,
+  loadingContainer,
+  hideScrollbar,
+  sr_only,
+  container,
+  tooltip,
+  top,
+  bottom,
+  left,
+  right,
+  primary,
+  secondary,
+  tertiary,
+  quaternary,
+  clear,
+  success,
+  error,
+  warning,
+  roundNone,
+  roundSmall,
+  roundMedium,
+  roundLarge,
+  roundFull,
+  shadowNone,
+  shadowLight,
+  shadowMedium,
+  shadowStrong,
+  shadowIntense,
+  "fade-in": "_fade-in_142th_1",
+  "slide-up": "_slide-up_142th_1",
+  "spin-3d": "_spin-3d_142th_1",
+  spin,
+  pulse,
+  "fade-in-up": "_fade-in-up_142th_1",
+  "progress-grow": "_progress-grow_142th_1",
+  "indeterminate-move": "_indeterminate-move_142th_1",
+  "skeleton-loading": "_skeleton-loading_142th_1"
+};
+function mergeIds(...values) {
+  return values.filter(Boolean).join(" ") || void 0;
+}
+function callAll(...handlers) {
+  return (event) => {
+    handlers.forEach((handler) => handler == null ? void 0 : handler(event));
+  };
+}
+const TooltipBase = forwardRef(function TooltipBase2({
+  content,
+  position = "top",
+  theme = getDefaultTheme(),
+  rounding = getDefaultRounding(),
+  shadow = getDefaultShadow(),
+  state = "",
+  children,
+  className = "",
+  id,
+  triggerId,
+  triggerAriaLabel,
+  triggerAriaLabelledBy,
+  triggerAriaDescribedBy,
+  keepMountedWhenHidden = true,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "data-testid": testId = "tooltip",
+  classMap,
+  ...rest
+}, ref) {
+  const generatedId = useId();
+  const tooltipId = id ?? generatedId;
+  const [visible, setVisible] = useState(false);
+  const show = () => setVisible(true);
+  const hide = () => setVisible(false);
+  useEffect(() => {
+    if (!visible) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") hide();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [visible]);
+  const toolTipClassName = useMemo(
+    () => combineClassNames(
+      classMap.tooltip,
+      classMap[position],
+      classMap[theme],
+      classMap[state],
+      visible && classMap.visible,
+      shadow && classMap[`shadow${capitalize(shadow)}`],
+      rounding && classMap[`round${capitalize(rounding)}`]
+    ),
+    [classMap, position, theme, state, visible, shadow, rounding]
+  );
+  let trigger;
+  if (isValidElement(children)) {
+    const child = children;
+    const childProps = child.props;
+    const isNaturallyFocusable = typeof child.type === "string" && ["a", "button", "input", "textarea", "select"].includes(child.type);
+    const maybeTabIndex = isNaturallyFocusable || childProps.tabIndex !== void 0 ? {} : { tabIndex: 0 };
+    const mergedAriaDescribedBy = mergeIds(
+      childProps["aria-describedby"],
+      triggerAriaDescribedBy,
+      visible ? tooltipId : void 0
+    );
+    trigger = cloneElement(child, {
+      ...maybeTabIndex,
+      id: triggerId ?? childProps.id,
+      "aria-label": triggerAriaLabel ?? childProps["aria-label"],
+      "aria-labelledby": triggerAriaLabelledBy ?? childProps["aria-labelledby"],
+      "aria-describedby": mergedAriaDescribedBy,
+      "data-testid": `${testId}-trigger`,
+      onMouseEnter: callAll(
+        childProps.onMouseEnter,
+        show
+      ),
+      onMouseLeave: callAll(
+        childProps.onMouseLeave,
+        hide
+      ),
+      onFocus: callAll(childProps.onFocus, show),
+      onBlur: callAll(childProps.onBlur, hide)
+    });
+  } else {
+    trigger = /* @__PURE__ */ jsx(
+      "span",
+      {
+        id: triggerId,
+        tabIndex: 0,
+        className: classMap.triggerWrapper,
+        "aria-label": triggerAriaLabel,
+        "aria-labelledby": triggerAriaLabelledBy,
+        "aria-describedby": mergeIds(
+          triggerAriaDescribedBy,
+          visible ? tooltipId : void 0
+        ),
+        "data-testid": `${testId}-trigger`,
+        onMouseEnter: show,
+        onMouseLeave: hide,
+        onFocus: show,
+        onBlur: hide,
+        children
+      }
+    );
+  }
+  const shouldRenderTooltip = keepMountedWhenHidden || visible;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: combineClassNames(classMap.container, className),
+      "data-testid": `${testId}-container`,
+      children: [
+        trigger,
+        shouldRenderTooltip && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref,
+            id: tooltipId,
+            className: toolTipClassName,
+            role: "tooltip",
+            "aria-hidden": !visible,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "data-testid": testId,
+            ...rest,
+            children: content
+          }
+        )
+      ]
+    }
+  );
+});
+TooltipBase.displayName = "TooltipBase";
+const Tooltip = forwardRef((props, ref) => /* @__PURE__ */ jsx(TooltipBase, { ...props, ref, classMap: styles }));
+Tooltip.displayName = "Tooltip";
+export {
+  Tooltip as T
+};
+//# sourceMappingURL=Tooltip-lxpnIfpO.js.map