@hexure/ui 1.12.3 → 1.12.4

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.
package/dist/esm/index.js CHANGED
@@ -1,11 +1,11 @@
1
- import React, { useContext, useState, useEffect, useRef } from 'react';
2
- import styled, { ThemeContext, keyframes } from 'styled-components';
3
- import Icon, { Icon as Icon$1 } from '@mdi/react';
4
- import { mdiChevronUp, mdiChevronDown, mdiLoading, mdiInformationOutline, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiClose, mdiChevronRight, mdiChevronLeft, mdiDotsHorizontal, mdiMinusCircle, mdiFolderPlusOutline, mdiCheck } from '@mdi/js';
5
- import dayjs from 'dayjs';
6
- import Numeral from 'numeral';
7
- import Moment from 'moment';
8
-
1
+ import React, { useContext, useState, useEffect, useRef } from 'react';
2
+ import styled, { ThemeContext, keyframes } from 'styled-components';
3
+ import Icon, { Icon as Icon$1 } from '@mdi/react';
4
+ import { mdiChevronUp, mdiChevronDown, mdiLoading, mdiInformationOutline, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiClose, mdiChevronRight, mdiChevronLeft, mdiDotsHorizontal, mdiMinusCircle, mdiFolderPlusOutline, mdiCheck } from '@mdi/js';
5
+ import dayjs from 'dayjs';
6
+ import Numeral from 'numeral';
7
+ import Moment from 'moment';
8
+
9
9
  /******************************************************************************
10
10
  Copyright (c) Microsoft Corporation.
11
11
 
@@ -19,18 +19,22 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
19
19
  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
20
20
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
21
21
  PERFORMANCE OF THIS SOFTWARE.
22
- ***************************************************************************** */
23
- /* global Reflect, Promise */
24
-
25
- function __rest(s, e) {
26
- var t = {};
27
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
28
- if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
29
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
30
- }
31
- return t;
32
- }
33
-
22
+ ***************************************************************************** */
23
+ /* global Reflect, Promise, SuppressedError, Symbol */
24
+
25
+ function __rest(s, e) {
26
+ var t = {};
27
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
28
+ if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
29
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
30
+ }
31
+ return t;
32
+ }
33
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
34
+ var e = new Error(message);
35
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
36
+ };
37
+
34
38
  const Colors = {
35
39
  PRIMARY: {
36
40
  Hex: '#0193D7',
@@ -79,8 +83,8 @@ const FontSizes = {
79
83
  };
80
84
  const EditableTheme = {
81
85
  PRIMARY_COLOR: Colors.PRIMARY,
82
- };
83
-
86
+ };
87
+
84
88
  const Header$3 = styled.div `
85
89
  display: flex;
86
90
  align-items: center;
@@ -107,8 +111,8 @@ const Accordion = (_a) => {
107
111
  React.createElement(Title$2, null, title),
108
112
  React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? mdiChevronUp : mdiChevronDown, size: '24px' })),
109
113
  open ? children : null));
110
- };
111
-
114
+ };
115
+
112
116
  const StyledButton = styled.button `
113
117
  height: ${props => (props.$small ? '30px' : '40px')};
114
118
  line-height: 1em;
@@ -223,8 +227,8 @@ const Button = (_a) => {
223
227
  icon && !badge ? (React.createElement(StyledIcon$6, { "$hasChildren": !!has_children },
224
228
  React.createElement(Icon, { color: format ? format_styles.content_color : '#fff', path: loading ? mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
225
229
  badge && !icon ? (React.createElement(Badge$1, { "$bg_color": format_styles.badge_bg_color, "$content_color": format_styles.badge_content_color, "$small": small }, badge)) : null));
226
- };
227
-
230
+ };
231
+
228
232
  const StyledComponent = styled.p `
229
233
  color: ${props => Colors[props.$color || 'BLACK'].Hex};
230
234
  font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
@@ -244,8 +248,8 @@ const Copy = ({ children, align = '', margin = '', padding = '', type = 'default
244
248
  };
245
249
  Copy.defaultProps = {
246
250
  type: 'default',
247
- };
248
-
251
+ };
252
+
249
253
  const H1 = styled.h1 `
250
254
  color: ${Colors.BLACK.Hex};
251
255
  font-size: 30px;
@@ -293,8 +297,8 @@ const Heading = (_a) => {
293
297
  Heading.defaultProps = {
294
298
  bold: false,
295
299
  type: 'primary',
296
- };
297
-
300
+ };
301
+
298
302
  const Wrapper$i = styled.div `
299
303
  position: fixed;
300
304
  top: 0;
@@ -339,8 +343,8 @@ const ActionDialog = (_a) => {
339
343
  tertiaryButton ? React.createElement(Button, Object.assign({}, tertiaryButton, { format: 'secondary' })) : null,
340
344
  secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
341
345
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format === 'red' ? 'red' : 'primary' }))) : null)) : null)));
342
- };
343
-
346
+ };
347
+
344
348
  const Wrapper$h = styled.div `
345
349
  border: 1px solid #f1f1f1;
346
350
  border-radius: 4px;
@@ -391,8 +395,8 @@ const Alert = (_a) => {
391
395
  title && !small ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
392
396
  description ? (React.createElement(Copy, { margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
393
397
  action && !small ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
394
- };
395
-
398
+ };
399
+
396
400
  const colorMapping = {
397
401
  black: {
398
402
  fill_1: '#000000',
@@ -433,8 +437,8 @@ const Logo = (_a) => {
433
437
  React.createElement("path", { d: 'M67.8498 45.479C67.5109 44.893 66.7322 43.5486 66.2043 42.6319H55.1965C52.3299 42.6319 49.8532 41.6095 47.8364 39.5923C45.819 37.5755 44.7966 35.0985 44.7966 32.2321C44.7966 29.3656 45.819 26.8886 47.8364 24.8718C49.8388 22.8332 52.316 21.7975 55.1965 21.7975C58.0632 21.7975 60.5398 22.8199 62.5565 24.8374C63.6038 25.8847 64.3824 27.093 64.9357 28.5312L65.2435 29.3327H53.8141C53.231 30.2171 52.5673 31.6476 52.303 32.2354L53.912 35.0969H67.474L71.0059 28.6192C70.2872 25.5702 68.8261 22.9293 66.6625 20.7657C63.5219 17.6257 59.6649 16.0333 55.1965 16.0333C50.7283 16.0333 46.8708 17.6257 43.7303 20.7657C40.546 23.9501 38.9979 27.7011 38.9979 32.2321C38.9979 36.7001 40.5903 40.5577 43.7303 43.6981C46.8708 46.8384 50.7283 48.4308 55.1965 48.4308H66.0873C66.9322 47.0737 67.5668 45.977 67.8498 45.479', fill: colorMapping[type_parts[1]].fill_1 }),
434
438
  React.createElement("path", { d: 'M27.6655 20.7443C26.9235 20.002 26.2307 19.4097 25.608 18.9831C22.7338 17.0113 19.5684 16.0117 16.1992 16.0117C13.6229 16.0117 11.1676 16.5943 8.9002 17.7442C8.1016 18.1264 7.38657 18.6118 6.73074 19.0799L5.88805 19.6819C5.85364 19.711 5.81716 19.7449 5.78223 19.7749L5.77618 17.9067C5.78246 17.9022 5.7892 17.8965 5.79554 17.8921L5.72168 1.52402L2.84058 1.54784e-05L0 1.6145V24.9966V30.8918C0.0184614 30.8508 0.0393993 30.8108 0.0580857 30.7698C0.0216133 31.2417 0 31.7206 0 32.2105V47.6757L2.84688 49.2499C4.7412 48.3293 5.4988 47.9164 5.79866 47.7385V32.2105C5.79866 29.3439 6.82128 26.8672 8.83853 24.8504C10.8415 22.8118 13.319 21.7759 16.1992 21.7759C19.0796 21.7759 21.557 22.8118 23.5635 24.8538C25.3441 26.6351 26.3374 28.7976 26.5963 31.4625C26.6263 31.6669 26.6339 40.3058 26.6339 47.6694C27.2825 48.0147 28.6127 48.8167 29.5141 49.3059C29.9448 49.0814 32.0589 47.8425 32.3979 47.6669V32.2105C32.3979 27.6795 30.8499 23.9285 27.6655 20.7443Z', fill: colorMapping[type_parts[1]].fill_1 })));
435
439
  }
436
- };
437
-
440
+ };
441
+
438
442
  const Container$3 = styled.header `
439
443
  width: 100%;
440
444
  display: flex;
@@ -462,8 +466,8 @@ const AppHeader = ({ logoUrl, buttons = [] }) => {
462
466
  return (React.createElement(Container$3, null,
463
467
  React.createElement(LogoWrapper, null, logoUrl ? React.createElement(Image, { src: logoUrl }) : React.createElement(Logo, { height: '30px' })),
464
468
  React.createElement(Buttons, null, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b)))))));
465
- };
466
-
469
+ };
470
+
467
471
  const Wrapper$g = styled.div `
468
472
  display: inline-block;
469
473
  border-radius: 4px;
@@ -496,8 +500,8 @@ const Tag = (_a) => {
496
500
  React.createElement(Label$4, { "$color": color }, children),
497
501
  removable ? (React.createElement(Remove$1, null,
498
502
  React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: mdiClose, size: '15px' }))) : null)));
499
- };
500
-
503
+ };
504
+
501
505
  const SidebarContainer = styled.div `
502
506
  border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
503
507
  display: flex;
@@ -604,8 +608,8 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
604
608
  e.preventDefault();
605
609
  toggleCollapse(!collapsed);
606
610
  }, small: true }))));
607
- };
608
-
611
+ };
612
+
609
613
  const Wrapper$f = styled.div `
610
614
  border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
611
615
  border-radius: 8px;
@@ -654,7 +658,7 @@ const Actions$1 = styled.div `
654
658
  align-items: center;
655
659
  column-gap: 10px;
656
660
  `;
657
- const Error = styled.div `
661
+ const Error$1 = styled.div `
658
662
  box-sizing: border-box;
659
663
  display: flex;
660
664
  align-items: center;
@@ -684,11 +688,11 @@ const BulkActionBar = (_a) => {
684
688
  " Selected"),
685
689
  onClear ? React.createElement(Clear, { onClick: onClear }, "Clear") : null),
686
690
  React.createElement(Actions$1, null, actions.map((action, i) => (React.createElement(Button, Object.assign({}, action, { key: i, small: true })))))),
687
- errorMsg ? (React.createElement(Error, null,
691
+ errorMsg ? (React.createElement(Error$1, null,
688
692
  React.createElement(Icon, { color: Colors.RED.Hex, path: mdiInformationOutline, size: '20px' }),
689
693
  React.createElement(ErrorMsg, null, errorMsg))) : null));
690
- };
691
-
694
+ };
695
+
692
696
  const Wrapper$e = styled.div `
693
697
  background: #fff;
694
698
  border-radius: 8px;
@@ -735,8 +739,8 @@ const MoreMenu = (_a) => {
735
739
  item.icon ? (React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
736
740
  React.createElement(Title$1, null, item.label)));
737
741
  })));
738
- };
739
-
742
+ };
743
+
740
744
  const Wrapper$d = styled.div `
741
745
  position: relative;
742
746
  display: inline-block;
@@ -754,8 +758,8 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
754
758
  return (React.createElement(Wrapper$d, { onMouseEnter: disabled ? undefined : toggleMenu.bind(null, true), onMouseLeave: disabled ? undefined : toggleMenu.bind(null, false) },
755
759
  React.createElement(Button, { disabled: disabled, format: format, icon: mdiDotsHorizontal, small: small }, label),
756
760
  show_menu ? (React.createElement(StyledMoreMenu, { "$menuWidth": menuWidth, "$position": position, "$small": small, maxHeight: maxHeight, menuItems: menuItems })) : null));
757
- };
758
-
761
+ };
762
+
759
763
  const Wrapper$c = styled.div `
760
764
  display: inline-block;
761
765
  position: relative;
@@ -804,8 +808,8 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }
804
808
  return (React.createElement(Wrapper$c, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
805
809
  trigger || React.createElement(StyledIcon$4, { path: mdiInformationOutline }),
806
810
  show_content ? (React.createElement(Content$2, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
807
- };
808
-
811
+ };
812
+
809
813
  const Wrapper$b = styled.label `
810
814
  border-radius: 4px;
811
815
  padding: 4px 0px 4px 6px;
@@ -859,7 +863,7 @@ const Check$1 = styled.span `
859
863
  box-sizing: border-box;
860
864
  position: relative;
861
865
  &:after {
862
- content: "";
866
+ content: '';
863
867
  position: absolute;
864
868
  left: 3px;
865
869
  top: 0px;
@@ -891,8 +895,8 @@ const Checkbox = (_a) => {
891
895
  children ? (React.createElement(Label$3, null,
892
896
  children,
893
897
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
894
- };
895
-
898
+ };
899
+
896
900
  const SelectAll = styled.div `
897
901
  padding: 8px 12px;
898
902
  border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
@@ -937,8 +941,8 @@ const Checklist = (_a) => {
937
941
  const checked = selected.includes(option.value);
938
942
  return (React.createElement(Checkbox, Object.assign({ key: i }, accessibleProps, { checked: checked, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
939
943
  }))));
940
- };
941
-
944
+ };
945
+
942
946
  const Wrapper$a = styled.div `
943
947
  border-radius: 4px;
944
948
  height: 40px;
@@ -1001,8 +1005,8 @@ const Select = (_a) => {
1001
1005
  return (React.createElement("option", { key: i, value: option.value }, option.label || option.value));
1002
1006
  })),
1003
1007
  React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, path: mdiChevronDown, size: '22px' })));
1004
- };
1005
-
1008
+ };
1009
+
1006
1010
  const DatePickerWrapper = styled.div `
1007
1011
  display: flex;
1008
1012
  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
@@ -1071,8 +1075,8 @@ const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate
1071
1075
  React.createElement(Middle, null,
1072
1076
  React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, readOnly: readOnly, style: { borderRadius: '0px' }, value: dDate.format('D') })),
1073
1077
  React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: dDate.format('YYYY') }))));
1074
- };
1075
-
1078
+ };
1079
+
1076
1080
  const Scrim$1 = styled.div `
1077
1081
  position: ${({ $position }) => $position};
1078
1082
  top: 0;
@@ -1158,9 +1162,9 @@ const Drawer = (_a) => {
1158
1162
  secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
1159
1163
  primaryButton ? React.createElement(Button, Object.assign({}, primaryButton, { format: 'primary' })) : null)) : null),
1160
1164
  scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
1161
- };
1162
-
1163
- const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.style)));
1165
+ };
1166
+
1167
+ const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, (props.$customStyle))));
1164
1168
  const LabelRow = styled.div `
1165
1169
  display: flex;
1166
1170
  align-items: center;
@@ -1209,8 +1213,8 @@ const Validation = styled.div `
1209
1213
  box-sizing: border-box;
1210
1214
  `;
1211
1215
  const Field = (_a) => {
1212
- var { action, children, validationText, label, description, required, htmlFor, style, tooltip } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip"]);
1213
- return (React.createElement(Wrapper$9, Object.assign({ style: style }, accessibleProps),
1216
+ var { action, children, validationText, label, description, required, htmlFor, style = {}, tooltip } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip"]);
1217
+ return (React.createElement(Wrapper$9, Object.assign({ "$customStyle": style }, accessibleProps),
1214
1218
  React.createElement(LabelRow, null,
1215
1219
  React.createElement(Label$2, { htmlFor: htmlFor },
1216
1220
  label,
@@ -1220,8 +1224,8 @@ const Field = (_a) => {
1220
1224
  description ? React.createElement(Description, null, description) : null,
1221
1225
  children,
1222
1226
  validationText ? React.createElement(Validation, null, validationText) : null));
1223
- };
1224
-
1227
+ };
1228
+
1225
1229
  const Wrapper$8 = styled.fieldset `
1226
1230
  margin-inline-start: 0px;
1227
1231
  margin-inline-end: 0px;
@@ -1255,8 +1259,8 @@ const FieldGroup = ({ children, label }) => {
1255
1259
  return (React.createElement(Wrapper$8, null,
1256
1260
  React.createElement(Label$1, null, label),
1257
1261
  React.createElement(Content$1, null, children)));
1258
- };
1259
-
1262
+ };
1263
+
1260
1264
  const Dropzone = styled.div `
1261
1265
  border-radius: 8px;
1262
1266
  border-width: 1px;
@@ -1431,8 +1435,8 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, mes
1431
1435
  React.createElement(Content, null,
1432
1436
  React.createElement(Copy, { align: 'center', type: 'bold' }, "Drag & drop files here or click to select files"),
1433
1437
  message ? (React.createElement(Copy, { align: 'center', color: 'GRAY' }, message)) : null))) : null)));
1434
- };
1435
-
1438
+ };
1439
+
1436
1440
  const getAgesFromDob = (dob) => {
1437
1441
  let calculated_current_age = null;
1438
1442
  let calculated_nearest_age = null;
@@ -1505,8 +1509,8 @@ const formatAsSsn = (number) => {
1505
1509
  formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
1506
1510
  }
1507
1511
  return formatted_value;
1508
- };
1509
-
1512
+ };
1513
+
1510
1514
  const StyledInput = styled.input `
1511
1515
  border: none !important;
1512
1516
  background: none !important;
@@ -1691,8 +1695,8 @@ const Input$1 = (_a) => {
1691
1695
  setShowOptions(false);
1692
1696
  } }, s_value));
1693
1697
  }))) : null));
1694
- };
1695
-
1698
+ };
1699
+
1696
1700
  const Wrapper$7 = styled.a `
1697
1701
  color: ${props => props.theme.PRIMARY_COLOR.Hex};
1698
1702
  font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
@@ -1711,8 +1715,8 @@ Wrapper$7.defaultProps = { theme: EditableTheme };
1711
1715
  const Link = (_a) => {
1712
1716
  var { children, onClick, small } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
1713
1717
  return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps), children));
1714
- };
1715
-
1718
+ };
1719
+
1716
1720
  const dash = keyframes `
1717
1721
  0% {
1718
1722
  stroke-dasharray: 1, 160;
@@ -1746,8 +1750,8 @@ const Path = styled.path `
1746
1750
  const Loader = () => {
1747
1751
  return (React.createElement(Spinner, { viewBox: '0 0 16 18' },
1748
1752
  React.createElement(Path, { d: 'M7.21487 1.2868C7.88431 0.9044 8.73031 0.9044 9.39974 1.2868L9.40283 1.28856L14.4613 4.20761C15.1684 4.598 15.5746 5.33558 15.5746 6.11465V8.99996V11.8853C15.5746 12.6507 15.1632 13.3848 14.4617 13.7721L9.37973 16.7132C8.71029 17.0956 7.86428 17.0956 7.19485 16.7132L7.19088 16.7109L2.11279 13.772C1.40602 13.3816 1 12.6441 1 11.8653V8.98995V6.11465C1 5.31458 1.44381 4.59039 2.10827 4.21051L7.21487 1.2868Z', fill: 'none', strokeWidth: '2' })));
1749
- };
1750
-
1753
+ };
1754
+
1751
1755
  const Steps = styled.div `
1752
1756
  padding: 20px;
1753
1757
  border-bottom: 1px solid #e7e6e6;
@@ -1790,14 +1794,22 @@ const StepLabel = styled.div `
1790
1794
  font-weight: 500;
1791
1795
  line-height: 1;
1792
1796
  `;
1793
- const ProgressBar = ({ steps }) => {
1797
+ const StepLine = styled.div `
1798
+ height: 2px;
1799
+ flex-grow: 1;
1800
+ background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
1801
+ transition: background-color 0.5s ease-in-out;
1802
+ `;
1803
+ const ProgressBar = ({ steps, showStepLine = false }) => {
1794
1804
  return (React.createElement(Steps, null, steps.map((step, i) => {
1795
- return (React.createElement(Step, { key: i },
1796
- step.complete ? (React.createElement(StyledIcon$2, { path: mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
1797
- React.createElement(StepLabel, null, step.label)));
1805
+ return (React.createElement(React.Fragment, null,
1806
+ i !== 0 && showStepLine && (React.createElement(StepLine, { "$active": step.active })),
1807
+ React.createElement(Step, { key: i },
1808
+ step.complete ? (React.createElement(StyledIcon$2, { path: mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
1809
+ React.createElement(StepLabel, null, step.label))));
1798
1810
  })));
1799
- };
1800
-
1811
+ };
1812
+
1801
1813
  const Wrapper$6 = styled.div `
1802
1814
  position: fixed;
1803
1815
  top: 0;
@@ -1897,8 +1909,8 @@ const Modal = (_a) => {
1897
1909
  } },
1898
1910
  secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
1899
1911
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: 'primary', margin: '0px 0px 0px 10px' }))) : null)) : null)) : null)));
1900
- };
1901
-
1912
+ };
1913
+
1902
1914
  const Wrapper$5 = styled.div `
1903
1915
  position: relative;
1904
1916
  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
@@ -1980,8 +1992,8 @@ const MultiSelect = (_a) => {
1980
1992
  showOptions ? (React.createElement(Options, null,
1981
1993
  React.createElement(Checklist, { onChange: onChange, options: options, selected: selected, showSelectAll: showSelectAll }))) : null,
1982
1994
  showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
1983
- };
1984
-
1995
+ };
1996
+
1985
1997
  const Wrapper$4 = styled.div `
1986
1998
  display: flex;
1987
1999
  padding: 16px 30px;
@@ -2030,8 +2042,8 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
2030
2042
  return (React.createElement(Button, Object.assign({}, buttonProps, { key: i, small: true }), label));
2031
2043
  }),
2032
2044
  menuItems.length ? (React.createElement(ButtonMenu, { format: format, label: label, menuItems: menuItems, small: true })) : null)) : null));
2033
- };
2034
-
2045
+ };
2046
+
2035
2047
  const Wrapper$3 = styled.nav `
2036
2048
  box-sizing: border-box;
2037
2049
  display: flex;
@@ -2065,8 +2077,8 @@ const Pagination = (_a) => {
2065
2077
  value: `${p}`,
2066
2078
  })), value: `${currentPage}` }),
2067
2079
  React.createElement(Button, { disabled: is_last_page, icon: mdiChevronRight, onClick: handleNextClick, small: true })));
2068
- };
2069
-
2080
+ };
2081
+
2070
2082
  const Wrapper$2 = styled.label `
2071
2083
  border-radius: 4px;
2072
2084
  padding: 4px 0px 4px 6px;
@@ -2123,7 +2135,7 @@ const Check = styled.span `
2123
2135
  box-sizing: border-box;
2124
2136
  position: relative;
2125
2137
  &:after {
2126
- content: "";
2138
+ content: '';
2127
2139
  position: absolute;
2128
2140
  top: 2px;
2129
2141
  left: 2px;
@@ -2150,16 +2162,16 @@ const Radio = (_a) => {
2150
2162
  React.createElement(Label, null,
2151
2163
  children,
2152
2164
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
2153
- };
2154
-
2165
+ };
2166
+
2155
2167
  const RadioList = (_a) => {
2156
2168
  var { disabled, onChange, options, value } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
2157
2169
  return (React.createElement(React.Fragment, null, options.map((option) => {
2158
2170
  const label = option.label || option.value;
2159
2171
  return (React.createElement(Radio, Object.assign({ checked: value === option.value, disabled: disabled, onChange: onChange, value: option.value }, accessibleProps), label));
2160
2172
  })));
2161
- };
2162
-
2173
+ };
2174
+
2163
2175
  const StyledTable = styled.table `
2164
2176
  width: 100%;
2165
2177
  margin-top: 1px;
@@ -2238,8 +2250,8 @@ const Table = (_a) => {
2238
2250
  return (React.createElement(Column, { "$align": columns[i].align, "$width": columns[i].width, key: i }, column.render ? column.render(row) : row[column.id] || 'N/A'));
2239
2251
  })));
2240
2252
  }))) : null));
2241
- };
2242
-
2253
+ };
2254
+
2243
2255
  const Wrapper$1 = styled.div `
2244
2256
  display: flex;
2245
2257
  box-sizing: border-box;
@@ -2298,8 +2310,8 @@ const Tabs = (_a) => {
2298
2310
  label));
2299
2311
  })));
2300
2312
  };
2301
- Tabs.defaultProps = {};
2302
-
2313
+ Tabs.defaultProps = {};
2314
+
2303
2315
  const Track = styled.div `
2304
2316
  height: 24px;
2305
2317
  border-radius: 12px;
@@ -2329,8 +2341,8 @@ const Toggle = (_a) => {
2329
2341
  React.createElement(Handle, { "$on": on },
2330
2342
  React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, path: on ? mdiCheck : mdiClose, size: '16px' }))));
2331
2343
  };
2332
- Toggle.defaultProps = {};
2333
-
2344
+ Toggle.defaultProps = {};
2345
+
2334
2346
  const Container = styled.div `
2335
2347
  width: 100%;
2336
2348
  padding: 40px auto;
@@ -2365,7 +2377,7 @@ const ZeroState = (_a) => {
2365
2377
  React.createElement(Heading, { children: title, type: 'tertiary' }),
2366
2378
  description && React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', type: 'default' })),
2367
2379
  action && (React.createElement(Button, { children: action === null || action === void 0 ? void 0 : action.children, icon: action === null || action === void 0 ? void 0 : action.icon, onClick: action === null || action === void 0 ? void 0 : action.onClick }))));
2368
- };
2369
-
2370
- export { Accordion, ActionDialog, Alert, AppHeader, AppMenu, BulkActionBar, Button, ButtonMenu, Checkbox, Checklist, Colors, Copy, DatePicker, Drawer, EditableTheme, Field, FieldGroup, FileUpload, FontSizes, FontStyles, Heading, Input$1 as Input, Link, Loader, Logo, Modal, MoreMenu, MultiSelect, PageHeader, Pagination, ProgressBar, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState, formatAsPhone, formatAsSsn, getAgesFromDob, getDaysForMonth, getYears, validateEmail, validatePhone };
2371
- //# sourceMappingURL=index.js.map
2380
+ };
2381
+
2382
+ export { Accordion, ActionDialog, Alert, AppHeader, AppMenu, BulkActionBar, Button, ButtonMenu, Checkbox, Checklist, Colors, Copy, DatePicker, Drawer, EditableTheme, Field, FieldGroup, FileUpload, FontSizes, FontStyles, Heading, Input$1 as Input, Link, Loader, Logo, Modal, MoreMenu, MultiSelect, PageHeader, Pagination, ProgressBar, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState, formatAsPhone, formatAsSsn, getAgesFromDob, getDaysForMonth, getYears, validateEmail, validatePhone };
2383
+ //# sourceMappingURL=index.js.map