@remember-web/primitive 0.1.12 → 0.1.13

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

@@ -1,110 +0,0 @@
-"use client";
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import * as RadixTooltip from '@radix-ui/react-tooltip';
-import { useState } from 'react';
-import { isSSR } from '@remember-web/shared';
-import { IconCloseS } from '@remember-web/icon';
-import { contents000, contents999 } from '@remember-web/mixin';
-import { TooltipTriggerWrapper, TooltipContent, CloseButton } from './styles.esm.js';
-import { isStaticTypeProps, isLargeSizeProps } from './types.esm.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var _excluded = ["children", "content", "contentOptions", "defaultOpen", "side", "gap", "onOpenChange", "onClickOutside"];
-var hoverable = isSSR() ? true : window.matchMedia('(any-hover: hover)').matches;
-function Tooltip(_ref) {
-  var children = _ref.children,
-    content = _ref.content,
-    contentOptions = _ref.contentOptions,
-    defaultOpen = _ref.defaultOpen,
-    _ref$side = _ref.side,
-    side = _ref$side === void 0 ? 'top' : _ref$side,
-    _ref$gap = _ref.gap,
-    gap = _ref$gap === void 0 ? 4 : _ref$gap,
-    onOpenChange = _ref.onOpenChange,
-    onClickOutside = _ref.onClickOutside,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : false),
-    _useState2 = _slicedToArray(_useState, 2),
-    _open = _useState2[0],
-    _setOpen = _useState2[1];
-  var _props$type = props.type,
-    type = _props$type === void 0 ? 'hover' : _props$type,
-    _props$size = props.size,
-    size = _props$size === void 0 ? 'small' : _props$size;
-  var _ref2 = contentOptions !== null && contentOptions !== void 0 ? contentOptions : {},
-    _ref2$backgroundColor = _ref2.backgroundColor,
-    backgroundColor = _ref2$backgroundColor === void 0 ? contents000 : _ref2$backgroundColor,
-    _ref2$contentColor = _ref2.contentColor,
-    contentColor = _ref2$contentColor === void 0 ? contents999 : _ref2$contentColor,
-    _ref2$maxWidth = _ref2.maxWidth,
-    maxWidth = _ref2$maxWidth === void 0 ? 'initial' : _ref2$maxWidth,
-    _ref2$textAlign = _ref2.textAlign,
-    textAlign = _ref2$textAlign === void 0 ? 'center' : _ref2$textAlign,
-    _onClick = _ref2.onClick,
-    _ref2$zIndex = _ref2.zIndex,
-    zIndex = _ref2$zIndex === void 0 ? 0 : _ref2$zIndex;
-  /**
-   * @description hover가 가능할 때 (마우스 포인터, 디지타이저 사용) type이 hover일 때만 hoverType으로 결정
-   *
-   * hover가 불가능할 때 (핑거 터치 사용) type이 hover라면 click타입으로 간주 */
-  var isHoverType = hoverable && type === 'hover';
-  var isClickType = !hoverable || type === 'click';
-  var isCloseButtonType = type === 'closeButton';
-  /** @description 클릭을 통해서 트리깅 하는 액션인지 확인 */
-  var isClickTrigger = isClickType || isCloseButtonType;
-  var isOpen = isStaticTypeProps(props) ? props.open : isHoverType ? undefined : _open;
-  return /*#__PURE__*/jsx(RadixTooltip.Provider, {
-    children: /*#__PURE__*/jsxs(RadixTooltip.Root, {
-      open: isOpen,
-      defaultOpen: defaultOpen,
-      delayDuration: 100,
-      onOpenChange: onOpenChange,
-      children: [/*#__PURE__*/jsx(RadixTooltip.Trigger, {
-        asChild: true,
-        onClick: isClickTrigger ? function () {
-          return _setOpen(isClickType ? function (prev) {
-            return !prev;
-          } : true);
-        } : undefined,
-        children: /*#__PURE__*/jsx(TooltipTriggerWrapper, {
-          children: children
-        })
-      }), /*#__PURE__*/jsx(RadixTooltip.Portal, {
-        children: /*#__PURE__*/jsxs(TooltipContent, {
-          $size: size,
-          $maxWidth: maxWidth,
-          $backgroundColor: backgroundColor,
-          $contentColor: contentColor,
-          $textAlign: textAlign,
-          $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__*/jsx(IconCloseS, {})
-          }), isLargeSizeProps(props) && props.hasArrow && /*#__PURE__*/jsx(RadixTooltip.Arrow, {
-            width: 14,
-            height: 8,
-            color: backgroundColor
-          })]
-        })
-      })]
-    })
-  });
-}
-
-export { Tooltip as default };
-//# sourceMappingURL=index.esm.js.map

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

@@ -1 +0,0 @@
-{"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 { useState, type PropsWithChildren } from 'react';\nimport { isSSR } from '@remember-web/shared';\nimport { IconCloseS } from '@remember-web/icon';\nimport { contents000, contents999 } from '@remember-web/mixin';\n\nimport { CloseButton, TooltipContent, TooltipTriggerWrapper } from './styles';\nimport {\n  isLargeSizeProps,\n  isStaticTypeProps,\n  type TooltipProps,\n  type TooltipSize,\n  type TooltipType,\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;;"}

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

@@ -1,60 +0,0 @@
-"use client";
-'use strict';
-
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-var RadixTooltip = require('@radix-ui/react-tooltip');
-var styled = require('styled-components');
-var mixin = require('@remember-web/mixin');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
-var RadixTooltip__namespace = /*#__PURE__*/_interopNamespace(RadixTooltip);
-var styled__default = /*#__PURE__*/_interopDefault(styled);
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var TOOLTIP_CONTENT_CONSTANTS = {
-  large: {
-    padding: '8px 12px',
-    typography: 'Body1'
-  },
-  small: {
-    padding: '4px 8px',
-    typography: 'Body2'
-  }
-};
-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 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"])));
-
-exports.CloseButton = CloseButton;
-exports.TooltipContent = TooltipContent;
-exports.TooltipTriggerWrapper = TooltipTriggerWrapper;
-//# sourceMappingURL=styles.cjs.js.map

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

@@ -1 +0,0 @@
-{"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 styled, { css, keyframes } from 'styled-components';\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n  contents000,\n  contents999,\n  getTypographyStyles,\n} from '@remember-web/mixin';\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;;;;"}

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

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import * as RadixTooltip from '@radix-ui/react-tooltip';
-import type { TooltipSize, TooltipTextAlign } from './types';
-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 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;
-}, {
-    $size: TooltipSize;
-    $maxWidth: number | string;
-    $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 +0,0 @@
-{"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"}

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

@@ -1,32 +0,0 @@
-"use client";
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import * as RadixTooltip from '@radix-ui/react-tooltip';
-import styled, { keyframes, css } from 'styled-components';
-import { contents999, contents000, getTypographyStyles } from '@remember-web/mixin';
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var TOOLTIP_CONTENT_CONSTANTS = {
-  large: {
-    padding: '8px 12px',
-    typography: 'Body1'
-  },
-  small: {
-    padding: '4px 8px',
-    typography: 'Body2'
-  }
-};
-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 CloseButton = styled.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  & > svg {\n    display: block;\n  }\n"])));
-
-export { CloseButton, TooltipContent, TooltipTriggerWrapper };
-//# sourceMappingURL=styles.esm.js.map

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

@@ -1 +0,0 @@
-{"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 styled, { css, keyframes } from 'styled-components';\nimport type { TypographyStyle } from '@remember-web/mixin';\nimport {\n  contents000,\n  contents999,\n  getTypographyStyles,\n} from '@remember-web/mixin';\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;;"}

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

@@ -1,12 +0,0 @@
-'use strict';
-
-var isStaticTypeProps = function isStaticTypeProps(props) {
-  return 'type' in props && props.type === 'static';
-};
-var isLargeSizeProps = function isLargeSizeProps(props) {
-  return 'size' in props && props.size === 'large';
-};
-
-exports.isLargeSizeProps = isLargeSizeProps;
-exports.isStaticTypeProps = isStaticTypeProps;
-//# sourceMappingURL=types.cjs.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.cjs.js","sources":["../../../../src/Floating/Tooltip/types.ts"],"sourcesContent":["import type {\n  DismissableLayerProps,\n  PopperContentProps,\n  TooltipProps as RadixTooltipProps,\n} from '@radix-ui/react-tooltip';\nimport type { ReactNode } from 'react';\n\nexport type TooltipSize = 'small' | 'large';\nexport type TooltipType = 'hover' | 'click' | 'closeButton' | 'static';\nexport type TooltipTextAlign = 'left' | 'center' | 'right';\n\nexport type TooltipProps<Type extends TooltipType, Size extends TooltipSize> = {\n  content: ReactNode;\n  defaultOpen?: boolean;\n  gap?: 4 | 8 | (number & {});\n  side?: PopperContentProps['side'];\n  type?: Type;\n  size?: Size;\n  contentOptions?: TooltipContentOptionProps;\n  onOpenChange?: RadixTooltipProps['onOpenChange'];\n  onClickOutside?: DismissableLayerProps['onPointerDownOutside'];\n} & (Type extends Exclude<TooltipType, 'static'> ? {} : { open: boolean }) &\n  (Size extends 'large' ? { hasArrow?: boolean } : {});\n\nexport const isStaticTypeProps = (\n  props: Pick<TooltipProps<any, any>, 'type'>\n): props is TooltipProps<'static', any> =>\n  'type' in props && props.type === 'static';\n\nexport const isLargeSizeProps = (\n  props: Pick<TooltipProps<any, any>, 'size'>\n): props is TooltipProps<any, 'large'> =>\n  'size' in props && props.size === 'large';\n\nexport type TooltipContentOptionProps = {\n  maxWidth?: number | string;\n  backgroundColor?: string;\n  contentColor?: string;\n  zIndex?: number;\n  textAlign?: TooltipTextAlign;\n  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n};\n"],"names":["isStaticTypeProps","props","type","isLargeSizeProps","size"],"mappings":";;IAwBaA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAC5BC,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACC,IAAI,KAAK,QAAQ,CAAA;AAAA,EAAA;IAE/BC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAC3BF,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACG,IAAI,KAAK,OAAO,CAAA;AAAA;;;;;"}

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

@@ -1,31 +0,0 @@
-import type { DismissableLayerProps, PopperContentProps, TooltipProps as RadixTooltipProps } from '@radix-ui/react-tooltip';
-import type { ReactNode } from 'react';
-export type TooltipSize = 'small' | 'large';
-export type TooltipType = 'hover' | 'click' | 'closeButton' | 'static';
-export type TooltipTextAlign = 'left' | 'center' | 'right';
-export type TooltipProps<Type extends TooltipType, Size extends TooltipSize> = {
-    content: ReactNode;
-    defaultOpen?: boolean;
-    gap?: 4 | 8 | (number & {});
-    side?: PopperContentProps['side'];
-    type?: Type;
-    size?: Size;
-    contentOptions?: TooltipContentOptionProps;
-    onOpenChange?: RadixTooltipProps['onOpenChange'];
-    onClickOutside?: DismissableLayerProps['onPointerDownOutside'];
-} & (Type extends Exclude<TooltipType, 'static'> ? {} : {
-    open: boolean;
-}) & (Size extends 'large' ? {
-    hasArrow?: boolean;
-} : {});
-export declare const isStaticTypeProps: (props: Pick<TooltipProps<any, any>, 'type'>) => props is TooltipProps<"static", any>;
-export declare const isLargeSizeProps: (props: Pick<TooltipProps<any, any>, 'size'>) => props is TooltipProps<any, "large">;
-export type TooltipContentOptionProps = {
-    maxWidth?: number | string;
-    backgroundColor?: string;
-    contentColor?: string;
-    zIndex?: number;
-    textAlign?: TooltipTextAlign;
-    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-};
-//# sourceMappingURL=types.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,kBAAkB,EAClB,YAAY,IAAI,iBAAiB,EAClC,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;AAC5C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,GAAG,QAAQ,CAAC;AACvE,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,MAAM,MAAM,YAAY,CAAC,IAAI,SAAS,WAAW,EAAE,IAAI,SAAS,WAAW,IAAI;IAC7E,OAAO,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC5B,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,cAAc,CAAC,EAAE,yBAAyB,CAAC;IAC3C,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,cAAc,CAAC,EAAE,qBAAqB,CAAC,sBAAsB,CAAC,CAAC;CAChE,GAAG,CAAC,IAAI,SAAS,OAAO,CAAC,WAAW,EAAE,QAAQ,CAAC,GAAG,EAAE,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC,GACxE,CAAC,IAAI,SAAS,OAAO,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,EAAE,CAAC,CAAC;AAEvD,eAAO,MAAM,iBAAiB,UACrB,KAAK,aAAa,GAAG,EAAE,GAAG,CAAC,EAAE,MAAM,CAAC,yCAED,CAAC;AAE7C,eAAO,MAAM,gBAAgB,UACpB,KAAK,aAAa,GAAG,EAAE,GAAG,CAAC,EAAE,MAAM,CAAC,wCAEF,CAAC;AAE5C,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACrE,CAAC"}

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

@@ -1,9 +0,0 @@
-var isStaticTypeProps = function isStaticTypeProps(props) {
-  return 'type' in props && props.type === 'static';
-};
-var isLargeSizeProps = function isLargeSizeProps(props) {
-  return 'size' in props && props.size === 'large';
-};
-
-export { isLargeSizeProps, isStaticTypeProps };
-//# sourceMappingURL=types.esm.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.esm.js","sources":["../../../../src/Floating/Tooltip/types.ts"],"sourcesContent":["import type {\n  DismissableLayerProps,\n  PopperContentProps,\n  TooltipProps as RadixTooltipProps,\n} from '@radix-ui/react-tooltip';\nimport type { ReactNode } from 'react';\n\nexport type TooltipSize = 'small' | 'large';\nexport type TooltipType = 'hover' | 'click' | 'closeButton' | 'static';\nexport type TooltipTextAlign = 'left' | 'center' | 'right';\n\nexport type TooltipProps<Type extends TooltipType, Size extends TooltipSize> = {\n  content: ReactNode;\n  defaultOpen?: boolean;\n  gap?: 4 | 8 | (number & {});\n  side?: PopperContentProps['side'];\n  type?: Type;\n  size?: Size;\n  contentOptions?: TooltipContentOptionProps;\n  onOpenChange?: RadixTooltipProps['onOpenChange'];\n  onClickOutside?: DismissableLayerProps['onPointerDownOutside'];\n} & (Type extends Exclude<TooltipType, 'static'> ? {} : { open: boolean }) &\n  (Size extends 'large' ? { hasArrow?: boolean } : {});\n\nexport const isStaticTypeProps = (\n  props: Pick<TooltipProps<any, any>, 'type'>\n): props is TooltipProps<'static', any> =>\n  'type' in props && props.type === 'static';\n\nexport const isLargeSizeProps = (\n  props: Pick<TooltipProps<any, any>, 'size'>\n): props is TooltipProps<any, 'large'> =>\n  'size' in props && props.size === 'large';\n\nexport type TooltipContentOptionProps = {\n  maxWidth?: number | string;\n  backgroundColor?: string;\n  contentColor?: string;\n  zIndex?: number;\n  textAlign?: TooltipTextAlign;\n  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n};\n"],"names":["isStaticTypeProps","props","type","isLargeSizeProps","size"],"mappings":"IAwBaA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAC5BC,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACC,IAAI,KAAK,QAAQ,CAAA;AAAA,EAAA;IAE/BC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAC3BF,KAA2C,EAAA;EAAA,OAE3C,MAAM,IAAIA,KAAK,IAAIA,KAAK,CAACG,IAAI,KAAK,OAAO,CAAA;AAAA;;;;"}

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

@@ -1,11 +0,0 @@
-export { default as DropdownMenu } from './DropdownMenu';
-export { default as Popover } from './Popover';
-export { default as Tooltip } from './Tooltip';
-/** GNB에서 의존하기 때문에 export */
-export type * from './DropdownMenu';
-export type * from './Popover';
-export type * from './DropdownMenu/styles';
-export * from './DropdownMenu/styles';
-export type * from './Popover/styles';
-export * from './Popover/styles';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Floating/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAE/C,4BAA4B;AAC5B,mBAAmB,gBAAgB,CAAC;AACpC,mBAAmB,WAAW,CAAC;AAC/B,mBAAmB,uBAAuB,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,mBAAmB,kBAAkB,CAAC;AACtC,cAAc,kBAAkB,CAAC"}

package/dist/src/Inputs/Select/DesignedSelect/const.cjs.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var OPTION_ITEM_HEIGHT_PX = 44;
-var DEFAULT_MAX_HEIGHT_PX = OPTION_ITEM_HEIGHT_PX * 4;
-
-exports.DEFAULT_MAX_HEIGHT_PX = DEFAULT_MAX_HEIGHT_PX;
-exports.OPTION_ITEM_HEIGHT_PX = OPTION_ITEM_HEIGHT_PX;
-//# sourceMappingURL=const.cjs.js.map

package/dist/src/Inputs/Select/DesignedSelect/const.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"const.cjs.js","sources":["../../../../../src/Inputs/Select/DesignedSelect/const.ts"],"sourcesContent":["export const OPTION_ITEM_HEIGHT_PX = 44;\nexport const DEFAULT_MAX_HEIGHT_PX = OPTION_ITEM_HEIGHT_PX * 4;\n"],"names":["OPTION_ITEM_HEIGHT_PX","DEFAULT_MAX_HEIGHT_PX"],"mappings":";;AAAO,IAAMA,qBAAqB,GAAG,GAAE;AAC1BC,IAAAA,qBAAqB,GAAGD,qBAAqB,GAAG;;;;;"}

package/dist/src/Inputs/Select/DesignedSelect/const.d.ts

@@ -1,3 +0,0 @@
-export declare const OPTION_ITEM_HEIGHT_PX = 44;
-export declare const DEFAULT_MAX_HEIGHT_PX: number;
-//# sourceMappingURL=const.d.ts.map

package/dist/src/Inputs/Select/DesignedSelect/const.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/Select/DesignedSelect/const.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB,KAAK,CAAC;AACxC,eAAO,MAAM,qBAAqB,QAA4B,CAAC"}

package/dist/src/Inputs/Select/DesignedSelect/const.esm.js

@@ -1,5 +0,0 @@
-var OPTION_ITEM_HEIGHT_PX = 44;
-var DEFAULT_MAX_HEIGHT_PX = OPTION_ITEM_HEIGHT_PX * 4;
-
-export { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX };
-//# sourceMappingURL=const.esm.js.map

package/dist/src/Inputs/Select/DesignedSelect/const.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"const.esm.js","sources":["../../../../../src/Inputs/Select/DesignedSelect/const.ts"],"sourcesContent":["export const OPTION_ITEM_HEIGHT_PX = 44;\nexport const DEFAULT_MAX_HEIGHT_PX = OPTION_ITEM_HEIGHT_PX * 4;\n"],"names":["OPTION_ITEM_HEIGHT_PX","DEFAULT_MAX_HEIGHT_PX"],"mappings":"AAAO,IAAMA,qBAAqB,GAAG,GAAE;AAC1BC,IAAAA,qBAAqB,GAAGD,qBAAqB,GAAG;;;;"}

package/dist/src/Inputs/Select/DesignedSelect/index.cjs.js

@@ -1,251 +0,0 @@
-"use client";
-'use strict';
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var react = require('react');
-var icon = require('@remember-web/icon');
-var useMouseEventAway = require('../../../hooks/useMouseEventAway.cjs.js');
-var utils = require('../utils.cjs.js');
-var index = require('../Option/index.cjs.js');
-var styles = require('../styles.cjs.js');
-var _const = require('./const.cjs.js');
-var styles$1 = require('./styles.cjs.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
-var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
-
-var _excluded = ["children", "value", "maxHeight", "placeholder", "onChange", "width", "extendDirection", "disabled", "onClick"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var DesignedSelect = function DesignedSelect(_ref, ref) {
-  var children = _ref.children,
-    value = _ref.value,
-    _ref$maxHeight = _ref.maxHeight,
-    maxHeight = _ref$maxHeight === void 0 ? _const.DEFAULT_MAX_HEIGHT_PX : _ref$maxHeight,
-    placeholder = _ref.placeholder,
-    onChange = _ref.onChange,
-    width = _ref.width,
-    extendDirection = _ref.extendDirection,
-    disabled = _ref.disabled,
-    onClick = _ref.onClick,
-    props = _objectWithoutProperties__default.default(_ref, _excluded);
-  var id = react.useId();
-  var _useState = react.useState('none'),
-    _useState2 = _slicedToArray__default.default(_useState, 2),
-    expandedDirection = _useState2[0],
-    _setExpandedDirection = _useState2[1];
-  var selectContainerRef = react.useRef(null);
-  var selectListRef = react.useRef(null);
-  var clickAwayRef = useMouseEventAway('pointerdown', function () {
-    setExpandedDirection('none');
-  });
-  var setExpandedDirection = react.useCallback(function () {
-    if (disabled) {
-      return;
-    }
-    _setExpandedDirection.apply(void 0, arguments);
-  }, [disabled]);
-  var options = react.Children.toArray(children).filter(function (child) {
-    return /*#__PURE__*/react.isValidElement(child) && child.type === index.OptionHolder;
-  }).map(function (_ref2) {
-    var _ref2$props = _ref2.props,
-      _children = _ref2$props.children,
-      _value = _ref2$props.value,
-      _disabled = _ref2$props.disabled;
-    return {
-      label: _children,
-      value: _value,
-      disabled: _disabled
-    };
-  });
-  var selectedOption = options.find(function (option) {
-    return value === option.value;
-  });
-  var isExpanded = expandedDirection !== 'none';
-  var onSelectOption = function onSelectOption(_value, _label) {
-    var _selectContainerRef$c;
-    onChange === null || onChange === void 0 || onChange(_value, _label);
-    setExpandedDirection('none');
-    (_selectContainerRef$c = selectContainerRef.current) === null || _selectContainerRef$c === void 0 || _selectContainerRef$c.focus();
-  };
-
-  // 리스트가 하단으로 나와야하는지 상단으로 나와야하는지 계산하는 함수
-  // 현재 Viewport기준으로 Select컴포넌트가 아래로 확장되었을 때 뷰포트 내에 리스트박스가 노출될 수 있다면 하단으로 확장, 아니라면 상단으로 확장
-  // direction이 props로 전달되었다면 해당 방향으로 확장
-  var expandSelectListAtComputedPosition = function expandSelectListAtComputedPosition() {
-    var _selectContainerRef$c2;
-    if (extendDirection) {
-      setExpandedDirection(extendDirection);
-      return;
-    }
-    var selectContainerRect = (_selectContainerRef$c2 = selectContainerRef.current) === null || _selectContainerRef$c2 === void 0 ? void 0 : _selectContainerRef$c2.getBoundingClientRect();
-    if (!selectContainerRect) {
-      setExpandedDirection('below');
-      return;
-    }
-
-    // SelectOptionWrapper가 마운트되기 전에 계산해야 하기 때문에 clientHeight를 사용하지 못하고 직접 계산
-    var currentSelectHeight = Math.min(maxHeight, options.length * _const.OPTION_ITEM_HEIGHT_PX);
-    var bottomGap = document.body.clientHeight - selectContainerRect.bottom;
-    setExpandedDirection(currentSelectHeight > bottomGap ? 'above' : 'below');
-  };
-  var optionItemRef = react.useCallback(function (ele) {
-    if (!ele) {
-      return;
-    }
-
-    // 선택한 요소가 없을때는 첫번째 요소에 focus
-    if (!value && !ele.previousSibling) {
-      setTimeout(function () {
-        return ele.focus();
-      });
-      return;
-    }
-
-    // 선택한 요소가 있다면 해당 요소에 focus
-    var optionValue = ele.dataset.optionValue || null;
-    if (optionValue === value) {
-      setTimeout(function () {
-        return ele.focus();
-      });
-    }
-  }, [value]);
-  var keyDownHandler = function keyDownHandler(e) {
-    var _selectContainerRef$c3;
-    var focusedElement = document.activeElement;
-    if (!focusedElement || !(focusedElement instanceof HTMLElement)) {
-      return;
-    }
-    switch (e.key) {
-      case 'Tab':
-        if (isExpanded) {
-          e.preventDefault();
-        }
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        if (!isExpanded) {
-          expandSelectListAtComputedPosition();
-          break;
-        }
-        utils.focusSibling(focusedElement, 'previous');
-        break;
-      case 'ArrowDown':
-        e.preventDefault();
-        if (!isExpanded) {
-          expandSelectListAtComputedPosition();
-          break;
-        }
-        utils.focusSibling(focusedElement, 'next');
-        break;
-      case 'Escape':
-        e.preventDefault();
-        setExpandedDirection('none');
-        (_selectContainerRef$c3 = selectContainerRef.current) === null || _selectContainerRef$c3 === void 0 || _selectContainerRef$c3.focus();
-        break;
-      case 'Enter':
-      case ' ':
-        e.preventDefault();
-        if (e.target === e.currentTarget) {
-          if (isExpanded) {
-            setExpandedDirection('none');
-            return;
-          }
-          expandSelectListAtComputedPosition();
-        }
-        if (focusedElement !== null && focusedElement !== void 0 && focusedElement.matches('[data-option-value]') && focusedElement instanceof HTMLLIElement && focusedElement.dataset.optionValue) {
-          onSelectOption(focusedElement.dataset.optionValue, focusedElement.innerText);
-        }
-        break;
-    }
-  };
-  return /*#__PURE__*/jsxRuntime.jsxs(styles.SelectContainer, _objectSpread(_objectSpread({
-    ref: function ref(el) {
-      if (!el) {
-        return;
-      }
-      selectContainerRef.current = el;
-      clickAwayRef.current = el;
-    },
-    $width: width,
-    tabIndex: disabled ? undefined : 0,
-    "aria-expanded": isExpanded,
-    "aria-haspopup": "listbox",
-    "aria-disabled": disabled,
-    onKeyDown: keyDownHandler
-  }, props), {}, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(styles$1.StyledSelect, {
-      ref: ref,
-      onClick: onClick,
-      expandedDirection: expandedDirection,
-      isPlaceholder: !selectedOption && !!placeholder,
-      onPointerDown: function onPointerDown(e) {
-        if (isExpanded) {
-          setExpandedDirection('none');
-          return;
-        }
-        e.stopPropagation();
-        expandSelectListAtComputedPosition();
-      },
-      children: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || placeholder || 'ㅤ'
-    }), /*#__PURE__*/jsxRuntime.jsx(styles$1.SelectDownIcon, {
-      children: isExpanded ? /*#__PURE__*/jsxRuntime.jsx(icon.IconArrow2Up, {
-        size: "small"
-      }) : /*#__PURE__*/jsxRuntime.jsx(icon.IconArrow2Down, {
-        size: "small"
-      })
-    }), isExpanded && /*#__PURE__*/jsxRuntime.jsx(styles$1.SelectOptionWrapper, {
-      role: "listbox",
-      "aria-activedescendant": value != null ? "".concat(id, "-select-option-").concat(value) : undefined,
-      ref: selectListRef,
-      expandedDirection: expandedDirection,
-      maxHeight: maxHeight,
-      children: options.map(function (_ref3) {
-        var optionValue = _ref3.value,
-          label = _ref3.label,
-          _disabled = _ref3.disabled;
-        return /*#__PURE__*/jsxRuntime.jsx(styles$1.SelectOption, {
-          id: "".concat(id, "-select-option-").concat(optionValue),
-          role: "option",
-          tabIndex: _disabled ? undefined : 0,
-          "aria-selected": optionValue === value,
-          "aria-disabled": _disabled,
-          ref: optionItemRef,
-          isSelected: optionValue === value,
-          "data-option-value": optionValue
-          // onMouseEnter를 사용하게 되면 키보드로 스크롤 할 때도 focus가 이동하게 되기 때문에 onMouseMove를 사용
-          ,
-          onMouseMove: function onMouseMove(e) {
-            if (e.currentTarget === document.activeElement) {
-              return;
-            }
-            e.currentTarget.focus({
-              preventScroll: true
-            });
-          },
-          onFocus: function onFocus() {
-            var _selectListRef$curren;
-            (_selectListRef$curren = selectListRef.current) === null || _selectListRef$curren === void 0 || _selectListRef$curren.setAttribute('aria-activedescendant', "".concat(id, "-select-option-").concat(optionValue));
-          },
-          onClick: function onClick() {
-            if (_disabled) {
-              return;
-            }
-            onSelectOption(optionValue, label);
-          },
-          children: label
-        }, optionValue);
-      })
-    })]
-  }));
-};
-var DesignedSelect$1 = /*#__PURE__*/react.forwardRef(DesignedSelect);
-
-module.exports = DesignedSelect$1;
-//# sourceMappingURL=index.cjs.js.map