@appquality/unguess-design-system 2.11.10 → 2.11.13

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 (6) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/build/index.js +79 -75
  3. package/build/stories/forms/input-toggle/_types.d.ts +2 -6
  4. package/build/stories/forms/input-toggle/index.d.ts +5 -8
  5. package/build/stories/forms/input-toggle/index.stories.d.ts +14 -5
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,39 @@
1
+ # v2.11.13 (Mon Sep 12 2022)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - refactor(input-toggle): simplify component [#89](https://github.com/AppQuality/unguess-design-system/pull/89) ([@cannarocks](https://github.com/cannarocks))
6
+
7
+ #### Authors: 1
8
+
9
+ - Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
10
+
11
+ ---
12
+
13
+ # v2.11.12 (Thu Sep 08 2022)
14
+
15
+ #### 🐛 Bug Fix
16
+
17
+ - feat(input-toggle): add auto focus props [#88](https://github.com/AppQuality/unguess-design-system/pull/88) ([@marcbon](https://github.com/marcbon))
18
+
19
+ #### Authors: 1
20
+
21
+ - Marco Bonomo ([@marcbon](https://github.com/marcbon))
22
+
23
+ ---
24
+
25
+ # v2.11.11 (Thu Sep 08 2022)
26
+
27
+ #### 🐛 Bug Fix
28
+
29
+ - fix(input-toggle): fix icon click + set endicon optional [#87](https://github.com/AppQuality/unguess-design-system/pull/87) ([@marcbon](https://github.com/marcbon))
30
+
31
+ #### Authors: 1
32
+
33
+ - Marco Bonomo ([@marcbon](https://github.com/marcbon))
34
+
35
+ ---
36
+
1
37
  # v2.11.10 (Thu Sep 08 2022)
2
38
 
3
39
  #### 🐛 Bug Fix
package/build/index.js CHANGED
@@ -254,8 +254,8 @@ var gradients = {
254
254
  dark: "linear-gradient(90.81deg, ".concat(hex2rgba(palette.blue[800]), " 0%, ").concat(hex2rgba(palette.blue[600]), " 100%);"),
255
255
  };
256
256
 
257
- var _a, _b, _c, _d, _e, _f, _g$6, _h;
258
- var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), { chrome: __assign(__assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: __assign(__assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }), nav: __assign(__assign({}, (_e = (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.chrome) === null || _e === void 0 ? void 0 : _e.nav), { openWidth: 240, closedWidth: 36, workspaceDropdownWidth: 192 }) }), notification: __assign(__assign({}, (_f = reactTheming.DEFAULT_THEME.components) === null || _f === void 0 ? void 0 : _f.notification), { card: __assign(__assign({}, (_h = (_g$6 = reactTheming.DEFAULT_THEME.components) === null || _g$6 === void 0 ? void 0 : _g$6.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) }), pageHeader: {
257
+ var _a, _b, _c, _d, _e, _f, _g$7, _h;
258
+ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), { chrome: __assign(__assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: __assign(__assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }), nav: __assign(__assign({}, (_e = (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.chrome) === null || _e === void 0 ? void 0 : _e.nav), { openWidth: 240, closedWidth: 36, workspaceDropdownWidth: 192 }) }), notification: __assign(__assign({}, (_f = reactTheming.DEFAULT_THEME.components) === null || _f === void 0 ? void 0 : _f.notification), { card: __assign(__assign({}, (_h = (_g$7 = reactTheming.DEFAULT_THEME.components) === null || _g$7 === void 0 ? void 0 : _g$7.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) }), pageHeader: {
259
259
  imgMaxHeight: "214px",
260
260
  }, autocomplete: {
261
261
  thumbSize: "60px",
@@ -461,7 +461,7 @@ var Tag = function (props) { return jsxRuntime.jsx(reactTags.Tag, __assign({}, p
461
461
  Tag.Avatar = reactTags.Tag.Avatar;
462
462
  Tag.Close = reactTags.Tag.Close;
463
463
 
464
- var _g$5, _path$r;
464
+ var _g$6, _path$q;
465
465
 
466
466
  function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
467
467
 
@@ -472,19 +472,19 @@ var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
472
472
  viewBox: "0 0 24 24",
473
473
  fill: "none",
474
474
  xmlns: "http://www.w3.org/2000/svg"
475
- }, props), _g$5 || (_g$5 = /*#__PURE__*/React__namespace.createElement("g", {
475
+ }, props), _g$6 || (_g$6 = /*#__PURE__*/React__namespace.createElement("g", {
476
476
  opacity: 0.3
477
477
  }, /*#__PURE__*/React__namespace.createElement("path", {
478
478
  opacity: 0.3,
479
479
  d: "M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z",
480
480
  fill: "#003A57"
481
- }))), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
481
+ }))), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
482
482
  d: "M17.9983 7.16705C17.5188 6.58566 17.1422 6.73039 17.1422 6.73039C17.1422 6.73039 16.406 7.02453 16.0401 7.16303C15.6742 7.30153 15.2408 7.17357 15.2408 7.17357L14.7579 6.8851C14.7579 6.8851 14.4296 6.56554 14.3656 6.18067C14.3123 5.78958 14.1888 5.00269 14.1888 5.00269C14.1888 5.00269 14.1356 4.61159 13.3938 4.47257C12.652 4.33356 12.4678 4.68715 12.4678 4.68715C12.4678 4.68715 12.0932 5.38344 11.9091 5.73703C11.7249 6.09062 11.3114 6.27118 11.3114 6.27118L10.7639 6.36908C10.7639 6.36908 10.3144 6.33771 10.0176 6.07271L9.12712 5.27769C9.12712 5.27769 8.8303 5.01268 8.18313 5.38632C7.53595 5.75997 7.61705 6.14953 7.61705 6.14953L7.86033 7.3182C7.94143 7.70776 7.74381 8.11275 7.74381 8.11275L7.38528 8.53794C7.38528 8.53794 7.02217 8.80577 6.62387 8.78845C6.22557 8.77114 5.43527 8.7474 5.43527 8.7474C5.43527 8.7474 5.03697 8.73009 4.78646 9.44201C4.53595 10.1539 4.84804 10.3956 4.84804 10.3956C4.84804 10.3956 5.46774 10.896 5.77983 11.1376C6.09192 11.3793 6.19373 11.8296 6.19373 11.8296L6.20207 12.3921C6.20207 12.3921 6.09618 12.8314 5.79331 13.079C5.49043 13.3266 4.86759 13.8171 4.86759 13.8171C4.86759 13.8171 4.56471 14.0647 4.81769 14.7769C5.08144 15.4828 5.46713 15.4783 5.46713 15.4783C5.46713 15.4783 6.26012 15.4569 6.64582 15.4524C7.03152 15.4479 7.40116 15.7145 7.40116 15.7145L7.76458 16.1447C7.76458 16.1447 7.96976 16.5499 7.89441 16.9425C7.81907 17.3351 7.66208 18.1094 7.66208 18.1094C7.66208 18.1094 7.58674 18.502 8.23785 18.8824C8.88895 19.2629 9.18553 19.0044 9.18553 19.0044C9.18553 19.0044 9.7724 18.4765 10.069 18.218C10.3655 17.9595 10.8115 17.9347 10.8115 17.9347L11.3609 18.0394C11.3609 18.0394 11.77 18.225 11.9608 18.5803C12.1516 18.9356 12.5268 19.6354 12.5268 19.6354C12.5268 19.6354 12.7176 19.9907 13.4583 19.8539C14.1946 19.7343 14.2529 19.337 14.2529 19.337C14.2529 19.337 14.3586 18.5487 14.4232 18.1623C14.4814 17.765 14.8086 17.4598 14.8086 17.4598L15.2939 17.1796C15.2939 17.1796 15.7281 17.0598 16.095 17.1971C16.4682 17.3453 17.1975 17.637 17.1975 17.637C17.1975 17.637 17.5707 17.7851 18.0424 17.2073C18.5142 16.6295 18.3189 16.2913 18.3189 16.2913C18.3189 16.2913 17.9006 15.6164 17.6882 15.2736C17.4759 14.9307 17.5197 14.4836 17.5197 14.4836L17.7038 13.9555C17.7038 13.9555 17.9482 13.5816 18.3203 13.454C18.6925 13.3264 19.4431 13.0822 19.4431 13.0822C19.4431 13.0822 19.8153 12.9546 19.8113 12.2005C19.8074 11.4464 19.4297 11.3153 19.4297 11.3153C19.4297 11.3153 18.6807 11.0641 18.303 10.9331C17.9253 10.802 17.677 10.4217 17.677 10.4217L17.4861 9.8919C17.4861 9.8919 17.4293 9.4447 17.6368 9.1067C17.8443 8.7687 18.2486 8.09891 18.2486 8.09891C18.2486 8.09891 18.4778 7.74844 17.9983 7.16707L17.9983 7.16705ZM9.33902 8.38466L10.6176 10.5992C10.0433 11.149 9.82793 11.9715 10.0567 12.7413L7.86713 14.0054C6.98868 12.0106 7.60355 9.66286 9.33905 8.38457L9.33902 8.38466ZM13.9748 16.414C11.9998 17.2778 9.65918 16.6363 8.37099 14.8783L10.5605 13.6141C11.1128 14.1971 11.9329 14.4219 12.6961 14.1994L13.9748 16.414ZM12.6552 13.132C12.1159 13.4434 11.4325 13.2561 11.1176 12.7107C10.8027 12.1652 10.9822 11.4797 11.5215 11.1684C12.0608 10.857 12.7441 11.0443 13.0591 11.5897C13.374 12.1352 13.1945 12.8207 12.6552 13.132ZM14.8376 15.9158L13.5591 13.7012C14.1333 13.1515 14.3487 12.3289 14.12 11.5591L16.3095 10.295C17.188 12.2898 16.5731 14.6376 14.8376 15.9159L14.8376 15.9158ZM13.6161 10.6863C13.0638 10.1034 12.2437 9.87862 11.4805 10.1011L10.2019 7.88652C12.1769 7.02266 14.5112 7.65314 15.8057 9.42223L13.6161 10.6863Z",
483
483
  fill: "#003A57"
484
484
  })));
485
485
  };
486
486
 
487
- var _g$4, _path$q, _path2$4, _path3$3, _path4$2, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1, _path11$1;
487
+ var _g$5, _path$p, _path2$4, _path3$3, _path4$2, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1, _path11$1;
488
488
 
489
489
  function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
490
490
 
@@ -495,12 +495,12 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
495
495
  viewBox: "0 0 25 24",
496
496
  fill: "none",
497
497
  xmlns: "http://www.w3.org/2000/svg"
498
- }, props), _g$4 || (_g$4 = /*#__PURE__*/React__namespace.createElement("g", {
498
+ }, props), _g$5 || (_g$5 = /*#__PURE__*/React__namespace.createElement("g", {
499
499
  opacity: 0.3
500
500
  }, /*#__PURE__*/React__namespace.createElement("path", {
501
501
  d: "M12.1641 24C18.7915 24 24.1641 18.6274 24.1641 12C24.1641 5.37258 18.7915 0 12.1641 0C5.53665 0 0.164062 5.37258 0.164062 12C0.164062 18.6274 5.53665 24 12.1641 24Z",
502
502
  fill: "#D3ECDB"
503
- }))), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
503
+ }))), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
504
504
  opacity: 0.8,
505
505
  d: "M12.653 3.1964C8.84605 3.1964 5.76496 6.27748 5.76496 10.0844C5.76496 10.2596 5.76496 10.4347 5.7904 10.5854C5.46458 11.1861 4.98908 12.0129 4.41279 12.5138C3.98719 12.8896 4.08697 13.2907 4.13687 13.4404C4.26211 13.7662 4.61237 14.0411 5.18866 14.2417C5.38924 14.3171 5.61427 14.367 5.81485 14.4169L5.84028 16.8463C5.84028 17.7983 6.6416 18.625 7.61905 18.625L9.09645 18.1495L9.24713 19.0262C9.34693 19.6025 9.84787 20.0281 10.4496 20.0281C10.5249 20.0281 10.6003 20.0281 10.6746 20.0026L15.3084 19.1769C15.9845 19.0516 16.4101 18.4254 16.3103 17.7494L15.9845 16.1213C18.1634 14.9188 19.541 12.5891 19.541 10.0843C19.541 6.30267 16.4356 3.19629 12.6529 3.19629L12.653 3.1964Z",
506
506
  fill: "#70C38A"
@@ -557,7 +557,7 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
557
557
  })));
558
558
  };
559
559
 
560
- var _path$p, _path2$3, _path3$2, _path4$1;
560
+ var _path$o, _path2$3, _path3$2, _path4$1;
561
561
 
562
562
  function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
563
563
 
@@ -568,7 +568,7 @@ var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
568
568
  viewBox: "0 0 24 24",
569
569
  fill: "none",
570
570
  xmlns: "http://www.w3.org/2000/svg"
571
- }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
571
+ }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
572
572
  d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
573
573
  fill: "#F8F9F9"
574
574
  })), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -583,7 +583,7 @@ var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
583
583
  })));
584
584
  };
585
585
 
586
- var _path$o, _path2$2, _path3$1, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
586
+ var _path$n, _path2$2, _path3$1, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
587
587
 
588
588
  function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
589
589
 
@@ -594,7 +594,7 @@ var SvgCampaignProgress = function SvgCampaignProgress(props) {
594
594
  viewBox: "0 0 24 24",
595
595
  fill: "none",
596
596
  xmlns: "http://www.w3.org/2000/svg"
597
- }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
597
+ }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
598
598
  d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
599
599
  fill: "#F8F9F9"
600
600
  })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -630,7 +630,7 @@ var SvgCampaignProgress = function SvgCampaignProgress(props) {
630
630
  })));
631
631
  };
632
632
 
633
- var _path$n, _path2$1, _path3;
633
+ var _path$m, _path2$1, _path3;
634
634
 
635
635
  function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
636
636
 
@@ -641,7 +641,7 @@ var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
641
641
  viewBox: "0 0 24 24",
642
642
  fill: "none",
643
643
  xmlns: "http://www.w3.org/2000/svg"
644
- }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
644
+ }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
645
645
  d: "M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12Z",
646
646
  fill: "#F8F9F9"
647
647
  })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -889,7 +889,7 @@ var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$g || (templat
889
889
  return theme.space.xs;
890
890
  });
891
891
  var CardContent = styled__default["default"].div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"], ["\n transition: all 0.3s ease-in-out;\n position: relative;\n z-index: 1;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n flex-grow: 1;\n"])));
892
- var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n padding: ", " 0;\n \n }\n\n button:not(:first-child) {\n margin-top: ", "px;\n }\n"], ["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n padding: ", " 0;\n \n }\n\n button:not(:first-child) {\n margin-top: ", "px;\n }\n"])), function (_a) {
892
+ var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n padding: ", " 0;\n \n }\n\n button:not(:first-child) {\n margin-top: ", "px;\n }\n"], ["\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n margin-top: ", "px;\n\n button {\n padding: ", " 0;\n \n }\n\n button:not(:first-child) {\n margin-top: ", "px;\n }\n"])), function (_a) {
893
893
  var theme = _a.theme;
894
894
  return theme.space.base;
895
895
  }, function (_a) {
@@ -899,7 +899,7 @@ var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$7 || (templa
899
899
  var theme = _a.theme;
900
900
  return theme.space.base * 4;
901
901
  });
902
- var HoverBody = styled__default["default"].div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n height: 100%;\n margin-top: 0;\n padding: ", ";\n background-color: ", ";\n transition: all 0.3s ease-in-out;\n z-index: 2;\n display: flex;\n align-items: space-between;\n flex-direction: column;\n justify-content: space-between;\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n height: 100%;\n margin-top: 0;\n padding: ", ";\n background-color: ", ";\n transition: all 0.3s ease-in-out;\n z-index: 2;\n display: flex;\n align-items: space-between;\n flex-direction: column;\n justify-content: space-between;\n"])), function (_a) {
902
+ var HoverBody = styled__default["default"].div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n height: 100%;\n margin-top: 0;\n padding: ", ";\n background-color: ", ";\n transition: all 0.3s ease-in-out;\n z-index: 2;\n display: flex;\n align-items: space-between;\n flex-direction: column;\n justify-content: space-between;\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n width: 100%;\n height: 100%;\n margin-top: 0;\n padding: ", ";\n background-color: ", ";\n transition: all 0.3s ease-in-out;\n z-index: 2;\n display: flex;\n align-items: space-between;\n flex-direction: column;\n justify-content: space-between;\n"])), function (_a) {
903
903
  var theme = _a.theme;
904
904
  return theme.components.notification.card.padding;
905
905
  }, function (_a) {
@@ -916,7 +916,7 @@ var ServiceCard = function (props) {
916
916
  var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
917
917
  return (jsxRuntime.jsxs(StyledCard$1, __assign({}, props, { children: [props.isHoverable && (jsxRuntime.jsxs(HoverBody, { children: [jsxRuntime.jsxs(HoverMetaContainer, { children: [props.hoverTitle && (jsxRuntime.jsx(ServiceTitle, { children: props.hoverTitle })), props.hoverSubtitle && (jsxRuntime.jsx(ServiceSubtitle, { children: props.hoverSubtitle }))] }), props.hoverButtons && (jsxRuntime.jsx(ButtonsWrap$1, { children: props.hoverButtons.map(function (button) { return button; }) }))] })), jsxRuntime.jsxs(CardContent, { children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [serviceIcon && jsxRuntime.jsx(SpecialCard.Thumb, { children: serviceIcon }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: serviceSubtitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: serviceTitle })] })] }), props.tags && (jsxRuntime.jsx(SpecialCard.Footer, __assign({ justifyContent: "start", wrap: true }, { children: props.tags.map(function (tag, index) { return (jsxRuntime.jsxs(StyledTag$1, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(StyledTag$1.Avatar, { children: tag.icon }), tag.label] }), index)); }) })))] })] })));
918
918
  };
919
- var templateObject_1$14, templateObject_2$r, templateObject_3$g, templateObject_4$c, templateObject_5$7, templateObject_6$3, templateObject_7$1, templateObject_8$1;
919
+ var templateObject_1$14, templateObject_2$r, templateObject_3$g, templateObject_4$c, templateObject_5$6, templateObject_6$2, templateObject_7$1, templateObject_8$1;
920
920
 
921
921
  var ButtonsWrap = styled__default["default"].div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n"], ["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n"])));
922
922
  var InfoCard = function (props) {
@@ -1062,7 +1062,7 @@ var Label$1 = styled__default["default"](MD)(templateObject_4$b || (templateObje
1062
1062
  var theme = _a.theme;
1063
1063
  return theme.palette.grey[800];
1064
1064
  });
1065
- var Description$2 = styled__default["default"](SM)(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
1065
+ var Description$2 = styled__default["default"](SM)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
1066
1066
  var theme = _a.theme;
1067
1067
  return theme.palette.grey[600];
1068
1068
  });
@@ -1074,7 +1074,7 @@ var ItemContent = function (props) {
1074
1074
  var thumbSrc = props.thumbSrc, description = props.description, label = props.label;
1075
1075
  return (jsxRuntime.jsxs(Container, { children: [thumbSrc && (jsxRuntime.jsx(ThumbContainer, { children: jsxRuntime.jsx(Image$1, { src: thumbSrc }) })), jsxRuntime.jsxs(MetaContainer$1, { children: [label && jsxRuntime.jsx(Label$1, __assign({ isBold: true }, { children: label })), description && jsxRuntime.jsx(Description$2, { children: description })] })] }));
1076
1076
  };
1077
- var templateObject_1$Z, templateObject_2$p, templateObject_3$f, templateObject_4$b, templateObject_5$6;
1077
+ var templateObject_1$Z, templateObject_2$p, templateObject_3$f, templateObject_4$b, templateObject_5$5;
1078
1078
 
1079
1079
  /**
1080
1080
  * A Menu is a wrapper for items elements
@@ -1145,7 +1145,7 @@ var editorStyle = styled.css(templateObject_1$X || (templateObject_1$X = __makeT
1145
1145
  });
1146
1146
  var templateObject_1$X;
1147
1147
 
1148
- var _path$m;
1148
+ var _path$l;
1149
1149
 
1150
1150
  function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
1151
1151
 
@@ -1156,13 +1156,13 @@ var SvgBoldFill = function SvgBoldFill(props) {
1156
1156
  height: 16,
1157
1157
  focusable: "false",
1158
1158
  viewBox: "0 0 16 16"
1159
- }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
1159
+ }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
1160
1160
  fill: "currentColor",
1161
1161
  d: "M7.5 0C9.952 0 12 2.048 12 4.5a4.483 4.483 0 01-1.27 3.108C12.078 8.39 13 9.855 13 11.5c0 2.452-2.048 4.5-4.5 4.5H4a1 1 0 01-1-1V1a1 1 0 011-1h3.5zM5 14h3.5c1.348 0 2.5-1.152 2.5-2.5S9.848 9 8.5 9H5v5zM7.5 2H5v5h2.5C8.848 7 10 5.848 10 4.5S8.848 2 7.5 2z"
1162
1162
  })));
1163
1163
  };
1164
1164
 
1165
- var _path$l;
1165
+ var _path$k;
1166
1166
 
1167
1167
  function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
1168
1168
 
@@ -1173,7 +1173,7 @@ var SvgItalicFill = function SvgItalicFill(props) {
1173
1173
  height: 16,
1174
1174
  focusable: "false",
1175
1175
  viewBox: "0 0 16 16"
1176
- }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
1176
+ }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
1177
1177
  fill: "none",
1178
1178
  stroke: "currentColor",
1179
1179
  strokeLinecap: "round",
@@ -1182,7 +1182,7 @@ var SvgItalicFill = function SvgItalicFill(props) {
1182
1182
  })));
1183
1183
  };
1184
1184
 
1185
- var _path$k, _path2;
1185
+ var _path$j, _path2;
1186
1186
 
1187
1187
  function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
1188
1188
 
@@ -1193,7 +1193,7 @@ var SvgQuoteFill = function SvgQuoteFill(props) {
1193
1193
  height: 16,
1194
1194
  focusable: "false",
1195
1195
  viewBox: "0 0 16 16"
1196
- }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
1196
+ }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
1197
1197
  fill: "currentColor",
1198
1198
  d: "M7 8H4c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3c0 .55-.45 1-1 1zm6 0h-3c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3c0 .55-.45 1-1 1z"
1199
1199
  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -1205,7 +1205,7 @@ var SvgQuoteFill = function SvgQuoteFill(props) {
1205
1205
  })));
1206
1206
  };
1207
1207
 
1208
- var _g$3;
1208
+ var _g$4;
1209
1209
 
1210
1210
  function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
1211
1211
 
@@ -1216,7 +1216,7 @@ var SvgH1Fill = function SvgH1Fill(props) {
1216
1216
  height: 16,
1217
1217
  focusable: "false",
1218
1218
  viewBox: "0 0 16 16"
1219
- }, props), _g$3 || (_g$3 = /*#__PURE__*/React__namespace.createElement("g", {
1219
+ }, props), _g$4 || (_g$4 = /*#__PURE__*/React__namespace.createElement("g", {
1220
1220
  transform: "translate(-464 -332)"
1221
1221
  }, /*#__PURE__*/React__namespace.createElement("rect", {
1222
1222
  width: 16,
@@ -1237,7 +1237,7 @@ var SvgH1Fill = function SvgH1Fill(props) {
1237
1237
  }))));
1238
1238
  };
1239
1239
 
1240
- var _g$2;
1240
+ var _g$3;
1241
1241
 
1242
1242
  function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
1243
1243
 
@@ -1248,7 +1248,7 @@ var SvgH2Fill = function SvgH2Fill(props) {
1248
1248
  height: 16,
1249
1249
  focusable: "false",
1250
1250
  viewBox: "0 0 16 16"
1251
- }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
1251
+ }, props), _g$3 || (_g$3 = /*#__PURE__*/React__namespace.createElement("g", {
1252
1252
  transform: "translate(-464 -332)"
1253
1253
  }, /*#__PURE__*/React__namespace.createElement("rect", {
1254
1254
  width: 16,
@@ -1269,7 +1269,7 @@ var SvgH2Fill = function SvgH2Fill(props) {
1269
1269
  }))));
1270
1270
  };
1271
1271
 
1272
- var _g$1;
1272
+ var _g$2;
1273
1273
 
1274
1274
  function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
1275
1275
 
@@ -1280,7 +1280,7 @@ var SvgH3Fill = function SvgH3Fill(props) {
1280
1280
  height: 16,
1281
1281
  focusable: "false",
1282
1282
  viewBox: "0 0 16 16"
1283
- }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
1283
+ }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
1284
1284
  transform: "translate(-464 -332)"
1285
1285
  }, /*#__PURE__*/React__namespace.createElement("rect", {
1286
1286
  width: 16,
@@ -1514,75 +1514,79 @@ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$l || (te
1514
1514
  var Input = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(UgInput, __assign({ ref: ref }, props)); });
1515
1515
  var templateObject_1$O, templateObject_2$l;
1516
1516
 
1517
- var _path$j;
1517
+ var _g$1;
1518
1518
 
1519
1519
  function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
1520
1520
 
1521
- var SvgInputToggleEdit = function SvgInputToggleEdit(props) {
1521
+ var SvgNotesStroke = function SvgNotesStroke(props) {
1522
1522
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
1523
+ xmlns: "http://www.w3.org/2000/svg",
1523
1524
  width: 16,
1524
1525
  height: 16,
1525
- viewBox: "0 0 16 16",
1526
- xmlns: "http://www.w3.org/2000/svg"
1527
- }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
1528
- fill: "currentColor",
1529
- fillRule: "evenodd",
1530
- clipRule: "evenodd",
1531
- d: "M10.5268 8.89972L7.51676 8.99972C7.22772 9.00933 6.99083 8.77244 7.00043 8.4834L7.10043 5.4734C7.10465 5.3466 7.1569 5.22615 7.24661 5.13645L12.2366 0.146447C12.4319 -0.0488155 12.7485 -0.0488155 12.9437 0.146447L15.8537 3.05645C16.049 3.25171 16.049 3.56829 15.8537 3.76355L10.8637 8.75355C10.774 8.84326 10.6536 8.89551 10.5268 8.89972ZM14.7931 3.41L12.5902 1.20711L8.09333 5.70394L8.01763 7.98253L10.2962 7.90683L14.7931 3.41ZM7.91016 1.5C7.91016 1.22386 7.6863 1 7.41016 1H2.09016C1.80595 0.994981 1.52354 1.10909 1.3164 1.31624C1.10925 1.52338 0.995139 1.80579 1.00023 2.0987L1.00016 13.91C0.995139 14.1942 1.10925 14.4766 1.3164 14.6838C1.52354 14.8909 1.80595 15.005 2.09886 14.9999L13.9102 15C14.1944 15.005 14.4768 14.8909 14.6839 14.6838C14.8911 14.4766 15.0052 14.1942 15.0001 13.9013L15.0002 8.59C15.0002 8.31386 14.7763 8.09 14.5002 8.09C14.224 8.09 14.0002 8.31386 14.0002 8.59V13.91C14.0006 13.9404 13.9922 13.9613 13.9768 13.9767C13.9615 13.992 13.9406 14.0005 13.9189 14.0001L2.09016 14C2.05977 14.0005 2.03885 13.992 2.0235 13.9767C2.00816 13.9613 1.99971 13.9404 2.00008 13.9187L2.00016 2.09C1.99971 2.05961 2.00816 2.03869 2.0235 2.02334C2.03885 2.008 2.05977 1.99955 2.08146 1.99992L7.41016 2C7.6863 2 7.91016 1.77614 7.91016 1.5Z"
1532
- })));
1526
+ focusable: "false",
1527
+ viewBox: "0 0 16 16"
1528
+ }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
1529
+ fill: "none",
1530
+ stroke: "currentColor"
1531
+ }, /*#__PURE__*/React__namespace.createElement("path", {
1532
+ strokeLinejoin: "round",
1533
+ d: "M10.51 8.4l-3.01.1.1-3.01L12.59.5l2.91 2.91-4.99 4.99z"
1534
+ }), /*#__PURE__*/React__namespace.createElement("path", {
1535
+ strokeLinecap: "round",
1536
+ d: "M7.41 1.5H2.09a.58.58 0 00-.59.59v11.82a.58.58 0 00.59.59h11.82a.58.58 0 00.59-.59V8.59"
1537
+ }))));
1533
1538
  };
1534
1539
 
1535
- var Wrapper = styled__default["default"].div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
1536
- var InputContainer = styled__default["default"].div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n"])));
1537
- var StyledInput = styled__default["default"](Input)(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n border-radius: 0;\n border-top: 0;\n border-left: 0;\n border-right: 0;\n border-bottom-width: 2px;\n padding: ", ";\n width: 100%;\n\n &[readonly] {\n background-color: transparent;\n border-color: transparent;\n transition: border-color 0s;\n }\n\n &:focus {\n box-shadow: none;\n transition: border-color 0.2s ease-in-out 0.1s;\n }\n"], ["\n border-radius: 0;\n border-top: 0;\n border-left: 0;\n border-right: 0;\n border-bottom-width: 2px;\n padding: ", ";\n width: 100%;\n\n &[readonly] {\n background-color: transparent;\n border-color: transparent;\n transition: border-color 0s;\n }\n\n &:focus {\n box-shadow: none;\n transition: border-color 0.2s ease-in-out 0.1s;\n }\n"])), function (_a) {
1540
+ var ToggleContext = React.createContext({});
1541
+ var StyledInput = styled__default["default"](Input)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n border-radius: 0;\n border-top: 0;\n border-left: 0;\n border-right: 0;\n border-bottom-width: 2px;\n padding: ", ";\n width: 100%;\n\n &:focus {\n box-shadow: none;\n transition: border-color 0.2s ease-in-out 0.1s;\n }\n"], ["\n border-radius: 0;\n border-top: 0;\n border-left: 0;\n border-right: 0;\n border-bottom-width: 2px;\n padding: ", ";\n width: 100%;\n\n &:focus {\n box-shadow: none;\n transition: border-color 0.2s ease-in-out 0.1s;\n }\n"])), function (_a) {
1538
1542
  var theme = _a.theme;
1539
1543
  return "".concat(theme.space.xs, " ").concat(theme.space.xxs);
1540
1544
  });
1541
- var StyledEditIcon = styled__default["default"](SvgInputToggleEdit)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (_a) {
1545
+ var StyledLabel = styled__default["default"](Label)(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n padding: ", ";\n transition: opacity 0.2s ease-in-out;\n"], ["\n padding: ", ";\n transition: opacity 0.2s ease-in-out;\n"])), function (_a) {
1542
1546
  var theme = _a.theme;
1543
- return theme.space.sm;
1547
+ return "".concat(theme.space.xxs, " ").concat(theme.space.xxs, " 0");
1544
1548
  });
1545
- var StyledLabel = styled__default["default"](Label)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n transition: opacity 0.2s ease-in-out;\n"], ["\n transition: opacity 0.2s ease-in-out;\n"])));
1546
- var StyledMessage = styled__default["default"](Message)(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n margin-top: ", ";\n"], ["\n margin-top: ", ";\n"])), function (_a) {
1549
+ var StyledText$1 = styled__default["default"](XL)(templateObject_3$e || (templateObject_3$e = __makeTemplateObject([""], [""])));
1550
+ var Wrapper = styled__default["default"].div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n ", " {\n border-bottom: 2px solid transparent;\n padding: ", ";\n display: flex;\n align-items: center;\n\n svg {\n opacity: 0;\n margin-left: ", ";\n }\n\n &:hover {\n svg {\n opacity: 1;\n }\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n ", " {\n border-bottom: 2px solid transparent;\n padding: ", ";\n display: flex;\n align-items: center;\n\n svg {\n opacity: 0;\n margin-left: ", ";\n }\n\n &:hover {\n svg {\n opacity: 1;\n }\n }\n }\n"])), StyledText$1, function (_a) {
1547
1551
  var theme = _a.theme;
1548
- return theme.space.sm;
1552
+ return "".concat(theme.space.xs, " ").concat(theme.space.xxs);
1553
+ }, function (_a) {
1554
+ var theme = _a.theme;
1555
+ return theme.space.xs;
1549
1556
  });
1550
- /**
1557
+ /*
1551
1558
  * An Input Toggle lets users use the input by activating it pressing the edit button.
1552
1559
  * <hr>
1553
1560
  * Used for this:
1554
1561
  * - To let the user enter data into a field
1555
1562
  * - To enter multiline text, use a Textarea
1556
- **/
1557
- var InputToggle = function (props) {
1558
- var _a = React.useState(false), isEditing = _a[0], setIsEditing = _a[1];
1559
- var inputRef = React.useRef(null);
1560
- var validation = props.validation, size = props.size, label = props.label, message = props.message, required = props.required, onBlur = props.onBlur, placeholder = props.placeholder, style = props.style, rest = __rest(props, ["validation", "size", "label", "message", "required", "onBlur", "placeholder", "style"]);
1561
- var onClick = function () {
1563
+ */
1564
+ var InputToggle = function (_a) {
1565
+ var isFocused = _a.isFocused, props = __rest(_a, ["isFocused"]);
1566
+ var _b = React.useState(!!isFocused), isEditing = _b[0], setIsEditing = _b[1];
1567
+ var context = React.useMemo(function () { return ({ isEditing: isEditing, setIsEditing: setIsEditing }); }, [isEditing]);
1568
+ var container = React.useRef(null);
1569
+ var handleClick = function () {
1562
1570
  var _a;
1563
1571
  setIsEditing(true);
1564
- (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
1572
+ (_a = container.current) === null || _a === void 0 ? void 0 : _a.focus();
1565
1573
  };
1566
- var onKeyDown = function (event) {
1567
- var _a;
1568
- if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
1569
- setIsEditing(false);
1570
- (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
1574
+ return (jsxRuntime.jsx(ToggleContext.Provider, __assign({ value: context }, { children: jsxRuntime.jsx(Wrapper, __assign({ ref: container, onClick: handleClick, onBlur: function () { return setIsEditing(false); } }, props)) })));
1575
+ };
1576
+ var InputItem = function (props) {
1577
+ var _a = props.placeholder, placeholder = _a === void 0 ? "Insert a value" : _a, value = props.value, style = props.style, _b = props.size, size = _b === void 0 ? 22 : _b;
1578
+ var _c = React.useState(), input = _c[0], setInput = _c[1];
1579
+ var isEditing = React.useContext(ToggleContext).isEditing;
1580
+ React.useEffect(function () {
1581
+ if (isEditing && input) {
1582
+ input.focus();
1571
1583
  }
1572
- };
1573
- var handleOnBlur = function () {
1574
- var _a;
1575
- setIsEditing(false);
1576
- (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
1577
- };
1578
- return (jsxRuntime.jsxs(Wrapper, __assign({}, (style && { style: style }), { children: [label && (jsxRuntime.jsxs(StyledLabel, __assign({ isRegular: true }, (isEditing
1579
- ? { style: { opacity: 1 } }
1580
- : { style: { opacity: 0 } }), { children: [label, label && required ? (jsxRuntime.jsx(Span, __assign({ style: { color: theme.palette.red[600] } }, { children: "*" }))) : null] }))), jsxRuntime.jsxs(InputContainer, { children: [jsxRuntime.jsx(StyledInput, __assign({ placeholder: placeholder, onClick: onClick, onKeyDown: onKeyDown, onBlur: function (e) {
1581
- onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
1582
- handleOnBlur();
1583
- }, ref: inputRef }, (isEditing ? { readOnly: false } : { readOnly: true }), (size ? { style: { fontSize: "".concat(size, "px") } } : {}), (validation && { validation: validation }), rest)), !isEditing && jsxRuntime.jsx(StyledEditIcon, {})] }), message && (jsxRuntime.jsx(StyledMessage, __assign({ validation: validation }, (message ? { style: { opacity: 1 } } : { style: { opacity: 0 } }), { children: message })))] })));
1584
+ }, [isEditing, input]);
1585
+ return isEditing ? (jsxRuntime.jsx(StyledInput, __assign({ ref: setInput }, props, { style: __assign({ fontSize: "".concat(size, "px"), fontWeight: 500 }, style) }))) : (jsxRuntime.jsxs(StyledText$1, __assign({ isBold: true }, { children: [!value ? placeholder : value, " ", jsxRuntime.jsx(SvgNotesStroke, {})] })));
1584
1586
  };
1585
- var templateObject_1$N, templateObject_2$k, templateObject_3$e, templateObject_4$a, templateObject_5$5, templateObject_6$2;
1587
+ InputToggle.Item = InputItem;
1588
+ InputToggle.Label = StyledLabel;
1589
+ var templateObject_1$N, templateObject_2$k, templateObject_3$e, templateObject_4$a;
1586
1590
 
1587
1591
  var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject([""], [""])));
1588
1592
  /**
package/build/stories/forms/input-toggle/_types.d.ts CHANGED
@@ -6,10 +6,6 @@ export interface InputToggleArgs extends IInputProps {
6
6
  validation?: 'success' | 'warning' | 'error';
7
7
  /** Sets input size */
8
8
  size?: number;
9
- /** Sets the input label */
10
- label?: string;
11
- /** Sets the input message */
12
- message?: string;
13
- /** Sets the asterisk if required */
14
- required?: boolean;
9
+ /** Sets the initial focus */
10
+ isFocused?: boolean;
15
11
  }
package/build/stories/forms/input-toggle/index.d.ts CHANGED
@@ -1,10 +1,7 @@
1
1
  import { InputToggleArgs } from "./_types";
2
- /**
3
- * An Input Toggle lets users use the input by activating it pressing the edit button.
4
- * <hr>
5
- * Used for this:
6
- * - To let the user enter data into a field
7
- * - To enter multiline text, use a Textarea
8
- **/
9
- declare const InputToggle: (props: InputToggleArgs) => JSX.Element;
2
+ declare const InputToggle: {
3
+ ({ isFocused, ...props }: InputToggleArgs): JSX.Element;
4
+ Item: (props: InputToggleArgs) => JSX.Element;
5
+ Label: import("styled-components").StyledComponent<(props: import("../../label/_types").LabelArgs) => JSX.Element, any, {}, never>;
6
+ };
10
7
  export { InputToggle };
package/build/stories/forms/input-toggle/index.stories.d.ts CHANGED
@@ -1,8 +1,17 @@
1
1
  import { ComponentMeta, Story } from "@storybook/react";
2
2
  import { InputToggleArgs } from "./_types";
3
- export declare const Default: Story<InputToggleArgs>;
4
- export declare const Success: Story<InputToggleArgs>;
5
- export declare const Warning: Story<InputToggleArgs>;
6
- export declare const Error: Story<InputToggleArgs>;
7
- declare const _default: ComponentMeta<(props: InputToggleArgs) => JSX.Element>;
3
+ interface InputStoryArgs extends InputToggleArgs {
4
+ label: string;
5
+ message: string;
6
+ }
7
+ export declare const Default: Story<InputStoryArgs>;
8
+ export declare const Success: Story<InputStoryArgs>;
9
+ export declare const Warning: Story<InputStoryArgs>;
10
+ export declare const Error: Story<InputStoryArgs>;
11
+ export declare const WithLabel: Story<InputStoryArgs>;
12
+ declare const _default: ComponentMeta<{
13
+ ({ isFocused, ...props }: InputToggleArgs): JSX.Element;
14
+ Item: (props: InputToggleArgs) => JSX.Element;
15
+ Label: import("styled-components").StyledComponent<(props: import("../../label/_types").LabelArgs) => JSX.Element, any, {}, never>;
16
+ }>;
8
17
  export default _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appquality/unguess-design-system",
3
- "version": "2.11.10",
3
+ "version": "2.11.13",
4
4
  "dependencies": {
5
5
  "@tiptap/extension-bubble-menu": "^2.0.0-beta.61",
6
6
  "@tiptap/extension-character-count": "^2.0.0-beta.31",