onekijs-ui 0.15.6 → 0.15.7

package/dist/components/list/components/StandardListComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ListItem, StandardListProps } from '../typings';
 declare const StandardListComponent: <T = any, I extends ListItem<T> = ListItem<T>>({ items, ItemComponent, ItemLoadingComponent, ItemContentComponent, onItemClick, onItemMouseEnter, onItemMouseLeave, }: StandardListProps<T, I>) => JSX.Element;
 export default StandardListComponent;

package/dist/components/select/FormSelect.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FormSelectProps, SelectItem } from './typings';
 declare const _default: {
     <T = any, I extends SelectItem<T> = SelectItem<T>>(props: FormSelectProps<T, I>): JSX.Element;

package/dist/components/select/components/ArraySelectComponent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ArraySelectProps, SelectItem } from '../typings';
 declare const ArraySelectComponent: <T = any, I extends SelectItem<T> = SelectItem<T>>(props: ArraySelectProps<T, I>) => JSX.Element;
 export default ArraySelectComponent;

package/dist/components/select/components/ArrayTreeSelectComponent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ArrayTreeSelectProps, TreeSelectItem } from '../typings';
 declare const ArrayTreeSelectComponent: <T = any, I extends TreeSelectItem<T> = TreeSelectItem<T>>(props: ArrayTreeSelectProps<T, I>) => JSX.Element;
 export default ArrayTreeSelectComponent;

package/dist/components/select/components/ControlledSelectComponent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ControllerSelectProps, SelectController, SelectItem, SelectState } from '../typings';
 declare const ControlledSelectComponent: <T = any, I extends SelectItem<T> = SelectItem<T>, S extends SelectState<T, I> = SelectState<T, I>, C extends SelectController<T, I, S> = SelectController<T, I, S>>({ attachDropdownToBody, className, placeholder, controller, InputComponent, IconComponent, OptionContentComponent, OptionComponent, OptionLoadingComponent, MultiOptionsComponent, NotFoundComponent, autoFocus, value, onChange, onBlur: forwardBlur, onFocus: forwardFocus, height, multiple, status, size, nullable, minChars, openOnFocus, searchable, dropdownWidthModifier, preload, increment, animationMs, disabled, defaultValue, required, sameWidth, overscan, clickable, ListComponent, autoCompleteSearch, }: ControllerSelectProps<T, I, S, C>) => JSX.Element;
 export default ControlledSelectComponent;

package/dist/components/select/components/SelectComponent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SelectController, SelectItem, SelectProps, SelectState } from '../typings';
 declare const _default: {
     <T = any, I extends SelectItem<T> = SelectItem<T>, S extends SelectState<T, I> = SelectState<T, I>, C extends SelectController<T, I, S> = SelectController<T, I, S>>(props: SelectProps<T, I, S, C>): JSX.Element;

package/dist/components/select/components/SelectOptionComponent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ListItemProps } from '../../list/typings';
 import { SelectItem } from '../typings';
 export declare const SelectOptionContent: <T, I extends SelectItem<T> = SelectItem<T>>({ item }: ListItemProps<T, I>) => JSX.Element;

package/dist/components/select/components/SelectTokenComponent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SelectItem, SelectTokenProps } from '../typings';
 declare const _default: {
     <T, I extends SelectItem<T> = SelectItem<T>>({ token, onRemove, index, }: SelectTokenProps<T, I>): JSX.Element;

package/dist/components/select/components/SelectTokensComponent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SelectItem, SelectTokensProps } from '../typings';
 declare const _default: {
     <T, I extends SelectItem<T> = SelectItem<T>>({ tokens, onRemove, }: SelectTokensProps<T, I>): JSX.Element | null;

package/dist/components/select/components/TreeSelectComponent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TreeSelectController, TreeSelectItem, TreeSelectProps, TreeSelectState } from '../typings';
 declare const _default: {
     <T = any, I extends TreeSelectItem<T> = TreeSelectItem<T>, S extends TreeSelectState<T, I> = TreeSelectState<T, I>, C extends TreeSelectController<T, I, S> = TreeSelectController<T, I, S>>(props: TreeSelectProps<T, I, S, C>): JSX.Element;

package/dist/components/select/components/TreeSelectOptionContent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ListItemProps } from '../../list/typings';
 import { TreeSelectItem } from '../typings';
 export declare const TreeSelectOptionContent: <T, I extends TreeSelectItem<T> = TreeSelectItem<T>>(props: ListItemProps<T, I>) => JSX.Element;

package/dist/components/select/typings.d.ts

@@ -21,7 +21,7 @@ export declare type FormSelectProps<T = any, I extends SelectItem<T> = SelectIte
     defaultValue?: T | T[] | null;
     FieldComponent?: React.FC<SelectProps<T, I>>;
 };
-export declare type SelectController<T, I extends SelectItem<T> = SelectItem<T>, S extends SelectState<T, I> = SelectState<T, I>> = Collection<T, I, S> & {
+export declare type SelectController<T = any, I extends SelectItem<T> = SelectItem<T>, S extends SelectState<T, I> = SelectState<T, I>> = Collection<T, I, S> & {
     config?: SelectConfig<T, I>;
     check: () => void;
     defaultValue: T | T[] | null | undefined;

package/dist/components/tree/components/ArrayTreeComponent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ArrayTreeProps, TreeItem } from '../typings';
 declare const ArrayTreeComponent: <T = any, I extends TreeItem<T> = TreeItem<T>>(props: ArrayTreeProps<T, I>) => JSX.Element;
 export default ArrayTreeComponent;

package/dist/components/tree/components/ControllerTreeComponent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ControllerTreeProps, TreeItem } from '../typings';
 declare const ControllerTreeComponent: {
     <T = any, I extends TreeItem<T> = TreeItem<T>>({ controller, className, onActivate, onSelect, height, virtual, gap, TreeIconComponent, TreeItemComponent, TreeItemContentComponent, treeItemClassName, TreeTogglerComponent, paddingLeft, paddingRight, animate, keyboardNavigable, listRef, }: ControllerTreeProps<T, I, import("../typings").TreeState<T, I>, import("../typings").TreeController<T, I, import("../typings").TreeState<T, I>>>): JSX.Element;

package/dist/components/tree/components/TreeBodyComponent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ControllerTreeProps, TreeItem } from '../typings';
 declare const TreeBodyComponent: {
     <T = any, I extends TreeItem<T> = TreeItem<T>>({ className, controller, }: ControllerTreeProps<T, I, import("../typings").TreeState<T, I>, import("../typings").TreeController<T, I, import("../typings").TreeState<T, I>>>): JSX.Element;

package/dist/components/tree/components/TreeComponent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TreeItem, TreeProps } from '../typings';
 declare const _default: {
     <T = any, I extends TreeItem<T> = TreeItem<T>>(props: TreeProps<T, I, import("../typings").TreeState<T, I>, import("../typings").TreeController<T, I, import("../typings").TreeState<T, I>>>): JSX.Element;

package/dist/components/tree/components/TreeItemComponent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ListItemProps } from '../../list/typings';
 import { TreeItem, TreeItemProps, TreeItemToggleProps } from '../typings';
 export declare const TreeItemToggler: <T = any, I extends TreeItem<T> = TreeItem<T>>({ item, onExpand, onCollapse, index, }: TreeItemToggleProps<T, I>) => JSX.Element | null;

package/dist/components/tree/components/TreeListComponent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TreeItem, TreeListProps } from '../typings';
 declare const TreeListComponent: <T = any, I extends TreeItem<T> = TreeItem<T>>({ items, onItemClick, onItemMouseEnter, onItemMouseLeave, }: TreeListProps<T, I>) => JSX.Element;
 export default TreeListComponent;

package/dist/components/tree/components/VirtualTreeBodyComponent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ControllerTreeProps, TreeItem } from '../typings';
 declare const VirtualTreeBodyComponent: {
     <T = any, I extends TreeItem<T> = TreeItem<T>>({ className, controller, height, }: ControllerTreeProps<T, I, import("../typings").TreeState<T, I>, import("../typings").TreeController<T, I, import("../typings").TreeState<T, I>>>): JSX.Element;

package/dist/components/tree/components/VirtualTreeListComponent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TreeItem, VirtualTreeListProps } from '../typings';
 declare const VirtualTreeListComponent: <T = any, I extends TreeItem<T> = TreeItem<T>>({ items, onItemClick, onItemMouseEnter, onItemMouseLeave, virtualItems, }: VirtualTreeListProps<T, I>) => JSX.Element;
 export default VirtualTreeListComponent;

package/dist/components/tree/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const _default: {
     <T = any, I extends import("./typings").TreeItem<T> = import("./typings").TreeItem<T>>(props: import("./typings").TreeProps<T, I, import("./typings").TreeState<T, I>, import("./typings").TreeController<T, I, import("./typings").TreeState<T, I>>>): JSX.Element;
     displayName: string;

package/dist/components/wizard/components/FormStep.d.ts

@@ -0,0 +1,4 @@
+import { FCC } from 'onekijs-framework';
+import { FormStepProps } from '../typings';
+declare const FormCard: FCC<FormStepProps>;
+export default FormCard;

package/dist/components/wizard/typings.d.ts

@@ -11,6 +11,9 @@ export declare type StepProps = TabProps & {
     optional?: boolean;
     showTitle?: boolean;
 };
+export declare type FormStepProps = StepProps & {
+    name: string;
+};
 export declare type StepState = TabState & {
     optional: boolean;
 };

package/dist/index.d.ts

@@ -31,6 +31,7 @@ export { default as DashboardRight } from './components/dashboard/components/Das
 export { default as DashboardToggler } from './components/dashboard/components/DashboardToggler';
 export { DashboardService } from './components/dashboard/DashboardService';
 export { default as useDashboard } from './components/dashboard/hooks/useDashboard';
+export { default as FormStep } from './components/wizard/components/FormStep';
 export { useDashboardHorizontalPanel, useDashboardVerticalPanel, useDashoardBodyPanel, } from './components/dashboard/hooks/useDashboardPanel';
 export { DashboardServiceContext, default as useDashboardService, } from './components/dashboard/hooks/useDashboardService';
 export { DashboardStateContext, default as useDashboardState } from './components/dashboard/hooks/useDashboardState';

package/dist/index.js

@@ -1557,7 +1557,7 @@ const Card = styled__default["default"](CardComponent) `
   ${cardStyle}
 `;
 
-const FormCard = ({ name, disabled, visible, ...cardProps }) => {
+const FormCard$1 = ({ name, disabled, visible, ...cardProps }) => {
     const decorator = onekijsFramework.useFormDecorator(name);
     const form = onekijsFramework.useForm();
     const metadata = onekijsFramework.useFormMetadata(decorator.name);
@@ -2139,7 +2139,7 @@ const extractFieldLayoutProps = (props) => {
         'lgLabelWidth',
         'xlLabelWidth',
     ];
-    const fieldOptionsKeys = ['defaultValue', 'touchedOn', 'disabled', 'visible'];
+    const fieldOptionsKeys = ['defaultValue', 'touchedOn', 'disabled', 'visible', 'editable'];
     Object.keys(nonValidatorProps).forEach((k) => {
         if (fieldLayoutKeys.includes(k)) {
             fieldLayoutProps[k] = props[k];
@@ -3594,6 +3594,94 @@ const useDashboard = () => {
     return [DashboardRef.current, service];
 };
 
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const WizardServiceContext = React__default["default"].createContext(null);
+const useWizardService = () => {
+    return React.useContext(WizardServiceContext);
+};
+
+const WizardStateContext = React__default["default"].createContext(null);
+const useWizardState = () => {
+    return React.useContext(WizardStateContext);
+};
+
+const useStep = (props) => {
+    const service = useWizardService();
+    const state = useWizardState();
+    const step = state.members[state.membersIndex[props.uid]];
+    React.useEffect(() => {
+        if (step === undefined) {
+            service.initMember(Object.assign({ uid: props.uid }, props));
+        }
+    }, [props, service, step]);
+    return step;
+};
+
+const Step = ({ title, active = false, disabled = false, visible = true, closable = false, children, icon, uid, optional = false, showTitle = true, className, }) => {
+    const { animate, forwardOnly } = useWizardState();
+    const service = useWizardService();
+    const step = useStep({
+        title,
+        active,
+        disabled,
+        visible,
+        closable,
+        icon,
+        loading: false,
+        optional,
+        touched: !forwardOnly,
+        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';
+    };
+    const onEntering = (node) => {
+        setTimeout(() => {
+            node.style.opacity = '1';
+            node.style.transition = `opacity ${animate}ms ease-in-out`;
+        }, 0);
+    };
+    React.useEffect(() => {
+        if (touched) {
+            touchAllFields();
+        }
+    }, [touched, touchAllFields]);
+    if (!step || !step.active) {
+        return null;
+    }
+    return (React__default["default"].createElement(onekijsFramework.FormContext.Provider, { value: fieldContainer.context },
+        React__default["default"].createElement(reactTransitionGroup.CSSTransition, { in: true, timeout: animate, appear: true, onEnter: onEnter, onEntering: onEntering },
+            React__default["default"].createElement("div", { className: addClassname('o-step-content', className) },
+                showTitle && React__default["default"].createElement("div", { className: "o-step-content-title" }, title),
+                children))));
+};
+
+const FormCard = ({ name, disabled, visible, ...stepProps }) => {
+    const decorator = onekijsFramework.useFormDecorator(name);
+    const metadata = onekijsFramework.useFormMetadata(decorator.name);
+    const service = useWizardService();
+    React.useEffect(() => {
+        const step = service.getMember(name);
+        if (step && metadata.visible !== undefined && step.visible !== metadata.visible) {
+            metadata.visible ? service.show(name) : service.hide(name);
+        }
+        if (step && metadata.disabled !== undefined && step.disabled !== metadata.disabled) {
+            metadata.disabled ? service.disable(name) : service.enable(name);
+        }
+    });
+    return React__default["default"].createElement(Step, { ...stepProps, uid: name });
+};
+
 const useDashboardHorizontalPanel = (area) => {
     const state = React.useContext(DashboardStateContext);
     return area === 'header' ? state.header : state.footer;
@@ -4557,7 +4645,7 @@ const StandardListComponent = ({ items, ItemComponent = ListItemComponent$1, Ite
         if (item?.loadingStatus === onekijsFramework.LoadingStatus.Loading) {
             return React__default["default"].createElement(ItemLoadingComponent, { key: `item-${index}` });
         }
-        if (!item || !item.data) {
+        if (!item || onekijsFramework.isItemFetching(item)) {
             return null;
         }
         return (React__default["default"].createElement(ItemComponent, { key: `item-${index}`, index: index, item: item, data: item.data, onClick: onItemClick, onMouseEnter: onItemMouseEnter, onMouseLeave: onItemMouseLeave, ItemContentComponent: ItemContentComponent }));
@@ -8709,7 +8797,7 @@ const TableBodyCellComponent = React__default["default"].memo((props) => {
             service.initCell(rowIndex, column.id, ref);
         }
     });
-    return (React__default["default"].createElement("div", { ref: ref, className: addClassname('o-table-body-cell', className), style: getCellWidth(column, fit, grow) }, props.item.data && React__default["default"].createElement(Component, { ...props, data: props.item.data })));
+    return (React__default["default"].createElement("div", { ref: ref, className: addClassname('o-table-body-cell', className), style: getCellWidth(column, fit, grow) }, props.item && React__default["default"].createElement(Component, { ...props, data: props.item.data })));
 });
 TableBodyCellComponent.displayName = 'TableCell';
 
@@ -9540,22 +9628,11 @@ const useFormTableContext = () => {
 const CheckboxCellComponent = (options) => {
     const CheckboxCellComponent = ({ item, column, rowIndex }) => {
         const { tableName } = useFormTableContext();
-        // const [validators] = extractValidators(options);
-        // const field = useField(`${tableName}.${rowIndex}.${column.id}`, validators, {
-        //   defaultValue: options.defaultValue ? options.defaultValue : false,
-        // });
-        // const validation = useValidation(`${tableName}.${rowIndex}.${column.id}`);
-        // const status = validation?.status;
-        // const message = validation?.message;
-        // return (
-        //   <>
-        //     <Checkbox {...options} {...field} className="o-table-checkbox" status={validation.status} />
-        //     {message && <FieldDescription content={message} className={`o-field-description-${status.toLowerCase()}`} />}
-        //   </>
-        // );
         const { size, ...checkboxOptions } = options;
+        // if the id is empty, it's a single table column and the value is the row itself
+        const name = column.id ? `${tableName}.${rowIndex}.${column.id}` : `${tableName}.${rowIndex}`;
         const className = typeof options.className === 'function' ? options.className(item, column, rowIndex) : options.className;
-        return (React__default["default"].createElement(FormCheckbox, { layout: "table", ...checkboxOptions, name: `${tableName}.${rowIndex}.${column.id}`, className: addClassname('o-table-checkbox', className) }));
+        return (React__default["default"].createElement(FormCheckbox, { layout: "table", ...checkboxOptions, name: name, className: addClassname('o-table-checkbox', className) }));
     };
     CheckboxCellComponent.displayName = 'CheckboxCellComponent';
     return CheckboxCellComponent;
@@ -9577,7 +9654,9 @@ const InputCellComponent = (options) => {
     const InputCellComponent = ({ item, column, rowIndex }) => {
         const { tableName } = useFormTableContext();
         const className = typeof options.className === 'function' ? options.className(item, column, rowIndex) : options.className;
-        return (React__default["default"].createElement(FormInput, { size: "small", layout: "table", ...options, name: `${tableName}.${rowIndex}.${column.id}`, className: addClassname('o-table-input', className) }));
+        // if the id is empty, it's a single table column and the value is the row itself
+        const name = column.id ? `${tableName}.${rowIndex}.${column.id}` : `${tableName}.${rowIndex}`;
+        return (React__default["default"].createElement(FormInput, { size: "small", layout: "table", ...options, name: name, className: addClassname('o-table-input', className) }));
     };
     InputCellComponent.displayName = 'InputCellComponent';
     return InputCellComponent;
@@ -9649,8 +9728,9 @@ const SelectCellComponent = (options, broker) => {
         const { tableName } = useFormTableContext();
         const controller = useSelectController(options.dataSource, options);
         const service = controller.asService();
+        // if the id is empty, it's a single table column and the value is the row itself
+        const name = column.id ? `${tableName}.${rowIndex}.${column.id}` : `${tableName}.${rowIndex}`;
         const className = typeof options.className === 'function' ? options.className(item, column, rowIndex) : options.className;
-        const name = `${tableName}.${rowIndex}.${column.id}`;
         React.useEffect(() => {
             broker.addSubscriber(name, service);
             return () => {
@@ -9795,8 +9875,10 @@ FormTextarea.displayName = 'FormTextarea';
 const TextareaCellComponent = (options) => {
     const TextareaCellComponent = ({ item, column, rowIndex }) => {
         const { tableName } = useFormTableContext();
+        // if the id is empty, it's a single table column and the value is the row itself
+        const name = column.id ? `${tableName}.${rowIndex}.${column.id}` : `${tableName}.${rowIndex}`;
         const className = typeof options.className === 'function' ? options.className(item, column, rowIndex) : options.className;
-        return (React__default["default"].createElement(FormTextarea, { size: "small", layout: "table", ...options, name: `${tableName}.${rowIndex}.${column.id}`, className: addClassname('o-table-textarea', className) }));
+        return (React__default["default"].createElement(FormTextarea, { size: "small", layout: "table", ...options, name: name, className: addClassname('o-table-textarea', className) }));
     };
     TextareaCellComponent.displayName = 'TextareaCellComponent';
     return TextareaCellComponent;
@@ -9901,8 +9983,9 @@ const SelectRowComponent = ({ item }) => {
 const FooterComponent = () => {
     const form = onekijsFramework.useForm();
     const { tableName, addLabel, maxLength } = useFormTableContext();
+    const isSingleColumnTable = useTableColumns().find((c) => c.id === '');
     const addRow = (e) => {
-        form.add(tableName);
+        form.add(tableName, isSingleColumnTable ? undefined : {});
         e.preventDefault();
     };
     const currentSize = (form.getValue(tableName) || []).length;
@@ -9992,8 +10075,17 @@ const StyledFormTableComponent = styled__default["default"](FormTableComponent)
   ${tableStyle}
 `;
 const FormTable = React__default["default"].memo((props) => {
+    let defaultValue = props.defaultValue;
+    if (defaultValue === undefined) {
+        let minLength = (props.minLength ?? props.min) || 0;
+        if (props.required && minLength < 1) {
+            minLength = 1;
+        }
+        const isSingleColumnTable = props.controller.columns.find((c) => c.id === '');
+        defaultValue = minLength > 0 ? Array(minLength).fill(isSingleColumnTable ? undefined : {}) : [];
+    }
     const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({
-        defaultValue: props.defaultValue === undefined ? [] : props.defaultValue,
+        defaultValue,
     }, props));
     const Component = props.FieldComponent || StyledFormTableComponent;
     return (React__default["default"].createElement(FieldLayout, { ...fieldLayoutProps, required: props.required },
@@ -10055,17 +10147,6 @@ const Tag = styled__default["default"](TagComponent) `
   ${tagStyle}
 `;
 
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-const WizardServiceContext = React__default["default"].createContext(null);
-const useWizardService = () => {
-    return React.useContext(WizardServiceContext);
-};
-
-const WizardStateContext = React__default["default"].createContext(null);
-const useWizardState = () => {
-    return React.useContext(WizardStateContext);
-};
-
 const StepTitle = ({ member, onActivate, index }) => {
     return (React__default["default"].createElement("div", { className: `o-step${member.active ? ' o-step-active' : ' o-step-inactive'}${member.disabled ? ' o-step-disabled' : ' o-step-enabled'}${member.visible ? ' o-step-visible' : ' o-step-hidden'}${member.touched || member.touching ? ' o-step-touched' : ' o-step-untouched'}${member.success ? ' o-step-success' : ''}${member.touchingWarning || (member.touched && member.warning) ? ' o-step-warning' : ''}${member.touchingError || (member.touched && member.error) ? ' o-step-error' : ''}${member.loading ? ' o-step-loading' : ''}`, onClick: () => onActivate(member) },
         member.icon,
@@ -10097,6 +10178,9 @@ const WizardContainer = ({ cancelLabel = 'Cancel', className, children, doneLabe
                 if (step.visible) {
                     indexRef.current++;
                 }
+                else {
+                    return null;
+                }
                 if (step.error !== undefined) {
                     errorRef.current.push({
                         stepIndex: indexRef.current,
@@ -10430,67 +10514,6 @@ const Wizard = styled__default["default"](WizardComponent) `
   ${wizardStyle}
 `;
 
-const useStep = (props) => {
-    const service = useWizardService();
-    const state = useWizardState();
-    const step = state.members[state.membersIndex[props.uid]];
-    React.useEffect(() => {
-        if (step === undefined) {
-            service.initMember(Object.assign({ uid: props.uid }, props));
-        }
-    }, [props, service, step]);
-    return step;
-};
-
-const Step = ({ title, active = false, disabled = false, visible = true, closable = false, children, icon, uid, optional = false, showTitle = true, className, }) => {
-    const { animate, forwardOnly } = useWizardState();
-    const service = useWizardService();
-    const step = useStep({
-        title,
-        active,
-        disabled,
-        visible,
-        closable,
-        icon,
-        loading: false,
-        optional,
-        touched: !forwardOnly,
-        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';
-    };
-    const onEntering = (node) => {
-        setTimeout(() => {
-            node.style.opacity = '1';
-            node.style.transition = `opacity ${animate}ms ease-in-out`;
-        }, 0);
-    };
-    React.useEffect(() => {
-        if (touched) {
-            touchAllFields();
-        }
-    }, [touched, touchAllFields]);
-    if (!step || !step.active) {
-        return null;
-    }
-    return (React__default["default"].createElement(onekijsFramework.FormContext.Provider, { value: fieldContainer.context },
-        React__default["default"].createElement(reactTransitionGroup.CSSTransition, { in: true, timeout: animate, appear: true, onEnter: onEnter, onEntering: onEntering },
-            React__default["default"].createElement("div", { className: addClassname('o-step-content', className) },
-                showTitle && React__default["default"].createElement("div", { className: "o-step-content-title" }, title),
-                children))));
-};
-
 const WizardModalComponent = ({ title, doneLabel = 'Submit', ...props }) => {
     return (React__default["default"].createElement(Modal, { ...props },
         React__default["default"].createElement(Wizard, { ...props, title: title, doneLabel: doneLabel, inModal: true })));
@@ -11425,10 +11448,11 @@ exports.FieldLayout = FieldLayout;
 exports.FieldLayoutComponent = FieldLayoutComponent;
 exports.FileIcon = FileIcon;
 exports.FolderIcon = FolderIcon;
-exports.FormCard = FormCard;
+exports.FormCard = FormCard$1;
 exports.FormCheckbox = FormCheckbox;
 exports.FormInput = FormInput;
 exports.FormSelect = FormSelect$1;
+exports.FormStep = FormCard;
 exports.FormTable = FormTable;
 exports.FormTextarea = FormTextarea;
 exports.Input = Input;