@abgov/jsonforms-components 2.32.6 → 2.32.7

package/index.esm.js

@@ -1,7 +1,7 @@
 import * as runtime from 'react/jsx-runtime';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import React, { createContext, useContext, useReducer, useMemo, useEffect, useState, useRef, useCallback } from 'react';
-import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoARadioGroup, GoARadioItem, GoACheckbox, GoAIcon, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoAText, GoABadge, GoATable, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownItem, GoADetails, GoASpinner } from '@abgov/react-components';
+import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoARadioGroup, GoARadioItem, GoACheckbox, GoAIcon, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoABadge, GoAText, GoATable, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownItem, GoADetails, GoASpinner } from '@abgov/react-components';
 import styled from 'styled-components';
 import axios from 'axios';
 import get$1 from 'lodash/get';
@@ -7116,7 +7116,13 @@ let _$6 = t => t,
   _t19,
   _t20,
   _t21,
-  _t22;
+  _t22,
+  _t23,
+  _t24,
+  _t25,
+  _t26,
+  _t27,
+  _t28;
 const ReviewItem = styled.div(_t$6 || (_t$6 = _$6`
   display: flex;
   flex-direction: column;
@@ -7124,7 +7130,63 @@ const ReviewItem = styled.div(_t$6 || (_t$6 = _$6`
     display: none;
   }
 `));
-const ReviewItemSection = styled.div(_t2$4 || (_t2$4 = _$6`
+const CompletionStatus = styled.div(_t2$4 || (_t2$4 = _$6`
+  padding: 0;
+  margin: 0;
+  padding-top: var(--goa-space-xl);
+
+  display: flex;
+  flex-direction: column;
+`));
+const BarTop = styled.div(_t3$3 || (_t3$3 = _$6`
+  display: flex;
+
+
+  .progress-text {
+    margin-left: auto;
+  }
+`));
+const Bar = styled.div(_t4$3 || (_t4$3 = _$6`
+  display: flex;
+  flex-direction: row;
+
+  .progress-container {
+    align-items: flex-start;
+    width: 100%;
+
+    height: 4px;
+    background-color: #e0e0e0;
+    border-radius: 4;
+    overflow: hidden;
+    position: relative;
+    border: 1px solid #ccc;
+    margin-bottom: 20px;
+  }
+
+  .progress-bar {
+    width: 60%;
+    height: 100%;
+    background-color: #004abf;
+    border-radius: 4;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    box-sizing: border-box;
+  }
+
+
+`));
+styled.div(_t5$3 || (_t5$3 = _$6``));
+const BadgeWrapper = styled.div(_t6$2 || (_t6$2 = _$6`
+  margin-left: 10px;
+  margin-top: 7px;
+`));
+const CompletionTextHeader = styled.h3(_t7$1 || (_t7$1 = _$6`
+  display: flex;
+`));
+const ReviewItemSection = styled.div(_t8$1 || (_t8$1 = _$6`
   margin-bottom: var(--goa-space-m);
   padding: var(--goa-space-xl) var(--goa-space-2xl);
   border: 1px solid var(--goa-color-greyscale-300);
@@ -7134,18 +7196,18 @@ const ReviewItemSection = styled.div(_t2$4 || (_t2$4 = _$6`
     max-width: 1600px;
   }
 `));
-const ReviewItemHeader = styled.div(_t3$3 || (_t3$3 = _$6`
+const ReviewItemHeader = styled.div(_t9$1 || (_t9$1 = _$6`
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: var(--goa-space-xl);
 `));
-const ReviewItemTitle = styled.div(_t4$3 || (_t4$3 = _$6`
+const ReviewItemTitle = styled.div(_t0$1 || (_t0$1 = _$6`
   font-size: var(--goa-space-l);
   line-height: var(--goa-space-xl);
   font-weight: 300;
 `));
-const Anchor = styled.div(_t5$3 || (_t5$3 = _$6`
+const Anchor = styled.div(_t1$1 || (_t1$1 = _$6`
   color: #0070c4;
   text-decoration: underline;
   outline: none;
@@ -7156,20 +7218,20 @@ const Anchor = styled.div(_t5$3 || (_t5$3 = _$6`
     background-color: #e6f7ff;
   }
 `));
-styled.div(_t6$2 || (_t6$2 = _$6`
+styled.div(_t10$1 || (_t10$1 = _$6`
   margin-left: var(--goa-space-m);
 `));
-styled.div(_t7$1 || (_t7$1 = _$6`
+styled.div(_t11$1 || (_t11$1 = _$6`
   margin-bottom: var(--goa-space-m);
 `));
-styled.div(_t8$1 || (_t8$1 = _$6`
+styled.div(_t12$1 || (_t12$1 = _$6`
   margin: var(--goa-space-s);
   width: 100%;
 `));
-styled.h3(_t9$1 || (_t9$1 = _$6`
+styled.h3(_t13$1 || (_t13$1 = _$6`
   text-transform: capitalize;
 `));
-const RightAlignmentDiv = styled.div(_t0$1 || (_t0$1 = _$6`
+const RightAlignmentDiv = styled.div(_t14$1 || (_t14$1 = _$6`
   @media screen and (max-width: 767px) {
     margin-bottom: var(--goa-space-l);
   }
@@ -7179,52 +7241,50 @@ const RightAlignmentDiv = styled.div(_t0$1 || (_t0$1 = _$6`
     margin-bottom: var(--goa-space-l);
   }
 `));
-const FormStepperSummaryH3 = styled.h3(_t1$1 || (_t1$1 = _$6`
+const FormStepperSummaryH3 = styled.h3(_t15$1 || (_t15$1 = _$6`
   flex: 1;
   margin-bottom: var(--goa-space-m);
   font-size: var(--goa-font-size-7);
   line-height: var(--goa-line-height-4);
   font-weight: var(--goa-font-weight-regular);
 `));
-const PageRenderPadding = styled.div(_t10$1 || (_t10$1 = _$6`
+const PageRenderPadding = styled.div(_t16$1 || (_t16$1 = _$6`
   margin-top: var(--goa-space-2xl);
 `));
-styled.div(_t11$1 || (_t11$1 = _$6`
+styled.div(_t17$1 || (_t17$1 = _$6`
   margin-bottom: var(--goa-space-2xl);
 `));
-const PageBorder = styled.div(_t12$1 || (_t12$1 = _$6`
+const PageBorder = styled.div(_t18$1 || (_t18$1 = _$6`
   padding: var(--goa-space-m) var(--goa-space-3xl);
 `));
-const TableReviewItemSection = styled.div(_t13$1 || (_t13$1 = _$6`
+const TableReviewItemSection = styled.div(_t19 || (_t19 = _$6`
   .element-style {
     max-width: 1600px;
   }
 `));
-const TableReviewItem = styled.div(_t14$1 || (_t14$1 = _$6`
+const TableReviewItem = styled.div(_t20 || (_t20 = _$6`
   padding: var(--goa-space-xl) var(--goa-space-2xl);
   border: 1px solid var(--goa-color-greyscale-300);
   border-radius: var(--goa-border-radius-xl);
 `));
-const TableReviewPageTitleRow = styled.div(_t15$1 || (_t15$1 = _$6`
+const TableReviewPageTitleRow = styled.div(_t21 || (_t21 = _$6`
   margin-top: var(--goa-space-xl);
   display: flex;
   justify-content: space-between;
 `));
-const TableReviewCategoryLabel = styled.h3(_t16$1 || (_t16$1 = _$6`
+const TableReviewCategoryLabel = styled.h3(_t22 || (_t22 = _$6`
   color: var(--goa-color-text-secondary) !important;
   margin-bottom: var(--goa-space-l);
 `));
-const CategoryStatus = styled.td(_t17$1 || (_t17$1 = _$6`
+const CategoryStatus = styled.td(_t23 || (_t23 = _$6`
   width: var(--goa-space-xl);
   padding-right: var(--goa-space-xl);
   align-content: center;
 `));
-const CompletionStatus = styled.div(_t18$1 || (_t18$1 = _$6`
-  padding: 0;
-  margin: 0;
-  margin-bottom: 0 !important;
+const Center = styled.div(_t24 || (_t24 = _$6`
+  padding-top: 5px;
 `));
-const PageStepperRow = styled.tr(_t19 || (_t19 = _$6`
+const PageStepperRow = styled.tr(_t25 || (_t25 = _$6`
   ${0}
 `), ({
   disabled
@@ -7243,7 +7303,7 @@ const PageStepperRow = styled.tr(_t19 || (_t19 = _$6`
             transition: background-color 0.2s ease-in-out;
           }
         `);
-const SectionHeaderRowTr = styled.tr(_t20 || (_t20 = _$6`
+const SectionHeaderRowTr = styled.tr(_t26 || (_t26 = _$6`
   & > td {
     border: 0 !important;
     padding-top: var(--goa-space-l);
@@ -7255,11 +7315,11 @@ const SectionHeaderRowTr = styled.tr(_t20 || (_t20 = _$6`
     border-top: none !important;
   }
 `));
-const SummaryRowLink = styled.a(_t21 || (_t21 = _$6`
+const SummaryRowLink = styled.a(_t27 || (_t27 = _$6`
   position: relative;
   top: var(--goa-space-xs);
 `));
-const SummaryTd = styled.td(_t22 || (_t22 = _$6`
+const SummaryTd = styled.td(_t28 || (_t28 = _$6`
   border: 0 !important;
   padding: 0 !important;
 `));
@@ -8714,31 +8774,43 @@ $$3({ target: 'Set', proto: true, real: true, forced: !setMethodAcceptSetLike('u
   union: union
 });
 
-const ApplicationStatus = () => {
-  const formStepperCtx = useContext(JsonFormsStepperContext);
-  const {
-    selectNumberOfCompletedCategories
-  } = formStepperCtx;
-  const {
-    categories: allCategories
-  } = formStepperCtx.selectStepperState();
-  const categories = allCategories.filter(c => {
-    var _a, _b, _c, _d;
-    return (c === null || c === void 0 ? void 0 : c.visible) === true && (((_b = (_a = c.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.showInTaskList) || ((_d = (_c = c === null || c === void 0 ? void 0 : c.uischema) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.showInTaskList) === undefined);
+const ApplicationStatus = ({
+  completedGroups,
+  totalGroups
+}) => {
+  const completed = completedGroups;
+  const badge = totalGroups === completed ? jsx(GoABadge, {
+    type: "success",
+    content: "Complete"
+  }) : jsx(GoABadge, {
+    type: "information",
+    content: "Incomplete"
   });
-  const total = categories.length;
-  const completed = selectNumberOfCompletedCategories();
-  const type = total === completed ? 'success' : 'important';
-  const heading = total === completed ? 'Application completed' : 'Application incomplete';
-  const message = `You have completed ${completed} of ${total} sections.`;
-  return jsx(CompletionStatus, {
-    children: jsx(GoACallout, {
-      type: type,
-      heading: heading,
-      size: "medium",
-      maxWidth: '50%',
-      children: message
-    })
+  const mainHeading = 'Application Progress';
+  const progressPercentageAccurate = 100 * completed / totalGroups;
+  return jsxs(CompletionStatus, {
+    children: [jsxs(CompletionTextHeader, {
+      children: [mainHeading, jsx(BadgeWrapper, {
+        children: badge
+      })]
+    }), jsxs(BarTop, {
+      children: [jsxs("div", {
+        children: [completed, " out of ", totalGroups, " items completed"]
+      }), jsxs("div", {
+        className: "progress-text",
+        children: [Math.round(progressPercentageAccurate), "%"]
+      })]
+    }), jsx(Bar, {
+      children: jsx("div", {
+        className: "progress-container",
+        children: jsx("div", {
+          className: "progress-bar",
+          style: {
+            width: `${progressPercentageAccurate}%`
+          }
+        })
+      })
+    })]
   });
 };
 
@@ -8788,11 +8860,15 @@ const getCategoryStatus = category => {
 const getCategoryStatusBadge = category => {
   const status = getCategoryStatus(category);
   const badgeType = status === PageStatus.Complete ? 'success' : 'information';
-  return jsx(GoABadge, {
-    type: badgeType,
-    content: status,
-    ariaLabel: status
-  });
+  return (
+    // <div style={{ paddingTop: '5px' }}>
+    jsx(GoABadge, {
+      type: badgeType,
+      content: status,
+      ariaLabel: status
+    })
+    // </div>
+  );
 };
 
 /* eslint-disable jsx-a11y/anchor-is-valid */
@@ -8814,7 +8890,9 @@ const CategoryRow = ({
     children: [jsx("td", {
       children: category.label
     }, `task-list-${index}-stepper-row-label`), jsx(CategoryStatus, {
-      children: getCategoryStatusBadge(category)
+      children: jsx(Center, {
+        children: getCategoryStatusBadge(category)
+      })
     })]
   }, `task-list-${index}-stepper-row`) : null;
 };
@@ -8845,6 +8923,36 @@ const SummaryRow = ({
   });
 };
 
+function mergeOrphanSections(sections) {
+  const result = [];
+  for (const section of sections) {
+    const hasValidTitle = section.sectionTitle && section.sectionTitle.trim() !== '';
+    if (hasValidTitle) {
+      result.push(Object.assign({}, section, {
+        categories: [...section.categories]
+      }));
+    } else {
+      if (result.length > 0) {
+        result[result.length - 1].categories.push(...section.categories);
+      } else {
+        result.push({
+          sectionTitle: '',
+          categories: [...section.categories]
+        });
+      }
+    }
+  }
+  return result;
+}
+function expandSections(inputArray) {
+  if (!inputArray || inputArray.length === 0) return [];
+  const originalSection = inputArray[0];
+  const categories = originalSection.categories || [];
+  return categories.map((category, index) => ({
+    sectionTitle: `${category.label} Section`,
+    categories: [category]
+  }));
+}
 /* eslint-disable jsx-a11y/anchor-is-valid */
 const TaskList = ({
   categories,
@@ -8855,12 +8963,55 @@ const TaskList = ({
 }) => {
   const testid = 'table-of-contents';
   const sectioned = getCategorySections(categories);
+  const [completedGroups, setCompletedGroups] = useState(0);
+  const [total, setTotal] = useState(sectioned.filter(s => s.categories && s.sectionTitle).length);
+  const shouldShow = cat => {
+    var _a, _b;
+    return ((_b = (_a = cat === null || cat === void 0 ? void 0 : cat.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.showInTaskList) !== false;
+  };
+  const updateCompletion = (group, category, groupIndex) => {
+    let leftIndex = groupIndex;
+    while (leftIndex > 0 && !shouldShow(group[leftIndex - 1])) {
+      leftIndex--;
+    }
+    let rightIndex = groupIndex;
+    while (rightIndex < group.length - 1 && !shouldShow(group[rightIndex + 1])) {
+      rightIndex++;
+    }
+    const currentLocalGroup = group.slice(leftIndex, rightIndex + 1);
+    const modifyCategory = JSON.parse(JSON.stringify(category));
+    modifyCategory.isCompleted = currentLocalGroup.length === currentLocalGroup.filter(cat => cat.isCompleted).length;
+    return modifyCategory;
+  };
   const showInTaskListList = categories.map(cat => {
     var _a, _b, _c, _d;
     return ((_b = (_a = cat === null || cat === void 0 ? void 0 : cat.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.showInTaskList) || ((_d = (_c = cat === null || cat === void 0 ? void 0 : cat.uischema) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.showInTaskList) === undefined;
   });
   let globalIndex = 0;
   let sectionIndex = 1;
+  useEffect(() => {
+    let count = 0;
+    let mergedSections = mergeOrphanSections(sectioned);
+    if (mergedSections.length === 1) {
+      mergedSections = expandSections(mergedSections);
+      setTotal(mergedSections.length);
+    }
+    mergedSections.forEach(({
+      categories: group
+    }) => {
+      let countInGroup = 0;
+      group.forEach((category, groupIndex) => {
+        const modifyCategory = updateCompletion(group, category, groupIndex);
+        if (getCategoryStatus(modifyCategory) === 'Completed') {
+          countInGroup++;
+        }
+      });
+      if (countInGroup === group.length) {
+        count++;
+      }
+    });
+    setCompletedGroups(count);
+  }, [categories, sectioned]); // re-run whenever categories change
   return jsx(PageBorder, {
     children: jsxs("div", {
       "data-testid": testid,
@@ -8869,12 +9020,15 @@ const TaskList = ({
         ml: "xl",
         mb: "xl",
         children: title
-      }), jsx(ApplicationStatus, {}), subtitle && jsx(GoAText, {
+      }), subtitle && jsx(GoAText, {
         size: "heading-l",
         mt: "none",
         mb: "xl",
         ml: "xl",
         children: subtitle
+      }), jsx(ApplicationStatus, {
+        completedGroups: completedGroups,
+        totalGroups: total
       }), jsx(GoATable, {
         width: "100%",
         children: jsxs("tbody", {
@@ -8886,36 +9040,22 @@ const TaskList = ({
               title: sectionTitle,
               index: sectionIndex++
             }, `section-${sectionTitle}`), group.map((category, groupIndex) => {
-              //eslint-disable-next-line
-              const shouldShow = cat => {
-                var _a, _b;
-                return ((_b = (_a = cat === null || cat === void 0 ? void 0 : cat.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.showInTaskList) !== false;
-              };
-              let leftIndex = groupIndex;
-              while (leftIndex > 0 && !shouldShow(group[leftIndex - 1])) {
-                leftIndex--;
-              }
-              let rightIndex = groupIndex;
-              while (rightIndex < group.length - 1 && !shouldShow(group[rightIndex + 1])) {
-                rightIndex++;
-              }
-              const currentLocalGroup = group.slice(leftIndex, rightIndex + 1);
-              const showGroupTaskListList = categories.map(cat => shouldShow(cat));
               const showCurrent = showInTaskListList[globalIndex];
-              const index = globalIndex++;
-              const modifyCategory = JSON.parse(JSON.stringify(category));
-              modifyCategory.isCompleted = currentLocalGroup.length === currentLocalGroup.filter(category => category.isCompleted).length;
+              const idx = globalIndex++; // renamed from `index` to avoid shadowing
               let currentCategory = category;
+              const modifyCategory = updateCompletion(group, category, groupIndex);
+              const showGroupTaskListList = categories.map(cat => shouldShow(cat));
               if (showGroupTaskListList.length > showGroupTaskListList.filter(item => item === true).length) {
                 currentCategory = modifyCategory;
               }
               if (showCurrent) {
                 return jsx(CategoryRow, {
                   category: currentCategory,
-                  index: index,
+                  index: idx,
                   onClick: onClick
-                }, `cat-${category.label}-${index}`);
+                }, `cat-${category.label}-${idx}`);
               }
+              return null;
             })]
           }, index)), jsx(SummaryRow, {
             index: globalIndex,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.32.6",
+  "version": "2.32.7",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

package/src/lib/Controls/FormStepper/ApplicationStatus.d.ts

@@ -1 +1,4 @@
-export declare const ApplicationStatus: () => JSX.Element;
+export declare const ApplicationStatus: ({ completedGroups, totalGroups, }: {
+    completedGroups: number;
+    totalGroups: number;
+}) => JSX.Element;

package/src/lib/Controls/FormStepper/TaskList/categorySections.d.ts

@@ -1,7 +1,6 @@
 import { CategoriesState, CategoryState } from '../context';
-interface SectionMap {
+export interface SectionMap {
     sectionTitle: string;
     categories: CategoryState[];
 }
 export declare const getCategorySections: (categories: CategoriesState) => SectionMap[];
-export {};

package/src/lib/Controls/FormStepper/styled-components.d.ts

@@ -1,4 +1,10 @@
 export declare const ReviewItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CompletionStatus: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const BarTop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Bar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Percentage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const BadgeWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CompletionTextHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
 export declare const ReviewItemSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ReviewItemHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ReviewItemTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
@@ -17,7 +23,7 @@ export declare const TableReviewItem: import("styled-components/dist/types").ISt
 export declare const TableReviewPageTitleRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableReviewCategoryLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
 export declare const CategoryStatus: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
-export declare const CompletionStatus: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Center: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 interface PageStepperRowProps {
     disabled: boolean;
 }