@remember-web/primitive 0.0.0-alpha.1 → 0.0.0-alpha.11

package/dist/primitive/src/Floating/Popover/styles.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Floating/Popover/styles.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\nimport { PopoverContent } from '@radix-ui/react-popover';\n\nimport { bg100, contents000 } from '@remember-web/mixin';\n\nexport const showFadeIn = keyframes`\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n`;\nexport const showFadeOut = keyframes`\n    from {\n        opacity: 1;\n    }\n    to {\n        opacity: 0;\n    }\n`;\n\nexport const StyledPopoverContent = styled(PopoverContent)`\n  contain: paint;\n  width: fit-content;\n  margin: 0;\n  padding: 0;\n  border-radius: 4px;\n\n  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);\n  color: ${contents000};\n  background-color: ${bg100};\n  white-space: pre-line;\n\n  height: 100%;\n  will-change: box-shadow;\n\n  &:focus {\n    outline: none;\n  }\n  &[data-state='open'] {\n    animation: ${showFadeIn} 0.12s cubic-bezier(0.35, 0, 0.25, 1) both;\n  }\n  &:not([data-state='open']) {\n    animation: ${showFadeOut} 0.16s cubic-bezier(0.35, 0, 0.25, 1) both;\n  }\n`;\n\nStyledPopoverContent.defaultProps = {\n  avoidCollisions: true,\n  align: 'start',\n  side: 'bottom',\n  sideOffset: 4,\n};\n"],"names":["showFadeIn","keyframes","_templateObject","_taggedTemplateLiteral","showFadeOut","_templateObject2","StyledPopoverContent","styled","PopoverContent","_templateObject3","contents000","bg100","defaultProps","avoidCollisions","align","side","sideOffset"],"mappings":";;;;;;;;;;;;;AAKO,IAAMA,UAAU,GAAGC,gBAAS,CAAAC,eAAA,KAAAA,eAAA,GAAAC,uCAAA,CAOlC,CAAA,kFAAA,CAAA,CAAA,CAAA,EAAA;AACM,IAAMC,WAAW,GAAGH,gBAAS,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,uCAAA,CAOnC,CAAA,kFAAA,CAAA,CAAA,CAAA,EAAA;AAEM,IAAMG,oBAAoB,GAAGC,uBAAM,CAACC,2BAAc,CAAC,CAAAC,gBAAA,KAAAA,gBAAA,GAAAN,uCAAA,2fAQ/CO,iBAAW,EACAC,WAAK,EAUVX,UAAU,EAGVI,WAAW,EAE3B;AAEDE,oBAAoB,CAACM,YAAY,GAAG;AAClCC,EAAAA,eAAe,EAAE,IAAI;AACrBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,IAAI,EAAE,QAAQ;AACdC,EAAAA,UAAU,EAAE,CAAA;AACd,CAAC;;;;;;"}

package/dist/primitive/src/Floating/Popover/{styles.js → styles.esm.js}

@@ -15,4 +15,4 @@ StyledPopoverContent.defaultProps = {
 };
 
 export { StyledPopoverContent, showFadeIn, showFadeOut };
-//# sourceMappingURL=styles.js.map
+//# sourceMappingURL=styles.esm.js.map

package/dist/primitive/src/Floating/Popover/styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../../../src/Floating/Popover/styles.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\nimport { PopoverContent } from '@radix-ui/react-popover';\n\nimport { bg100, contents000 } from '@remember-web/mixin';\n\nexport const showFadeIn = keyframes`\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n`;\nexport const showFadeOut = keyframes`\n    from {\n        opacity: 1;\n    }\n    to {\n        opacity: 0;\n    }\n`;\n\nexport const StyledPopoverContent = styled(PopoverContent)`\n  contain: paint;\n  width: fit-content;\n  margin: 0;\n  padding: 0;\n  border-radius: 4px;\n\n  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);\n  color: ${contents000};\n  background-color: ${bg100};\n  white-space: pre-line;\n\n  height: 100%;\n  will-change: box-shadow;\n\n  &:focus {\n    outline: none;\n  }\n  &[data-state='open'] {\n    animation: ${showFadeIn} 0.12s cubic-bezier(0.35, 0, 0.25, 1) both;\n  }\n  &:not([data-state='open']) {\n    animation: ${showFadeOut} 0.16s cubic-bezier(0.35, 0, 0.25, 1) both;\n  }\n`;\n\nStyledPopoverContent.defaultProps = {\n  avoidCollisions: true,\n  align: 'start',\n  side: 'bottom',\n  sideOffset: 4,\n};\n"],"names":["showFadeIn","keyframes","_templateObject","_taggedTemplateLiteral","showFadeOut","_templateObject2","StyledPopoverContent","styled","PopoverContent","_templateObject3","contents000","bg100","defaultProps","avoidCollisions","align","side","sideOffset"],"mappings":";;;;;;AAKO,IAAMA,UAAU,GAAGC,SAAS,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CAOlC,CAAA,kFAAA,CAAA,CAAA,CAAA,EAAA;AACM,IAAMC,WAAW,GAAGH,SAAS,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,sBAAA,CAOnC,CAAA,kFAAA,CAAA,CAAA,CAAA,EAAA;AAEM,IAAMG,oBAAoB,GAAGC,MAAM,CAACC,cAAc,CAAC,CAAAC,gBAAA,KAAAA,gBAAA,GAAAN,sBAAA,2fAQ/CO,WAAW,EACAC,KAAK,EAUVX,UAAU,EAGVI,WAAW,EAE3B;AAEDE,oBAAoB,CAACM,YAAY,GAAG;AAClCC,EAAAA,eAAe,EAAE,IAAI;AACrBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,IAAI,EAAE,QAAQ;AACdC,EAAAA,UAAU,EAAE,CAAA;AACd,CAAC;;;;"}

package/dist/primitive/src/Floating/Tooltip/{index.cjs → index.cjs.js}

@@ -5,11 +5,11 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var RadixTooltip = require('@radix-ui/react-tooltip');
 var react = require('react');
-var common = require('../../../../shared/utils/common.cjs');
+var common = require('../../../../shared/utils/common.cjs.js');
 var icon = require('@remember-web/icon');
 var mixin = require('@remember-web/mixin');
-var styles = require('./styles.cjs');
-var types = require('./types.cjs');
+var styles = require('./styles.cjs.js');
+var types = require('./types.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -133,4 +133,4 @@ function Tooltip(_ref) {
 }
 
 module.exports = Tooltip;
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { useState, type PropsWithChildren } from 'react';\n\nimport { isSSR } from '@remember-web/shared/utils/common';\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;AAkBb;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/primitive/src/Floating/Tooltip/{index.js → index.esm.js}

@@ -3,11 +3,11 @@ 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 '../../../../shared/utils/common.js';
+import { isSSR } from '../../../../shared/utils/common.esm.js';
 import { IconCloseS } from '@remember-web/icon';
 import { contents000, contents999 } from '@remember-web/mixin';
-import { TooltipTriggerWrapper, TooltipContent, CloseButton } from './styles.js';
-import { isStaticTypeProps, isLargeSizeProps } from './types.js';
+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"];
@@ -107,4 +107,4 @@ function Tooltip(_ref) {
 }
 
 export { Tooltip as default };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/Floating/Tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { useState, type PropsWithChildren } from 'react';\n\nimport { isSSR } from '@remember-web/shared/utils/common';\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;AAkBb;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/primitive/src/Floating/Tooltip/{styles.cjs → styles.cjs.js}

@@ -57,4 +57,4 @@ var CloseButton = styled__default.default.button(_templateObject5 || (_templateO
 exports.CloseButton = CloseButton;
 exports.TooltipContent = TooltipContent;
 exports.TooltipTriggerWrapper = TooltipTriggerWrapper;
-//# sourceMappingURL=styles.cjs.map
+//# sourceMappingURL=styles.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport styled, { css, keyframes } from 'styled-components';\n\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;AAcb;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;AASaE;AAQN;AAkBH;;;;;;;AAmBD;AAGUC;;;;"}

package/dist/primitive/src/Floating/Tooltip/{styles.js → styles.esm.js}

@@ -29,4 +29,4 @@ var TooltipContent = styled(RadixTooltip.Content)(_templateObject3 || (_template
 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.js.map
+//# sourceMappingURL=styles.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../../../src/Floating/Tooltip/styles.ts"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport styled, { css, keyframes } from 'styled-components';\n\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;AAcb;AAIEA;AACEC;AACAC;;AAEFC;AACEF;AACAC;AACF;AACF;AAEA;AASaE;AAQN;AAkBH;;;;;;;AAmBD;AAGUC;;"}

package/dist/primitive/src/Floating/Tooltip/{types.cjs → types.cjs.js}

@@ -9,4 +9,4 @@ var isLargeSizeProps = function isLargeSizeProps(props) {
 
 exports.isLargeSizeProps = isLargeSizeProps;
 exports.isStaticTypeProps = isStaticTypeProps;
-//# sourceMappingURL=types.cjs.map
+//# sourceMappingURL=types.cjs.js.map

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

@@ -0,0 +1 @@
+{"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/primitive/src/Floating/Tooltip/{types.js → types.esm.js}

@@ -6,4 +6,4 @@ var isLargeSizeProps = function isLargeSizeProps(props) {
 };
 
 export { isLargeSizeProps, isStaticTypeProps };
-//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.esm.js.map

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

@@ -0,0 +1 @@
+{"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/primitive/src/Inputs/Select/DesignedSelect/{const.cjs → const.cjs.js}

@@ -5,4 +5,4 @@ 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.map
+//# sourceMappingURL=const.cjs.js.map

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

@@ -0,0 +1 @@
+{"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/primitive/src/Inputs/Select/DesignedSelect/{const.js → const.esm.js}

@@ -2,4 +2,4 @@ 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.js.map
+//# sourceMappingURL=const.esm.js.map

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

@@ -0,0 +1 @@
+{"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/primitive/src/Inputs/Select/DesignedSelect/{index.cjs → index.cjs.js}

@@ -5,13 +5,13 @@ 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 utils = require('../utils.cjs');
-var useMouseEventAway = require('../../../hooks/useMouseEventAway.cjs');
+var utils = require('../utils.cjs.js');
+var useMouseEventAway = require('../../../hooks/useMouseEventAway.cjs.js');
 var icon = require('@remember-web/icon');
-var index = require('../Option/index.cjs');
-var styles = require('../styles.cjs');
-var _const = require('./const.cjs');
-var styles$1 = require('./styles.cjs');
+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 }; }
@@ -246,4 +246,4 @@ var DesignedSelect = function DesignedSelect(_ref, ref) {
 var DesignedSelect$1 = /*#__PURE__*/react.forwardRef(DesignedSelect);
 
 module.exports = DesignedSelect$1;
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../../../src/Inputs/Select/DesignedSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport type { KeyboardEvent, ReactNode, Ref, RefCallback } from 'react';\nimport {\n  Children,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useRef,\n  useState,\n  useId,\n} from 'react';\n\nimport { focusSibling } from '../utils';\nimport useMouseEventAway from '@/hooks/useMouseEventAway';\nimport { IconArrow2Down, IconArrow2Up } from '@remember-web/icon';\n\nimport { OptionHolder } from '../Option';\nimport { SelectContainer } from '../styles';\nimport type { OptionElementType, SelectValue } from '../types';\nimport { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const';\nimport {\n  SelectDownIcon,\n  SelectOption,\n  SelectOptionWrapper,\n  StyledSelect,\n} from './styles';\nimport type { DesignedSelectInternalProps, ExpandedType } from './types';\n\nconst DesignedSelect = <Value extends SelectValue>(\n  {\n    children,\n    value,\n    maxHeight = DEFAULT_MAX_HEIGHT_PX,\n    placeholder,\n    onChange,\n    width,\n    extendDirection,\n    disabled,\n    ...props\n  }: DesignedSelectInternalProps<Value>,\n  ref?: Ref<HTMLDivElement>\n) => {\n  const id = useId();\n  const [expandedDirection, _setExpandedDirection] =\n    useState<ExpandedType>('none');\n  const selectContainerRef = useRef<HTMLDivElement | null>(null);\n  const selectListRef = useRef<HTMLUListElement | null>(null);\n  const clickAwayRef = useMouseEventAway<HTMLDivElement, 'pointerdown'>(\n    'pointerdown',\n    () => {\n      setExpandedDirection('none');\n    }\n  );\n\n  const setExpandedDirection = useCallback(\n    (...args: Parameters<typeof _setExpandedDirection>) => {\n      if (disabled) {\n        return;\n      }\n      _setExpandedDirection(...args);\n    },\n    [disabled]\n  );\n\n  const options = Children.toArray(children)\n    .filter(\n      (child): child is OptionElementType<Value> =>\n        isValidElement(child) && child.type === OptionHolder\n    )\n    .map(\n      ({\n        props: { children: _children, value: _value, disabled: _disabled },\n      }) => ({\n        label: _children,\n        value: _value,\n        disabled: _disabled,\n      })\n    );\n\n  const selectedOption = options.find((option) => value === option.value);\n\n  const isExpanded = expandedDirection !== 'none';\n\n  const onSelectOption = (_value: Value, _label: ReactNode) => {\n    onChange?.(_value, _label);\n    setExpandedDirection('none');\n    selectContainerRef.current?.focus();\n  };\n\n  // 리스트가 하단으로 나와야하는지 상단으로 나와야하는지 계산하는 함수\n  // 현재 Viewport기준으로 Select컴포넌트가 아래로 확장되었을 때 뷰포트 내에 리스트박스가 노출될 수 있다면 하단으로 확장, 아니라면 상단으로 확장\n  // direction이 props로 전달되었다면 해당 방향으로 확장\n  const expandSelectListAtComputedPosition = () => {\n    if (extendDirection) {\n      setExpandedDirection(extendDirection);\n      return;\n    }\n\n    const selectContainerRect =\n      selectContainerRef.current?.getBoundingClientRect();\n\n    if (!selectContainerRect) {\n      setExpandedDirection('below');\n      return;\n    }\n\n    // SelectOptionWrapper가 마운트되기 전에 계산해야 하기 때문에 clientHeight를 사용하지 못하고 직접 계산\n    const currentSelectHeight = Math.min(\n      maxHeight,\n      options.length * OPTION_ITEM_HEIGHT_PX\n    );\n    const bottomGap = document.body.clientHeight - selectContainerRect.bottom;\n\n    setExpandedDirection(currentSelectHeight > bottomGap ? 'above' : 'below');\n  };\n\n  const optionItemRef = useCallback<RefCallback<HTMLLIElement>>(\n    (ele) => {\n      if (!ele) {\n        return;\n      }\n\n      // 선택한 요소가 없을때는 첫번째 요소에 focus\n      if (!value && !ele.previousSibling) {\n        setTimeout(() => ele.focus());\n        return;\n      }\n\n      // 선택한 요소가 있다면 해당 요소에 focus\n      const optionValue = ele.dataset.optionValue || null;\n      if (optionValue === value) {\n        setTimeout(() => ele.focus());\n      }\n    },\n    [value]\n  );\n\n  const keyDownHandler = (e: KeyboardEvent) => {\n    const focusedElement = document.activeElement;\n\n    if (!focusedElement || !(focusedElement instanceof HTMLElement)) {\n      return;\n    }\n\n    switch (e.key) {\n      case 'Tab':\n        if (isExpanded) {\n          e.preventDefault();\n        }\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        if (!isExpanded) {\n          expandSelectListAtComputedPosition();\n          break;\n        }\n        focusSibling(focusedElement, 'previous');\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!isExpanded) {\n          expandSelectListAtComputedPosition();\n          break;\n        }\n        focusSibling(focusedElement, 'next');\n        break;\n      case 'Escape':\n        e.preventDefault();\n        setExpandedDirection('none');\n        selectContainerRef.current?.focus();\n        break;\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n\n        if (e.target === e.currentTarget) {\n          if (isExpanded) {\n            setExpandedDirection('none');\n            return;\n          }\n          expandSelectListAtComputedPosition();\n        }\n\n        if (\n          focusedElement?.matches('[data-option-value]') &&\n          focusedElement instanceof HTMLLIElement &&\n          focusedElement.dataset.optionValue\n        ) {\n          onSelectOption(\n            focusedElement.dataset.optionValue as Value,\n            focusedElement.innerText\n          );\n        }\n        break;\n      default:\n        break;\n    }\n  };\n\n  return (\n    <SelectContainer\n      ref={(el) => {\n        if (!el) {\n          return;\n        }\n        selectContainerRef.current = el;\n        clickAwayRef.current = el;\n      }}\n      $width={width}\n      tabIndex={disabled ? undefined : 0}\n      aria-expanded={isExpanded}\n      aria-haspopup=\"listbox\"\n      aria-disabled={disabled}\n      onKeyDown={keyDownHandler}\n      {...props}\n    >\n      <StyledSelect\n        ref={ref}\n        expandedDirection={expandedDirection}\n        isPlaceholder={!selectedOption && !!placeholder}\n        onPointerDown={(e) => {\n          if (isExpanded) {\n            setExpandedDirection('none');\n            return;\n          }\n\n          e.stopPropagation();\n\n          expandSelectListAtComputedPosition();\n        }}\n      >\n        {selectedOption?.label || placeholder || 'ㅤ'}\n      </StyledSelect>\n      <SelectDownIcon>\n        {isExpanded ? (\n          <IconArrow2Up size=\"small\" />\n        ) : (\n          <IconArrow2Down size=\"small\" />\n        )}\n      </SelectDownIcon>\n      {isExpanded && (\n        <SelectOptionWrapper\n          role=\"listbox\"\n          aria-activedescendant={\n            value != null ? `${id}-select-option-${value}` : undefined\n          }\n          ref={selectListRef}\n          expandedDirection={expandedDirection}\n          maxHeight={maxHeight}\n        >\n          {options.map(({ value: optionValue, label, disabled: _disabled }) => (\n            <SelectOption\n              id={`${id}-select-option-${optionValue}`}\n              role=\"option\"\n              key={optionValue}\n              tabIndex={_disabled ? undefined : 0}\n              aria-selected={optionValue === value}\n              aria-disabled={_disabled}\n              ref={optionItemRef}\n              isSelected={optionValue === value}\n              data-option-value={optionValue}\n              // onMouseEnter를 사용하게 되면 키보드로 스크롤 할 때도 focus가 이동하게 되기 때문에 onMouseMove를 사용\n              onMouseMove={(e) => {\n                if (e.currentTarget === document.activeElement) {\n                  return;\n                }\n                e.currentTarget.focus({\n                  preventScroll: true,\n                });\n              }}\n              onFocus={() => {\n                selectListRef.current?.setAttribute(\n                  'aria-activedescendant',\n                  `${id}-select-option-${optionValue}`\n                );\n              }}\n              onClick={() => {\n                if (_disabled) {\n                  return;\n                }\n\n                onSelectOption(optionValue, label);\n              }}\n            >\n              {label}\n            </SelectOption>\n          ))}\n        </SelectOptionWrapper>\n      )}\n    </SelectContainer>\n  );\n};\n\nexport default forwardRef(DesignedSelect);\n"],"names":["maxHeight","props","expandedDirection","_setExpandedDirection","label","value","disabled","setTimeout","expandSelectListAtComputedPosition","focusSibling","ref","$width","tabIndex","onKeyDown","isPlaceholder","onPointerDown","children","size","role","onMouseMove","e","preventScroll","onSelectOption"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AA6Bb;AAaK;;;AATDA;;;;;;AAMGC;AAIL;AACA;;AAAOC;AAAmBC;AAE1B;AACA;AACA;;AAIE;AAGF;AAEI;AACE;AACF;AACAA;AACF;AAIF;;AAG0D;AAGtD;;;;;AAGEC;AACAC;AACAC;;AACD;AAGL;AAA2C;;AAE3C;;AAE6D;;;AAG3D;;;AAGF;AACA;AACA;AACA;AAAiD;AAC/C;;AAEE;AACF;AAEA;;;AAKE;AACF;;AAEA;AACA;;;;AASF;;AAGM;AACF;;AAEA;AACA;AACEC;AAAW;;AACX;AACF;;AAEA;;;AAGEA;AAAW;;AACb;AACF;AAIF;AAA6C;AAC3C;;AAGE;AACF;;AAGE;AACE;;AAEA;AACA;AACF;;;AAGIC;AACA;AACF;AACAC;AACA;AACF;;;AAGID;AACA;AACF;AACAC;AACA;AACF;;;AAGE;AACA;AACF;AACA;;AAGE;AACE;;AAEE;AACF;AACAD;AACF;;;AAWA;AACA;AAGJ;;AAGF;AAEIE;;AAEI;AACF;;;;AAIFC;AACAC;AACA;AACA;AACA;AACAC;AAA0B;;AAIxBH;AACAR;AACAY;AACAC;AACE;;AAEE;AACF;;AAIAP;;;AAG0C;AAE/BQ;AAEGC;AAAY;AAEVA;;AACjB;AAICC;AACA;AAGAR;AACAR;AACAF;AAAqBgB;AAER;;;;;AAGTE;AAEAN;;AAEA;AACAF;;;AAGA;AAAA;AACAS;AACE;AACE;AACF;AACAC;AACEC;AACF;;;AAEa;;;;AAOb;AACE;AACF;AAEAC;;AACAN;AAEI;;AAER;AAEL;AAGP;AAEA;;"}

package/dist/primitive/src/Inputs/Select/DesignedSelect/{index.js → index.esm.js}

@@ -3,13 +3,13 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useId, useState, useRef, useCallback, Children, isValidElement } from 'react';
-import { focusSibling } from '../utils.js';
-import useMouseEventAway from '../../../hooks/useMouseEventAway.js';
+import { focusSibling } from '../utils.esm.js';
+import useMouseEventAway from '../../../hooks/useMouseEventAway.esm.js';
 import { IconArrow2Up, IconArrow2Down } from '@remember-web/icon';
-import { OptionHolder } from '../Option/index.js';
-import { SelectContainer } from '../styles.js';
-import { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const.js';
-import { StyledSelect, SelectDownIcon, SelectOptionWrapper, SelectOption } from './styles.js';
+import { OptionHolder } from '../Option/index.esm.js';
+import { SelectContainer } from '../styles.esm.js';
+import { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const.esm.js';
+import { StyledSelect, SelectDownIcon, SelectOptionWrapper, SelectOption } from './styles.esm.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["children", "value", "maxHeight", "placeholder", "onChange", "width", "extendDirection", "disabled"];
@@ -238,4 +238,4 @@ var DesignedSelect = function DesignedSelect(_ref, ref) {
 var DesignedSelect$1 = /*#__PURE__*/forwardRef(DesignedSelect);
 
 export { DesignedSelect$1 as default };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.esm.js.map

package/dist/primitive/src/Inputs/Select/DesignedSelect/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../../src/Inputs/Select/DesignedSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport type { KeyboardEvent, ReactNode, Ref, RefCallback } from 'react';\nimport {\n  Children,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useRef,\n  useState,\n  useId,\n} from 'react';\n\nimport { focusSibling } from '../utils';\nimport useMouseEventAway from '@/hooks/useMouseEventAway';\nimport { IconArrow2Down, IconArrow2Up } from '@remember-web/icon';\n\nimport { OptionHolder } from '../Option';\nimport { SelectContainer } from '../styles';\nimport type { OptionElementType, SelectValue } from '../types';\nimport { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const';\nimport {\n  SelectDownIcon,\n  SelectOption,\n  SelectOptionWrapper,\n  StyledSelect,\n} from './styles';\nimport type { DesignedSelectInternalProps, ExpandedType } from './types';\n\nconst DesignedSelect = <Value extends SelectValue>(\n  {\n    children,\n    value,\n    maxHeight = DEFAULT_MAX_HEIGHT_PX,\n    placeholder,\n    onChange,\n    width,\n    extendDirection,\n    disabled,\n    ...props\n  }: DesignedSelectInternalProps<Value>,\n  ref?: Ref<HTMLDivElement>\n) => {\n  const id = useId();\n  const [expandedDirection, _setExpandedDirection] =\n    useState<ExpandedType>('none');\n  const selectContainerRef = useRef<HTMLDivElement | null>(null);\n  const selectListRef = useRef<HTMLUListElement | null>(null);\n  const clickAwayRef = useMouseEventAway<HTMLDivElement, 'pointerdown'>(\n    'pointerdown',\n    () => {\n      setExpandedDirection('none');\n    }\n  );\n\n  const setExpandedDirection = useCallback(\n    (...args: Parameters<typeof _setExpandedDirection>) => {\n      if (disabled) {\n        return;\n      }\n      _setExpandedDirection(...args);\n    },\n    [disabled]\n  );\n\n  const options = Children.toArray(children)\n    .filter(\n      (child): child is OptionElementType<Value> =>\n        isValidElement(child) && child.type === OptionHolder\n    )\n    .map(\n      ({\n        props: { children: _children, value: _value, disabled: _disabled },\n      }) => ({\n        label: _children,\n        value: _value,\n        disabled: _disabled,\n      })\n    );\n\n  const selectedOption = options.find((option) => value === option.value);\n\n  const isExpanded = expandedDirection !== 'none';\n\n  const onSelectOption = (_value: Value, _label: ReactNode) => {\n    onChange?.(_value, _label);\n    setExpandedDirection('none');\n    selectContainerRef.current?.focus();\n  };\n\n  // 리스트가 하단으로 나와야하는지 상단으로 나와야하는지 계산하는 함수\n  // 현재 Viewport기준으로 Select컴포넌트가 아래로 확장되었을 때 뷰포트 내에 리스트박스가 노출될 수 있다면 하단으로 확장, 아니라면 상단으로 확장\n  // direction이 props로 전달되었다면 해당 방향으로 확장\n  const expandSelectListAtComputedPosition = () => {\n    if (extendDirection) {\n      setExpandedDirection(extendDirection);\n      return;\n    }\n\n    const selectContainerRect =\n      selectContainerRef.current?.getBoundingClientRect();\n\n    if (!selectContainerRect) {\n      setExpandedDirection('below');\n      return;\n    }\n\n    // SelectOptionWrapper가 마운트되기 전에 계산해야 하기 때문에 clientHeight를 사용하지 못하고 직접 계산\n    const currentSelectHeight = Math.min(\n      maxHeight,\n      options.length * OPTION_ITEM_HEIGHT_PX\n    );\n    const bottomGap = document.body.clientHeight - selectContainerRect.bottom;\n\n    setExpandedDirection(currentSelectHeight > bottomGap ? 'above' : 'below');\n  };\n\n  const optionItemRef = useCallback<RefCallback<HTMLLIElement>>(\n    (ele) => {\n      if (!ele) {\n        return;\n      }\n\n      // 선택한 요소가 없을때는 첫번째 요소에 focus\n      if (!value && !ele.previousSibling) {\n        setTimeout(() => ele.focus());\n        return;\n      }\n\n      // 선택한 요소가 있다면 해당 요소에 focus\n      const optionValue = ele.dataset.optionValue || null;\n      if (optionValue === value) {\n        setTimeout(() => ele.focus());\n      }\n    },\n    [value]\n  );\n\n  const keyDownHandler = (e: KeyboardEvent) => {\n    const focusedElement = document.activeElement;\n\n    if (!focusedElement || !(focusedElement instanceof HTMLElement)) {\n      return;\n    }\n\n    switch (e.key) {\n      case 'Tab':\n        if (isExpanded) {\n          e.preventDefault();\n        }\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        if (!isExpanded) {\n          expandSelectListAtComputedPosition();\n          break;\n        }\n        focusSibling(focusedElement, 'previous');\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!isExpanded) {\n          expandSelectListAtComputedPosition();\n          break;\n        }\n        focusSibling(focusedElement, 'next');\n        break;\n      case 'Escape':\n        e.preventDefault();\n        setExpandedDirection('none');\n        selectContainerRef.current?.focus();\n        break;\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n\n        if (e.target === e.currentTarget) {\n          if (isExpanded) {\n            setExpandedDirection('none');\n            return;\n          }\n          expandSelectListAtComputedPosition();\n        }\n\n        if (\n          focusedElement?.matches('[data-option-value]') &&\n          focusedElement instanceof HTMLLIElement &&\n          focusedElement.dataset.optionValue\n        ) {\n          onSelectOption(\n            focusedElement.dataset.optionValue as Value,\n            focusedElement.innerText\n          );\n        }\n        break;\n      default:\n        break;\n    }\n  };\n\n  return (\n    <SelectContainer\n      ref={(el) => {\n        if (!el) {\n          return;\n        }\n        selectContainerRef.current = el;\n        clickAwayRef.current = el;\n      }}\n      $width={width}\n      tabIndex={disabled ? undefined : 0}\n      aria-expanded={isExpanded}\n      aria-haspopup=\"listbox\"\n      aria-disabled={disabled}\n      onKeyDown={keyDownHandler}\n      {...props}\n    >\n      <StyledSelect\n        ref={ref}\n        expandedDirection={expandedDirection}\n        isPlaceholder={!selectedOption && !!placeholder}\n        onPointerDown={(e) => {\n          if (isExpanded) {\n            setExpandedDirection('none');\n            return;\n          }\n\n          e.stopPropagation();\n\n          expandSelectListAtComputedPosition();\n        }}\n      >\n        {selectedOption?.label || placeholder || 'ㅤ'}\n      </StyledSelect>\n      <SelectDownIcon>\n        {isExpanded ? (\n          <IconArrow2Up size=\"small\" />\n        ) : (\n          <IconArrow2Down size=\"small\" />\n        )}\n      </SelectDownIcon>\n      {isExpanded && (\n        <SelectOptionWrapper\n          role=\"listbox\"\n          aria-activedescendant={\n            value != null ? `${id}-select-option-${value}` : undefined\n          }\n          ref={selectListRef}\n          expandedDirection={expandedDirection}\n          maxHeight={maxHeight}\n        >\n          {options.map(({ value: optionValue, label, disabled: _disabled }) => (\n            <SelectOption\n              id={`${id}-select-option-${optionValue}`}\n              role=\"option\"\n              key={optionValue}\n              tabIndex={_disabled ? undefined : 0}\n              aria-selected={optionValue === value}\n              aria-disabled={_disabled}\n              ref={optionItemRef}\n              isSelected={optionValue === value}\n              data-option-value={optionValue}\n              // onMouseEnter를 사용하게 되면 키보드로 스크롤 할 때도 focus가 이동하게 되기 때문에 onMouseMove를 사용\n              onMouseMove={(e) => {\n                if (e.currentTarget === document.activeElement) {\n                  return;\n                }\n                e.currentTarget.focus({\n                  preventScroll: true,\n                });\n              }}\n              onFocus={() => {\n                selectListRef.current?.setAttribute(\n                  'aria-activedescendant',\n                  `${id}-select-option-${optionValue}`\n                );\n              }}\n              onClick={() => {\n                if (_disabled) {\n                  return;\n                }\n\n                onSelectOption(optionValue, label);\n              }}\n            >\n              {label}\n            </SelectOption>\n          ))}\n        </SelectOptionWrapper>\n      )}\n    </SelectContainer>\n  );\n};\n\nexport default forwardRef(DesignedSelect);\n"],"names":["maxHeight","props","expandedDirection","_setExpandedDirection","label","value","disabled","setTimeout","expandSelectListAtComputedPosition","focusSibling","ref","$width","tabIndex","onKeyDown","isPlaceholder","onPointerDown","children","size","role","onMouseMove","e","preventScroll","onSelectOption"],"mappings":";;;;;;;;;;;;;;AAAa;AAAA;AAAA;AA6Bb;AAaK;;;AATDA;;;;;;AAMGC;AAIL;AACA;;AAAOC;AAAmBC;AAE1B;AACA;AACA;;AAIE;AAGF;AAEI;AACE;AACF;AACAA;AACF;AAIF;;AAG0D;AAGtD;;;;;AAGEC;AACAC;AACAC;;AACD;AAGL;AAA2C;;AAE3C;;AAE6D;;;AAG3D;;;AAGF;AACA;AACA;AACA;AAAiD;AAC/C;;AAEE;AACF;AAEA;;;AAKE;AACF;;AAEA;AACA;;;;AASF;;AAGM;AACF;;AAEA;AACA;AACEC;AAAW;;AACX;AACF;;AAEA;;;AAGEA;AAAW;;AACb;AACF;AAIF;AAA6C;AAC3C;;AAGE;AACF;;AAGE;AACE;;AAEA;AACA;AACF;;;AAGIC;AACA;AACF;AACAC;AACA;AACF;;;AAGID;AACA;AACF;AACAC;AACA;AACF;;;AAGE;AACA;AACF;AACA;;AAGE;AACE;;AAEE;AACF;AACAD;AACF;;;AAWA;AACA;AAGJ;;AAGF;AAEIE;;AAEI;AACF;;;;AAIFC;AACAC;AACA;AACA;AACA;AACAC;AAA0B;;AAIxBH;AACAR;AACAY;AACAC;AACE;;AAEE;AACF;;AAIAP;;;AAG0C;AAE/BQ;AAEGC;AAAY;AAEVA;;AACjB;AAICC;AACA;AAGAR;AACAR;AACAF;AAAqBgB;AAER;;;;;AAGTE;AAEAN;;AAEA;AACAF;;;AAGA;AAAA;AACAS;AACE;AACE;AACF;AACAC;AACEC;AACF;;;AAEa;;;;AAOb;AACE;AACF;AAEAC;;AACAN;AAEI;;AAER;AAEL;AAGP;AAEA;;"}

package/dist/primitive/src/Inputs/Select/DesignedSelect/{styles.cjs → styles.cjs.js}

@@ -4,7 +4,7 @@
 var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
 var mixin = require('@remember-web/mixin');
-var styles = require('../styles.cjs');
+var styles = require('../styles.cjs.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -46,4 +46,4 @@ exports.SelectDownIcon = SelectDownIcon;
 exports.SelectOption = SelectOption;
 exports.SelectOptionWrapper = SelectOptionWrapper;
 exports.StyledSelect = StyledSelect;
-//# sourceMappingURL=styles.cjs.map
+//# sourceMappingURL=styles.cjs.js.map

package/dist/primitive/src/Inputs/Select/DesignedSelect/styles.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.cjs.js","sources":["../../../../../../src/Inputs/Select/DesignedSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport {\n  bg100,\n  bg200,\n  bg300,\n  contents000,\n  contents200,\n  contents300,\n  ellipsis,\n} from '@remember-web/mixin';\n\nimport { SelectContainer } from '../styles';\nimport type { ExpandedType } from './types';\n\nexport const StyledSelect = styled.div<{\n  expandedDirection?: ExpandedType;\n  isPlaceholder?: boolean;\n}>`\n  ${ellipsis()}\n  border: 1px solid ${contents300};\n  ${({ expandedDirection }) =>\n    ({\n      none: css`\n        border-radius: 4px;\n      `,\n      above: css`\n        border-radius: 0 0 4px 4px;\n        border-top-color: transparent;\n      `,\n      below: css`\n        border-radius: 4px 4px 0 0;\n        border-bottom-color: transparent;\n      `,\n    }[expandedDirection ?? 'none'])};\n\n  padding: 10px 36px 10px 12px;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ${({ isPlaceholder }) =>\n    isPlaceholder &&\n    css`\n      color: ${contents200};\n    `}\n\n  ${SelectContainer}:focus-within & {\n    outline: none;\n    border-color: ${contents000};\n  }\n  ${SelectContainer}:not([aria-disabled='true']) & {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ${bg200};\n      }\n    }\n\n    &:active {\n      background-color: ${bg300};\n    }\n  }\n`;\n\nexport const SelectDownIcon = styled.div`\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  & > svg {\n    display: block;\n  }\n\n  pointer-events: none;\n`;\n\nexport const SelectOptionWrapper = styled.ul<{\n  expandedDirection?: ExpandedType;\n  maxHeight?: number | string;\n}>`\n  all: unset;\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  border: 1px solid ${contents300};\n  background-color: ${bg100};\n  overflow-y: scroll;\n  overscroll-behavior: contain;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ${({ maxHeight }) => {\n    if (!maxHeight) {\n      return null;\n    }\n\n    if (typeof maxHeight === 'number') {\n      return css`\n        max-height: ${maxHeight}px;\n      `;\n    }\n\n    return css`\n      max-height: ${maxHeight};\n    `;\n  }};\n\n  ${({ expandedDirection }) =>\n    expandedDirection === 'below'\n      ? css`\n          top: calc(100% - 1px);\n          border-top: none;\n          border-radius: 0 0 4px 4px;\n        `\n      : css`\n          bottom: calc(100% - 1px);\n          border-bottom: none;\n          border-radius: 4px 4px 0 0;\n        `}\n\n  ${SelectContainer}:focus &, ${SelectContainer}:focus-within & {\n    outline: none;\n    border-color: ${contents000};\n  }\n`;\n\nexport const SelectOption = styled.li<{ isSelected?: boolean }>`\n  ${ellipsis()}\n  padding: 10px 12px;\n  color: ${contents000};\n\n  &[aria-disabled='true'] {\n    color: ${contents300};\n  }\n\n  &:focus {\n    background-color: ${bg200};\n    outline: none;\n  }\n\n  ${({ isSelected }) =>\n    isSelected &&\n    css`\n      background-color: ${bg200};\n    `}\n`;\n"],"names":["below","SelectDownIcon"],"mappings":";;;;;;;;;;;;;AAAa;AAgBN;AAMH;;;;AASEA;;AAI4B;AAK9B;;AAIC;AAmBQC;;AA4BU;;AAEjB;AACF;AAEA;;AAIA;;AAKF;AAEE;AAAoB;AAWf;AAQF;AAcH;;AAIC;;;;;"}

package/dist/primitive/src/Inputs/Select/DesignedSelect/{styles.js → styles.esm.js}

@@ -2,7 +2,7 @@
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import styled, { css } from 'styled-components';
 import { ellipsis, contents300, contents200, contents000, bg200, bg300, bg100 } from '@remember-web/mixin';
-import { SelectContainer } from '../styles.js';
+import { SelectContainer } from '../styles.esm.js';
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 var StyledSelect = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  border: 1px solid ", ";\n  ", ";\n\n  padding: 10px 36px 10px 12px;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ", "\n\n  ", ":focus-within & {\n    outline: none;\n    border-color: ", ";\n  }\n  ", ":not([aria-disabled='true']) & {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n  }\n"])), ellipsis(), contents300, function (_ref) {
@@ -36,4 +36,4 @@ var SelectOption = styled.li(_templateObject12 || (_templateObject12 = _taggedTe
 });
 
 export { SelectDownIcon, SelectOption, SelectOptionWrapper, StyledSelect };
-//# sourceMappingURL=styles.js.map
+//# sourceMappingURL=styles.esm.js.map

package/dist/primitive/src/Inputs/Select/DesignedSelect/styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../../../../src/Inputs/Select/DesignedSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport {\n  bg100,\n  bg200,\n  bg300,\n  contents000,\n  contents200,\n  contents300,\n  ellipsis,\n} from '@remember-web/mixin';\n\nimport { SelectContainer } from '../styles';\nimport type { ExpandedType } from './types';\n\nexport const StyledSelect = styled.div<{\n  expandedDirection?: ExpandedType;\n  isPlaceholder?: boolean;\n}>`\n  ${ellipsis()}\n  border: 1px solid ${contents300};\n  ${({ expandedDirection }) =>\n    ({\n      none: css`\n        border-radius: 4px;\n      `,\n      above: css`\n        border-radius: 0 0 4px 4px;\n        border-top-color: transparent;\n      `,\n      below: css`\n        border-radius: 4px 4px 0 0;\n        border-bottom-color: transparent;\n      `,\n    }[expandedDirection ?? 'none'])};\n\n  padding: 10px 36px 10px 12px;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ${({ isPlaceholder }) =>\n    isPlaceholder &&\n    css`\n      color: ${contents200};\n    `}\n\n  ${SelectContainer}:focus-within & {\n    outline: none;\n    border-color: ${contents000};\n  }\n  ${SelectContainer}:not([aria-disabled='true']) & {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ${bg200};\n      }\n    }\n\n    &:active {\n      background-color: ${bg300};\n    }\n  }\n`;\n\nexport const SelectDownIcon = styled.div`\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  & > svg {\n    display: block;\n  }\n\n  pointer-events: none;\n`;\n\nexport const SelectOptionWrapper = styled.ul<{\n  expandedDirection?: ExpandedType;\n  maxHeight?: number | string;\n}>`\n  all: unset;\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  border: 1px solid ${contents300};\n  background-color: ${bg100};\n  overflow-y: scroll;\n  overscroll-behavior: contain;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ${({ maxHeight }) => {\n    if (!maxHeight) {\n      return null;\n    }\n\n    if (typeof maxHeight === 'number') {\n      return css`\n        max-height: ${maxHeight}px;\n      `;\n    }\n\n    return css`\n      max-height: ${maxHeight};\n    `;\n  }};\n\n  ${({ expandedDirection }) =>\n    expandedDirection === 'below'\n      ? css`\n          top: calc(100% - 1px);\n          border-top: none;\n          border-radius: 0 0 4px 4px;\n        `\n      : css`\n          bottom: calc(100% - 1px);\n          border-bottom: none;\n          border-radius: 4px 4px 0 0;\n        `}\n\n  ${SelectContainer}:focus &, ${SelectContainer}:focus-within & {\n    outline: none;\n    border-color: ${contents000};\n  }\n`;\n\nexport const SelectOption = styled.li<{ isSelected?: boolean }>`\n  ${ellipsis()}\n  padding: 10px 12px;\n  color: ${contents000};\n\n  &[aria-disabled='true'] {\n    color: ${contents300};\n  }\n\n  &:focus {\n    background-color: ${bg200};\n    outline: none;\n  }\n\n  ${({ isSelected }) =>\n    isSelected &&\n    css`\n      background-color: ${bg200};\n    `}\n`;\n"],"names":["below","SelectDownIcon"],"mappings":";;;;;;AAAa;AAgBN;AAMH;;;;AASEA;;AAI4B;AAK9B;;AAIC;AAmBQC;;AA4BU;;AAEjB;AACF;AAEA;;AAIA;;AAKF;AAEE;AAAoB;AAWf;AAQF;AAcH;;AAIC;;"}

package/dist/primitive/src/Inputs/Select/NativeSelect/Option/{index.cjs → index.cjs.js}

@@ -15,4 +15,4 @@ var NativeOption = function NativeOption(_ref) {
 };
 
 exports.NativeOption = NativeOption;
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.js.map

package/dist/primitive/src/Inputs/Select/NativeSelect/Option/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../../../../src/Inputs/Select/NativeSelect/Option/index.tsx"],"sourcesContent":["'use client';\n\nimport type { OptionProps, SelectValue } from '../../types';\n\nexport const NativeOption = <Value extends SelectValue = string>({\n  children,\n  disabled,\n  value,\n}: OptionProps<Value>) => (\n  <option value={value} disabled={disabled}>\n    {String(children)}\n  </option>\n);\n"],"names":["value","disabled"],"mappings":";;;;;;AAIyB;;;AAGlB;AAEGA;AAAcC;;AACH;AACV;;"}

package/dist/primitive/src/Inputs/Select/NativeSelect/Option/{index.js → index.esm.js}

@@ -13,4 +13,4 @@ var NativeOption = function NativeOption(_ref) {
 };
 
 export { NativeOption };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.esm.js.map

package/dist/primitive/src/Inputs/Select/NativeSelect/Option/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../../../src/Inputs/Select/NativeSelect/Option/index.tsx"],"sourcesContent":["'use client';\n\nimport type { OptionProps, SelectValue } from '../../types';\n\nexport const NativeOption = <Value extends SelectValue = string>({\n  children,\n  disabled,\n  value,\n}: OptionProps<Value>) => (\n  <option value={value} disabled={disabled}>\n    {String(children)}\n  </option>\n);\n"],"names":["value","disabled"],"mappings":";;;;AAIyB;;;AAGlB;AAEGA;AAAcC;;AACH;AACV;;"}

package/dist/primitive/src/Inputs/Select/NativeSelect/{index.cjs → index.cjs.js}

@@ -5,8 +5,8 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var react = require('react');
 var icon = require('@remember-web/icon');
-var styles$1 = require('./styles.cjs');
-var styles = require('../styles.cjs');
+var styles$1 = require('./styles.cjs.js');
+var styles = require('../styles.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -50,4 +50,4 @@ var NativeSelect = function NativeSelect(_ref, ref) {
 var NativeSelect$1 = /*#__PURE__*/react.forwardRef(NativeSelect);
 
 module.exports = NativeSelect$1;
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.js.map

package/dist/primitive/src/Inputs/Select/NativeSelect/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { IconArrow2Down } from '@remember-web/icon';\n\nimport { SelectDownIcon, StyledSelect } from './styles';\nimport type { NativeSelectInternalProps } from './types';\nimport { SelectContainer } from '../styles';\n\nconst NativeSelect: ForwardRefRenderFunction<\n  HTMLSelectElement,\n  NativeSelectInternalProps\n> = (\n  { children, className, width, placeholder, value, disabled, ...props },\n  ref\n) => {\n  const showPlaceholder = !value && !!placeholder;\n\n  return (\n    <SelectContainer aria-disabled={disabled} className={className}>\n      <StyledSelect\n        {...props}\n        value={value}\n        $width={width}\n        ref={ref}\n        isPlaceholder={showPlaceholder}\n        disabled={disabled}\n      >\n        {!value && (\n          <option value=\"\" selected>\n            {placeholder || 'ㅤ'}\n          </option>\n        )}\n        {children}\n      </StyledSelect>\n      <SelectDownIcon>\n        <IconArrow2Down size=\"small\" />\n      </SelectDownIcon>\n    </SelectContainer>\n  );\n};\n\nexport default forwardRef(NativeSelect);\n"],"names":["props","className","value","$width","ref","isPlaceholder","disabled","children","size"],"mappings":";;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAWb;AAMK;;;;;;AAF4DA;AAG/D;;AAGmB;AAAyBC;;AAGtCC;AACAC;AACAC;AACAC;AACAC;AAAmBC;AAGTL;;;;AAID;;AAGOM;;AAAe;AAChB;AAGvB;AAEA;;"}

package/dist/primitive/src/Inputs/Select/NativeSelect/{index.js → index.esm.js}

@@ -3,8 +3,8 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import { IconArrow2Down } from '@remember-web/icon';
-import { StyledSelect, SelectDownIcon } from './styles.js';
-import { SelectContainer } from '../styles.js';
+import { StyledSelect, SelectDownIcon } from './styles.esm.js';
+import { SelectContainer } from '../styles.esm.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["children", "className", "width", "placeholder", "value", "disabled"];
@@ -43,4 +43,4 @@ var NativeSelect = function NativeSelect(_ref, ref) {
 var NativeSelect$1 = /*#__PURE__*/forwardRef(NativeSelect);
 
 export { NativeSelect$1 as default };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.esm.js.map

package/dist/primitive/src/Inputs/Select/NativeSelect/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { IconArrow2Down } from '@remember-web/icon';\n\nimport { SelectDownIcon, StyledSelect } from './styles';\nimport type { NativeSelectInternalProps } from './types';\nimport { SelectContainer } from '../styles';\n\nconst NativeSelect: ForwardRefRenderFunction<\n  HTMLSelectElement,\n  NativeSelectInternalProps\n> = (\n  { children, className, width, placeholder, value, disabled, ...props },\n  ref\n) => {\n  const showPlaceholder = !value && !!placeholder;\n\n  return (\n    <SelectContainer aria-disabled={disabled} className={className}>\n      <StyledSelect\n        {...props}\n        value={value}\n        $width={width}\n        ref={ref}\n        isPlaceholder={showPlaceholder}\n        disabled={disabled}\n      >\n        {!value && (\n          <option value=\"\" selected>\n            {placeholder || 'ㅤ'}\n          </option>\n        )}\n        {children}\n      </StyledSelect>\n      <SelectDownIcon>\n        <IconArrow2Down size=\"small\" />\n      </SelectDownIcon>\n    </SelectContainer>\n  );\n};\n\nexport default forwardRef(NativeSelect);\n"],"names":["props","className","value","$width","ref","isPlaceholder","disabled","children","size"],"mappings":";;;;;;;;;AAAa;AAAA;AAAA;AAWb;AAMK;;;;;;AAF4DA;AAG/D;;AAGmB;AAAyBC;;AAGtCC;AACAC;AACAC;AACAC;AACAC;AAAmBC;AAGTL;;;;AAID;;AAGOM;;AAAe;AAChB;AAGvB;AAEA;;"}

package/dist/primitive/src/Inputs/Select/NativeSelect/{styles.cjs → styles.cjs.js}

@@ -28,4 +28,4 @@ var SelectDownIcon = styled__default.default.div(_templateObject3 || (_templateO
 
 exports.SelectDownIcon = SelectDownIcon;
 exports.StyledSelect = StyledSelect;
-//# sourceMappingURL=styles.cjs.map
+//# sourceMappingURL=styles.cjs.js.map

package/dist/primitive/src/Inputs/Select/NativeSelect/styles.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.cjs.js","sources":["../../../../../../src/Inputs/Select/NativeSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport {\n  bg200,\n  bg300,\n  contents000,\n  contents200,\n  contents300,\n  getTypographyStyles,\n} from '@remember-web/mixin';\n\nexport const StyledSelect = styled.select<{\n  $width?: number | string;\n  isPlaceholder?: boolean;\n}>`\n  all: unset;\n\n  ${getTypographyStyles('Body1_M')}\n  border: 1px solid ${contents300};\n  border-radius: 4px;\n  padding: 10px 36px 10px 12px;\n  box-sizing: border-box;\n\n  ${({ isPlaceholder }) =>\n    isPlaceholder &&\n    css`\n      color: ${contents200};\n    `}\n\n  width: ${({ $width }) => {\n    if (!$width) {\n      return null;\n    }\n\n    if (typeof $width === 'number') {\n      return `${$width}px`;\n    }\n\n    return $width;\n  }};\n\n  transition: border-color 0.2s, background-color 0.2s;\n\n  &:focus {\n    border-color: ${contents000};\n  }\n\n  &:not(:disabled) {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ${bg200};\n      }\n    }\n\n    &:active {\n      background-color: ${bg300};\n    }\n  }\n`;\nexport const SelectDownIcon = styled.div`\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  & > svg {\n    display: block;\n  }\n\n  pointer-events: none;\n`;\n"],"names":["SelectDownIcon"],"mappings":";;;;;;;;;;;;AAAa;AAYN;AAYH;;AAIC;AAEsB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;AAoBWA;;;"}

package/dist/primitive/src/Inputs/Select/NativeSelect/{styles.js → styles.esm.js}

@@ -20,4 +20,4 @@ var StyledSelect = styled.select(_templateObject || (_templateObject = _taggedTe
 var SelectDownIcon = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  & > svg {\n    display: block;\n  }\n\n  pointer-events: none;\n"])));
 
 export { SelectDownIcon, StyledSelect };
-//# sourceMappingURL=styles.js.map
+//# sourceMappingURL=styles.esm.js.map

package/dist/primitive/src/Inputs/Select/NativeSelect/styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../../../../src/Inputs/Select/NativeSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport {\n  bg200,\n  bg300,\n  contents000,\n  contents200,\n  contents300,\n  getTypographyStyles,\n} from '@remember-web/mixin';\n\nexport const StyledSelect = styled.select<{\n  $width?: number | string;\n  isPlaceholder?: boolean;\n}>`\n  all: unset;\n\n  ${getTypographyStyles('Body1_M')}\n  border: 1px solid ${contents300};\n  border-radius: 4px;\n  padding: 10px 36px 10px 12px;\n  box-sizing: border-box;\n\n  ${({ isPlaceholder }) =>\n    isPlaceholder &&\n    css`\n      color: ${contents200};\n    `}\n\n  width: ${({ $width }) => {\n    if (!$width) {\n      return null;\n    }\n\n    if (typeof $width === 'number') {\n      return `${$width}px`;\n    }\n\n    return $width;\n  }};\n\n  transition: border-color 0.2s, background-color 0.2s;\n\n  &:focus {\n    border-color: ${contents000};\n  }\n\n  &:not(:disabled) {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ${bg200};\n      }\n    }\n\n    &:active {\n      background-color: ${bg300};\n    }\n  }\n`;\nexport const SelectDownIcon = styled.div`\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  & > svg {\n    display: block;\n  }\n\n  pointer-events: none;\n`;\n"],"names":["SelectDownIcon"],"mappings":";;;;;AAAa;AAYN;AAYH;;AAIC;AAEsB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;AAoBWA;;"}

package/dist/primitive/src/Inputs/Select/Option/{index.cjs → index.cjs.js}

@@ -8,4 +8,4 @@ var OptionHolder = function OptionHolder(props) {
 OptionHolder.displayName = 'Select.Option';
 
 exports.OptionHolder = OptionHolder;
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.js.map

package/dist/primitive/src/Inputs/Select/Option/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../../../src/Inputs/Select/Option/index.tsx"],"sourcesContent":["'use client';\n\nimport type { OptionProps, SelectValue } from '../types';\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport const OptionHolder = <T extends SelectValue>(props: OptionProps<T>) =>\n  null;\n\nOptionHolder.displayName = 'Select.Option';\n"],"names":["OptionHolder"],"mappings":";;;AAIA;;AACyE;AACnE;AAENA;;"}

package/dist/primitive/src/Inputs/Select/Option/{index.js → index.esm.js}

@@ -6,4 +6,4 @@ var OptionHolder = function OptionHolder(props) {
 OptionHolder.displayName = 'Select.Option';
 
 export { OptionHolder };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.esm.js.map

package/dist/primitive/src/Inputs/Select/Option/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../../src/Inputs/Select/Option/index.tsx"],"sourcesContent":["'use client';\n\nimport type { OptionProps, SelectValue } from '../types';\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport const OptionHolder = <T extends SelectValue>(props: OptionProps<T>) =>\n  null;\n\nOptionHolder.displayName = 'Select.Option';\n"],"names":["OptionHolder"],"mappings":";AAIA;;AACyE;AACnE;AAENA;;"}

package/dist/primitive/src/Inputs/Select/{index.cjs → index.cjs.js}

@@ -3,11 +3,11 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var react = require('react');
-var index$4 = require('./DesignedSelect/index.cjs');
-var index$2 = require('./NativeSelect/index.cjs');
-var index$3 = require('./NativeSelect/Option/index.cjs');
-var index$1 = require('./Option/index.cjs');
-var styles = require('./styles.cjs');
+var index$4 = require('./DesignedSelect/index.cjs.js');
+var index$2 = require('./NativeSelect/index.cjs.js');
+var index$3 = require('./NativeSelect/Option/index.cjs.js');
+var index$1 = require('./Option/index.cjs.js');
+var styles = require('./styles.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -75,4 +75,4 @@ var index = Object.assign( /*#__PURE__*/react.forwardRef(Select), {
 });
 
 module.exports = index;
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.js.map

package/dist/primitive/src/Inputs/Select/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Inputs/Select/index.tsx"],"sourcesContent":["'use client';\n\nimport type { Ref, RefAttributes } from 'react';\nimport { Children, forwardRef } from 'react';\n\nimport DesignedSelect from './DesignedSelect';\nimport NativeSelect from './NativeSelect';\nimport { NativeOption } from './NativeSelect/Option';\nimport { OptionHolder } from './Option';\nimport { SelectLabel } from './styles';\nimport type {\n  DesignedSelectProps,\n  NativeSelectProps,\n  SelectProps,\n  SelectValue,\n} from './types';\n\nfunction Select<Value extends SelectValue>(\n  props: SelectProps<Value>,\n  ref: Ref<HTMLDivElement | HTMLSelectElement>\n) {\n  const {\n    children,\n    label,\n    value,\n    className,\n    disabled,\n    onChange,\n    placeholder,\n    width,\n    required,\n  } = props;\n\n  if (props.native) {\n    return (\n      <div>\n        {label && (\n          <SelectLabel>\n            {label}\n            {required && <mark>*</mark>}\n          </SelectLabel>\n        )}\n        <NativeSelect\n          disabled={disabled}\n          className={className}\n          onChange={(e) => {\n            onChange?.(e.target.value as Value, e.target.innerText);\n          }}\n          value={value}\n          required={required}\n          placeholder={placeholder}\n          width={width}\n          ref={ref as Ref<HTMLSelectElement>}\n        >\n          {Children.map(children, (child) => (\n            <NativeOption {...child.props} />\n          ))}\n        </NativeSelect>\n      </div>\n    );\n  }\n\n  return (\n    <div>\n      {label && (\n        <SelectLabel>\n          {label}\n          {required && <mark>*</mark>}\n        </SelectLabel>\n      )}\n      <DesignedSelect\n        className={className}\n        value={value}\n        disabled={disabled}\n        onChange={(_value, _label) => onChange?.(_value as Value, _label)}\n        placeholder={placeholder}\n        width={width}\n        maxHeight={props.maxHeight}\n        extendDirection={props.extendDirection}\n        ref={ref as Ref<HTMLDivElement>}\n      >\n        {children}\n      </DesignedSelect>\n    </div>\n  );\n}\n\nexport default Object.assign(\n  forwardRef(Select) as <Value extends SelectValue>(\n    props:\n      | (DesignedSelectProps<Value> & RefAttributes<HTMLDivElement>)\n      | (NativeSelectProps<Value> & RefAttributes<HTMLSelectElement>)\n  ) => JSX.Element,\n  { Option: OptionHolder }\n);\n"],"names":["children","disabled","className","onChange","value","required","placeholder","width","ref","Option"],"mappings":";;;;;;;;;;;;;;;;AAAa;AAAA;AAiBb;AAIE;;;;;;;;;;AAaE;AACEA;AAEgBA;AAEGA;AAAO;AAAO;AAI7BC;AACAC;AACAC;AACEA;;AAEFC;AACAC;AACAC;AACAC;AACAC;;;;AAIE;AACW;AAGrB;AAEA;AACER;AAEgBA;AAEGA;AAAO;AAAO;AAI7BE;AACAE;AACAH;AACAE;;;AACAG;AACAC;;;AAGAC;AAAgCR;AAEvB;AACM;AAGvB;AAEA;AAMIS;AAAqB;;"}

package/dist/primitive/src/Inputs/Select/{index.js → index.esm.js}

@@ -1,11 +1,11 @@
 "use client";
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { forwardRef, Children } from 'react';
-import DesignedSelect from './DesignedSelect/index.js';
-import NativeSelect from './NativeSelect/index.js';
-import { NativeOption } from './NativeSelect/Option/index.js';
-import { OptionHolder } from './Option/index.js';
-import { SelectLabel } from './styles.js';
+import DesignedSelect from './DesignedSelect/index.esm.js';
+import NativeSelect from './NativeSelect/index.esm.js';
+import { NativeOption } from './NativeSelect/Option/index.esm.js';
+import { OptionHolder } from './Option/index.esm.js';
+import { SelectLabel } from './styles.esm.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 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; }
@@ -69,4 +69,4 @@ var index = Object.assign( /*#__PURE__*/forwardRef(Select), {
 });
 
 export { index as default };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.esm.js.map

package/dist/primitive/src/Inputs/Select/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/Inputs/Select/index.tsx"],"sourcesContent":["'use client';\n\nimport type { Ref, RefAttributes } from 'react';\nimport { Children, forwardRef } from 'react';\n\nimport DesignedSelect from './DesignedSelect';\nimport NativeSelect from './NativeSelect';\nimport { NativeOption } from './NativeSelect/Option';\nimport { OptionHolder } from './Option';\nimport { SelectLabel } from './styles';\nimport type {\n  DesignedSelectProps,\n  NativeSelectProps,\n  SelectProps,\n  SelectValue,\n} from './types';\n\nfunction Select<Value extends SelectValue>(\n  props: SelectProps<Value>,\n  ref: Ref<HTMLDivElement | HTMLSelectElement>\n) {\n  const {\n    children,\n    label,\n    value,\n    className,\n    disabled,\n    onChange,\n    placeholder,\n    width,\n    required,\n  } = props;\n\n  if (props.native) {\n    return (\n      <div>\n        {label && (\n          <SelectLabel>\n            {label}\n            {required && <mark>*</mark>}\n          </SelectLabel>\n        )}\n        <NativeSelect\n          disabled={disabled}\n          className={className}\n          onChange={(e) => {\n            onChange?.(e.target.value as Value, e.target.innerText);\n          }}\n          value={value}\n          required={required}\n          placeholder={placeholder}\n          width={width}\n          ref={ref as Ref<HTMLSelectElement>}\n        >\n          {Children.map(children, (child) => (\n            <NativeOption {...child.props} />\n          ))}\n        </NativeSelect>\n      </div>\n    );\n  }\n\n  return (\n    <div>\n      {label && (\n        <SelectLabel>\n          {label}\n          {required && <mark>*</mark>}\n        </SelectLabel>\n      )}\n      <DesignedSelect\n        className={className}\n        value={value}\n        disabled={disabled}\n        onChange={(_value, _label) => onChange?.(_value as Value, _label)}\n        placeholder={placeholder}\n        width={width}\n        maxHeight={props.maxHeight}\n        extendDirection={props.extendDirection}\n        ref={ref as Ref<HTMLDivElement>}\n      >\n        {children}\n      </DesignedSelect>\n    </div>\n  );\n}\n\nexport default Object.assign(\n  forwardRef(Select) as <Value extends SelectValue>(\n    props:\n      | (DesignedSelectProps<Value> & RefAttributes<HTMLDivElement>)\n      | (NativeSelectProps<Value> & RefAttributes<HTMLSelectElement>)\n  ) => JSX.Element,\n  { Option: OptionHolder }\n);\n"],"names":["children","disabled","className","onChange","value","required","placeholder","width","ref","Option"],"mappings":";;;;;;;;;;AAAa;AAAA;AAiBb;AAIE;;;;;;;;;;AAaE;AACEA;AAEgBA;AAEGA;AAAO;AAAO;AAI7BC;AACAC;AACAC;AACEA;;AAEFC;AACAC;AACAC;AACAC;AACAC;;;;AAIE;AACW;AAGrB;AAEA;AACER;AAEgBA;AAEGA;AAAO;AAAO;AAI7BE;AACAE;AACAH;AACAE;;;AACAG;AACAC;;;AAGAC;AAAgCR;AAEvB;AACM;AAGvB;AAEA;AAMIS;AAAqB;;"}

package/dist/primitive/src/Inputs/Select/{styles.cjs → styles.cjs.js}

@@ -25,4 +25,4 @@ var SelectLabel = styled__default.default.label(_templateObject2 || (_templateOb
 
 exports.SelectContainer = SelectContainer;
 exports.SelectLabel = SelectLabel;
-//# sourceMappingURL=styles.cjs.map
+//# sourceMappingURL=styles.cjs.js.map

package/dist/primitive/src/Inputs/Select/styles.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Inputs/Select/styles.ts"],"sourcesContent":["'use client';\n\nimport styled from 'styled-components';\nimport {\n  bg200,\n  contents000,\n  contents200,\n  contents300,\n  getTypographyStyles,\n  roleRed,\n} from '@remember-web/mixin';\n\nexport const SelectContainer = styled.div<{ $width?: number | string }>`\n  ${getTypographyStyles('Body1_M')}\n  color: ${contents000};\n  width: ${({ $width }) => {\n    if (!$width) {\n      return 'fit-content';\n    }\n\n    if (typeof $width === 'number') {\n      return `${$width}px`;\n    }\n\n    return $width;\n  }};\n  position: relative;\n  user-select: none;\n\n  &:focus {\n    outline: none;\n    border-color: ${contents000};\n  }\n  &[aria-disabled='true'] {\n    color: ${contents200};\n    border-color: ${contents300};\n    background-color: ${bg200};\n  }\n`;\n\nexport const SelectLabel = styled.label`\n  ${getTypographyStyles('Headline4_B')}\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ${roleRed};\n  }\n`;\n"],"names":[],"mappings":";;;;;;;;;;;;AAAa;AAYN;AAGoB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;;;;"}

package/dist/primitive/src/Inputs/Select/{styles.js → styles.esm.js}

@@ -17,4 +17,4 @@ var SelectContainer = styled.div(_templateObject || (_templateObject = _taggedTe
 var SelectLabel = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ", ";\n  }\n"])), getTypographyStyles('Headline4_B'), roleRed);
 
 export { SelectContainer, SelectLabel };
-//# sourceMappingURL=styles.js.map
+//# sourceMappingURL=styles.esm.js.map

package/dist/primitive/src/Inputs/Select/styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../../../src/Inputs/Select/styles.ts"],"sourcesContent":["'use client';\n\nimport styled from 'styled-components';\nimport {\n  bg200,\n  contents000,\n  contents200,\n  contents300,\n  getTypographyStyles,\n  roleRed,\n} from '@remember-web/mixin';\n\nexport const SelectContainer = styled.div<{ $width?: number | string }>`\n  ${getTypographyStyles('Body1_M')}\n  color: ${contents000};\n  width: ${({ $width }) => {\n    if (!$width) {\n      return 'fit-content';\n    }\n\n    if (typeof $width === 'number') {\n      return `${$width}px`;\n    }\n\n    return $width;\n  }};\n  position: relative;\n  user-select: none;\n\n  &:focus {\n    outline: none;\n    border-color: ${contents000};\n  }\n  &[aria-disabled='true'] {\n    color: ${contents200};\n    border-color: ${contents300};\n    background-color: ${bg200};\n  }\n`;\n\nexport const SelectLabel = styled.label`\n  ${getTypographyStyles('Headline4_B')}\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ${roleRed};\n  }\n`;\n"],"names":[],"mappings":";;;;;AAAa;AAYN;AAGoB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;;;"}

package/dist/primitive/src/Inputs/Select/{utils.cjs → utils.cjs.js}

@@ -41,4 +41,4 @@ function getSiblingElement(target, siblingDirection) {
 }
 
 exports.focusSibling = focusSibling;
-//# sourceMappingURL=utils.cjs.map
+//# sourceMappingURL=utils.cjs.js.map