@allthings/structured-ticket-form 4.0.0 → 4.0.2-dev.0

package/lib/assets/svg/VectorIcon.d.ts

@@ -1,2 +1,3 @@
-import React from 'react';
-export declare const VectorIcon: () => React.JSX.Element;
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export declare const VectorIcon: () => jsx.JSX.Element;

package/lib/assets/svg/VectorIcon.js

@@ -1,18 +1,15 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VectorIcon = void 0;
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var Svg = styled_components_1.default.svg(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 12px;\n  height: 8px;\n"], ["\n  width: 12px;\n  height: 8px;\n"])));
-var VectorIcon = function () { return (react_1.default.createElement(Svg, { fill: "none", viewBox: "0 0 12 8", xmlns: "http://www.w3.org/2000/svg" },
-    react_1.default.createElement("path", { d: "M0.250977 0.75L6.00098 7.25L11.751 0.75", stroke: "#979797", strokeLinecap: "round", strokeLinejoin: "round", strokeMiterlimit: "10" }))); };
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var styles = {
+    svg: (0, react_1.css)({
+        height: '8px',
+        width: '12px',
+    }),
+};
+var VectorIcon = function () { return ((0, react_1.jsx)("svg", { css: styles.svg, fill: "none", viewBox: "0 0 12 8", xmlns: "http://www.w3.org/2000/svg" },
+    (0, react_1.jsx)("path", { d: "M0.250977 0.75L6.00098 7.25L11.751 0.75", stroke: "#979797", strokeLinecap: "round", strokeLinejoin: "round", strokeMiterlimit: "10" }))); };
 exports.VectorIcon = VectorIcon;
-var templateObject_1;
 //# sourceMappingURL=VectorIcon.js.map

package/lib/assets/svg/VectorIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"VectorIcon.js","sourceRoot":"","sources":["../../../src/assets/svg/VectorIcon.tsx"],"names":[],"mappings":";;;;;;;;;;AAAA,gDAAyB;AACzB,wEAAsC;AAEtC,IAAM,GAAG,GAAG,2BAAM,CAAC,GAAG,uGAAA,oCAGrB,IAAA,CAAA;AAEM,IAAM,UAAU,GAAG,cAAM,OAAA,CAC9B,8BAAC,GAAG,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B;IACpE,wCACE,CAAC,EAAC,yCAAyC,EAC3C,MAAM,EAAC,SAAS,EAChB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,gBAAgB,EAAC,IAAI,GACrB,CACE,CACP,EAV+B,CAU/B,CAAA;AAVY,QAAA,UAAU,cAUtB"}
+{"version":3,"file":"VectorIcon.js","sourceRoot":"","sources":["../../../src/assets/svg/VectorIcon.tsx"],"names":[],"mappings":";;;AAAA,eAAe;AACf,wCAAyC;AAEzC,IAAM,MAAM,GAAG;IACb,GAAG,EAAE,IAAA,WAAG,EAAC;QACP,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,MAAM;KACd,CAAC;CACH,CAAA;AAEM,IAAM,UAAU,GAAG,cAAM,OAAA,CAC9B,0BACE,GAAG,EAAE,MAAM,CAAC,GAAG,EACf,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,UAAU,EAClB,KAAK,EAAC,4BAA4B;IAElC,2BACE,CAAC,EAAC,yCAAyC,EAC3C,MAAM,EAAC,SAAS,EAChB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,gBAAgB,EAAC,IAAI,GACrB,CACE,CACP,EAf+B,CAe/B,CAAA;AAfY,QAAA,UAAU,cAetB"}

package/lib/components/atoms/ErrorMessage.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { ErrorMessageProps } from "../../models";
-export declare const ErrorMessage: React.FC<ErrorMessageProps>;
+import { IErrorMessageProperties } from "../../models";
+export declare const ErrorMessage: React.FC<IErrorMessageProperties>;

package/lib/components/atoms/ErrorMessage.js

@@ -1,29 +1,61 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorMessage = void 0;
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
 var style_1 = require("../../style");
-var Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin: 5px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin: 5px;\n"])));
-var ErrorTextHead = styled_components_1.default.h4(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  font-family: Roboto;\n  font-style: normal;\n  font-weight: bold;\n  font-size: 18px;\n  text-align: center;\n"], ["\n  color: ", ";\n  font-family: Roboto;\n  font-style: normal;\n  font-weight: bold;\n  font-size: 18px;\n  text-align: center;\n"])), style_1.colors.redMid);
-var ErrorText = styled_components_1.default.p(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-family: Roboto;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 18px;\n  color: ", "1;\n"], ["\n  font-family: Roboto;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 18px;\n  color: ", "1;\n"])), style_1.colors.darkBlueIntense);
-var Line = styled_components_1.default.line(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 95%;\n  height: 1px;\n  margin-bottom: 10px;\n  background-color: ", ";\n"], ["\n  width: 95%;\n  height: 1px;\n  margin-bottom: 10px;\n  background-color: ", ";\n"])), style_1.colors.lineGray);
-var Button = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  box-shadow: -1px -1px 6px ", ",\n    1.5px 1.5px 3px ", ";\n  background-color: ", ";\n  color: white;\n  width: 30%;\n  border-radius: 8px;\n  font-family: Roboto;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 18px;\n  padding: 8px;\n  cursor: pointer;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  box-shadow: -1px -1px 6px ", ",\n    1.5px 1.5px 3px ", ";\n  background-color: ", ";\n  color: white;\n  width: 30%;\n  border-radius: 8px;\n  font-family: Roboto;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 18px;\n  padding: 8px;\n  cursor: pointer;\n"])), style_1.colors.boxShadowGray, style_1.colors.boxShadowDark, style_1.colors.redMid);
+var styles = {
+    button: (0, react_1.css)({
+        alignItems: 'center',
+        backgroundColor: "".concat(style_1.colors.redMid),
+        borderRadius: '8px',
+        boxShadow: "-1px -1px 6px ".concat(style_1.colors.boxShadowGray, ", 1.5px 1.5px 3px ").concat(style_1.colors.boxShadowDark),
+        color: 'white',
+        cursor: 'pointer',
+        display: 'flex',
+        fontFamily: 'Roboto',
+        fontSize: '18px',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        justifyContent: 'center',
+        padding: '8px',
+        width: '30%',
+    }),
+    container: (0, react_1.css)({
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        margin: '5px',
+    }),
+    errorText: (0, react_1.css)({
+        color: "".concat(style_1.colors.darkBlueIntense, "1"),
+        fontFamily: 'Roboto',
+        fontSize: '18px',
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+    }),
+    errorTextHead: (0, react_1.css)({
+        color: "".concat(style_1.colors.redMid),
+        fontFamily: 'Roboto',
+        fontSize: '18px',
+        fontStyle: 'normal',
+        fontWeight: 'bold',
+        textAlign: 'center',
+    }),
+    line: (0, react_1.css)({
+        backgroundColor: "".concat(style_1.colors.lineGray),
+        height: '1px',
+        marginBottom: '10px',
+        width: '95%',
+    }),
+};
 var ErrorMessage = function (_a) {
     var errorTextHead = _a.errorTextHead, errorText = _a.errorText, errorTextButton = _a.errorTextButton, onClick = _a.onClick;
-    return (react_1.default.createElement(Container, null,
-        react_1.default.createElement(ErrorTextHead, null, errorTextHead),
-        react_1.default.createElement(ErrorText, null, errorText),
-        react_1.default.createElement(Line, null),
-        react_1.default.createElement(Button, { onClick: onClick }, errorTextButton)));
+    return ((0, react_1.jsx)("div", { css: styles.container },
+        (0, react_1.jsx)("h4", { css: styles.errorTextHead }, errorTextHead),
+        (0, react_1.jsx)("p", { css: styles.errorText }, errorText),
+        (0, react_1.jsx)("line", { css: styles.line }),
+        (0, react_1.jsx)("div", { css: styles.button, onClick: onClick }, errorTextButton)));
 };
 exports.ErrorMessage = ErrorMessage;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 //# sourceMappingURL=ErrorMessage.js.map

package/lib/components/atoms/ErrorMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorMessage.js","sourceRoot":"","sources":["../../../src/components/atoms/ErrorMessage.tsx"],"names":[],"mappings":";;;;;;;;;;AAAA,gDAAyB;AACzB,wEAAsC;AAEtC,qCAAgC;AAEhC,IAAM,SAAS,GAAG,2BAAM,CAAC,GAAG,4JAAA,yFAK3B,IAAA,CAAA;AAED,IAAM,aAAa,GAAG,2BAAM,CAAC,EAAE,uMAAA,aACpB,EAAa,qHAMvB,KANU,cAAM,CAAC,MAAM,CAMvB,CAAA;AAED,IAAM,SAAS,GAAG,2BAAM,CAAC,CAAC,mLAAA,wGAKf,EAAsB,MAChC,KADU,cAAM,CAAC,eAAe,CAChC,CAAA;AAED,IAAM,IAAI,GAAG,2BAAM,CAAC,IAAI,yJAAA,+EAIF,EAAe,KACpC,KADqB,cAAM,CAAC,QAAQ,CACpC,CAAA;AAED,IAAM,MAAM,GAAG,2BAAM,CAAC,GAAG,0ZAAA,sGAIK,EAAoB,yBAC5B,EAAoB,yBACpB,EAAa,yLAUlC,KAZ6B,cAAM,CAAC,aAAa,EAC5B,cAAM,CAAC,aAAa,EACpB,cAAM,CAAC,MAAM,CAUlC,CAAA;AAEM,IAAM,YAAY,GAAgC,UAAC,EAKzD;QAJC,aAAa,mBAAA,EACb,SAAS,eAAA,EACT,eAAe,qBAAA,EACf,OAAO,aAAA;IAEP,OAAO,CACL,8BAAC,SAAS;QACR,8BAAC,aAAa,QAAE,aAAa,CAAiB;QAC9C,8BAAC,SAAS,QAAE,SAAS,CAAa;QAClC,8BAAC,IAAI,OAAG;QACR,8BAAC,MAAM,IAAC,OAAO,EAAE,OAAO,IAAG,eAAe,CAAU,CAC1C,CACb,CAAA;AACH,CAAC,CAAA;AAdY,QAAA,YAAY,gBAcxB"}
+{"version":3,"file":"ErrorMessage.js","sourceRoot":"","sources":["../../../src/components/atoms/ErrorMessage.tsx"],"names":[],"mappings":";;;AAAA,eAAe;AACf,wCAAyC;AAIzC,qCAAgC;AAEhC,IAAM,MAAM,GAAG;IACb,MAAM,EAAE,IAAA,WAAG,EAAC;QACV,UAAU,EAAE,QAAQ;QACpB,eAAe,EAAE,UAAG,cAAM,CAAC,MAAM,CAAE;QACnC,YAAY,EAAE,KAAK;QACnB,SAAS,EAAE,wBAAiB,cAAM,CAAC,aAAa,+BAAqB,cAAM,CAAC,aAAa,CAAE;QAC3F,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,QAAQ;QACnB,UAAU,EAAE,GAAG;QACf,cAAc,EAAE,QAAQ;QACxB,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,KAAK;KACb,CAAC;IACF,SAAS,EAAE,IAAA,WAAG,EAAC;QACb,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,MAAM,EAAE,KAAK;KACd,CAAC;IACF,SAAS,EAAE,IAAA,WAAG,EAAC;QACb,KAAK,EAAE,UAAG,cAAM,CAAC,eAAe,MAAG;QACnC,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,QAAQ;QACnB,UAAU,EAAE,QAAQ;KACrB,CAAC;IACF,aAAa,EAAE,IAAA,WAAG,EAAC;QACjB,KAAK,EAAE,UAAG,cAAM,CAAC,MAAM,CAAE;QACzB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,QAAQ;QACnB,UAAU,EAAE,MAAM;QAClB,SAAS,EAAE,QAAQ;KACpB,CAAC;IACF,IAAI,EAAE,IAAA,WAAG,EAAC;QACR,eAAe,EAAE,UAAG,cAAM,CAAC,QAAQ,CAAE;QACrC,MAAM,EAAE,KAAK;QACb,YAAY,EAAE,MAAM;QACpB,KAAK,EAAE,KAAK;KACb,CAAC;CACH,CAAA;AAEM,IAAM,YAAY,GAAsC,UAAC,EAK/D;QAJC,aAAa,mBAAA,EACb,SAAS,eAAA,EACT,eAAe,qBAAA,EACf,OAAO,aAAA;IACH,OAAA,CACJ,0BAAK,GAAG,EAAE,MAAM,CAAC,SAAS;QACxB,yBAAI,GAAG,EAAE,MAAM,CAAC,aAAa,IAAG,aAAa,CAAM;QACnD,wBAAG,GAAG,EAAE,MAAM,CAAC,SAAS,IAAG,SAAS,CAAK;QACzC,2BAAM,GAAG,EAAE,MAAM,CAAC,IAAI,GAAI;QAC1B,0BAAK,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,IACtC,eAAe,CACZ,CACF,CACP;AATK,CASL,CAAA;AAdY,QAAA,YAAY,gBAcxB"}

package/lib/components/atoms/LanguageSelector.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { LanguageSelectorProps } from "../../models";
-export declare const LanguageSelector: React.FC<LanguageSelectorProps>;
+import { ILanguageSelectorProperties } from "../../models";
+export declare const LanguageSelector: React.FC<ILanguageSelectorProperties>;

package/lib/components/atoms/LanguageSelector.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;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -26,67 +22,153 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LanguageSelector = void 0;
-var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
+/** @jsx jsx */
+/** @jsxFrag React.Fragment */
+var react_1 = require("@emotion/react");
+var react_2 = __importStar(require("react"));
 var assets_1 = require("../../assets");
 var hooks_1 = require("../../hooks");
 var style_1 = require("../../style");
-var LanguageContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 36px;\n  margin-top: 3px;\n  padding: 0;\n  margin-left: 20px;\n"], ["\n  height: 36px;\n  margin-top: 3px;\n  padding: 0;\n  margin-left: 20px;\n"])));
-var Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-around;\n  height: 36px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-around;\n  height: 36px;\n"])));
-var H4 = styled_components_1.default.h4(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 600;\n  font-size: 14px;\n  color: ", ";\n"], ["\n  display: flex;\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 600;\n  font-size: 14px;\n  color: ", ";\n"])), style_1.colors.lightBlack);
-var SelectorWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  border: medium none;\n  background-color: rgb(255, 255, 255);\n  box-shadow: ", ";\n  padding: 0px 5px 0px 5px;\n  margin: 0 2px 0 2px;\n  position: relative;\n  margin: 0px 20px 0px 20px;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  border: medium none;\n  background-color: rgb(255, 255, 255);\n  box-shadow: ", ";\n  padding: 0px 5px 0px 5px;\n  margin: 0 2px 0 2px;\n  position: relative;\n  margin: 0px 20px 0px 20px;\n"])), function (_a) {
-    var isActive = _a.isActive;
-    return isActive && 'rgba(29, 29, 29, 0.125) 1px 1px 3px';
-});
-var SelectContainer = styled_components_1.default.ul(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  top: 60%;\n  right: 0;\n  width: 100%;\n  cursor: pointer;\n"], ["\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  top: 60%;\n  right: 0;\n  width: 100%;\n  cursor: pointer;\n"])));
-var LanguageItem = styled_components_1.default.li(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 10px 5px 10px 5px;\n  box-shadow: rgba(29, 29, 29, 0.125) 1px 1px 3px;\n  color: ", ";\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: normal;\n  font-size: 13px;\n  background-color: rgb(255, 255, 255);\n  z-index: 10;\n  cursor: pointer;\n  :hover {\n    background-color: rgb(249, 250, 251);\n  }\n"], ["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 10px 5px 10px 5px;\n  box-shadow: rgba(29, 29, 29, 0.125) 1px 1px 3px;\n  color: ", ";\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: normal;\n  font-size: 13px;\n  background-color: rgb(255, 255, 255);\n  z-index: 10;\n  cursor: pointer;\n  :hover {\n    background-color: rgb(249, 250, 251);\n  }\n"])), style_1.colors.lightBlack);
-var LanguageWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  cursor: pointer;\n  p {\n    color: ", ";\n    font-family: 'Open Sans';\n    font-style: normal;\n    font-weight: normal;\n    font-size: 13px;\n    text-align: center;\n  }\n"], ["\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  cursor: pointer;\n  p {\n    color: ", ";\n    font-family: 'Open Sans';\n    font-style: normal;\n    font-weight: normal;\n    font-size: 13px;\n    text-align: center;\n  }\n"])), style_1.colors.lightBlack);
-var VectorWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 15px;\n"], ["\n  width: 15px;\n"])));
-var VectorContainer = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
-var VectorIconRotated = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  transform: rotate(180deg);\n  transition: transform 0.2s ease-out;\n"], ["\n  transform: rotate(180deg);\n  transition: transform 0.2s ease-out;\n"])));
-var Button = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  border-radius: 2px;\n  background-color: ", ";\n  color: ", ";\n  padding: 10px;\n  font-size: 12px;\n  cursor: pointer;\n  :hover {\n    background-color: ", ";\n  }\n"], ["\n  border-radius: 2px;\n  background-color: ", ";\n  color: ", ";\n  padding: 10px;\n  font-size: 12px;\n  cursor: pointer;\n  :hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
-    var isActive = _a.isActive;
-    return isActive ? "".concat(style_1.colors.activeButtonColor) : "".concat(style_1.colors.deactiveButtonColor);
-}, function (_a) {
-    var isActive = _a.isActive;
-    return (isActive ? 'white' : "".concat(style_1.colors.dark));
-}, function (_a) {
-    var isActive = _a.isActive;
-    return isActive ? "".concat(style_1.colors.midBlue, "ff") : "".concat(style_1.colors.deactiveButtonColor);
-});
+var styles = {
+    button: function (isActive) {
+        return (0, react_1.css)({
+            ':hover': {
+                backgroundColor: isActive
+                    ? "".concat(style_1.colors.midBlue, "ff")
+                    : style_1.colors.deactiveButtonColor,
+            },
+            backgroundColor: isActive
+                ? style_1.colors.activeButtonColor
+                : style_1.colors.deactiveButtonColor,
+            border: 'none',
+            borderRadius: '2px',
+            color: isActive ? 'white' : style_1.colors.dark,
+            cursor: 'pointer',
+            fontSize: '12px',
+            padding: '10px',
+        });
+    },
+    h4: (0, react_1.css)({
+        color: style_1.colors.lightBlack,
+        display: 'flex',
+        fontFamily: 'Open Sans',
+        fontSize: '14px',
+        fontStyle: 'normal',
+        fontWeight: 600,
+    }),
+    languageContainer: (0, react_1.css)({
+        height: '36px',
+        marginLeft: '20px',
+        marginTop: '3px',
+        padding: 0,
+    }),
+    languageItem: (0, react_1.css)({
+        ':hover': {
+            backgroundColor: 'rgb(249, 250, 251)',
+        },
+        alignItems: 'center',
+        backgroundColor: 'rgb(255, 255, 255)',
+        boxShadow: 'rgba(29, 29, 29, 0.125) 1px 1px 3px',
+        color: style_1.colors.lightBlack,
+        cursor: 'pointer',
+        display: 'flex',
+        flex: 1,
+        flexDirection: 'column',
+        fontFamily: 'Open Sans',
+        fontSize: '13px',
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+        justifyContent: 'center',
+        padding: '10px 5px 10px 5px',
+        zIndex: 10,
+    }),
+    languageWrapper: (0, react_1.css)({
+        '& p': {
+            fontFamily: 'Open Sans',
+            fontSize: '13px',
+            fontStyle: 'normal',
+            fontWeight: 'normal',
+            textAlign: 'center',
+        },
+        cursor: 'pointer',
+        display: 'flex',
+        flex: 1,
+        justifyContent: 'center',
+    }),
+    selectContainer: (0, react_1.css)({
+        cursor: 'pointer',
+        display: 'flex',
+        flexDirection: 'column',
+        position: 'absolute',
+        right: 0,
+        top: '60%',
+        width: '100%',
+    }),
+    selectorWrapper: function (isActive) {
+        return (0, react_1.css)({
+            alignItems: 'center',
+            backgroundColor: 'rgb(255, 255, 255)',
+            border: 'medium none',
+            boxShadow: isActive ? 'rgba(29, 29, 29, 0.125) 1px 1px 3px' : 'none',
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            margin: '0px 20px 0px 20px',
+            padding: '0px 5px 0px 5px',
+            position: 'relative',
+        });
+    },
+    vectorContainer: (0, react_1.css)({
+        cursor: 'pointer',
+    }),
+    vectorIconRotated: (0, react_1.css)({
+        transform: 'rotate(180deg)',
+        transition: 'transform 0.2s ease-out',
+    }),
+    vectorWrapper: (0, react_1.css)({
+        width: '15px',
+    }),
+    wrapper: (0, react_1.css)({
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'row',
+        height: '36px',
+        justifyContent: 'space-around',
+    }),
+};
 var LanguageSelector = function (_a) {
     var languageDisplay = _a.languageDisplay, selectedLanguage = _a.selectedLanguage, onSelectLanguage = _a.onSelectLanguage, isActive = _a.isActive, buttonSaveText = _a.buttonSaveText, onClickButton = _a.onClickButton, headerLanguageSelectorText = _a.headerLanguageSelectorText;
-    var _b = (0, react_1.useState)(false), open = _b[0], setOpen = _b[1];
-    var selectRef = (0, react_1.useRef)(null);
-    (0, hooks_1.useOnClickOutside)(selectRef, function () {
+    var _b = (0, react_2.useState)(false), open = _b[0], setOpen = _b[1];
+    var selectReference = (0, react_2.useRef)(null);
+    (0, hooks_1.useOnClickOutside)(selectReference, function () {
         setOpen(false);
     });
-    var onValidateRefresh = function () {
+    var onValidateRefresh = (0, react_2.useCallback)(function () {
         if (isActive) {
             onClickButton();
         }
-    };
-    return (react_1.default.createElement(LanguageContainer, null,
-        react_1.default.createElement(Wrapper, null,
-            react_1.default.createElement(H4, null, headerLanguageSelectorText || 'Preview Language: '),
-            react_1.default.createElement(SelectorWrapper, { isActive: open, onClick: function () { return setOpen(!open); }, ref: selectRef },
-                react_1.default.createElement(VectorWrapper, null),
-                react_1.default.createElement(LanguageWrapper, null,
-                    react_1.default.createElement("p", null, selectedLanguage.value)),
-                react_1.default.createElement(VectorWrapper, null, !open ? (react_1.default.createElement(VectorContainer, null,
-                    react_1.default.createElement(assets_1.VectorIcon, null))) : (react_1.default.createElement(VectorIconRotated, null,
-                    react_1.default.createElement(assets_1.VectorIcon, null)))),
-                react_1.default.createElement(react_1.default.Fragment, null, open && (react_1.default.createElement(SelectContainer, null, languageDisplay.language.map(function (e) { return (react_1.default.createElement(LanguageItem, { key: e.key, onClick: function () {
+    }, [isActive, onClickButton]);
+    var handleOpen = (0, react_2.useCallback)(function () {
+        setOpen(!open);
+    }, [setOpen, open]);
+    return ((0, react_1.jsx)("div", { css: styles.languageContainer },
+        (0, react_1.jsx)("div", { css: styles.wrapper },
+            (0, react_1.jsx)("h4", { css: styles.h4 }, headerLanguageSelectorText || 'Preview Language: '),
+            (0, react_1.jsx)("div", { css: styles.selectorWrapper(open), onClick: handleOpen, ref: selectReference },
+                (0, react_1.jsx)("div", { css: styles.vectorWrapper }),
+                (0, react_1.jsx)("div", { css: styles.languageWrapper },
+                    (0, react_1.jsx)("p", null, selectedLanguage.value)),
+                (0, react_1.jsx)("div", { css: styles.vectorWrapper }, open ? ((0, react_1.jsx)("div", { css: styles.vectorIconRotated },
+                    (0, react_1.jsx)(assets_1.VectorIcon, null))) : ((0, react_1.jsx)("div", { css: styles.vectorContainer },
+                    (0, react_1.jsx)(assets_1.VectorIcon, null)))),
+                (0, react_1.jsx)(react_2.default.Fragment, null, open && ((0, react_1.jsx)("ul", { css: styles.selectContainer }, languageDisplay.language.map(function (language) { return ((0, react_1.jsx)("li", { css: styles.languageItem, key: language.key, onClick: function () {
                         setOpen(false);
-                        onSelectLanguage(e);
-                    } }, e.value)); }))))),
-            react_1.default.createElement(Button, { isActive: isActive, onClick: onValidateRefresh }, buttonSaveText))));
+                        onSelectLanguage(language);
+                    } }, language.value)); }))))),
+            (0, react_1.jsx)("button", { css: styles.button(isActive), onClick: onValidateRefresh }, buttonSaveText))));
 };
 exports.LanguageSelector = LanguageSelector;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
 //# sourceMappingURL=LanguageSelector.js.map

package/lib/components/atoms/LanguageSelector.js.map

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

package/lib/components/atoms/SchemaHeader.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { SchemaHeaderProps } from "../../models";
-export declare const SchemaHeader: React.FC<SchemaHeaderProps>;
+import { ISchemaHeaderProperties } from "../../models";
+export declare const SchemaHeader: React.FC<ISchemaHeaderProperties>;

package/lib/components/atoms/SchemaHeader.js

@@ -1,38 +1,81 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SchemaHeader = void 0;
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var react_2 = require("react");
 var models_1 = require("../../models");
 var style_1 = require("../../style");
-var Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex: 1;\n  height: 35px;\n  color: #333;\n  background-color: #f5f5f5;\n  border-left: 1px solid;\n  border-right: 1px solid;\n  border-top: 1px solid;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  border-color: ", ";\n  margin: 0px;\n  padding: 0px;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex: 1;\n  height: 35px;\n  color: #333;\n  background-color: #f5f5f5;\n  border-left: 1px solid;\n  border-right: 1px solid;\n  border-top: 1px solid;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  border-color: ", ";\n  margin: 0px;\n  padding: 0px;\n  position: relative;\n"])), style_1.colors.borderSchema);
-var ButtonContainer = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0px;\n  margin: 0px;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0px;\n  margin: 0px;\n"])));
-var Button = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  box-sizing: border-box;\n  border-bottom: ", ";\n  border-color: ", ";\n  padding: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  cursor: pointer;\n"], ["\n  display: flex;\n  box-sizing: border-box;\n  border-bottom: ", ";\n  border-color: ", ";\n  padding: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  cursor: pointer;\n"])), function (_a) {
-    var isActive = _a.isActive;
-    return isActive && '6px solid';
-}, function (_a) {
-    var isActive = _a.isActive;
-    return isActive && style_1.colors.lightBlue;
-}, function (_a) {
-    var isActive = _a.isActive;
-    return isActive ? '10px 10px 4px 10px' : '10px 10px 10px 10px';
-});
-var PreViewButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 2px;\n  background-color: ", ";\n  color: white;\n  padding: 8px;\n  font-size: 12px;\n  cursor: pointer;\n  margin-right: 10px;\n  :hover {\n    background-color: ", "ff;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 2px;\n  background-color: ", ";\n  color: white;\n  padding: 8px;\n  font-size: 12px;\n  cursor: pointer;\n  margin-right: 10px;\n  :hover {\n    background-color: ", "ff;\n  }\n"])), style_1.colors.activeButtonColor, style_1.colors.midBlue);
+var styles = {
+    button: function (isActive) {
+        return (0, react_1.css)({
+            background: 'none',
+            border: 'none',
+            borderBottom: isActive ? '6px solid' : 'none',
+            borderColor: isActive ? style_1.colors.lightBlue : 'none',
+            boxSizing: 'border-box',
+            cursor: 'pointer',
+            display: 'flex',
+            fontSize: '14px',
+            fontWeight: 'bold',
+            padding: isActive ? '10px 10px 4px 10px' : '10px 10px 10px 10px',
+        });
+    },
+    buttonContainer: (0, react_1.css)({
+        display: 'flex',
+        flexWrap: 'wrap',
+        margin: '0px',
+        padding: '0px',
+    }),
+    container: (0, react_1.css)({
+        alignItems: 'center',
+        backgroundColor: '#f5f5f5',
+        borderColor: style_1.colors.borderSchema,
+        borderLeft: '1px solid',
+        borderRight: '1px solid',
+        borderTop: '1px solid',
+        borderTopLeftRadius: '5px',
+        borderTopRightRadius: '5px',
+        color: '#333',
+        display: 'flex',
+        flex: 1,
+        height: '35px',
+        justifyContent: 'space-between',
+        margin: '0px',
+        padding: '0px',
+        position: 'relative',
+    }),
+    preViewButton: (0, react_1.css)({
+        ':hover': {
+            backgroundColor: "".concat(style_1.colors.midBlue, "ff"),
+        },
+        alignItems: 'center',
+        backgroundColor: style_1.colors.activeButtonColor,
+        borderRadius: '2px',
+        color: 'white',
+        cursor: 'pointer',
+        display: 'flex',
+        fontSize: '12px',
+        justifyContent: 'center',
+        marginRight: '10px',
+        padding: '8px',
+    }),
+};
 var SchemaHeader = function (_a) {
     var activeTab = _a.activeTab, setActiveTab = _a.setActiveTab, onValidate = _a.onValidate, buttonValidateText = _a.buttonValidateText, buttonTranslatorText = _a.buttonTranslatorText;
-    return (react_1.default.createElement(Container, null,
-        react_1.default.createElement(ButtonContainer, null,
-            react_1.default.createElement(Button, { isActive: activeTab === models_1.EditorTab.JSON, onClick: function () { return setActiveTab(models_1.EditorTab.JSON); } }, "JSONSchema"),
-            react_1.default.createElement(Button, { isActive: activeTab === models_1.EditorTab.TRANSLATION, onClick: function () { return setActiveTab(models_1.EditorTab.TRANSLATION); } }, buttonTranslatorText || 'Translator')),
-        react_1.default.createElement(PreViewButton, { onClick: onValidate }, buttonValidateText || 'Validate')));
+    var isActiveJSONSchema = activeTab === models_1.EditorTab.JSON;
+    var isActiveTranslator = activeTab === models_1.EditorTab.TRANSLATION;
+    var onJSONSchemaClick = (0, react_2.useCallback)(function () {
+        setActiveTab(models_1.EditorTab.JSON);
+    }, [setActiveTab]);
+    var onTranslatorClick = (0, react_2.useCallback)(function () {
+        setActiveTab(models_1.EditorTab.TRANSLATION);
+    }, [setActiveTab]);
+    return ((0, react_1.jsx)("div", { css: styles.container },
+        (0, react_1.jsx)("ul", { css: styles.buttonContainer },
+            (0, react_1.jsx)("button", { css: styles.button(isActiveJSONSchema), onClick: onJSONSchemaClick }, "JSONSchema"),
+            (0, react_1.jsx)("button", { css: styles.button(isActiveTranslator), onClick: onTranslatorClick }, buttonTranslatorText || 'Translator')),
+        (0, react_1.jsx)("div", { css: styles.preViewButton, onClick: onValidate }, buttonValidateText || 'Validate')));
 };
 exports.SchemaHeader = SchemaHeader;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 //# sourceMappingURL=SchemaHeader.js.map

package/lib/components/atoms/SchemaHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"SchemaHeader.js","sourceRoot":"","sources":["../../../src/components/atoms/SchemaHeader.tsx"],"names":[],"mappings":";;;;;;;;;;AAAA,gDAAyB;AACzB,wEAAsC;AACtC,uCAAsE;AACtE,qCAAgC;AAEhC,IAAM,SAAS,GAAG,2BAAM,CAAC,GAAG,gcAAA,8TAaV,EAAmB,6DAIpC,KAJiB,cAAM,CAAC,YAAY,CAIpC,CAAA;AAED,IAAM,eAAe,GAAG,2BAAM,CAAC,EAAE,8IAAA,2EAKhC,IAAA,CAAA;AAED,IAAM,MAAM,GAAG,2BAAM,CAAC,GAAG,mPAAe,kEAGrB,EAAyC,qBAC1C,EAA8C,gBACnD,EAC8C,mEAI1D,KAPkB,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,QAAQ,IAAI,WAAW;AAAvB,CAAuB,EAC1C,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,QAAQ,IAAI,cAAM,CAAC,SAAS;AAA5B,CAA4B,EACnD,UAAC,EAAY;QAAV,QAAQ,cAAA;IACpB,OAAA,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,qBAAqB;AAAvD,CAAuD,CAI1D,CAAA;AACD,IAAM,aAAa,GAAG,2BAAM,CAAC,GAAG,gVAAA,qHAKV,EAAwB,wIAOtB,EAAc,YAErC,KATqB,cAAM,CAAC,iBAAiB,EAOtB,cAAM,CAAC,OAAO,CAErC,CAAA;AAEM,IAAM,YAAY,GAAgC,UAAC,EAMzD;QALC,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,UAAU,gBAAA,EACV,kBAAkB,wBAAA,EAClB,oBAAoB,0BAAA;IAEpB,OAAO,CACL,8BAAC,SAAS;QACR,8BAAC,eAAe;YACd,8BAAC,MAAM,IACL,QAAQ,EAAE,SAAS,KAAK,kBAAS,CAAC,IAAI,EACtC,OAAO,EAAE,cAAM,OAAA,YAAY,CAAC,kBAAS,CAAC,IAAI,CAAC,EAA5B,CAA4B,iBAGpC;YACT,8BAAC,MAAM,IACL,QAAQ,EAAE,SAAS,KAAK,kBAAS,CAAC,WAAW,EAC7C,OAAO,EAAE,cAAM,OAAA,YAAY,CAAC,kBAAS,CAAC,WAAW,CAAC,EAAnC,CAAmC,IAEjD,oBAAoB,IAAI,YAAY,CAC9B,CACO;QAClB,8BAAC,aAAa,IAAC,OAAO,EAAE,UAAU,IAC/B,kBAAkB,IAAI,UAAU,CACnB,CACN,CACb,CAAA;AACH,CAAC,CAAA;AA5BY,QAAA,YAAY,gBA4BxB"}
+{"version":3,"file":"SchemaHeader.js","sourceRoot":"","sources":["../../../src/components/atoms/SchemaHeader.tsx"],"names":[],"mappings":"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"}

package/lib/components/atoms/index.d.ts

@@ -1,3 +1,3 @@
+export * from './ErrorMessage';
 export * from './LanguageSelector';
 export * from './SchemaHeader';
-export * from './ErrorMessage';

package/lib/components/atoms/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ErrorMessage"), exports);
 __exportStar(require("./LanguageSelector"), exports);
 __exportStar(require("./SchemaHeader"), exports);
-__exportStar(require("./ErrorMessage"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/atoms/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/atoms/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,qDAAkC;AAClC,iDAA8B;AAC9B,iDAA8B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/atoms/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,iDAA8B;AAC9B,qDAAkC;AAClC,iDAA8B"}

package/lib/components/molecules/CustomForm.d.ts

@@ -1,3 +1,4 @@
-import React from 'react';
-import { CustomFormProps } from "../../models";
-export declare function CustomForm<T>(props: CustomFormProps<T>): React.JSX.Element;
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { ICustomFormProperties } from "../../models";
+export declare function CustomForm<T>(properties: ICustomFormProperties<T>): jsx.JSX.Element;