@pega/react-sdk-overrides 0.25.4 → 0.25.6

package/lib/designSystemExtension/Banner/Banner.tsx

@@ -38,10 +38,13 @@ export default function Banner(props: BannerProps) {
         </div>
       </div>
       <Grid2 container size={12} className='banner-layout' spacing={1}>
-        <Grid2 size={{ xs: variantMap[variant][0] }} style={{ padding: '1em' }}>
+        <Grid2
+          size={{ xs: variantMap[variant][0] }}
+          style={{ padding: '1rem', backgroundColor: 'var(--app-form-bg-color)', borderRadius: '16px', height: 'fit-content' }}
+        >
           {a}
         </Grid2>
-        <Grid2 size={{ xs: variantMap[variant][1] }} style={{ padding: '1em' }}>
+        <Grid2 size={{ xs: variantMap[variant][1] }} style={{ padding: '0rem 1rem' }}>
           {b}
         </Grid2>
       </Grid2>

package/lib/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx

@@ -223,7 +223,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
 
   // Whenever theFieldsToRender changes, update theFieldsAsGridItems that's used during render
   useEffect(() => {
-    const arGridItems = theFieldsToRender.map((field: any) => {
+    const arGridItems = theFieldsToRender?.map((field: any) => {
       // display the field when either visibility property doesn't exist or is true(if exists)
       if (field.config.visibility === undefined || field.config.visibility === true) {
         return (

package/lib/designSystemExtension/RichTextEditor/RichTextEditor.tsx

@@ -2,7 +2,6 @@ import React, { forwardRef } from 'react';
 import { Editor } from '@tinymce/tinymce-react';
 import { FormControl, FormHelperText, InputLabel, useTheme } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
-
 import { useAfterInitialEffect, useConsolidatedRef, useUID } from '@pega/react-sdk-components/lib/hooks';
 
 const useStyles = makeStyles(theme => ({
@@ -88,7 +87,7 @@ const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorP
         initialValue={defaultValue}
         disabled={disabled}
         init={{
-          skin: 'oxide-dark', // or 'oxide' for light theme
+          skin: theme.palette.mode === 'dark' ? 'oxide-dark' : 'oxide',
           // ...other TinyMCE config...
           content_style: `
             body {
@@ -110,6 +109,10 @@ const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorP
               font-size: 1em;
               font-family: inherit;
             }
+            .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
+              color: ${theme.palette.text.secondary};
+              opacity: 0.7;
+            }
             /* Add more styles as needed */
           `,
           placeholder,

package/lib/designSystemExtension/WssQuickCreate/WssQuickCreate.css

@@ -1,36 +1,29 @@
 .quick-link-ul-list {
   list-style: none;
   padding: 0;
-  grid-template-columns: repeat(auto-fill, minmax(min(40ch, 100%), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
   display: grid;
   gap: calc(1rem);
 }
 
-.quick-link-list {
-  background-color: var(--link-button-color);
-  color: var(--app-text-color);
-  border-radius: 8px;
-}
-
 .quick-link-button {
   text-transform: capitalize !important;
   font-size: 16px !important;
   color: var(--app-text-color) !important;
-  padding: calc(0.5rem * 2) !important;
-  height: 6rem;
+  height: 10rem;
   width: 100%;
-  justify-content: start !important;
 }
 
 .quick-link-icon {
-  width: 1em;
-  height: 1em;
   flex-shrink: 0;
-  filter: var(--svg-color);
+  object-fit: contain;
+  width: 3rem;
+  height: 3rem;
 }
 
 .quick-link-button-span {
   display: flex;
+  flex-direction: column;
   align-items: center;
   gap: 0.5rem;
 }

package/lib/designSystemExtension/WssQuickCreate/WssQuickCreate.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 import './WssQuickCreate.css';
 
 // WssQuickCreate is one of the few components that does NOT have getPConnect.
@@ -9,8 +10,18 @@ interface WssQuickCreateProps {
   actions?: any[];
 }
 
+const useStyles = makeStyles(theme => ({
+  quickLinkList: {
+    backgroundColor: theme.palette.mode === 'dark' ? 'var(--app-background-color)' : 'var(--link-button-color)',
+    color: 'var(--app-text-color)',
+    borderRadius: '16px',
+    border: '1px solid var(--app-primary-color)'
+  }
+}));
+
 export default function WssQuickCreate(props: WssQuickCreateProps) {
   const { heading, actions } = props;
+  const classes = useStyles();
 
   return (
     <div>
@@ -21,7 +32,7 @@ export default function WssQuickCreate(props: WssQuickCreateProps) {
         {actions &&
           actions.map(element => {
             return (
-              <li className='quick-link-list' key={element.label}>
+              <li className={classes.quickLinkList} key={element.label}>
                 <Button className='quick-link-button' onClick={element.onClick}>
                   <span className='quick-link-button-span'>
                     {element.icon && <img className='quick-link-icon' src={element.icon} />}

package/lib/field/Group/Group.tsx

@@ -1,6 +1,6 @@
 import { type ReactElement, useMemo } from 'react';
 import Grid2 from '@mui/material/Grid2';
-import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface GroupProps extends PConnFieldProps {
@@ -13,6 +13,8 @@ interface GroupProps extends PConnFieldProps {
 }
 
 export default function Group(props: GroupProps) {
+  const FieldGroup = getComponentFromMap('FieldGroup');
+
   const { children, heading, showHeading, instructions, collapsible, displayMode, type } = props;
 
   const isReadOnly = displayMode === 'DISPLAY_ONLY';

package/lib/field/Location/Location.css

@@ -0,0 +1,4 @@
+/* Support for google map autocomplete */
+.pac-container {
+  z-index: 2147483647;
+}

package/lib/field/Location/Location.tsx

@@ -8,6 +8,8 @@ import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpe
 import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 
+import './Location.css';
+
 interface LocationProps extends PConnFieldProps {
   coordinates?: string;
   onlyCoordinates?: boolean;

package/lib/field/RadioButtons/RadioButtons.tsx

@@ -108,7 +108,7 @@ export default function RadioButtons(props: RadioButtonsProps) {
     return (
       <div>
         <h4 style={{ marginTop: 0, marginBottom: 0 }}>{label}</h4>
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 40ch), 1fr))', gridAutoRows: '1fr', gap: '0.5rem' }}>
+        <div id='selectable-card' style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(200px, 100%), 1fr))', gap: '1rem' }}>
           <SelectableCard
             hideFieldLabels={hideFieldLabels}
             additionalProps={additionalProps}

package/lib/field/RichText/RichText.css

@@ -0,0 +1,79 @@
+.tox .tox-toolbar {
+  background-color: var(--app-background-color) !important;
+}
+
+.tox .tox-toolbar__primary {
+  background-color: var(--app-background-color) !important;
+}
+
+.tox .tox-toolbar__button {
+  color: var(--app-text-color) !important;
+}
+
+.tox .tox-toolbar__button--enabled {
+  background: var(--app-primary-color) !important;
+  color: #fff !important;
+}
+
+.tox .tox-dialog {
+  background-color: var(--modal-top-color) !important;
+  color: var(--app-text-color) !important;
+  border: 1px solid var(--modal-border-color) !important;
+  padding: 20px !important;
+  box-shadow: 0 0 10px 3px var(--modal-box-shadow-color) !important;
+}
+
+.tox .tox-dialog__header {
+  background-color: var(--modal-top-color) !important;
+  color: var(--app-text-color) !important;
+  font-weight: 500;
+  border-bottom: 1px solid var(--modal-border-color);
+}
+
+.tox .tox-dialog__footer {
+  background: transparent !important;
+  border-top: 1px solid var(--modal-border-color);
+}
+
+.tox .tox-dialog-wrap__backdrop {
+  background-color: var(--modal-background-color) !important;
+}
+
+.tox .tox-dialog__body input,
+.tox .tox-dialog__body textarea,
+.tox .tox-dialog__body select {
+  background: initial !important;
+  color: var(--app-text-color) !important;
+  border: 1px solid var(--app-neutral-color) !important;
+  border-radius: 4px !important;
+  padding: 6px 10px !important;
+  font-size: 1em !important;
+  font-family: inherit !important;
+}
+
+.tox .tox-dialog__body button {
+  background: transparent;
+  color: #fff !important;
+  border: none !important;
+  border-radius: 4px !important;
+  padding: 8px 16px !important;
+  font-size: 1em !important;
+  cursor: pointer !important;
+}
+
+.tox .tox-dialog__footer .tox-button {
+  background: var(--app-primary-color) !important;
+  color: #fff !important;
+  border: none !important;
+  border-radius: 4px !important;
+  padding: 8px 16px !important;
+  font-size: 1em !important;
+  cursor: pointer !important;
+}
+
+.tox .tox-dialog__footer .tox-button--secondary {
+  background: var(--app-secondary-color) !important;
+  color: var(--secondary-button-text-color) !important;
+  font-size: 0.875rem !important;
+  cursor: pointer !important;
+}

package/lib/field/RichText/RichText.tsx

@@ -4,6 +4,8 @@ import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
+import './RichText.css';
+
 interface RichTextProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextArea here
   additionalProps?: object;

package/lib/field/SelectableCard/SelectableCard.tsx

@@ -74,7 +74,7 @@ export default function SelectableCard(props) {
         }
 
         const component = (
-          <div style={{ paddingTop: '15px' }}>
+          <div key={item[recordKey]} style={{ paddingTop: '15px' }}>
             <Card className={className} style={{ display: 'flex', flexDirection: 'column', height: '100%' }} data-testid={testId}>
               <CardContent
                 style={{
@@ -93,7 +93,7 @@ export default function SelectableCard(props) {
                       alt={image.alt}
                       style={{
                         width: '100%',
-                        backgroundColor: 'rgb(233, 238, 243)',
+                        backgroundColor: 'transparent',
                         aspectRatio: '16 / 9',
                         maxHeight: '100%',
                         height: '100%',
@@ -152,7 +152,7 @@ export default function SelectableCard(props) {
                         margin: '5px'
                       }}
                     >
-                      <div style={{ color: 'rgba(0, 0, 0, 0.6)' }}>{field.name}</div>
+                      {field.name && <div>{field.name}</div>}
                       <div>{field?.value?.props.value}</div>
                     </div>
                   ))}

package/lib/field/SelectableCard/utils.tsx

@@ -2,10 +2,6 @@ import { Link } from '@mui/material';
 
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 
-export const getResolvedConstantValue = (pConnect, key) => {
-  return pConnect.getValue(PCore.getResolvedConstantValue(key)) || pConnect.getValue(key);
-};
-
 export const resolveReferencedPConnect = pConnect => {
   if (!pConnect || !pConnect.meta) return undefined;
   const type = pConnect?._type ?? undefined;

package/lib/field/SemanticLink/SemanticLink.tsx

@@ -202,7 +202,7 @@ export default function SemanticLink(props: SemanticLinkProps) {
 
   return (
     <Link component='button' {...linkComponentProps} {...restProps} onClick={openLinkClick} data-testid={testId}>
-      {text}
+      {text || '--'}
     </Link>
   );
 }

package/lib/field/UserReference/UserReference.tsx

@@ -4,7 +4,6 @@ import { Typography } from '@mui/material';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 import { getUserId, isUserNameAvailable } from './UserReferenceUtils';
 
 const DROPDOWN_LIST = 'Drop-down list';
@@ -34,6 +33,7 @@ const UserReference = (props: UserReferenceProps) => {
   // Get emitted components from map (so we can get any override that may exist)
   const AutoComplete = getComponentFromMap('AutoComplete');
   const Dropdown = getComponentFromMap('Dropdown');
+  const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
     label = '',

package/lib/helpers/attachmentShared.ts

@@ -0,0 +1,6 @@
+const megabyteSize = 1048576;
+
+export const validateMaxSize = (fileObj: Record<string, number>, maxSizeInMB: string) => {
+  const fileSize = (fileObj.size / megabyteSize).toFixed(2);
+  return parseFloat(fileSize) < parseFloat(maxSizeInMB);
+};

package/lib/helpers/formatters/Currency.ts

@@ -1,10 +1,14 @@
 import { getLocale } from './common';
 import CurrencyMap from './CurrencyMap';
 
+const isValidValue = value => {
+  return value !== null && value !== undefined && value !== '';
+};
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function NumberFormatter(value, { locale = 'en-US', decPlaces = 2, style = '', currency = 'USD' } = {}): string {
   const currentLocale: string | undefined = getLocale(locale);
-  if (value !== null && value !== undefined) {
+  if (isValidValue(value)) {
     return Number(value).toLocaleString(currentLocale, { minimumFractionDigits: decPlaces, maximumFractionDigits: decPlaces });
   }
   return value;
@@ -16,7 +20,7 @@ function CurrencyFormatter(
 ): string {
   const currentLocale: string | undefined = getLocale(locale);
   let formattedValue: string = value;
-  if (value !== null && value !== undefined && value !== '') {
+  if (isValidValue(value)) {
     formattedValue = NumberFormatter(value, { locale: currentLocale, decPlaces, style, currency });
 
     // For currency other than EUR, we need to determine the country code from currency code
@@ -55,7 +59,7 @@ function CurrencyFormatter(
 
 function SymbolFormatter(value, { symbol = '$', suffix = true, locale = 'en-US' } = {}): string {
   let formattedValue: string = value;
-  if (value !== null && value !== undefined) {
+  if (isValidValue(value)) {
     formattedValue = NumberFormatter(value, { locale });
     return suffix ? `${formattedValue}${symbol}` : `${symbol}${formattedValue}`;
   }
@@ -68,5 +72,6 @@ export default {
   Decimal: (value, options) => NumberFormatter(value, options),
   'Decimal-Auto': (value, options) => NumberFormatter(value, { ...options, decPlaces: Number.isInteger(value) ? 0 : 2 }),
   Integer: (value, options) => NumberFormatter(value, { ...options, decPlaces: 0 }),
-  Percentage: (value, options) => SymbolFormatter(value, { ...options, symbol: '%' })
+  Percentage: (value, options) => SymbolFormatter(value, { ...options, symbol: '%' }),
+  isValidValue
 };

package/lib/helpers/object-utils.ts

@@ -0,0 +1,10 @@
+/**
+ * Returns the value of the key from objectInfo/caseInfo
+ * Added fallback to retrieve from caseInfo if objectInfo not present.
+ * @param pConnect
+ * @param key
+ * @returns the value of key
+ */
+export const getResolvedConstantValue = (pConnect: typeof PConnect, key: string) => {
+  return pConnect.getValue(PCore.getResolvedConstantValue(key)) || pConnect.getValue(key);
+};

package/lib/infra/Assignment/Assignment.tsx

@@ -97,37 +97,44 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
       const oWorkItem = firstChild.props.getPConnect();
       const oWorkData = oWorkItem.getDataObject();
       const oData: any = thePConn.getDataObject(''); // 1st arg empty string until typedefs allow it to be optional
+      const caseInfo = oData?.caseInfo;
+      if (!oWorkData?.caseInfo || oWorkData.caseInfo.assignments === null || !caseInfo) {
+        return;
+      }
 
-      if (oWorkData?.caseInfo && oWorkData.caseInfo.assignments !== null) {
-        const oCaseInfo = oData?.caseInfo;
+      // Set action buttons
+      if (caseInfo.actionButtons) {
+        setActionButtons(caseInfo.actionButtons);
+      }
 
-        if (oCaseInfo && oCaseInfo.actionButtons) {
-          setActionButtons(oCaseInfo.actionButtons);
-        }
+      // Handle navigation setup
+      const navigation = caseInfo.navigation;
+      if (!navigation) {
+        setHasNavigation(false);
+        return;
+      }
 
-        if (oCaseInfo?.navigation /* was oCaseInfo.navigation != null */) {
-          setHasNavigation(true);
+      const isStandardTemplate = navigation.template?.toLowerCase() === 'standard';
+      const hasSingleStep = navigation.steps?.length === 1;
+      const shouldHideNavigation = isStandardTemplate || hasSingleStep;
 
-          if (
-            (oCaseInfo.navigation.template && oCaseInfo.navigation.template.toLowerCase() === 'standard') ||
-            oCaseInfo?.navigation?.steps?.length === 1
-          ) {
-            setHasNavigation(false);
-          } else if (oCaseInfo.navigation.template && oCaseInfo.navigation.template.toLowerCase() === 'vertical') {
-            setIsVertical(true);
-          } else {
-            setIsVertical(false);
-          }
+      setHasNavigation(!shouldHideNavigation);
 
-          if (oCaseInfo?.navigation?.steps) {
-            const steps = JSON.parse(JSON.stringify(oCaseInfo?.navigation?.steps));
-            const formedSteps = getStepsInfo(steps);
-            setArNavigationSteps(formedSteps);
-          }
+      if (shouldHideNavigation) {
+        return;
+      }
 
-          setArCurrentStepIndicies(findCurrentIndicies(arNavigationSteps, arCurrentStepIndicies, 0));
-        }
+      // set vertical navigation
+      const isVerticalTemplate = navigation.template?.toLowerCase() === 'vertical';
+      setIsVertical(isVerticalTemplate);
+
+      if (navigation.steps) {
+        const steps = JSON.parse(JSON.stringify(navigation.steps));
+        const formedSteps = getStepsInfo(steps);
+        setArNavigationSteps(formedSteps);
       }
+
+      setArCurrentStepIndicies(findCurrentIndicies(arNavigationSteps, arCurrentStepIndicies, 0));
     }
   }, [children]);
 

package/lib/infra/Containers/ModalViewContainer/ModalViewContainer.tsx

@@ -96,6 +96,7 @@ const useStyles = makeStyles(theme => ({
     marginBottom: theme.spacing(0)
   },
   dlgContent: {
+    paddingTop: `${theme.spacing(1)} !important`,
     marginLeft: theme.spacing(2),
     marginRight: theme.spacing(2),
     marginTop: theme.spacing(0),
@@ -309,7 +310,7 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
 
   return (
     <>
-      <Dialog open={bShowModal} aria-labelledby='form-dialog-title'>
+      <Dialog open={bShowModal} aria-labelledby='form-dialog-title' maxWidth={false}>
         <DialogTitle id='form-dialog-title' className={`${classes.dlgTitle} psdk-dialog-title`}>
           {title}
         </DialogTitle>

package/lib/infra/MultiStep/MultiStep.css

@@ -79,32 +79,33 @@ mat-horizontal-stepper {
 
 .psdk-vertical-step-icon {
   margin-right: 12px;
-  background-color: var(--app-neutral-color);
-  color: var(--app-text-color);
   border-radius: 50%;
   height: 24px;
   width: 24px;
-  flex-shrink: 0;
   position: relative;
 }
 
-.psdk-vertical-step-icon-content {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+.success .psdk-vertical-step-icon {
+  background-color: var(--stepper-completed-bg-color);
   color: var(--app-text-color);
 }
 
-.psdk-vertical-step-icon-selected {
-  margin-right: 12px;
+.future .psdk-vertical-step-icon {
+  color: var(--app-neutral-color);
+  border: 1px solid var(--app-neutral-color);
+}
+
+.current .psdk-vertical-step-icon {
   background-color: var(--app-primary-color);
   color: var(--app-text-color);
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
   flex-shrink: 0;
-  position: relative;
+}
+
+.psdk-vertical-step-icon-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .psdk-vertical-step-label {
@@ -119,16 +120,8 @@ mat-horizontal-stepper {
   font-weight: 500;
 }
 
-.psdk-vertical-step-label-selected {
-  color: rgba(0, 0, 0, 0.87);
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 50px;
-  vertical-align: middle;
-  font-size: 14px;
-  font-weight: 500;
+.current .psdk-vertical-step-label {
+  color: var(--text-primary-color);
 }
 
 .psdk-vertical-step-body {
@@ -150,7 +143,7 @@ mat-horizontal-stepper {
   border-left-style: solid;
   top: -16px;
   bottom: -16px;
-  border-left-color: rgba(0, 0, 0, 0.12);
+  border-left-color: var(--app-neutral-color);
 }
 
 .psdk-horizontal-stepper {
@@ -162,33 +155,39 @@ mat-horizontal-stepper {
   white-space: nowrap;
   display: flex;
   align-items: center;
-  text-align: left;
 }
 
 .psdk-horizontal-step-header {
-  overflow: hidden;
   outline: none;
   cursor: pointer;
   position: relative;
   box-sizing: content-box;
   display: flex;
   height: 72px;
-  overflow: hidden;
   align-items: center;
-  padding: 0 24px;
 }
 
 .psdk-horizontal-step-icon {
-  background-color: var(--app-neutral-color);
-  color: var(--app-text-color);
+  color: white;
   border-radius: 50%;
   height: 24px;
   width: 24px;
-  flex-shrink: 0;
   position: relative;
-  display: block;
-  margin-right: 8px;
-  flex: none;
+}
+
+.future .psdk-horizontal-step-icon {
+  color: var(--app-neutral-color);
+  border: 1px solid var(--app-neutral-color);
+}
+
+.current .psdk-horizontal-step-icon {
+  color: var(--app-text-color);
+  background-color: var(--app-primary-color);
+}
+
+.success .psdk-horizontal-step-icon {
+  color: var(--app-text-color);
+  background-color: var(--stepper-completed-bg-color);
 }
 
 .psdk-horizontal-step-icon-content {
@@ -199,45 +198,24 @@ mat-horizontal-stepper {
   transform: translate(-50%, -50%);
 }
 
-.psdk-horizontal-step-icon-selected {
-  background-color: var(--app-primary-color);
-  color: var(--app-text-color);
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-  flex-shrink: 0;
-  position: relative;
-  display: block;
-  margin-right: 8px;
-  flex: none;
-}
-
 .psdk-horizontal-step-label {
-  color: rgba(0, 0, 0, 0.54);
-  display: inline-block;
-  min-width: 50px;
-  vertical-align: middle;
+  color: var(--text-secondary-color);
   font-size: 14px;
   font-weight: 500;
   white-space: initial;
 }
 
-.psdk-horizontal-step-label-selected {
-  color: rgba(0, 0, 0, 0.87);
-  display: inline-block;
-  min-width: 50px;
-  vertical-align: middle;
-  font-size: 14px;
-  font-weight: 500;
-  white-space: initial;
+.current .psdk-horizontal-step-label {
+  color: var(--text-primary-color);
+  margin-left: 8px;
 }
 
-.psdk-horizontal-step-line {
-  border-top-color: rgba(0, 0, 0, 0.12);
-  border-top-width: 1px;
-  border-top-style: solid;
+.flex-auto {
   flex: auto;
-  height: 0;
-  margin: 0 -16px;
+}
+
+.psdk-horizontal-step-line {
+  border-top: 1px solid var(--app-neutral-color);
   min-width: 32px;
+  margin: 0px 8px;
 }