@abgov/jsonforms-components 2.52.1 → 2.52.3

package/index.esm.js

@@ -8532,7 +8532,8 @@ let _$7 = t => t,
   _t25$1,
   _t26$1,
   _t27$1,
-  _t28$1;
+  _t28$1,
+  _t29;
 const DeleteDialogContent = styled.div(_t$8 || (_t$8 = _$7`
   margin-bottom: var(--goa-space-m);
 `));
@@ -8571,7 +8572,7 @@ const RowFlex = styled.div(_t9$1 || (_t9$1 = _$7`
 
   align-items: flex-start;
 `));
-const RowFlexMenu = styled.div(_t0$1 || (_t0$1 = _$7`
+const RowFlexMenuMain = styled.div(_t0$1 || (_t0$1 = _$7`
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -8588,12 +8589,29 @@ const RowFlexMenu = styled.div(_t0$1 || (_t0$1 = _$7`
     border-color: var(--goa-color-greyscale-400);
   }
 `));
-const FlexTabs = styled.div(_t1$1 || (_t1$1 = _$7`
+const RowFlexMenuLeft = styled.div(_t1$1 || (_t1$1 = _$7`
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  border: 1px solid var(--goa-color-greyscale-300);
+  border-radius: var(--goa-border-radius-m);
+  margin-top: var(--goa-space-xs);
+  background-color: var(--goa-color-greyscale-white);
+  padding: 0;
+  gap: 0;
+  position: relative;
+  overflow: visible;
+
+  &:hover {
+    border-color: var(--goa-color-greyscale-400);
+  }
+`));
+const FlexTabs = styled.div(_t10$1 || (_t10$1 = _$7`
   flex-direction: column;
   flex: 1;
   overflow-y: auto !important;
 `));
-const FlexTabsWithMargin = styled.div(_t10$1 || (_t10$1 = _$7`
+const FlexTabsWithMargin = styled.div(_t11$1 || (_t11$1 = _$7`
   flex-direction: column;
   flex: 1;
   overflow-y: auto !important;
@@ -8602,64 +8620,64 @@ const FlexTabsWithMargin = styled.div(_t10$1 || (_t10$1 = _$7`
   flex-shrink: 1;
   // max-height: 500px;
 `));
-const FlexForm = styled.div(_t11$1 || (_t11$1 = _$7`
+const FlexForm = styled.div(_t12$1 || (_t12$1 = _$7`
   flex-direction: column;
   flex: 3;
   flex-shrink: 0;
   overflow-y: visible;
 `));
-const TabName = styled.div(_t12$1 || (_t12$1 = _$7`
+const TabName = styled.div(_t13$1 || (_t13$1 = _$7`
   margin: 1rem 0 1rem 1rem;
   font-weight: 400;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 `));
-const Trash = styled.div(_t13$1 || (_t13$1 = _$7`
+const Trash = styled.div(_t14$1 || (_t14$1 = _$7`
   margin: 0.9rem 0.4rem 0.6rem 0.75rem;
   margin-left: auto;
 `));
-const ListContainer = styled.div(_t14$1 || (_t14$1 = _$7`
+const ListContainer = styled.div(_t15$1 || (_t15$1 = _$7`
   padding: 0 0 0 0;
 `));
-styled.div(_t15$1 || (_t15$1 = _$7`
+styled.div(_t16$1 || (_t16$1 = _$7`
   padding: 0 0 var(--goa-space-l) 0;
 `));
-const UpdateListContainer = styled.div(_t16$1 || (_t16$1 = _$7`
+const UpdateListContainer = styled.div(_t17$1 || (_t17$1 = _$7`
   width: 100%;
   border: 1px solid #dcdcdc;
   padding: var(--goa-space-xl);
 `));
-styled.div(_t17$1 || (_t17$1 = _$7`
+styled.div(_t18$1 || (_t18$1 = _$7`
   padding: 0 1.5rem 0 0;
   border: 1px solid #dcdcdc;
 `));
-const TableTHHeader = styled.th(_t18$1 || (_t18$1 = _$7`
+const TableTHHeader = styled.th(_t19$1 || (_t19$1 = _$7`
   background-color: var(--goa-color-greyscale-100) !important;
   vertical-align: top;
 `));
-const ObjectArrayWarningIconDiv = styled.div(_t19$1 || (_t19$1 = _$7`
+const ObjectArrayWarningIconDiv = styled.div(_t20$1 || (_t20$1 = _$7`
   display: inline-flex;
   align-items: flex-start;
   gap: 0.25rem;
   font-size: var(--goa-font-size-2);
   color: var(--goa-color-interactive-error);
 `));
-const ListWithDetailWarningIconDiv = styled.div(_t20$1 || (_t20$1 = _$7`
+const ListWithDetailWarningIconDiv = styled.div(_t21$1 || (_t21$1 = _$7`
   display: inline-flex;
   align-items: flex-start;
   gap: 0.25rem;
   font-size: var(--goa-font-size-3);
   color: var(--goa-color-interactive-error);
 `));
-styled.label(_t21$1 || (_t21$1 = _$7`
+styled.label(_t22$1 || (_t22$1 = _$7`
   color: var(--goa-color-interactive-error);
   font-weight: var(--goa-font-weight-regular);
   font-size: var(--goa-font-size-3);
   line-height: var(--goa-line-height-1);
   font-style: normal;
 `));
-styled.div(_t22$1 || (_t22$1 = _$7`
+styled.div(_t23$1 || (_t23$1 = _$7`
   margin-top: var(--goa-space-m);
   color: var(--goa-color-interactive-error);
   font-weight: var(--goa-font-weight-regular);
@@ -8667,10 +8685,10 @@ styled.div(_t22$1 || (_t22$1 = _$7`
   line-height: var(--goa-line-height-1);
   font-style: normal;
 `));
-const HilightCellWarning = styled.div(_t23$1 || (_t23$1 = _$7`
-  background-color: var(--goa-color-warning-default);
+const HilightCellWarning = styled.div(_t24$1 || (_t24$1 = _$7`
+  background-color: transparent;
 `));
-const FixTableHeaderAlignment = styled.div(_t24$1 || (_t24$1 = _$7`
+const FixTableHeaderAlignment = styled.div(_t25$1 || (_t25$1 = _$7`
   table thead th:nth-child(3) {
     text-align: center;
   }
@@ -8679,22 +8697,22 @@ const FixTableHeaderAlignment = styled.div(_t24$1 || (_t24$1 = _$7`
     text-align: center;
   }
 `));
-const ListWithDetailsReviewCellDiv = styled.div(_t25$1 || (_t25$1 = _$7`
+const ListWithDetailsReviewCellDiv = styled.div(_t26$1 || (_t26$1 = _$7`
   display: 'flex';
   flex-direction: 'column';
   text-align: 'start';
 `));
-const IconsContainer = styled.div(_t26$1 || (_t26$1 = _$7`
+const IconsContainer = styled.div(_t27$1 || (_t27$1 = _$7`
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: var(--goa-space-xs);
   padding-bottom: var(--goa-space-xs);
 `));
-const TableContentContainer = styled.div(_t27$1 || (_t27$1 = _$7`
+const TableContentContainer = styled.div(_t28$1 || (_t28$1 = _$7`
   padding: var(--goa-space-l);
 `));
-const NoDataMessage = styled.div(_t28$1 || (_t28$1 = _$7`
+const NoDataMessage = styled.div(_t29 || (_t29 = _$7`
   padding: var(--goa-space-xl) var(--goa-space-l);
   color: var(--goa-color-greyscale-700);
   font: var(--goa-typography-body-m);
@@ -9011,40 +9029,52 @@ function getValue(obj, path) {
     return undefined;
   }, obj);
 }
+function prettify$1(prop) {
+  return prop.replace(/([A-Z])/g, ' $1').replace(/[_-]/g, ' ').replace(/^./, c => c.toUpperCase());
+}
 function findLabelForPath(path, uiSchema, schema) {
+  const propertyKey = path.split('.').pop() || path;
+  const fallbackLabel = prettify$1(propertyKey);
   if (!uiSchema) {
-    return path;
+    return fallbackLabel;
   }
   if (isControlElement(uiSchema)) {
     const controlPath = uiSchema.scope ? toDataPath(uiSchema.scope) : '';
     if (controlPath === path) {
+      var _schema$properties;
       const label = uiSchema.label;
-      if (typeof label === 'string') {
+      if (typeof label === 'string' && label.trim()) {
         return label;
       } else if (typeof label === 'object' && label !== null && 'text' in label) {
-        return label.text || path;
+        var _label$text;
+        return ((_label$text = label.text) == null ? void 0 : _label$text.trim()) || fallbackLabel;
+      }
+      if (propertyKey && schema != null && (_schema$properties = schema.properties) != null && _schema$properties[propertyKey]) {
+        const property = schema.properties[propertyKey];
+        if (typeof property === 'object' && 'title' in property && property.title) {
+          return String(property.title);
+        }
       }
-      return path;
+      return fallbackLabel;
     }
   }
   if (isLayoutElement(uiSchema)) {
     for (const element of uiSchema.elements) {
       const label = findLabelForPath(path, element, schema);
-      if (label !== path) {
+      if (label !== fallbackLabel) {
         return label;
       }
     }
   }
   if (schema != null && schema.properties) {
-    const propertyKey = path.split('.').pop();
     if (propertyKey && schema.properties[propertyKey]) {
       const property = schema.properties[propertyKey];
-      if (typeof property === 'object' && 'title' in property) {
-        return String(property.title) || path;
+      if (typeof property === 'object' && 'title' in property && property.title) {
+        return String(property.title);
       }
     }
   }
-  return path;
+  return fallbackLabel;
 }
 function generateSummaryPairs(rowData, detailUiSchema, schema) {
   const paths = extractPaths(detailUiSchema);
@@ -9156,7 +9186,7 @@ const MainItemComponent = ({
         testId: "delete button",
         onClick: () => openDeleteDialog(childPath, rowIndex, displayName)
       }) : null]
-    }), jsx(RowFlexMenu, {
+    }), jsx(RowFlexMenuMain, {
       tabIndex: 0,
       children: jsx(TableContentContainer, {
         children: jsx(SummaryDisplay, {
@@ -9175,9 +9205,6 @@ function getEffectiveInstancePath(error) {
   }
   return error.instancePath;
 }
-function prettify(prop) {
-  return prop.replace(/([A-Z])/g, ' $1').replace(/[_-]/g, ' ').replace(/^./, c => c.toUpperCase());
-}
 function resolveLabel(instancePath, schema, uischema) {
   const prop = instancePath.split('/').filter(Boolean).pop();
   const scope = `#/properties/${prop}`;
@@ -9192,7 +9219,7 @@ function resolveLabel(instancePath, schema, uischema) {
   if (resolvedSchema != null && resolvedSchema.title) {
     return resolvedSchema.title;
   }
-  return prettify(prop || 'Unknown field');
+  return prettify$1(prop || 'Unknown field');
 }
 function ajvPathToSchemaPath(instancePath) {
   const parts = instancePath.split('/').filter(Boolean);
@@ -9284,7 +9311,7 @@ const LeftTab = ({
           }
         }
       },
-      children: jsxs(RowFlexMenu, {
+      children: jsxs(RowFlexMenuLeft, {
         tabIndex: 0,
         children: [jsx(TabName, {
           children: name
@@ -9344,12 +9371,12 @@ const MainTab = ({
           // Fallback: if nestedErrors contain a missingProperty, use it
           const missingFromNested = nestedErrors == null || (_nestedErrors$ = nestedErrors[0]) == null || (_nestedErrors$ = _nestedErrors$.params) == null ? void 0 : _nestedErrors$.missingProperty;
           if (missingFromNested) {
-            acc.fields[field] = prettify(missingFromNested) + ' is required';
+            acc.fields[field] = prettify$1(missingFromNested) + ' is required';
           } else {
             const raw = e.message;
             if (raw && (raw.includes('must have required property') || raw.includes('is a required property'))) {
               const m = raw.match(/'([^']+)'/);
-              if (m && m[1]) acc.fields[field] = prettify(m[1]) + ' is required';else acc.fields[field] = raw;
+              if (m && m[1]) acc.fields[field] = prettify$1(m[1]) + ' is required';else acc.fields[field] = raw;
             } else {
               acc.fields[field] = raw || 'Unknown error';
             }
@@ -9362,12 +9389,12 @@ const MainTab = ({
           var _nestedErrors$2;
           const missingFromNested = nestedErrors == null || (_nestedErrors$2 = nestedErrors[0]) == null || (_nestedErrors$2 = _nestedErrors$2.params) == null ? void 0 : _nestedErrors$2.missingProperty;
           if (missingFromNested) {
-            acc.row = prettify(missingFromNested) + ' is required';
+            acc.row = prettify$1(missingFromNested) + ' is required';
           } else {
             const raw = e == null ? void 0 : e.message;
             if (raw && (raw.includes('must have required property') || raw.includes('is a required property'))) {
               const m = raw.match(/'([^']+)'/);
-              if (m && m[1]) acc.row = prettify(m[1]) + ' is required';else acc.row = raw;
+              if (m && m[1]) acc.row = prettify$1(m[1]) + ' is required';else acc.row = raw;
             } else {
               acc.row = raw || 'Unknown error';
             }
@@ -9381,7 +9408,7 @@ const MainTab = ({
       if (typeof msg === 'string' && (msg.includes('must have required property') || msg.includes('is a required property'))) {
         const propertyMatch = msg.match(/'([^']+)'/);
         if (propertyMatch && propertyMatch[1]) {
-          msg = prettify(propertyMatch[1]) + ' is required';
+          msg = prettify$1(propertyMatch[1]) + ' is required';
         }
       }
       acc.fields[field] = msg;
@@ -10858,6 +10885,9 @@ const DeleteDialog = /*#__PURE__*/React.memo(function DeleteDialog({
   }, 1);
 });
 
+function prettify(prop) {
+  return prop.replace(/([A-Z])/g, ' $1').replace(/[_-]/g, ' ').replace(/^./, c => c.toUpperCase());
+}
 /**
  * Extract Json data schema name attribute and the ui schema label name.
  * @param obj
@@ -10871,20 +10901,33 @@ const extractNames = (obj, names = {}) => {
     const typedObj = obj;
     if (typeof typedObj.scope === 'string') {
       const parts = typedObj.scope.split('/');
-      if (typeof typedObj.label === 'string') {
-        names[parts[parts.length - 1]] = typedObj.label;
-      } else if (typeof typedObj.scope === 'string') {
-        const _parts = typedObj.scope.split('/');
-        names[_parts[_parts.length - 1]] = _parts[_parts.length - 1];
+      const key = parts[parts.length - 1];
+      if (typeof typedObj.label === 'string' && typedObj.label.trim()) {
+        names[key] = typedObj.label;
+      } else if (typeof typedObj.label === 'object' && typedObj.label !== null && 'text' in typedObj.label && typeof typedObj.label.text === 'string' && typedObj.label.text.trim()) {
+        names[key] = typedObj.label.text;
+      } else {
+        names[key] = prettify(key);
       }
     }
     Object.values(typedObj).forEach(value => extractNames(value, names));
   }
   return names;
 };
+function getHeaderLabel(headName, itemsSchema, columnLabels) {
+  if (columnLabels != null && columnLabels[headName]) {
+    return columnLabels[headName];
+  }
+  const fieldSchema = itemsSchema == null ? void 0 : itemsSchema[headName];
+  if (fieldSchema && typeof fieldSchema.title === 'string' && fieldSchema.title.trim()) {
+    return fieldSchema.title;
+  }
+  return prettify(headName);
+}
 const DataTable = ({
   itemsSchema,
-  data
+  data,
+  columnLabels
 }) => {
   var _Object$keys;
   return jsxs(GoabTable, {
@@ -10893,7 +10936,7 @@ const DataTable = ({
       children: jsx("tr", {
         children: itemsSchema && ((_Object$keys = Object.keys(itemsSchema)) == null ? void 0 : _Object$keys.map((headNames, ix) => {
           return jsx("th", {
-            children: headNames
+            children: getHeaderLabel(headNames, itemsSchema, columnLabels)
           }, ix);
         }))
       })
@@ -10969,9 +11012,12 @@ const renderCellColumn = ({
         });
       }
     } else {
+      const firstRow = Array.isArray(data) ? data[0] : undefined;
+      const columnLabels = extractNames(firstRow);
       return jsx(DataTable, {
         itemsSchema: data[0],
-        data: data
+        data: data,
+        columnLabels: columnLabels
       });
     }
   }
@@ -11365,7 +11411,7 @@ const ObjectArrayList = ({
   }, 0);
 };
 const ObjectArrayControl = props => {
-  var _uischema$options5, _registers$categories3, _registers$categories4;
+  var _registers$categories, _registers$categories2, _registers$categories3, _registers$categories4, _uischema$options5;
   const [registers, dispatch] = useReducer(objectListReducer, initialState);
   const [open, setOpen] = useState(false);
   const [rowData, setRowData] = useState(0);
@@ -11386,7 +11432,9 @@ const ObjectArrayControl = props => {
       isStepperReview
     } = props,
     additionalProps = _objectWithoutPropertiesLoose(props, _excluded$3);
-  const parsedData = data;
+  const parsedData = Array.isArray(data) ? data : [];
+  const latestData = Array.isArray(data) ? Object.fromEntries(parsedData.map((item, index) => [String(index), item])) : (_registers$categories = (_registers$categories2 = registers.categories[path]) == null ? void 0 : _registers$categories2.data) != null ? _registers$categories : {};
+  const latestCount = Array.isArray(data) ? parsedData.length : (_registers$categories3 = (_registers$categories4 = registers.categories[path]) == null ? void 0 : _registers$categories4.count) != null ? _registers$categories3 : Object.keys(latestData).length;
   const openDeleteDialog = useCallback((rowIndex, name) => {
     setOpen(true);
     setRowData(rowIndex);
@@ -11483,26 +11531,29 @@ const ObjectArrayControl = props => {
   useEffect(() => {
     const updatedData = Object.fromEntries((parsedData || []).map((item, index) => [index, item]));
     const count = Object.keys(updatedData).length;
-    const dispatchData = {
+    const currentCategory = registers.categories[path];
+    const hasSameCount = (currentCategory == null ? void 0 : currentCategory.count) === count;
+    const hasSameData = JSON.stringify((currentCategory == null ? void 0 : currentCategory.data) || {}) === JSON.stringify(updatedData);
+    if (hasSameCount && hasSameData) {
+      return;
+    }
+    const dispatchData = Object.assign({}, registers.categories, {
       [path]: {
         count: count,
         data: updatedData
       }
-    };
-    if (Object.keys(updatedData).length > 0) {
-      dispatch({
-        type: SET_DATA_ACTION,
-        payload: dispatchData
-      });
-    }
-    // eslint-disable-next-line
-  }, []);
+    });
+    dispatch({
+      type: SET_DATA_ACTION,
+      payload: dispatchData
+    });
+  }, [parsedData, path]);
   const controlElement = uischema;
   const listTitle = label || ((_uischema$options5 = uischema.options) == null ? void 0 : _uischema$options5.title);
   const isInReview = isStepperReview === true;
   const isListWithDetail = controlElement.type === 'ListWithDetail';
   if (isInReview) {
-    var _uischema$options6, _registers$categories, _registers$categories2;
+    var _uischema$options6;
     return jsx("tr", {
       children: jsxs(PageReviewContainer, {
         colSpan: 3,
@@ -11550,8 +11601,8 @@ const ObjectArrayControl = props => {
           enabled: enabled,
           openDeleteDialog: openDeleteDialog,
           translations: {},
-          count: ((_registers$categories = registers.categories[path]) == null ? void 0 : _registers$categories.count) || Object.keys(data || []).length,
-          data: data || ((_registers$categories2 = registers.categories[path]) == null ? void 0 : _registers$categories2.data),
+          count: latestCount,
+          data: latestData,
           cells: cells,
           config: config,
           isInReview: isInReview,
@@ -11593,8 +11644,8 @@ const ObjectArrayControl = props => {
         enabled: enabled,
         openDeleteDialog: openDeleteDialog,
         translations: {},
-        count: ((_registers$categories3 = registers.categories[path]) == null ? void 0 : _registers$categories3.count) || Object.keys(data || []).length,
-        data: data || ((_registers$categories4 = registers.categories[path]) == null ? void 0 : _registers$categories4.data),
+        count: latestCount,
+        data: latestData,
         cells: cells,
         config: config,
         isInReview: isInReview,
@@ -13240,7 +13291,7 @@ const CategoryRow = ({
   return category.visible ? jsxs(PageStepperRow, {
     disabled: !(category != null && category.isEnabled),
     role: "button",
-    tabIndex: 0,
+    tabIndex: -1,
     onClick: e => {
       e.preventDefault();
       if (category != null && category.isEnabled) onClick(index);
@@ -13254,6 +13305,7 @@ const CategoryRow = ({
       })
     }, `task-list-${index}-stepper-row-label`), jsx(CategoryStatus, {
       children: jsx(Center, {
+        tabIndex: -1,
         children: getCategoryStatusBadge(category)
       })
     })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.52.1",
+  "version": "2.52.3",
   "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/renderer-catalog.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-03-06T20:40:24.548Z",
-  "sourceCommit": "0785872dca4a8cd532072a4da41458b3a3a63ab9",
+  "generatedAt": "2026-03-10T15:56:36.838Z",
+  "sourceCommit": "2079e47e5ff044820a6458b37acbc20dde1c5377",
   "sourcePath": "libs/jsonforms-components/src/index.ts",
   "rendererCount": 32,
   "renderers": [

package/src/lib/Controls/ObjectArray/ObjectListControlUtils.d.ts

@@ -10,6 +10,7 @@ export declare const extractNames: (obj: unknown, names?: Record<string, string>
 export interface TableProps {
     itemsSchema: Record<string, unknown>;
     data: Record<string, unknown>[];
+    columnLabels?: Record<string, string>;
 }
 export declare const isObjectArrayEmpty: (currentData: string) => boolean;
 export declare const renderCellColumn: ({ data, error, errors, index, rowPath, element, isRequired, }: RenderCellColumnProps) => string | import("react/jsx-runtime").JSX.Element | null;

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

@@ -7,7 +7,8 @@ export declare const RequiredSpan: import("styled-components/dist/types").IStyle
 export declare const TextCenter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const SideMenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const RowFlex: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const RowFlexMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const RowFlexMenuMain: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const RowFlexMenuLeft: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const FlexTabs: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const FlexTabsWithMargin: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const FlexForm: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;