@pedidopago/ui 1.3.13 → 1.3.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/dist/components/Button/styles.js +1 -1
  2. package/dist/components/ColorPicker/utils/parsers.js +18 -18
  3. package/dist/components/DatePicker/components/DatePickerContent.d.ts.map +1 -1
  4. package/dist/components/DatePicker/components/DatePickerContent.js +3 -2
  5. package/dist/components/DatePicker/index.d.ts.map +1 -1
  6. package/dist/components/DatePicker/index.js +7 -6
  7. package/dist/components/DatePicker/styles.d.ts.map +1 -1
  8. package/dist/components/DatePicker/styles.js +4 -6
  9. package/dist/components/Dropzone/utils/accepts.js +8 -8
  10. package/dist/components/Icon/scripts/build.js +2 -2
  11. package/dist/components/Icon/scripts/extractor.js +5 -5
  12. package/dist/components/Icon/scripts/writers.js +9 -9
  13. package/dist/components/Modal/index.d.ts.map +1 -1
  14. package/dist/components/Modal/index.js +1 -4
  15. package/dist/components/Modal/styles.d.ts +2 -0
  16. package/dist/components/Modal/styles.d.ts.map +1 -1
  17. package/dist/components/Modal/styles.js +1 -1
  18. package/dist/components/MultipleSelect/components/OptionsArea/index.js +10 -10
  19. package/dist/components/MultipleSelect/components/OptionsArea/{OptionsArea.d.ts → styles.d.ts} +1 -1
  20. package/dist/components/MultipleSelect/components/OptionsArea/styles.d.ts.map +1 -0
  21. package/dist/components/MultipleSelect/components/OptionsArea/{OptionsArea.js → styles.js} +0 -0
  22. package/dist/components/MultipleSelect/components/SelectArea/styles.js +1 -1
  23. package/dist/components/Rating/components/GradientIcon/scripts/build.js +4 -4
  24. package/dist/components/Rating/components/GradientIcon/scripts/extractor.js +5 -5
  25. package/dist/components/Rating/components/GradientIcon/scripts/writers.js +9 -9
  26. package/dist/components/Select/index.d.ts.map +1 -1
  27. package/dist/components/Select/index.js +20 -16
  28. package/dist/components/Select/styles.d.ts.map +1 -1
  29. package/dist/components/Select/styles.js +3 -3
  30. package/dist/components/Select/types.d.ts +3 -1
  31. package/dist/components/Select/types.d.ts.map +1 -1
  32. package/dist/components/Skeleton/styles.d.ts.map +1 -1
  33. package/dist/components/Skeleton/styles.js +3 -3
  34. package/dist/components/Switch/index.d.ts.map +1 -1
  35. package/dist/components/Switch/index.js +23 -68
  36. package/dist/components/Switch/styles.d.ts.map +1 -1
  37. package/dist/components/Switch/styles.js +8 -23
  38. package/dist/components/Switch/switch.test.js +10 -33
  39. package/dist/components/Switch/types.d.ts +3 -6
  40. package/dist/components/Switch/types.d.ts.map +1 -1
  41. package/dist/shared/hooks/useBreakpoint.js +5 -5
  42. package/dist/utils/GenerateKey.js +6 -6
  43. package/dist/utils/brightnessColorChange.js +6 -6
  44. package/dist/utils/colorCheck.js +24 -24
  45. package/dist/utils/getColorValue.js +8 -8
  46. package/dist/utils/invertColor.js +5 -5
  47. package/package.json +1 -1
  48. package/dist/components/MultipleSelect/components/OptionsArea/OptionsArea.d.ts.map +0 -1
  49. package/dist/components/MultipleSelect/components/SelectArea/Label.d.ts +0 -7
  50. package/dist/components/MultipleSelect/components/SelectArea/Label.d.ts.map +0 -1
  51. package/dist/components/MultipleSelect/components/SelectArea/Label.js +0 -36
@@ -58,7 +58,7 @@ var ButtonContainer = _styled.default.button(_templateObject || (_templateObject
58
58
 
59
59
  switch (variant) {
60
60
  case 'solid':
61
- return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &:is(&:hover, &:focus):not(:disabled) {\n box-shadow: inset 0 0 40px 40px rgba(0, 0, 0, 0.2);\n }\n "])));
61
+ return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &:is(&:hover, &:focus):not(:disabled) {\n box-shadow: inset 0 0 40px 40px rgba(0, 0, 0, 0.08);\n }\n "])));
62
62
 
63
63
  case 'outline':
64
64
  return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background-color: transparent;\n color: ", ";\n border: 3px ", " solid;\n box-shadow: none;\n &:is(&:hover, &:focus):not(:disabled) {\n filter: var(--button-brightness);\n }\n "])), textColor || bgColor || theme.colors.primary.default, bgColor || textColor || theme.colors.primary.default);
@@ -15,10 +15,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
15
15
 
16
16
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
17
17
 
18
- /**
19
- * This function converts a string color to a hsva color object
20
- * @param color : Color to convert to hsva;
21
- * @returns : hsva color object
18
+ /**
19
+ * This function converts a string color to a hsva color object
20
+ * @param color : Color to convert to hsva;
21
+ * @returns : hsva color object
22
22
  */
23
23
  var colorToHsva = function colorToHsva(color) {
24
24
  // Check if the color is a hex string and convert it to rgba and then to hsva
@@ -53,10 +53,10 @@ var colorToHsva = function colorToHsva(color) {
53
53
  a: 1
54
54
  };
55
55
  };
56
- /**
57
- * This function gets the color mode from the color string
58
- * @param color : Color to check your output mode
59
- * @returns : Color mode
56
+ /**
57
+ * This function gets the color mode from the color string
58
+ * @param color : Color to check your output mode
59
+ * @returns : Color mode
60
60
  */
61
61
 
62
62
 
@@ -85,11 +85,11 @@ var colorMode = function colorMode(color) {
85
85
 
86
86
  return 'unknown';
87
87
  };
88
- /**
89
- * This function converts a hsva color object to a string color
90
- * @param hsva : hsva color object
91
- * @param colorMode : Color output mode
92
- * @returns : Color string
88
+ /**
89
+ * This function converts a hsva color object to a string color
90
+ * @param hsva : hsva color object
91
+ * @param colorMode : Color output mode
92
+ * @returns : Color string
93
93
  */
94
94
 
95
95
 
@@ -116,11 +116,11 @@ var colorFromHsva = function colorFromHsva(hsva, colorMode) {
116
116
  return 'unknown';
117
117
  }
118
118
  };
119
- /**
120
- * This function converts a color string to output color mode
121
- * @param color : Color string;
122
- * @param outputMode : Color output mode;
123
- * @returns : Color string
119
+ /**
120
+ * This function converts a color string to output color mode
121
+ * @param color : Color string;
122
+ * @param outputMode : Color output mode;
123
+ * @returns : Color string
124
124
  */
125
125
 
126
126
 
@@ -1 +1 @@
1
- {"version":3,"file":"DatePickerContent.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/components/DatePickerContent.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAElD,eAAO,MAAM,iBAAiB,4KAc3B,sBAAsB,gBAwNxB,CAAC"}
1
+ {"version":3,"file":"DatePickerContent.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/components/DatePickerContent.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAElD,eAAO,MAAM,iBAAiB,4KAc3B,sBAAsB,gBAiOxB,CAAC"}
@@ -181,7 +181,8 @@ var DatePickerContent = function DatePickerContent(_ref) {
181
181
  var isToday = cellDate.toLocaleDateString() === new Date().toLocaleDateString();
182
182
  var isStartDateOfRange = cellDate.toLocaleDateString() === startDate.toLocaleDateString();
183
183
  var isEndDateOfRange = cellDate.toLocaleDateString() === endDate.toLocaleDateString();
184
- var isDisabled = day === 0;
184
+ var outOfCurrentMonthInRange = type === 'range' && (isPreviousMonth || isNextMonth);
185
+ var isDisabled = day === 0 || minDate && cellDate.getTime() < minDate.getTime() || maxDate && cellDate.getTime() > maxDate.getTime() || outOfCurrentMonthInRange;
185
186
  var isExtended = variant === 'extended';
186
187
  var removeZeros = days.filter(function (day) {
187
188
  return day !== 0;
@@ -217,7 +218,7 @@ var DatePickerContent = function DatePickerContent(_ref) {
217
218
  handleChangeSelectDate(cellDate);
218
219
  },
219
220
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.DatePickerTableCellSpan, {
220
- children: !isDisabled && day
221
+ children: day !== 0 && !outOfCurrentMonthInRange && day
221
222
  })
222
223
  }, dayIndex);
223
224
  })
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,QAAA,MAAM,UAAU,iEAQb,eAAe,gBA2JjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,QAAA,MAAM,UAAU,iEAQb,eAAe,gBAiKjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
@@ -59,14 +59,14 @@ var DatePicker = function DatePicker(_ref) {
59
59
  setEndDate = _useState4[1];
60
60
 
61
61
  var _useState5 = (0, _react.useState)(function () {
62
- return new Date(startDate.getFullYear(), startDate.getMonth(), 1);
62
+ return new Date(startDate.getFullYear(), startDate.getMonth() - (variant === 'extended' ? 1 : 0), 1);
63
63
  }),
64
64
  _useState6 = _slicedToArray(_useState5, 2),
65
65
  firstCalendarDate = _useState6[0],
66
66
  setFirstCalendarDate = _useState6[1];
67
67
 
68
68
  var _useState7 = (0, _react.useState)(function () {
69
- return new Date(endDate.getFullYear(), endDate.getMonth() + (endDate.getMonth() !== startDate.getMonth() ? 0 : 1), 1);
69
+ return new Date(startDate.getFullYear(), startDate.getMonth(), 1);
70
70
  }),
71
71
  _useState8 = _slicedToArray(_useState7, 2),
72
72
  secondCalendarDate = _useState8[0],
@@ -126,6 +126,7 @@ var DatePicker = function DatePicker(_ref) {
126
126
  }
127
127
  };
128
128
 
129
+ var firstCalendarLimit = new Date(secondCalendarDate.getFullYear(), secondCalendarDate.getMonth(), 0);
129
130
  var DatePickerContentProps = {
130
131
  variant: variant,
131
132
  type: type,
@@ -134,8 +135,8 @@ var DatePicker = function DatePicker(_ref) {
134
135
  isInTheRange: isInTheRange,
135
136
  handleMouseOver: handleMouseOver,
136
137
  handleChange: handleChange,
137
- minDate: minDate,
138
- maxDate: maxDate
138
+ minDate: minDate && new Date(minDate),
139
+ maxDate: maxDate && new Date(maxDate)
139
140
  };
140
141
 
141
142
  var handleToggleYearPicker = function handleToggleYearPicker() {
@@ -156,14 +157,14 @@ var DatePicker = function DatePicker(_ref) {
156
157
  enableYearPicker: !maxDate && !minDate
157
158
  }), {}, {
158
159
  date: firstCalendarDate,
159
- maxDate: variant === 'extended' ? new Date(secondCalendarDate.getFullYear(), secondCalendarDate.getMonth() - 1) : maxDate,
160
+ maxDate: variant === 'extended' && !maxDate ? firstCalendarLimit : variant === 'extended' ? maxDate && new Date(maxDate).getTime() < firstCalendarLimit.getTime() ? DatePickerContentProps.maxDate : firstCalendarLimit : DatePickerContentProps.maxDate,
160
161
  handleChangeDate: function handleChangeDate(newDate) {
161
162
  return setFirstCalendarDate(newDate);
162
163
  }
163
164
  })), variant === 'extended' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePickerContent.DatePickerContent, _objectSpread(_objectSpread({}, DatePickerContentProps), {}, {
164
165
  date: secondCalendarDate,
165
166
  minDate: new Date(firstCalendarDate.getFullYear(), firstCalendarDate.getMonth() + 1, 1),
166
- maxDate: maxDate,
167
+ maxDate: DatePickerContentProps.maxDate,
167
168
  handleChangeDate: function handleChangeDate(newDate) {
168
169
  setSecondCalendarDate(newDate);
169
170
  }
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/styles.ts"],"names":[],"mappings":";AAOA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,0BAA0B;;;;gBACzB,OAAO;yGAkBpB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;yGAG/B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAM5B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;yGAqBjC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;qHAqBlC,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAE1B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;uIAc/B,CAAC;AACF,eAAO,MAAM,kBAAkB;;;;;mHAkB9B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;+HAkJ/B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;gIAGnC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;yGAGnC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGAG9B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;yGA+B9B,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/styles.ts"],"names":[],"mappings":";AAOA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,0BAA0B;;;;gBACzB,OAAO;yGAkBpB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;yGAG/B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAM5B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;yGAqBjC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;qHAqBlC,CAAC;AAEF,eAAO,MAAM,cAAc;;;yGAE1B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;uIAc/B,CAAC;AACF,eAAO,MAAM,kBAAkB;;;;;mHAkB9B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;+HAiJ/B,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;gIAGnC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;yGAGnC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGAG9B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;yGA+B9B,CAAC"}
@@ -73,14 +73,12 @@ var DatePickerTableRow = _styled.default.tr(_templateObject8 || (_templateObject
73
73
 
74
74
  exports.DatePickerTableRow = DatePickerTableRow;
75
75
 
76
- var DatePickerTableCell = _styled.default.td(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n position: relative;\n height: 0;\n padding: 12px;\n text-align: center;\n font-family: inherit;\n font-size: 0.75rem;\n font-weight: 600;\n border-radius: 50%;\n cursor: pointer;\n background-color: ", ";\n\n color: ", ";\n pointer-events: ", ";\n\n user-select: none;\n\n transition: background 150ms ease;\n\n ", "\n\n ", "\n\n ", "\n\n &:hover {\n background-color: ", ";\n }\n\n ", "\n\n &.is-current {\n &:before {\n border-radius: 0 50% 50% 0 !important;\n }\n }\n"])), function (props) {
77
- return !props.isPrevNextMonth && (props.isSelected || props.isEndDateOfRange) ? (0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme) : 'transparent';
76
+ var DatePickerTableCell = _styled.default.td(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n position: relative;\n height: 0;\n padding: 12px;\n text-align: center;\n font-family: inherit;\n font-size: 0.75rem;\n font-weight: 600;\n border-radius: 50%;\n cursor: pointer;\n background-color: ", ";\n\n color: ", ";\n\n user-select: none;\n\n transition: background 150ms ease;\n\n ", "\n\n ", "\n\n ", "\n\n &:hover {\n background-color: ", ";\n }\n\n ", "\n\n &.is-current {\n &:before {\n border-radius: 0 50% 50% 0 !important;\n }\n }\n"])), function (props) {
77
+ return !props.isPrevNextMonth && !props.disabled && (props.isSelected || props.isEndDateOfRange) ? (0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme) : 'transparent';
78
78
  }, function (props) {
79
- return props.isPrevNextMonth ? 'transparent' : props.isSelected || props.isEndDateOfRange ? props.theme.colors.body.light : props['aria-selected'] ? (0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme) : props.theme.colors.neutral.black;
79
+ return props.isPrevNextMonth ? props.theme.colors.neutral.neutral2 : props.isSelected || props.isEndDateOfRange ? props.theme.colors.body.light : props['aria-selected'] ? (0, _getColorValue.getColorValue)(props.theme.colorSelected, props.theme) : props.theme.colors.neutral.black;
80
80
  }, function (props) {
81
- return props.isPrevNextMonth ? 'none' : 'auto';
82
- }, function (props) {
83
- return props.disabled && "\n background:none;\n cursor: default; \n pointer-events: none;\n ";
81
+ return props.disabled && "\n pointer-events: none;\n cursor: default;\n color: ".concat(props.theme.colors.neutral.neutral1, ";\n ");
84
82
  }, function (props) {
85
83
  return props.isToday && !props.isSelected && !props.isEndDateOfRange && "\n &:after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n border: solid 1px ".concat(props.theme.colors.neutral.neutral2, ";\n transform: translate(-50%, -50%);\n }\n ");
86
84
  }, function (props) {
@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.accepts = void 0;
7
7
 
8
- /**
9
- * Verify if the given file can be accepted by the dropzone.
10
- *
11
- * Code abstration of: https://github.com/react-dropzone/attr-accept
12
- *
13
- * @param file The file to verify
14
- * @param acceptedFiles The accepted files
15
- * @returns true if the file can be accepted, false otherwise
8
+ /**
9
+ * Verify if the given file can be accepted by the dropzone.
10
+ *
11
+ * Code abstration of: https://github.com/react-dropzone/attr-accept
12
+ *
13
+ * @param file The file to verify
14
+ * @param acceptedFiles The accepted files
15
+ * @returns true if the file can be accepted, false otherwise
16
16
  */
17
17
  var accepts = function accepts(file, acceptedFormats) {
18
18
  if (file && acceptedFormats) {
@@ -35,8 +35,8 @@ var twirlTimer = function twirlTimer() {
35
35
  x &= 3;
36
36
  }, 250);
37
37
  };
38
- /**
39
- * Builds the icons and types files.
38
+ /**
39
+ * Builds the icons and types files.
40
40
  */
41
41
 
42
42
 
@@ -11,11 +11,11 @@ var _fs = require("fs");
11
11
 
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
13
 
14
- /**
15
- * Extractor is a function that extracts the svg content from the icon file.
16
- * @param files - The directory with the files to extract.
17
- * @param currentPath - The current path of the file
18
- * @returns Array of objects with the name and the content of the icon svg.
14
+ /**
15
+ * Extractor is a function that extracts the svg content from the icon file.
16
+ * @param files - The directory with the files to extract.
17
+ * @param currentPath - The current path of the file
18
+ * @returns Array of objects with the name and the content of the icon svg.
19
19
  */
20
20
  var extractor = function extractor(files, currentPath) {
21
21
  return files.map(function (file) {
@@ -11,10 +11,10 @@ var _path = _interopRequireDefault(require("path"));
11
11
 
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
13
 
14
- /**
15
- * This function generates the types file for the Icon component
16
- * @param iconsList - The list of icons
17
- * @param overwrite - If true, the file will be overwritten
14
+ /**
15
+ * This function generates the types file for the Icon component
16
+ * @param iconsList - The list of icons
17
+ * @param overwrite - If true, the file will be overwritten
18
18
  */
19
19
  var writeTypesFile = function writeTypesFile(iconsList) {
20
20
  var overwrite = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -27,11 +27,11 @@ var writeTypesFile = function writeTypesFile(iconsList) {
27
27
  }).join(' | '), ";\n\n export type IIconComponentProps = {\n name: IconName;\n size?: number | string;\n color?: GlobalColorsProps | (string & {});\n secondColor?: GlobalColorsProps | (string & {});\n }\n "));
28
28
  }
29
29
  };
30
- /**
31
- * This function generates the icons json file for the Icon component
32
- * @param iconsList - The list of icons
33
- * @param jsonFileName - The name of the json file
34
- * @param overwrite - If true, the file will be overwritten
30
+ /**
31
+ * This function generates the icons json file for the Icon component
32
+ * @param iconsList - The list of icons
33
+ * @param jsonFileName - The name of the json file
34
+ * @param overwrite - If true, the file will be overwritten
35
35
  */
36
36
 
37
37
 
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,KAAK,oJAef,UAAU,gBA+EZ,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,KAAK,oJAef,UAAU,gBAyEZ,CAAC"}
@@ -112,10 +112,7 @@ var Modal = function Modal(_ref) {
112
112
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ReactPortal.ReactPortal, {
113
113
  wrapperId: "portal-root",
114
114
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Overlay, {
115
- style: {
116
- opacity: open && !hideOverlay ? 0.1 : 0,
117
- pointerEvents: open ? 'auto' : 'none'
118
- },
115
+ isOpen: open,
119
116
  onClick: function onClick() {
120
117
  return onClose();
121
118
  }
@@ -23,6 +23,8 @@ export declare const ModalElement: import("@emotion/styled").StyledComponent<{
23
23
  export declare const Overlay: import("@emotion/styled").StyledComponent<{
24
24
  theme?: Theme | undefined;
25
25
  as?: import("react").ElementType<any> | undefined;
26
+ } & {
27
+ isOpen: boolean;
26
28
  }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
27
29
  export {};
28
30
  //# sourceMappingURL=styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/styles.ts"],"names":[],"mappings":";AACA,OAAO,EAAO,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5C,UAAU,mBAAmB;IAC3B,IAAI,EAAE,OAAO,CAAC;IAEd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,eAAe,EAAE,MAAM,CAAC;IAExB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,cAAc;;;+HAsBzB,CAAC;AAEH,eAAO,MAAM,YAAY;;;;UACjB,OAAO;;;yGA4Cb,CAAC;AAEH,eAAO,MAAM,OAAO;;;yGAgBlB,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/styles.ts"],"names":[],"mappings":";AACA,OAAO,EAAO,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5C,UAAU,mBAAmB;IAC3B,IAAI,EAAE,OAAO,CAAC;IAEd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,eAAe,EAAE,MAAM,CAAC;IAExB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,cAAc;;;+HAsBzB,CAAC;AAEH,eAAO,MAAM,YAAY;;;;UACjB,OAAO;;;yGA4Cb,CAAC;AAEH,eAAO,MAAM,OAAO;;;;YACV,OAAO;yGAmBf,CAAC"}
@@ -42,7 +42,7 @@ exports.ModalElement = ModalElement;
42
42
 
43
43
  var Overlay = _styled.default.div(function (props) {
44
44
  var theme = props.theme;
45
- return (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: fixed;\n left: 0px;\n right: 0px;\n top: 0px;\n bottom: 0px;\n z-index: ", ";\n\n background: ", ";\n opacity: 0;\n\n transition: opacity ease ", ";\n "])), theme.zIndex.level24, theme.colors.neutral.neutral5, theme.transition.speed);
45
+ return (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: fixed;\n left: 0px;\n right: 0px;\n top: 0px;\n bottom: 0px;\n z-index: ", ";\n\n background: ", ";\n\n opacity: ", ";\n pointer-events: ", ";\n\n transition: opacity ease ", ";\n "])), theme.zIndex.level24, theme.colors.neutral.neutral5, props.isOpen ? 0.1 : 0, props.isOpen ? 'auto' : 'none', theme.transition.speed);
46
46
  });
47
47
 
48
48
  exports.Overlay = Overlay;
@@ -7,7 +7,7 @@ exports.OptionsArea = OptionsArea;
7
7
 
8
8
  var _react = require("react");
9
9
 
10
- var _OptionsArea = require("./OptionsArea");
10
+ var _styles = require("./styles");
11
11
 
12
12
  var _jsxRuntime = require("react/jsx-runtime");
13
13
 
@@ -57,12 +57,12 @@ function OptionsArea(_ref) {
57
57
  var selectedOptionsNames = selectedOptions.map(function (option) {
58
58
  return option.label;
59
59
  });
60
- var newDataWithoutChosen = data.map(function (option) {
60
+ var newDataWithoutChosen = data.flatMap(function (option) {
61
61
  return !selectedOptionsNames.includes(option.label) ? option : [];
62
- }).flat();
63
- var newDataToShow = AutoComplete ? newDataWithoutChosen.map(function (option) {
64
- return option.value.includes(AutoCompleteState) ? option : [];
65
- }).flat() : newDataWithoutChosen;
62
+ });
63
+ var newDataToShow = AutoComplete ? newDataWithoutChosen.flatMap(function (option) {
64
+ return option.label.toLowerCase().includes(AutoCompleteState.toLocaleLowerCase()) ? option : [];
65
+ }) : newDataWithoutChosen;
66
66
 
67
67
  if (AutoCompleteState.length > 0 && onChangeSearch) {
68
68
  clearTimeout(onChangeSearchDebounce);
@@ -104,13 +104,13 @@ function OptionsArea(_ref) {
104
104
  break;
105
105
  }
106
106
  }, [setShowOptionsArea]);
107
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_OptionsArea.OptionsAreaWrapper, {
107
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.OptionsAreaWrapper, {
108
108
  "data-testid": "options-area",
109
109
  selectType: inputAlert,
110
110
  itensLength: dataToShow.length,
111
111
  onKeyDown: keyDownHandler,
112
112
  onScroll: scrollHandler,
113
- children: [AutoComplete && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionsArea.AutoCompleteInput, {
113
+ children: [AutoComplete && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.AutoCompleteInput, {
114
114
  type: "text",
115
115
  autoFocus: true,
116
116
  ref: AutoCompleteRef,
@@ -120,7 +120,7 @@ function OptionsArea(_ref) {
120
120
  return setAutoCompleteState(e.target.value);
121
121
  }
122
122
  }), dataToShow.map(function (option, index) {
123
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionsArea.OptionItem, {
123
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.OptionItem, {
124
124
  ref: !AutoComplete && index === chosenItem ? OptionRef : null,
125
125
  onFocus: function onFocus() {
126
126
  return setChosenItem(index);
@@ -140,7 +140,7 @@ function OptionsArea(_ref) {
140
140
  },
141
141
  children: option.label
142
142
  }, "".concat(option.label).concat(index));
143
- }), AutoCompleteState.length > 0 && dataToShow.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionsArea.Span, {
143
+ }), AutoCompleteState.length > 0 && dataToShow.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Span, {
144
144
  children: "Sem Resultados"
145
145
  })]
146
146
  });
@@ -16,4 +16,4 @@ export declare const OptionItem: import("react").NamedExoticComponent<{
16
16
  theme?: import("@emotion/react").Theme | undefined;
17
17
  as?: import("react").ElementType<any> | undefined;
18
18
  } & IStyleProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;
19
- //# sourceMappingURL=OptionsArea.d.ts.map
19
+ //# sourceMappingURL=styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/MultipleSelect/components/OptionsArea/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,eAAO,MAAM,kBAAkB;;;uHAwC9B,CAAC;AA+BF,eAAO,MAAM,iBAAiB;;;gIAe7B,CAAC;AAEF,eAAO,MAAM,IAAI;;;yHAGhB,CAAC;AAEF,eAAO,MAAM,UAAU;;;mHAErB,CAAC"}
@@ -30,7 +30,7 @@ var Label = _styled.default.label(_templateObject || (_templateObject = _taggedT
30
30
  }, function (_ref4) {
31
31
  var animate = _ref4.animate,
32
32
  theme = _ref4.theme;
33
- return animate ? (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n transform: translate(-12px, -11px) scale(0.8);\n background-color: ", ";\n height: 20px;\n "])), theme.colorMode === 'dark' ? theme.colors.neutral.black : theme.colors.neutral.white) : '';
33
+ return animate ? (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n transform: translate(-12px, -11px);\n background-color: ", ";\n height: 20px;\n "])), theme.colorMode === 'dark' ? theme.colors.neutral.black : theme.colors.neutral.white) : '';
34
34
  });
35
35
 
36
36
  exports.Label = Label;
@@ -35,10 +35,10 @@ var twirlTimer = function twirlTimer() {
35
35
  x &= 3;
36
36
  }, 250);
37
37
  };
38
- /**
39
- * Builds the icons and types files.
40
- * To run this script, you need to call this at the test file:
41
- * `require('./scripts/build')` or `import build from './scripts/build'`
38
+ /**
39
+ * Builds the icons and types files.
40
+ * To run this script, you need to call this at the test file:
41
+ * `require('./scripts/build')` or `import build from './scripts/build'`
42
42
  */
43
43
 
44
44
 
@@ -11,11 +11,11 @@ var _fs = require("fs");
11
11
 
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
13
 
14
- /**
15
- * Extractor is a function that extracts the svg content from the icon file.
16
- * @param files - The directory with the files to extract.
17
- * @param currentPath - The current path of the file
18
- * @returns Array of objects with the name and the content of the icon svg.
14
+ /**
15
+ * Extractor is a function that extracts the svg content from the icon file.
16
+ * @param files - The directory with the files to extract.
17
+ * @param currentPath - The current path of the file
18
+ * @returns Array of objects with the name and the content of the icon svg.
19
19
  */
20
20
  var extractor = function extractor(files, currentPath) {
21
21
  return files.map(function (file) {
@@ -11,10 +11,10 @@ var _path = _interopRequireDefault(require("path"));
11
11
 
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
13
 
14
- /**
15
- * This function generates the types file for the Icon component
16
- * @param iconsList - The list of icons
17
- * @param overwrite - If true, the file will be overwritten
14
+ /**
15
+ * This function generates the types file for the Icon component
16
+ * @param iconsList - The list of icons
17
+ * @param overwrite - If true, the file will be overwritten
18
18
  */
19
19
  var writeTypesFile = function writeTypesFile(iconsList) {
20
20
  var overwrite = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -27,11 +27,11 @@ var writeTypesFile = function writeTypesFile(iconsList) {
27
27
  }).join(' | '), ";\n\n export type IIconComponentProps = {\n name: IconName;\n size?: number | string;\n color?: GlobalColorsProps | (string & {});\n secondColor?: GlobalColorsProps | (string & {});\n }\n "));
28
28
  }
29
29
  };
30
- /**
31
- * This function generates the icons json file for the Icon component
32
- * @param iconsList - The list of icons
33
- * @param jsonFileName - The name of the json file
34
- * @param overwrite - If true, the file will be overwritten
30
+ /**
31
+ * This function generates the icons json file for the Icon component
32
+ * @param iconsList - The list of icons
33
+ * @param jsonFileName - The name of the json file
34
+ * @param overwrite - If true, the file will be overwritten
35
35
  */
36
36
 
37
37
 
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAOpB,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,QAAA,MAAM,MAAM,kJAgLX,CAAC;AAGF,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAOpB,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,QAAA,MAAM,MAAM,kJA+LX,CAAC;AAGF,eAAe,MAAM,CAAC"}
@@ -19,7 +19,7 @@ var _styles = require("./styles");
19
19
 
20
20
  var _jsxRuntime = require("react/jsx-runtime");
21
21
 
22
- var _excluded = ["label", "placeholder", "options", "alert", "helperText", "width", "sizeSelect"];
22
+ var _excluded = ["label", "placeholder", "options", "alert", "helperText", "width", "sizeSelect", "variant"];
23
23
 
24
24
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
25
 
@@ -57,6 +57,7 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
57
57
  helperText = _ref.helperText,
58
58
  width = _ref.width,
59
59
  sizeSelect = _ref.sizeSelect,
60
+ variant = _ref.variant,
60
61
  rest = _objectWithoutProperties(_ref, _excluded);
61
62
 
62
63
  var containerRef = (0, _react.useRef)(null);
@@ -173,9 +174,10 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
173
174
  onClick: toggleOptionsAreaView,
174
175
  className: rest.className,
175
176
  style: rest.style,
177
+ variant: variant,
176
178
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
177
179
  ref: containerRef,
178
- children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
180
+ children: [label && variant !== 'unstyled' && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
179
181
  children: label
180
182
  }), selectedOption === undefined ?
181
183
  /*#__PURE__*/
@@ -195,22 +197,24 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
195
197
  children: options[selectedOption].label
196
198
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
197
199
  name: "chevron-down"
198
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
199
- children: !!label && /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
200
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
201
- fontSize: "xxs",
202
- variant: "span",
203
- children: label
200
+ }), variant !== 'unstyled' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
201
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
202
+ children: !!label && /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
203
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
204
+ fontSize: "xxs",
205
+ variant: "span",
206
+ children: label
207
+ })
204
208
  })
205
- })
206
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
207
- children: !!label && /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
208
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
209
- fontSize: "xxs",
210
- variant: "span",
211
- children: label
209
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
210
+ children: !!label && /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
211
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
212
+ fontSize: "xxs",
213
+ variant: "span",
214
+ children: label
215
+ })
212
216
  })
213
- })
217
+ })]
214
218
  })]
215
219
  }), !!helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
216
220
  fontSize: "xxs",
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE3D,eAAO,MAAM,eAAe;;;gIAgK1B,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;yGAwBjB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;UAI5B,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE3D,eAAO,MAAM,eAAe;;;gIAqK1B,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;yGAwBjB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;UAI5B,CAAC"}
@@ -18,13 +18,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
18
18
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
19
19
 
20
20
  var SelectContainer = _styled.default.div(function (props) {
21
- return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n outline: none;\n user-select: none;\n width: ", ";\n height: ", ";\n ", ";\n & > div {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n border-radius: ", ";\n padding: 0 ", ";\n width: 100%;\n height: 100%;\n position: relative;\n cursor: pointer;\n color: ", ";\n transition: background-color ease;\n transition-duration: ", ";\n\n ", ";\n\n ", ";\n\n & > label {\n position: absolute;\n left: 20px;\n top: 50%;\n transform: translateY(-50%);\n font-size: 1rem;\n font-weight: 500;\n color: ", ";\n transition: top ease, left ease, color ease;\n transition-duration: ", ";\n\n ", "\n }\n\n // Chevron Down icon\n & > svg {\n flex-shrink: 0;\n transform: rotate(0deg);\n color: ", ";\n transition: transform ease;\n transition-duration: ", ";\n }\n\n & > fieldset {\n border: 2px solid;\n border-color: ", ";\n border-radius: ", ";\n padding: 0 14px;\n position: absolute;\n left: 0px;\n right: 0px;\n top: 0px;\n bottom: 0px;\n pointer-events: none;\n transition: border-color ease;\n transition-duration: ", ";\n\n &:last-of-type {\n border-radius: calc(", " + 2px);\n padding: 0 16px;\n border-color: transparent;\n left: -2px;\n right: -2px;\n top: -2px;\n bottom: -2px;\n }\n\n & > legend {\n display: ", ";\n line-height: 2px;\n user-select: none;\n padding: 0 4px;\n & > span {\n color: transparent;\n }\n }\n }\n }\n\n // Helper text\n & > p {\n margin: 8px 20px;\n\n ", "\n }\n\n & > input {\n appearance: none;\n border: 0;\n width: 0px;\n position: absolute;\n opacity: 0;\n pointer-events: none;\n }\n "])), props.size ? {
21
+ return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n outline: none;\n user-select: none;\n width: ", ";\n height: ", ";\n ", ";\n & > div {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n border-radius: ", ";\n padding: 0\n ", ";\n width: 100%;\n height: 100%;\n position: relative;\n cursor: pointer;\n color: ", ";\n transition: background-color ease;\n transition-duration: ", ";\n\n ", ";\n\n ", ";\n\n & > label {\n position: absolute;\n left: 20px;\n top: 50%;\n transform: translateY(-50%);\n font-size: 1rem;\n font-weight: 500;\n color: ", ";\n transition: top ease, left ease, color ease;\n transition-duration: ", ";\n\n ", "\n }\n\n // Chevron Down icon\n & > svg {\n flex-shrink: 0;\n transform: rotate(0deg);\n color: ", ";\n transition: transform ease;\n transition-duration: ", ";\n }\n\n & > fieldset {\n border: 2px solid;\n border-color: ", ";\n border-radius: ", ";\n padding: 0 14px;\n position: absolute;\n left: 0px;\n right: 0px;\n top: 0px;\n bottom: 0px;\n pointer-events: none;\n transition: border-color ease;\n transition-duration: ", ";\n\n &:last-of-type {\n border-radius: calc(", " + 2px);\n padding: 0 16px;\n border-color: transparent;\n left: -2px;\n right: -2px;\n top: -2px;\n bottom: -2px;\n }\n\n & > legend {\n display: ", ";\n line-height: 2px;\n user-select: none;\n padding: 0 4px;\n & > span {\n color: transparent;\n }\n }\n }\n }\n\n // Helper text\n & > p {\n margin: 8px 20px;\n\n ", "\n }\n\n & > input {\n appearance: none;\n border: 0;\n width: 0px;\n position: absolute;\n opacity: 0;\n pointer-events: none;\n }\n "])), props.size ? {
22
22
  sm: '78px',
23
23
  md: '100%'
24
- }[props.size] : props.width, props.size ? {
24
+ }[props.size] : props.width, props.variant === 'unstyled' ? 'auto' : props.size ? {
25
25
  sm: '36px',
26
26
  md: '56px'
27
- }[props.size] : '56px', !props.disabled && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &:hover {\n & > div {\n color: ", ";\n\n & > label {\n color: ", ";\n }\n\n & > fieldset {\n &:first-of-type {\n border-color: ", ";\n }\n }\n }\n }\n\n &:focus {\n & > div {\n color: ", ";\n\n & > svg {\n transform: rotate(180deg);\n }\n\n & > fieldset {\n &:first-of-type {\n border-color: ", ";\n }\n &:last-of-type {\n border-color: ", ";\n }\n }\n }\n }\n "])), props.theme.colors.neutral.black, props.theme.colors.neutral.neutral5, props.alert ? props.theme.colors[props.alert].blurred : props.theme.colors.primary.hover, props.theme.colors.neutral.black, props.alert ? props.theme.colors[props.alert].default : props.theme.colors.primary.hover, props.alert ? props.theme.colors[props.alert].blurred : props.theme.colors.primary.disabled), props.theme.borderRadius.default, props.size && {
27
+ }[props.size] : '56px', !props.disabled && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &:hover {\n & > div {\n color: ", ";\n\n & > label {\n color: ", ";\n }\n\n & > fieldset {\n &:first-of-type {\n border-color: ", ";\n }\n }\n }\n }\n\n &:focus {\n & > div {\n color: ", ";\n\n & > svg {\n transform: rotate(180deg);\n }\n\n & > fieldset {\n &:first-of-type {\n border-color: ", ";\n }\n &:last-of-type {\n border-color: ", ";\n }\n }\n }\n }\n "])), props.theme.colors.neutral.black, props.theme.colors.neutral.neutral5, props.alert ? props.theme.colors[props.alert].blurred : props.theme.colors.primary.hover, props.theme.colors.neutral.black, props.alert ? props.theme.colors[props.alert].default : props.theme.colors.primary.hover, props.alert ? props.theme.colors[props.alert].blurred : props.theme.colors.primary.disabled), props.theme.borderRadius.default, props.variant === 'unstyled' ? '0' : props.size && {
28
28
  sm: '16px',
29
29
  md: '20px'
30
30
  }[props.size], props.theme.colors.neutral.neutral5, props.theme.transition.speed, props.alert && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background: ", "33;\n "])), props.theme.colors[props.alert].blurred), props.disabled && (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n background: ", ";\n cursor: default;\n "])), props.theme.colors.neutral.neutral1), props.theme.colors.neutral.neutral3, props.theme.transition.speed, props.filled && (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n left: 20px;\n top: -1px;\n font-size: 0.875rem;\n "]))), props.theme.colors.neutral.neutral5, props.theme.transition.speed, props.alert && !props.disabled ? props.theme.colors[props.alert].default : props.theme.colors.neutral.neutral2, props.theme.borderRadius.default, props.theme.transition.speed, props.theme.borderRadius.default, props.filled ? 'block' : 'none', props.disabled && (0, _react.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n color: ", ";\n "])), props.theme.colors.neutral.neutral3));
@@ -1,11 +1,12 @@
1
1
  export declare type SelectAlertType = 'success' | 'error' | 'warning' | 'informative' | 'critical' | 'success_secondary' | 'warning_secondary';
2
2
  export interface SelectOption {
3
3
  label: string;
4
- value: string;
4
+ value: string | number;
5
5
  }
6
6
  export declare type sizeSelect = 'sm' | 'md';
7
7
  export interface SelectProps {
8
8
  label?: string;
9
+ variant?: 'unstyled' | 'default';
9
10
  options: SelectOption[];
10
11
  helperText?: string;
11
12
  alert?: SelectAlertType;
@@ -14,6 +15,7 @@ export interface SelectProps {
14
15
  sizeSelect?: sizeSelect;
15
16
  }
16
17
  export interface SelectContainerProps {
18
+ variant?: 'unstyled' | 'default';
17
19
  alert?: SelectAlertType;
18
20
  filled: boolean;
19
21
  disabled: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe,GACvB,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,CAAC;AAExB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,oBAAY,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe,GACvB,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,CAAC;AAExB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,oBAAY,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACjC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB"}