@jenesei-software/jenesei-kit-react 1.3.19 → 1.3.21

package/build/component-eqTj4VVc.js

@@ -1,728 +0,0 @@
-import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
-import { u as useScreenWidth } from "./context.hooks-BmwyZ1p3.js";
-import { useMemo, useState, useRef, useEffect, useLayoutEffect, useCallback, memo } from "react";
-import { u as useDeepCompareMemoize } from "./use-DT0XgvJT.js";
-import { createLink } from "@tanstack/react-router";
-import { J as JeneseiPalette, K as KEY_SIZE_DATA } from "./theme.global-BzunMIsv.js";
-import styled, { keyframes, css, useTheme } from "styled-components";
-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-mzzOCXSx.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}
-`;
-function useOverflowing(props) {
-  const isCheckSize = useMemo(() => (props == null ? void 0 : props.isCheckSize) ?? true, [props == null ? void 0 : props.isCheckSize]);
-  const isParentMode = useMemo(() => (props == null ? void 0 : props.mode) === "parent", [props == null ? void 0 : props.mode]);
-  const [isOverflowing, setIsOverflowing] = useState(
-    (props == null ? void 0 : props.isOverflowing) !== void 0 ? props == null ? void 0 : props.isOverflowing : false
-  );
-  const ref = useRef(null);
-  const dependencies = useDeepCompareMemoize(props == null ? void 0 : props.dependencies);
-  useEffect(() => {
-    if (!isCheckSize) return;
-    const checkOverflow = () => {
-      const el = ref.current;
-      if (!el) return;
-      const scrollWidth = el.scrollWidth;
-      const scrollHeight = el.scrollHeight;
-      const clientWidth = isParentMode && el.parentElement ? el.parentElement.clientWidth : el.clientWidth;
-      const clientHeight = isParentMode && el.parentElement ? el.parentElement.clientHeight : el.clientHeight;
-      setIsOverflowing(scrollWidth > clientWidth || scrollHeight > clientHeight);
-    };
-    checkOverflow();
-    window.addEventListener("resize", checkOverflow);
-    return () => window.removeEventListener("resize", checkOverflow);
-  }, [dependencies, isCheckSize, isParentMode]);
-  return { isDisabled: !isOverflowing, ref, isOverflowing };
-}
-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(TooltipContainer, { sx: props.sx, 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 { isDisabled, ref } = useOverflowing({
-    isCheckSize: props.tooltip.isDisabled !== void 0 ? !props.tooltip.isDisabled : true,
-    dependencies: [props.children]
-  });
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { isDisabled, content: props.children, ...props.tooltip, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TypographyWithRef, { ref, ...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-eqTj4VVc.js.map