@remember-web/primitive 0.2.13 → 0.3.0

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

@@ -24,7 +24,7 @@ var StyledSelect = styled__default.default.div(_templateObject || (_templateObje
   return isPlaceholder && styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n      color: ", ";\n    "])), mixin.contents200);
 }, styles.SelectContainer, mixin.contents000, styles.SelectContainer, mixin.bg200, mixin.bg300);
 var SelectDownIcon = styled__default.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default(["\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  & > svg {\n    display: block;\n  }\n\n  pointer-events: none;\n"])));
-var SelectOptionWrapper = styled__default.default.ul(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  border: 1px solid ", ";\n  background-color: ", ";\n  overflow-y: scroll;\n  overscroll-behavior: contain;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ", ";\n\n  ", "\n\n  ", ":focus &, ", ":focus-within & {\n    outline: none;\n    border-color: ", ";\n  }\n"])), mixin.contents300, mixin.bg100, function (_ref3) {
+var SelectOptionWrapper = styled__default.default.ul(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  border: 1px solid ", ";\n  background-color: ", ";\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ", ";\n\n  ", "\n\n  ", ":focus &, ", ":focus-within & {\n    outline: none;\n    border-color: ", ";\n  }\n"])), mixin.contents300, mixin.bg100, function (_ref3) {
   var maxHeight = _ref3.maxHeight;
   if (!maxHeight) {
     return null;

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

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

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

@@ -17,7 +17,7 @@ var StyledSelect = styled.div(_templateObject || (_templateObject = _taggedTempl
   return isPlaceholder && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), contents200);
 }, SelectContainer, contents000, SelectContainer, bg200, bg300);
 var SelectDownIcon = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  & > svg {\n    display: block;\n  }\n\n  pointer-events: none;\n"])));
-var SelectOptionWrapper = styled.ul(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  all: unset;\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  border: 1px solid ", ";\n  background-color: ", ";\n  overflow-y: scroll;\n  overscroll-behavior: contain;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ", ";\n\n  ", "\n\n  ", ":focus &, ", ":focus-within & {\n    outline: none;\n    border-color: ", ";\n  }\n"])), contents300, bg100, function (_ref3) {
+var SelectOptionWrapper = styled.ul(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  all: unset;\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  border: 1px solid ", ";\n  background-color: ", ";\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  transition: border-color 0.2s, background-color 0.2s;\n\n  ", ";\n\n  ", "\n\n  ", ":focus &, ", ":focus-within & {\n    outline: none;\n    border-color: ", ";\n  }\n"])), contents300, bg100, function (_ref3) {
   var maxHeight = _ref3.maxHeight;
   if (!maxHeight) {
     return null;

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

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

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

@@ -7,7 +7,6 @@ var index$4 = require('./DesignedSelect/index.cjs.js');
 var index$2 = require('./NativeSelect/index.cjs.js');
 var index$3 = require('./NativeSelect/Option/index.cjs.js');
 var index$1 = require('./Option/index.cjs.js');
-var styles = require('./styles.cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -18,7 +17,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 function Select(props, ref) {
   var children = props.children,
-    label = props.label,
     value = props.value,
     className = props.className,
     disabled = props.disabled,
@@ -28,49 +26,37 @@ function Select(props, ref) {
     required = props.required,
     onClick = props.onClick;
   if (props["native"]) {
-    return /*#__PURE__*/jsxRuntime.jsxs("div", {
-      children: [label && /*#__PURE__*/jsxRuntime.jsxs(styles.SelectLabel, {
-        children: [label, required && /*#__PURE__*/jsxRuntime.jsx("mark", {
-          children: "*"
-        })]
-      }), /*#__PURE__*/jsxRuntime.jsx(index$2, {
-        disabled: disabled,
-        className: className,
-        onClick: onClick,
-        onChange: function onChange(e) {
-          _onChange === null || _onChange === void 0 || _onChange(e.target.value, e.target.innerText);
-        },
-        value: value,
-        required: required,
-        placeholder: placeholder,
-        width: width,
-        ref: ref,
-        children: react.Children.map(children, function (child) {
-          return /*#__PURE__*/jsxRuntime.jsx(index$3.NativeOption, _objectSpread({}, child.props));
-        })
-      })]
-    });
-  }
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    children: [label && /*#__PURE__*/jsxRuntime.jsxs(styles.SelectLabel, {
-      children: [label, required && /*#__PURE__*/jsxRuntime.jsx("mark", {
-        children: "*"
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsx(index$4, {
-      className: className,
-      value: value,
+    return /*#__PURE__*/jsxRuntime.jsx(index$2, {
       disabled: disabled,
+      className: className,
       onClick: onClick,
-      onChange: function onChange(_value, _label) {
-        return _onChange === null || _onChange === void 0 ? void 0 : _onChange(_value, _label);
+      onChange: function onChange(e) {
+        _onChange === null || _onChange === void 0 || _onChange(e.target.value, e.target.innerText);
       },
+      value: value,
+      required: required,
       placeholder: placeholder,
       width: width,
-      maxHeight: props.maxHeight,
-      extendDirection: props.extendDirection,
       ref: ref,
-      children: children
-    })]
+      children: react.Children.map(children, function (child) {
+        return /*#__PURE__*/jsxRuntime.jsx(index$3.NativeOption, _objectSpread({}, child.props));
+      })
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(index$4, {
+    className: className,
+    value: value,
+    disabled: disabled,
+    onClick: onClick,
+    onChange: function onChange(_value, _label) {
+      return _onChange === null || _onChange === void 0 ? void 0 : _onChange(_value, _label);
+    },
+    placeholder: placeholder,
+    width: width,
+    maxHeight: props.maxHeight,
+    extendDirection: props.extendDirection,
+    ref: ref,
+    children: children
   });
 }
 var index = Object.assign( /*#__PURE__*/react.forwardRef(Select), {

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAO,aAAa,EAAE,MAAM,OAAO,CAAC;AAQhD,OAAO,KAAK,EACV,mBAAmB,EACnB,iBAAiB,EAEjB,WAAW,EACZ,MAAM,SAAS,CAAC;4DA8ET,CAAC,oBAAoB,KAAK,CAAC,GAAG,cAAc,cAAc,CAAC,CAAC,GAC5D,CAAC,kBAAkB,KAAK,CAAC,GAAG,cAAc,iBAAiB,CAAC,CAAC,KAC9D,WAAW;;;;;;AALlB,wBAOE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAO,aAAa,EAAE,MAAM,OAAO,CAAC;AAOhD,OAAO,KAAK,EACV,mBAAmB,EACnB,iBAAiB,EAEjB,WAAW,EACZ,MAAM,SAAS,CAAC;4DA6DT,CAAC,oBAAoB,KAAK,CAAC,GAAG,cAAc,cAAc,CAAC,CAAC,GAC5D,CAAC,kBAAkB,KAAK,CAAC,GAAG,cAAc,iBAAiB,CAAC,CAAC,KAC9D,WAAW;;;;;;AALlB,wBAOE"}

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

@@ -5,14 +5,12 @@ import DesignedSelect from './DesignedSelect/index.esm.js';
 import NativeSelect from './NativeSelect/index.esm.js';
 import { NativeOption } from './NativeSelect/Option/index.esm.js';
 import { OptionHolder } from './Option/index.esm.js';
-import { SelectLabel } from './styles.esm.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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; }
 function Select(props, ref) {
   var children = props.children,
-    label = props.label,
     value = props.value,
     className = props.className,
     disabled = props.disabled,
@@ -22,49 +20,37 @@ function Select(props, ref) {
     required = props.required,
     onClick = props.onClick;
   if (props["native"]) {
-    return /*#__PURE__*/jsxs("div", {
-      children: [label && /*#__PURE__*/jsxs(SelectLabel, {
-        children: [label, required && /*#__PURE__*/jsx("mark", {
-          children: "*"
-        })]
-      }), /*#__PURE__*/jsx(NativeSelect, {
-        disabled: disabled,
-        className: className,
-        onClick: onClick,
-        onChange: function onChange(e) {
-          _onChange === null || _onChange === void 0 || _onChange(e.target.value, e.target.innerText);
-        },
-        value: value,
-        required: required,
-        placeholder: placeholder,
-        width: width,
-        ref: ref,
-        children: Children.map(children, function (child) {
-          return /*#__PURE__*/jsx(NativeOption, _objectSpread({}, child.props));
-        })
-      })]
-    });
-  }
-  return /*#__PURE__*/jsxs("div", {
-    children: [label && /*#__PURE__*/jsxs(SelectLabel, {
-      children: [label, required && /*#__PURE__*/jsx("mark", {
-        children: "*"
-      })]
-    }), /*#__PURE__*/jsx(DesignedSelect, {
-      className: className,
-      value: value,
+    return /*#__PURE__*/jsx(NativeSelect, {
       disabled: disabled,
+      className: className,
       onClick: onClick,
-      onChange: function onChange(_value, _label) {
-        return _onChange === null || _onChange === void 0 ? void 0 : _onChange(_value, _label);
+      onChange: function onChange(e) {
+        _onChange === null || _onChange === void 0 || _onChange(e.target.value, e.target.innerText);
       },
+      value: value,
+      required: required,
       placeholder: placeholder,
       width: width,
-      maxHeight: props.maxHeight,
-      extendDirection: props.extendDirection,
       ref: ref,
-      children: children
-    })]
+      children: Children.map(children, function (child) {
+        return /*#__PURE__*/jsx(NativeOption, _objectSpread({}, child.props));
+      })
+    });
+  }
+  return /*#__PURE__*/jsx(DesignedSelect, {
+    className: className,
+    value: value,
+    disabled: disabled,
+    onClick: onClick,
+    onChange: function onChange(_value, _label) {
+      return _onChange === null || _onChange === void 0 ? void 0 : _onChange(_value, _label);
+    },
+    placeholder: placeholder,
+    width: width,
+    maxHeight: props.maxHeight,
+    extendDirection: props.extendDirection,
+    ref: ref,
+    children: children
   });
 }
 var index = Object.assign( /*#__PURE__*/forwardRef(Select), {

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

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

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

@@ -10,7 +10,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-var _templateObject, _templateObject2;
+var _templateObject;
 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) {
@@ -21,8 +21,6 @@ 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);
 
 exports.SelectContainer = SelectContainer;
-exports.SelectLabel = SelectLabel;
 //# sourceMappingURL=styles.cjs.js.map

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} 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"],"names":[],"mappings":";;;;;;;;;;;;AAAa;AAWN;AAGoB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;;"}

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

@@ -2,5 +2,4 @@
 export declare const SelectContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $width?: string | number | undefined;
 }>>;
-export declare const SelectLabel: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/styles.ts"],"names":[],"mappings":";AAYA,eAAO,MAAM,eAAe;;GA0B3B,CAAC;AAEF,eAAO,MAAM,WAAW,yNAYvB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/styles.ts"],"names":[],"mappings":";AAWA,eAAO,MAAM,eAAe;;GA0B3B,CAAC"}

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

@@ -1,9 +1,9 @@
 "use client";
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import { getTypographyStyles, contents000, contents200, contents300, bg200, roleRed } from '@remember-web/mixin';
+import { getTypographyStyles, contents000, contents200, contents300, bg200 } from '@remember-web/mixin';
 import styled from 'styled-components';
 
-var _templateObject, _templateObject2;
+var _templateObject;
 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) {
@@ -14,7 +14,6 @@ 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);
 
-export { SelectContainer, SelectLabel };
+export { SelectContainer };
 //# 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} 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"],"names":[],"mappings":";;;;;AAAa;AAWN;AAGoB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;;"}

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

@@ -9,7 +9,6 @@ export type SelectBaseProps<Value extends SelectValue> = {
     className?: string;
     disabled?: boolean;
     error?: boolean;
-    label?: ReactNode;
     required?: boolean;
     value?: Value;
     placeholder?: string;

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,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