@remember-web/primitive 0.5.3 → 0.5.5

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

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrow2Down } from '@remember-web/icon';\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { SelectContainer } from '../styles';\nimport { SelectDownIcon, StyledSelect } from './styles';\nimport type { NativeSelectInternalProps } from './types';\n\nconst NativeSelect: ForwardRefRenderFunction<\n  HTMLSelectElement,\n  NativeSelectInternalProps\n> = (\n  {\n    children,\n    className,\n    width,\n    placeholder,\n    value,\n    disabled,\n    onClick,\n    ...props\n  },\n  ref\n) => {\n  const showPlaceholder = !value && !!placeholder;\n\n  return (\n    <SelectContainer\n      aria-disabled={disabled}\n      className={className}\n      $width={width}\n    >\n      <StyledSelect\n        {...props}\n        value={value}\n        $width={width}\n        ref={ref}\n        isPlaceholder={showPlaceholder}\n        disabled={disabled}\n        onClick={onClick}\n      >\n        {!value && (\n          <option value=\"\" selected>\n            {placeholder || 'ㅤ'}\n          </option>\n        )}\n        {children}\n      </StyledSelect>\n      <SelectDownIcon>\n        <IconArrow2Down size=\"small\" />\n      </SelectDownIcon>\n    </SelectContainer>\n  );\n};\n\nexport default forwardRef(NativeSelect);\n"],"names":["props","className","$width","value","ref","isPlaceholder","disabled","onClick","children","size"],"mappings":";;;;;;;;;AAAa;AAAA;AAAA;AAUb;AAeK;;;;;;;AAHEA;AAIL;;AAII;AACAC;AACAC;;AAIEC;AACAD;AACAE;AACAC;AACAC;AACAC;AAAiBC;AAGPL;;;;AAID;;AAGOM;;AAAe;AAChB;AAGvB;AAEA;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../../src/Inputs/Select/NativeSelect/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrow2Down } from '@remember-web/icon';\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { SelectContainer } from '../styles';\nimport { SelectDownIcon, StyledSelect } from './styles';\nimport type { NativeSelectInternalProps } from './types';\n\nconst NativeSelect: ForwardRefRenderFunction<\n  HTMLSelectElement,\n  NativeSelectInternalProps\n> = (\n  {\n    children,\n    className,\n    width,\n    placeholder,\n    value,\n    disabled,\n    onClick,\n    error = false,\n    ...props\n  },\n  ref\n) => {\n  const showPlaceholder = !value && !!placeholder;\n\n  return (\n    <SelectContainer\n      aria-disabled={disabled}\n      className={className}\n      $width={width}\n      $error={error}\n    >\n      <StyledSelect\n        {...props}\n        value={value}\n        $width={width}\n        ref={ref}\n        isPlaceholder={showPlaceholder}\n        disabled={disabled}\n        onClick={onClick}\n      >\n        {!value && (\n          <option value=\"\" selected>\n            {placeholder || 'ㅤ'}\n          </option>\n        )}\n        {children}\n      </StyledSelect>\n      <SelectDownIcon>\n        <IconArrow2Down size=\"small\" />\n      </SelectDownIcon>\n    </SelectContainer>\n  );\n};\n\nexport default forwardRef(NativeSelect);\n"],"names":["error","props","className","$width","$error","value","ref","isPlaceholder","disabled","onClick","children","size"],"mappings":";;;;;;;;;AAAa;AAAA;AAAA;AAUb;AAgBK;;;;;;;;AAJDA;AACGC;AAIL;;AAII;AACAC;AACAC;AACAC;;AAIEC;AACAF;AACAG;AACAC;AACAC;AACAC;AAAiBC;AAGPL;;;;AAID;;AAGOM;;AAAe;AAChB;AAGvB;AAEA;;"}

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

@@ -11,7 +11,7 @@ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTempla
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 var _templateObject, _templateObject2, _templateObject3;
-var StyledSelect = styled__default.default.select(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  all: unset;\n\n  ", "\n  border: 1px solid ", ";\n  border-radius: 4px;\n  padding: 10px 36px 10px 12px;\n  box-sizing: border-box;\n\n  ", "\n\n  width: ", ";\n\n  transition: border-color 0.2s, background-color 0.2s;\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &:not(:disabled) {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n  }\n"])), mixin.getTypographyStyles('UIBody2'), mixin.contents300, function (_ref) {
+var StyledSelect = styled__default.default.select(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  all: unset;\n\n  ", ";\n  border-width: 1px;\n  border-style: solid;\n  \n  border-radius: 4px;\n  padding: 10px 36px 10px 12px;\n  box-sizing: border-box;\n\n  ", "\n\n  width: ", ";\n\n  transition: border-color 0.2s, background-color 0.2s;\n\n\n  &:not(:disabled) {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n  }\n\n  border-color: var(--border-color);\n"])), mixin.getTypographyStyles('UIBody2'), function (_ref) {
   var isPlaceholder = _ref.isPlaceholder;
   return isPlaceholder && styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n      color: ", ";\n    "])), mixin.contents200);
 }, function (_ref2) {
@@ -23,7 +23,7 @@ var StyledSelect = styled__default.default.select(_templateObject || (_templateO
     return "".concat($width, "px");
   }
   return $width;
-}, mixin.contents000, mixin.bg200, mixin.bg300);
+}, mixin.bg200, mixin.bg300);
 var SelectDownIcon = styled__default.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n\n  & > svg {\n    display: block;\n  }\n\n  pointer-events: none;\n"])));
 
 exports.SelectDownIcon = SelectDownIcon;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/Select/NativeSelect/styles.ts"],"names":[],"mappings":";AAYA,eAAO,MAAM,YAAY;;;GA+CxB,CAAC;AACF,eAAO,MAAM,cAAc,gNAW1B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/Select/NativeSelect/styles.ts"],"names":[],"mappings":";AAUA,eAAO,MAAM,YAAY;;;GAgDxB,CAAC;AACF,eAAO,MAAM,cAAc,gNAW1B,CAAC"}

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

@@ -1,10 +1,10 @@
 "use client";
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import { getTypographyStyles, contents300, contents200, contents000, bg200, bg300 } from '@remember-web/mixin';
+import { getTypographyStyles, contents200, bg200, bg300 } from '@remember-web/mixin';
 import styled, { css } from 'styled-components';
 
 var _templateObject, _templateObject2, _templateObject3;
-var StyledSelect = styled.select(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  all: unset;\n\n  ", "\n  border: 1px solid ", ";\n  border-radius: 4px;\n  padding: 10px 36px 10px 12px;\n  box-sizing: border-box;\n\n  ", "\n\n  width: ", ";\n\n  transition: border-color 0.2s, background-color 0.2s;\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &:not(:disabled) {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n  }\n"])), getTypographyStyles('UIBody2'), contents300, function (_ref) {
+var StyledSelect = styled.select(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  all: unset;\n\n  ", ";\n  border-width: 1px;\n  border-style: solid;\n  \n  border-radius: 4px;\n  padding: 10px 36px 10px 12px;\n  box-sizing: border-box;\n\n  ", "\n\n  width: ", ";\n\n  transition: border-color 0.2s, background-color 0.2s;\n\n\n  &:not(:disabled) {\n    @media (hover: hover) {\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n  }\n\n  border-color: var(--border-color);\n"])), getTypographyStyles('UIBody2'), function (_ref) {
   var isPlaceholder = _ref.isPlaceholder;
   return isPlaceholder && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), contents200);
 }, function (_ref2) {
@@ -16,7 +16,7 @@ var StyledSelect = styled.select(_templateObject || (_templateObject = _taggedTe
     return "".concat($width, "px");
   }
   return $width;
-}, contents000, bg200, bg300);
+}, bg200, bg300);
 var SelectDownIcon = styled.div(_templateObject3 || (_templateObject3 = _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"])));
 
 export { SelectDownIcon, StyledSelect };

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

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

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

@@ -6,6 +6,7 @@ export type NativeSelectInternalProps = Omit<SelectHTMLAttributes<HTMLSelectElem
     children: NativeOptionElement | NativeOptionElement[];
     width?: number | string;
     placeholder?: string;
+    error?: boolean;
 };
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/Select/NativeSelect/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,KAAK,mBAAmB,GAAG,YAAY,CACrC,WAAW,CAAC,MAAM,CAAC,EACnB,OAAO,YAAY,CACpB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,QAAQ,MAAM,EAAE,GAAG,UAAU,CAC9B,GAAG;IACF,QAAQ,EAAE,mBAAmB,GAAG,mBAAmB,EAAE,CAAC;IACtD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/Inputs/Select/NativeSelect/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,KAAK,mBAAmB,GAAG,YAAY,CACrC,WAAW,CAAC,MAAM,CAAC,EACnB,OAAO,YAAY,CACpB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,QAAQ,MAAM,EAAE,GAAG,UAAU,CAC9B,GAAG;IACF,QAAQ,EAAE,mBAAmB,GAAG,mBAAmB,EAAE,CAAC;IACtD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC"}

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

@@ -24,7 +24,8 @@ function Select(props, ref) {
     placeholder = props.placeholder,
     width = props.width,
     required = props.required,
-    onClick = props.onClick;
+    onClick = props.onClick,
+    error = props.error;
   if (props["native"]) {
     return /*#__PURE__*/jsxRuntime.jsx(index$2, {
       disabled: disabled,
@@ -37,6 +38,7 @@ function Select(props, ref) {
       required: required,
       placeholder: placeholder,
       width: width,
+      error: error,
       ref: ref,
       children: react.Children.map(children, function (child) {
         return /*#__PURE__*/jsxRuntime.jsx(index$3.NativeOption, _objectSpread({}, child.props));
@@ -55,6 +57,7 @@ function Select(props, ref) {
     width: width,
     maxHeight: props.maxHeight,
     extendDirection: props.extendDirection,
+    error: error,
     ref: ref,
     children: children
   });

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 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;;"}
+{"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    error,\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        error={error}\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      error={error}\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","error","ref","children","Option"],"mappings":";;;;;;;;;;;;;;;AAAa;AAAA;AAgBb;AAIE;;;;;;;;;;;;AAgBMA;AACAC;AACAC;AACAC;AACEA;;AAEFC;AACAC;AACAC;AACAC;AACAC;AACAC;;;;AAIE;AAGR;;AAIIR;AACAG;AACAJ;AACAE;AACAC;;;AACAG;AACAC;;;AAGAC;AACAC;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;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"}
+{"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;4DAgET,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

@@ -18,7 +18,8 @@ function Select(props, ref) {
     placeholder = props.placeholder,
     width = props.width,
     required = props.required,
-    onClick = props.onClick;
+    onClick = props.onClick,
+    error = props.error;
   if (props["native"]) {
     return /*#__PURE__*/jsx(NativeSelect, {
       disabled: disabled,
@@ -31,6 +32,7 @@ function Select(props, ref) {
       required: required,
       placeholder: placeholder,
       width: width,
+      error: error,
       ref: ref,
       children: Children.map(children, function (child) {
         return /*#__PURE__*/jsx(NativeOption, _objectSpread({}, child.props));
@@ -49,6 +51,7 @@ function Select(props, ref) {
     width: width,
     maxHeight: props.maxHeight,
     extendDirection: props.extendDirection,
+    error: error,
     ref: ref,
     children: children
   });

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 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;;"}
+{"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    error,\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        error={error}\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      error={error}\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","error","ref","children","Option"],"mappings":";;;;;;;;;AAAa;AAAA;AAgBb;AAIE;;;;;;;;;;;;AAgBMA;AACAC;AACAC;AACAC;AACEA;;AAEFC;AACAC;AACAC;AACAC;AACAC;AACAC;;;;AAIE;AAGR;;AAIIR;AACAG;AACAJ;AACAE;AACAC;;;AACAG;AACAC;;;AAGAC;AACAC;AAAgCC;AAEvB;AAGf;AAEA;AAMIC;AAAqB;;"}

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

@@ -10,8 +10,14 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
-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 _templateObject, _templateObject2;
+var BORDER_COLOR = {
+  FOCUS: mixin.contents000,
+  DEFAULT: mixin.contents300,
+  ERROR: mixin.roleRed,
+  DISABLED: mixin.contents300
+};
+var SelectContainer = styled__default.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  --border-color: ", ";\n\n  ", "\n  color: ", ";\n  width: ", ";\n  position: relative;\n  user-select: none;\n\n  &:focus, &:focus-within {\n    --border-color: ", ";\n    outline: none;\n  }\n\n  ", "\n\n  &[aria-disabled='true'] {\n    --border-color: ", ";\n    color: ", ";\n    background-color: ", ";\n  }\n\n"])), BORDER_COLOR.DEFAULT, mixin.getTypographyStyles('UIBody2'), mixin.contents000, function (_ref) {
   var $width = _ref.$width;
   if (!$width) {
     return 'fit-content';
@@ -20,7 +26,10 @@ var SelectContainer = styled__default.default.div(_templateObject || (_templateO
     return "".concat($width, "px");
   }
   return $width;
-}, mixin.contents000, mixin.contents200, mixin.contents300, mixin.bg200);
+}, BORDER_COLOR.FOCUS, function (_ref2) {
+  var $error = _ref2.$error;
+  return $error && styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n       &, &:focus, &:focus-within {\n        --border-color: ", ";\n      }\n    "])), BORDER_COLOR.ERROR);
+}, BORDER_COLOR.DISABLED, mixin.contents200, mixin.bg200);
 
 exports.SelectContainer = SelectContainer;
 //# 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} 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;;"}
+{"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, { css } from 'styled-components';\n\nconst BORDER_COLOR = {\n  FOCUS: contents000,\n  DEFAULT: contents300,\n  ERROR: roleRed,\n  DISABLED: contents300,\n};\n\nexport const SelectContainer = styled.div<{\n  $width?: number | string;\n  $error: boolean;\n}>`\n  --border-color: ${BORDER_COLOR.DEFAULT};\n\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, &:focus-within {\n    --border-color: ${BORDER_COLOR.FOCUS};\n    outline: none;\n  }\n\n  ${({ $error }) =>\n    $error &&\n    css`\n       &, &:focus, &:focus-within {\n        --border-color: ${BORDER_COLOR.ERROR};\n      }\n    `}\n\n  &[aria-disabled='true'] {\n    --border-color: ${BORDER_COLOR.DISABLED};\n    color: ${contents200};\n    background-color: ${bg200};\n  }\n\n`;\n"],"names":["FOCUS","DEFAULT","ERROR","DISABLED"],"mappings":";;;;;;;;;;;;AAAa;AAYb;AACEA;AACAC;AACAC;AACAC;AACF;AAEO;AAQoB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;AASE;AAAS;AAMR;;"}

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 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;
+    $error: boolean;
 }>>;
 //# 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":";AAWA,eAAO,MAAM,eAAe;;GA0B3B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/styles.ts"],"names":[],"mappings":";AAmBA,eAAO,MAAM,eAAe;;YAElB,OAAO;GAuChB,CAAC"}

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

@@ -1,10 +1,16 @@
 "use client";
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import { getTypographyStyles, contents000, contents200, contents300, bg200 } from '@remember-web/mixin';
-import styled from 'styled-components';
+import { contents300, getTypographyStyles, contents000, roleRed, contents200, bg200 } from '@remember-web/mixin';
+import styled, { css } from 'styled-components';
 
-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 _templateObject, _templateObject2;
+var BORDER_COLOR = {
+  FOCUS: contents000,
+  DEFAULT: contents300,
+  ERROR: roleRed,
+  DISABLED: contents300
+};
+var SelectContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --border-color: ", ";\n\n  ", "\n  color: ", ";\n  width: ", ";\n  position: relative;\n  user-select: none;\n\n  &:focus, &:focus-within {\n    --border-color: ", ";\n    outline: none;\n  }\n\n  ", "\n\n  &[aria-disabled='true'] {\n    --border-color: ", ";\n    color: ", ";\n    background-color: ", ";\n  }\n\n"])), BORDER_COLOR.DEFAULT, getTypographyStyles('UIBody2'), contents000, function (_ref) {
   var $width = _ref.$width;
   if (!$width) {
     return 'fit-content';
@@ -13,7 +19,10 @@ var SelectContainer = styled.div(_templateObject || (_templateObject = _taggedTe
     return "".concat($width, "px");
   }
   return $width;
-}, contents000, contents200, contents300, bg200);
+}, BORDER_COLOR.FOCUS, function (_ref2) {
+  var $error = _ref2.$error;
+  return $error && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n       &, &:focus, &:focus-within {\n        --border-color: ", ";\n      }\n    "])), BORDER_COLOR.ERROR);
+}, BORDER_COLOR.DISABLED, contents200, bg200);
 
 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} 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;;"}
+{"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, { css } from 'styled-components';\n\nconst BORDER_COLOR = {\n  FOCUS: contents000,\n  DEFAULT: contents300,\n  ERROR: roleRed,\n  DISABLED: contents300,\n};\n\nexport const SelectContainer = styled.div<{\n  $width?: number | string;\n  $error: boolean;\n}>`\n  --border-color: ${BORDER_COLOR.DEFAULT};\n\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, &:focus-within {\n    --border-color: ${BORDER_COLOR.FOCUS};\n    outline: none;\n  }\n\n  ${({ $error }) =>\n    $error &&\n    css`\n       &, &:focus, &:focus-within {\n        --border-color: ${BORDER_COLOR.ERROR};\n      }\n    `}\n\n  &[aria-disabled='true'] {\n    --border-color: ${BORDER_COLOR.DISABLED};\n    color: ${contents200};\n    background-color: ${bg200};\n  }\n\n`;\n"],"names":["FOCUS","DEFAULT","ERROR","DISABLED"],"mappings":";;;;;AAAa;AAYb;AACEA;AACAC;AACAC;AACAC;AACF;AAEO;AAQoB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;AASE;AAAS;AAMR;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remember-web/primitive",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "Remember Web Primitive Components",
   "homepage": "https://dramancompany.github.io/remember-web-packages/",
   "author": "Remember",

package/src/Floating/Tooltip/Tooltip.stories.tsx

@@ -1,4 +1,4 @@
-import { IconAlarm } from '@remember-web/icon';
+import { IconAlarmM } from '@remember-web/icon';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Button } from '@/Buttons';
@@ -28,6 +28,10 @@ const meta = {
       defaultValue: false,
       type: 'boolean',
     },
+    avoidCollisions: {
+      defaultValue: true,
+      type: 'boolean',
+    },
   },
 } satisfies Meta<typeof Tooltip>;
 
@@ -47,7 +51,7 @@ export const Default: Story = {
   render: ({ ...props }) => (
     <Flex gap={24}>
       <Tooltip {...props}>
-        <IconAlarm size={24} />
+        <IconAlarmM />
       </Tooltip>
       <Tooltip {...props}>
         <Button>버튼</Button>

package/src/Floating/Tooltip/index.tsx

@@ -29,6 +29,7 @@ export default function Tooltip<
   defaultOpen,
   side = 'top',
   gap = 4,
+  avoidCollisions = true,
   onOpenChange,
   onClickOutside,
   ...props
@@ -92,6 +93,7 @@ export default function Tooltip<
                 }
                 onClickOutside?.(e);
               }}
+              avoidCollisions={avoidCollisions}
               collisionPadding={20}
               onClick={(e) => {
                 if (isClickType) {

package/src/Floating/Tooltip/types.ts

@@ -14,6 +14,7 @@ export type TooltipProps<Type extends TooltipType, Size extends TooltipSize> = {
   defaultOpen?: boolean;
   gap?: 4 | 8 | (number & {});
   side?: PopperContentProps['side'];
+  avoidCollisions?: PopperContentProps['avoidCollisions'];
   type?: Type;
   size?: Size;
   contentOptions?: TooltipContentOptionProps;

package/src/Inputs/Select/DesignedSelect/index.tsx

@@ -36,6 +36,7 @@ const DesignedSelect = <Value extends SelectValue>(
     onChange,
     width,
     extendDirection,
+    error = false,
     disabled,
     onClick,
     ...props
@@ -213,6 +214,7 @@ const DesignedSelect = <Value extends SelectValue>(
       aria-expanded={isExpanded}
       aria-haspopup="listbox"
       aria-disabled={disabled}
+      $error={error}
       onKeyDown={keyDownHandler}
       {...props}
     >

package/src/Inputs/Select/DesignedSelect/styles.ts

@@ -19,7 +19,9 @@ export const StyledSelect = styled.div<{
   isPlaceholder?: boolean;
 }>`
   ${ellipsis()}
-  border: 1px solid ${contents300};
+  border-width: 1px;
+  border-style: solid;;
+
   ${({ expandedDirection }) =>
     ({
       none: css`
@@ -46,8 +48,8 @@ export const StyledSelect = styled.div<{
 
   ${SelectContainer}:focus-within & {
     outline: none;
-    border-color: ${contents000};
   }
+
   ${SelectContainer}:not([aria-disabled='true']) & {
     @media (hover: hover) {
       &:hover {
@@ -59,6 +61,8 @@ export const StyledSelect = styled.div<{
       background-color: ${bg300};
     }
   }
+
+  border-color: var(--border-color);
 `;
 
 export const SelectDownIcon = styled.div`
@@ -83,7 +87,10 @@ export const SelectOptionWrapper = styled.ul<{
   left: 0;
   right: 0;
   z-index: 1;
-  border: 1px solid ${contents300};
+ 
+  border-width: 1px;
+  border-style: solid;;
+
   background-color: ${bg100};
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -120,8 +127,9 @@ export const SelectOptionWrapper = styled.ul<{
 
   ${SelectContainer}:focus &, ${SelectContainer}:focus-within & {
     outline: none;
-    border-color: ${contents000};
   }
+
+  border-color: var(--border-color);
 `;
 
 export const SelectOption = styled.li<{ isSelected?: boolean }>`

package/src/Inputs/Select/DesignedSelect/types.ts

@@ -15,6 +15,7 @@ export type DesignedSelectInternalProps<Value extends SelectValue> = Omit<
   width?: number | string;
   placeholder?: string;
   extendDirection?: Exclude<ExpandedType, 'none'>;
+  error?: boolean;
 };
 
 export type ExpandedType = 'none' | 'above' | 'below';

package/src/Inputs/Select/NativeSelect/index.tsx

@@ -20,6 +20,7 @@ const NativeSelect: ForwardRefRenderFunction<
     value,
     disabled,
     onClick,
+    error = false,
     ...props
   },
   ref
@@ -31,6 +32,7 @@ const NativeSelect: ForwardRefRenderFunction<
       aria-disabled={disabled}
       className={className}
       $width={width}
+      $error={error}
     >
       <StyledSelect
         {...props}

package/src/Inputs/Select/NativeSelect/styles.ts

@@ -3,9 +3,7 @@
 import {
   bg200,
   bg300,
-  contents000,
   contents200,
-  contents300,
   getTypographyStyles,
 } from '@remember-web/mixin';
 import styled, { css } from 'styled-components';
@@ -16,8 +14,10 @@ export const StyledSelect = styled.select<{
 }>`
   all: unset;
 
-  ${getTypographyStyles('UIBody2')}
-  border: 1px solid ${contents300};
+  ${getTypographyStyles('UIBody2')};
+  border-width: 1px;
+  border-style: solid;
+  
   border-radius: 4px;
   padding: 10px 36px 10px 12px;
   box-sizing: border-box;
@@ -42,9 +42,6 @@ export const StyledSelect = styled.select<{
 
   transition: border-color 0.2s, background-color 0.2s;
 
-  &:focus {
-    border-color: ${contents000};
-  }
 
   &:not(:disabled) {
     @media (hover: hover) {
@@ -57,6 +54,8 @@ export const StyledSelect = styled.select<{
       background-color: ${bg300};
     }
   }
+
+  border-color: var(--border-color);
 `;
 export const SelectDownIcon = styled.div`
   position: absolute;

package/src/Inputs/Select/NativeSelect/types.ts

@@ -15,4 +15,5 @@ export type NativeSelectInternalProps = Omit<
   children: NativeOptionElement | NativeOptionElement[];
   width?: number | string;
   placeholder?: string;
+  error?: boolean;
 };

package/src/Inputs/Select/Select.stories.tsx

@@ -1,9 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
-
-import type { DesignedSelectProps, NativeSelectProps } from './types';
-
 import Select from '.';
+import type { DesignedSelectProps, NativeSelectProps } from './types';
 
 type Story = StoryObj<typeof Select>;
 
@@ -18,6 +16,7 @@ const meta = {
     maxHeight: { type: 'string' },
     native: { type: 'boolean' },
     onClick: { action: 'clicked' },
+    error: { type: 'boolean' },
   },
 } satisfies Meta<typeof Select>;
 

package/src/Inputs/Select/index.tsx

@@ -28,6 +28,7 @@ function Select<Value extends SelectValue>(
     width,
     required,
     onClick,
+    error,
   } = props;
 
   if (props.native) {
@@ -43,6 +44,7 @@ function Select<Value extends SelectValue>(
         required={required}
         placeholder={placeholder}
         width={width}
+        error={error}
         ref={ref as Ref<HTMLSelectElement>}
       >
         {Children.map(children, (child) => (
@@ -63,6 +65,7 @@ function Select<Value extends SelectValue>(
       width={width}
       maxHeight={props.maxHeight}
       extendDirection={props.extendDirection}
+      error={error}
       ref={ref as Ref<HTMLDivElement>}
     >
       {children}

package/src/Inputs/Select/styles.ts

@@ -6,10 +6,23 @@ import {
   contents200,
   contents300,
   getTypographyStyles,
+  roleRed,
 } from '@remember-web/mixin';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+
+const BORDER_COLOR = {
+  FOCUS: contents000,
+  DEFAULT: contents300,
+  ERROR: roleRed,
+  DISABLED: contents300,
+};
+
+export const SelectContainer = styled.div<{
+  $width?: number | string;
+  $error: boolean;
+}>`
+  --border-color: ${BORDER_COLOR.DEFAULT};
 
-export const SelectContainer = styled.div<{ $width?: number | string }>`
   ${getTypographyStyles('UIBody2')}
   color: ${contents000};
   width: ${({ $width }) => {
@@ -26,13 +39,23 @@ export const SelectContainer = styled.div<{ $width?: number | string }>`
   position: relative;
   user-select: none;
 
-  &:focus {
+  &:focus, &:focus-within {
+    --border-color: ${BORDER_COLOR.FOCUS};
     outline: none;
-    border-color: ${contents000};
   }
+
+  ${({ $error }) =>
+    $error &&
+    css`
+       &, &:focus, &:focus-within {
+        --border-color: ${BORDER_COLOR.ERROR};
+      }
+    `}
+
   &[aria-disabled='true'] {
+    --border-color: ${BORDER_COLOR.DISABLED};
     color: ${contents200};
-    border-color: ${contents300};
     background-color: ${bg200};
   }
+
 `;