@hexure/ui 1.6.7 → 1.6.9

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 (16) hide show
  1. package/dist/cjs/index.js +48 -24
  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/Modal/Modal.d.ts +8 -1
  6. package/dist/cjs/types/components/MultiSelect/MultiSelect.d.ts +4 -0
  7. package/dist/cjs/types/components/Select/Select.d.ts +2 -4
  8. package/dist/esm/index.js +48 -24
  9. package/dist/esm/index.js.map +1 -1
  10. package/dist/esm/types/components/DatePicker/DatePicker.d.ts +5 -0
  11. package/dist/esm/types/components/Input/Input.d.ts +4 -0
  12. package/dist/esm/types/components/Modal/Modal.d.ts +8 -1
  13. package/dist/esm/types/components/MultiSelect/MultiSelect.d.ts +4 -0
  14. package/dist/esm/types/components/Select/Select.d.ts +2 -4
  15. package/dist/index.d.ts +27 -5
  16. 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/Modal/Modal.d.ts CHANGED
@@ -1,12 +1,17 @@
1
1
  import { FC, ReactNode } from 'react';
2
2
  import { AccessibleProps } from '../../utils/Accessibility';
3
3
  interface ButtonProps {
4
- disabled: boolean;
4
+ disabled?: boolean;
5
5
  children: string;
6
6
  icon?: string;
7
7
  onClick: (e?: any) => void;
8
8
  tabIndex?: number;
9
9
  }
10
+ interface StepProps {
11
+ label: string;
12
+ complete?: boolean;
13
+ active?: boolean;
14
+ }
10
15
  export interface ModalProps extends AccessibleProps {
11
16
  /** Defines a button to be displayed on the far right of the bottom button bar */
12
17
  primaryButton?: ButtonProps;
@@ -22,6 +27,8 @@ export interface ModalProps extends AccessibleProps {
22
27
  title: string;
23
28
  /** It is used to close modal. */
24
29
  onClose: (e?: any) => void;
30
+ /** Display steps at the top of the modal */
31
+ steps?: StepProps[];
25
32
  }
26
33
  declare const Modal: FC<ModalProps>;
27
34
  export default Modal;
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
@@ -2205,7 +2205,7 @@ var Selected = styled.span(templateObject_4$8 || (templateObject_4$8 = __makeTem
2205
2205
  var Clear = styled.span(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n font-family: ", ";\n color: ", ";\n line-height: 1;\n cursor: pointer;\n padding-left: 10px;\n margin-left: 10px;\n border-left: 1px solid #ccc;\n"], ["\n font-size: 14px;\n font-weight: 400;\n font-family: ", ";\n color: ", ";\n line-height: 1;\n cursor: pointer;\n padding-left: 10px;\n margin-left: 10px;\n border-left: 1px solid #ccc;\n"])), FontStyles.DEFAULT, Colors.PRIMARY.Hex);
2206
2206
  var Actions = styled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n column-gap: 10px;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n column-gap: 10px;\n"])));
2207
2207
  var Error$1 = styled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n background: rgba(", ", 0.1);\n border-radius: 4px;\n padding: 6px 8px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n margin-left: 30px;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n background: rgba(", ", 0.1);\n border-radius: 4px;\n padding: 6px 8px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n margin-left: 30px;\n"])), Colors.RED.Rgb);
2208
- var ErrorMsg = styled.span(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 500;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n margin-left: 8px;\n"], ["\n font-size: 14px;\n font-weight: 500;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n margin-left: 8px;\n"])), FontStyles.DEFAULT, Colors.RED.Hex);
2208
+ var ErrorMsg = styled.span(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 500;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n margin-left: 8px;\n"], ["\n font-size: 14px;\n font-weight: 500;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n margin-left: 8px;\n"])), FontStyles.DEFAULT, Colors.RED.Hex);
2209
2209
  var BulkActionBar = function (_a) {
2210
2210
  var _b = _a.actions, actions = _b === void 0 ? [] : _b, errorMsg = _a.errorMsg, onClear = _a.onClear, _c = _a.selectedCount, selectedCount = _c === void 0 ? 0 : _c, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount"]);
2211
2211
  return (React.createElement(Wrapper$d, __assign({}, accessibleProps),
@@ -2220,7 +2220,7 @@ var BulkActionBar = function (_a) {
2220
2220
  React.createElement(Icon, { color: Colors.RED.Hex, path: mdiInformationOutline, size: '20px' }),
2221
2221
  React.createElement(ErrorMsg, null, errorMsg))) : null));
2222
2222
  };
2223
- var templateObject_1$j, templateObject_2$h, templateObject_3$e, templateObject_4$8, templateObject_5$6, templateObject_6$4, templateObject_7$2, templateObject_8$1;
2223
+ var templateObject_1$j, templateObject_2$h, templateObject_3$e, templateObject_4$8, templateObject_5$6, templateObject_6$4, templateObject_7$2, templateObject_8$2;
2224
2224
 
2225
2225
  var Wrapper$c = styled.label(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n padding: 4px 0;\n cursor: ", ";\n display: flex;\n align-items: flex-start;\n font-size: ", ";\n line-height: 1.6em;\n box-sizing: border-box;\n"], ["\n padding: 4px 0;\n cursor: ", ";\n display: flex;\n align-items: flex-start;\n font-size: ", ";\n line-height: 1.6em;\n box-sizing: border-box;\n"])), function (props) { return (props.$disabled ? 'default' : 'pointer'); }, FontSizes.DEFAULT);
2226
2226
  var Input$2 = styled.input(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n font-size: 20px;\n margin: 5px 0px 0px 0px;\n line-height: 1.1em;\n box-sizing: border-box;\n"], ["\n font-size: 20px;\n margin: 5px 0px 0px 0px;\n line-height: 1.1em;\n box-sizing: border-box;\n"])));
@@ -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
 
@@ -2778,7 +2784,7 @@ var CopyWrapper = styled.div(templateObject_5$3 || (templateObject_5$3 = __makeT
2778
2784
  });
2779
2785
  var IconWrapper$1 = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n cursor: pointer;\n"], ["\n cursor: pointer;\n"])));
2780
2786
  var ProgressBar = styled.div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n width: 100px;\n height: 14px;\n border-radius: 4px;\n background: #f5f5f5;\n overflow-x: hidden;\n"], ["\n width: 100px;\n height: 14px;\n border-radius: 4px;\n background: #f5f5f5;\n overflow-x: hidden;\n"])));
2781
- var Progress = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: ", ";\n height: 100%;\n border-radius: 4px 0px 0px 4px;\n background: ", ";\n"], ["\n width: ", ";\n height: 100%;\n border-radius: 4px 0px 0px 4px;\n background: ", ";\n"])), function (_a) {
2787
+ var Progress = styled.div(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n width: ", ";\n height: 100%;\n border-radius: 4px 0px 0px 4px;\n background: ", ";\n"], ["\n width: ", ";\n height: 100%;\n border-radius: 4px 0px 0px 4px;\n background: ", ";\n"])), function (_a) {
2782
2788
  var $width = _a.$width;
2783
2789
  return "".concat($width, "%");
2784
2790
  }, Colors.GREEN.Hex);
@@ -2853,7 +2859,7 @@ var FileUpload = function (_a) {
2853
2859
  React.createElement(Copy, { align: 'center', children: 'Drag & drop files here or click to choose', type: 'bold' }),
2854
2860
  React.createElement(Copy, { align: 'center', children: "".concat(maxFileSize, " MB max file size"), color: 'GRAY' }))))));
2855
2861
  };
2856
- var templateObject_1$c, templateObject_2$a, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7$1, templateObject_8;
2862
+ var templateObject_1$c, templateObject_2$a, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7$1, templateObject_8$1;
2857
2863
 
2858
2864
  var formatAsPhone = function (number) {
2859
2865
  var formatted_value = "".concat(number).replace(/[^0-9.]/g, '');
@@ -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
  };
@@ -2983,13 +2995,17 @@ var Logo = function (_a) {
2983
2995
 
2984
2996
  var Wrapper$7 = styled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9999;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9999;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
2985
2997
  var Container$1 = styled.dialog(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n max-width: ", ";\n width: auto;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n outline: none;\n border: none;\n position: relative;\n padding: 0px;\n box-sizing: border-box;\n"], ["\n max-width: ", ";\n width: auto;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n outline: none;\n border: none;\n position: relative;\n padding: 0px;\n box-sizing: border-box;\n"])), function (props) { return props.$maxWidth || '90vw'; });
2986
- var Header$1 = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n position: sticky;\n top: 0;\n padding: 20px;\n border-bottom: 1px solid #e5e5e5;\n display: flex;\n align-items: center;\n background: #ffffff;\n box-sizing: border-box;\n"], ["\n position: sticky;\n top: 0;\n padding: 20px;\n border-bottom: 1px solid #e5e5e5;\n display: flex;\n align-items: center;\n background: #ffffff;\n box-sizing: border-box;\n"])));
2998
+ var Header$1 = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n position: sticky;\n top: 0;\n padding: 20px;\n border-bottom: 1px solid #e7e6e6;\n display: flex;\n align-items: center;\n background: #ffffff;\n box-sizing: border-box;\n"], ["\n position: sticky;\n top: 0;\n padding: 20px;\n border-bottom: 1px solid #e7e6e6;\n display: flex;\n align-items: center;\n background: #ffffff;\n box-sizing: border-box;\n"])));
2987
2999
  var Close = styled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n margin-left: auto;\n display: flex;\n align-items: center;\n padding-left: 20px;\n cursor: pointer;\n"], ["\n margin-left: auto;\n display: flex;\n align-items: center;\n padding-left: 20px;\n cursor: pointer;\n"])));
2988
3000
  var CloseMsg = styled.span(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n"], ["\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n"])), FontSizes.SMALL, FontStyles.DEFAULT, Colors.MEDIUM_GRAY.Hex);
2989
- var ContentWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n overflow-x: hidden;\n overflow-y: auto;\n background: #ffffff;\n max-height: calc(100vh - 260px);\n box-sizing: border-box;\n"], ["\n overflow-x: hidden;\n overflow-y: auto;\n background: #ffffff;\n max-height: calc(100vh - 260px);\n box-sizing: border-box;\n"])));
2990
- var ButtonBar = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: sticky;\n bottom: 0;\n background: #ffffff;\n padding: 20px;\n border-top: 1px solid #e5e5e5;\n display: flex;\n align-items: center;\n justify-self: flex-end;\n box-sizing: border-box;\n"], ["\n position: sticky;\n bottom: 0;\n background: #ffffff;\n padding: 20px;\n border-top: 1px solid #e5e5e5;\n display: flex;\n align-items: center;\n justify-self: flex-end;\n box-sizing: border-box;\n"])));
3001
+ var Steps = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding: 20px;\n border-bottom: 1px solid #e7e6e6;\n background: #f5f5f5;\n display: flex;\n gap: 30px;\n align-items: center;\n"], ["\n padding: 20px;\n border-bottom: 1px solid #e7e6e6;\n background: #f5f5f5;\n display: flex;\n gap: 30px;\n align-items: center;\n"])));
3002
+ var Step = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n"], ["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
3003
+ var StepIndicator = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 30px;\n height: 30px;\n border-radius: 15px;\n background: ", ";\n color: ", ";\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n"], ["\n width: 30px;\n height: 30px;\n border-radius: 15px;\n background: ", ";\n color: ", ";\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n"])), function (props) { return (props.$active ? Colors.PRIMARY.Hex : Colors.LIGHT_GRAY.Hex); }, function (props) { return (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex); });
3004
+ var StepLabel = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n color: #000;\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 1;\n"], ["\n color: #000;\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 1;\n"])));
3005
+ var ContentWrapper = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n overflow-x: hidden;\n overflow-y: auto;\n background: #ffffff;\n max-height: calc(100vh - 260px);\n box-sizing: border-box;\n"], ["\n overflow-x: hidden;\n overflow-y: auto;\n background: #ffffff;\n max-height: calc(100vh - 260px);\n box-sizing: border-box;\n"])));
3006
+ var ButtonBar = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n position: sticky;\n bottom: 0;\n background: #ffffff;\n padding: 20px;\n border-top: 1px solid #e7e6e6;\n display: flex;\n align-items: center;\n justify-self: flex-end;\n box-sizing: border-box;\n"], ["\n position: sticky;\n bottom: 0;\n background: #ffffff;\n padding: 20px;\n border-top: 1px solid #e7e6e6;\n display: flex;\n align-items: center;\n justify-self: flex-end;\n box-sizing: border-box;\n"])));
2991
3007
  var Modal = function (_a) {
2992
- var children = _a.children, title = _a.title, onClose = _a.onClose, maxWidth = _a.maxWidth, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "primaryButton", "secondaryButton", "tertiaryButton"]);
3008
+ var children = _a.children, title = _a.title, onClose = _a.onClose, maxWidth = _a.maxWidth, steps = _a.steps, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "steps", "primaryButton", "secondaryButton", "tertiaryButton"]);
2993
3009
  useEffect(function () {
2994
3010
  document.onkeydown = function (e) {
2995
3011
  if (e.key === 'Escape') {
@@ -3007,6 +3023,11 @@ var Modal = function (_a) {
3007
3023
  React.createElement(Close, { onClick: onClose },
3008
3024
  React.createElement(CloseMsg, null, "(Esc)"),
3009
3025
  React.createElement(Icon, { color: Colors.BLACK.Hex, path: mdiClose, size: '24px' }))),
3026
+ steps ? (React.createElement(Steps, null, steps.map(function (step, i) {
3027
+ return (React.createElement(Step, { key: i },
3028
+ step.complete ? (React.createElement(Icon, { color: Colors.PRIMARY.Hex, path: mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
3029
+ React.createElement(StepLabel, null, step.label)));
3030
+ }))) : null,
3010
3031
  React.createElement(ContentWrapper, null, children),
3011
3032
  primaryButton || secondaryButton || tertiaryButton ? (React.createElement(ButtonBar, null,
3012
3033
  tertiaryButton ? React.createElement(Button, __assign({}, tertiaryButton, { format: 'secondary' })) : null,
@@ -3019,7 +3040,7 @@ var Modal = function (_a) {
3019
3040
  secondaryButton ? React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary' })) : null,
3020
3041
  primaryButton ? (React.createElement(Button, __assign({}, primaryButton, { format: 'primary', margin: '0px 0px 0px 10px' }))) : null)) : null)) : null)));
3021
3042
  };
3022
- var templateObject_1$9, templateObject_2$8, templateObject_3$7, templateObject_4$3, templateObject_5$2, templateObject_6, templateObject_7;
3043
+ var templateObject_1$9, templateObject_2$8, templateObject_3$7, templateObject_4$3, templateObject_5$2, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
3023
3044
 
3024
3045
  var Wrapper$6 = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n background: #fff;\n border-radius: 8px;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n display: flex;\n flex-direction: column;\n gap: 4px;\n max-height: ", ";\n padding: 10px;\n width: 200px;\n"], ["\n background: #fff;\n border-radius: 8px;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n display: flex;\n flex-direction: column;\n gap: 4px;\n max-height: ", ";\n padding: 10px;\n width: 200px;\n"])), function (props) { return props.$maxHeight || '312px'; });
3025
3046
  var MenuItem = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n align-items: center;\n border-radius: 8px;\n border: 1px solid transparent;\n display: flex;\n gap: 8px;\n height: 38px;\n padding: 8px;\n &:hover {\n background: rgba(1, 147, 215, 0.1);\n cursor: pointer;\n }\n"], ["\n align-items: center;\n border-radius: 8px;\n border: 1px solid transparent;\n display: flex;\n gap: 8px;\n height: 38px;\n padding: 8px;\n &:hover {\n background: rgba(1, 147, 215, 0.1);\n cursor: pointer;\n }\n"])));
@@ -3034,8 +3055,11 @@ var MoreMenu = function (_a) {
3034
3055
  };
3035
3056
  var templateObject_1$8, templateObject_2$7, templateObject_3$6;
3036
3057
 
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) {
3058
+ 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) {
3059
+ var $style = _a.$style;
3060
+ return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
3061
+ });
3062
+ 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
3063
  if (props.$invalid) {
3040
3064
  return Colors.RED.Hex;
3041
3065
  }
@@ -3050,10 +3074,10 @@ var Value = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplat
3050
3074
  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
3075
  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
3076
  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"]);
3077
+ 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
3078
  var _e = useState(false), showOptions = _e[0], setShowOptions = _e[1];
3055
3079
  var selected_options = options.filter(function (o) { return selected.includes(o.value); });
3056
- return (React.createElement(Wrapper$5, null,
3080
+ return (React.createElement(Wrapper$5, { "$style": style },
3057
3081
  React.createElement(Trigger, __assign({ "$invalid": invalid, "$readOnly": readOnly, "$showOptions": showOptions, onClick: readOnly ? undefined : setShowOptions.bind(null, !showOptions) }, accessibleProps),
3058
3082
  React.createElement(Value, null, selected.length > 0 && selected.length <= displayCount
3059
3083
  ? selected_options.map(function (o) { return o.label || o.value; }).join(', ')