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

package/dist/primitive/src/Inputs/Select/DesignedSelect/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","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

@@ -1,45 +1,54 @@
 "use client";
 'use strict';
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
 var mixin = require('@remember-web/mixin');
 var styles = require('../styles.cjs');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
-var StyledSelect = styled__default.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\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"])), mixin.ellipsis(), mixin.contents300, function (_ref) {
+var StyledSelect = styled__default.default.div.withConfig({
+  displayName: "styles__StyledSelect",
+  componentId: "sc-14m4ck5-0"
+})(["", " border:1px solid ", ";", ";padding:10px 36px 10px 12px;transition:border-color 0.2s,background-color 0.2s;", " ", ":focus-within &{outline:none;border-color:", ";}", ":not([aria-disabled='true']) &{@media (hover:hover){&:hover{background-color:", ";}}&:active{background-color:", ";}}"], mixin.ellipsis(), mixin.contents300, function (_ref) {
   var expandedDirection = _ref.expandedDirection;
   return {
-    none: styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n        border-radius: 4px;\n      "]))),
-    above: styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n        border-radius: 0 0 4px 4px;\n        border-top-color: transparent;\n      "]))),
-    below: styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n        border-radius: 4px 4px 0 0;\n        border-bottom-color: transparent;\n      "])))
+    none: styled.css(["border-radius:4px;"]),
+    above: styled.css(["border-radius:0 0 4px 4px;border-top-color:transparent;"]),
+    below: styled.css(["border-radius:4px 4px 0 0;border-bottom-color:transparent;"])
   }[expandedDirection !== null && expandedDirection !== void 0 ? expandedDirection : 'none'];
 }, function (_ref2) {
   var isPlaceholder = _ref2.isPlaceholder;
-  return isPlaceholder && styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n      color: ", ";\n    "])), mixin.contents200);
+  return isPlaceholder && styled.css(["color:", ";"], mixin.contents200);
 }, styles.SelectContainer, mixin.contents000, styles.SelectContainer, mixin.bg200, mixin.bg300);
-var SelectDownIcon = styled__default.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default(["\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"])));
-var SelectOptionWrapper = styled__default.default.ul(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  border: 1px solid ", ";\n  background-color: ", ";\n  overflow-y: scroll;\n  overscroll-behavior: contain;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ", ";\n\n  ", "\n\n  ", ":focus &, ", ":focus-within & {\n    outline: none;\n    border-color: ", ";\n  }\n"])), mixin.contents300, mixin.bg100, function (_ref3) {
+var SelectDownIcon = styled__default.default.div.withConfig({
+  displayName: "styles__SelectDownIcon",
+  componentId: "sc-14m4ck5-1"
+})(["position:absolute;right:12px;top:50%;transform:translateY(-50%);& > svg{display:block;}pointer-events:none;"]);
+var SelectOptionWrapper = styled__default.default.ul.withConfig({
+  displayName: "styles__SelectOptionWrapper",
+  componentId: "sc-14m4ck5-2"
+})(["all:unset;position:absolute;left:0;right:0;z-index:1;border:1px solid ", ";background-color:", ";overflow-y:scroll;overscroll-behavior:contain;transition:border-color 0.2s,background-color 0.2s;", ";", " ", ":focus &,", ":focus-within &{outline:none;border-color:", ";}"], mixin.contents300, mixin.bg100, function (_ref3) {
   var maxHeight = _ref3.maxHeight;
   if (!maxHeight) {
     return null;
   }
   if (typeof maxHeight === 'number') {
-    return styled.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default.default(["\n        max-height: ", "px;\n      "])), maxHeight);
+    return styled.css(["max-height:", "px;"], maxHeight);
   }
-  return styled.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default.default(["\n      max-height: ", ";\n    "])), maxHeight);
+  return styled.css(["max-height:", ";"], maxHeight);
 }, function (_ref4) {
   var expandedDirection = _ref4.expandedDirection;
-  return expandedDirection === 'below' ? styled.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default.default(["\n          top: calc(100% - 1px);\n          border-top: none;\n          border-radius: 0 0 4px 4px;\n        "]))) : styled.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default.default(["\n          bottom: calc(100% - 1px);\n          border-bottom: none;\n          border-radius: 4px 4px 0 0;\n        "])));
+  return expandedDirection === 'below' ? styled.css(["top:calc(100% - 1px);border-top:none;border-radius:0 0 4px 4px;"]) : styled.css(["bottom:calc(100% - 1px);border-bottom:none;border-radius:4px 4px 0 0;"]);
 }, styles.SelectContainer, styles.SelectContainer, mixin.contents000);
-var SelectOption = styled__default.default.li(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral__default.default(["\n  ", "\n  padding: 10px 12px;\n  color: ", ";\n\n  &[aria-disabled='true'] {\n    color: ", ";\n  }\n\n  &:focus {\n    background-color: ", ";\n    outline: none;\n  }\n\n  ", "\n"])), mixin.ellipsis(), mixin.contents000, mixin.contents300, mixin.bg200, function (_ref5) {
+var SelectOption = styled__default.default.li.withConfig({
+  displayName: "styles__SelectOption",
+  componentId: "sc-14m4ck5-3"
+})(["", " padding:10px 12px;color:", ";&[aria-disabled='true']{color:", ";}&:focus{background-color:", ";outline:none;}", ""], mixin.ellipsis(), mixin.contents000, mixin.contents300, mixin.bg200, function (_ref5) {
   var isSelected = _ref5.isSelected;
-  return isSelected && styled.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral__default.default(["\n      background-color: ", ";\n    "])), mixin.bg200);
+  return isSelected && styled.css(["background-color:", ";"], mixin.bg200);
 });
 
 exports.SelectDownIcon = SelectDownIcon;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","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;;;;;"}
+{"version":3,"file":"styles.cjs","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"],"mappings":";;;;;;;;;;;;;;AAgBsC;AAMlC;;;;AASEA;;AAI4B;AAK9B;AAAgB;AAIf;;;;AAmBmC;;;;AAaI;AAerB;;AAEjB;AACF;AAEA;;AAIA;;AAKF;AAEE;AAAoB;AAWf;;;;AAQ4B;AAcjC;AAAa;AAIZ;;;;;"}

package/dist/primitive/src/Inputs/Select/DesignedSelect/styles.mjs

@@ -0,0 +1,49 @@
+"use client";
+import styled, { css } from 'styled-components';
+import { ellipsis, contents300, contents200, contents000, bg200, bg300, bg100 } from '@remember-web/mixin';
+import { SelectContainer } from '../styles.mjs';
+
+var StyledSelect = styled.div.withConfig({
+  displayName: "styles__StyledSelect",
+  componentId: "sc-14m4ck5-0"
+})(["", " border:1px solid ", ";", ";padding:10px 36px 10px 12px;transition:border-color 0.2s,background-color 0.2s;", " ", ":focus-within &{outline:none;border-color:", ";}", ":not([aria-disabled='true']) &{@media (hover:hover){&:hover{background-color:", ";}}&:active{background-color:", ";}}"], ellipsis(), contents300, function (_ref) {
+  var expandedDirection = _ref.expandedDirection;
+  return {
+    none: css(["border-radius:4px;"]),
+    above: css(["border-radius:0 0 4px 4px;border-top-color:transparent;"]),
+    below: css(["border-radius:4px 4px 0 0;border-bottom-color:transparent;"])
+  }[expandedDirection !== null && expandedDirection !== void 0 ? expandedDirection : 'none'];
+}, function (_ref2) {
+  var isPlaceholder = _ref2.isPlaceholder;
+  return isPlaceholder && css(["color:", ";"], contents200);
+}, SelectContainer, contents000, SelectContainer, bg200, bg300);
+var SelectDownIcon = styled.div.withConfig({
+  displayName: "styles__SelectDownIcon",
+  componentId: "sc-14m4ck5-1"
+})(["position:absolute;right:12px;top:50%;transform:translateY(-50%);& > svg{display:block;}pointer-events:none;"]);
+var SelectOptionWrapper = styled.ul.withConfig({
+  displayName: "styles__SelectOptionWrapper",
+  componentId: "sc-14m4ck5-2"
+})(["all:unset;position:absolute;left:0;right:0;z-index:1;border:1px solid ", ";background-color:", ";overflow-y:scroll;overscroll-behavior:contain;transition:border-color 0.2s,background-color 0.2s;", ";", " ", ":focus &,", ":focus-within &{outline:none;border-color:", ";}"], contents300, bg100, function (_ref3) {
+  var maxHeight = _ref3.maxHeight;
+  if (!maxHeight) {
+    return null;
+  }
+  if (typeof maxHeight === 'number') {
+    return css(["max-height:", "px;"], maxHeight);
+  }
+  return css(["max-height:", ";"], maxHeight);
+}, function (_ref4) {
+  var expandedDirection = _ref4.expandedDirection;
+  return expandedDirection === 'below' ? css(["top:calc(100% - 1px);border-top:none;border-radius:0 0 4px 4px;"]) : css(["bottom:calc(100% - 1px);border-bottom:none;border-radius:4px 4px 0 0;"]);
+}, SelectContainer, SelectContainer, contents000);
+var SelectOption = styled.li.withConfig({
+  displayName: "styles__SelectOption",
+  componentId: "sc-14m4ck5-3"
+})(["", " padding:10px 12px;color:", ";&[aria-disabled='true']{color:", ";}&:focus{background-color:", ";outline:none;}", ""], ellipsis(), contents000, contents300, bg200, function (_ref5) {
+  var isSelected = _ref5.isSelected;
+  return isSelected && css(["background-color:", ";"], bg200);
+});
+
+export { SelectDownIcon, SelectOption, SelectOptionWrapper, StyledSelect };
+//# sourceMappingURL=styles.mjs.map

package/dist/primitive/src/Inputs/Select/DesignedSelect/styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.mjs","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"],"mappings":";;;;;;;;AAgBsC;AAMlC;;;;AASEA;;AAI4B;AAK9B;AAAgB;AAIf;;;;AAmBmC;;;;AAaI;AAerB;;AAEjB;AACF;AAEA;;AAIA;;AAKF;AAEE;AAAoB;AAWf;;;;AAQ4B;AAcjC;AAAa;AAIZ;;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","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.js → index.mjs}

@@ -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.mjs';
+import { SelectContainer } from '../styles.mjs';
 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.mjs.map

package/dist/primitive/src/Inputs/Select/NativeSelect/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","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

@@ -1,19 +1,19 @@
 "use client";
 'use strict';
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
 var mixin = require('@remember-web/mixin');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-var _templateObject, _templateObject2, _templateObject3;
-var StyledSelect = styled__default.default.select(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  all: unset;\n\n  ", "\n  border: 1px solid ", ";\n  border-radius: 4px;\n  padding: 10px 36px 10px 12px;\n  box-sizing: border-box;\n\n  ", "\n\n  width: ", ";\n\n  transition: border-color 0.2s, background-color 0.2s;\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &:not(:disabled) {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n  }\n"])), mixin.getTypographyStyles('Body1_M'), mixin.contents300, function (_ref) {
+var StyledSelect = styled__default.default.select.withConfig({
+  displayName: "styles__StyledSelect",
+  componentId: "sc-xnzpg1-0"
+})(["all:unset;", " border:1px solid ", ";border-radius:4px;padding:10px 36px 10px 12px;box-sizing:border-box;", " width:", ";transition:border-color 0.2s,background-color 0.2s;&:focus{border-color:", ";}&:not(:disabled){@media (hover:hover){&:hover{background-color:", ";}}&:active{background-color:", ";}}"], mixin.getTypographyStyles('Body1_M'), mixin.contents300, function (_ref) {
   var isPlaceholder = _ref.isPlaceholder;
-  return isPlaceholder && styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n      color: ", ";\n    "])), mixin.contents200);
+  return isPlaceholder && styled.css(["color:", ";"], mixin.contents200);
 }, function (_ref2) {
   var $width = _ref2.$width;
   if (!$width) {
@@ -24,7 +24,10 @@ var StyledSelect = styled__default.default.select(_templateObject || (_templateO
   }
   return $width;
 }, mixin.contents000, mixin.bg200, mixin.bg300);
-var SelectDownIcon = styled__default.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\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"])));
+var SelectDownIcon = styled__default.default.div.withConfig({
+  displayName: "styles__SelectDownIcon",
+  componentId: "sc-xnzpg1-1"
+})(["position:absolute;right:12px;top:50%;transform:translateY(-50%);& > svg{display:block;}pointer-events:none;"]);
 
 exports.SelectDownIcon = SelectDownIcon;
 exports.StyledSelect = StyledSelect;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","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;;;"}
+{"version":3,"file":"styles.cjs","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":[],"mappings":";;;;;;;;;;;;;AAYyC;AAYrC;AAAgB;AAIf;AAEsB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;;;;AAoBsC;;;"}

package/dist/primitive/src/Inputs/Select/NativeSelect/styles.mjs

@@ -0,0 +1,27 @@
+"use client";
+import styled, { css } from 'styled-components';
+import { getTypographyStyles, contents300, contents200, contents000, bg200, bg300 } from '@remember-web/mixin';
+
+var StyledSelect = styled.select.withConfig({
+  displayName: "styles__StyledSelect",
+  componentId: "sc-xnzpg1-0"
+})(["all:unset;", " border:1px solid ", ";border-radius:4px;padding:10px 36px 10px 12px;box-sizing:border-box;", " width:", ";transition:border-color 0.2s,background-color 0.2s;&:focus{border-color:", ";}&:not(:disabled){@media (hover:hover){&:hover{background-color:", ";}}&:active{background-color:", ";}}"], getTypographyStyles('Body1_M'), contents300, function (_ref) {
+  var isPlaceholder = _ref.isPlaceholder;
+  return isPlaceholder && css(["color:", ";"], contents200);
+}, function (_ref2) {
+  var $width = _ref2.$width;
+  if (!$width) {
+    return null;
+  }
+  if (typeof $width === 'number') {
+    return "".concat($width, "px");
+  }
+  return $width;
+}, contents000, bg200, bg300);
+var SelectDownIcon = styled.div.withConfig({
+  displayName: "styles__SelectDownIcon",
+  componentId: "sc-xnzpg1-1"
+})(["position:absolute;right:12px;top:50%;transform:translateY(-50%);& > svg{display:block;}pointer-events:none;"]);
+
+export { SelectDownIcon, StyledSelect };
+//# sourceMappingURL=styles.mjs.map

package/dist/primitive/src/Inputs/Select/NativeSelect/styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.mjs","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":[],"mappings":";;;;;;;AAYyC;AAYrC;AAAgB;AAIf;AAEsB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;;;;AAoBsC;;"}

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

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

package/dist/primitive/src/Inputs/Select/Option/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","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.js → index.mjs}

@@ -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.mjs';
+import NativeSelect from './NativeSelect/index.mjs';
+import { NativeOption } from './NativeSelect/Option/index.mjs';
+import { OptionHolder } from './Option/index.mjs';
+import { SelectLabel } from './styles.mjs';
 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.mjs.map

package/dist/primitive/src/Inputs/Select/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","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

@@ -1,17 +1,17 @@
 "use client";
 'use strict';
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
 var mixin = require('@remember-web/mixin');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-var _templateObject, _templateObject2;
-var SelectContainer = styled__default.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  ", "\n  color: ", ";\n  width: ", ";\n  position: relative;\n  user-select: none;\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n  }\n  &[aria-disabled='true'] {\n    color: ", ";\n    border-color: ", ";\n    background-color: ", ";\n  }\n"])), mixin.getTypographyStyles('Body1_M'), mixin.contents000, function (_ref) {
+var SelectContainer = styled__default.default.div.withConfig({
+  displayName: "styles__SelectContainer",
+  componentId: "sc-1wrmy1c-0"
+})(["", " color:", ";width:", ";position:relative;user-select:none;&:focus{outline:none;border-color:", ";}&[aria-disabled='true']{color:", ";border-color:", ";background-color:", ";}"], mixin.getTypographyStyles('Body1_M'), mixin.contents000, function (_ref) {
   var $width = _ref.$width;
   if (!$width) {
     return 'fit-content';
@@ -21,7 +21,10 @@ var SelectContainer = styled__default.default.div(_templateObject || (_templateO
   }
   return $width;
 }, mixin.contents000, mixin.contents200, mixin.contents300, mixin.bg200);
-var SelectLabel = styled__default.default.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\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"])), mixin.getTypographyStyles('Headline4_B'), mixin.roleRed);
+var SelectLabel = styled__default.default.label.withConfig({
+  displayName: "styles__SelectLabel",
+  componentId: "sc-1wrmy1c-1"
+})(["", " display:block;margin-bottom:12px;display:flex;align-items:center;gap:4px;& > mark{all:unset;color:", ";}"], mixin.getTypographyStyles('Headline4_B'), mixin.roleRed);
 
 exports.SelectContainer = SelectContainer;
 exports.SelectLabel = SelectLabel;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","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;;;;"}
+{"version":3,"file":"styles.cjs","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":";;;;;;;;;;;;;AAYyC;AAGd;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;;;;AAeqC;;;"}

package/dist/primitive/src/Inputs/Select/styles.mjs

@@ -0,0 +1,24 @@
+"use client";
+import styled from 'styled-components';
+import { getTypographyStyles, contents000, contents200, contents300, bg200, roleRed } from '@remember-web/mixin';
+
+var SelectContainer = styled.div.withConfig({
+  displayName: "styles__SelectContainer",
+  componentId: "sc-1wrmy1c-0"
+})(["", " color:", ";width:", ";position:relative;user-select:none;&:focus{outline:none;border-color:", ";}&[aria-disabled='true']{color:", ";border-color:", ";background-color:", ";}"], getTypographyStyles('Body1_M'), contents000, function (_ref) {
+  var $width = _ref.$width;
+  if (!$width) {
+    return 'fit-content';
+  }
+  if (typeof $width === 'number') {
+    return "".concat($width, "px");
+  }
+  return $width;
+}, contents000, contents200, contents300, bg200);
+var SelectLabel = styled.label.withConfig({
+  displayName: "styles__SelectLabel",
+  componentId: "sc-1wrmy1c-1"
+})(["", " display:block;margin-bottom:12px;display:flex;align-items:center;gap:4px;& > mark{all:unset;color:", ";}"], getTypographyStyles('Headline4_B'), roleRed);
+
+export { SelectContainer, SelectLabel };
+//# sourceMappingURL=styles.mjs.map

package/dist/primitive/src/Inputs/Select/styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.mjs","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":";;;;;;;AAYyC;AAGd;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;;;;AAeqC;;"}

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

@@ -39,4 +39,4 @@ function getSiblingElement(target, siblingDirection) {
 }
 
 export { focusSibling };
-//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.mjs.map

package/dist/primitive/src/Inputs/Select/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","sources":["../../../../../src/Inputs/Select/utils.ts"],"sourcesContent":["// focus된 요소의 sibling을 찾아서 focus\nexport function focusSibling<E extends HTMLElement>(\n  currentFocusedElement: E,\n  siblingDirection: 'previous' | 'next'\n) {\n  if (currentFocusedElement?.matches('[data-option-value]')) {\n    const siblingElement = getSiblingElement(\n      currentFocusedElement,\n      siblingDirection\n    );\n    const listElement = currentFocusedElement.parentElement;\n    if (\n      listElement &&\n      siblingElement?.matches('[data-option-value]') &&\n      checkSameElementType(currentFocusedElement, siblingElement)\n    ) {\n      siblingElement.focus({ preventScroll: true });\n      // 방향키를 통해 넘어가는 스크롤 방향에 따라 scrollIntoView의 block을 다르게 설정\n      if (\n        {\n          // 아래 요소를 선택할 때 스크롤이 아래로 내려가는 경우\n          next:\n            siblingElement.offsetTop >=\n            (siblingElement.parentElement?.scrollTop ?? 0) +\n              listElement.clientHeight,\n\n          // 위 요소를 선택할 때 스크롤이 위로 올라가는 경우\n          previous:\n            siblingElement.offsetTop <=\n            (siblingElement.parentElement?.scrollTop ?? 0),\n        }[siblingDirection]\n      ) {\n        siblingElement.scrollIntoView({\n          block: siblingDirection === 'previous' ? 'start' : 'end',\n        });\n      }\n    }\n  }\n}\n\nconst checkSameElementType = <E extends Element>(\n  element1: E,\n  element2: Element\n): element2 is E => element2 instanceof element1.constructor;\n\n// 재귀적으로 disabled되지 않은 sibling을 찾아서 반환\nfunction getSiblingElement<E extends Element>(\n  target: E,\n  siblingDirection: 'previous' | 'next'\n): E | null {\n  const siblingElement = target[`${siblingDirection}ElementSibling`];\n  if (\n    !siblingElement ||\n    !checkSameElementType(target, siblingElement) ||\n    !siblingElement.matches('[data-option-value]')\n  ) {\n    return null;\n  }\n\n  if (siblingElement.matches('[aria-disabled=\"true\"]')) {\n    return getSiblingElement(siblingElement, siblingDirection);\n  }\n\n  return siblingElement;\n}\n"],"names":["focusSibling","currentFocusedElement","siblingDirection","matches","siblingElement","getSiblingElement","listElement","parentElement","checkSameElementType","_siblingElement$paren","_siblingElement$paren2","_siblingElement$paren3","_siblingElement$paren4","focus","preventScroll","next","offsetTop","scrollTop","clientHeight","previous","scrollIntoView","block","element1","element2","constructor","target","concat"],"mappings":"AAAA;AACO,SAASA,YAAYA,CAC1BC,qBAAwB,EACxBC,gBAAqC,EACrC;EACA,IAAID,qBAAqB,KAArBA,IAAAA,IAAAA,qBAAqB,KAArBA,KAAAA,CAAAA,IAAAA,qBAAqB,CAAEE,OAAO,CAAC,qBAAqB,CAAC,EAAE;AACzD,IAAA,IAAMC,cAAc,GAAGC,iBAAiB,CACtCJ,qBAAqB,EACrBC,gBACF,CAAC,CAAA;AACD,IAAA,IAAMI,WAAW,GAAGL,qBAAqB,CAACM,aAAa,CAAA;AACvD,IAAA,IACED,WAAW,IACXF,cAAc,aAAdA,cAAc,KAAA,KAAA,CAAA,IAAdA,cAAc,CAAED,OAAO,CAAC,qBAAqB,CAAC,IAC9CK,oBAAoB,CAACP,qBAAqB,EAAEG,cAAc,CAAC,EAC3D;AAAA,MAAA,IAAAK,qBAAA,EAAAC,sBAAA,EAAAC,sBAAA,EAAAC,sBAAA,CAAA;MACAR,cAAc,CAACS,KAAK,CAAC;AAAEC,QAAAA,aAAa,EAAE,IAAA;AAAK,OAAC,CAAC,CAAA;AAC7C;MACA,IACE;AACE;AACAC,QAAAA,IAAI,EACFX,cAAc,CAACY,SAAS,IACxB,CAAA,CAAAP,qBAAA,GAAA,CAAAC,sBAAA,GAACN,cAAc,CAACG,aAAa,MAAA,IAAA,IAAAG,sBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAA5BA,sBAAA,CAA8BO,SAAS,MAAA,IAAA,IAAAR,qBAAA,KAAA,KAAA,CAAA,GAAAA,qBAAA,GAAI,CAAC,IAC3CH,WAAW,CAACY,YAAY;AAE5B;QACAC,QAAQ,EACNf,cAAc,CAACY,SAAS,MAAAL,sBAAA,GAAA,CAAAC,sBAAA,GACvBR,cAAc,CAACG,aAAa,MAAAK,IAAAA,IAAAA,sBAAA,KAA5BA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,sBAAA,CAA8BK,SAAS,cAAAN,sBAAA,KAAA,KAAA,CAAA,GAAAA,sBAAA,GAAI,CAAC,CAAA;OAChD,CAACT,gBAAgB,CAAC,EACnB;QACAE,cAAc,CAACgB,cAAc,CAAC;AAC5BC,UAAAA,KAAK,EAAEnB,gBAAgB,KAAK,UAAU,GAAG,OAAO,GAAG,KAAA;AACrD,SAAC,CAAC,CAAA;AACJ,OAAA;AACF,KAAA;AACF,GAAA;AACF,CAAA;AAEA,IAAMM,oBAAoB,GAAG,SAAvBA,oBAAoBA,CACxBc,QAAW,EACXC,QAAiB,EAAA;AAAA,EAAA,OACCA,QAAQ,YAAYD,QAAQ,CAACE,WAAW,CAAA;AAAA,CAAA,CAAA;;AAE5D;AACA,SAASnB,iBAAiBA,CACxBoB,MAAS,EACTvB,gBAAqC,EAC3B;AACV,EAAA,IAAME,cAAc,GAAGqB,MAAM,IAAAC,MAAA,CAAIxB,gBAAgB,EAAiB,gBAAA,CAAA,CAAA,CAAA;AAClE,EAAA,IACE,CAACE,cAAc,IACf,CAACI,oBAAoB,CAACiB,MAAM,EAAErB,cAAc,CAAC,IAC7C,CAACA,cAAc,CAACD,OAAO,CAAC,qBAAqB,CAAC,EAC9C;AACA,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;AAEA,EAAA,IAAIC,cAAc,CAACD,OAAO,CAAC,wBAAwB,CAAC,EAAE;AACpD,IAAA,OAAOE,iBAAiB,CAACD,cAAc,EAAEF,gBAAgB,CAAC,CAAA;AAC5D,GAAA;AAEA,EAAA,OAAOE,cAAc,CAAA;AACvB;;;;"}

package/dist/primitive/src/Inputs/TextInput/TextInput.stories.d.ts

@@ -8,7 +8,7 @@ declare const meta: {
     argTypes: {
         type: {
             control: string;
-            options: ("number" | "text" | "search" | "tel" | "url" | "email" | "date" | "datetime-local" | "password")[];
+            options: ("number" | "search" | "text" | "date" | "datetime-local" | "email" | "password" | "tel" | "url")[];
         };
         hasTogglePasswordVisibilityButton: {
             type: "boolean";

package/dist/primitive/src/Inputs/TextInput/{index.js → index.mjs}

@@ -4,7 +4,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useId, useState } from 'react';
 import { IconHidden, IconVisible } from '@remember-web/icon';
-import { InputWrapper, InputLabel, InputContainer, InputDecorator, InputInner, InputHintText, InputError, InputTogglePasswordVisibilityButton } from './styles.js';
+import { InputWrapper, InputLabel, InputContainer, InputDecorator, InputInner, InputHintText, InputError, InputTogglePasswordVisibilityButton } from './styles.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["className", "label", "leftElement", "rightElement", "disabled", "hintText", "hintTextColor", "errorMessage", "width"];
@@ -84,4 +84,4 @@ var TogglePasswordVisibilityButton = function TogglePasswordVisibilityButton(_re
 var index = /*#__PURE__*/forwardRef(TextInput);
 
 export { index as default };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/primitive/src/Inputs/TextInput/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../src/Inputs/TextInput/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useId, useState } from 'react';\n\nimport { IconHidden, IconVisible } from '@remember-web/icon';\n\nimport {\n  InputContainer,\n  InputDecorator,\n  InputError,\n  InputHintText,\n  InputInner,\n  InputLabel,\n  InputTogglePasswordVisibilityButton,\n  InputWrapper,\n} from './styles';\nimport type { InputProps } from './types';\n\nconst TextInput: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (\n  {\n    className,\n    label,\n    leftElement,\n    rightElement,\n    disabled,\n    hintText,\n    hintTextColor,\n    errorMessage,\n    width,\n    ...props\n  },\n  ref\n) => {\n  const inputId = useId();\n  const labelId = useId();\n  const [isVisiblePassword, setIsVisiblePassword] = useState(false);\n  const isForceVisibleInput =\n    props.type === 'password' &&\n    props.hasTogglePasswordVisibilityButton &&\n    isVisiblePassword;\n\n  return (\n    <InputWrapper $width={width}>\n      {label && (\n        <InputLabel id={labelId} htmlFor={inputId}>\n          {label}\n          {props.required && <mark>*</mark>}\n        </InputLabel>\n      )}\n      <InputContainer\n        disabled={disabled}\n        hasError={!!errorMessage}\n        className={className}\n      >\n        {leftElement && <InputDecorator>{leftElement}</InputDecorator>}\n        <InputInner\n          disabled={disabled}\n          id={inputId}\n          aria-labelledby={label ? labelId : undefined}\n          {...props}\n          type={isForceVisibleInput ? 'text' : props.type || 'text'}\n          ref={ref}\n        />\n        {hintText && (\n          <InputHintText textColor={hintTextColor}>{hintText}</InputHintText>\n        )}\n        {props.type === 'password' &&\n          props.hasTogglePasswordVisibilityButton && (\n            <TogglePasswordVisibilityButton\n              value={isVisiblePassword}\n              onChange={setIsVisiblePassword}\n            />\n          )}\n        {rightElement && <InputDecorator>{rightElement}</InputDecorator>}\n      </InputContainer>\n      {errorMessage && <InputError>{errorMessage}</InputError>}\n    </InputWrapper>\n  );\n};\n\nconst TogglePasswordVisibilityButton = ({\n  value,\n  onChange,\n}: {\n  value: boolean;\n  onChange: (value: boolean) => void;\n}) => (\n  <InputTogglePasswordVisibilityButton\n    type=\"button\"\n    role=\"switch\"\n    aria-checked={value ? 'true' : 'false'}\n    aria-label=\"비밀번호 표시\"\n    onClick={() => {\n      onChange(!value);\n    }}\n  >\n    {value ? <IconHidden size=\"small\" /> : <IconVisible size=\"small\" />}\n  </InputTogglePasswordVisibilityButton>\n);\n\nexport default forwardRef(TextInput);\n"],"names":["props","isVisiblePassword","setIsVisiblePassword","$width","children","id","htmlFor","disabled","className","ref","textColor","value","onChange","type","role","size"],"mappings":";;;;;;;;;AAAa;AAAA;AAAA;AAmBb;AAcK;;;;;;;;;AAHEA;AAIL;AACA;AACA;;AAAOC;AAAmBC;AAC1B;;AAMgBC;AAAcC;AAEZC;AAAaC;AAAiBF;AAErBA;AAAO;AAAO;AAInCG;;AAEAC;AAAqBJ;AAEUA;;AAE7BG;AACAF;;AAC6C;;AAG7CI;AAAS;AAGMC;AAAyBN;AAAU;AAK9CO;AACAC;AAA+B;AAGLR;AAAc;AAAkB;AAEtCA;AAAc;AAAc;AAG9D;AAEA;AAAoC;;;AAQhCS;AACAC;AACA;AACA;;;;AAGEV;AAEmBW;AAAY;AAAmBA;;AAAe;AAC/B;AAGxC;;"}

package/dist/primitive/src/Inputs/TextInput/styles.cjs

@@ -1,35 +1,56 @@
 "use client";
 'use strict';
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
 var mixin = require('@remember-web/mixin');
 var style = require('../../../../shared/utils/style.cjs');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-var InputWrapper = styled__default.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  ", ";\n"])), function (_ref) {
+var InputWrapper = styled__default.default.div.withConfig({
+  displayName: "styles__InputWrapper",
+  componentId: "sc-1ezvdso-0"
+})(["", ";"], function (_ref) {
   var $width = _ref.$width;
-  return $width && styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n      width: ", ";\n    "])), style.formatUnit($width));
+  return $width && styled.css(["width:", ";"], style.formatUnit($width));
 });
-var InputContainer = styled__default.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n  display: flex;\n  align-items: center;\n  border: 1px solid ", ";\n  border-radius: 4px;\n  padding: 0 12px;\n  gap: 8px;\n\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ", "\n"])), mixin.contents300, function (_ref2) {
+var InputContainer = styled__default.default.div.withConfig({
+  displayName: "styles__InputContainer",
+  componentId: "sc-1ezvdso-1"
+})(["display:flex;align-items:center;border:1px solid ", ";border-radius:4px;padding:0 12px;gap:8px;transition:border-color 0.2s,background-color 0.2s;", ""], mixin.contents300, function (_ref2) {
   var hasError = _ref2.hasError,
     disabled = _ref2.disabled;
-  return [hasError ? styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n          border-color: ", ";\n        "])), mixin.roleRed) : styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n          &:focus-within {\n            border-color: ", ";\n          }\n        "])), mixin.contents000), disabled && styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default(["\n        background-color: ", ";\n      "])), mixin.bg200)];
+  return [hasError ? styled.css(["border-color:", ";"], mixin.roleRed) : styled.css(["&:focus-within{border-color:", ";}"], mixin.contents000), disabled && styled.css(["background-color:", ";"], mixin.bg200)];
 });
-var InputDecorator = styled__default.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n  flex-shrink: 0;\n  /* Inline\uC694\uC18C\uAC00 \uB4E4\uC5B4\uC624\uBA74 \uAC15\uC81C\uB85C block\uC73C\uB85C \uCC98\uB9AC (\uC911\uC559\uC815\uB82C\uC744 \uC704\uD574) */\n  > * {\n    display: block;\n  }\n"])));
-var InputInner = styled__default.default.input(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default.default(["\n  ", "\n  color: ", ";\n\n  display: block;\n  flex-grow: 1;\n  width: 100%;\n  padding: 10px 0;\n  border: 0;\n  background-color: transparent;\n\n  &:placeholder-shown {\n    ", "\n  }\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n"])), mixin.getTypographyStyles('Body1_M'), mixin.contents000, mixin.ellipsis(), mixin.contents200);
-var InputLabel = styled__default.default.label(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default.default(["\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"])), mixin.getTypographyStyles('Headline4_B'), mixin.roleRed);
-var InputError = styled__default.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default.default(["\n  ", "\n  color: ", ";\n\n  margin-top: 8px;\n"])), mixin.getTypographyStyles('Body2_M'), mixin.roleRed);
-var InputHintText = styled__default.default.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default.default(["\n  ", "\n  color: ", ";\n  white-space: nowrap;\n"])), mixin.getTypographyStyles('Body1_M'), function (_ref3) {
+var InputDecorator = styled__default.default.div.withConfig({
+  displayName: "styles__InputDecorator",
+  componentId: "sc-1ezvdso-2"
+})(["flex-shrink:0;> *{display:block;}"]);
+var InputInner = styled__default.default.input.withConfig({
+  displayName: "styles__InputInner",
+  componentId: "sc-1ezvdso-3"
+})(["", " color:", ";display:block;flex-grow:1;width:100%;padding:10px 0;border:0;background-color:transparent;&:placeholder-shown{", "}&::placeholder{color:", ";}&:focus{outline:none;}"], mixin.getTypographyStyles('Body1_M'), mixin.contents000, mixin.ellipsis(), mixin.contents200);
+var InputLabel = styled__default.default.label.withConfig({
+  displayName: "styles__InputLabel",
+  componentId: "sc-1ezvdso-4"
+})(["", " display:block;margin-bottom:12px;display:flex;align-items:center;gap:4px;& > mark{all:unset;color:", ";}"], mixin.getTypographyStyles('Headline4_B'), mixin.roleRed);
+var InputError = styled__default.default.div.withConfig({
+  displayName: "styles__InputError",
+  componentId: "sc-1ezvdso-5"
+})(["", " color:", ";margin-top:8px;"], mixin.getTypographyStyles('Body2_M'), mixin.roleRed);
+var InputHintText = styled__default.default.span.withConfig({
+  displayName: "styles__InputHintText",
+  componentId: "sc-1ezvdso-6"
+})(["", " color:", ";white-space:nowrap;"], mixin.getTypographyStyles('Body1_M'), function (_ref3) {
   var textColor = _ref3.textColor;
   return textColor;
 });
-var InputTogglePasswordVisibilityButton = styled__default.default.button(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  flex-shrink: 0;\n\n  & > svg {\n    display: block;\n  }\n"])));
+var InputTogglePasswordVisibilityButton = styled__default.default.button.withConfig({
+  displayName: "styles__InputTogglePasswordVisibilityButton",
+  componentId: "sc-1ezvdso-7"
+})(["all:unset;appearance:none;cursor:pointer;flex-shrink:0;& > svg{display:block;}"]);
 
 exports.InputContainer = InputContainer;
 exports.InputDecorator = InputDecorator;

package/dist/primitive/src/Inputs/TextInput/styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","sources":["../../../../../src/Inputs/TextInput/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\n\nimport {\n  bg200,\n  contents000,\n  contents200,\n  contents300,\n  roleRed,\n} from '@remember-web/mixin';\nimport { ellipsis, getTypographyStyles } from '@remember-web/mixin';\nimport { formatUnit } from '@remember-web/shared/utils/style';\nimport { ColorVariable } from '@remember-web/mixin';\n\nexport const InputWrapper = styled.div<{ $width?: string | number }>`\n  ${({ $width }) =>\n    $width &&\n    css`\n      width: ${formatUnit($width)};\n    `};\n`;\n\nexport const InputContainer = styled.div<{\n  disabled?: boolean;\n  hasError?: boolean;\n}>`\n  display: flex;\n  align-items: center;\n  border: 1px solid ${contents300};\n  border-radius: 4px;\n  padding: 0 12px;\n  gap: 8px;\n\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ${({ hasError, disabled }) => [\n    hasError\n      ? css`\n          border-color: ${roleRed};\n        `\n      : css`\n          &:focus-within {\n            border-color: ${contents000};\n          }\n        `,\n    disabled &&\n      css`\n        background-color: ${bg200};\n      `,\n  ]}\n`;\n\nexport const InputDecorator = styled.div`\n  flex-shrink: 0;\n  /* Inline요소가 들어오면 강제로 block으로 처리 (중앙정렬을 위해) */\n  > * {\n    display: block;\n  }\n`;\n\nexport const InputInner = styled.input`\n  ${getTypographyStyles('Body1_M')}\n  color: ${contents000};\n\n  display: block;\n  flex-grow: 1;\n  width: 100%;\n  padding: 10px 0;\n  border: 0;\n  background-color: transparent;\n\n  &:placeholder-shown {\n    ${ellipsis()}\n  }\n\n  &::placeholder {\n    color: ${contents200};\n  }\n\n  &:focus {\n    outline: none;\n  }\n`;\n\nexport const InputLabel = 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\nexport const InputError = styled.div`\n  ${getTypographyStyles('Body2_M')}\n  color: ${roleRed};\n\n  margin-top: 8px;\n`;\n\nexport const InputHintText = styled.span<{ textColor?: ColorVariable }>`\n  ${getTypographyStyles('Body1_M')}\n  color: ${({ textColor }) => textColor};\n  white-space: nowrap;\n`;\n\nexport const InputTogglePasswordVisibilityButton = styled.button`\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  flex-shrink: 0;\n\n  & > svg {\n    display: block;\n  }\n`;\n"],"names":["InputWrapper","InputDecorator","InputTogglePasswordVisibilityButton"],"mappings":";;;;;;;;;;;;;AAAa;AAeAA;AACT;AAAS;AAIR;;AAgBD;;AAAqB;AActB;AAGUC;AAQN;;;;AA+CI;AAAY;AAAgB;AAI1BC;;;;;;;;;"}
+{"version":3,"file":"styles.cjs","sources":["../../../../../src/Inputs/TextInput/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\n\nimport {\n  bg200,\n  contents000,\n  contents200,\n  contents300,\n  roleRed,\n} from '@remember-web/mixin';\nimport { ellipsis, getTypographyStyles } from '@remember-web/mixin';\nimport { formatUnit } from '@remember-web/shared/utils/style';\nimport { ColorVariable } from '@remember-web/mixin';\n\nexport const InputWrapper = styled.div<{ $width?: string | number }>`\n  ${({ $width }) =>\n    $width &&\n    css`\n      width: ${formatUnit($width)};\n    `};\n`;\n\nexport const InputContainer = styled.div<{\n  disabled?: boolean;\n  hasError?: boolean;\n}>`\n  display: flex;\n  align-items: center;\n  border: 1px solid ${contents300};\n  border-radius: 4px;\n  padding: 0 12px;\n  gap: 8px;\n\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ${({ hasError, disabled }) => [\n    hasError\n      ? css`\n          border-color: ${roleRed};\n        `\n      : css`\n          &:focus-within {\n            border-color: ${contents000};\n          }\n        `,\n    disabled &&\n      css`\n        background-color: ${bg200};\n      `,\n  ]}\n`;\n\nexport const InputDecorator = styled.div`\n  flex-shrink: 0;\n  /* Inline요소가 들어오면 강제로 block으로 처리 (중앙정렬을 위해) */\n  > * {\n    display: block;\n  }\n`;\n\nexport const InputInner = styled.input`\n  ${getTypographyStyles('Body1_M')}\n  color: ${contents000};\n\n  display: block;\n  flex-grow: 1;\n  width: 100%;\n  padding: 10px 0;\n  border: 0;\n  background-color: transparent;\n\n  &:placeholder-shown {\n    ${ellipsis()}\n  }\n\n  &::placeholder {\n    color: ${contents200};\n  }\n\n  &:focus {\n    outline: none;\n  }\n`;\n\nexport const InputLabel = 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\nexport const InputError = styled.div`\n  ${getTypographyStyles('Body2_M')}\n  color: ${roleRed};\n\n  margin-top: 8px;\n`;\n\nexport const InputHintText = styled.span<{ textColor?: ColorVariable }>`\n  ${getTypographyStyles('Body1_M')}\n  color: ${({ textColor }) => textColor};\n  white-space: nowrap;\n`;\n\nexport const InputTogglePasswordVisibilityButton = styled.button`\n  all: unset;\n  appearance: none;\n  cursor: pointer;\n  flex-shrink: 0;\n\n  & > svg {\n    display: block;\n  }\n`;\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAesC;AAClC;;AAIC;;;;AAGmC;AAapC;;AAAqB;AActB;;;;AAGqC;;;;AAQF;;;;AAwBA;;;;AAcF;;;;AAOI;AAE7B;AAAY;AAAgB;;;;AAIyB;;;;;;;;;"}