@remember-web/primitive 0.1.4 → 0.1.6

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

@@ -3,9 +3,9 @@ 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.esm.js';
-import useMouseEventAway from '../../../hooks/useMouseEventAway.esm.js';
 import { IconArrow2Up, IconArrow2Down } from '@remember-web/icon';
+import useMouseEventAway from '../../../hooks/useMouseEventAway.esm.js';
+import { focusSibling } from '../utils.esm.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';

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

@@ -1 +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;;"}
+{"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';\nimport { IconArrow2Down, IconArrow2Up } from '@remember-web/icon';\n\nimport useMouseEventAway from '@/hooks/useMouseEventAway';\n\nimport { focusSibling } from '../utils';\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/NativeSelect/index.cjs.js.map

@@ -1 +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;;"}
+{"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';\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;AAUb;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.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare const _default: import("react").ForwardRefExoticComponent<Omit<import("react").SelectHTMLAttributes<HTMLSelectElement>, `aria-${string}` | "children"> & {
-    children: import("react").ReactElement<import("../../../Inputs/Select/types").OptionProps<string>, <Value extends import("../../../Inputs/Select/types").SelectValue = string>({ children, disabled, value, }: import("../../../Inputs/Select/types").OptionProps<Value>) => import("react/jsx-runtime").JSX.Element> | import("react").ReactElement<import("../../../Inputs/Select/types").OptionProps<string>, <Value extends import("../../../Inputs/Select/types").SelectValue = string>({ children, disabled, value, }: import("../../../Inputs/Select/types").OptionProps<Value>) => import("react/jsx-runtime").JSX.Element>[];
+    children: import("react").ReactElement<import("../types").OptionProps<string>, <Value extends import("../types").SelectValue = string>({ children, disabled, value, }: import("../types").OptionProps<Value>) => import("react/jsx-runtime").JSX.Element> | import("react").ReactElement<import("../types").OptionProps<string>, <Value extends import("../types").SelectValue = string>({ children, disabled, value, }: import("../types").OptionProps<Value>) => import("react/jsx-runtime").JSX.Element>[];
     width?: string | number | undefined;
     placeholder?: string | undefined;
 } & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/primitive/src/Inputs/Select/NativeSelect/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"names":[],"mappings":";;;;;;AA4CA,wBAAwC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"names":[],"mappings":";;;;;;AA2CA,wBAAwC"}

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

@@ -1 +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;;"}
+{"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';\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;AAUb;AAMK;;;;;;AAF4DA;AAG/D;;AAGmB;AAAyBC;;AAGtCC;AACAC;AACAC;AACAC;AACAC;AAAmBC;AAGTL;;;;AAID;;AAGOM;;AAAe;AAChB;AAGvB;AAEA;;"}

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

@@ -4,7 +4,7 @@ import TextInput from '.';
 type Story = StoryObj<typeof TextInput>;
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("../../Inputs/TextInput/types").InputProps & import("react").RefAttributes<HTMLInputElement>>;
+    component: import("react").ForwardRefExoticComponent<import("./types").InputProps & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         type: {
             control: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","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;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Inputs/TextInput/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useId, useState } from 'react';\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;AAkBb;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/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/TextInput/index.tsx"],"names":[],"mappings":";AAiBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;;AAoF1C,wBAAqC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/TextInput/index.tsx"],"names":[],"mappings":";AAgBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;;AAoF1C,wBAAqC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","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;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/Inputs/TextInput/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useId, useState } from 'react';\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;AAkBb;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.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs.js","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.js","sources":["../../../../../src/Inputs/TextInput/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport type { ColorVariable } from '@remember-web/mixin';\nimport {\n  bg200,\n  contents000,\n  contents200,\n  contents300,\n  roleRed,\n  ellipsis,\n  getTypographyStyles,\n} from '@remember-web/mixin';\nimport { formatUnit } from '@remember-web/shared/utils/style';\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;;;;;;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"styles.esm.js","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.esm.js","sources":["../../../../../src/Inputs/TextInput/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport type { ColorVariable } from '@remember-web/mixin';\nimport {\n  bg200,\n  contents000,\n  contents200,\n  contents300,\n  roleRed,\n  ellipsis,\n  getTypographyStyles,\n} from '@remember-web/mixin';\nimport { formatUnit } from '@remember-web/shared/utils/style';\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;;"}

package/dist/primitive/src/Inputs/TextInput/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/TextInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD,KAAK,cAAc,GAAG,IAAI,CACxB,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,QAAQ,MAAM,EAAE,CACjB,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,IAAI,CAAC,EACD,MAAM,GACN,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,KAAK,GACL,KAAK,GACL,MAAM,GACN,gBAAgB,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG;IACvD,IAAI,EAAE,UAAU,CAAC;IACjB,iCAAiC,EAAE,OAAO,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,CAAC,cAAc,GAAG,kBAAkB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/TextInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD,KAAK,cAAc,GAAG,IAAI,CACxB,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,QAAQ,MAAM,EAAE,CACjB,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,IAAI,CAAC,EACD,MAAM,GACN,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,KAAK,GACL,KAAK,GACL,MAAM,GACN,gBAAgB,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,kBAAkB,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG;IACvD,IAAI,EAAE,UAAU,CAAC;IACjB,iCAAiC,EAAE,OAAO,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,CAAC,cAAc,GAAG,kBAAkB,CAAC,CAAC"}

package/dist/primitive/src/Logos/RememberLogo/RememberLogo.stories.d.ts

@@ -3,7 +3,7 @@ import { RememberLogo } from './index';
 type Story = StoryObj<typeof RememberLogo>;
 declare const meta: {
     title: string;
-    component: ({ className, color, height, env, customElement, ref, ...props }: import("../../Logos/types").RememberLogoProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ className, color, height, env, customElement, ref, ...props }: import("../types").RememberLogoProps) => import("react/jsx-runtime").JSX.Element;
     args: {
         color: string;
         height: number;

package/dist/primitive/src/Logos/RememberMobileLogo/RememberMobileLogo.stories.d.ts

@@ -3,7 +3,7 @@ import { RememberMobileLogo } from '.';
 type Story = StoryObj<typeof RememberMobileLogo>;
 declare const meta: {
     title: string;
-    component: ({ className, color, height, customElement, ref, ...props }: import("../../Logos/types").RememberLogoProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ className, color, height, customElement, ref, ...props }: import("../types").RememberLogoProps) => import("react/jsx-runtime").JSX.Element;
     args: {
         color: string;
         height: number;

package/dist/primitive/src/Logos/RememberServiceLogo/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Logos/RememberServiceLogo/index.tsx"],"sourcesContent":["import type { RememberLogoProps } from '@/Logos/types';\n\nimport { Divider } from '@/Common';\nimport { GetStyledComponentProps } from '@remember-web/shared/types';\nimport { RememberLogo } from '../RememberLogo';\nimport { StyledServiceLogoRoot } from './style';\n\nexport type GnbNaviLogoProps<As> = GetStyledComponentProps<\n  typeof StyledServiceLogoRoot,\n  As\n> & {\n  label?: string;\n  color?: RememberLogoProps['color'];\n};\n\nexport const RememberServiceLogo = <As,>({\n  label,\n  color = 'black',\n  ...props\n}: GnbNaviLogoProps<As>) => (\n  <StyledServiceLogoRoot {...props}>\n    <RememberLogo color={color} />\n    {label && (\n      <>\n        <Divider decorative orientation=\"vertical\" style={{ height: '15px' }} />\n        <b>{label}</b>\n      </>\n    )}\n  </StyledServiceLogoRoot>\n);\n"],"names":["RememberServiceLogo","_ref","label","_ref$color","color","props","_objectWithoutProperties","_excluded","_jsxs","StyledServiceLogoRoot","_objectSpread","children","_jsx","RememberLogo","_Fragment","Divider","decorative","orientation","style","height"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;IAeaA,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAC9BC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAAC,UAAA,GAAAF,IAAA,CACLG,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,UAAA;AACZE,IAAAA,KAAK,GAAAC,yCAAA,CAAAL,IAAA,EAAAM,SAAA,CAAA,CAAA;EAAA,oBAERC,eAAA,CAACC,2BAAqB,EAAAC,aAAA,CAAAA,aAAA,KAAKL,KAAK,CAAA,EAAA,EAAA,EAAA;IAAAM,QAAA,EAAA,cAC9BC,cAAA,CAACC,kBAAY,EAAA;AAACT,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAE,CAAC,EAC7BF,KAAK,iBACJM,eAAA,CAAAM,mBAAA,EAAA;MAAAH,QAAA,EAAA,cACEC,cAAA,CAACG,eAAO,EAAA;QAACC,UAAU,EAAA,IAAA;AAACC,QAAAA,WAAW,EAAC,UAAU;AAACC,QAAAA,KAAK,EAAE;AAAEC,UAAAA,MAAM,EAAE,MAAA;AAAO,SAAA;OAAI,CAAC,eACxEP,cAAA,CAAA,GAAA,EAAA;AAAAD,QAAAA,QAAA,EAAIT,KAAAA;AAAK,OAAI,CAAC,CAAA;AAAA,KACd,CACH,CAAA;AAAA,GAAA,CACoB,CAAC,CAAA;AAAA;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Logos/RememberServiceLogo/index.tsx"],"sourcesContent":["import type { GetStyledComponentProps } from '@remember-web/shared/types';\n\nimport type { RememberLogoProps } from '@/Logos/types';\nimport { Divider } from '@/Common';\n\nimport { RememberLogo } from '../RememberLogo';\nimport { StyledServiceLogoRoot } from './style';\n\nexport type GnbNaviLogoProps<As> = GetStyledComponentProps<\n  typeof StyledServiceLogoRoot,\n  As\n> & {\n  label?: string;\n  color?: RememberLogoProps['color'];\n};\n\nexport const RememberServiceLogo = <As,>({\n  label,\n  color = 'black',\n  ...props\n}: GnbNaviLogoProps<As>) => (\n  <StyledServiceLogoRoot {...props}>\n    <RememberLogo color={color} />\n    {label && (\n      <>\n        <Divider decorative orientation=\"vertical\" style={{ height: '15px' }} />\n        <b>{label}</b>\n      </>\n    )}\n  </StyledServiceLogoRoot>\n);\n"],"names":["RememberServiceLogo","_ref","label","_ref$color","color","props","_objectWithoutProperties","_excluded","_jsxs","StyledServiceLogoRoot","_objectSpread","children","_jsx","RememberLogo","_Fragment","Divider","decorative","orientation","style","height"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;IAgBaA,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAC9BC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAAC,UAAA,GAAAF,IAAA,CACLG,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,UAAA;AACZE,IAAAA,KAAK,GAAAC,yCAAA,CAAAL,IAAA,EAAAM,SAAA,CAAA,CAAA;EAAA,oBAERC,eAAA,CAACC,2BAAqB,EAAAC,aAAA,CAAAA,aAAA,KAAKL,KAAK,CAAA,EAAA,EAAA,EAAA;IAAAM,QAAA,EAAA,cAC9BC,cAAA,CAACC,kBAAY,EAAA;AAACT,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAE,CAAC,EAC7BF,KAAK,iBACJM,eAAA,CAAAM,mBAAA,EAAA;MAAAH,QAAA,EAAA,cACEC,cAAA,CAACG,eAAO,EAAA;QAACC,UAAU,EAAA,IAAA;AAACC,QAAAA,WAAW,EAAC,UAAU;AAACC,QAAAA,KAAK,EAAE;AAAEC,UAAAA,MAAM,EAAE,MAAA;AAAO,SAAA;OAAI,CAAC,eACxEP,cAAA,CAAA,GAAA,EAAA;AAAAD,QAAAA,QAAA,EAAIT,KAAAA;AAAK,OAAI,CAAC,CAAA;AAAA,KACd,CACH,CAAA;AAAA,GAAA,CACoB,CAAC,CAAA;AAAA;;;;"}

package/dist/primitive/src/Logos/RememberServiceLogo/index.d.ts

@@ -1,5 +1,5 @@
+import type { GetStyledComponentProps } from '@remember-web/shared/types';
 import type { RememberLogoProps } from '../../Logos/types';
-import { GetStyledComponentProps } from '@remember-web/shared/types';
 import { StyledServiceLogoRoot } from './style';
 export type GnbNaviLogoProps<As> = GetStyledComponentProps<typeof StyledServiceLogoRoot, As> & {
     label?: string;

package/dist/primitive/src/Logos/RememberServiceLogo/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Logos/RememberServiceLogo/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAErE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEhD,MAAM,MAAM,gBAAgB,CAAC,EAAE,IAAI,uBAAuB,CACxD,OAAO,qBAAqB,EAC5B,EAAE,CACH,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,mBAAmB,mCAI7B,iBAAiB,EAAE,CAAC,4CAUtB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Logos/RememberServiceLogo/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAE1E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAIvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEhD,MAAM,MAAM,gBAAgB,CAAC,EAAE,IAAI,uBAAuB,CACxD,OAAO,qBAAqB,EAC5B,EAAE,CACH,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,mBAAmB,mCAI7B,iBAAiB,EAAE,CAAC,4CAUtB,CAAC"}

package/dist/primitive/src/Logos/RememberServiceLogo/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../src/Logos/RememberServiceLogo/index.tsx"],"sourcesContent":["import type { RememberLogoProps } from '@/Logos/types';\n\nimport { Divider } from '@/Common';\nimport { GetStyledComponentProps } from '@remember-web/shared/types';\nimport { RememberLogo } from '../RememberLogo';\nimport { StyledServiceLogoRoot } from './style';\n\nexport type GnbNaviLogoProps<As> = GetStyledComponentProps<\n  typeof StyledServiceLogoRoot,\n  As\n> & {\n  label?: string;\n  color?: RememberLogoProps['color'];\n};\n\nexport const RememberServiceLogo = <As,>({\n  label,\n  color = 'black',\n  ...props\n}: GnbNaviLogoProps<As>) => (\n  <StyledServiceLogoRoot {...props}>\n    <RememberLogo color={color} />\n    {label && (\n      <>\n        <Divider decorative orientation=\"vertical\" style={{ height: '15px' }} />\n        <b>{label}</b>\n      </>\n    )}\n  </StyledServiceLogoRoot>\n);\n"],"names":["RememberServiceLogo","_ref","label","_ref$color","color","props","_objectWithoutProperties","_excluded","_jsxs","StyledServiceLogoRoot","_objectSpread","children","_jsx","RememberLogo","_Fragment","Divider","decorative","orientation","style","height"],"mappings":";;;;;;;;;;;;;;;;IAeaA,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAC9BC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAAC,UAAA,GAAAF,IAAA,CACLG,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,UAAA;AACZE,IAAAA,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA,CAAA,CAAA;EAAA,oBAERC,IAAA,CAACC,qBAAqB,EAAAC,aAAA,CAAAA,aAAA,KAAKL,KAAK,CAAA,EAAA,EAAA,EAAA;IAAAM,QAAA,EAAA,cAC9BC,GAAA,CAACC,YAAY,EAAA;AAACT,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAE,CAAC,EAC7BF,KAAK,iBACJM,IAAA,CAAAM,QAAA,EAAA;MAAAH,QAAA,EAAA,cACEC,GAAA,CAACG,OAAO,EAAA;QAACC,UAAU,EAAA,IAAA;AAACC,QAAAA,WAAW,EAAC,UAAU;AAACC,QAAAA,KAAK,EAAE;AAAEC,UAAAA,MAAM,EAAE,MAAA;AAAO,SAAA;OAAI,CAAC,eACxEP,GAAA,CAAA,GAAA,EAAA;AAAAD,QAAAA,QAAA,EAAIT,KAAAA;AAAK,OAAI,CAAC,CAAA;AAAA,KACd,CACH,CAAA;AAAA,GAAA,CACoB,CAAC,CAAA;AAAA;;;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/Logos/RememberServiceLogo/index.tsx"],"sourcesContent":["import type { GetStyledComponentProps } from '@remember-web/shared/types';\n\nimport type { RememberLogoProps } from '@/Logos/types';\nimport { Divider } from '@/Common';\n\nimport { RememberLogo } from '../RememberLogo';\nimport { StyledServiceLogoRoot } from './style';\n\nexport type GnbNaviLogoProps<As> = GetStyledComponentProps<\n  typeof StyledServiceLogoRoot,\n  As\n> & {\n  label?: string;\n  color?: RememberLogoProps['color'];\n};\n\nexport const RememberServiceLogo = <As,>({\n  label,\n  color = 'black',\n  ...props\n}: GnbNaviLogoProps<As>) => (\n  <StyledServiceLogoRoot {...props}>\n    <RememberLogo color={color} />\n    {label && (\n      <>\n        <Divider decorative orientation=\"vertical\" style={{ height: '15px' }} />\n        <b>{label}</b>\n      </>\n    )}\n  </StyledServiceLogoRoot>\n);\n"],"names":["RememberServiceLogo","_ref","label","_ref$color","color","props","_objectWithoutProperties","_excluded","_jsxs","StyledServiceLogoRoot","_objectSpread","children","_jsx","RememberLogo","_Fragment","Divider","decorative","orientation","style","height"],"mappings":";;;;;;;;;;;;;;;;IAgBaA,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAC9BC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAAC,UAAA,GAAAF,IAAA,CACLG,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,UAAA;AACZE,IAAAA,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA,CAAA,CAAA;EAAA,oBAERC,IAAA,CAACC,qBAAqB,EAAAC,aAAA,CAAAA,aAAA,KAAKL,KAAK,CAAA,EAAA,EAAA,EAAA;IAAAM,QAAA,EAAA,cAC9BC,GAAA,CAACC,YAAY,EAAA;AAACT,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAE,CAAC,EAC7BF,KAAK,iBACJM,IAAA,CAAAM,QAAA,EAAA;MAAAH,QAAA,EAAA,cACEC,GAAA,CAACG,OAAO,EAAA;QAACC,UAAU,EAAA,IAAA;AAACC,QAAAA,WAAW,EAAC,UAAU;AAACC,QAAAA,KAAK,EAAE;AAAEC,UAAAA,MAAM,EAAE,MAAA;AAAO,SAAA;OAAI,CAAC,eACxEP,GAAA,CAAA,GAAA,EAAA;AAAAD,QAAAA,QAAA,EAAIT,KAAAA;AAAK,OAAI,CAAC,CAAA;AAAA,KACd,CACH,CAAA;AAAA,GAAA,CACoB,CAAC,CAAA;AAAA;;;;"}

package/dist/primitive/src/Logos/RememberServiceLogo/style.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.cjs.js","sources":["../../../../../src/Logos/RememberServiceLogo/style.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { contents000, getTypographyStyles } from '@remember-web/mixin';\n\nexport const StyledServiceLogoRoot = styled.a`\n  box-sizing: border-box;\n  text-decoration: none;\n  color: ${contents000};\n\n  display: flex;\n  align-items: end;\n  gap: 8px;\n\n  > b {\n    ${getTypographyStyles('Title2')};\n    text-decoration: none;\n    line-height: 16px;\n  }\n`;\n"],"names":["StyledServiceLogoRoot","styled","a","_templateObject","_taggedTemplateLiteral","contents000","getTypographyStyles"],"mappings":";;;;;;;;;;;;IAIaA,qBAAqB,GAAGC,uBAAM,CAACC,CAAC,CAAAC,eAAA,KAAAA,eAAA,GAAAC,uCAAA,qNAGlCC,iBAAW,EAOhBC,yBAAmB,CAAC,QAAQ,CAAC;;;;"}
+{"version":3,"file":"style.cjs.js","sources":["../../../../../src/Logos/RememberServiceLogo/style.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { contents000, getTypographyStyles } from '@remember-web/mixin';\n\nexport const StyledServiceLogoRoot = styled.a`\n  box-sizing: border-box;\n  text-decoration: none;\n  color: ${contents000};\n\n  display: flex;\n  align-items: end;\n  gap: 8px;\n\n  > b {\n    ${getTypographyStyles('Title2')};\n    text-decoration: none;\n    line-height: 16px;\n  }\n`;\n"],"names":["StyledServiceLogoRoot","styled","a","_templateObject","_taggedTemplateLiteral","contents000","getTypographyStyles"],"mappings":";;;;;;;;;;;;IAGaA,qBAAqB,GAAGC,uBAAM,CAACC,CAAC,CAAAC,eAAA,KAAAA,eAAA,GAAAC,uCAAA,qNAGlCC,iBAAW,EAOhBC,yBAAmB,CAAC,QAAQ,CAAC;;;;"}

package/dist/primitive/src/Logos/RememberServiceLogo/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../../src/Logos/RememberServiceLogo/style.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,qBAAqB,4NAcjC,CAAC"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../../src/Logos/RememberServiceLogo/style.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,qBAAqB,4NAcjC,CAAC"}

package/dist/primitive/src/Logos/RememberServiceLogo/style.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.esm.js","sources":["../../../../../src/Logos/RememberServiceLogo/style.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { contents000, getTypographyStyles } from '@remember-web/mixin';\n\nexport const StyledServiceLogoRoot = styled.a`\n  box-sizing: border-box;\n  text-decoration: none;\n  color: ${contents000};\n\n  display: flex;\n  align-items: end;\n  gap: 8px;\n\n  > b {\n    ${getTypographyStyles('Title2')};\n    text-decoration: none;\n    line-height: 16px;\n  }\n`;\n"],"names":["StyledServiceLogoRoot","styled","a","_templateObject","_taggedTemplateLiteral","contents000","getTypographyStyles"],"mappings":";;;;;IAIaA,qBAAqB,GAAGC,MAAM,CAACC,CAAC,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,qNAGlCC,WAAW,EAOhBC,mBAAmB,CAAC,QAAQ,CAAC;;;;"}
+{"version":3,"file":"style.esm.js","sources":["../../../../../src/Logos/RememberServiceLogo/style.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { contents000, getTypographyStyles } from '@remember-web/mixin';\n\nexport const StyledServiceLogoRoot = styled.a`\n  box-sizing: border-box;\n  text-decoration: none;\n  color: ${contents000};\n\n  display: flex;\n  align-items: end;\n  gap: 8px;\n\n  > b {\n    ${getTypographyStyles('Title2')};\n    text-decoration: none;\n    line-height: 16px;\n  }\n`;\n"],"names":["StyledServiceLogoRoot","styled","a","_templateObject","_taggedTemplateLiteral","contents000","getTypographyStyles"],"mappings":";;;;;IAGaA,qBAAqB,GAAGC,MAAM,CAACC,CAAC,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,qNAGlCC,WAAW,EAOhBC,mBAAmB,CAAC,QAAQ,CAAC;;;;"}

package/dist/primitive/src/Logos/RememberSquareLogo/RememberSquareLogo.stories.d.ts

@@ -3,7 +3,7 @@ import { RememberSquareLogo } from '.';
 type Story = StoryObj<typeof RememberSquareLogo>;
 declare const meta: {
     title: string;
-    component: ({ className, backgroundColor, color, height, customElement, ref, ...props }: import("../../Logos/types").RememberLogoProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ className, backgroundColor, color, height, customElement, ref, ...props }: import("../types").RememberLogoProps) => import("react/jsx-runtime").JSX.Element;
     args: {
         color: string;
         height: number;

package/dist/primitive/src/Modals/Dialog/index.cjs.js

@@ -4,8 +4,8 @@
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var DialogPrimitive = require('@radix-ui/react-dialog');
-var index = require('../../Common/Flex/index.cjs.js');
 var icon = require('@remember-web/icon');
+var index = require('../../Common/Flex/index.cjs.js');
 var styles = require('./styles.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 

package/dist/primitive/src/Modals/Dialog/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Modals/Dialog/index.tsx"],"sourcesContent":["'use client';\n\nimport type { DialogContentProps, DialogProps } from '@radix-ui/react-dialog';\nimport { Root, Trigger, Close, Portal } from '@radix-ui/react-dialog';\n\nimport { Flex } from '@/Common/Flex';\nimport { IconClose, PictogramAlert, PictogramCheck } from '@remember-web/icon';\n\nimport {\n  DialogContent,\n  DialogDescription,\n  DialogIcon,\n  DialogTitle,\n  IconButton,\n  StyledOverlay,\n} from './styles';\n\ninterface ContentProps extends DialogContentProps {\n  children: React.ReactNode;\n  dimmed?: boolean;\n}\n\n/**\n * @prop {React.ReactNode} children\n * @prop {boolean} open\n * @prop {boolean} defaultOpen\n * @prop {(open: boolean) => void} onOpenChange\n * @prop {boolean} modal\n * @prop {string} id\n */\nexport function Dialog({ children, ...props }: DialogProps) {\n  return <Root {...props}>{children}</Root>;\n}\n\n/**\n * @prop {boolean} dimmed\n * @see https://www.radix-ui.com/docs/primitives/components/dialog\n */\nDialog.Content = ({ children, dimmed = true, ...props }: ContentProps) => (\n  <Portal>\n    {dimmed && <StyledOverlay />}\n    <DialogContent {...props}>\n      <Flex direction=\"column\" align=\"center\">\n        {children}\n      </Flex>\n    </DialogContent>\n  </Portal>\n);\n\nDialog.HeadIcon = ({ type = 'alert' }: { type?: 'alert' | 'confirm' }) => (\n  <DialogIcon>\n    {type === 'alert' && <PictogramAlert size={40} />}\n    {type === 'confirm' && <PictogramCheck size={40} />}\n  </DialogIcon>\n);\n\nDialog.CloseIcon = () => (\n  <Close asChild>\n    <IconButton type=\"button\" aria-label=\"Close\">\n      <IconClose size=\"small\" />\n    </IconButton>\n  </Close>\n);\n\nDialog.Title = ({ children }: { children: React.ReactNode }) => (\n  <DialogTitle>{children}</DialogTitle>\n);\n\nDialog.Description = ({ children }: { children: React.ReactNode }) => (\n  <DialogDescription>{children}</DialogDescription>\n);\n\nDialog.Trigger = Trigger;\nDialog.Close = Close;\n"],"names":["props","children","Dialog","dimmed","direction","align","type","size"],"mappings":";;;;;;;;;;;;;;;;AAAa;;AAAA;AAAA;AAsBb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AAAqD;AAAtBA;;AACdC;AAAW;AACnC;;AAEA;AACA;AACA;AACA;AACAC;AAAiB;;AAAaC;AAAkBH;;AACvCC;;AAGGG;AAAmBC;AAAcJ;;AAEhC;AACO;AACT;AAGXC;AAAkB;AAAGI;;AACRL;AAC4BM;;AACEA;AAAS;AAAG;AACxC;AAGfL;;;;AAEgBI;AAAc;;AACbC;;;AACA;AACP;AAGVL;AAAe;;AACDD;AAAU;AAAe;AAGvCC;AAAqB;;AACDD;AAAU;AAAqB;AAGnDC;AACAA;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Modals/Dialog/index.tsx"],"sourcesContent":["'use client';\n\nimport type { DialogContentProps, DialogProps } from '@radix-ui/react-dialog';\nimport { Root, Trigger, Close, Portal } from '@radix-ui/react-dialog';\nimport { IconClose, PictogramAlert, PictogramCheck } from '@remember-web/icon';\n\nimport { Flex } from '@/Common/Flex';\n\nimport {\n  DialogContent,\n  DialogDescription,\n  DialogIcon,\n  DialogTitle,\n  IconButton,\n  StyledOverlay,\n} from './styles';\n\ninterface ContentProps extends DialogContentProps {\n  children: React.ReactNode;\n  dimmed?: boolean;\n}\n\n/**\n * @prop {React.ReactNode} children\n * @prop {boolean} open\n * @prop {boolean} defaultOpen\n * @prop {(open: boolean) => void} onOpenChange\n * @prop {boolean} modal\n * @prop {string} id\n */\nexport function Dialog({ children, ...props }: DialogProps) {\n  return <Root {...props}>{children}</Root>;\n}\n\n/**\n * @prop {boolean} dimmed\n * @see https://www.radix-ui.com/docs/primitives/components/dialog\n */\nDialog.Content = ({ children, dimmed = true, ...props }: ContentProps) => (\n  <Portal>\n    {dimmed && <StyledOverlay />}\n    <DialogContent {...props}>\n      <Flex direction=\"column\" align=\"center\">\n        {children}\n      </Flex>\n    </DialogContent>\n  </Portal>\n);\n\nDialog.HeadIcon = ({ type = 'alert' }: { type?: 'alert' | 'confirm' }) => (\n  <DialogIcon>\n    {type === 'alert' && <PictogramAlert size={40} />}\n    {type === 'confirm' && <PictogramCheck size={40} />}\n  </DialogIcon>\n);\n\nDialog.CloseIcon = () => (\n  <Close asChild>\n    <IconButton type=\"button\" aria-label=\"Close\">\n      <IconClose size=\"small\" />\n    </IconButton>\n  </Close>\n);\n\nDialog.Title = ({ children }: { children: React.ReactNode }) => (\n  <DialogTitle>{children}</DialogTitle>\n);\n\nDialog.Description = ({ children }: { children: React.ReactNode }) => (\n  <DialogDescription>{children}</DialogDescription>\n);\n\nDialog.Trigger = Trigger;\nDialog.Close = Close;\n"],"names":["props","children","Dialog","dimmed","direction","align","type","size"],"mappings":";;;;;;;;;;;;;;;;AAAa;;AAAA;AAAA;AAsBb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AAAqD;AAAtBA;;AACdC;AAAW;AACnC;;AAEA;AACA;AACA;AACA;AACAC;AAAiB;;AAAaC;AAAkBH;;AACvCC;;AAGGG;AAAmBC;AAAcJ;;AAEhC;AACO;AACT;AAGXC;AAAkB;AAAGI;;AACRL;AAC4BM;;AACEA;AAAS;AAAG;AACxC;AAGfL;;;;AAEgBI;AAAc;;AACbC;;;AACA;AACP;AAGVL;AAAe;;AACDD;AAAU;AAAe;AAGvCC;AAAqB;;AACDD;AAAU;AAAqB;AAGnDC;AACAA;;"}

package/dist/primitive/src/Modals/Dialog/index.esm.js

@@ -2,8 +2,8 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { Root, Portal, Close, Trigger } from '@radix-ui/react-dialog';
-import { Flex } from '../../Common/Flex/index.esm.js';
 import { PictogramAlert, PictogramCheck, IconClose } from '@remember-web/icon';
+import { Flex } from '../../Common/Flex/index.esm.js';
 import { StyledOverlay, DialogContent, DialogIcon, IconButton, DialogTitle, DialogDescription } from './styles.esm.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/primitive/src/Modals/Dialog/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../src/Modals/Dialog/index.tsx"],"sourcesContent":["'use client';\n\nimport type { DialogContentProps, DialogProps } from '@radix-ui/react-dialog';\nimport { Root, Trigger, Close, Portal } from '@radix-ui/react-dialog';\n\nimport { Flex } from '@/Common/Flex';\nimport { IconClose, PictogramAlert, PictogramCheck } from '@remember-web/icon';\n\nimport {\n  DialogContent,\n  DialogDescription,\n  DialogIcon,\n  DialogTitle,\n  IconButton,\n  StyledOverlay,\n} from './styles';\n\ninterface ContentProps extends DialogContentProps {\n  children: React.ReactNode;\n  dimmed?: boolean;\n}\n\n/**\n * @prop {React.ReactNode} children\n * @prop {boolean} open\n * @prop {boolean} defaultOpen\n * @prop {(open: boolean) => void} onOpenChange\n * @prop {boolean} modal\n * @prop {string} id\n */\nexport function Dialog({ children, ...props }: DialogProps) {\n  return <Root {...props}>{children}</Root>;\n}\n\n/**\n * @prop {boolean} dimmed\n * @see https://www.radix-ui.com/docs/primitives/components/dialog\n */\nDialog.Content = ({ children, dimmed = true, ...props }: ContentProps) => (\n  <Portal>\n    {dimmed && <StyledOverlay />}\n    <DialogContent {...props}>\n      <Flex direction=\"column\" align=\"center\">\n        {children}\n      </Flex>\n    </DialogContent>\n  </Portal>\n);\n\nDialog.HeadIcon = ({ type = 'alert' }: { type?: 'alert' | 'confirm' }) => (\n  <DialogIcon>\n    {type === 'alert' && <PictogramAlert size={40} />}\n    {type === 'confirm' && <PictogramCheck size={40} />}\n  </DialogIcon>\n);\n\nDialog.CloseIcon = () => (\n  <Close asChild>\n    <IconButton type=\"button\" aria-label=\"Close\">\n      <IconClose size=\"small\" />\n    </IconButton>\n  </Close>\n);\n\nDialog.Title = ({ children }: { children: React.ReactNode }) => (\n  <DialogTitle>{children}</DialogTitle>\n);\n\nDialog.Description = ({ children }: { children: React.ReactNode }) => (\n  <DialogDescription>{children}</DialogDescription>\n);\n\nDialog.Trigger = Trigger;\nDialog.Close = Close;\n"],"names":["props","children","Dialog","dimmed","direction","align","type","size"],"mappings":";;;;;;;;;AAAa;;AAAA;AAAA;AAsBb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AAAqD;AAAtBA;;AACdC;AAAW;AACnC;;AAEA;AACA;AACA;AACA;AACAC;AAAiB;;AAAaC;AAAkBH;;AACvCC;;AAGGG;AAAmBC;AAAcJ;;AAEhC;AACO;AACT;AAGXC;AAAkB;AAAGI;;AACRL;AAC4BM;;AACEA;AAAS;AAAG;AACxC;AAGfL;;;;AAEgBI;AAAc;;AACbC;;;AACA;AACP;AAGVL;AAAe;;AACDD;AAAU;AAAe;AAGvCC;AAAqB;;AACDD;AAAU;AAAqB;AAGnDC;AACAA;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/Modals/Dialog/index.tsx"],"sourcesContent":["'use client';\n\nimport type { DialogContentProps, DialogProps } from '@radix-ui/react-dialog';\nimport { Root, Trigger, Close, Portal } from '@radix-ui/react-dialog';\nimport { IconClose, PictogramAlert, PictogramCheck } from '@remember-web/icon';\n\nimport { Flex } from '@/Common/Flex';\n\nimport {\n  DialogContent,\n  DialogDescription,\n  DialogIcon,\n  DialogTitle,\n  IconButton,\n  StyledOverlay,\n} from './styles';\n\ninterface ContentProps extends DialogContentProps {\n  children: React.ReactNode;\n  dimmed?: boolean;\n}\n\n/**\n * @prop {React.ReactNode} children\n * @prop {boolean} open\n * @prop {boolean} defaultOpen\n * @prop {(open: boolean) => void} onOpenChange\n * @prop {boolean} modal\n * @prop {string} id\n */\nexport function Dialog({ children, ...props }: DialogProps) {\n  return <Root {...props}>{children}</Root>;\n}\n\n/**\n * @prop {boolean} dimmed\n * @see https://www.radix-ui.com/docs/primitives/components/dialog\n */\nDialog.Content = ({ children, dimmed = true, ...props }: ContentProps) => (\n  <Portal>\n    {dimmed && <StyledOverlay />}\n    <DialogContent {...props}>\n      <Flex direction=\"column\" align=\"center\">\n        {children}\n      </Flex>\n    </DialogContent>\n  </Portal>\n);\n\nDialog.HeadIcon = ({ type = 'alert' }: { type?: 'alert' | 'confirm' }) => (\n  <DialogIcon>\n    {type === 'alert' && <PictogramAlert size={40} />}\n    {type === 'confirm' && <PictogramCheck size={40} />}\n  </DialogIcon>\n);\n\nDialog.CloseIcon = () => (\n  <Close asChild>\n    <IconButton type=\"button\" aria-label=\"Close\">\n      <IconClose size=\"small\" />\n    </IconButton>\n  </Close>\n);\n\nDialog.Title = ({ children }: { children: React.ReactNode }) => (\n  <DialogTitle>{children}</DialogTitle>\n);\n\nDialog.Description = ({ children }: { children: React.ReactNode }) => (\n  <DialogDescription>{children}</DialogDescription>\n);\n\nDialog.Trigger = Trigger;\nDialog.Close = Close;\n"],"names":["props","children","Dialog","dimmed","direction","align","type","size"],"mappings":";;;;;;;;;AAAa;;AAAA;AAAA;AAsBb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AAAqD;AAAtBA;;AACdC;AAAW;AACnC;;AAEA;AACA;AACA;AACA;AACAC;AAAiB;;AAAaC;AAAkBH;;AACvCC;;AAGGG;AAAmBC;AAAcJ;;AAEhC;AACO;AACT;AAGXC;AAAkB;AAAGI;;AACRL;AAC4BM;;AACEA;AAAS;AAAG;AACxC;AAGfL;;;;AAEgBI;AAAc;;AACbC;;;AACA;AACP;AAGVL;AAAe;;AACDD;AAAU;AAAe;AAGvCC;AAAqB;;AACDD;AAAU;AAAqB;AAGnDC;AACAA;;"}

package/dist/primitive/src/Modals/Dialog/styles.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Modals/Dialog/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { keyframes } from 'styled-components';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\n\nimport { primary200, contents000, contents100 } from '@remember-web/mixin';\nimport { getTypographyStyles } from '@remember-web/mixin';\n\nexport const overlayShow = keyframes`\n  0% { opacity: 0; }\n  100% { opacity: 1; }\n`;\n\nexport const contentShow = keyframes`\n  0% { opacity: 0; transform: translate(-50%, -48%) scale(.96) }\n  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) }\n`;\n\nexport const StyledOverlay = styled(DialogPrimitive.Overlay)`\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.3);\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n`;\n\nexport const DialogContent = styled(DialogPrimitive.Content)`\n  box-sizing: border-box;\n  background-color: ${primary200};\n  border-radius: 8px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 90vw;\n  max-width: 360px;\n  min-width: 300px;\n  max-height: 85vh;\n  padding: 32px 24px 24px;\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n`;\n\nexport const DialogIcon = styled.div`\n  margin-bottom: 16px;\n`;\n\nexport const IconButton = styled.button`\n  all: unset;\n  height: 16px;\n  width: 16px;\n  margin: -8px 0 8px 0;\n  align-self: flex-end;\n  cursor: pointer;\n`;\n\nexport const DialogTitle = styled(DialogPrimitive.Title)`\n  ${getTypographyStyles('Headline4_B')}\n\n  color: ${contents000};\n  margin: 0;\n  padding: 0;\n  white-space: pre-line;\n`;\n\nexport const DialogDescription = styled(DialogPrimitive.Description)`\n  ${getTypographyStyles('Body1_M')}\n\n  color: ${contents100};\n  margin: 4px 0 24px;\n  text-align: center;\n  white-space: pre-line;\n`;\n"],"names":["DialogIcon","IconButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAQN;AAKA;;;AAsCMA;AAIAC;AASN;AASA;;;;;;;;;"}
+{"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Modals/Dialog/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { keyframes } from 'styled-components';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport {\n  primary200,\n  contents000,\n  contents100,\n  getTypographyStyles,\n} from '@remember-web/mixin';\n\nexport const overlayShow = keyframes`\n  0% { opacity: 0; }\n  100% { opacity: 1; }\n`;\n\nexport const contentShow = keyframes`\n  0% { opacity: 0; transform: translate(-50%, -48%) scale(.96) }\n  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) }\n`;\n\nexport const StyledOverlay = styled(DialogPrimitive.Overlay)`\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.3);\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n`;\n\nexport const DialogContent = styled(DialogPrimitive.Content)`\n  box-sizing: border-box;\n  background-color: ${primary200};\n  border-radius: 8px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 90vw;\n  max-width: 360px;\n  min-width: 300px;\n  max-height: 85vh;\n  padding: 32px 24px 24px;\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n`;\n\nexport const DialogIcon = styled.div`\n  margin-bottom: 16px;\n`;\n\nexport const IconButton = styled.button`\n  all: unset;\n  height: 16px;\n  width: 16px;\n  margin: -8px 0 8px 0;\n  align-self: flex-end;\n  cursor: pointer;\n`;\n\nexport const DialogTitle = styled(DialogPrimitive.Title)`\n  ${getTypographyStyles('Headline4_B')}\n\n  color: ${contents000};\n  margin: 0;\n  padding: 0;\n  white-space: pre-line;\n`;\n\nexport const DialogDescription = styled(DialogPrimitive.Description)`\n  ${getTypographyStyles('Body1_M')}\n\n  color: ${contents100};\n  margin: 4px 0 24px;\n  text-align: center;\n  white-space: pre-line;\n`;\n"],"names":["DialogIcon","IconButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAWN;AAKA;;;AAsCMA;AAIAC;AASN;AASA;;;;;;;;;"}

package/dist/primitive/src/Modals/Dialog/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/Modals/Dialog/styles.ts"],"names":[],"mappings":";AAGA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAK1D,eAAO,MAAM,WAAW,2DAGvB,CAAC;AAEF,eAAO,MAAM,WAAW,2DAGvB,CAAC;AAEF,eAAO,MAAM,aAAa;;+LAQzB,CAAC;AAEF,eAAO,MAAM,aAAa;;+LAqBzB,CAAC;AAEF,eAAO,MAAM,UAAU,gNAEtB,CAAC;AAEF,eAAO,MAAM,UAAU,4NAOtB,CAAC;AAEF,eAAO,MAAM,WAAW;;iMAOvB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;yMAO7B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/Modals/Dialog/styles.ts"],"names":[],"mappings":";AAGA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAQ1D,eAAO,MAAM,WAAW,2DAGvB,CAAC;AAEF,eAAO,MAAM,WAAW,2DAGvB,CAAC;AAEF,eAAO,MAAM,aAAa;;+LAQzB,CAAC;AAEF,eAAO,MAAM,aAAa;;+LAqBzB,CAAC;AAEF,eAAO,MAAM,UAAU,gNAEtB,CAAC;AAEF,eAAO,MAAM,UAAU,4NAOtB,CAAC;AAEF,eAAO,MAAM,WAAW;;iMAOvB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;yMAO7B,CAAC"}

package/dist/primitive/src/Modals/Dialog/styles.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.esm.js","sources":["../../../../../src/Modals/Dialog/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { keyframes } from 'styled-components';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\n\nimport { primary200, contents000, contents100 } from '@remember-web/mixin';\nimport { getTypographyStyles } from '@remember-web/mixin';\n\nexport const overlayShow = keyframes`\n  0% { opacity: 0; }\n  100% { opacity: 1; }\n`;\n\nexport const contentShow = keyframes`\n  0% { opacity: 0; transform: translate(-50%, -48%) scale(.96) }\n  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) }\n`;\n\nexport const StyledOverlay = styled(DialogPrimitive.Overlay)`\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.3);\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n`;\n\nexport const DialogContent = styled(DialogPrimitive.Content)`\n  box-sizing: border-box;\n  background-color: ${primary200};\n  border-radius: 8px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 90vw;\n  max-width: 360px;\n  min-width: 300px;\n  max-height: 85vh;\n  padding: 32px 24px 24px;\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n`;\n\nexport const DialogIcon = styled.div`\n  margin-bottom: 16px;\n`;\n\nexport const IconButton = styled.button`\n  all: unset;\n  height: 16px;\n  width: 16px;\n  margin: -8px 0 8px 0;\n  align-self: flex-end;\n  cursor: pointer;\n`;\n\nexport const DialogTitle = styled(DialogPrimitive.Title)`\n  ${getTypographyStyles('Headline4_B')}\n\n  color: ${contents000};\n  margin: 0;\n  padding: 0;\n  white-space: pre-line;\n`;\n\nexport const DialogDescription = styled(DialogPrimitive.Description)`\n  ${getTypographyStyles('Body1_M')}\n\n  color: ${contents100};\n  margin: 4px 0 24px;\n  text-align: center;\n  white-space: pre-line;\n`;\n"],"names":["DialogIcon","IconButton"],"mappings":";;;;;;AAAa;AAQN;AAKA;;;AAsCMA;AAIAC;AASN;AASA;;"}
+{"version":3,"file":"styles.esm.js","sources":["../../../../../src/Modals/Dialog/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { keyframes } from 'styled-components';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport {\n  primary200,\n  contents000,\n  contents100,\n  getTypographyStyles,\n} from '@remember-web/mixin';\n\nexport const overlayShow = keyframes`\n  0% { opacity: 0; }\n  100% { opacity: 1; }\n`;\n\nexport const contentShow = keyframes`\n  0% { opacity: 0; transform: translate(-50%, -48%) scale(.96) }\n  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) }\n`;\n\nexport const StyledOverlay = styled(DialogPrimitive.Overlay)`\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.3);\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n`;\n\nexport const DialogContent = styled(DialogPrimitive.Content)`\n  box-sizing: border-box;\n  background-color: ${primary200};\n  border-radius: 8px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 90vw;\n  max-width: 360px;\n  min-width: 300px;\n  max-height: 85vh;\n  padding: 32px 24px 24px;\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n`;\n\nexport const DialogIcon = styled.div`\n  margin-bottom: 16px;\n`;\n\nexport const IconButton = styled.button`\n  all: unset;\n  height: 16px;\n  width: 16px;\n  margin: -8px 0 8px 0;\n  align-self: flex-end;\n  cursor: pointer;\n`;\n\nexport const DialogTitle = styled(DialogPrimitive.Title)`\n  ${getTypographyStyles('Headline4_B')}\n\n  color: ${contents000};\n  margin: 0;\n  padding: 0;\n  white-space: pre-line;\n`;\n\nexport const DialogDescription = styled(DialogPrimitive.Description)`\n  ${getTypographyStyles('Body1_M')}\n\n  color: ${contents100};\n  margin: 4px 0 24px;\n  text-align: center;\n  white-space: pre-line;\n`;\n"],"names":["DialogIcon","IconButton"],"mappings":";;;;;;AAAa;AAWN;AAKA;;;AAsCMA;AAIAC;AASN;AASA;;"}

package/dist/primitive/src/Paginations/CompactPagination/index.cjs.js

@@ -2,8 +2,8 @@
 'use strict';
 
 var icon = require('@remember-web/icon');
-var index = require('../../Common/Flex/index.cjs.js');
 var mixin = require('@remember-web/mixin');
+var index = require('../../Common/Flex/index.cjs.js');
 var styles = require('../styles.cjs.js');
 var usePagination = require('../usePagination.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');

package/dist/primitive/src/Paginations/CompactPagination/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Paginations/CompactPagination/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrow2Left, IconArrow2Right } from '@remember-web/icon';\nimport { Flex } from '@/Common/Flex';\nimport { contents000, contents300 } from '@remember-web/mixin';\n\nimport {\n  ArrowButton,\n  CompactPaginationContainer,\n  CurrentPage,\n} from '../styles';\nimport type { CompactPaginationProps } from '../types';\nimport usePagination from '../usePagination';\n\nexport function CompactPagination({\n  activePage = 1,\n  totalItemCount = 0,\n  onChangePage,\n  itemCountPerPage,\n  infinite = false,\n  className,\n}: CompactPaginationProps) {\n  const {\n    totalLastPage,\n    prevPage,\n    nextPage,\n    isPrevPageDisabled,\n    isNextPageDisabled,\n  } = usePagination({\n    activePage,\n    totalItemCount,\n    pageRangeDisplayed: 1,\n    itemCountPerPage,\n  });\n\n  const iconColor = (disabled: boolean) =>\n    disabled ? contents300 : contents000;\n\n  const onClickPrevPage = () => {\n    const prevPageToGo =\n      activePage === 1 && infinite ? totalLastPage : prevPage;\n    onChangePage(prevPageToGo);\n  };\n\n  const onClickNextPage = () => {\n    const nextPageToGo =\n      activePage === totalLastPage && infinite ? 1 : nextPage;\n    onChangePage(nextPageToGo);\n  };\n\n  const hasOnlyOnePage = totalLastPage === 1;\n\n  const getArrowButtonDisabled = (disabled: boolean) => {\n    if (hasOnlyOnePage) {\n      return true;\n    }\n    if (infinite) {\n      return false;\n    }\n    return disabled;\n  };\n\n  const getArrowButtonColor = (disabled: boolean) => {\n    if (hasOnlyOnePage) {\n      return contents300;\n    }\n    if (infinite) {\n      return contents000;\n    }\n    return iconColor(disabled);\n  };\n\n  return (\n    <CompactPaginationContainer\n      className={className}\n      role=\"navigation\"\n      aria-label=\"페이지네이션\"\n    >\n      <ArrowButton\n        disabled={getArrowButtonDisabled(isPrevPageDisabled)}\n        onClick={onClickPrevPage}\n        aria-label=\"이전 페이지로 이동\"\n      >\n        <IconArrow2Left\n          size=\"small\"\n          color={getArrowButtonColor(isPrevPageDisabled)}\n          aria-hidden=\"true\"\n        />\n      </ArrowButton>\n      <Flex gap=\"4px\" style={{ minWidth: '44px', userSelect: 'none' }}>\n        <CurrentPage>{activePage}</CurrentPage>/ {totalLastPage}\n      </Flex>\n      <ArrowButton\n        disabled={getArrowButtonDisabled(isNextPageDisabled)}\n        onClick={onClickNextPage}\n        aria-label=\"다음 페이지로 이동\"\n      >\n        <IconArrow2Right\n          size=\"small\"\n          color={getArrowButtonColor(isNextPageDisabled)}\n          aria-hidden=\"true\"\n        />\n      </ArrowButton>\n    </CompactPaginationContainer>\n  );\n}\n"],"names":["activePage","totalItemCount","infinite","pageRangeDisplayed","itemCountPerPage","className","role","disabled","onClick","size","color","gap","style","minWidth","userSelect","children"],"mappings":";;;;;;;;;;AAcO;AAOoB;AANzBA;;AACAC;;;;AAGAC;;;AAUEF;AACAC;AACAE;AACAC;AACF;;;;;;AAEA;AAAoC;AACE;AAEtC;;;;AAMA;;;;AAMA;AAEA;AACE;AACE;AACF;AACA;AACE;AACF;AACA;;AAGF;AACE;AACE;AACF;AACA;AACE;AACF;;;;AAMEC;AACAC;AACA;;AAGEC;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AAEEC;AAAUC;AAASC;AAAkBC;;;AAC7BC;;AAA2C;AAGvDR;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AACU;AAGpB;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../../src/Paginations/CompactPagination/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrow2Left, IconArrow2Right } from '@remember-web/icon';\nimport { contents000, contents300 } from '@remember-web/mixin';\n\nimport { Flex } from '@/Common/Flex';\n\nimport {\n  ArrowButton,\n  CompactPaginationContainer,\n  CurrentPage,\n} from '../styles';\nimport type { CompactPaginationProps } from '../types';\nimport usePagination from '../usePagination';\n\nexport function CompactPagination({\n  activePage = 1,\n  totalItemCount = 0,\n  onChangePage,\n  itemCountPerPage,\n  infinite = false,\n  className,\n}: CompactPaginationProps) {\n  const {\n    totalLastPage,\n    prevPage,\n    nextPage,\n    isPrevPageDisabled,\n    isNextPageDisabled,\n  } = usePagination({\n    activePage,\n    totalItemCount,\n    pageRangeDisplayed: 1,\n    itemCountPerPage,\n  });\n\n  const iconColor = (disabled: boolean) =>\n    disabled ? contents300 : contents000;\n\n  const onClickPrevPage = () => {\n    const prevPageToGo =\n      activePage === 1 && infinite ? totalLastPage : prevPage;\n    onChangePage(prevPageToGo);\n  };\n\n  const onClickNextPage = () => {\n    const nextPageToGo =\n      activePage === totalLastPage && infinite ? 1 : nextPage;\n    onChangePage(nextPageToGo);\n  };\n\n  const hasOnlyOnePage = totalLastPage === 1;\n\n  const getArrowButtonDisabled = (disabled: boolean) => {\n    if (hasOnlyOnePage) {\n      return true;\n    }\n    if (infinite) {\n      return false;\n    }\n    return disabled;\n  };\n\n  const getArrowButtonColor = (disabled: boolean) => {\n    if (hasOnlyOnePage) {\n      return contents300;\n    }\n    if (infinite) {\n      return contents000;\n    }\n    return iconColor(disabled);\n  };\n\n  return (\n    <CompactPaginationContainer\n      className={className}\n      role=\"navigation\"\n      aria-label=\"페이지네이션\"\n    >\n      <ArrowButton\n        disabled={getArrowButtonDisabled(isPrevPageDisabled)}\n        onClick={onClickPrevPage}\n        aria-label=\"이전 페이지로 이동\"\n      >\n        <IconArrow2Left\n          size=\"small\"\n          color={getArrowButtonColor(isPrevPageDisabled)}\n          aria-hidden=\"true\"\n        />\n      </ArrowButton>\n      <Flex gap=\"4px\" style={{ minWidth: '44px', userSelect: 'none' }}>\n        <CurrentPage>{activePage}</CurrentPage>/ {totalLastPage}\n      </Flex>\n      <ArrowButton\n        disabled={getArrowButtonDisabled(isNextPageDisabled)}\n        onClick={onClickNextPage}\n        aria-label=\"다음 페이지로 이동\"\n      >\n        <IconArrow2Right\n          size=\"small\"\n          color={getArrowButtonColor(isNextPageDisabled)}\n          aria-hidden=\"true\"\n        />\n      </ArrowButton>\n    </CompactPaginationContainer>\n  );\n}\n"],"names":["activePage","totalItemCount","infinite","pageRangeDisplayed","itemCountPerPage","className","role","disabled","onClick","size","color","gap","style","minWidth","userSelect","children"],"mappings":";;;;;;;;;;AAeO;AAOoB;AANzBA;;AACAC;;;;AAGAC;;;AAUEF;AACAC;AACAE;AACAC;AACF;;;;;;AAEA;AAAoC;AACE;AAEtC;;;;AAMA;;;;AAMA;AAEA;AACE;AACE;AACF;AACA;AACE;AACF;AACA;;AAGF;AACE;AACE;AACF;AACA;AACE;AACF;;;;AAMEC;AACAC;AACA;;AAGEC;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AAEEC;AAAUC;AAASC;AAAkBC;;;AAC7BC;;AAA2C;AAGvDR;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AACU;AAGpB;;"}

package/dist/primitive/src/Paginations/CompactPagination/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Paginations/CompactPagination/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAGvD,wBAAgB,iBAAiB,CAAC,EAChC,UAAc,EACd,cAAkB,EAClB,YAAY,EACZ,gBAAgB,EAChB,QAAgB,EAChB,SAAS,GACV,EAAE,sBAAsB,2CAoFxB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/Paginations/CompactPagination/index.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAGvD,wBAAgB,iBAAiB,CAAC,EAChC,UAAc,EACd,cAAkB,EAClB,YAAY,EACZ,gBAAgB,EAChB,QAAgB,EAChB,SAAS,GACV,EAAE,sBAAsB,2CAoFxB"}

package/dist/primitive/src/Paginations/CompactPagination/index.esm.js

@@ -1,7 +1,7 @@
 "use client";
 import { IconArrow2Left, IconArrow2Right } from '@remember-web/icon';
-import { Flex } from '../../Common/Flex/index.esm.js';
 import { contents300, contents000 } from '@remember-web/mixin';
+import { Flex } from '../../Common/Flex/index.esm.js';
 import { CompactPaginationContainer, ArrowButton, CurrentPage } from '../styles.esm.js';
 import usePagination from '../usePagination.esm.js';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/primitive/src/Paginations/CompactPagination/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../src/Paginations/CompactPagination/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrow2Left, IconArrow2Right } from '@remember-web/icon';\nimport { Flex } from '@/Common/Flex';\nimport { contents000, contents300 } from '@remember-web/mixin';\n\nimport {\n  ArrowButton,\n  CompactPaginationContainer,\n  CurrentPage,\n} from '../styles';\nimport type { CompactPaginationProps } from '../types';\nimport usePagination from '../usePagination';\n\nexport function CompactPagination({\n  activePage = 1,\n  totalItemCount = 0,\n  onChangePage,\n  itemCountPerPage,\n  infinite = false,\n  className,\n}: CompactPaginationProps) {\n  const {\n    totalLastPage,\n    prevPage,\n    nextPage,\n    isPrevPageDisabled,\n    isNextPageDisabled,\n  } = usePagination({\n    activePage,\n    totalItemCount,\n    pageRangeDisplayed: 1,\n    itemCountPerPage,\n  });\n\n  const iconColor = (disabled: boolean) =>\n    disabled ? contents300 : contents000;\n\n  const onClickPrevPage = () => {\n    const prevPageToGo =\n      activePage === 1 && infinite ? totalLastPage : prevPage;\n    onChangePage(prevPageToGo);\n  };\n\n  const onClickNextPage = () => {\n    const nextPageToGo =\n      activePage === totalLastPage && infinite ? 1 : nextPage;\n    onChangePage(nextPageToGo);\n  };\n\n  const hasOnlyOnePage = totalLastPage === 1;\n\n  const getArrowButtonDisabled = (disabled: boolean) => {\n    if (hasOnlyOnePage) {\n      return true;\n    }\n    if (infinite) {\n      return false;\n    }\n    return disabled;\n  };\n\n  const getArrowButtonColor = (disabled: boolean) => {\n    if (hasOnlyOnePage) {\n      return contents300;\n    }\n    if (infinite) {\n      return contents000;\n    }\n    return iconColor(disabled);\n  };\n\n  return (\n    <CompactPaginationContainer\n      className={className}\n      role=\"navigation\"\n      aria-label=\"페이지네이션\"\n    >\n      <ArrowButton\n        disabled={getArrowButtonDisabled(isPrevPageDisabled)}\n        onClick={onClickPrevPage}\n        aria-label=\"이전 페이지로 이동\"\n      >\n        <IconArrow2Left\n          size=\"small\"\n          color={getArrowButtonColor(isPrevPageDisabled)}\n          aria-hidden=\"true\"\n        />\n      </ArrowButton>\n      <Flex gap=\"4px\" style={{ minWidth: '44px', userSelect: 'none' }}>\n        <CurrentPage>{activePage}</CurrentPage>/ {totalLastPage}\n      </Flex>\n      <ArrowButton\n        disabled={getArrowButtonDisabled(isNextPageDisabled)}\n        onClick={onClickNextPage}\n        aria-label=\"다음 페이지로 이동\"\n      >\n        <IconArrow2Right\n          size=\"small\"\n          color={getArrowButtonColor(isNextPageDisabled)}\n          aria-hidden=\"true\"\n        />\n      </ArrowButton>\n    </CompactPaginationContainer>\n  );\n}\n"],"names":["activePage","totalItemCount","infinite","pageRangeDisplayed","itemCountPerPage","className","role","disabled","onClick","size","color","gap","style","minWidth","userSelect","children"],"mappings":";;;;;;;;AAcO;AAOoB;AANzBA;;AACAC;;;;AAGAC;;;AAUEF;AACAC;AACAE;AACAC;AACF;;;;;;AAEA;AAAoC;AACE;AAEtC;;;;AAMA;;;;AAMA;AAEA;AACE;AACE;AACF;AACA;AACE;AACF;AACA;;AAGF;AACE;AACE;AACF;AACA;AACE;AACF;;;;AAMEC;AACAC;AACA;;AAGEC;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AAEEC;AAAUC;AAASC;AAAkBC;;;AAC7BC;;AAA2C;AAGvDR;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AACU;AAGpB;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/Paginations/CompactPagination/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrow2Left, IconArrow2Right } from '@remember-web/icon';\nimport { contents000, contents300 } from '@remember-web/mixin';\n\nimport { Flex } from '@/Common/Flex';\n\nimport {\n  ArrowButton,\n  CompactPaginationContainer,\n  CurrentPage,\n} from '../styles';\nimport type { CompactPaginationProps } from '../types';\nimport usePagination from '../usePagination';\n\nexport function CompactPagination({\n  activePage = 1,\n  totalItemCount = 0,\n  onChangePage,\n  itemCountPerPage,\n  infinite = false,\n  className,\n}: CompactPaginationProps) {\n  const {\n    totalLastPage,\n    prevPage,\n    nextPage,\n    isPrevPageDisabled,\n    isNextPageDisabled,\n  } = usePagination({\n    activePage,\n    totalItemCount,\n    pageRangeDisplayed: 1,\n    itemCountPerPage,\n  });\n\n  const iconColor = (disabled: boolean) =>\n    disabled ? contents300 : contents000;\n\n  const onClickPrevPage = () => {\n    const prevPageToGo =\n      activePage === 1 && infinite ? totalLastPage : prevPage;\n    onChangePage(prevPageToGo);\n  };\n\n  const onClickNextPage = () => {\n    const nextPageToGo =\n      activePage === totalLastPage && infinite ? 1 : nextPage;\n    onChangePage(nextPageToGo);\n  };\n\n  const hasOnlyOnePage = totalLastPage === 1;\n\n  const getArrowButtonDisabled = (disabled: boolean) => {\n    if (hasOnlyOnePage) {\n      return true;\n    }\n    if (infinite) {\n      return false;\n    }\n    return disabled;\n  };\n\n  const getArrowButtonColor = (disabled: boolean) => {\n    if (hasOnlyOnePage) {\n      return contents300;\n    }\n    if (infinite) {\n      return contents000;\n    }\n    return iconColor(disabled);\n  };\n\n  return (\n    <CompactPaginationContainer\n      className={className}\n      role=\"navigation\"\n      aria-label=\"페이지네이션\"\n    >\n      <ArrowButton\n        disabled={getArrowButtonDisabled(isPrevPageDisabled)}\n        onClick={onClickPrevPage}\n        aria-label=\"이전 페이지로 이동\"\n      >\n        <IconArrow2Left\n          size=\"small\"\n          color={getArrowButtonColor(isPrevPageDisabled)}\n          aria-hidden=\"true\"\n        />\n      </ArrowButton>\n      <Flex gap=\"4px\" style={{ minWidth: '44px', userSelect: 'none' }}>\n        <CurrentPage>{activePage}</CurrentPage>/ {totalLastPage}\n      </Flex>\n      <ArrowButton\n        disabled={getArrowButtonDisabled(isNextPageDisabled)}\n        onClick={onClickNextPage}\n        aria-label=\"다음 페이지로 이동\"\n      >\n        <IconArrow2Right\n          size=\"small\"\n          color={getArrowButtonColor(isNextPageDisabled)}\n          aria-hidden=\"true\"\n        />\n      </ArrowButton>\n    </CompactPaginationContainer>\n  );\n}\n"],"names":["activePage","totalItemCount","infinite","pageRangeDisplayed","itemCountPerPage","className","role","disabled","onClick","size","color","gap","style","minWidth","userSelect","children"],"mappings":";;;;;;;;AAeO;AAOoB;AANzBA;;AACAC;;;;AAGAC;;;AAUEF;AACAC;AACAE;AACAC;AACF;;;;;;AAEA;AAAoC;AACE;AAEtC;;;;AAMA;;;;AAMA;AAEA;AACE;AACE;AACF;AACA;AACE;AACF;AACA;;AAGF;AACE;AACE;AACF;AACA;AACE;AACF;;;;AAMEC;AACAC;AACA;;AAGEC;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AAEEC;AAAUC;AAASC;AAAkBC;;;AAC7BC;;AAA2C;AAGvDR;AACAC;AACA;;AAGEC;AACAC;;;AAEA;AACU;AAGpB;;"}

package/dist/primitive/src/Paginations/styles.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Paginations/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport {\n  bg100,\n  bg200,\n  bg300,\n  contents000,\n  contents300,\n  getTypographyStyles,\n} from '@remember-web/mixin';\n\nimport { mobileOnly, desktopOnly } from '@remember-web/mixin';\n\nexport const PaginationContainer = styled.nav`\n  all: unset;\n  display: inline-flex;\n  list-style-type: none;\n  box-sizing: border-box;\n  user-select: none;\n  margin: 0;\n  padding: 0;\n  gap: 16px;\n\n  ${mobileOnly(css`\n    gap: 8px;\n  `)}\n`;\n\nexport const CompactPaginationContainer = styled.div`\n  all: unset;\n\n  ${getTypographyStyles('Body1_M')}\n  gap: 16px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: fit-content;\n`;\n\nexport const CurrentPage = styled.span`\n  ${getTypographyStyles('Body1_B')}\n`;\n\nexport const Pages = styled.ul`\n  all: unset;\n  display: inherit;\n  gap: 4px;\n`;\n\nexport const Page = styled.li``;\n\nconst DefaultButton = styled.button.attrs({ type: 'button' })`\n  all: unset;\n  appearance: none;\n  box-sizing: border-box;\n\n  ${getTypographyStyles('Body1_M')}\n  display: grid;\n  place-items: center;\n\n  min-width: 34px;\n  height: 34px;\n  cursor: pointer;\n  color: ${contents000};\n  border-radius: 4px;\n\n  &:disabled {\n    color: ${contents000};\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n`;\n\nexport const ArrowButton = styled(DefaultButton)`\n  ${desktopOnly(css`\n    &:hover {\n      background-color: ${bg200};\n    }\n    &:active {\n      background-color: ${bg300};\n    }\n  `)}\n\n  ${mobileOnly(css`\n    min-width: 44px;\n    height: 44px;\n  `)}\n`;\n\nexport const BaseButton = styled(DefaultButton)`\n  &:hover,\n  &:focus {\n    border: solid 1px ${contents300};\n    border-radius: 4px;\n    background-color: ${bg100};\n  }\n\n  ${mobileOnly(css`\n    min-width: 44px;\n    height: 44px;\n  `)}\n`;\n\nexport const PageButton = styled(BaseButton)<{ selected?: boolean }>`\n  ${({ selected }) =>\n    selected &&\n    css`\n      border: solid 1px ${contents300};\n      border-radius: 4px;\n      background-color: ${bg100};\n    `}\n`;\n"],"names":["Pages","Page","type","BaseButton","PageButton"],"mappings":";;;;;;;;;;;;AAAa;AAcN;;;AA8BMA;AAMAC;AAEb;AAA4CC;AAAe;;AAsC9CC;AAcAC;AACT;AAAW;AAMV;;;;;;;;;"}
+{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Paginations/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport {\n  bg100,\n  bg200,\n  bg300,\n  contents000,\n  contents300,\n  getTypographyStyles,\n  mobileOnly,\n  desktopOnly,\n} from '@remember-web/mixin';\n\nexport const PaginationContainer = styled.nav`\n  all: unset;\n  display: inline-flex;\n  list-style-type: none;\n  box-sizing: border-box;\n  user-select: none;\n  margin: 0;\n  padding: 0;\n  gap: 16px;\n\n  ${mobileOnly(css`\n    gap: 8px;\n  `)}\n`;\n\nexport const CompactPaginationContainer = styled.div`\n  all: unset;\n\n  ${getTypographyStyles('Body1_M')}\n  gap: 16px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: fit-content;\n`;\n\nexport const CurrentPage = styled.span`\n  ${getTypographyStyles('Body1_B')}\n`;\n\nexport const Pages = styled.ul`\n  all: unset;\n  display: inherit;\n  gap: 4px;\n`;\n\nexport const Page = styled.li``;\n\nconst DefaultButton = styled.button.attrs({ type: 'button' })`\n  all: unset;\n  appearance: none;\n  box-sizing: border-box;\n\n  ${getTypographyStyles('Body1_M')}\n  display: grid;\n  place-items: center;\n\n  min-width: 34px;\n  height: 34px;\n  cursor: pointer;\n  color: ${contents000};\n  border-radius: 4px;\n\n  &:disabled {\n    color: ${contents000};\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n`;\n\nexport const ArrowButton = styled(DefaultButton)`\n  ${desktopOnly(css`\n    &:hover {\n      background-color: ${bg200};\n    }\n    &:active {\n      background-color: ${bg300};\n    }\n  `)}\n\n  ${mobileOnly(css`\n    min-width: 44px;\n    height: 44px;\n  `)}\n`;\n\nexport const BaseButton = styled(DefaultButton)`\n  &:hover,\n  &:focus {\n    border: solid 1px ${contents300};\n    border-radius: 4px;\n    background-color: ${bg100};\n  }\n\n  ${mobileOnly(css`\n    min-width: 44px;\n    height: 44px;\n  `)}\n`;\n\nexport const PageButton = styled(BaseButton)<{ selected?: boolean }>`\n  ${({ selected }) =>\n    selected &&\n    css`\n      border: solid 1px ${contents300};\n      border-radius: 4px;\n      background-color: ${bg100};\n    `}\n`;\n"],"names":["Pages","Page","type","BaseButton","PageButton"],"mappings":";;;;;;;;;;;;AAAa;AAcN;;;AA8BMA;AAMAC;AAEb;AAA4CC;AAAe;;AAsC9CC;AAcAC;AACT;AAAW;AAMV;;;;;;;;;"}

package/dist/primitive/src/Paginations/styles.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.esm.js","sources":["../../../../src/Paginations/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport {\n  bg100,\n  bg200,\n  bg300,\n  contents000,\n  contents300,\n  getTypographyStyles,\n} from '@remember-web/mixin';\n\nimport { mobileOnly, desktopOnly } from '@remember-web/mixin';\n\nexport const PaginationContainer = styled.nav`\n  all: unset;\n  display: inline-flex;\n  list-style-type: none;\n  box-sizing: border-box;\n  user-select: none;\n  margin: 0;\n  padding: 0;\n  gap: 16px;\n\n  ${mobileOnly(css`\n    gap: 8px;\n  `)}\n`;\n\nexport const CompactPaginationContainer = styled.div`\n  all: unset;\n\n  ${getTypographyStyles('Body1_M')}\n  gap: 16px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: fit-content;\n`;\n\nexport const CurrentPage = styled.span`\n  ${getTypographyStyles('Body1_B')}\n`;\n\nexport const Pages = styled.ul`\n  all: unset;\n  display: inherit;\n  gap: 4px;\n`;\n\nexport const Page = styled.li``;\n\nconst DefaultButton = styled.button.attrs({ type: 'button' })`\n  all: unset;\n  appearance: none;\n  box-sizing: border-box;\n\n  ${getTypographyStyles('Body1_M')}\n  display: grid;\n  place-items: center;\n\n  min-width: 34px;\n  height: 34px;\n  cursor: pointer;\n  color: ${contents000};\n  border-radius: 4px;\n\n  &:disabled {\n    color: ${contents000};\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n`;\n\nexport const ArrowButton = styled(DefaultButton)`\n  ${desktopOnly(css`\n    &:hover {\n      background-color: ${bg200};\n    }\n    &:active {\n      background-color: ${bg300};\n    }\n  `)}\n\n  ${mobileOnly(css`\n    min-width: 44px;\n    height: 44px;\n  `)}\n`;\n\nexport const BaseButton = styled(DefaultButton)`\n  &:hover,\n  &:focus {\n    border: solid 1px ${contents300};\n    border-radius: 4px;\n    background-color: ${bg100};\n  }\n\n  ${mobileOnly(css`\n    min-width: 44px;\n    height: 44px;\n  `)}\n`;\n\nexport const PageButton = styled(BaseButton)<{ selected?: boolean }>`\n  ${({ selected }) =>\n    selected &&\n    css`\n      border: solid 1px ${contents300};\n      border-radius: 4px;\n      background-color: ${bg100};\n    `}\n`;\n"],"names":["Pages","Page","type","BaseButton","PageButton"],"mappings":";;;;;AAAa;AAcN;;;AA8BMA;AAMAC;AAEb;AAA4CC;AAAe;;AAsC9CC;AAcAC;AACT;AAAW;AAMV;;"}
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/Paginations/styles.ts"],"sourcesContent":["'use client';\n\nimport styled, { css } from 'styled-components';\nimport {\n  bg100,\n  bg200,\n  bg300,\n  contents000,\n  contents300,\n  getTypographyStyles,\n  mobileOnly,\n  desktopOnly,\n} from '@remember-web/mixin';\n\nexport const PaginationContainer = styled.nav`\n  all: unset;\n  display: inline-flex;\n  list-style-type: none;\n  box-sizing: border-box;\n  user-select: none;\n  margin: 0;\n  padding: 0;\n  gap: 16px;\n\n  ${mobileOnly(css`\n    gap: 8px;\n  `)}\n`;\n\nexport const CompactPaginationContainer = styled.div`\n  all: unset;\n\n  ${getTypographyStyles('Body1_M')}\n  gap: 16px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: fit-content;\n`;\n\nexport const CurrentPage = styled.span`\n  ${getTypographyStyles('Body1_B')}\n`;\n\nexport const Pages = styled.ul`\n  all: unset;\n  display: inherit;\n  gap: 4px;\n`;\n\nexport const Page = styled.li``;\n\nconst DefaultButton = styled.button.attrs({ type: 'button' })`\n  all: unset;\n  appearance: none;\n  box-sizing: border-box;\n\n  ${getTypographyStyles('Body1_M')}\n  display: grid;\n  place-items: center;\n\n  min-width: 34px;\n  height: 34px;\n  cursor: pointer;\n  color: ${contents000};\n  border-radius: 4px;\n\n  &:disabled {\n    color: ${contents000};\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n`;\n\nexport const ArrowButton = styled(DefaultButton)`\n  ${desktopOnly(css`\n    &:hover {\n      background-color: ${bg200};\n    }\n    &:active {\n      background-color: ${bg300};\n    }\n  `)}\n\n  ${mobileOnly(css`\n    min-width: 44px;\n    height: 44px;\n  `)}\n`;\n\nexport const BaseButton = styled(DefaultButton)`\n  &:hover,\n  &:focus {\n    border: solid 1px ${contents300};\n    border-radius: 4px;\n    background-color: ${bg100};\n  }\n\n  ${mobileOnly(css`\n    min-width: 44px;\n    height: 44px;\n  `)}\n`;\n\nexport const PageButton = styled(BaseButton)<{ selected?: boolean }>`\n  ${({ selected }) =>\n    selected &&\n    css`\n      border: solid 1px ${contents300};\n      border-radius: 4px;\n      background-color: ${bg100};\n    `}\n`;\n"],"names":["Pages","Page","type","BaseButton","PageButton"],"mappings":";;;;;AAAa;AAcN;;;AA8BMA;AAMAC;AAEb;AAA4CC;AAAe;;AAsC9CC;AAcAC;AACT;AAAW;AAMV;;"}

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var index = require('./Avatars/Avatar/index.cjs.js');
+var styles = require('./Avatars/Avatar/styles.cjs.js');
 var index$1 = require('./Buttons/Button/index.cjs.js');
 var utils = require('./Badge/utils.cjs.js');
 var Badge = require('./Badge/Badge.cjs.js');
@@ -10,7 +11,7 @@ var index$4 = require('./Common/Flex/index.cjs.js');
 var index$5 = require('./Common/Grid/index.cjs.js');
 var index$6 = require('./Common/Spinner/index.cjs.js');
 var index$2 = require('./Common/Typography/index.cjs.js');
-var styles = require('./Common/Typography/styles.cjs.js');
+var styles$1 = require('./Common/Typography/styles.cjs.js');
 var Checkbox = require('./Control/Checkbox.cjs.js');
 var Toggle = require('./Control/Toggle.cjs.js');
 var index$7 = require('./Control/Switch/index.cjs.js');
@@ -24,15 +25,16 @@ var index$d = require('./Paginations/Pagination/index.cjs.js');
 var index$e = require('./Paginations/CompactPagination/index.cjs.js');
 var index$f = require('./Inputs/TextInput/index.cjs.js');
 var index$g = require('./Inputs/Select/index.cjs.js');
-var index$h = require('./Floating/Tooltip/index.cjs.js');
+var index$h = require('./Floating/DropdownMenu/index.cjs.js');
 var index$i = require('./Floating/Popover/index.cjs.js');
-var index$j = require('./Floating/DropdownMenu/index.cjs.js');
-var styles$1 = require('./Floating/Popover/styles.cjs.js');
+var index$j = require('./Floating/Tooltip/index.cjs.js');
 var styles$2 = require('./Floating/DropdownMenu/styles.cjs.js');
+var styles$3 = require('./Floating/Popover/styles.cjs.js');
 
 
 
 exports.Avatar = index;
+exports.StyledAvatar = styles.StyledAvatar;
 exports.Button = index$1;
 exports.badgePseudo = utils.badgePseudo;
 exports.Badge = Badge.Badge;
@@ -42,7 +44,7 @@ exports.Flex = index$4.Flex;
 exports.Grid = index$5.Grid;
 exports.Spinner = index$6.Spinner;
 exports.Typography = index$2;
-exports.StyledTypography = styles.StyledTypography;
+exports.StyledTypography = styles$1.StyledTypography;
 exports.Checkbox = Checkbox.Checkbox;
 exports._Checkbox = Checkbox._Checkbox;
 exports.CircleBaseToggle = Toggle.CircleBaseToggle;
@@ -60,12 +62,13 @@ exports.Pagination = index$d.Pagination;
 exports.CompactPagination = index$e.CompactPagination;
 exports.TextInput = index$f;
 exports.Select = index$g;
-exports.Tooltip = index$h;
+exports.DropdownMenu = index$h;
 exports.Popover = index$i;
-exports.DropdownMenu = index$j;
-exports.StyledPopoverContent = styles$1.StyledPopoverContent;
+exports.Tooltip = index$j;
 exports.StyledDropdownMenuContent = styles$2.StyledDropdownMenuContent;
-exports.StyledDropdownMenuItem = styles$2.StyledDropdownMenuItem;
+exports.StyledDropdownMenuSection = styles$2.StyledDropdownMenuSection;
+exports.StyledDropdownMenuSectionTitle = styles$2.StyledDropdownMenuSectionTitle;
 exports.dropdownMenuItemCSS = styles$2.dropdownMenuItemCSS;
 exports.getDropdownMenuItemCss = styles$2.getDropdownMenuItemCss;
+exports.StyledPopoverContent = styles$3.StyledPopoverContent;
 //# sourceMappingURL=index.cjs.js.map