@jenesei-software/jenesei-kit-react 1.3.9 → 1.3.10

package/build/component-DKMsOpqH.js

@@ -0,0 +1,710 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
+import { u as useScreenWidth } from "./context.hooks-BmwyZ1p3.js";
+import { createLink } from "@tanstack/react-router";
+import { useState, useRef, useMemo, useEffect, useLayoutEffect, useCallback, memo } from "react";
+import styled, { keyframes, css, useTheme } from "styled-components";
+import { J as JeneseiPalette, K as KEY_SIZE_DATA } from "./theme.global-BgERDJ4e.js";
+import { a as useFloating, b as autoUpdate, o as offset, f as flip, s as shift } from "./floating-ui.react-Byi6bLb1.js";
+import { AnimatePresence, motion } from "framer-motion";
+import ReactDOM__default from "react-dom";
+import { g as addOutline, c as addFont, i as addAlwaysOutline } from "./style-RL73t3JD.js";
+import { a as addSX } from "./style-plT9Ah7t.js";
+import { b as Stack } from "./component-jPZYT5iL.js";
+const shadowPulse = keyframes`
+  0% {
+    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  }
+  50% {
+    text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
+  }
+  100% {
+    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  }
+`;
+function toStyledCSS(value) {
+  return css`
+    ${value.shadow && value.shadow === "shadowPulse" && css`
+      animation: ${shadowPulse} 2s infinite;
+    `};
+    ${value.letterSpacing && css`
+      letter-spacing: ${value.letterSpacing};
+    `};
+    ${value.flex && css`
+      flex: ${value.flex};
+    `};
+    ${value.cursor && css`
+      cursor: ${value.cursor};
+    `};
+    ${value.overflow && css`
+      overflow: ${value.overflow};
+    `};
+    ${value.line !== void 0 ? value.line === 1 ? css`
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            width: -webkit-fill-available;
+            max-width: fit-content;
+          ` : css`
+            word-break: break-word;
+            white-space: normal;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: ${value.line};
+            width: fit-content;
+            overflow-wrap: anywhere;
+          ` : css``};
+    ${value.family && css`
+      font-family: ${value.family};
+    `};
+    ${value.weight && css`
+      font-weight: ${value.weight};
+    `};
+    ${value.height && css`
+      line-height: ${value.height}px;
+    `};
+    ${value.color && css`
+      color: ${JeneseiPalette[value.color]};
+    `};
+    ${value.align && css`
+      text-align: ${value.align};
+    `};
+    ${value.wrap && css`
+      text-wrap: ${value.wrap};
+    `};
+    ${value.decoration && css`
+      text-decoration: ${value.decoration};
+    `};
+    ${value.transform && css`
+      text-transform: ${value.transform};
+    `};
+    ${value.isHoverUnderlining && css`
+      &:hover {
+        text-decoration: underline;
+      }
+    `};
+    ${value.isNoUserSelect && css`
+      user-select: none;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+    `};
+    ${"size" in value && value.size && css`
+      font-size: ${value.size}px;
+    `};
+    ${"variant" in value && value.variant ? value.variant === "h1" ? css`
+            font-size: ${(props) => props.theme.font.sizeHeading.h1 * props.theme.font.sizeDefault.default}px;
+            line-height: ${(props) => props.theme.font.lineHeight};
+            margin: 0;
+            @media (max-width: ${(props) => props.theme.screens.tablet.width}px) {
+              font-size: ${(props) => props.theme.font.sizeHeading.h1 * props.theme.font.sizeDefault.tablet}px;
+            }
+
+            @media (max-width: ${(props) => props.theme.screens.mobile.width}px) {
+              font-size: ${(props) => props.theme.font.sizeHeading.h1 * props.theme.font.sizeDefault.mobile}px;
+            }
+          ` : value.variant === "h2" ? css`
+              font-size: ${(props) => props.theme.font.sizeHeading.h2 * props.theme.font.sizeDefault.default}px;
+              line-height: ${(props) => props.theme.font.lineHeight};
+              margin: 0;
+              @media (max-width: ${(props) => props.theme.screens.tablet.width}px) {
+                font-size: ${(props) => props.theme.font.sizeHeading.h2 * props.theme.font.sizeDefault.tablet}px;
+              }
+
+              @media (max-width: ${(props) => props.theme.screens.mobile.width}px) {
+                font-size: ${(props) => props.theme.font.sizeHeading.h2 * props.theme.font.sizeDefault.mobile}px;
+              }
+            ` : value.variant === "h3" ? css`
+                font-size: ${(props) => props.theme.font.sizeHeading.h3 * props.theme.font.sizeDefault.default}px;
+                line-height: ${(props) => props.theme.font.lineHeight};
+                margin: 0;
+                @media (max-width: ${(props) => props.theme.screens.tablet.width}px) {
+                  font-size: ${(props) => props.theme.font.sizeHeading.h3 * props.theme.font.sizeDefault.tablet}px;
+                }
+
+                @media (max-width: ${(props) => props.theme.screens.mobile.width}px) {
+                  font-size: ${(props) => props.theme.font.sizeHeading.h3 * props.theme.font.sizeDefault.mobile}px;
+                }
+              ` : value.variant === "h4" ? css`
+                  font-size: ${(props) => props.theme.font.sizeHeading.h4 * props.theme.font.sizeDefault.default}px;
+                  line-height: ${(props) => props.theme.font.lineHeight};
+                  margin: 0;
+                  @media (max-width: ${(props) => props.theme.screens.tablet.width}px) {
+                    font-size: ${(props) => props.theme.font.sizeHeading.h4 * props.theme.font.sizeDefault.tablet}px;
+                  }
+
+                  @media (max-width: ${(props) => props.theme.screens.mobile.width}px) {
+                    font-size: ${(props) => props.theme.font.sizeHeading.h4 * props.theme.font.sizeDefault.mobile}px;
+                  }
+                ` : value.variant === "h5" ? css`
+                    font-size: ${(props) => props.theme.font.sizeHeading.h5 * props.theme.font.sizeDefault.default}px;
+                    line-height: ${(props) => props.theme.font.lineHeight};
+                    margin: 0;
+                    @media (max-width: ${(props) => props.theme.screens.tablet.width}px) {
+                      font-size: ${(props) => props.theme.font.sizeHeading.h5 * props.theme.font.sizeDefault.tablet}px;
+                    }
+
+                    @media (max-width: ${(props) => props.theme.screens.mobile.width}px) {
+                      font-size: ${(props) => props.theme.font.sizeHeading.h5 * props.theme.font.sizeDefault.mobile}px;
+                    }
+                  ` : value.variant === "h6" ? css`
+                      font-size: ${(props) => props.theme.font.sizeHeading.h6 * props.theme.font.sizeDefault.default}px;
+                      line-height: ${(props) => props.theme.font.lineHeight};
+                      margin: 0;
+                      @media (max-width: ${(props) => props.theme.screens.tablet.width}px) {
+                        font-size: ${(props) => props.theme.font.sizeHeading.h6 * props.theme.font.sizeDefault.tablet}px;
+                      }
+
+                      @media (max-width: ${(props) => props.theme.screens.mobile.width}px) {
+                        font-size: ${(props) => props.theme.font.sizeHeading.h6 * props.theme.font.sizeDefault.mobile}px;
+                      }
+                    ` : value.variant === "h7" ? css`
+                        font-size: ${(props) => props.theme.font.sizeHeading.h7 * props.theme.font.sizeDefault.default}px;
+                        line-height: ${(props) => props.theme.font.lineHeight};
+                        margin: 0;
+                        @media (max-width: ${(props) => props.theme.screens.tablet.width}px) {
+                          font-size: ${(props) => props.theme.font.sizeHeading.h7 * props.theme.font.sizeDefault.tablet}px;
+                        }
+
+                        @media (max-width: ${(props) => props.theme.screens.mobile.width}px) {
+                          font-size: ${(props) => props.theme.font.sizeHeading.h7 * props.theme.font.sizeDefault.mobile}px;
+                        }
+                      ` : value.variant === "h8" ? css`
+                          font-size: ${(props) => props.theme.font.sizeHeading.h8 * props.theme.font.sizeDefault.default}px;
+                          line-height: ${(props) => props.theme.font.lineHeight};
+                          margin: 0;
+                          @media (max-width: ${(props) => props.theme.screens.tablet.width}px) {
+                            font-size: ${(props) => props.theme.font.sizeHeading.h8 * props.theme.font.sizeDefault.tablet}px;
+                          }
+
+                          @media (max-width: ${(props) => props.theme.screens.mobile.width}px) {
+                            font-size: ${(props) => props.theme.font.sizeHeading.h8 * props.theme.font.sizeDefault.mobile}px;
+                          }
+                        ` : value.variant === "h9" ? css`
+                            font-size: ${(props) => props.theme.font.sizeHeading.h9 * props.theme.font.sizeDefault.default}px;
+                            line-height: ${(props) => props.theme.font.lineHeight};
+                            margin: 0;
+                            @media (max-width: ${(props) => props.theme.screens.tablet.width}px) {
+                              font-size: ${(props) => props.theme.font.sizeHeading.h9 * props.theme.font.sizeDefault.tablet}px;
+                            }
+
+                            @media (max-width: ${(props) => props.theme.screens.mobile.width}px) {
+                              font-size: ${(props) => props.theme.font.sizeHeading.h9 * props.theme.font.sizeDefault.mobile}px;
+                            }
+                          ` : null : null};
+  `;
+}
+const addSXTypography = css`
+  ${(props) => {
+  const rawSX = props.$sxTypography;
+  if (!rawSX) return null;
+  return toStyledCSS(rawSX.default);
+}}
+
+  ${(props) => {
+  const rawSX = props.$sxTypography;
+  if (!rawSX) return null;
+  return Object.entries(rawSX).filter(([key]) => key !== "default").map(([deviceKey, value]) => {
+    var _a;
+    const screenWidth = (_a = props.theme.screens[deviceKey]) == null ? void 0 : _a.width;
+    if (!screenWidth) return null;
+    return css`
+          @media (max-width: ${screenWidth}px) {
+            ${toStyledCSS(value)}
+          }
+        `;
+  });
+}}
+`;
+const TypographyCSS = css`
+  font-style: normal;
+  position: relative;
+  overflow: visible;
+  text-overflow: ellipsis;
+  overflow-wrap: anywhere;
+  line-height: ${(props) => props.theme.font.lineHeight};
+  ${addSXTypography};
+  ${addSX}
+`;
+const Title = styled.span`
+  ${TypographyCSS}
+  ${addOutline}
+`;
+const Popover = (props) => {
+  var _a, _b, _c, _d;
+  const theme = useTheme();
+  return ReactDOM__default.createPortal(
+    /* @__PURE__ */ jsxRuntimeExports.jsx(AnimatePresence, { children: props.isOpen && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        tabIndex: -1,
+        ref: props.ref,
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          ...props.floatingStyles,
+          transform: props.floatingStyles.transform,
+          zIndex: 9999
+        },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          PopoverWrapper,
+          {
+            tabIndex: -1,
+            $isShowAlwaysOutline: props.isShowAlwaysOutline,
+            $genre: props.genre ?? "black",
+            $font: {
+              size: ((_a = props.font) == null ? void 0 : _a.size) ?? KEY_SIZE_DATA[props.size ?? "medium"].font,
+              weight: ((_b = props.font) == null ? void 0 : _b.weight) ?? 700,
+              family: ((_c = props.font) == null ? void 0 : _c.family) ?? theme.font.family,
+              height: (_d = props.font) == null ? void 0 : _d.height
+            },
+            className: props.className,
+            initial: { opacity: 0, scale: 0.95 },
+            animate: { opacity: 1, scale: 1 },
+            exit: { opacity: 0, scale: 0.95 },
+            transition: { duration: 0.2 },
+            $sx: props.sx,
+            $size: props.size,
+            $sxTypography: props.sxTypography,
+            $maxHeight: props.maxHeight,
+            $maxWidth: props.maxWidth,
+            children: props.children
+          }
+        )
+      }
+    ) }),
+    document.body
+  );
+};
+const usePopover = (props) => {
+  const { onFocus, onBlur, onBlurReference } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const [minWidth, setMinWidth] = useState(void 0);
+  const [wasEverOpen, setWasEverOpen] = useState(false);
+  const {
+    refs,
+    floatingStyles,
+    update,
+    placement: actualPlacement
+  } = useFloating({
+    open: isOpen,
+    placement: props.placement,
+    middleware: [offset(props.offset ?? 8), flip(), shift()],
+    whileElementsMounted: autoUpdate
+  });
+  const clickOutsideHandler = useRef(null);
+  const hoverCloseTimeout = useRef(null);
+  const hoverOffset = useMemo(
+    () => props.hoverOffset ?? props.offset ?? DEFAULT_POPOVER_OFFSET,
+    [props.hoverOffset, props.offset]
+  );
+  const hoverCloseDelay = useMemo(() => props.hoverCloseDelay ?? DEFAULT_POPOVER_CLOSE_DELAY, [props.hoverCloseDelay]);
+  useEffect(() => {
+    if (props.isDisabled) return;
+    const refEl = refs.reference.current;
+    if (!refEl) return;
+    if ((props.mode === "click" || props.mode === "clickOpen") && refEl instanceof HTMLElement) {
+      const handleClick = () => {
+        if (props.mode === "click") {
+          setIsOpen((prev) => !prev);
+        } else if (props.mode === "clickOpen") {
+          setIsOpen(true);
+        }
+      };
+      refEl.addEventListener("click", handleClick);
+      return () => {
+        refEl.removeEventListener("click", handleClick);
+      };
+    } else if (props.mode === "hover" && refEl instanceof HTMLElement) {
+      const handleMouseEnter = () => {
+        setIsOpen(true);
+      };
+      const handleMouseLeave = () => {
+        if (hoverCloseTimeout.current) clearTimeout(hoverCloseTimeout.current);
+        hoverCloseTimeout.current = setTimeout(() => setIsOpen(false), hoverCloseDelay);
+      };
+      refEl.addEventListener("mouseenter", handleMouseEnter);
+      refEl.addEventListener("mouseleave", handleMouseLeave);
+      return () => {
+        refEl.removeEventListener("mouseenter", handleMouseEnter);
+        refEl.removeEventListener("mouseleave", handleMouseLeave);
+        if (hoverCloseTimeout.current) clearTimeout(hoverCloseTimeout.current);
+      };
+    }
+  }, [props.mode, refs.reference, hoverCloseDelay, props.isDisabled]);
+  useEffect(() => {
+    if (!isOpen || !refs.reference.current || !refs.floating.current || props.isDisabled) return;
+    const cleanup = autoUpdate(refs.reference.current, refs.floating.current, update);
+    return () => cleanup();
+  }, [isOpen, refs.reference, refs.floating, update, props.isDisabled]);
+  useEffect(() => {
+    if (!isOpen || !refs.reference.current || !refs.floating.current || props.isDisabled) return;
+    if (props.isClickOutside) {
+      clickOutsideHandler.current = (e) => {
+        const refEl = refs.reference.current;
+        const floatingEl = refs.floating.current;
+        const otherRefs = props.refsExcludeClickOutside || [];
+        if (refEl instanceof HTMLElement && floatingEl instanceof HTMLElement && !refEl.contains(e.target) && !floatingEl.contains(e.target) && !otherRefs.some((ref) => {
+          var _a;
+          if (typeof ref === "object" && ref !== null && "current" in ref) {
+            return (_a = ref.current) == null ? void 0 : _a.contains(e.target);
+          }
+          return false;
+        })) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", clickOutsideHandler.current);
+    }
+    return () => {
+      if (clickOutsideHandler.current) {
+        document.removeEventListener("mousedown", clickOutsideHandler.current);
+        clickOutsideHandler.current = null;
+      }
+      if (hoverCloseTimeout.current) {
+        clearTimeout(hoverCloseTimeout.current);
+      }
+    };
+  }, [isOpen, refs.reference, refs.floating, props.isClickOutside, props.isDisabled, props.refsExcludeClickOutside]);
+  useEffect(() => {
+    if (!isOpen || !props.isFloatingHover || !refs.reference.current || !refs.floating.current || props.isDisabled)
+      return;
+    const refEl = refs.reference.current;
+    const floatingEl = refs.floating.current;
+    const handleMouseMove = (e) => {
+      const mouseX = e.clientX;
+      const mouseY = e.clientY;
+      const refRect = refEl.getBoundingClientRect();
+      const floatingRect = floatingEl.getBoundingClientRect();
+      const isInsideRef = mouseX >= refRect.left - hoverOffset && mouseX <= refRect.right + hoverOffset && mouseY >= refRect.top - hoverOffset && mouseY <= refRect.bottom + hoverOffset;
+      const isInsideFloating = mouseX >= floatingRect.left - hoverOffset && mouseX <= floatingRect.right + hoverOffset && mouseY >= floatingRect.top - hoverOffset && mouseY <= floatingRect.bottom + hoverOffset;
+      if (isInsideRef || isInsideFloating) {
+        if (hoverCloseTimeout.current) {
+          clearTimeout(hoverCloseTimeout.current);
+          hoverCloseTimeout.current = null;
+        }
+      } else {
+        if (hoverCloseTimeout.current) clearTimeout(hoverCloseTimeout.current);
+        hoverCloseTimeout.current = setTimeout(() => setIsOpen(false), hoverCloseDelay);
+      }
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      if (hoverCloseTimeout.current) {
+        clearTimeout(hoverCloseTimeout.current);
+      }
+    };
+  }, [isOpen, props.isFloatingHover, refs.reference, refs.floating, hoverOffset, hoverCloseDelay, props.isDisabled]);
+  useLayoutEffect(() => {
+    if (!props.isWidthAsContent || !refs.reference.current) return;
+    const rect = refs.reference.current.getBoundingClientRect();
+    setMinWidth(rect.width);
+  }, [props.isWidthAsContent, refs.reference]);
+  const open = useCallback(() => {
+    if (props.isDisabled) return;
+    setIsOpen(true);
+  }, [props.isDisabled]);
+  const close = useCallback(() => {
+    if (props.isDisabled) return;
+    setIsOpen(false);
+  }, [props.isDisabled]);
+  const toggle = useCallback(() => {
+    if (props.isDisabled) return;
+    setIsOpen((prev) => !prev);
+  }, [props.isDisabled]);
+  const combinedStyles = useMemo(() => {
+    return {
+      ...floatingStyles,
+      minWidth: props.isWidthAsContent && minWidth ? `${minWidth}px` : void 0,
+      maxWidth: props.isWidthAsContent && minWidth ? `${minWidth}px` : void 0
+    };
+  }, [floatingStyles, props.isWidthAsContent, minWidth]);
+  useEffect(() => {
+    if (isOpen) {
+      onFocus == null ? void 0 : onFocus();
+      setWasEverOpen(true);
+    }
+  }, [isOpen, onFocus]);
+  useEffect(() => {
+    if (!isOpen && wasEverOpen) {
+      onBlur == null ? void 0 : onBlur();
+    }
+  }, [isOpen, wasEverOpen, onBlur]);
+  useEffect(() => {
+    if (!isOpen || props.isDisabled) return;
+    const handleFocusIn = (e) => {
+      const refEl = refs.reference.current;
+      const floatingEl = refs.floating.current;
+      const otherRefs = props.refsExcludeClickOutside || [];
+      const isInside = refEl instanceof HTMLElement && refEl.contains(e.target) || floatingEl instanceof HTMLElement && floatingEl.contains(e.target) || otherRefs.some((ref) => {
+        if (ref && "current" in ref && ref.current && ref.current instanceof HTMLElement) {
+          return ref.current.contains(e.target);
+        }
+        return false;
+      });
+      if (!isInside) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("focusin", handleFocusIn);
+    return () => {
+      document.removeEventListener("focusin", handleFocusIn);
+    };
+  }, [isOpen, refs.reference, refs.floating, props.refsExcludeClickOutside, props.isDisabled]);
+  useEffect(() => {
+    if (!refs.reference.current || props.isDisabled || !onBlurReference) return;
+    const refEl = refs.reference.current;
+    const otherRefs = props.refsExcludeBlur || [];
+    const handleBlur = (e) => {
+      if (refEl instanceof HTMLElement && !refEl.contains(e.relatedTarget) && !otherRefs.some((ref) => {
+        if (ref && "current" in ref && ref.current && ref.current instanceof HTMLElement)
+          return ref.current.contains(e.relatedTarget);
+      })) {
+        onBlurReference();
+      }
+    };
+    if (refEl instanceof HTMLElement) refEl.addEventListener("blur", handleBlur, true);
+    return () => {
+      if (refEl instanceof HTMLElement) refEl.removeEventListener("blur", handleBlur, true);
+    };
+  }, [refs.reference, props.isDisabled, onBlurReference, props.refsExcludeBlur]);
+  const getIsInside = useCallback(
+    (target) => {
+      if (!target) return false;
+      const refEl = refs.reference.current;
+      const floatingEl = refs.floating.current;
+      const otherRefs = props.refsExcludeBlur || [];
+      return refEl instanceof HTMLElement && refEl.contains(target) || floatingEl instanceof HTMLElement && floatingEl.contains(target) || otherRefs.some((ref) => {
+        if (ref && "current" in ref && ref.current && ref.current instanceof HTMLElement) {
+          return ref.current.contains(target);
+        }
+        return false;
+      });
+    },
+    [refs.reference, refs.floating, props.refsExcludeBlur]
+  );
+  return {
+    getIsInside,
+    isOpen,
+    setIsOpen,
+    open,
+    close,
+    toggle,
+    refReference: refs.setReference,
+    refFloating: refs.setFloating,
+    floatingStyles: combinedStyles,
+    placement: actualPlacement
+  };
+};
+const addPopoverGenre = css`
+  ${(props) => css`
+    background: ${props.theme.colors.button[props.$genre].background.rest};
+    border-color: ${props.theme.colors.button[props.$genre].border.rest};
+    color: ${props.theme.colors.button[props.$genre].color.rest};
+    /* box-shadow: ${props.theme.effects.button}; */
+  `};
+`;
+const addPopoverSize = css`
+  ${(props) => addPopoverSizeConstructor({
+  ...KEY_SIZE_DATA[props.$size ?? "medium"]
+})};
+`;
+const addPopoverSizeConstructor = (props) => css`
+  display: flex;
+  border-radius: ${props.radius}px;
+  padding: ${props.padding}px;
+  gap: ${props.padding - 2}px;
+`;
+const PopoverWrapper = styled(motion.div)`
+  max-width: ${(props) => props.$maxWidth || "100%"};
+  max-height: ${(props) => props.$maxHeight || "100%"};
+  overflow: auto;
+  flex-direction: column;
+  ${addFont};
+  ${addPopoverSize};
+  ${addAlwaysOutline};
+  ${addSXTypography};
+  ${addPopoverGenre};
+  ${addSX};
+`;
+const DEFAULT_POPOVER_OFFSET = 8;
+const DEFAULT_POPOVER_CLOSE_DELAY = 100;
+const TooltipContainer = styled(Stack)`
+  display: flex;
+  width: fit-content;
+  height: fit-content;
+`;
+const addTooltipBoxSize = css`
+  ${(props) => addTooltipBoxSizeConstructor({
+  ...KEY_SIZE_DATA[props.size ?? "medium"]
+})};
+`;
+const addTooltipBoxSizeConstructor = (props) => css`
+  gap: 0px;
+  padding: ${props.padding}px ${props.padding}px 0px ${props.padding}px;
+  :after {
+    content: '';
+    display: block;
+    height: ${props.padding}px;
+    width: 100%;
+  }
+`;
+const TooltipBox = styled(Popover)`
+  ${addTooltipBoxSize};
+`;
+const Tooltip = memo((props) => {
+  if (props.isDisabled) return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: props.children });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { ...props });
+});
+const TooltipContent = (props) => {
+  const { isOpen, refReference, refFloating, floatingStyles } = usePopover({
+    placement: props.placement ?? DEFAULT_TOOLTIP_PLACEMENT_FALLBACK,
+    offset: props.offset ?? DEFAULT_TOOLTIP_OFFSET_FALLBACK,
+    mode: props.mode ?? "hover",
+    isClickOutside: props.isClickOutside ?? true,
+    isFloatingHover: props.isFloatingHover ?? true,
+    isWidthAsContent: props.isWidthAsContent ?? false,
+    hoverCloseDelay: props.hoverCloseDelay ?? void 0,
+    hoverOffset: props.hoverOffset ?? void 0
+  });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContainer, { sx: props.sx, ref: refReference, children: props.children }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      TooltipBox,
+      {
+        size: props.size,
+        isOpen,
+        genre: props.genre,
+        floatingStyles,
+        ref: refFloating,
+        maxHeight: props.maxHeight,
+        maxWidth: props.maxWidth,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Typography,
+          {
+            sx: props.sxTypography ?? {
+              default: {
+                size: 14
+              }
+            },
+            children: props.content
+          }
+        )
+      }
+    )
+  ] });
+};
+Tooltip.displayName = "Tooltip";
+const DEFAULT_TOOLTIP_PLACEMENT_FALLBACK = "bottom-start";
+const DEFAULT_TOOLTIP_OFFSET_FALLBACK = 8;
+const TypographyWithRef = (props) => {
+  const { screenActual } = useScreenWidth();
+  const cssProps = useMemo(
+    () => ({
+      $sxTypography: props.sx,
+      style: props.style,
+      className: props.className,
+      $sx: props.sxStandard,
+      $isDisabledOutline: props.isDisabledOutline,
+      $isOutlineBoxShadow: props.isOutlineBoxShadow,
+      $isReadOnly: props.isReadOnly,
+      onClick: props.onClick ? props.onClick : () => {
+      }
+    }),
+    [
+      props.sx,
+      props.style,
+      props.className,
+      props.sxStandard,
+      props.onClick,
+      props.isDisabledOutline,
+      props.isOutlineBoxShadow,
+      props.isReadOnly
+    ]
+  );
+  const screenSX = useMemo(() => {
+    var _a, _b;
+    return ((_a = props.sx) == null ? void 0 : _a[screenActual]) ?? ((_b = props.sx) == null ? void 0 : _b.default);
+  }, [props.sx, screenActual]);
+  if (screenSX && "variant" in screenSX) {
+    if (screenSX.variant === "h7" || screenSX.variant === "h8" || screenSX.variant === "h9") {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Title,
+        {
+          ref: props.ref,
+          as: props.isAnchor ? "a" : props.isParagraph ? "p" : props.isSpan ? "span" : "span",
+          href: props.href,
+          ...cssProps,
+          children: props.children
+        }
+      );
+    } else {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Title,
+        {
+          ref: props.ref,
+          as: props.isAnchor ? "a" : props.isParagraph ? "p" : props.isSpan ? "span" : screenSX.variant,
+          href: props.href,
+          ...cssProps,
+          children: props.children
+        }
+      );
+    }
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Title,
+    {
+      ref: props.ref,
+      as: props.isAnchor ? "a" : props.isParagraph ? "p" : props.isSpan ? "span" : "span",
+      href: props.href,
+      ...cssProps,
+      children: props.children
+    }
+  );
+};
+const Typography = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(TypographyWithRef, { ...props });
+};
+const TypographySizeIsAnchor = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(TypographyWithRef, { isAnchor: true, ...props, ref: props.ref, href: props.href });
+};
+const TypographyLink = createLink(TypographySizeIsAnchor);
+const TypographyTooltip = memo((props) => {
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const contentRef = useRef(null);
+  useEffect(() => {
+    const checkOverflow = () => {
+      if (contentRef.current) {
+        setIsOverflowing(contentRef.current.scrollWidth > contentRef.current.clientWidth);
+      }
+    };
+    checkOverflow();
+    window.addEventListener("resize", checkOverflow);
+    return () => window.removeEventListener("resize", checkOverflow);
+  }, [props.children]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { isDisabled: !isOverflowing, content: props.children, ...props.tooltip, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TypographyWithRef, { ref: contentRef, ...props.typography, style: { position: "relative" }, children: props.children }) });
+});
+TypographyTooltip.displayName = "TypographyTooltip";
+TypographyWithRef.displayName = "TypographyWithRef";
+TypographySizeIsAnchor.displayName = "TypographySizeIsAnchor";
+export {
+  DEFAULT_TOOLTIP_PLACEMENT_FALLBACK as D,
+  Popover as P,
+  TooltipContainer as T,
+  addTooltipBoxSize as a,
+  addTooltipBoxSizeConstructor as b,
+  TooltipBox as c,
+  Tooltip as d,
+  TooltipContent as e,
+  DEFAULT_TOOLTIP_OFFSET_FALLBACK as f,
+  addSXTypography as g,
+  Title as h,
+  Typography as i,
+  TypographyLink as j,
+  TypographyTooltip as k,
+  usePopover as u
+};
+//# sourceMappingURL=component-DKMsOpqH.js.map