@adaptabletools/adaptable-cjs 23.0.0-canary.5 → 23.0.0-canary.7

package/src/View/StyledColumn/Wizard/StyledColumnWizardTypeSection.js

@@ -3,14 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledColumnWizardTypeSection = exports.renderStyledColumnTypeSummary = exports.renderStyledColumnSettingsSummary = exports.getStyledColumnWizardTitle = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
-const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const Tag_1 = require("../../../components/Tag");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const AdaptableContext_1 = require("../../AdaptableContext");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const TypeRadio_1 = require("../../Wizard/TypeRadio");
 const Flex_1 = require("../../../components/Flex");
+const StyledColumnTypeThumbnail_1 = require("./StyledColumnTypeThumbnail");
+const WizardTypeSelection_1 = require("../../Wizard/WizardTypeSelection");
 const TYPE_LABELS = {
     Gradient: 'Gradient Column',
     PercentBar: 'Percent Bar',
@@ -21,6 +20,88 @@ const TYPE_LABELS = {
     RangeBar: 'Range Bar',
     Icon: 'Icon',
 };
+const STYLED_COLUMN_TYPE_GROUPS = [
+    {
+        title: 'Labels & icons',
+        types: ['badge', 'icon', 'rating'],
+    },
+    {
+        title: 'Bars & ranges',
+        types: ['percent', 'bullet', 'rangeBar'],
+    },
+    {
+        title: 'Colour',
+        types: ['gradient'],
+    },
+    {
+        title: 'Charts',
+        types: ['sparkline'],
+    },
+];
+const STYLED_COLUMN_TYPE_OPTIONS = [
+    {
+        type: 'badge',
+        label: 'Badge',
+        columnTypes: ['Any Column'],
+        description: 'Render cell values as badges',
+        isSelected: (data) => Boolean(data.BadgeStyle),
+    },
+    {
+        type: 'icon',
+        label: 'Icon',
+        columnTypes: ['Any Column'],
+        description: 'Map values to icons',
+        isSelected: (data) => Boolean(data.IconStyle),
+    },
+    {
+        type: 'rating',
+        label: 'Rating',
+        columnTypes: ['Numeric Column'],
+        description: 'Provide visual rating indicators',
+        isSelected: (data) => Boolean(data.RatingStyle),
+    },
+    {
+        type: 'gradient',
+        label: 'Gradient',
+        columnTypes: ['Numeric Column'],
+        description: 'Colour cells by value ranges',
+        isSelected: (data) => Boolean(data.GradientStyle),
+    },
+    {
+        type: 'percent',
+        label: 'Percent Bar',
+        columnTypes: ['Numeric Column'],
+        description: 'Draw a bar sized to the value',
+        isSelected: (data) => Boolean(data.PercentBarStyle),
+    },
+    {
+        type: 'bullet',
+        label: 'Bullet Chart',
+        columnTypes: ['Numeric Column'],
+        description: 'Bar with target and bands',
+        isSelected: (data) => Boolean(data.BulletChartStyle),
+    },
+    {
+        type: 'rangeBar',
+        label: 'Range Bar',
+        columnTypes: ['Numeric Column'],
+        description: 'Show value on a min–max track',
+        isSelected: (data) => Boolean(data.RangeBarStyle),
+    },
+    {
+        type: 'sparkline',
+        label: 'Sparkline',
+        columnTypes: ['Numeric Array Column'],
+        description: 'Display a mini chart in the cell',
+        isSelected: (data) => Boolean(data.SparklineStyle),
+    },
+];
+const STYLED_COLUMN_TYPE_COUNT = STYLED_COLUMN_TYPE_OPTIONS.length;
+const STYLED_COLUMN_TYPE_OPTION_BY_KEY = STYLED_COLUMN_TYPE_OPTIONS.reduce((map, option) => {
+    map.set(option.type, option);
+    return map;
+}, new Map());
+const STYLED_COLUMN_TYPE_KEYS = STYLED_COLUMN_TYPE_GROUPS.flatMap((group) => group.types);
 /**
  * Wizard-header title for each Styled Column type. Reads as a complete
  * subject so it works as a top-level title in the wizard frame
@@ -85,6 +166,7 @@ exports.renderStyledColumnTypeSummary = exports.renderStyledColumnSettingsSummar
 const StyledColumnWizardTypeSection = (props) => {
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const sparklinesAvailable = adaptable.api.styledColumnApi.canDisplaySparklines();
     const onNameChange = (event) => {
         props.onChange({
             ...data,
@@ -129,8 +211,6 @@ const StyledColumnWizardTypeSection = (props) => {
                 newStyledColumn.RatingStyle = {};
                 break;
             case 'rangeBar':
-                // Range Bar requires Min and Max — seed sensible defaults so the
-                // wizard's Style step opens with a valid configuration.
                 newStyledColumn.RangeBarStyle = {
                     Min: 'Col-Min',
                     Max: 'Col-Max',
@@ -145,6 +225,13 @@ const StyledColumnWizardTypeSection = (props) => {
         newStyledColumn.ColumnId = null;
         props.onChange(newStyledColumn);
     };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", "data-name": "styled-column-type", className: "twa:h-full twa:p-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium twa:mb-3", children: "Settings" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", className: "twa:mb-4", children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { className: "twa:max-w-[420px] twa:w-full", children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: "twa:w-full", "data-name": "styled-column-name", onChange: onNameChange, value: data?.Name ?? '' }) }) }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-5 twa:font-medium twa:mb-2", children: "Type" }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Badge", description: "Display the column's values as Badges (All Columns)", checked: Boolean(data.BadgeStyle), onClick: () => handleTypeChange('badge') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Rating", description: "Render values as row of icons (or stars, hearts etc.) (Numeric Columns)", checked: Boolean(data.RatingStyle), onClick: () => handleTypeChange('rating') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Gradient", description: "Colour each cell in the column using a Gradient value (Numeric Columns)", checked: Boolean(data.GradientStyle), onClick: () => handleTypeChange('gradient') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Percent Bar", description: "Display a coloured Bar where the width is based on the cell (Numeric Columns)", checked: Boolean(data.PercentBarStyle), onClick: () => handleTypeChange('percent') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Bullet Chart", description: "Show a bar with target marker and qualitative bands per cell (Numeric Columns)", checked: Boolean(data.BulletChartStyle), onClick: () => handleTypeChange('bullet') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Range Bar", description: "Show where values sit between Min & Max (per-row or column) (Numeric Columns)", checked: Boolean(data.RangeBarStyle), onClick: () => handleTypeChange('rangeBar') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Icon", description: "Map cell values to icons (e.g. flag for country) (All Columns)", checked: Boolean(data.IconStyle), onClick: () => handleTypeChange('icon') }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { text: "Sparkline", description: "Render Column as a Sparkline (Numeric Array Columns)", checked: Boolean(data.SparklineStyle), disabled: !adaptable.api.styledColumnApi.canDisplaySparklines(), disabledTooltip: "Requires the AG Grid Sparklines module to be registered.", onClick: () => handleTypeChange('sparkline') })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", "data-name": "styled-column-type", className: "twa:h-full twa:min-h-0 twa:p-2 twa:gap-2", children: [(0, jsx_runtime_1.jsx)(WizardTypeSelection_1.WizardNameFieldSection, { value: data?.Name ?? '', onChange: onNameChange, inputDataName: "styled-column-name" }), (0, jsx_runtime_1.jsx)(WizardTypeSelection_1.WizardTypeSelectionSection, { headingId: "styled-column-type-heading", title: "Style Type", dataName: "styled-column-type-grid", columns: (0, WizardTypeSelection_1.getWizardTypeSelectionGridColumns)(STYLED_COLUMN_TYPE_COUNT), intro: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Click a card to choose one of ", STYLED_COLUMN_TYPE_COUNT, " style types for how values in the Column should be rendered"] }), children: STYLED_COLUMN_TYPE_KEYS.map((typeKey) => {
+                    const option = STYLED_COLUMN_TYPE_OPTION_BY_KEY.get(typeKey);
+                    const isSparkline = typeKey === 'sparkline';
+                    const disabled = isSparkline && !sparklinesAvailable;
+                    return ((0, jsx_runtime_1.jsx)(WizardTypeSelection_1.WizardTypeSelectionCard, { label: option.label, description: option.description, selected: option.isSelected(data), disabled: disabled, disabledTooltip: disabled
+                            ? 'Requires the AG Grid Sparklines module to be registered.'
+                            : undefined, dataName: `styled-column-type-${option.type}`, minHeightClassName: "twa:min-h-[168px]", onSelect: () => handleTypeChange(option.type), footer: (0, jsx_runtime_1.jsx)(StyledColumnTypeThumbnail_1.StyledColumnTypeThumbnail, { type: option.type }), children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", className: "twa:flex-wrap twa:gap-1", children: option.columnTypes.map((columnType) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: columnType }, columnType))) }) }, option.type));
+                }) })] }));
 };
 exports.StyledColumnWizardTypeSection = StyledColumnWizardTypeSection;

package/src/View/UIHelper.d.ts

@@ -26,7 +26,6 @@ export declare function getMessageTypeByStatusColour(statusColour: StatusColour)
 export declare function getButtonToneByMessageType(messageType: AdaptableMessageType): 'success' | 'error' | 'neutral' | 'none' | 'warning' | 'info' | 'accent';
 export declare function getGlyphByMessageType(messageType: AdaptableMessageType): AdaptableSystemIconName;
 export declare function getColorByMessageType(messageType: AdaptableMessageType): string;
-export declare function getCSSColorByMessageType(messageType: AdaptableMessageType): string;
 export declare function getStyleForStatusColour(statusColour: StatusColour): CSSProperties;
 export declare function getStyleForMessageType(messageType: AdaptableMessageType): CSSProperties;
 export declare function getGlyphForStatusColour(statusColour: StatusColour): string;
@@ -67,7 +66,6 @@ export declare const UIHelper: {
     getGlyphForMessageType: typeof getGlyphForMessageType;
     getStyleForMessageType: typeof getStyleForMessageType;
     getMessageTypeFromAdaptableAlerts: typeof getMessageTypeFromAdaptableAlerts;
-    getCSSColorByMessageType: typeof getCSSColorByMessageType;
     getButtonColourForAdaptableAlerts: typeof getButtonColourForAdaptableAlerts;
     getButtonTextColourForArrayandMessageType: typeof getButtonTextColourForArrayandMessageType;
     getButtonTextColourForMessageType: typeof getButtonTextColourForMessageType;

package/src/View/UIHelper.js

@@ -16,7 +16,6 @@ exports.getMessageTypeByStatusColour = getMessageTypeByStatusColour;
 exports.getButtonToneByMessageType = getButtonToneByMessageType;
 exports.getGlyphByMessageType = getGlyphByMessageType;
 exports.getColorByMessageType = getColorByMessageType;
-exports.getCSSColorByMessageType = getCSSColorByMessageType;
 exports.getStyleForStatusColour = getStyleForStatusColour;
 exports.getStyleForMessageType = getStyleForMessageType;
 exports.getGlyphForStatusColour = getGlyphForStatusColour;
@@ -54,7 +53,7 @@ function getSwatchColorPaletteEntries() {
 /** Theme semantic colours for the Colour Picker (resolved at runtime per active theme). */
 function getThemeSemanticColorPaletteEntries() {
     return [
-        'var(--ab-color-error)',
+        'var(--ab-color-destructive)',
         'var(--ab-color-warn)',
         'var(--ab-color-success)',
         'var(--ab-color-info)',
@@ -170,7 +169,7 @@ function getGlyphByMessageType(messageType) {
 function getColorByMessageType(messageType) {
     switch (messageType) {
         case 'Error':
-            return 'var(--ab-color-error)';
+            return 'var(--ab-color-destructive)';
         case 'Warning':
             return 'var(--ab-color-warn)';
         case 'Success':
@@ -179,20 +178,6 @@ function getColorByMessageType(messageType) {
             return 'var(--ab-color-info)';
     }
 }
-function getCSSColorByMessageType(messageType) {
-    switch (messageType) {
-        case 'Error':
-            return 'error';
-        case 'Warning':
-            return 'warn';
-        case 'Success':
-            return 'success';
-        case 'Info':
-            return 'info';
-        default:
-            return '';
-    }
-}
 function getStyleForStatusColour(statusColour) {
     let result;
     switch (statusColour) {
@@ -213,7 +198,7 @@ function getStyleForStatusColour(statusColour) {
             break;
         case Enums_1.StatusColour.Error:
             result = {
-                fill: 'var(--ab-color-error)',
+                fill: 'var(--ab-color-destructive)',
             };
             break;
     }
@@ -242,7 +227,7 @@ function getStyleForMessageType(messageType) {
             break;
         case 'Error':
             result = {
-                fill: 'var(--ab-color-error)',
+                fill: 'var(--ab-color-destructive)',
             };
             break;
     }
@@ -357,13 +342,13 @@ function getButtonTextColourForArrayandMessageType(adaptableAlerts, messageType)
 function getButtonTextColourForMessageType(messageType) {
     switch (messageType) {
         case 'Info':
-            return 'var( --ab-color-text-on-info)';
+            return 'var( --ab-color-info-foreground)';
         case 'Success':
-            return 'var( --ab-color-text-on-success)';
+            return 'var( --ab-color-success-foreground)';
         case 'Warning':
-            return 'var( --ab-color-text-on-warn)';
+            return 'var( --ab-color-warn-foreground)';
         case 'Error':
-            return 'var( --ab-color-text-on-error)';
+            return 'var( --ab-color-destructive-foreground)';
     }
 }
 function getNumericCSSVariableValue(stringValue, defaultValue) {
@@ -417,7 +402,6 @@ exports.UIHelper = {
     getGlyphForMessageType,
     getStyleForMessageType,
     getMessageTypeFromAdaptableAlerts,
-    getCSSColorByMessageType,
     getButtonColourForAdaptableAlerts,
     getButtonTextColourForArrayandMessageType,
     getButtonTextColourForMessageType,

package/src/View/Wizard/CollapsibleWizardCard.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { type CollapsibleWizardCardSurface } from '../../Utilities/wizardSelection';
+export interface CollapsibleWizardCardProps {
+    title: React.ReactNode;
+    /** Help text in the header when expanded. */
+    help?: React.ReactNode;
+    /**
+     * Help text in the header when collapsed. Uses `help` when omitted.
+     * Pass `false` to hide collapsed header help.
+     */
+    collapsedHelp?: React.ReactNode | false;
+    /** Shown in the card body while collapsed — typically tags or a short value summary. */
+    summary: React.ReactNode;
+    /** One-line value shown in the header when another card in the accordion is expanded. */
+    compactSummary?: React.ReactNode;
+    /** When true, `compactSummary` remains interactive (e.g. toggle buttons). */
+    compactSummaryInteractive?: boolean;
+    /** Full-opacity visual in the header row (all states) — e.g. a live badge preview. */
+    headerVisual?: React.ReactNode;
+    /** Trailing header controls (all states) — e.g. delete. Clicks do not toggle expand. */
+    headerActions?: React.ReactNode;
+    children: React.ReactNode;
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    /** When true, only the header row is shown (another card in the accordion is expanded). */
+    compact?: boolean;
+    /** When true, the expanded card grows to fill remaining section height (for scrollable lists). */
+    fillAvailable?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    className?: string;
+    bodyClassName?: string;
+    /** `panel` = Layout wizard (same bg as parent); `popup` = module popups (Dashboard). */
+    surface?: CollapsibleWizardCardSurface;
+    'data-name'?: string;
+}
+export type WizardCardAccordionBinding = {
+    expanded: boolean;
+    compact: boolean;
+    fillAvailable: boolean;
+    onExpandedChange: (expanded: boolean) => void;
+};
+export type WizardCardAccordionBindCardOptions = {
+    /** When expanded, grow to fill remaining section height. Default: false. */
+    fillAvailable?: boolean;
+};
+export type WizardCardAccordionOptions = {
+    /** Section default for `fillAvailable` when not set per card. Default: false. */
+    fillExpandedCard?: boolean;
+};
+export type WizardCardAccordionBindCard = (id: string, options?: WizardCardAccordionBindCardOptions) => WizardCardAccordionBinding;
+export declare function getWizardAccordionSectionClassName(hasExpandedCard: boolean, fillExpandedCard?: boolean): string;
+export declare function renderCompactColumnTags(columnIds: string[], getFriendlyName: (columnId: string) => string, options?: {
+    maxVisible?: number;
+    emptyLabel?: string;
+}): React.ReactNode;
+export declare const CollapsibleWizardCard: React.FC<CollapsibleWizardCardProps>;
+export declare function useWizardCardAccordion(initialExpandedId: string | null, options?: WizardCardAccordionOptions): {
+    expandedId: string;
+    hasExpandedCard: boolean;
+    expandedFillsSpace: boolean;
+    bindCard: WizardCardAccordionBindCard;
+    fillExpandedCard: boolean;
+    setExpandedId: React.Dispatch<React.SetStateAction<string>>;
+};
+/** Collapsed card body: selected value tag(s) only — no description text. */
+export declare const CollapsibleWizardValueSummary: React.FC<{
+    value: React.ReactNode;
+}>;

package/src/View/Wizard/CollapsibleWizardCard.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsibleWizardValueSummary = exports.CollapsibleWizardCard = void 0;
+exports.getWizardAccordionSectionClassName = getWizardAccordionSectionClassName;
+exports.renderCompactColumnTags = renderCompactColumnTags;
+exports.useWizardCardAccordion = useWizardCardAccordion;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const Card_1 = require("../../components/Card");
+const utils_1 = require("../../lib/utils");
+const wizardSelection_1 = require("../../Utilities/wizardSelection");
+const Flex_1 = require("../../components/Flex");
+const useProperty_1 = tslib_1.__importDefault(require("../../components/utils/useProperty"));
+const Tag_1 = require("../../components/Tag");
+const Icon_1 = require("../../components/Icon");
+const twUtils_1 = require("../../components/twUtils");
+function getWizardAccordionSectionClassName(hasExpandedCard, fillExpandedCard = true) {
+    return (0, utils_1.cn)('twa:h-full twa:min-h-0 twa:flex twa:flex-col twa:gap-2', hasExpandedCard && fillExpandedCard ? 'twa:overflow-hidden' : 'twa:overflow-y-auto');
+}
+function renderCompactColumnTags(columnIds, getFriendlyName, options) {
+    const { maxVisible = 5, emptyLabel = 'None' } = options ?? {};
+    if (!columnIds.length) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: emptyLabel });
+    }
+    const visibleIds = columnIds.slice(0, maxVisible);
+    const remainder = columnIds.length - visibleIds.length;
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: [visibleIds.map((columnId) => ((0, jsx_runtime_1.jsx)(Tag_1.ColumnTag, { className: "twa:shrink-0", children: getFriendlyName(columnId) }, columnId))), remainder > 0 ? ((0, jsx_runtime_1.jsxs)("span", { className: "twa:text-xs twa:opacity-70 twa:shrink-0", children: ["+", remainder] })) : null] }));
+}
+const CollapsibleWizardCard = (props) => {
+    const { title, help, collapsedHelp, summary, compactSummary, compactSummaryInteractive = false, headerVisual, headerActions, children, defaultExpanded = false, compact = false, fillAvailable = false, className, bodyClassName, surface = 'popup', 'data-name': dataName, } = props;
+    const [expanded, setExpanded] = (0, useProperty_1.default)(props, 'expanded', defaultExpanded, {
+        onChange: props.onExpandedChange,
+    });
+    const showSummary = !expanded && !compact;
+    const collapsedHeaderInline = collapsedHelp === false ? undefined : collapsedHelp ?? help;
+    const headerInline = expanded ? help : compact ? compactSummary : collapsedHeaderInline;
+    const isInteractiveCompactSummary = compact && compactSummaryInteractive;
+    const toggleExpanded = () => setExpanded(!expanded);
+    const handleTitleKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            toggleExpanded();
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: (0, utils_1.cn)('ab-CollapsibleWizardCard twa:border twa:transition-[border-color,background-color]', expanded
+            ? (0, wizardSelection_1.getCollapsibleWizardCardExpandedClasses)(surface)
+            : (0, wizardSelection_1.getCollapsibleWizardCardCollapsedClasses)(surface), compact && 'ab-CollapsibleWizardCard--compact twa:p-0!', fillAvailable
+            ? 'twa:flex-1 twa:min-h-0 twa:flex twa:flex-col twa:overflow-hidden'
+            : 'twa:shrink-0', className), children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { className: "twa:p-0", border: !compact, children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)('twa:flex twa:flex-row twa:items-center twa:gap-2 twa:w-full twa:px-2 twa:cursor-pointer twa:rounded-standard twa:hover:bg-primary', { 'twa:py-2': true, 'twa:mb-0.5': !compact && !expanded }, 
+                    // `targetOwn.focusOutline` uses a Tailwind `ring` (an *outward* box-shadow).
+                    // In compact/collapsed mode the card sets `p-0!`, so this header sits flush
+                    // against the card edge; combined with the card's `overflow-hidden` the
+                    // outward ring is painted outside the border-box and clipped away. Draw it
+                    // inset so it stays inside the element and is always visible.
+                    twUtils_1.targetOwn.focusOutline, 'twa:focus-visible:ring-inset'), "data-name": dataName, onClick: toggleExpanded, onKeyDown: handleTitleKeyDown, tabIndex: 0, "aria-expanded": expanded, role: "button", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-row twa:items-center twa:gap-2 twa:shrink-0 twa:cursor-pointer twa:select-none", children: [(0, jsx_runtime_1.jsx)(Icon_1.IconComponent, { icon: { name: expanded ? 'collapse' : 'expand' } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: title })] }), headerVisual ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-w-0 twa:flex twa:justify-end twa:items-center twa:overflow-hidden twa:pointer-events-none", children: headerVisual })) : headerInline ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, utils_1.cn)('twa:flex-1 twa:min-w-0 twa:font-normal', isInteractiveCompactSummary
+                                ? 'twa:flex twa:justify-end twa:items-center twa:overflow-visible'
+                                : (0, utils_1.cn)('twa:text-xs twa:opacity-70 twa:pointer-events-none twa:cursor-default', compact ? 'twa:overflow-hidden' : 'twa:truncate')), children: headerInline })) : ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1 twa:min-w-0" })), headerActions ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:shrink-0", onClick: (event) => event.stopPropagation(), children: headerActions })) : null] }) }), expanded ? ((0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: (0, utils_1.cn)('twa:p-1', bodyClassName, fillAvailable && 'twa:max-h-none! twa:flex-1 twa:min-h-0'), children: children })) : showSummary ? ((0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", gap: 1, children: summary })) : null] }));
+};
+exports.CollapsibleWizardCard = CollapsibleWizardCard;
+function useWizardCardAccordion(initialExpandedId, options) {
+    const fillExpandedCard = options?.fillExpandedCard ?? false;
+    const cardFillByIdRef = React.useRef({});
+    const [expandedId, setExpandedId] = React.useState(initialExpandedId);
+    const hasExpandedCard = expandedId !== null;
+    const bindCard = React.useCallback((id, cardOptions) => {
+        const shouldFillWhenExpanded = cardOptions?.fillAvailable ?? fillExpandedCard;
+        cardFillByIdRef.current[id] = shouldFillWhenExpanded;
+        return {
+            expanded: expandedId === id,
+            compact: hasExpandedCard && expandedId !== id,
+            fillAvailable: expandedId === id && shouldFillWhenExpanded,
+            onExpandedChange: (expanded) => {
+                setExpandedId(expanded ? id : null);
+            },
+        };
+    }, [expandedId, hasExpandedCard, fillExpandedCard]);
+    const expandedFillsSpace = expandedId != null && cardFillByIdRef.current[expandedId] === true;
+    return {
+        expandedId,
+        hasExpandedCard,
+        expandedFillsSpace,
+        bindCard,
+        fillExpandedCard,
+        setExpandedId,
+    };
+}
+/** Collapsed card body: selected value tag(s) only — no description text. */
+const CollapsibleWizardValueSummary = ({ value }) => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: value });
+exports.CollapsibleWizardValueSummary = CollapsibleWizardValueSummary;

package/src/View/Wizard/OnePageWizards.js

@@ -6,7 +6,7 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const utils_1 = require("../../lib/utils");
 const Dialog_1 = tslib_1.__importDefault(require("../../components/Dialog"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const useProperty_1 = tslib_1.__importDefault(require("../../components/utils/useProperty"));
@@ -90,7 +90,7 @@ const OnePageWizard = (props) => {
     };
     const handleNavigation = (0, useKeyboardNavigation_1.useKeyboardNavigation)(setCurrentSection, visibleSections);
     const selectedNodeRef = (0, react_1.useRef)(null);
-    const selectedFeedback = ((0, jsx_runtime_1.jsx)("div", { ref: selectedNodeRef, onKeyDown: (event) => handleNavigation(event), tabIndex: 0, className: (0, clsx_1.default)('ab-OnePageWizard__selected-title-overlay', 'twa:absolute twa:rounded-standard twa:select-none twa:bg-accent twa:transition-top twa:duration-200', twUtils_1.targetOwn.focusOutline) }));
+    const selectedFeedback = ((0, jsx_runtime_1.jsx)("div", { ref: selectedNodeRef, onKeyDown: (event) => handleNavigation(event), tabIndex: 0, className: (0, utils_1.cn)('ab-OnePageWizard__selected-title-overlay', 'twa:absolute twa:rounded-standard twa:select-none twa:bg-accent twa:transition-top twa:duration-200', twUtils_1.targetOwn.focusOutline) }));
     const sizeOwnerRef = (0, react_1.useRef)(null);
     const [width, setWidth] = (0, react_1.useState)(0);
     (0, ResizeObserver_1.useResizeObserver)(sizeOwnerRef, ({ width }) => {
@@ -144,7 +144,7 @@ const OnePageWizard = (props) => {
                             }
                         }
                     }
-                }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, clsx_1.default)('ab-OnePageWizard twa:flex twa:flex-col twa:h-full twa:w-[90vw] twa:max-w-[1200px]', 'twa:bg-primarylight twa:text-primary-foreground'), "data-name": props.name, style: props.style, children: [(props.moduleName || activeSectionDetails) && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, clsx_1.default)('ab-OnePageWizard__header', ONE_PAGE_WIZARD_SECTION_GRID, 'twa:items-start twa:my-3 twa:px-2'), children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-OnePageWizard__module-name twa:min-w-0 twa:pl-3 twa:font-bold", children: props.moduleName }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-OnePageWizard__details twa:min-w-0 twa:pr-2 twa:text-4", children: activeSectionDetails })] })), (0, jsx_runtime_1.jsx)(Flex_1.Box, { as: "hr", className: "ab-OnePageWizard__module-separator twa:w-full twa:border-0 twa:border-t twa:border-t-input-border twa:mb-2" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, clsx_1.default)(ONE_PAGE_WIZARD_SECTION_GRID, 'twa:flex-1 twa:min-h-0 twa:overflow-auto twa:items-stretch'), children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-title-container twa:min-h-0 twa:min-w-0 twa:overflow-auto twa:p-3 twa:relative", ref: sizeOwnerRef, style: props.titleContainerStyle, children: [visibleSections.map((section, index) => {
+                }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)('ab-OnePageWizard twa:flex twa:flex-col twa:h-full twa:w-[90vw] twa:max-w-[1200px]', 'twa:bg-primarylight twa:text-primary-foreground'), "data-name": props.name, style: props.style, children: [(props.moduleName || activeSectionDetails) && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)('ab-OnePageWizard__header', ONE_PAGE_WIZARD_SECTION_GRID, 'twa:items-start twa:my-3 twa:px-2'), children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-OnePageWizard__module-name twa:min-w-0 twa:pl-3 twa:font-bold", children: props.moduleName }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-OnePageWizard__details twa:min-w-0 twa:pr-2 twa:text-4", children: activeSectionDetails })] })), (0, jsx_runtime_1.jsx)(Flex_1.Box, { as: "hr", className: "ab-OnePageWizard__module-separator twa:w-full twa:border-0 twa:border-t twa:border-t-input-border twa:mb-2" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)(ONE_PAGE_WIZARD_SECTION_GRID, 'twa:flex-1 twa:min-h-0 twa:overflow-auto twa:items-stretch'), children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-title-container twa:min-h-0 twa:min-w-0 twa:overflow-auto twa:p-3 twa:relative", ref: sizeOwnerRef, style: props.titleContainerStyle, children: [visibleSections.map((section, index) => {
                                             if (section === '-') {
                                                 return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { as: "hr", className: "ab-OnePageWizard__section-separator twa:mt-2 twa:w-full twa:border-t twa:border-t-input-border" }, `${index}-`));
                                             }
@@ -152,7 +152,7 @@ const OnePageWizard = (props) => {
                                             navIndexMap.set(navIndex, index);
                                             const active = index === currentSection;
                                             const disabled = false; //!active && !currentSectionValid;
-                                            return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: (0, clsx_1.default)('ab-OnePageWizard__section-title twa:p-2', {
+                                            return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: (0, utils_1.cn)('ab-OnePageWizard__section-title twa:p-2', {
                                                     'twa:cursor-auto': disabled,
                                                     'twa:cursor-pointer': !disabled,
                                                     'twa:z-10': true,
@@ -171,7 +171,7 @@ const OnePageWizard = (props) => {
                                                         return;
                                                     }
                                                     setCurrentSection(index);
-                                                }, children: [(0, jsx_runtime_1.jsx)(KeyHint_1.KeyHint, { className: "twa:mr-2 twa:inline-block twa:text-color-accent-foreground", children: navIndex }), (0, jsx_runtime_1.jsx)("div", { className: "twa:flex-1", children: section.title }), (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "error", className: (0, clsx_1.default)('twa:ml-2', validSectionsMap.get(index) !== true ? 'twa:visible' : 'twa:invisible') })] }, section.title));
-                                        }), selectedFeedback, (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), (0, jsx_runtime_1.jsxs)(KeyHint_1.KeyHint, { className: "ab-OnePageWizard__key-hint twa:leading-normal", children: [(0, isMacLike_1.isMacLike)() ? 'Cmd' : 'Ctrl', " + #", (0, jsx_runtime_1.jsx)("br", {}), "or arrow keys", (0, jsx_runtime_1.jsx)("br", {}), "to navigate"] })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-container twa:min-h-0 twa:min-w-0 twa:flex-1", children: renderSection(currentSection) })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "ab-WizardDialog__footer ab-OnePageWizard__footer twa:p-2", children: [(0, jsx_runtime_1.jsx)(SimpleButton_1.default, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => props.onHide?.(), tooltip: props.closeTooltip ?? 'Close wizard', accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL, children: props.closeText ?? 'CLOSE' }), (0, jsx_runtime_1.jsx)(KeyHint_1.KeyHint, { className: "twa:ml-2", children: "Esc" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-OnePageWizard__error twa:text-2 twa:mr-3 twa:flex-1 twa:text-error twa:text-end", children: firstErrorMessage }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { tone: "accent", "data-name": "finish", variant: "raised", disabled: canFinish !== true, onClick: () => handleClickFinish(), icon: 'check', accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL, children: props.finishText ?? 'Finish' })] })] }) }) }) }));
+                                                }, children: [(0, jsx_runtime_1.jsx)(KeyHint_1.KeyHint, { className: "twa:mr-2 twa:inline-block twa:text-accent-foreground", children: navIndex }), (0, jsx_runtime_1.jsx)("div", { className: "twa:flex-1", children: section.title }), (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "error", className: (0, utils_1.cn)('twa:ml-2', validSectionsMap.get(index) !== true ? 'twa:visible' : 'twa:invisible') })] }, section.title));
+                                        }), selectedFeedback, (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), (0, jsx_runtime_1.jsxs)(KeyHint_1.KeyHint, { className: "ab-OnePageWizard__key-hint twa:leading-normal", children: [(0, isMacLike_1.isMacLike)() ? 'Cmd' : 'Ctrl', " + #", (0, jsx_runtime_1.jsx)("br", {}), "or arrow keys", (0, jsx_runtime_1.jsx)("br", {}), "to navigate"] })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "ab-OnePageWizard__section-container twa:min-h-0 twa:min-w-0 twa:flex-1", children: renderSection(currentSection) })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "ab-WizardDialog__footer ab-OnePageWizard__footer twa:p-2", children: [(0, jsx_runtime_1.jsx)(SimpleButton_1.default, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => props.onHide?.(), tooltip: props.closeTooltip ?? 'Close wizard', accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL, children: props.closeText ?? 'CLOSE' }), (0, jsx_runtime_1.jsx)(KeyHint_1.KeyHint, { className: "twa:ml-2", children: "Esc" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-OnePageWizard__error twa:text-2 twa:mr-3 twa:flex-1 twa:text-destructive twa:text-end", children: firstErrorMessage }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { tone: "accent", "data-name": "finish", variant: "raised", disabled: canFinish !== true, onClick: () => handleClickFinish(), icon: 'check', accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL, children: props.finishText ?? 'Finish' })] })] }) }) }) }));
 };
 exports.OnePageWizard = OnePageWizard;

package/src/View/Wizard/SummaryColorTag.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { AdaptableIcon } from '../../types';
+export type SummaryLabelValueItem = {
+    label: string;
+    value: string;
+    /** When set on an Icon summary row, renders the icon glyph instead of the name. */
+    icon?: AdaptableIcon;
+};
+export declare const isSummaryColorLabel: (label: string) => boolean;
+/** Labels whose label + value render together inside a single tag (colours, font traits). */
+export declare const isSummaryInTagLabel: (label: string) => boolean;
+export declare const ColorSummarySquare: React.FC<{
+    color: string;
+    className?: string;
+}>;
+export declare const renderSummaryLabelValueTagContent: (label: string, value: string, icon?: AdaptableIcon) => React.ReactNode;
+export declare const parseSummaryLabelValueString: (item: string) => {
+    label: string;
+    value: string;
+} | null;
+export declare const renderSummaryStringTagContent: (item: string) => React.ReactNode;
+export declare const renderSummaryStringTags: (items: string[]) => React.JSX.Element;
+export declare const summaryStringsToTagContents: (items: string[]) => React.ReactNode[];
+export declare const renderSummaryLabelValueTags: (items: SummaryLabelValueItem[]) => React.JSX.Element;

package/src/View/Wizard/SummaryColorTag.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderSummaryLabelValueTags = exports.summaryStringsToTagContents = exports.renderSummaryStringTags = exports.renderSummaryStringTagContent = exports.parseSummaryLabelValueString = exports.renderSummaryLabelValueTagContent = exports.ColorSummarySquare = exports.isSummaryInTagLabel = exports.isSummaryColorLabel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Flex_1 = require("../../components/Flex");
+const Tag_1 = require("../../components/Tag");
+const StyleHelper_1 = require("../../Utilities/Helpers/StyleHelper");
+const icons_1 = require("../../components/icons");
+const AdaptableIconComponent_1 = require("../Components/AdaptableIconComponent");
+const COLOR_SQUARE_CLASS = 'twa:h-3 twa:w-3 twa:rounded-sm twa:shrink-0 twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_20%,transparent)]';
+const isSummaryColorLabel = (label) => /\bColou?r$/i.test(label.trim());
+exports.isSummaryColorLabel = isSummaryColorLabel;
+const isIconSummaryLabel = (label) => label.trim() === 'Icon';
+/** Labels whose label + value render together inside a single tag (colours, font traits). */
+const isSummaryInTagLabel = (label) => {
+    const trimmed = label.trim();
+    return ((0, exports.isSummaryColorLabel)(trimmed) ||
+        isIconSummaryLabel(trimmed) ||
+        trimmed === 'Font Weight' ||
+        trimmed === 'Font Style');
+};
+exports.isSummaryInTagLabel = isSummaryInTagLabel;
+const ColorSummarySquare = ({ color, className, }) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: className ?? COLOR_SQUARE_CLASS, style: { background: (0, StyleHelper_1.getVariableColor)(color) }, "aria-hidden": true }));
+exports.ColorSummarySquare = ColorSummarySquare;
+const SummaryIconVisual = ({ icon, value }) => {
+    if (icon) {
+        return ((0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: { ...icon, size: icon.size ?? 14 } }));
+    }
+    if (value && value in icons_1.allIcons) {
+        return ((0, jsx_runtime_1.jsx)(icons_1.Icon, { "aria-hidden": true, name: value, size: 14, className: "twa:shrink-0" }));
+    }
+    return null;
+};
+const isSummaryIconVisualAvailable = (icon, value) => Boolean(icon || (value && value in icons_1.allIcons));
+const isFontWeightLabel = (label) => label.trim() === 'Font Weight';
+const isFontStyleLabel = (label) => label.trim() === 'Font Style';
+const renderSummaryLabelValueTagContent = (label, value, icon) => {
+    if ((0, exports.isSummaryColorLabel)(label)) {
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1.5", children: [label, (0, jsx_runtime_1.jsx)(exports.ColorSummarySquare, { color: value })] }));
+    }
+    if (isIconSummaryLabel(label)) {
+        if (isSummaryIconVisualAvailable(icon, value)) {
+            return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1.5", children: [label, (0, jsx_runtime_1.jsx)(SummaryIconVisual, { icon: icon, value: value })] }));
+        }
+    }
+    if (isFontWeightLabel(label) && value === 'Bold') {
+        return (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-bold", children: `${label}: ${value}` });
+    }
+    if (isFontStyleLabel(label) && value === 'Italic') {
+        return (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:italic", children: `${label}: ${value}` });
+    }
+    return `${label}: ${value}`;
+};
+exports.renderSummaryLabelValueTagContent = renderSummaryLabelValueTagContent;
+const parseSummaryLabelValueString = (item) => {
+    const colonIndex = item.indexOf(': ');
+    if (colonIndex <= 0) {
+        return null;
+    }
+    return {
+        label: item.slice(0, colonIndex),
+        value: item.slice(colonIndex + 2),
+    };
+};
+exports.parseSummaryLabelValueString = parseSummaryLabelValueString;
+const renderSummaryStringTagContent = (item) => {
+    const parsed = (0, exports.parseSummaryLabelValueString)(item);
+    if (!parsed) {
+        return item;
+    }
+    return (0, exports.renderSummaryLabelValueTagContent)(parsed.label, parsed.value);
+};
+exports.renderSummaryStringTagContent = renderSummaryStringTagContent;
+const renderSummaryStringTags = (items) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, exports.renderSummaryStringTagContent)(item) }, item))) }));
+exports.renderSummaryStringTags = renderSummaryStringTags;
+const summaryStringsToTagContents = (items) => items.map((item) => (0, exports.renderSummaryStringTagContent)(item));
+exports.summaryStringsToTagContents = summaryStringsToTagContents;
+const renderSummaryLabelValueTags = (items) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: items.map(({ label, value, icon }) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: (0, exports.renderSummaryLabelValueTagContent)(label, value, icon) }, `${label}-${value}`))) }));
+exports.renderSummaryLabelValueTags = renderSummaryLabelValueTags;

package/src/View/Wizard/WizardTypeSelection.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+export declare const WIZARD_TYPE_SELECTION_PREVIEW_FRAME_CLASS = "twa:flex twa:w-full twa:min-h-[32px] twa:items-center twa:justify-center twa:overflow-hidden twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)] twa:bg-[color-mix(in_srgb,var(--ab-color-primary)_35%,transparent)] twa:px-2 twa:py-1";
+export declare const getWizardTypeSelectionGridColumns: (choiceCount: number) => 2 | 3;
+export type WizardTypeSelectionCardProps = {
+    label: string;
+    description?: string;
+    selected: boolean;
+    disabled?: boolean;
+    disabledTooltip?: string;
+    dataName: string;
+    minHeightClassName?: string;
+    onSelect: () => void;
+    children?: React.ReactNode;
+    footer?: React.ReactNode;
+};
+export declare const WizardTypeSelectionCard: React.FunctionComponent<WizardTypeSelectionCardProps>;
+export type WizardTypeSelectionSectionProps = {
+    headingId: string;
+    title: string;
+    intro: React.ReactNode;
+    columns: 2 | 3;
+    dataName?: string;
+    className?: string;
+    children: React.ReactNode;
+};
+export declare const WizardTypeSelectionSection: React.FunctionComponent<WizardTypeSelectionSectionProps>;
+export type WizardNameFieldSectionProps = {
+    value: string;
+    onChange: (event: React.SyntheticEvent) => void;
+    inputDataName?: string;
+    placeholder?: string;
+};
+export declare const WizardNameFieldSection: React.FunctionComponent<WizardNameFieldSectionProps>;
+export declare const WizardTypeSelectionPreviewFrame: React.FunctionComponent<React.PropsWithChildren>;