@pedidopago/ui 1.0.6

package/dist/components/Rating/index.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _theme = require("../../shared/theme");
+
+var _react = require("@emotion/react");
+
+var _RatingWithMultipleValues = require("./components/RatingWithMultipleValues/RatingWithMultipleValues");
+
+var _RatingWithSingleValue = require("./components/RatingWithSingleValue/RatingWithSingleValue");
+
+var RatingComponent = function RatingComponent(_ref) {
+  var _ref$precision = _ref.precision,
+      precision = _ref$precision === void 0 ? '0.5' : _ref$precision,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? 'star' : _ref$name,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'medium' : _ref$size,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? 0 : _ref$value,
+      primaryColor = _ref.primaryColor,
+      secondaryColor = _ref.secondaryColor,
+      strokeColor = _ref.strokeColor,
+      _ref$iconsQuantity = _ref.iconsQuantity,
+      iconsQuantity = _ref$iconsQuantity === void 0 ? 5 : _ref$iconsQuantity,
+      _ref$defaultValue = _ref.defaultValue,
+      defaultValue = _ref$defaultValue === void 0 ? 0 : _ref$defaultValue,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+      onChangeValue = _ref.onChangeValue,
+      onChange = _ref.onChange;
+
+  var _useTheme = (0, _theme.useTheme)(),
+      theme = _useTheme.theme;
+
+  var parsedSize = size === 'small' ? '16px' : size === 'medium' ? '24px' : size === 'large' ? '32px' : size;
+  return /*#__PURE__*/React.createElement(_react.ThemeProvider, {
+    theme: theme
+  }, name !== 'satisfaction' ? /*#__PURE__*/React.createElement(_RatingWithMultipleValues.RatingWithMultipleValues, {
+    name: name,
+    defaultValue: defaultValue,
+    disabled: disabled,
+    iconsQuantity: iconsQuantity,
+    precision: precision,
+    readOnly: readOnly,
+    primaryColor: primaryColor,
+    secondaryColor: secondaryColor,
+    strokeColor: strokeColor,
+    value: value,
+    size: parsedSize,
+    onChangeValue: onChangeValue,
+    onChange: onChange
+  }) : /*#__PURE__*/React.createElement(_RatingWithSingleValue.RatingWithSingleValue, {
+    disabled: disabled,
+    size: parsedSize,
+    onChange: onChange,
+    primaryColor: primaryColor,
+    secondaryColor: secondaryColor,
+    strokeColor: strokeColor,
+    onChangeValue: onChangeValue,
+    readOnly: readOnly
+  }));
+};
+
+var _default = RatingComponent;
+exports.default = _default;

package/dist/components/Rating/rating.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/extend-expect';
+//# sourceMappingURL=rating.test.d.ts.map

package/dist/components/Rating/rating.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rating.test.d.ts","sourceRoot":"","sources":["../../../src/components/Rating/rating.test.tsx"],"names":[],"mappings":"AAGA,OAAO,yCAAyC,CAAC"}

package/dist/components/Rating/rating.test.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+var _react = require("@testing-library/react");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _ = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var setup = function setup() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var utils = (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, props));
+  var RatingWrapper = utils.getByTestId('rating-wrapper');
+  var RatingIcon = utils.getByTestId('rating-icon-0');
+  return _objectSpread({
+    RatingWrapper: RatingWrapper,
+    RatingIcon: RatingIcon
+  }, utils);
+};
+
+describe('Rating', function () {
+  it('Should be Rendered', function () {
+    var _setup = setup(),
+        RatingWrapper = _setup.RatingWrapper;
+
+    expect(RatingWrapper).toBeInTheDocument();
+    expect(RatingWrapper.querySelectorAll('svg').length).toBeGreaterThan(1);
+  });
+  it('should be able to render a icon with name prop', function () {
+    var iconName = 'heart';
+
+    var _setup2 = setup({
+      name: iconName
+    }),
+        RatingWrapper = _setup2.RatingWrapper;
+
+    var oneSVG = RatingWrapper.querySelector('svg');
+    var svgName = oneSVG === null || oneSVG === void 0 ? void 0 : oneSVG.getAttribute('name');
+    expect(svgName).toBe(iconName);
+  });
+  it('should be able to render any quantity of icons', function () {
+    var _setup3 = setup({
+      name: 'star',
+      iconsQuantity: 8
+    }),
+        RatingWrapper = _setup3.RatingWrapper;
+
+    var icons = RatingWrapper.querySelectorAll('svg');
+    var iconsQuantity = icons.length;
+    expect(iconsQuantity).toEqual(8);
+  });
+  it('should be able to fill svg if hover', function () {
+    var _setup4 = setup({
+      name: 'star'
+    }),
+        RatingIcon = _setup4.RatingIcon;
+
+    var RatingIconPath = RatingIcon.querySelector('path');
+
+    _react.fireEvent.mouseMove(RatingIconPath);
+
+    expect(RatingIcon === null || RatingIcon === void 0 ? void 0 : RatingIcon.style.fill).toBe('url(#star_gradient)');
+  });
+  it('should be able to change precision', function () {
+    var _setup5 = setup({
+      name: 'star',
+      precision: '1'
+    }),
+        RatingIcon = _setup5.RatingIcon;
+
+    var RatingIconPath = RatingIcon.querySelector('path');
+
+    _react.fireEvent.mouseMove(RatingIconPath);
+
+    expect(RatingIcon === null || RatingIcon === void 0 ? void 0 : RatingIcon.style.fill).toBe('yellow');
+  });
+  it('should be able to change primary color', function () {
+    var _setup6 = setup({
+      name: 'star',
+      precision: '1',
+      primaryColor: 'red'
+    }),
+        RatingIcon = _setup6.RatingIcon;
+
+    var RatingIconPath = RatingIcon.querySelector('path');
+
+    _react.fireEvent.mouseMove(RatingIconPath);
+
+    expect(RatingIcon === null || RatingIcon === void 0 ? void 0 : RatingIcon.style.fill).toBe('red');
+  });
+});

package/dist/components/Rating/types.d.ts

@@ -0,0 +1,29 @@
+import { ExtendThemeProps } from '../../shared/theme';
+import { GradientIconName } from './components/GradientIcon/types';
+export declare type SizeType = 'small' | 'medium' | 'large';
+export declare type IStyleProps = {
+    primaryColor?: string;
+    secondaryColor?: string;
+    theme?: ExtendThemeProps;
+    disabled?: boolean;
+    active?: boolean;
+    size?: SizeType;
+    isActive?: boolean;
+    SwitchType?: 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
+};
+export declare type IInputProps = {
+    name: GradientIconName;
+    value?: number;
+    defaultValue?: number;
+    iconsQuantity?: number;
+    precision?: '1' | '0.5';
+    size?: SizeType;
+    readOnly?: boolean;
+    disabled?: boolean;
+    primaryColor?: string;
+    secondaryColor?: string;
+    strokeColor?: string;
+    onChangeValue?: (value: number) => void;
+    onChange?: (value: number) => void;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/Rating/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Rating/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAEnE,oBAAY,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEpD,oBAAY,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EACP,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,CAAC;CACzB,CAAC;AAEF,oBAAY,WAAW,GAAG;IACxB,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,GAAG,GAAG,KAAK,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC"}

package/dist/components/Rating/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/Rating/utils/IconObjectsController.d.ts

@@ -0,0 +1,10 @@
+import { fillStateType } from '../components/GradientIcon/types';
+export interface IIconsObject {
+    id: number;
+    fillState: 'filled' | 'halfFilled' | 'empty';
+}
+export declare function createIconObjects(stars: number, defaultValue?: number): IIconsObject[];
+export declare function makeIconEmptyById(icons: IIconsObject[], id: number): IIconsObject[];
+export declare function controlIconsFillState(icons: IIconsObject[], id: number, fillState: fillStateType): IIconsObject[];
+export declare function convertFillStateToValue(icons: IIconsObject[]): number;
+//# sourceMappingURL=IconObjectsController.d.ts.map

package/dist/components/Rating/utils/IconObjectsController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconObjectsController.d.ts","sourceRoot":"","sources":["../../../../src/components/Rating/utils/IconObjectsController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,QAAQ,GAAG,YAAY,GAAG,OAAO,CAAC;CAC9C;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,kBAsDrE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,EAAE,EAAE,MAAM,GAAG,YAAY,EAAE,CASnF;AAED,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,YAAY,EAAE,EACrB,EAAE,EAAE,MAAM,EACV,SAAS,EAAE,aAAa,GACvB,YAAY,EAAE,CAqBhB;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,MAAM,CAiBrE"}

package/dist/components/Rating/utils/IconObjectsController.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.controlIconsFillState = controlIconsFillState;
+exports.convertFillStateToValue = convertFillStateToValue;
+exports.createIconObjects = createIconObjects;
+exports.makeIconEmptyById = makeIconEmptyById;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function createIconObjects(stars, defaultValue) {
+  var starsObjects = [];
+
+  var isFloat = function isFloat(value) {
+    return value % 1 !== 0;
+  };
+
+  if (defaultValue) {
+    var defaultValueIsFloat = isFloat(defaultValue);
+
+    if (defaultValueIsFloat) {
+      var times = Math.floor(defaultValue);
+
+      for (var i = 0; i < stars; i++) {
+        if (i < times) {
+          starsObjects.push({
+            id: i,
+            fillState: 'filled'
+          });
+        } else if (i === times) {
+          starsObjects.push({
+            id: i,
+            fillState: 'halfFilled'
+          });
+        } else {
+          starsObjects.push({
+            id: i,
+            fillState: 'empty'
+          });
+        }
+      }
+    } else {
+      for (var _i = 0; _i < stars; _i++) {
+        if (_i < defaultValue) {
+          starsObjects.push({
+            id: _i,
+            fillState: 'filled'
+          });
+        } else {
+          starsObjects.push({
+            id: _i,
+            fillState: 'empty'
+          });
+        }
+      }
+    }
+  } else {
+    for (var _i2 = 0; _i2 < stars; _i2++) {
+      starsObjects.push({
+        id: _i2,
+        fillState: 'empty'
+      });
+    }
+  }
+
+  return starsObjects;
+}
+
+function makeIconEmptyById(icons, id) {
+  var newIcons = icons.map(function (icon) {
+    if (icon.id === id) {
+      var newIcon = _objectSpread(_objectSpread({}, icon), {}, {
+        fillState: 'empty'
+      });
+
+      return newIcon;
+    }
+
+    return icon;
+  });
+  return newIcons;
+}
+
+function controlIconsFillState(icons, id, fillState) {
+  var newIcons = icons.map(function (star) {
+    if (star.id < id) {
+      return _objectSpread(_objectSpread({}, star), {}, {
+        fillState: 'filled'
+      });
+    } else if (star.id === id) {
+      return _objectSpread(_objectSpread({}, star), {}, {
+        fillState: fillState
+      });
+    } else {
+      return _objectSpread(_objectSpread({}, star), {}, {
+        fillState: 'empty'
+      });
+    }
+  });
+  return newIcons;
+}
+
+function convertFillStateToValue(icons) {
+  var convertToValue = function convertToValue(value) {
+    switch (value) {
+      case 'filled':
+        return 1;
+
+      case 'halfFilled':
+        return 0.5;
+
+      default:
+        return 0;
+    }
+  };
+
+  var rating = icons.reduce(function (acc, star) {
+    return acc + convertToValue(star.fillState);
+  }, 0);
+  return rating;
+}

package/dist/components/Rating/utils/svgDataTratamentFunction.d.ts

@@ -0,0 +1,10 @@
+import { MouseEvent } from 'react';
+import { fillStateType } from '../components/GradientIcon/types';
+interface svgDataTratamentFunctionReturn {
+    fillState: fillStateType;
+    isMouseLeave: boolean;
+    isMouseMove: boolean;
+}
+export declare function svgDataTratamentFunction(e: MouseEvent<SVGSVGElement>, precision: '1' | '0.5'): svgDataTratamentFunctionReturn;
+export {};
+//# sourceMappingURL=svgDataTratamentFunction.d.ts.map

package/dist/components/Rating/utils/svgDataTratamentFunction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svgDataTratamentFunction.d.ts","sourceRoot":"","sources":["../../../../src/components/Rating/utils/svgDataTratamentFunction.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,UAAU,8BAA8B;IACtC,SAAS,EAAE,aAAa,CAAC;IACzB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,wBAAwB,CACtC,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,EAC5B,SAAS,EAAE,GAAG,GAAG,KAAK,GACrB,8BAA8B,CAiChC"}

package/dist/components/Rating/utils/svgDataTratamentFunction.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.svgDataTratamentFunction = svgDataTratamentFunction;
+
+function svgDataTratamentFunction(e, precision) {
+  var target = e.target;
+  var path = target.getBoundingClientRect();
+  var eventType = e.type;
+  var MousePosition = e.nativeEvent.offsetX;
+  var nodeName = target.nodeName;
+  var svgSize = Math.ceil(path.height);
+  var fillState = 'empty';
+
+  switch (precision) {
+    case '1':
+      fillState = 'filled';
+      break;
+
+    case '0.5':
+      if (MousePosition > svgSize / 2) {
+        fillState = 'filled';
+      } else {
+        fillState = 'halfFilled';
+      }
+
+      break;
+  }
+
+  var isMouseLeave = eventType === 'mouseleave' && nodeName === 'path';
+  var isMouseMove = eventType === 'mousemove' && nodeName === 'path';
+  return {
+    fillState: fillState,
+    isMouseLeave: isMouseLeave,
+    isMouseMove: isMouseMove
+  };
+}

package/dist/components/SelectInput/components/InputWrapper/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { IStyleProps } from '../../types';
+export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const InputControl: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SelectInput/components/InputWrapper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/InputWrapper/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,eAAO,MAAM,YAAY;;;uHAMxB,CAAC;AAeF,eAAO,MAAM,YAAY;;;kHAExB,CAAC"}

package/dist/components/SelectInput/components/InputWrapper/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputWrapper = exports.InputControl = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _templateObject, _templateObject2;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var InputWrapper = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  width: ", ";\n  user-select: none;\n"])), InputWrapperWidthTratamentFunction);
+
+exports.InputWrapper = InputWrapper;
+
+function InputWrapperWidthTratamentFunction(_ref) {
+  var width = _ref.width,
+      fullWidth = _ref.fullWidth;
+  if (fullWidth) return '100%';
+
+  if (typeof width !== 'undefined' && width.length > 0) {
+    var widthIsOnlyNumber = !isNaN(Number(width));
+    return widthIsOnlyNumber ? "".concat(width, "px") : width;
+  } else {
+    var defaultValue = '380px';
+    return defaultValue;
+  }
+}
+
+var InputControl = _styled.default.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: none;\n"])));
+
+exports.InputControl = InputControl;

package/dist/components/SelectInput/components/OptionsArea/OptionsArea.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { IStyleProps } from '../../types';
+export declare const OptionsAreaWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AutoCompleteInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const Span: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const OptionItem: import("react").NamedExoticComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
+//# sourceMappingURL=OptionsArea.d.ts.map

package/dist/components/SelectInput/components/OptionsArea/OptionsArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsArea.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/OptionsArea/OptionsArea.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,eAAO,MAAM,kBAAkB;;;uHA8B9B,CAAC;AA4BF,eAAO,MAAM,iBAAiB;;;gIAa7B,CAAC;AAEF,eAAO,MAAM,IAAI;;;yHAGhB,CAAC;AAEF,eAAO,MAAM,UAAU;;;mHAErB,CAAC"}

package/dist/components/SelectInput/components/OptionsArea/OptionsArea.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Span = exports.OptionsAreaWrapper = exports.OptionItem = exports.AutoCompleteInput = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _react = require("react");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var OptionsAreaWrapper = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  scroll-behavior: smooth;\n\n  flex-direction: column;\n  box-sizing: border-box;\n  background-color: ", ";\n  color: ", ";\n\n  width: 100%;\n  max-height: 248px;\n  border-radius: ", ";\n\n  border: 2px solid ", ";\n\n  overflow-y: auto;\n\n  padding: 8px;\n\n  &::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: ", ";\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.colorMode === 'dark' ? theme.colors.neutral : theme.colors.body.light;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.colorMode === 'dark' ? theme.colors.neutral.white : theme.colors.neutral.black;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.borderRadius.default;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.colors.neutral.neutral1;
+}, function (_ref5) {
+  var theme = _ref5.theme,
+      selectType = _ref5.selectType;
+  return selectType ? theme.colors[selectType].default : theme.colors.primary.default;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.borderRadius.default;
+});
+
+exports.OptionsAreaWrapper = OptionsAreaWrapper;
+
+var OptionItemStyle = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n\n  height: 58px;\n\n  padding: 16px 24px;\n\n  outline: 0;\n  background: none;\n  border: 0;\n\n  font-size: ", ";\n  font-weight: ", ";\n\n  cursor: pointer;\n\n  :focus,\n  :hover {\n    background-color: ", ";\n    border-radius: ", ";\n  }\n"])), function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.fontSizes.xs;
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.fontWeight['500'];
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral1;
+}, function (_ref10) {
+  var theme = _ref10.theme;
+  return theme.borderRadius.default;
+});
+
+var AutoCompleteInput = _styled.default.input(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 8px;\n  outline: 0;\n  color: ", ";\n  background: ", ";\n\n  margin-bottom: 8px;\n\n  border: 2px solid\n    ", ";\n\n  border-radius: ", "; ;\n"])), function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.colorMode === 'dark' ? theme.colors.neutral.white : '';
+}, function (_ref12) {
+  var theme = _ref12.theme;
+  return theme.colorMode === 'dark' ? theme.colors.neutral.neutral3 : '';
+}, function (_ref13) {
+  var theme = _ref13.theme,
+      selectType = _ref13.selectType;
+  return selectType ? theme.colors[selectType].blurred : theme.colors.primary.disabled;
+}, function (_ref14) {
+  var theme = _ref14.theme;
+  return theme.borderRadius.default;
+});
+
+exports.AutoCompleteInput = AutoCompleteInput;
+
+var Span = _styled.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  text-align: center;\n"])), function (_ref15) {
+  var theme = _ref15.theme;
+  return theme.fontSizes.xxxs;
+});
+
+exports.Span = Span;
+var OptionItem = /*#__PURE__*/(0, _react.memo)(OptionItemStyle, function (prevProps, nextProps) {
+  return prevProps.active === nextProps.active;
+});
+exports.OptionItem = OptionItem;

package/dist/components/SelectInput/components/OptionsArea/index.d.ts

@@ -0,0 +1,16 @@
+import { UIEvent } from 'react';
+import { AlertType, SelectData } from '../../types';
+interface IOptionsAreaProps {
+    inputAlert: AlertType;
+    showOptionsArea: boolean;
+    data: SelectData[];
+    selectedOptions: SelectData[];
+    AutoComplete: Boolean;
+    chooseOption: (option: SelectData) => void;
+    scrollHandler: (e: UIEvent<HTMLDivElement>) => void;
+    setShowOptionsArea: (state: boolean) => void;
+    onChangeSearch?: (data: string) => void;
+}
+export declare function OptionsArea({ data, scrollHandler, chooseOption, inputAlert, setShowOptionsArea, AutoComplete, selectedOptions, onChangeSearch, }: IOptionsAreaProps): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SelectInput/components/OptionsArea/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/OptionsArea/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,OAAO,EAA4C,MAAM,OAAO,CAAC;AACzF,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGpD,UAAU,iBAAiB;IACzB,UAAU,EAAE,SAAS,CAAC;IACtB,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,eAAe,EAAE,UAAU,EAAE,CAAC;IAC9B,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC3C,aAAa,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACpD,kBAAkB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAID,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,cAAc,GACf,EAAE,iBAAiB,eAqGnB"}