@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/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,18 @@ 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 */
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
+
34
34
  const Colors = {
35
35
  PRIMARY: {
36
36
  Hex: '#0193D7',
@@ -79,8 +79,8 @@ const FontSizes = {
79
79
  };
80
80
  const EditableTheme = {
81
81
  PRIMARY_COLOR: Colors.PRIMARY,
82
- };
83
-
82
+ };
83
+
84
84
  const Header$3 = styled.div `
85
85
  display: flex;
86
86
  align-items: center;
@@ -107,8 +107,8 @@ const Accordion = (_a) => {
107
107
  React.createElement(Title$2, null, title),
108
108
  React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? mdiChevronUp : mdiChevronDown, size: '24px' })),
109
109
  open ? children : null));
110
- };
111
-
110
+ };
111
+
112
112
  const StyledButton = styled.button `
113
113
  height: ${props => (props.$small ? '30px' : '40px')};
114
114
  line-height: 1em;
@@ -223,8 +223,8 @@ const Button = (_a) => {
223
223
  icon && !badge ? (React.createElement(StyledIcon$6, { "$hasChildren": !!has_children },
224
224
  React.createElement(Icon, { color: format ? format_styles.content_color : '#fff', path: loading ? mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
225
225
  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
-
226
+ };
227
+
228
228
  const StyledComponent = styled.p `
229
229
  color: ${props => Colors[props.$color || 'BLACK'].Hex};
230
230
  font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
@@ -244,8 +244,8 @@ const Copy = ({ children, align = '', margin = '', padding = '', type = 'default
244
244
  };
245
245
  Copy.defaultProps = {
246
246
  type: 'default',
247
- };
248
-
247
+ };
248
+
249
249
  const H1 = styled.h1 `
250
250
  color: ${Colors.BLACK.Hex};
251
251
  font-size: 30px;
@@ -293,8 +293,8 @@ const Heading = (_a) => {
293
293
  Heading.defaultProps = {
294
294
  bold: false,
295
295
  type: 'primary',
296
- };
297
-
296
+ };
297
+
298
298
  const Wrapper$i = styled.div `
299
299
  position: fixed;
300
300
  top: 0;
@@ -339,8 +339,8 @@ const ActionDialog = (_a) => {
339
339
  tertiaryButton ? React.createElement(Button, Object.assign({}, tertiaryButton, { format: 'secondary' })) : null,
340
340
  secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
341
341
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format === 'red' ? 'red' : 'primary' }))) : null)) : null)));
342
- };
343
-
342
+ };
343
+
344
344
  const Wrapper$h = styled.div `
345
345
  border: 1px solid #f1f1f1;
346
346
  border-radius: 4px;
@@ -391,8 +391,8 @@ const Alert = (_a) => {
391
391
  title && !small ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
392
392
  description ? (React.createElement(Copy, { margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
393
393
  action && !small ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
394
- };
395
-
394
+ };
395
+
396
396
  const colorMapping = {
397
397
  black: {
398
398
  fill_1: '#000000',
@@ -433,8 +433,8 @@ const Logo = (_a) => {
433
433
  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
434
  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
435
  }
436
- };
437
-
436
+ };
437
+
438
438
  const Container$3 = styled.header `
439
439
  width: 100%;
440
440
  display: flex;
@@ -462,8 +462,8 @@ const AppHeader = ({ logoUrl, buttons = [] }) => {
462
462
  return (React.createElement(Container$3, null,
463
463
  React.createElement(LogoWrapper, null, logoUrl ? React.createElement(Image, { src: logoUrl }) : React.createElement(Logo, { height: '30px' })),
464
464
  React.createElement(Buttons, null, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b)))))));
465
- };
466
-
465
+ };
466
+
467
467
  const Wrapper$g = styled.div `
468
468
  display: inline-block;
469
469
  border-radius: 4px;
@@ -496,8 +496,8 @@ const Tag = (_a) => {
496
496
  React.createElement(Label$4, { "$color": color }, children),
497
497
  removable ? (React.createElement(Remove$1, null,
498
498
  React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: mdiClose, size: '15px' }))) : null)));
499
- };
500
-
499
+ };
500
+
501
501
  const SidebarContainer = styled.div `
502
502
  border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
503
503
  display: flex;
@@ -604,8 +604,8 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
604
604
  e.preventDefault();
605
605
  toggleCollapse(!collapsed);
606
606
  }, small: true }))));
607
- };
608
-
607
+ };
608
+
609
609
  const Wrapper$f = styled.div `
610
610
  border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
611
611
  border-radius: 8px;
@@ -687,8 +687,8 @@ const BulkActionBar = (_a) => {
687
687
  errorMsg ? (React.createElement(Error, null,
688
688
  React.createElement(Icon, { color: Colors.RED.Hex, path: mdiInformationOutline, size: '20px' }),
689
689
  React.createElement(ErrorMsg, null, errorMsg))) : null));
690
- };
691
-
690
+ };
691
+
692
692
  const Wrapper$e = styled.div `
693
693
  background: #fff;
694
694
  border-radius: 8px;
@@ -735,8 +735,8 @@ const MoreMenu = (_a) => {
735
735
  item.icon ? (React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
736
736
  React.createElement(Title$1, null, item.label)));
737
737
  })));
738
- };
739
-
738
+ };
739
+
740
740
  const Wrapper$d = styled.div `
741
741
  position: relative;
742
742
  display: inline-block;
@@ -754,8 +754,8 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
754
754
  return (React.createElement(Wrapper$d, { onMouseEnter: disabled ? undefined : toggleMenu.bind(null, true), onMouseLeave: disabled ? undefined : toggleMenu.bind(null, false) },
755
755
  React.createElement(Button, { disabled: disabled, format: format, icon: mdiDotsHorizontal, small: small }, label),
756
756
  show_menu ? (React.createElement(StyledMoreMenu, { "$menuWidth": menuWidth, "$position": position, "$small": small, maxHeight: maxHeight, menuItems: menuItems })) : null));
757
- };
758
-
757
+ };
758
+
759
759
  const Wrapper$c = styled.div `
760
760
  display: inline-block;
761
761
  position: relative;
@@ -804,8 +804,8 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }
804
804
  return (React.createElement(Wrapper$c, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
805
805
  trigger || React.createElement(StyledIcon$4, { path: mdiInformationOutline }),
806
806
  show_content ? (React.createElement(Content$2, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
807
- };
808
-
807
+ };
808
+
809
809
  const Wrapper$b = styled.label `
810
810
  border-radius: 4px;
811
811
  padding: 4px 0px 4px 6px;
@@ -850,24 +850,27 @@ const Input$2 = styled.input `
850
850
  }
851
851
  `;
852
852
  const Check$1 = styled.span `
853
- height: 15px;
854
- width: 15px;
853
+ height: 17px;
854
+ width: 17px;
855
855
  background-color: #fff;
856
856
  border-width: 2px;
857
857
  border-style: solid;
858
858
  border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
859
+ box-sizing: border-box;
860
+ position: relative;
859
861
  &:after {
860
862
  content: "";
861
863
  position: absolute;
862
- left: 11px;
863
- top: 8px;
864
- width: 5px;
865
- height: 9px;
864
+ left: 3px;
865
+ top: 0px;
866
+ width: 7px;
867
+ height: 12px;
866
868
  border: solid white;
867
869
  border-width: 0 3px 3px 0;
868
870
  -webkit-transform: rotate(45deg);
869
871
  -ms-transform: rotate(45deg);
870
872
  transform: rotate(45deg);
873
+ box-sizing: border-box;
871
874
  display: none;
872
875
  }
873
876
  `;
@@ -888,8 +891,8 @@ const Checkbox = (_a) => {
888
891
  children ? (React.createElement(Label$3, null,
889
892
  children,
890
893
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
891
- };
892
-
894
+ };
895
+
893
896
  const SelectAll = styled.div `
894
897
  padding: 8px 12px;
895
898
  border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
@@ -934,8 +937,8 @@ const Checklist = (_a) => {
934
937
  const checked = selected.includes(option.value);
935
938
  return (React.createElement(Checkbox, Object.assign({ key: i }, accessibleProps, { checked: checked, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
936
939
  }))));
937
- };
938
-
940
+ };
941
+
939
942
  const Wrapper$a = styled.div `
940
943
  border-radius: 4px;
941
944
  height: 40px;
@@ -998,8 +1001,8 @@ const Select = (_a) => {
998
1001
  return (React.createElement("option", { key: i, value: option.value }, option.label || option.value));
999
1002
  })),
1000
1003
  React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, path: mdiChevronDown, size: '22px' })));
1001
- };
1002
-
1004
+ };
1005
+
1003
1006
  const DatePickerWrapper = styled.div `
1004
1007
  display: flex;
1005
1008
  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
@@ -1068,8 +1071,8 @@ const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate
1068
1071
  React.createElement(Middle, null,
1069
1072
  React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, readOnly: readOnly, style: { borderRadius: '0px' }, value: dDate.format('D') })),
1070
1073
  React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: dDate.format('YYYY') }))));
1071
- };
1072
-
1074
+ };
1075
+
1073
1076
  const Scrim$1 = styled.div `
1074
1077
  position: ${({ $position }) => $position};
1075
1078
  top: 0;
@@ -1155,8 +1158,8 @@ const Drawer = (_a) => {
1155
1158
  secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
1156
1159
  primaryButton ? React.createElement(Button, Object.assign({}, primaryButton, { format: 'primary' })) : null)) : null),
1157
1160
  scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
1158
- };
1159
-
1161
+ };
1162
+
1160
1163
  const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.style)));
1161
1164
  const LabelRow = styled.div `
1162
1165
  display: flex;
@@ -1217,8 +1220,8 @@ const Field = (_a) => {
1217
1220
  description ? React.createElement(Description, null, description) : null,
1218
1221
  children,
1219
1222
  validationText ? React.createElement(Validation, null, validationText) : null));
1220
- };
1221
-
1223
+ };
1224
+
1222
1225
  const Wrapper$8 = styled.fieldset `
1223
1226
  margin-inline-start: 0px;
1224
1227
  margin-inline-end: 0px;
@@ -1252,8 +1255,8 @@ const FieldGroup = ({ children, label }) => {
1252
1255
  return (React.createElement(Wrapper$8, null,
1253
1256
  React.createElement(Label$1, null, label),
1254
1257
  React.createElement(Content$1, null, children)));
1255
- };
1256
-
1258
+ };
1259
+
1257
1260
  const Dropzone = styled.div `
1258
1261
  border-radius: 8px;
1259
1262
  border-width: 1px;
@@ -1428,8 +1431,8 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, mes
1428
1431
  React.createElement(Content, null,
1429
1432
  React.createElement(Copy, { align: 'center', type: 'bold' }, "Drag & drop files here or click to select files"),
1430
1433
  message ? (React.createElement(Copy, { align: 'center', color: 'GRAY' }, message)) : null))) : null)));
1431
- };
1432
-
1434
+ };
1435
+
1433
1436
  const getAgesFromDob = (dob) => {
1434
1437
  let calculated_current_age = null;
1435
1438
  let calculated_nearest_age = null;
@@ -1502,8 +1505,8 @@ const formatAsSsn = (number) => {
1502
1505
  formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
1503
1506
  }
1504
1507
  return formatted_value;
1505
- };
1506
-
1508
+ };
1509
+
1507
1510
  const StyledInput = styled.input `
1508
1511
  border: none !important;
1509
1512
  background: none !important;
@@ -1688,8 +1691,8 @@ const Input$1 = (_a) => {
1688
1691
  setShowOptions(false);
1689
1692
  } }, s_value));
1690
1693
  }))) : null));
1691
- };
1692
-
1694
+ };
1695
+
1693
1696
  const Wrapper$7 = styled.a `
1694
1697
  color: ${props => props.theme.PRIMARY_COLOR.Hex};
1695
1698
  font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
@@ -1708,8 +1711,8 @@ Wrapper$7.defaultProps = { theme: EditableTheme };
1708
1711
  const Link = (_a) => {
1709
1712
  var { children, onClick, small } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
1710
1713
  return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps), children));
1711
- };
1712
-
1714
+ };
1715
+
1713
1716
  const dash = keyframes `
1714
1717
  0% {
1715
1718
  stroke-dasharray: 1, 160;
@@ -1743,8 +1746,8 @@ const Path = styled.path `
1743
1746
  const Loader = () => {
1744
1747
  return (React.createElement(Spinner, { viewBox: '0 0 16 18' },
1745
1748
  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' })));
1746
- };
1747
-
1749
+ };
1750
+
1748
1751
  const Steps = styled.div `
1749
1752
  padding: 20px;
1750
1753
  border-bottom: 1px solid #e7e6e6;
@@ -1793,8 +1796,8 @@ const ProgressBar = ({ steps }) => {
1793
1796
  step.complete ? (React.createElement(StyledIcon$2, { path: mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
1794
1797
  React.createElement(StepLabel, null, step.label)));
1795
1798
  })));
1796
- };
1797
-
1799
+ };
1800
+
1798
1801
  const Wrapper$6 = styled.div `
1799
1802
  position: fixed;
1800
1803
  top: 0;
@@ -1894,8 +1897,8 @@ const Modal = (_a) => {
1894
1897
  } },
1895
1898
  secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
1896
1899
  primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: 'primary', margin: '0px 0px 0px 10px' }))) : null)) : null)) : null)));
1897
- };
1898
-
1900
+ };
1901
+
1899
1902
  const Wrapper$5 = styled.div `
1900
1903
  position: relative;
1901
1904
  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
@@ -1977,8 +1980,8 @@ const MultiSelect = (_a) => {
1977
1980
  showOptions ? (React.createElement(Options, null,
1978
1981
  React.createElement(Checklist, { onChange: onChange, options: options, selected: selected, showSelectAll: showSelectAll }))) : null,
1979
1982
  showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
1980
- };
1981
-
1983
+ };
1984
+
1982
1985
  const Wrapper$4 = styled.div `
1983
1986
  display: flex;
1984
1987
  padding: 16px 30px;
@@ -2027,8 +2030,8 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
2027
2030
  return (React.createElement(Button, Object.assign({}, buttonProps, { key: i, small: true }), label));
2028
2031
  }),
2029
2032
  menuItems.length ? (React.createElement(ButtonMenu, { format: format, label: label, menuItems: menuItems, small: true })) : null)) : null));
2030
- };
2031
-
2033
+ };
2034
+
2032
2035
  const Wrapper$3 = styled.nav `
2033
2036
  box-sizing: border-box;
2034
2037
  display: flex;
@@ -2062,8 +2065,8 @@ const Pagination = (_a) => {
2062
2065
  value: `${p}`,
2063
2066
  })), value: `${currentPage}` }),
2064
2067
  React.createElement(Button, { disabled: is_last_page, icon: mdiChevronRight, onClick: handleNextClick, small: true })));
2065
- };
2066
-
2068
+ };
2069
+
2067
2070
  const Wrapper$2 = styled.label `
2068
2071
  border-radius: 4px;
2069
2072
  padding: 4px 0px 4px 6px;
@@ -2110,21 +2113,24 @@ const Input = styled.input `
2110
2113
  }
2111
2114
  `;
2112
2115
  const Check = styled.span `
2113
- height: 15px;
2114
- width: 15px;
2116
+ height: 17px;
2117
+ width: 17px;
2115
2118
  border-radius: 50%;
2116
2119
  background-color: #fff;
2117
2120
  border-width: 2px;
2118
2121
  border-style: solid;
2119
2122
  border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
2123
+ box-sizing: border-box;
2124
+ position: relative;
2120
2125
  &:after {
2121
2126
  content: "";
2122
2127
  position: absolute;
2123
- top: 10px;
2124
- left: 10px;
2125
- width: 10px;
2126
- height: 10px;
2128
+ top: 2px;
2129
+ left: 2px;
2130
+ width: 9px;
2131
+ height: 9px;
2127
2132
  border-radius: 50%;
2133
+ box-sizing: border-box;
2128
2134
  display: none;
2129
2135
  }
2130
2136
  `;
@@ -2144,16 +2150,16 @@ const Radio = (_a) => {
2144
2150
  React.createElement(Label, null,
2145
2151
  children,
2146
2152
  tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
2147
- };
2148
-
2153
+ };
2154
+
2149
2155
  const RadioList = (_a) => {
2150
2156
  var { disabled, onChange, options, value } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
2151
2157
  return (React.createElement(React.Fragment, null, options.map((option) => {
2152
2158
  const label = option.label || option.value;
2153
2159
  return (React.createElement(Radio, Object.assign({ checked: value === option.value, disabled: disabled, onChange: onChange, value: option.value }, accessibleProps), label));
2154
2160
  })));
2155
- };
2156
-
2161
+ };
2162
+
2157
2163
  const StyledTable = styled.table `
2158
2164
  width: 100%;
2159
2165
  margin-top: 1px;
@@ -2232,8 +2238,8 @@ const Table = (_a) => {
2232
2238
  return (React.createElement(Column, { "$align": columns[i].align, "$width": columns[i].width, key: i }, column.render ? column.render(row) : row[column.id] || 'N/A'));
2233
2239
  })));
2234
2240
  }))) : null));
2235
- };
2236
-
2241
+ };
2242
+
2237
2243
  const Wrapper$1 = styled.div `
2238
2244
  display: flex;
2239
2245
  box-sizing: border-box;
@@ -2292,8 +2298,8 @@ const Tabs = (_a) => {
2292
2298
  label));
2293
2299
  })));
2294
2300
  };
2295
- Tabs.defaultProps = {};
2296
-
2301
+ Tabs.defaultProps = {};
2302
+
2297
2303
  const Track = styled.div `
2298
2304
  height: 24px;
2299
2305
  border-radius: 12px;
@@ -2323,8 +2329,8 @@ const Toggle = (_a) => {
2323
2329
  React.createElement(Handle, { "$on": on },
2324
2330
  React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, path: on ? mdiCheck : mdiClose, size: '16px' }))));
2325
2331
  };
2326
- Toggle.defaultProps = {};
2327
-
2332
+ Toggle.defaultProps = {};
2333
+
2328
2334
  const Container = styled.div `
2329
2335
  width: 100%;
2330
2336
  padding: 40px auto;
@@ -2359,7 +2365,7 @@ const ZeroState = (_a) => {
2359
2365
  React.createElement(Heading, { children: title, type: 'tertiary' }),
2360
2366
  description && React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', type: 'default' })),
2361
2367
  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 }))));
2362
- };
2363
-
2364
- 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 };
2365
- //# sourceMappingURL=index.js.map
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