onekijs-ui 0.19.2 → 0.19.4

package/dist/index.js

@@ -718,7 +718,7 @@ const fill = cssProperty(null, colorFormatter('fill'));
 const stroke = cssProperty(null, colorFormatter('stroke'));
 const strokeWidth = cssProperty('stroke-width');
 
-const IconComponent$8 = ({ className }) => {
+const IconComponent$a = ({ className }) => {
     return (React.createElement("i", { className: addClassname('o-icon-loading-container', className) },
         React.createElement("svg", { className: "o-icon-loading-svg", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
             React.createElement("circle", { className: "o-icon-loading-svg-circle", cx: "50", cy: "50", r: "45" }))));
@@ -769,7 +769,7 @@ const iconStyle = ({ width: cssWidth = '16px', height: cssHeight = '16px', color
     }
   `;
 };
-var LoadingIcon = styled(IconComponent$8) `
+var LoadingIcon = styled(IconComponent$a) `
   ${iconStyle}
 `;
 
@@ -785,7 +785,7 @@ const toDegree = (position) => {
             return '0';
     }
 };
-const IconComponent$7 = ({ className, onClick, open, loading, model = 'arrow', closeArrowPosition = 'e', openArrowPosition = 's', }) => {
+const IconComponent$9 = ({ className, onClick, open, loading, model = 'arrow', closeArrowPosition = 'e', openArrowPosition = 's', }) => {
     const iconClassName = addClassname('o-toggler-icon-container', className);
     if (!loading) {
         return (React.createElement("div", { className: iconClassName, onClick: onClick },
@@ -801,7 +801,7 @@ const IconComponent$7 = ({ className, onClick, open, loading, model = 'arrow', c
             React.createElement(LoadingIcon, null)));
     }
 };
-const TogglerIcon = styled(IconComponent$7) `
+const TogglerIcon = styled(IconComponent$9) `
   ${({ width = '24px', height = '24px', color: cssColor = 'inherit', visible = true }) => styled.css `
     width: ${width};
     height: ${height};
@@ -1637,19 +1637,79 @@ const cardStyle = ({ theme, collapsable = true, animate = 150, bordered = true,
     }
   `;
 };
+const formCardDisplayerStyle = () => {
+    return styled.css `
+    .o-displayer-card-title {
+      ${borderBottomColor('primary')}
+      ${borderBottomWidth('1px')}
+      ${borderBottomStyle('solid')}
+      ${paddingBottom('sm')}
+      ${marginTop('xl')}
+      ${fontWeight('bold')}
+      ${color('primary')}
+    }
+  `;
+};
 
 const Card = styled(CardComponent) `
   ${cardStyle}
 `;
 
-const FormCard$1 = ({ name, disabled, visible, ...cardProps }) => {
-    const decorator = onekijsFramework.useFormDecorator(name);
+const titlelize = (value) => {
+    return value.split('_').map((v) => onekijsFramework.ucfirst(v)).join(' ');
+};
+
+const FormCardDisplayerComponent = (displayerProps) => {
+    const total = Object.values(displayerProps.children ?? {}).length;
+    return (React.createElement("div", { className: addClassname('o-displayer-card', displayerProps.className) },
+        React.createElement("div", { className: "o-displayer-card-title" }, displayerProps.name),
+        Object.values(displayerProps.children ?? {}).map((field, index) => {
+            const Displayer = field.Displayer;
+            return React.createElement(Displayer, { ...field, index: index, key: `field-${index}`, first: index === 0, last: index === total - 1, format: displayerProps.format });
+        })));
+};
+
+const FormCardDisplayer = styled(FormCardDisplayerComponent) `
+  ${formCardDisplayerStyle}
+`;
+
+const FormCard = ({ name, disabled, visible, ...cardProps }) => {
+    const decorator = onekijsFramework.useFormDecorator(name, {
+        Displayer: (displayerProps) => {
+            return React.createElement(FormCardDisplayer, { ...displayerProps, name: typeof cardProps.title === 'string' ? cardProps.title : titlelize(name) });
+        },
+    });
     const form = onekijsFramework.useForm();
     const metadata = onekijsFramework.useFormMetadata(decorator.name);
+    const fieldContainer = onekijsFramework.useFieldContainer({
+        container: name,
+    });
+    const { hide, show, disable, enable } = fieldContainer;
+    React.useEffect(() => {
+        if (!metadata.visible) {
+            if (metadata.disabled) {
+                disable();
+            }
+            else {
+                enable();
+            }
+            hide();
+        }
+        else {
+            show();
+            if (metadata.disabled) {
+                disable();
+            }
+            else {
+                enable();
+            }
+        }
+    }, [metadata.visible, metadata.disabled, hide, show, disable, enable]);
     if (metadata.visible === false) {
         return null;
     }
-    return (React.createElement(Card, { ...cardProps, open: !metadata.disabled, onToggle: () => (metadata.disabled ? form.enable(decorator.name) : form.disable(decorator.name)) }));
+    return (React.createElement(onekijsFramework.FormContext.Provider, { value: fieldContainer.context },
+        React.createElement(Card, { ...cardProps, open: !metadata.disabled, onToggle: () => (metadata.disabled ? form.enable(decorator.name) : form.disable(decorator.name)) })));
 };
 
 const CheckboxComponent = ({ label, className = '', onChange, value = false, bordered = true, status, ...checkboxProps }) => {
@@ -1868,35 +1928,23 @@ const Row = styled(RowComponent) `
   ${rowStyle}
 `;
 
-const IconComponent$6 = ({ className, onClick, style }) => {
-    return (React.createElement("div", { className: addClassname('o-icon-help', className), onClick: onClick, style: style },
-        React.createElement("svg", { className: "o-icon-help-svg", viewBox: "0 0 512 512" },
-            React.createElement("path", { d: "M256 90c44.3 0 86 17.3 117.4 48.6C404.7 170 422 211.7 422 256s-17.3 86-48.6 117.4C342 404.7 300.3 422 256 422s-86-17.3-117.4-48.6C107.3 342 90 300.3 90 256s17.3-86 48.6-117.4C170 107.3 211.7 90 256 90m0-42C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z" }),
-            React.createElement("path", { d: "M235 339h42v42h-42zM276.8 318h-41.6c0-67 62.4-62.2 62.4-103.8 0-22.9-18.7-41.7-41.6-41.7S214.4 192 214.4 214h-41.6c0-46 37.2-83 83.2-83s83.2 37.1 83.2 83.1c0 52-62.4 57.9-62.4 103.9z" }))));
-};
-var HelpIcon = styled(IconComponent$6) `
-  ${({ width = '24px', height = '24px', color: cssColor = 'inherit' }) => styled.css `
-    width: ${width};
-    height: ${height};
-    ${display('flex')};
-    ${alignItems('center')};
-    ${color(cssColor)}
-    .o-icon-help-svg {
-      display: inline-block;
-      stroke-width: 0;
-      stroke: currentColor;
-      fill: currentColor;
+const FieldDisplayerComponent = ({ className, label, value, format }) => {
+    if (format === 'form_summary') {
+        return (React.createElement(Row, { marginBottom: "md", className: addClassname('o-field-displayer-form-summary', className) },
+            React.createElement(Col, { size: 12, md: 4, lg: 3, xl: 2, className: "o-field-displayer-form-summary-label-container" },
+                React.createElement("div", { className: "o-field-displayer-form-summary-label" },
+                    React.createElement("span", null, label))),
+            React.createElement(Col, { size: 12, md: 8, lg: 9, xl: 10, className: "o-field-displayer-form-summary-value" }, value)));
+    }
+    if (format === 'form_summary_table') {
+        return (React.createElement("div", { className: addClassname('o-field-displayer-form-summary-table', className) },
+            label && React.createElement("span", { className: "o-field-displayer-form-summary-table-label" },
+                label,
+                ":"),
+            React.createElement("span", { className: "o-field-displayer-form-summary-table-value" }, value)));
     }
-  `}
-`;
-
-const FieldHelpComponent = React.memo(({ className, content, visible = true, size = 'medium' }) => {
-    const classNames = addClassname(`o-helper-icon o-helper-icon-${size}`, className);
-    return (React.createElement("div", { className: classNames },
-        React.createElement(Tooltip, { content: content, placement: "top" },
-            React.createElement(HelpIcon, { style: { visibility: visible ? 'visible' : 'hidden' } }))));
-});
-FieldHelpComponent.displayName = 'FieldHelpComponent';
+    return null;
+};
 
 const fieldStyle = () => {
     return styled.css `
@@ -1956,12 +2004,90 @@ const fieldDescriptionStyle = ({ theme, layout }) => {
     }
   `;
 };
+const fieldDisplayerStyle = ({ theme, last }) => {
+    const t = theme.label;
+    return styled.css `
+    ${display('flex')}
+    ${alignItems('stretch')}
+    &.o-field-displayer-form-summary {
+      ${borderBottomWidth(!last ? '1px' : 0)}
+      ${borderBottomColor('lighter')}
+      ${borderBottomStyle('solid')}
+    }
+    .o-field-displayer-form-summary-label-container {
+      ${display('start')}
+      ${alignItems('stretch')}
+      ${paddingX('md')}
+      ${paddingY('xs')}
+      ${backgroundColor('lightest')}
+    }
+    .o-field-displayer-form-summary-label {
+      ${display('flex')}
+      ${alignItems('center')}
+      ${fontWeight(t.fontWeight)}
+      ${color(t.fontColor)}
+      ${fontSize(t.fontSize)}
+      ${letterSpacing(t.letterSpacing)}
+    }
+
+    .o-field-displayer-form-summary-value {
+      ${paddingY('xs')}
+      ${paddingX('md')}
+      ${fontFamily('Consolas, Monaco, Courier, monospace')}
+    }
+
+    .o-field-displayer-form-summary-table-label {
+      ${display('flex')}
+      ${fontWeight(t.fontWeight)}
+      ${paddingRight('xs')}
+    }
+
+    .o-helper-icon {
+      ${fontSize('xl')}
+      ${marginLeft(t.helperMarginLeft)}
+    }
+  `;
+};
+
+const FieldDisplayer = styled(FieldDisplayerComponent) `
+  ${fieldDisplayerStyle}
+`;
+
+const IconComponent$8 = ({ className, onClick, style }) => {
+    return (React.createElement("div", { className: addClassname('o-icon-help', className), onClick: onClick, style: style },
+        React.createElement("svg", { className: "o-icon-help-svg", viewBox: "0 0 512 512" },
+            React.createElement("path", { d: "M256 90c44.3 0 86 17.3 117.4 48.6C404.7 170 422 211.7 422 256s-17.3 86-48.6 117.4C342 404.7 300.3 422 256 422s-86-17.3-117.4-48.6C107.3 342 90 300.3 90 256s17.3-86 48.6-117.4C170 107.3 211.7 90 256 90m0-42C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z" }),
+            React.createElement("path", { d: "M235 339h42v42h-42zM276.8 318h-41.6c0-67 62.4-62.2 62.4-103.8 0-22.9-18.7-41.7-41.6-41.7S214.4 192 214.4 214h-41.6c0-46 37.2-83 83.2-83s83.2 37.1 83.2 83.1c0 52-62.4 57.9-62.4 103.9z" }))));
+};
+var HelpIcon = styled(IconComponent$8) `
+  ${({ width = '24px', height = '24px', color: cssColor = 'inherit' }) => styled.css `
+    width: ${width};
+    height: ${height};
+    ${display('flex')};
+    ${alignItems('center')};
+    ${color(cssColor)}
+    .o-icon-help-svg {
+      display: inline-block;
+      stroke-width: 0;
+      stroke: currentColor;
+      fill: currentColor;
+    }
+  `}
+`;
+
+const FieldHelpComponent = React.memo(({ className, content, visible = true, size = 'medium' }) => {
+    const classNames = addClassname(`o-helper-icon o-helper-icon-${size}`, className);
+    return (React.createElement("div", { className: classNames },
+        React.createElement(Tooltip, { content: content, placement: "top" },
+            React.createElement(HelpIcon, { style: { visibility: visible ? 'visible' : 'hidden' } }))));
+});
+FieldHelpComponent.displayName = 'FieldHelpComponent';
 
-const Help = styled(FieldHelpComponent) `
+const FieldHelp = styled(FieldHelpComponent) `
   ${fieldHelpStyle}
 `;
 
-const LabelComponent = React.memo(({ className, htmlFor, help, HelpComponent = Help, layout = 'vertical', required, text, size }) => {
+const LabelComponent = React.memo(({ className, htmlFor, help, HelpComponent = FieldHelp, layout = 'vertical', required, text, size }) => {
     const classNames = addClassname(`o-label o-label-${layout}${size ? ` o-label-${size}` : ''}`, className);
     const labelProps = {
         className: 'o-label-text',
@@ -2110,6 +2236,17 @@ const FieldLayout = styled(FieldLayoutComponent) `
   ${fieldStyle}
 `;
 
+const defaultFieldDisplayer = (props) => {
+    const Component = (displayerProps) => {
+        const form = onekijsFramework.useForm();
+        let value = form.getValue(displayerProps.name) ?? '';
+        const ValueDisplayer = props.ValueDisplayer ?? (() => React.createElement(React.Fragment, null,
+            React.createElement(React.Fragment, null, `${value || ''}`)));
+        return (React.createElement(FieldDisplayer, { label: displayerProps.label ?? titlelize(displayerProps.name), help: props.help, first: displayerProps.first, last: displayerProps.last, value: React.createElement(ValueDisplayer, { value: value }), format: displayerProps.format }));
+    };
+    return Component;
+};
+
 // extract validators from props
 const extractFieldLayoutProps = (props) => {
     const [validators, nonValidatorProps] = onekijsFramework.extractValidators(props);
@@ -2134,18 +2271,31 @@ const extractFieldLayoutProps = (props) => {
         'lgLabelWidth',
         'xlLabelWidth',
     ];
-    const fieldOptionsKeys = ['defaultValue', 'touchedOn', 'disabled', 'visible', 'editable', 'protected', 'isUndefined'];
+    const fieldOptionsKeys = [
+        'defaultValue',
+        'touchedOn',
+        'disabled',
+        'visible',
+        'editable',
+        'protected',
+        'isUndefined',
+        'Displayer',
+        'containers',
+        'ValueDisplayer',
+        'label',
+    ];
     Object.keys(nonValidatorProps).forEach((k) => {
+        if (!fieldLayoutKeys.includes(k) && !fieldOptionsKeys.includes(k)) {
+            fieldProps[k] = props[k];
+        }
         if (fieldLayoutKeys.includes(k)) {
             fieldLayoutProps[k] = props[k];
         }
-        else if (fieldOptionsKeys.includes(k)) {
+        if (fieldOptionsKeys.includes(k)) {
             fieldOptions[k] = props[k];
         }
-        else if (k !== 'name') {
-            fieldProps[k] = props[k];
-        }
     });
+    fieldOptions.Displayer = fieldOptions.Displayer ?? defaultFieldDisplayer(props);
     return {
         name: props.name,
         validators,
@@ -2182,11 +2332,53 @@ const useFieldLayout = (props) => {
     ];
 };
 
+const RemoveIcon = ({ className, onClick }) => {
+    return (React.createElement("div", { className: className, onClick: onClick },
+        React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: "0 0 16 16", width: "100%", height: "100%" },
+            React.createElement("path", { fill: "currentColor", d: "M15.854 12.854c-0-0-0-0-0-0l-4.854-4.854 4.854-4.854c0-0 0-0 0-0 0.052-0.052 0.090-0.113 0.114-0.178 0.066-0.178 0.028-0.386-0.114-0.529l-2.293-2.293c-0.143-0.143-0.351-0.181-0.529-0.114-0.065 0.024-0.126 0.062-0.178 0.114 0 0-0 0-0 0l-4.854 4.854-4.854-4.854c-0-0-0-0-0-0-0.052-0.052-0.113-0.090-0.178-0.114-0.178-0.066-0.386-0.029-0.529 0.114l-2.293 2.293c-0.143 0.143-0.181 0.351-0.114 0.529 0.024 0.065 0.062 0.126 0.114 0.178 0 0 0 0 0 0l4.854 4.854-4.854 4.854c-0 0-0 0-0 0-0.052 0.052-0.090 0.113-0.114 0.178-0.066 0.178-0.029 0.386 0.114 0.529l2.293 2.293c0.143 0.143 0.351 0.181 0.529 0.114 0.065-0.024 0.126-0.062 0.178-0.114 0-0 0-0 0-0l4.854-4.854 4.854 4.854c0 0 0 0 0 0 0.052 0.052 0.113 0.090 0.178 0.114 0.178 0.066 0.386 0.029 0.529-0.114l2.293-2.293c0.143-0.143 0.181-0.351 0.114-0.529-0.024-0.065-0.062-0.126-0.114-0.178z" }))));
+};
+var RemoveIcon$1 = styled(RemoveIcon) `
+  ${({ width = '16px', height = '16px', color: cssColor = 'inherit' }) => styled.css `
+    width: ${width};
+    height: ${height};
+    ${display('flex')};
+    ${alignItems('center')};
+    ${color(cssColor)}
+  `}
+`;
+
+const SuccessIconComponent = (props) => {
+    return (React.createElement("div", { ...props },
+        React.createElement("svg", { className: "o-icon-success-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 16", fill: "currentColor" },
+            React.createElement("path", { fillRule: "evenodd", d: "M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" }))));
+};
+var SuccessIcon = styled(SuccessIconComponent) `
+  ${({ width = '16px', height = '16px', color: cssColor = 'success' }) => styled.css `
+    width: ${width};
+    height: ${height};
+    ${display('flex')};
+    ${alignItems('center')};
+    ${color(cssColor)}
+    .o-icon-success-svg {
+      display: inline-block;
+      fill: currentColor;
+    }
+  `}
+`;
+
+const FormCheckboxValueDisplayer = ({ value }) => {
+    return (React.createElement("div", { style: { display: 'flex', alignItems: 'center', marginTop: value ? '2px' : '4px' } }, value ? React.createElement(SuccessIcon, null) : React.createElement(RemoveIcon$1, { color: "red", width: "14px", height: "14px" })));
+};
 const FormCheckbox = React.memo((props) => {
-    const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({
-        defaultValue: props.defaultValue !== true ? false : true,
-    }, props, {
+    const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({}, props, {
         isUndefined: (value) => value !== true && value !== false,
+        defaultValue: props.defaultValue !== true ? false : true,
+        Displayer: props.Displayer === undefined ? ((displayerProps) => {
+            const form = onekijsFramework.useForm();
+            let value = form.getValue(displayerProps.name) ?? false;
+            const ValueDisplayer = props.ValueDisplayer ?? FormCheckboxValueDisplayer;
+            return (React.createElement(FieldDisplayer, { label: displayerProps.label ?? titlelize(displayerProps.name), help: props.help, first: displayerProps.first, last: displayerProps.last, value: React.createElement(ValueDisplayer, { value: value }), format: displayerProps.format }));
+        }) : props.Displayer,
     }));
     const Component = props.FieldComponent || Checkbox;
     return (React.createElement(FieldLayout, { ...fieldLayoutProps, required: props.required },
@@ -3551,14 +3743,14 @@ const DashboardLeft = dashboardVerticalPanel('left');
 
 const DashboardRight = dashboardVerticalPanel('right');
 
-const IconComponent$5 = (props) => {
+const IconComponent$7 = (props) => {
     return (React.createElement("div", { ...props },
         React.createElement("svg", { className: "o-icon-menu-svg", viewBox: "0 0 100 100" },
             React.createElement("rect", { width: "100", height: "15", rx: "15", ry: "15" }),
             React.createElement("rect", { y: "40", width: "100", height: "15", rx: "15", ry: "15" }),
             React.createElement("rect", { y: "80", width: "100", height: "15", rx: "15", ry: "15" }))));
 };
-var MenuIcon = styled(IconComponent$5) `
+var MenuIcon = styled(IconComponent$7) `
   ${({ width = '16px', height = '16px', color: cssColor = 'inherit' }) => styled.css `
     width: ${width};
     height: ${height};
@@ -3605,13 +3797,13 @@ const useDashoardBodyPanel = () => {
     return state.body;
 };
 
-const IconComponent$4 = ({ className, onClick }) => {
+const IconComponent$6 = ({ className, onClick }) => {
     return (React.createElement("div", { className: className, onClick: onClick },
         React.createElement("svg", { className: "o-icon-close-all-svg", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
             React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.621 8.086l-.707-.707L6.5 8.793 5.086 7.379l-.707.707L5.793 9.5l-1.414 1.414.707.707L6.5 10.207l1.414 1.414.707-.707L7.207 9.5l1.414-1.414z" }),
             React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5 3l1-1h7l1 1v7l-1 1h-2v2l-1 1H3l-1-1V6l1-1h2V3zm1 2h4l1 1v4h2V3H6v2zm4 1H3v7h7V6z" }))));
 };
-var CloseAllIcon = styled(IconComponent$4) `
+var CloseAllIcon = styled(IconComponent$6) `
   ${({ width, height, color: cssColor = 'inherit' }) => styled.css `
     width: ${width};
     height: ${height};
@@ -3626,12 +3818,12 @@ var CloseAllIcon = styled(IconComponent$4) `
 
 //#region -- system import
 //#endregion
-const IconComponent$3 = ({ className }) => {
+const IconComponent$5 = ({ className }) => {
     return (React.createElement("div", { className: className },
         React.createElement("svg", { className: "o-icon-close-svg", viewBox: "0 0 100 100" },
             React.createElement("path", { d: "M35.6 34.4L28 26.8l7.6-7.6c.2-.2.2-.5 0-.7l-.5-.5c-.2-.2-.5-.2-.7 0l-7.6 7.6-7.5-7.6c-.2-.2-.5-.2-.7 0l-.6.6c-.2.2-.2.5 0 .7l7.6 7.6-7.6 7.5c-.2.2-.2.5 0 .7l.5.5c.2.2.5.2.7 0l7.6-7.6 7.6 7.6c.2.2.5.2.7 0l.5-.5c.2-.2.2-.5 0-.7z" }))));
 };
-const CrossIcon = styled(IconComponent$3) `
+const CrossIcon = styled(IconComponent$5) `
   width: ${(props) => props.width || '32px'};
   height: ${(props) => props.height || '32px'};
   .o-icon-close-svg {
@@ -3664,13 +3856,13 @@ var ErrorIcon = styled(ErrorIconComponent) `
   `}
 `;
 
-const IconComponent$2 = (props) => {
+const IconComponent$4 = (props) => {
     const className = addClassname('o-icon-file', props.className);
     return (React.createElement("div", { ...props, className: className },
         React.createElement("svg", { className: "o-icon-file-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024", width: "16px", height: "16px" },
             React.createElement("path", { d: "M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z" }))));
 };
-var FileIcon = styled(IconComponent$2) `
+var FileIcon = styled(IconComponent$4) `
   ${({ width = '16px', height = '16px', color: cssColor = 'currentColor' }) => styled.css `
     width: ${width};
     height: ${height};
@@ -3683,13 +3875,13 @@ var FileIcon = styled(IconComponent$2) `
   `}
 `;
 
-const IconComponent$1 = (props) => {
+const IconComponent$3 = (props) => {
     const className = addClassname('o-icon-folder', props.className);
     return (React.createElement("div", { ...props, className: className },
         React.createElement("svg", { className: "o-icon-folder-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24px", height: "24px" },
             React.createElement("path", { d: "M20,6h-8l-2-2H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z" }))));
 };
-var FolderIcon = styled(IconComponent$1) `
+var FolderIcon = styled(IconComponent$3) `
   ${({ width = '24px', height = '24px', color: cssColor = 'currentColor' }) => styled.css `
     width: ${width};
     height: ${height};
@@ -3702,12 +3894,12 @@ var FolderIcon = styled(IconComponent$1) `
   `}
 `;
 
-const IconComponent = ({ className, onClick }) => {
+const IconComponent$2 = ({ className, onClick }) => {
     return (React.createElement("div", { className: className, onClick: onClick },
         React.createElement("svg", { className: "o-icon-search-svg", viewBox: "0 0 118.783 118.783" },
             React.createElement("path", { d: "M115.97,101.597L88.661,74.286c4.64-7.387,7.333-16.118,7.333-25.488c0-26.509-21.49-47.996-47.998-47.996\n\t\tS0,22.289,0,48.798c0,26.51,21.487,47.995,47.996,47.995c10.197,0,19.642-3.188,27.414-8.605l26.984,26.986\n\t\tc1.875,1.873,4.333,2.806,6.788,2.806c2.458,0,4.913-0.933,6.791-2.806C119.72,111.423,119.72,105.347,115.97,101.597z\n\t\t M47.996,81.243c-17.917,0-32.443-14.525-32.443-32.443s14.526-32.444,32.443-32.444c17.918,0,32.443,14.526,32.443,32.444\n\t\tS65.914,81.243,47.996,81.243z" }))));
 };
-var SearchIcon = styled(IconComponent) `
+var SearchIcon = styled(IconComponent$2) `
   ${({ width, height, color: cssColor = 'inherit' }) => styled.css `
     width: ${width};
     height: ${height};
@@ -3723,25 +3915,6 @@ var SearchIcon = styled(IconComponent) `
   `}
 `;
 
-const SuccessIconComponent = (props) => {
-    return (React.createElement("div", { ...props },
-        React.createElement("svg", { className: "o-icon-success-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 16", fill: "currentColor" },
-            React.createElement("path", { fillRule: "evenodd", d: "M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" }))));
-};
-var SuccessIcon = styled(SuccessIconComponent) `
-  ${({ width = '16px', height = '16px', color: cssColor = 'success' }) => styled.css `
-    width: ${width};
-    height: ${height};
-    ${display('flex')};
-    ${alignItems('center')};
-    ${color(cssColor)}
-    .o-icon-success-svg {
-      display: inline-block;
-      fill: currentColor;
-    }
-  `}
-`;
-
 const InputComponent = (props) => {
     const { className, size = 'medium', status, PrefixComponent, SuffixComponent, onFocus: forwardFocus, onBlur: forwardBlur, onChange: forwardChange, value, ...inputProps } = props;
     const [focus, setFocus] = React.useState(false);
@@ -3848,12 +4021,96 @@ const Input = styled(InputComponent) `
   ${inputStyle}
 `;
 
+const IconComponent$1 = (props) => {
+    const className = addClassname('o-icon-hide', props.className);
+    return (React.createElement("div", { ...props, className: className },
+        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "o-icon-hide-svg", viewBox: "0 0 1024 1024" },
+            React.createElement("path", { d: "M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 0 0 0-51.5zm-63.57-320.64L836 122.88a8 8 0 0 0-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 0 0 0 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 0 0 0 11.31L155.17 889a8 8 0 0 0 11.31 0l712.15-712.12a8 8 0 0 0 0-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 0 0-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 0 1 146.2-106.69L401.31 546.2A112 112 0 0 1 396 512z" }),
+            React.createElement("path", { d: "M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 0 0 227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 0 1-112 112z" }))));
+};
+var HideIcon = styled(IconComponent$1) `
+  ${({ width = '16px', height = '16px', color: cssColor = 'currentColor' }) => styled.css `
+    width: ${width};
+    height: ${height};
+    ${display('flex')};
+    ${alignItems('center')};
+    .o-icon-hide-svg {
+      display: inline-block;
+      fill: ${cssColor};
+    }
+  `}
+`;
+
+const IconComponent = (props) => {
+    const className = addClassname('o-icon-show', props.className);
+    return (React.createElement("div", { ...props, className: className },
+        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "o-icon-show-svg", viewBox: "0 0 1024 1024" },
+            React.createElement("path", { d: "M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 0 0 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" }))));
+};
+var ShowIcon = styled(IconComponent) `
+  ${({ width = '16px', height = '16px', color: cssColor = 'currentColor' }) => styled.css `
+    width: ${width};
+    height: ${height};
+    ${display('flex')};
+    ${alignItems('center')};
+    .o-icon-show-svg {
+      display: inline-block;
+      fill: ${cssColor};
+    }
+  `}
+`;
+
+const PasswordComponent = ({ className, value }) => {
+    const [show, setShow] = React.useState(false);
+    if (show) {
+        return (React.createElement("span", { className: addClassname('o-password', className) },
+            React.createElement("span", { className: "o-password-text" }, value),
+            React.createElement(HideIcon, { onClick: () => setShow(false) })));
+    }
+    return (React.createElement("span", { className: addClassname('o-password o-password-obfuscated', className) },
+        React.createElement("span", { className: "o-password-text" }, value),
+        React.createElement(ShowIcon, { onClick: () => setShow(true) })));
+};
+
+const passwordStyle = () => {
+    return styled.css `
+    ${display('flex')}
+    ${alignItems('center')}
+    .g-icon-obfuscated-password {
+      ${fontSize('xl')}
+      ${marginBottom('-8px')}
+    }
+    .g-icon-show-password {
+      ${color('primary')}
+      ${marginLeft('sm')}
+      ${cursor('pointer')}
+    }
+  `;
+};
+
+const Password = styled(PasswordComponent) `
+  ${passwordStyle}
+`;
+
+const FormInputValueDisplayer = ({ value }) => {
+    return React.createElement("span", { className: "o-input-displayer-value" }, value ?? '');
+};
 const FormInput = React.memo((props) => {
-    const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({
+    const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({}, props, {
         defaultValue: props.defaultValue === undefined ? '' : props.defaultValue,
-    }, props, {
-        isUndefined: (value) => value === undefined || value === null,
-        protected: props.type === 'password',
+        isUndefined: props.isUndefined === undefined ? (value) => value === undefined || value === null : props.isUndefined,
+        protected: props.protected === undefined ? props.type === 'password' : props.protected,
+        Displayer: props.Displayer === undefined
+            ? (displayerProps) => {
+                const form = onekijsFramework.useForm();
+                let value = form.getValue(displayerProps.name) ?? '';
+                if (props.type === 'password' && value !== '') {
+                    value = React.createElement(Password, { value: value });
+                }
+                const ValueDisplayer = props.ValueDisplayer ?? FormInputValueDisplayer;
+                return (React.createElement(FieldDisplayer, { label: displayerProps.label ?? titlelize(displayerProps.name), help: props.help, first: displayerProps.first, last: displayerProps.last, value: React.createElement(ValueDisplayer, { value: value }), format: displayerProps.format }));
+            }
+            : props.Displayer,
     }));
     const Component = props.FieldComponent || Input;
     return (React.createElement(FieldLayout, { ...fieldLayoutProps, required: props.required },
@@ -7221,10 +7478,51 @@ const Select = styled(SelectComponent$1) `
   ${selectStyle}
 `;
 
+const FormSelectValueDisplayer = ({ value }) => {
+    if (Array.isArray(value)) {
+        return (React.createElement(React.Fragment, null, value.map((v, index) => React.createElement("div", { key: `item-${index}`, className: "o-select-displayer-value" }, v ?? ''))));
+    }
+    return React.createElement("span", { className: "o-select-displayer-value" }, value ?? '');
+};
 const FormSelect = (props) => {
+    const service = props.controller ? props.controller.asService() : undefined;
     const defaultValue = props.defaultValue === undefined ? (props.multiple ? [] : null) : props.defaultValue;
     const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({}, props, {
         defaultValue,
+        Displayer: props.Displayer ?? ((displayerProps) => {
+            const form = onekijsFramework.useForm();
+            let value = form.getValue(displayerProps.name) ?? '';
+            const adapter = props.adapter;
+            if (value === undefined || value === null) {
+                value = '';
+            }
+            else if (service) {
+                if (Array.isArray(value)) {
+                    value = value.map((v) => {
+                        const adaptee = service.adapt(v);
+                        return adaptee.text ?? `${value}`;
+                    });
+                }
+                else {
+                    const adaptee = service.adapt(value);
+                    value = adaptee.text ?? `${value}`;
+                }
+            }
+            else if (adapter) {
+                if (Array.isArray(value)) {
+                    value = value.map((v) => {
+                        const adaptee = adapter(v);
+                        return adaptee.text ?? `${value}`;
+                    });
+                }
+                else {
+                    const adaptee = adapter(value);
+                    value = adaptee.text ?? `${value}`;
+                }
+            }
+            const ValueDisplayer = props.ValueDisplayer ?? FormSelectValueDisplayer;
+            return (React.createElement(FieldDisplayer, { label: displayerProps.label ?? titlelize(displayerProps.name), help: props.help, first: displayerProps.first, last: displayerProps.last, value: React.createElement(ValueDisplayer, { value: value }), format: displayerProps.format }));
+        }),
     }));
     const Component = props.FieldComponent || Select;
     return (React.createElement(FieldLayout, { ...fieldLayoutProps, required: props.required },
@@ -9175,7 +9473,7 @@ const DefaultTableHeaderTitleComponent = ({ column, sort }) => {
     };
     return (React.createElement("div", { onClick: isSortable ? onSort : undefined, style: { display: 'flex', alignItems: 'center' } },
         React.createElement("span", { className: "o-table-header-title" }, column.title),
-        column.help && React.createElement(Help, { content: column.help, size: "small" }),
+        column.help && React.createElement(FieldHelp, { content: column.help, size: "small" }),
         isSortable && React.createElement(TableSortComponent, { sort: sort, column: column })));
 };
 const TableHeaderTitleComponent = React.memo((props) => {
@@ -9854,21 +10152,6 @@ const Table = styled(TableComponent) `
   ${tableStyle}
 `;
 
-const RemoveIcon = ({ className, onClick }) => {
-    return (React.createElement("div", { className: className, onClick: onClick },
-        React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: "0 0 16 16", width: "100%", height: "100%" },
-            React.createElement("path", { fill: "currentColor", d: "M15.854 12.854c-0-0-0-0-0-0l-4.854-4.854 4.854-4.854c0-0 0-0 0-0 0.052-0.052 0.090-0.113 0.114-0.178 0.066-0.178 0.028-0.386-0.114-0.529l-2.293-2.293c-0.143-0.143-0.351-0.181-0.529-0.114-0.065 0.024-0.126 0.062-0.178 0.114 0 0-0 0-0 0l-4.854 4.854-4.854-4.854c-0-0-0-0-0-0-0.052-0.052-0.113-0.090-0.178-0.114-0.178-0.066-0.386-0.029-0.529 0.114l-2.293 2.293c-0.143 0.143-0.181 0.351-0.114 0.529 0.024 0.065 0.062 0.126 0.114 0.178 0 0 0 0 0 0l4.854 4.854-4.854 4.854c-0 0-0 0-0 0-0.052 0.052-0.090 0.113-0.114 0.178-0.066 0.178-0.029 0.386 0.114 0.529l2.293 2.293c0.143 0.143 0.351 0.181 0.529 0.114 0.065-0.024 0.126-0.062 0.178-0.114 0-0 0-0 0-0l4.854-4.854 4.854 4.854c0 0 0 0 0 0 0.052 0.052 0.113 0.090 0.178 0.114 0.178 0.066 0.386 0.029 0.529-0.114l2.293-2.293c0.143-0.143 0.181-0.351 0.114-0.529-0.024-0.065-0.062-0.126-0.114-0.178z" }))));
-};
-var RemoveIcon$1 = styled(RemoveIcon) `
-  ${({ width = '16px', height = '16px', color: cssColor = 'inherit' }) => styled.css `
-    width: ${width};
-    height: ${height};
-    ${display('flex')};
-    ${alignItems('center')};
-    ${color(cssColor)}
-  `}
-`;
-
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const DefaultFormTableContext = React.createContext(null);
 const useFormTableContext = () => {
@@ -9996,6 +10279,42 @@ const FormTableComponent = React.memo(({ addLabel = 'add', controller, value, on
 });
 FormTableComponent.displayName = 'FormTable';
 
+const FormTableItemDisplayer = ({ value, columns, first, last, className, format, name, index, }) => {
+    const userColumns = columns.filter((c) => !c.id.startsWith('system.'));
+    const monoColumnTable = userColumns.length === 1 && !userColumns[0].id;
+    const classNames = monoColumnTable
+        ? 'o-form-mono-column-table-item-displayer'
+        : `o-form-table-item-displayer${first ? ' o-form-table-item-displayer-first' : ''}${last ? ' o-form-table-item-displayer-last' : ''}`;
+    return (React.createElement("div", { className: addClassname(classNames, className) }, userColumns.map((column, colIndex) => {
+        const Displayer = column.Displayer;
+        if (Displayer) {
+            return (React.createElement(Displayer, { column: column, firstRow: first, lastRow: last, rowIndex: index, firstCol: colIndex === 0, lastCol: colIndex === columns.length - 1, colIndex: colIndex, format: format, value: value, rowName: name, key: `col-${colIndex}` }));
+        }
+        return null;
+    })));
+};
+
+const FormTableValueDisplayer = ({ name, columns, value, format, className }) => {
+    if (!Array.isArray(value))
+        return null;
+    return (React.createElement("div", { className: addClassname('o-form-table-displayer-value', className) }, value.map((v, index) => (React.createElement(FormTableItemDisplayer, { key: `item-${index}`, value: v, columns: columns, first: index === 0, last: index === value.length - 1, format: format === 'csv' ? 'csv' : 'form_summary_table', name: `${name}.${index}`, index: index })))));
+};
+var FormTableValueDisplayer$1 = styled(FormTableValueDisplayer) `
+  .o-form-table-item-displayer {
+    ${borderBottomColor('primary')}
+    ${borderBottomStyle('solid')}
+    ${borderBottomWidth('1px')}
+    ${paddingY('sm')}
+    &.o-form-table-item-displayer-last{
+      ${paddingBottom(0)}
+      ${borderBottomWidth(0)}
+    }
+    &.o-form-table-item-displayer-first{
+      ${paddingTop(0)}
+    }
+  }
+`;
+
 const StyledFormTableComponent = styled(FormTableComponent) `
   ${tableStyle}
 `;
@@ -10011,10 +10330,20 @@ const FormTable = React.memo((props) => {
     }
     const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({
         defaultValue,
+        Displayer: (displayerProps) => {
+            const form = onekijsFramework.useForm();
+            let value = form.getValue(displayerProps.name) ?? [];
+            const ValueDisplayer = props.ValueDisplayer ?? FormTableValueDisplayer$1;
+            return (React.createElement(FieldDisplayer, { label: displayerProps.label ?? titlelize(displayerProps.name), help: props.help, first: displayerProps.first, last: displayerProps.last, value: React.createElement(ValueDisplayer, { name: displayerProps.name, value: value, columns: props.controller.columns, format: displayerProps.format }), format: displayerProps.format }));
+        },
     }, props));
+    const fieldContainer = onekijsFramework.useFieldContainer({
+        container: props.name,
+    });
     const Component = props.FieldComponent || StyledFormTableComponent;
     return (React.createElement(FieldLayout, { ...fieldLayoutProps, required: props.required },
-        React.createElement(Component, { ...fieldComponentProps, name: props.name, required: props.required, minLength: props.minLength ?? props.min, maxLength: props.maxLength ?? props.max })));
+        React.createElement(onekijsFramework.FormContext.Provider, { value: fieldContainer.context },
+            React.createElement(Component, { ...fieldComponentProps, name: props.name, required: props.required, minLength: props.minLength ?? props.min, maxLength: props.maxLength ?? props.max }))));
 });
 FormTable.displayName = 'FormTable';
 
@@ -10031,12 +10360,37 @@ const CheckboxCellComponent = (options) => {
     return CheckboxCellComponent;
 };
 
+const DefaultFormCellDisplayer = (props) => {
+    const form = onekijsFramework.useForm();
+    if (['form_summary', 'form_summary_table'].includes(props.format)) {
+        if (props.column) {
+            const name = props.column.id ? `${props.rowName}.${props.column.id}` : `${props.rowName}`;
+            const field = form.fields[name];
+            if (props.column.id === 'value') {
+                console.log(field);
+            }
+            if (field && field.Displayer) {
+                const Component = field.Displayer;
+                return React.createElement(Component, { name: name, label: props.column.id ? props.column.title : '', Displayer: field.Displayer, children: {}, index: 0, first: true, last: true, format: props.format });
+            }
+        }
+    }
+    if (props.format === 'csv') {
+        const value = onekijsFramework.get(props.value, props.column.id, '');
+        if (typeof value === 'string')
+            return value;
+        return JSON.stringify(value);
+    }
+    return null;
+};
+
 const checkboxColumn = (id, options) => {
     const Component = options.CellComponent || CheckboxCellComponent;
     return Object.assign({
         filterable: false,
         sortable: false,
         className: 'o-checkbox-cell',
+        Displayer: DefaultFormCellDisplayer,
     }, options, {
         id,
         CellComponent: Component(options),
@@ -10094,6 +10448,7 @@ const enumColumn = (id, options) => {
         filterable: true,
         FilterComponent: (props) => (React.createElement(TableSelectFilterComponent, { ...props, dataSource: options.filterDataSource })),
         sortable: true,
+        Displayer: DefaultFormCellDisplayer,
     }, options, {
         id,
     });
@@ -10116,6 +10471,7 @@ const inputColumn = (id, options) => {
     return Object.assign({
         filterable: false,
         sortable: false,
+        Displayer: DefaultFormCellDisplayer,
     }, options, {
         id,
         CellComponent: Component(options),
@@ -10138,6 +10494,7 @@ const textColumn = (id, options) => {
         filterable: true,
         FilterComponent: TableTextFilterComponent,
         sortable: true,
+        Displayer: DefaultFormCellDisplayer,
     }, options, {
         id,
     });
@@ -10168,6 +10525,7 @@ const numberColumn = (id, options) => {
         filterable: true,
         FilterComponent: TableNumberFilterComponent,
         sortable: true,
+        Displayer: DefaultFormCellDisplayer,
     }, options, {
         id,
     });
@@ -10212,6 +10570,7 @@ const selectColumn = (id, options) => {
     return Object.assign({
         filterable: false,
         sortable: false,
+        Displayer: DefaultFormCellDisplayer,
     }, opts, {
         id,
         CellComponent: Component(opts, broker),
@@ -10311,11 +10670,21 @@ const Textarea = styled(TextareaComponent) `
   ${textareaStyle}
 `;
 
+const FormTextareaValueDisplayer = ({ value }) => {
+    return (React.createElement("span", { className: "o-input-displayer-value" }, value ? value.split('\n').map((v, index) => React.createElement("div", { key: `line-${index}` }, v)) : ''));
+};
 const FormTextarea = React.memo((props) => {
-    const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({
-        defaultValue: props.defaultValue === undefined ? '' : props.defaultValue,
-    }, props, {
+    const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({}, props, {
         isUndefined: (value) => value === undefined || value === null,
+        defaultValue: props.defaultValue === undefined ? '' : props.defaultValue,
+        Displayer: props.Displayer === undefined
+            ? (displayerProps) => {
+                const form = onekijsFramework.useForm();
+                let value = form.getValue(displayerProps.name) ?? '';
+                const ValueDisplayer = props.ValueDisplayer ?? FormTextareaValueDisplayer;
+                return (React.createElement(FieldDisplayer, { label: displayerProps.label ?? titlelize(displayerProps.name), help: props.help, first: displayerProps.first, last: displayerProps.last, value: React.createElement(ValueDisplayer, { value: value }), format: displayerProps.format }));
+            }
+            : props.Displayer,
     }));
     const Component = props.FieldComponent || Textarea;
     return (React.createElement(FieldLayout, { ...fieldLayoutProps, required: props.required },
@@ -10340,6 +10709,7 @@ const textareaColumn = (id, options) => {
     return Object.assign({
         filterable: false,
         sortable: false,
+        Displayer: DefaultFormCellDisplayer,
     }, options, {
         id,
         CellComponent: Component(options),
@@ -10830,6 +11200,20 @@ const wizardStyle = ({ layout = 'vertical', theme, inModal }) => {
 const wizardModalStyle = () => {
     return styled.css ``;
 };
+const wizardSummaryStyle = () => {
+    return styled.css `
+  .o-accordion-panel {
+    ${paddingBottom('md')}
+  }
+  .o-accordion-panel-title {
+    ${backgroundColor('lighter')}
+  }
+  .o-accordion-content {
+    ${paddingX('sm')}
+    ${paddingBottom('sm')}
+  }
+  `;
+};
 
 const Wizard = styled(WizardComponent) `
   ${wizardStyle}
@@ -10844,6 +11228,19 @@ const WizardModal = styled(WizardModalComponent) `
   ${wizardModalStyle}
 `;
 
+const WizardSummaryComponent = ({ className }) => {
+    const form = onekijsFramework.useForm();
+    const tree = Object.values(form.getDisplayerTree());
+    return (React.createElement(Accordion, { className: className }, tree.map((field, index) => {
+        const Displayer = field.Displayer;
+        return React.createElement(Displayer, { ...field, index: index, key: `field-${index}`, first: index === 0, last: index === tree.length - 1, format: "form_summary" });
+    })));
+};
+
+const WizardSummary = styled(WizardSummaryComponent) `
+  ${wizardSummaryStyle}
+`;
+
 const useStep = (props) => {
     const service = useWizardService();
     const state = useWizardState();
@@ -10856,9 +11253,8 @@ const useStep = (props) => {
     return step;
 };
 
-const Step = ({ title, active = false, disabled = false, visible = true, closable = false, children, icon, uid, optional = false, showTitle = true, className, }) => {
+const Step = ({ title, active = false, disabled = false, visible = true, closable = false, children, icon, uid, optional = false, showTitle = true, className, onTouch, }) => {
     const { animate, forwardOnly } = useWizardState();
-    const service = useWizardService();
     const step = useStep({
         title,
         active,
@@ -10872,15 +11268,7 @@ const Step = ({ title, active = false, disabled = false, visible = true, closabl
         touching: !forwardOnly,
         uid: uid === undefined ? title : uid,
     });
-    const fieldContainer = onekijsFramework.useFieldContainer({
-        onValidationChange: (touchedValidation, allValidation) => {
-            if (step) {
-                service.onValidationChange(step.uid, touchedValidation, allValidation);
-            }
-        },
-    });
     const touched = step?.touched;
-    const touchAllFields = fieldContainer.touchAllFields;
     const onEnter = (node) => {
         node.style.opacity = '0';
     };
@@ -10891,34 +11279,88 @@ const Step = ({ title, active = false, disabled = false, visible = true, closabl
         }, 0);
     };
     React.useEffect(() => {
-        if (touched) {
-            touchAllFields();
+        if (touched && onTouch) {
+            onTouch();
         }
-    }, [touched, touchAllFields]);
+    }, [touched, onTouch]);
     if (!step || !step.active) {
         return null;
     }
-    return (React.createElement(onekijsFramework.FormContext.Provider, { value: fieldContainer.context },
-        React.createElement(reactTransitionGroup.CSSTransition, { in: true, timeout: animate, appear: true, onEnter: onEnter, onEntering: onEntering },
-            React.createElement("div", { className: addClassname('o-step-content', className) },
-                showTitle && React.createElement("div", { className: "o-step-content-title" }, title),
-                children))));
-};
-
-const FormCard = ({ name, disabled, visible, ...stepProps }) => {
-    const decorator = onekijsFramework.useFormDecorator(name);
+    return (React.createElement(reactTransitionGroup.CSSTransition, { in: true, timeout: animate, appear: true, onEnter: onEnter, onEntering: onEntering },
+        React.createElement("div", { className: addClassname('o-step-content', className) },
+            showTitle && React.createElement("div", { className: "o-step-content-title" }, title),
+            children)));
+};
+
+const FormStep = ({ name, disabled, visible, ...stepProps }) => {
+    const decorator = onekijsFramework.useFormDecorator(name, {
+        Displayer: (displayerProps) => {
+            const total = Object.values(displayerProps.children ?? {}).length;
+            return (React.createElement(AccordionPanel, { title: stepProps.title, initialActive: displayerProps.index === 0, initialExpand: displayerProps.index === 0 }, Object.values(displayerProps.children ?? {}).map((field, index) => {
+                const Displayer = field.Displayer;
+                return React.createElement(Displayer, { ...field, index: index, key: `field-${index}`, first: index === 0, last: index === total - 1, format: displayerProps.format });
+            })));
+        },
+    });
     const metadata = onekijsFramework.useFormMetadata(decorator.name);
     const service = useWizardService();
+    const fieldContainer = onekijsFramework.useFieldContainer({
+        container: name,
+        onValidationChange: (touchedValidation, allValidation) => {
+            service.onValidationChange(name, touchedValidation, allValidation);
+        },
+    });
+    const { touchAllFields, hide, show, disable, enable } = fieldContainer;
     React.useEffect(() => {
-        const step = service.getMember(name);
-        if (step && metadata.visible !== undefined && step.visible !== metadata.visible) {
-            metadata.visible ? service.show(name) : service.hide(name);
+        const visible = metadata.visible ?? true;
+        const disabled = metadata.disabled ?? false;
+        if (!visible) {
+            if (disabled) {
+                service.disable(name);
+                disable();
+            }
+            else {
+                service.enable(name);
+                enable();
+            }
+            service.hide(name);
+            hide();
         }
-        if (step && metadata.disabled !== undefined && step.disabled !== metadata.disabled) {
-            metadata.disabled ? service.disable(name) : service.enable(name);
+        else {
+            service.show(name);
+            show();
+            if (disabled) {
+                service.disable(name);
+                disable();
+            }
+            else {
+                service.enable(name);
+                enable();
+            }
         }
-    });
-    return React.createElement(Step, { ...stepProps, uid: name });
+    }, [name, metadata.visible, metadata.disabled]);
+    React.useEffect(() => {
+        if (!visible) {
+            if (disabled) {
+                disable();
+            }
+            else {
+                enable();
+            }
+            hide();
+        }
+        else {
+            show();
+            if (disabled) {
+                disable();
+            }
+            else {
+                enable();
+            }
+        }
+    }, [visible, disabled, hide, show, disable, enable]);
+    return (React.createElement(onekijsFramework.FormContext.Provider, { value: fieldContainer.context },
+        React.createElement(Step, { ...stepProps, uid: name, onTouch: touchAllFields })));
 };
 
 const animation = cssProperty('animation');
@@ -11846,6 +12288,7 @@ exports.DashboardServiceContext = DashboardServiceContext;
 exports.DashboardStateContext = DashboardStateContext;
 exports.DashboardToggler = DashboardToggler;
 exports.DefaultCellComponent = DefaultCellComponent;
+exports.DefaultCellDisplayer = DefaultFormCellDisplayer;
 exports.DefaultSelectBroker = DefaultSelectBroker;
 exports.Dropdown = Dropdown;
 exports.DropdownButton = DropdownButton;
@@ -11855,18 +12298,22 @@ exports.ErrorIcon = ErrorIcon;
 exports.ExpandedCellComponent = ExpandedCellComponent;
 exports.FieldDescription = FieldDescription;
 exports.FieldDescriptionComponent = FieldDescriptionComponent;
-exports.FieldHelp = Help;
+exports.FieldDisplayer = FieldDisplayer;
+exports.FieldHelp = FieldHelp;
 exports.FieldHelpComponent = FieldHelpComponent;
 exports.FieldLayout = FieldLayout;
 exports.FieldLayoutComponent = FieldLayoutComponent;
 exports.FileIcon = FileIcon;
 exports.FolderIcon = FolderIcon;
-exports.FormCard = FormCard$1;
+exports.FormCard = FormCard;
+exports.FormCardDisplayer = FormCardDisplayer;
 exports.FormCheckbox = FormCheckbox;
 exports.FormInput = FormInput;
 exports.FormSelect = FormSelect$1;
-exports.FormStep = FormCard;
+exports.FormStep = FormStep;
 exports.FormTable = FormTable;
+exports.FormTableItemDisplayer = FormTableItemDisplayer;
+exports.FormTableValueDisplayer = FormTableValueDisplayer$1;
 exports.FormTextarea = FormTextarea;
 exports.HelpIcon = HelpIcon;
 exports.Input = Input;
@@ -11884,6 +12331,8 @@ exports.ModalComponent = ModalComponent;
 exports.NotificationComponent = NotificationComponent;
 exports.Notifications = Notifications;
 exports.NotificationsComponent = NotificationsComponent;
+exports.Password = Password;
+exports.PasswordComponent = PasswordComponent;
 exports.Properties = Properties;
 exports.PropertiesComponent = PropertiesComponent;
 exports.Property = Property;
@@ -11943,6 +12392,8 @@ exports.WizardComponent = WizardComponent;
 exports.WizardContainer = WizardContainer;
 exports.WizardModal = WizardModal;
 exports.WizardModalComponent = WizardModalComponent;
+exports.WizardSummary = WizardSummary;
+exports.WizardSummaryComponent = WizardSummaryComponent;
 exports.accordionStyle = accordionStyle;
 exports.addClassname = addClassname;
 exports.addStyle = addStyle;
@@ -12049,7 +12500,12 @@ exports.dropdownStyle = dropdownStyle;
 exports.emptyCells = emptyCells;
 exports.enumColumn = enumColumn;
 exports.enumFormatter = enumFormatter;
+exports.fieldDescriptionStyle = fieldDescriptionStyle;
+exports.fieldDisplayerStyle = fieldDisplayerStyle;
+exports.fieldHelpStyle = fieldHelpStyle;
+exports.fieldStyle = fieldStyle;
 exports.fill = fill;
+exports.filterListStyle = filterListStyle;
 exports.findSelectItem = findSelectItem;
 exports.findSelectItemIndex = findSelectItemIndex;
 exports.flex = flex;
@@ -12160,6 +12616,7 @@ exports.paddingRight = paddingRight;
 exports.paddingTop = paddingTop;
 exports.paddingX = paddingX;
 exports.paddingY = paddingY;
+exports.passwordStyle = passwordStyle;
 exports.perspective = perspective;
 exports.perspectiveOrigin = perspectiveOrigin;
 exports.placeContent = placeContent;
@@ -12183,6 +12640,7 @@ exports.shouldCheckSelect = shouldCheckSelect;
 exports.stroke = stroke;
 exports.strokeWidth = strokeWidth;
 exports.tableLayout = tableLayout;
+exports.tableStyle = tableStyle;
 exports.tagStyle = tagStyle;
 exports.tailwindPalette = tailwindPalette;
 exports.tailwindTheme = tailwindTheme;
@@ -12208,6 +12666,7 @@ exports.textUnderlinePosition = textUnderlinePosition;
 exports.textareaColumn = textareaColumn;
 exports.themeFormatter = themeFormatter;
 exports.timerStyle = timerStyle;
+exports.titlelize = titlelize;
 exports.toCss = toCss;
 exports.top = top;
 exports.touchAction = touchAction;
@@ -12262,6 +12721,7 @@ exports.widows = widows;
 exports.width = width;
 exports.wizardModalStyle = wizardModalStyle;
 exports.wizardStyle = wizardStyle;
+exports.wizardSummaryStyle = wizardSummaryStyle;
 exports.wordBreak = wordBreak;
 exports.wordSpacing = wordSpacing;
 exports.zIndex = zIndex;