@remember-web/primitive 0.2.13 → 0.2.14

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

@@ -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('SubTitle1'), 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('Title2'), 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('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;;;;"}
+{"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('Title2')}\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

@@ -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('SubTitle1'), 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('Title2'), 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('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;;;"}
+{"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('Title2')}\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/types.d.ts

@@ -9,6 +9,9 @@ export type SelectBaseProps<Value extends SelectValue> = {
     className?: string;
     disabled?: boolean;
     error?: boolean;
+    /**
+     * @deprecated Label 컴포넌트를 사용해 주세요.
+     */
     label?: ReactNode;
     required?: boolean;
     value?: Value;

package/dist/src/Inputs/Select/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,WAAW,IAAI,YAAY,CACrE,WAAW,CAAC,KAAK,CAAC,EAClB,OAAO,YAAY,CACpB,CAAC;AAEF,KAAK,eAAe,CAAC,KAAK,SAAS,WAAW,IAAI;IAChD,QAAQ,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC;CACjE,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,WAAW,IAAI;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CACT,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,SAAS,KACnB,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,KAAK,SAAS,WAAW,IACvD,eAAe,CAAC,KAAK,CAAC,GAAG;IACvB,MAAM,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CACrC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAE7B,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,WAAW,IACrD,eAAe,CAAC,KAAK,CAAC,GAAG;IACvB,MAAM,EAAE,IAAI,CAAC;CACd,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAE7B,MAAM,MAAM,WAAW,CAAC,KAAK,SAAS,WAAW,IAC7C,mBAAmB,CAAC,KAAK,CAAC,GAC1B,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAE7B,MAAM,MAAM,WAAW,CAAC,KAAK,SAAS,WAAW,IAAI;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,WAAW,IAAI,YAAY,CACrE,WAAW,CAAC,KAAK,CAAC,EAClB,OAAO,YAAY,CACpB,CAAC;AAEF,KAAK,eAAe,CAAC,KAAK,SAAS,WAAW,IAAI;IAChD,QAAQ,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC;CACjE,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,WAAW,IAAI;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CACT,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,SAAS,KACnB,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,KAAK,SAAS,WAAW,IACvD,eAAe,CAAC,KAAK,CAAC,GAAG;IACvB,MAAM,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CACrC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAE7B,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,WAAW,IACrD,eAAe,CAAC,KAAK,CAAC,GAAG;IACvB,MAAM,EAAE,IAAI,CAAC;CACd,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAE7B,MAAM,MAAM,WAAW,CAAC,KAAK,SAAS,WAAW,IAC7C,mBAAmB,CAAC,KAAK,CAAC,GAC1B,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAE7B,MAAM,MAAM,WAAW,CAAC,KAAK,SAAS,WAAW,IAAI;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC"}

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

@@ -23,8 +23,8 @@ var InputContainer = styled__default.default.div(_templateObject3 || (_templateO
 });
 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('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 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('Title2'), mixin.roleRed);
+var InputError = styled__default.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default.default(["\n  ", "\n  color: ", ";\n\n  margin-top: 8px;\n"])), mixin.getTypographyStyles('UIBody3'), 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('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;;;;;;;;;"}
+{"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('Title2')}\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('UIBody3')}\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.esm.js

@@ -16,8 +16,8 @@ var InputContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedT
 });
 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('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 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('Title2'), roleRed);
+var InputError = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n  color: ", ";\n\n  margin-top: 8px;\n"])), getTypographyStyles('UIBody3'), 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('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;;"}
+{"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('Title2')}\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('UIBody3')}\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/types.d.ts

@@ -3,6 +3,9 @@ import type { InputHTMLAttributes, ReactNode } from 'react';
 type BaseInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, `aria-${string}`>;
 type TextInputProps = {
     type?: 'text' | 'number' | 'email' | 'search' | 'tel' | 'url' | 'date' | 'datetime-local';
+    /**
+     * @deprecated Label 컴포넌트를 사용해 주세요.
+     */
     label?: ReactNode;
     hintText?: string;
     hintTextColor?: ColorVariable;

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

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

package/dist/src/Labels/Label/index.cjs.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('../../Common/Divider/index.cjs.js');
+var index = require('../../Common/Flex/index.cjs.js');
+require('../../Common/Grid/index.cjs.js');
+var icon = require('@remember-web/icon');
+require('../../Common/Spinner/styles.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('../../Common/Skeleton/styles.cjs.js');
+require('../../Common/Typography/styles.cjs.js');
+var styles = require('./styles.cjs.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
+
+var _excluded = ["text", "children", "direction", "size", "gap", "width", "rightElement", "required", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Label = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
+  var text = _ref.text,
+    children = _ref.children,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'top-left' : _ref$direction,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    gap = _ref.gap,
+    width = _ref.width,
+    rightElement = _ref.rightElement,
+    required = _ref.required,
+    className = _ref.className,
+    props = _objectWithoutProperties__default.default(_ref, _excluded);
+  return /*#__PURE__*/jsxRuntime.jsxs(styles.LabelContainer, _objectSpread(_objectSpread({
+    ref: ref,
+    $size: size,
+    className: className,
+    $direction: direction,
+    $gap: gap,
+    $width: width
+  }, props), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(index.Flex, {
+      gap: 4,
+      children: [text, /*#__PURE__*/jsxRuntime.jsxs(index.Flex, {
+        children: [rightElement, required && /*#__PURE__*/jsxRuntime.jsx(index.Flex, {
+          className: "required-icon",
+          children: /*#__PURE__*/jsxRuntime.jsx(icon.IconRequiredS, {})
+        })]
+      })]
+    }), children]
+  }));
+});
+
+module.exports = Label;
+//# sourceMappingURL=index.cjs.js.map

package/dist/src/Labels/Label/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/Labels/Label/index.tsx"],"sourcesContent":["import { Flex } from '@/Common';\nimport { IconRequiredS } from '@remember-web/icon';\nimport { forwardRef } from 'react';\nimport { LabelContainer } from './styles';\nimport type { LabelProps } from './types';\n\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n  (\n    {\n      text,\n      children,\n      direction = 'top-left',\n      size = 'small',\n      gap,\n      width,\n      rightElement,\n      required,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <LabelContainer\n        ref={ref}\n        $size={size}\n        className={className}\n        $direction={direction}\n        $gap={gap}\n        $width={width}\n        {...props}\n      >\n        <Flex gap={4}>\n          {text}\n          <Flex>\n            {rightElement}\n            {required && (\n              <Flex className=\"required-icon\">\n                <IconRequiredS />\n              </Flex>\n            )}\n          </Flex>\n        </Flex>\n        {children}\n      </LabelContainer>\n    );\n  }\n);\n\nexport default Label;\n"],"names":["Label","forwardRef","_ref","ref","text","children","_ref$direction","direction","_ref$size","size","gap","width","rightElement","required","className","props","_objectWithoutProperties","_excluded","_jsxs","LabelContainer","_objectSpread","$size","$direction","$gap","$width","Flex","_jsx","IconRequiredS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAMMA,IAAAA,KAAK,gBAAGC,gBAAU,CACtB,UAAAC,IAAA,EAaEC,GAAG,EACA;AAAA,EAAA,IAZDC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAAC,cAAA,GAAAJ,IAAA,CACRK,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,UAAU,GAAAA,cAAA;IAAAE,SAAA,GAAAN,IAAA,CACtBO,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,SAAA;IACdE,GAAG,GAAAR,IAAA,CAAHQ,GAAG;IACHC,KAAK,GAAAT,IAAA,CAALS,KAAK;IACLC,YAAY,GAAAV,IAAA,CAAZU,YAAY;IACZC,QAAQ,GAAAX,IAAA,CAARW,QAAQ;IACRC,SAAS,GAAAZ,IAAA,CAATY,SAAS;AACNC,IAAAA,KAAK,GAAAC,yCAAA,CAAAd,IAAA,EAAAe,SAAA,CAAA,CAAA;AAIV,EAAA,oBACEC,eAAA,CAACC,qBAAc,EAAAC,aAAA,CAAAA,aAAA,CAAA;AACbjB,IAAAA,GAAG,EAAEA,GAAI;AACTkB,IAAAA,KAAK,EAAEZ,IAAK;AACZK,IAAAA,SAAS,EAAEA,SAAU;AACrBQ,IAAAA,UAAU,EAAEf,SAAU;AACtBgB,IAAAA,IAAI,EAAEb,GAAI;AACVc,IAAAA,MAAM,EAAEb,KAAAA;AAAM,GAAA,EACVI,KAAK,CAAA,EAAA,EAAA,EAAA;IAAAV,QAAA,EAAA,cAETa,eAAA,CAACO,UAAI,EAAA;AAACf,MAAAA,GAAG,EAAE,CAAE;AAAAL,MAAAA,QAAA,EACVD,CAAAA,IAAI,eACLc,eAAA,CAACO,UAAI,EAAA;AAAApB,QAAAA,QAAA,GACFO,YAAY,EACZC,QAAQ,iBACPa,cAAA,CAACD,UAAI,EAAA;AAACX,UAAAA,SAAS,EAAC,eAAe;AAAAT,UAAAA,QAAA,eAC7BqB,cAAA,CAACC,kBAAa,EAAE,EAAA,CAAA;AAAC,SACb,CACP,CAAA;AAAA,OACG,CAAC,CAAA;KACH,CAAC,EACNtB,QAAQ,CAAA;AAAA,GAAA,CACK,CAAC,CAAA;AAErB,CACF;;;;"}

package/dist/src/Labels/Label/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { LabelProps } from './types';
+declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+export default Label;
+//# sourceMappingURL=index.d.ts.map

package/dist/src/Labels/Label/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Labels/Label/index.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,QAAA,MAAM,KAAK,yGAyCV,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/src/Labels/Label/index.esm.js

@@ -0,0 +1,51 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import '../../Common/Divider/index.esm.js';
+import { Flex } from '../../Common/Flex/index.esm.js';
+import '../../Common/Grid/index.esm.js';
+import { IconRequiredS } from '@remember-web/icon';
+import '../../Common/Spinner/styles.esm.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import '../../Common/Skeleton/styles.esm.js';
+import '../../Common/Typography/styles.esm.js';
+import { LabelContainer } from './styles.esm.js';
+
+var _excluded = ["text", "children", "direction", "size", "gap", "width", "rightElement", "required", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Label = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var text = _ref.text,
+    children = _ref.children,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'top-left' : _ref$direction,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    gap = _ref.gap,
+    width = _ref.width,
+    rightElement = _ref.rightElement,
+    required = _ref.required,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsxs(LabelContainer, _objectSpread(_objectSpread({
+    ref: ref,
+    $size: size,
+    className: className,
+    $direction: direction,
+    $gap: gap,
+    $width: width
+  }, props), {}, {
+    children: [/*#__PURE__*/jsxs(Flex, {
+      gap: 4,
+      children: [text, /*#__PURE__*/jsxs(Flex, {
+        children: [rightElement, required && /*#__PURE__*/jsx(Flex, {
+          className: "required-icon",
+          children: /*#__PURE__*/jsx(IconRequiredS, {})
+        })]
+      })]
+    }), children]
+  }));
+});
+
+export { Label as default };
+//# sourceMappingURL=index.esm.js.map

package/dist/src/Labels/Label/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../src/Labels/Label/index.tsx"],"sourcesContent":["import { Flex } from '@/Common';\nimport { IconRequiredS } from '@remember-web/icon';\nimport { forwardRef } from 'react';\nimport { LabelContainer } from './styles';\nimport type { LabelProps } from './types';\n\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n  (\n    {\n      text,\n      children,\n      direction = 'top-left',\n      size = 'small',\n      gap,\n      width,\n      rightElement,\n      required,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <LabelContainer\n        ref={ref}\n        $size={size}\n        className={className}\n        $direction={direction}\n        $gap={gap}\n        $width={width}\n        {...props}\n      >\n        <Flex gap={4}>\n          {text}\n          <Flex>\n            {rightElement}\n            {required && (\n              <Flex className=\"required-icon\">\n                <IconRequiredS />\n              </Flex>\n            )}\n          </Flex>\n        </Flex>\n        {children}\n      </LabelContainer>\n    );\n  }\n);\n\nexport default Label;\n"],"names":["Label","forwardRef","_ref","ref","text","children","_ref$direction","direction","_ref$size","size","gap","width","rightElement","required","className","props","_objectWithoutProperties","_excluded","_jsxs","LabelContainer","_objectSpread","$size","$direction","$gap","$width","Flex","_jsx","IconRequiredS"],"mappings":";;;;;;;;;;;;;;;;AAMMA,IAAAA,KAAK,gBAAGC,UAAU,CACtB,UAAAC,IAAA,EAaEC,GAAG,EACA;AAAA,EAAA,IAZDC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAAC,cAAA,GAAAJ,IAAA,CACRK,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,UAAU,GAAAA,cAAA;IAAAE,SAAA,GAAAN,IAAA,CACtBO,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,SAAA;IACdE,GAAG,GAAAR,IAAA,CAAHQ,GAAG;IACHC,KAAK,GAAAT,IAAA,CAALS,KAAK;IACLC,YAAY,GAAAV,IAAA,CAAZU,YAAY;IACZC,QAAQ,GAAAX,IAAA,CAARW,QAAQ;IACRC,SAAS,GAAAZ,IAAA,CAATY,SAAS;AACNC,IAAAA,KAAK,GAAAC,wBAAA,CAAAd,IAAA,EAAAe,SAAA,CAAA,CAAA;AAIV,EAAA,oBACEC,IAAA,CAACC,cAAc,EAAAC,aAAA,CAAAA,aAAA,CAAA;AACbjB,IAAAA,GAAG,EAAEA,GAAI;AACTkB,IAAAA,KAAK,EAAEZ,IAAK;AACZK,IAAAA,SAAS,EAAEA,SAAU;AACrBQ,IAAAA,UAAU,EAAEf,SAAU;AACtBgB,IAAAA,IAAI,EAAEb,GAAI;AACVc,IAAAA,MAAM,EAAEb,KAAAA;AAAM,GAAA,EACVI,KAAK,CAAA,EAAA,EAAA,EAAA;IAAAV,QAAA,EAAA,cAETa,IAAA,CAACO,IAAI,EAAA;AAACf,MAAAA,GAAG,EAAE,CAAE;AAAAL,MAAAA,QAAA,EACVD,CAAAA,IAAI,eACLc,IAAA,CAACO,IAAI,EAAA;AAAApB,QAAAA,QAAA,GACFO,YAAY,EACZC,QAAQ,iBACPa,GAAA,CAACD,IAAI,EAAA;AAACX,UAAAA,SAAS,EAAC,eAAe;AAAAT,UAAAA,QAAA,eAC7BqB,GAAA,CAACC,aAAa,EAAE,EAAA,CAAA;AAAC,SACb,CACP,CAAA;AAAA,OACG,CAAC,CAAA;KACH,CAAC,EACNtB,QAAQ,CAAA;AAAA,GAAA,CACK,CAAC,CAAA;AAErB,CACF;;;;"}

package/dist/src/Labels/Label/styles.cjs.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var mixin = require('@remember-web/mixin');
+var styled = require('styled-components');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+var LabelContainer = styled__default.default.label(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  display: flex;\n  position: relative;\n  width: ", ";\n  min-width: min-content; \n\n  ", "\n\n  ", "\n\n  /* Size styles */\n   ", "\n"])), function (_ref) {
+  var _ref$$width = _ref.$width,
+    $width = _ref$$width === void 0 ? 'auto' : _ref$$width;
+  return $width;
+}, function (_ref2) {
+  var $size = _ref2.$size,
+    $gap = _ref2.$gap;
+  var defaultGap = $size === 'large' ? '12px' : '8px';
+  var finalGap = $gap !== undefined ? "".concat($gap, "px") : defaultGap;
+  return styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n      gap: ", ";\n    "])), finalGap);
+}, function (_ref3) {
+  var _ref3$$direction = _ref3.$direction,
+    $direction = _ref3$$direction === void 0 ? 'top' : _ref3$$direction;
+  switch ($direction) {
+    // Top variations
+    case 'top':
+      return styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n          flex-direction: column;\n          align-items: flex-start;\n        "])));
+    case 'top-left':
+      return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n          flex-direction: column;\n          align-items: flex-start;\n        "])));
+    case 'top-right':
+      return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n          flex-direction: column;\n          align-items: flex-end;\n        "])));
+    case 'top-center':
+      return styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default(["\n          flex-direction: column;\n          align-items: center;\n        "])));
+
+    // Bottom variations
+    case 'bottom':
+      return styled.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n          flex-direction: column-reverse;\n          align-items: flex-start;\n        "])));
+    case 'bottom-left':
+      return styled.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default.default(["\n          flex-direction: column-reverse;\n          align-items: flex-start;\n        "])));
+    case 'bottom-right':
+      return styled.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default.default(["\n          flex-direction: column-reverse;\n          align-items: flex-end;\n        "])));
+    case 'bottom-center':
+      return styled.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default.default(["\n          flex-direction: column-reverse;\n          align-items: center;\n        "])));
+
+    // Left variations
+    case 'left':
+      return styled.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default.default(["\n          flex-direction: row;\n          align-items: center;\n        "])));
+    case 'left-top':
+      return styled.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral__default.default(["\n          flex-direction: row;\n          align-items: flex-start;\n        "])));
+    case 'left-bottom':
+      return styled.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral__default.default(["\n          flex-direction: row;\n          align-items: flex-end;\n        "])));
+    case 'left-center':
+      return styled.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral__default.default(["\n          flex-direction: row;\n          align-items: center;\n        "])));
+
+    // Right variations
+    case 'right':
+      return styled.css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral__default.default(["\n          flex-direction: row-reverse;\n          align-items: center;\n        "])));
+    case 'right-top':
+      return styled.css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral__default.default(["\n          flex-direction: row-reverse;\n          align-items: flex-start;\n        "])));
+    case 'right-bottom':
+      return styled.css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral__default.default(["\n          flex-direction: row-reverse;\n          align-items: flex-end;\n        "])));
+    case 'right-center':
+      return styled.css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral__default.default(["\n          flex-direction: row-reverse;\n          align-items: center;\n        "])));
+  }
+}, function (_ref4) {
+  var $size = _ref4.$size;
+  switch ($size) {
+    case 'small':
+      return styled.css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral__default.default(["\n          ", "\n          color: ", ";\n        "])), mixin.getTypographyStyles('UIBody2'), mixin.contents100);
+    case 'large':
+    default:
+      return styled.css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral__default.default(["\n          ", "\n          color: ", ";\n        "])), mixin.getTypographyStyles('Title2'), mixin.contents000);
+  }
+});
+
+exports.LabelContainer = LabelContainer;
+//# sourceMappingURL=styles.cjs.js.map

package/dist/src/Labels/Label/styles.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Labels/Label/styles.ts"],"sourcesContent":["import {\n  contents000,\n  contents100,\n  getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\nimport type { LabelProps } from './types';\n\ninterface LabelContainerProps {\n  $size: LabelProps['size'];\n  $direction: LabelProps['direction'];\n  $gap: LabelProps['gap'];\n  $width: LabelProps['width'];\n}\nexport const LabelContainer = styled.label<LabelContainerProps>`\n  display: flex;\n  position: relative;\n  width: ${({ $width = 'auto' }) => $width};\n  min-width: min-content; \n\n  ${({ $size, $gap }) => {\n    const defaultGap = $size === 'large' ? '12px' : '8px';\n    const finalGap = $gap !== undefined ? `${$gap}px` : defaultGap;\n\n    return css`\n      gap: ${finalGap};\n    `;\n  }}\n\n  ${({ $direction = 'top' }) => {\n    switch ($direction) {\n      // Top variations\n      case 'top':\n        return css`\n          flex-direction: column;\n          align-items: flex-start;\n        `;\n      case 'top-left':\n        return css`\n          flex-direction: column;\n          align-items: flex-start;\n        `;\n      case 'top-right':\n        return css`\n          flex-direction: column;\n          align-items: flex-end;\n        `;\n      case 'top-center':\n        return css`\n          flex-direction: column;\n          align-items: center;\n        `;\n\n      // Bottom variations\n      case 'bottom':\n        return css`\n          flex-direction: column-reverse;\n          align-items: flex-start;\n        `;\n      case 'bottom-left':\n        return css`\n          flex-direction: column-reverse;\n          align-items: flex-start;\n        `;\n      case 'bottom-right':\n        return css`\n          flex-direction: column-reverse;\n          align-items: flex-end;\n        `;\n      case 'bottom-center':\n        return css`\n          flex-direction: column-reverse;\n          align-items: center;\n        `;\n\n      // Left variations\n      case 'left':\n        return css`\n          flex-direction: row;\n          align-items: center;\n        `;\n      case 'left-top':\n        return css`\n          flex-direction: row;\n          align-items: flex-start;\n        `;\n      case 'left-bottom':\n        return css`\n          flex-direction: row;\n          align-items: flex-end;\n        `;\n      case 'left-center':\n        return css`\n          flex-direction: row;\n          align-items: center;\n        `;\n\n      // Right variations\n      case 'right':\n        return css`\n          flex-direction: row-reverse;\n          align-items: center;\n        `;\n      case 'right-top':\n        return css`\n          flex-direction: row-reverse;\n          align-items: flex-start;\n        `;\n      case 'right-bottom':\n        return css`\n          flex-direction: row-reverse;\n          align-items: flex-end;\n        `;\n      case 'right-center':\n        return css`\n          flex-direction: row-reverse;\n          align-items: center;\n        `;\n    }\n  }}\n\n  /* Size styles */\n   ${({ $size }) => {\n     switch ($size) {\n       case 'small':\n         return css`\n          ${getTypographyStyles('UIBody2')}\n          color: ${contents100};\n        `;\n       case 'large':\n       default:\n         return css`\n          ${getTypographyStyles('Title2')}\n          color: ${contents000};\n        `;\n     }\n   }}\n`;\n"],"names":["LabelContainer","styled","label","_templateObject","_taggedTemplateLiteral","_ref","_ref$$width","$width","_ref2","$size","$gap","defaultGap","finalGap","undefined","concat","css","_templateObject2","_ref3","_ref3$$direction","$direction","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","_templateObject18","_ref4","_templateObject19","getTypographyStyles","contents100","_templateObject20","contents000"],"mappings":"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"}

package/dist/src/Labels/Label/styles.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { LabelProps } from './types';
+interface LabelContainerProps {
+    $size: LabelProps['size'];
+    $direction: LabelProps['direction'];
+    $gap: LabelProps['gap'];
+    $width: LabelProps['width'];
+}
+export declare const LabelContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, LabelContainerProps>>;
+export {};
+//# sourceMappingURL=styles.d.ts.map

package/dist/src/Labels/Label/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Labels/Label/styles.ts"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,UAAU,mBAAmB;IAC3B,KAAK,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC1B,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IACpC,IAAI,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IACxB,MAAM,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;CAC7B;AACD,eAAO,MAAM,cAAc,yOA2H1B,CAAC"}

package/dist/src/Labels/Label/styles.esm.js

@@ -0,0 +1,72 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import { getTypographyStyles, contents000, contents100 } from '@remember-web/mixin';
+import styled, { css } from 'styled-components';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+var LabelContainer = styled.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  width: ", ";\n  min-width: min-content; \n\n  ", "\n\n  ", "\n\n  /* Size styles */\n   ", "\n"])), function (_ref) {
+  var _ref$$width = _ref.$width,
+    $width = _ref$$width === void 0 ? 'auto' : _ref$$width;
+  return $width;
+}, function (_ref2) {
+  var $size = _ref2.$size,
+    $gap = _ref2.$gap;
+  var defaultGap = $size === 'large' ? '12px' : '8px';
+  var finalGap = $gap !== undefined ? "".concat($gap, "px") : defaultGap;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      gap: ", ";\n    "])), finalGap);
+}, function (_ref3) {
+  var _ref3$$direction = _ref3.$direction,
+    $direction = _ref3$$direction === void 0 ? 'top' : _ref3$$direction;
+  switch ($direction) {
+    // Top variations
+    case 'top':
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          flex-direction: column;\n          align-items: flex-start;\n        "])));
+    case 'top-left':
+      return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          flex-direction: column;\n          align-items: flex-start;\n        "])));
+    case 'top-right':
+      return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          flex-direction: column;\n          align-items: flex-end;\n        "])));
+    case 'top-center':
+      return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          flex-direction: column;\n          align-items: center;\n        "])));
+
+    // Bottom variations
+    case 'bottom':
+      return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          flex-direction: column-reverse;\n          align-items: flex-start;\n        "])));
+    case 'bottom-left':
+      return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          flex-direction: column-reverse;\n          align-items: flex-start;\n        "])));
+    case 'bottom-right':
+      return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          flex-direction: column-reverse;\n          align-items: flex-end;\n        "])));
+    case 'bottom-center':
+      return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          flex-direction: column-reverse;\n          align-items: center;\n        "])));
+
+    // Left variations
+    case 'left':
+      return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          flex-direction: row;\n          align-items: center;\n        "])));
+    case 'left-top':
+      return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n          flex-direction: row;\n          align-items: flex-start;\n        "])));
+    case 'left-bottom':
+      return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n          flex-direction: row;\n          align-items: flex-end;\n        "])));
+    case 'left-center':
+      return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n          flex-direction: row;\n          align-items: center;\n        "])));
+
+    // Right variations
+    case 'right':
+      return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n          flex-direction: row-reverse;\n          align-items: center;\n        "])));
+    case 'right-top':
+      return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n          flex-direction: row-reverse;\n          align-items: flex-start;\n        "])));
+    case 'right-bottom':
+      return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n          flex-direction: row-reverse;\n          align-items: flex-end;\n        "])));
+    case 'right-center':
+      return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n          flex-direction: row-reverse;\n          align-items: center;\n        "])));
+  }
+}, function (_ref4) {
+  var $size = _ref4.$size;
+  switch ($size) {
+    case 'small':
+      return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n          ", "\n          color: ", ";\n        "])), getTypographyStyles('UIBody2'), contents100);
+    case 'large':
+    default:
+      return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n          ", "\n          color: ", ";\n        "])), getTypographyStyles('Title2'), contents000);
+  }
+});
+
+export { LabelContainer };
+//# sourceMappingURL=styles.esm.js.map

package/dist/src/Labels/Label/styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/Labels/Label/styles.ts"],"sourcesContent":["import {\n  contents000,\n  contents100,\n  getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\nimport type { LabelProps } from './types';\n\ninterface LabelContainerProps {\n  $size: LabelProps['size'];\n  $direction: LabelProps['direction'];\n  $gap: LabelProps['gap'];\n  $width: LabelProps['width'];\n}\nexport const LabelContainer = styled.label<LabelContainerProps>`\n  display: flex;\n  position: relative;\n  width: ${({ $width = 'auto' }) => $width};\n  min-width: min-content; \n\n  ${({ $size, $gap }) => {\n    const defaultGap = $size === 'large' ? '12px' : '8px';\n    const finalGap = $gap !== undefined ? `${$gap}px` : defaultGap;\n\n    return css`\n      gap: ${finalGap};\n    `;\n  }}\n\n  ${({ $direction = 'top' }) => {\n    switch ($direction) {\n      // Top variations\n      case 'top':\n        return css`\n          flex-direction: column;\n          align-items: flex-start;\n        `;\n      case 'top-left':\n        return css`\n          flex-direction: column;\n          align-items: flex-start;\n        `;\n      case 'top-right':\n        return css`\n          flex-direction: column;\n          align-items: flex-end;\n        `;\n      case 'top-center':\n        return css`\n          flex-direction: column;\n          align-items: center;\n        `;\n\n      // Bottom variations\n      case 'bottom':\n        return css`\n          flex-direction: column-reverse;\n          align-items: flex-start;\n        `;\n      case 'bottom-left':\n        return css`\n          flex-direction: column-reverse;\n          align-items: flex-start;\n        `;\n      case 'bottom-right':\n        return css`\n          flex-direction: column-reverse;\n          align-items: flex-end;\n        `;\n      case 'bottom-center':\n        return css`\n          flex-direction: column-reverse;\n          align-items: center;\n        `;\n\n      // Left variations\n      case 'left':\n        return css`\n          flex-direction: row;\n          align-items: center;\n        `;\n      case 'left-top':\n        return css`\n          flex-direction: row;\n          align-items: flex-start;\n        `;\n      case 'left-bottom':\n        return css`\n          flex-direction: row;\n          align-items: flex-end;\n        `;\n      case 'left-center':\n        return css`\n          flex-direction: row;\n          align-items: center;\n        `;\n\n      // Right variations\n      case 'right':\n        return css`\n          flex-direction: row-reverse;\n          align-items: center;\n        `;\n      case 'right-top':\n        return css`\n          flex-direction: row-reverse;\n          align-items: flex-start;\n        `;\n      case 'right-bottom':\n        return css`\n          flex-direction: row-reverse;\n          align-items: flex-end;\n        `;\n      case 'right-center':\n        return css`\n          flex-direction: row-reverse;\n          align-items: center;\n        `;\n    }\n  }}\n\n  /* Size styles */\n   ${({ $size }) => {\n     switch ($size) {\n       case 'small':\n         return css`\n          ${getTypographyStyles('UIBody2')}\n          color: ${contents100};\n        `;\n       case 'large':\n       default:\n         return css`\n          ${getTypographyStyles('Title2')}\n          color: ${contents000};\n        `;\n     }\n   }}\n`;\n"],"names":["LabelContainer","styled","label","_templateObject","_taggedTemplateLiteral","_ref","_ref$$width","$width","_ref2","$size","$gap","defaultGap","finalGap","undefined","concat","css","_templateObject2","_ref3","_ref3$$direction","$direction","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","_templateObject18","_ref4","_templateObject19","getTypographyStyles","contents100","_templateObject20","contents000"],"mappings":"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"}

package/dist/src/Labels/Label/types.d.ts

@@ -0,0 +1,13 @@
+import type { LabelHTMLAttributes } from 'react';
+export type Direction = 'top' | 'top-left' | 'top-right' | 'top-center' | 'bottom' | 'bottom-left' | 'bottom-right' | 'bottom-center' | 'left' | 'left-top' | 'left-bottom' | 'left-center' | 'right' | 'right-top' | 'right-bottom' | 'right-center';
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    text: string;
+    size?: 'small' | 'large';
+    gap?: number;
+    width?: string;
+    rightElement?: React.ReactNode;
+    required?: boolean;
+    direction?: Direction;
+    children?: React.ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/src/Labels/Label/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Labels/Label/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,MAAM,SAAS,GACjB,KAAK,GACL,UAAU,GACV,WAAW,GACX,YAAY,GACZ,QAAQ,GACR,aAAa,GACb,cAAc,GACd,eAAe,GACf,MAAM,GACN,UAAU,GACV,aAAa,GACb,aAAa,GACb,OAAO,GACP,WAAW,GACX,cAAc,GACd,cAAc,CAAC;AAEnB,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}

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

@@ -0,0 +1,2 @@
+export { default as Label } from './Label';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Labels/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/src/index.cjs.js

@@ -32,6 +32,7 @@ var index$k = require('./Floating/Tooltip/index.cjs.js');
 var styles$2 = require('./Floating/DropdownMenu/styles.cjs.js');
 var styles$3 = require('./Floating/Popover/styles.cjs.js');
 var index$l = require('./Chips/Chip/index.cjs.js');
+var index$m = require('./Labels/Label/index.cjs.js');
 
 
 
@@ -82,4 +83,5 @@ exports.StyledPopoverContentWrapper = styles$3.StyledPopoverContentWrapper;
 exports.showFadeIn = styles$3.showFadeIn;
 exports.showFadeOut = styles$3.showFadeOut;
 exports.Chip = index$l.Chip;
+exports.Label = index$m;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/src/index.d.ts

@@ -9,4 +9,5 @@ export * from './Paginations';
 export * from './Inputs';
 export * from './Floating';
 export * from './Chips';
+export * from './Labels';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}

package/dist/src/index.esm.js

@@ -30,4 +30,5 @@ export { default as Tooltip } from './Floating/Tooltip/index.esm.js';
 export { DropdownMenuItemDisabledCSS, DropdownMenuItemHoverCSS, StyledDropdownMenuContent, StyledDropdownMenuContentWrapper, StyledDropdownMenuItem, StyledDropdownMenuSection, StyledDropdownMenuSectionTitle, dropdownMenuItemCSS, getDropdownMenuItemCss } from './Floating/DropdownMenu/styles.esm.js';
 export { StyledPopoverContent, StyledPopoverContentWrapper, showFadeIn, showFadeOut } from './Floating/Popover/styles.esm.js';
 export { Chip } from './Chips/Chip/index.esm.js';
+export { default as Label } from './Labels/Label/index.esm.js';
 //# sourceMappingURL=index.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remember-web/primitive",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "description": "Remember Web Primitive Components",
   "homepage": "https://dramancompany.github.io/remember-web-packages/",
   "author": "Remember",
@@ -41,7 +41,7 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@remember-web/icon": "^0.1.12",
+    "@remember-web/icon": "^0.1.13",
     "@remember-web/mixin": "^0.2.6",
     "@remember-web/shared": "^0.1.1"
   },

package/src/Inputs/Select/styles.ts

@@ -39,7 +39,7 @@ export const SelectContainer = styled.div<{ $width?: number | string }>`
 `;
 
 export const SelectLabel = styled.label`
-  ${getTypographyStyles('SubTitle1')}
+  ${getTypographyStyles('Title2')}
   display: block;
   margin-bottom: 12px;
   display: flex;

package/src/Inputs/Select/types.ts

@@ -17,6 +17,9 @@ export type SelectBaseProps<Value extends SelectValue> = {
   className?: string;
   disabled?: boolean;
   error?: boolean;
+  /**
+   * @deprecated Label 컴포넌트를 사용해 주세요.
+   */
   label?: ReactNode;
   required?: boolean;
   // TODO: children의 prop에 따라 결정되는 제네릭 구현이 필요 infer를 활용하면 될 것 같기도 한데 추후 확인

package/src/Inputs/TextInput/styles.ts

@@ -86,7 +86,7 @@ export const InputInner = styled.input`
 `;
 
 export const InputLabel = styled.label`
-  ${getTypographyStyles('SubTitle1')}
+  ${getTypographyStyles('Title2')}
   display: block;
   margin-bottom: 12px;
   display: flex;
@@ -100,7 +100,7 @@ export const InputLabel = styled.label`
 `;
 
 export const InputError = styled.div`
-  ${getTypographyStyles('Caption1')}
+  ${getTypographyStyles('UIBody3')}
   color: ${roleRed};
 
   margin-top: 8px;

package/src/Inputs/TextInput/types.ts

@@ -16,6 +16,9 @@ type TextInputProps = {
     | 'url'
     | 'date'
     | 'datetime-local';
+  /**
+   * @deprecated Label 컴포넌트를 사용해 주세요.
+   */
   label?: ReactNode;
   hintText?: string;
   hintTextColor?: ColorVariable;

package/src/Labels/Label/Label.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Flex } from '@/Common';
+import { Select, TextInput } from '@/Inputs';
+import {
+  getIconComponentFromName,
+  iconNames,
+  isIconName,
+} from '@/stories/util';
+import { createElement } from 'react';
+import Label from '.';
+
+type Story = StoryObj<typeof Label>;
+
+const meta = {
+  title: 'Primitive/Labels/Label',
+  component: Label,
+  argTypes: {
+    text: { control: 'text' },
+    children: { control: 'text' },
+    size: { control: 'select', options: ['small', 'large'] },
+    rightElement: { control: 'select', options: iconNames },
+    required: { control: 'boolean' },
+    direction: {
+      control: 'select',
+      options: [
+        'top',
+        'top-left',
+        'top-right',
+        'top-center',
+        'bottom',
+        'bottom-left',
+        'bottom-right',
+        'bottom-center',
+        'left',
+        'left-top',
+        'left-bottom',
+        'left-center',
+        'right',
+        'right-top',
+        'right-bottom',
+        'right-center',
+      ],
+    },
+  },
+  args: {
+    text: 'Label 컴포넌트',
+    children: <TextInput width="300px" />,
+  },
+} satisfies Meta<typeof Label>;
+
+export const Default: Story = {
+  render: ({ rightElement, ...props }) => {
+    const RightIconString = String(rightElement);
+    const renderedRightElement =
+      rightElement &&
+      isIconName(RightIconString) &&
+      createElement(getIconComponentFromName(RightIconString));
+    return (
+      <Flex gap={20} justify="unset" style={{ width: '100%' }}>
+        <Label rightElement={renderedRightElement} {...props} />
+        <Label text="children 없이 독립적으로 사용 가능" required />
+      </Flex>
+    );
+  },
+};
+
+export default meta;

package/src/Labels/Label/index.tsx

@@ -0,0 +1,50 @@
+import { Flex } from '@/Common';
+import { IconRequiredS } from '@remember-web/icon';
+import { forwardRef } from 'react';
+import { LabelContainer } from './styles';
+import type { LabelProps } from './types';
+
+const Label = forwardRef<HTMLLabelElement, LabelProps>(
+  (
+    {
+      text,
+      children,
+      direction = 'top-left',
+      size = 'small',
+      gap,
+      width,
+      rightElement,
+      required,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <LabelContainer
+        ref={ref}
+        $size={size}
+        className={className}
+        $direction={direction}
+        $gap={gap}
+        $width={width}
+        {...props}
+      >
+        <Flex gap={4}>
+          {text}
+          <Flex>
+            {rightElement}
+            {required && (
+              <Flex className="required-icon">
+                <IconRequiredS />
+              </Flex>
+            )}
+          </Flex>
+        </Flex>
+        {children}
+      </LabelContainer>
+    );
+  }
+);
+
+export default Label;

package/src/Labels/Label/styles.ts

@@ -0,0 +1,138 @@
+import {
+  contents000,
+  contents100,
+  getTypographyStyles,
+} from '@remember-web/mixin';
+import styled, { css } from 'styled-components';
+import type { LabelProps } from './types';
+
+interface LabelContainerProps {
+  $size: LabelProps['size'];
+  $direction: LabelProps['direction'];
+  $gap: LabelProps['gap'];
+  $width: LabelProps['width'];
+}
+export const LabelContainer = styled.label<LabelContainerProps>`
+  display: flex;
+  position: relative;
+  width: ${({ $width = 'auto' }) => $width};
+  min-width: min-content; 
+
+  ${({ $size, $gap }) => {
+    const defaultGap = $size === 'large' ? '12px' : '8px';
+    const finalGap = $gap !== undefined ? `${$gap}px` : defaultGap;
+
+    return css`
+      gap: ${finalGap};
+    `;
+  }}
+
+  ${({ $direction = 'top' }) => {
+    switch ($direction) {
+      // Top variations
+      case 'top':
+        return css`
+          flex-direction: column;
+          align-items: flex-start;
+        `;
+      case 'top-left':
+        return css`
+          flex-direction: column;
+          align-items: flex-start;
+        `;
+      case 'top-right':
+        return css`
+          flex-direction: column;
+          align-items: flex-end;
+        `;
+      case 'top-center':
+        return css`
+          flex-direction: column;
+          align-items: center;
+        `;
+
+      // Bottom variations
+      case 'bottom':
+        return css`
+          flex-direction: column-reverse;
+          align-items: flex-start;
+        `;
+      case 'bottom-left':
+        return css`
+          flex-direction: column-reverse;
+          align-items: flex-start;
+        `;
+      case 'bottom-right':
+        return css`
+          flex-direction: column-reverse;
+          align-items: flex-end;
+        `;
+      case 'bottom-center':
+        return css`
+          flex-direction: column-reverse;
+          align-items: center;
+        `;
+
+      // Left variations
+      case 'left':
+        return css`
+          flex-direction: row;
+          align-items: center;
+        `;
+      case 'left-top':
+        return css`
+          flex-direction: row;
+          align-items: flex-start;
+        `;
+      case 'left-bottom':
+        return css`
+          flex-direction: row;
+          align-items: flex-end;
+        `;
+      case 'left-center':
+        return css`
+          flex-direction: row;
+          align-items: center;
+        `;
+
+      // Right variations
+      case 'right':
+        return css`
+          flex-direction: row-reverse;
+          align-items: center;
+        `;
+      case 'right-top':
+        return css`
+          flex-direction: row-reverse;
+          align-items: flex-start;
+        `;
+      case 'right-bottom':
+        return css`
+          flex-direction: row-reverse;
+          align-items: flex-end;
+        `;
+      case 'right-center':
+        return css`
+          flex-direction: row-reverse;
+          align-items: center;
+        `;
+    }
+  }}
+
+  /* Size styles */
+   ${({ $size }) => {
+     switch ($size) {
+       case 'small':
+         return css`
+          ${getTypographyStyles('UIBody2')}
+          color: ${contents100};
+        `;
+       case 'large':
+       default:
+         return css`
+          ${getTypographyStyles('Title2')}
+          color: ${contents000};
+        `;
+     }
+   }}
+`;

package/src/Labels/Label/types.ts

@@ -0,0 +1,30 @@
+import type { LabelHTMLAttributes } from 'react';
+
+export type Direction =
+  | 'top'
+  | 'top-left'
+  | 'top-right'
+  | 'top-center'
+  | 'bottom'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'bottom-center'
+  | 'left'
+  | 'left-top'
+  | 'left-bottom'
+  | 'left-center'
+  | 'right'
+  | 'right-top'
+  | 'right-bottom'
+  | 'right-center';
+
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+  text: string;
+  size?: 'small' | 'large';
+  gap?: number;
+  width?: string;
+  rightElement?: React.ReactNode;
+  required?: boolean;
+  direction?: Direction;
+  children?: React.ReactNode;
+}

package/src/Labels/index.ts

@@ -0,0 +1 @@
+export { default as Label } from './Label';

package/src/index.ts

@@ -9,3 +9,4 @@ export * from './Paginations';
 export * from './Inputs';
 export * from './Floating';
 export * from './Chips';
+export * from './Labels';