@easypost/easy-ui 1.0.0-alpha.5 → 1.0.0-alpha.6

package/Theme/index.mjs

@@ -1,11 +1,147 @@
-import { T, c, d, g } from "../__chunks__/Theme-123ba2c3.mjs";
-import "react";
-import "../__chunks__/tokens-6be8e137.mjs";
-import "../utilities/tokens.mjs";
-import "../utilities/css.mjs";
+import React__default, { createContext, useContext, useState, useMemo } from "react";
+import { e as ezuiTokens } from "../__chunks__/tokens-6be8e137.mjs";
+import { getTokenAliases } from "../utilities/tokens.mjs";
+import { tokenSafeKebabCase } from "../utilities/css.mjs";
+const defaultTheme = createTheme(() => {
+  return getThemeFromTokens("theme.base");
+});
+const invertedColorSchemes = {
+  light: "dark",
+  dark: "light",
+  system: "inverted",
+  inverted: "system"
+};
+function NoopComponent(props) {
+  return React__default.createElement(React__default.Fragment, null, props.children);
+}
+const TrackerContext = createContext(0);
+const ThemeContext = createContext(null);
+const ColorSchemeContext = createContext(null);
+function ThemeProvider({ children, colorScheme: colorSchemeFromUser, theme: themeFromUser }) {
+  const parentTheme = useContext(ThemeContext);
+  const isRoot = !parentTheme;
+  if (!isRoot && !themeFromUser && !colorSchemeFromUser) {
+    throw new Error("Must supply theme or colorScheme to ThemeProvider");
+  }
+  const parentContext = useContext(TrackerContext);
+  const [count] = useState(() => parentContext + 1);
+  const ThemeContextComponent = isRoot || themeFromUser ? ThemeContextProvider : NoopComponent;
+  const ColorSchemeContextComponent = isRoot || colorSchemeFromUser ? ColorSchemeContextProvider : NoopComponent;
+  const theme = themeFromUser ? themeFromUser : defaultTheme;
+  const colorScheme = colorSchemeFromUser ? colorSchemeFromUser : "system";
+  return React__default.createElement(TrackerContext.Provider, {
+    value: count
+  }, React__default.createElement(ThemeContextComponent, {
+    theme
+  }, React__default.createElement(ColorSchemeContextComponent, {
+    colorScheme
+  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(Style, {
+    isRoot
+  }), children))));
+}
+function createTheme(themeCreator) {
+  return themeCreator;
+}
+function useTheme() {
+  const themeContext = useContext(ThemeContext);
+  if (!themeContext) {
+    throw new Error("useTheme() must be used within a ThemeProvier");
+  }
+  return themeContext;
+}
+function useColorScheme() {
+  const colorSchemeContext = useContext(ColorSchemeContext);
+  if (!colorSchemeContext) {
+    throw new Error("useColorScheme() must be used within a ThemeProvider");
+  }
+  return colorSchemeContext;
+}
+function Style({ isRoot }) {
+  const parentContext = useContext(TrackerContext);
+  const themeCreator = useTheme();
+  const { resolvedColorScheme } = useColorScheme();
+  const fingerprint = useMemo(() => {
+    return `ezui-theme-style-level-${parentContext}`;
+  }, [parentContext]);
+  const selector = isRoot ? ":root" : `#${fingerprint} ~ *`;
+  const css = useMemo(() => {
+    return resolvedColorScheme === "system" ? `${selector} {
+        ${renderThemeVariables(themeCreator({
+      colorScheme: "light"
+    }))}
+      }
+      @media (prefers-color-scheme: dark) {
+        ${selector} {
+          ${renderThemeVariables(themeCreator({
+      colorScheme: "dark"
+    }))}
+        }
+      }` : resolvedColorScheme === "inverted" ? `${selector} {
+        ${renderThemeVariables(themeCreator({
+      colorScheme: "dark"
+    }))}
+      }
+      @media (prefers-color-scheme: dark) {
+        ${selector} {
+          ${renderThemeVariables(themeCreator({
+      colorScheme: "light"
+    }))}
+        }
+      }` : `${selector} {
+        ${renderThemeVariables(themeCreator({
+      colorScheme: resolvedColorScheme
+    }))}
+      }`;
+  }, [resolvedColorScheme, selector, themeCreator]);
+  return React__default.createElement("style", {
+    id: fingerprint,
+    dangerouslySetInnerHTML: {
+      __html: css
+    }
+  });
+}
+function ThemeContextProvider({ theme, children }) {
+  return React__default.createElement(ThemeContext.Provider, {
+    value: theme
+  }, children);
+}
+function ColorSchemeContextProvider({ colorScheme, children }) {
+  const parentColorSchemeContext = useContext(ColorSchemeContext);
+  const colorSchemeContextValue = useMemo(() => {
+    const resolvedColorScheme = colorScheme === "inverted" && parentColorSchemeContext ? invertedColorSchemes[parentColorSchemeContext.resolvedColorScheme] : colorScheme;
+    return {
+      userColorScheme: colorScheme,
+      resolvedColorScheme
+    };
+  }, [colorScheme, parentColorSchemeContext]);
+  return React__default.createElement(ColorSchemeContext.Provider, {
+    value: colorSchemeContextValue
+  }, children);
+}
+function getThemeInstanceVariables(theme) {
+  return Object.fromEntries(Object.entries(theme).map(([key, value]) => {
+    const property = tokenSafeKebabCase(key);
+    return [`--ezui-t-${property}`, value];
+  }));
+}
+function renderThemeVariables(theme) {
+  const variables = getThemeInstanceVariables(theme);
+  const css = Object.entries(variables).map((entry) => entry.join(": ") + ";").join("\n");
+  return css;
+}
+function getThemeFromTokens(prefix) {
+  const theme = Object.fromEntries(Object.keys(ezuiTokens).filter((key) => key.startsWith(`${prefix}.`)).map((key) => key.replace(new RegExp(`^${prefix}.`), "")).map((key) => {
+    const value = `var(--ezui-${tokenSafeKebabCase(prefix)}-${tokenSafeKebabCase(key)})`;
+    return [key, value];
+  }));
+  return theme;
+}
+function getThemeTokenAliases(pattern) {
+  return getTokenAliases(getThemeFromTokens("theme.base"), pattern);
+}
 export {
-  T as ThemeProvider,
-  c as createTheme,
-  d as defaultTheme,
-  g as getThemeTokenAliases
+  ThemeProvider,
+  createTheme,
+  defaultTheme,
+  getThemeTokenAliases
 };

package/Toggle/index.js

@@ -20,10 +20,10 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const Text = require("../__chunks__/Text-2efbe1fe.js");
+const Text_index = require("../Text/index.js");
 const utilities_css = require("../utilities/css.js");
-const _import = require("../__chunks__/import-d52cd5cf.js");
-const _import$1 = require("../__chunks__/import-9581a2dc.js");
+const _import = require("../__chunks__/import-8b6c0bc7.js");
+const _import$1 = require("../__chunks__/import-2b302763.js");
 const _import$2 = require("../__chunks__/import-a1e0f814.js");
 require("../__chunks__/import-dea5a24d.js");
 function $b418ec0c85c52f27$export$d853f7095ae95f88(props, state, ref) {
@@ -39,13 +39,13 @@ function $b418ec0c85c52f27$export$d853f7095ae95f88(props, state, ref) {
     isReadOnly
   };
 }
-const Switch$1 = "_Switch_15f7j_5";
-const focusVisible = "_focusVisible_15f7j_13";
-const track = "_track_15f7j_25";
-const thumb = "_thumb_15f7j_29";
-const hovered = "_hovered_15f7j_33";
-const disabled = "_disabled_15f7j_33";
-const selected = "_selected_15f7j_37";
+const Switch$1 = "_Switch_1au2a_5";
+const focusVisible = "_focusVisible_1au2a_13";
+const track = "_track_1au2a_25";
+const thumb = "_thumb_1au2a_29";
+const hovered = "_hovered_1au2a_33";
+const disabled = "_disabled_1au2a_33";
+const selected = "_selected_1au2a_37";
 const styles$1 = {
   Switch: Switch$1,
   focusVisible,
@@ -78,9 +78,9 @@ function Switch(props) {
     r: 6
   })));
 }
-const Toggle$1 = "_Toggle_1v378_5";
-const text = "_text_1v378_24";
-const input = "_input_1v378_25";
+const Toggle$1 = "_Toggle_sl5qh_5";
+const text = "_text_sl5qh_24";
+const input = "_input_sl5qh_25";
 const styles = {
   Toggle: Toggle$1,
   text,
@@ -111,7 +111,7 @@ function Toggle(props) {
     isSelected
   }), children && React.createElement("span", {
     className: styles.text
-  }, React.createElement(Text.Text, {
+  }, React.createElement(Text_index.Text, {
     variant: "body1",
     color: textColor
   }, children)));

package/Toggle/index.mjs

@@ -18,11 +18,11 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import React__default from "react";
-import { T as Text } from "../__chunks__/Text-ec2b8d8a.mjs";
+import { Text } from "../Text/index.mjs";
 import { classNames } from "../utilities/css.mjs";
-import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577, a as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../__chunks__/import-9c958e32.mjs";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f, a as $6179b936705e76d3$export$ae780daf29e6d456 } from "../__chunks__/import-a6cadfe8.mjs";
-import { $ as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../__chunks__/import-fbe7cc7e.mjs";
+import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577, a as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../__chunks__/import-0561e1ba.mjs";
+import { e as $f7dceffc5ad7768b$export$4e328f61c538687f, f as $6179b936705e76d3$export$ae780daf29e6d456 } from "../__chunks__/import-3d962a94.mjs";
+import { a as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../__chunks__/import-19bc38ac.mjs";
 import "../__chunks__/import-6a831ca1.mjs";
 function $b418ec0c85c52f27$export$d853f7095ae95f88(props, state, ref) {
   let { inputProps, isSelected, isPressed, isDisabled, isReadOnly } = $d2c8e2b0480f3f34$export$cbe85ee05b554577(props, state, ref);
@@ -37,13 +37,13 @@ function $b418ec0c85c52f27$export$d853f7095ae95f88(props, state, ref) {
     isReadOnly
   };
 }
-const Switch$1 = "_Switch_15f7j_5";
-const focusVisible = "_focusVisible_15f7j_13";
-const track = "_track_15f7j_25";
-const thumb = "_thumb_15f7j_29";
-const hovered = "_hovered_15f7j_33";
-const disabled = "_disabled_15f7j_33";
-const selected = "_selected_15f7j_37";
+const Switch$1 = "_Switch_1au2a_5";
+const focusVisible = "_focusVisible_1au2a_13";
+const track = "_track_1au2a_25";
+const thumb = "_thumb_1au2a_29";
+const hovered = "_hovered_1au2a_33";
+const disabled = "_disabled_1au2a_33";
+const selected = "_selected_1au2a_37";
 const styles$1 = {
   Switch: Switch$1,
   focusVisible,
@@ -76,9 +76,9 @@ function Switch(props) {
     r: 6
   })));
 }
-const Toggle$1 = "_Toggle_1v378_5";
-const text = "_text_1v378_24";
-const input = "_input_1v378_25";
+const Toggle$1 = "_Toggle_sl5qh_5";
+const text = "_text_sl5qh_24";
+const input = "_input_sl5qh_25";
 const styles = {
   Toggle: Toggle$1,
   text,

package/Tooltip/index.js

@@ -1,13 +1,302 @@
 "use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Tooltip = require("../__chunks__/Tooltip-c5076ca7.js");
-require("react");
-require("../__chunks__/Text-2efbe1fe.js");
-require("../utilities/css.js");
-require("../__chunks__/import-87c465c9.js");
-require("../__chunks__/import-a1e0f814.js");
-require("../__chunks__/import-9581a2dc.js");
+const React = require("react");
+const Text_index = require("../Text/index.js");
+const utilities_css = require("../utilities/css.js");
+const _import$2 = require("../__chunks__/import-a2023d8f.js");
+const _import = require("../__chunks__/import-a1e0f814.js");
+const _import$1 = require("../__chunks__/import-2b302763.js");
 require("react-dom");
 require("../__chunks__/import-dea5a24d.js");
 require("../__chunks__/real-module-e36b1436.js");
-exports.Tooltip = Tooltip.Tooltip;
+function $326e436e94273fe1$export$1c4b08e0eca38426(props, state) {
+  let domProps = _import.$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+    labelable: true
+  });
+  let { hoverProps } = _import$1.$6179b936705e76d3$export$ae780daf29e6d456({
+    onHoverStart: () => {
+      return state === null || state === void 0 ? void 0 : state.open(true);
+    },
+    onHoverEnd: () => {
+      return state === null || state === void 0 ? void 0 : state.close();
+    }
+  });
+  return {
+    tooltipProps: _import.$3ef42575df84b30b$export$9d1611c77c2fe928(domProps, hoverProps, {
+      role: "tooltip"
+    })
+  };
+}
+function $4e1b34546679e357$export$a6da6c504e4bba8b(props, state, ref) {
+  let { isDisabled, trigger } = props;
+  let tooltipId = _import.$bdb11010cef70236$export$f680877a34711e37();
+  let isHovered = React.useRef(false);
+  let isFocused = React.useRef(false);
+  let handleShow = () => {
+    if (isHovered.current || isFocused.current)
+      state.open(isFocused.current);
+  };
+  let handleHide = (immediate) => {
+    if (!isHovered.current && !isFocused.current)
+      state.close(immediate);
+  };
+  React.useEffect(() => {
+    let onKeyDown = (e) => {
+      if (ref && ref.current) {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          state.close(true);
+        }
+      }
+    };
+    if (state.isOpen) {
+      document.addEventListener("keydown", onKeyDown, true);
+      return () => {
+        document.removeEventListener("keydown", onKeyDown, true);
+      };
+    }
+  }, [
+    ref,
+    state
+  ]);
+  let onHoverStart = () => {
+    if (trigger === "focus")
+      return;
+    if (_import$1.$507fabe10e71c6fb$export$630ff653c5ada6a9() === "pointer")
+      isHovered.current = true;
+    else
+      isHovered.current = false;
+    handleShow();
+  };
+  let onHoverEnd = () => {
+    if (trigger === "focus")
+      return;
+    isFocused.current = false;
+    isHovered.current = false;
+    handleHide();
+  };
+  let onPressStart = () => {
+    isFocused.current = false;
+    isHovered.current = false;
+    handleHide(true);
+  };
+  let onFocus = () => {
+    let isVisible = _import$1.$507fabe10e71c6fb$export$b9b3dfddab17db27();
+    if (isVisible) {
+      isFocused.current = true;
+      handleShow();
+    }
+  };
+  let onBlur = () => {
+    isFocused.current = false;
+    isHovered.current = false;
+    handleHide(true);
+  };
+  let { hoverProps } = _import$1.$6179b936705e76d3$export$ae780daf29e6d456({
+    isDisabled,
+    onHoverStart,
+    onHoverEnd
+  });
+  let { pressProps } = _import$1.$f6c31cce2adf654f$export$45712eceda6fad21({
+    onPressStart
+  });
+  let { focusableProps } = _import$1.$e6afbd83fe6ebbd2$export$4c014de7c8940b4c({
+    isDisabled,
+    onFocus,
+    onBlur
+  }, ref);
+  return {
+    triggerProps: __spreadValues({
+      "aria-describedby": state.isOpen ? tooltipId : void 0
+    }, _import.$3ef42575df84b30b$export$9d1611c77c2fe928(focusableProps, hoverProps, pressProps)),
+    tooltipProps: {
+      id: tooltipId
+    }
+  };
+}
+const $8796f90736e175cb$var$TOOLTIP_DELAY = 1500;
+const $8796f90736e175cb$var$TOOLTIP_COOLDOWN = 500;
+let $8796f90736e175cb$var$tooltips = {};
+let $8796f90736e175cb$var$tooltipId = 0;
+let $8796f90736e175cb$var$globalWarmedUp = false;
+let $8796f90736e175cb$var$globalWarmUpTimeout = null;
+let $8796f90736e175cb$var$globalCooldownTimeout = null;
+function $8796f90736e175cb$export$4d40659c25ecb50b(props = {}) {
+  let { delay = $8796f90736e175cb$var$TOOLTIP_DELAY, closeDelay = $8796f90736e175cb$var$TOOLTIP_COOLDOWN } = props;
+  let { isOpen, open, close } = _import$2.$fc909762b330b746$export$61c6a8c84e605fb6(props);
+  let id = React.useMemo(() => `${++$8796f90736e175cb$var$tooltipId}`, []);
+  let closeTimeout = React.useRef();
+  let ensureTooltipEntry = () => {
+    $8796f90736e175cb$var$tooltips[id] = hideTooltip;
+  };
+  let closeOpenTooltips = () => {
+    for (let hideTooltipId in $8796f90736e175cb$var$tooltips)
+      if (hideTooltipId !== id) {
+        $8796f90736e175cb$var$tooltips[hideTooltipId](true);
+        delete $8796f90736e175cb$var$tooltips[hideTooltipId];
+      }
+  };
+  let showTooltip = () => {
+    clearTimeout(closeTimeout.current);
+    closeTimeout.current = null;
+    closeOpenTooltips();
+    ensureTooltipEntry();
+    $8796f90736e175cb$var$globalWarmedUp = true;
+    open();
+    if ($8796f90736e175cb$var$globalWarmUpTimeout) {
+      clearTimeout($8796f90736e175cb$var$globalWarmUpTimeout);
+      $8796f90736e175cb$var$globalWarmUpTimeout = null;
+    }
+    if ($8796f90736e175cb$var$globalCooldownTimeout) {
+      clearTimeout($8796f90736e175cb$var$globalCooldownTimeout);
+      $8796f90736e175cb$var$globalCooldownTimeout = null;
+    }
+  };
+  let hideTooltip = (immediate) => {
+    if (immediate || closeDelay <= 0) {
+      clearTimeout(closeTimeout.current);
+      closeTimeout.current = null;
+      close();
+    } else if (!closeTimeout.current)
+      closeTimeout.current = setTimeout(() => {
+        closeTimeout.current = null;
+        close();
+      }, closeDelay);
+    if ($8796f90736e175cb$var$globalWarmUpTimeout) {
+      clearTimeout($8796f90736e175cb$var$globalWarmUpTimeout);
+      $8796f90736e175cb$var$globalWarmUpTimeout = null;
+    }
+    if ($8796f90736e175cb$var$globalWarmedUp) {
+      if ($8796f90736e175cb$var$globalCooldownTimeout)
+        clearTimeout($8796f90736e175cb$var$globalCooldownTimeout);
+      $8796f90736e175cb$var$globalCooldownTimeout = setTimeout(() => {
+        delete $8796f90736e175cb$var$tooltips[id];
+        $8796f90736e175cb$var$globalCooldownTimeout = null;
+        $8796f90736e175cb$var$globalWarmedUp = false;
+      }, Math.max($8796f90736e175cb$var$TOOLTIP_COOLDOWN, closeDelay));
+    }
+  };
+  let warmupTooltip = () => {
+    closeOpenTooltips();
+    ensureTooltipEntry();
+    if (!isOpen && !$8796f90736e175cb$var$globalWarmUpTimeout && !$8796f90736e175cb$var$globalWarmedUp)
+      $8796f90736e175cb$var$globalWarmUpTimeout = setTimeout(() => {
+        $8796f90736e175cb$var$globalWarmUpTimeout = null;
+        $8796f90736e175cb$var$globalWarmedUp = true;
+        showTooltip();
+      }, delay);
+    else if (!isOpen)
+      showTooltip();
+  };
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(closeTimeout.current);
+      let tooltip = $8796f90736e175cb$var$tooltips[id];
+      if (tooltip)
+        delete $8796f90736e175cb$var$tooltips[id];
+    };
+  }, [
+    id
+  ]);
+  return {
+    isOpen,
+    open: (immediate) => {
+      if (!immediate && delay > 0 && !closeTimeout.current)
+        warmupTooltip();
+      else
+        showTooltip();
+    },
+    close: hideTooltip
+  };
+}
+const Tooltip$1 = "_Tooltip_1yly1_5";
+const text = "_text_1yly1_21";
+const arrow = "_arrow_1yly1_27";
+const top = "_top_1yly1_36";
+const bottom = "_bottom_1yly1_37";
+const left = "_left_1yly1_41";
+const right = "_right_1yly1_42";
+const styles = {
+  Tooltip: Tooltip$1,
+  text,
+  arrow,
+  top,
+  bottom,
+  left,
+  right
+};
+const CONTAINER_PADDING = 12;
+const ARROW_BOUNDARY_OFFSET = 12;
+const OFFSET = 12;
+const DEFAULT_PLACEMENT = "top";
+const OPEN_DELAY = 1e3;
+const CLOSE_DELAY = 250;
+function Tooltip(props) {
+  const { children, isImmediate } = props;
+  const triggerRef = React.useRef(null);
+  const triggerInputProps = __spreadProps(__spreadValues({}, props), {
+    delay: isImmediate ? 0 : OPEN_DELAY,
+    closeDelay: CLOSE_DELAY
+  });
+  const tooltipTriggerState = $8796f90736e175cb$export$4d40659c25ecb50b(triggerInputProps);
+  const { triggerProps, tooltipProps: tooltipPropsFromTrigger } = $4e1b34546679e357$export$a6da6c504e4bba8b(triggerInputProps, tooltipTriggerState, triggerRef);
+  return React.createElement(React.Fragment, null, React.cloneElement(children, __spreadProps(__spreadValues({}, _import.$3ef42575df84b30b$export$9d1611c77c2fe928(triggerProps, children.props)), {
+    ref: triggerRef
+  })), tooltipTriggerState.isOpen && React.createElement(_import$2.$f57aed4a881a3485$export$b47c3594eab58386, null, React.createElement(TooltipInner, __spreadProps(__spreadValues({}, props), {
+    triggerRef,
+    tooltipPropsFromTrigger,
+    tooltipTriggerState
+  }))));
+}
+function TooltipInner(props) {
+  const { content, placement: targetPlacement = DEFAULT_PLACEMENT, triggerRef, tooltipTriggerState, tooltipPropsFromTrigger } = props;
+  const tooltipRef = React.useRef(null);
+  const { overlayProps, arrowProps, placement, updatePosition } = _import$2.$2a41e45df1593e64$export$d39e1813b3bdd0e1({
+    arrowBoundaryOffset: ARROW_BOUNDARY_OFFSET,
+    containerPadding: CONTAINER_PADDING,
+    isOpen: tooltipTriggerState.isOpen,
+    offset: OFFSET,
+    overlayRef: tooltipRef,
+    placement: targetPlacement,
+    targetRef: triggerRef
+  });
+  const { tooltipProps: tooltipPropsFromTooltip } = $326e436e94273fe1$export$1c4b08e0eca38426(_import.$3ef42575df84b30b$export$9d1611c77c2fe928(overlayProps, props), tooltipTriggerState);
+  const tooltipProps = _import.$3ef42575df84b30b$export$9d1611c77c2fe928(overlayProps, tooltipPropsFromTooltip, tooltipPropsFromTrigger);
+  const style = __spreadValues(__spreadValues({}, tooltipProps.style), utilities_css.getComponentToken("tooltip", "container_padding", `${utilities_css.pxToRem(CONTAINER_PADDING)}rem`));
+  React.useEffect(() => {
+    updatePosition();
+  }, [content, updatePosition]);
+  return React.createElement("span", __spreadProps(__spreadValues({
+    ref: tooltipRef
+  }, tooltipProps), {
+    className: utilities_css.classNames(styles.Tooltip, styles[placement]),
+    "data-placement": placement,
+    style
+  }), React.createElement("span", {
+    className: styles.text
+  }, React.createElement(Text_index.Text, {
+    variant: "subtitle2"
+  }, content)), React.createElement("span", __spreadValues({
+    className: styles.arrow
+  }, arrowProps)));
+}
+exports.Tooltip = Tooltip;