@hexure/ui 1.13.59 → 1.13.61

package/dist/cjs/index.js

@@ -376,7 +376,7 @@ const Wrapper$g = styled.div `
   justify-content: center;
   box-sizing: border-box;
 `;
-const Container$4 = styled.dialog(props => (Object.assign({ maxWidth: '600px', width: 'auto', borderRadius: '8px', overflow: 'hidden', boxShadow: '0px 10px 30px -15px rgba(0, 0, 0, 0.2)', outline: 'none', border: 'none', position: 'relative', padding: '40px', textAlign: 'center', boxSizing: 'border-box', wordWrap: 'break-word' }, props.$customStyle)));
+const Container$5 = styled.dialog(props => (Object.assign({ maxWidth: '600px', width: 'auto', borderRadius: '8px', overflow: 'hidden', boxShadow: '0px 10px 30px -15px rgba(0, 0, 0, 0.2)', outline: 'none', border: 'none', position: 'relative', padding: '40px', textAlign: 'center', boxSizing: 'border-box', wordWrap: 'break-word' }, props.$customStyle)));
 const Buttons$1 = styled.div `
   display: flex;
   gap: 10px;
@@ -389,7 +389,7 @@ const ActionDialog = (_a) => {
     var { description, title, primaryButton, secondaryButton, tertiaryButton, style = {}, dataItemid } = _a, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton", "style", "dataItemid"]);
     const baseId = dataItemid || 'action-dialog';
     return (React.createElement(Wrapper$g, Object.assign({}, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
-        React.createElement(Container$4, { "$customStyle": style, "data-itemid": `${baseId}-container`, open: true },
+        React.createElement(Container$5, { "$customStyle": style, "data-itemid": `${baseId}-container`, open: true },
             title ? (React.createElement(Heading, { "data-itemid": `${baseId}-title`, margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
             description ? (React.createElement(Copy, { align: 'center', "data-itemid": `${baseId}-description` }, description)) : null,
             primaryButton || secondaryButton || tertiaryButton ? (React.createElement(Buttons$1, { "data-itemid": `${baseId}-buttons` },
@@ -494,7 +494,7 @@ const Logo = (_a) => {
     }
 };
 
-const Container$3 = styled.header `
+const Container$4 = styled.header `
   width: 100%;
   display: flex;
   padding: 20px;
@@ -519,7 +519,7 @@ const Buttons = styled.div `
 `;
 const AppHeader = ({ logoUrl, buttons = [], dataItemid }) => {
     const baseId = dataItemid || 'app-header';
-    return (React.createElement(Container$3, { "data-itemid": `${baseId}-container` },
+    return (React.createElement(Container$4, { "data-itemid": `${baseId}-container` },
         React.createElement(LogoWrapper, { "data-itemid": `${baseId}-logo-wrapper` }, logoUrl ? (React.createElement(Image, { "data-itemid": `${baseId}-logo`, src: logoUrl })) : (React.createElement(Logo, { "data-itemid": `${baseId}-default-logo`, height: '30px' }))),
         React.createElement(Buttons, { "data-itemid": `${baseId}-buttons` }, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b, { "data-itemid": `${baseId}-button-${i}` })))))));
 };
@@ -945,6 +945,28 @@ const Input$2 = styled.input `
     display: block;
   }
 `;
+const getBackgroundColor$3 = (props) => {
+    if (props.$isWarningError) {
+        return '#fcf1c9';
+    }
+    else if (props.$invalid && props.$isInvalidRedBackground) {
+        return '#ffe5e5';
+    }
+    else {
+        return '#ffffff';
+    }
+};
+const getBorderColor$3 = (props) => {
+    if (props.$isWarningError) {
+        return 'Orange';
+    }
+    else if (props.$invalid) {
+        return Colors.RED.Hex;
+    }
+    else {
+        return Colors.GRAY.Hex;
+    }
+};
 const Check$1 = styled.span `
   height: 17px;
   width: 17px;
@@ -952,8 +974,8 @@ const Check$1 = styled.span `
   background-color: #fff;
   border-width: 2px;
   border-style: solid;
-  border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
-  background-color: ${props => props.$invalid && props.$isInvalidRedBackground ? '#ffe5e5' : '#ffffff'};
+  border-color: ${props => getBorderColor$3(props)};
+  background-color: ${props => getBackgroundColor$3(props)};
   box-sizing: border-box;
   position: relative;
   &:after {
@@ -982,11 +1004,11 @@ const Label$3 = styled.span `
   box-sizing: border-box;
 `;
 const Checkbox = (_a) => {
-    var { children, color, disabled, checked, onChange, invalid, tooltip, tabIndex, dataItemid, isInvalidRedBackground = false } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip", "tabIndex", "dataItemid", "isInvalidRedBackground"]);
+    var { children, color, disabled, checked, onChange, invalid, tooltip, tabIndex, dataItemid, isInvalidRedBackground = false, isWarningError = false } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip", "tabIndex", "dataItemid", "isInvalidRedBackground", "isWarningError"]);
     const baseId = dataItemid || 'checkbox';
     return (React.createElement(Wrapper$b, Object.assign({ "$disabled": disabled }, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
         React.createElement(Input$2, { checked: checked, "data-itemid": `${baseId}-input`, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, tabIndex: disabled ? -1 : tabIndex, type: 'checkbox' }),
-        React.createElement(Check$1, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "data-itemid": `${baseId}-check` }),
+        React.createElement(Check$1, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "$isWarningError": isWarningError, "data-itemid": `${baseId}-check` }),
         children ? (React.createElement(Label$3, { color: color, "data-itemid": `${baseId}-label` },
             children,
             tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
@@ -1040,6 +1062,28 @@ const Checklist = (_a) => {
         }))));
 };
 
+const getBackgroundColor$2 = (props) => {
+    if (props.$isWarningError) {
+        return '#fcf1c9';
+    }
+    else if (props.$invalid && props.$isInvalidRedBackground) {
+        return '#ffe5e5';
+    }
+    else {
+        return props.$readOnly ? '#f5f5f5' : '#ffffff';
+    }
+};
+const getBorderColor$2 = (props) => {
+    if (props.$isWarningError) {
+        return 'Orange';
+    }
+    else if (props.$invalid) {
+        return Colors.RED.Hex;
+    }
+    else {
+        return '#cccccc';
+    }
+};
 const Wrapper$a = styled.div `
   border-radius: 4px;
   height: 40px;
@@ -1048,8 +1092,8 @@ const Wrapper$a = styled.div `
   cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
   border-width: 1px;
   border-style: solid;
-  border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
-  background-color: ${props => props.$invalid && props.$isInvalidRedBackground ? '#ffe5e5' : '#ffffff'};
+  border-color: ${props => getBorderColor$2(props)};
+  background-color: ${props => getBackgroundColor$2(props)};
   border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
   flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
   box-sizing: border-box;
@@ -1105,7 +1149,7 @@ const SearchInput$1 = styled.input `
   white-space: nowrap;
 `;
 const Select = (_a) => {
-    var { options, optionGroups, placeholder = '--Select-One--', readOnly, invalid, searchable = false, value: propValue, onChange, style, tabIndex, dataItemid, isInvalidRedBackground = false } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style", "tabIndex", "dataItemid", "isInvalidRedBackground"]);
+    var { options, optionGroups, placeholder = '--Select-One--', readOnly, invalid, searchable = false, value: propValue, onChange, style, tabIndex, dataItemid, isInvalidRedBackground = false, isWarningError = false } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style", "tabIndex", "dataItemid", "isInvalidRedBackground", "isWarningError"]);
     const [searchTerm, setSearchTerm] = React.useState('');
     const [value, setValue] = React.useState(propValue || '');
     const baseId = dataItemid || 'select';
@@ -1128,7 +1172,7 @@ const Select = (_a) => {
     const filteredOptionGroups = searchable
         ? optionGroups === null || optionGroups === void 0 ? void 0 : optionGroups.map(group => (Object.assign(Object.assign({}, group), { options: group.options.filter(option => { var _a; return (_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchTerm.toLowerCase()); }) })))
         : optionGroups;
-    return (React.createElement(Wrapper$a, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "$readOnly": readOnly, "$style": style, "data-itemid": `${baseId}-wrapper` },
+    return (React.createElement(Wrapper$a, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "$isWarningError": isWarningError, "$readOnly": readOnly, "$style": style, "data-itemid": `${baseId}-wrapper` },
         searchable && (React.createElement(SearchInput$1, Object.assign({ "data-itemid": `${baseId}-search-input`, onChange: handleSearch, placeholder: placeholder, tabIndex: readOnly ? -1 : tabIndex, type: 'text', value: searchTerm }, accessibleProps))),
         React.createElement(Trigger$1, Object.assign({ "data-itemid": `${baseId}-trigger`, disabled: readOnly, onChange: handleChange, placeholder: placeholder, tabIndex: readOnly ? -1 : tabIndex, value: value }, accessibleProps),
             placeholder && !value && (React.createElement("option", { "data-itemid": `${baseId}-placeholder`, disabled: true, value: '' }, placeholder)),
@@ -1244,7 +1288,7 @@ const Scrim$1 = styled.div `
   z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
   background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
 `;
-const Container$2 = styled.div `
+const Container$3 = styled.div `
   z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
   min-width: 400px;
   width: ${({ $width }) => $width || '400px'};
@@ -1313,7 +1357,7 @@ const Drawer = (_a) => {
     }, [onClose]);
     const baseId = dataItemid || 'drawer';
     return (React.createElement(React.Fragment, null,
-        React.createElement(Container$2, Object.assign({}, accessibleProps, { "$position": position, "$width": width, "data-itemid": `${baseId}-container` }),
+        React.createElement(Container$3, Object.assign({}, accessibleProps, { "$position": position, "$width": width, "data-itemid": `${baseId}-container` }),
             React.createElement(Header$2, { "data-itemid": `${baseId}-header` },
                 React.createElement("div", { "data-itemid": `${baseId}-header-content` },
                     title ? (React.createElement(Heading, { "data-itemid": `${baseId}-title`, type: 'secondary' }, title)) : null,
@@ -1818,6 +1862,28 @@ const StyledSuffix = styled.div `
   font-size: ${FontSizes.DEFAULT};
   color: ${Colors.BLACK.Hex};
 `;
+const getBackgroundColor$1 = (props) => {
+    if (props.$isWarningError) {
+        return '#fcf1c9';
+    }
+    else if (props.$invalid && props.$isInvalidRedBackground) {
+        return '#ffe5e5';
+    }
+    else {
+        return props.$readOnly ? '#f5f5f5' : '#ffffff';
+    }
+};
+const getBorderColor$1 = (props) => {
+    if (props.$isWarningError) {
+        return 'Orange';
+    }
+    else if (props.$invalid) {
+        return Colors.RED.Hex;
+    }
+    else {
+        return '#cccccc';
+    }
+};
 const StyledWrapper = styled.div `
   display: flex;
   width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
@@ -1825,8 +1891,8 @@ const StyledWrapper = styled.div `
   position: relative;
   border-width: 1px;
   border-style: solid;
-  border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
-  background-color: ${props => props.$invalid && props.$isInvalidRedBackground ? '#ffe5e5' : '#ffffff'};
+  border-color: ${props => getBorderColor$1(props)};
+  background-color: ${props => getBackgroundColor$1(props)};
   border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
 
   &:focus-within {
@@ -1892,7 +1958,7 @@ const Loader$1 = styled.div `
 const Input$1 = (_a) => {
     var { format, suffix, height, invalid, loading, max, maxLength, min, onBlur, onChange, onFocus, onKeyDown, 
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onSuggestedSelect = () => { }, placeholder, readOnly, showCharCount, step, style, suggestedValues, showErrorTextColor = false, type = 'text', value = '', innerRef = null, tabIndex, isAutoComplete = false, dataItemid, mask, onPaste, autoComplete, isInvalidRedBackground = false } = _a, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "loading", "max", "maxLength", "min", "onBlur", "onChange", "onFocus", "onKeyDown", "onSuggestedSelect", "placeholder", "readOnly", "showCharCount", "step", "style", "suggestedValues", "showErrorTextColor", "type", "value", "innerRef", "tabIndex", "isAutoComplete", "dataItemid", "mask", "onPaste", "autoComplete", "isInvalidRedBackground"]);
+    onSuggestedSelect = () => { }, placeholder, readOnly, showCharCount, step, style, suggestedValues, showErrorTextColor = false, type = 'text', value = '', innerRef = null, tabIndex, isAutoComplete = false, dataItemid, mask, onPaste, autoComplete, isInvalidRedBackground = false, isWarningError = false } = _a, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "loading", "max", "maxLength", "min", "onBlur", "onChange", "onFocus", "onKeyDown", "onSuggestedSelect", "placeholder", "readOnly", "showCharCount", "step", "style", "suggestedValues", "showErrorTextColor", "type", "value", "innerRef", "tabIndex", "isAutoComplete", "dataItemid", "mask", "onPaste", "autoComplete", "isInvalidRedBackground", "isWarningError"]);
     const [show_options, setShowOptions] = React.useState(false);
     const [internalValue, setInternalValue] = React.useState(value);
     const [internalSuggestedValues, setInternalSuggestedValues] = React.useState(suggestedValues || []);
@@ -1968,7 +2034,7 @@ const Input$1 = (_a) => {
         formatted_value = formatAsMask(internalValue, mask);
     }
     const baseId = dataItemid || 'input';
-    return type === 'textarea' ? (React.createElement(StyledWrapper, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length, "data-itemid": `${baseId}-wrapper`, style: style },
+    return type === 'textarea' ? (React.createElement(StyledWrapper, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "$isWarningError": isWarningError, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length, "data-itemid": `${baseId}-wrapper`, style: style },
         React.createElement(StyledTextArea, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, "$showErrorTextColor": showErrorTextColor, autoComplete: autoComplete, maxLength: maxLength, onBlur: readOnly
                 ? e => e.preventDefault()
                 : e => {
@@ -1991,7 +2057,7 @@ const Input$1 = (_a) => {
             React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: js.mdiLoading, size: '20px', spin: true }))) : null,
         showCharCount ? (React.createElement(CharacterCount, { "data-itemid": `${baseId}-char-count` },
             internalValue.length,
-            maxLength ? ` / ${maxLength}` : null)) : null)) : (React.createElement(StyledWrapper, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length, "data-itemid": `${baseId}-wrapper`, style: style },
+            maxLength ? ` / ${maxLength}` : null)) : null)) : (React.createElement(StyledWrapper, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "$isWarningError": isWarningError, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length, "data-itemid": `${baseId}-wrapper`, style: style },
         React.createElement(StyledInput, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, "$showErrorTextColor": showErrorTextColor, autoComplete: autoComplete, max: max, maxLength: maxLength, min: min, onBlur: readOnly
                 ? e => e.preventDefault()
                 : e => {
@@ -2137,6 +2203,7 @@ const StepLine = styled.div `
   background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
   transition: background-color 0.5s ease-in-out;
 `;
+const Container$2 = styled.div ``;
 const ProgressBarFill = styled.div `
   width: 110px;
   height: 8px;
@@ -2146,8 +2213,7 @@ const ProgressBarFill = styled.div `
   position: relative;
   overflow: hidden;
 
-  &::after {
-    content: '${props => (props.$percent === 0 ? '0' : props.$percent)}%';
+.progress-percentage  {
     position: absolute;
     top: 55%;
     left: ${props => props.$percent >= 83 ? 'calc(100% - 25px)' : `calc(${props.$percent}% + 10px)`};
@@ -2159,8 +2225,7 @@ const ProgressBarFill = styled.div `
     transition: left 0.5s ease-in-out;
   }
 
-  &::before {
-    content: '';
+ .progress-bar-fill {
     position: absolute;
     top: 0;
     left: 0;
@@ -2181,7 +2246,11 @@ const ProgressBar = ({ steps, showStepLine = false, dataItemid }) => {
                     React.createElement(StyledIcon$2, { "data-itemid": `${stepId}-icon`, path: js.mdiCheckboxMarkedCircleOutline, size: '32px' }))) : (React.createElement(StepIndicator, { "$active": step.active, "data-itemid": `${stepId}-indicator` }, i + 1)),
                 React.createElement(StepLabel, { "data-itemid": `${stepId}-label` },
                     step.label,
-                    step.percentComplete !== undefined && (React.createElement(ProgressBarFill, { "$percent": step.percentComplete, "data-itemid": `${stepId}-fill` }))))));
+                    step.percentComplete !== undefined && (React.createElement(ProgressBarFill, { "$percent": step.percentComplete, "data-itemid": `${stepId}-fill` },
+                        React.createElement(Container$2, { className: 'progress-bar-fill' }),
+                        React.createElement(Container$2, { className: 'progress-percentage', "data-itemid": `${stepId}-percentage` },
+                            step.percentComplete,
+                            "%")))))));
     })));
 };
 
@@ -2538,6 +2607,28 @@ const Input = styled.input `
     background-color: ${Colors.MEDIUM_GRAY.Hex};
   }
 `;
+const getBackgroundColor = (props) => {
+    if (props.$isWarningError) {
+        return '#fcf1c9';
+    }
+    else if (props.$invalid && props.$isInvalidRedBackground) {
+        return '#ffe5e5';
+    }
+    else {
+        return '#ffffff';
+    }
+};
+const getBorderColor = (props) => {
+    if (props.$isWarningError) {
+        return 'Orange';
+    }
+    else if (props.$invalid) {
+        return Colors.RED.Hex;
+    }
+    else {
+        return Colors.GRAY.Hex;
+    }
+};
 const Check = styled.span `
   height: 17px;
   width: 17px;
@@ -2545,8 +2636,8 @@ const Check = styled.span `
   background-color: #fff;
   border-width: 2px;
   border-style: solid;
-  border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
-  background-color: ${props => props.$invalid && props.$isInvalidRedBackground ? '#ffe5e5' : '#ffffff'};
+  border-color: ${props => getBorderColor(props)};
+  background-color: ${props => getBackgroundColor(props)};
   box-sizing: border-box;
   position: relative;
   &:after {
@@ -2570,11 +2661,11 @@ const Label = styled.span `
   margin-left: 6px;
 `;
 const Radio = (_a) => {
-    var { children, disabled, checked, onChange, value, invalid, tooltip, tabIndex, dataItemid, isInvalidRedBackground = false } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip", "tabIndex", "dataItemid", "isInvalidRedBackground"]);
+    var { children, disabled, checked, onChange, value, invalid, tooltip, tabIndex, dataItemid, isInvalidRedBackground = false, isWarningError = false } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip", "tabIndex", "dataItemid", "isInvalidRedBackground", "isWarningError"]);
     const baseId = dataItemid || 'radio';
     return (React.createElement(Wrapper$2, Object.assign({}, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
         React.createElement(Input, { checked: checked, "data-itemid": `${baseId}-input`, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, tabIndex: disabled ? -1 : tabIndex, type: 'radio', value: value }),
-        React.createElement(Check, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "data-itemid": `${baseId}-check` }),
+        React.createElement(Check, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "$isWarningError": isWarningError, "data-itemid": `${baseId}-check` }),
         React.createElement(Label, { "data-itemid": `${baseId}-label` },
             children,
             tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));