@hexure/ui 1.13.49 → 1.13.50

package/dist/cjs/types/components/Field/Field.d.ts

@@ -24,6 +24,8 @@ export interface FieldProps extends AccessibleProps {
     tooltip?: TooltipProps;
     /** Optional ID for automation purposes */
     dataItemid?: string;
+    /** Optional for black message with icon */
+    isNewMessageType?: boolean;
 }
 declare const Field: FC<FieldProps>;
 export default Field;

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 import React, { useState, useContext, useRef, useEffect } from 'react';
 import styled, { ThemeContext, keyframes } from 'styled-components';
 import Icon, { Icon as Icon$1 } from '@mdi/react';
-import { mdiChevronUp, mdiChevronDown, mdiInformationOutline, mdiLoading, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiClose, mdiChevronRight, mdiChevronLeft, mdiDotsHorizontal, mdiMinusCircle, mdiFolderPlusOutline, mdiCheck } from '@mdi/js';
+import { mdiChevronUp, mdiChevronDown, mdiInformationOutline, mdiLoading, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiClose, mdiChevronRight, mdiChevronLeft, mdiDotsHorizontal, mdiAlertCircle, mdiMinusCircle, mdiFolderPlusOutline, mdiCheck } from '@mdi/js';
 import dayjs from 'dayjs';
 import Numeral from 'numeral';
 import Moment from 'moment';
@@ -1366,9 +1366,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: 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` },
@@ -1379,7 +1400,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 `