@dspworkplace/ui 1.5.60 → 2.0.0

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 (5) hide show
  1. package/dist/index.es.js +427 -208
  2. package/dist/index.es.js.map +1 -1
  3. package/dist/index.js +427 -208
  4. package/dist/index.js.map +1 -1
  5. package/package.json +10 -10
package/dist/index.js CHANGED
@@ -8,44 +8,46 @@ var React = require('react');
8
8
  var React__default = _interopDefault(React);
9
9
  var styled = require('styled-components');
10
10
  var styled__default = _interopDefault(styled);
11
+ var reactAutocomplete = require('@szhsin/react-autocomplete');
11
12
 
12
- var defaultRadius = '2px';
13
+ var defaultRadius = '4px';
13
14
  var colors = {
14
- primary: "#F7931E",
15
- secondary: "#0071BC",
16
- action: "#9DDDF4",
15
+ primary: '#F7931E',
16
+ secondary: '#0071BC',
17
+ action: '#9DDDF4',
17
18
  neutrals: {
18
- black: "#000000",
19
- gray: "#333333",
20
- medium: "#707070",
21
- silver: "#CCCCCC",
22
- white: "#FFFFFF"
19
+ black: '#000000',
20
+ gray: '#333333',
21
+ medium: '#707070',
22
+ silver: '#CCCCCC',
23
+ white: '#FFFFFF'
23
24
  },
24
25
  warnings: {
25
- border: "#F5C26B",
26
- text: "#DBAE60",
27
- shadow: "#FAE0B5",
28
- bg: "#FEF8F0"
26
+ border: '#F5C26B',
27
+ text: '#DBAE60',
28
+ shadow: '#FAE0B5',
29
+ bg: '#FEF8F0'
29
30
  },
30
31
  success: {
31
- border: "#00BDA5",
32
- text: "#00A38D",
33
- shadow: "#7FDED2",
34
- bg: "#E5F8F6"
32
+ border: '#00BDA5',
33
+ text: '#007d6c',
34
+ shadow: '#7FDED2',
35
+ bg: '#E5F8F6'
35
36
  },
36
37
  error: {
37
- border: "#F2545B",
38
- text: "#D94C53",
39
- shadow: "#F8A9AD",
40
- bg: "#FDEDEE"
38
+ border: '#F2545B',
39
+ text: '#bd4248',
40
+ shadow: '#F8A9AD',
41
+ bg: '#FDEDEE'
41
42
  },
42
43
  info: {
43
- border: "#7C98B6",
44
- text: "#516F90",
45
- shadow: "#CBD6E2",
46
- bg: "#EAF0F6"
44
+ border: '#7C98B6',
45
+ text: '#11598b',
46
+ shadow: '#CBD6E2',
47
+ bg: '#EAF0F6'
47
48
  },
48
49
  extra: {
50
+ blueishWhite: '#fafbfc',
49
51
  whiteSmoke: '#F5F5F5',
50
52
  gray93: '#FAFAFA'
51
53
  }
@@ -56,27 +58,27 @@ var font = {
56
58
  lineHeight: '20px'
57
59
  },
58
60
  medium: {
59
- size: '16px',
61
+ size: '14px',
60
62
  lineHeight: '16px'
61
63
  },
62
64
  small: {
63
- size: '14px',
65
+ size: '12px',
64
66
  lineHeight: '16px'
65
67
  },
66
68
  extraSmall: {
67
- size: '12px',
69
+ size: '10px',
68
70
  lineHeight: '12px'
69
71
  },
70
72
  tiny: {
71
73
  size: '8px',
72
74
  lineHeight: '12px'
73
75
  },
74
- main: 'circe-rounded',
76
+ main: '"Huninn", sans-serif',
75
77
  body: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
76
78
  };
77
79
  var form = {
78
80
  input: {
79
- radius: '2px',
81
+ radius: defaultRadius,
80
82
  padding: '12px 8px'
81
83
  },
82
84
  button: {
@@ -326,7 +328,7 @@ function _templateObject9() {
326
328
  }
327
329
 
328
330
  function _templateObject8() {
329
- var data = taggedTemplateLiteral(["\n padding:0;\n margin:4px 0 0 0;\n background:white;\n border:1px solid ", ";\n box-shadow:0 0 6px ", ";\n border-radius:2px;\n list-style:none;\n width:auto;\n display:inline-block;\n position: absolute;\n top: 107%;\n left: -1px;\n z-index:10;\n\n ", "\n\n\n li {\n font-size:", ";\n color:#707070;\n height:32px;\n cursor:pointer;\n padding:0px 4px 0 8px;\n position:relative;\n display:flex;\n justify-content:space-between;\n align-items:center;\n\n >ul {\n display:none;\n }\n\n\n &:hover,\n &.selected {\n background:", ";\n\n >ul {\n display:inline-block;\n }\n }\n\n &.alone {\n border-top:1px solid ", ";\n }\n\n }\n"]);
331
+ var data = taggedTemplateLiteral(["\n padding:0;\n margin:4px 0 0 0;\n background:white;\n border:1px solid ", ";\n box-shadow:0 0 6px ", ";\n border-radius:", ";\n list-style:none;\n width:auto;\n display:inline-block;\n position: absolute;\n top: 107%;\n left: -1px;\n z-index:10;\n\n ", "\n\n\n li {\n font-size:", ";\n color:#707070;\n height:32px;\n cursor:pointer;\n padding:0px 4px 0 8px;\n position:relative;\n display:flex;\n justify-content:space-between;\n align-items:center;\n\n >ul {\n display:none;\n }\n\n\n &:hover,\n &.selected {\n background:", ";\n\n >ul {\n display:inline-block;\n }\n }\n\n &.alone {\n border-top:1px solid ", ";\n }\n\n }\n"]);
330
332
 
331
333
  _templateObject8 = function _templateObject8() {
332
334
  return data;
@@ -346,7 +348,7 @@ function _templateObject7() {
346
348
  }
347
349
 
348
350
  function _templateObject6() {
349
- var data = taggedTemplateLiteral(["\n width:", ";\n height:40px;\n background:white;\n border-radius:2px;\n border:1px solid ", ";\n cursor:pointer;\n position:relative;\n box-sizing:border-box;\n padding:12px 8px;\n display:flex;\n align-items:center;\n justify-content:space-between;\n\n &.open {\n border-color:", ";\n box-shadow:0 0 6px ", ";\n }\n\n &.error {\n border-color:", ";\n }\n\n &.error.open {\n border-color:", ";\n box-shadow:0 0 6px ", ";\n }\n\n &.valid {\n border-color:", ";\n }\n\n &.valid.open {\n border-color:", ";\n box-shadow:0 0 6px ", ";\n }\n"]);
351
+ var data = taggedTemplateLiteral(["\n width:", ";\n height:40px;\n background:white;\n border-radius:", ";\n border:1px solid ", ";\n cursor:pointer;\n position:relative;\n box-sizing:border-box;\n padding:12px 8px;\n display:flex;\n align-items:center;\n justify-content:space-between;\n\n &.open {\n border-color:", ";\n box-shadow:0 0 6px ", ";\n }\n\n &.error {\n border-color:", ";\n }\n\n &.error.open {\n border-color:", ";\n box-shadow:0 0 6px ", ";\n }\n\n &.valid {\n border-color:", ";\n }\n\n &.valid.open {\n border-color:", ";\n box-shadow:0 0 6px ", ";\n }\n"]);
350
352
 
351
353
  _templateObject6 = function _templateObject6() {
352
354
  return data;
@@ -366,7 +368,7 @@ function _templateObject5() {
366
368
  }
367
369
 
368
370
  function _templateObject4() {
369
- var data = taggedTemplateLiteral(["\n font-size:", ";\n font-weight:normal;\n font-family:Circe-Rounded;\n display:block;\n color:#516F90;\n margin-top:4px;\n"]);
371
+ var data = taggedTemplateLiteral(["\n font-size:", ";\n font-weight:normal;\n font-family:\"Huninn\", sans-serif;\n display:block;\n color:#516F90;\n margin-top:4px;\n"]);
370
372
 
371
373
  _templateObject4 = function _templateObject4() {
372
374
  return data;
@@ -386,7 +388,7 @@ function _templateObject3() {
386
388
  }
387
389
 
388
390
  function _templateObject2() {
389
- var data = taggedTemplateLiteral(["\n font-size:", ";\n font-weight:normal;\n font-family:Circe-Rounded;\n display:block;\n padding-bottom:2px;\n color:#707070;\n\n >.requiredField {\n color:", ";\n }\n\n"]);
391
+ var data = taggedTemplateLiteral(["\n font-size:", ";\n font-weight:normal;\n font-family:\"Huninn\", sans-serif;\n display:block;\n padding-bottom:2px;\n color:#707070;\n\n >.requiredField {\n color:", ";\n }\n\n"]);
390
392
 
391
393
  _templateObject2 = function _templateObject2() {
392
394
  return data;
@@ -440,13 +442,13 @@ var RequiredText = function RequiredText() {
440
442
  var SelectUi = styled__default.div(_templateObject6(), function (_ref2) {
441
443
  var size = _ref2.size;
442
444
  return handleSize(size);
443
- }, theme.colors.neutrals.silver, theme.colors.secondary, theme.colors.action, theme.colors.error.border, theme.colors.error.border, theme.colors.error.shadow, theme.colors.success.border, theme.colors.success.border, theme.colors.success.shadow);
445
+ }, theme.defaultRadius, theme.colors.neutrals.silver, theme.colors.secondary, theme.colors.action, theme.colors.error.border, theme.colors.error.border, theme.colors.error.shadow, theme.colors.success.border, theme.colors.success.border, theme.colors.success.shadow);
444
446
  var Value = styled__default.span(_templateObject7(), function (props) {
445
447
  return props.option ? '#707070' : theme.colors.neutrals.gray;
446
448
  }, function (props) {
447
449
  return props.option && "\n display:inline-block;\n flex:1;\n ";
448
450
  });
449
- var Options = styled__default.ul(_templateObject8(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, function (props) {
451
+ var Options = styled__default.ul(_templateObject8(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, theme.defaultRadius, function (props) {
450
452
  return props.isChild && "\n position:absolute;\n left:100%;\n margin-left:6px;\n top:-4px;\n\n &::before {\n content: \" \";\n height: 100%;\n width: 6px;\n background: transparent;\n display: block;\n position: absolute;\n left: -7px;\n }\n ";
451
453
  }, theme.font.small.size, theme.colors.info.bg, theme.colors.neutrals.silver);
452
454
  var OptionGroup = styled__default.div(_templateObject9());
@@ -486,7 +488,7 @@ function _templateObject3$1() {
486
488
  }
487
489
 
488
490
  function _templateObject2$1() {
489
- var data = taggedTemplateLiteral(["\n font-size:", ";\n font-weight:normal;\n font-family:Circe-Rounded;\n display:block;\n color:#516F90;\n margin-top:4px;\n"]);
491
+ var data = taggedTemplateLiteral(["\n font-size:", ";\n font-weight:normal;\n font-family:\"Huninn\", sans-serif;\n display:block;\n color:#516F90;\n margin-top:4px;\n"]);
490
492
 
491
493
  _templateObject2$1 = function _templateObject2() {
492
494
  return data;
@@ -496,7 +498,7 @@ function _templateObject2$1() {
496
498
  }
497
499
 
498
500
  function _templateObject$2() {
499
- var data = taggedTemplateLiteral(["\n background:", ";\n border-color:", ";\n border-width:1px;\n border-style:solid;\n border-radius:", ";\n font-size:", ";\n line-height:", ";\n height:40px;\n padding:", ";\n color:", ";\n width:", ";\n\n &.hasChildren {\n padding-right:40px;\n }\n\n &.hasChildren.childrenLeft {\n padding-right:", ";\n padding-left:40px;\n }\n\n &:disabled {\n background: ", ";\n ", ";\n border-color: ", ";\n color: ", ";\n }\n\n &:disabled::placeholder {\n color:#eee;\n }\n\n &:hover {\n ", " ;\n border-color:", ";\n }\n\n &:active {\n ", ";\n border-color:", ";\n }\n\n &:focus {\n ", ";\n box-shadow:0px 0px 6px ", ";\n border-color:", ";\n }\n\n &::placeholder {\n color:", ";\n font-size:", ";\n }\n\n &:read-only {\n background:", ";\n border-color:", ";\n color:#707070;\n }\n"]);
501
+ var data = taggedTemplateLiteral(["\n background: ", ";\n border-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-radius: ", ";\n font-size: ", ";\n line-height: ", ";\n height: 40px;\n padding: ", ";\n color: ", ";\n width: ", ";\n\n &.hasChildren {\n padding-right: 40px;\n }\n\n &.hasChildren.childrenLeft {\n padding-right: ", ";\n padding-left: 40px;\n }\n\n &:disabled {\n background: ", ";\n ", ";\n border-color: ", ";\n color: ", ";\n }\n\n &:disabled::placeholder {\n color: #eee;\n }\n\n &:hover {\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n border-color: ", ";\n }\n\n &:active {\n ", ";\n border-color: ", ";\n }\n\n &:focus {\n ", ";\n box-shadow: 0px 0px 6px ", ";\n border-color: ", ";\n }\n\n &::placeholder {\n color: ", ";\n font-size: ", ";\n }\n\n &:read-only {\n background: ", ";\n border-color: ", ";\n color: #707070;\n }\n"]);
500
502
 
501
503
  _templateObject$2 = function _templateObject() {
502
504
  return data;
@@ -531,7 +533,7 @@ var handlerColor = function handlerColor(typeColor) {
531
533
  return theme.colors.success.text;
532
534
 
533
535
  default:
534
- return theme.colors.neutrals.silver;
536
+ return null;
535
537
  }
536
538
  };
537
539
 
@@ -548,12 +550,10 @@ var handleMask = function handleMask(type) {
548
550
  }
549
551
  };
550
552
 
551
- var InputBase$1 = styled__default.input(_templateObject$2(), theme.colors.neutrals.white, function (props) {
552
- return handlerColor(props.validation);
553
- }, theme.form.input.radius, theme.font.small.size, theme.font.small.lineHeight, theme.form.input.padding, theme.colors.neutrals.gray, function (_ref) {
553
+ var InputBase$1 = styled__default.input(_templateObject$2(), theme.colors.neutrals.white, theme.colors.neutrals.silver, theme.form.input.radius, theme.font.medium.size, theme.font.medium.lineHeight, theme.form.input.padding, theme.colors.neutrals.gray, function (_ref) {
554
554
  var size = _ref.size;
555
555
  return handleSize$1(size);
556
- }, theme.form.input.padding, theme.colors.extra.whiteSmoke, borderDefault$1, theme.colors.neutrals.silver, theme.colors.neutrals.medium, borderDefault$1, function (props) {
556
+ }, theme.form.input.padding, theme.colors.extra.whiteSmoke, borderDefault$1, theme.colors.neutrals.silver, theme.colors.neutrals.medium, theme.colors.secondary, function (props) {
557
557
  return handlerColor(props.validation);
558
558
  }, borderDefault$1, function (props) {
559
559
  return handlerColor(props.validation);
@@ -606,14 +606,19 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
606
606
  }
607
607
 
608
608
  var maskFunction = null;
609
- if (mask) maskFunction = handleMask(mask);
609
+
610
+ if (mask) {
611
+ maskFunction = handleMask(mask);
612
+ }
610
613
 
611
614
  var handleChange = function handleChange(e) {
612
615
  if (onChange) {
613
616
  onChange(e);
614
617
  }
615
618
 
616
- if (maskFunction) e.target.value = maskFunction(e.target.value);
619
+ if (maskFunction) {
620
+ e.target.value = maskFunction(e.target.value);
621
+ }
617
622
  };
618
623
 
619
624
  return /*#__PURE__*/React__default.createElement(Frag$1, {
@@ -3958,7 +3963,7 @@ var Wrapper = function Wrapper(Element) {
3958
3963
  }, function (props) {
3959
3964
  return props.onClick && "\n cursor: pointer;\n ";
3960
3965
  }, function (props) {
3961
- return props.color ? props.color + ' !important' : theme.colors.secondary;
3966
+ return props.color ? props.color + ' !important' : 'currentColor';
3962
3967
  }, function (props) {
3963
3968
  return props.strokeColor && "stroke: ".concat(props.strokeColor, " !important;");
3964
3969
  }, function (props) {
@@ -4151,7 +4156,7 @@ Items.forEach(function (key) {
4151
4156
  });
4152
4157
 
4153
4158
  function _templateObject$4() {
4154
- var data = taggedTemplateLiteral(["\n height:14px;\n width:14px;\n border-radius: 100%;\n background: ", "; \n border: 1px solid ", ";\n color:", ";\n font-family:Circe-Rounded;\n display: inline-block;\n font-size: 10px;\n text-align:center;\n font-weight:bold;\n position:relative;\n top:-2px;\n left:5px;\n \n >div {\n display:none;\n background:white;\n padding:7px;\n position:absolute;\n top:-40px;\n left:-4px;\n white-space: nowrap;\n font-weight:300;\n color:#707070; \n box-shadow:0 0 6px #ccc;\n \n &::before {\n content: \" \";\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 5px solid white;\n position: absolute;\n bottom: -5px;\n }\n }\n \n &:hover {\n div {\n display:inline-block;\n } \n }\n"]);
4159
+ var data = taggedTemplateLiteral(["\n height:14px;\n width:14px;\n border-radius: 100%;\n background: ", "; \n border: 1px solid ", ";\n color:", ";\n font-family:\"Huninn\", sans-serif;\n display: inline-block;\n font-size: 10px;\n text-align:center;\n font-weight:bold;\n position:relative;\n top:-2px;\n left:5px;\n \n >div {\n display:none;\n background:white;\n padding:7px;\n position:absolute;\n top:-40px;\n left:-4px;\n white-space: nowrap;\n font-weight:300;\n color:#707070; \n box-shadow:0 0 6px #ccc;\n \n &::before {\n content: \" \";\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 5px solid white;\n position: absolute;\n bottom: -5px;\n }\n }\n \n &:hover {\n div {\n display:inline-block;\n } \n }\n"]);
4155
4160
 
4156
4161
  _templateObject$4 = function _templateObject() {
4157
4162
  return data;
@@ -4179,7 +4184,7 @@ var mergeRefs = function mergeRefs(refs) {
4179
4184
  };
4180
4185
 
4181
4186
  function _templateObject4$2() {
4182
- var data = taggedTemplateLiteral(["\n font-size:14px;\n line-height:16px;\n color:", ";\n"]);
4187
+ var data = taggedTemplateLiteral(["\n font-size: 14px;\n line-height: 16px;\n color: ", ";\n\n ", "\n}\n"]);
4183
4188
 
4184
4189
  _templateObject4$2 = function _templateObject4() {
4185
4190
  return data;
@@ -4189,7 +4194,7 @@ function _templateObject4$2() {
4189
4194
  }
4190
4195
 
4191
4196
  function _templateObject3$2() {
4192
- var data = taggedTemplateLiteral(["\n font-size:16px;\n line-height:20px;\n"]);
4197
+ var data = taggedTemplateLiteral(["\n font-size: 16px;\n line-height: 20px;\n"]);
4193
4198
 
4194
4199
  _templateObject3$2 = function _templateObject3() {
4195
4200
  return data;
@@ -4199,7 +4204,7 @@ function _templateObject3$2() {
4199
4204
  }
4200
4205
 
4201
4206
  function _templateObject2$2() {
4202
- var data = taggedTemplateLiteral(["\n font-family:circe-rounded;\n font-weight:bold;\n font-size:22px;\n line-height:28px;\n color: ", ";\n"]);
4207
+ var data = taggedTemplateLiteral(["\n font-family: \"Huninn\", sans-serif;\n font-weight: bold;\n font-size: 22px;\n line-height: 28px;\n color: ", ";\n"]);
4203
4208
 
4204
4209
  _templateObject2$2 = function _templateObject2() {
4205
4210
  return data;
@@ -4209,7 +4214,7 @@ function _templateObject2$2() {
4209
4214
  }
4210
4215
 
4211
4216
  function _templateObject$5() {
4212
- var data = taggedTemplateLiteral(["\n font-family:circe-rounded;\n font-weight:bold;\n font-size:36px;\n line-height:44px;\n color: ", ";\n"]);
4217
+ var data = taggedTemplateLiteral(["\n font-family: \"Huninn\", sans-serif;\n font-weight: bold;\n font-size: 36px;\n line-height: 40px;\n color: ", ";\n"]);
4213
4218
 
4214
4219
  _templateObject$5 = function _templateObject() {
4215
4220
  return data;
@@ -4217,13 +4222,36 @@ function _templateObject$5() {
4217
4222
 
4218
4223
  return data;
4219
4224
  }
4220
- var Title = styled__default.h1(_templateObject$5(), theme.colors.secondary);
4225
+ var Title = styled__default.h1(_templateObject$5(), theme.colors.info.text);
4221
4226
  var SubTitle = styled__default.h3(_templateObject2$2(), theme.colors.info.text);
4222
4227
  var ThirdTitle = styled__default(SubTitle)(_templateObject3$2());
4223
- var Text = styled__default.p(_templateObject4$2(), theme.colors.neutrals.gray);
4228
+ var Text = styled__default.p(_templateObject4$2(), theme.colors.neutrals.gray, function (_ref) {
4229
+ var subtle = _ref.subtle;
4230
+ return subtle && "\n color:".concat(theme.colors.neutrals.medium, ";\n ");
4231
+ });
4232
+
4233
+ function _templateObject14() {
4234
+ var data = taggedTemplateLiteral(["\n border: 0;\n padding-right: 8px;\n background: transparent;\n cursor: inherit;\n display: flex;\n align-items: center;\n height: 100%;\n"]);
4235
+
4236
+ _templateObject14 = function _templateObject14() {
4237
+ return data;
4238
+ };
4239
+
4240
+ return data;
4241
+ }
4242
+
4243
+ function _templateObject13() {
4244
+ var data = taggedTemplateLiteral(["\n flex: 1;\n min-width: 0;\n border: 0;\n outline: 0;\n padding: 0;\n background: transparent;\n cursor: inherit;\n font-family: inherit;\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n padding-left: 8px;\n\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n"]);
4245
+
4246
+ _templateObject13 = function _templateObject13() {
4247
+ return data;
4248
+ };
4249
+
4250
+ return data;
4251
+ }
4224
4252
 
4225
4253
  function _templateObject12() {
4226
- var data = taggedTemplateLiteral(["\n height:24px;\n width:24px;\n box-sizing: border-box;\n margin-right:5px;\n border-radius:100%;\n border:2px solid white;\n background:", "\n z-index: ", ";\n margin-left:", "\n margin-top: 8px;\n margin-bottom: 8px;\n display: inline-block;\n"]);
4254
+ var data = taggedTemplateLiteral(["\n height: 24px;\n width: 24px;\n box-sizing: border-box;\n margin-right: 5px;\n border-radius: 100%;\n border: 2px solid white;\n background: ", "\n z-index: ", ";\n margin-left: ", "\n margin-top: 8px;\n margin-bottom: 8px;\n display: inline-block;\n"]);
4227
4255
 
4228
4256
  _templateObject12 = function _templateObject12() {
4229
4257
  return data;
@@ -4233,7 +4261,7 @@ function _templateObject12() {
4233
4261
  }
4234
4262
 
4235
4263
  function _templateObject11() {
4236
- var data = taggedTemplateLiteral(["\n color:#707070;\n font-size:12px;\n padding:8px;\n font-weight:bold;\n cursor:default;\n white-space: nowrap;\n"]);
4264
+ var data = taggedTemplateLiteral(["\n color: #707070;\n font-size: 12px;\n padding: 8px;\n font-weight: bold;\n cursor: default;\n white-space: nowrap;\n"]);
4237
4265
 
4238
4266
  _templateObject11 = function _templateObject11() {
4239
4267
  return data;
@@ -4243,7 +4271,7 @@ function _templateObject11() {
4243
4271
  }
4244
4272
 
4245
4273
  function _templateObject10() {
4246
- var data = taggedTemplateLiteral(["\n background: ", ";\n border-radius: ", ";\n border:1px solid ", ";\n height:16px;\n width:16px;\n border-radius:2px;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin-right:9px;\n &:focus{\n border-color:", ";\n box-shadow:0 0 6px ", ";\n }\n\n"]);
4274
+ var data = taggedTemplateLiteral(["\n background: ", ";\n border-radius: ", ";\n border: 1px solid ", ";\n height: 16px;\n width: 16px;\n border-radius: ", ";\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin-right: 9px;\n\n &:focus {\n border-color: ", ";\n box-shadow: 0 0 6px ", ";\n }\n\n"]);
4247
4275
 
4248
4276
  _templateObject10 = function _templateObject10() {
4249
4277
  return data;
@@ -4253,7 +4281,7 @@ function _templateObject10() {
4253
4281
  }
4254
4282
 
4255
4283
  function _templateObject9$1() {
4256
- var data = taggedTemplateLiteral(["\n height:22px;\n width:22px;\n overflow:hidden;\n border-radius:100%;\n border:1px solid #516F90;\n background:#EAF0F6;\n margin-right:5px;\n display:flex;\n justify-content:center;\n align-items:center;\n\n >svg {\n margin-top:2px;\n }\n\n >img {\n width:25px;\n height:25px;\n object-fit:cover;\n object-position:center;\n }\n"]);
4284
+ var data = taggedTemplateLiteral(["\n height: 22px;\n width: 22px;\n overflow: hidden;\n border-radius: 100%;\n border: 1px solid #516F90;\n background: #EAF0F6;\n margin-right: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n\n > svg {\n margin-top: 2px;\n }\n\n > img {\n width: 25px;\n height: 25px;\n object-fit: cover;\n object-position: center;\n }\n"]);
4257
4285
 
4258
4286
  _templateObject9$1 = function _templateObject9() {
4259
4287
  return data;
@@ -4273,7 +4301,7 @@ function _templateObject8$1() {
4273
4301
  }
4274
4302
 
4275
4303
  function _templateObject7$1() {
4276
- var data = taggedTemplateLiteral(["\n color:", "\n"]);
4304
+ var data = taggedTemplateLiteral(["\n color: ", "\n"]);
4277
4305
 
4278
4306
  _templateObject7$1 = function _templateObject7() {
4279
4307
  return data;
@@ -4283,7 +4311,7 @@ function _templateObject7$1() {
4283
4311
  }
4284
4312
 
4285
4313
  function _templateObject6$1() {
4286
- var data = taggedTemplateLiteral(["\n font-size:", ";\n font-weight:normal;\n font-family:Circe-Rounded;\n display:block;\n color:#516F90;\n margin-top:4px;\n"]);
4314
+ var data = taggedTemplateLiteral(["\n font-size: ", ";\n font-weight: normal;\n font-family: \"Huninn\", sans-serif;\n display: block;\n color: #516F90;\n margin-top: 4px;\n"]);
4287
4315
 
4288
4316
  _templateObject6$1 = function _templateObject6() {
4289
4317
  return data;
@@ -4293,7 +4321,7 @@ function _templateObject6$1() {
4293
4321
  }
4294
4322
 
4295
4323
  function _templateObject5$1() {
4296
- var data = taggedTemplateLiteral(["\n max-height: ", "px;\n overflow-y:scroll;\n\n >li {\n padding-right: 8px;\n height: auto;\n min-height: 32px;\n justify-content: flex-start;\n }\n"]);
4324
+ var data = taggedTemplateLiteral(["\n max-height: ", "px;\n overflow-y: scroll;\n\n > li {\n padding-right: 8px;\n height: auto;\n min-height: 32px;\n justify-content: flex-start;\n }\n"]);
4297
4325
 
4298
4326
  _templateObject5$1 = function _templateObject5() {
4299
4327
  return data;
@@ -4303,7 +4331,7 @@ function _templateObject5$1() {
4303
4331
  }
4304
4332
 
4305
4333
  function _templateObject4$3() {
4306
- var data = taggedTemplateLiteral(["\n padding:0;\n margin:4px 0;\n background:white;\n border:1px solid ", ";\n box-shadow:0 0 6px ", ";\n border-radius:2px;\n list-style:none;\n width:auto;\n display:inline-block;\n position: absolute;\n top: 100%;\n ", "\n left: -1px;\n z-index:10;\n ", "\n\n\n ", "\n\n\n li {\n font-size:", ";\n color:#707070;\n height:32px;\n cursor:pointer;\n padding:0px 4px 0 8px;\n position:relative;\n display:flex;\n justify-content:space-between;\n align-items:center;\n\n >ul {\n display:none;\n }\n\n &::before {\n content: \" \";\n height: 100%;\n width: 6px;\n background: transparent;\n display: block;\n position: absolute;\n right: -7px;\n }\n\n\n &:hover {\n background:", ";\n\n >ul {\n display:inline-block;\n }\n }\n\n &.alone {\n border-top:1px solid ", ";\n }\n\n }\n"]);
4334
+ var data = taggedTemplateLiteral(["\n padding: 0;\n margin: 4px 0;\n background: white;\n border: 1px solid ", ";\n box-shadow: 0 0 6px ", ";\n border-radius: ", ";\n list-style: none;\n width: auto;\n display: inline-block;\n position: absolute;\n top: 100%;\n ", "\n left: -1px;\n z-index: 10;\n\n ", "\n ", "\n li {\n font-size: ", ";\n color: #707070;\n height: 32px;\n cursor: pointer;\n padding: 0px 4px 0 8px;\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > ul {\n display: none;\n }\n\n &::before {\n content: \" \";\n height: 100%;\n width: 6px;\n background: transparent;\n display: block;\n position: absolute;\n right: -7px;\n }\n\n\n &:hover {\n background: ", ";\n\n > ul {\n display: inline-block;\n }\n }\n\n &.alone {\n border-top: 1px solid ", ";\n }\n\n }\n"]);
4307
4335
 
4308
4336
  _templateObject4$3 = function _templateObject4() {
4309
4337
  return data;
@@ -4313,7 +4341,7 @@ function _templateObject4$3() {
4313
4341
  }
4314
4342
 
4315
4343
  function _templateObject3$3() {
4316
- var data = taggedTemplateLiteral(["\n white-space: nowrap;\n overflow:hidden;\n color: ", ";\n\n ", "\n\n >span {\n color:#707070;\n }\n"]);
4344
+ var data = taggedTemplateLiteral(["\n white-space: nowrap;\n overflow: hidden;\n color: ", ";\n\n ", "\n > span {\n color: #707070;\n }\n"]);
4317
4345
 
4318
4346
  _templateObject3$3 = function _templateObject3() {
4319
4347
  return data;
@@ -4323,7 +4351,7 @@ function _templateObject3$3() {
4323
4351
  }
4324
4352
 
4325
4353
  function _templateObject2$3() {
4326
- var data = taggedTemplateLiteral(["\n width:", ";\n height:40px;\n background:white;\n border-radius:2px;\n border:1px solid ", ";\n cursor:pointer;\n position:relative;\n box-sizing:border-box;\n padding:12px 8px;\n display:flex;\n align-items:center;\n justify-content:space-between;\n\n &.open {\n border-color:", ";\n box-shadow:0 0 6px ", ";\n }\n\n &.error {\n border-color:", ";\n }\n\n &.error.open {\n border-color:", ";\n box-shadow:0 0 6px ", ";\n }\n\n &.valid {\n border-color:", ";\n }\n\n &.valid.open {\n border-color:", ";\n box-shadow:0 0 6px ", ";\n }\n\n &[disabled] {\n cursor: not-allowed;\n background: ", ";\n border-color: ", ";\n color: ", ";\n }\n\n &[disabled] input::placeholder {\n color:#eee;\n }\n"]);
4354
+ var data = taggedTemplateLiteral(["\n width: ", ";\n height: 40px;\n background: white;\n border-radius: ", ";\n border: 1px solid ", ";\n cursor: pointer;\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n &:hover {\n border-color: ", ";\n }\n\n &.open {\n border-color: ", ";\n box-shadow: 0 0 6px ", ";\n }\n\n &.error {\n border-color: ", ";\n }\n\n &.error.open {\n border-color: ", ";\n box-shadow: 0 0 6px ", ";\n }\n\n &.valid {\n border-color: ", ";\n }\n\n &.valid.open {\n border-color: ", ";\n box-shadow: 0 0 6px ", ";\n }\n\n &[disabled] {\n cursor: not-allowed;\n background: ", ";\n border-color: ", ";\n color: ", ";\n }\n\n &[disabled] input::placeholder {\n color: #eee;\n }\n"]);
4327
4355
 
4328
4356
  _templateObject2$3 = function _templateObject2() {
4329
4357
  return data;
@@ -4333,7 +4361,7 @@ function _templateObject2$3() {
4333
4361
  }
4334
4362
 
4335
4363
  function _templateObject$6() {
4336
- var data = taggedTemplateLiteral(["\n display:inline-block;\n vertical-align: top;\n"]);
4364
+ var data = taggedTemplateLiteral(["\n display: inline-block;\n vertical-align: top;\n"]);
4337
4365
 
4338
4366
  _templateObject$6 = function _templateObject() {
4339
4367
  return data;
@@ -4362,7 +4390,7 @@ var handleSize$2 = function handleSize(sizeType) {
4362
4390
  var SelectUi$1 = styled__default.div(_templateObject2$3(), function (_ref) {
4363
4391
  var size = _ref.size;
4364
4392
  return handleSize$2(size);
4365
- }, theme.colors.neutrals.silver, theme.colors.secondary, theme.colors.action, theme.colors.error.border, theme.colors.error.border, theme.colors.error.shadow, theme.colors.success.border, theme.colors.success.border, theme.colors.success.shadow, theme.colors.extra.whiteSmoke, theme.colors.neutrals.silver, theme.colors.neutrals.medium);
4393
+ }, theme.defaultRadius, theme.colors.neutrals.silver, theme.colors.info.border, theme.colors.secondary, theme.colors.action, theme.colors.error.border, theme.colors.error.border, theme.colors.error.shadow, theme.colors.success.border, theme.colors.success.border, theme.colors.success.shadow, theme.colors.extra.whiteSmoke, theme.colors.neutrals.silver, theme.colors.neutrals.medium);
4366
4394
  var Value$1 = styled__default(Text).attrs(function (props) {
4367
4395
  return {
4368
4396
  as: 'span'
@@ -4372,7 +4400,7 @@ var Value$1 = styled__default(Text).attrs(function (props) {
4372
4400
  });
4373
4401
  var maxOptions = 3;
4374
4402
  var optionsSize = 32;
4375
- var Options$1 = styled__default.ul(_templateObject4$3(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, function (props) {
4403
+ var Options$1 = styled__default.ul(_templateObject4$3(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, theme.defaultRadius, function (props) {
4376
4404
  return props.openTo === 'top' && "\n top:unset;\n bottom: 100%;\n ";
4377
4405
  }, function (props) {
4378
4406
  return !props.hasChildren && "\n max-height: ".concat(props.visibleOptionsQty ? props.visibleOptionsQty * optionsSize : maxOptions * optionsSize, "px;\n overflow-x:hidden;\n overflow-y:scroll;\n ");
@@ -4387,7 +4415,7 @@ var Span$1 = styled__default.span(_templateObject6$1(), theme.font.extraSmall.si
4387
4415
  var SpanError$2 = styled__default(Span$1)(_templateObject7$1(), theme.colors.error.text);
4388
4416
  var SelectHidden = styled__default.select(_templateObject8$1());
4389
4417
  var PhotoCover = styled__default.div(_templateObject9$1());
4390
- var CustomCheckBox = styled__default.div(_templateObject10(), theme.colors.neutrals.white, theme.defaultRadius, theme.colors.neutrals.silver, theme.colors.secondary, theme.colors.action);
4418
+ var CustomCheckBox = styled__default.div(_templateObject10(), theme.colors.neutrals.white, theme.defaultRadius, theme.colors.neutrals.silver, theme.defaultRadius, theme.colors.secondary, theme.colors.action);
4391
4419
  var OptionGroup$1 = styled__default.div(_templateObject11());
4392
4420
  var ColorOption = styled__default.span(_templateObject12(), function (props) {
4393
4421
  return props.color ? props.color : 'black';
@@ -4405,48 +4433,214 @@ var getSelected = function getSelected(options, defaultValue) {
4405
4433
  return selected;
4406
4434
  };
4407
4435
 
4408
- var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
4409
- var name = _ref2.name,
4410
- label = _ref2.label,
4411
- help = _ref2.help,
4436
+ var SearchInput = styled__default.input(_templateObject13(), theme.font.medium.size, theme.font.medium.lineHeight, theme.colors.neutrals.gray, function (props) {
4437
+ return props.hasSelection ? theme.colors.neutrals.gray : theme.colors.neutrals.medium;
4438
+ });
4439
+ var ToggleButton = styled__default.button(_templateObject14());
4440
+
4441
+ var isOption = function isOption(item) {
4442
+ return item.value !== undefined && item.value !== null;
4443
+ };
4444
+
4445
+ var flattenOptions = function flattenOptions(options) {
4446
+ var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
4447
+ return (options || []).reduce(function (rows, item) {
4448
+ return rows.concat({
4449
+ item: item,
4450
+ depth: depth
4451
+ }, flattenOptions(item.options, depth + 1));
4452
+ }, []);
4453
+ }; // option names can be React elements, typing and inline completion need their text
4454
+
4455
+
4456
+ var optionText = function optionText(node) {
4457
+ if (node === undefined || node === null || typeof node === 'boolean') return '';
4458
+ if (typeof node === 'string' || typeof node === 'number') return node.toString();
4459
+ if (Array.isArray(node)) return node.map(optionText).join('');
4460
+ return node.props ? optionText(node.props.children) : '';
4461
+ };
4462
+
4463
+ var keepInViewport = function keepInViewport(node) {
4464
+ if (node && node.getBoundingClientRect().right > window.innerWidth) {
4465
+ node.style.left = 'unset';
4466
+ node.style.right = '0px';
4467
+ }
4468
+ }; // eslint-disable-next-line react/prop-types
4469
+
4470
+
4471
+ var AutocompleteSelect = function AutocompleteSelect(_ref2) {
4472
+ var options = _ref2.options,
4473
+ selectedOpt = _ref2.selectedOpt,
4474
+ setSelected = _ref2.setSelected,
4475
+ onChange = _ref2.onChange,
4476
+ onSelect = _ref2.onSelect,
4477
+ placeholder = _ref2.placeholder,
4412
4478
  error = _ref2.error,
4413
4479
  valid = _ref2.valid,
4414
- options = _ref2.options,
4415
- placeholder = _ref2.placeholder,
4416
- onChange = _ref2.onChange,
4417
- defaultValue = _ref2.defaultValue,
4480
+ noOptions = _ref2.noOptions,
4418
4481
  visibleOptionsQty = _ref2.visibleOptionsQty,
4419
4482
  openTo = _ref2.openTo,
4420
- _ref2$startOpen = _ref2.startOpen,
4421
- startOpen = _ref2$startOpen === void 0 ? false : _ref2$startOpen,
4422
- props = objectWithoutProperties(_ref2, ["name", "label", "help", "error", "valid", "options", "placeholder", "onChange", "defaultValue", "visibleOptionsQty", "openTo", "startOpen"]);
4483
+ startOpen = _ref2.startOpen,
4484
+ resetCallback = _ref2.resetCallback,
4485
+ props = objectWithoutProperties(_ref2, ["options", "selectedOpt", "setSelected", "onChange", "onSelect", "placeholder", "error", "valid", "noOptions", "visibleOptionsQty", "openTo", "startOpen", "resetCallback"]);
4486
+
4487
+ var _useState = React.useState(),
4488
+ _useState2 = slicedToArray(_useState, 2),
4489
+ search = _useState2[0],
4490
+ setSearch = _useState2[1];
4491
+
4492
+ var rows = flattenOptions(options);
4493
+ var selectable = rows.filter(function (row) {
4494
+ return isOption(row.item);
4495
+ }).map(function (row) {
4496
+ return row.item;
4497
+ });
4498
+
4499
+ var filterItems = function filterItems(text) {
4500
+ return text ? selectable.filter(function (item) {
4501
+ return optionText(item.name).toLowerCase().startsWith(text.toLowerCase());
4502
+ }) : selectable;
4503
+ };
4504
+
4505
+ var items = filterItems(search);
4506
+ var hasSelection = selectedOpt.value.length > 0;
4507
+ var selectedText = optionText(selectedOpt.desc);
4508
+
4509
+ var _useCombobox = reactAutocomplete.useCombobox({
4510
+ items: items,
4511
+ value: search || '',
4512
+ onChange: setSearch,
4513
+ selected: selectable.find(function (item) {
4514
+ return item.value.toString() === selectedOpt.value;
4515
+ }),
4516
+ onSelectChange: function onSelectChange(item) {
4517
+ if (!item) return;
4518
+ if (onSelect) onSelect(item);
4519
+ setSelected({
4520
+ value: item.value.toString(),
4521
+ desc: item.name
4522
+ });
4523
+ if (onChange) onChange(item);
4524
+ },
4525
+ isEqual: function isEqual(a, b) {
4526
+ return a === b || !!a && !!b && a.value == b.value;
4527
+ },
4528
+ getItemValue: function getItemValue(item) {
4529
+ return optionText(item.name);
4530
+ },
4531
+ disabled: props.disabled,
4532
+ feature: reactAutocomplete.supercomplete({
4533
+ onRequestItem: function onRequestItem(_ref3, res) {
4534
+ var value = _ref3.value;
4535
+ var matches = filterItems(value);
4536
+ if (matches.length > 0) res({
4537
+ index: 0,
4538
+ item: matches[0]
4539
+ });
4540
+ },
4541
+ select: true,
4542
+ deselectOnClear: false
4543
+ })
4544
+ }),
4545
+ getInputProps = _useCombobox.getInputProps,
4546
+ getToggleProps = _useCombobox.getToggleProps,
4547
+ getListProps = _useCombobox.getListProps,
4548
+ getItemProps = _useCombobox.getItemProps,
4549
+ open = _useCombobox.open,
4550
+ setOpen = _useCombobox.setOpen,
4551
+ focusIndex = _useCombobox.focusIndex;
4552
+
4553
+ React.useEffect(function () {
4554
+ if (startOpen) setOpen(true);
4555
+ }, []);
4556
+ var index = -1;
4557
+ return /*#__PURE__*/React__default.createElement(SelectUi$1, _extends_1({
4558
+ className: [open && 'open', error && 'error', valid && 'valid'].filter(Boolean).join(' ')
4559
+ }, props, {
4560
+ title: selectedText
4561
+ }), /*#__PURE__*/React__default.createElement(SearchInput, _extends_1({
4562
+ placeholder: hasSelection ? selectedText : placeholder,
4563
+ hasSelection: hasSelection
4564
+ }, getInputProps())), /*#__PURE__*/React__default.createElement(ToggleButton, getToggleProps(), open ? /*#__PURE__*/React__default.createElement(Icons.ArrowUp, {
4565
+ size: "15px",
4566
+ color: theme.colors.info.border
4567
+ }) : /*#__PURE__*/React__default.createElement(Icons.ArrowDown, {
4568
+ size: "15px",
4569
+ color: theme.colors.info.border
4570
+ })), open && /*#__PURE__*/React__default.createElement(Options$1, _extends_1({
4571
+ visibleOptionsQty: visibleOptionsQty,
4572
+ openTo: openTo,
4573
+ ref: keepInViewport
4574
+ }, getListProps()), items.length === 0 && /*#__PURE__*/React__default.createElement("li", {
4575
+ style: {
4576
+ paddingRight: '8px'
4577
+ }
4578
+ }, noOptions || 'No data found'), (search ? items.map(function (item) {
4579
+ return {
4580
+ item: item,
4581
+ depth: 0
4582
+ };
4583
+ }) : rows).map(function (_ref4, key) {
4584
+ var item = _ref4.item,
4585
+ depth = _ref4.depth;
4586
+
4587
+ if (!isOption(item)) {
4588
+ return /*#__PURE__*/React__default.createElement(OptionGroup$1, {
4589
+ key: key,
4590
+ style: {
4591
+ paddingLeft: 8 + depth * 16
4592
+ }
4593
+ }, item.name);
4594
+ }
4595
+
4596
+ index++;
4597
+ return /*#__PURE__*/React__default.createElement("li", _extends_1({
4598
+ key: key,
4599
+ className: item.divider ? 'alone' : '',
4600
+ style: {
4601
+ paddingLeft: 8 + depth * 16,
4602
+ background: focusIndex === index ? theme.colors.info.bg : undefined
4603
+ }
4604
+ }, getItemProps({
4605
+ item: item,
4606
+ index: index
4607
+ })), /*#__PURE__*/React__default.createElement(Value$1, {
4608
+ option: true,
4609
+ style: {
4610
+ marginRight: 4
4611
+ }
4612
+ }, item.name));
4613
+ })));
4614
+ };
4615
+
4616
+ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
4617
+ var name = _ref5.name,
4618
+ label = _ref5.label,
4619
+ help = _ref5.help,
4620
+ error = _ref5.error,
4621
+ valid = _ref5.valid,
4622
+ options = _ref5.options,
4623
+ placeholder = _ref5.placeholder,
4624
+ onChange = _ref5.onChange,
4625
+ defaultValue = _ref5.defaultValue,
4626
+ visibleOptionsQty = _ref5.visibleOptionsQty,
4627
+ openTo = _ref5.openTo,
4628
+ _ref5$startOpen = _ref5.startOpen,
4629
+ startOpen = _ref5$startOpen === void 0 ? false : _ref5$startOpen,
4630
+ props = objectWithoutProperties(_ref5, ["name", "label", "help", "error", "valid", "options", "placeholder", "onChange", "defaultValue", "visibleOptionsQty", "openTo", "startOpen"]);
4423
4631
 
4424
4632
  var defaultSelected = {
4425
4633
  value: '',
4426
4634
  desc: ''
4427
4635
  };
4428
4636
 
4429
- var _useState = React.useState(startOpen),
4430
- _useState2 = slicedToArray(_useState, 2),
4431
- open = _useState2[0],
4432
- setOpen = _useState2[1];
4433
-
4434
4637
  var _useState3 = React.useState(defaultSelected),
4435
4638
  _useState4 = slicedToArray(_useState3, 2),
4436
4639
  selectedOpt = _useState4[0],
4437
4640
  setSelected = _useState4[1];
4438
4641
 
4439
- var nodeSelect = React.useRef();
4440
4642
  var valueRef = React.useRef();
4441
4643
 
4442
- var handleClick = function handleClick(e) {
4443
- if (nodeSelect.current.contains(e.target)) {
4444
- return;
4445
- }
4446
-
4447
- setOpen(false);
4448
- };
4449
-
4450
4644
  var reset = function reset() {
4451
4645
  setSelected(defaultSelected);
4452
4646
  };
@@ -4465,28 +4659,28 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
4465
4659
  };
4466
4660
  setSelected(defaultSelected);
4467
4661
  } else {
4468
- if (!valueRef.current.value) return;
4662
+ if (!valueRef.current.value) {
4663
+ return;
4664
+ }
4665
+
4469
4666
  var selected = getSelected(options, valueRef.current.value);
4470
- if (selected && selected.value && selected.value !== selectedOpt.value) setSelected({
4471
- value: selected.value.toString(),
4472
- desc: selected.name
4473
- });
4667
+
4668
+ if (selected && selected.value && selected.value !== selectedOpt.value) {
4669
+ setSelected({
4670
+ value: selected.value.toString(),
4671
+ desc: selected.name
4672
+ });
4673
+ }
4474
4674
  }
4475
4675
  });
4476
4676
  React.useEffect(function () {
4477
- //if(defaultValue){
4478
- if (options) setDefaultValues(); //}
4677
+ // if(defaultValue){
4678
+ if (options) setDefaultValues(); // }
4479
4679
  }, [options, defaultValue]);
4480
4680
  React.useEffect(function () {
4481
4681
  valueRef.current.value = selectedOpt.value;
4482
4682
  valueRef.current.dispatchEvent(new Event('blur'));
4483
4683
  }, [selectedOpt]);
4484
- React.useEffect(function () {
4485
- document.addEventListener("mousedown", handleClick);
4486
- return function () {
4487
- document.removeEventListener("mousedown", handleClick);
4488
- };
4489
- }, []);
4490
4684
  var useIcon = false;
4491
4685
  if (props.Required) useIcon = /*#__PURE__*/React__default.createElement(RequiredText, null);
4492
4686
 
@@ -4500,32 +4694,18 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
4500
4694
  htmlFor: name
4501
4695
  }, label), label && useIcon && /*#__PURE__*/React__default.createElement(Label, {
4502
4696
  htmlFor: name
4503
- }, label, " ", useIcon), /*#__PURE__*/React__default.createElement(SelectUi$1, _extends_1({
4504
- onClick: function onClick() {
4505
- if (!props.disabled) setOpen(!open);
4506
- },
4507
- ref: nodeSelect,
4508
- className: [open && 'open', error && 'error', valid && 'valid']
4509
- }, props, {
4510
- title: selectedOpt ? selectedOpt.desc : ''
4511
- }), /*#__PURE__*/React__default.createElement(Value$1, null, selectedOpt.value.length > 0 ? selectedOpt.desc : /*#__PURE__*/React__default.createElement("span", null, placeholder)), open ? /*#__PURE__*/React__default.createElement(Icons.ArrowUp, {
4512
- size: "15px",
4513
- color: theme.colors.info.border
4514
- }) : /*#__PURE__*/React__default.createElement(Icons.ArrowDown, {
4515
- size: "15px",
4516
- color: theme.colors.info.border
4517
- }), open && /*#__PURE__*/React__default.createElement(BoxOptions, {
4697
+ }, label, " ", useIcon), /*#__PURE__*/React__default.createElement(AutocompleteSelect, _extends_1({
4518
4698
  options: options,
4699
+ selectedOpt: selectedOpt,
4519
4700
  setSelected: setSelected,
4520
4701
  onChange: onChange,
4521
- reset: reset,
4522
- noOptions: props.noOptions,
4523
- selectedOpt: selectedOpt.value,
4524
- setOpen: setOpen,
4525
- onSelect: props.onSelect,
4702
+ placeholder: placeholder,
4703
+ error: error,
4704
+ valid: valid,
4526
4705
  visibleOptionsQty: visibleOptionsQty,
4527
- openTo: openTo
4528
- })), help && /*#__PURE__*/React__default.createElement(Span$1, null, help), error && /*#__PURE__*/React__default.createElement(SpanError$2, null, /*#__PURE__*/React__default.createElement("img", {
4706
+ openTo: openTo,
4707
+ startOpen: startOpen
4708
+ }, props)), help && /*#__PURE__*/React__default.createElement(Span$1, null, help), error && /*#__PURE__*/React__default.createElement(SpanError$2, null, /*#__PURE__*/React__default.createElement("img", {
4529
4709
  src: Ex,
4530
4710
  style: {
4531
4711
  marginRight: '6px'
@@ -4538,22 +4718,26 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
4538
4718
  }));
4539
4719
  }); // eslint-disable-next-line react/prop-types
4540
4720
 
4541
- var BoxOptions = function BoxOptions(_ref3) {
4542
- var options = _ref3.options,
4543
- isChild = _ref3.isChild,
4544
- setSelected = _ref3.setSelected,
4545
- onChange = _ref3.onChange,
4546
- noOptions = _ref3.noOptions,
4547
- selectedOpt = _ref3.selectedOpt,
4548
- setOpen = _ref3.setOpen,
4549
- onSelect = _ref3.onSelect,
4550
- visibleOptionsQty = _ref3.visibleOptionsQty,
4551
- openTo = _ref3.openTo;
4552
- if (!options) return /*#__PURE__*/React__default.createElement(Options$1, null, /*#__PURE__*/React__default.createElement("li", {
4553
- style: {
4554
- paddingRight: '8px'
4555
- }
4556
- }, noOptions ? noOptions : 'No data found'));
4721
+ var BoxOptions = function BoxOptions(_ref6) {
4722
+ var options = _ref6.options,
4723
+ isChild = _ref6.isChild,
4724
+ setSelected = _ref6.setSelected,
4725
+ onChange = _ref6.onChange,
4726
+ noOptions = _ref6.noOptions,
4727
+ selectedOpt = _ref6.selectedOpt,
4728
+ setOpen = _ref6.setOpen,
4729
+ onSelect = _ref6.onSelect,
4730
+ visibleOptionsQty = _ref6.visibleOptionsQty,
4731
+ openTo = _ref6.openTo;
4732
+
4733
+ if (!options) {
4734
+ return /*#__PURE__*/React__default.createElement(Options$1, null, /*#__PURE__*/React__default.createElement("li", {
4735
+ style: {
4736
+ paddingRight: '8px'
4737
+ }
4738
+ }, noOptions || 'No data found'));
4739
+ }
4740
+
4557
4741
  var optionsRef = React.useRef();
4558
4742
 
4559
4743
  var handleClick = function handleClick(item, e) {
@@ -4576,8 +4760,8 @@ var BoxOptions = function BoxOptions(_ref3) {
4576
4760
  var optionsBounds = optionsRef.current.getBoundingClientRect();
4577
4761
 
4578
4762
  if (optionsBounds.right > window.innerWidth) {
4579
- optionsRef.current.style.left = "unset";
4580
- optionsRef.current.style.right = "0px";
4763
+ optionsRef.current.style.left = 'unset';
4764
+ optionsRef.current.style.right = '0px';
4581
4765
  }
4582
4766
  }
4583
4767
  }, []);
@@ -4616,22 +4800,22 @@ var BoxOptions = function BoxOptions(_ref3) {
4616
4800
  })) : /*#__PURE__*/React__default.createElement(OptionGroup$1, null, item.name));
4617
4801
  }));
4618
4802
  };
4619
- var CustomDropdown = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
4620
- var name = _ref4.name,
4621
- label = _ref4.label,
4622
- help = _ref4.help,
4623
- error = _ref4.error,
4624
- valid = _ref4.valid,
4625
- options = _ref4.options,
4626
- placeholder = _ref4.placeholder,
4627
- defaultValue = _ref4.defaultValue,
4628
- multiple = _ref4.multiple,
4629
- type = _ref4.type,
4630
- tooltip = _ref4.tooltip,
4631
- onChange = _ref4.onChange,
4632
- visibleOptionsQty = _ref4.visibleOptionsQty,
4633
- openTo = _ref4.openTo,
4634
- props = objectWithoutProperties(_ref4, ["name", "label", "help", "error", "valid", "options", "placeholder", "defaultValue", "multiple", "type", "tooltip", "onChange", "visibleOptionsQty", "openTo"]);
4803
+ var CustomDropdown = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
4804
+ var name = _ref7.name,
4805
+ label = _ref7.label,
4806
+ help = _ref7.help,
4807
+ error = _ref7.error,
4808
+ valid = _ref7.valid,
4809
+ options = _ref7.options,
4810
+ placeholder = _ref7.placeholder,
4811
+ defaultValue = _ref7.defaultValue,
4812
+ multiple = _ref7.multiple,
4813
+ type = _ref7.type,
4814
+ tooltip = _ref7.tooltip,
4815
+ onChange = _ref7.onChange,
4816
+ visibleOptionsQty = _ref7.visibleOptionsQty,
4817
+ openTo = _ref7.openTo,
4818
+ props = objectWithoutProperties(_ref7, ["name", "label", "help", "error", "valid", "options", "placeholder", "defaultValue", "multiple", "type", "tooltip", "onChange", "visibleOptionsQty", "openTo"]);
4635
4819
 
4636
4820
  var _useState5 = React.useState(false),
4637
4821
  _useState6 = slicedToArray(_useState5, 2),
@@ -4647,8 +4831,16 @@ var CustomDropdown = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
4647
4831
  var valueRef = React.useRef();
4648
4832
 
4649
4833
  var handlOpenSelect = function handlOpenSelect(e) {
4650
- if (props.disabled) return;
4651
- if (multiple) if (e.target.classList.contains('1010list-option')) return;
4834
+ if (props.disabled) {
4835
+ return;
4836
+ }
4837
+
4838
+ if (multiple) {
4839
+ if (e.target.classList.contains('1010list-option')) {
4840
+ return;
4841
+ }
4842
+ }
4843
+
4652
4844
  setOpen(!open);
4653
4845
  };
4654
4846
 
@@ -4661,14 +4853,17 @@ var CustomDropdown = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
4661
4853
  }
4662
4854
 
4663
4855
  var handleClick = function handleClick(e) {
4664
- if (nodeSelect.current.contains(e.target)) return;
4856
+ if (nodeSelect.current.contains(e.target)) {
4857
+ return;
4858
+ }
4859
+
4665
4860
  setOpen(false);
4666
4861
  };
4667
4862
 
4668
4863
  React.useEffect(function () {
4669
- document.addEventListener("mousedown", handleClick);
4864
+ document.addEventListener('mousedown', handleClick);
4670
4865
  return function () {
4671
- document.removeEventListener("mousedown", handleClick);
4866
+ document.removeEventListener('mousedown', handleClick);
4672
4867
  };
4673
4868
  }, []);
4674
4869
  var setDefaultValues = React.useCallback(function () {
@@ -4681,7 +4876,9 @@ var CustomDropdown = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
4681
4876
  }).map(function (opt) {
4682
4877
  return opt.value;
4683
4878
  });
4684
- } else defaultValue = defaultValue || valueRef.current.value;
4879
+ } else {
4880
+ defaultValue = defaultValue || valueRef.current.value;
4881
+ }
4685
4882
  }
4686
4883
 
4687
4884
  if (options) {
@@ -4708,9 +4905,13 @@ var CustomDropdown = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
4708
4905
  if (multiple) {
4709
4906
  if (selectedOpt.length !== defaults.length || !selectedOpt.every(function (value, index) {
4710
4907
  return value === defaults[index];
4711
- })) setSelected(defaults);
4908
+ })) {
4909
+ setSelected(defaults);
4910
+ }
4712
4911
  } else {
4713
- if (selectedOpt[0] !== defaults[0]) setSelected([defaults[0]]);
4912
+ if (selectedOpt[0] !== defaults[0]) {
4913
+ setSelected([defaults[0]]);
4914
+ }
4714
4915
  }
4715
4916
  } // const hasDefault = getSelected(options,defaultValue);
4716
4917
  //
@@ -4728,13 +4929,20 @@ var CustomDropdown = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
4728
4929
 
4729
4930
  });
4730
4931
  React.useEffect(function () {
4731
- //if(defaultValue){
4732
- if (options) setDefaultValues(); //}
4932
+ // if(defaultValue){
4933
+ if (options) setDefaultValues(); // }
4733
4934
  }, [options, defaultValue]);
4734
4935
  React.useEffect(function () {
4735
- if (valueRef.current) if (multiple) Array.from(valueRef.current.children).map(function (opt, k) {
4736
- return opt.selected = selectedOpt.indexOf(k) !== -1;
4737
- });else if (options[selectedOpt]) valueRef.current.value = options[selectedOpt].value;
4936
+ if (valueRef.current) {
4937
+ if (multiple) {
4938
+ Array.from(valueRef.current.children).map(function (opt, k) {
4939
+ return opt.selected = selectedOpt.indexOf(k) !== -1;
4940
+ });
4941
+ } else if (options[selectedOpt]) {
4942
+ valueRef.current.value = options[selectedOpt].value;
4943
+ }
4944
+ }
4945
+
4738
4946
  valueRef.current.dispatchEvent(new Event('blur'));
4739
4947
  }, [selectedOpt]);
4740
4948
  var useIcon = false;
@@ -4824,27 +5032,38 @@ var HandleState = function HandleState(index, setSelected, selectedOpt, multiple
4824
5032
  }
4825
5033
  }
4826
5034
 
4827
- if (!multiple && ret.toString() === selectedOpt.toString()) return;
5035
+ if (!multiple && ret.toString() === selectedOpt.toString()) {
5036
+ return;
5037
+ }
5038
+
4828
5039
  var stateMap = options.filter(function (opt, index) {
4829
5040
  return ret.indexOf(index) !== -1;
4830
5041
  }).map(function (opt) {
4831
5042
  return opt.value;
4832
5043
  });
4833
- if (typeof onChange === 'function') onChange(multiple ? stateMap : stateMap[0]);
5044
+
5045
+ if (typeof onChange === 'function') {
5046
+ onChange(multiple ? stateMap : stateMap[0]);
5047
+ }
5048
+
4834
5049
  setSelected(ret);
4835
5050
  };
4836
5051
 
4837
- var SelectOption = function SelectOption(_ref5) {
4838
- var options = _ref5.options,
4839
- setSelected = _ref5.setSelected,
4840
- selectedOpt = _ref5.selectedOpt,
4841
- multiple = _ref5.multiple,
4842
- type = _ref5.type,
4843
- onChange = _ref5.onChange,
4844
- noOptions = _ref5.noOptions,
4845
- visibleOptionsQty = _ref5.visibleOptionsQty,
4846
- openTo = _ref5.openTo;
4847
- if (!options) return /*#__PURE__*/React__default.createElement(OptionsPeople, null, /*#__PURE__*/React__default.createElement("li", null, noOptions ? noOptions : 'No data found'));
5052
+ var SelectOption = function SelectOption(_ref8) {
5053
+ var options = _ref8.options,
5054
+ setSelected = _ref8.setSelected,
5055
+ selectedOpt = _ref8.selectedOpt,
5056
+ multiple = _ref8.multiple,
5057
+ type = _ref8.type,
5058
+ onChange = _ref8.onChange,
5059
+ noOptions = _ref8.noOptions,
5060
+ visibleOptionsQty = _ref8.visibleOptionsQty,
5061
+ openTo = _ref8.openTo;
5062
+
5063
+ if (!options) {
5064
+ return /*#__PURE__*/React__default.createElement(OptionsPeople, null, /*#__PURE__*/React__default.createElement("li", null, noOptions || 'No data found'));
5065
+ }
5066
+
4848
5067
  return /*#__PURE__*/React__default.createElement(OptionsPeople, {
4849
5068
  visibleOptionsQty: visibleOptionsQty,
4850
5069
  openTo: openTo
@@ -4874,9 +5093,9 @@ var SelectOption = function SelectOption(_ref5) {
4874
5093
  }));
4875
5094
  };
4876
5095
 
4877
- var PhotoComponent = function PhotoComponent(_ref6) {
4878
- var profile = _ref6.profile,
4879
- index = _ref6.index;
5096
+ var PhotoComponent = function PhotoComponent(_ref9) {
5097
+ var profile = _ref9.profile,
5098
+ index = _ref9.index;
4880
5099
  var customStyle = {
4881
5100
  position: 'relative',
4882
5101
  display: 'inline-flex',
@@ -4900,18 +5119,18 @@ var PhotoComponent = function PhotoComponent(_ref6) {
4900
5119
  }));
4901
5120
  };
4902
5121
 
4903
- var SelectValueRender = function SelectValueRender(_ref7) {
4904
- var options = _ref7.options,
4905
- selectedOpt = _ref7.selectedOpt,
4906
- type = _ref7.type,
4907
- noOptions = _ref7.noOptions;
5122
+ var SelectValueRender = function SelectValueRender(_ref10) {
5123
+ var options = _ref10.options,
5124
+ selectedOpt = _ref10.selectedOpt,
5125
+ type = _ref10.type,
5126
+ noOptions = _ref10.noOptions;
4908
5127
 
4909
5128
  if (!options) {
4910
5129
  return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
4911
5130
  style: {
4912
5131
  display: 'flex'
4913
5132
  }
4914
- }), /*#__PURE__*/React__default.createElement(Value$1, null, noOptions ? noOptions : 'No Data'));
5133
+ }), /*#__PURE__*/React__default.createElement(Value$1, null, noOptions || 'No Data'));
4915
5134
  }
4916
5135
 
4917
5136
  var Pictures = [];
@@ -5040,7 +5259,7 @@ function _templateObject8$2() {
5040
5259
  }
5041
5260
 
5042
5261
  function _templateObject7$2() {
5043
- var data = taggedTemplateLiteral(["\n font-size:", ";\n font-weight:normal;\n font-family:Circe-Rounded;\n display:block;\n color:#516F90;\n margin-top:4px;\n"]);
5262
+ var data = taggedTemplateLiteral(["\n font-size:", ";\n font-weight:normal;\n font-family:\"Huninn\", sans-serif;\n display:block;\n color:#516F90;\n margin-top:4px;\n"]);
5044
5263
 
5045
5264
  _templateObject7$2 = function _templateObject7() {
5046
5265
  return data;
@@ -5060,7 +5279,7 @@ function _templateObject6$2() {
5060
5279
  }
5061
5280
 
5062
5281
  function _templateObject5$2() {
5063
- var data = taggedTemplateLiteral(["\n font-family:circe-rounded;\n font-weight:normal;\n font-size:16px;\n color: #707070;\n\n >.requiredField {\n color:", ";\n }\n"]);
5282
+ var data = taggedTemplateLiteral(["\n font-family:\"Huninn\", sans-serif;\n font-weight:normal;\n font-size:16px;\n color: #707070;\n\n >.requiredField {\n color:", ";\n }\n"]);
5064
5283
 
5065
5284
  _templateObject5$2 = function _templateObject5() {
5066
5285
  return data;
@@ -5355,7 +5574,7 @@ function _templateObject7$3() {
5355
5574
  }
5356
5575
 
5357
5576
  function _templateObject6$3() {
5358
- var data = taggedTemplateLiteral(["\n list-style:none;\n padding:0 5px 3px;\n margin:0;\n display:flex;\n max-width: 300px;\n flex-wrap: wrap;\n\n &.small {\n max-width:140px;\n\n >li:not(.input) {\n white-space: pre-wrap;\n }\n }\n\n >li:not(.input) {\n border:1px solid #7C98B6;\n color:#516F90;\n background:#EAF0F6;\n padding:5px;\n margin-right:5px;\n border-radius:2px;\n font-size:12px;\n font-weight:500;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n white-space: nowrap;\n\n\n >svg {\n padding-left:8px;\n padding-right:3px;\n }\n\n }\n\n >li {\n margin-top:5px;\n input {\n display: inline-block;\n height: 30px;\n width:100%;\n min-width:80px;\n color:#333;\n font-size:14px;\n\n &::placeholder {\n color:#ccc;\n }\n }\n\n &.input {\n flex:1;\n }\n\n\n }\n"]);
5577
+ var data = taggedTemplateLiteral(["\n list-style:none;\n padding:0 5px 3px;\n margin:0;\n display:flex;\n max-width: 300px;\n flex-wrap: wrap;\n\n &.small {\n max-width:140px;\n\n >li:not(.input) {\n white-space: pre-wrap;\n }\n }\n\n >li:not(.input) {\n border:1px solid #7C98B6;\n color:#516F90;\n background:#EAF0F6;\n padding:5px;\n margin-right:5px;\n border-radius:", ";\n font-size:12px;\n font-weight:500;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n white-space: nowrap;\n\n\n >svg {\n padding-left:8px;\n padding-right:3px;\n }\n\n }\n\n >li {\n margin-top:5px;\n input {\n display: inline-block;\n height: 30px;\n width:100%;\n min-width:80px;\n color:#333;\n font-size:14px;\n\n &::placeholder {\n color:#ccc;\n }\n }\n\n &.input {\n flex:1;\n }\n\n\n }\n"]);
5359
5578
 
5360
5579
  _templateObject6$3 = function _templateObject6() {
5361
5580
  return data;
@@ -5365,7 +5584,7 @@ function _templateObject6$3() {
5365
5584
  }
5366
5585
 
5367
5586
  function _templateObject5$3() {
5368
- var data = taggedTemplateLiteral(["\n padding:0;\n margin:4px 0;\n background:white;\n border:1px solid ", ";\n box-shadow:0 0 6px ", ";\n border-radius:2px;\n list-style:none;\n width:auto;\n display:inline-block;\n position: absolute;\n top: 100%;\n ", "\n left: -1px;\n z-index:10;\n max-height: ", "px;\n overflow-x:hidden;\n overflow-y:scroll;\n\n li {\n font-size:", ";\n color:#707070;\n min-height:32px;\n cursor:pointer;\n padding: 8px;\n position:relative;\n box-sizing: border-box;\n\n >ul {\n display:none;\n }\n\n &.active,\n &:hover {\n background:", ";\n\n >ul {\n display:inline-block;\n }\n }\n\n }\n"]);
5587
+ var data = taggedTemplateLiteral(["\n padding:0;\n margin:4px 0;\n background:white;\n border:1px solid ", ";\n box-shadow:0 0 6px ", ";\n border-radius:", ";\n list-style:none;\n width:auto;\n display:inline-block;\n position: absolute;\n top: 100%;\n ", "\n left: -1px;\n z-index:10;\n max-height: ", "px;\n overflow-x:hidden;\n overflow-y:scroll;\n\n li {\n font-size:", ";\n color:#707070;\n min-height:32px;\n cursor:pointer;\n padding: 8px;\n position:relative;\n box-sizing: border-box;\n\n >ul {\n display:none;\n }\n\n &.active,\n &:hover {\n background:", ";\n\n >ul {\n display:inline-block;\n }\n }\n\n }\n"]);
5369
5588
 
5370
5589
  _templateObject5$3 = function _templateObject5() {
5371
5590
  return data;
@@ -5395,7 +5614,7 @@ function _templateObject3$5() {
5395
5614
  }
5396
5615
 
5397
5616
  function _templateObject2$5() {
5398
- var data = taggedTemplateLiteral(["\n font-size:", ";\n font-weight:normal;\n font-family:Circe-Rounded;\n display:block;\n color:#516F90;\n margin-top:4px;\n"]);
5617
+ var data = taggedTemplateLiteral(["\n font-size:", ";\n font-weight:normal;\n font-family:\"Huninn\", sans-serif;\n display:block;\n color:#516F90;\n margin-top:4px;\n"]);
5399
5618
 
5400
5619
  _templateObject2$5 = function _templateObject2() {
5401
5620
  return data;
@@ -5419,12 +5638,12 @@ var SpanError$4 = styled__default(Span$3)(_templateObject3$5(), theme.colors.err
5419
5638
  var Select = styled__default(InputBase)(_templateObject4$5(), theme.colors.neutrals.white, theme.colors.action, theme.colors.secondary, theme.colors.error.border);
5420
5639
  var maxOptions$1 = 5;
5421
5640
  var optionsSize$1 = 32;
5422
- var Options$2 = styled__default.ul(_templateObject5$3(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, function (props) {
5641
+ var Options$2 = styled__default.ul(_templateObject5$3(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, theme.defaultRadius, function (props) {
5423
5642
  return props.openTo === 'top' && "\n top:unset;\n bottom:100%;\n ";
5424
5643
  }, function (props) {
5425
5644
  return props.visibleOptionsQty ? props.visibleOptionsQty * optionsSize$1 : maxOptions$1 * optionsSize$1;
5426
5645
  }, theme.font.small.size, theme.colors.info.bg);
5427
- var TagsValues = styled__default.ul(_templateObject6$3());
5646
+ var TagsValues = styled__default.ul(_templateObject6$3(), theme.defaultRadius);
5428
5647
  var SelectHidden$1 = styled__default.select(_templateObject7$3());
5429
5648
  var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
5430
5649
  var _ref$name = _ref.name,
@@ -5854,7 +6073,7 @@ function _templateObject5$4() {
5854
6073
  }
5855
6074
 
5856
6075
  function _templateObject4$6() {
5857
- var data = taggedTemplateLiteral(["\n background:#fff;\n border-radius:2px;\n padding:5px;\n list-style:none;\n margin:0;\n display: grid;\n grid-template-columns: 24px 24px 24px 24px 24px 24px 24px 24px;\n position:absolute;\n left:48px;\n top:0;\n box-shadow: 0px 3px 6px ", "19;\n\n > li {\n width:24px;\n height:24px;\n cursor:pointer;\n position: relative;\n\n &.selected {\n z-index: 1;\n box-shadow: 0 0 0 2px ", ";\n border-radius: ", ";\n }\n\n &:hover {\n z-index: 2;\n box-shadow: 0 0 0 2px ", ";\n border-radius: ", ";\n }\n }\n"]);
6076
+ var data = taggedTemplateLiteral(["\n background:#fff;\n border-radius:", ";\n padding:5px;\n list-style:none;\n margin:0;\n display: grid;\n grid-template-columns: 24px 24px 24px 24px 24px 24px 24px 24px;\n position:absolute;\n left:48px;\n top:0;\n box-shadow: 0px 3px 6px ", "19;\n\n > li {\n width:24px;\n height:24px;\n cursor:pointer;\n position: relative;\n\n &.selected {\n z-index: 1;\n box-shadow: 0 0 0 2px ", ";\n border-radius: ", ";\n }\n\n &:hover {\n z-index: 2;\n box-shadow: 0 0 0 2px ", ";\n border-radius: ", ";\n }\n }\n"]);
5858
6077
 
5859
6078
  _templateObject4$6 = function _templateObject4() {
5860
6079
  return data;
@@ -5897,7 +6116,7 @@ var Field = styled__default.div(_templateObject2$6());
5897
6116
  var WraperBucket = styled__default.div(_templateObject3$6(), function (props) {
5898
6117
  return props.background ? props.background : theme.colors.info.shadow;
5899
6118
  }, theme.colors.action, theme.colors.secondary);
5900
- var ColorBox = styled__default.ul(_templateObject4$6(), theme.colors.neutrals.gray, theme.colors.secondary, theme.defaultRadius, theme.colors.neutrals.gray, theme.defaultRadius);
6119
+ var ColorBox = styled__default.ul(_templateObject4$6(), theme.defaultRadius, theme.colors.neutrals.gray, theme.colors.secondary, theme.defaultRadius, theme.colors.neutrals.gray, theme.defaultRadius);
5901
6120
  var SelectHidden$2 = styled__default.select(_templateObject5$4());
5902
6121
  var InputColor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
5903
6122
  var name = _ref.name,
@@ -6777,7 +6996,7 @@ function _templateObject2$7() {
6777
6996
  }
6778
6997
 
6779
6998
  function _templateObject$b() {
6780
- var data = taggedTemplateLiteral(["\n font-family:circe-rounded;\n font-weight:bold;\n border-radius:", ";\n cursor:pointer;\n display:inline-block;\n background:", "\n color:", "\n height:40px;\n line-height:40px;\n padding:0 16px;\n font-size: ", ";\n\n > * {\n border-color: ", ";\n }\n\n svg path {\n fill: ", ";\n }\n\n &:hover,\n &.hover {\n background:", ";\n }\n\n &:focus,\n &.focus {\n background:", ";\n box-shadow:", ";\n }\n\n &:active,\n &.active {\n background:", ";\n box-shadow:", ";\n }\n\n &.selected {\n border: 1px solid ", ";\n }\n\n &[disabled] {\n opacity: .5;\n cursor: not-allowed;\n }\n"]);
6999
+ var data = taggedTemplateLiteral(["\n font-family:\"Huninn\", sans-serif;\n font-weight:bold;\n border-radius:", ";\n cursor:pointer;\n display:inline-flex;\n background:", "\n color:", "\n height:40px;\n line-height:40px;\n padding:0 16px;\n font-size: ", ";\n align-items: center;\n gap: 4px;\n\n > * {\n border-color: ", ";\n }\n\n svg path {\n fill: currentColor;\n }\n\n &:hover,\n &.hover {\n background:", ";\n }\n\n &:focus,\n &.focus {\n background:", ";\n box-shadow:", ";\n }\n\n &:active,\n &.active {\n background:", ";\n box-shadow:", ";\n }\n\n &.selected {\n outline: 1px solid ", ";\n position: relative;\n z-index: 1;\n }\n\n &[disabled] {\n opacity: .5;\n cursor: not-allowed;\n }\n"]);
6781
7000
 
6782
7001
  _templateObject$b = function _templateObject() {
6783
7002
  return data;
@@ -6790,7 +7009,7 @@ var defaultShadow = function defaultShadow(color) {
6790
7009
  return "0px 0px 6px ".concat(color);
6791
7010
  };
6792
7011
 
6793
- var Base = styled__default.button(_templateObject$b(), theme.defaultRadius, theme.colors.info.bg, theme.colors.secondary, theme.font.medium.size, theme.colors.info.shadow, theme.colors.secondary, theme.colors.info.shadow, theme.colors.info.bg, defaultShadow(theme.form.button.secondary.bg), theme.colors.info.shadow, defaultShadow(theme.form.button.secondary.bg), theme.form.button.secondary.bg);
7012
+ var Base = styled__default.button(_templateObject$b(), theme.defaultRadius, theme.colors.info.bg, theme.colors.secondary, theme.font.medium.size, theme.colors.info.shadow, theme.colors.info.shadow, theme.colors.info.bg, defaultShadow(theme.form.button.secondary.bg), theme.colors.info.shadow, defaultShadow(theme.form.button.secondary.bg), theme.colors.secondary);
6794
7013
  var Primary = "\n background:".concat(theme.form.button.primary.bg, ";\n color:").concat(theme.colors.neutrals.white, ";\n\n > * {\n border-color: ").concat(theme.colors.neutrals.white, ";\n }\n\n svg path {\n fill: ").concat(theme.colors.neutrals.white, ";\n }\n\n &:hover,\n &.hover {\n background:").concat(theme.form.button.primary.hover, "\n }\n\n &:focus,\n &.focus {\n background:").concat(theme.form.button.primary.bg, ";\n box-shadow:").concat(defaultShadow(theme.form.button.primary.bg), ";\n }\n\n &:active,\n &.active {\n background:").concat(theme.form.button.primary.hover, "\n box-shadow:").concat(defaultShadow(theme.form.button.primary.bg), ";\n }\n\n &.selected {\n border: 1px solid ").concat(theme.colors.neutrals.white, ";\n }\n");
6795
7014
  var Secondary = "\n background:".concat(theme.form.button.secondary.bg, ";\n color:").concat(theme.colors.neutrals.white, ";\n\n > * {\n border-color: ").concat(theme.colors.neutrals.white, ";\n }\n\n svg path {\n fill: ").concat(theme.colors.neutrals.white, ";\n }\n\n &:hover {\n background:").concat(theme.form.button.secondary.hover, "\n }\n\n &:focus {\n background:").concat(theme.form.button.secondary.bg, ";\n box-shadow:").concat(defaultShadow(theme.form.button.secondary.bg), ";\n }\n\n &:active,\n &.active {\n background:").concat(theme.form.button.secondary.hover, "\n box-shadow:").concat(defaultShadow(theme.form.button.secondary.bg), ";\n }\n\n &.selected {\n border: 1px solid ").concat(theme.colors.neutrals.white, ";\n }\n");
6796
7015
  var Cancel = "\n background:transparent;\n color:".concat(theme.form.button.secondary.bg, ";\n\n > * {\n border-color: ").concat(theme.colors.info.shadow, ";\n }\n\n svg path {\n fill: ").concat(theme.colors.secondary, ";\n }\n\n &:hover {\n background:transparent;\n text-decoration:underline;\n }\n\n &:focus {\n background:").concat(theme.colors.neutrals.white, ";\n box-shadow:").concat(defaultShadow(theme.form.button.secondary.bg), ";\n }\n\n &:active,\n &.active {\n background:").concat(theme.colors.neutrals.white, ";\n box-shadow:").concat(defaultShadow(theme.form.button.secondary.bg), ";\n text-decoration:underline;\n }\n\n &.selected {\n border: 1px solid ").concat(theme.form.button.secondary.bg, ";\n }\n");
@@ -6819,7 +7038,7 @@ var Exported = function Exported(_ref) {
6819
7038
  props = objectWithoutProperties(_ref, ["size", "type", "children", "Type"]);
6820
7039
 
6821
7040
  return /*#__PURE__*/React__default.createElement(Exportedd, _extends_1({
6822
- type: Type ? Type : type === 'cancel' ? 'button' : undefined,
7041
+ type: Type || (type === 'cancel' ? 'button' : undefined),
6823
7042
  size: size,
6824
7043
  typeStyle: type,
6825
7044
  children: children