@mailstep/design-system 0.4.13-beta.1 → 0.4.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.4.13-beta.1",
+  "version": "0.4.14",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Forms/Input/styles.js

@@ -23,12 +23,9 @@ export var InputIcon = styled.div(templateObject_1 || (templateObject_1 = __make
 });
 export var IconsController = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0.2em;\n  right: 0.5em;\n"], ["\n  position: absolute;\n  top: 0.2em;\n  right: 0.5em;\n"])));
 export var IconWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  svg {\n    :hover {\n      cursor: pointer;\n      color: blue2;\n    }\n  }\n"], ["\n  display: flex;\n  svg {\n    :hover {\n      cursor: pointer;\n      color: blue2;\n    }\n  }\n"])));
-export var StyledInput = styled.input.attrs(function (_a) {
-    var $asTextArea = _a.$asTextArea;
-    return ({
-        as: $asTextArea ? 'textarea' : 'input',
-    });
-})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: 100%;\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: medium;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n      }\n    }\n  }\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: lightGray1;\n    border-color: lightGray3;\n    color: gray;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"], ["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: 100%;\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: medium;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n      }\n    }\n  }\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: lightGray1;\n    border-color: lightGray3;\n    color: gray;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"])), system, function (_a) {
+export var StyledInput = styled.input.attrs(function (props) { return ({
+    as: props.$asTextArea ? 'textarea' : 'input',
+}); })(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: 100%;\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: medium;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n      }\n    }\n  }\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: lightGray1;\n    border-color: lightGray3;\n    color: gray;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"], ["\n  ", ";\n  border: slim;\n  border-color: ", ";\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ", "em;\n  display: block;\n  width: 100%;\n  font-family: ", ";\n  font-size: 14px;\n  font-weight: medium;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ", " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ", " {\n      svg {\n        stroke: blue2;\n      }\n    }\n  }\n  ", ";\n  :disabled,\n  :disabled:hover {\n    background-color: lightGray1;\n    border-color: lightGray3;\n    color: gray;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"])), system, function (_a) {
     var $isInvalid = _a.$isInvalid;
     return ($isInvalid ? th.color('red1') : th.color('lightGray6'));
 }, function (props) { return resolvePaddingRight(props); }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {

package/ui/index.es.js

@@ -17519,8 +17519,8 @@ const nO = (e, t) => Object.entries(e).map(([r, n]) => `${n} ${r}`).join(", "),
       color: blue2;
     }
   }
-`, GO = D.input.attrs(({ $asTextArea: e }) => ({
-  as: e ? "textarea" : "input"
+`, GO = D.input.attrs((e) => ({
+  as: e.$asTextArea ? "textarea" : "input"
 }))`
   ${Nn};
   border: slim;

package/ui/index.umd.js

@@ -2210,7 +2210,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       color: blue2;
     }
   }
-`,CB=V.input.attrs(({$asTextArea:e})=>({as:e?"textarea":"input"}))`
+`,CB=V.input.attrs(e=>({as:e.$asTextArea?"textarea":"input"}))`
   ${Wr};
   border: slim;
   border-color: ${({$isInvalid:e})=>e?O.color("red1"):O.color("lightGray6")};