@allthings/structured-ticket-form 3.0.2 → 4.0.0

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

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

package/lib/assets/svg/VectorIcon.js

@@ -1,15 +1,18 @@
 "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;
-/** @jsx jsx */
-var react_1 = require("@emotion/react");
-var styles = {
-    svg: (0, react_1.css)({
-        width: '12px',
-        height: '8px',
-    }),
-};
-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" }))); };
+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" }))); };
 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,eAAe;AACf,wCAAyC;AAEzC,IAAM,MAAM,GAAG;IACb,GAAG,EAAE,IAAA,WAAG,EAAC;QACP,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,KAAK;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"}
+{"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"}

package/lib/components/atoms/ErrorMessage.js

@@ -1,61 +1,29 @@
 "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;
-/** @jsx jsx */
-var react_1 = require("@emotion/react");
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var style_1 = require("../../style");
-var styles = {
-    container: (0, react_1.css)({
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        margin: '5px',
-    }),
-    errorTextHead: (0, react_1.css)({
-        color: "".concat(style_1.colors.redMid),
-        fontFamily: 'Roboto',
-        fontStyle: 'normal',
-        fontWeight: 'bold',
-        fontSize: '18px',
-        textAlign: 'center',
-    }),
-    errorText: (0, react_1.css)({
-        fontFamily: 'Roboto',
-        fontStyle: 'normal',
-        fontWeight: 'normal',
-        fontSize: '18px',
-        color: "".concat(style_1.colors.darkBlueIntense, "1"),
-    }),
-    line: (0, react_1.css)({
-        width: '95%',
-        height: '1px',
-        marginBottom: '10px',
-        backgroundColor: "".concat(style_1.colors.lineGray),
-    }),
-    button: (0, react_1.css)({
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        boxShadow: "-1px -1px 6px ".concat(style_1.colors.boxShadowGray, ", 1.5px 1.5px 3px ").concat(style_1.colors.boxShadowDark),
-        backgroundColor: "".concat(style_1.colors.redMid),
-        color: 'white',
-        width: '30%',
-        borderRadius: '8px',
-        fontFamily: 'Roboto',
-        fontStyle: 'normal',
-        fontWeight: 500,
-        fontSize: '18px',
-        padding: '8px',
-        cursor: 'pointer',
-    }),
-};
+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 ErrorMessage = function (_a) {
     var errorTextHead = _a.errorTextHead, errorText = _a.errorText, errorTextButton = _a.errorTextButton, onClick = _a.onClick;
-    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)));
+    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)));
 };
 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,eAAe;AACf,wCAAyC;AAGzC,qCAAgC;AAEhC,IAAM,MAAM,GAAG;IACb,SAAS,EAAE,IAAA,WAAG,EAAC;QACb,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,KAAK;KACd,CAAC;IACF,aAAa,EAAE,IAAA,WAAG,EAAC;QACjB,KAAK,EAAE,UAAG,cAAM,CAAC,MAAM,CAAE;QACzB,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE,QAAQ;QACnB,UAAU,EAAE,MAAM;QAClB,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,QAAQ;KACpB,CAAC;IACF,SAAS,EAAE,IAAA,WAAG,EAAC;QACb,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE,QAAQ;QACnB,UAAU,EAAE,QAAQ;QACpB,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE,UAAG,cAAM,CAAC,eAAe,MAAG;KACpC,CAAC;IACF,IAAI,EAAE,IAAA,WAAG,EAAC;QACR,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,YAAY,EAAE,MAAM;QACpB,eAAe,EAAE,UAAG,cAAM,CAAC,QAAQ,CAAE;KACtC,CAAC;IACF,MAAM,EAAE,IAAA,WAAG,EAAC;QACV,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE,wBAAiB,cAAM,CAAC,aAAa,+BAAqB,cAAM,CAAC,aAAa,CAAE;QAC3F,eAAe,EAAE,UAAG,cAAM,CAAC,MAAM,CAAE;QACnC,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,KAAK;QACZ,YAAY,EAAE,KAAK;QACnB,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE,QAAQ;QACnB,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,MAAM;QAChB,OAAO,EAAE,KAAK;QACd,MAAM,EAAE,SAAS;KAClB,CAAC;CACH,CAAA;AAEM,IAAM,YAAY,GAAgC,UAAC,EAKzD;QAJC,aAAa,mBAAA,EACb,SAAS,eAAA,EACT,eAAe,qBAAA,EACf,OAAO,aAAA;IAEP,OAAO,CACL,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,CAAA;AACH,CAAC,CAAA;AAhBY,QAAA,YAAY,gBAgBxB"}
+{"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"}

package/lib/components/atoms/LanguageSelector.js

@@ -1,4 +1,8 @@
 "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);
@@ -22,153 +26,67 @@ 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;
-/** @jsx jsx */
-/** @jsxFrag React.Fragment */
-var react_1 = require("@emotion/react");
-var react_2 = __importStar(require("react"));
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var assets_1 = require("../../assets");
 var hooks_1 = require("../../hooks");
 var style_1 = require("../../style");
-var styles = {
-    languageContainer: (0, react_1.css)({
-        height: '36px',
-        marginTop: '3px',
-        padding: 0,
-        marginLeft: '20px',
-    }),
-    wrapper: (0, react_1.css)({
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-around',
-        height: '36px',
-    }),
-    h4: (0, react_1.css)({
-        display: 'flex',
-        fontFamily: 'Open Sans',
-        fontStyle: 'normal',
-        fontWeight: 600,
-        fontSize: '14px',
-        color: style_1.colors.lightBlack,
-    }),
-    selectorWrapper: function (isActive) {
-        return (0, react_1.css)({
-            display: 'flex',
-            flex: 1,
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            border: 'medium none',
-            backgroundColor: 'rgb(255, 255, 255)',
-            boxShadow: isActive ? 'rgba(29, 29, 29, 0.125) 1px 1px 3px' : 'none',
-            padding: '0px 5px 0px 5px',
-            position: 'relative',
-            margin: '0px 20px 0px 20px',
-        });
-    },
-    selectContainer: (0, react_1.css)({
-        display: 'flex',
-        flexDirection: 'column',
-        position: 'absolute',
-        top: '60%',
-        right: 0,
-        width: '100%',
-        cursor: 'pointer',
-    }),
-    languageItem: (0, react_1.css)({
-        display: 'flex',
-        flex: 1,
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: '10px 5px 10px 5px',
-        boxShadow: 'rgba(29, 29, 29, 0.125) 1px 1px 3px',
-        color: style_1.colors.lightBlack,
-        fontFamily: 'Open Sans',
-        fontStyle: 'normal',
-        fontWeight: 'normal',
-        fontSize: '13px',
-        backgroundColor: 'rgb(255, 255, 255)',
-        zIndex: 10,
-        cursor: 'pointer',
-        ':hover': {
-            backgroundColor: 'rgb(249, 250, 251)',
-        },
-    }),
-    languageWrapper: (0, react_1.css)({
-        display: 'flex',
-        flex: 1,
-        justifyContent: 'center',
-        cursor: 'pointer',
-        '& p': {
-            fontFamily: 'Open Sans',
-            fontStyle: 'normal',
-            fontWeight: 'normal',
-            fontSize: '13px',
-            textAlign: 'center',
-        },
-    }),
-    vectorWrapper: (0, react_1.css)({
-        width: '15px',
-    }),
-    vectorContainer: (0, react_1.css)({
-        cursor: 'pointer',
-    }),
-    vectorIconRotated: (0, react_1.css)({
-        transform: 'rotate(180deg)',
-        transition: 'transform 0.2s ease-out',
-    }),
-    button: function (isActive) {
-        return (0, react_1.css)({
-            border: 'none',
-            borderRadius: '2px',
-            backgroundColor: isActive
-                ? style_1.colors.activeButtonColor
-                : style_1.colors.deactiveButtonColor,
-            color: isActive ? 'white' : style_1.colors.dark,
-            padding: '10px',
-            fontSize: '12px',
-            cursor: 'pointer',
-            ':hover': {
-                backgroundColor: isActive
-                    ? "".concat(style_1.colors.midBlue, "ff")
-                    : style_1.colors.deactiveButtonColor,
-            },
-        });
-    },
-};
+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 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_2.useState)(false), open = _b[0], setOpen = _b[1];
-    var selectRef = (0, react_2.useRef)(null);
+    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 () {
         setOpen(false);
     });
-    var onValidateRefresh = (0, react_2.useCallback)(function () {
+    var onValidateRefresh = function () {
         if (isActive) {
             onClickButton();
         }
-    }, [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: selectRef },
-                (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.vectorContainer },
-                    (0, react_1.jsx)(assets_1.VectorIcon, null))) : ((0, react_1.jsx)("div", { css: styles.vectorIconRotated },
-                    (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 (e) { return ((0, react_1.jsx)("li", { css: styles.languageItem, key: e.key, onClick: function () {
+    };
+    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 () {
                         setOpen(false);
                         onSelectLanguage(e);
                     } }, e.value)); }))))),
-            (0, react_1.jsx)("button", { css: styles.button(isActive), onClick: onValidateRefresh }, buttonSaveText))));
+            react_1.default.createElement(Button, { isActive: 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.js

@@ -1,80 +1,38 @@
 "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;
-/** @jsx jsx */
-var react_1 = require("@emotion/react");
-var react_2 = require("react");
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var models_1 = require("../../models");
 var style_1 = require("../../style");
-var styles = {
-    container: (0, react_1.css)({
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        flex: 1,
-        height: '35px',
-        color: '#333',
-        backgroundColor: '#f5f5f5',
-        borderLeft: '1px solid',
-        borderRight: '1px solid',
-        borderTop: '1px solid',
-        borderTopLeftRadius: '5px',
-        borderTopRightRadius: '5px',
-        borderColor: style_1.colors.borderSchema,
-        margin: '0px',
-        padding: '0px',
-        position: 'relative',
-    }),
-    buttonContainer: (0, react_1.css)({
-        display: 'flex',
-        flexWrap: 'wrap',
-        padding: '0px',
-        margin: '0px',
-    }),
-    button: function (isActive) {
-        return (0, react_1.css)({
-            display: 'flex',
-            boxSizing: 'border-box',
-            border: 'none',
-            borderBottom: isActive ? '6px solid' : 'none',
-            borderColor: isActive ? style_1.colors.lightBlue : 'none',
-            padding: isActive ? '10px 10px 4px 10px' : '10px 10px 10px 10px',
-            fontWeight: 'bold',
-            fontSize: '14px',
-            cursor: 'pointer',
-        });
-    },
-    preViewButton: (0, react_1.css)({
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: '2px',
-        backgroundColor: style_1.colors.activeButtonColor,
-        color: 'white',
-        padding: '8px',
-        fontSize: '12px',
-        cursor: 'pointer',
-        marginRight: '10px',
-        ':hover': {
-            backgroundColor: "".concat(style_1.colors.midBlue, "ff"),
-        },
-    }),
-};
+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 SchemaHeader = function (_a) {
     var activeTab = _a.activeTab, setActiveTab = _a.setActiveTab, onValidate = _a.onValidate, buttonValidateText = _a.buttonValidateText, buttonTranslatorText = _a.buttonTranslatorText;
-    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')));
+    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')));
 };
 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":"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"}
+{"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"}

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

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