@dspworkplace/ui 2.0.2 → 2.1.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.
- package/dist/index.es.js +236 -267
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +236 -266
- package/dist/index.js.map +1 -1
- package/dist/tokens.css +42 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -370,7 +370,7 @@ function _templateObject5() {
|
|
|
370
370
|
}
|
|
371
371
|
|
|
372
372
|
function _templateObject4() {
|
|
373
|
-
var data = taggedTemplateLiteral(["\n font-size:", ";\n font-weight:normal;\n font-family
|
|
373
|
+
var data = taggedTemplateLiteral(["\n font-size:", ";\n line-height: ", ";\n font-weight:normal;\n font-family: ", ";\n display:block;\n color: ", ";\n margin-top:4px;\n"]);
|
|
374
374
|
|
|
375
375
|
_templateObject4 = function _templateObject4() {
|
|
376
376
|
return data;
|
|
@@ -432,7 +432,7 @@ var InputBase = styled__default.input(_templateObject3(), theme.colors.neutrals.
|
|
|
432
432
|
var size = _ref.size;
|
|
433
433
|
return handleSize(size);
|
|
434
434
|
}, theme.colors.extra.whiteSmoke, borderDefault, theme.colors.neutrals.silver, theme.colors.neutrals.medium, borderDefault, borderDefault, borderDefault, theme.colors.action, theme.colors.secondary, theme.colors.neutrals.silver, theme.font.small);
|
|
435
|
-
var SpanHelp = styled__default.span(_templateObject4(), theme.font.
|
|
435
|
+
var SpanHelp = styled__default.span(_templateObject4(), theme.font.small.size, theme.font.small.lineHeight, theme.font.main, theme.colors.info.text);
|
|
436
436
|
var SpanError = styled__default(SpanHelp)(_templateObject5(), theme.colors.error.text);
|
|
437
437
|
|
|
438
438
|
var RequiredText = function RequiredText() {
|
|
@@ -469,28 +469,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
469
469
|
|
|
470
470
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
471
471
|
|
|
472
|
-
function _templateObject4$1() {
|
|
473
|
-
var data = taggedTemplateLiteral(["\n width:", "\n display:inline-block;\n vertical-align:top;\n\n svg path {\n fill: ", ";\n }\n"]);
|
|
474
|
-
|
|
475
|
-
_templateObject4$1 = function _templateObject4() {
|
|
476
|
-
return data;
|
|
477
|
-
};
|
|
478
|
-
|
|
479
|
-
return data;
|
|
480
|
-
}
|
|
481
|
-
|
|
482
|
-
function _templateObject3$1() {
|
|
483
|
-
var data = taggedTemplateLiteral(["\n color:", "\n"]);
|
|
484
|
-
|
|
485
|
-
_templateObject3$1 = function _templateObject3() {
|
|
486
|
-
return data;
|
|
487
|
-
};
|
|
488
|
-
|
|
489
|
-
return data;
|
|
490
|
-
}
|
|
491
|
-
|
|
492
472
|
function _templateObject2$1() {
|
|
493
|
-
var data = taggedTemplateLiteral(["\n
|
|
473
|
+
var data = taggedTemplateLiteral(["\n width:", "\n display:inline-block;\n vertical-align:top;\n\n svg path {\n fill: ", ";\n }\n"]);
|
|
494
474
|
|
|
495
475
|
_templateObject2$1 = function _templateObject2() {
|
|
496
476
|
return data;
|
|
@@ -560,9 +540,7 @@ var InputBase$1 = styled__default.input(_templateObject$2(), theme.colors.neutra
|
|
|
560
540
|
}, borderDefault$1, function (props) {
|
|
561
541
|
return handlerColor(props.validation);
|
|
562
542
|
}, borderDefault$1, theme.colors.action, theme.colors.secondary, theme.colors.neutrals.silver, theme.font.small, theme.colors.info.bg, theme.colors.neutrals.silver);
|
|
563
|
-
var
|
|
564
|
-
var SpanError$1 = styled__default(Span)(_templateObject3$1(), theme.colors.error.text);
|
|
565
|
-
var Frag$1 = styled__default.div(_templateObject4$1(), function (_ref2) {
|
|
543
|
+
var Frag$1 = styled__default.div(_templateObject2$1(), function (_ref2) {
|
|
566
544
|
var size = _ref2.size;
|
|
567
545
|
return handleSize$1(size);
|
|
568
546
|
}, theme.colors.secondary);
|
|
@@ -651,7 +629,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
|
|
|
651
629
|
validation: validationType,
|
|
652
630
|
ref: ref,
|
|
653
631
|
onChange: handleChange
|
|
654
|
-
})), iconAction && iconAction), help && /*#__PURE__*/React__default.createElement(
|
|
632
|
+
})), iconAction && iconAction), help && /*#__PURE__*/React__default.createElement(SpanHelp, null, help), error && /*#__PURE__*/React__default.createElement(SpanError, null, /*#__PURE__*/React__default.createElement("img", {
|
|
655
633
|
src: Ex,
|
|
656
634
|
style: {
|
|
657
635
|
marginRight: '6px'
|
|
@@ -4185,20 +4163,30 @@ var mergeRefs = function mergeRefs(refs) {
|
|
|
4185
4163
|
};
|
|
4186
4164
|
};
|
|
4187
4165
|
|
|
4188
|
-
function
|
|
4166
|
+
function _templateObject5$1() {
|
|
4167
|
+
var data = taggedTemplateLiteral(["\n font-family: ", ";\n"]);
|
|
4168
|
+
|
|
4169
|
+
_templateObject5$1 = function _templateObject5() {
|
|
4170
|
+
return data;
|
|
4171
|
+
};
|
|
4172
|
+
|
|
4173
|
+
return data;
|
|
4174
|
+
}
|
|
4175
|
+
|
|
4176
|
+
function _templateObject4$1() {
|
|
4189
4177
|
var data = taggedTemplateLiteral(["\n font-size: 14px;\n line-height: 16px;\n color: ", ";\n\n ", "\n}\n"]);
|
|
4190
4178
|
|
|
4191
|
-
_templateObject4$
|
|
4179
|
+
_templateObject4$1 = function _templateObject4() {
|
|
4192
4180
|
return data;
|
|
4193
4181
|
};
|
|
4194
4182
|
|
|
4195
4183
|
return data;
|
|
4196
4184
|
}
|
|
4197
4185
|
|
|
4198
|
-
function _templateObject3$
|
|
4186
|
+
function _templateObject3$1() {
|
|
4199
4187
|
var data = taggedTemplateLiteral(["\n font-size: 16px;\n line-height: 20px;\n"]);
|
|
4200
4188
|
|
|
4201
|
-
_templateObject3$
|
|
4189
|
+
_templateObject3$1 = function _templateObject3() {
|
|
4202
4190
|
return data;
|
|
4203
4191
|
};
|
|
4204
4192
|
|
|
@@ -4226,38 +4214,19 @@ function _templateObject$5() {
|
|
|
4226
4214
|
}
|
|
4227
4215
|
var Title = styled__default.h1(_templateObject$5(), theme.colors.info.text);
|
|
4228
4216
|
var SubTitle = styled__default.h3(_templateObject2$2(), theme.colors.info.text);
|
|
4229
|
-
var ThirdTitle = styled__default(SubTitle)(_templateObject3$
|
|
4230
|
-
var Text = styled__default.p(_templateObject4$
|
|
4217
|
+
var ThirdTitle = styled__default(SubTitle)(_templateObject3$1());
|
|
4218
|
+
var Text = styled__default.p(_templateObject4$1(), theme.colors.neutrals.gray, function (_ref) {
|
|
4231
4219
|
var subtle = _ref.subtle;
|
|
4232
4220
|
return subtle && "\n color:".concat(theme.colors.neutrals.medium, ";\n ");
|
|
4233
4221
|
});
|
|
4222
|
+
var Emphasis = styled__default.span(_templateObject5$1(), theme.font.main);
|
|
4234
4223
|
|
|
4235
4224
|
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
4236
4225
|
|
|
4237
4226
|
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
4238
4227
|
|
|
4239
|
-
function _templateObject14() {
|
|
4240
|
-
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"]);
|
|
4241
|
-
|
|
4242
|
-
_templateObject14 = function _templateObject14() {
|
|
4243
|
-
return data;
|
|
4244
|
-
};
|
|
4245
|
-
|
|
4246
|
-
return data;
|
|
4247
|
-
}
|
|
4248
|
-
|
|
4249
|
-
function _templateObject13() {
|
|
4250
|
-
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"]);
|
|
4251
|
-
|
|
4252
|
-
_templateObject13 = function _templateObject13() {
|
|
4253
|
-
return data;
|
|
4254
|
-
};
|
|
4255
|
-
|
|
4256
|
-
return data;
|
|
4257
|
-
}
|
|
4258
|
-
|
|
4259
4228
|
function _templateObject12() {
|
|
4260
|
-
var data = taggedTemplateLiteral(["\n
|
|
4229
|
+
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"]);
|
|
4261
4230
|
|
|
4262
4231
|
_templateObject12 = function _templateObject12() {
|
|
4263
4232
|
return data;
|
|
@@ -4267,7 +4236,7 @@ function _templateObject12() {
|
|
|
4267
4236
|
}
|
|
4268
4237
|
|
|
4269
4238
|
function _templateObject11() {
|
|
4270
|
-
var data = taggedTemplateLiteral(["\n
|
|
4239
|
+
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"]);
|
|
4271
4240
|
|
|
4272
4241
|
_templateObject11 = function _templateObject11() {
|
|
4273
4242
|
return data;
|
|
@@ -4277,7 +4246,7 @@ function _templateObject11() {
|
|
|
4277
4246
|
}
|
|
4278
4247
|
|
|
4279
4248
|
function _templateObject10() {
|
|
4280
|
-
var data = taggedTemplateLiteral(["\n
|
|
4249
|
+
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"]);
|
|
4281
4250
|
|
|
4282
4251
|
_templateObject10 = function _templateObject10() {
|
|
4283
4252
|
return data;
|
|
@@ -4287,7 +4256,7 @@ function _templateObject10() {
|
|
|
4287
4256
|
}
|
|
4288
4257
|
|
|
4289
4258
|
function _templateObject9$1() {
|
|
4290
|
-
var data = taggedTemplateLiteral(["\n
|
|
4259
|
+
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"]);
|
|
4291
4260
|
|
|
4292
4261
|
_templateObject9$1 = function _templateObject9() {
|
|
4293
4262
|
return data;
|
|
@@ -4297,7 +4266,7 @@ function _templateObject9$1() {
|
|
|
4297
4266
|
}
|
|
4298
4267
|
|
|
4299
4268
|
function _templateObject8$1() {
|
|
4300
|
-
var data = taggedTemplateLiteral(["\n
|
|
4269
|
+
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"]);
|
|
4301
4270
|
|
|
4302
4271
|
_templateObject8$1 = function _templateObject8() {
|
|
4303
4272
|
return data;
|
|
@@ -4307,7 +4276,7 @@ function _templateObject8$1() {
|
|
|
4307
4276
|
}
|
|
4308
4277
|
|
|
4309
4278
|
function _templateObject7$1() {
|
|
4310
|
-
var data = taggedTemplateLiteral(["\n
|
|
4279
|
+
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"]);
|
|
4311
4280
|
|
|
4312
4281
|
_templateObject7$1 = function _templateObject7() {
|
|
4313
4282
|
return data;
|
|
@@ -4317,7 +4286,7 @@ function _templateObject7$1() {
|
|
|
4317
4286
|
}
|
|
4318
4287
|
|
|
4319
4288
|
function _templateObject6$1() {
|
|
4320
|
-
var data = taggedTemplateLiteral(["\n
|
|
4289
|
+
var data = taggedTemplateLiteral(["\n position: absolute;\n height: 1px;\n width: 1px;\n z-index: -1;\n opacity: 0;\n"]);
|
|
4321
4290
|
|
|
4322
4291
|
_templateObject6$1 = function _templateObject6() {
|
|
4323
4292
|
return data;
|
|
@@ -4326,30 +4295,30 @@ function _templateObject6$1() {
|
|
|
4326
4295
|
return data;
|
|
4327
4296
|
}
|
|
4328
4297
|
|
|
4329
|
-
function _templateObject5$
|
|
4298
|
+
function _templateObject5$2() {
|
|
4330
4299
|
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"]);
|
|
4331
4300
|
|
|
4332
|
-
_templateObject5$
|
|
4301
|
+
_templateObject5$2 = function _templateObject5() {
|
|
4333
4302
|
return data;
|
|
4334
4303
|
};
|
|
4335
4304
|
|
|
4336
4305
|
return data;
|
|
4337
4306
|
}
|
|
4338
4307
|
|
|
4339
|
-
function _templateObject4$
|
|
4340
|
-
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"]);
|
|
4308
|
+
function _templateObject4$2() {
|
|
4309
|
+
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 &.active {\n background: ", ";\n\n > ul {\n display: inline-block;\n }\n }\n\n &.alone {\n border-top: 1px solid ", ";\n }\n\n }\n"]);
|
|
4341
4310
|
|
|
4342
|
-
_templateObject4$
|
|
4311
|
+
_templateObject4$2 = function _templateObject4() {
|
|
4343
4312
|
return data;
|
|
4344
4313
|
};
|
|
4345
4314
|
|
|
4346
4315
|
return data;
|
|
4347
4316
|
}
|
|
4348
4317
|
|
|
4349
|
-
function _templateObject3$
|
|
4318
|
+
function _templateObject3$2() {
|
|
4350
4319
|
var data = taggedTemplateLiteral(["\n white-space: nowrap;\n overflow: hidden;\n color: ", ";\n\n ", "\n > span {\n color: #707070;\n }\n"]);
|
|
4351
4320
|
|
|
4352
|
-
_templateObject3$
|
|
4321
|
+
_templateObject3$2 = function _templateObject3() {
|
|
4353
4322
|
return data;
|
|
4354
4323
|
};
|
|
4355
4324
|
|
|
@@ -4404,12 +4373,12 @@ var Value$1 = styled__default(Text).attrs(function (props) {
|
|
|
4404
4373
|
return {
|
|
4405
4374
|
as: 'span'
|
|
4406
4375
|
};
|
|
4407
|
-
})(_templateObject3$
|
|
4376
|
+
})(_templateObject3$2(), theme.colors.neutrals.medium, function (props) {
|
|
4408
4377
|
return props.option && "\n display:inline-block;\n flex:1;\n ";
|
|
4409
4378
|
});
|
|
4410
4379
|
var maxOptions = 3;
|
|
4411
4380
|
var optionsSize = 32;
|
|
4412
|
-
var Options$1 = styled__default.ul(_templateObject4$
|
|
4381
|
+
var Options$1 = styled__default.ul(_templateObject4$2(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, theme.defaultRadius, function (props) {
|
|
4413
4382
|
return props.openTo === 'top' && "\n top:unset;\n bottom: 100%;\n ";
|
|
4414
4383
|
}, function (props) {
|
|
4415
4384
|
return !props.hasChildren && "\n max-height: ".concat(props.visibleOptionsQty ? props.visibleOptionsQty * optionsSize : maxOptions * optionsSize, "px;\n overflow-x:hidden;\n overflow-y:scroll;\n ");
|
|
@@ -4417,16 +4386,14 @@ var Options$1 = styled__default.ul(_templateObject4$3(), theme.colors.neutrals.s
|
|
|
4417
4386
|
return props.isChild && "\n position:absolute;\n left:100%;\n margin-left:4px;\n top:-4px;\n ";
|
|
4418
4387
|
}, theme.font.small.size, theme.colors.info.bg, theme.colors.neutrals.silver);
|
|
4419
4388
|
var optionsSizeCustom = 42;
|
|
4420
|
-
var OptionsPeople = styled__default(Options$1)(_templateObject5$
|
|
4389
|
+
var OptionsPeople = styled__default(Options$1)(_templateObject5$2(), function (props) {
|
|
4421
4390
|
return props.visibleOptionsQty ? props.visibleOptionsQty * optionsSize : optionsSizeCustom * optionsSize;
|
|
4422
4391
|
});
|
|
4423
|
-
var
|
|
4424
|
-
var
|
|
4425
|
-
var
|
|
4426
|
-
var
|
|
4427
|
-
var
|
|
4428
|
-
var OptionGroup$1 = styled__default.div(_templateObject11());
|
|
4429
|
-
var ColorOption = styled__default.span(_templateObject12(), function (props) {
|
|
4392
|
+
var SelectHidden = styled__default.select(_templateObject6$1());
|
|
4393
|
+
var PhotoCover = styled__default.div(_templateObject7$1());
|
|
4394
|
+
var CustomCheckBox = styled__default.div(_templateObject8$1(), theme.colors.neutrals.white, theme.defaultRadius, theme.colors.neutrals.silver, theme.defaultRadius, theme.colors.secondary, theme.colors.action);
|
|
4395
|
+
var OptionGroup$1 = styled__default.div(_templateObject9$1());
|
|
4396
|
+
var ColorOption = styled__default.span(_templateObject10(), function (props) {
|
|
4430
4397
|
return props.color ? props.color : 'black';
|
|
4431
4398
|
}, function (props) {
|
|
4432
4399
|
return props.index > 0 ? 10 - props.index : 10;
|
|
@@ -4442,10 +4409,10 @@ var getSelected = function getSelected(options, defaultValue) {
|
|
|
4442
4409
|
return selected;
|
|
4443
4410
|
};
|
|
4444
4411
|
|
|
4445
|
-
var SearchInput = styled__default.input(
|
|
4412
|
+
var SearchInput = styled__default.input(_templateObject11(), theme.font.medium.size, theme.font.medium.lineHeight, theme.colors.neutrals.gray, function (props) {
|
|
4446
4413
|
return props.hasSelection ? theme.colors.neutrals.gray : theme.colors.neutrals.medium;
|
|
4447
4414
|
});
|
|
4448
|
-
var ToggleButton = styled__default.button(
|
|
4415
|
+
var ToggleButton = styled__default.button(_templateObject12());
|
|
4449
4416
|
|
|
4450
4417
|
var isOption = function isOption(item) {
|
|
4451
4418
|
return item.value !== undefined && item.value !== null;
|
|
@@ -4495,8 +4462,21 @@ var FloatingOptions = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
|
|
|
4495
4462
|
}]
|
|
4496
4463
|
}),
|
|
4497
4464
|
styles = _usePopper.styles,
|
|
4498
|
-
attributes = _usePopper.attributes
|
|
4465
|
+
attributes = _usePopper.attributes,
|
|
4466
|
+
update = _usePopper.update; // popper repositions only on scroll and resize; follow size changes of the anchor and the list
|
|
4499
4467
|
|
|
4468
|
+
|
|
4469
|
+
React.useEffect(function () {
|
|
4470
|
+
if (!anchor || !list || !update) return;
|
|
4471
|
+
var observer = new window.ResizeObserver(function () {
|
|
4472
|
+
return update();
|
|
4473
|
+
});
|
|
4474
|
+
observer.observe(anchor);
|
|
4475
|
+
observer.observe(list);
|
|
4476
|
+
return function () {
|
|
4477
|
+
return observer.disconnect();
|
|
4478
|
+
};
|
|
4479
|
+
}, [anchor, list, update]);
|
|
4500
4480
|
return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default.createElement(Options$1, _extends_1({
|
|
4501
4481
|
ref: listRef,
|
|
4502
4482
|
style: _objectSpread$1(_objectSpread$1(_objectSpread$1({}, style), styles.popper), {}, {
|
|
@@ -4900,7 +4880,7 @@ var MultiDropdown = /*#__PURE__*/React.forwardRef(function (_ref9, ref) {
|
|
|
4900
4880
|
visibleOptionsQty: visibleOptionsQty,
|
|
4901
4881
|
openTo: openTo,
|
|
4902
4882
|
startOpen: startOpen
|
|
4903
|
-
}, props)), help && /*#__PURE__*/React__default.createElement(
|
|
4883
|
+
}, props)), help && /*#__PURE__*/React__default.createElement(SpanHelp, null, help), error && /*#__PURE__*/React__default.createElement(SpanError, null, /*#__PURE__*/React__default.createElement("img", {
|
|
4904
4884
|
src: Ex,
|
|
4905
4885
|
style: {
|
|
4906
4886
|
marginRight: '6px'
|
|
@@ -5012,7 +4992,7 @@ var SingleDropdown = /*#__PURE__*/React.forwardRef(function (_ref10, ref) {
|
|
|
5012
4992
|
visibleOptionsQty: visibleOptionsQty,
|
|
5013
4993
|
openTo: openTo,
|
|
5014
4994
|
startOpen: startOpen
|
|
5015
|
-
}, props)), help && /*#__PURE__*/React__default.createElement(
|
|
4995
|
+
}, props)), help && /*#__PURE__*/React__default.createElement(SpanHelp, null, help), error && /*#__PURE__*/React__default.createElement(SpanError, null, /*#__PURE__*/React__default.createElement("img", {
|
|
5016
4996
|
src: Ex,
|
|
5017
4997
|
style: {
|
|
5018
4998
|
marginRight: '6px'
|
|
@@ -5312,7 +5292,7 @@ var CustomDropdown = /*#__PURE__*/React.forwardRef(function (_ref13, ref) {
|
|
|
5312
5292
|
noOptions: props.noOptions,
|
|
5313
5293
|
visibleOptionsQty: visibleOptionsQty,
|
|
5314
5294
|
openTo: openTo
|
|
5315
|
-
})), help && /*#__PURE__*/React__default.createElement(
|
|
5295
|
+
})), help && /*#__PURE__*/React__default.createElement(SpanHelp, null, help), error && /*#__PURE__*/React__default.createElement(SpanError, null, /*#__PURE__*/React__default.createElement("img", {
|
|
5316
5296
|
src: Ex,
|
|
5317
5297
|
style: {
|
|
5318
5298
|
marginRight: '6px'
|
|
@@ -5557,28 +5537,8 @@ var Spacer = function Spacer(_ref) {
|
|
|
5557
5537
|
return /*#__PURE__*/React__default.createElement(BaseSpace, props);
|
|
5558
5538
|
};
|
|
5559
5539
|
|
|
5560
|
-
function _templateObject9$2() {
|
|
5561
|
-
var data = taggedTemplateLiteral(["\n color: ", ";\n"]);
|
|
5562
|
-
|
|
5563
|
-
_templateObject9$2 = function _templateObject9() {
|
|
5564
|
-
return data;
|
|
5565
|
-
};
|
|
5566
|
-
|
|
5567
|
-
return data;
|
|
5568
|
-
}
|
|
5569
|
-
|
|
5570
|
-
function _templateObject8$2() {
|
|
5571
|
-
var data = taggedTemplateLiteral(["\n color:", ";\n display:block;\n"]);
|
|
5572
|
-
|
|
5573
|
-
_templateObject8$2 = function _templateObject8() {
|
|
5574
|
-
return data;
|
|
5575
|
-
};
|
|
5576
|
-
|
|
5577
|
-
return data;
|
|
5578
|
-
}
|
|
5579
|
-
|
|
5580
5540
|
function _templateObject7$2() {
|
|
5581
|
-
var data = taggedTemplateLiteral(["\n
|
|
5541
|
+
var data = taggedTemplateLiteral(["\n color: ", ";\n"]);
|
|
5582
5542
|
|
|
5583
5543
|
_templateObject7$2 = function _templateObject7() {
|
|
5584
5544
|
return data;
|
|
@@ -5597,30 +5557,30 @@ function _templateObject6$2() {
|
|
|
5597
5557
|
return data;
|
|
5598
5558
|
}
|
|
5599
5559
|
|
|
5600
|
-
function _templateObject5$
|
|
5560
|
+
function _templateObject5$3() {
|
|
5601
5561
|
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"]);
|
|
5602
5562
|
|
|
5603
|
-
_templateObject5$
|
|
5563
|
+
_templateObject5$3 = function _templateObject5() {
|
|
5604
5564
|
return data;
|
|
5605
5565
|
};
|
|
5606
5566
|
|
|
5607
5567
|
return data;
|
|
5608
5568
|
}
|
|
5609
5569
|
|
|
5610
|
-
function _templateObject4$
|
|
5570
|
+
function _templateObject4$3() {
|
|
5611
5571
|
var data = taggedTemplateLiteral(["\n background: ", ";\n border-radius: ", ";\n border:1px solid ", ";\n height:", ";\n width:", ";\n border-radius:", ";\n display: inline-flex;\n justify-content: center;\n align-items: center;\n box-sizing:border-box;\n\n svg {\n display:none;\n }\n\n ", ":focus + &, ", ":focus + & {\n border-color:", ";\n box-shadow:0 0 6px ", ";\n }\n\n ", ":disabled + &, ", ":disabled + & {\n background:", ";\n border-color:#707070;\n opacity:0.5;\n cursor:default;\n }\n\n ", ":checked + &, ", ":checked + & {\n svg {\n display:block;\n }\n }\n"]);
|
|
5612
5572
|
|
|
5613
|
-
_templateObject4$
|
|
5573
|
+
_templateObject4$3 = function _templateObject4() {
|
|
5614
5574
|
return data;
|
|
5615
5575
|
};
|
|
5616
5576
|
|
|
5617
5577
|
return data;
|
|
5618
5578
|
}
|
|
5619
5579
|
|
|
5620
|
-
function _templateObject3$
|
|
5580
|
+
function _templateObject3$3() {
|
|
5621
5581
|
var data = taggedTemplateLiteral(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n justify-content: center;\n cursor:pointer;\n\n &:focus {\n outline:none;\n }\n "]);
|
|
5622
5582
|
|
|
5623
|
-
_templateObject3$
|
|
5583
|
+
_templateObject3$3 = function _templateObject3() {
|
|
5624
5584
|
return data;
|
|
5625
5585
|
};
|
|
5626
5586
|
|
|
@@ -5652,19 +5612,17 @@ var HiddenCheckbox = styled__default.input.attrs({
|
|
|
5652
5612
|
var HiddenRadioBox = styled__default.input.attrs({
|
|
5653
5613
|
type: 'radio'
|
|
5654
5614
|
})(_templateObject2$4());
|
|
5655
|
-
var CheckboxContainer = styled__default.label(_templateObject3$
|
|
5656
|
-
var CustomCheckBox$1 = styled__default.div(_templateObject4$
|
|
5615
|
+
var CheckboxContainer = styled__default.label(_templateObject3$3());
|
|
5616
|
+
var CustomCheckBox$1 = styled__default.div(_templateObject4$3(), theme.colors.neutrals.white, theme.defaultRadius, theme.colors.neutrals.silver, function (props) {
|
|
5657
5617
|
return props.radio ? '17px' : '16px';
|
|
5658
5618
|
}, function (props) {
|
|
5659
5619
|
return props.radio ? '17px' : '16px';
|
|
5660
5620
|
}, function (props) {
|
|
5661
5621
|
return props.radio ? '17px' : '2px';
|
|
5662
5622
|
}, HiddenCheckbox, HiddenRadioBox, theme.colors.secondary, theme.colors.action, HiddenCheckbox, HiddenRadioBox, theme.colors.neutrals.silver, HiddenCheckbox, HiddenRadioBox);
|
|
5663
|
-
var Title$1 = styled__default.h5(_templateObject5$
|
|
5623
|
+
var Title$1 = styled__default.h5(_templateObject5$3(), theme.colors.error.text);
|
|
5664
5624
|
var Label$1 = styled__default.span(_templateObject6$2());
|
|
5665
|
-
var
|
|
5666
|
-
var SpanError$3 = styled__default(Span$2)(_templateObject8$2(), theme.colors.error.text);
|
|
5667
|
-
var NoOptions = styled__default(Text)(_templateObject9$2(), theme.colors.neutrals.silver);
|
|
5625
|
+
var NoOptions = styled__default(Text)(_templateObject7$2(), theme.colors.neutrals.silver);
|
|
5668
5626
|
var CheckboxBase = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
5669
5627
|
var name = _ref.name,
|
|
5670
5628
|
_ref$checked = _ref.checked,
|
|
@@ -5698,7 +5656,7 @@ var CheckboxBase = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
5698
5656
|
className: preventClass ? preventClass : ''
|
|
5699
5657
|
})), /*#__PURE__*/React__default.createElement(Label$1, {
|
|
5700
5658
|
className: preventClass ? preventClass : ''
|
|
5701
|
-
}, label)), error && /*#__PURE__*/React__default.createElement(SpanError
|
|
5659
|
+
}, label)), error && /*#__PURE__*/React__default.createElement(SpanError, null, /*#__PURE__*/React__default.createElement("img", {
|
|
5702
5660
|
src: Ex,
|
|
5703
5661
|
style: {
|
|
5704
5662
|
marginRight: '6px'
|
|
@@ -5740,7 +5698,7 @@ var CheckBox = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
|
5740
5698
|
ref: ref,
|
|
5741
5699
|
checked: checked
|
|
5742
5700
|
})));
|
|
5743
|
-
}), !options || !options.length && /*#__PURE__*/React__default.createElement(NoOptions, null, "No options available"), error && /*#__PURE__*/React__default.createElement(SpanError
|
|
5701
|
+
}), !options || !options.length && /*#__PURE__*/React__default.createElement(NoOptions, null, "No options available"), error && /*#__PURE__*/React__default.createElement(SpanError, null, /*#__PURE__*/React__default.createElement("img", {
|
|
5744
5702
|
src: Ex,
|
|
5745
5703
|
style: {
|
|
5746
5704
|
marginRight: '6px'
|
|
@@ -5769,7 +5727,7 @@ var RadioBoxBase = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
|
|
|
5769
5727
|
radio: true
|
|
5770
5728
|
}, /*#__PURE__*/React__default.createElement(Icons.Check, {
|
|
5771
5729
|
size: "17px"
|
|
5772
|
-
})), /*#__PURE__*/React__default.createElement(Label$1, null, label)), error && /*#__PURE__*/React__default.createElement(SpanError
|
|
5730
|
+
})), /*#__PURE__*/React__default.createElement(Label$1, null, label)), error && /*#__PURE__*/React__default.createElement(SpanError, null, /*#__PURE__*/React__default.createElement("img", {
|
|
5773
5731
|
src: Ex,
|
|
5774
5732
|
style: {
|
|
5775
5733
|
marginRight: '6px'
|
|
@@ -5819,7 +5777,7 @@ var RadioBox = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
|
|
|
5819
5777
|
}, props, {
|
|
5820
5778
|
ref: ref
|
|
5821
5779
|
})));
|
|
5822
|
-
}), !options || !options.length && /*#__PURE__*/React__default.createElement(NoOptions, null, "No options available"), error && /*#__PURE__*/React__default.createElement(SpanError
|
|
5780
|
+
}), !options || !options.length && /*#__PURE__*/React__default.createElement(NoOptions, null, "No options available"), error && /*#__PURE__*/React__default.createElement(SpanError, null, /*#__PURE__*/React__default.createElement("img", {
|
|
5823
5781
|
src: Ex,
|
|
5824
5782
|
style: {
|
|
5825
5783
|
marginRight: '6px'
|
|
@@ -5938,7 +5896,7 @@ var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
5938
5896
|
}, props, {
|
|
5939
5897
|
validation: validationType,
|
|
5940
5898
|
ref: ref
|
|
5941
|
-
})), help && /*#__PURE__*/React__default.createElement(
|
|
5899
|
+
})), help && /*#__PURE__*/React__default.createElement(SpanHelp, null, help), error && /*#__PURE__*/React__default.createElement(SpanError, null, /*#__PURE__*/React__default.createElement("img", {
|
|
5942
5900
|
src: Ex,
|
|
5943
5901
|
style: {
|
|
5944
5902
|
marginRight: '6px'
|
|
@@ -5950,50 +5908,20 @@ function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if
|
|
|
5950
5908
|
|
|
5951
5909
|
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
5952
5910
|
|
|
5953
|
-
function
|
|
5911
|
+
function _templateObject4$4() {
|
|
5954
5912
|
var data = taggedTemplateLiteral(["\n position: absolute;\n height: 1px;\n width: 1px;\n z-index: -1;\n opacity: 0;\n"]);
|
|
5955
5913
|
|
|
5956
|
-
|
|
5957
|
-
return data;
|
|
5958
|
-
};
|
|
5959
|
-
|
|
5960
|
-
return data;
|
|
5961
|
-
}
|
|
5962
|
-
|
|
5963
|
-
function _templateObject6$3() {
|
|
5964
|
-
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"]);
|
|
5965
|
-
|
|
5966
|
-
_templateObject6$3 = function _templateObject6() {
|
|
5967
|
-
return data;
|
|
5968
|
-
};
|
|
5969
|
-
|
|
5970
|
-
return data;
|
|
5971
|
-
}
|
|
5972
|
-
|
|
5973
|
-
function _templateObject5$3() {
|
|
5974
|
-
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"]);
|
|
5975
|
-
|
|
5976
|
-
_templateObject5$3 = function _templateObject5() {
|
|
5977
|
-
return data;
|
|
5978
|
-
};
|
|
5979
|
-
|
|
5980
|
-
return data;
|
|
5981
|
-
}
|
|
5982
|
-
|
|
5983
|
-
function _templateObject4$5() {
|
|
5984
|
-
var data = taggedTemplateLiteral(["\n background:", ";\n box-sizing:border-box;\n cursor:pointer;\n position:relative;\n box-sizing: border-box;\n padding:0;\n\n height:auto;\n min-height:40px;\n\n\n &:focus-within {\n box-shadow:0px 0px 6px ", "\n border-color:", "\n }\n\n &.error {\n border-color:", ";\n }\n"]);
|
|
5985
|
-
|
|
5986
|
-
_templateObject4$5 = function _templateObject4() {
|
|
5914
|
+
_templateObject4$4 = function _templateObject4() {
|
|
5987
5915
|
return data;
|
|
5988
5916
|
};
|
|
5989
5917
|
|
|
5990
5918
|
return data;
|
|
5991
5919
|
}
|
|
5992
5920
|
|
|
5993
|
-
function _templateObject3$
|
|
5994
|
-
var data = taggedTemplateLiteral(["\n color:", "\n"]);
|
|
5921
|
+
function _templateObject3$4() {
|
|
5922
|
+
var data = taggedTemplateLiteral(["\n list-style:none;\n padding:0 5px 3px;\n margin:0;\n display:flex;\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"]);
|
|
5995
5923
|
|
|
5996
|
-
_templateObject3$
|
|
5924
|
+
_templateObject3$4 = function _templateObject3() {
|
|
5997
5925
|
return data;
|
|
5998
5926
|
};
|
|
5999
5927
|
|
|
@@ -6001,7 +5929,7 @@ function _templateObject3$5() {
|
|
|
6001
5929
|
}
|
|
6002
5930
|
|
|
6003
5931
|
function _templateObject2$5() {
|
|
6004
|
-
var data = taggedTemplateLiteral(["\n
|
|
5932
|
+
var data = taggedTemplateLiteral(["\n background:", ";\n box-sizing:border-box;\n cursor:pointer;\n position:relative;\n box-sizing: border-box;\n padding:0;\n\n height:auto;\n min-height:40px;\n width:", ";\n\n\n &:hover {\n border-color:", ";\n }\n\n &.open,\n &:focus-within {\n border-color:", ";\n box-shadow:0 0 6px ", ";\n }\n\n &.error {\n border-color:", ";\n }\n\n &.error.open,\n &.error:focus-within {\n box-shadow:0 0 6px ", ";\n }\n\n &.valid {\n border-color:", ";\n }\n\n &.valid.open,\n &.valid:focus-within {\n box-shadow:0 0 6px ", ";\n }\n"]);
|
|
6005
5933
|
|
|
6006
5934
|
_templateObject2$5 = function _templateObject2() {
|
|
6007
5935
|
return data;
|
|
@@ -6011,7 +5939,7 @@ function _templateObject2$5() {
|
|
|
6011
5939
|
}
|
|
6012
5940
|
|
|
6013
5941
|
function _templateObject$a() {
|
|
6014
|
-
var data = taggedTemplateLiteral(["\n display:inline-block;\n vertical-align: top;\n"]);
|
|
5942
|
+
var data = taggedTemplateLiteral(["\n display:inline-block;\n vertical-align: top;\n ", "\n"]);
|
|
6015
5943
|
|
|
6016
5944
|
_templateObject$a = function _templateObject() {
|
|
6017
5945
|
return data;
|
|
@@ -6019,35 +5947,33 @@ function _templateObject$a() {
|
|
|
6019
5947
|
|
|
6020
5948
|
return data;
|
|
6021
5949
|
}
|
|
6022
|
-
var Frag$3 = styled__default.div(_templateObject$a())
|
|
6023
|
-
var
|
|
6024
|
-
|
|
6025
|
-
|
|
5950
|
+
var Frag$3 = styled__default.div(_templateObject$a(), function (_ref) {
|
|
5951
|
+
var size = _ref.size;
|
|
5952
|
+
return handleSize$1(size) === '100%' && 'width:100%;';
|
|
5953
|
+
});
|
|
5954
|
+
var Select = styled__default(InputBase)(_templateObject2$5(), theme.colors.neutrals.white, function (_ref2) {
|
|
5955
|
+
var size = _ref2.size;
|
|
5956
|
+
return handleSize$1(size);
|
|
5957
|
+
}, theme.colors.info.border, theme.colors.secondary, theme.colors.action, theme.colors.error.border, theme.colors.error.shadow, theme.colors.success.border, theme.colors.success.shadow);
|
|
6026
5958
|
var maxOptions$1 = 5;
|
|
6027
|
-
var
|
|
6028
|
-
var
|
|
6029
|
-
|
|
6030
|
-
|
|
6031
|
-
|
|
6032
|
-
|
|
6033
|
-
|
|
6034
|
-
|
|
6035
|
-
|
|
6036
|
-
|
|
6037
|
-
|
|
6038
|
-
|
|
6039
|
-
|
|
6040
|
-
|
|
6041
|
-
|
|
6042
|
-
|
|
6043
|
-
|
|
6044
|
-
|
|
6045
|
-
size = _ref.size,
|
|
6046
|
-
onChange = _ref.onChange,
|
|
6047
|
-
placeholder = _ref.placeholder,
|
|
6048
|
-
visibleOptionsQty = _ref.visibleOptionsQty,
|
|
6049
|
-
openTo = _ref.openTo,
|
|
6050
|
-
props = objectWithoutProperties(_ref, ["name", "options", "error", "valid", "help", "label", "tooltip", "canCreate", "size", "onChange", "placeholder", "visibleOptionsQty", "openTo"]);
|
|
5959
|
+
var TagsValues = styled__default.ul(_templateObject3$4(), theme.defaultRadius);
|
|
5960
|
+
var SelectHidden$1 = styled__default.select(_templateObject4$4());
|
|
5961
|
+
var Tag = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
|
|
5962
|
+
var _ref3$name = _ref3.name,
|
|
5963
|
+
name = _ref3$name === void 0 ? '' : _ref3$name,
|
|
5964
|
+
options = _ref3.options,
|
|
5965
|
+
error = _ref3.error,
|
|
5966
|
+
valid = _ref3.valid,
|
|
5967
|
+
help = _ref3.help,
|
|
5968
|
+
label = _ref3.label,
|
|
5969
|
+
tooltip = _ref3.tooltip,
|
|
5970
|
+
canCreate = _ref3.canCreate,
|
|
5971
|
+
size = _ref3.size,
|
|
5972
|
+
onChange = _ref3.onChange,
|
|
5973
|
+
placeholder = _ref3.placeholder,
|
|
5974
|
+
visibleOptionsQty = _ref3.visibleOptionsQty,
|
|
5975
|
+
openTo = _ref3.openTo,
|
|
5976
|
+
props = objectWithoutProperties(_ref3, ["name", "options", "error", "valid", "help", "label", "tooltip", "canCreate", "size", "onChange", "placeholder", "visibleOptionsQty", "openTo"]);
|
|
6051
5977
|
|
|
6052
5978
|
if (!options || !options[0]) options = [];
|
|
6053
5979
|
var randId = Math.random() * new Date().getTime();
|
|
@@ -6081,6 +6007,12 @@ var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
6081
6007
|
var containerRef = React.useRef();
|
|
6082
6008
|
var searchRef = React.useRef();
|
|
6083
6009
|
var valueRef = React.useRef();
|
|
6010
|
+
var optionsRef = React.useRef();
|
|
6011
|
+
|
|
6012
|
+
var _useState11 = React.useState(null),
|
|
6013
|
+
_useState12 = slicedToArray(_useState11, 2),
|
|
6014
|
+
anchor = _useState12[0],
|
|
6015
|
+
setAnchor = _useState12[1];
|
|
6084
6016
|
|
|
6085
6017
|
var isSelected = function isSelected(value) {
|
|
6086
6018
|
return selectedOpt.some(function (key) {
|
|
@@ -6143,8 +6075,10 @@ var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
6143
6075
|
};
|
|
6144
6076
|
|
|
6145
6077
|
var handleClick = function handleClick(e) {
|
|
6078
|
+
var _optionsRef$current;
|
|
6079
|
+
|
|
6146
6080
|
var elm = e.target;
|
|
6147
|
-
if (containerRef.current.contains(elm)) return;
|
|
6081
|
+
if (containerRef.current.contains(elm) || ((_optionsRef$current = optionsRef.current) === null || _optionsRef$current === void 0 ? void 0 : _optionsRef$current.contains(elm))) return;
|
|
6148
6082
|
setOpen(false);
|
|
6149
6083
|
};
|
|
6150
6084
|
|
|
@@ -6279,13 +6213,15 @@ var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
6279
6213
|
}
|
|
6280
6214
|
});
|
|
6281
6215
|
return /*#__PURE__*/React__default.createElement(Frag$3, {
|
|
6282
|
-
ref: containerRef
|
|
6216
|
+
ref: containerRef,
|
|
6217
|
+
size: size
|
|
6283
6218
|
}, label && /*#__PURE__*/React__default.createElement(Label, {
|
|
6284
6219
|
htmlFor: name
|
|
6285
6220
|
}, label, " ", tooltip && /*#__PURE__*/React__default.createElement(App, {
|
|
6286
6221
|
text: tooltip
|
|
6287
6222
|
}), " ", props.Required && /*#__PURE__*/React__default.createElement(RequiredText, null)), /*#__PURE__*/React__default.createElement(Select, {
|
|
6288
6223
|
as: "div",
|
|
6224
|
+
ref: setAnchor,
|
|
6289
6225
|
size: size,
|
|
6290
6226
|
className: [open && 'open', error && 'error', valid && 'valid', 'tagEventPrevent'],
|
|
6291
6227
|
onClick: function onClick() {
|
|
@@ -6317,6 +6253,8 @@ var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
6317
6253
|
onFocus: handleFocus,
|
|
6318
6254
|
onBlur: handleBlur
|
|
6319
6255
|
}))), open && /*#__PURE__*/React__default.createElement(TagOptions, {
|
|
6256
|
+
anchor: anchor,
|
|
6257
|
+
listRef: optionsRef,
|
|
6320
6258
|
name: safeName,
|
|
6321
6259
|
filter: filter,
|
|
6322
6260
|
handleSelect: handleSelect,
|
|
@@ -6326,7 +6264,7 @@ var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
6326
6264
|
canCreate: canCreate,
|
|
6327
6265
|
visibleOptionsQty: visibleOptionsQty,
|
|
6328
6266
|
openTo: openTo
|
|
6329
|
-
})), help && /*#__PURE__*/React__default.createElement(
|
|
6267
|
+
})), help && /*#__PURE__*/React__default.createElement(SpanHelp, null, help), error && /*#__PURE__*/React__default.createElement(SpanError, null, /*#__PURE__*/React__default.createElement("img", {
|
|
6330
6268
|
src: Ex,
|
|
6331
6269
|
style: {
|
|
6332
6270
|
marginRight: '6px'
|
|
@@ -6344,16 +6282,18 @@ var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
6344
6282
|
})));
|
|
6345
6283
|
});
|
|
6346
6284
|
|
|
6347
|
-
var TagOptions = function TagOptions(
|
|
6348
|
-
var
|
|
6349
|
-
|
|
6350
|
-
|
|
6351
|
-
|
|
6352
|
-
|
|
6353
|
-
|
|
6354
|
-
|
|
6355
|
-
|
|
6356
|
-
|
|
6285
|
+
var TagOptions = function TagOptions(_ref4) {
|
|
6286
|
+
var anchor = _ref4.anchor,
|
|
6287
|
+
listRef = _ref4.listRef,
|
|
6288
|
+
name = _ref4.name,
|
|
6289
|
+
filter = _ref4.filter,
|
|
6290
|
+
handleSelect = _ref4.handleSelect,
|
|
6291
|
+
options = _ref4.options,
|
|
6292
|
+
searchRef = _ref4.searchRef,
|
|
6293
|
+
addNewOption = _ref4.addNewOption,
|
|
6294
|
+
canCreate = _ref4.canCreate,
|
|
6295
|
+
visibleOptionsQty = _ref4.visibleOptionsQty,
|
|
6296
|
+
openTo = _ref4.openTo;
|
|
6357
6297
|
var CreateOption;
|
|
6358
6298
|
var underscored;
|
|
6359
6299
|
|
|
@@ -6370,9 +6310,11 @@ var TagOptions = function TagOptions(_ref2) {
|
|
|
6370
6310
|
});
|
|
6371
6311
|
},
|
|
6372
6312
|
value: searchRef.current.value
|
|
6313
|
+
}, /*#__PURE__*/React__default.createElement(Value$1, {
|
|
6314
|
+
option: true
|
|
6373
6315
|
}, "Create option \"", /*#__PURE__*/React__default.createElement("u", {
|
|
6374
6316
|
className: "tagEventPrevent"
|
|
6375
|
-
}, searchRef.current.value), "\"");
|
|
6317
|
+
}, searchRef.current.value), "\""));
|
|
6376
6318
|
var searchToUnderscore = searchRef.current ? searchRef.current.value.replaceAll('(', '\\(').replaceAll(')', '\\)') : '';
|
|
6377
6319
|
underscored = new RegExp('(' + searchToUnderscore + ')', 'giu');
|
|
6378
6320
|
}
|
|
@@ -6387,32 +6329,39 @@ var TagOptions = function TagOptions(_ref2) {
|
|
|
6387
6329
|
var msg = searchRef.current && searchRef.current.value.length < 1 ? 'No options left' : 'No match for ';
|
|
6388
6330
|
noDataOption = /*#__PURE__*/React__default.createElement("li", {
|
|
6389
6331
|
className: "tagEventPrevent",
|
|
6390
|
-
|
|
6391
|
-
|
|
6332
|
+
style: {
|
|
6333
|
+
paddingRight: '8px'
|
|
6392
6334
|
}
|
|
6393
|
-
});
|
|
6335
|
+
}, /*#__PURE__*/React__default.createElement("span", null, msg, " ", /*#__PURE__*/React__default.createElement("u", null, (_searchRef$current2 = searchRef.current) === null || _searchRef$current2 === void 0 ? void 0 : _searchRef$current2.value)));
|
|
6394
6336
|
}
|
|
6395
6337
|
|
|
6396
|
-
return /*#__PURE__*/React__default.createElement(
|
|
6338
|
+
return /*#__PURE__*/React__default.createElement(FloatingOptions, {
|
|
6339
|
+
ref: listRef,
|
|
6340
|
+
anchor: anchor,
|
|
6397
6341
|
id: "".concat(name, "-options"),
|
|
6398
|
-
visibleOptionsQty: visibleOptionsQty,
|
|
6342
|
+
visibleOptionsQty: visibleOptionsQty || maxOptions$1,
|
|
6399
6343
|
openTo: openTo
|
|
6400
6344
|
}, options.length > 0 ? filter.map(function (key, index) {
|
|
6401
|
-
if (options[key].value === undefined) return !noDataOption ? /*#__PURE__*/React__default.createElement(
|
|
6345
|
+
if (options[key].value === undefined) return !noDataOption ? /*#__PURE__*/React__default.createElement(OptionGroup$1, {
|
|
6402
6346
|
key: key,
|
|
6403
6347
|
className: "tagEventPrevent"
|
|
6404
|
-
},
|
|
6348
|
+
}, options[key].name) : null;else return /*#__PURE__*/React__default.createElement("li", {
|
|
6405
6349
|
className: "tagEventPrevent ".concat(index === 0 ? 'active' : ''),
|
|
6406
6350
|
value: options[key].value,
|
|
6407
6351
|
key: key,
|
|
6408
6352
|
onClick: function onClick() {
|
|
6409
6353
|
handleSelect(key);
|
|
6410
6354
|
}
|
|
6411
|
-
},
|
|
6412
|
-
|
|
6413
|
-
|
|
6355
|
+
}, /*#__PURE__*/React__default.createElement(Value$1, {
|
|
6356
|
+
option: true,
|
|
6357
|
+
style: {
|
|
6358
|
+
marginRight: 4
|
|
6414
6359
|
}
|
|
6415
|
-
}
|
|
6360
|
+
}, underscored ? options[key].name.split(underscored).map(function (part, i) {
|
|
6361
|
+
return i % 2 ? /*#__PURE__*/React__default.createElement("u", {
|
|
6362
|
+
key: i
|
|
6363
|
+
}, part) : part;
|
|
6364
|
+
}) : options[key].name));
|
|
6416
6365
|
}) : null, CreateOption, noDataOption);
|
|
6417
6366
|
};
|
|
6418
6367
|
|
|
@@ -6449,9 +6398,19 @@ var calculateContrast = function calculateContrast() {
|
|
|
6449
6398
|
return ratio < 1 / 4.5;
|
|
6450
6399
|
};
|
|
6451
6400
|
|
|
6452
|
-
function
|
|
6401
|
+
function _templateObject6$3() {
|
|
6453
6402
|
var data = taggedTemplateLiteral(["\n position: absolute;\n height: 1px;\n width: 1px;\n z-index: -1;\n opacity: 0;\n"]);
|
|
6454
6403
|
|
|
6404
|
+
_templateObject6$3 = function _templateObject6() {
|
|
6405
|
+
return data;
|
|
6406
|
+
};
|
|
6407
|
+
|
|
6408
|
+
return data;
|
|
6409
|
+
}
|
|
6410
|
+
|
|
6411
|
+
function _templateObject5$4() {
|
|
6412
|
+
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 z-index:10;\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"]);
|
|
6413
|
+
|
|
6455
6414
|
_templateObject5$4 = function _templateObject5() {
|
|
6456
6415
|
return data;
|
|
6457
6416
|
};
|
|
@@ -6459,20 +6418,20 @@ function _templateObject5$4() {
|
|
|
6459
6418
|
return data;
|
|
6460
6419
|
}
|
|
6461
6420
|
|
|
6462
|
-
function _templateObject4$
|
|
6463
|
-
var data = taggedTemplateLiteral(["\n
|
|
6421
|
+
function _templateObject4$5() {
|
|
6422
|
+
var data = taggedTemplateLiteral(["\n background-color: ", ";\n border-radius: ", ";\n flex-grow: 1;\n width: stretch;\n height: stretch;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 4px;\n"]);
|
|
6464
6423
|
|
|
6465
|
-
_templateObject4$
|
|
6424
|
+
_templateObject4$5 = function _templateObject4() {
|
|
6466
6425
|
return data;
|
|
6467
6426
|
};
|
|
6468
6427
|
|
|
6469
6428
|
return data;
|
|
6470
6429
|
}
|
|
6471
6430
|
|
|
6472
|
-
function _templateObject3$
|
|
6473
|
-
var data = taggedTemplateLiteral(["\n height:40px;\n width:40px;\n
|
|
6431
|
+
function _templateObject3$5() {
|
|
6432
|
+
var data = taggedTemplateLiteral(["\n height:40px;\n width:40px;\n //padding: 4px;\n border-radius: ", ";\n border-color: ", ";\n border-width: 1px;\n border-style: solid;\n cursor:pointer;\n display:flex;\n justify-content:center;\n align-items:center;\n box-sizing:border-box;\n\n &.hover,\n &:focus {\n box-shadow:0px 0px 6px ", ";\n border:1px solid ", ";\n outline:none;\n }\n"]);
|
|
6474
6433
|
|
|
6475
|
-
_templateObject3$
|
|
6434
|
+
_templateObject3$5 = function _templateObject3() {
|
|
6476
6435
|
return data;
|
|
6477
6436
|
};
|
|
6478
6437
|
|
|
@@ -6500,19 +6459,21 @@ function _templateObject$b() {
|
|
|
6500
6459
|
}
|
|
6501
6460
|
var Frag$4 = styled__default.div(_templateObject$b());
|
|
6502
6461
|
var Field = styled__default.div(_templateObject2$6());
|
|
6503
|
-
var WraperBucket = styled__default.div(_templateObject3$
|
|
6504
|
-
|
|
6505
|
-
|
|
6506
|
-
|
|
6507
|
-
|
|
6508
|
-
var
|
|
6509
|
-
|
|
6510
|
-
|
|
6511
|
-
|
|
6512
|
-
|
|
6513
|
-
|
|
6514
|
-
|
|
6515
|
-
|
|
6462
|
+
var WraperBucket = styled__default.div(_templateObject3$5(), theme.defaultRadius, theme.colors.neutrals.silver, theme.colors.action, theme.colors.secondary);
|
|
6463
|
+
var ColorIndicator = styled__default.div(_templateObject4$5(), function (_ref) {
|
|
6464
|
+
var background = _ref.background;
|
|
6465
|
+
return background;
|
|
6466
|
+
}, theme.defaultRadius);
|
|
6467
|
+
var ColorBox = styled__default.ul(_templateObject5$4(), theme.defaultRadius, theme.colors.neutrals.gray, theme.colors.secondary, theme.defaultRadius, theme.colors.neutrals.gray, theme.defaultRadius);
|
|
6468
|
+
var SelectHidden$2 = styled__default.select(_templateObject6$3());
|
|
6469
|
+
var InputColor = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
|
|
6470
|
+
var name = _ref2.name,
|
|
6471
|
+
tooltip = _ref2.tooltip,
|
|
6472
|
+
value = _ref2.value,
|
|
6473
|
+
help = _ref2.help,
|
|
6474
|
+
error = _ref2.error,
|
|
6475
|
+
label = _ref2.label,
|
|
6476
|
+
props = objectWithoutProperties(_ref2, ["name", "tooltip", "value", "help", "error", "label"]);
|
|
6516
6477
|
|
|
6517
6478
|
var _useState = React.useState(false),
|
|
6518
6479
|
_useState2 = slicedToArray(_useState, 2),
|
|
@@ -6536,14 +6497,17 @@ var InputColor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
6536
6497
|
setSelectedColor = _useState4[1];
|
|
6537
6498
|
|
|
6538
6499
|
React.useEffect(function () {
|
|
6539
|
-
document.addEventListener(
|
|
6500
|
+
document.addEventListener('mousedown', handleClick);
|
|
6540
6501
|
return function () {
|
|
6541
|
-
document.removeEventListener(
|
|
6502
|
+
document.removeEventListener('mousedown', handleClick);
|
|
6542
6503
|
};
|
|
6543
6504
|
}, []);
|
|
6544
6505
|
|
|
6545
6506
|
var handleClick = function handleClick(e) {
|
|
6546
|
-
if (e.target.classList.contains('colorEventPrevent'))
|
|
6507
|
+
if (e.target.classList.contains('colorEventPrevent')) {
|
|
6508
|
+
return;
|
|
6509
|
+
}
|
|
6510
|
+
|
|
6547
6511
|
setOpen(false);
|
|
6548
6512
|
};
|
|
6549
6513
|
|
|
@@ -6563,13 +6527,14 @@ var InputColor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
6563
6527
|
onClick: function onClick() {
|
|
6564
6528
|
return setOpen(!open);
|
|
6565
6529
|
},
|
|
6566
|
-
className: ['colorEventPrevent', open && 'hover']
|
|
6530
|
+
className: ['colorEventPrevent', open && 'hover']
|
|
6531
|
+
}, /*#__PURE__*/React__default.createElement(ColorIndicator, {
|
|
6567
6532
|
background: selectedColor[0] && selectedColor[0]
|
|
6568
6533
|
}, /*#__PURE__*/React__default.createElement(Icons.Bucket, {
|
|
6569
6534
|
size: "28px",
|
|
6570
6535
|
className: "colorEventPrevent",
|
|
6571
6536
|
color: selectedColor[1] ? selectedColor[1] : '#333'
|
|
6572
|
-
})), open && /*#__PURE__*/React__default.createElement(ColorBox, {
|
|
6537
|
+
}))), open && /*#__PURE__*/React__default.createElement(ColorBox, {
|
|
6573
6538
|
className: "colorEventPrevent"
|
|
6574
6539
|
}, colors.map(function (item, key) {
|
|
6575
6540
|
return /*#__PURE__*/React__default.createElement("li", {
|
|
@@ -7432,10 +7397,10 @@ var Exported = function Exported(_ref) {
|
|
|
7432
7397
|
}, props));
|
|
7433
7398
|
};
|
|
7434
7399
|
|
|
7435
|
-
function _templateObject7$
|
|
7400
|
+
function _templateObject7$3() {
|
|
7436
7401
|
var data = taggedTemplateLiteral(["\n box-sizing: border-box;\n width: 92px;\n height: 92px;\n padding: 4px;\n border-radius: ", ";\n border: 1px solid ", ";\n background-color: ", ";\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n font-size: ", ";\n font-family: ", ";\n color: ", ";\n text-align: center;\n word-break: break-word;\n overflow: hidden;\n\n &::before {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 0;\n background-size: cover;\n background-position: center;\n background-image: url(", ");\n }\n\n + div,\n + label {\n margin-left: 8px;\n }\n\n button {\n position: absolute;\n z-index: 1;\n top: 4px;\n right: 4px;\n padding: 4px;\n height: auto;\n line-height: 0;\n }\n\n label& {\n cursor: pointer;\n border-style: dashed;\n\n &:hover,\n &.highlight {\n background-color: ", ";\n }\n\n &:active, {\n &.highlight {\n border-color: ", ";\n box-shadow: 0 0 6px ", ";\n }\n }\n"]);
|
|
7437
7402
|
|
|
7438
|
-
_templateObject7$
|
|
7403
|
+
_templateObject7$3 = function _templateObject7() {
|
|
7439
7404
|
return data;
|
|
7440
7405
|
};
|
|
7441
7406
|
|
|
@@ -7462,20 +7427,20 @@ function _templateObject5$5() {
|
|
|
7462
7427
|
return data;
|
|
7463
7428
|
}
|
|
7464
7429
|
|
|
7465
|
-
function _templateObject4$
|
|
7430
|
+
function _templateObject4$6() {
|
|
7466
7431
|
var data = taggedTemplateLiteral(["\n height:38px;\n width:38px;\n border-radius:38px;\n background:#FAFAFA;\n border:1px solid ", ";\n position:absolute;\n z-index:1;\n top:0;\n display: flex;\n justify-content: center;\n align-items: flex-end;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 38px;\n }\n"]);
|
|
7467
7432
|
|
|
7468
|
-
_templateObject4$
|
|
7433
|
+
_templateObject4$6 = function _templateObject4() {
|
|
7469
7434
|
return data;
|
|
7470
7435
|
};
|
|
7471
7436
|
|
|
7472
7437
|
return data;
|
|
7473
7438
|
}
|
|
7474
7439
|
|
|
7475
|
-
function _templateObject3$
|
|
7440
|
+
function _templateObject3$6() {
|
|
7476
7441
|
var data = taggedTemplateLiteral(["\n box-sizing:border-box;\n background:#FAFAFA;\n width:140px;\n border-radius: 20px 2px 2px 20px;\n border:1px solid transparent;\n\n &:hover {\n border:none;\n }\n\n >span {\n text-align: center;\n display: block;\n margin-left: 32px;\n color:#707070;\n font-size:14px;\n font-weight:400;\n\n text-overflow: ellipsis;\n height: 16px;\n white-space: nowrap;\n overflow: hidden;\n }\n"]);
|
|
7477
7442
|
|
|
7478
|
-
_templateObject3$
|
|
7443
|
+
_templateObject3$6 = function _templateObject3() {
|
|
7479
7444
|
return data;
|
|
7480
7445
|
};
|
|
7481
7446
|
|
|
@@ -7503,8 +7468,8 @@ function _templateObject$d() {
|
|
|
7503
7468
|
}
|
|
7504
7469
|
var Frag$5 = styled__default.div(_templateObject$d());
|
|
7505
7470
|
var Wrapper$1 = styled__default.label(_templateObject2$8(), theme.colors.info.bg, theme.colors.secondary, theme.colors.action, theme.colors.secondary, theme.colors.success.border, theme.colors.success.border, theme.colors.error.border, theme.colors.error.border);
|
|
7506
|
-
var Input$1 = styled__default(InputBase)(_templateObject3$
|
|
7507
|
-
var Profile = styled__default.div(_templateObject4$
|
|
7471
|
+
var Input$1 = styled__default(InputBase)(_templateObject3$6());
|
|
7472
|
+
var Profile = styled__default.div(_templateObject4$6(), theme.colors.neutrals.silver);
|
|
7508
7473
|
var HiddenInput = styled__default.input(_templateObject5$5());
|
|
7509
7474
|
var Uploader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
7510
7475
|
var name = _ref.name,
|
|
@@ -7646,7 +7611,7 @@ var processFileList = /*#__PURE__*/function () {
|
|
|
7646
7611
|
}();
|
|
7647
7612
|
|
|
7648
7613
|
var DropUploaderList = styled__default.div(_templateObject6$4());
|
|
7649
|
-
var DropUploaderPreview = styled__default.div(_templateObject7$
|
|
7614
|
+
var DropUploaderPreview = styled__default.div(_templateObject7$3(), theme.defaultRadius, theme.colors.neutrals.silver, theme.colors.extra.whiteSmoke, theme.font.extraSmall.size, theme.font.main, theme.colors.neutrals.silver, function (props) {
|
|
7650
7615
|
return typeof props.preview === 'string' && props.preview;
|
|
7651
7616
|
}, theme.colors.info.bg, theme.colors.secondary, theme.colors.secondary);
|
|
7652
7617
|
var DropUploader = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
|
|
@@ -7883,20 +7848,20 @@ function _templateObject5$6() {
|
|
|
7883
7848
|
return data;
|
|
7884
7849
|
}
|
|
7885
7850
|
|
|
7886
|
-
function _templateObject4$
|
|
7851
|
+
function _templateObject4$7() {
|
|
7887
7852
|
var data = taggedTemplateLiteral(["\n width: 0;\n height: 0;\n margin: 0;\n visibility: hidden;\n pointer-events: none;\n\n &:checked + ", " {\n background: ", ";\n border: 1px solid ", ";\n\n &::after {\n background:", ";\n margin-left: 19px;\n }\n }\n"]);
|
|
7888
7853
|
|
|
7889
|
-
_templateObject4$
|
|
7854
|
+
_templateObject4$7 = function _templateObject4() {
|
|
7890
7855
|
return data;
|
|
7891
7856
|
};
|
|
7892
7857
|
|
|
7893
7858
|
return data;
|
|
7894
7859
|
}
|
|
7895
7860
|
|
|
7896
|
-
function _templateObject3$
|
|
7861
|
+
function _templateObject3$7() {
|
|
7897
7862
|
var data = taggedTemplateLiteral(["\n width: 36px;\n height: 20px;\n border-radius: 100px;\n background: ", ";\n cursor: pointer;\n border: 1px solid ", ";\n box-sizing: border-box;\n transition: 0.2s;\n\n &:focus {\n box-shadow: 0px 0px 6px ", ";\n border: 1px solid ", ";\n outline: none;\n }\n\n &::after {\n content: \"\";\n display: block;\n border-radius: 100%;\n width: 12px;\n height: 12px;\n margin: 3px;\n background: ", ";\n transition: 0.2s;\n }\n"]);
|
|
7898
7863
|
|
|
7899
|
-
_templateObject3$
|
|
7864
|
+
_templateObject3$7 = function _templateObject3() {
|
|
7900
7865
|
return data;
|
|
7901
7866
|
};
|
|
7902
7867
|
|
|
@@ -7904,7 +7869,7 @@ function _templateObject3$8() {
|
|
|
7904
7869
|
}
|
|
7905
7870
|
|
|
7906
7871
|
function _templateObject2$9() {
|
|
7907
|
-
var data = taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\n\n &:focus {\n outline: none;\n }\n"]);
|
|
7872
|
+
var data = taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\n ", "\n\n &:focus {\n outline: none;\n }\n"]);
|
|
7908
7873
|
|
|
7909
7874
|
_templateObject2$9 = function _templateObject2() {
|
|
7910
7875
|
return data;
|
|
@@ -7923,9 +7888,11 @@ function _templateObject$e() {
|
|
|
7923
7888
|
return data;
|
|
7924
7889
|
}
|
|
7925
7890
|
var Frag$6 = styled__default.div(_templateObject$e());
|
|
7926
|
-
var CheckBoxWrapper = styled__default.div(_templateObject2$9())
|
|
7927
|
-
|
|
7928
|
-
|
|
7891
|
+
var CheckBoxWrapper = styled__default.div(_templateObject2$9(), function (props) {
|
|
7892
|
+
return props.hasLabel && 'height: 40px;';
|
|
7893
|
+
});
|
|
7894
|
+
var CheckBoxLabel = styled__default.label(_templateObject3$7(), theme.colors.neutrals.white, theme.colors.info.border, theme.colors.action, theme.colors.secondary, theme.colors.info.border);
|
|
7895
|
+
var CheckBox$1 = styled__default.input(_templateObject4$7(), CheckBoxLabel, theme.colors.info.text, theme.colors.info.border, theme.colors.neutrals.white);
|
|
7929
7896
|
var ToggleLabel = styled__default.label(_templateObject5$6(), theme.colors.neutrals.medium, theme.font.medium.size, theme.font.medium.lineHeight);
|
|
7930
7897
|
var Toggle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
7931
7898
|
var name = _ref.name,
|
|
@@ -7969,7 +7936,9 @@ var Toggle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
7969
7936
|
htmlFor: id
|
|
7970
7937
|
}, label, " ", tooltip && /*#__PURE__*/React__default.createElement(App, {
|
|
7971
7938
|
text: tooltip
|
|
7972
|
-
})), /*#__PURE__*/React__default.createElement(CheckBoxWrapper,
|
|
7939
|
+
})), /*#__PURE__*/React__default.createElement(CheckBoxWrapper, {
|
|
7940
|
+
hasLabel: !!label
|
|
7941
|
+
}, /*#__PURE__*/React__default.createElement(CheckBox$1, {
|
|
7973
7942
|
name: name,
|
|
7974
7943
|
id: id,
|
|
7975
7944
|
type: "checkbox",
|
|
@@ -8543,20 +8512,20 @@ var ButtonGroup = function ButtonGroup(_ref) {
|
|
|
8543
8512
|
}));
|
|
8544
8513
|
};
|
|
8545
8514
|
|
|
8546
|
-
function _templateObject4$
|
|
8515
|
+
function _templateObject4$8() {
|
|
8547
8516
|
var data = taggedTemplateLiteral(["\n position:relative;\n\n &:hover > ", " {\n visibility: visible;\n }\n\n &:hover > ", " > * {\n animation-name: ", ";\n animation-duration: 200ms;\n animation-fill-mode: backwards;\n animation-timing-function: ease-in-out;\n }\n"]);
|
|
8548
8517
|
|
|
8549
|
-
_templateObject4$
|
|
8518
|
+
_templateObject4$8 = function _templateObject4() {
|
|
8550
8519
|
return data;
|
|
8551
8520
|
};
|
|
8552
8521
|
|
|
8553
8522
|
return data;
|
|
8554
8523
|
}
|
|
8555
8524
|
|
|
8556
|
-
function _templateObject3$
|
|
8525
|
+
function _templateObject3$8() {
|
|
8557
8526
|
var data = taggedTemplateLiteral(["\n cursor:pointer;\n background:white;\n border-radius:100%;\n padding:8px;\n display:flex;\n justify-content:center;\n border:1px solid rgb(204, 204, 204);\n"]);
|
|
8558
8527
|
|
|
8559
|
-
_templateObject3$
|
|
8528
|
+
_templateObject3$8 = function _templateObject3() {
|
|
8560
8529
|
return data;
|
|
8561
8530
|
};
|
|
8562
8531
|
|
|
@@ -8620,8 +8589,8 @@ var ListContent = styled__default.div(_templateObject2$b(), function (props) {
|
|
|
8620
8589
|
}, function (props) {
|
|
8621
8590
|
return props.direction === 'bottom' && "\n flex-direction:column;\n justify-content:start;\n top:".concat(POSITION_LIST, ";\n bottom:0;\n right:0;\n left:0;\n padding-top:").concat(POSITION_LIST_DISTANCE, ";\n ");
|
|
8622
8591
|
});
|
|
8623
|
-
var PreviewContent = styled__default.div(_templateObject3$
|
|
8624
|
-
var Container$1 = styled__default.div(_templateObject4$
|
|
8592
|
+
var PreviewContent = styled__default.div(_templateObject3$8());
|
|
8593
|
+
var Container$1 = styled__default.div(_templateObject4$8(), ListContent, ListContent, listAnimation);
|
|
8625
8594
|
|
|
8626
8595
|
var ButtonIcon = function ButtonIcon(_ref) {
|
|
8627
8596
|
var children = _ref.children,
|
|
@@ -8809,20 +8778,20 @@ function _templateObject5$7() {
|
|
|
8809
8778
|
return data;
|
|
8810
8779
|
}
|
|
8811
8780
|
|
|
8812
|
-
function _templateObject4$
|
|
8781
|
+
function _templateObject4$9() {
|
|
8813
8782
|
var data = taggedTemplateLiteral(["\n font-size: ", ";\n line-height: ", ";\n"]);
|
|
8814
8783
|
|
|
8815
|
-
_templateObject4$
|
|
8784
|
+
_templateObject4$9 = function _templateObject4() {
|
|
8816
8785
|
return data;
|
|
8817
8786
|
};
|
|
8818
8787
|
|
|
8819
8788
|
return data;
|
|
8820
8789
|
}
|
|
8821
8790
|
|
|
8822
|
-
function _templateObject3$
|
|
8791
|
+
function _templateObject3$9() {
|
|
8823
8792
|
var data = taggedTemplateLiteral(["\n font-size: ", ";\n line-height: ", ";\n"]);
|
|
8824
8793
|
|
|
8825
|
-
_templateObject3$
|
|
8794
|
+
_templateObject3$9 = function _templateObject3() {
|
|
8826
8795
|
return data;
|
|
8827
8796
|
};
|
|
8828
8797
|
|
|
@@ -8852,8 +8821,8 @@ var Div = styled__default.div(_templateObject$j(), theme.defaultRadius, function
|
|
|
8852
8821
|
return props.useClose && "\n padding-right: 32px;\n ";
|
|
8853
8822
|
});
|
|
8854
8823
|
var Title$2 = styled__default.h5(_templateObject2$c(), theme.font.main, theme.font.medium.size, theme.font.big.lineHeight);
|
|
8855
|
-
var Content = styled__default.p(_templateObject3$
|
|
8856
|
-
var SmallContent = styled__default(Content)(_templateObject4$
|
|
8824
|
+
var Content = styled__default.p(_templateObject3$9(), theme.font.extraSmall.size, theme.font.small.lineHeight);
|
|
8825
|
+
var SmallContent = styled__default(Content)(_templateObject4$9(), theme.font.small.size, theme.font.small.lineHeight);
|
|
8857
8826
|
var Close = styled__default.button.attrs(function (props) {
|
|
8858
8827
|
return {
|
|
8859
8828
|
type: 'button'
|
|
@@ -8966,6 +8935,7 @@ exports.Title = Title;
|
|
|
8966
8935
|
exports.SubTitle = SubTitle;
|
|
8967
8936
|
exports.ThirdTitle = ThirdTitle;
|
|
8968
8937
|
exports.Text = Text;
|
|
8938
|
+
exports.Emphasis = Emphasis;
|
|
8969
8939
|
exports.Alert = index;
|
|
8970
8940
|
exports.Spacer = Spacer;
|
|
8971
8941
|
exports.Icon = Icons;
|