@appquality/unguess-design-system 2.11.11 → 2.11.14

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# v2.11.14 (Mon Sep 12 2022)
+
+#### ⚠️ Pushed to `master`
+
+- Merge branch 'master' of github.com:AppQuality/unguess-design-system ([@cannarocks](https://github.com/cannarocks))
+- fix(input-toggle): fix initialFocus props ignored ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.11.13 (Mon Sep 12 2022)
+
+#### 🐛 Bug Fix
+
+- refactor(input-toggle): simplify component [#89](https://github.com/AppQuality/unguess-design-system/pull/89) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.11.12 (Thu Sep 08 2022)
+
+#### 🐛 Bug Fix
+
+- feat(input-toggle): add auto focus props [#88](https://github.com/AppQuality/unguess-design-system/pull/88) ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 1
+
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v2.11.11 (Thu Sep 08 2022)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -254,8 +254,8 @@ var gradients = {
     dark: "linear-gradient(90.81deg, ".concat(hex2rgba(palette.blue[800]), " 0%, ").concat(hex2rgba(palette.blue[600]), " 100%);"),
 };
 
-var _a, _b, _c, _d, _e, _f, _g$6, _h;
-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: {
+var _a, _b, _c, _d, _e, _f, _g$7, _h;
+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: {
         imgMaxHeight: "214px",
     }, autocomplete: {
         thumbSize: "60px",
@@ -461,18 +461,18 @@ var Tag = function (props) { return jsxRuntime.jsx(reactTags.Tag, __assign({}, p
 Tag.Avatar = reactTags.Tag.Avatar;
 Tag.Close = reactTags.Tag.Close;
 
-var _g$5, _path$q;
+var _g$6, _path$q;
 
-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); }
+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); }
 
 var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _g$5 || (_g$5 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$6 || (_g$6 = /*#__PURE__*/React__namespace.createElement("g", {
     opacity: 0.3
   }, /*#__PURE__*/React__namespace.createElement("path", {
     opacity: 0.3,
@@ -484,18 +484,18 @@ var SvgCampaignFunctional = function SvgCampaignFunctional(props) {
   })));
 };
 
-var _g$4, _path$p, _path2$4, _path3$3, _path4$2, _path5$1, _path6$1, _path7$1, _path8$1, _path9$1, _path10$1, _path11$1;
+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;
 
-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); }
+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); }
 
 var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
     width: 25,
     height: 24,
     viewBox: "0 0 25 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _g$4 || (_g$4 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$5 || (_g$5 = /*#__PURE__*/React__namespace.createElement("g", {
     opacity: 0.3
   }, /*#__PURE__*/React__namespace.createElement("path", {
     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",
@@ -559,10 +559,10 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
 
 var _path$o, _path2$3, _path3$2, _path4$1;
 
-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); }
+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); }
 
 var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -585,10 +585,10 @@ var SvgCampaignCompleted = function SvgCampaignCompleted(props) {
 
 var _path$n, _path2$2, _path3$1, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11;
 
-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); }
+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); }
 
 var SvgCampaignProgress = function SvgCampaignProgress(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -632,10 +632,10 @@ var SvgCampaignProgress = function SvgCampaignProgress(props) {
 
 var _path$m, _path2$1, _path3;
 
-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); }
+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); }
 
 var SvgCampaignIncoming = function SvgCampaignIncoming(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -889,7 +889,7 @@ var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$g || (templat
     return theme.space.xs;
 });
 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"])));
-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) {
+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) {
     var theme = _a.theme;
     return theme.space.base;
 }, function (_a) {
@@ -899,7 +899,7 @@ var ButtonsWrap$1 = styled__default["default"].div(templateObject_5$7 || (templa
     var theme = _a.theme;
     return theme.space.base * 4;
 });
-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) {
+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) {
     var theme = _a.theme;
     return theme.components.notification.card.padding;
 }, function (_a) {
@@ -916,7 +916,7 @@ var ServiceCard = function (props) {
     var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
     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)); }) })))] })] })));
 };
-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;
+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;
 
 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"])));
 var InfoCard = function (props) {
@@ -1062,7 +1062,7 @@ var Label$1 = styled__default["default"](MD)(templateObject_4$b || (templateObje
     var theme = _a.theme;
     return theme.palette.grey[800];
 });
-var Description$2 = styled__default["default"](SM)(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var Description$2 = styled__default["default"](SM)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[600];
 });
@@ -1074,7 +1074,7 @@ var ItemContent = function (props) {
     var thumbSrc = props.thumbSrc, description = props.description, label = props.label;
     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 })] })] }));
 };
-var templateObject_1$Z, templateObject_2$p, templateObject_3$f, templateObject_4$b, templateObject_5$6;
+var templateObject_1$Z, templateObject_2$p, templateObject_3$f, templateObject_4$b, templateObject_5$5;
 
 /**
    * A Menu is a wrapper for items elements
@@ -1147,10 +1147,10 @@ var templateObject_1$X;
 
 var _path$l;
 
-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); }
+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); }
 
 var SvgBoldFill = function SvgBoldFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -1164,10 +1164,10 @@ var SvgBoldFill = function SvgBoldFill(props) {
 
 var _path$k;
 
-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); }
+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); }
 
 var SvgItalicFill = function SvgItalicFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -1184,10 +1184,10 @@ var SvgItalicFill = function SvgItalicFill(props) {
 
 var _path$j, _path2;
 
-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); }
+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); }
 
 var SvgQuoteFill = function SvgQuoteFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -1205,18 +1205,18 @@ var SvgQuoteFill = function SvgQuoteFill(props) {
   })));
 };
 
-var _g$3;
+var _g$4;
 
-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); }
+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); }
 
 var SvgH1Fill = function SvgH1Fill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
-  }, props), _g$3 || (_g$3 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$4 || (_g$4 = /*#__PURE__*/React__namespace.createElement("g", {
     transform: "translate(-464 -332)"
   }, /*#__PURE__*/React__namespace.createElement("rect", {
     width: 16,
@@ -1237,18 +1237,18 @@ var SvgH1Fill = function SvgH1Fill(props) {
   }))));
 };
 
-var _g$2;
+var _g$3;
 
-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); }
+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); }
 
 var SvgH2Fill = function SvgH2Fill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
-  }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$3 || (_g$3 = /*#__PURE__*/React__namespace.createElement("g", {
     transform: "translate(-464 -332)"
   }, /*#__PURE__*/React__namespace.createElement("rect", {
     width: 16,
@@ -1269,18 +1269,18 @@ var SvgH2Fill = function SvgH2Fill(props) {
   }))));
 };
 
-var _g$1;
+var _g$2;
 
-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); }
+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); }
 
 var SvgH3Fill = function SvgH3Fill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16"
-  }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
     transform: "translate(-464 -332)"
   }, /*#__PURE__*/React__namespace.createElement("rect", {
     width: 16,
@@ -1514,57 +1514,84 @@ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$l || (te
 var Input = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(UgInput, __assign({ ref: ref }, props)); });
 var templateObject_1$O, templateObject_2$l;
 
-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"])));
-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"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
-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) {
+var _g$1;
+
+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); }
+
+var SvgNotesStroke = function SvgNotesStroke(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16"
+  }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
+    fill: "none",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    strokeLinejoin: "round",
+    d: "M10.51 8.4l-3.01.1.1-3.01L12.59.5l2.91 2.91-4.99 4.99z"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    strokeLinecap: "round",
+    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"
+  }))));
+};
+
+var ToggleContext = React.createContext({});
+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) {
     var theme = _a.theme;
     return "".concat(theme.space.xs, " ").concat(theme.space.xxs);
 });
-var StyledLabel = styled__default["default"](Label)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  transition: opacity 0.2s ease-in-out;\n"], ["\n  transition: opacity 0.2s ease-in-out;\n"])));
-var StyledMessage = styled__default["default"](Message)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
+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) {
     var theme = _a.theme;
-    return theme.space.sm;
+    return "".concat(theme.space.xxs, " ").concat(theme.space.xxs, " 0");
 });
-var IconContainer$1 = styled__default["default"].div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  margin-left: ", ";\n  cursor: pointer;\n"], ["\n  margin-left: ", ";\n  cursor: pointer;\n"])), function (_a) {
+var StyledText$1 = styled__default["default"](XL)(templateObject_3$e || (templateObject_3$e = __makeTemplateObject([""], [""])));
+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) {
     var theme = _a.theme;
-    return theme.space.md;
+    return "".concat(theme.space.xs, " ").concat(theme.space.xxs);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.space.xs;
 });
-/**
+/*
  * An Input Toggle lets users use the input by activating it pressing the edit button.
  * <hr>
  * Used for this:
  *  - To let the user enter data into a field
  *  - To enter multiline text, use a Textarea
- **/
-var InputToggle = function (props) {
-    var _a = React.useState(false), isEditing = _a[0], setIsEditing = _a[1];
-    var inputRef = React.useRef(null);
-    var validation = props.validation, size = props.size, label = props.label, message = props.message, required = props.required, onBlur = props.onBlur, placeholder = props.placeholder, endIcon = props.endIcon, style = props.style, rest = __rest(props, ["validation", "size", "label", "message", "required", "onBlur", "placeholder", "endIcon", "style"]);
-    var onClick = function () {
+ */
+var InputToggle = function (_a) {
+    var isFocused = _a.isFocused, props = __rest(_a, ["isFocused"]);
+    var _b = React.useState(!!isFocused), isEditing = _b[0], setIsEditing = _b[1];
+    var context = React.useMemo(function () { return ({ isEditing: isEditing, setIsEditing: setIsEditing }); }, [isEditing]);
+    var container = React.useRef(null);
+    var handleClick = function () {
         var _a;
         setIsEditing(true);
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        (_a = container.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    var onKeyDown = function (event) {
-        var _a;
-        if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
-            setIsEditing(false);
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    React.useEffect(function () {
+        if (isFocused) {
+            handleClick();
         }
-    };
-    var handleOnBlur = function () {
-        var _a;
-        setIsEditing(false);
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-    };
-    return (jsxRuntime.jsxs(Wrapper, __assign({}, (style && { style: style }), { children: [label && (jsxRuntime.jsxs(StyledLabel, __assign({ isRegular: true }, (isEditing
-                ? { style: { opacity: 1 } }
-                : { 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) {
-                            onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-                            handleOnBlur();
-                        }, ref: inputRef }, (isEditing ? { readOnly: false } : { readOnly: true }), (size ? { style: { fontSize: "".concat(size, "px") } } : {}), (validation && { validation: validation }), rest)), !isEditing && endIcon && (jsxRuntime.jsx(IconContainer$1, __assign({ onClick: onClick }, { children: endIcon })))] }), message && (jsxRuntime.jsx(StyledMessage, __assign({ validation: validation }, (message ? { style: { opacity: 1 } } : { style: { opacity: 0 } }), { children: message })))] })));
+    }, []);
+    return (jsxRuntime.jsx(ToggleContext.Provider, __assign({ value: context }, { children: jsxRuntime.jsx(Wrapper, __assign({ ref: container, onClick: handleClick, onBlur: function () { return setIsEditing(false); } }, props)) })));
+};
+var InputItem = function (props) {
+    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;
+    var _c = React.useState(), input = _c[0], setInput = _c[1];
+    var isEditing = React.useContext(ToggleContext).isEditing;
+    React.useEffect(function () {
+        if (isEditing && input) {
+            input.focus();
+        }
+    }, [isEditing, input]);
+    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, {})] })));
 };
-var templateObject_1$N, templateObject_2$k, templateObject_3$e, templateObject_4$a, templateObject_5$5, templateObject_6$2;
+InputToggle.Item = InputItem;
+InputToggle.Label = StyledLabel;
+var templateObject_1$N, templateObject_2$k, templateObject_3$e, templateObject_4$a;
 
 var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject([""], [""])));
 /**

package/build/stories/forms/input-toggle/_types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IInputProps } from "@zendeskgarden/react-forms";
 export interface InputToggleArgs extends IInputProps {
     /** Removes borders and padding */
@@ -7,12 +6,6 @@ export interface InputToggleArgs extends IInputProps {
     validation?: 'success' | 'warning' | 'error';
     /** Sets input size */
     size?: number;
-    /** Sets the input label */
-    label?: string;
-    /** Sets the input message */
-    message?: string;
-    /** Sets the asterisk if required */
-    required?: boolean;
-    /** Sets the endicon */
-    endIcon?: React.ReactNode;
+    /** Sets the initial focus */
+    isFocused?: boolean;
 }

package/build/stories/forms/input-toggle/index.d.ts

@@ -1,10 +1,7 @@
 import { InputToggleArgs } from "./_types";
-/**
- * An Input Toggle lets users use the input by activating it pressing the edit button.
- * <hr>
- * Used for this:
- *  - To let the user enter data into a field
- *  - To enter multiline text, use a Textarea
- **/
-declare const InputToggle: (props: InputToggleArgs) => JSX.Element;
+declare const InputToggle: {
+    ({ isFocused, ...props }: InputToggleArgs): JSX.Element;
+    Item: (props: InputToggleArgs) => JSX.Element;
+    Label: import("styled-components").StyledComponent<(props: import("../../label/_types").LabelArgs) => JSX.Element, any, {}, never>;
+};
 export { InputToggle };

package/build/stories/forms/input-toggle/index.stories.d.ts

@@ -1,8 +1,17 @@
 import { ComponentMeta, Story } from "@storybook/react";
 import { InputToggleArgs } from "./_types";
-export declare const Default: Story<InputToggleArgs>;
-export declare const Success: Story<InputToggleArgs>;
-export declare const Warning: Story<InputToggleArgs>;
-export declare const Error: Story<InputToggleArgs>;
-declare const _default: ComponentMeta<(props: InputToggleArgs) => JSX.Element>;
+interface InputStoryArgs extends InputToggleArgs {
+    label: string;
+    message: string;
+}
+export declare const Default: Story<InputStoryArgs>;
+export declare const Success: Story<InputStoryArgs>;
+export declare const Warning: Story<InputStoryArgs>;
+export declare const Error: Story<InputStoryArgs>;
+export declare const WithLabel: Story<InputStoryArgs>;
+declare const _default: ComponentMeta<{
+    ({ isFocused, ...props }: InputToggleArgs): JSX.Element;
+    Item: (props: InputToggleArgs) => JSX.Element;
+    Label: import("styled-components").StyledComponent<(props: import("../../label/_types").LabelArgs) => JSX.Element, any, {}, never>;
+}>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.11.11",
+  "version": "2.11.14",
   "dependencies": {
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.61",
     "@tiptap/extension-character-count": "^2.0.0-beta.31",