@hexure/ui 1.13.51 → 1.13.53

package/dist/cjs/index.js

@@ -1322,67 +1322,67 @@ const Drawer = (_a) => {
 };
 
 const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.$customStyle)));
-const LabelRow = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 0 0 4px 0;
-  box-sizing: border-box;
-`;
-const Label$2 = styled.label `
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 500;
-  line-height: 1.3em;
-  font-family: ${FontStyles.DEFAULT};
-  color: ${Colors.BLACK.Hex};
-  display: flex;
-  align-items: center;
-`;
-const Required = styled.span `
-  color: ${Colors.RED.Hex};
-  margin-left: 4px;
-`;
-const Action = styled.span `
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 500;
-  line-height: 1em;
-  font-family: ${FontStyles.DEFAULT};
-  color: ${props => props.theme.PRIMARY_COLOR.Hex};
-  cursor: pointer;
+const LabelRow = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 0 4px 0;
+  box-sizing: border-box;
+`;
+const Label$2 = styled.label `
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 500;
+  line-height: 1.3em;
+  font-family: ${FontStyles.DEFAULT};
+  color: ${Colors.BLACK.Hex};
+  display: flex;
+  align-items: center;
+`;
+const Required = styled.span `
+  color: ${Colors.RED.Hex};
+  margin-left: 4px;
+`;
+const Action = styled.span `
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 500;
+  line-height: 1em;
+  font-family: ${FontStyles.DEFAULT};
+  color: ${props => props.theme.PRIMARY_COLOR.Hex};
+  cursor: pointer;
 `;
 Action.defaultProps = { theme: EditableTheme };
-const Description = styled.div `
-  font-size: ${FontSizes.SMALL};
-  font-weight: 400;
-  line-height: 1.3em;
-  font-family: ${FontStyles.DEFAULT};
-  color: ${Colors.BLACK.Hex};
-  margin: 0 0 8px 0;
-  box-sizing: border-box;
-`;
-const Validation = styled.div `
-  font-size: ${FontSizes.SMALL};
-  font-weight: 400;
-  line-height: 1.3em;
-  font-family: ${FontStyles.DEFAULT};
-  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 Description = styled.div `
+  font-size: ${FontSizes.SMALL};
+  font-weight: 400;
+  line-height: 1.3em;
+  font-family: ${FontStyles.DEFAULT};
+  color: ${Colors.BLACK.Hex};
+  margin: 0 0 8px 0;
+  box-sizing: border-box;
+`;
+const Validation = styled.div `
+  font-size: ${FontSizes.SMALL};
+  font-weight: 400;
+  line-height: 1.3em;
+  font-family: ${FontStyles.DEFAULT};
+  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,
@@ -1708,154 +1708,181 @@ const formatAsSsn = (number) => {
         formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
     }
     return formatted_value;
+};
+const formatAsMask = (number, mask) => {
+    const formatted_value = `${number}`.replace(/[^0-9.]/g, '');
+    let result = '';
+    const size = formatted_value.length;
+    let valueIndex = 0;
+    if (size > 0) {
+        // Loop through each character of the mask
+        for (let i = 0; i < mask.length; i++) {
+            // Only replace numbers (mask pattern) with the value
+            if (mask[i].match(/\d/)) {
+                // Check if there are still characters left in value to add
+                if (valueIndex < size) {
+                    result += formatted_value[valueIndex];
+                    valueIndex++;
+                }
+            }
+            else if (valueIndex < size) {
+                // Add non-digit characters (like dashes or spaces) directly to the result
+                result += mask[i];
+            }
+        }
+    }
+    else {
+        result = formatted_value;
+    }
+    return result;
 };
 
-const StyledInput = styled.input `
-  border: none !important;
-  background: none !important;
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 400;
-  font-family: ${FontStyles.DEFAULT};
-  line-height: 1.28em;
+const StyledInput = styled.input `
+  border: none !important;
+  background: none !important;
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  font-family: ${FontStyles.DEFAULT};
+  line-height: 1.28em;
   color: ${props => props.$showErrorTextColor && props.$invalid && !props.$readOnly
     ? Colors.RED.Hex
-    : Colors.BLACK.Hex};
-  position: relative;
-  height: ${props => props.$height || 'auto'};
-  padding: 10px;
-  opacity: ${props => (props.$readOnly ? 0.6 : 1)};
-  box-shadow: none;
-  outline: none;
-  margin: 0px;
-  text-indent: 0px;
-  --webkit-appearance: none;
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-`;
-const StyledTextArea = styled.textarea `
-  border: none !important;
-  background: none !important;
-  overflow-y: scroll !important;
-  font-size: 14px;
-  font-weight: 400;
-  height: ${props => props.$height || 'auto'};
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  line-height: 1.28em;
+    : Colors.BLACK.Hex};
+  position: relative;
+  height: ${props => props.$height || 'auto'};
+  padding: 10px;
+  opacity: ${props => (props.$readOnly ? 0.6 : 1)};
+  box-shadow: none;
+  outline: none;
+  margin: 0px;
+  text-indent: 0px;
+  --webkit-appearance: none;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+`;
+const StyledTextArea = styled.textarea `
+  border: none !important;
+  background: none !important;
+  overflow-y: scroll !important;
+  font-size: 14px;
+  font-weight: 400;
+  height: ${props => props.$height || 'auto'};
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  line-height: 1.28em;
   color: ${props => props.$showErrorTextColor && props.$invalid && !props.$readOnly
     ? Colors.RED.Hex
-    : Colors.BLACK.Hex};
-  position: relative;
-  padding: 10px;
-  opacity: 1;
-  box-shadow: none;
-  outline: none;
-  margin: 0px;
-  text-indent: 0px;
-  --webkit-appearance: none;
-  overflow-wrap: break-word;
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
+    : Colors.BLACK.Hex};
+  position: relative;
+  padding: 10px;
+  opacity: 1;
+  box-shadow: none;
+  outline: none;
+  margin: 0px;
+  text-indent: 0px;
+  --webkit-appearance: none;
+  overflow-wrap: break-word;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
   ${({ $readOnly }) => $readOnly &&
-    `
-    background-color: #f0f0f0;
-    color: #999999;
-    overflow-y: scroll;
-  `}
-`;
-const StyledSuffix = styled.div `
-  box-sizing: border-box;
-  border-radius: 0px 4px 4px 0px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 10px;
-  height: auto;
-  background: #f5f5f5;
-  border-width: 0px 0px 0px 1px;
-  border-style: solid;
-  border-color: #cccccc;
-  font-family: ${FontStyles.DEFAULT};
-  font-style: normal;
-  font-weight: 400;
-  font-size: ${FontSizes.DEFAULT};
-  color: ${Colors.BLACK.Hex};
-`;
-const StyledWrapper = styled.div `
-  display: flex;
-  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
-  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
-  position: relative;
-  border-width: 1px;
-  border-style: solid;
-  border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
-  border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
-
-  &:focus-within {
-    border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
-  }
+    `
+    background-color: #f0f0f0;
+    color: #999999;
+    overflow-y: scroll;
+  `}
+`;
+const StyledSuffix = styled.div `
+  box-sizing: border-box;
+  border-radius: 0px 4px 4px 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  height: auto;
+  background: #f5f5f5;
+  border-width: 0px 0px 0px 1px;
+  border-style: solid;
+  border-color: #cccccc;
+  font-family: ${FontStyles.DEFAULT};
+  font-style: normal;
+  font-weight: 400;
+  font-size: ${FontSizes.DEFAULT};
+  color: ${Colors.BLACK.Hex};
+`;
+const StyledWrapper = styled.div `
+  display: flex;
+  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
+  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
+  position: relative;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
+  border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
+
+  &:focus-within {
+    border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
+  }
 `;
 StyledWrapper.defaultProps = { theme: EditableTheme };
-const SuggestedValues = styled.div `
-  background: #fff;
-  box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
-  border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
-  border-radius: 0px 0px 4px 4px;
-  border-style: solid;
-  border-top: none;
-  border-width: 1px;
-  left: -1px;
-  position: absolute;
-  right: -1px;
-  top: 39px;
-  z-index: 9999;
-  max-height: 220px;
-  overflow: auto;
+const SuggestedValues = styled.div `
+  background: #fff;
+  box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
+  border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
+  border-radius: 0px 0px 4px 4px;
+  border-style: solid;
+  border-top: none;
+  border-width: 1px;
+  left: -1px;
+  position: absolute;
+  right: -1px;
+  top: 39px;
+  z-index: 9999;
+  max-height: 220px;
+  overflow: auto;
 `;
 SuggestedValues.defaultProps = { theme: EditableTheme };
-const SuggestedSummary = styled.div `
-  color: ${Colors.MEDIUM_GRAY.Hex};
-  font-size: 12px;
-  font-family: ${FontStyles.DEFAULT};
-  font-weight: 500;
-  line-height: 18px;
-  padding: 10px 12px;
-  border-bottom: 1px solid #e5e5e5;
-  background: #fff;
-  z-index: 1;
-  position: sticky;
-  top: 0px;
-`;
-const SuggestedValue = styled.div `
-  cursor: pointer;
-  padding: 8px 12px;
-  font-size: ${FontSizes.DEFAULT};
-  font-family: ${FontStyles.DEFAULT};
-  font-weight: 400;
-  line-height: 1.6em;
-  color: ${Colors.BLACK.Hex};
-
-  &:hover {
-    background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
-  }
+const SuggestedSummary = styled.div `
+  color: ${Colors.MEDIUM_GRAY.Hex};
+  font-size: 12px;
+  font-family: ${FontStyles.DEFAULT};
+  font-weight: 500;
+  line-height: 18px;
+  padding: 10px 12px;
+  border-bottom: 1px solid #e5e5e5;
+  background: #fff;
+  z-index: 1;
+  position: sticky;
+  top: 0px;
+`;
+const SuggestedValue = styled.div `
+  cursor: pointer;
+  padding: 8px 12px;
+  font-size: ${FontSizes.DEFAULT};
+  font-family: ${FontStyles.DEFAULT};
+  font-weight: 400;
+  line-height: 1.6em;
+  color: ${Colors.BLACK.Hex};
+
+  &:hover {
+    background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
+  }
 `;
 SuggestedValue.defaultProps = { theme: EditableTheme };
-const CharacterCount = styled.div `
-  font-family: ${FontStyles.DEFAULT};
-  font-size: ${FontSizes.SMALL};
-  color: ${Colors.MEDIUM_GRAY.Hex};
-  padding: 10px;
+const CharacterCount = styled.div `
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.SMALL};
+  color: ${Colors.MEDIUM_GRAY.Hex};
+  padding: 10px;
 `;
-const Loader$1 = styled.div `
-  padding: 0px 10px;
-  display: flex;
-  align-items: center;
+const Loader$1 = styled.div `
+  padding: 0px 10px;
+  display: flex;
+  align-items: center;
 `;
 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 } = _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"]);
+    onSuggestedSelect = () => { }, placeholder, readOnly, showCharCount, step, style, suggestedValues, showErrorTextColor = false, type = 'text', value = '', innerRef = null, tabIndex, isAutoComplete = false, dataItemid, mask } = _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"]);
     const [show_options, setShowOptions] = React.useState(false);
     const [internalValue, setInternalValue] = React.useState(value);
     const [internalSuggestedValues, setInternalSuggestedValues] = React.useState(suggestedValues || []);
@@ -1927,8 +1954,11 @@ const Input$1 = (_a) => {
     if (format === 'ssn' && type !== 'password') {
         formatted_value = formatAsSsn(internalValue);
     }
+    if (mask && !format) {
+        formatted_value = formatAsMask(internalValue, mask);
+    }
     const baseId = dataItemid || 'input';
-    return type === 'textarea' ? (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length, "data-itemid": `${baseId}-wrapper` },
+    return type === 'textarea' ? (React.createElement(StyledWrapper, { "$invalid": invalid, "$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, maxLength: maxLength, onBlur: readOnly
                 ? e => e.preventDefault()
                 : e => {
@@ -1948,7 +1978,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, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length, "data-itemid": `${baseId}-wrapper` },
+            maxLength ? ` / ${maxLength}` : null)) : null)) : (React.createElement(StyledWrapper, { "$invalid": invalid, "$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, max: max, maxLength: maxLength, min: min, onBlur: readOnly
                 ? e => e.preventDefault()
                 : e => {
@@ -2042,86 +2072,86 @@ const Loader = ({ dataItemid }) => {
         React.createElement(Path, { d: 'M7.21487 1.2868C7.88431 0.9044 8.73031 0.9044 9.39974 1.2868L9.40283 1.28856L14.4613 4.20761C15.1684 4.598 15.5746 5.33558 15.5746 6.11465V8.99996V11.8853C15.5746 12.6507 15.1632 13.3848 14.4617 13.7721L9.37973 16.7132C8.71029 17.0956 7.86428 17.0956 7.19485 16.7132L7.19088 16.7109L2.11279 13.772C1.40602 13.3816 1 12.6441 1 11.8653V8.98995V6.11465C1 5.31458 1.44381 4.59039 2.10827 4.21051L7.21487 1.2868Z', "data-itemid": `${baseId}-path`, fill: 'none', strokeWidth: '2' })));
 };
 
-const Steps = styled.div `
-  padding: 20px;
-  border-bottom: 1px solid #e7e6e6;
-  background: #f5f5f5;
-  display: flex;
-  gap: 30px;
-  align-items: center;
-`;
-const Step = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-const StyledIcon$2 = styled(Icon) `
-  > path {
-    fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
-  }
+const Steps = styled.div `
+  padding: 20px;
+  border-bottom: 1px solid #e7e6e6;
+  background: #f5f5f5;
+  display: flex;
+  gap: 30px;
+  align-items: center;
+`;
+const Step = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const StyledIcon$2 = styled(Icon) `
+  > path {
+    fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
+  }
 `;
 StyledIcon$2.defaultProps = { theme: EditableTheme };
-const StepIndicator = styled.div `
-  width: 30px;
-  height: 30px;
-  border-radius: 15px;
-  background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
-  color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+const StepIndicator = styled.div `
+  width: 30px;
+  height: 30px;
+  border-radius: 15px;
+  background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
+  color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 `;
 StepIndicator.defaultProps = { theme: EditableTheme };
-const StepLabel = styled.div `
-  color: #000;
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-`;
-const StepLine = styled.div `
-  height: 2px;
-  flex-grow: 1;
-  background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
-  transition: background-color 0.5s ease-in-out;
-`;
-const ProgressBarFill = styled.div `
-  width: 110px;
-  height: 8px;
-  margin-top: 4px;
-  background-color: #e7e6e6;
-  border-radius: 16px;
-  position: relative;
-  overflow: hidden;
-
-  &::after {
-    content: '${props => (props.$percent === 0 ? '0' : props.$percent)}%';
-    position: absolute;
-    top: 55%;
-    left: ${props => props.$percent === 100 ? 'calc(100% - 20px)' : `calc(${props.$percent}% + 10px)`};
-    transform: translate(-50%, -50%);
-    color: ${props => (props.$percent === 100 ? '#fff' : '#757575')};
-    font-family: 'Roboto', Helvetica, Arial, sans-serif;
-    font-size: 8px;
-    font-weight: 600;
-    transition: left 0.5s ease-in-out;
-  }
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: ${props => props.$percent}%;
-    height: 100%;
-    background-color: #1aa836;
-    transition: width 0.5s ease-in-out;
-  }
+const StepLabel = styled.div `
+  color: #000;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+`;
+const StepLine = styled.div `
+  height: 2px;
+  flex-grow: 1;
+  background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
+  transition: background-color 0.5s ease-in-out;
+`;
+const ProgressBarFill = styled.div `
+  width: 110px;
+  height: 8px;
+  margin-top: 4px;
+  background-color: #e7e6e6;
+  border-radius: 16px;
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: '${props => (props.$percent === 0 ? '0' : props.$percent)}%';
+    position: absolute;
+    top: 55%;
+    left: ${props => props.$percent >= 83 ? 'calc(100% - 25px)' : `calc(${props.$percent}% + 10px)`};
+    transform: translate(-50%, -50%);
+    color: ${props => (props.$percent >= 83 ? '#fff' : '#757575')};
+    font-family: 'Roboto', Helvetica, Arial, sans-serif;
+    font-size: 8px;
+    font-weight: 600;
+    transition: left 0.5s ease-in-out;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: ${props => props.$percent}%;
+    height: 100%;
+    background-color: #1aa836;
+    transition: width 0.5s ease-in-out;
+  }
 `;
 const ProgressBar = ({ steps, showStepLine = false, dataItemid }) => {
     const baseId = dataItemid || 'progress-bar';
@@ -2796,6 +2826,7 @@ exports.Tag = Tag;
 exports.Toggle = Toggle;
 exports.Tooltip = Tooltip;
 exports.ZeroState = ZeroState;
+exports.formatAsMask = formatAsMask;
 exports.formatAsPhone = formatAsPhone;
 exports.formatAsSsn = formatAsSsn;
 exports.getAgesFromDob = getAgesFromDob;