@proprioo/salatim 18.6.2 → 19.3.1

package/lib/ui/src/input/Input.styles.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -24,9 +20,41 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputLayout = exports.BaseLayout = void 0;
-var styled_components_1 = __importStar(require("styled-components"));
-var utils_1 = require("../../../utils");
-exports.BaseLayout = styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 0;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  background: none;\n  padding: 0 ", ";\n  font-size: ", ";\n  caret-color: ", ";\n  line-height: ", ";\n  min-height: ", ";\n"], ["\n  ", ";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 0;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  background: none;\n  padding: 0 ", ";\n  font-size: ", ";\n  caret-color: ", ";\n  line-height: ", ";\n  min-height: ", ";\n"])), utils_1.ArchivoFont, utils_1.convertPxToRem(28), utils_1.fonts.small, utils_1.colors.blue.base, utils_1.convertPxToRem(48), utils_1.convertPxToRem(48));
-exports.InputLayout = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", " :not(:disabled) {\n    :focus,\n    :active {\n      outline: none;\n      box-shadow: ", ";\n    }\n  }\n\n  :-webkit-autofill,\n  :-webkit-autofill:hover,\n  :-webkit-autofill:focus,\n  :-webkit-autofill:active {\n    box-shadow: 0 0 0 ", " white inset;\n  }\n"], ["\n  ", " :not(:disabled) {\n    :focus,\n    :active {\n      outline: none;\n      box-shadow: ", ";\n    }\n  }\n\n  :-webkit-autofill,\n  :-webkit-autofill:hover,\n  :-webkit-autofill:focus,\n  :-webkit-autofill:active {\n    box-shadow: 0 0 0 ", " white inset;\n  }\n"])), exports.BaseLayout, utils_1.shadows.level1, utils_1.convertPxToRem(40));
-var templateObject_1, templateObject_2;
+const styled_components_1 = __importStar(require("styled-components"));
+const utils_1 = require("../../../utils");
+exports.BaseLayout = (0, styled_components_1.css) `
+  ${utils_1.ArchivoFont};
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 0;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  background: none;
+  padding: 0 ${(0, utils_1.convertPxToRem)(28)};
+  font-size: ${utils_1.fonts.small};
+  caret-color: ${utils_1.colors.blue.base};
+  line-height: ${(0, utils_1.convertPxToRem)(48)};
+  min-height: ${(0, utils_1.convertPxToRem)(48)};
+`;
+exports.InputLayout = styled_components_1.default.input `
+  ${exports.BaseLayout} :not(:disabled) {
+    :focus,
+    :active {
+      outline: none;
+      box-shadow: ${utils_1.shadows.level1};
+    }
+  }
+
+  :-webkit-autofill,
+  :-webkit-autofill:hover,
+  :-webkit-autofill:focus,
+  :-webkit-autofill:active {
+    box-shadow: 0 0 0 ${(0, utils_1.convertPxToRem)(40)} white inset;
+  }
+`;
 //# sourceMappingURL=Input.styles.js.map

package/lib/ui/src/input/Input.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.styles.js","sourceRoot":"","sources":["../../../../packages/ui/src/input/Input.styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qEAAgD;AAEhD,wCAMwB;AAEX,QAAA,UAAU,GAAG,uBAAG,0WAAA,MACzB,EAAW,mMAYA,EAAkB,kBAClB,EAAW,oBACT,EAAgB,oBAChB,EAAkB,mBACnB,EAAkB,KACjC,KAjBG,mBAAW,EAYA,sBAAc,CAAC,EAAE,CAAC,EAClB,aAAK,CAAC,KAAK,EACT,cAAM,CAAC,IAAI,CAAC,IAAI,EAChB,sBAAc,CAAC,EAAE,CAAC,EACnB,sBAAc,CAAC,EAAE,CAAC,EAChC;AAEW,QAAA,WAAW,GAAG,2BAAM,CAAC,KAAK,oVAAA,MACnC,EAAU,0FAIM,EAAc,qJAQV,EAAkB,sBAEzC,KAdG,kBAAU,EAIM,eAAO,CAAC,MAAM,EAQV,sBAAc,CAAC,EAAE,CAAC,EAExC"}
+{"version":3,"file":"Input.styles.js","sourceRoot":"","sources":["../../../../packages/ui/src/input/Input.styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,uEAAgD;AAEhD,0CAMwB;AAEX,QAAA,UAAU,GAAG,IAAA,uBAAG,EAAA;IACzB,mBAAW;;;;;;;;;;;;eAYA,IAAA,sBAAc,EAAC,EAAE,CAAC;eAClB,aAAK,CAAC,KAAK;iBACT,cAAM,CAAC,IAAI,CAAC,IAAI;iBAChB,IAAA,sBAAc,EAAC,EAAE,CAAC;gBACnB,IAAA,sBAAc,EAAC,EAAE,CAAC;CACjC,CAAC;AAEW,QAAA,WAAW,GAAG,2BAAM,CAAC,KAAK,CAAA;IACnC,kBAAU;;;;oBAIM,eAAO,CAAC,MAAM;;;;;;;;wBAQV,IAAA,sBAAc,EAAC,EAAE,CAAC;;CAEzC,CAAC"}

package/lib/ui/src/input/Input.test.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -33,11 +22,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@testing-library/react");
-var Input_1 = __importStar(require("./Input"));
-var mockHandleFunction = jest.fn();
-var defaultProps = {
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const Input_1 = __importStar(require("./Input"));
+const mockHandleFunction = jest.fn();
+const defaultProps = {
     id: 'id',
     type: Input_1.InputType.TEXT,
     disabled: false,
@@ -47,22 +36,22 @@ var defaultProps = {
     handleFocus: mockHandleFunction,
     handleBlur: mockHandleFunction
 };
-var mockComponent = function () { return react_1.default.createElement("div", { "data-test": "fc-component" }); };
-describe('Input component', function () {
-    afterEach(function () { return jest.resetAllMocks(); });
-    afterAll(function () { return jest.clearAllMocks(); });
-    it('should render component', function () {
-        react_2.render(react_1.default.createElement(Input_1.default, __assign({}, defaultProps)));
+const mockComponent = () => react_1.default.createElement("div", { "data-test": "fc-component" });
+describe('Input component', () => {
+    afterEach(() => jest.resetAllMocks());
+    afterAll(() => jest.clearAllMocks());
+    it('should render component', () => {
+        (0, react_2.render)(react_1.default.createElement(Input_1.default, Object.assign({}, defaultProps)));
         expect(react_2.screen.getByRole('textbox')).toBeInTheDocument();
     });
-    it('should have right value', function () {
-        var props = __assign(__assign({}, defaultProps), { value: "Ici c'est Paris" });
-        react_2.render(react_1.default.createElement(Input_1.default, __assign({}, props)));
+    it('should have right value', () => {
+        const props = Object.assign(Object.assign({}, defaultProps), { value: "Ici c'est Paris" });
+        (0, react_2.render)(react_1.default.createElement(Input_1.default, Object.assign({}, props)));
         expect(react_2.screen.getByRole('textbox')).toHaveAttribute('value', "Ici c'est Paris");
     });
-    it('should render inputElement', function () {
-        var props = __assign(__assign({}, defaultProps), { inputElement: mockComponent });
-        react_2.render(react_1.default.createElement(Input_1.default, __assign({}, props)));
+    it('should render inputElement', () => {
+        const props = Object.assign(Object.assign({}, defaultProps), { inputElement: mockComponent });
+        (0, react_2.render)(react_1.default.createElement(Input_1.default, Object.assign({}, props)));
         expect(react_2.screen.getByTestId('fc-component')).toBeInTheDocument();
     });
 });

package/lib/ui/src/input/Input.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.test.js","sourceRoot":"","sources":["../../../../packages/ui/src/input/Input.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAkC;AAElC,gDAAwD;AAExD,+CAAuD;AAEvD,IAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;AAErC,IAAM,YAAY,GAAe;IAC/B,EAAE,EAAE,IAAI;IACR,IAAI,EAAE,iBAAS,CAAC,IAAI;IACpB,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,KAAK;IACd,KAAK,EAAE,EAAE;IACT,cAAc,EAAE,kBAAkB;IAClC,WAAW,EAAE,kBAAkB;IAC/B,UAAU,EAAE,kBAAkB;CAC/B,CAAC;AAEF,IAAM,aAAa,GAAmB,cAAM,OAAA,oDAAe,cAAc,GAAG,EAAhC,CAAgC,CAAC;AAE7E,QAAQ,CAAC,iBAAiB,EAAE;IAC1B,SAAS,CAAC,cAAM,OAAA,IAAI,CAAC,aAAa,EAAE,EAApB,CAAoB,CAAC,CAAC;IACtC,QAAQ,CAAC,cAAM,OAAA,IAAI,CAAC,aAAa,EAAE,EAApB,CAAoB,CAAC,CAAC;IAErC,EAAE,CAAC,yBAAyB,EAAE;QAC5B,cAAM,CAAC,8BAAC,eAAK,eAAK,YAAY,EAAI,CAAC,CAAC;QAEpC,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE;QAC5B,IAAM,KAAK,yBACN,YAAY,KACf,KAAK,EAAE,iBAAiB,GACzB,CAAC;QAEF,cAAM,CAAC,8BAAC,eAAK,eAAK,KAAK,EAAI,CAAC,CAAC;QAE7B,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CACjD,OAAO,EACP,iBAAiB,CAClB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE;QAC/B,IAAM,KAAK,yBACN,YAAY,KACf,YAAY,EAAE,aAAa,GAC5B,CAAC;QAEF,cAAM,CAAC,8BAAC,eAAK,eAAK,KAAK,EAAI,CAAC,CAAC;QAE7B,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Input.test.js","sourceRoot":"","sources":["../../../../packages/ui/src/input/Input.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAAkC;AAElC,kDAAwD;AAExD,iDAAuD;AAEvD,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;AAErC,MAAM,YAAY,GAAe;IAC/B,EAAE,EAAE,IAAI;IACR,IAAI,EAAE,iBAAS,CAAC,IAAI;IACpB,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,KAAK;IACd,KAAK,EAAE,EAAE;IACT,cAAc,EAAE,kBAAkB;IAClC,WAAW,EAAE,kBAAkB;IAC/B,UAAU,EAAE,kBAAkB;CAC/B,CAAC;AAEF,MAAM,aAAa,GAAmB,GAAG,EAAE,CAAC,oDAAe,cAAc,GAAG,CAAC;AAE7E,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IACtC,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IAErC,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACjC,IAAA,cAAM,EAAC,8BAAC,eAAK,oBAAK,YAAY,EAAI,CAAC,CAAC;QAEpC,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACjC,MAAM,KAAK,mCACN,YAAY,KACf,KAAK,EAAE,iBAAiB,GACzB,CAAC;QAEF,IAAA,cAAM,EAAC,8BAAC,eAAK,oBAAK,KAAK,EAAI,CAAC,CAAC;QAE7B,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CACjD,OAAO,EACP,iBAAiB,CAClB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACpC,MAAM,KAAK,mCACN,YAAY,KACf,YAAY,EAAE,aAAa,GAC5B,CAAC;QAEF,IAAA,cAAM,EAAC,8BAAC,eAAK,oBAAK,KAAK,EAAI,CAAC,CAAC;QAE7B,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/lib/ui/src/inputBase/InputBase.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -34,32 +23,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZINDEX_OPEN = void 0;
-var react_1 = __importStar(require("react"));
-var react_id_generator_1 = __importDefault(require("react-id-generator"));
-var hokkaido_1 = require("@proprioo/hokkaido");
-var Alert_1 = __importDefault(require("../icons/Alert"));
-var Input_1 = __importStar(require("../input/Input"));
-var InputBase_styles_1 = require("./InputBase.styles");
+const react_1 = __importStar(require("react"));
+const react_id_generator_1 = __importDefault(require("react-id-generator"));
+const hokkaido_1 = require("@proprioo/hokkaido");
+const Alert_1 = __importDefault(require("../icons/Alert"));
+const Input_1 = __importStar(require("../input/Input"));
+const InputBase_styles_1 = require("./InputBase.styles");
 exports.ZINDEX_OPEN = 10;
-var InputBase = function (_a) {
-    var _b;
-    var disabled = _a.disabled, id = _a.id, inputElement = _a.inputElement, displayField = _a.displayField, error = _a.error, label = _a.label, _c = _a.type, type = _c === void 0 ? Input_1.InputType.TEXT : _c, field = _a.field, gmap = _a.gmap, zIndex = _a.zIndex, name = _a.name, dataTest = _a.dataTest, required = _a.required, min = _a.min, max = _a.max, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, suffix = _a.suffix, value = _a.value, selectOnFocus = _a.selectOnFocus, outline = _a.outline, _d = _a.focused, initialFocused = _d === void 0 ? false : _d, _e = _a.phoneWithFlags, phoneWithFlags = _e === void 0 ? false : _e;
-    var inputRef = react_1.useRef(null);
-    var htmlId = react_1.useMemo(function () { return id || "input-" + react_id_generator_1.default(); }, []);
-    var _f = react_1.useState(initialFocused), focused = _f[0], setFocused = _f[1];
-    var handleOnChange = function (event) {
-        var eventValue = event.target.value;
+const InputBase = ({ disabled, id, inputElement, displayField, error, label, type = Input_1.InputType.TEXT, field, gmap, zIndex, name, dataTest, required, min, max, onBlur, onChange, onFocus, suffix, value, selectOnFocus, outline, focused: initialFocused = false, phoneWithFlags = false }) => {
+    var _a;
+    const inputRef = (0, react_1.useRef)(null);
+    const htmlId = (0, react_1.useMemo)(() => id || `input-${(0, react_id_generator_1.default)()}`, []);
+    const [focused, setFocused] = (0, react_1.useState)(initialFocused);
+    const handleOnChange = (event) => {
+        const { target: { value: eventValue } } = event;
         if (!disabled && onChange) {
             onChange(eventValue);
         }
     };
-    var handleBlur = function () {
+    const handleBlur = () => {
         setFocused(false);
         if (onBlur) {
             onBlur();
         }
     };
-    var handleFocus = function () {
+    const handleFocus = () => {
         setFocused(true);
         if (selectOnFocus && inputRef.current) {
             inputRef.current.select();
@@ -68,21 +56,21 @@ var InputBase = function (_a) {
             onFocus();
         }
     };
-    var notched = value !== undefined
-        ? hokkaido_1.isNotEmpty(value || '')
-        : hokkaido_1.isNotEmpty(((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value) || '');
-    var inputProps = __assign(__assign({ disabled: disabled,
-        field: field,
-        focused: focused,
-        type: type }, (value !== undefined && { value: value })), { dataTest: dataTest,
-        required: required, id: htmlId, handleBlur: handleBlur,
-        handleFocus: handleFocus,
-        handleOnChange: handleOnChange,
-        name: name, gmap: __assign(__assign({}, gmap), { onBlur: hokkaido_1.compose(gmap && gmap.onBlur, handleBlur) }), min: min,
-        max: max,
-        suffix: suffix,
-        phoneWithFlags: phoneWithFlags });
-    react_1.useEffect(function () {
+    const notched = value !== undefined
+        ? (0, hokkaido_1.isNotEmpty)(value || '')
+        : (0, hokkaido_1.isNotEmpty)(((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) || '');
+    const inputProps = Object.assign(Object.assign({ disabled,
+        field,
+        focused,
+        type }, (value !== undefined && { value })), { dataTest,
+        required, id: htmlId, handleBlur,
+        handleFocus,
+        handleOnChange,
+        name, gmap: Object.assign(Object.assign({}, gmap), { onBlur: (0, hokkaido_1.compose)(gmap && gmap.onBlur, handleBlur) }), min,
+        max,
+        suffix,
+        phoneWithFlags });
+    (0, react_1.useEffect)(() => {
         setFocused(initialFocused);
     }, [initialFocused]);
     return (react_1.default.createElement(InputBase_styles_1.Layout, { disabled: disabled, error: error, focused: focused, notched: notched, zIndex: zIndex, outline: outline, phoneWithFlags: phoneWithFlags },
@@ -95,7 +83,7 @@ var InputBase = function (_a) {
                         } })),
                 displayField ? (react_1.default.createElement(react_1.Fragment, null, displayField)) : (react_1.default.createElement(react_1.Fragment, null,
                     suffix && react_1.default.createElement(InputBase_styles_1.Suffix, { "data-test": "input-suffix" }, suffix),
-                    react_1.default.createElement(Input_1.default, __assign({ ref: inputRef }, __assign(__assign({}, inputProps), { inputElement: inputElement })))))),
+                    react_1.default.createElement(Input_1.default, Object.assign({ ref: inputRef }, Object.assign(Object.assign({}, inputProps), { inputElement })))))),
             field && react_1.default.createElement(react_1.Fragment, null, field),
             error && react_1.default.createElement(Alert_1.default, null))));
 };

package/lib/ui/src/inputBase/InputBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputBase.js","sourceRoot":"","sources":["../../../../packages/ui/src/inputBase/InputBase.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"InputBase.js","sourceRoot":"","sources":["../../../../packages/ui/src/inputBase/InputBase.tsx"],"names":[],"mappings":"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"}

package/lib/ui/src/inputBase/InputBase.styles.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -24,67 +20,242 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Layout = exports.InsideLayout = exports.Suffix = exports.LabelLayout = exports.LegendLayout = exports.FieldSetLayout = void 0;
-var styled_components_1 = __importStar(require("styled-components"));
-var utils_1 = require("../../../utils");
-var Input_styles_1 = require("../input/Input.styles");
-var InputBaseEnum_1 = require("./InputBaseEnum");
-exports.FieldSetLayout = styled_components_1.default.fieldset(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  margin: 0;\n  padding: 0;\n  border: ", " solid ", ";\n  border-radius: ", ";\n  z-index: 0;\n  overflow: hidden;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  margin: 0;\n  padding: 0;\n  border: ", " solid ", ";\n  border-radius: ", ";\n  z-index: 0;\n  overflow: hidden;\n"])), utils_1.convertPxToRem(1), utils_1.colors.grey.base80, utils_1.radius.biggest);
-exports.LegendLayout = styled_components_1.default.legend(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  padding: 0;\n  text-align: left;\n  transition: width 0ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  height: ", ";\n  width: auto;\n  visibility: hidden;\n  max-width: 0.01px;\n  white-space: nowrap;\n  margin: 0 0 0 ", ";\n\n  > span {\n    display: inline-block;\n    padding: 0 ", ";\n  }\n\n  ", "\n"], ["\n  ", ";\n  ", ";\n  padding: 0;\n  text-align: left;\n  transition: width 0ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  height: ", ";\n  width: auto;\n  visibility: hidden;\n  max-width: 0.01px;\n  white-space: nowrap;\n  margin: 0 0 0 ", ";\n\n  > span {\n    display: inline-block;\n    padding: 0 ", ";\n  }\n\n  ",
-    "\n"])), utils_1.paragraphs.caption, utils_1.ArchivoFont, utils_1.convertPxToRem(2), utils_1.convertPxToRem(20), utils_1.convertPxToRem(8), function (_a) {
-    var isVisible = _a.isVisible;
-    return isVisible && styled_components_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      max-width: ", ";\n    "], ["\n      max-width: ", ";\n    "])), utils_1.convertPxToRem(1000));
-});
-exports.LabelLayout = styled_components_1.default.label(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  right: ", ";\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: ", ";\n  transform: translate3d(", ", ", ", 0)\n    scale(1.1);\n  transform-origin: top left;\n  transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n    transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  pointer-events: none;\n  line-height: ", ";\n  backface-visibility: hidden;\n  font-smoothing: subpixel-antialiased;\n  display: block;\n  max-width: calc(100% - ", ");\n"], ["\n  ", ";\n  ", ";\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  right: ",
-    ";\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: ", ";\n  transform: translate3d(", ", ", ", 0)\n    scale(1.1);\n  transform-origin: top left;\n  transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n    transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  pointer-events: none;\n  line-height: ", ";\n  backface-visibility: hidden;\n  font-smoothing: subpixel-antialiased;\n  display: block;\n  max-width: calc(100% - ", ");\n"])), utils_1.ArchivoFont, utils_1.paragraphs.caption, function (_a) {
-    var suffixLength = _a.suffixLength;
-    return Boolean(suffixLength)
-        ? utils_1.convertPxToRem(52 + suffixLength * 12)
-        : utils_1.convertPxToRem(32);
-}, utils_1.colors.dark.base80, utils_1.convertPxToRem(28), utils_1.convertPxToRem(16), utils_1.convertPxToRem(18), utils_1.convertPxToRem(48));
-exports.Suffix = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  bottom: ", ";\n  display: flex;\n  align-items: center;\n  padding: 0 ", " 0 ", ";\n  color: ", ";\n\n  & + ", " {\n    padding-right: ", ";\n  }\n"], ["\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  bottom: ", ";\n  display: flex;\n  align-items: center;\n  padding: 0 ", " 0 ", ";\n  color: ", ";\n\n  & + ", " {\n    padding-right: ", ";\n  }\n"])), utils_1.convertPxToRem(4), utils_1.convertPxToRem(4), utils_1.convertPxToRem(4), utils_1.convertPxToRem(16), utils_1.convertPxToRem(4), utils_1.colors.grey.base80, Input_styles_1.InputLayout, utils_1.convertPxToRem(48));
-exports.InsideLayout = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 0;\n\n  > svg {\n    position: absolute;\n    top: 50%;\n    left: ", ";\n    width: ", ";\n    height: ", ";\n    content: '';\n    transform: translateY(-50%);\n    background: white;\n    border-radius: ", ";\n  }\n\n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 0;\n\n  > svg {\n    position: absolute;\n    top: 50%;\n    left: ", ";\n    width: ", ";\n    height: ", ";\n    content: '';\n    transform: translateY(-50%);\n    background: white;\n    border-radius: ", ";\n  }\n\n  ",
-    "\n"])), utils_1.convertPxToRem(12), utils_1.convertPxToRem(32), utils_1.convertPxToRem(32), utils_1.radius.rounded, function (_a) {
-    var disabled = _a.disabled;
-    return disabled && styled_components_1.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      > svg {\n        background: ", ";\n      }\n    "], ["\n      > svg {\n        background: ", ";\n      }\n    "])), utils_1.colors.dark.base10);
-});
-exports.Layout = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  position: relative;\n  z-index: ", ";\n  min-height: ", ";\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n    }\n"], ["\n  position: relative;\n  z-index: ", ";\n  min-height: ", ";\n  \n  ",
-    "\n  \n  ",
-    "\n  \n  ",
-    "\n  \n  ",
-    "\n  \n  ",
-    "\n  \n  ",
-    "\n  \n  ",
-    "\n    }\n"])), function (props) { return props.zIndex || 0; }, utils_1.convertPxToRem(50), function (_a) {
-    var phoneWithFlags = _a.phoneWithFlags;
-    return phoneWithFlags && styled_components_1.css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      ", " {\n        transform: translate(", ", ", ");\n      }\n\n      ", " {\n        > svg {\n          left: initial;\n          right: ", ";\n        }\n      }\n    "], ["\n      ", " {\n        transform: translate(", ", ", ");\n      }\n\n      ", " {\n        > svg {\n          left: initial;\n          right: ", ";\n        }\n      }\n    "])), exports.LabelLayout, utils_1.convertPxToRem(60), utils_1.convertPxToRem(18), exports.InsideLayout, utils_1.convertPxToRem(12));
-}, function (_a) {
-    var outline = _a.outline;
-    return outline === InputBaseEnum_1.InputColors.GREEN
-        ? styled_components_1.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), utils_1.colors.green.base) : outline === InputBaseEnum_1.InputColors.BLUE
-        ? styled_components_1.css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), utils_1.colors.blue.base60) : outline === InputBaseEnum_1.InputColors.PINK
-        ? styled_components_1.css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), utils_1.colors.pink.base) : outline === InputBaseEnum_1.InputColors.ORANGE && styled_components_1.css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), utils_1.colors.orange.base);
-}, function (_a) {
-    var focused = _a.focused, error = _a.error, disabled = _a.disabled;
-    return error && styled_components_1.css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      color: ", ";\n\n      ", " {\n        color: ", ";\n        padding: 0 ", " 0 ", ";\n      }\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        color: ", ";\n      }\n\n      ", " {\n        color: ", ";\n        transform: translate3d(", ", ", ", 0);\n\n        ", "\n      }\n    "], ["\n      color: ", ";\n\n      ", " {\n        color: ", ";\n        padding: 0 ", " 0 ", ";\n      }\n\n      ", " {\n        ", "\n      }\n\n      ", " {\n        color: ", ";\n      }\n\n      ", " {\n        color: ", ";\n        transform: translate3d(", ", ", ", 0);\n\n        ",
-        "\n      }\n    "])), utils_1.colors.red.base, Input_styles_1.InputLayout, utils_1.colors.red.base, utils_1.convertPxToRem(56), utils_1.convertPxToRem(48), exports.FieldSetLayout, !disabled && "border-color: " + utils_1.colors.red.base + ";", exports.Suffix, utils_1.colors.red.base, exports.LabelLayout, utils_1.colors.red.base, utils_1.convertPxToRem(48), utils_1.convertPxToRem(16), !focused && styled_components_1.css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n          transform: translate3d(\n            ", ",\n            ", ",\n            0\n          );\n        "], ["\n          transform: translate3d(\n            ", ",\n            ", ",\n            0\n          );\n        "])), utils_1.convertPxToRem(48), utils_1.convertPxToRem(16)));
-}, function (_a) {
-    var phoneWithFlags = _a.phoneWithFlags, error = _a.error;
-    return phoneWithFlags &&
-        error && styled_components_1.css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      ", " {\n        transform: translate(", ", ", ");\n      }\n    "], ["\n      ", " {\n        transform: translate(", ", ", ");\n      }\n    "])), exports.LabelLayout, utils_1.convertPxToRem(60), utils_1.convertPxToRem(18));
-}, function (_a) {
-    var focused = _a.focused, notched = _a.notched, error = _a.error;
-    return (focused || notched) && styled_components_1.css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      ", " {\n        ", ";\n      }\n\n      ", " {\n        overflow: initial;\n        text-overflow: ellipsis;\n        transform: translate3d(", ", -", ", 0);\n      }\n    "], ["\n      ", " {\n        ",
-        ";\n      }\n\n      ", " {\n        overflow: initial;\n        text-overflow: ellipsis;\n        transform: translate3d(", ", -", ", 0);\n      }\n    "])), exports.FieldSetLayout, !error && styled_components_1.css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n          border-color: ", ";\n        "], ["\n          border-color: ", ";\n        "])), utils_1.colors.orange.base), exports.LabelLayout, utils_1.convertPxToRem(29), utils_1.convertPxToRem(6));
-}, function (_a) {
-    var outline = _a.outline, focused = _a.focused, notched = _a.notched;
-    return outline && styled_components_1.css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      ", " {\n        border-width: ", ";\n        border-color: currentColor;\n      }\n\n      ", "\n    "], ["\n      ", " {\n        border-width: ", ";\n        border-color: currentColor;\n      }\n\n      ",
-        "\n    "])), exports.FieldSetLayout, utils_1.convertPxToRem(2), !focused &&
-        !notched && styled_components_1.css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n        ", " {\n          color: currentColor;\n        }\n      "], ["\n        ", " {\n          color: currentColor;\n        }\n      "])), exports.LabelLayout));
-}, function (_a) {
-    var disabled = _a.disabled, error = _a.error;
-    return disabled && styled_components_1.css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n      ", " {\n        background: ", ";\n\n        ", "\n      }\n\n      ", " {\n        color: ", ";\n      }\n\n      .react-phone-number-input__input,\n      ", ", ", " {\n        color: ", ";\n        -webkit-text-fill-color: ", ";\n        cursor: not-allowed;\n        opacity: 1;\n      }\n    "], ["\n      ", " {\n        background: ", ";\n\n        ",
-        "\n      }\n\n      ", " {\n        color: ", ";\n      }\n\n      .react-phone-number-input__input,\n      ", ", ", " {\n        color: ", ";\n        -webkit-text-fill-color: ", ";\n        cursor: not-allowed;\n        opacity: 1;\n      }\n    "])), exports.FieldSetLayout, utils_1.colors.dark.base10, error
-        ? styled_components_1.css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n              border-color: ", ";\n            "], ["\n              border-color: ", ";\n            "])), utils_1.colors.orange.base) : styled_components_1.css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n              border-color: ", ";\n            "], ["\n              border-color: ", ";\n            "])), utils_1.colors.grey.base80), exports.LabelLayout, utils_1.colors.grey.base60, Input_styles_1.InputLayout, exports.Suffix, utils_1.colors.grey.base60, utils_1.colors.grey.base60);
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
+const styled_components_1 = __importStar(require("styled-components"));
+const utils_1 = require("../../../utils");
+const Input_styles_1 = require("../input/Input.styles");
+const InputBaseEnum_1 = require("./InputBaseEnum");
+exports.FieldSetLayout = styled_components_1.default.fieldset `
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 0;
+  border: ${(0, utils_1.convertPxToRem)(1)} solid ${utils_1.colors.grey.base80};
+  border-radius: ${utils_1.radius.biggest};
+  z-index: 0;
+  overflow: hidden;
+`;
+exports.LegendLayout = styled_components_1.default.legend `
+  ${utils_1.paragraphs.caption};
+  ${utils_1.ArchivoFont};
+  padding: 0;
+  text-align: left;
+  transition: width 0ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+  height: ${(0, utils_1.convertPxToRem)(2)};
+  width: auto;
+  visibility: hidden;
+  max-width: 0.01px;
+  white-space: nowrap;
+  margin: 0 0 0 ${(0, utils_1.convertPxToRem)(20)};
+
+  > span {
+    display: inline-block;
+    padding: 0 ${(0, utils_1.convertPxToRem)(8)};
+  }
+
+  ${({ isVisible }) => isVisible &&
+    (0, styled_components_1.css) `
+      max-width: ${(0, utils_1.convertPxToRem)(1000)};
+    `}
+`;
+exports.LabelLayout = styled_components_1.default.label `
+  ${utils_1.ArchivoFont};
+  ${utils_1.paragraphs.caption};
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  right: ${({ suffixLength }) => Boolean(suffixLength)
+    ? (0, utils_1.convertPxToRem)(52 + suffixLength * 12)
+    : (0, utils_1.convertPxToRem)(32)};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: ${utils_1.colors.dark.base80};
+  transform: translate(${(0, utils_1.convertPxToRem)(28)}, ${(0, utils_1.convertPxToRem)(16)}) scale(1.1);
+  transform-origin: top left;
+  transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+    transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+  pointer-events: none;
+  line-height: ${(0, utils_1.convertPxToRem)(18)};
+  backface-visibility: hidden;
+  font-smoothing: subpixel-antialiased;
+  display: block;
+  max-width: calc(100% - ${(0, utils_1.convertPxToRem)(48)});
+`;
+exports.Suffix = styled_components_1.default.div `
+  position: absolute;
+  right: ${(0, utils_1.convertPxToRem)(4)};
+  top: ${(0, utils_1.convertPxToRem)(4)};
+  bottom: ${(0, utils_1.convertPxToRem)(4)};
+  display: flex;
+  align-items: center;
+  padding: 0 ${(0, utils_1.convertPxToRem)(16)} 0 ${(0, utils_1.convertPxToRem)(4)};
+  color: ${utils_1.colors.grey.base80};
+
+  & + ${Input_styles_1.InputLayout} {
+    padding-right: ${(0, utils_1.convertPxToRem)(48)};
+  }
+`;
+exports.InsideLayout = styled_components_1.default.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 0;
+
+  > svg {
+    position: absolute;
+    top: 50%;
+    left: ${(0, utils_1.convertPxToRem)(12)};
+    width: ${(0, utils_1.convertPxToRem)(32)};
+    height: ${(0, utils_1.convertPxToRem)(32)};
+    content: '';
+    transform: translateY(-50%);
+    background: white;
+    border-radius: ${utils_1.radius.rounded};
+  }
+
+  ${({ disabled }) => disabled &&
+    (0, styled_components_1.css) `
+      > svg {
+        background: ${utils_1.colors.dark.base10};
+      }
+    `}
+`;
+exports.Layout = styled_components_1.default.div `
+  position: relative;
+  z-index: ${props => props.zIndex || 0};
+  min-height: ${(0, utils_1.convertPxToRem)(50)};
+  
+  ${({ phoneWithFlags }) => phoneWithFlags &&
+    (0, styled_components_1.css) `
+      ${exports.LabelLayout} {
+        transform: translate(${(0, utils_1.convertPxToRem)(60)}, ${(0, utils_1.convertPxToRem)(18)});
+      }
+
+      ${exports.InsideLayout} {
+        > svg {
+          left: initial;
+          right: ${(0, utils_1.convertPxToRem)(12)};
+        }
+      }
+    `}
+  
+  ${({ outline }) => outline === InputBaseEnum_1.InputColors.GREEN
+    ? (0, styled_components_1.css) `
+          color: ${utils_1.colors.green.base};
+        `
+    : outline === InputBaseEnum_1.InputColors.BLUE
+        ? (0, styled_components_1.css) `
+          color: ${utils_1.colors.blue.base60};
+        `
+        : outline === InputBaseEnum_1.InputColors.PINK
+            ? (0, styled_components_1.css) `
+          color: ${utils_1.colors.pink.base};
+        `
+            : outline === InputBaseEnum_1.InputColors.ORANGE &&
+                (0, styled_components_1.css) `
+          color: ${utils_1.colors.orange.base};
+        `}
+  
+  ${({ focused, error, disabled }) => error &&
+    (0, styled_components_1.css) `
+      color: ${utils_1.colors.red.base};
+
+      ${Input_styles_1.InputLayout} {
+        color: ${utils_1.colors.red.base};
+        padding: 0 ${(0, utils_1.convertPxToRem)(56)} 0 ${(0, utils_1.convertPxToRem)(48)};
+      }
+
+      ${exports.FieldSetLayout} {
+        ${!disabled && `border-color: ${utils_1.colors.red.base};`}
+      }
+
+      ${exports.Suffix} {
+        color: ${utils_1.colors.red.base};
+      }
+
+      ${exports.LabelLayout} {
+        color: ${utils_1.colors.red.base};
+        transform: translate(${(0, utils_1.convertPxToRem)(48)}, ${(0, utils_1.convertPxToRem)(16)});
+
+        ${!focused &&
+        (0, styled_components_1.css) `
+          transform: translate(${(0, utils_1.convertPxToRem)(48)}, ${(0, utils_1.convertPxToRem)(16)}, 0);
+        `}
+      }
+    `}
+  
+  ${({ phoneWithFlags, error }) => phoneWithFlags &&
+    error &&
+    (0, styled_components_1.css) `
+      ${exports.LabelLayout} {
+        transform: translate(${(0, utils_1.convertPxToRem)(60)}, ${(0, utils_1.convertPxToRem)(18)});
+      }
+    `}
+  
+  ${({ focused, notched, error }) => (focused || notched) &&
+    (0, styled_components_1.css) `
+      ${exports.FieldSetLayout} {
+        ${!error &&
+        (0, styled_components_1.css) `
+          border-color: ${utils_1.colors.orange.base};
+        `};
+      }
+
+      ${exports.LabelLayout} {
+        overflow: initial;
+        text-overflow: ellipsis;
+        transform: translate(${(0, utils_1.convertPxToRem)(29)}, -${(0, utils_1.convertPxToRem)(6)});
+      }
+    `}
+  
+  ${({ outline, focused, notched }) => outline &&
+    (0, styled_components_1.css) `
+      ${exports.FieldSetLayout} {
+        border-width: ${(0, utils_1.convertPxToRem)(2)};
+        border-color: currentColor;
+      }
+
+      ${!focused &&
+        !notched &&
+        (0, styled_components_1.css) `
+        ${exports.LabelLayout} {
+          color: currentColor;
+        }
+      `}
+    `}
+  
+  ${({ disabled, error }) => disabled &&
+    (0, styled_components_1.css) `
+      ${exports.FieldSetLayout} {
+        background: ${utils_1.colors.dark.base10};
+
+        ${error
+        ? (0, styled_components_1.css) `
+              border-color: ${utils_1.colors.orange.base};
+            `
+        : (0, styled_components_1.css) `
+              border-color: ${utils_1.colors.grey.base80};
+            `}
+      }
+
+      ${exports.LabelLayout} {
+        color: ${utils_1.colors.grey.base60};
+      }
+
+      .react-phone-number-input__input,
+      ${Input_styles_1.InputLayout}, ${exports.Suffix} {
+        color: ${utils_1.colors.grey.base60};
+        -webkit-text-fill-color: ${utils_1.colors.grey.base60};
+        cursor: not-allowed;
+        opacity: 1;
+      }
+    `}
+    }
+`;
 //# sourceMappingURL=InputBase.styles.js.map