@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.es.js CHANGED
@@ -1,43 +1,45 @@
1
1
  import React, { forwardRef, useState, Fragment, useCallback, useEffect, useRef, Children } from 'react';
2
2
  import styled, { keyframes } from 'styled-components';
3
+ import { supercomplete, useCombobox } from '@szhsin/react-autocomplete';
3
4
 
4
- var defaultRadius = '2px';
5
+ var defaultRadius = '4px';
5
6
  var colors = {
6
- primary: "#F7931E",
7
- secondary: "#0071BC",
8
- action: "#9DDDF4",
7
+ primary: '#F7931E',
8
+ secondary: '#0071BC',
9
+ action: '#9DDDF4',
9
10
  neutrals: {
10
- black: "#000000",
11
- gray: "#333333",
12
- medium: "#707070",
13
- silver: "#CCCCCC",
14
- white: "#FFFFFF"
11
+ black: '#000000',
12
+ gray: '#333333',
13
+ medium: '#707070',
14
+ silver: '#CCCCCC',
15
+ white: '#FFFFFF'
15
16
  },
16
17
  warnings: {
17
- border: "#F5C26B",
18
- text: "#DBAE60",
19
- shadow: "#FAE0B5",
20
- bg: "#FEF8F0"
18
+ border: '#F5C26B',
19
+ text: '#DBAE60',
20
+ shadow: '#FAE0B5',
21
+ bg: '#FEF8F0'
21
22
  },
22
23
  success: {
23
- border: "#00BDA5",
24
- text: "#00A38D",
25
- shadow: "#7FDED2",
26
- bg: "#E5F8F6"
24
+ border: '#00BDA5',
25
+ text: '#007d6c',
26
+ shadow: '#7FDED2',
27
+ bg: '#E5F8F6'
27
28
  },
28
29
  error: {
29
- border: "#F2545B",
30
- text: "#D94C53",
31
- shadow: "#F8A9AD",
32
- bg: "#FDEDEE"
30
+ border: '#F2545B',
31
+ text: '#bd4248',
32
+ shadow: '#F8A9AD',
33
+ bg: '#FDEDEE'
33
34
  },
34
35
  info: {
35
- border: "#7C98B6",
36
- text: "#516F90",
37
- shadow: "#CBD6E2",
38
- bg: "#EAF0F6"
36
+ border: '#7C98B6',
37
+ text: '#11598b',
38
+ shadow: '#CBD6E2',
39
+ bg: '#EAF0F6'
39
40
  },
40
41
  extra: {
42
+ blueishWhite: '#fafbfc',
41
43
  whiteSmoke: '#F5F5F5',
42
44
  gray93: '#FAFAFA'
43
45
  }
@@ -48,27 +50,27 @@ var font = {
48
50
  lineHeight: '20px'
49
51
  },
50
52
  medium: {
51
- size: '16px',
53
+ size: '14px',
52
54
  lineHeight: '16px'
53
55
  },
54
56
  small: {
55
- size: '14px',
57
+ size: '12px',
56
58
  lineHeight: '16px'
57
59
  },
58
60
  extraSmall: {
59
- size: '12px',
61
+ size: '10px',
60
62
  lineHeight: '12px'
61
63
  },
62
64
  tiny: {
63
65
  size: '8px',
64
66
  lineHeight: '12px'
65
67
  },
66
- main: 'circe-rounded',
68
+ main: '"Huninn", sans-serif',
67
69
  body: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
68
70
  };
69
71
  var form = {
70
72
  input: {
71
- radius: '2px',
73
+ radius: defaultRadius,
72
74
  padding: '12px 8px'
73
75
  },
74
76
  button: {
@@ -318,7 +320,7 @@ function _templateObject9() {
318
320
  }
319
321
 
320
322
  function _templateObject8() {
321
- 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"]);
323
+ 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"]);
322
324
 
323
325
  _templateObject8 = function _templateObject8() {
324
326
  return data;
@@ -338,7 +340,7 @@ function _templateObject7() {
338
340
  }
339
341
 
340
342
  function _templateObject6() {
341
- 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"]);
343
+ 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"]);
342
344
 
343
345
  _templateObject6 = function _templateObject6() {
344
346
  return data;
@@ -358,7 +360,7 @@ function _templateObject5() {
358
360
  }
359
361
 
360
362
  function _templateObject4() {
361
- 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"]);
363
+ 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"]);
362
364
 
363
365
  _templateObject4 = function _templateObject4() {
364
366
  return data;
@@ -378,7 +380,7 @@ function _templateObject3() {
378
380
  }
379
381
 
380
382
  function _templateObject2() {
381
- 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"]);
383
+ 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"]);
382
384
 
383
385
  _templateObject2 = function _templateObject2() {
384
386
  return data;
@@ -432,13 +434,13 @@ var RequiredText = function RequiredText() {
432
434
  var SelectUi = styled.div(_templateObject6(), function (_ref2) {
433
435
  var size = _ref2.size;
434
436
  return handleSize(size);
435
- }, 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);
437
+ }, 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);
436
438
  var Value = styled.span(_templateObject7(), function (props) {
437
439
  return props.option ? '#707070' : theme.colors.neutrals.gray;
438
440
  }, function (props) {
439
441
  return props.option && "\n display:inline-block;\n flex:1;\n ";
440
442
  });
441
- var Options = styled.ul(_templateObject8(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, function (props) {
443
+ var Options = styled.ul(_templateObject8(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, theme.defaultRadius, function (props) {
442
444
  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 ";
443
445
  }, theme.font.small.size, theme.colors.info.bg, theme.colors.neutrals.silver);
444
446
  var OptionGroup = styled.div(_templateObject9());
@@ -478,7 +480,7 @@ function _templateObject3$1() {
478
480
  }
479
481
 
480
482
  function _templateObject2$1() {
481
- 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"]);
483
+ 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"]);
482
484
 
483
485
  _templateObject2$1 = function _templateObject2() {
484
486
  return data;
@@ -488,7 +490,7 @@ function _templateObject2$1() {
488
490
  }
489
491
 
490
492
  function _templateObject$2() {
491
- 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"]);
493
+ 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"]);
492
494
 
493
495
  _templateObject$2 = function _templateObject() {
494
496
  return data;
@@ -523,7 +525,7 @@ var handlerColor = function handlerColor(typeColor) {
523
525
  return theme.colors.success.text;
524
526
 
525
527
  default:
526
- return theme.colors.neutrals.silver;
528
+ return null;
527
529
  }
528
530
  };
529
531
 
@@ -540,12 +542,10 @@ var handleMask = function handleMask(type) {
540
542
  }
541
543
  };
542
544
 
543
- var InputBase$1 = styled.input(_templateObject$2(), theme.colors.neutrals.white, function (props) {
544
- return handlerColor(props.validation);
545
- }, theme.form.input.radius, theme.font.small.size, theme.font.small.lineHeight, theme.form.input.padding, theme.colors.neutrals.gray, function (_ref) {
545
+ var InputBase$1 = styled.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) {
546
546
  var size = _ref.size;
547
547
  return handleSize$1(size);
548
- }, theme.form.input.padding, theme.colors.extra.whiteSmoke, borderDefault$1, theme.colors.neutrals.silver, theme.colors.neutrals.medium, borderDefault$1, function (props) {
548
+ }, theme.form.input.padding, theme.colors.extra.whiteSmoke, borderDefault$1, theme.colors.neutrals.silver, theme.colors.neutrals.medium, theme.colors.secondary, function (props) {
549
549
  return handlerColor(props.validation);
550
550
  }, borderDefault$1, function (props) {
551
551
  return handlerColor(props.validation);
@@ -598,14 +598,19 @@ var Input = /*#__PURE__*/forwardRef(function (_ref3, ref) {
598
598
  }
599
599
 
600
600
  var maskFunction = null;
601
- if (mask) maskFunction = handleMask(mask);
601
+
602
+ if (mask) {
603
+ maskFunction = handleMask(mask);
604
+ }
602
605
 
603
606
  var handleChange = function handleChange(e) {
604
607
  if (onChange) {
605
608
  onChange(e);
606
609
  }
607
610
 
608
- if (maskFunction) e.target.value = maskFunction(e.target.value);
611
+ if (maskFunction) {
612
+ e.target.value = maskFunction(e.target.value);
613
+ }
609
614
  };
610
615
 
611
616
  return /*#__PURE__*/React.createElement(Frag$1, {
@@ -3950,7 +3955,7 @@ var Wrapper = function Wrapper(Element) {
3950
3955
  }, function (props) {
3951
3956
  return props.onClick && "\n cursor: pointer;\n ";
3952
3957
  }, function (props) {
3953
- return props.color ? props.color + ' !important' : theme.colors.secondary;
3958
+ return props.color ? props.color + ' !important' : 'currentColor';
3954
3959
  }, function (props) {
3955
3960
  return props.strokeColor && "stroke: ".concat(props.strokeColor, " !important;");
3956
3961
  }, function (props) {
@@ -4143,7 +4148,7 @@ Items.forEach(function (key) {
4143
4148
  });
4144
4149
 
4145
4150
  function _templateObject$4() {
4146
- 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"]);
4151
+ 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"]);
4147
4152
 
4148
4153
  _templateObject$4 = function _templateObject() {
4149
4154
  return data;
@@ -4171,7 +4176,7 @@ var mergeRefs = function mergeRefs(refs) {
4171
4176
  };
4172
4177
 
4173
4178
  function _templateObject4$2() {
4174
- var data = taggedTemplateLiteral(["\n font-size:14px;\n line-height:16px;\n color:", ";\n"]);
4179
+ var data = taggedTemplateLiteral(["\n font-size: 14px;\n line-height: 16px;\n color: ", ";\n\n ", "\n}\n"]);
4175
4180
 
4176
4181
  _templateObject4$2 = function _templateObject4() {
4177
4182
  return data;
@@ -4181,7 +4186,7 @@ function _templateObject4$2() {
4181
4186
  }
4182
4187
 
4183
4188
  function _templateObject3$2() {
4184
- var data = taggedTemplateLiteral(["\n font-size:16px;\n line-height:20px;\n"]);
4189
+ var data = taggedTemplateLiteral(["\n font-size: 16px;\n line-height: 20px;\n"]);
4185
4190
 
4186
4191
  _templateObject3$2 = function _templateObject3() {
4187
4192
  return data;
@@ -4191,7 +4196,7 @@ function _templateObject3$2() {
4191
4196
  }
4192
4197
 
4193
4198
  function _templateObject2$2() {
4194
- var data = taggedTemplateLiteral(["\n font-family:circe-rounded;\n font-weight:bold;\n font-size:22px;\n line-height:28px;\n color: ", ";\n"]);
4199
+ var data = taggedTemplateLiteral(["\n font-family: \"Huninn\", sans-serif;\n font-weight: bold;\n font-size: 22px;\n line-height: 28px;\n color: ", ";\n"]);
4195
4200
 
4196
4201
  _templateObject2$2 = function _templateObject2() {
4197
4202
  return data;
@@ -4201,7 +4206,7 @@ function _templateObject2$2() {
4201
4206
  }
4202
4207
 
4203
4208
  function _templateObject$5() {
4204
- var data = taggedTemplateLiteral(["\n font-family:circe-rounded;\n font-weight:bold;\n font-size:36px;\n line-height:44px;\n color: ", ";\n"]);
4209
+ var data = taggedTemplateLiteral(["\n font-family: \"Huninn\", sans-serif;\n font-weight: bold;\n font-size: 36px;\n line-height: 40px;\n color: ", ";\n"]);
4205
4210
 
4206
4211
  _templateObject$5 = function _templateObject() {
4207
4212
  return data;
@@ -4209,13 +4214,36 @@ function _templateObject$5() {
4209
4214
 
4210
4215
  return data;
4211
4216
  }
4212
- var Title = styled.h1(_templateObject$5(), theme.colors.secondary);
4217
+ var Title = styled.h1(_templateObject$5(), theme.colors.info.text);
4213
4218
  var SubTitle = styled.h3(_templateObject2$2(), theme.colors.info.text);
4214
4219
  var ThirdTitle = styled(SubTitle)(_templateObject3$2());
4215
- var Text = styled.p(_templateObject4$2(), theme.colors.neutrals.gray);
4220
+ var Text = styled.p(_templateObject4$2(), theme.colors.neutrals.gray, function (_ref) {
4221
+ var subtle = _ref.subtle;
4222
+ return subtle && "\n color:".concat(theme.colors.neutrals.medium, ";\n ");
4223
+ });
4224
+
4225
+ function _templateObject14() {
4226
+ 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"]);
4227
+
4228
+ _templateObject14 = function _templateObject14() {
4229
+ return data;
4230
+ };
4231
+
4232
+ return data;
4233
+ }
4234
+
4235
+ function _templateObject13() {
4236
+ 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"]);
4237
+
4238
+ _templateObject13 = function _templateObject13() {
4239
+ return data;
4240
+ };
4241
+
4242
+ return data;
4243
+ }
4216
4244
 
4217
4245
  function _templateObject12() {
4218
- 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"]);
4246
+ 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"]);
4219
4247
 
4220
4248
  _templateObject12 = function _templateObject12() {
4221
4249
  return data;
@@ -4225,7 +4253,7 @@ function _templateObject12() {
4225
4253
  }
4226
4254
 
4227
4255
  function _templateObject11() {
4228
- 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"]);
4256
+ 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"]);
4229
4257
 
4230
4258
  _templateObject11 = function _templateObject11() {
4231
4259
  return data;
@@ -4235,7 +4263,7 @@ function _templateObject11() {
4235
4263
  }
4236
4264
 
4237
4265
  function _templateObject10() {
4238
- 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"]);
4266
+ 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"]);
4239
4267
 
4240
4268
  _templateObject10 = function _templateObject10() {
4241
4269
  return data;
@@ -4245,7 +4273,7 @@ function _templateObject10() {
4245
4273
  }
4246
4274
 
4247
4275
  function _templateObject9$1() {
4248
- 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"]);
4276
+ 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"]);
4249
4277
 
4250
4278
  _templateObject9$1 = function _templateObject9() {
4251
4279
  return data;
@@ -4265,7 +4293,7 @@ function _templateObject8$1() {
4265
4293
  }
4266
4294
 
4267
4295
  function _templateObject7$1() {
4268
- var data = taggedTemplateLiteral(["\n color:", "\n"]);
4296
+ var data = taggedTemplateLiteral(["\n color: ", "\n"]);
4269
4297
 
4270
4298
  _templateObject7$1 = function _templateObject7() {
4271
4299
  return data;
@@ -4275,7 +4303,7 @@ function _templateObject7$1() {
4275
4303
  }
4276
4304
 
4277
4305
  function _templateObject6$1() {
4278
- 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"]);
4306
+ 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"]);
4279
4307
 
4280
4308
  _templateObject6$1 = function _templateObject6() {
4281
4309
  return data;
@@ -4285,7 +4313,7 @@ function _templateObject6$1() {
4285
4313
  }
4286
4314
 
4287
4315
  function _templateObject5$1() {
4288
- 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"]);
4316
+ 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"]);
4289
4317
 
4290
4318
  _templateObject5$1 = function _templateObject5() {
4291
4319
  return data;
@@ -4295,7 +4323,7 @@ function _templateObject5$1() {
4295
4323
  }
4296
4324
 
4297
4325
  function _templateObject4$3() {
4298
- 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"]);
4326
+ 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"]);
4299
4327
 
4300
4328
  _templateObject4$3 = function _templateObject4() {
4301
4329
  return data;
@@ -4305,7 +4333,7 @@ function _templateObject4$3() {
4305
4333
  }
4306
4334
 
4307
4335
  function _templateObject3$3() {
4308
- var data = taggedTemplateLiteral(["\n white-space: nowrap;\n overflow:hidden;\n color: ", ";\n\n ", "\n\n >span {\n color:#707070;\n }\n"]);
4336
+ var data = taggedTemplateLiteral(["\n white-space: nowrap;\n overflow: hidden;\n color: ", ";\n\n ", "\n > span {\n color: #707070;\n }\n"]);
4309
4337
 
4310
4338
  _templateObject3$3 = function _templateObject3() {
4311
4339
  return data;
@@ -4315,7 +4343,7 @@ function _templateObject3$3() {
4315
4343
  }
4316
4344
 
4317
4345
  function _templateObject2$3() {
4318
- 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"]);
4346
+ 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"]);
4319
4347
 
4320
4348
  _templateObject2$3 = function _templateObject2() {
4321
4349
  return data;
@@ -4325,7 +4353,7 @@ function _templateObject2$3() {
4325
4353
  }
4326
4354
 
4327
4355
  function _templateObject$6() {
4328
- var data = taggedTemplateLiteral(["\n display:inline-block;\n vertical-align: top;\n"]);
4356
+ var data = taggedTemplateLiteral(["\n display: inline-block;\n vertical-align: top;\n"]);
4329
4357
 
4330
4358
  _templateObject$6 = function _templateObject() {
4331
4359
  return data;
@@ -4354,7 +4382,7 @@ var handleSize$2 = function handleSize(sizeType) {
4354
4382
  var SelectUi$1 = styled.div(_templateObject2$3(), function (_ref) {
4355
4383
  var size = _ref.size;
4356
4384
  return handleSize$2(size);
4357
- }, 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);
4385
+ }, 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);
4358
4386
  var Value$1 = styled(Text).attrs(function (props) {
4359
4387
  return {
4360
4388
  as: 'span'
@@ -4364,7 +4392,7 @@ var Value$1 = styled(Text).attrs(function (props) {
4364
4392
  });
4365
4393
  var maxOptions = 3;
4366
4394
  var optionsSize = 32;
4367
- var Options$1 = styled.ul(_templateObject4$3(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, function (props) {
4395
+ var Options$1 = styled.ul(_templateObject4$3(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, theme.defaultRadius, function (props) {
4368
4396
  return props.openTo === 'top' && "\n top:unset;\n bottom: 100%;\n ";
4369
4397
  }, function (props) {
4370
4398
  return !props.hasChildren && "\n max-height: ".concat(props.visibleOptionsQty ? props.visibleOptionsQty * optionsSize : maxOptions * optionsSize, "px;\n overflow-x:hidden;\n overflow-y:scroll;\n ");
@@ -4379,7 +4407,7 @@ var Span$1 = styled.span(_templateObject6$1(), theme.font.extraSmall.size);
4379
4407
  var SpanError$2 = styled(Span$1)(_templateObject7$1(), theme.colors.error.text);
4380
4408
  var SelectHidden = styled.select(_templateObject8$1());
4381
4409
  var PhotoCover = styled.div(_templateObject9$1());
4382
- var CustomCheckBox = styled.div(_templateObject10(), theme.colors.neutrals.white, theme.defaultRadius, theme.colors.neutrals.silver, theme.colors.secondary, theme.colors.action);
4410
+ var CustomCheckBox = styled.div(_templateObject10(), theme.colors.neutrals.white, theme.defaultRadius, theme.colors.neutrals.silver, theme.defaultRadius, theme.colors.secondary, theme.colors.action);
4383
4411
  var OptionGroup$1 = styled.div(_templateObject11());
4384
4412
  var ColorOption = styled.span(_templateObject12(), function (props) {
4385
4413
  return props.color ? props.color : 'black';
@@ -4397,48 +4425,214 @@ var getSelected = function getSelected(options, defaultValue) {
4397
4425
  return selected;
4398
4426
  };
4399
4427
 
4400
- var Dropdown = /*#__PURE__*/forwardRef(function (_ref2, ref) {
4401
- var name = _ref2.name,
4402
- label = _ref2.label,
4403
- help = _ref2.help,
4428
+ var SearchInput = styled.input(_templateObject13(), theme.font.medium.size, theme.font.medium.lineHeight, theme.colors.neutrals.gray, function (props) {
4429
+ return props.hasSelection ? theme.colors.neutrals.gray : theme.colors.neutrals.medium;
4430
+ });
4431
+ var ToggleButton = styled.button(_templateObject14());
4432
+
4433
+ var isOption = function isOption(item) {
4434
+ return item.value !== undefined && item.value !== null;
4435
+ };
4436
+
4437
+ var flattenOptions = function flattenOptions(options) {
4438
+ var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
4439
+ return (options || []).reduce(function (rows, item) {
4440
+ return rows.concat({
4441
+ item: item,
4442
+ depth: depth
4443
+ }, flattenOptions(item.options, depth + 1));
4444
+ }, []);
4445
+ }; // option names can be React elements, typing and inline completion need their text
4446
+
4447
+
4448
+ var optionText = function optionText(node) {
4449
+ if (node === undefined || node === null || typeof node === 'boolean') return '';
4450
+ if (typeof node === 'string' || typeof node === 'number') return node.toString();
4451
+ if (Array.isArray(node)) return node.map(optionText).join('');
4452
+ return node.props ? optionText(node.props.children) : '';
4453
+ };
4454
+
4455
+ var keepInViewport = function keepInViewport(node) {
4456
+ if (node && node.getBoundingClientRect().right > window.innerWidth) {
4457
+ node.style.left = 'unset';
4458
+ node.style.right = '0px';
4459
+ }
4460
+ }; // eslint-disable-next-line react/prop-types
4461
+
4462
+
4463
+ var AutocompleteSelect = function AutocompleteSelect(_ref2) {
4464
+ var options = _ref2.options,
4465
+ selectedOpt = _ref2.selectedOpt,
4466
+ setSelected = _ref2.setSelected,
4467
+ onChange = _ref2.onChange,
4468
+ onSelect = _ref2.onSelect,
4469
+ placeholder = _ref2.placeholder,
4404
4470
  error = _ref2.error,
4405
4471
  valid = _ref2.valid,
4406
- options = _ref2.options,
4407
- placeholder = _ref2.placeholder,
4408
- onChange = _ref2.onChange,
4409
- defaultValue = _ref2.defaultValue,
4472
+ noOptions = _ref2.noOptions,
4410
4473
  visibleOptionsQty = _ref2.visibleOptionsQty,
4411
4474
  openTo = _ref2.openTo,
4412
- _ref2$startOpen = _ref2.startOpen,
4413
- startOpen = _ref2$startOpen === void 0 ? false : _ref2$startOpen,
4414
- props = objectWithoutProperties(_ref2, ["name", "label", "help", "error", "valid", "options", "placeholder", "onChange", "defaultValue", "visibleOptionsQty", "openTo", "startOpen"]);
4475
+ startOpen = _ref2.startOpen,
4476
+ resetCallback = _ref2.resetCallback,
4477
+ props = objectWithoutProperties(_ref2, ["options", "selectedOpt", "setSelected", "onChange", "onSelect", "placeholder", "error", "valid", "noOptions", "visibleOptionsQty", "openTo", "startOpen", "resetCallback"]);
4478
+
4479
+ var _useState = useState(),
4480
+ _useState2 = slicedToArray(_useState, 2),
4481
+ search = _useState2[0],
4482
+ setSearch = _useState2[1];
4483
+
4484
+ var rows = flattenOptions(options);
4485
+ var selectable = rows.filter(function (row) {
4486
+ return isOption(row.item);
4487
+ }).map(function (row) {
4488
+ return row.item;
4489
+ });
4490
+
4491
+ var filterItems = function filterItems(text) {
4492
+ return text ? selectable.filter(function (item) {
4493
+ return optionText(item.name).toLowerCase().startsWith(text.toLowerCase());
4494
+ }) : selectable;
4495
+ };
4496
+
4497
+ var items = filterItems(search);
4498
+ var hasSelection = selectedOpt.value.length > 0;
4499
+ var selectedText = optionText(selectedOpt.desc);
4500
+
4501
+ var _useCombobox = useCombobox({
4502
+ items: items,
4503
+ value: search || '',
4504
+ onChange: setSearch,
4505
+ selected: selectable.find(function (item) {
4506
+ return item.value.toString() === selectedOpt.value;
4507
+ }),
4508
+ onSelectChange: function onSelectChange(item) {
4509
+ if (!item) return;
4510
+ if (onSelect) onSelect(item);
4511
+ setSelected({
4512
+ value: item.value.toString(),
4513
+ desc: item.name
4514
+ });
4515
+ if (onChange) onChange(item);
4516
+ },
4517
+ isEqual: function isEqual(a, b) {
4518
+ return a === b || !!a && !!b && a.value == b.value;
4519
+ },
4520
+ getItemValue: function getItemValue(item) {
4521
+ return optionText(item.name);
4522
+ },
4523
+ disabled: props.disabled,
4524
+ feature: supercomplete({
4525
+ onRequestItem: function onRequestItem(_ref3, res) {
4526
+ var value = _ref3.value;
4527
+ var matches = filterItems(value);
4528
+ if (matches.length > 0) res({
4529
+ index: 0,
4530
+ item: matches[0]
4531
+ });
4532
+ },
4533
+ select: true,
4534
+ deselectOnClear: false
4535
+ })
4536
+ }),
4537
+ getInputProps = _useCombobox.getInputProps,
4538
+ getToggleProps = _useCombobox.getToggleProps,
4539
+ getListProps = _useCombobox.getListProps,
4540
+ getItemProps = _useCombobox.getItemProps,
4541
+ open = _useCombobox.open,
4542
+ setOpen = _useCombobox.setOpen,
4543
+ focusIndex = _useCombobox.focusIndex;
4544
+
4545
+ useEffect(function () {
4546
+ if (startOpen) setOpen(true);
4547
+ }, []);
4548
+ var index = -1;
4549
+ return /*#__PURE__*/React.createElement(SelectUi$1, _extends_1({
4550
+ className: [open && 'open', error && 'error', valid && 'valid'].filter(Boolean).join(' ')
4551
+ }, props, {
4552
+ title: selectedText
4553
+ }), /*#__PURE__*/React.createElement(SearchInput, _extends_1({
4554
+ placeholder: hasSelection ? selectedText : placeholder,
4555
+ hasSelection: hasSelection
4556
+ }, getInputProps())), /*#__PURE__*/React.createElement(ToggleButton, getToggleProps(), open ? /*#__PURE__*/React.createElement(Icons.ArrowUp, {
4557
+ size: "15px",
4558
+ color: theme.colors.info.border
4559
+ }) : /*#__PURE__*/React.createElement(Icons.ArrowDown, {
4560
+ size: "15px",
4561
+ color: theme.colors.info.border
4562
+ })), open && /*#__PURE__*/React.createElement(Options$1, _extends_1({
4563
+ visibleOptionsQty: visibleOptionsQty,
4564
+ openTo: openTo,
4565
+ ref: keepInViewport
4566
+ }, getListProps()), items.length === 0 && /*#__PURE__*/React.createElement("li", {
4567
+ style: {
4568
+ paddingRight: '8px'
4569
+ }
4570
+ }, noOptions || 'No data found'), (search ? items.map(function (item) {
4571
+ return {
4572
+ item: item,
4573
+ depth: 0
4574
+ };
4575
+ }) : rows).map(function (_ref4, key) {
4576
+ var item = _ref4.item,
4577
+ depth = _ref4.depth;
4578
+
4579
+ if (!isOption(item)) {
4580
+ return /*#__PURE__*/React.createElement(OptionGroup$1, {
4581
+ key: key,
4582
+ style: {
4583
+ paddingLeft: 8 + depth * 16
4584
+ }
4585
+ }, item.name);
4586
+ }
4587
+
4588
+ index++;
4589
+ return /*#__PURE__*/React.createElement("li", _extends_1({
4590
+ key: key,
4591
+ className: item.divider ? 'alone' : '',
4592
+ style: {
4593
+ paddingLeft: 8 + depth * 16,
4594
+ background: focusIndex === index ? theme.colors.info.bg : undefined
4595
+ }
4596
+ }, getItemProps({
4597
+ item: item,
4598
+ index: index
4599
+ })), /*#__PURE__*/React.createElement(Value$1, {
4600
+ option: true,
4601
+ style: {
4602
+ marginRight: 4
4603
+ }
4604
+ }, item.name));
4605
+ })));
4606
+ };
4607
+
4608
+ var Dropdown = /*#__PURE__*/forwardRef(function (_ref5, ref) {
4609
+ var name = _ref5.name,
4610
+ label = _ref5.label,
4611
+ help = _ref5.help,
4612
+ error = _ref5.error,
4613
+ valid = _ref5.valid,
4614
+ options = _ref5.options,
4615
+ placeholder = _ref5.placeholder,
4616
+ onChange = _ref5.onChange,
4617
+ defaultValue = _ref5.defaultValue,
4618
+ visibleOptionsQty = _ref5.visibleOptionsQty,
4619
+ openTo = _ref5.openTo,
4620
+ _ref5$startOpen = _ref5.startOpen,
4621
+ startOpen = _ref5$startOpen === void 0 ? false : _ref5$startOpen,
4622
+ props = objectWithoutProperties(_ref5, ["name", "label", "help", "error", "valid", "options", "placeholder", "onChange", "defaultValue", "visibleOptionsQty", "openTo", "startOpen"]);
4415
4623
 
4416
4624
  var defaultSelected = {
4417
4625
  value: '',
4418
4626
  desc: ''
4419
4627
  };
4420
4628
 
4421
- var _useState = useState(startOpen),
4422
- _useState2 = slicedToArray(_useState, 2),
4423
- open = _useState2[0],
4424
- setOpen = _useState2[1];
4425
-
4426
4629
  var _useState3 = useState(defaultSelected),
4427
4630
  _useState4 = slicedToArray(_useState3, 2),
4428
4631
  selectedOpt = _useState4[0],
4429
4632
  setSelected = _useState4[1];
4430
4633
 
4431
- var nodeSelect = useRef();
4432
4634
  var valueRef = useRef();
4433
4635
 
4434
- var handleClick = function handleClick(e) {
4435
- if (nodeSelect.current.contains(e.target)) {
4436
- return;
4437
- }
4438
-
4439
- setOpen(false);
4440
- };
4441
-
4442
4636
  var reset = function reset() {
4443
4637
  setSelected(defaultSelected);
4444
4638
  };
@@ -4457,28 +4651,28 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_ref2, ref) {
4457
4651
  };
4458
4652
  setSelected(defaultSelected);
4459
4653
  } else {
4460
- if (!valueRef.current.value) return;
4654
+ if (!valueRef.current.value) {
4655
+ return;
4656
+ }
4657
+
4461
4658
  var selected = getSelected(options, valueRef.current.value);
4462
- if (selected && selected.value && selected.value !== selectedOpt.value) setSelected({
4463
- value: selected.value.toString(),
4464
- desc: selected.name
4465
- });
4659
+
4660
+ if (selected && selected.value && selected.value !== selectedOpt.value) {
4661
+ setSelected({
4662
+ value: selected.value.toString(),
4663
+ desc: selected.name
4664
+ });
4665
+ }
4466
4666
  }
4467
4667
  });
4468
4668
  useEffect(function () {
4469
- //if(defaultValue){
4470
- if (options) setDefaultValues(); //}
4669
+ // if(defaultValue){
4670
+ if (options) setDefaultValues(); // }
4471
4671
  }, [options, defaultValue]);
4472
4672
  useEffect(function () {
4473
4673
  valueRef.current.value = selectedOpt.value;
4474
4674
  valueRef.current.dispatchEvent(new Event('blur'));
4475
4675
  }, [selectedOpt]);
4476
- useEffect(function () {
4477
- document.addEventListener("mousedown", handleClick);
4478
- return function () {
4479
- document.removeEventListener("mousedown", handleClick);
4480
- };
4481
- }, []);
4482
4676
  var useIcon = false;
4483
4677
  if (props.Required) useIcon = /*#__PURE__*/React.createElement(RequiredText, null);
4484
4678
 
@@ -4492,32 +4686,18 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_ref2, ref) {
4492
4686
  htmlFor: name
4493
4687
  }, label), label && useIcon && /*#__PURE__*/React.createElement(Label, {
4494
4688
  htmlFor: name
4495
- }, label, " ", useIcon), /*#__PURE__*/React.createElement(SelectUi$1, _extends_1({
4496
- onClick: function onClick() {
4497
- if (!props.disabled) setOpen(!open);
4498
- },
4499
- ref: nodeSelect,
4500
- className: [open && 'open', error && 'error', valid && 'valid']
4501
- }, props, {
4502
- title: selectedOpt ? selectedOpt.desc : ''
4503
- }), /*#__PURE__*/React.createElement(Value$1, null, selectedOpt.value.length > 0 ? selectedOpt.desc : /*#__PURE__*/React.createElement("span", null, placeholder)), open ? /*#__PURE__*/React.createElement(Icons.ArrowUp, {
4504
- size: "15px",
4505
- color: theme.colors.info.border
4506
- }) : /*#__PURE__*/React.createElement(Icons.ArrowDown, {
4507
- size: "15px",
4508
- color: theme.colors.info.border
4509
- }), open && /*#__PURE__*/React.createElement(BoxOptions, {
4689
+ }, label, " ", useIcon), /*#__PURE__*/React.createElement(AutocompleteSelect, _extends_1({
4510
4690
  options: options,
4691
+ selectedOpt: selectedOpt,
4511
4692
  setSelected: setSelected,
4512
4693
  onChange: onChange,
4513
- reset: reset,
4514
- noOptions: props.noOptions,
4515
- selectedOpt: selectedOpt.value,
4516
- setOpen: setOpen,
4517
- onSelect: props.onSelect,
4694
+ placeholder: placeholder,
4695
+ error: error,
4696
+ valid: valid,
4518
4697
  visibleOptionsQty: visibleOptionsQty,
4519
- openTo: openTo
4520
- })), help && /*#__PURE__*/React.createElement(Span$1, null, help), error && /*#__PURE__*/React.createElement(SpanError$2, null, /*#__PURE__*/React.createElement("img", {
4698
+ openTo: openTo,
4699
+ startOpen: startOpen
4700
+ }, props)), help && /*#__PURE__*/React.createElement(Span$1, null, help), error && /*#__PURE__*/React.createElement(SpanError$2, null, /*#__PURE__*/React.createElement("img", {
4521
4701
  src: Ex,
4522
4702
  style: {
4523
4703
  marginRight: '6px'
@@ -4530,22 +4710,26 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_ref2, ref) {
4530
4710
  }));
4531
4711
  }); // eslint-disable-next-line react/prop-types
4532
4712
 
4533
- var BoxOptions = function BoxOptions(_ref3) {
4534
- var options = _ref3.options,
4535
- isChild = _ref3.isChild,
4536
- setSelected = _ref3.setSelected,
4537
- onChange = _ref3.onChange,
4538
- noOptions = _ref3.noOptions,
4539
- selectedOpt = _ref3.selectedOpt,
4540
- setOpen = _ref3.setOpen,
4541
- onSelect = _ref3.onSelect,
4542
- visibleOptionsQty = _ref3.visibleOptionsQty,
4543
- openTo = _ref3.openTo;
4544
- if (!options) return /*#__PURE__*/React.createElement(Options$1, null, /*#__PURE__*/React.createElement("li", {
4545
- style: {
4546
- paddingRight: '8px'
4547
- }
4548
- }, noOptions ? noOptions : 'No data found'));
4713
+ var BoxOptions = function BoxOptions(_ref6) {
4714
+ var options = _ref6.options,
4715
+ isChild = _ref6.isChild,
4716
+ setSelected = _ref6.setSelected,
4717
+ onChange = _ref6.onChange,
4718
+ noOptions = _ref6.noOptions,
4719
+ selectedOpt = _ref6.selectedOpt,
4720
+ setOpen = _ref6.setOpen,
4721
+ onSelect = _ref6.onSelect,
4722
+ visibleOptionsQty = _ref6.visibleOptionsQty,
4723
+ openTo = _ref6.openTo;
4724
+
4725
+ if (!options) {
4726
+ return /*#__PURE__*/React.createElement(Options$1, null, /*#__PURE__*/React.createElement("li", {
4727
+ style: {
4728
+ paddingRight: '8px'
4729
+ }
4730
+ }, noOptions || 'No data found'));
4731
+ }
4732
+
4549
4733
  var optionsRef = useRef();
4550
4734
 
4551
4735
  var handleClick = function handleClick(item, e) {
@@ -4568,8 +4752,8 @@ var BoxOptions = function BoxOptions(_ref3) {
4568
4752
  var optionsBounds = optionsRef.current.getBoundingClientRect();
4569
4753
 
4570
4754
  if (optionsBounds.right > window.innerWidth) {
4571
- optionsRef.current.style.left = "unset";
4572
- optionsRef.current.style.right = "0px";
4755
+ optionsRef.current.style.left = 'unset';
4756
+ optionsRef.current.style.right = '0px';
4573
4757
  }
4574
4758
  }
4575
4759
  }, []);
@@ -4608,22 +4792,22 @@ var BoxOptions = function BoxOptions(_ref3) {
4608
4792
  })) : /*#__PURE__*/React.createElement(OptionGroup$1, null, item.name));
4609
4793
  }));
4610
4794
  };
4611
- var CustomDropdown = /*#__PURE__*/forwardRef(function (_ref4, ref) {
4612
- var name = _ref4.name,
4613
- label = _ref4.label,
4614
- help = _ref4.help,
4615
- error = _ref4.error,
4616
- valid = _ref4.valid,
4617
- options = _ref4.options,
4618
- placeholder = _ref4.placeholder,
4619
- defaultValue = _ref4.defaultValue,
4620
- multiple = _ref4.multiple,
4621
- type = _ref4.type,
4622
- tooltip = _ref4.tooltip,
4623
- onChange = _ref4.onChange,
4624
- visibleOptionsQty = _ref4.visibleOptionsQty,
4625
- openTo = _ref4.openTo,
4626
- props = objectWithoutProperties(_ref4, ["name", "label", "help", "error", "valid", "options", "placeholder", "defaultValue", "multiple", "type", "tooltip", "onChange", "visibleOptionsQty", "openTo"]);
4795
+ var CustomDropdown = /*#__PURE__*/forwardRef(function (_ref7, ref) {
4796
+ var name = _ref7.name,
4797
+ label = _ref7.label,
4798
+ help = _ref7.help,
4799
+ error = _ref7.error,
4800
+ valid = _ref7.valid,
4801
+ options = _ref7.options,
4802
+ placeholder = _ref7.placeholder,
4803
+ defaultValue = _ref7.defaultValue,
4804
+ multiple = _ref7.multiple,
4805
+ type = _ref7.type,
4806
+ tooltip = _ref7.tooltip,
4807
+ onChange = _ref7.onChange,
4808
+ visibleOptionsQty = _ref7.visibleOptionsQty,
4809
+ openTo = _ref7.openTo,
4810
+ props = objectWithoutProperties(_ref7, ["name", "label", "help", "error", "valid", "options", "placeholder", "defaultValue", "multiple", "type", "tooltip", "onChange", "visibleOptionsQty", "openTo"]);
4627
4811
 
4628
4812
  var _useState5 = useState(false),
4629
4813
  _useState6 = slicedToArray(_useState5, 2),
@@ -4639,8 +4823,16 @@ var CustomDropdown = /*#__PURE__*/forwardRef(function (_ref4, ref) {
4639
4823
  var valueRef = useRef();
4640
4824
 
4641
4825
  var handlOpenSelect = function handlOpenSelect(e) {
4642
- if (props.disabled) return;
4643
- if (multiple) if (e.target.classList.contains('1010list-option')) return;
4826
+ if (props.disabled) {
4827
+ return;
4828
+ }
4829
+
4830
+ if (multiple) {
4831
+ if (e.target.classList.contains('1010list-option')) {
4832
+ return;
4833
+ }
4834
+ }
4835
+
4644
4836
  setOpen(!open);
4645
4837
  };
4646
4838
 
@@ -4653,14 +4845,17 @@ var CustomDropdown = /*#__PURE__*/forwardRef(function (_ref4, ref) {
4653
4845
  }
4654
4846
 
4655
4847
  var handleClick = function handleClick(e) {
4656
- if (nodeSelect.current.contains(e.target)) return;
4848
+ if (nodeSelect.current.contains(e.target)) {
4849
+ return;
4850
+ }
4851
+
4657
4852
  setOpen(false);
4658
4853
  };
4659
4854
 
4660
4855
  useEffect(function () {
4661
- document.addEventListener("mousedown", handleClick);
4856
+ document.addEventListener('mousedown', handleClick);
4662
4857
  return function () {
4663
- document.removeEventListener("mousedown", handleClick);
4858
+ document.removeEventListener('mousedown', handleClick);
4664
4859
  };
4665
4860
  }, []);
4666
4861
  var setDefaultValues = useCallback(function () {
@@ -4673,7 +4868,9 @@ var CustomDropdown = /*#__PURE__*/forwardRef(function (_ref4, ref) {
4673
4868
  }).map(function (opt) {
4674
4869
  return opt.value;
4675
4870
  });
4676
- } else defaultValue = defaultValue || valueRef.current.value;
4871
+ } else {
4872
+ defaultValue = defaultValue || valueRef.current.value;
4873
+ }
4677
4874
  }
4678
4875
 
4679
4876
  if (options) {
@@ -4700,9 +4897,13 @@ var CustomDropdown = /*#__PURE__*/forwardRef(function (_ref4, ref) {
4700
4897
  if (multiple) {
4701
4898
  if (selectedOpt.length !== defaults.length || !selectedOpt.every(function (value, index) {
4702
4899
  return value === defaults[index];
4703
- })) setSelected(defaults);
4900
+ })) {
4901
+ setSelected(defaults);
4902
+ }
4704
4903
  } else {
4705
- if (selectedOpt[0] !== defaults[0]) setSelected([defaults[0]]);
4904
+ if (selectedOpt[0] !== defaults[0]) {
4905
+ setSelected([defaults[0]]);
4906
+ }
4706
4907
  }
4707
4908
  } // const hasDefault = getSelected(options,defaultValue);
4708
4909
  //
@@ -4720,13 +4921,20 @@ var CustomDropdown = /*#__PURE__*/forwardRef(function (_ref4, ref) {
4720
4921
 
4721
4922
  });
4722
4923
  useEffect(function () {
4723
- //if(defaultValue){
4724
- if (options) setDefaultValues(); //}
4924
+ // if(defaultValue){
4925
+ if (options) setDefaultValues(); // }
4725
4926
  }, [options, defaultValue]);
4726
4927
  useEffect(function () {
4727
- if (valueRef.current) if (multiple) Array.from(valueRef.current.children).map(function (opt, k) {
4728
- return opt.selected = selectedOpt.indexOf(k) !== -1;
4729
- });else if (options[selectedOpt]) valueRef.current.value = options[selectedOpt].value;
4928
+ if (valueRef.current) {
4929
+ if (multiple) {
4930
+ Array.from(valueRef.current.children).map(function (opt, k) {
4931
+ return opt.selected = selectedOpt.indexOf(k) !== -1;
4932
+ });
4933
+ } else if (options[selectedOpt]) {
4934
+ valueRef.current.value = options[selectedOpt].value;
4935
+ }
4936
+ }
4937
+
4730
4938
  valueRef.current.dispatchEvent(new Event('blur'));
4731
4939
  }, [selectedOpt]);
4732
4940
  var useIcon = false;
@@ -4816,27 +5024,38 @@ var HandleState = function HandleState(index, setSelected, selectedOpt, multiple
4816
5024
  }
4817
5025
  }
4818
5026
 
4819
- if (!multiple && ret.toString() === selectedOpt.toString()) return;
5027
+ if (!multiple && ret.toString() === selectedOpt.toString()) {
5028
+ return;
5029
+ }
5030
+
4820
5031
  var stateMap = options.filter(function (opt, index) {
4821
5032
  return ret.indexOf(index) !== -1;
4822
5033
  }).map(function (opt) {
4823
5034
  return opt.value;
4824
5035
  });
4825
- if (typeof onChange === 'function') onChange(multiple ? stateMap : stateMap[0]);
5036
+
5037
+ if (typeof onChange === 'function') {
5038
+ onChange(multiple ? stateMap : stateMap[0]);
5039
+ }
5040
+
4826
5041
  setSelected(ret);
4827
5042
  };
4828
5043
 
4829
- var SelectOption = function SelectOption(_ref5) {
4830
- var options = _ref5.options,
4831
- setSelected = _ref5.setSelected,
4832
- selectedOpt = _ref5.selectedOpt,
4833
- multiple = _ref5.multiple,
4834
- type = _ref5.type,
4835
- onChange = _ref5.onChange,
4836
- noOptions = _ref5.noOptions,
4837
- visibleOptionsQty = _ref5.visibleOptionsQty,
4838
- openTo = _ref5.openTo;
4839
- if (!options) return /*#__PURE__*/React.createElement(OptionsPeople, null, /*#__PURE__*/React.createElement("li", null, noOptions ? noOptions : 'No data found'));
5044
+ var SelectOption = function SelectOption(_ref8) {
5045
+ var options = _ref8.options,
5046
+ setSelected = _ref8.setSelected,
5047
+ selectedOpt = _ref8.selectedOpt,
5048
+ multiple = _ref8.multiple,
5049
+ type = _ref8.type,
5050
+ onChange = _ref8.onChange,
5051
+ noOptions = _ref8.noOptions,
5052
+ visibleOptionsQty = _ref8.visibleOptionsQty,
5053
+ openTo = _ref8.openTo;
5054
+
5055
+ if (!options) {
5056
+ return /*#__PURE__*/React.createElement(OptionsPeople, null, /*#__PURE__*/React.createElement("li", null, noOptions || 'No data found'));
5057
+ }
5058
+
4840
5059
  return /*#__PURE__*/React.createElement(OptionsPeople, {
4841
5060
  visibleOptionsQty: visibleOptionsQty,
4842
5061
  openTo: openTo
@@ -4866,9 +5085,9 @@ var SelectOption = function SelectOption(_ref5) {
4866
5085
  }));
4867
5086
  };
4868
5087
 
4869
- var PhotoComponent = function PhotoComponent(_ref6) {
4870
- var profile = _ref6.profile,
4871
- index = _ref6.index;
5088
+ var PhotoComponent = function PhotoComponent(_ref9) {
5089
+ var profile = _ref9.profile,
5090
+ index = _ref9.index;
4872
5091
  var customStyle = {
4873
5092
  position: 'relative',
4874
5093
  display: 'inline-flex',
@@ -4892,18 +5111,18 @@ var PhotoComponent = function PhotoComponent(_ref6) {
4892
5111
  }));
4893
5112
  };
4894
5113
 
4895
- var SelectValueRender = function SelectValueRender(_ref7) {
4896
- var options = _ref7.options,
4897
- selectedOpt = _ref7.selectedOpt,
4898
- type = _ref7.type,
4899
- noOptions = _ref7.noOptions;
5114
+ var SelectValueRender = function SelectValueRender(_ref10) {
5115
+ var options = _ref10.options,
5116
+ selectedOpt = _ref10.selectedOpt,
5117
+ type = _ref10.type,
5118
+ noOptions = _ref10.noOptions;
4900
5119
 
4901
5120
  if (!options) {
4902
5121
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
4903
5122
  style: {
4904
5123
  display: 'flex'
4905
5124
  }
4906
- }), /*#__PURE__*/React.createElement(Value$1, null, noOptions ? noOptions : 'No Data'));
5125
+ }), /*#__PURE__*/React.createElement(Value$1, null, noOptions || 'No Data'));
4907
5126
  }
4908
5127
 
4909
5128
  var Pictures = [];
@@ -5032,7 +5251,7 @@ function _templateObject8$2() {
5032
5251
  }
5033
5252
 
5034
5253
  function _templateObject7$2() {
5035
- 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"]);
5254
+ 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"]);
5036
5255
 
5037
5256
  _templateObject7$2 = function _templateObject7() {
5038
5257
  return data;
@@ -5052,7 +5271,7 @@ function _templateObject6$2() {
5052
5271
  }
5053
5272
 
5054
5273
  function _templateObject5$2() {
5055
- 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"]);
5274
+ 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"]);
5056
5275
 
5057
5276
  _templateObject5$2 = function _templateObject5() {
5058
5277
  return data;
@@ -5347,7 +5566,7 @@ function _templateObject7$3() {
5347
5566
  }
5348
5567
 
5349
5568
  function _templateObject6$3() {
5350
- 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"]);
5569
+ 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"]);
5351
5570
 
5352
5571
  _templateObject6$3 = function _templateObject6() {
5353
5572
  return data;
@@ -5357,7 +5576,7 @@ function _templateObject6$3() {
5357
5576
  }
5358
5577
 
5359
5578
  function _templateObject5$3() {
5360
- 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"]);
5579
+ 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"]);
5361
5580
 
5362
5581
  _templateObject5$3 = function _templateObject5() {
5363
5582
  return data;
@@ -5387,7 +5606,7 @@ function _templateObject3$5() {
5387
5606
  }
5388
5607
 
5389
5608
  function _templateObject2$5() {
5390
- 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"]);
5609
+ 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"]);
5391
5610
 
5392
5611
  _templateObject2$5 = function _templateObject2() {
5393
5612
  return data;
@@ -5411,12 +5630,12 @@ var SpanError$4 = styled(Span$3)(_templateObject3$5(), theme.colors.error.text);
5411
5630
  var Select = styled(InputBase)(_templateObject4$5(), theme.colors.neutrals.white, theme.colors.action, theme.colors.secondary, theme.colors.error.border);
5412
5631
  var maxOptions$1 = 5;
5413
5632
  var optionsSize$1 = 32;
5414
- var Options$2 = styled.ul(_templateObject5$3(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, function (props) {
5633
+ var Options$2 = styled.ul(_templateObject5$3(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, theme.defaultRadius, function (props) {
5415
5634
  return props.openTo === 'top' && "\n top:unset;\n bottom:100%;\n ";
5416
5635
  }, function (props) {
5417
5636
  return props.visibleOptionsQty ? props.visibleOptionsQty * optionsSize$1 : maxOptions$1 * optionsSize$1;
5418
5637
  }, theme.font.small.size, theme.colors.info.bg);
5419
- var TagsValues = styled.ul(_templateObject6$3());
5638
+ var TagsValues = styled.ul(_templateObject6$3(), theme.defaultRadius);
5420
5639
  var SelectHidden$1 = styled.select(_templateObject7$3());
5421
5640
  var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
5422
5641
  var _ref$name = _ref.name,
@@ -5846,7 +6065,7 @@ function _templateObject5$4() {
5846
6065
  }
5847
6066
 
5848
6067
  function _templateObject4$6() {
5849
- 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"]);
6068
+ 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"]);
5850
6069
 
5851
6070
  _templateObject4$6 = function _templateObject4() {
5852
6071
  return data;
@@ -5889,7 +6108,7 @@ var Field = styled.div(_templateObject2$6());
5889
6108
  var WraperBucket = styled.div(_templateObject3$6(), function (props) {
5890
6109
  return props.background ? props.background : theme.colors.info.shadow;
5891
6110
  }, theme.colors.action, theme.colors.secondary);
5892
- var ColorBox = styled.ul(_templateObject4$6(), theme.colors.neutrals.gray, theme.colors.secondary, theme.defaultRadius, theme.colors.neutrals.gray, theme.defaultRadius);
6111
+ var ColorBox = styled.ul(_templateObject4$6(), theme.defaultRadius, theme.colors.neutrals.gray, theme.colors.secondary, theme.defaultRadius, theme.colors.neutrals.gray, theme.defaultRadius);
5893
6112
  var SelectHidden$2 = styled.select(_templateObject5$4());
5894
6113
  var InputColor = /*#__PURE__*/forwardRef(function (_ref, ref) {
5895
6114
  var name = _ref.name,
@@ -6769,7 +6988,7 @@ function _templateObject2$7() {
6769
6988
  }
6770
6989
 
6771
6990
  function _templateObject$b() {
6772
- 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"]);
6991
+ 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"]);
6773
6992
 
6774
6993
  _templateObject$b = function _templateObject() {
6775
6994
  return data;
@@ -6782,7 +7001,7 @@ var defaultShadow = function defaultShadow(color) {
6782
7001
  return "0px 0px 6px ".concat(color);
6783
7002
  };
6784
7003
 
6785
- var Base = styled.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);
7004
+ var Base = styled.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);
6786
7005
  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");
6787
7006
  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");
6788
7007
  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");
@@ -6811,7 +7030,7 @@ var Exported = function Exported(_ref) {
6811
7030
  props = objectWithoutProperties(_ref, ["size", "type", "children", "Type"]);
6812
7031
 
6813
7032
  return /*#__PURE__*/React.createElement(Exportedd, _extends_1({
6814
- type: Type ? Type : type === 'cancel' ? 'button' : undefined,
7033
+ type: Type || (type === 'cancel' ? 'button' : undefined),
6815
7034
  size: size,
6816
7035
  typeStyle: type,
6817
7036
  children: children