@remember-web/primitive 0.2.7 → 0.2.9

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

@@ -4,7 +4,7 @@ import { getTypographyStyles, contents300, contents200, contents000, bg200, bg30
 import styled, { css } from 'styled-components';
 
 var _templateObject, _templateObject2, _templateObject3;
-var StyledSelect = styled.select(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  all: unset;\n\n  ", "\n  border: 1px solid ", ";\n  border-radius: 4px;\n  padding: 10px 36px 10px 12px;\n  box-sizing: border-box;\n\n  ", "\n\n  width: ", ";\n\n  transition: border-color 0.2s, background-color 0.2s;\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &:not(:disabled) {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n  }\n"])), getTypographyStyles('Body1_M'), contents300, function (_ref) {
+var StyledSelect = styled.select(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  all: unset;\n\n  ", "\n  border: 1px solid ", ";\n  border-radius: 4px;\n  padding: 10px 36px 10px 12px;\n  box-sizing: border-box;\n\n  ", "\n\n  width: ", ";\n\n  transition: border-color 0.2s, background-color 0.2s;\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &:not(:disabled) {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n  }\n"])), getTypographyStyles('UIBody2'), contents300, function (_ref) {
   var isPlaceholder = _ref.isPlaceholder;
   return isPlaceholder && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), contents200);
 }, function (_ref2) {

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

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

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

@@ -11,7 +11,7 @@ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTempla
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 var _templateObject, _templateObject2;
-var SelectContainer = styled__default.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  ", "\n  color: ", ";\n  width: ", ";\n  position: relative;\n  user-select: none;\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n  }\n  &[aria-disabled='true'] {\n    color: ", ";\n    border-color: ", ";\n    background-color: ", ";\n  }\n"])), mixin.getTypographyStyles('Body1_M'), mixin.contents000, function (_ref) {
+var SelectContainer = styled__default.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  ", "\n  color: ", ";\n  width: ", ";\n  position: relative;\n  user-select: none;\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n  }\n  &[aria-disabled='true'] {\n    color: ", ";\n    border-color: ", ";\n    background-color: ", ";\n  }\n"])), mixin.getTypographyStyles('UIBody2'), mixin.contents000, function (_ref) {
   var $width = _ref.$width;
   if (!$width) {
     return 'fit-content';
@@ -21,7 +21,7 @@ var SelectContainer = styled__default.default.div(_templateObject || (_templateO
   }
   return $width;
 }, mixin.contents000, mixin.contents200, mixin.contents300, mixin.bg200);
-var SelectLabel = styled__default.default.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n  ", "\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ", ";\n  }\n"])), mixin.getTypographyStyles('Headline4_B'), mixin.roleRed);
+var SelectLabel = styled__default.default.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n  ", "\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ", ";\n  }\n"])), mixin.getTypographyStyles('SubTitle1'), mixin.roleRed);
 
 exports.SelectContainer = SelectContainer;
 exports.SelectLabel = SelectLabel;

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

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

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

@@ -4,7 +4,7 @@ import { getTypographyStyles, contents000, contents200, contents300, bg200, role
 import styled from 'styled-components';
 
 var _templateObject, _templateObject2;
-var SelectContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  color: ", ";\n  width: ", ";\n  position: relative;\n  user-select: none;\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n  }\n  &[aria-disabled='true'] {\n    color: ", ";\n    border-color: ", ";\n    background-color: ", ";\n  }\n"])), getTypographyStyles('Body1_M'), contents000, function (_ref) {
+var SelectContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  color: ", ";\n  width: ", ";\n  position: relative;\n  user-select: none;\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n  }\n  &[aria-disabled='true'] {\n    color: ", ";\n    border-color: ", ";\n    background-color: ", ";\n  }\n"])), getTypographyStyles('UIBody2'), contents000, function (_ref) {
   var $width = _ref.$width;
   if (!$width) {
     return 'fit-content';
@@ -14,7 +14,7 @@ var SelectContainer = styled.div(_templateObject || (_templateObject = _taggedTe
   }
   return $width;
 }, contents000, contents200, contents300, bg200);
-var SelectLabel = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ", ";\n  }\n"])), getTypographyStyles('Headline4_B'), roleRed);
+var SelectLabel = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ", ";\n  }\n"])), getTypographyStyles('SubTitle1'), roleRed);
 
 export { SelectContainer, SelectLabel };
 //# sourceMappingURL=styles.esm.js.map

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

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

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

@@ -36,6 +36,12 @@ var TextInput = function TextInput(_ref, ref) {
     isVisiblePassword = _useState2[0],
     setIsVisiblePassword = _useState2[1];
   var isForceVisibleInput = props.type === 'password' && props.hasTogglePasswordVisibilityButton && isVisiblePassword;
+
+  // NOTE: InputInner 컴포넌트에 전달되는 input native 속성에 커스텀 props인 hasTogglePasswordVisibilityButton가 전달되지 않도록 하는 처리
+  // type === 'password' 일 때에 hasTogglePasswordVisibilityButton 속성이 존재할 수 있음.
+  var inputInnerProps = _objectSpread(_objectSpread({}, props), {}, {
+    hasTogglePasswordVisibilityButton: undefined
+  });
   return /*#__PURE__*/jsxRuntime.jsxs(styles.InputWrapper, {
     $width: width,
     children: [label && /*#__PURE__*/jsxRuntime.jsxs(styles.InputLabel, {
@@ -46,7 +52,7 @@ var TextInput = function TextInput(_ref, ref) {
       })]
     }), /*#__PURE__*/jsxRuntime.jsxs(styles.InputContainer, {
       disabled: disabled,
-      hasError: !!errorMessage,
+      $hasError: !!errorMessage,
       className: className,
       children: [leftElement && /*#__PURE__*/jsxRuntime.jsx(styles.InputDecorator, {
         children: leftElement
@@ -54,7 +60,7 @@ var TextInput = function TextInput(_ref, ref) {
         disabled: disabled,
         id: inputId,
         "aria-labelledby": label ? labelId : undefined
-      }, props), {}, {
+      }, inputInnerProps), {}, {
         type: isForceVisibleInput ? 'text' : props.type || 'text',
         ref: ref
       })), hintText && /*#__PURE__*/jsxRuntime.jsx(styles.InputHintText, {

package/dist/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 { IconHidden, IconVisible } from '@remember-web/icon';\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useId, useState } from 'react';\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;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/Inputs/TextInput/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconHidden, IconVisible } from '@remember-web/icon';\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useId, useState } from 'react';\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  // NOTE: InputInner 컴포넌트에 전달되는 input native 속성에 커스텀 props인 hasTogglePasswordVisibilityButton가 전달되지 않도록 하는 처리\n  // type === 'password' 일 때에 hasTogglePasswordVisibilityButton 속성이 존재할 수 있음.\n  const inputInnerProps = {\n    ...props,\n    hasTogglePasswordVisibilityButton: undefined,\n  };\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          {...inputInnerProps}\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","hasTogglePasswordVisibilityButton","$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;;AAKA;AACA;AACA;AAEEC;;;AAIcC;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/src/Inputs/TextInput/index.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/TextInput/index.tsx"],"names":[],"mappings":";AAgBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;;AA2F1C,wBAAqC"}

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

@@ -28,6 +28,12 @@ var TextInput = function TextInput(_ref, ref) {
     isVisiblePassword = _useState2[0],
     setIsVisiblePassword = _useState2[1];
   var isForceVisibleInput = props.type === 'password' && props.hasTogglePasswordVisibilityButton && isVisiblePassword;
+
+  // NOTE: InputInner 컴포넌트에 전달되는 input native 속성에 커스텀 props인 hasTogglePasswordVisibilityButton가 전달되지 않도록 하는 처리
+  // type === 'password' 일 때에 hasTogglePasswordVisibilityButton 속성이 존재할 수 있음.
+  var inputInnerProps = _objectSpread(_objectSpread({}, props), {}, {
+    hasTogglePasswordVisibilityButton: undefined
+  });
   return /*#__PURE__*/jsxs(InputWrapper, {
     $width: width,
     children: [label && /*#__PURE__*/jsxs(InputLabel, {
@@ -38,7 +44,7 @@ var TextInput = function TextInput(_ref, ref) {
       })]
     }), /*#__PURE__*/jsxs(InputContainer, {
       disabled: disabled,
-      hasError: !!errorMessage,
+      $hasError: !!errorMessage,
       className: className,
       children: [leftElement && /*#__PURE__*/jsx(InputDecorator, {
         children: leftElement
@@ -46,7 +52,7 @@ var TextInput = function TextInput(_ref, ref) {
         disabled: disabled,
         id: inputId,
         "aria-labelledby": label ? labelId : undefined
-      }, props), {}, {
+      }, inputInnerProps), {}, {
         type: isForceVisibleInput ? 'text' : props.type || 'text',
         ref: ref
       })), hintText && /*#__PURE__*/jsx(InputHintText, {

package/dist/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 { IconHidden, IconVisible } from '@remember-web/icon';\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useId, useState } from 'react';\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;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/Inputs/TextInput/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconHidden, IconVisible } from '@remember-web/icon';\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useId, useState } from 'react';\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  // NOTE: InputInner 컴포넌트에 전달되는 input native 속성에 커스텀 props인 hasTogglePasswordVisibilityButton가 전달되지 않도록 하는 처리\n  // type === 'password' 일 때에 hasTogglePasswordVisibilityButton 속성이 존재할 수 있음.\n  const inputInnerProps = {\n    ...props,\n    hasTogglePasswordVisibilityButton: undefined,\n  };\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          {...inputInnerProps}\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","hasTogglePasswordVisibilityButton","$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;;AAKA;AACA;AACA;AAEEC;;;AAIcC;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/src/Inputs/TextInput/styles.cjs.js

@@ -17,15 +17,15 @@ var InputWrapper = styled__default.default.div(_templateObject || (_templateObje
   return $width && styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n      width: ", ";\n    "])), shared.formatUnit($width));
 });
 var InputContainer = styled__default.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n  display: flex;\n  align-items: center;\n  border: 1px solid ", ";\n  border-radius: 4px;\n  padding: 0 12px;\n  gap: 8px;\n\n  transition:\n    border-color 0.2s,\n    background-color 0.2s;\n\n  ", "\n"])), mixin.contents300, function (_ref2) {
-  var hasError = _ref2.hasError,
+  var $hasError = _ref2.$hasError,
     disabled = _ref2.disabled;
-  return [hasError ? styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n          border-color: ", ";\n        "])), mixin.roleRed) : styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n          &:focus-within {\n            border-color: ", ";\n          }\n        "])), mixin.contents000), disabled && styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default(["\n        background-color: ", ";\n      "])), mixin.bg200)];
+  return [$hasError ? styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n          border-color: ", ";\n        "])), mixin.roleRed) : styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n          &:focus-within {\n            border-color: ", ";\n          }\n        "])), mixin.contents000), disabled && styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default(["\n        background-color: ", ";\n      "])), mixin.bg200)];
 });
 var InputDecorator = styled__default.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n  flex-shrink: 0;\n  /* Inline\uC694\uC18C\uAC00 \uB4E4\uC5B4\uC624\uBA74 \uAC15\uC81C\uB85C block\uC73C\uB85C \uCC98\uB9AC (\uC911\uC559\uC815\uB82C\uC744 \uC704\uD574) */\n  > * {\n    display: block;\n  }\n"])));
-var InputInner = styled__default.default.input(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default.default(["\n  ", "\n  color: ", ";\n\n  display: block;\n  flex-grow: 1;\n  width: 100%;\n  padding: 10px 0;\n  border: 0;\n  background-color: transparent;\n\n  &:placeholder-shown {\n    ", "\n  }\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n"])), mixin.getTypographyStyles('Body1_M'), mixin.contents000, mixin.ellipsis(), mixin.contents200);
-var InputLabel = styled__default.default.label(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default.default(["\n  ", "\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ", ";\n  }\n"])), mixin.getTypographyStyles('Headline4_B'), mixin.roleRed);
-var InputError = styled__default.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default.default(["\n  ", "\n  color: ", ";\n\n  margin-top: 8px;\n"])), mixin.getTypographyStyles('Body2_M'), mixin.roleRed);
-var InputHintText = styled__default.default.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default.default(["\n  ", "\n  color: ", ";\n  white-space: nowrap;\n"])), mixin.getTypographyStyles('Body1_M'), function (_ref3) {
+var InputInner = styled__default.default.input(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default.default(["\n  ", "\n  color: ", ";\n\n  display: block;\n  flex-grow: 1;\n  width: 100%;\n  padding: 10px 0;\n  border: 0;\n  background-color: transparent;\n\n  &:placeholder-shown {\n    ", "\n  }\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n"])), mixin.getTypographyStyles('UIBody2'), mixin.contents000, mixin.ellipsis(), mixin.contents200);
+var InputLabel = styled__default.default.label(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default.default(["\n  ", "\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ", ";\n  }\n"])), mixin.getTypographyStyles('SubTitle1'), mixin.roleRed);
+var InputError = styled__default.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default.default(["\n  ", "\n  color: ", ";\n\n  margin-top: 8px;\n"])), mixin.getTypographyStyles('Caption1'), mixin.roleRed);
+var InputHintText = styled__default.default.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default.default(["\n  ", "\n  color: ", ";\n  white-space: nowrap;\n"])), mixin.getTypographyStyles('UIBody2'), function (_ref3) {
   var textColor = _ref3.textColor;
   return textColor;
 });

package/dist/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 type { ColorVariable } from '@remember-web/mixin';\nimport {\n  bg200,\n  contents000,\n  contents200,\n  contents300,\n  ellipsis,\n  getTypographyStyles,\n  roleRed,\n} from '@remember-web/mixin';\nimport { formatUnit } from '@remember-web/shared';\nimport styled, { css } from 'styled-components';\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:\n    border-color 0.2s,\n    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;;AAkBD;;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 type { ColorVariable } from '@remember-web/mixin';\nimport {\n  bg200,\n  contents000,\n  contents200,\n  contents300,\n  ellipsis,\n  getTypographyStyles,\n  roleRed,\n} from '@remember-web/mixin';\nimport { formatUnit } from '@remember-web/shared';\nimport styled, { css } from 'styled-components';\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:\n    border-color 0.2s,\n    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('UIBody2')}\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('SubTitle1')}\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('Caption1')}\n  color: ${roleRed};\n\n  margin-top: 8px;\n`;\n\nexport const InputHintText = styled.span<{ textColor?: ColorVariable }>`\n  ${getTypographyStyles('UIBody2')}\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;;AAkBD;;AAAsB;AAcvB;AAGUC;AAQN;;;;AA+CI;AAAY;AAAgB;AAI1BC;;;;;;;;;"}

package/dist/src/Inputs/TextInput/styles.d.ts

@@ -4,7 +4,7 @@ export declare const InputWrapper: import("styled-components").IStyledComponent<
 }>>;
 export declare const InputContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     disabled?: boolean | undefined;
-    hasError?: boolean | undefined;
+    $hasError?: boolean | undefined;
 }>>;
 export declare const InputDecorator: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export declare const InputInner: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>;

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

@@ -10,15 +10,15 @@ var InputWrapper = styled.div(_templateObject || (_templateObject = _taggedTempl
   return $width && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      width: ", ";\n    "])), formatUnit($width));
 });
 var InputContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  border: 1px solid ", ";\n  border-radius: 4px;\n  padding: 0 12px;\n  gap: 8px;\n\n  transition:\n    border-color 0.2s,\n    background-color 0.2s;\n\n  ", "\n"])), contents300, function (_ref2) {
-  var hasError = _ref2.hasError,
+  var $hasError = _ref2.$hasError,
     disabled = _ref2.disabled;
-  return [hasError ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          border-color: ", ";\n        "])), roleRed) : css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          &:focus-within {\n            border-color: ", ";\n          }\n        "])), contents000), disabled && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        background-color: ", ";\n      "])), bg200)];
+  return [$hasError ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          border-color: ", ";\n        "])), roleRed) : css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          &:focus-within {\n            border-color: ", ";\n          }\n        "])), contents000), disabled && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        background-color: ", ";\n      "])), bg200)];
 });
 var InputDecorator = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  flex-shrink: 0;\n  /* Inline\uC694\uC18C\uAC00 \uB4E4\uC5B4\uC624\uBA74 \uAC15\uC81C\uB85C block\uC73C\uB85C \uCC98\uB9AC (\uC911\uC559\uC815\uB82C\uC744 \uC704\uD574) */\n  > * {\n    display: block;\n  }\n"])));
-var InputInner = styled.input(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", "\n  color: ", ";\n\n  display: block;\n  flex-grow: 1;\n  width: 100%;\n  padding: 10px 0;\n  border: 0;\n  background-color: transparent;\n\n  &:placeholder-shown {\n    ", "\n  }\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n"])), getTypographyStyles('Body1_M'), contents000, ellipsis(), contents200);
-var InputLabel = styled.label(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ", ";\n  }\n"])), getTypographyStyles('Headline4_B'), roleRed);
-var InputError = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n  color: ", ";\n\n  margin-top: 8px;\n"])), getTypographyStyles('Body2_M'), roleRed);
-var InputHintText = styled.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", "\n  color: ", ";\n  white-space: nowrap;\n"])), getTypographyStyles('Body1_M'), function (_ref3) {
+var InputInner = styled.input(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", "\n  color: ", ";\n\n  display: block;\n  flex-grow: 1;\n  width: 100%;\n  padding: 10px 0;\n  border: 0;\n  background-color: transparent;\n\n  &:placeholder-shown {\n    ", "\n  }\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n"])), getTypographyStyles('UIBody2'), contents000, ellipsis(), contents200);
+var InputLabel = styled.label(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  display: block;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  & > mark {\n    all: unset;\n    color: ", ";\n  }\n"])), getTypographyStyles('SubTitle1'), roleRed);
+var InputError = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n  color: ", ";\n\n  margin-top: 8px;\n"])), getTypographyStyles('Caption1'), roleRed);
+var InputHintText = styled.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", "\n  color: ", ";\n  white-space: nowrap;\n"])), getTypographyStyles('UIBody2'), function (_ref3) {
   var textColor = _ref3.textColor;
   return textColor;
 });

package/dist/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 type { ColorVariable } from '@remember-web/mixin';\nimport {\n  bg200,\n  contents000,\n  contents200,\n  contents300,\n  ellipsis,\n  getTypographyStyles,\n  roleRed,\n} from '@remember-web/mixin';\nimport { formatUnit } from '@remember-web/shared';\nimport styled, { css } from 'styled-components';\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:\n    border-color 0.2s,\n    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;;AAkBD;;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 type { ColorVariable } from '@remember-web/mixin';\nimport {\n  bg200,\n  contents000,\n  contents200,\n  contents300,\n  ellipsis,\n  getTypographyStyles,\n  roleRed,\n} from '@remember-web/mixin';\nimport { formatUnit } from '@remember-web/shared';\nimport styled, { css } from 'styled-components';\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:\n    border-color 0.2s,\n    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('UIBody2')}\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('SubTitle1')}\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('Caption1')}\n  color: ${roleRed};\n\n  margin-top: 8px;\n`;\n\nexport const InputHintText = styled.span<{ textColor?: ColorVariable }>`\n  ${getTypographyStyles('UIBody2')}\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;;AAkBD;;AAAsB;AAcvB;AAGUC;AAQN;;;;AA+CI;AAAY;AAAgB;AAI1BC;;"}

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

@@ -2,14 +2,15 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var index$1 = require('../../Common/Divider/index.cjs.js');
-require('../../Common/Flex/index.cjs.js');
+var index$2 = require('../../Common/Divider/index.cjs.js');
+var index$1 = require('../../Common/Flex/index.cjs.js');
 require('../../Common/Grid/index.cjs.js');
 require('@remember-web/icon');
 require('../../Common/Spinner/styles.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 require('react');
 require('../../Common/Skeleton/styles.cjs.js');
+var index$3 = require('../../Common/Typography/index.cjs.js');
 require('../../Common/Typography/styles.cjs.js');
 var index = require('../RememberLogo/index.cjs.js');
 var style = require('./style.cjs.js');
@@ -32,14 +33,19 @@ var RememberServiceLogo = function RememberServiceLogo(_ref) {
   }, props), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsx(index.RememberLogo, {
       color: color
-    }), label && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(index$1.Divider, {
+    }), label && /*#__PURE__*/jsxRuntime.jsxs(index$1.Flex, {
+      gap: 8,
+      children: [/*#__PURE__*/jsxRuntime.jsx(index$2.Divider, {
         decorative: true,
         orientation: "vertical",
         style: {
           height: '15px'
         }
-      }), /*#__PURE__*/jsxRuntime.jsx("b", {
+      }), /*#__PURE__*/jsxRuntime.jsx(index$3.Typography, {
+        variant: "SubTitle1",
+        style: {
+          lineHeight: 1
+        },
         children: label
       })]
     })]

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/Logos/RememberServiceLogo/index.tsx"],"sourcesContent":["import type { GetStyledComponentProps } from '@remember-web/shared';\n\nimport { Divider } from '@/Common';\nimport type { RememberLogoProps } from '@/Logos/types';\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 $color={color} {...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","$color","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;AAAA,EAAA,oBAERC,eAAA,CAACC,2BAAqB,EAAAC,aAAA,CAAAA,aAAA,CAAA;AAACC,IAAAA,MAAM,EAAEP,KAAAA;AAAM,GAAA,EAAKC,KAAK,CAAA,EAAA,EAAA,EAAA;IAAAO,QAAA,EAAA,cAC7CC,cAAA,CAACC,kBAAY,EAAA;AAACV,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAE,CAAC,EAC7BF,KAAK,iBACJM,eAAA,CAAAO,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,EAAIV,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';\n\nimport { Divider, Flex, Typography } from '@/Common';\nimport type { RememberLogoProps } from '@/Logos/types';\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 $color={color} {...props}>\n    <RememberLogo color={color} />\n    {label && (\n      <Flex gap={8}>\n        <Divider decorative orientation=\"vertical\" style={{ height: '15px' }} />\n        <Typography variant=\"SubTitle1\" style={{ lineHeight: 1 }}>\n          {label}\n        </Typography>\n      </Flex>\n    )}\n  </StyledServiceLogoRoot>\n);\n"],"names":["RememberServiceLogo","_ref","label","_ref$color","color","props","_objectWithoutProperties","_excluded","_jsxs","StyledServiceLogoRoot","_objectSpread","$color","children","_jsx","RememberLogo","Flex","gap","Divider","decorative","orientation","style","height","Typography","variant","lineHeight"],"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;AAAA,EAAA,oBAERC,eAAA,CAACC,2BAAqB,EAAAC,aAAA,CAAAA,aAAA,CAAA;AAACC,IAAAA,MAAM,EAAEP,KAAAA;AAAM,GAAA,EAAKC,KAAK,CAAA,EAAA,EAAA,EAAA;IAAAO,QAAA,EAAA,cAC7CC,cAAA,CAACC,kBAAY,EAAA;AAACV,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAE,CAAC,EAC7BF,KAAK,iBACJM,eAAA,CAACO,YAAI,EAAA;AAACC,MAAAA,GAAG,EAAE,CAAE;MAAAJ,QAAA,EAAA,cACXC,cAAA,CAACI,eAAO,EAAA;QAACC,UAAU,EAAA,IAAA;AAACC,QAAAA,WAAW,EAAC,UAAU;AAACC,QAAAA,KAAK,EAAE;AAAEC,UAAAA,MAAM,EAAE,MAAA;AAAO,SAAA;AAAE,OAAE,CAAC,eACxER,cAAA,CAACS,kBAAU,EAAA;AAACC,QAAAA,OAAO,EAAC,WAAW;AAACH,QAAAA,KAAK,EAAE;AAAEI,UAAAA,UAAU,EAAE,CAAA;SAAI;AAAAZ,QAAAA,QAAA,EACtDV,KAAAA;AAAK,OACI,CAAC,CAAA;AAAA,KACT,CACP,CAAA;AAAA,GAAA,CACoB,CAAC,CAAA;AAAA;;;;"}

package/dist/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,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAGpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGvD,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,sBAAsB,CAAC;AAGpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGvD,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,4CAYtB,CAAC"}

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

@@ -1,13 +1,14 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { Divider } from '../../Common/Divider/index.esm.js';
-import '../../Common/Flex/index.esm.js';
+import { Flex } from '../../Common/Flex/index.esm.js';
 import '../../Common/Grid/index.esm.js';
 import '@remember-web/icon';
 import '../../Common/Spinner/styles.esm.js';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react';
 import '../../Common/Skeleton/styles.esm.js';
+import { Typography } from '../../Common/Typography/index.esm.js';
 import '../../Common/Typography/styles.esm.js';
 import { RememberLogo } from '../RememberLogo/index.esm.js';
 import { StyledServiceLogoRoot } from './style.esm.js';
@@ -25,14 +26,19 @@ var RememberServiceLogo = function RememberServiceLogo(_ref) {
   }, props), {}, {
     children: [/*#__PURE__*/jsx(RememberLogo, {
       color: color
-    }), label && /*#__PURE__*/jsxs(Fragment, {
+    }), label && /*#__PURE__*/jsxs(Flex, {
+      gap: 8,
       children: [/*#__PURE__*/jsx(Divider, {
         decorative: true,
         orientation: "vertical",
         style: {
           height: '15px'
         }
-      }), /*#__PURE__*/jsx("b", {
+      }), /*#__PURE__*/jsx(Typography, {
+        variant: "SubTitle1",
+        style: {
+          lineHeight: 1
+        },
         children: label
       })]
     })]

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

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/Logos/RememberServiceLogo/index.tsx"],"sourcesContent":["import type { GetStyledComponentProps } from '@remember-web/shared';\n\nimport { Divider } from '@/Common';\nimport type { RememberLogoProps } from '@/Logos/types';\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 $color={color} {...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","$color","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;AAAA,EAAA,oBAERC,IAAA,CAACC,qBAAqB,EAAAC,aAAA,CAAAA,aAAA,CAAA;AAACC,IAAAA,MAAM,EAAEP,KAAAA;AAAM,GAAA,EAAKC,KAAK,CAAA,EAAA,EAAA,EAAA;IAAAO,QAAA,EAAA,cAC7CC,GAAA,CAACC,YAAY,EAAA;AAACV,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAE,CAAC,EAC7BF,KAAK,iBACJM,IAAA,CAAAO,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,EAAIV,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';\n\nimport { Divider, Flex, Typography } from '@/Common';\nimport type { RememberLogoProps } from '@/Logos/types';\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 $color={color} {...props}>\n    <RememberLogo color={color} />\n    {label && (\n      <Flex gap={8}>\n        <Divider decorative orientation=\"vertical\" style={{ height: '15px' }} />\n        <Typography variant=\"SubTitle1\" style={{ lineHeight: 1 }}>\n          {label}\n        </Typography>\n      </Flex>\n    )}\n  </StyledServiceLogoRoot>\n);\n"],"names":["RememberServiceLogo","_ref","label","_ref$color","color","props","_objectWithoutProperties","_excluded","_jsxs","StyledServiceLogoRoot","_objectSpread","$color","children","_jsx","RememberLogo","Flex","gap","Divider","decorative","orientation","style","height","Typography","variant","lineHeight"],"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;AAAA,EAAA,oBAERC,IAAA,CAACC,qBAAqB,EAAAC,aAAA,CAAAA,aAAA,CAAA;AAACC,IAAAA,MAAM,EAAEP,KAAAA;AAAM,GAAA,EAAKC,KAAK,CAAA,EAAA,EAAA,EAAA;IAAAO,QAAA,EAAA,cAC7CC,GAAA,CAACC,YAAY,EAAA;AAACV,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAE,CAAC,EAC7BF,KAAK,iBACJM,IAAA,CAACO,IAAI,EAAA;AAACC,MAAAA,GAAG,EAAE,CAAE;MAAAJ,QAAA,EAAA,cACXC,GAAA,CAACI,OAAO,EAAA;QAACC,UAAU,EAAA,IAAA;AAACC,QAAAA,WAAW,EAAC,UAAU;AAACC,QAAAA,KAAK,EAAE;AAAEC,UAAAA,MAAM,EAAE,MAAA;AAAO,SAAA;AAAE,OAAE,CAAC,eACxER,GAAA,CAACS,UAAU,EAAA;AAACC,QAAAA,OAAO,EAAC,WAAW;AAACH,QAAAA,KAAK,EAAE;AAAEI,UAAAA,UAAU,EAAE,CAAA;SAAI;AAAAZ,QAAAA,QAAA,EACtDV,KAAAA;AAAK,OACI,CAAC,CAAA;AAAA,KACT,CACP,CAAA;AAAA,GAAA,CACoB,CAAC,CAAA;AAAA;;;;"}

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

@@ -10,11 +10,11 @@ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTempla
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 var _templateObject;
-var StyledServiceLogoRoot = styled__default.default.a(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  box-sizing: border-box;\n  text-decoration: none;\n  color: ", ";\n\n  display: flex;\n  align-items: end;\n  gap: 8px;\n\n  > b {\n    ", ";\n    text-decoration: none;\n    line-height: 16px;\n  }\n"])), function (_ref) {
+var StyledServiceLogoRoot = styled__default.default.a(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  box-sizing: border-box;\n  text-decoration: none;\n  color: ", ";\n\n  display: flex;\n  align-items: flex-end;\n  gap: 8px;\n"])), function (_ref) {
   var _ref$$color = _ref.$color,
     $color = _ref$$color === void 0 ? mixin.contents000 : _ref$$color;
   return $color;
-}, mixin.getTypographyStyles('Title2'));
+});
 
 exports.StyledServiceLogoRoot = StyledServiceLogoRoot;
 //# sourceMappingURL=style.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"style.cjs.js","sources":["../../../../src/Logos/RememberServiceLogo/style.ts"],"sourcesContent":["import { contents000, getTypographyStyles } from '@remember-web/mixin';\nimport styled from 'styled-components';\n\nexport const StyledServiceLogoRoot = styled.a<{ $color?: string }>`\n  box-sizing: border-box;\n  text-decoration: none;\n  color: ${({ $color = contents000 }) => $color};\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","_ref","_ref$$color","$color","contents000","getTypographyStyles"],"mappings":";;;;;;;;;;;;AAGaA,IAAAA,qBAAqB,GAAGC,uBAAM,CAACC,CAAC,CAAAC,eAAA,KAAAA,eAAA,GAAAC,uCAAA,CAAA,CAAA,kEAAA,EAAA,0EAAA,EAAA,8DAAA,CAAA,CAAA,CAAA,EAGlC,UAAAC,IAAA,EAAA;AAAA,EAAA,IAAAC,WAAA,GAAAD,IAAA,CAAGE,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAGE,KAAAA,CAAAA,GAAAA,iBAAW,GAAAF,WAAA,CAAA;AAAA,EAAA,OAAOC,MAAM,CAAA;AAAA,CAAA,EAOzCE,yBAAmB,CAAC,QAAQ,CAAC;;;;"}
+{"version":3,"file":"style.cjs.js","sources":["../../../../src/Logos/RememberServiceLogo/style.ts"],"sourcesContent":["import { contents000, getTypographyStyles } from '@remember-web/mixin';\nimport styled from 'styled-components';\n\nexport const StyledServiceLogoRoot = styled.a<{ $color?: string }>`\n  box-sizing: border-box;\n  text-decoration: none;\n  color: ${({ $color = contents000 }) => $color};\n\n  display: flex;\n  align-items: flex-end;\n  gap: 8px;\n`;\n"],"names":["StyledServiceLogoRoot","styled","a","_templateObject","_taggedTemplateLiteral","_ref","_ref$$color","$color","contents000"],"mappings":";;;;;;;;;;;;AAGaA,IAAAA,qBAAqB,GAAGC,uBAAM,CAACC,CAAC,CAAAC,eAAA,KAAAA,eAAA,GAAAC,uCAAA,CAAA,CAAA,kEAAA,EAAA,gEAAA,CAAA,CAAA,CAAA,EAGlC,UAAAC,IAAA,EAAA;AAAA,EAAA,IAAAC,WAAA,GAAAD,IAAA,CAAGE,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAGE,KAAAA,CAAAA,GAAAA,iBAAW,GAAAF,WAAA,CAAA;AAAA,EAAA,OAAOC,MAAM,CAAA;AAAA,CAK9C;;;;"}

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

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

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

@@ -1,13 +1,13 @@
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import { getTypographyStyles, contents000 } from '@remember-web/mixin';
+import { contents000 } from '@remember-web/mixin';
 import styled from 'styled-components';
 
 var _templateObject;
-var StyledServiceLogoRoot = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  text-decoration: none;\n  color: ", ";\n\n  display: flex;\n  align-items: end;\n  gap: 8px;\n\n  > b {\n    ", ";\n    text-decoration: none;\n    line-height: 16px;\n  }\n"])), function (_ref) {
+var StyledServiceLogoRoot = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  text-decoration: none;\n  color: ", ";\n\n  display: flex;\n  align-items: flex-end;\n  gap: 8px;\n"])), function (_ref) {
   var _ref$$color = _ref.$color,
     $color = _ref$$color === void 0 ? contents000 : _ref$$color;
   return $color;
-}, getTypographyStyles('Title2'));
+});
 
 export { StyledServiceLogoRoot };
 //# sourceMappingURL=style.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"style.esm.js","sources":["../../../../src/Logos/RememberServiceLogo/style.ts"],"sourcesContent":["import { contents000, getTypographyStyles } from '@remember-web/mixin';\nimport styled from 'styled-components';\n\nexport const StyledServiceLogoRoot = styled.a<{ $color?: string }>`\n  box-sizing: border-box;\n  text-decoration: none;\n  color: ${({ $color = contents000 }) => $color};\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","_ref","_ref$$color","$color","contents000","getTypographyStyles"],"mappings":";;;;;AAGaA,IAAAA,qBAAqB,GAAGC,MAAM,CAACC,CAAC,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CAAA,CAAA,kEAAA,EAAA,0EAAA,EAAA,8DAAA,CAAA,CAAA,CAAA,EAGlC,UAAAC,IAAA,EAAA;AAAA,EAAA,IAAAC,WAAA,GAAAD,IAAA,CAAGE,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAGE,KAAAA,CAAAA,GAAAA,WAAW,GAAAF,WAAA,CAAA;AAAA,EAAA,OAAOC,MAAM,CAAA;AAAA,CAAA,EAOzCE,mBAAmB,CAAC,QAAQ,CAAC;;;;"}
+{"version":3,"file":"style.esm.js","sources":["../../../../src/Logos/RememberServiceLogo/style.ts"],"sourcesContent":["import { contents000, getTypographyStyles } from '@remember-web/mixin';\nimport styled from 'styled-components';\n\nexport const StyledServiceLogoRoot = styled.a<{ $color?: string }>`\n  box-sizing: border-box;\n  text-decoration: none;\n  color: ${({ $color = contents000 }) => $color};\n\n  display: flex;\n  align-items: flex-end;\n  gap: 8px;\n`;\n"],"names":["StyledServiceLogoRoot","styled","a","_templateObject","_taggedTemplateLiteral","_ref","_ref$$color","$color","contents000"],"mappings":";;;;;AAGaA,IAAAA,qBAAqB,GAAGC,MAAM,CAACC,CAAC,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CAAA,CAAA,kEAAA,EAAA,gEAAA,CAAA,CAAA,CAAA,EAGlC,UAAAC,IAAA,EAAA;AAAA,EAAA,IAAAC,WAAA,GAAAD,IAAA,CAAGE,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAGE,KAAAA,CAAAA,GAAAA,WAAW,GAAAF,WAAA,CAAA;AAAA,EAAA,OAAOC,MAAM,CAAA;AAAA,CAK9C;;;;"}

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

@@ -37,8 +37,8 @@ var StyledOverlay = styled__default.default(DialogPrimitive__namespace.Overlay)(
 var DialogContent = styled__default.default(DialogPrimitive__namespace.Content)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n  box-sizing: border-box;\n  background-color: ", ";\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: ", " 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n"])), mixin.primary200, contentShow);
 var DialogIcon = styled__default.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n  margin-bottom: 16px;\n"])));
 var IconButton = styled__default.default.button(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  height: 16px;\n  width: 16px;\n  margin: -8px 0 8px 0;\n  align-self: flex-end;\n  cursor: pointer;\n"])));
-var DialogTitle = styled__default.default(DialogPrimitive__namespace.Title)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n  ", "\n\n  color: ", ";\n  margin: 0;\n  padding: 0;\n  white-space: pre-line;\n"])), mixin.getTypographyStyles('Headline4_B'), mixin.contents000);
-var DialogDescription = styled__default.default(DialogPrimitive__namespace.Description)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default.default(["\n  ", "\n\n  color: ", ";\n  margin: 4px 0 24px;\n  text-align: center;\n  white-space: pre-line;\n"])), mixin.getTypographyStyles('Body1_M'), mixin.contents100);
+var DialogTitle = styled__default.default(DialogPrimitive__namespace.Title)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n  ", "\n\n  color: ", ";\n  margin: 0;\n  padding: 0;\n  white-space: pre-line;\n"])), mixin.getTypographyStyles('SubTitle1'), mixin.contents000);
+var DialogDescription = styled__default.default(DialogPrimitive__namespace.Description)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default.default(["\n  ", "\n\n  color: ", ";\n  margin: 4px 0 24px;\n  text-align: center;\n  white-space: pre-line;\n"])), mixin.getTypographyStyles('UIBody3'), mixin.contents100);
 
 exports.DialogContent = DialogContent;
 exports.DialogDescription = DialogDescription;

package/dist/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 * as DialogPrimitive from '@radix-ui/react-dialog';\nimport {\n  contents000,\n  contents100,\n  getTypographyStyles,\n  primary200,\n} from '@remember-web/mixin';\nimport styled, { keyframes } from 'styled-components';\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;;;;;;;;;"}
+{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Modals/Dialog/styles.ts"],"sourcesContent":["'use client';\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport {\n  contents000,\n  contents100,\n  getTypographyStyles,\n  primary200,\n} from '@remember-web/mixin';\nimport styled, { keyframes } from 'styled-components';\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('SubTitle1')}\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('UIBody3')}\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/src/Modals/Dialog/styles.esm.js

@@ -11,8 +11,8 @@ var StyledOverlay = styled(DialogPrimitive.Overlay)(_templateObject3 || (_templa
 var DialogContent = styled(DialogPrimitive.Content)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  background-color: ", ";\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: ", " 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n"])), primary200, contentShow);
 var DialogIcon = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-bottom: 16px;\n"])));
 var IconButton = styled.button(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  all: unset;\n  height: 16px;\n  width: 16px;\n  margin: -8px 0 8px 0;\n  align-self: flex-end;\n  cursor: pointer;\n"])));
-var DialogTitle = styled(DialogPrimitive.Title)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n\n  color: ", ";\n  margin: 0;\n  padding: 0;\n  white-space: pre-line;\n"])), getTypographyStyles('Headline4_B'), contents000);
-var DialogDescription = styled(DialogPrimitive.Description)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", "\n\n  color: ", ";\n  margin: 4px 0 24px;\n  text-align: center;\n  white-space: pre-line;\n"])), getTypographyStyles('Body1_M'), contents100);
+var DialogTitle = styled(DialogPrimitive.Title)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n\n  color: ", ";\n  margin: 0;\n  padding: 0;\n  white-space: pre-line;\n"])), getTypographyStyles('SubTitle1'), contents000);
+var DialogDescription = styled(DialogPrimitive.Description)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", "\n\n  color: ", ";\n  margin: 4px 0 24px;\n  text-align: center;\n  white-space: pre-line;\n"])), getTypographyStyles('UIBody3'), contents100);
 
 export { DialogContent, DialogDescription, DialogIcon, DialogTitle, IconButton, StyledOverlay, contentShow, overlayShow };
 //# sourceMappingURL=styles.esm.js.map

package/dist/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 * as DialogPrimitive from '@radix-ui/react-dialog';\nimport {\n  contents000,\n  contents100,\n  getTypographyStyles,\n  primary200,\n} from '@remember-web/mixin';\nimport styled, { keyframes } from 'styled-components';\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;;"}
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/Modals/Dialog/styles.ts"],"sourcesContent":["'use client';\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport {\n  contents000,\n  contents100,\n  getTypographyStyles,\n  primary200,\n} from '@remember-web/mixin';\nimport styled, { keyframes } from 'styled-components';\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('SubTitle1')}\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('UIBody3')}\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/src/Paginations/styles.cjs.js

@@ -12,13 +12,13 @@ var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 var PaginationContainer = styled__default.default.nav(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\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  ", "\n"])), mixin.mobileOnly(styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n    gap: 8px;\n  "])))));
-var CompactPaginationContainer = styled__default.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n\n  ", "\n  gap: 16px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: fit-content;\n"])), mixin.getTypographyStyles('Body1_M'));
-var CurrentPage = styled__default.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n  ", "\n"])), mixin.getTypographyStyles('Body1_B'));
+var CompactPaginationContainer = styled__default.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n\n  ", "\n  gap: 16px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  height: fit-content;\n"])), mixin.getTypographyStyles('UIBody3'));
+var CurrentPage = styled__default.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n  ", "\n"])), mixin.getTypographyStyles('SubTitle2'));
 var Pages = styled__default.default.ul(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  display: inherit;\n  gap: 4px;\n"])));
 var Page = styled__default.default.li(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default([""])));
 var DefaultButton = styled__default.default.button.attrs({
   type: 'button'
-})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  appearance: none;\n  box-sizing: border-box;\n\n  ", "\n  display: grid;\n  place-items: center;\n\n  min-width: 34px;\n  height: 34px;\n  cursor: pointer;\n  color: ", ";\n  border-radius: 4px;\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n"])), mixin.getTypographyStyles('Body1_M'), mixin.contents000, mixin.contents000);
+})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  appearance: none;\n  box-sizing: border-box;\n\n  ", "\n  display: grid;\n  place-items: center;\n\n  min-width: 34px;\n  height: 34px;\n  cursor: pointer;\n  color: ", ";\n  border-radius: 4px;\n\n  &:disabled {\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n"])), mixin.getTypographyStyles('UIBody3'), mixin.contents000, mixin.contents000);
 var ArrowButton = styled__default.default(DefaultButton)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default.default(["\n  ", "\n\n  ", "\n"])), mixin.desktopOnly(styled.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default.default(["\n    &:hover {\n      background-color: ", ";\n    }\n    &:active {\n      background-color: ", ";\n    }\n  "])), mixin.bg200, mixin.bg300)), mixin.mobileOnly(styled.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default.default(["\n    min-width: 44px;\n    height: 44px;\n  "])))));
 var BaseButton = styled__default.default(DefaultButton)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default.default(["\n  &:hover,\n  &:focus {\n    border: solid 1px ", ";\n    border-radius: 4px;\n    background-color: ", ";\n  }\n\n  ", "\n"])), mixin.contents300, mixin.bg100, mixin.mobileOnly(styled.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral__default.default(["\n    min-width: 44px;\n    height: 44px;\n  "])))));
 var PageButton = styled__default.default(BaseButton)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral__default.default(["\n  ", "\n"])), function (_ref) {

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

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs.js","sources":["../../../src/Paginations/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n  bg100,\n  bg200,\n  bg300,\n  contents000,\n  contents300,\n  desktopOnly,\n  getTypographyStyles,\n  mobileOnly,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\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 {\n  bg100,\n  bg200,\n  bg300,\n  contents000,\n  contents300,\n  desktopOnly,\n  getTypographyStyles,\n  mobileOnly,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\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('UIBody3')}\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('SubTitle2')}\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('UIBody3')}\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;;;;;;;;;"}