@hexure/ui 1.12.0 → 1.12.1

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/cjs/index.js CHANGED
@@ -1,13 +1,13 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var styled = require('styled-components');
5
- var Icon = require('@mdi/react');
6
- var js = require('@mdi/js');
7
- var dayjs = require('dayjs');
8
- var Numeral = require('numeral');
9
- var Moment = require('moment');
10
-
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var styled = require('styled-components');
5
+ var Icon = require('@mdi/react');
6
+ var js = require('@mdi/js');
7
+ var dayjs = require('dayjs');
8
+ var Numeral = require('numeral');
9
+ var Moment = require('moment');
10
+
11
11
  /******************************************************************************
12
12
  Copyright (c) Microsoft Corporation.
13
13
 
@@ -21,18 +21,18 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
21
21
  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
22
22
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
23
23
  PERFORMANCE OF THIS SOFTWARE.
24
- ***************************************************************************** */
25
- /* global Reflect, Promise */
26
-
27
- function __rest(s, e) {
28
- var t = {};
29
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
30
- if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
31
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
32
- }
33
- return t;
34
- }
35
-
24
+ ***************************************************************************** */
25
+ /* global Reflect, Promise */
26
+
27
+ function __rest(s, e) {
28
+ var t = {};
29
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
30
+ if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
31
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
32
+ }
33
+ return t;
34
+ }
35
+
36
36
  const Colors = {
37
37
  PRIMARY: {
38
38
  Hex: '#0193D7',
@@ -81,8 +81,8 @@ const FontSizes = {
81
81
  };
82
82
  const EditableTheme = {
83
83
  PRIMARY_COLOR: Colors.PRIMARY,
84
- };
85
-
84
+ };
85
+
86
86
  const Header$3 = styled.div `
87
87
  display: flex;
88
88
  align-items: center;
@@ -109,8 +109,8 @@ const Accordion = (_a) => {
109
109
  React.createElement(Title$2, null, title),
110
110
  React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? js.mdiChevronUp : js.mdiChevronDown, size: '24px' })),
111
111
  open ? children : null));
112
- };
113
-
112
+ };
113
+
114
114
  const StyledButton = styled.button `
115
115
  height: ${props => (props.$small ? '30px' : '40px')};
116
116
  line-height: 1em;
@@ -225,8 +225,8 @@ const Button = (_a) => {
225
225
  icon && !badge ? (React.createElement(StyledIcon$6, { "$hasChildren": !!has_children },
226
226
  React.createElement(Icon, { color: format ? format_styles.content_color : '#fff', path: loading ? js.mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
227
227
  badge && !icon ? (React.createElement(Badge$1, { "$bg_color": format_styles.badge_bg_color, "$content_color": format_styles.badge_content_color, "$small": small }, badge)) : null));
228
- };
229
-
228
+ };
229
+
230
230
  const StyledComponent = styled.p `
231
231
  color: ${props => Colors[props.$color || 'BLACK'].Hex};
232
232
  font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
@@ -246,8 +246,8 @@ const Copy = ({ children, align = '', margin = '', padding = '', type = 'default
246
246
  };
247
247
  Copy.defaultProps = {
248
248
  type: 'default',
249
- };
250
-
249
+ };
250
+
251
251
  const H1 = styled.h1 `
252
252
  color: ${Colors.BLACK.Hex};
253
253
  font-size: 30px;
@@ -295,8 +295,8 @@ const Heading = (_a) => {
295
295
  Heading.defaultProps = {
296
296
  bold: false,
297
297
  type: 'primary',
298
- };
299
-
298
+ };
299
+
300
300
  const Wrapper$i = styled.div `
301
301
  position: fixed;
302
302
  top: 0;
@@ -341,8 +341,8 @@ const ActionDialog = (_a) => {
341
341
  tertiaryButton ? React.createElement(Button, Object.assign({}, tertiaryButton, { format: 'secondary' })) : null,
342
342
  secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
343
343
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format === 'red' ? 'red' : 'primary' }))) : null)) : null)));
344
- };
345
-
344
+ };
345
+
346
346
  const Wrapper$h = styled.div `
347
347
  border: 1px solid #f1f1f1;
348
348
  border-radius: 4px;
@@ -393,8 +393,8 @@ const Alert = (_a) => {
393
393
  title && !small ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
394
394
  description ? (React.createElement(Copy, { margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
395
395
  action && !small ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
396
- };
397
-
396
+ };
397
+
398
398
  const colorMapping = {
399
399
  black: {
400
400
  fill_1: '#000000',
@@ -435,8 +435,8 @@ const Logo = (_a) => {
435
435
  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 }),
436
436
  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 })));
437
437
  }
438
- };
439
-
438
+ };
439
+
440
440
  const Container$3 = styled.header `
441
441
  width: 100%;
442
442
  display: flex;
@@ -464,8 +464,8 @@ const AppHeader = ({ logoUrl, buttons = [] }) => {
464
464
  return (React.createElement(Container$3, null,
465
465
  React.createElement(LogoWrapper, null, logoUrl ? React.createElement(Image, { src: logoUrl }) : React.createElement(Logo, { height: '30px' })),
466
466
  React.createElement(Buttons, null, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b)))))));
467
- };
468
-
467
+ };
468
+
469
469
  const Wrapper$g = styled.div `
470
470
  display: inline-block;
471
471
  border-radius: 4px;
@@ -498,8 +498,8 @@ const Tag = (_a) => {
498
498
  React.createElement(Label$4, { "$color": color }, children),
499
499
  removable ? (React.createElement(Remove$1, null,
500
500
  React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: js.mdiClose, size: '15px' }))) : null)));
501
- };
502
-
501
+ };
502
+
503
503
  const SidebarContainer = styled.div `
504
504
  border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
505
505
  display: flex;
@@ -606,8 +606,8 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
606
606
  e.preventDefault();
607
607
  toggleCollapse(!collapsed);
608
608
  }, small: true }))));
609
- };
610
-
609
+ };
610
+
611
611
  const Wrapper$f = styled.div `
612
612
  border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
613
613
  border-radius: 8px;
@@ -689,8 +689,8 @@ const BulkActionBar = (_a) => {
689
689
  errorMsg ? (React.createElement(Error, null,
690
690
  React.createElement(Icon, { color: Colors.RED.Hex, path: js.mdiInformationOutline, size: '20px' }),
691
691
  React.createElement(ErrorMsg, null, errorMsg))) : null));
692
- };
693
-
692
+ };
693
+
694
694
  const Wrapper$e = styled.div `
695
695
  background: #fff;
696
696
  border-radius: 8px;
@@ -737,8 +737,8 @@ const MoreMenu = (_a) => {
737
737
  item.icon ? (React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
738
738
  React.createElement(Title$1, null, item.label)));
739
739
  })));
740
- };
741
-
740
+ };
741
+
742
742
  const Wrapper$d = styled.div `
743
743
  position: relative;
744
744
  display: inline-block;
@@ -756,8 +756,8 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
756
756
  return (React.createElement(Wrapper$d, { onMouseEnter: disabled ? undefined : toggleMenu.bind(null, true), onMouseLeave: disabled ? undefined : toggleMenu.bind(null, false) },
757
757
  React.createElement(Button, { disabled: disabled, format: format, icon: js.mdiDotsHorizontal, small: small }, label),
758
758
  show_menu ? (React.createElement(StyledMoreMenu, { "$menuWidth": menuWidth, "$position": position, "$small": small, maxHeight: maxHeight, menuItems: menuItems })) : null));
759
- };
760
-
759
+ };
760
+
761
761
  const Wrapper$c = styled.div `
762
762
  display: inline-block;
763
763
  position: relative;
@@ -806,8 +806,8 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }
806
806
  return (React.createElement(Wrapper$c, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
807
807
  trigger || React.createElement(StyledIcon$4, { path: js.mdiInformationOutline }),
808
808
  show_content ? (React.createElement(Content$2, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
809
- };
810
-
809
+ };
810
+
811
811
  const Wrapper$b = styled.label `
812
812
  border-radius: 4px;
813
813
  padding: 4px 0px 4px 6px;
@@ -852,24 +852,27 @@ const Input$2 = styled.input `
852
852
  }
853
853
  `;
854
854
  const Check$1 = styled.span `
855
- height: 15px;
856
- width: 15px;
855
+ height: 17px;
856
+ width: 17px;
857
857
  background-color: #fff;
858
858
  border-width: 2px;
859
859
  border-style: solid;
860
860
  border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
861
+ box-sizing: border-box;
862
+ position: relative;
861
863
  &:after {
862
864
  content: "";
863
865
  position: absolute;
864
- left: 11px;
865
- top: 8px;
866
- width: 5px;
867
- height: 9px;
866
+ left: 3px;
867
+ top: 0px;
868
+ width: 7px;
869
+ height: 12px;
868
870
  border: solid white;
869
871
  border-width: 0 3px 3px 0;
870
872
  -webkit-transform: rotate(45deg);
871
873
  -ms-transform: rotate(45deg);
872
874
  transform: rotate(45deg);
875
+ box-sizing: border-box;
873
876
  display: none;
874
877
  }
875
878
  `;
@@ -890,8 +893,8 @@ const Checkbox = (_a) => {
890
893
  children ? (React.createElement(Label$3, null,
891
894
  children,
892
895
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
893
- };
894
-
896
+ };
897
+
895
898
  const SelectAll = styled.div `
896
899
  padding: 8px 12px;
897
900
  border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
@@ -936,8 +939,8 @@ const Checklist = (_a) => {
936
939
  const checked = selected.includes(option.value);
937
940
  return (React.createElement(Checkbox, Object.assign({ key: i }, accessibleProps, { checked: checked, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
938
941
  }))));
939
- };
940
-
942
+ };
943
+
941
944
  const Wrapper$a = styled.div `
942
945
  border-radius: 4px;
943
946
  height: 40px;
@@ -1000,8 +1003,8 @@ const Select = (_a) => {
1000
1003
  return (React.createElement("option", { key: i, value: option.value }, option.label || option.value));
1001
1004
  })),
1002
1005
  React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, path: js.mdiChevronDown, size: '22px' })));
1003
- };
1004
-
1006
+ };
1007
+
1005
1008
  const DatePickerWrapper = styled.div `
1006
1009
  display: flex;
1007
1010
  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
@@ -1070,8 +1073,8 @@ const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate
1070
1073
  React.createElement(Middle, null,
1071
1074
  React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, readOnly: readOnly, style: { borderRadius: '0px' }, value: dDate.format('D') })),
1072
1075
  React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: dDate.format('YYYY') }))));
1073
- };
1074
-
1076
+ };
1077
+
1075
1078
  const Scrim$1 = styled.div `
1076
1079
  position: ${({ $position }) => $position};
1077
1080
  top: 0;
@@ -1157,8 +1160,8 @@ const Drawer = (_a) => {
1157
1160
  secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
1158
1161
  primaryButton ? React.createElement(Button, Object.assign({}, primaryButton, { format: 'primary' })) : null)) : null),
1159
1162
  scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
1160
- };
1161
-
1163
+ };
1164
+
1162
1165
  const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.style)));
1163
1166
  const LabelRow = styled.div `
1164
1167
  display: flex;
@@ -1219,8 +1222,8 @@ const Field = (_a) => {
1219
1222
  description ? React.createElement(Description, null, description) : null,
1220
1223
  children,
1221
1224
  validationText ? React.createElement(Validation, null, validationText) : null));
1222
- };
1223
-
1225
+ };
1226
+
1224
1227
  const Wrapper$8 = styled.fieldset `
1225
1228
  margin-inline-start: 0px;
1226
1229
  margin-inline-end: 0px;
@@ -1254,8 +1257,8 @@ const FieldGroup = ({ children, label }) => {
1254
1257
  return (React.createElement(Wrapper$8, null,
1255
1258
  React.createElement(Label$1, null, label),
1256
1259
  React.createElement(Content$1, null, children)));
1257
- };
1258
-
1260
+ };
1261
+
1259
1262
  const Dropzone = styled.div `
1260
1263
  border-radius: 8px;
1261
1264
  border-width: 1px;
@@ -1430,8 +1433,8 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, mes
1430
1433
  React.createElement(Content, null,
1431
1434
  React.createElement(Copy, { align: 'center', type: 'bold' }, "Drag & drop files here or click to select files"),
1432
1435
  message ? (React.createElement(Copy, { align: 'center', color: 'GRAY' }, message)) : null))) : null)));
1433
- };
1434
-
1436
+ };
1437
+
1435
1438
  const getAgesFromDob = (dob) => {
1436
1439
  let calculated_current_age = null;
1437
1440
  let calculated_nearest_age = null;
@@ -1504,8 +1507,8 @@ const formatAsSsn = (number) => {
1504
1507
  formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
1505
1508
  }
1506
1509
  return formatted_value;
1507
- };
1508
-
1510
+ };
1511
+
1509
1512
  const StyledInput = styled.input `
1510
1513
  border: none !important;
1511
1514
  background: none !important;
@@ -1690,8 +1693,8 @@ const Input$1 = (_a) => {
1690
1693
  setShowOptions(false);
1691
1694
  } }, s_value));
1692
1695
  }))) : null));
1693
- };
1694
-
1696
+ };
1697
+
1695
1698
  const Wrapper$7 = styled.a `
1696
1699
  color: ${props => props.theme.PRIMARY_COLOR.Hex};
1697
1700
  font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
@@ -1710,8 +1713,8 @@ Wrapper$7.defaultProps = { theme: EditableTheme };
1710
1713
  const Link = (_a) => {
1711
1714
  var { children, onClick, small } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
1712
1715
  return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps), children));
1713
- };
1714
-
1716
+ };
1717
+
1715
1718
  const dash = styled.keyframes `
1716
1719
  0% {
1717
1720
  stroke-dasharray: 1, 160;
@@ -1745,8 +1748,8 @@ const Path = styled.path `
1745
1748
  const Loader = () => {
1746
1749
  return (React.createElement(Spinner, { viewBox: '0 0 16 18' },
1747
1750
  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' })));
1748
- };
1749
-
1751
+ };
1752
+
1750
1753
  const Steps = styled.div `
1751
1754
  padding: 20px;
1752
1755
  border-bottom: 1px solid #e7e6e6;
@@ -1795,8 +1798,8 @@ const ProgressBar = ({ steps }) => {
1795
1798
  step.complete ? (React.createElement(StyledIcon$2, { path: js.mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
1796
1799
  React.createElement(StepLabel, null, step.label)));
1797
1800
  })));
1798
- };
1799
-
1801
+ };
1802
+
1800
1803
  const Wrapper$6 = styled.div `
1801
1804
  position: fixed;
1802
1805
  top: 0;
@@ -1896,8 +1899,8 @@ const Modal = (_a) => {
1896
1899
  } },
1897
1900
  secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
1898
1901
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: 'primary', margin: '0px 0px 0px 10px' }))) : null)) : null)) : null)));
1899
- };
1900
-
1902
+ };
1903
+
1901
1904
  const Wrapper$5 = styled.div `
1902
1905
  position: relative;
1903
1906
  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
@@ -1979,8 +1982,8 @@ const MultiSelect = (_a) => {
1979
1982
  showOptions ? (React.createElement(Options, null,
1980
1983
  React.createElement(Checklist, { onChange: onChange, options: options, selected: selected, showSelectAll: showSelectAll }))) : null,
1981
1984
  showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
1982
- };
1983
-
1985
+ };
1986
+
1984
1987
  const Wrapper$4 = styled.div `
1985
1988
  display: flex;
1986
1989
  padding: 16px 30px;
@@ -2029,8 +2032,8 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
2029
2032
  return (React.createElement(Button, Object.assign({}, buttonProps, { key: i, small: true }), label));
2030
2033
  }),
2031
2034
  menuItems.length ? (React.createElement(ButtonMenu, { format: format, label: label, menuItems: menuItems, small: true })) : null)) : null));
2032
- };
2033
-
2035
+ };
2036
+
2034
2037
  const Wrapper$3 = styled.nav `
2035
2038
  box-sizing: border-box;
2036
2039
  display: flex;
@@ -2064,8 +2067,8 @@ const Pagination = (_a) => {
2064
2067
  value: `${p}`,
2065
2068
  })), value: `${currentPage}` }),
2066
2069
  React.createElement(Button, { disabled: is_last_page, icon: js.mdiChevronRight, onClick: handleNextClick, small: true })));
2067
- };
2068
-
2070
+ };
2071
+
2069
2072
  const Wrapper$2 = styled.label `
2070
2073
  border-radius: 4px;
2071
2074
  padding: 4px 0px 4px 6px;
@@ -2112,21 +2115,24 @@ const Input = styled.input `
2112
2115
  }
2113
2116
  `;
2114
2117
  const Check = styled.span `
2115
- height: 15px;
2116
- width: 15px;
2118
+ height: 17px;
2119
+ width: 17px;
2117
2120
  border-radius: 50%;
2118
2121
  background-color: #fff;
2119
2122
  border-width: 2px;
2120
2123
  border-style: solid;
2121
2124
  border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
2125
+ box-sizing: border-box;
2126
+ position: relative;
2122
2127
  &:after {
2123
2128
  content: "";
2124
2129
  position: absolute;
2125
- top: 10px;
2126
- left: 10px;
2127
- width: 10px;
2128
- height: 10px;
2130
+ top: 2px;
2131
+ left: 2px;
2132
+ width: 9px;
2133
+ height: 9px;
2129
2134
  border-radius: 50%;
2135
+ box-sizing: border-box;
2130
2136
  display: none;
2131
2137
  }
2132
2138
  `;
@@ -2146,16 +2152,16 @@ const Radio = (_a) => {
2146
2152
  React.createElement(Label, null,
2147
2153
  children,
2148
2154
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
2149
- };
2150
-
2155
+ };
2156
+
2151
2157
  const RadioList = (_a) => {
2152
2158
  var { disabled, onChange, options, value } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
2153
2159
  return (React.createElement(React.Fragment, null, options.map((option) => {
2154
2160
  const label = option.label || option.value;
2155
2161
  return (React.createElement(Radio, Object.assign({ checked: value === option.value, disabled: disabled, onChange: onChange, value: option.value }, accessibleProps), label));
2156
2162
  })));
2157
- };
2158
-
2163
+ };
2164
+
2159
2165
  const StyledTable = styled.table `
2160
2166
  width: 100%;
2161
2167
  margin-top: 1px;
@@ -2234,8 +2240,8 @@ const Table = (_a) => {
2234
2240
  return (React.createElement(Column, { "$align": columns[i].align, "$width": columns[i].width, key: i }, column.render ? column.render(row) : row[column.id] || 'N/A'));
2235
2241
  })));
2236
2242
  }))) : null));
2237
- };
2238
-
2243
+ };
2244
+
2239
2245
  const Wrapper$1 = styled.div `
2240
2246
  display: flex;
2241
2247
  box-sizing: border-box;
@@ -2294,8 +2300,8 @@ const Tabs = (_a) => {
2294
2300
  label));
2295
2301
  })));
2296
2302
  };
2297
- Tabs.defaultProps = {};
2298
-
2303
+ Tabs.defaultProps = {};
2304
+
2299
2305
  const Track = styled.div `
2300
2306
  height: 24px;
2301
2307
  border-radius: 12px;
@@ -2325,8 +2331,8 @@ const Toggle = (_a) => {
2325
2331
  React.createElement(Handle, { "$on": on },
2326
2332
  React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, path: on ? js.mdiCheck : js.mdiClose, size: '16px' }))));
2327
2333
  };
2328
- Toggle.defaultProps = {};
2329
-
2334
+ Toggle.defaultProps = {};
2335
+
2330
2336
  const Container = styled.div `
2331
2337
  width: 100%;
2332
2338
  padding: 40px auto;
@@ -2361,53 +2367,53 @@ const ZeroState = (_a) => {
2361
2367
  React.createElement(Heading, { children: title, type: 'tertiary' }),
2362
2368
  description && React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', type: 'default' })),
2363
2369
  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 }))));
2364
- };
2365
-
2366
- exports.Accordion = Accordion;
2367
- exports.ActionDialog = ActionDialog;
2368
- exports.Alert = Alert;
2369
- exports.AppHeader = AppHeader;
2370
- exports.AppMenu = AppMenu;
2371
- exports.BulkActionBar = BulkActionBar;
2372
- exports.Button = Button;
2373
- exports.ButtonMenu = ButtonMenu;
2374
- exports.Checkbox = Checkbox;
2375
- exports.Checklist = Checklist;
2376
- exports.Colors = Colors;
2377
- exports.Copy = Copy;
2378
- exports.DatePicker = DatePicker;
2379
- exports.Drawer = Drawer;
2380
- exports.EditableTheme = EditableTheme;
2381
- exports.Field = Field;
2382
- exports.FieldGroup = FieldGroup;
2383
- exports.FileUpload = FileUpload;
2384
- exports.FontSizes = FontSizes;
2385
- exports.FontStyles = FontStyles;
2386
- exports.Heading = Heading;
2387
- exports.Input = Input$1;
2388
- exports.Link = Link;
2389
- exports.Loader = Loader;
2390
- exports.Logo = Logo;
2391
- exports.Modal = Modal;
2392
- exports.MoreMenu = MoreMenu;
2393
- exports.MultiSelect = MultiSelect;
2394
- exports.PageHeader = PageHeader;
2395
- exports.Pagination = Pagination;
2396
- exports.ProgressBar = ProgressBar;
2397
- exports.Radio = Radio;
2398
- exports.RadioList = RadioList;
2399
- exports.Select = Select;
2400
- exports.Table = Table;
2401
- exports.Tabs = Tabs;
2402
- exports.Tag = Tag;
2403
- exports.Toggle = Toggle;
2404
- exports.Tooltip = Tooltip;
2405
- exports.ZeroState = ZeroState;
2406
- exports.formatAsPhone = formatAsPhone;
2407
- exports.formatAsSsn = formatAsSsn;
2408
- exports.getAgesFromDob = getAgesFromDob;
2409
- exports.getDaysForMonth = getDaysForMonth;
2410
- exports.getYears = getYears;
2411
- exports.validateEmail = validateEmail;
2412
- exports.validatePhone = validatePhone;
2413
- //# sourceMappingURL=index.js.map
2370
+ };
2371
+
2372
+ exports.Accordion = Accordion;
2373
+ exports.ActionDialog = ActionDialog;
2374
+ exports.Alert = Alert;
2375
+ exports.AppHeader = AppHeader;
2376
+ exports.AppMenu = AppMenu;
2377
+ exports.BulkActionBar = BulkActionBar;
2378
+ exports.Button = Button;
2379
+ exports.ButtonMenu = ButtonMenu;
2380
+ exports.Checkbox = Checkbox;
2381
+ exports.Checklist = Checklist;
2382
+ exports.Colors = Colors;
2383
+ exports.Copy = Copy;
2384
+ exports.DatePicker = DatePicker;
2385
+ exports.Drawer = Drawer;
2386
+ exports.EditableTheme = EditableTheme;
2387
+ exports.Field = Field;
2388
+ exports.FieldGroup = FieldGroup;
2389
+ exports.FileUpload = FileUpload;
2390
+ exports.FontSizes = FontSizes;
2391
+ exports.FontStyles = FontStyles;
2392
+ exports.Heading = Heading;
2393
+ exports.Input = Input$1;
2394
+ exports.Link = Link;
2395
+ exports.Loader = Loader;
2396
+ exports.Logo = Logo;
2397
+ exports.Modal = Modal;
2398
+ exports.MoreMenu = MoreMenu;
2399
+ exports.MultiSelect = MultiSelect;
2400
+ exports.PageHeader = PageHeader;
2401
+ exports.Pagination = Pagination;
2402
+ exports.ProgressBar = ProgressBar;
2403
+ exports.Radio = Radio;
2404
+ exports.RadioList = RadioList;
2405
+ exports.Select = Select;
2406
+ exports.Table = Table;
2407
+ exports.Tabs = Tabs;
2408
+ exports.Tag = Tag;
2409
+ exports.Toggle = Toggle;
2410
+ exports.Tooltip = Tooltip;
2411
+ exports.ZeroState = ZeroState;
2412
+ exports.formatAsPhone = formatAsPhone;
2413
+ exports.formatAsSsn = formatAsSsn;
2414
+ exports.getAgesFromDob = getAgesFromDob;
2415
+ exports.getDaysForMonth = getDaysForMonth;
2416
+ exports.getYears = getYears;
2417
+ exports.validateEmail = validateEmail;
2418
+ exports.validatePhone = validatePhone;
2419
+ //# sourceMappingURL=index.js.map