@remember-web/primitive 0.2.0 → 0.2.3

package/dist/src/Floating/Tooltip/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\nimport { isSSR } from '@remember-web/shared';\nimport { type PropsWithChildren, useState } from 'react';\n\nimport { CloseButton, TooltipContent, TooltipTriggerWrapper } from './styles';\nimport {\n  type TooltipProps,\n  type TooltipSize,\n  type TooltipType,\n  isLargeSizeProps,\n  isStaticTypeProps,\n} from './types';\n\nconst hoverable = isSSR()\n  ? true\n  : window.matchMedia('(any-hover: hover)').matches;\n\nexport default function Tooltip<\n  Type extends TooltipType = 'hover',\n  Size extends TooltipSize = 'small',\n>({\n  children,\n  content,\n  contentOptions,\n  defaultOpen,\n  side = 'top',\n  gap = 4,\n  onOpenChange,\n  onClickOutside,\n  ...props\n}: PropsWithChildren<TooltipProps<Type, Size>>) {\n  const [_open, _setOpen] = useState(defaultOpen ?? false);\n  const { type = 'hover', size = 'small' } = props;\n  const {\n    backgroundColor = contents000,\n    contentColor = contents999,\n    maxWidth = 'initial',\n    textAlign = 'center',\n    onClick,\n    zIndex = 0,\n  } = contentOptions ?? {};\n  /**\n   * @description hover가 가능할 때 (마우스 포인터, 디지타이저 사용) type이 hover일 때만 hoverType으로 결정\n   *\n   * hover가 불가능할 때 (핑거 터치 사용) type이 hover라면 click타입으로 간주 */\n  const isHoverType = hoverable && type === 'hover';\n  const isClickType = !hoverable || type === 'click';\n  const isCloseButtonType = type === 'closeButton';\n  /** @description 클릭을 통해서 트리깅 하는 액션인지 확인 */\n  const isClickTrigger = isClickType || isCloseButtonType;\n  const isOpen = isStaticTypeProps(props)\n    ? props.open\n    : isHoverType\n      ? undefined\n      : _open;\n\n  return (\n    <RadixTooltip.Provider>\n      <RadixTooltip.Root\n        open={isOpen}\n        defaultOpen={defaultOpen}\n        delayDuration={100}\n        onOpenChange={onOpenChange}\n      >\n        <RadixTooltip.Trigger\n          asChild\n          onClick={\n            isClickTrigger\n              ? () => _setOpen(isClickType ? (prev) => !prev : true)\n              : undefined\n          }\n        >\n          <TooltipTriggerWrapper>{children}</TooltipTriggerWrapper>\n        </RadixTooltip.Trigger>\n        <RadixTooltip.Portal>\n          <TooltipContent\n            $size={size}\n            $maxWidth={maxWidth}\n            $backgroundColor={backgroundColor}\n            $contentColor={contentColor}\n            $textAlign={textAlign}\n            $zIndex={zIndex}\n            sideOffset={gap}\n            side={side}\n            onPointerDownOutside={(e) => {\n              if (isClickType) {\n                _setOpen(false);\n              }\n              onClickOutside?.(e);\n            }}\n            collisionPadding={20}\n            onClick={(e) => {\n              if (isClickType) {\n                () => _setOpen(false);\n              }\n              onClick?.(e);\n            }}\n          >\n            {content}\n            {type === 'closeButton' && (\n              <CloseButton onClick={() => _setOpen(false)}>\n                <IconCloseS />\n              </CloseButton>\n            )}\n            {isLargeSizeProps(props) && props.hasArrow && (\n              <RadixTooltip.Arrow\n                width={14}\n                height={8}\n                color={backgroundColor}\n              />\n            )}\n          </TooltipContent>\n        </RadixTooltip.Portal>\n      </RadixTooltip.Root>\n    </RadixTooltip.Provider>\n  );\n}\n"],"names":["side","gap","props","_open","_setOpen","type","size","backgroundColor","contentColor","maxWidth","textAlign","zIndex","children","open","defaultOpen","delayDuration","onOpenChange","$size","$maxWidth","$backgroundColor","$contentColor","$textAlign","$zIndex","sideOffset","onPointerDownOutside","onClickOutside","collisionPadding","onClick","width","height","color"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAiBb;AAIe;AAaiC;;;;;AAL9CA;;AACAC;;;AAGGC;;;AAEIC;AAAOC;AACd;AAAQC;;AAAgBC;;;AAEtBC;;AACAC;;AACAC;;AACAC;;;AAEAC;AAEF;AACF;AACA;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AAMA;AACwBC;AAElBC;AACAC;AACAC;AACAC;AAA2BJ;;;AAMnB;AAAkC;AAAU;AAAQ;;AAIpCA;;AAAmC;;AAIvDK;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAvB;AACAwB;AACE;;AAEA;AACAC;;AAEFC;AACAC;AAIEA;;;;;;AAK4Cf;AAC5B;AAKdgB;AACAC;AACAC;AAAuB;;AAGZ;;AAED;AAG1B;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\nimport { isSSR } from '@remember-web/shared';\nimport { type PropsWithChildren, useState } from 'react';\n\nimport { CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper } from './styles';\nimport {\n  type TooltipProps,\n  type TooltipSize,\n  type TooltipType,\n  isLargeSizeProps,\n  isStaticTypeProps,\n} from './types';\n\nconst hoverable = isSSR()\n  ? true\n  : window.matchMedia('(any-hover: hover)').matches;\n\nexport default function Tooltip<\n  Type extends TooltipType = 'hover',\n  Size extends TooltipSize = 'small',\n>({\n  children,\n  content,\n  contentOptions,\n  defaultOpen,\n  side = 'top',\n  gap = 4,\n  onOpenChange,\n  onClickOutside,\n  ...props\n}: PropsWithChildren<TooltipProps<Type, Size>>) {\n  const [_open, _setOpen] = useState(defaultOpen ?? false);\n  const { type = 'hover', size = 'small' } = props;\n  const {\n    backgroundColor = contents000,\n    contentColor = contents999,\n    maxWidth = 'initial',\n    textAlign = 'center',\n    onClick,\n    zIndex = 0,\n  } = contentOptions ?? {};\n  /**\n   * @description hover가 가능할 때 (마우스 포인터, 디지타이저 사용) type이 hover일 때만 hoverType으로 결정\n   *\n   * hover가 불가능할 때 (핑거 터치 사용) type이 hover라면 click타입으로 간주 */\n  const isHoverType = hoverable && type === 'hover';\n  const isClickType = !hoverable || type === 'click';\n  const isCloseButtonType = type === 'closeButton';\n  /** @description 클릭을 통해서 트리깅 하는 액션인지 확인 */\n  const isClickTrigger = isClickType || isCloseButtonType;\n  const isOpen = isStaticTypeProps(props)\n    ? props.open\n    : isHoverType\n      ? undefined\n      : _open;\n\n  return (\n    <RadixTooltip.Provider>\n      <RadixTooltip.Root\n        open={isOpen}\n        defaultOpen={defaultOpen}\n        delayDuration={100}\n        onOpenChange={onOpenChange}\n      >\n        <RadixTooltip.Trigger\n          asChild\n          onClick={\n            isClickTrigger\n              ? () => _setOpen(isClickType ? (prev) => !prev : true)\n              : undefined\n          }\n        >\n          <TooltipTriggerWrapper>{children}</TooltipTriggerWrapper>\n        </RadixTooltip.Trigger>\n        <RadixTooltip.Portal>\n          <TooltipContentWrapper $zIndex={zIndex}>\n            <TooltipContent\n              $size={size}\n              $maxWidth={maxWidth}\n              $backgroundColor={backgroundColor}\n              $contentColor={contentColor}\n              $textAlign={textAlign}\n              sideOffset={gap}\n              side={side}\n              onPointerDownOutside={(e) => {\n                if (isClickType) {\n                  _setOpen(false);\n                }\n                onClickOutside?.(e);\n              }}\n              collisionPadding={20}\n              onClick={(e) => {\n                if (isClickType) {\n                  () => _setOpen(false);\n                }\n                onClick?.(e);\n              }}\n            >\n              {content}\n              {type === 'closeButton' && (\n                <CloseButton onClick={() => _setOpen(false)}>\n                  <IconCloseS />\n                </CloseButton>\n              )}\n              {isLargeSizeProps(props) && props.hasArrow && (\n                <RadixTooltip.Arrow\n                  width={14}\n                  height={8}\n                  color={backgroundColor}\n                />\n              )}\n            </TooltipContent>\n          </TooltipContentWrapper>\n        </RadixTooltip.Portal>\n      </RadixTooltip.Root>\n    </RadixTooltip.Provider>\n  );\n}\n"],"names":["side","gap","props","_open","_setOpen","type","size","backgroundColor","contentColor","maxWidth","textAlign","zIndex","children","open","defaultOpen","delayDuration","onOpenChange","$zIndex","$size","$maxWidth","$backgroundColor","$contentColor","$textAlign","sideOffset","onPointerDownOutside","onClickOutside","collisionPadding","onClick","width","height","color"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAiBb;AAIe;AAaiC;;;;;AAL9CA;;AACAC;;;AAGGC;;;AAEIC;AAAOC;AACd;AAAQC;;AAAgBC;;;AAEtBC;;AACAC;;AACAC;;AACAC;;;AAEAC;AAEF;AACF;AACA;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AAMA;AACwBC;AAElBC;AACAC;AACAC;AACAC;AAA2BJ;;;AAMnB;AAAkC;AAAU;AAAQ;;AAIpCA;;AAAmC;;AAGlCK;;AAEnBC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAvB;AACAwB;AACE;;AAEA;AACAC;;AAEFC;AACAC;AAIEA;;;;;;AAK4Cf;AAC5B;AAKdgB;AACAC;AACAC;AAAuB;;;AAIP;;AAER;AAG1B;;"}

package/dist/src/Floating/Tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Tooltip/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAGzD,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,WAAW,EAGjB,MAAM,SAAS,CAAC;AAMjB,MAAM,CAAC,OAAO,UAAU,OAAO,CAC7B,IAAI,SAAS,WAAW,GAAG,OAAO,EAClC,IAAI,SAAS,WAAW,GAAG,OAAO,EAClC,EACA,QAAQ,EACR,OAAO,EACP,cAAc,EACd,WAAW,EACX,IAAY,EACZ,GAAO,EACP,YAAY,EACZ,cAAc,EACd,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,2CAsF7C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Tooltip/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAGzD,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,WAAW,EAGjB,MAAM,SAAS,CAAC;AAMjB,MAAM,CAAC,OAAO,UAAU,OAAO,CAC7B,IAAI,SAAS,WAAW,GAAG,OAAO,EAClC,IAAI,SAAS,WAAW,GAAG,OAAO,EAClC,EACA,QAAQ,EACR,OAAO,EACP,cAAc,EACd,WAAW,EACX,IAAY,EACZ,GAAO,EACP,YAAY,EACZ,cAAc,EACd,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,2CAuF7C"}

package/dist/src/Floating/Tooltip/index.esm.js

@@ -6,7 +6,7 @@ import { IconCloseS } from '@remember-web/icon';
 import { contents000, contents999 } from '@remember-web/mixin';
 import { isSSR } from '@remember-web/shared';
 import { useState } from 'react';
-import { TooltipTriggerWrapper, TooltipContent, CloseButton } from './styles.esm.js';
+import { TooltipTriggerWrapper, TooltipContentWrapper, TooltipContent, CloseButton } from './styles.esm.js';
 import { isStaticTypeProps, isLargeSizeProps } from './types.esm.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -71,35 +71,37 @@ function Tooltip(_ref) {
           children: children
         })
       }), /*#__PURE__*/jsx(RadixTooltip.Portal, {
-        children: /*#__PURE__*/jsxs(TooltipContent, {
-          $size: size,
-          $maxWidth: maxWidth,
-          $backgroundColor: backgroundColor,
-          $contentColor: contentColor,
-          $textAlign: textAlign,
+        children: /*#__PURE__*/jsx(TooltipContentWrapper, {
           $zIndex: zIndex,
-          sideOffset: gap,
-          side: side,
-          onPointerDownOutside: function onPointerDownOutside(e) {
-            if (isClickType) {
-              _setOpen(false);
-            }
-            onClickOutside === null || onClickOutside === void 0 || onClickOutside(e);
-          },
-          collisionPadding: 20,
-          onClick: function onClick(e) {
-            _onClick === null || _onClick === void 0 || _onClick(e);
-          },
-          children: [content, type === 'closeButton' && /*#__PURE__*/jsx(CloseButton, {
-            onClick: function onClick() {
-              return _setOpen(false);
+          children: /*#__PURE__*/jsxs(TooltipContent, {
+            $size: size,
+            $maxWidth: maxWidth,
+            $backgroundColor: backgroundColor,
+            $contentColor: contentColor,
+            $textAlign: textAlign,
+            sideOffset: gap,
+            side: side,
+            onPointerDownOutside: function onPointerDownOutside(e) {
+              if (isClickType) {
+                _setOpen(false);
+              }
+              onClickOutside === null || onClickOutside === void 0 || onClickOutside(e);
             },
-            children: /*#__PURE__*/jsx(IconCloseS, {})
-          }), isLargeSizeProps(props) && props.hasArrow && /*#__PURE__*/jsx(RadixTooltip.Arrow, {
-            width: 14,
-            height: 8,
-            color: backgroundColor
-          })]
+            collisionPadding: 20,
+            onClick: function onClick(e) {
+              _onClick === null || _onClick === void 0 || _onClick(e);
+            },
+            children: [content, type === 'closeButton' && /*#__PURE__*/jsx(CloseButton, {
+              onClick: function onClick() {
+                return _setOpen(false);
+              },
+              children: /*#__PURE__*/jsx(IconCloseS, {})
+            }), isLargeSizeProps(props) && props.hasArrow && /*#__PURE__*/jsx(RadixTooltip.Arrow, {
+              width: 14,
+              height: 8,
+              color: backgroundColor
+            })]
+          })
         })
       })]
     })

package/dist/src/Floating/Tooltip/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\nimport { isSSR } from '@remember-web/shared';\nimport { type PropsWithChildren, useState } from 'react';\n\nimport { CloseButton, TooltipContent, TooltipTriggerWrapper } from './styles';\nimport {\n  type TooltipProps,\n  type TooltipSize,\n  type TooltipType,\n  isLargeSizeProps,\n  isStaticTypeProps,\n} from './types';\n\nconst hoverable = isSSR()\n  ? true\n  : window.matchMedia('(any-hover: hover)').matches;\n\nexport default function Tooltip<\n  Type extends TooltipType = 'hover',\n  Size extends TooltipSize = 'small',\n>({\n  children,\n  content,\n  contentOptions,\n  defaultOpen,\n  side = 'top',\n  gap = 4,\n  onOpenChange,\n  onClickOutside,\n  ...props\n}: PropsWithChildren<TooltipProps<Type, Size>>) {\n  const [_open, _setOpen] = useState(defaultOpen ?? false);\n  const { type = 'hover', size = 'small' } = props;\n  const {\n    backgroundColor = contents000,\n    contentColor = contents999,\n    maxWidth = 'initial',\n    textAlign = 'center',\n    onClick,\n    zIndex = 0,\n  } = contentOptions ?? {};\n  /**\n   * @description hover가 가능할 때 (마우스 포인터, 디지타이저 사용) type이 hover일 때만 hoverType으로 결정\n   *\n   * hover가 불가능할 때 (핑거 터치 사용) type이 hover라면 click타입으로 간주 */\n  const isHoverType = hoverable && type === 'hover';\n  const isClickType = !hoverable || type === 'click';\n  const isCloseButtonType = type === 'closeButton';\n  /** @description 클릭을 통해서 트리깅 하는 액션인지 확인 */\n  const isClickTrigger = isClickType || isCloseButtonType;\n  const isOpen = isStaticTypeProps(props)\n    ? props.open\n    : isHoverType\n      ? undefined\n      : _open;\n\n  return (\n    <RadixTooltip.Provider>\n      <RadixTooltip.Root\n        open={isOpen}\n        defaultOpen={defaultOpen}\n        delayDuration={100}\n        onOpenChange={onOpenChange}\n      >\n        <RadixTooltip.Trigger\n          asChild\n          onClick={\n            isClickTrigger\n              ? () => _setOpen(isClickType ? (prev) => !prev : true)\n              : undefined\n          }\n        >\n          <TooltipTriggerWrapper>{children}</TooltipTriggerWrapper>\n        </RadixTooltip.Trigger>\n        <RadixTooltip.Portal>\n          <TooltipContent\n            $size={size}\n            $maxWidth={maxWidth}\n            $backgroundColor={backgroundColor}\n            $contentColor={contentColor}\n            $textAlign={textAlign}\n            $zIndex={zIndex}\n            sideOffset={gap}\n            side={side}\n            onPointerDownOutside={(e) => {\n              if (isClickType) {\n                _setOpen(false);\n              }\n              onClickOutside?.(e);\n            }}\n            collisionPadding={20}\n            onClick={(e) => {\n              if (isClickType) {\n                () => _setOpen(false);\n              }\n              onClick?.(e);\n            }}\n          >\n            {content}\n            {type === 'closeButton' && (\n              <CloseButton onClick={() => _setOpen(false)}>\n                <IconCloseS />\n              </CloseButton>\n            )}\n            {isLargeSizeProps(props) && props.hasArrow && (\n              <RadixTooltip.Arrow\n                width={14}\n                height={8}\n                color={backgroundColor}\n              />\n            )}\n          </TooltipContent>\n        </RadixTooltip.Portal>\n      </RadixTooltip.Root>\n    </RadixTooltip.Provider>\n  );\n}\n"],"names":["side","gap","props","_open","_setOpen","type","size","backgroundColor","contentColor","maxWidth","textAlign","zIndex","children","open","defaultOpen","delayDuration","onOpenChange","$size","$maxWidth","$backgroundColor","$contentColor","$textAlign","$zIndex","sideOffset","onPointerDownOutside","onClickOutside","collisionPadding","onClick","width","height","color"],"mappings":";;;;;;;;;;;;AAAa;AAiBb;AAIe;AAaiC;;;;;AAL9CA;;AACAC;;;AAGGC;;;AAEIC;AAAOC;AACd;AAAQC;;AAAgBC;;;AAEtBC;;AACAC;;AACAC;;AACAC;;;AAEAC;AAEF;AACF;AACA;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AAMA;AACwBC;AAElBC;AACAC;AACAC;AACAC;AAA2BJ;;;AAMnB;AAAkC;AAAU;AAAQ;;AAIpCA;;AAAmC;;AAIvDK;AACAC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAvB;AACAwB;AACE;;AAEA;AACAC;;AAEFC;AACAC;AAIEA;;;;;;AAK4Cf;AAC5B;AAKdgB;AACAC;AACAC;AAAuB;;AAGZ;;AAED;AAG1B;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\nimport { isSSR } from '@remember-web/shared';\nimport { type PropsWithChildren, useState } from 'react';\n\nimport { CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper } from './styles';\nimport {\n  type TooltipProps,\n  type TooltipSize,\n  type TooltipType,\n  isLargeSizeProps,\n  isStaticTypeProps,\n} from './types';\n\nconst hoverable = isSSR()\n  ? true\n  : window.matchMedia('(any-hover: hover)').matches;\n\nexport default function Tooltip<\n  Type extends TooltipType = 'hover',\n  Size extends TooltipSize = 'small',\n>({\n  children,\n  content,\n  contentOptions,\n  defaultOpen,\n  side = 'top',\n  gap = 4,\n  onOpenChange,\n  onClickOutside,\n  ...props\n}: PropsWithChildren<TooltipProps<Type, Size>>) {\n  const [_open, _setOpen] = useState(defaultOpen ?? false);\n  const { type = 'hover', size = 'small' } = props;\n  const {\n    backgroundColor = contents000,\n    contentColor = contents999,\n    maxWidth = 'initial',\n    textAlign = 'center',\n    onClick,\n    zIndex = 0,\n  } = contentOptions ?? {};\n  /**\n   * @description hover가 가능할 때 (마우스 포인터, 디지타이저 사용) type이 hover일 때만 hoverType으로 결정\n   *\n   * hover가 불가능할 때 (핑거 터치 사용) type이 hover라면 click타입으로 간주 */\n  const isHoverType = hoverable && type === 'hover';\n  const isClickType = !hoverable || type === 'click';\n  const isCloseButtonType = type === 'closeButton';\n  /** @description 클릭을 통해서 트리깅 하는 액션인지 확인 */\n  const isClickTrigger = isClickType || isCloseButtonType;\n  const isOpen = isStaticTypeProps(props)\n    ? props.open\n    : isHoverType\n      ? undefined\n      : _open;\n\n  return (\n    <RadixTooltip.Provider>\n      <RadixTooltip.Root\n        open={isOpen}\n        defaultOpen={defaultOpen}\n        delayDuration={100}\n        onOpenChange={onOpenChange}\n      >\n        <RadixTooltip.Trigger\n          asChild\n          onClick={\n            isClickTrigger\n              ? () => _setOpen(isClickType ? (prev) => !prev : true)\n              : undefined\n          }\n        >\n          <TooltipTriggerWrapper>{children}</TooltipTriggerWrapper>\n        </RadixTooltip.Trigger>\n        <RadixTooltip.Portal>\n          <TooltipContentWrapper $zIndex={zIndex}>\n            <TooltipContent\n              $size={size}\n              $maxWidth={maxWidth}\n              $backgroundColor={backgroundColor}\n              $contentColor={contentColor}\n              $textAlign={textAlign}\n              sideOffset={gap}\n              side={side}\n              onPointerDownOutside={(e) => {\n                if (isClickType) {\n                  _setOpen(false);\n                }\n                onClickOutside?.(e);\n              }}\n              collisionPadding={20}\n              onClick={(e) => {\n                if (isClickType) {\n                  () => _setOpen(false);\n                }\n                onClick?.(e);\n              }}\n            >\n              {content}\n              {type === 'closeButton' && (\n                <CloseButton onClick={() => _setOpen(false)}>\n                  <IconCloseS />\n                </CloseButton>\n              )}\n              {isLargeSizeProps(props) && props.hasArrow && (\n                <RadixTooltip.Arrow\n                  width={14}\n                  height={8}\n                  color={backgroundColor}\n                />\n              )}\n            </TooltipContent>\n          </TooltipContentWrapper>\n        </RadixTooltip.Portal>\n      </RadixTooltip.Root>\n    </RadixTooltip.Provider>\n  );\n}\n"],"names":["side","gap","props","_open","_setOpen","type","size","backgroundColor","contentColor","maxWidth","textAlign","zIndex","children","open","defaultOpen","delayDuration","onOpenChange","$zIndex","$size","$maxWidth","$backgroundColor","$contentColor","$textAlign","sideOffset","onPointerDownOutside","onClickOutside","collisionPadding","onClick","width","height","color"],"mappings":";;;;;;;;;;;;AAAa;AAiBb;AAIe;AAaiC;;;;;AAL9CA;;AACAC;;;AAGGC;;;AAEIC;AAAOC;AACd;AAAQC;;AAAgBC;;;AAEtBC;;AACAC;;AACAC;;AACAC;;;AAEAC;AAEF;AACF;AACA;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AAMA;AACwBC;AAElBC;AACAC;AACAC;AACAC;AAA2BJ;;;AAMnB;AAAkC;AAAU;AAAQ;;AAIpCA;;AAAmC;;AAGlCK;;AAEnBC;AACAC;AACAC;AACAC;AACAC;AACAC;AACAvB;AACAwB;AACE;;AAEA;AACAC;;AAEFC;AACAC;AAIEA;;;;;;AAK4Cf;AAC5B;AAKdgB;AACAC;AACAC;AAAuB;;;AAIP;;AAER;AAG1B;;"}

package/dist/src/Floating/Tooltip/styles.cjs.js

@@ -30,7 +30,7 @@ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTempla
 var RadixTooltip__namespace = /*#__PURE__*/_interopNamespace(RadixTooltip);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 var TOOLTIP_CONTENT_CONSTANTS = {
   large: {
     padding: '8px 12px',
@@ -43,18 +43,22 @@ var TOOLTIP_CONTENT_CONSTANTS = {
 };
 var fadeIn = styled.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  from {\n    opacity: 0\n  }\n  to {\n    opacity: 1;\n  }\n"])));
 var TooltipTriggerWrapper = styled__default.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n  width: fit-content;\n  height: fit-content;\n  & > svg {\n    display: block;\n  }\n"])));
-var TooltipContent = styled__default.default(RadixTooltip__namespace.Content)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n  box-sizing: border-box;\n  display: flex;\n  white-space: pre-wrap;\n  color: ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  will-change: opacity;\n  animation: ", " 200ms forwards;\n  gap: 4px;\n\n  ", ";\n"])), mixin.contents999, mixin.contents000, fadeIn, function (_ref) {
-  var $size = _ref.$size,
-    $maxWidth = _ref.$maxWidth,
-    $zIndex = _ref.$zIndex,
-    $backgroundColor = _ref.$backgroundColor,
-    $contentColor = _ref.$contentColor,
-    $textAlign = _ref.$textAlign;
-  return [styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n      padding: ", ";\n      ", ";\n      background-color: ", ";\n      color: ", ";\n      text-align: ", ";\n      z-index: ", ";\n    "])), TOOLTIP_CONTENT_CONSTANTS[$size].padding, mixin.getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography), $backgroundColor, $contentColor, $textAlign, $zIndex), typeof $maxWidth === 'string' ? "max-width: ".concat($maxWidth, ";") : "max-width: ".concat($maxWidth, "px;")];
+var TooltipContentWrapper = styled__default.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n  [data-radix-popper-content-wrapper]{\n    ", "\n  }\n"])), function (_ref) {
+  var $zIndex = _ref.$zIndex;
+  return $zIndex && styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default([" z-index: ", " !important; "])), $zIndex);
 });
-var CloseButton = styled__default.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  & > svg {\n    display: block;\n  }\n"])));
+var TooltipContent = styled__default.default(RadixTooltip__namespace.Content)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n  box-sizing: border-box;\n  display: flex;\n  white-space: pre-wrap;\n  color: ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  will-change: opacity;\n  animation: ", " 200ms forwards;\n  gap: 4px;\n  ", ";\n"])), mixin.contents999, mixin.contents000, fadeIn, function (_ref2) {
+  var $size = _ref2.$size,
+    $maxWidth = _ref2.$maxWidth,
+    $backgroundColor = _ref2.$backgroundColor,
+    $contentColor = _ref2.$contentColor,
+    $textAlign = _ref2.$textAlign;
+  return [styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default(["\n      padding: ", ";\n      ", ";\n      background-color: ", ";\n      color: ", ";\n      text-align: ", ";\n    "])), TOOLTIP_CONTENT_CONSTANTS[$size].padding, mixin.getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography), $backgroundColor, $contentColor, $textAlign), typeof $maxWidth === 'string' ? "max-width: ".concat($maxWidth, ";") : "max-width: ".concat($maxWidth, "px;")];
+});
+var CloseButton = styled__default.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  & > svg {\n    display: block;\n  }\n"])));
 
 exports.CloseButton = CloseButton;
 exports.TooltipContent = TooltipContent;
+exports.TooltipContentWrapper = TooltipContentWrapper;
 exports.TooltipTriggerWrapper = TooltipTriggerWrapper;
 //# sourceMappingURL=styles.cjs.js.map

package/dist/src/Floating/Tooltip/styles.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n  contents000,\n  contents999,\n  getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { TooltipSize, TooltipTextAlign } from './types';\n\nconst TOOLTIP_CONTENT_CONSTANTS: Record<\n  TooltipSize,\n  { padding: string; typography: TypographyStyle }\n> = {\n  large: {\n    padding: '8px 12px',\n    typography: 'Body1',\n  },\n  small: {\n    padding: '4px 8px',\n    typography: 'Body2',\n  },\n};\n\nconst fadeIn = keyframes`\n  from {\n    opacity: 0\n  }\n  to {\n    opacity: 1;\n  }\n`;\n\nexport const TooltipTriggerWrapper = styled.div`\n  width: fit-content;\n  height: fit-content;\n  & > svg {\n    display: block;\n  }\n`;\n\nexport const TooltipContent = styled(RadixTooltip.Content)<{\n  $size: TooltipSize;\n  $maxWidth: number | string;\n  $backgroundColor: string;\n  $contentColor: string;\n  $textAlign?: TooltipTextAlign;\n  $zIndex?: number;\n}>`\n  box-sizing: border-box;\n  display: flex;\n  white-space: pre-wrap;\n  color: ${contents999};\n  background-color: ${contents000};\n  border-radius: 4px;\n  will-change: opacity;\n  animation: ${fadeIn} 200ms forwards;\n  gap: 4px;\n\n  ${({\n    $size,\n    $maxWidth,\n    $zIndex,\n    $backgroundColor,\n    $contentColor,\n    $textAlign,\n  }) => [\n    css`\n      padding: ${TOOLTIP_CONTENT_CONSTANTS[$size].padding};\n      ${getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography)};\n      background-color: ${$backgroundColor};\n      color: ${$contentColor};\n      text-align: ${$textAlign};\n      z-index: ${$zIndex};\n    `,\n    typeof $maxWidth === 'string'\n      ? `max-width: ${$maxWidth};`\n      : `max-width: ${$maxWidth}px;`,\n  ]};\n`;\n\nexport const CloseButton = styled.button`\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  & > svg {\n    display: block;\n  }\n`;\n"],"names":["large","padding","typography","small","TooltipTriggerWrapper","CloseButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAab;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;AASaE;AAQN;AAkBH;;;;;;;AAmBD;AAGUC;;;;"}
+{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n  contents000,\n  contents999,\n  getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { TooltipSize, TooltipTextAlign } from './types';\nimport { CSSProperties } from 'react';\n\nconst TOOLTIP_CONTENT_CONSTANTS: Record<\n  TooltipSize,\n  { padding: string; typography: TypographyStyle }\n> = {\n  large: {\n    padding: '8px 12px',\n    typography: 'Body1',\n  },\n  small: {\n    padding: '4px 8px',\n    typography: 'Body2',\n  },\n};\n\nconst fadeIn = keyframes`\n  from {\n    opacity: 0\n  }\n  to {\n    opacity: 1;\n  }\n`;\n\nexport const TooltipTriggerWrapper = styled.div`\n  width: fit-content;\n  height: fit-content;\n  & > svg {\n    display: block;\n  }\n`;\n\nexport const TooltipContentWrapper = styled.div<{$zIndex?: CSSProperties['zIndex']}>`\n  [data-radix-popper-content-wrapper]{\n    ${({$zIndex}) => $zIndex && css` z-index: ${$zIndex} !important; `}\n  }\n`\n\nexport const TooltipContent = styled(RadixTooltip.Content)<{\n  $size: TooltipSize;\n  $maxWidth: number | string;\n  $backgroundColor: string;\n  $contentColor: string;\n  $textAlign?: TooltipTextAlign;\n}>`\n  box-sizing: border-box;\n  display: flex;\n  white-space: pre-wrap;\n  color: ${contents999};\n  background-color: ${contents000};\n  border-radius: 4px;\n  will-change: opacity;\n  animation: ${fadeIn} 200ms forwards;\n  gap: 4px;\n  ${({\n    $size,\n    $maxWidth,\n    $backgroundColor,\n    $contentColor,\n    $textAlign,\n  }) => [\n    css`\n      padding: ${TOOLTIP_CONTENT_CONSTANTS[$size].padding};\n      ${getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography)};\n      background-color: ${$backgroundColor};\n      color: ${$contentColor};\n      text-align: ${$textAlign};\n    `,\n    typeof $maxWidth === 'string'\n      ? `max-width: ${$maxWidth};`\n      : `max-width: ${$maxWidth}px;`,\n  ]};\n`;\n\nexport const CloseButton = styled.button`\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  & > svg {\n    display: block;\n  }\n`;\n"],"names":["large","padding","typography","small","TooltipTriggerWrapper","TooltipContentWrapper","CloseButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAcb;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;AASaE;AAQAC;AAEP;;AAAgE;AAI/D;AAgBH;;;;;;AAiBD;AAGUC;;;;;"}

package/dist/src/Floating/Tooltip/styles.d.ts

@@ -1,7 +1,10 @@
-/// <reference types="react" />
 import * as RadixTooltip from '@radix-ui/react-tooltip';
 import type { TooltipSize, TooltipTextAlign } from './types';
+import { CSSProperties } from 'react';
 export declare const TooltipTriggerWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const TooltipContentWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $zIndex?: CSSProperties['zIndex'];
+}>>;
 export declare const TooltipContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<Omit<RadixTooltip.TooltipContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, {
@@ -10,7 +13,6 @@ export declare const TooltipContent: import("styled-components").IStyledComponen
     $backgroundColor: string;
     $contentColor: string;
     $textAlign?: TooltipTextAlign | undefined;
-    $zIndex?: number | undefined;
 }>> & Omit<import("react").ForwardRefExoticComponent<RadixTooltip.TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
 export declare const CloseButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/src/Floating/Tooltip/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Tooltip/styles.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AASxD,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAyB7D,eAAO,MAAM,qBAAqB,gNAMjC,CAAC;AAEF,eAAO,MAAM,cAAc;;;WAClB,WAAW;eACP,MAAM,GAAG,MAAM;sBACR,MAAM;mBACT,MAAM;;;sLAkCtB,CAAC;AAEF,eAAO,MAAM,WAAW,4NAOvB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Tooltip/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,YAAY,MAAM,yBAAyB,CAAC;AASxD,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAyBtC,eAAO,MAAM,qBAAqB,gNAMjC,CAAC;AAEF,eAAO,MAAM,qBAAqB;cAAyB,aAAa,CAAC,QAAQ,CAAC;GAIjF,CAAA;AAED,eAAO,MAAM,cAAc;;;WAClB,WAAW;eACP,MAAM,GAAG,MAAM;sBACR,MAAM;mBACT,MAAM;;sLA8BtB,CAAC;AAEF,eAAO,MAAM,WAAW,4NAOvB,CAAC"}

package/dist/src/Floating/Tooltip/styles.esm.js

@@ -4,7 +4,7 @@ import * as RadixTooltip from '@radix-ui/react-tooltip';
 import { contents999, contents000, getTypographyStyles } from '@remember-web/mixin';
 import styled, { keyframes, css } from 'styled-components';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 var TOOLTIP_CONTENT_CONSTANTS = {
   large: {
     padding: '8px 12px',
@@ -17,16 +17,19 @@ var TOOLTIP_CONTENT_CONSTANTS = {
 };
 var fadeIn = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    opacity: 0\n  }\n  to {\n    opacity: 1;\n  }\n"])));
 var TooltipTriggerWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: fit-content;\n  height: fit-content;\n  & > svg {\n    display: block;\n  }\n"])));
-var TooltipContent = styled(RadixTooltip.Content)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  display: flex;\n  white-space: pre-wrap;\n  color: ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  will-change: opacity;\n  animation: ", " 200ms forwards;\n  gap: 4px;\n\n  ", ";\n"])), contents999, contents000, fadeIn, function (_ref) {
-  var $size = _ref.$size,
-    $maxWidth = _ref.$maxWidth,
-    $zIndex = _ref.$zIndex,
-    $backgroundColor = _ref.$backgroundColor,
-    $contentColor = _ref.$contentColor,
-    $textAlign = _ref.$textAlign;
-  return [css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      padding: ", ";\n      ", ";\n      background-color: ", ";\n      color: ", ";\n      text-align: ", ";\n      z-index: ", ";\n    "])), TOOLTIP_CONTENT_CONSTANTS[$size].padding, getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography), $backgroundColor, $contentColor, $textAlign, $zIndex), typeof $maxWidth === 'string' ? "max-width: ".concat($maxWidth, ";") : "max-width: ".concat($maxWidth, "px;")];
+var TooltipContentWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  [data-radix-popper-content-wrapper]{\n    ", "\n  }\n"])), function (_ref) {
+  var $zIndex = _ref.$zIndex;
+  return $zIndex && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([" z-index: ", " !important; "])), $zIndex);
 });
-var CloseButton = styled.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  & > svg {\n    display: block;\n  }\n"])));
+var TooltipContent = styled(RadixTooltip.Content)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  display: flex;\n  white-space: pre-wrap;\n  color: ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  will-change: opacity;\n  animation: ", " 200ms forwards;\n  gap: 4px;\n  ", ";\n"])), contents999, contents000, fadeIn, function (_ref2) {
+  var $size = _ref2.$size,
+    $maxWidth = _ref2.$maxWidth,
+    $backgroundColor = _ref2.$backgroundColor,
+    $contentColor = _ref2.$contentColor,
+    $textAlign = _ref2.$textAlign;
+  return [css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      padding: ", ";\n      ", ";\n      background-color: ", ";\n      color: ", ";\n      text-align: ", ";\n    "])), TOOLTIP_CONTENT_CONSTANTS[$size].padding, getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography), $backgroundColor, $contentColor, $textAlign), typeof $maxWidth === 'string' ? "max-width: ".concat($maxWidth, ";") : "max-width: ".concat($maxWidth, "px;")];
+});
+var CloseButton = styled.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  & > svg {\n    display: block;\n  }\n"])));
 
-export { CloseButton, TooltipContent, TooltipTriggerWrapper };
+export { CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper };
 //# sourceMappingURL=styles.esm.js.map

package/dist/src/Floating/Tooltip/styles.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.esm.js","sources":["../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n  contents000,\n  contents999,\n  getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { TooltipSize, TooltipTextAlign } from './types';\n\nconst TOOLTIP_CONTENT_CONSTANTS: Record<\n  TooltipSize,\n  { padding: string; typography: TypographyStyle }\n> = {\n  large: {\n    padding: '8px 12px',\n    typography: 'Body1',\n  },\n  small: {\n    padding: '4px 8px',\n    typography: 'Body2',\n  },\n};\n\nconst fadeIn = keyframes`\n  from {\n    opacity: 0\n  }\n  to {\n    opacity: 1;\n  }\n`;\n\nexport const TooltipTriggerWrapper = styled.div`\n  width: fit-content;\n  height: fit-content;\n  & > svg {\n    display: block;\n  }\n`;\n\nexport const TooltipContent = styled(RadixTooltip.Content)<{\n  $size: TooltipSize;\n  $maxWidth: number | string;\n  $backgroundColor: string;\n  $contentColor: string;\n  $textAlign?: TooltipTextAlign;\n  $zIndex?: number;\n}>`\n  box-sizing: border-box;\n  display: flex;\n  white-space: pre-wrap;\n  color: ${contents999};\n  background-color: ${contents000};\n  border-radius: 4px;\n  will-change: opacity;\n  animation: ${fadeIn} 200ms forwards;\n  gap: 4px;\n\n  ${({\n    $size,\n    $maxWidth,\n    $zIndex,\n    $backgroundColor,\n    $contentColor,\n    $textAlign,\n  }) => [\n    css`\n      padding: ${TOOLTIP_CONTENT_CONSTANTS[$size].padding};\n      ${getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography)};\n      background-color: ${$backgroundColor};\n      color: ${$contentColor};\n      text-align: ${$textAlign};\n      z-index: ${$zIndex};\n    `,\n    typeof $maxWidth === 'string'\n      ? `max-width: ${$maxWidth};`\n      : `max-width: ${$maxWidth}px;`,\n  ]};\n`;\n\nexport const CloseButton = styled.button`\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  & > svg {\n    display: block;\n  }\n`;\n"],"names":["large","padding","typography","small","TooltipTriggerWrapper","CloseButton"],"mappings":";;;;;;AAAa;AAab;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;AASaE;AAQN;AAkBH;;;;;;;AAmBD;AAGUC;;"}
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n  contents000,\n  contents999,\n  getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css, keyframes } from 'styled-components';\n\nimport type { TooltipSize, TooltipTextAlign } from './types';\nimport { CSSProperties } from 'react';\n\nconst TOOLTIP_CONTENT_CONSTANTS: Record<\n  TooltipSize,\n  { padding: string; typography: TypographyStyle }\n> = {\n  large: {\n    padding: '8px 12px',\n    typography: 'Body1',\n  },\n  small: {\n    padding: '4px 8px',\n    typography: 'Body2',\n  },\n};\n\nconst fadeIn = keyframes`\n  from {\n    opacity: 0\n  }\n  to {\n    opacity: 1;\n  }\n`;\n\nexport const TooltipTriggerWrapper = styled.div`\n  width: fit-content;\n  height: fit-content;\n  & > svg {\n    display: block;\n  }\n`;\n\nexport const TooltipContentWrapper = styled.div<{$zIndex?: CSSProperties['zIndex']}>`\n  [data-radix-popper-content-wrapper]{\n    ${({$zIndex}) => $zIndex && css` z-index: ${$zIndex} !important; `}\n  }\n`\n\nexport const TooltipContent = styled(RadixTooltip.Content)<{\n  $size: TooltipSize;\n  $maxWidth: number | string;\n  $backgroundColor: string;\n  $contentColor: string;\n  $textAlign?: TooltipTextAlign;\n}>`\n  box-sizing: border-box;\n  display: flex;\n  white-space: pre-wrap;\n  color: ${contents999};\n  background-color: ${contents000};\n  border-radius: 4px;\n  will-change: opacity;\n  animation: ${fadeIn} 200ms forwards;\n  gap: 4px;\n  ${({\n    $size,\n    $maxWidth,\n    $backgroundColor,\n    $contentColor,\n    $textAlign,\n  }) => [\n    css`\n      padding: ${TOOLTIP_CONTENT_CONSTANTS[$size].padding};\n      ${getTypographyStyles(TOOLTIP_CONTENT_CONSTANTS[$size].typography)};\n      background-color: ${$backgroundColor};\n      color: ${$contentColor};\n      text-align: ${$textAlign};\n    `,\n    typeof $maxWidth === 'string'\n      ? `max-width: ${$maxWidth};`\n      : `max-width: ${$maxWidth}px;`,\n  ]};\n`;\n\nexport const CloseButton = styled.button`\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  & > svg {\n    display: block;\n  }\n`;\n"],"names":["large","padding","typography","small","TooltipTriggerWrapper","TooltipContentWrapper","CloseButton"],"mappings":";;;;;;AAAa;AAcb;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;AASaE;AAQAC;AAEP;;AAAgE;AAI/D;AAgBH;;;;;;AAiBD;AAGUC;;"}

package/dist/src/index.cjs.js

@@ -70,12 +70,14 @@ exports.Tooltip = index$k;
 exports.DropdownMenuItemDisabledCSS = styles$2.DropdownMenuItemDisabledCSS;
 exports.DropdownMenuItemHoverCSS = styles$2.DropdownMenuItemHoverCSS;
 exports.StyledDropdownMenuContent = styles$2.StyledDropdownMenuContent;
+exports.StyledDropdownMenuContentWrapper = styles$2.StyledDropdownMenuContentWrapper;
 exports.StyledDropdownMenuItem = styles$2.StyledDropdownMenuItem;
 exports.StyledDropdownMenuSection = styles$2.StyledDropdownMenuSection;
 exports.StyledDropdownMenuSectionTitle = styles$2.StyledDropdownMenuSectionTitle;
 exports.dropdownMenuItemCSS = styles$2.dropdownMenuItemCSS;
 exports.getDropdownMenuItemCss = styles$2.getDropdownMenuItemCss;
 exports.StyledPopoverContent = styles$3.StyledPopoverContent;
+exports.StyledPopoverContentWrapper = styles$3.StyledPopoverContentWrapper;
 exports.showFadeIn = styles$3.showFadeIn;
 exports.showFadeOut = styles$3.showFadeOut;
 //# sourceMappingURL=index.cjs.js.map

package/dist/src/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/src/index.esm.js

@@ -27,6 +27,6 @@ export { default as Select } from './Inputs/Select/index.esm.js';
 export { default as DropdownMenu } from './Floating/DropdownMenu/index.esm.js';
 export { default as Popover } from './Floating/Popover/index.esm.js';
 export { default as Tooltip } from './Floating/Tooltip/index.esm.js';
-export { DropdownMenuItemDisabledCSS, DropdownMenuItemHoverCSS, StyledDropdownMenuContent, StyledDropdownMenuItem, StyledDropdownMenuSection, StyledDropdownMenuSectionTitle, dropdownMenuItemCSS, getDropdownMenuItemCss } from './Floating/DropdownMenu/styles.esm.js';
-export { StyledPopoverContent, showFadeIn, showFadeOut } from './Floating/Popover/styles.esm.js';
+export { DropdownMenuItemDisabledCSS, DropdownMenuItemHoverCSS, StyledDropdownMenuContent, StyledDropdownMenuContentWrapper, StyledDropdownMenuItem, StyledDropdownMenuSection, StyledDropdownMenuSectionTitle, dropdownMenuItemCSS, getDropdownMenuItemCss } from './Floating/DropdownMenu/styles.esm.js';
+export { StyledPopoverContent, StyledPopoverContentWrapper, showFadeIn, showFadeOut } from './Floating/Popover/styles.esm.js';
 //# sourceMappingURL=index.esm.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remember-web/primitive",
-  "version": "0.2.0",
+  "version": "0.2.3",
   "description": "Remember Web Primitive Components",
   "homepage": "https://dramancompany.github.io/remember-web-packages/",
   "author": "Remember",
@@ -42,7 +42,7 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@remember-web/icon": "^0.1.9",
-    "@remember-web/mixin": "^0.2.0",
+    "@remember-web/mixin": "^0.2.3",
     "@remember-web/shared": "^0.1.1"
   },
   "devDependencies": {

package/src/Badge/style.tsx

@@ -9,7 +9,7 @@ import styled, { css } from 'styled-components';
  * pseudo로 사용시 data-badge-value attribue가 필요합니다.
  */
 export const badgeCss = css`
-  ${getTypographyStyles('Subtitle2')}
+ ${getTypographyStyles('Subtitle2')}
 
   display: inline-block;
   box-sizing: border-box;

package/src/Common/Typography/Typography.stories.tsx

@@ -53,7 +53,7 @@ export const Overview: Story = {
                   </Typography>
                 </TableColumn>
                 <TableColumn align="center">{fontSize}px</TableColumn>
-                <TableColumn align="center">{lineHeight}</TableColumn>
+                <TableColumn align="center">{lineHeight}px</TableColumn>
                 <TableColumn align="center">{fontWeight}</TableColumn>
               </TableRow>
             );

package/src/Floating/DropdownMenu/index.tsx

@@ -2,6 +2,7 @@ import * as RadixPopover from '@radix-ui/react-popover';
 
 import {
   StyledDropdownMenuContent,
+  StyledDropdownMenuContentWrapper,
   StyledDropdownMenuItem,
 } from '@/Floating/DropdownMenu/styles';
 import type { PopoverContentProps, PopoverProps } from '@/Floating/Popover';
@@ -19,10 +20,14 @@ const DropdownMenu = Object.assign(RadixPopover.Root.bind(null), {
   Content: ({ isInsideCloseable = false, ...props }: DropdownContentProps) =>
     isInsideCloseable ? (
       <RadixPopover.Close asChild>
-        <StyledDropdownMenuContent {...props} />
+        <StyledDropdownMenuContentWrapper $zIndex={props.style?.zIndex}>
+          <StyledDropdownMenuContent {...props} />
+        </StyledDropdownMenuContentWrapper>
       </RadixPopover.Close>
     ) : (
-      <StyledDropdownMenuContent {...props} />
+      <StyledDropdownMenuContentWrapper $zIndex={props.style?.zIndex}>
+        <StyledDropdownMenuContent {...props} />
+      </StyledDropdownMenuContentWrapper>
     ),
   Arrow: Popover.Arrow,
   Trigger: Popover.Trigger,

package/src/Floating/DropdownMenu/styles.tsx

@@ -6,7 +6,7 @@ import {
   getTypographyStyles,
 } from '@remember-web/mixin';
 import type { ConvertTransientProps } from '@remember-web/shared';
-import styled, { css } from 'styled-components';
+import styled, { css, CSSProperties } from 'styled-components';
 
 import { StyledPopoverContent } from '../Popover/styles';
 
@@ -73,6 +73,13 @@ export const StyledDropdownMenuItem = styled.div.attrs<DropdownMenuItemProps>(
   })
 )<StyledDropdownMenuItemProps>(getDropdownMenuItemCss);
 
+
+export const StyledDropdownMenuContentWrapper = styled.div<{$zIndex?: CSSProperties['zIndex']}>`
+  [data-radix-popper-content-wrapper]{
+    ${({$zIndex}) => $zIndex && css` z-index: ${$zIndex} !important; `}
+  }
+`
+
 export const StyledDropdownMenuSection = styled.div``;
 
 export const StyledDropdownMenuContent = styled(StyledPopoverContent)`

package/src/Floating/Popover/index.tsx

@@ -1,6 +1,6 @@
 import * as RadixPopover from '@radix-ui/react-popover';
 
-import { StyledPopoverContent } from '@/Floating/Popover/styles';
+import { StyledPopoverContent, StyledPopoverContentWrapper } from '@/Floating/Popover/styles';
 
 const { Trigger, Anchor, Close, PopoverPortal } = RadixPopover;
 
@@ -24,10 +24,14 @@ const Popover = Object.assign(RadixPopover.Root.bind(null), {
   Content: ({ isInsideCloseable = false, ...props }: PopoverContentProps) =>
     isInsideCloseable ? (
       <RadixPopover.Close asChild>
-        <StyledPopoverContent {...props} />
+        <StyledPopoverContentWrapper $zIndex={props.style?.zIndex}>
+          <StyledPopoverContent {...props} />
+        </StyledPopoverContentWrapper>
       </RadixPopover.Close>
     ) : (
-      <StyledPopoverContent {...props} />
+      <StyledPopoverContentWrapper $zIndex={props.style?.zIndex}>
+        <StyledPopoverContent {...props} />
+      </StyledPopoverContentWrapper>
     ),
 });
 

package/src/Floating/Popover/styles.ts

@@ -1,6 +1,7 @@
-import { PopoverContent } from '@radix-ui/react-popover';
+import { PopoverContent, PopoverContentProps } from '@radix-ui/react-popover';
 import { bg100, contents000 } from '@remember-web/mixin';
-import styled, { keyframes } from 'styled-components';
+import { CSSProperties } from 'react';
+import styled, { css, keyframes } from 'styled-components';
 
 export const showFadeIn = keyframes`
     from {
@@ -19,6 +20,12 @@ export const showFadeOut = keyframes`
     }
 `;
 
+export const StyledPopoverContentWrapper = styled.div<{$zIndex?: CSSProperties['zIndex']}>`
+  [data-radix-popper-content-wrapper]{
+    ${({$zIndex}) => $zIndex && css` z-index: ${$zIndex} !important; `}
+  }
+`
+
 export const StyledPopoverContent = styled(PopoverContent)`
   contain: paint;
   width: fit-content;

package/src/Floating/Tooltip/Tooltip.stories.tsx

@@ -39,7 +39,10 @@ export const Default: Story = {
     type: 'hover',
     side: 'top',
     gap: 4,
-    defaultOpen: false,
+    contentOptions:{
+      zIndex:9999
+    },
+    defaultOpen: true,
   },
   render: ({ ...props }) => (
     <Flex gap={24}>

package/src/Floating/Tooltip/index.tsx

@@ -6,7 +6,7 @@ import { contents000, contents999 } from '@remember-web/mixin';
 import { isSSR } from '@remember-web/shared';
 import { type PropsWithChildren, useState } from 'react';
 
-import { CloseButton, TooltipContent, TooltipTriggerWrapper } from './styles';
+import { CloseButton, TooltipContent, TooltipContentWrapper, TooltipTriggerWrapper } from './styles';
 import {
   type TooltipProps,
   type TooltipSize,
@@ -77,43 +77,44 @@ export default function Tooltip<
           <TooltipTriggerWrapper>{children}</TooltipTriggerWrapper>
         </RadixTooltip.Trigger>
         <RadixTooltip.Portal>
-          <TooltipContent
-            $size={size}
-            $maxWidth={maxWidth}
-            $backgroundColor={backgroundColor}
-            $contentColor={contentColor}
-            $textAlign={textAlign}
-            $zIndex={zIndex}
-            sideOffset={gap}
-            side={side}
-            onPointerDownOutside={(e) => {
-              if (isClickType) {
-                _setOpen(false);
-              }
-              onClickOutside?.(e);
-            }}
-            collisionPadding={20}
-            onClick={(e) => {
-              if (isClickType) {
-                () => _setOpen(false);
-              }
-              onClick?.(e);
-            }}
-          >
-            {content}
-            {type === 'closeButton' && (
-              <CloseButton onClick={() => _setOpen(false)}>
-                <IconCloseS />
-              </CloseButton>
-            )}
-            {isLargeSizeProps(props) && props.hasArrow && (
-              <RadixTooltip.Arrow
-                width={14}
-                height={8}
-                color={backgroundColor}
-              />
-            )}
-          </TooltipContent>
+          <TooltipContentWrapper $zIndex={zIndex}>
+            <TooltipContent
+              $size={size}
+              $maxWidth={maxWidth}
+              $backgroundColor={backgroundColor}
+              $contentColor={contentColor}
+              $textAlign={textAlign}
+              sideOffset={gap}
+              side={side}
+              onPointerDownOutside={(e) => {
+                if (isClickType) {
+                  _setOpen(false);
+                }
+                onClickOutside?.(e);
+              }}
+              collisionPadding={20}
+              onClick={(e) => {
+                if (isClickType) {
+                  () => _setOpen(false);
+                }
+                onClick?.(e);
+              }}
+            >
+              {content}
+              {type === 'closeButton' && (
+                <CloseButton onClick={() => _setOpen(false)}>
+                  <IconCloseS />
+                </CloseButton>
+              )}
+              {isLargeSizeProps(props) && props.hasArrow && (
+                <RadixTooltip.Arrow
+                  width={14}
+                  height={8}
+                  color={backgroundColor}
+                />
+              )}
+            </TooltipContent>
+          </TooltipContentWrapper>
         </RadixTooltip.Portal>
       </RadixTooltip.Root>
     </RadixTooltip.Provider>

package/src/Floating/Tooltip/styles.ts

@@ -10,6 +10,7 @@ import {
 import styled, { css, keyframes } from 'styled-components';
 
 import type { TooltipSize, TooltipTextAlign } from './types';
+import { CSSProperties } from 'react';
 
 const TOOLTIP_CONTENT_CONSTANTS: Record<
   TooltipSize,
@@ -42,13 +43,18 @@ export const TooltipTriggerWrapper = styled.div`
   }
 `;
 
+export const TooltipContentWrapper = styled.div<{$zIndex?: CSSProperties['zIndex']}>`
+  [data-radix-popper-content-wrapper]{
+    ${({$zIndex}) => $zIndex && css` z-index: ${$zIndex} !important; `}
+  }
+`
+
 export const TooltipContent = styled(RadixTooltip.Content)<{
   $size: TooltipSize;
   $maxWidth: number | string;
   $backgroundColor: string;
   $contentColor: string;
   $textAlign?: TooltipTextAlign;
-  $zIndex?: number;
 }>`
   box-sizing: border-box;
   display: flex;
@@ -59,11 +65,9 @@ export const TooltipContent = styled(RadixTooltip.Content)<{
   will-change: opacity;
   animation: ${fadeIn} 200ms forwards;
   gap: 4px;
-
   ${({
     $size,
     $maxWidth,
-    $zIndex,
     $backgroundColor,
     $contentColor,
     $textAlign,
@@ -74,7 +78,6 @@ export const TooltipContent = styled(RadixTooltip.Content)<{
       background-color: ${$backgroundColor};
       color: ${$contentColor};
       text-align: ${$textAlign};
-      z-index: ${$zIndex};
     `,
     typeof $maxWidth === 'string'
       ? `max-width: ${$maxWidth};`