npm - oolib - Versions diffs - 2.150.5 → 2.152.0 - Mend

oolib 2.150.5 → 2.152.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/dist/v2/components/TextInputs/derivedComps/URLInput.js ADDED Viewed

@@ -0,0 +1,129 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.URLInput = void 0;
+var react_1 = __importDefault(require("react"));
+var __1 = require("..");
+var URLInput = function (_a) {
+    var _b = _a.routesAreValidInputs, routesAreValidInputs = _b === void 0 ? false : _b, //if we want react route declarations to be considered as 'valid' then set this to true
+    validationPlugin = _a.validationPlugin, passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, content = _a.content, props = __rest(_a, ["routesAreValidInputs", "validationPlugin", "passValidationErrorToFormValidation", "content"]);
+    var handleValidation = function (value) { return __awaiter(void 0, void 0, void 0, function () {
+        var pluginResponse, successObj, response, successObj, err_1, successObj, errorObj;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!validationPlugin) return [3 /*break*/, 2];
+                    return [4 /*yield*/, validationPlugin({
+                            value: value,
+                            content: content,
+                            passValidationErrorToFormValidation: passValidationErrorToFormValidation,
+                        })];
+                case 1:
+                    pluginResponse = _a.sent();
+                    if (pluginResponse)
+                        return [2 /*return*/, pluginResponse];
+                    _a.label = 2;
+                case 2:
+                    //else
+                    //if routesAreValidInputs, then first validate for a route
+                    if (routesAreValidInputs && value.substring(0, 1) === "/") {
+                        successObj = { type: "success", msg: "valid route" };
+                        if (passValidationErrorToFormValidation)
+                            passValidationErrorToFormValidation(successObj.type);
+                        return [2 /*return*/, successObj];
+                    }
+                    //else validate for a url
+                    if (!/^https?:\/\//i.test(value)) {
+                        value = "https://" + value;
+                    }
+                    _a.label = 3;
+                case 3:
+                    _a.trys.push([3, 5, , 6]);
+                    return [4 /*yield*/, fetch(value)];
+                case 4:
+                    response = _a.sent();
+                    if (response.status !== 200)
+                        throw new Error("");
+                    successObj = { type: "success", msg: "valid url" };
+                    if (passValidationErrorToFormValidation)
+                        passValidationErrorToFormValidation(successObj.type);
+                    return [2 /*return*/, successObj];
+                case 5:
+                    err_1 = _a.sent();
+                    if (/[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/gi.test(value)) {
+                        successObj = { type: "success", msg: "valid url" };
+                        if (passValidationErrorToFormValidation)
+                            passValidationErrorToFormValidation(successObj.type);
+                        return [2 /*return*/, successObj];
+                    }
+                    errorObj = { type: "error", msg: "Enter a valid url..." };
+                    if (passValidationErrorToFormValidation)
+                        passValidationErrorToFormValidation(errorObj.type);
+                    return [2 /*return*/, errorObj];
+                case 6: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (react_1.default.createElement(__1.TextInput, __assign({ type: "url", handleValidation: handleValidation, placeholder: "Enter a valid url..." }, props)));
+};
+exports.URLInput = URLInput;

package/dist/v2/components/TextInputs/index.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
-export function TextInput({ id, invert, disabled, icon, type, placeholder, value, onChange, onFocus, onBlur, readOnly, iconOnClick, iconAfter, handleValidation, validateOnMount, actionBtn, clearBtn, className, maxLength, maxNumLimiter: DEPRECATED_maxNumLimiter, forceFocus, validateOnlyOnBlur, validationStatus: _validationStatus, displayValidationMsg, content, passValidationErrorToFormValidation, plugin, }: {
+export function TextInput({ S, id, invert, disabled, icon, type, placeholder, value, onChange, onFocus, onBlur, readOnly, iconOnClick, iconAfter, handleValidation, validateOnMount, actionBtn, clearBtn, className, maxLength, maxNumLimiter: DEPRECATED_maxNumLimiter, forceFocus, validateOnlyOnBlur, validationStatus: _validationStatus, displayValidationMsg, content, passValidationErrorToFormValidation, plugin, }: {
+    S: any;
     id: any;
     invert: any;
     disabled: any;
@@ -27,26 +28,10 @@ export function TextInput({ id, invert, disabled, icon, type, placeholder, value
     passValidationErrorToFormValidation: any;
     plugin: any;
 }, ...args: any[]): React.JSX.Element;
-export function PasswordInput({ ...props }: {
-    [x: string]: any;
-}): React.JSX.Element;
-export function EmailInput({ passValidationErrorToFormValidation, ...props }: {
-    [x: string]: any;
-    passValidationErrorToFormValidation: any;
-}): React.JSX.Element;
-export function PhoneInput({ passValidationErrorToFormValidation, ...props }: {
-    [x: string]: any;
-    passValidationErrorToFormValidation: any;
-}): React.JSX.Element;
-export function URLInput({ routesAreValidInputs, validationPlugin, passValidationErrorToFormValidation, content, ...props }: {
-    [x: string]: any;
-    routesAreValidInputs?: boolean;
-    validationPlugin: any;
-    passValidationErrorToFormValidation: any;
-    content: any;
-}): React.JSX.Element;
-export function NumberInput({ passValidationErrorToFormValidation, ...props }: {
-    [x: string]: any;
-    passValidationErrorToFormValidation: any;
-}): React.JSX.Element;
 import React from "react";
+import { EmailInput } from "./derivedComps/EmailInput";
+import { NumberInput } from "./derivedComps/NumberInput";
+import { PhoneInput } from "./derivedComps/PhoneInput";
+import { PasswordInput } from "./derivedComps/PasswordInput";
+import { URLInput } from "./derivedComps/URLInput";
+export { EmailInput, NumberInput, PhoneInput, PasswordInput, URLInput };

package/dist/v2/components/TextInputs/index.js CHANGED Viewed

@@ -69,34 +69,36 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NumberInput = exports.URLInput = exports.PhoneInput = exports.EmailInput = exports.PasswordInput = exports.TextInput = void 0;
+exports.URLInput = exports.PasswordInput = exports.PhoneInput = exports.NumberInput = exports.EmailInput = exports.TextInput = void 0;
 var react_1 = __importStar(require("react"));
 var styled_components_1 = require("styled-components");
 var BlockLabel_1 = require("../BlockLabel");
 var LoadersAndProgress_1 = require("../../../components/LoadersAndProgress");
-var OKELink_1 = require("../../../components/OKELink");
+var OKELink_1 = require("../OKELink");
 var _EXPORTS_1 = require("../../../utils/_EXPORTS");
 var utilsOolib_1 = require("../../../utilsOolib");
 var themes_1 = require("../../themes");
-var Buttons_1 = require("../Buttons");
 var Typo2_1 = require("../Typo2");
 var index_styled_1 = require("./index.styled");
 var DisplayIcon_1 = require("../../../utils/comps/DisplayIcon");
+var EmailInput_1 = require("./derivedComps/EmailInput");
+Object.defineProperty(exports, "EmailInput", { enumerable: true, get: function () { return EmailInput_1.EmailInput; } });
+var PasswordInput_1 = require("./derivedComps/PasswordInput");
+Object.defineProperty(exports, "PasswordInput", { enumerable: true, get: function () { return PasswordInput_1.PasswordInput; } });
+var URLInput_1 = require("./derivedComps/URLInput");
+Object.defineProperty(exports, "URLInput", { enumerable: true, get: function () { return URLInput_1.URLInput; } });
+var NumberInput_1 = require("./derivedComps/NumberInput");
+Object.defineProperty(exports, "NumberInput", { enumerable: true, get: function () { return NumberInput_1.NumberInput; } });
+var PhoneInput_1 = require("./derivedComps/PhoneInput");
+Object.defineProperty(exports, "PhoneInput", { enumerable: true, get: function () { return PhoneInput_1.PhoneInput; } });
+var ClearButton_1 = require("../Buttons/derivedComps/ClearButton");
+var ActionButton_1 = require("../Buttons/derivedComps/ActionButton");
+var icons_1 = require("../../../icons");
+var BadgeVetted = icons_1.icons.BadgeVetted;
 function TextInput(_a) {
     var _this = this;
-    var id = _a.id, invert = _a.invert, disabled = _a.disabled, icon = _a.icon, type = _a.type, _b = _a.placeholder, placeholder = _b === void 0 ? "Enter Text..." : _b, _c = _a.value, value = _c === void 0 ? "" : _c, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, readOnly = _a.readOnly, iconOnClick = _a.iconOnClick, iconAfter = _a.iconAfter, handleValidation = _a.handleValidation, _d = _a.validateOnMount, validateOnMount = _d === void 0 ? true : _d, // i think it makes sense to always run validation the minute the comp mounts, but we will see if this has sideeffects
+    var S = _a.S, id = _a.id, invert = _a.invert, disabled = _a.disabled, icon = _a.icon, type = _a.type, _b = _a.placeholder, placeholder = _b === void 0 ? "Enter Text..." : _b, _c = _a.value, value = _c === void 0 ? "" : _c, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, readOnly = _a.readOnly, iconOnClick = _a.iconOnClick, iconAfter = _a.iconAfter, handleValidation = _a.handleValidation, _d = _a.validateOnMount, validateOnMount = _d === void 0 ? true : _d, // i think it makes sense to always run validation the minute the comp mounts, but we will see if this has sideeffects
     actionBtn = _a.actionBtn, clearBtn = _a.clearBtn, className = _a.className, maxLength = _a.maxLength, DEPRECATED_maxNumLimiter = _a.maxNumLimiter, forceFocus = _a.forceFocus, //sometimes, when some other elem is clicked, we wanna trigger focus on the textinput. eg. when on mobile, the search icon is clicked on the listingpage
     _e = _a.validateOnlyOnBlur, //sometimes, when some other elem is clicked, we wanna trigger focus on the textinput. eg. when on mobile, the search icon is clicked on the listingpage
     validateOnlyOnBlur = _e === void 0 ? false : _e, //for example, in the login form we want validation to only run, once the text input is blurred. else it can be irritating
@@ -109,6 +111,7 @@ function TextInput(_a) {
     }, [_validationStatus]);
     var actionBtnEnabaled = !!value && (type !== "url" ? true : (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "success");
     var clearBtnEnabled = !!value && (type !== "url" ? true : (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "success");
+    var size = S ? "S" : "M";
     var handleValidate = function (e, onBlur) { return __awaiter(_this, void 0, void 0, function () {
         var value, res, validationPlugin, pluginResponse;
         return __generator(this, function (_a) {
@@ -176,178 +179,30 @@ function TextInput(_a) {
         forceFocus && inputRef.current && inputRef.current.focus();
     }, [forceFocus]);
     var localize = (0, utilsOolib_1.useLocale)();
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: className },
-            react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
-            readOnly ? (react_1.default.createElement(Typo2_1.UI_BODY_SM, null, type === "password" ? "********" : value)) : (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(index_styled_1.InputContainerStyled, { type: type, disabled: disabled, iconAfter: iconAfter, onClick: function () { return inputRef.current.focus(); } },
-                    icon && (react_1.default.createElement(DisplayIcon_1.DisplayIcon, { icon: icon, color: disabled ? themes_1.colors.grey40 : themes_1.colors.grey80, size: 16, onClick: !disabled ? iconOnClick || null : undefined })),
-                    react_1.default.createElement(index_styled_1.InputStyled, { ref: inputRef, className: "UI_BODY_SM", id: id, type: type, name: type, disabled: disabled, placeholder: localize(placeholder), value: value, onChange: handleOnChange, maxLength: maxLength || DEPRECATED_maxNumLimiter, onBlur: validateOnlyOnBlur ? function (e) { return handleValidate(e, onBlur); } : onBlur, onFocus: onFocus, autoComplete: "off" }),
-                    validationStatus === "loading" && (react_1.default.createElement("div", null,
-                        react_1.default.createElement(LoadersAndProgress_1.LoaderCircle, { S: true, invert: invert }))),
-                    clearBtn && clearBtnEnabled && (react_1.default.createElement(index_styled_1.ClearButtonStyled, { onClick: function () { return onChange(id, ""); } },
-                        react_1.default.createElement(Typo2_1.UI_CAPTION, null, localize((clearBtn === null || clearBtn === void 0 ? void 0 : clearBtn.text) || "clear")))),
-                    actionBtn && (react_1.default.createElement(index_styled_1.ButtonPrimaryStyled, { S: true, value: actionBtn.text, invert: actionBtn.invert, onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, className: "UI_CAPTION" },
-                        react_1.default.createElement(Typo2_1.UI_CAPTION, null, localize((actionBtn === null || actionBtn === void 0 ? void 0 : actionBtn.text) || "action"))))),
-                displayValidationMsg && (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.msg) && (react_1.default.createElement(index_styled_1.MsgContainerStyled, { status: validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type },
-                    (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "error" && (react_1.default.createElement(DisplayIcon_1.DisplayIcon, { size: 12, icon: "WarningDiamond", weight: "fill", color: themes_1.colors.red })),
-                    react_1.default.createElement(Typo2_1.UI_HELPTEXT, null,
-                        validationStatus.msg,
-                        validationStatus.link && (react_1.default.createElement(OKELink_1.OKELink, { style: { marginLeft: "1rem" }, to: validationStatus.link.to }, validationStatus.link.text))))))))));
+    return (react_1.default.createElement("div", { className: className },
+        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
+        readOnly ? (react_1.default.createElement(Typo2_1.UI_BODY_SM, null, type === "password" ? "********" : value)) : (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(index_styled_1.InputContainerStyled, { type: type, disabled: disabled, iconAfter: iconAfter, onClick: function () { return inputRef.current.focus(); } },
+                icon && (react_1.default.createElement(DisplayIcon_1.DisplayIcon, { icon: icon, color: disabled ? themes_1.colors.grey40 : themes_1.colors.grey80, size: S ? 12 : 16, onClick: !disabled ? iconOnClick || null : undefined })),
+                react_1.default.createElement(index_styled_1.InputStyled, { ref: inputRef, className: size === "S" ? "UI_BODY" : "UI_BODY_SM", id: id, type: type, name: type, disabled: disabled, placeholder: localize(placeholder), value: value, onChange: handleOnChange, maxLength: maxLength || DEPRECATED_maxNumLimiter, onBlur: validateOnlyOnBlur ? function (e) { return handleValidate(e, onBlur); } : onBlur, size: size, onFocus: onFocus, autoComplete: "off" }),
+                validationStatus === "loading" && (react_1.default.createElement("div", null,
+                    react_1.default.createElement(LoadersAndProgress_1.LoaderCircle, { S: true, invert: invert }))),
+                (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "success" && (react_1.default.createElement("div", null,
+                    react_1.default.createElement(BadgeVetted, { size: 26 }))),
+                clearBtn && clearBtnEnabled && (react_1.default.createElement(ClearButton_1.ClearButton, { onClick: function () { return onChange(id, ""); }, value: (clearBtn === null || clearBtn === void 0 ? void 0 : clearBtn.text) || "Clear", disabled: !clearBtnEnabled })),
+                actionBtn && (react_1.default.createElement(ActionButton_1.ActionButton, { value: actionBtn.text || "Action", onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled }))),
+            displayValidationMsg && (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.msg) && (react_1.default.createElement(index_styled_1.MsgContainerStyled, { status: validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type },
+                (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "error" && (react_1.default.createElement(DisplayIcon_1.DisplayIcon, { size: 12, icon: "WarningDiamond", weight: "fill", color: themes_1.colors.error })),
+                react_1.default.createElement(Typo2_1.UI_HELPTEXT, null,
+                    react_1.default.createElement("div", { style: { display: 'flex' } },
+                        !((validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "success") && validationStatus.msg,
+                        validationStatus.link && (react_1.default.createElement(OKELink_1.OKELink, { to: validationStatus.link.to, style: { marginLeft: "0.5rem" } }, validationStatus.link.text))))))))));
 }
 exports.TextInput = TextInput;
-//passValidationErrorToFormValidation is not being handled by PasswordInput, cuz i dont think we will need it here..
-var PasswordInput = function (_a) {
-    var props = __rest(_a, []);
-    var _b = (0, react_1.useState)(false), showPassword = _b[0], setShowPassword = _b[1];
-    var icon = showPassword ? "Eye" : "EyeClosed";
-    var toggleShowPassword = function (e) {
-        if (props.disabled)
-            return;
-        e.preventDefault();
-        setShowPassword(function (prev) { return !prev; });
-    };
-    return (react_1.default.createElement(TextInput, __assign({ placeholder: "Enter password...", type: showPassword ? "text" : "password", iconOnClick: toggleShowPassword, iconAfter: true, icon: icon }, props)));
-};
-exports.PasswordInput = PasswordInput;
-var EmailInput = function (_a) {
-    var passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, props = __rest(_a, ["passValidationErrorToFormValidation"]);
-    var handleValidation = function (value) {
-        var regEx = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-        var errorObj = regEx.test(value)
-            ? ""
-            : { type: "error", msg: "Enter a valid email address" };
-        if (passValidationErrorToFormValidation) {
-            passValidationErrorToFormValidation((errorObj === null || errorObj === void 0 ? void 0 : errorObj.type) || "success");
-        }
-        return errorObj;
-    };
-    return (react_1.default.createElement(TextInput, __assign({ type: "email", placeholder: "Enter email...", handleValidation: handleValidation }, props)));
-};
-exports.EmailInput = EmailInput;
-var PhoneInput = function (_a) {
-    var passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, props = __rest(_a, ["passValidationErrorToFormValidation"]);
-    var handleValidation = function (value) {
-        var errorObj;
-        if (isNaN(value)) {
-            errorObj = { type: "error", msg: "Enter a valid phone number" };
-            if (passValidationErrorToFormValidation)
-                passValidationErrorToFormValidation(errorObj.type);
-            return errorObj;
-        }
-        if (value.length < 9) {
-            errorObj = { type: "error", msg: "Enter a valid phone number" };
-            if (passValidationErrorToFormValidation)
-                passValidationErrorToFormValidation(errorObj.type);
-            return errorObj;
-        }
-        //else
-        if (passValidationErrorToFormValidation)
-            passValidationErrorToFormValidation("success");
-    };
-    return (react_1.default.createElement(TextInput, __assign({ type: "tel", placeholder: "Enter Phone...", handleValidation: handleValidation, maxLength: 11 }, props)));
-};
-exports.PhoneInput = PhoneInput;
-var URLInput = function (_a) {
-    var _b = _a.routesAreValidInputs, routesAreValidInputs = _b === void 0 ? false : _b, //if we want react route declarations to be considered as 'valid' then set this to true
-    validationPlugin = _a.validationPlugin, passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, content = _a.content, props = __rest(_a, ["routesAreValidInputs", "validationPlugin", "passValidationErrorToFormValidation", "content"]);
-    var handleValidation = function (value) { return __awaiter(void 0, void 0, void 0, function () {
-        var pluginResponse, successObj, response, successObj, err_1, successObj, errorObj;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!validationPlugin) return [3 /*break*/, 2];
-                    return [4 /*yield*/, validationPlugin({
-                            value: value,
-                            content: content,
-                            passValidationErrorToFormValidation: passValidationErrorToFormValidation,
-                        })];
-                case 1:
-                    pluginResponse = _a.sent();
-                    if (pluginResponse)
-                        return [2 /*return*/, pluginResponse];
-                    _a.label = 2;
-                case 2:
-                    //else
-                    //if routesAreValidInputs, then first validate for a route
-                    if (routesAreValidInputs && value.substring(0, 1) === "/") {
-                        successObj = { type: "success", msg: "valid route" };
-                        if (passValidationErrorToFormValidation)
-                            passValidationErrorToFormValidation(successObj.type);
-                        return [2 /*return*/, successObj];
-                    }
-                    //else validate for a url
-                    if (!/^https?:\/\//i.test(value)) {
-                        value = "https://" + value;
-                    }
-                    _a.label = 3;
-                case 3:
-                    _a.trys.push([3, 5, , 6]);
-                    return [4 /*yield*/, fetch(value)];
-                case 4:
-                    response = _a.sent();
-                    if (response.status !== 200)
-                        throw new Error("");
-                    successObj = { type: "success", msg: "valid url" };
-                    if (passValidationErrorToFormValidation)
-                        passValidationErrorToFormValidation(successObj.type);
-                    return [2 /*return*/, successObj];
-                case 5:
-                    err_1 = _a.sent();
-                    if (/[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/gi.test(value)) {
-                        successObj = { type: "success", msg: "valid url" };
-                        if (passValidationErrorToFormValidation)
-                            passValidationErrorToFormValidation(successObj.type);
-                        return [2 /*return*/, successObj];
-                    }
-                    errorObj = { type: "error", msg: "Enter a valid url..." };
-                    if (passValidationErrorToFormValidation)
-                        passValidationErrorToFormValidation(errorObj.type);
-                    return [2 /*return*/, errorObj];
-                case 6: return [2 /*return*/];
-            }
-        });
-    }); };
-    return (react_1.default.createElement(TextInput, __assign({ type: "url", handleValidation: handleValidation, placeholder: "Enter a valid url..." }, props)));
-};
-exports.URLInput = URLInput;
-var NumberInput = function (_a) {
-    var passValidationErrorToFormValidation = _a.passValidationErrorToFormValidation, props = __rest(_a, ["passValidationErrorToFormValidation"]);
-    var min = props.min, max = props.max;
-    var handleValidation = function (value) {
-        var errorObj;
-        if (isNaN(value)) {
-            errorObj = { type: "error", msg: "Enter a number" };
-            if (passValidationErrorToFormValidation)
-                passValidationErrorToFormValidation(errorObj.type);
-            return errorObj;
-        }
-        if (min && value < min) {
-            errorObj = {
-                type: "error",
-                msg: "Enter value greater than or equal to ".concat(min),
-            };
-            if (passValidationErrorToFormValidation)
-                passValidationErrorToFormValidation(errorObj.type);
-            return errorObj;
-        }
-        if (max && value > max) {
-            errorObj = {
-                type: "error",
-                msg: "Enter value less than or equal to ".concat(max),
-            };
-            if (passValidationErrorToFormValidation)
-                passValidationErrorToFormValidation(errorObj.type);
-            return errorObj;
-        }
-        //else
-        if (passValidationErrorToFormValidation)
-            passValidationErrorToFormValidation("success");
-    };
-    return (react_1.default.createElement(TextInput
-    // type="number"
-    , __assign({
-        // type="number"
-        handleValidation: handleValidation, placeholder: "Enter Number..." }, props)));
+var Inputs = {
+    EmailInput: EmailInput_1.EmailInput,
+    NumberInput: NumberInput_1.NumberInput,
+    PhoneInput: PhoneInput_1.PhoneInput,
+    PasswordInput: PasswordInput_1.PasswordInput,
+    URLInput: URLInput_1.URLInput,
 };
-exports.NumberInput = NumberInput;

package/dist/v2/components/TextInputs/index.styled.js CHANGED Viewed

@@ -33,7 +33,7 @@ var mixins_1 = require("../../../themes/mixins");
 var themes_1 = require("../../themes");
 var globalStyles_1 = require("../../themes/globalStyles");
 var getColorValue = function (status) {
-    return status === "error" ? themes_1.colors.red : status === "success" && themes_1.colors.green;
+    return status === "error" ? themes_1.colors.error : status === "success" && themes_1.colors.green;
 };
 exports.MsgContainerStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 2px;\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  ", "\n"], ["\n  margin-top: 2px;\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  ", "\n"])), function (_a) {
     var status = _a.status;
@@ -55,7 +55,10 @@ exports.InputContainerStyled = styled_components_1.default.div(templateObject_6
     var readOnly = _a.readOnly;
     return readOnly && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
 });
-exports.InputStyled = styled_components_1.default.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: ", ";\n  border: none;\n  outline: none;\n  flex-grow: 1;\n  background: transparent;\n  color: inherit;\n\n  &:-webkit-autofill {\n    transition-delay: 9999s;\n  }\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n"], ["\n  height: ", ";\n  border: none;\n  outline: none;\n  flex-grow: 1;\n  background: transparent;\n  color: inherit;\n\n  &:-webkit-autofill {\n    transition-delay: 9999s;\n  }\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n"])), globalStyles_1.globalInputHeight, function (_a) {
+exports.InputStyled = styled_components_1.default.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: ", ";\n  border: none;\n  outline: none;\n  flex-grow: 1;\n  background: transparent;\n  color: inherit;\n\n  &:-webkit-autofill {\n    transition-delay: 9999s;\n  }\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n"], ["\n  height: ", ";\n  border: none;\n  outline: none;\n  flex-grow: 1;\n  background: transparent;\n  color: inherit;\n\n  &:-webkit-autofill {\n    transition-delay: 9999s;\n  }\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n"])), function (_a) {
+    var size = _a.size;
+    return size === "S" ? "32px" : "36px";
+}, function (_a) {
     var disabled = _a.disabled;
     return (disabled ? themes_1.colors.grey40 : themes_1.colors.grey60);
 });

package/dist/v2/components/Typo2/index.d.ts CHANGED Viewed

@@ -38,6 +38,7 @@ export declare const UI_BODY_BOLD_SM: React.FunctionComponent<TypoCompProps>;
 export declare const UI_PARAGRAPH: React.FunctionComponent<TypoCompProps>;
 export declare const UI_PARAGRAPH_BOLD: React.FunctionComponent<TypoCompProps>;
 export declare const UI_CAPTION: React.FunctionComponent<TypoCompProps>;
+export declare const UI_CAPTION_BOLD: React.FunctionComponent<TypoCompProps>;
 export declare const UI_TAG: React.FunctionComponent<TypoCompProps>;
 export declare const UI_HELPTEXT: React.FunctionComponent<TypoCompProps>;
 export declare const UI_STAT_LG: React.FunctionComponent<TypoCompProps>;

package/dist/v2/components/Typo2/index.js CHANGED Viewed

@@ -25,7 +25,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TypoV2ClassesProvider = exports.CONTENT_BODY_POSTIT = exports.CONTENT_TITLE_POSTIT = exports.CONTENT_QUOTE = exports.CONTENT_BODY_BOLD_ITALIC = exports.CONTENT_BODY_ITALIC = exports.CONTENT_BODY_BOLD = exports.CONTENT_BODY = exports.CONTENT_H3 = exports.CONTENT_H2 = exports.CONTENT_H1 = exports.UI_STAT_SM = exports.UI_STAT_LG = exports.UI_HELPTEXT = exports.UI_TAG = exports.UI_CAPTION = exports.UI_PARAGRAPH_BOLD = exports.UI_PARAGRAPH = exports.UI_BODY_BOLD_SM = exports.UI_BODY_BOLD = exports.UI_BODY_SEMIBOLD_SM = exports.UI_BODY_SEMIBOLD = exports.UI_BODY_SM = exports.UI_BODY = exports.UI_TITLE_SM = exports.UI_TITLE = exports.UI_HEADLINE_SM = exports.UI_HEADLINE = exports.UI_DISPLAY = void 0;
+exports.TypoV2ClassesProvider = exports.CONTENT_BODY_POSTIT = exports.CONTENT_TITLE_POSTIT = exports.CONTENT_QUOTE = exports.CONTENT_BODY_BOLD_ITALIC = exports.CONTENT_BODY_ITALIC = exports.CONTENT_BODY_BOLD = exports.CONTENT_BODY = exports.CONTENT_H3 = exports.CONTENT_H2 = exports.CONTENT_H1 = exports.UI_STAT_SM = exports.UI_STAT_LG = exports.UI_HELPTEXT = exports.UI_TAG = exports.UI_CAPTION_BOLD = exports.UI_CAPTION = exports.UI_PARAGRAPH_BOLD = exports.UI_PARAGRAPH = exports.UI_BODY_BOLD_SM = exports.UI_BODY_BOLD = exports.UI_BODY_SEMIBOLD_SM = exports.UI_BODY_SEMIBOLD = exports.UI_BODY_SM = exports.UI_BODY = exports.UI_TITLE_SM = exports.UI_TITLE = exports.UI_HEADLINE_SM = exports.UI_HEADLINE = exports.UI_DISPLAY = void 0;
 var react_1 = __importDefault(require("react"));
 var index_styled_1 = require("./index.styled");
 var utilsOolib_1 = require("../../../utilsOolib");
@@ -97,6 +97,8 @@ var UI_PARAGRAPH_BOLD = function (props) { return react_1.default.createElement(
 exports.UI_PARAGRAPH_BOLD = UI_PARAGRAPH_BOLD;
 var UI_CAPTION = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_CAPTION_STYLED }); };
 exports.UI_CAPTION = UI_CAPTION;
+var UI_CAPTION_BOLD = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_CAPTION_BOLD_STYLED }); };
+exports.UI_CAPTION_BOLD = UI_CAPTION_BOLD;
 var UI_TAG = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_TAG_STYLED }); };
 exports.UI_TAG = UI_TAG;
 var UI_HELPTEXT = function (props) { return react_1.default.createElement(GenComp, { props: props, Comp: index_styled_1.UI_HELPTEXT_STYLED }); };

package/dist/v2/components/Typo2/index.styled.d.ts CHANGED Viewed

@@ -12,6 +12,7 @@ export declare const UI_BODY_BOLD_SM_STYLED: import("styled-components").StyledC
 export declare const UI_PARAGRAPH_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
 export declare const UI_PARAGRAPH_BOLD_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
 export declare const UI_CAPTION_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const UI_CAPTION_BOLD_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
 export declare const UI_TAG_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
 export declare const UI_HELPTEXT_STYLED: import("styled-components").StyledComponent<"p", any, {}, never>;
 export declare const UI_STAT_LG_STYLED: import("styled-components").StyledComponent<"h2", any, {}, never>;

package/dist/v2/components/Typo2/index.styled.js CHANGED Viewed

@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TYPO_V2_CLASSES = exports.CONTENT_BODY_POSTIT_STYLED = exports.CONTENT_TITLE_POSTIT_STYLED = exports.CONTENT_QUOTE_STYLED = exports.CONTENT_BODY_BOLD_ITALIC_STYLED = exports.CONTENT_BODY_ITALIC_STYLED = exports.CONTENT_BODY_BOLD_STYLED = exports.CONTENT_BODY_STYLED = exports.CONTENT_H3_STYLED = exports.CONTENT_H2_STYLED = exports.CONTENT_H1_STYLED = exports.UI_STAT_SM_STYLED = exports.UI_STAT_LG_STYLED = exports.UI_HELPTEXT_STYLED = exports.UI_TAG_STYLED = exports.UI_CAPTION_STYLED = exports.UI_PARAGRAPH_BOLD_STYLED = exports.UI_PARAGRAPH_STYLED = exports.UI_BODY_BOLD_SM_STYLED = exports.UI_BODY_BOLD_STYLED = exports.UI_BODY_SEMIBOLD_SM_STYLED = exports.UI_BODY_SEMIBOLD_STYLED = exports.UI_BODY_SM_STYLED = exports.UI_BODY_STYLED = exports.UI_TITLE_SM_STYLED = exports.UI_TITLE_STYLED = exports.UI_HEADLINE_SM_STYLED = exports.UI_HEADLINE_STYLED = exports.UI_DISPLAY_STYLED = void 0;
+exports.TYPO_V2_CLASSES = exports.CONTENT_BODY_POSTIT_STYLED = exports.CONTENT_TITLE_POSTIT_STYLED = exports.CONTENT_QUOTE_STYLED = exports.CONTENT_BODY_BOLD_ITALIC_STYLED = exports.CONTENT_BODY_ITALIC_STYLED = exports.CONTENT_BODY_BOLD_STYLED = exports.CONTENT_BODY_STYLED = exports.CONTENT_H3_STYLED = exports.CONTENT_H2_STYLED = exports.CONTENT_H1_STYLED = exports.UI_STAT_SM_STYLED = exports.UI_STAT_LG_STYLED = exports.UI_HELPTEXT_STYLED = exports.UI_TAG_STYLED = exports.UI_CAPTION_BOLD_STYLED = exports.UI_CAPTION_STYLED = exports.UI_PARAGRAPH_BOLD_STYLED = exports.UI_PARAGRAPH_STYLED = exports.UI_BODY_BOLD_SM_STYLED = exports.UI_BODY_BOLD_STYLED = exports.UI_BODY_SEMIBOLD_SM_STYLED = exports.UI_BODY_SEMIBOLD_STYLED = exports.UI_BODY_SM_STYLED = exports.UI_BODY_STYLED = exports.UI_TITLE_SM_STYLED = exports.UI_TITLE_STYLED = exports.UI_HEADLINE_SM_STYLED = exports.UI_HEADLINE_STYLED = exports.UI_DISPLAY_STYLED = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var typo_1 = require("../../themes/typo");
 // UI Fonts
@@ -25,22 +25,23 @@ exports.UI_BODY_BOLD_SM_STYLED = styled_components_1.default.p(templateObject_11
 exports.UI_PARAGRAPH_STYLED = styled_components_1.default.p(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_PARAGRAPH);
 exports.UI_PARAGRAPH_BOLD_STYLED = styled_components_1.default.p(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_PARAGRAPH_BOLD);
 exports.UI_CAPTION_STYLED = styled_components_1.default.p(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_CAPTION);
-exports.UI_TAG_STYLED = styled_components_1.default.p(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_TAG);
-exports.UI_HELPTEXT_STYLED = styled_components_1.default.p(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_HELPTEXT);
-exports.UI_STAT_LG_STYLED = styled_components_1.default.h2(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_STAT_LG);
-exports.UI_STAT_SM_STYLED = styled_components_1.default.h3(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
+exports.UI_CAPTION_BOLD_STYLED = styled_components_1.default.p(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_CAPTION_BOLD);
+exports.UI_TAG_STYLED = styled_components_1.default.p(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_TAG);
+exports.UI_HELPTEXT_STYLED = styled_components_1.default.p(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_HELPTEXT);
+exports.UI_STAT_LG_STYLED = styled_components_1.default.h2(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.UI_STAT_LG);
+exports.UI_STAT_SM_STYLED = styled_components_1.default.h3(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
     // Content Fonts
 ])), typo_1.typo.UI_STAT_SM);
 // Content Fonts
-exports.CONTENT_H1_STYLED = styled_components_1.default.h1(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  ", "  \n  "], ["\n  ", "  \n  "])), typo_1.typo.CONTENT_H1);
-exports.CONTENT_H2_STYLED = styled_components_1.default.h2(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  ", "  \n"], ["\n  ", "  \n"])), typo_1.typo.CONTENT_H2);
-exports.CONTENT_H3_STYLED = styled_components_1.default.h3(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  ", "  \n"], ["\n  ", "  \n"])), typo_1.typo.CONTENT_H3);
-exports.CONTENT_BODY_STYLED = styled_components_1.default.p(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY);
-exports.CONTENT_BODY_BOLD_STYLED = styled_components_1.default.p(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD);
-exports.CONTENT_BODY_ITALIC_STYLED = styled_components_1.default.p(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY_ITALIC);
-exports.CONTENT_BODY_BOLD_ITALIC_STYLED = styled_components_1.default.p(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD_ITALIC);
-exports.CONTENT_QUOTE_STYLED = styled_components_1.default.h4(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_QUOTE);
-exports.CONTENT_TITLE_POSTIT_STYLED = styled_components_1.default.p(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_TITLE_POSTIT);
-exports.CONTENT_BODY_POSTIT_STYLED = styled_components_1.default.p(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY_POSTIT);
-exports.TYPO_V2_CLASSES = styled_components_1.default.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  .UI_DISPLAY {\n    ", "\n  }\n\n  .UI_HEADLINE {\n    ", "\n  }\n\n  .UI_HEADLINE_SM {\n    ", "\n  }\n\n  .UI_TITLE {\n    ", "\n  }\n\n\n  .UI_TITLE_SM {\n    ", "\n  }\n\n  .UI_BODY {\n    ", "\n  }\n\n  .UI_BODY_SM {\n    ", "\n  }\n\n  .UI_BODY_SEMIBOLD {\n    ", "\n  }\n\n  .UI_BODY_SEMIBOLD_SM {\n    ", "\n  } \n\n\n  .UI_BODY_BOLD {\n    ", "\n  }\n\n  .UI_BODY_BOLD_SM {\n    ", "\n  }\n\n  .UI_PARAGRAPH {\n    ", "\n  }\n\n  .UI_PARAGRAPH_BOLD {\n    ", "\n  }\n\n  .UI_CAPTION {\n    ", "\n  }\n\n  \n  .UI_TAG {\n    ", "\n  }\n  \n  .UI_HELPTEXT {\n    ", "\n  }\n\n  .UI_STAT_LG {\n    ", "\n  }\n\n  .UI_STAT_SM {\n    ", "\n  }\n\n\n  .CONTENT_H1 {\n    ", "\n  }\n  .CONTENT_H2 {\n    ", "\n  }\n  .CONTENT_H3 {\n    ", "\n  }\n  .CONTENT_BODY {\n    ", "\n  }\n\n  .CONTENT_BODY_BOLD {\n    ", "\n  }\n  .CONTENT_BODY_ITALIC {\n    ", "\n  }\n  .CONTENT_BODY_BOLD_ITALIC {\n    ", "\n  }\n  .CONTENT_QUOTE {\n    ", "\n  }\n\n  .CONTENT_TITLE_POSTIT {\n    ", "\n  }\n  .CONTENT_BODY_POSTIT {\n    ", "\n  }\n"], ["\n  .UI_DISPLAY {\n    ", "\n  }\n\n  .UI_HEADLINE {\n    ", "\n  }\n\n  .UI_HEADLINE_SM {\n    ", "\n  }\n\n  .UI_TITLE {\n    ", "\n  }\n\n\n  .UI_TITLE_SM {\n    ", "\n  }\n\n  .UI_BODY {\n    ", "\n  }\n\n  .UI_BODY_SM {\n    ", "\n  }\n\n  .UI_BODY_SEMIBOLD {\n    ", "\n  }\n\n  .UI_BODY_SEMIBOLD_SM {\n    ", "\n  } \n\n\n  .UI_BODY_BOLD {\n    ", "\n  }\n\n  .UI_BODY_BOLD_SM {\n    ", "\n  }\n\n  .UI_PARAGRAPH {\n    ", "\n  }\n\n  .UI_PARAGRAPH_BOLD {\n    ", "\n  }\n\n  .UI_CAPTION {\n    ", "\n  }\n\n  \n  .UI_TAG {\n    ", "\n  }\n  \n  .UI_HELPTEXT {\n    ", "\n  }\n\n  .UI_STAT_LG {\n    ", "\n  }\n\n  .UI_STAT_SM {\n    ", "\n  }\n\n\n  .CONTENT_H1 {\n    ", "\n  }\n  .CONTENT_H2 {\n    ", "\n  }\n  .CONTENT_H3 {\n    ", "\n  }\n  .CONTENT_BODY {\n    ", "\n  }\n\n  .CONTENT_BODY_BOLD {\n    ", "\n  }\n  .CONTENT_BODY_ITALIC {\n    ", "\n  }\n  .CONTENT_BODY_BOLD_ITALIC {\n    ", "\n  }\n  .CONTENT_QUOTE {\n    ", "\n  }\n\n  .CONTENT_TITLE_POSTIT {\n    ", "\n  }\n  .CONTENT_BODY_POSTIT {\n    ", "\n  }\n"])), typo_1.typo.UI_DISPLAY, typo_1.typo.UI_HEADLINE, typo_1.typo.UI_HEADLINE_SM, typo_1.typo.UI_TITLE, typo_1.typo.UI_TITLE_SM, typo_1.typo.UI_BODY, typo_1.typo.UI_BODY_SM, typo_1.typo.UI_BODY_SEMIBOLD, typo_1.typo.UI_BODY_SEMIBOLD_SM, typo_1.typo.UI_BODY_BOLD, typo_1.typo.UI_BODY_BOLD_SM, typo_1.typo.UI_PARAGRAPH, typo_1.typo.UI_PARAGRAPH_BOLD, typo_1.typo.UI_CAPTION, typo_1.typo.UI_TAG, typo_1.typo.UI_HELPTEXT, typo_1.typo.UI_STAT_LG, typo_1.typo.UI_STAT_SM, typo_1.typo.CONTENT_H1, typo_1.typo.CONTENT_H2, typo_1.typo.CONTENT_H3, typo_1.typo.CONTENT_BODY, typo_1.typo.CONTENT_BODY_BOLD, typo_1.typo.CONTENT_BODY_ITALIC, typo_1.typo.CONTENT_BODY_BOLD_ITALIC, typo_1.typo.CONTENT_QUOTE, typo_1.typo.CONTENT_TITLE_POSTIT, typo_1.typo.CONTENT_BODY_POSTIT);
-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, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29;
+exports.CONTENT_H1_STYLED = styled_components_1.default.h1(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  ", "  \n  "], ["\n  ", "  \n  "])), typo_1.typo.CONTENT_H1);
+exports.CONTENT_H2_STYLED = styled_components_1.default.h2(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  ", "  \n"], ["\n  ", "  \n"])), typo_1.typo.CONTENT_H2);
+exports.CONTENT_H3_STYLED = styled_components_1.default.h3(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  ", "  \n"], ["\n  ", "  \n"])), typo_1.typo.CONTENT_H3);
+exports.CONTENT_BODY_STYLED = styled_components_1.default.p(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY);
+exports.CONTENT_BODY_BOLD_STYLED = styled_components_1.default.p(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD);
+exports.CONTENT_BODY_ITALIC_STYLED = styled_components_1.default.p(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY_ITALIC);
+exports.CONTENT_BODY_BOLD_ITALIC_STYLED = styled_components_1.default.p(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY_BOLD_ITALIC);
+exports.CONTENT_QUOTE_STYLED = styled_components_1.default.h4(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_QUOTE);
+exports.CONTENT_TITLE_POSTIT_STYLED = styled_components_1.default.p(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_TITLE_POSTIT);
+exports.CONTENT_BODY_POSTIT_STYLED = styled_components_1.default.p(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), typo_1.typo.CONTENT_BODY_POSTIT);
+exports.TYPO_V2_CLASSES = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  .UI_DISPLAY {\n    ", "\n  }\n\n  .UI_HEADLINE {\n    ", "\n  }\n\n  .UI_HEADLINE_SM {\n    ", "\n  }\n\n  .UI_TITLE {\n    ", "\n  }\n\n\n  .UI_TITLE_SM {\n    ", "\n  }\n\n  .UI_BODY {\n    ", "\n  }\n\n  .UI_BODY_SM {\n    ", "\n  }\n\n  .UI_BODY_SEMIBOLD {\n    ", "\n  }\n\n  .UI_BODY_SEMIBOLD_SM {\n    ", "\n  } \n\n\n  .UI_BODY_BOLD {\n    ", "\n  }\n\n  .UI_BODY_BOLD_SM {\n    ", "\n  }\n\n  .UI_PARAGRAPH {\n    ", "\n  }\n\n  .UI_PARAGRAPH_BOLD {\n    ", "\n  }\n\n  .UI_CAPTION {\n    ", "\n  }\n\n  \n  .UI_TAG {\n    ", "\n  }\n  \n  .UI_HELPTEXT {\n    ", "\n  }\n\n  .UI_STAT_LG {\n    ", "\n  }\n\n  .UI_STAT_SM {\n    ", "\n  }\n\n\n  .CONTENT_H1 {\n    ", "\n  }\n  .CONTENT_H2 {\n    ", "\n  }\n  .CONTENT_H3 {\n    ", "\n  }\n  .CONTENT_BODY {\n    ", "\n  }\n\n  .CONTENT_BODY_BOLD {\n    ", "\n  }\n  .CONTENT_BODY_ITALIC {\n    ", "\n  }\n  .CONTENT_BODY_BOLD_ITALIC {\n    ", "\n  }\n  .CONTENT_QUOTE {\n    ", "\n  }\n\n  .CONTENT_TITLE_POSTIT {\n    ", "\n  }\n  .CONTENT_BODY_POSTIT {\n    ", "\n  }\n"], ["\n  .UI_DISPLAY {\n    ", "\n  }\n\n  .UI_HEADLINE {\n    ", "\n  }\n\n  .UI_HEADLINE_SM {\n    ", "\n  }\n\n  .UI_TITLE {\n    ", "\n  }\n\n\n  .UI_TITLE_SM {\n    ", "\n  }\n\n  .UI_BODY {\n    ", "\n  }\n\n  .UI_BODY_SM {\n    ", "\n  }\n\n  .UI_BODY_SEMIBOLD {\n    ", "\n  }\n\n  .UI_BODY_SEMIBOLD_SM {\n    ", "\n  } \n\n\n  .UI_BODY_BOLD {\n    ", "\n  }\n\n  .UI_BODY_BOLD_SM {\n    ", "\n  }\n\n  .UI_PARAGRAPH {\n    ", "\n  }\n\n  .UI_PARAGRAPH_BOLD {\n    ", "\n  }\n\n  .UI_CAPTION {\n    ", "\n  }\n\n  \n  .UI_TAG {\n    ", "\n  }\n  \n  .UI_HELPTEXT {\n    ", "\n  }\n\n  .UI_STAT_LG {\n    ", "\n  }\n\n  .UI_STAT_SM {\n    ", "\n  }\n\n\n  .CONTENT_H1 {\n    ", "\n  }\n  .CONTENT_H2 {\n    ", "\n  }\n  .CONTENT_H3 {\n    ", "\n  }\n  .CONTENT_BODY {\n    ", "\n  }\n\n  .CONTENT_BODY_BOLD {\n    ", "\n  }\n  .CONTENT_BODY_ITALIC {\n    ", "\n  }\n  .CONTENT_BODY_BOLD_ITALIC {\n    ", "\n  }\n  .CONTENT_QUOTE {\n    ", "\n  }\n\n  .CONTENT_TITLE_POSTIT {\n    ", "\n  }\n  .CONTENT_BODY_POSTIT {\n    ", "\n  }\n"])), typo_1.typo.UI_DISPLAY, typo_1.typo.UI_HEADLINE, typo_1.typo.UI_HEADLINE_SM, typo_1.typo.UI_TITLE, typo_1.typo.UI_TITLE_SM, typo_1.typo.UI_BODY, typo_1.typo.UI_BODY_SM, typo_1.typo.UI_BODY_SEMIBOLD, typo_1.typo.UI_BODY_SEMIBOLD_SM, typo_1.typo.UI_BODY_BOLD, typo_1.typo.UI_BODY_BOLD_SM, typo_1.typo.UI_PARAGRAPH, typo_1.typo.UI_PARAGRAPH_BOLD, typo_1.typo.UI_CAPTION, typo_1.typo.UI_TAG, typo_1.typo.UI_HELPTEXT, typo_1.typo.UI_STAT_LG, typo_1.typo.UI_STAT_SM, typo_1.typo.CONTENT_H1, typo_1.typo.CONTENT_H2, typo_1.typo.CONTENT_H3, typo_1.typo.CONTENT_BODY, typo_1.typo.CONTENT_BODY_BOLD, typo_1.typo.CONTENT_BODY_ITALIC, typo_1.typo.CONTENT_BODY_BOLD_ITALIC, typo_1.typo.CONTENT_QUOTE, typo_1.typo.CONTENT_TITLE_POSTIT, typo_1.typo.CONTENT_BODY_POSTIT);
+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, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30;