@hexure/ui 1.6.7 → 1.6.8

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 (14) hide show
  1. package/dist/cjs/index.js +30 -15
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/types/components/DatePicker/DatePicker.d.ts +5 -0
  4. package/dist/cjs/types/components/Input/Input.d.ts +4 -0
  5. package/dist/cjs/types/components/MultiSelect/MultiSelect.d.ts +4 -0
  6. package/dist/cjs/types/components/Select/Select.d.ts +2 -4
  7. package/dist/esm/index.js +30 -15
  8. package/dist/esm/index.js.map +1 -1
  9. package/dist/esm/types/components/DatePicker/DatePicker.d.ts +5 -0
  10. package/dist/esm/types/components/Input/Input.d.ts +4 -0
  11. package/dist/esm/types/components/MultiSelect/MultiSelect.d.ts +4 -0
  12. package/dist/esm/types/components/Select/Select.d.ts +2 -4
  13. package/dist/index.d.ts +19 -4
  14. package/package.json +1 -1
package/dist/cjs/types/components/DatePicker/DatePicker.d.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  import { FC } from 'react';
2
2
  import { AccessibleProps } from '../../utils/Accessibility';
3
+ export interface styleProps {
4
+ width?: number | string;
5
+ }
3
6
  export interface DateProps extends AccessibleProps {
4
7
  /** If it's value is true then select is disabled. */
5
8
  readOnly?: boolean;
@@ -13,6 +16,8 @@ export interface DateProps extends AccessibleProps {
13
16
  date?: string;
14
17
  /** It is used to get selected value */
15
18
  onChange: (e: any) => void;
19
+ /** Override default styles */
20
+ style?: styleProps;
16
21
  }
17
22
  declare const DatePicker: FC<DateProps>;
18
23
  export default DatePicker;
package/dist/cjs/types/components/Input/Input.d.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  import { FC } from 'react';
2
2
  import { AccessibleProps } from '../../utils/Accessibility';
3
+ export interface styleProps {
4
+ width?: number | string;
5
+ }
3
6
  export interface InputProps extends AccessibleProps {
4
7
  format?: 'phone' | 'currency' | 'currency_decimal' | 'ssn';
5
8
  height?: string;
@@ -14,6 +17,7 @@ export interface InputProps extends AccessibleProps {
14
17
  placeholder?: string;
15
18
  readOnly?: boolean;
16
19
  step?: number;
20
+ style?: styleProps;
17
21
  type?: 'date' | 'email' | 'number' | 'password' | 'tel' | 'text' | 'url' | 'textarea';
18
22
  value?: string;
19
23
  }
package/dist/cjs/types/components/MultiSelect/MultiSelect.d.ts CHANGED
@@ -4,6 +4,9 @@ export interface OptionProps {
4
4
  label?: string;
5
5
  value: string | number;
6
6
  }
7
+ export interface styleProps {
8
+ width?: number | string;
9
+ }
7
10
  export interface MultiSelectProps extends AccessibleProps {
8
11
  readOnly?: boolean;
9
12
  displayCount?: number;
@@ -12,6 +15,7 @@ export interface MultiSelectProps extends AccessibleProps {
12
15
  options?: OptionProps[];
13
16
  selected: (string | number)[];
14
17
  showSelectAll?: boolean;
18
+ style?: styleProps;
15
19
  }
16
20
  declare const MultiSelect: FC<MultiSelectProps>;
17
21
  export default MultiSelect;
package/dist/cjs/types/components/Select/Select.d.ts CHANGED
@@ -13,6 +13,7 @@ export interface OptionGroupProps {
13
13
  export interface styleProps {
14
14
  borderRadius?: string;
15
15
  flexGrow?: number;
16
+ width?: number | string;
16
17
  }
17
18
  export interface SelectProps extends AccessibleProps {
18
19
  /** It is used to give options from which value is selected. */
@@ -26,10 +27,7 @@ export interface SelectProps extends AccessibleProps {
26
27
  /** It is used to read value for selected option. */
27
28
  value: string;
28
29
  /** It is used to read value for border rasius & flex grow */
29
- style?: {
30
- borderRadius?: string;
31
- flexGrow?: number;
32
- };
30
+ style?: styleProps;
33
31
  /** It is used to change value when an option is clicked. */
34
32
  onChange: (e: any) => void;
35
33
  }
package/dist/esm/index.js CHANGED
@@ -2591,12 +2591,15 @@ var dayjs_min = {exports: {}};
2591
2591
  var dayjs_minExports = dayjs_min.exports;
2592
2592
  var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
2593
2593
 
2594
- var Wrapper$b = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n border-radius: 4px;\n height: 40px;\n background-color: ", ";\n position: relative;\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n border-radius: ", ";\n flex-grow: ", ";\n box-sizing: border-box;\n padding: 10px 0px;\n display: flex;\n align-items: center;\n"], ["\n border-radius: 4px;\n height: 40px;\n background-color: ", ";\n position: relative;\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n border-radius: ", ";\n flex-grow: ", ";\n box-sizing: border-box;\n padding: 10px 0px;\n display: flex;\n align-items: center;\n"])), function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); }, function (props) { return (props.$invalid ? Colors.RED.Hex : '#cccccc'); }, function (_a) {
2594
+ var Wrapper$b = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n border-radius: 4px;\n height: 40px;\n background-color: ", ";\n position: relative;\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n border-radius: ", ";\n flex-grow: ", ";\n box-sizing: border-box;\n padding: 10px 0px;\n display: flex;\n align-items: center;\n width: ", ";\n"], ["\n border-radius: 4px;\n height: 40px;\n background-color: ", ";\n position: relative;\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n border-radius: ", ";\n flex-grow: ", ";\n box-sizing: border-box;\n padding: 10px 0px;\n display: flex;\n align-items: center;\n width: ", ";\n"])), function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); }, function (props) { return (props.$invalid ? Colors.RED.Hex : '#cccccc'); }, function (_a) {
2595
2595
  var $style = _a.$style;
2596
2596
  return ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px';
2597
2597
  }, function (_a) {
2598
2598
  var $style = _a.$style;
2599
2599
  return ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0;
2600
+ }, function (_a) {
2601
+ var $style = _a.$style;
2602
+ return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
2600
2603
  });
2601
2604
  var Trigger$1 = styled.select(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n appearance: none;\n box-shadow: none;\n outline: none;\n border: none;\n color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 2.9em;\n background-color: transparent;\n background-image: none;\n cursor: pointer;\n width: 100%;\n box-sizing: border-box;\n padding: 0px 30px 0px 10px;\n box-sizing: border-box;\n position: relative;\n z-index: 2;\n"], ["\n appearance: none;\n box-shadow: none;\n outline: none;\n border: none;\n color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 2.9em;\n background-color: transparent;\n background-image: none;\n cursor: pointer;\n width: 100%;\n box-sizing: border-box;\n padding: 0px 30px 0px 10px;\n box-sizing: border-box;\n position: relative;\n z-index: 2;\n"])), Colors.BLACK.Hex, FontSizes.DEFAULT, FontStyles.DEFAULT);
2602
2605
  var IconWrapper$2 = styled(Icon)(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n position: absolute;\n right: 9px;\n z-index: 1;\n"], ["\n position: absolute;\n right: 9px;\n z-index: 1;\n"])));
@@ -2619,10 +2622,13 @@ var Select = function (_a) {
2619
2622
  };
2620
2623
  var templateObject_1$g, templateObject_2$e, templateObject_3$c;
2621
2624
 
2622
- var DatePickerWrapper = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
2623
- var Middle = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n margin: 0px -1px;\n"], ["\n margin: 0px -1px;\n"])));
2625
+ var DatePickerWrapper = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n width: ", ";\n"], ["\n display: flex;\n width: ", ";\n"])), function (_a) {
2626
+ var $style = _a.$style;
2627
+ return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
2628
+ });
2629
+ var Middle = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n margin: 0px -1px;\n flex-grow: 1;\n"], ["\n margin: 0px -1px;\n flex-grow: 1;\n"])));
2624
2630
  var DatePicker = function (_a) {
2625
- var _b = _a.readOnly, readOnly = _b === void 0 ? false : _b, _c = _a.invalid, invalid = _c === void 0 ? false : _c, _d = _a.maxDate, maxDate = _d === void 0 ? null : _d, _e = _a.minDate, minDate = _e === void 0 ? null : _e, date = _a.date, onChange = _a.onChange;
2631
+ var _b = _a.readOnly, readOnly = _b === void 0 ? false : _b, _c = _a.invalid, invalid = _c === void 0 ? false : _c, _d = _a.maxDate, maxDate = _d === void 0 ? null : _d, _e = _a.minDate, minDate = _e === void 0 ? null : _e, date = _a.date, onChange = _a.onChange, style = _a.style;
2626
2632
  var dMaxDate = maxDate ? dayjs(maxDate) : dayjs();
2627
2633
  var dMinDate = minDate ? dayjs(minDate) : dMaxDate.subtract(100, 'year');
2628
2634
  var _f = useState(dayjs(date)), dDate = _f[0], setDate = _f[1];
@@ -2674,11 +2680,11 @@ var DatePicker = function (_a) {
2674
2680
  setDate(new_date);
2675
2681
  };
2676
2682
  return (React.createElement(React.Fragment, null,
2677
- React.createElement(DatePickerWrapper, null,
2678
- React.createElement(Select, { invalid: invalid, onChange: handleMonthChange, options: months, readOnly: readOnly, style: { borderRadius: '4px 0px 0px 4px' }, value: dDate.format('M') }),
2683
+ React.createElement(DatePickerWrapper, { "$style": style },
2684
+ React.createElement(Select, { invalid: invalid, onChange: handleMonthChange, options: months, readOnly: readOnly, style: { borderRadius: '4px 0px 0px 4px', flexGrow: 3 }, value: dDate.format('M') }),
2679
2685
  React.createElement(Middle, null,
2680
2686
  React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, readOnly: readOnly, style: { borderRadius: '0px' }, value: dDate.format('D') })),
2681
- React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px' }, value: dDate.format('YYYY') }))));
2687
+ React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: dDate.format('YYYY') }))));
2682
2688
  };
2683
2689
  var templateObject_1$f, templateObject_2$d;
2684
2690
 
@@ -2884,10 +2890,16 @@ var formatAsSsn = function (number) {
2884
2890
 
2885
2891
  var StyledInput = styled.input(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n background-color: ", ";\n border-radius: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1.28em;\n color: ", ";\n position: relative;\n height: auto;\n padding: 10px;\n opacity: ", ";\n box-shadow: none;\n outline: none;\n margin: 0px;\n text-indent: 0px;\n --webkit-appearance: none;\n box-sizing: border-box;\n display: block;\n width: 100%;\n &:focus {\n border-color: ", ";\n }\n"], ["\n background-color: ", ";\n border-radius: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1.28em;\n color: ", ";\n position: relative;\n height: auto;\n padding: 10px;\n opacity: ", ";\n box-shadow: none;\n outline: none;\n margin: 0px;\n text-indent: 0px;\n --webkit-appearance: none;\n box-sizing: border-box;\n display: block;\n width: 100%;\n &:focus {\n border-color: ", ";\n }\n"])), function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); }, function (props) { return (props.$suffix ? '4px 0px 0px 4px' : '4px'); }, function (props) { return (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc'); }, FontSizes.DEFAULT, FontStyles.DEFAULT, function (props) { return (props.$invalid && !props.$readOnly ? Colors.RED.Hex : Colors.BLACK.Hex); }, function (props) { return (props.$readOnly ? 0.6 : 1); }, function (props) { return (props.$readOnly ? '#cccccc' : Colors.PRIMARY.Hex); });
2886
2892
  var StyledSuffix = styled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px;\n height: auto;\n background: #f5f5f5;\n border-width: 1px 1px 1px 0px;\n border-style: solid;\n border-color: #cccccc;\n border-radius: 0px 4px 4px 0px;\n font-family: ", ";\n font-style: normal;\n font-weight: 400;\n font-size: ", ";\n color: Colors.BLACK.Hex;\n"], ["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px;\n height: auto;\n background: #f5f5f5;\n border-width: 1px 1px 1px 0px;\n border-style: solid;\n border-color: #cccccc;\n border-radius: 0px 4px 4px 0px;\n font-family: ", ";\n font-style: normal;\n font-weight: 400;\n font-size: ", ";\n color: Colors.BLACK.Hex;\n"])), FontStyles.DEFAULT, FontSizes.DEFAULT);
2887
- var StyledWrapper = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
2888
- var StyledTextarea = styled.textarea(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1.6em;\n color: ", ";\n position: relative;\n height: ", ";\n padding: 10px;\n opacity: ", ";\n box-shadow: none;\n outline: none;\n padding: 10px,\n margin: 0px,\n text-indent: 0px,\n --webkit-appearance: none;\n box-sizing: border-box;\n display: block;\n width: 100%;\n &:focus {\n border-color: ", ";\n }\n"], ["\n background-color: ", ";\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1.6em;\n color: ", ";\n position: relative;\n height: ", ";\n padding: 10px;\n opacity: ", ";\n box-shadow: none;\n outline: none;\n padding: 10px,\n margin: 0px,\n text-indent: 0px,\n --webkit-appearance: none;\n box-sizing: border-box;\n display: block;\n width: 100%;\n &:focus {\n border-color: ", ";\n }\n"])), function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); }, function (props) { return (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc'); }, FontSizes.DEFAULT, FontStyles.DEFAULT, function (props) { return (props.$invalid && !props.$readOnly ? Colors.RED.Hex : Colors.BLACK.Hex); }, function (props) { return props.$height || '40px'; }, function (props) { return (props.$readOnly ? 0.6 : 1); }, function (props) { return (props.$readOnly ? '#cccccc' : Colors.PRIMARY.Hex); });
2893
+ var StyledWrapper = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n width: ", ";\n"], ["\n display: flex;\n width: ", ";\n"])), function (_a) {
2894
+ var $style = _a.$style;
2895
+ return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
2896
+ });
2897
+ var StyledTextarea = styled.textarea(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1.6em;\n color: ", ";\n position: relative;\n height: ", ";\n padding: 10px;\n opacity: ", ";\n box-shadow: none;\n outline: none;\n padding: 10px,\n margin: 0px,\n text-indent: 0px,\n --webkit-appearance: none;\n box-sizing: border-box;\n display: block;\n width: ", ";\n &:focus {\n border-color: ", ";\n }\n"], ["\n background-color: ", ";\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1.6em;\n color: ", ";\n position: relative;\n height: ", ";\n padding: 10px;\n opacity: ", ";\n box-shadow: none;\n outline: none;\n padding: 10px,\n margin: 0px,\n text-indent: 0px,\n --webkit-appearance: none;\n box-sizing: border-box;\n display: block;\n width: ", ";\n &:focus {\n border-color: ", ";\n }\n"])), function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); }, function (props) { return (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc'); }, FontSizes.DEFAULT, FontStyles.DEFAULT, function (props) { return (props.$invalid && !props.$readOnly ? Colors.RED.Hex : Colors.BLACK.Hex); }, function (props) { return props.$height || '40px'; }, function (props) { return (props.$readOnly ? 0.6 : 1); }, function (_a) {
2898
+ var $style = _a.$style;
2899
+ return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
2900
+ }, function (props) { return (props.$readOnly ? '#cccccc' : Colors.PRIMARY.Hex); });
2889
2901
  var Input$1 = function (_a) {
2890
- var format = _a.format, suffix = _a.suffix, height = _a.height, invalid = _a.invalid, max = _a.max, maxLength = _a.maxLength, min = _a.min, onBlur = _a.onBlur, onChange = _a.onChange, onKeyDown = _a.onKeyDown, placeholder = _a.placeholder, readOnly = _a.readOnly, step = _a.step, _b = _a.type, type = _b === void 0 ? 'text' : _b, _c = _a.value, value = _c === void 0 ? '' : _c, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "max", "maxLength", "min", "onBlur", "onChange", "onKeyDown", "placeholder", "readOnly", "step", "type", "value"]);
2902
+ var format = _a.format, suffix = _a.suffix, height = _a.height, invalid = _a.invalid, max = _a.max, maxLength = _a.maxLength, min = _a.min, onBlur = _a.onBlur, onChange = _a.onChange, onKeyDown = _a.onKeyDown, placeholder = _a.placeholder, readOnly = _a.readOnly, step = _a.step, style = _a.style, _b = _a.type, type = _b === void 0 ? 'text' : _b, _c = _a.value, value = _c === void 0 ? '' : _c, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "max", "maxLength", "min", "onBlur", "onChange", "onKeyDown", "placeholder", "readOnly", "step", "style", "type", "value"]);
2891
2903
  var handleInputChange = function (e) {
2892
2904
  if (format === 'currency' || format === 'currency_decimal') {
2893
2905
  e.target.value = e.target.value.replace(/[^0-9.]/g, '');
@@ -2926,7 +2938,7 @@ var Input$1 = function (_a) {
2926
2938
  if (format === 'ssn' && type !== 'password') {
2927
2939
  formatted_value = formatAsSsn(value);
2928
2940
  }
2929
- return type === 'textarea' ? (React.createElement(StyledTextarea, __assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, maxLength: maxLength, onBlur: onBlur, onChange: handleTextareaChange, placeholder: placeholder, value: value }, accessibleProps))) : (React.createElement(StyledWrapper, null,
2941
+ return type === 'textarea' ? (React.createElement(StyledTextarea, __assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, "$style": style, maxLength: maxLength, onBlur: onBlur, onChange: handleTextareaChange, placeholder: placeholder, value: value }, accessibleProps))) : (React.createElement(StyledWrapper, { "$style": style },
2930
2942
  React.createElement(StyledInput, __assign({ "$invalid": invalid, "$readOnly": readOnly, "$suffix": suffix, max: max, maxLength: maxLength, min: min, onBlur: onBlur, onChange: handleInputChange, onKeyDown: onKeyDown, placeholder: placeholder, step: step, type: type, value: formatted_value }, accessibleProps)),
2931
2943
  suffix && React.createElement(StyledSuffix, null, suffix)));
2932
2944
  };
@@ -3034,8 +3046,11 @@ var MoreMenu = function (_a) {
3034
3046
  };
3035
3047
  var templateObject_1$8, templateObject_2$7, templateObject_3$6;
3036
3048
 
3037
- var Wrapper$5 = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
3038
- var Trigger = styled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: ", ";\n height: 40px;\n padding: 0 10px;\n position: relative;\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n background-image: none;\n display: flex;\n align-items: center;\n justify-content: space-between;\n z-index: 1;\n"], ["\n box-sizing: border-box;\n border-radius: ", ";\n height: 40px;\n padding: 0 10px;\n position: relative;\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n background-image: none;\n display: flex;\n align-items: center;\n justify-content: space-between;\n z-index: 1;\n"])), function (props) { return (props.$showOptions ? '4px 4px 0px 0px' : '4px'); }, function (props) {
3049
+ var Wrapper$5 = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n position: relative;\n width: ", ";\n"], ["\n position: relative;\n width: ", ";\n"])), function (_a) {
3050
+ var $style = _a.$style;
3051
+ return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
3052
+ });
3053
+ var Trigger = styled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: ", ";\n height: 40px;\n padding: 0 10px;\n position: relative;\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n background-image: none;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: space-between;\n z-index: 1;\n"], ["\n box-sizing: border-box;\n border-radius: ", ";\n height: 40px;\n padding: 0 10px;\n position: relative;\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n background-image: none;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: space-between;\n z-index: 1;\n"])), function (props) { return (props.$showOptions ? '4px 4px 0px 0px' : '4px'); }, function (props) {
3039
3054
  if (props.$invalid) {
3040
3055
  return Colors.RED.Hex;
3041
3056
  }
@@ -3050,10 +3065,10 @@ var Value = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplat
3050
3065
  var Options = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n background: #fff;\n box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);\n border-color: ", ";\n border-radius: 0px 0px 4px 4px;\n border-style: solid;\n border-top: none;\n border-width: 1px;\n left: 0;\n position: absolute;\n right: 0;\n z-index: 10;\n max-height: 220px;\n overflow: auto;\n"], ["\n background: #fff;\n box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);\n border-color: ", ";\n border-radius: 0px 0px 4px 4px;\n border-style: solid;\n border-top: none;\n border-width: 1px;\n left: 0;\n position: absolute;\n right: 0;\n z-index: 10;\n max-height: 220px;\n overflow: auto;\n"])), Colors.PRIMARY.Hex);
3051
3066
  var Scrim = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n bottom: 0;\n left: 0;\n position: fixed;\n right: 0;\n top: 0;\n z-index: 9;\n"], ["\n bottom: 0;\n left: 0;\n position: fixed;\n right: 0;\n top: 0;\n z-index: 9;\n"])));
3052
3067
  var MultiSelect = function (_a) {
3053
- var readOnly = _a.readOnly, _b = _a.displayCount, displayCount = _b === void 0 ? 3 : _b, invalid = _a.invalid, onChange = _a.onChange, _c = _a.options, options = _c === void 0 ? [] : _c, _d = _a.selected, selected = _d === void 0 ? [] : _d, showSelectAll = _a.showSelectAll, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll"]);
3068
+ var readOnly = _a.readOnly, _b = _a.displayCount, displayCount = _b === void 0 ? 3 : _b, invalid = _a.invalid, onChange = _a.onChange, _c = _a.options, options = _c === void 0 ? [] : _c, _d = _a.selected, selected = _d === void 0 ? [] : _d, showSelectAll = _a.showSelectAll, style = _a.style, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll", "style"]);
3054
3069
  var _e = useState(false), showOptions = _e[0], setShowOptions = _e[1];
3055
3070
  var selected_options = options.filter(function (o) { return selected.includes(o.value); });
3056
- return (React.createElement(Wrapper$5, null,
3071
+ return (React.createElement(Wrapper$5, { "$style": style },
3057
3072
  React.createElement(Trigger, __assign({ "$invalid": invalid, "$readOnly": readOnly, "$showOptions": showOptions, onClick: readOnly ? undefined : setShowOptions.bind(null, !showOptions) }, accessibleProps),
3058
3073
  React.createElement(Value, null, selected.length > 0 && selected.length <= displayCount
3059
3074
  ? selected_options.map(function (o) { return o.label || o.value; }).join(', ')