@channel.io/bezier-react 1.6.1 → 1.7.0

package/dist/esm/components/Navigator/NavItem/NavItem.mjs

@@ -1,15 +1,14 @@
-import React__default, { memo, useCallback } from 'react';
+import React__default, { memo, forwardRef, useCallback } from 'react';
 import { noop } from '../../../utils/functionUtils.mjs';
 import Text from '../../Text/Text.mjs';
 import { Wrapper, Item, LeftIconWrapper, RightContentWrapper } from './NavItem.styled.mjs';
-import LegacyIcon from '../../LegacyIcon/LegacyIcon.mjs';
+import { Icon } from '../../Icon/Icon.mjs';
 import { IconSize } from '../../Icon/Icon.types.mjs';
-import { isIconName } from '../../LegacyIcon/utils.mjs';
 import { Typography } from '../../../foundation/Typography.mjs';
 
 const NAV_ITEM_TEST_ID = 'bezier-react-nav-item';
 const NAV_ITEM_LEFT_ICON_TEST_ID = 'bezier-react-nav-item-left-icon';
-function NavItem({
+const NavItem = /*#__PURE__*/forwardRef(function NavItem({
   as,
   testId = NAV_ITEM_TEST_ID,
   name,
@@ -22,15 +21,16 @@ function NavItem({
   rightContent,
   leftIcon,
   active,
-  onClick = noop
-}) {
+  onClick = noop,
+  ...rest
+}, forwardedRef) {
   const handleClickItem = useCallback(e => {
     onClick(e, name);
   }, [name, onClick]);
-  const showLeftIcon = isIconName(leftIcon);
   return /*#__PURE__*/React__default.createElement(Wrapper, {
     role: "none"
-  }, /*#__PURE__*/React__default.createElement(Item, {
+  }, /*#__PURE__*/React__default.createElement(Item, Object.assign({}, rest, {
+    ref: forwardedRef,
     as: as,
     active: active,
     style: style,
@@ -41,16 +41,16 @@ function NavItem({
     href: href,
     target: target,
     role: "menuitem"
-  }, /*#__PURE__*/React__default.createElement(LeftIconWrapper, null, showLeftIcon && /*#__PURE__*/React__default.createElement(LegacyIcon, {
+  }), /*#__PURE__*/React__default.createElement(LeftIconWrapper, null, leftIcon && /*#__PURE__*/React__default.createElement(Icon, {
     testId: NAV_ITEM_LEFT_ICON_TEST_ID,
-    name: leftIcon,
+    source: leftIcon,
     size: IconSize.S,
     color: active ? 'bgtxt-blue-normal' : 'txt-black-dark'
   })), /*#__PURE__*/React__default.createElement(Text, {
     typo: Typography.Size14,
     truncated: true
   }, content), rightContent && /*#__PURE__*/React__default.createElement(RightContentWrapper, null, rightContent)));
-}
+});
 var NavItem$1 = /*#__PURE__*/memo(NavItem);
 
 export { NAV_ITEM_LEFT_ICON_TEST_ID, NAV_ITEM_TEST_ID, NavItem$1 as default };

package/dist/esm/components/Navigator/NavItem/NavItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.mjs","sources":["../../../../../src/components/Navigator/NavItem/NavItem.tsx"],"sourcesContent":["import React, {\n  memo,\n  useCallback,\n} from 'react'\n\nimport { Typography } from '~/src/foundation'\n\nimport { noop } from '~/src/utils/functionUtils'\n\nimport { IconSize } from '~/src/components/Icon'\nimport {\n  LegacyIcon,\n  isIconName,\n} from '~/src/components/LegacyIcon'\nimport { Text } from '~/src/components/Text'\n\nimport type NavItemProps from './NavItem.types'\n\nimport {\n  Item,\n  LeftIconWrapper,\n  RightContentWrapper,\n  Wrapper,\n} from './NavItem.styled'\n\nexport const NAV_ITEM_TEST_ID = 'bezier-react-nav-item'\nexport const NAV_ITEM_LEFT_ICON_TEST_ID = 'bezier-react-nav-item-left-icon'\n\nfunction NavItem({\n  as,\n  testId = NAV_ITEM_TEST_ID,\n  name,\n  style,\n  className,\n  interpolation,\n  content,\n  href,\n  target = '_self',\n  rightContent,\n  leftIcon,\n  active,\n  onClick = noop,\n}: NavItemProps) {\n  const handleClickItem = useCallback((e?: React.MouseEvent) => {\n    onClick(e, name)\n  }, [\n    name,\n    onClick,\n  ])\n\n  const showLeftIcon = isIconName(leftIcon)\n\n  return (\n    <Wrapper role=\"none\">\n      <Item\n        as={as}\n        active={active}\n        style={style}\n        className={className}\n        interpolation={interpolation}\n        onClick={handleClickItem}\n        data-testid={testId}\n        href={href}\n        target={target}\n        role=\"menuitem\"\n      >\n        <LeftIconWrapper>\n          { showLeftIcon && (\n            <LegacyIcon\n              testId={NAV_ITEM_LEFT_ICON_TEST_ID}\n              name={leftIcon}\n              size={IconSize.S}\n              color={active ? 'bgtxt-blue-normal' : 'txt-black-dark'}\n            />\n          ) }\n        </LeftIconWrapper>\n\n        <Text typo={Typography.Size14} truncated>\n          { content }\n        </Text>\n\n        { rightContent && (\n          <RightContentWrapper>\n            { rightContent }\n          </RightContentWrapper>\n        ) }\n      </Item>\n    </Wrapper>\n  )\n}\n\nexport default memo(NavItem)\n"],"names":["NAV_ITEM_TEST_ID","NAV_ITEM_LEFT_ICON_TEST_ID","NavItem","as","testId","name","style","className","interpolation","content","href","target","rightContent","leftIcon","active","onClick","noop","handleClickItem","useCallback","e","showLeftIcon","isIconName","React","createElement","Wrapper","role","Item","LeftIconWrapper","LegacyIcon","size","IconSize","S","color","Text","typo","Typography","Size14","truncated","RightContentWrapper","memo"],"mappings":";;;;;;;;;AAyBO,MAAMA,gBAAgB,GAAG,wBAAuB;AAChD,MAAMC,0BAA0B,GAAG,kCAAiC;AAE3E,SAASC,OAAOA,CAAC;EACfC,EAAE;AACFC,EAAAA,MAAM,GAAGJ,gBAAgB;EACzBK,IAAI;EACJC,KAAK;EACLC,SAAS;EACTC,aAAa;EACbC,OAAO;EACPC,IAAI;AACJC,EAAAA,MAAM,GAAG,OAAO;EAChBC,YAAY;EACZC,QAAQ;EACRC,MAAM;AACNC,EAAAA,OAAO,GAAGC,IAAAA;AACE,CAAC,EAAE;AACf,EAAA,MAAMC,eAAe,GAAGC,WAAW,CAAEC,CAAoB,IAAK;AAC5DJ,IAAAA,OAAO,CAACI,CAAC,EAAEd,IAAI,CAAC,CAAA;AAClB,GAAC,EAAE,CACDA,IAAI,EACJU,OAAO,CACR,CAAC,CAAA;AAEF,EAAA,MAAMK,YAAY,GAAGC,UAAU,CAACR,QAAQ,CAAC,CAAA;AAEzC,EAAA,oBACES,cAAA,CAAAC,aAAA,CAACC,OAAO,EAAA;AAACC,IAAAA,IAAI,EAAC,MAAA;AAAM,GAAA,eAClBH,cAAA,CAAAC,aAAA,CAACG,IAAI,EAAA;AACHvB,IAAAA,EAAE,EAAEA,EAAG;AACPW,IAAAA,MAAM,EAAEA,MAAO;AACfR,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,aAAa,EAAEA,aAAc;AAC7BO,IAAAA,OAAO,EAAEE,eAAgB;AACzB,IAAA,aAAA,EAAab,MAAO;AACpBM,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfc,IAAAA,IAAI,EAAC,UAAA;AAAU,GAAA,eAEfH,cAAA,CAAAC,aAAA,CAACI,eAAe,EAAA,IAAA,EACZP,YAAY,iBACZE,cAAA,CAAAC,aAAA,CAACK,UAAU,EAAA;AACTxB,IAAAA,MAAM,EAAEH,0BAA2B;AACnCI,IAAAA,IAAI,EAAEQ,QAAS;IACfgB,IAAI,EAAEC,QAAQ,CAACC,CAAE;AACjBC,IAAAA,KAAK,EAAElB,MAAM,GAAG,mBAAmB,GAAG,gBAAA;AAAiB,GACxD,CAEY,CAAC,eAElBQ,cAAA,CAAAC,aAAA,CAACU,IAAI,EAAA;IAACC,IAAI,EAAEC,UAAU,CAACC,MAAO;IAACC,SAAS,EAAA,IAAA;AAAA,GAAA,EACpC5B,OACE,CAAC,EAELG,YAAY,iBACZU,cAAA,CAAAC,aAAA,CAACe,mBAAmB,EAAA,IAAA,EAChB1B,YACiB,CAEnB,CACC,CAAC,CAAA;AAEd,CAAA;AAEA,gBAAe2B,aAAAA,IAAI,CAACrC,OAAO,CAAC;;;;"}
+{"version":3,"file":"NavItem.mjs","sources":["../../../../../src/components/Navigator/NavItem/NavItem.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  memo,\n  useCallback,\n} from 'react'\n\nimport { Typography } from '~/src/foundation'\n\nimport { noop } from '~/src/utils/functionUtils'\n\nimport {\n  Icon,\n  IconSize,\n} from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport type NavItemProps from './NavItem.types'\n\nimport {\n  Item,\n  LeftIconWrapper,\n  RightContentWrapper,\n  Wrapper,\n} from './NavItem.styled'\n\nexport const NAV_ITEM_TEST_ID = 'bezier-react-nav-item'\nexport const NAV_ITEM_LEFT_ICON_TEST_ID = 'bezier-react-nav-item-left-icon'\n\nconst NavItem = forwardRef<HTMLAnchorElement, NavItemProps>(function NavItem({\n  as,\n  testId = NAV_ITEM_TEST_ID,\n  name,\n  style,\n  className,\n  interpolation,\n  content,\n  href,\n  target = '_self',\n  rightContent,\n  leftIcon,\n  active,\n  onClick = noop,\n  ...rest\n}, forwardedRef) {\n  const handleClickItem = useCallback((e?: React.MouseEvent) => {\n    onClick(e, name)\n  }, [\n    name,\n    onClick,\n  ])\n\n  return (\n    <Wrapper role=\"none\">\n      <Item\n        {...rest}\n        ref={forwardedRef}\n        as={as}\n        active={active}\n        style={style}\n        className={className}\n        interpolation={interpolation}\n        onClick={handleClickItem}\n        data-testid={testId}\n        href={href}\n        target={target}\n        role=\"menuitem\"\n      >\n        <LeftIconWrapper>\n          { leftIcon && (\n            <Icon\n              testId={NAV_ITEM_LEFT_ICON_TEST_ID}\n              source={leftIcon}\n              size={IconSize.S}\n              color={active ? 'bgtxt-blue-normal' : 'txt-black-dark'}\n            />\n          ) }\n        </LeftIconWrapper>\n\n        <Text typo={Typography.Size14} truncated>\n          { content }\n        </Text>\n\n        { rightContent && (\n          <RightContentWrapper>\n            { rightContent }\n          </RightContentWrapper>\n        ) }\n      </Item>\n    </Wrapper>\n  )\n})\n\nexport default memo(NavItem)\n"],"names":["NAV_ITEM_TEST_ID","NAV_ITEM_LEFT_ICON_TEST_ID","NavItem","forwardRef","as","testId","name","style","className","interpolation","content","href","target","rightContent","leftIcon","active","onClick","noop","rest","forwardedRef","handleClickItem","useCallback","e","React","createElement","Wrapper","role","Item","Object","assign","ref","LeftIconWrapper","Icon","source","size","IconSize","S","color","Text","typo","Typography","Size14","truncated","RightContentWrapper","memo"],"mappings":";;;;;;;;AAyBO,MAAMA,gBAAgB,GAAG,wBAAuB;AAChD,MAAMC,0BAA0B,GAAG,kCAAiC;AAE3E,MAAMC,OAAO,gBAAGC,UAAU,CAAkC,SAASD,OAAOA,CAAC;EAC3EE,EAAE;AACFC,EAAAA,MAAM,GAAGL,gBAAgB;EACzBM,IAAI;EACJC,KAAK;EACLC,SAAS;EACTC,aAAa;EACbC,OAAO;EACPC,IAAI;AACJC,EAAAA,MAAM,GAAG,OAAO;EAChBC,YAAY;EACZC,QAAQ;EACRC,MAAM;AACNC,EAAAA,OAAO,GAAGC,IAAI;EACd,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;AACf,EAAA,MAAMC,eAAe,GAAGC,WAAW,CAAEC,CAAoB,IAAK;AAC5DN,IAAAA,OAAO,CAACM,CAAC,EAAEhB,IAAI,CAAC,CAAA;AAClB,GAAC,EAAE,CACDA,IAAI,EACJU,OAAO,CACR,CAAC,CAAA;AAEF,EAAA,oBACEO,cAAA,CAAAC,aAAA,CAACC,OAAO,EAAA;AAACC,IAAAA,IAAI,EAAC,MAAA;GACZH,eAAAA,cAAA,CAAAC,aAAA,CAACG,IAAI,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACCX,IAAI,EAAA;AACRY,IAAAA,GAAG,EAAEX,YAAa;AAClBf,IAAAA,EAAE,EAAEA,EAAG;AACPW,IAAAA,MAAM,EAAEA,MAAO;AACfR,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,aAAa,EAAEA,aAAc;AAC7BO,IAAAA,OAAO,EAAEI,eAAgB;AACzB,IAAA,aAAA,EAAaf,MAAO;AACpBM,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfc,IAAAA,IAAI,EAAC,UAAA;AAAU,GAAA,CAAA,eAEfH,cAAA,CAAAC,aAAA,CAACO,eAAe,EAAA,IAAA,EACZjB,QAAQ,iBACRS,cAAA,CAAAC,aAAA,CAACQ,IAAI,EAAA;AACH3B,IAAAA,MAAM,EAAEJ,0BAA2B;AACnCgC,IAAAA,MAAM,EAAEnB,QAAS;IACjBoB,IAAI,EAAEC,QAAQ,CAACC,CAAE;AACjBC,IAAAA,KAAK,EAAEtB,MAAM,GAAG,mBAAmB,GAAG,gBAAA;AAAiB,GACxD,CAEY,CAAC,eAElBQ,cAAA,CAAAC,aAAA,CAACc,IAAI,EAAA;IAACC,IAAI,EAAEC,UAAU,CAACC,MAAO;IAACC,SAAS,EAAA,IAAA;AAAA,GAAA,EACpChC,OACE,CAAC,EAELG,YAAY,iBACZU,cAAA,CAAAC,aAAA,CAACmB,mBAAmB,EAAA,IAAA,EAChB9B,YACiB,CAEnB,CACC,CAAC,CAAA;AAEd,CAAC,CAAC,CAAA;AAEF,gBAAe+B,aAAAA,IAAI,CAAC1C,OAAO,CAAC;;;;"}

package/dist/esm/components/Overlay/Overlay.mjs

@@ -1,5 +1,5 @@
 import React__default, { forwardRef, useState, useRef, useReducer, useCallback, useLayoutEffect, useMemo, useEffect } from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM__default from 'react-dom';
 import useEventHandler from '../../hooks/useEventHandler.mjs';
 import useMergeRefs from '../../hooks/useMergeRefs.mjs';
 import { getRootElement, document, window } from '../../utils/domUtils.mjs';
@@ -192,7 +192,7 @@ function Overlay({
   if (!shouldRender) {
     return null;
   }
-  return /*#__PURE__*/ReactDOM.createPortal(overlay, container || getRootElement());
+  return /*#__PURE__*/ReactDOM__default.createPortal(overlay, container || getRootElement());
 }
 var Overlay$1 = /*#__PURE__*/forwardRef(Overlay);
 

package/dist/esm/components/Overlay/Overlay.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.mjs","sources":["../../../../src/components/Overlay/Overlay.tsx"],"sourcesContent":["import React, {\n  type Ref,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n} from 'react'\n\nimport ReactDOM from 'react-dom'\n\nimport useEventHandler from '~/src/hooks/useEventHandler'\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport {\n  document,\n  getRootElement,\n  window,\n} from '~/src/utils/domUtils'\nimport { noop } from '~/src/utils/functionUtils'\n\nimport type OverlayProps from './Overlay.types'\nimport {\n  type ContainerRectAttr,\n  type TargetRectAttr,\n} from './Overlay.types'\nimport { OverlayPosition } from './Overlay.types'\n\nimport * as Styled from './Overlay.styled'\n\nexport const CONTAINER_TEST_ID = 'bezier-react-container'\nexport const WRAPPER_TEST_ID = 'bezier-react-wrapper'\nexport const OVERLAY_TEST_ID = 'bezier-react-overlay'\nexport const ESCAPE_KEY = 'Escape'\n\nfunction Overlay(\n  {\n    as,\n    containerTestId = CONTAINER_TEST_ID,\n    wrapperTestId = WRAPPER_TEST_ID,\n    testId = OVERLAY_TEST_ID,\n    show = false,\n    className = '',\n    style,\n    containerClassName = '',\n    containerStyle,\n    container,\n    target,\n    position = OverlayPosition.LeftCenter,\n    marginX = 0,\n    marginY = 0,\n    keepInContainer = false,\n    withTransition = false,\n    enableClickOutside = false,\n    children,\n    onHide = noop,\n    onTransitionEnd = noop,\n    ...rest\n  }: OverlayProps,\n  forwardedRef: Ref<HTMLDivElement>,\n) {\n  // NOTE: DOM render 가 필요한지 여부를 결정하는 state\n  const [shouldRender, setShouldRender] = useState(false)\n  // NOTE: 화면에 실제 표현해야 하는지 여부를 결정하는 state\n  const [shouldShow, setShouldShow] = useState(false)\n  const containerRect = useRef<ContainerRectAttr | null>(null)\n  const targetRect = useRef<TargetRectAttr | null>(null)\n\n  const [dummy, forceUpdate] = useReducer(x => !x, true)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const overlayRef = useRef<HTMLDivElement>(null)\n  const mergedRef = useMergeRefs<HTMLDivElement>(overlayRef, forwardedRef)\n\n  const handleOverlayForceUpdate = useCallback(() => {\n    forceUpdate()\n  }, [])\n\n  const handleContainerRect = useCallback(() => {\n    const containerElement = container || getRootElement()\n\n    const {\n      width: containerWidth,\n      height: containerHeight,\n      top: containerTop,\n      left: containerLeft,\n    } = containerElement.getBoundingClientRect()\n\n    containerRect.current = {\n      containerWidth,\n      containerHeight,\n      containerTop,\n      containerLeft,\n      scrollTop: container ? container.scrollTop : 0,\n      scrollLeft: container ? container.scrollLeft : 0,\n    }\n  }, [container])\n\n  useLayoutEffect(function initContainerRect() {\n    if (show) {\n      handleContainerRect()\n    }\n  }, [\n    show,\n    handleContainerRect,\n  ])\n\n  const handleTargetRect = useCallback(() => {\n    if (!target) {\n      return\n    }\n    const {\n      width: targetWidth,\n      height: targetHeight,\n      top: targetTop,\n      left: targetLeft,\n    } = target.getBoundingClientRect()\n    const { clientTop, clientLeft } = target\n\n    targetRect.current = {\n      targetWidth,\n      targetHeight,\n      targetTop,\n      targetLeft,\n      clientTop,\n      clientLeft,\n    }\n  }, [target])\n\n  useLayoutEffect(function initTargetRect() {\n    if (show) {\n      handleTargetRect()\n    }\n  }, [\n    show,\n    handleTargetRect,\n  ])\n\n  const handleTransitionEnd = useCallback<React.TransitionEventHandler<HTMLDivElement>>((event) => {\n    onTransitionEnd(event)\n    if (!show) {\n      setShouldRender(false)\n    }\n  }, [\n    show,\n    onTransitionEnd,\n  ])\n\n  const handleBlockMouseWheel = useCallback((event: HTMLElementEventMap['wheel']) => {\n    event.stopPropagation()\n  }, [])\n\n  const handleHideOverlay = useCallback((event: any) => {\n    if (!event.target?.closest(Styled.Overlay)) {\n      onHide()\n\n      if (!enableClickOutside) {\n        event.stopPropagation()\n      }\n    }\n  }, [\n    enableClickOutside,\n    onHide,\n  ])\n\n  const handleKeydown = useCallback((event: HTMLElementEventMap['keyup']) => {\n    if (event.key === ESCAPE_KEY) {\n      onHide()\n    }\n  }, [onHide])\n\n  useEventHandler(document, 'click', handleHideOverlay, show, true)\n  useEventHandler(document, 'keydown', handleKeydown, show)\n  useEventHandler(containerRef.current, 'wheel', handleBlockMouseWheel, show)\n\n  const Content = useMemo(() => (\n    <Styled.Overlay\n      as={as}\n      ref={mergedRef}\n      className={className}\n      show={shouldShow}\n      withTransition={withTransition}\n      style={style}\n      data-testid={testId}\n      containerRect={containerRect.current}\n      targetRect={targetRect.current}\n      overlay={overlayRef.current}\n      position={position}\n      marginX={marginX}\n      marginY={marginY}\n      keepInContainer={keepInContainer}\n      onTransitionEnd={handleTransitionEnd}\n      {...rest}\n    >\n      { children }\n    </Styled.Overlay>\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  ), [\n    as,\n    children,\n    className,\n    containerRect,\n    handleTransitionEnd,\n    keepInContainer,\n    marginX,\n    marginY,\n    mergedRef,\n    position,\n    shouldShow,\n    style,\n    targetRect,\n    testId,\n    withTransition,\n    dummy,\n  ])\n\n  const overlay = useMemo(() => {\n    if (container) {\n      return Content\n    }\n\n    return (\n      <Styled.DefaultContainer\n        ref={containerRef}\n        className={containerClassName}\n        show={show}\n        style={containerStyle}\n        data-testid={containerTestId}\n      >\n        <Styled.DefaultWrapper data-testid={wrapperTestId}>\n          { Content }\n        </Styled.DefaultWrapper>\n      </Styled.DefaultContainer>\n    )\n  }, [\n    container,\n    containerClassName,\n    show,\n    containerStyle,\n    containerTestId,\n    wrapperTestId,\n    Content,\n  ])\n\n  useEffect(() => {\n    handleOverlayForceUpdate()\n  }, [\n    children,\n    handleOverlayForceUpdate,\n  ])\n\n  /**\n   * Case 1: show === true\n   * show -> shouldRender -> shouldShow\n   * shouldRender 를 true 로 설정하고, 직후에 shouldShow 를 true 로 설정하여 transition 유발\n   *\n   * Case 2: show === false\n   * show -> shouldShow -> (...) -> shouldRender\n   * shouldShow 를 false 로 설정하고, shouldRender 는 transition 필요 여부에 따라 다르게 결정함\n   *    Case 2-1: withTransition === true\n   *    shouldShow -> onTransitionEnd -> shouldRender\n   *    onTransitionEnd handler 를 이용해 transition 이 끝난 다음 shouldRender 를 false 로 설정\n   *    Case 2-2: withTransition === false\n   *    shouldShow && shouldRender\n   *    transition 을 기다릴 필요가 없으므로 바로 shouldRender 를 false 로 설정\n   */\n  useEffect(() => {\n    if (show) {\n      if (shouldRender) {\n        window.requestAnimationFrame(() => setShouldShow(true))\n      } else {\n        window.requestAnimationFrame(() => setShouldRender(true))\n      }\n    }\n\n    if (!show) {\n      window.requestAnimationFrame(() => setShouldShow(false))\n\n      if (!withTransition) {\n        window.requestAnimationFrame(() => setShouldRender(false))\n      }\n    }\n  }, [\n    show,\n    withTransition,\n    shouldRender,\n    shouldShow,\n  ])\n\n  if (!shouldRender) { return null }\n\n  return ReactDOM.createPortal(\n    overlay,\n    container || getRootElement(),\n  )\n}\n\nexport default forwardRef(Overlay)\n"],"names":["CONTAINER_TEST_ID","WRAPPER_TEST_ID","OVERLAY_TEST_ID","ESCAPE_KEY","Overlay","as","containerTestId","wrapperTestId","testId","show","className","style","containerClassName","containerStyle","container","target","position","OverlayPosition","LeftCenter","marginX","marginY","keepInContainer","withTransition","enableClickOutside","children","onHide","noop","onTransitionEnd","rest","forwardedRef","shouldRender","setShouldRender","useState","shouldShow","setShouldShow","containerRect","useRef","targetRect","dummy","forceUpdate","useReducer","x","containerRef","overlayRef","mergedRef","useMergeRefs","handleOverlayForceUpdate","useCallback","handleContainerRect","containerElement","getRootElement","width","containerWidth","height","containerHeight","top","containerTop","left","containerLeft","getBoundingClientRect","current","scrollTop","scrollLeft","useLayoutEffect","initContainerRect","handleTargetRect","targetWidth","targetHeight","targetTop","targetLeft","clientTop","clientLeft","initTargetRect","handleTransitionEnd","event","handleBlockMouseWheel","stopPropagation","handleHideOverlay","closest","Styled","handleKeydown","key","useEventHandler","document","Content","useMemo","React","createElement","Object","assign","ref","overlay","useEffect","window","requestAnimationFrame","ReactDOM","createPortal","forwardRef"],"mappings":"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"}
+{"version":3,"file":"Overlay.mjs","sources":["../../../../src/components/Overlay/Overlay.tsx"],"sourcesContent":["import React, {\n  type Ref,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n} from 'react'\n\nimport ReactDOM from 'react-dom'\n\nimport useEventHandler from '~/src/hooks/useEventHandler'\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport {\n  document,\n  getRootElement,\n  window,\n} from '~/src/utils/domUtils'\nimport { noop } from '~/src/utils/functionUtils'\n\nimport type OverlayProps from './Overlay.types'\nimport {\n  type ContainerRectAttr,\n  type TargetRectAttr,\n} from './Overlay.types'\nimport { OverlayPosition } from './Overlay.types'\n\nimport * as Styled from './Overlay.styled'\n\nexport const CONTAINER_TEST_ID = 'bezier-react-container'\nexport const WRAPPER_TEST_ID = 'bezier-react-wrapper'\nexport const OVERLAY_TEST_ID = 'bezier-react-overlay'\nexport const ESCAPE_KEY = 'Escape'\n\nfunction Overlay(\n  {\n    as,\n    containerTestId = CONTAINER_TEST_ID,\n    wrapperTestId = WRAPPER_TEST_ID,\n    testId = OVERLAY_TEST_ID,\n    show = false,\n    className = '',\n    style,\n    containerClassName = '',\n    containerStyle,\n    container,\n    target,\n    position = OverlayPosition.LeftCenter,\n    marginX = 0,\n    marginY = 0,\n    keepInContainer = false,\n    withTransition = false,\n    enableClickOutside = false,\n    children,\n    onHide = noop,\n    onTransitionEnd = noop,\n    ...rest\n  }: OverlayProps,\n  forwardedRef: Ref<HTMLDivElement>,\n) {\n  // NOTE: DOM render 가 필요한지 여부를 결정하는 state\n  const [shouldRender, setShouldRender] = useState(false)\n  // NOTE: 화면에 실제 표현해야 하는지 여부를 결정하는 state\n  const [shouldShow, setShouldShow] = useState(false)\n  const containerRect = useRef<ContainerRectAttr | null>(null)\n  const targetRect = useRef<TargetRectAttr | null>(null)\n\n  const [dummy, forceUpdate] = useReducer(x => !x, true)\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const overlayRef = useRef<HTMLDivElement>(null)\n  const mergedRef = useMergeRefs<HTMLDivElement>(overlayRef, forwardedRef)\n\n  const handleOverlayForceUpdate = useCallback(() => {\n    forceUpdate()\n  }, [])\n\n  const handleContainerRect = useCallback(() => {\n    const containerElement = container || getRootElement()\n\n    const {\n      width: containerWidth,\n      height: containerHeight,\n      top: containerTop,\n      left: containerLeft,\n    } = containerElement.getBoundingClientRect()\n\n    containerRect.current = {\n      containerWidth,\n      containerHeight,\n      containerTop,\n      containerLeft,\n      scrollTop: container ? container.scrollTop : 0,\n      scrollLeft: container ? container.scrollLeft : 0,\n    }\n  }, [container])\n\n  useLayoutEffect(function initContainerRect() {\n    if (show) {\n      handleContainerRect()\n    }\n  }, [\n    show,\n    handleContainerRect,\n  ])\n\n  const handleTargetRect = useCallback(() => {\n    if (!target) {\n      return\n    }\n    const {\n      width: targetWidth,\n      height: targetHeight,\n      top: targetTop,\n      left: targetLeft,\n    } = target.getBoundingClientRect()\n    const { clientTop, clientLeft } = target\n\n    targetRect.current = {\n      targetWidth,\n      targetHeight,\n      targetTop,\n      targetLeft,\n      clientTop,\n      clientLeft,\n    }\n  }, [target])\n\n  useLayoutEffect(function initTargetRect() {\n    if (show) {\n      handleTargetRect()\n    }\n  }, [\n    show,\n    handleTargetRect,\n  ])\n\n  const handleTransitionEnd = useCallback<React.TransitionEventHandler<HTMLDivElement>>((event) => {\n    onTransitionEnd(event)\n    if (!show) {\n      setShouldRender(false)\n    }\n  }, [\n    show,\n    onTransitionEnd,\n  ])\n\n  const handleBlockMouseWheel = useCallback((event: HTMLElementEventMap['wheel']) => {\n    event.stopPropagation()\n  }, [])\n\n  const handleHideOverlay = useCallback((event: any) => {\n    if (!event.target?.closest(Styled.Overlay)) {\n      onHide()\n\n      if (!enableClickOutside) {\n        event.stopPropagation()\n      }\n    }\n  }, [\n    enableClickOutside,\n    onHide,\n  ])\n\n  const handleKeydown = useCallback((event: HTMLElementEventMap['keyup']) => {\n    if (event.key === ESCAPE_KEY) {\n      onHide()\n    }\n  }, [onHide])\n\n  useEventHandler(document, 'click', handleHideOverlay, show, true)\n  useEventHandler(document, 'keydown', handleKeydown, show)\n  useEventHandler(containerRef.current, 'wheel', handleBlockMouseWheel, show)\n\n  const Content = useMemo(() => (\n    <Styled.Overlay\n      as={as}\n      ref={mergedRef}\n      className={className}\n      show={shouldShow}\n      withTransition={withTransition}\n      style={style}\n      data-testid={testId}\n      containerRect={containerRect.current}\n      targetRect={targetRect.current}\n      overlay={overlayRef.current}\n      position={position}\n      marginX={marginX}\n      marginY={marginY}\n      keepInContainer={keepInContainer}\n      onTransitionEnd={handleTransitionEnd}\n      {...rest}\n    >\n      { children }\n    </Styled.Overlay>\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  ), [\n    as,\n    children,\n    className,\n    containerRect,\n    handleTransitionEnd,\n    keepInContainer,\n    marginX,\n    marginY,\n    mergedRef,\n    position,\n    shouldShow,\n    style,\n    targetRect,\n    testId,\n    withTransition,\n    dummy,\n  ])\n\n  const overlay = useMemo(() => {\n    if (container) {\n      return Content\n    }\n\n    return (\n      <Styled.DefaultContainer\n        ref={containerRef}\n        className={containerClassName}\n        show={show}\n        style={containerStyle}\n        data-testid={containerTestId}\n      >\n        <Styled.DefaultWrapper data-testid={wrapperTestId}>\n          { Content }\n        </Styled.DefaultWrapper>\n      </Styled.DefaultContainer>\n    )\n  }, [\n    container,\n    containerClassName,\n    show,\n    containerStyle,\n    containerTestId,\n    wrapperTestId,\n    Content,\n  ])\n\n  useEffect(() => {\n    handleOverlayForceUpdate()\n  }, [\n    children,\n    handleOverlayForceUpdate,\n  ])\n\n  /**\n   * Case 1: show === true\n   * show -> shouldRender -> shouldShow\n   * shouldRender 를 true 로 설정하고, 직후에 shouldShow 를 true 로 설정하여 transition 유발\n   *\n   * Case 2: show === false\n   * show -> shouldShow -> (...) -> shouldRender\n   * shouldShow 를 false 로 설정하고, shouldRender 는 transition 필요 여부에 따라 다르게 결정함\n   *    Case 2-1: withTransition === true\n   *    shouldShow -> onTransitionEnd -> shouldRender\n   *    onTransitionEnd handler 를 이용해 transition 이 끝난 다음 shouldRender 를 false 로 설정\n   *    Case 2-2: withTransition === false\n   *    shouldShow && shouldRender\n   *    transition 을 기다릴 필요가 없으므로 바로 shouldRender 를 false 로 설정\n   */\n  useEffect(() => {\n    if (show) {\n      if (shouldRender) {\n        window.requestAnimationFrame(() => setShouldShow(true))\n      } else {\n        window.requestAnimationFrame(() => setShouldRender(true))\n      }\n    }\n\n    if (!show) {\n      window.requestAnimationFrame(() => setShouldShow(false))\n\n      if (!withTransition) {\n        window.requestAnimationFrame(() => setShouldRender(false))\n      }\n    }\n  }, [\n    show,\n    withTransition,\n    shouldRender,\n    shouldShow,\n  ])\n\n  if (!shouldRender) { return null }\n\n  return ReactDOM.createPortal(\n    overlay,\n    container || getRootElement(),\n  )\n}\n\nexport default forwardRef(Overlay)\n"],"names":["CONTAINER_TEST_ID","WRAPPER_TEST_ID","OVERLAY_TEST_ID","ESCAPE_KEY","Overlay","as","containerTestId","wrapperTestId","testId","show","className","style","containerClassName","containerStyle","container","target","position","OverlayPosition","LeftCenter","marginX","marginY","keepInContainer","withTransition","enableClickOutside","children","onHide","noop","onTransitionEnd","rest","forwardedRef","shouldRender","setShouldRender","useState","shouldShow","setShouldShow","containerRect","useRef","targetRect","dummy","forceUpdate","useReducer","x","containerRef","overlayRef","mergedRef","useMergeRefs","handleOverlayForceUpdate","useCallback","handleContainerRect","containerElement","getRootElement","width","containerWidth","height","containerHeight","top","containerTop","left","containerLeft","getBoundingClientRect","current","scrollTop","scrollLeft","useLayoutEffect","initContainerRect","handleTargetRect","targetWidth","targetHeight","targetTop","targetLeft","clientTop","clientLeft","initTargetRect","handleTransitionEnd","event","handleBlockMouseWheel","stopPropagation","handleHideOverlay","closest","Styled","handleKeydown","key","useEventHandler","document","Content","useMemo","React","createElement","Object","assign","ref","overlay","useEffect","window","requestAnimationFrame","ReactDOM","createPortal","forwardRef"],"mappings":"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"}

package/dist/esm/components/SectionLabel/SectionLabel.mjs

@@ -1,21 +1,20 @@
-import React__default, { useMemo, useCallback } from 'react';
+import React__default, { forwardRef, useMemo, useCallback } from 'react';
 import classNames from '../../node_modules/classnames/index.mjs';
 import { isString, isNumber, isNil, isEmpty, isArray } from '../../utils/typeUtils.mjs';
 import { Button } from '../Button/Button.mjs';
 import { ButtonSize, ButtonStyleVariant, ButtonColorVariant } from '../Button/Button.types.mjs';
-import Tooltip from '../Tooltip/Tooltip.mjs';
 import Styled from './SectionLabel.styled.mjs';
 import { IconSize } from '../Icon/Icon.types.mjs';
 import v4 from '../../node_modules/uuid/dist/esm-browser/v4.mjs';
-import LegacyIcon from '../LegacyIcon/LegacyIcon.mjs';
+import Help from '../Help/Help.mjs';
 import Divider from '../Divider/Divider.mjs';
+import LegacyIcon from '../LegacyIcon/LegacyIcon.mjs';
 import { Typography } from '../../foundation/Typography.mjs';
 
 const SECTION_LABEL_TEST_ID = 'bezier-react-section-label';
 const SECTION_LABEL_TEST_CONTENT_ID = 'bezier-react-section-label-content';
 const SECTION_LABEL_TEST_LEFT_CONTENT_ID = 'bezier-react-section-label-left-content';
 const SECTION_LABEL_TEST_RIGHT_CONTENT_ID = 'bezier-react-section-label-right-content';
-const SECTION_LABEL_TEST_HELP_CONTENT_ID = 'bezier-react-section-label-help-content';
 function clickableClassName(onClick) {
   return !isNil(onClick) ? 'clickable' : undefined;
 }
@@ -54,7 +53,7 @@ function renderSectionLabelActionItem(props, key) {
     onClick: onClick
   });
 }
-function SectionLabel({
+const SectionLabel = /*#__PURE__*/forwardRef(function SectionLabel({
   content: givenContent,
   open = true,
   divider = false,
@@ -72,7 +71,7 @@ function SectionLabel({
   rightWrapperClassName,
   rightWrapperInterpolation,
   ...props
-}) {
+}, forwardedRef) {
   const content = useMemo(() => /*#__PURE__*/React__default.createElement(Styled.ContentWrapper, {
     className: contentWrapperClassName,
     interpolation: contentWrapperInterpolation,
@@ -111,28 +110,23 @@ function SectionLabel({
       "data-testid": SECTION_LABEL_TEST_RIGHT_CONTENT_ID
     }, items);
   }, [rightContent, rightWrapperClassName, rightWrapperInterpolation]);
-  const helpContent = useMemo(() => !isNil(help) && /*#__PURE__*/React__default.createElement(Tooltip, {
-    content: help.tooltipContent,
+  const helpContent = useMemo(() => !isNil(help) && /*#__PURE__*/React__default.createElement(Styled.HelpContainer, null, /*#__PURE__*/React__default.createElement(Help, {
     allowHover: true
-  }, /*#__PURE__*/React__default.createElement(Styled.HelpIconWrapper, {
-    "data-testid": SECTION_LABEL_TEST_HELP_CONTENT_ID
-  }, /*#__PURE__*/React__default.createElement(LegacyIcon, {
-    name: help.icon ?? 'help-filled',
-    size: IconSize.XS,
-    color: help.iconColor ?? 'txt-black-dark'
-  }))), [help]);
+  }, help)), [help]);
   return /*#__PURE__*/React__default.createElement("div", {
     "data-testid": SECTION_LABEL_TEST_ID
   }, divider && /*#__PURE__*/React__default.createElement(Divider, {
     orientation: "horizontal"
   }), /*#__PURE__*/React__default.createElement(Styled.Wrapper, Object.assign({
+    ref: forwardedRef,
     className: classNames(wrapperClassName, clickableClassName(onClick)),
     onClick: onClick,
     interpolation: wrapperInterpolation
   }, props), leftComponent, content, helpContent, rightComponent), children && /*#__PURE__*/React__default.createElement(Styled.ChildrenWrapper, {
     show: open
   }, children));
-}
+});
+var SectionLabel$1 = SectionLabel;
 
-export { SECTION_LABEL_TEST_CONTENT_ID, SECTION_LABEL_TEST_HELP_CONTENT_ID, SECTION_LABEL_TEST_ID, SECTION_LABEL_TEST_LEFT_CONTENT_ID, SECTION_LABEL_TEST_RIGHT_CONTENT_ID, SectionLabel as default };
+export { SECTION_LABEL_TEST_CONTENT_ID, SECTION_LABEL_TEST_ID, SECTION_LABEL_TEST_LEFT_CONTENT_ID, SECTION_LABEL_TEST_RIGHT_CONTENT_ID, SectionLabel$1 as default };
 //# sourceMappingURL=SectionLabel.mjs.map

package/dist/esm/components/SectionLabel/SectionLabel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SectionLabel.mjs","sources":["../../../../src/components/SectionLabel/SectionLabel.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useMemo,\n} from 'react'\n\nimport classNames from 'classnames'\nimport { v4 as uuid } from 'uuid'\n\nimport { Typography } from '~/src/foundation'\n\nimport {\n  isArray,\n  isEmpty,\n  isNil,\n  isNumber,\n  isString,\n} from '~/src/utils/typeUtils'\n\nimport {\n  Button,\n  ButtonColorVariant,\n  ButtonSize,\n  ButtonStyleVariant,\n} from '~/src/components/Button'\nimport { Divider } from '~/src/components/Divider'\nimport { IconSize } from '~/src/components/Icon'\nimport { LegacyIcon } from '~/src/components/LegacyIcon'\nimport { Tooltip } from '~/src/components/Tooltip'\n\nimport { type SectionLabelItemProps } from './SectionLabel.types'\nimport type SectionLabelProps from './SectionLabel.types'\n\nimport Styled from './SectionLabel.styled'\n\nexport const SECTION_LABEL_TEST_ID = 'bezier-react-section-label'\nexport const SECTION_LABEL_TEST_CONTENT_ID = 'bezier-react-section-label-content'\nexport const SECTION_LABEL_TEST_LEFT_CONTENT_ID = 'bezier-react-section-label-left-content'\nexport const SECTION_LABEL_TEST_RIGHT_CONTENT_ID = 'bezier-react-section-label-right-content'\nexport const SECTION_LABEL_TEST_HELP_CONTENT_ID = 'bezier-react-section-label-help-content'\n\nfunction clickableClassName(onClick?: React.MouseEventHandler) {\n  return !isNil(onClick) ? 'clickable' : undefined\n}\n\nfunction renderSectionLabelActionItem(props: SectionLabelItemProps, key?: string): React.ReactElement {\n  if (!('icon' in props)) {\n    return React.cloneElement(props, { key })\n  }\n\n  const { icon, iconColor, onClick } = props\n\n  if (!isNil(iconColor)) {\n    /*\n     * NOTE: backward compatibility를 위해 iconColor attribute를 지원하지만,\n     * iconColor를 사용할 경우 ButtonColorVariant와 일치하지 않기 때문에 Icon을 사용합니다.\n     */\n    return (\n      <Styled.RightItemWrapper\n        key={key}\n        className={clickableClassName(onClick)}\n        onClick={onClick}\n      >\n        <LegacyIcon\n          name={icon}\n          size={IconSize.XS}\n          color={iconColor}\n        />\n      </Styled.RightItemWrapper>\n    )\n  }\n\n  return (\n    <Button\n      key={key}\n      size={ButtonSize.XS}\n      styleVariant={ButtonStyleVariant.Tertiary}\n      colorVariant={ButtonColorVariant.Monochrome}\n      leftContent={icon}\n      onClick={onClick}\n    />\n  )\n}\n\nfunction SectionLabel({\n  content: givenContent,\n  open = true,\n  divider = false,\n  help,\n  leftContent,\n  rightContent,\n  onClick,\n  children,\n  wrapperClassName,\n  wrapperInterpolation,\n  contentWrapperClassName,\n  contentWrapperInterpolation,\n  leftWrapperClassName,\n  leftWrapperInterpolation,\n  rightWrapperClassName,\n  rightWrapperInterpolation,\n  ...props\n}: SectionLabelProps) {\n  const content = useMemo(() => (\n    <Styled.ContentWrapper\n      className={contentWrapperClassName}\n      interpolation={contentWrapperInterpolation}\n      data-testid={SECTION_LABEL_TEST_CONTENT_ID}\n    >\n      { isString(givenContent) || isNumber(givenContent)\n        ? (\n          <Styled.ContentText bold typo={Typography.Size13}>\n            { givenContent }\n          </Styled.ContentText>\n        ) : givenContent }\n    </Styled.ContentWrapper>\n  ), [\n    givenContent,\n    contentWrapperClassName,\n    contentWrapperInterpolation,\n  ])\n\n  const renderLeftItem = useCallback((item: SectionLabelItemProps) => (\n    'icon' in item\n      ? (\n        <Styled.LeftIcon\n          className={clickableClassName(item.onClick)}\n          name={item.icon}\n          size={IconSize.S}\n          color={item.iconColor ?? 'txt-black-dark'}\n          onClick={item.onClick}\n        />\n      ) : item\n  ), [])\n\n  const leftComponent = useMemo(() => {\n    if (isNil(leftContent)) {\n      return null\n    }\n\n    const item = renderLeftItem(leftContent)\n    const show = !isNil(item)\n\n    return show && (\n      <Styled.LeftContentWrapper\n        className={leftWrapperClassName}\n        interpolation={leftWrapperInterpolation}\n        data-testid={SECTION_LABEL_TEST_LEFT_CONTENT_ID}\n      >\n        { item }\n      </Styled.LeftContentWrapper>\n    )\n  }, [\n    leftContent,\n    leftWrapperClassName,\n    leftWrapperInterpolation,\n    renderLeftItem,\n  ])\n\n  const rightComponent = useMemo(() => {\n    if (isNil(rightContent) || isEmpty(rightContent)) {\n      return null\n    }\n\n    const items = isArray(rightContent)\n      ? rightContent.map((item) => renderSectionLabelActionItem(item, uuid()))\n      : renderSectionLabelActionItem(rightContent)\n\n    return (\n      <Styled.RightContentWrapper\n        className={rightWrapperClassName}\n        interpolation={rightWrapperInterpolation}\n        data-testid={SECTION_LABEL_TEST_RIGHT_CONTENT_ID}\n      >\n        { items }\n      </Styled.RightContentWrapper>\n    )\n  }, [\n    rightContent,\n    rightWrapperClassName,\n    rightWrapperInterpolation,\n  ])\n\n  const helpContent = useMemo(() => !isNil(help) && (\n    <Tooltip\n      content={help.tooltipContent}\n      allowHover\n    >\n      <Styled.HelpIconWrapper data-testid={SECTION_LABEL_TEST_HELP_CONTENT_ID}>\n        <LegacyIcon\n          name={help.icon ?? 'help-filled'}\n          size={IconSize.XS}\n          color={help.iconColor ?? 'txt-black-dark'}\n        />\n      </Styled.HelpIconWrapper>\n    </Tooltip>\n  ), [help])\n\n  return (\n    <div data-testid={SECTION_LABEL_TEST_ID}>\n      { divider && <Divider orientation=\"horizontal\" /> }\n      <Styled.Wrapper\n        className={classNames(\n          wrapperClassName,\n          clickableClassName(onClick),\n        )}\n        onClick={onClick}\n        interpolation={wrapperInterpolation}\n        {...props}\n      >\n        { leftComponent }\n        { content }\n        { helpContent }\n        { rightComponent }\n      </Styled.Wrapper>\n      { children && (\n        <Styled.ChildrenWrapper show={open}>\n          { children }\n        </Styled.ChildrenWrapper>\n      ) }\n    </div>\n  )\n}\n\nexport default SectionLabel\n"],"names":["SECTION_LABEL_TEST_ID","SECTION_LABEL_TEST_CONTENT_ID","SECTION_LABEL_TEST_LEFT_CONTENT_ID","SECTION_LABEL_TEST_RIGHT_CONTENT_ID","SECTION_LABEL_TEST_HELP_CONTENT_ID","clickableClassName","onClick","isNil","undefined","renderSectionLabelActionItem","props","key","React","cloneElement","icon","iconColor","createElement","Styled","RightItemWrapper","className","LegacyIcon","name","size","IconSize","XS","color","Button","ButtonSize","styleVariant","ButtonStyleVariant","Tertiary","colorVariant","ButtonColorVariant","Monochrome","leftContent","SectionLabel","content","givenContent","open","divider","help","rightContent","children","wrapperClassName","wrapperInterpolation","contentWrapperClassName","contentWrapperInterpolation","leftWrapperClassName","leftWrapperInterpolation","rightWrapperClassName","rightWrapperInterpolation","useMemo","ContentWrapper","interpolation","isString","isNumber","ContentText","bold","typo","Typography","Size13","renderLeftItem","useCallback","item","LeftIcon","S","leftComponent","show","LeftContentWrapper","rightComponent","isEmpty","items","isArray","map","uuid","RightContentWrapper","helpContent","Tooltip","tooltipContent","allowHover","HelpIconWrapper","Divider","orientation","Wrapper","Object","assign","classNames","ChildrenWrapper"],"mappings":"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"}
+{"version":3,"file":"SectionLabel.mjs","sources":["../../../../src/components/SectionLabel/SectionLabel.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useMemo,\n} from 'react'\n\nimport classNames from 'classnames'\nimport { v4 as uuid } from 'uuid'\n\nimport { Typography } from '~/src/foundation'\n\nimport {\n  isArray,\n  isEmpty,\n  isNil,\n  isNumber,\n  isString,\n} from '~/src/utils/typeUtils'\n\nimport {\n  Button,\n  ButtonColorVariant,\n  ButtonSize,\n  ButtonStyleVariant,\n} from '~/src/components/Button'\nimport { Divider } from '~/src/components/Divider'\nimport { Help } from '~/src/components/Help'\nimport { IconSize } from '~/src/components/Icon'\nimport { LegacyIcon } from '~/src/components/LegacyIcon'\n\nimport { type SectionLabelItemProps } from './SectionLabel.types'\nimport type SectionLabelProps from './SectionLabel.types'\n\nimport Styled from './SectionLabel.styled'\n\nexport const SECTION_LABEL_TEST_ID = 'bezier-react-section-label'\nexport const SECTION_LABEL_TEST_CONTENT_ID = 'bezier-react-section-label-content'\nexport const SECTION_LABEL_TEST_LEFT_CONTENT_ID = 'bezier-react-section-label-left-content'\nexport const SECTION_LABEL_TEST_RIGHT_CONTENT_ID = 'bezier-react-section-label-right-content'\n\nfunction clickableClassName(onClick?: React.MouseEventHandler) {\n  return !isNil(onClick) ? 'clickable' : undefined\n}\n\nfunction renderSectionLabelActionItem(props: SectionLabelItemProps, key?: string): React.ReactElement {\n  if (!('icon' in props)) {\n    return React.cloneElement(props, { key })\n  }\n\n  const { icon, iconColor, onClick } = props\n\n  if (!isNil(iconColor)) {\n    /*\n     * NOTE: backward compatibility를 위해 iconColor attribute를 지원하지만,\n     * iconColor를 사용할 경우 ButtonColorVariant와 일치하지 않기 때문에 Icon을 사용합니다.\n     */\n    return (\n      <Styled.RightItemWrapper\n        key={key}\n        className={clickableClassName(onClick)}\n        onClick={onClick}\n      >\n        <LegacyIcon\n          name={icon}\n          size={IconSize.XS}\n          color={iconColor}\n        />\n      </Styled.RightItemWrapper>\n    )\n  }\n\n  return (\n    <Button\n      key={key}\n      size={ButtonSize.XS}\n      styleVariant={ButtonStyleVariant.Tertiary}\n      colorVariant={ButtonColorVariant.Monochrome}\n      leftContent={icon}\n      onClick={onClick}\n    />\n  )\n}\n\nconst SectionLabel = forwardRef<HTMLDivElement, SectionLabelProps>(function SectionLabel({\n  content: givenContent,\n  open = true,\n  divider = false,\n  help,\n  leftContent,\n  rightContent,\n  onClick,\n  children,\n  wrapperClassName,\n  wrapperInterpolation,\n  contentWrapperClassName,\n  contentWrapperInterpolation,\n  leftWrapperClassName,\n  leftWrapperInterpolation,\n  rightWrapperClassName,\n  rightWrapperInterpolation,\n  ...props\n}, forwardedRef) {\n  const content = useMemo(() => (\n    <Styled.ContentWrapper\n      className={contentWrapperClassName}\n      interpolation={contentWrapperInterpolation}\n      data-testid={SECTION_LABEL_TEST_CONTENT_ID}\n    >\n      { isString(givenContent) || isNumber(givenContent)\n        ? (\n          <Styled.ContentText bold typo={Typography.Size13}>\n            { givenContent }\n          </Styled.ContentText>\n        ) : givenContent }\n    </Styled.ContentWrapper>\n  ), [\n    givenContent,\n    contentWrapperClassName,\n    contentWrapperInterpolation,\n  ])\n\n  const renderLeftItem = useCallback((item: SectionLabelItemProps) => (\n    'icon' in item\n      ? (\n        <Styled.LeftIcon\n          className={clickableClassName(item.onClick)}\n          name={item.icon}\n          size={IconSize.S}\n          color={item.iconColor ?? 'txt-black-dark'}\n          onClick={item.onClick}\n        />\n      ) : item\n  ), [])\n\n  const leftComponent = useMemo(() => {\n    if (isNil(leftContent)) {\n      return null\n    }\n\n    const item = renderLeftItem(leftContent)\n    const show = !isNil(item)\n\n    return show && (\n      <Styled.LeftContentWrapper\n        className={leftWrapperClassName}\n        interpolation={leftWrapperInterpolation}\n        data-testid={SECTION_LABEL_TEST_LEFT_CONTENT_ID}\n      >\n        { item }\n      </Styled.LeftContentWrapper>\n    )\n  }, [\n    leftContent,\n    leftWrapperClassName,\n    leftWrapperInterpolation,\n    renderLeftItem,\n  ])\n\n  const rightComponent = useMemo(() => {\n    if (isNil(rightContent) || isEmpty(rightContent)) {\n      return null\n    }\n\n    const items = isArray(rightContent)\n      ? rightContent.map((item) => renderSectionLabelActionItem(item, uuid()))\n      : renderSectionLabelActionItem(rightContent)\n\n    return (\n      <Styled.RightContentWrapper\n        className={rightWrapperClassName}\n        interpolation={rightWrapperInterpolation}\n        data-testid={SECTION_LABEL_TEST_RIGHT_CONTENT_ID}\n      >\n        { items }\n      </Styled.RightContentWrapper>\n    )\n  }, [\n    rightContent,\n    rightWrapperClassName,\n    rightWrapperInterpolation,\n  ])\n\n  const helpContent = useMemo(() => !isNil(help) && (\n    <Styled.HelpContainer>\n      <Help allowHover>\n        { help }\n      </Help>\n    </Styled.HelpContainer>\n  ), [help])\n\n  return (\n    <div data-testid={SECTION_LABEL_TEST_ID}>\n      { divider && <Divider orientation=\"horizontal\" /> }\n      <Styled.Wrapper\n        ref={forwardedRef}\n        className={classNames(\n          wrapperClassName,\n          clickableClassName(onClick),\n        )}\n        onClick={onClick}\n        interpolation={wrapperInterpolation}\n        {...props}\n      >\n        { leftComponent }\n        { content }\n        { helpContent }\n        { rightComponent }\n      </Styled.Wrapper>\n      { children && (\n        <Styled.ChildrenWrapper show={open}>\n          { children }\n        </Styled.ChildrenWrapper>\n      ) }\n    </div>\n  )\n})\n\nexport default SectionLabel\n"],"names":["SECTION_LABEL_TEST_ID","SECTION_LABEL_TEST_CONTENT_ID","SECTION_LABEL_TEST_LEFT_CONTENT_ID","SECTION_LABEL_TEST_RIGHT_CONTENT_ID","clickableClassName","onClick","isNil","undefined","renderSectionLabelActionItem","props","key","React","cloneElement","icon","iconColor","createElement","Styled","RightItemWrapper","className","LegacyIcon","name","size","IconSize","XS","color","Button","ButtonSize","styleVariant","ButtonStyleVariant","Tertiary","colorVariant","ButtonColorVariant","Monochrome","leftContent","SectionLabel","forwardRef","content","givenContent","open","divider","help","rightContent","children","wrapperClassName","wrapperInterpolation","contentWrapperClassName","contentWrapperInterpolation","leftWrapperClassName","leftWrapperInterpolation","rightWrapperClassName","rightWrapperInterpolation","forwardedRef","useMemo","ContentWrapper","interpolation","isString","isNumber","ContentText","bold","typo","Typography","Size13","renderLeftItem","useCallback","item","LeftIcon","S","leftComponent","show","LeftContentWrapper","rightComponent","isEmpty","items","isArray","map","uuid","RightContentWrapper","helpContent","HelpContainer","Help","allowHover","Divider","orientation","Wrapper","Object","assign","ref","classNames","ChildrenWrapper"],"mappings":"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"}

package/dist/esm/components/SectionLabel/SectionLabel.styled.mjs

@@ -29,10 +29,10 @@ const ContentWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
 })(["display:flex;align-items:center;padding-left:6px;overflow:hidden;", ""], ({
   interpolation
 }) => interpolation);
-const HelpIconWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
-  displayName: "SectionLabelstyled__HelpIconWrapper",
+const HelpContainer = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "SectionLabelstyled__HelpContainer",
   componentId: "sc-14g33s5-4"
-})(["width:16px;height:16px;margin-left:8px;"]);
+})(["margin-left:8px;"]);
 const RightContentWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
   displayName: "SectionLabelstyled__RightContentWrapper",
   componentId: "sc-14g33s5-5"
@@ -60,7 +60,7 @@ var Styled = {
   LeftContentWrapper,
   ContentText,
   ContentWrapper,
-  HelpIconWrapper,
+  HelpContainer,
   RightContentWrapper,
   RightItemWrapper,
   ChildrenWrapper,

package/dist/esm/components/SectionLabel/SectionLabel.styled.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SectionLabel.styled.mjs","sources":["../../../../src/components/SectionLabel/SectionLabel.styled.ts"],"sourcesContent":["import {\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport { type InterpolationProps } from '~/src/types/Foundation'\n\nimport { LegacyIcon } from '~/src/components/LegacyIcon'\nimport { Text } from '~/src/components/Text'\n\nconst clickableElementStyle = css`\n  &.clickable {\n    cursor: pointer;\n  }\n`\n\nconst LeftIcon = styled(LegacyIcon)`\n  ${clickableElementStyle}\n`\n\nconst LeftContentWrapper = styled.div<InterpolationProps>`\n  display: flex;\n  align-items: center;\n  padding-left: 6px;\n\n  ${({ interpolation }) => interpolation}\n`\n\nconst ContentText = styled(Text)`\n  overflow: hidden;\n  color: ${({ foundation }) => foundation?.theme?.['txt-black-dark']};\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`\n\nconst ContentWrapper = styled.div<InterpolationProps>`\n  display: flex;\n  align-items: center;\n  padding-left: 6px;\n  overflow: hidden;\n\n  ${({ interpolation }) => interpolation}\n`\n\nconst HelpIconWrapper = styled.div`\n  width: 16px;\n  height: 16px;\n  margin-left: 8px;\n`\n\nconst RightContentWrapper = styled.div<InterpolationProps>`\n  display: flex;\n  align-items: center;\n  padding-left: 6px;\n  margin: 0 6px 0 auto;\n\n  ${({ interpolation }) => interpolation}\n`\n\nconst RightItemWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n\n  ${clickableElementStyle}\n`\n\nconst ChildrenWrapper = styled.div<{ show: boolean }>`\n  display: ${({ show }) => (show ? 'unset' : 'none')};\n`\n\nconst Wrapper = styled.div<InterpolationProps>`\n  display: flex;\n  align-items: center;\n  height: 28px;\n\n  ${clickableElementStyle}\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport default {\n  LeftIcon,\n  LeftContentWrapper,\n  ContentText,\n  ContentWrapper,\n  HelpIconWrapper,\n  RightContentWrapper,\n  RightItemWrapper,\n  ChildrenWrapper,\n  Wrapper,\n}\n"],"names":["clickableElementStyle","css","LeftIcon","styled","LegacyIcon","withConfig","displayName","componentId","LeftContentWrapper","div","interpolation","ContentText","Text","foundation","theme","ContentWrapper","HelpIconWrapper","RightContentWrapper","RightItemWrapper","ChildrenWrapper","show","Wrapper"],"mappings":"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"}
+{"version":3,"file":"SectionLabel.styled.mjs","sources":["../../../../src/components/SectionLabel/SectionLabel.styled.ts"],"sourcesContent":["import {\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport { type InterpolationProps } from '~/src/types/Foundation'\n\nimport { LegacyIcon } from '~/src/components/LegacyIcon'\nimport { Text } from '~/src/components/Text'\n\nconst clickableElementStyle = css`\n  &.clickable {\n    cursor: pointer;\n  }\n`\n\nconst LeftIcon = styled(LegacyIcon)`\n  ${clickableElementStyle}\n`\n\nconst LeftContentWrapper = styled.div<InterpolationProps>`\n  display: flex;\n  align-items: center;\n  padding-left: 6px;\n\n  ${({ interpolation }) => interpolation}\n`\n\nconst ContentText = styled(Text)`\n  overflow: hidden;\n  color: ${({ foundation }) => foundation?.theme?.['txt-black-dark']};\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`\n\nconst ContentWrapper = styled.div<InterpolationProps>`\n  display: flex;\n  align-items: center;\n  padding-left: 6px;\n  overflow: hidden;\n\n  ${({ interpolation }) => interpolation}\n`\n\nconst HelpContainer = styled.div`\n  margin-left: 8px;\n`\n\nconst RightContentWrapper = styled.div<InterpolationProps>`\n  display: flex;\n  align-items: center;\n  padding-left: 6px;\n  margin: 0 6px 0 auto;\n\n  ${({ interpolation }) => interpolation}\n`\n\nconst RightItemWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n\n  ${clickableElementStyle}\n`\n\nconst ChildrenWrapper = styled.div<{ show: boolean }>`\n  display: ${({ show }) => (show ? 'unset' : 'none')};\n`\n\nconst Wrapper = styled.div<InterpolationProps>`\n  display: flex;\n  align-items: center;\n  height: 28px;\n\n  ${clickableElementStyle}\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport default {\n  LeftIcon,\n  LeftContentWrapper,\n  ContentText,\n  ContentWrapper,\n  HelpContainer,\n  RightContentWrapper,\n  RightItemWrapper,\n  ChildrenWrapper,\n  Wrapper,\n}\n"],"names":["clickableElementStyle","css","LeftIcon","styled","LegacyIcon","withConfig","displayName","componentId","LeftContentWrapper","div","interpolation","ContentText","Text","foundation","theme","ContentWrapper","HelpContainer","RightContentWrapper","RightItemWrapper","ChildrenWrapper","show","Wrapper"],"mappings":"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"}

package/dist/esm/components/Spinner/Spinner.mjs

@@ -1,17 +1,19 @@
-import React__default from 'react';
+import React__default, { forwardRef } from 'react';
 import { SpinnerSize } from './Spinner.types.mjs';
 import { SpinIcon } from './Spinner.styled.mjs';
 
 const SPINNER_TEST_ID = 'bezier-react-spinner';
-function Spinner({
+const Spinner = /*#__PURE__*/forwardRef(function Spinner({
   testId = SPINNER_TEST_ID,
   style,
   className,
   interpolation,
   size = SpinnerSize.M,
-  color
-}) {
-  return /*#__PURE__*/React__default.createElement(SpinIcon, {
+  color,
+  ...rest
+}, forwardedRef) {
+  return /*#__PURE__*/React__default.createElement(SpinIcon, Object.assign({}, rest, {
+    ref: forwardedRef,
     style: style,
     className: className,
     interpolation: interpolation,
@@ -19,8 +21,9 @@ function Spinner({
     size: size,
     color: color,
     "data-testid": testId
-  });
-}
+  }));
+});
+var Spinner$1 = Spinner;
 
-export { SPINNER_TEST_ID, Spinner as default };
+export { SPINNER_TEST_ID, Spinner$1 as default };
 //# sourceMappingURL=Spinner.mjs.map

package/dist/esm/components/Spinner/Spinner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.mjs","sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import React from 'react'\n\nimport type SpinnerProps from './Spinner.types'\nimport { SpinnerSize } from './Spinner.types'\n\nimport { SpinIcon } from './Spinner.styled'\n\nexport const SPINNER_TEST_ID = 'bezier-react-spinner'\n\nfunction Spinner({\n  testId = SPINNER_TEST_ID,\n  style,\n  className,\n  interpolation,\n  size = SpinnerSize.M,\n  color,\n}: SpinnerProps) {\n  return (\n    <SpinIcon\n      style={style}\n      className={className}\n      interpolation={interpolation}\n      key=\"spinner\"\n      size={size}\n      color={color}\n      data-testid={testId}\n    />\n  )\n}\n\nexport default Spinner\n"],"names":["SPINNER_TEST_ID","Spinner","testId","style","className","interpolation","size","SpinnerSize","M","color","React","createElement","SpinIcon","key"],"mappings":";;;;AAOO,MAAMA,eAAe,GAAG,uBAAsB;AAErD,SAASC,OAAOA,CAAC;AACfC,EAAAA,MAAM,GAAGF,eAAe;EACxBG,KAAK;EACLC,SAAS;EACTC,aAAa;EACbC,IAAI,GAAGC,WAAW,CAACC,CAAC;AACpBC,EAAAA,KAAAA;AACY,CAAC,EAAE;AACf,EAAA,oBACEC,cAAA,CAAAC,aAAA,CAACC,QAAQ,EAAA;AACPT,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,aAAa,EAAEA,aAAc;AAC7BQ,IAAAA,GAAG,EAAC,SAAS;AACbP,IAAAA,IAAI,EAAEA,IAAK;AACXG,IAAAA,KAAK,EAAEA,KAAM;IACb,aAAaP,EAAAA,MAAAA;AAAO,GACrB,CAAC,CAAA;AAEN;;;;"}
+{"version":3,"file":"Spinner.mjs","sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport type SpinnerProps from './Spinner.types'\nimport { SpinnerSize } from './Spinner.types'\n\nimport { SpinIcon } from './Spinner.styled'\n\nexport const SPINNER_TEST_ID = 'bezier-react-spinner'\n\nconst Spinner = forwardRef<HTMLDivElement, SpinnerProps>(function Spinner({\n  testId = SPINNER_TEST_ID,\n  style,\n  className,\n  interpolation,\n  size = SpinnerSize.M,\n  color,\n  ...rest\n}, forwardedRef) {\n  return (\n    <SpinIcon\n      {...rest}\n      ref={forwardedRef}\n      style={style}\n      className={className}\n      interpolation={interpolation}\n      key=\"spinner\"\n      size={size}\n      color={color}\n      data-testid={testId}\n    />\n  )\n})\n\nexport default Spinner\n"],"names":["SPINNER_TEST_ID","Spinner","forwardRef","testId","style","className","interpolation","size","SpinnerSize","M","color","rest","forwardedRef","React","createElement","SpinIcon","Object","assign","ref","key"],"mappings":";;;;AAOO,MAAMA,eAAe,GAAG,uBAAsB;AAErD,MAAMC,OAAO,gBAAGC,UAAU,CAA+B,SAASD,OAAOA,CAAC;AACxEE,EAAAA,MAAM,GAAGH,eAAe;EACxBI,KAAK;EACLC,SAAS;EACTC,aAAa;EACbC,IAAI,GAAGC,WAAW,CAACC,CAAC;EACpBC,KAAK;EACL,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;EACf,oBACEC,cAAA,CAAAC,aAAA,CAACC,QAAQ,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACHN,IAAI,EAAA;AACRO,IAAAA,GAAG,EAAEN,YAAa;AAClBR,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,aAAa,EAAEA,aAAc;AAC7Ba,IAAAA,GAAG,EAAC,SAAS;AACbZ,IAAAA,IAAI,EAAEA,IAAK;AACXG,IAAAA,KAAK,EAAEA,KAAM;IACb,aAAaP,EAAAA,MAAAA;AAAO,GAAA,CACrB,CAAC,CAAA;AAEN,CAAC,CAAC,CAAA;AAEF,gBAAeF,OAAO;;;;"}

package/dist/esm/components/Spinner/Spinner.styled.mjs

@@ -1,6 +1,6 @@
 import { SpinnerThickness, SpinnerSize } from './Spinner.types.mjs';
-import { styled as FoundationStyled, css as FoundationCSS } from '../../foundation/FoundationStyledComponent.mjs';
 import { keyframes } from 'styled-components';
+import { styled as FoundationStyled, css as FoundationCSS } from '../../foundation/FoundationStyledComponent.mjs';
 
 function getThicknessFromSize(size) {
   switch (size) {

package/dist/esm/components/Spinner/Spinner.types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.types.mjs","sources":["../../../../src/components/Spinner/Spinner.types.ts"],"sourcesContent":["import {\n  type BezierComponentProps,\n  type ColorProps,\n  type SizeProps,\n} from '~/src/types/ComponentProps'\n\nexport enum SpinnerSize {\n  XL = 50,\n  L = 24,\n  M = 20,\n  S = 16,\n  XS = 12,\n}\n\nexport enum SpinnerThickness {\n  Bold = 4,\n  Normal = 3,\n  Light = 2,\n}\n\nexport default interface SpinnerProps extends\n  BezierComponentProps,\n  SizeProps<SpinnerSize>,\n  ColorProps {}\n\nexport interface StyledSpinnerProps extends SpinnerProps {\n  size: NonNullable<SpinnerProps['size']>\n}\n"],"names":["SpinnerSize","SpinnerThickness"],"mappings":"AAMYA,IAAAA,WAAW,0BAAXA,WAAW,EAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,IAAA,CAAA,GAAA,EAAA,CAAA,GAAA,IAAA,CAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,GAAA,CAAA,GAAA,EAAA,CAAA,GAAA,GAAA,CAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,GAAA,CAAA,GAAA,EAAA,CAAA,GAAA,GAAA,CAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,GAAA,CAAA,GAAA,EAAA,CAAA,GAAA,GAAA,CAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,IAAA,CAAA,GAAA,EAAA,CAAA,GAAA,IAAA,CAAA;AAAA,EAAA,OAAXA,WAAW,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AAQXC,IAAAA,gBAAgB,0BAAhBA,gBAAgB,EAAA;AAAhBA,EAAAA,gBAAgB,CAAhBA,gBAAgB,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAA,CAAA;AAAhBA,EAAAA,gBAAgB,CAAhBA,gBAAgB,CAAA,QAAA,CAAA,GAAA,CAAA,CAAA,GAAA,QAAA,CAAA;AAAhBA,EAAAA,gBAAgB,CAAhBA,gBAAgB,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA,CAAA;AAAA,EAAA,OAAhBA,gBAAgB,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}
+{"version":3,"file":"Spinner.types.mjs","sources":["../../../../src/components/Spinner/Spinner.types.ts"],"sourcesContent":["import {\n  type BezierComponentProps,\n  type ColorProps,\n  type SizeProps,\n} from '~/src/types/ComponentProps'\n\nexport enum SpinnerSize {\n  XL = 50,\n  L = 24,\n  M = 20,\n  S = 16,\n  XS = 12,\n}\n\nexport enum SpinnerThickness {\n  Bold = 4,\n  Normal = 3,\n  Light = 2,\n}\n\nexport default interface SpinnerProps extends\n  BezierComponentProps,\n  SizeProps<SpinnerSize>,\n  ColorProps,\n  Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {}\n\nexport interface StyledSpinnerProps extends SpinnerProps {\n  size: NonNullable<SpinnerProps['size']>\n}\n"],"names":["SpinnerSize","SpinnerThickness"],"mappings":"AAMYA,IAAAA,WAAW,0BAAXA,WAAW,EAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,IAAA,CAAA,GAAA,EAAA,CAAA,GAAA,IAAA,CAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,GAAA,CAAA,GAAA,EAAA,CAAA,GAAA,GAAA,CAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,GAAA,CAAA,GAAA,EAAA,CAAA,GAAA,GAAA,CAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,GAAA,CAAA,GAAA,EAAA,CAAA,GAAA,GAAA,CAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,IAAA,CAAA,GAAA,EAAA,CAAA,GAAA,IAAA,CAAA;AAAA,EAAA,OAAXA,WAAW,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AAQXC,IAAAA,gBAAgB,0BAAhBA,gBAAgB,EAAA;AAAhBA,EAAAA,gBAAgB,CAAhBA,gBAAgB,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAA,CAAA;AAAhBA,EAAAA,gBAAgB,CAAhBA,gBAAgB,CAAA,QAAA,CAAA,GAAA,CAAA,CAAA,GAAA,QAAA,CAAA;AAAhBA,EAAAA,gBAAgB,CAAhBA,gBAAgB,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA,CAAA;AAAA,EAAA,OAAhBA,gBAAgB,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/esm/components/Stack/Stack/Stack.styled.mjs

@@ -1,5 +1,5 @@
-import { flex } from '../util/flexAdapter.mjs';
 import { styled as FoundationStyled, css as FoundationCSS } from '../../../foundation/FoundationStyledComponent.mjs';
+import { flex } from '../util/flexAdapter.mjs';
 
 const Container = /*#__PURE__*/FoundationStyled.div.withConfig({
   displayName: "Stackstyled__Container",

package/dist/esm/components/Status/Status.styled.mjs

@@ -1,6 +1,6 @@
 import { ZIndex } from '../../constants/ZIndex.mjs';
-import { absoluteCenter } from '../../foundation/Mixins.mjs';
 import { Icon as Icon$1 } from '../Icon/Icon.mjs';
+import { absoluteCenter } from '../../foundation/Mixins.mjs';
 import { styled as FoundationStyled } from '../../foundation/FoundationStyledComponent.mjs';
 
 const Circle = /*#__PURE__*/FoundationStyled.div.withConfig({

package/dist/esm/components/TagBadge/Badge/Badge.mjs

@@ -1,7 +1,7 @@
-import React__default, { useMemo } from 'react';
+import React__default, { memo, forwardRef, useMemo } from 'react';
 import { isEmpty } from '../../../utils/typeUtils.mjs';
 import { getProperTagBadgeBgColor, getProperBadgeTextColor, getProperTagBadgePadding, getProperTagBadgeRounding, getProperTagBadgeTypo } from '../TagBadgeCommon/utils.mjs';
-import LegacyIcon from '../../LegacyIcon/LegacyIcon.mjs';
+import { Icon } from '../../Icon/Icon.mjs';
 import { TAG_BADGE_ICON_SIZE, BADGE_TEXT_HORIZONTAL_PADDING } from '../TagBadgeCommon/constants/TagBadgeStyle.mjs';
 import TagBadgeStyled from '../TagBadgeCommon/TagBadge.styled.mjs';
 import TagBadgeText from '../TagBadgeCommon/TagBadgeText/TagBadgeText.mjs';
@@ -10,25 +10,26 @@ import TagBadgeVariant from '../TagBadgeCommon/constants/TagBadgeVariant.mjs';
 
 // TODO: 테스트 코드 작성
 const BADGE_TEST_ID = 'bezier-react-badge';
-const Badge = /*#__PURE__*/React__default.memo(function Badge({
+const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Badge({
   size = TagBadgeSize.M,
   variant = TagBadgeVariant.Default,
-  iconName,
+  icon,
   children,
   className,
   interpolation,
   testId = BADGE_TEST_ID,
   ...props
-}) {
+}, forwardedRef) {
   const hasChildren = !isEmpty(children);
   const bgSemanticName = useMemo(() => getProperTagBadgeBgColor(variant), [variant]);
   const textSemanticName = useMemo(() => getProperBadgeTextColor(variant), [variant]);
-  const IconComponent = useMemo(() => iconName && /*#__PURE__*/React__default.createElement(LegacyIcon, {
-    name: iconName,
+  const IconComponent = useMemo(() => icon && /*#__PURE__*/React__default.createElement(Icon, {
+    source: icon,
     size: TAG_BADGE_ICON_SIZE,
     color: textSemanticName
-  }), [iconName, textSemanticName]);
+  }), [icon, textSemanticName]);
   return /*#__PURE__*/React__default.createElement(TagBadgeStyled.Wrapper, Object.assign({}, props, {
+    ref: forwardedRef,
     className: className,
     interpolation: interpolation,
     "data-testid": testId,
@@ -40,7 +41,7 @@ const Badge = /*#__PURE__*/React__default.memo(function Badge({
     horizontalPadding: BADGE_TEXT_HORIZONTAL_PADDING,
     typo: getProperTagBadgeTypo(size)
   }, children));
-});
+}));
 
 export { BADGE_TEST_ID, Badge };
 //# sourceMappingURL=Badge.mjs.map

package/dist/esm/components/TagBadge/Badge/Badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.mjs","sources":["../../../../../src/components/TagBadge/Badge/Badge.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\n\nimport { isEmpty } from '~/src/utils/typeUtils'\n\nimport { LegacyIcon } from '~/src/components/LegacyIcon'\nimport {\n  BADGE_TEXT_HORIZONTAL_PADDING,\n  TAG_BADGE_ICON_SIZE,\n  TagBadgeSize,\n  TagBadgeStyled,\n  TagBadgeText,\n  TagBadgeVariant,\n  getProperBadgeTextColor,\n  getProperTagBadgeBgColor,\n  getProperTagBadgePadding,\n  getProperTagBadgeRounding,\n  getProperTagBadgeTypo,\n} from '~/src/components/TagBadge/TagBadgeCommon'\n\nimport type BadgeProps from './Badge.types'\n\n// TODO: 테스트 코드 작성\nexport const BADGE_TEST_ID = 'bezier-react-badge'\n\nexport const Badge = React.memo(function Badge({\n  size = TagBadgeSize.M,\n  variant = TagBadgeVariant.Default,\n  iconName,\n  children,\n  className,\n  interpolation,\n  testId = BADGE_TEST_ID,\n  ...props\n}: BadgeProps) {\n  const hasChildren = !isEmpty(children)\n\n  const bgSemanticName = useMemo(() => (getProperTagBadgeBgColor(variant)), [variant])\n  const textSemanticName = useMemo(() => (getProperBadgeTextColor(variant)), [variant])\n\n  const IconComponent = useMemo(() => (iconName && (\n    <LegacyIcon\n      name={iconName}\n      size={TAG_BADGE_ICON_SIZE}\n      color={textSemanticName}\n    />\n  )), [\n    iconName,\n    textSemanticName,\n  ])\n\n  return (\n    <TagBadgeStyled.Wrapper\n      {...props}\n      className={className}\n      interpolation={interpolation}\n      data-testid={testId}\n      horizontalPadding={getProperTagBadgePadding(size)}\n      rounding={getProperTagBadgeRounding(size)}\n      color={textSemanticName}\n      bgColor={bgSemanticName}\n    >\n      { IconComponent }\n\n      { hasChildren && (\n        <TagBadgeText\n          horizontalPadding={BADGE_TEXT_HORIZONTAL_PADDING}\n          typo={getProperTagBadgeTypo(size)}\n        >\n            { children }\n        </TagBadgeText>\n      ) }\n    </TagBadgeStyled.Wrapper>\n  )\n})\n"],"names":["BADGE_TEST_ID","Badge","React","memo","size","TagBadgeSize","M","variant","TagBadgeVariant","Default","iconName","children","className","interpolation","testId","props","hasChildren","isEmpty","bgSemanticName","useMemo","getProperTagBadgeBgColor","textSemanticName","getProperBadgeTextColor","IconComponent","createElement","LegacyIcon","name","TAG_BADGE_ICON_SIZE","color","TagBadgeStyled","Wrapper","Object","assign","horizontalPadding","getProperTagBadgePadding","rounding","getProperTagBadgeRounding","bgColor","TagBadgeText","BADGE_TEXT_HORIZONTAL_PADDING","typo","getProperTagBadgeTypo"],"mappings":";;;;;;;;;;AAqBA;AACO,MAAMA,aAAa,GAAG,qBAAoB;AAE1C,MAAMC,KAAK,gBAAGC,cAAK,CAACC,IAAI,CAAC,SAASF,KAAKA,CAAC;EAC7CG,IAAI,GAAGC,YAAY,CAACC,CAAC;EACrBC,OAAO,GAAGC,eAAe,CAACC,OAAO;EACjCC,QAAQ;EACRC,QAAQ;EACRC,SAAS;EACTC,aAAa;AACbC,EAAAA,MAAM,GAAGd,aAAa;EACtB,GAAGe,KAAAA;AACO,CAAC,EAAE;AACb,EAAA,MAAMC,WAAW,GAAG,CAACC,OAAO,CAACN,QAAQ,CAAC,CAAA;AAEtC,EAAA,MAAMO,cAAc,GAAGC,OAAO,CAAC,MAAOC,wBAAwB,CAACb,OAAO,CAAE,EAAE,CAACA,OAAO,CAAC,CAAC,CAAA;AACpF,EAAA,MAAMc,gBAAgB,GAAGF,OAAO,CAAC,MAAOG,uBAAuB,CAACf,OAAO,CAAE,EAAE,CAACA,OAAO,CAAC,CAAC,CAAA;EAErF,MAAMgB,aAAa,GAAGJ,OAAO,CAAC,MAAOT,QAAQ,iBAC3CR,cAAA,CAAAsB,aAAA,CAACC,UAAU,EAAA;AACTC,IAAAA,IAAI,EAAEhB,QAAS;AACfN,IAAAA,IAAI,EAAEuB,mBAAoB;AAC1BC,IAAAA,KAAK,EAAEP,gBAAAA;AAAiB,GACzB,CACD,EAAE,CACFX,QAAQ,EACRW,gBAAgB,CACjB,CAAC,CAAA;AAEF,EAAA,oBACEnB,cAAA,CAAAsB,aAAA,CAACK,cAAc,CAACC,OAAO,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACjBjB,KAAK,EAAA;AACTH,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,aAAa,EAAEA,aAAc;AAC7B,IAAA,aAAA,EAAaC,MAAO;AACpBmB,IAAAA,iBAAiB,EAAEC,wBAAwB,CAAC9B,IAAI,CAAE;AAClD+B,IAAAA,QAAQ,EAAEC,yBAAyB,CAAChC,IAAI,CAAE;AAC1CwB,IAAAA,KAAK,EAAEP,gBAAiB;AACxBgB,IAAAA,OAAO,EAAEnB,cAAAA;GAEPK,CAAAA,EAAAA,aAAa,EAEbP,WAAW,iBACXd,cAAA,CAAAsB,aAAA,CAACc,YAAY,EAAA;AACXL,IAAAA,iBAAiB,EAAEM,6BAA8B;IACjDC,IAAI,EAAEC,qBAAqB,CAACrC,IAAI,CAAA;GAE5BO,EAAAA,QACQ,CAEM,CAAC,CAAA;AAE7B,CAAC;;;;"}
+{"version":3,"file":"Badge.mjs","sources":["../../../../../src/components/TagBadge/Badge/Badge.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  memo,\n  useMemo,\n} from 'react'\n\nimport { isEmpty } from '~/src/utils/typeUtils'\n\nimport { Icon } from '~/src/components/Icon'\nimport {\n  BADGE_TEXT_HORIZONTAL_PADDING,\n  TAG_BADGE_ICON_SIZE,\n  TagBadgeSize,\n  TagBadgeStyled,\n  TagBadgeText,\n  TagBadgeVariant,\n  getProperBadgeTextColor,\n  getProperTagBadgeBgColor,\n  getProperTagBadgePadding,\n  getProperTagBadgeRounding,\n  getProperTagBadgeTypo,\n} from '~/src/components/TagBadge/TagBadgeCommon'\n\nimport type BadgeProps from './Badge.types'\n\n// TODO: 테스트 코드 작성\nexport const BADGE_TEST_ID = 'bezier-react-badge'\n\nexport const Badge = memo(forwardRef<HTMLDivElement, BadgeProps>(function Badge({\n  size = TagBadgeSize.M,\n  variant = TagBadgeVariant.Default,\n  icon,\n  children,\n  className,\n  interpolation,\n  testId = BADGE_TEST_ID,\n  ...props\n}, forwardedRef) {\n  const hasChildren = !isEmpty(children)\n\n  const bgSemanticName = useMemo(() => (getProperTagBadgeBgColor(variant)), [variant])\n  const textSemanticName = useMemo(() => (getProperBadgeTextColor(variant)), [variant])\n\n  const IconComponent = useMemo(() => (icon && (\n    <Icon\n      source={icon}\n      size={TAG_BADGE_ICON_SIZE}\n      color={textSemanticName}\n    />\n  )), [\n    icon,\n    textSemanticName,\n  ])\n\n  return (\n    <TagBadgeStyled.Wrapper\n      {...props}\n      ref={forwardedRef}\n      className={className}\n      interpolation={interpolation}\n      data-testid={testId}\n      horizontalPadding={getProperTagBadgePadding(size)}\n      rounding={getProperTagBadgeRounding(size)}\n      color={textSemanticName}\n      bgColor={bgSemanticName}\n    >\n      { IconComponent }\n\n      { hasChildren && (\n        <TagBadgeText\n          horizontalPadding={BADGE_TEXT_HORIZONTAL_PADDING}\n          typo={getProperTagBadgeTypo(size)}\n        >\n            { children }\n        </TagBadgeText>\n      ) }\n    </TagBadgeStyled.Wrapper>\n  )\n}))\n"],"names":["BADGE_TEST_ID","Badge","memo","forwardRef","size","TagBadgeSize","M","variant","TagBadgeVariant","Default","icon","children","className","interpolation","testId","props","forwardedRef","hasChildren","isEmpty","bgSemanticName","useMemo","getProperTagBadgeBgColor","textSemanticName","getProperBadgeTextColor","IconComponent","React","createElement","Icon","source","TAG_BADGE_ICON_SIZE","color","TagBadgeStyled","Wrapper","Object","assign","ref","horizontalPadding","getProperTagBadgePadding","rounding","getProperTagBadgeRounding","bgColor","TagBadgeText","BADGE_TEXT_HORIZONTAL_PADDING","typo","getProperTagBadgeTypo"],"mappings":";;;;;;;;;;AAyBA;AACO,MAAMA,aAAa,GAAG,qBAAoB;AAE1C,MAAMC,KAAK,gBAAGC,IAAI,eAACC,UAAU,CAA6B,SAASF,KAAKA,CAAC;EAC9EG,IAAI,GAAGC,YAAY,CAACC,CAAC;EACrBC,OAAO,GAAGC,eAAe,CAACC,OAAO;EACjCC,IAAI;EACJC,QAAQ;EACRC,SAAS;EACTC,aAAa;AACbC,EAAAA,MAAM,GAAGd,aAAa;EACtB,GAAGe,KAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;AACf,EAAA,MAAMC,WAAW,GAAG,CAACC,OAAO,CAACP,QAAQ,CAAC,CAAA;AAEtC,EAAA,MAAMQ,cAAc,GAAGC,OAAO,CAAC,MAAOC,wBAAwB,CAACd,OAAO,CAAE,EAAE,CAACA,OAAO,CAAC,CAAC,CAAA;AACpF,EAAA,MAAMe,gBAAgB,GAAGF,OAAO,CAAC,MAAOG,uBAAuB,CAAChB,OAAO,CAAE,EAAE,CAACA,OAAO,CAAC,CAAC,CAAA;EAErF,MAAMiB,aAAa,GAAGJ,OAAO,CAAC,MAAOV,IAAI,iBACvCe,cAAA,CAAAC,aAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,MAAM,EAAElB,IAAK;AACbN,IAAAA,IAAI,EAAEyB,mBAAoB;AAC1BC,IAAAA,KAAK,EAAER,gBAAAA;AAAiB,GACzB,CACD,EAAE,CACFZ,IAAI,EACJY,gBAAgB,CACjB,CAAC,CAAA;AAEF,EAAA,oBACEG,cAAA,CAAAC,aAAA,CAACK,cAAc,CAACC,OAAO,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACjBnB,KAAK,EAAA;AACToB,IAAAA,GAAG,EAAEnB,YAAa;AAClBJ,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,aAAa,EAAEA,aAAc;AAC7B,IAAA,aAAA,EAAaC,MAAO;AACpBsB,IAAAA,iBAAiB,EAAEC,wBAAwB,CAACjC,IAAI,CAAE;AAClDkC,IAAAA,QAAQ,EAAEC,yBAAyB,CAACnC,IAAI,CAAE;AAC1C0B,IAAAA,KAAK,EAAER,gBAAiB;AACxBkB,IAAAA,OAAO,EAAErB,cAAAA;GAEPK,CAAAA,EAAAA,aAAa,EAEbP,WAAW,iBACXQ,cAAA,CAAAC,aAAA,CAACe,YAAY,EAAA;AACXL,IAAAA,iBAAiB,EAAEM,6BAA8B;IACjDC,IAAI,EAAEC,qBAAqB,CAACxC,IAAI,CAAA;GAE5BO,EAAAA,QACQ,CAEM,CAAC,CAAA;AAE7B,CAAC,CAAC;;;;"}

package/dist/esm/components/TagBadge/Tag/Tag.mjs

@@ -1,4 +1,4 @@
-import React__default, { useMemo } from 'react';
+import React__default, { memo, forwardRef, useMemo } from 'react';
 import { CancelSmallIcon } from '@channel.io/bezier-icons';
 import { isEmpty, isNil } from '../../../utils/typeUtils.mjs';
 import Styled from './Tag.styled.mjs';
@@ -11,7 +11,7 @@ import TagBadgeVariant from '../TagBadgeCommon/constants/TagBadgeVariant.mjs';
 
 // TODO: 테스트 코드 작성
 const TAG_TEST_ID = 'bezier-react-tag';
-const Tag = /*#__PURE__*/React__default.memo(function Tag({
+const Tag = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Tag({
   size = TagBadgeSize.M,
   variant = TagBadgeVariant.Default,
   color: givenColor,
@@ -22,7 +22,7 @@ const Tag = /*#__PURE__*/React__default.memo(function Tag({
   interpolation,
   testId = TAG_TEST_ID,
   ...props
-}) {
+}, forwardedRef) {
   const hasChildren = useMemo(() => !isEmpty(children), [children]);
   const bgSemanticName = useMemo(() => givenColor || getProperTagBadgeBgColor(variant), [givenColor, variant]);
   const CloseIconComponent = useMemo(() => !isNil(onDelete) && /*#__PURE__*/React__default.createElement(Styled.CloseIcon, {
@@ -32,6 +32,7 @@ const Tag = /*#__PURE__*/React__default.memo(function Tag({
     onClick: onDelete
   }), [onDelete]);
   return /*#__PURE__*/React__default.createElement(TagBadgeStyled.Wrapper, Object.assign({}, props, {
+    ref: forwardedRef,
     className: className,
     interpolation: interpolation,
     "data-testid": testId,
@@ -42,7 +43,7 @@ const Tag = /*#__PURE__*/React__default.memo(function Tag({
     horizontalPadding: TAG_TEXT_HORIZONTAL_PADDING,
     typo: getProperTagBadgeTypo(size)
   }, children), CloseIconComponent);
-});
+}));
 
 export { TAG_TEST_ID, Tag };
 //# sourceMappingURL=Tag.mjs.map

package/dist/esm/components/TagBadge/Tag/Tag.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.mjs","sources":["../../../../../src/components/TagBadge/Tag/Tag.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\n\nimport { CancelSmallIcon } from '@channel.io/bezier-icons'\n\nimport {\n  isEmpty,\n  isNil,\n} from '~/src/utils/typeUtils'\n\nimport {\n  TAG_BADGE_ICON_SIZE,\n  TAG_TEXT_HORIZONTAL_PADDING,\n  TagBadgeSize,\n  TagBadgeStyled,\n  TagBadgeText,\n  TagBadgeVariant,\n  getProperTagBadgeBgColor,\n  getProperTagBadgePadding,\n  getProperTagBadgeRounding,\n  getProperTagBadgeTypo,\n} from '~/src/components/TagBadge/TagBadgeCommon'\n\nimport type TagProps from './Tag.types'\n\nimport Styled from './Tag.styled'\n\n// TODO: 테스트 코드 작성\nexport const TAG_TEST_ID = 'bezier-react-tag'\n\nexport const Tag = React.memo(function Tag({\n  size = TagBadgeSize.M,\n  variant = TagBadgeVariant.Default,\n  color: givenColor,\n  children,\n  // Handlers\n  onDelete,\n  className,\n  interpolation,\n  testId = TAG_TEST_ID,\n  ...props\n}: TagProps) {\n  const hasChildren = useMemo(() => !isEmpty(children), [children])\n\n  const bgSemanticName = useMemo(() => (\n    givenColor || getProperTagBadgeBgColor(variant)\n  ), [\n    givenColor,\n    variant,\n  ])\n\n  const CloseIconComponent = useMemo(() => !isNil(onDelete) && (\n    <Styled.CloseIcon\n      source={CancelSmallIcon}\n      size={TAG_BADGE_ICON_SIZE}\n      color=\"txt-black-darker\"\n      onClick={onDelete}\n    />\n  ), [onDelete])\n\n  return (\n    <TagBadgeStyled.Wrapper\n      {...props}\n      className={className}\n      interpolation={interpolation}\n      data-testid={testId}\n      horizontalPadding={getProperTagBadgePadding(size)}\n      rounding={getProperTagBadgeRounding(size)}\n      bgColor={bgSemanticName}\n    >\n      { hasChildren && (\n        <TagBadgeText\n          horizontalPadding={TAG_TEXT_HORIZONTAL_PADDING}\n          typo={getProperTagBadgeTypo(size)}\n        >\n            { children }\n        </TagBadgeText>\n      ) }\n\n      { CloseIconComponent }\n    </TagBadgeStyled.Wrapper>\n  )\n})\n"],"names":["TAG_TEST_ID","Tag","React","memo","size","TagBadgeSize","M","variant","TagBadgeVariant","Default","color","givenColor","children","onDelete","className","interpolation","testId","props","hasChildren","useMemo","isEmpty","bgSemanticName","getProperTagBadgeBgColor","CloseIconComponent","isNil","createElement","Styled","CloseIcon","source","CancelSmallIcon","TAG_BADGE_ICON_SIZE","onClick","TagBadgeStyled","Wrapper","Object","assign","horizontalPadding","getProperTagBadgePadding","rounding","getProperTagBadgeRounding","bgColor","TagBadgeText","TAG_TEXT_HORIZONTAL_PADDING","typo","getProperTagBadgeTypo"],"mappings":";;;;;;;;;;;AA0BA;AACO,MAAMA,WAAW,GAAG,mBAAkB;AAEtC,MAAMC,GAAG,gBAAGC,cAAK,CAACC,IAAI,CAAC,SAASF,GAAGA,CAAC;EACzCG,IAAI,GAAGC,YAAY,CAACC,CAAC;EACrBC,OAAO,GAAGC,eAAe,CAACC,OAAO;AACjCC,EAAAA,KAAK,EAAEC,UAAU;EACjBC,QAAQ;AACR;EACAC,QAAQ;EACRC,SAAS;EACTC,aAAa;AACbC,EAAAA,MAAM,GAAGhB,WAAW;EACpB,GAAGiB,KAAAA;AACK,CAAC,EAAE;AACX,EAAA,MAAMC,WAAW,GAAGC,OAAO,CAAC,MAAM,CAACC,OAAO,CAACR,QAAQ,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC,CAAA;AAEjE,EAAA,MAAMS,cAAc,GAAGF,OAAO,CAAC,MAC7BR,UAAU,IAAIW,wBAAwB,CAACf,OAAO,CAC/C,EAAE,CACDI,UAAU,EACVJ,OAAO,CACR,CAAC,CAAA;AAEF,EAAA,MAAMgB,kBAAkB,GAAGJ,OAAO,CAAC,MAAM,CAACK,KAAK,CAACX,QAAQ,CAAC,iBACvDX,cAAA,CAAAuB,aAAA,CAACC,MAAM,CAACC,SAAS,EAAA;AACfC,IAAAA,MAAM,EAAEC,eAAgB;AACxBzB,IAAAA,IAAI,EAAE0B,mBAAoB;AAC1BpB,IAAAA,KAAK,EAAC,kBAAkB;AACxBqB,IAAAA,OAAO,EAAElB,QAAAA;AAAS,GACnB,CACF,EAAE,CAACA,QAAQ,CAAC,CAAC,CAAA;AAEd,EAAA,oBACEX,cAAA,CAAAuB,aAAA,CAACO,cAAc,CAACC,OAAO,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACjBlB,KAAK,EAAA;AACTH,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,aAAa,EAAEA,aAAc;AAC7B,IAAA,aAAA,EAAaC,MAAO;AACpBoB,IAAAA,iBAAiB,EAAEC,wBAAwB,CAACjC,IAAI,CAAE;AAClDkC,IAAAA,QAAQ,EAAEC,yBAAyB,CAACnC,IAAI,CAAE;AAC1CoC,IAAAA,OAAO,EAAEnB,cAAAA;AAAe,GAAA,CAAA,EAEtBH,WAAW,iBACXhB,cAAA,CAAAuB,aAAA,CAACgB,YAAY,EAAA;AACXL,IAAAA,iBAAiB,EAAEM,2BAA4B;IAC/CC,IAAI,EAAEC,qBAAqB,CAACxC,IAAI,CAAA;AAAE,GAAA,EAE9BQ,QACQ,CACf,EAECW,kBACoB,CAAC,CAAA;AAE7B,CAAC;;;;"}
+{"version":3,"file":"Tag.mjs","sources":["../../../../../src/components/TagBadge/Tag/Tag.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  memo,\n  useMemo,\n} from 'react'\n\nimport { CancelSmallIcon } from '@channel.io/bezier-icons'\n\nimport {\n  isEmpty,\n  isNil,\n} from '~/src/utils/typeUtils'\n\nimport {\n  TAG_BADGE_ICON_SIZE,\n  TAG_TEXT_HORIZONTAL_PADDING,\n  TagBadgeSize,\n  TagBadgeStyled,\n  TagBadgeText,\n  TagBadgeVariant,\n  getProperTagBadgeBgColor,\n  getProperTagBadgePadding,\n  getProperTagBadgeRounding,\n  getProperTagBadgeTypo,\n} from '~/src/components/TagBadge/TagBadgeCommon'\n\nimport type TagProps from './Tag.types'\n\nimport Styled from './Tag.styled'\n\n// TODO: 테스트 코드 작성\nexport const TAG_TEST_ID = 'bezier-react-tag'\n\nexport const Tag = memo(forwardRef<HTMLDivElement, TagProps>(function Tag({\n  size = TagBadgeSize.M,\n  variant = TagBadgeVariant.Default,\n  color: givenColor,\n  children,\n  // Handlers\n  onDelete,\n  className,\n  interpolation,\n  testId = TAG_TEST_ID,\n  ...props\n}, forwardedRef) {\n  const hasChildren = useMemo(() => !isEmpty(children), [children])\n\n  const bgSemanticName = useMemo(() => (\n    givenColor || getProperTagBadgeBgColor(variant)\n  ), [\n    givenColor,\n    variant,\n  ])\n\n  const CloseIconComponent = useMemo(() => !isNil(onDelete) && (\n    <Styled.CloseIcon\n      source={CancelSmallIcon}\n      size={TAG_BADGE_ICON_SIZE}\n      color=\"txt-black-darker\"\n      onClick={onDelete}\n    />\n  ), [onDelete])\n\n  return (\n    <TagBadgeStyled.Wrapper\n      {...props}\n      ref={forwardedRef}\n      className={className}\n      interpolation={interpolation}\n      data-testid={testId}\n      horizontalPadding={getProperTagBadgePadding(size)}\n      rounding={getProperTagBadgeRounding(size)}\n      bgColor={bgSemanticName}\n    >\n      { hasChildren && (\n        <TagBadgeText\n          horizontalPadding={TAG_TEXT_HORIZONTAL_PADDING}\n          typo={getProperTagBadgeTypo(size)}\n        >\n            { children }\n        </TagBadgeText>\n      ) }\n\n      { CloseIconComponent }\n    </TagBadgeStyled.Wrapper>\n  )\n}))\n"],"names":["TAG_TEST_ID","Tag","memo","forwardRef","size","TagBadgeSize","M","variant","TagBadgeVariant","Default","color","givenColor","children","onDelete","className","interpolation","testId","props","forwardedRef","hasChildren","useMemo","isEmpty","bgSemanticName","getProperTagBadgeBgColor","CloseIconComponent","isNil","React","createElement","Styled","CloseIcon","source","CancelSmallIcon","TAG_BADGE_ICON_SIZE","onClick","TagBadgeStyled","Wrapper","Object","assign","ref","horizontalPadding","getProperTagBadgePadding","rounding","getProperTagBadgeRounding","bgColor","TagBadgeText","TAG_TEXT_HORIZONTAL_PADDING","typo","getProperTagBadgeTypo"],"mappings":";;;;;;;;;;;AA8BA;AACO,MAAMA,WAAW,GAAG,mBAAkB;AAEtC,MAAMC,GAAG,gBAAGC,IAAI,eAACC,UAAU,CAA2B,SAASF,GAAGA,CAAC;EACxEG,IAAI,GAAGC,YAAY,CAACC,CAAC;EACrBC,OAAO,GAAGC,eAAe,CAACC,OAAO;AACjCC,EAAAA,KAAK,EAAEC,UAAU;EACjBC,QAAQ;AACR;EACAC,QAAQ;EACRC,SAAS;EACTC,aAAa;AACbC,EAAAA,MAAM,GAAGhB,WAAW;EACpB,GAAGiB,KAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;AACf,EAAA,MAAMC,WAAW,GAAGC,OAAO,CAAC,MAAM,CAACC,OAAO,CAACT,QAAQ,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC,CAAA;AAEjE,EAAA,MAAMU,cAAc,GAAGF,OAAO,CAAC,MAC7BT,UAAU,IAAIY,wBAAwB,CAAChB,OAAO,CAC/C,EAAE,CACDI,UAAU,EACVJ,OAAO,CACR,CAAC,CAAA;AAEF,EAAA,MAAMiB,kBAAkB,GAAGJ,OAAO,CAAC,MAAM,CAACK,KAAK,CAACZ,QAAQ,CAAC,iBACvDa,cAAA,CAAAC,aAAA,CAACC,MAAM,CAACC,SAAS,EAAA;AACfC,IAAAA,MAAM,EAAEC,eAAgB;AACxB3B,IAAAA,IAAI,EAAE4B,mBAAoB;AAC1BtB,IAAAA,KAAK,EAAC,kBAAkB;AACxBuB,IAAAA,OAAO,EAAEpB,QAAAA;AAAS,GACnB,CACF,EAAE,CAACA,QAAQ,CAAC,CAAC,CAAA;AAEd,EAAA,oBACEa,cAAA,CAAAC,aAAA,CAACO,cAAc,CAACC,OAAO,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACjBpB,KAAK,EAAA;AACTqB,IAAAA,GAAG,EAAEpB,YAAa;AAClBJ,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,aAAa,EAAEA,aAAc;AAC7B,IAAA,aAAA,EAAaC,MAAO;AACpBuB,IAAAA,iBAAiB,EAAEC,wBAAwB,CAACpC,IAAI,CAAE;AAClDqC,IAAAA,QAAQ,EAAEC,yBAAyB,CAACtC,IAAI,CAAE;AAC1CuC,IAAAA,OAAO,EAAErB,cAAAA;AAAe,GAAA,CAAA,EAEtBH,WAAW,iBACXO,cAAA,CAAAC,aAAA,CAACiB,YAAY,EAAA;AACXL,IAAAA,iBAAiB,EAAEM,2BAA4B;IAC/CC,IAAI,EAAEC,qBAAqB,CAAC3C,IAAI,CAAA;AAAE,GAAA,EAE9BQ,QACQ,CACf,EAECY,kBACoB,CAAC,CAAA;AAE7B,CAAC,CAAC;;;;"}