@hexure/ui 1.13.49 → 1.13.50

package/dist/cjs/index.js

@@ -1368,9 +1368,30 @@ const Validation = styled.div `
   color: ${Colors.RED.Hex};
   margin: 4px 0 0 0;
   box-sizing: border-box;
+  min-height: 19px;
 `;
+const ValidationNew = styled.span `
+  font-size: ${FontSizes.SMALL};
+  font-weight: 400;
+  line-height: 1.3em;
+  font-family: ${FontStyles.DEFAULT};
+  color: ${Colors.BLACK.Hex};
+  box-sizing: border-box;
+  align-items: center;
+  display: flex;
+`;
+const ValidationInnerIcon = styled.span `
+  padding-right: 5px;
+  display: flex;
+`;
+const ValidationInnerMessage = styled.span ``;
+const MessageWrapper = message => (React.createElement(ValidationNew, null,
+    React.createElement(ValidationInnerIcon, null,
+        React.createElement(Icon, { path: js.mdiAlertCircle, size: '17px' })),
+    ' ',
+    React.createElement(ValidationInnerMessage, null, message)));
 const Field = (_a) => {
-    var { action, children, validationText, label, description, required, htmlFor, style = {}, tooltip, dataItemid } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip", "dataItemid"]);
+    var { action, children, validationText, label, description, required, htmlFor, style = {}, tooltip, dataItemid, isNewMessageType } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip", "dataItemid", "isNewMessageType"]);
     const baseId = dataItemid || 'field';
     return (React.createElement(Wrapper$9, Object.assign({ "$customStyle": style }, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
         React.createElement(LabelRow, { "data-itemid": `${baseId}-label-row` },
@@ -1381,7 +1402,9 @@ const Field = (_a) => {
             action ? (React.createElement(Action, { "data-itemid": `${baseId}-action`, onClick: action.onClick }, action.label)) : null),
         description ? (React.createElement(Description, { "data-itemid": `${baseId}-description` }, description)) : null,
         React.createElement("div", { "data-itemid": `${baseId}-children` }, children),
-        React.createElement(Validation, { className: 'field-validation-wrapper', "data-itemid": `${baseId}-validation`, title: validationText }, validationText ? validationText : '\u00A0')));
+        React.createElement(Validation, { className: 'field-validation-wrapper', "data-itemid": `${baseId}-validation`, title: validationText }, validationText && isNewMessageType
+            ? MessageWrapper(validationText)
+            : validationText || '\u00A0')));
 };
 
 const Wrapper$8 = styled.fieldset `