@wise/dynamic-flow-client 5.30.0-experimental-18a8b47 → 5.30.0

package/build/domain/mappers/utils/suggestions-utils.test.js

@@ -0,0 +1,36 @@
+import { mapSuggestions } from './suggestions-utils';
+import { vi } from 'vitest';
+describe('mapSuggestions', () => {
+    it('logs a warning when the value is a not a string', () => {
+        const logEvent = vi.fn();
+        const suggestions = {
+            values: [{ value: 123, label: 'Number suggestion' }],
+        };
+        mapSuggestions(suggestions, logEvent);
+        expect(logEvent).toHaveBeenCalledWith('warning', 'Suggestion values must be of type string. Found number instead.');
+    });
+    it('logs a warning when the value is null', () => {
+        const logEvent = vi.fn();
+        const suggestions = {
+            values: [{ value: null, label: 'Null suggestion' }],
+        };
+        mapSuggestions(suggestions, logEvent);
+        expect(logEvent).toHaveBeenCalledWith('warning', 'Suggestion values must be of type string. Found object instead.');
+    });
+    it('does not log a warning when the value is a string', () => {
+        const logEvent = vi.fn();
+        const suggestions = {
+            values: [{ value: 'string', label: 'String suggestion' }],
+        };
+        mapSuggestions(suggestions, logEvent);
+        expect(logEvent).not.toHaveBeenCalled();
+    });
+    it('does not log a warning when the value is an empty string', () => {
+        const logEvent = vi.fn();
+        const suggestions = {
+            values: [{ value: '', label: 'Empty string suggestion' }],
+        };
+        mapSuggestions(suggestions, logEvent);
+        expect(logEvent).not.toHaveBeenCalled();
+    });
+});

package/build/domain/mappers/utils/tags-utils.js

@@ -0,0 +1 @@
+export const mapTags = ({ tag, tags }) => tags !== null && tags !== void 0 ? tags : (tag != null ? [tag] : undefined);

package/build/domain/mappers/utils/utils.js

@@ -0,0 +1,45 @@
+import { getDomainLayerBehavior } from './behavior-utils';
+import { getHrefWithTracking } from './getHrefWithTracking';
+import { mapLegacyContext } from './legacy-utils';
+import { getDomainLayerMedia } from './media-utils';
+export const mapInlineAlert = (alert) => {
+    return alert
+        ? {
+            content: alert.content,
+            context: alert.context ? mapLegacyContext(alert.context) : 'neutral',
+            media: getDomainLayerMedia({ media: alert.media }),
+        }
+        : undefined;
+};
+export const mapAdditionalInfo = (info, mapperProps) => {
+    const { onBehavior, trackEvent, registerSubmissionBehavior } = mapperProps;
+    if (info) {
+        const behavior = getDomainLayerBehavior(info, [], registerSubmissionBehavior);
+        const isLink = behavior.type === 'link';
+        return {
+            text: info.text,
+            href: isLink ? behavior.url : undefined,
+            hrefWithTracking: getHrefWithTracking({
+                behavior,
+                onBehavior,
+                trackEvent,
+            }),
+            accessibilityDescription: info.accessibilityDescription,
+            onClick: behavior.type === 'none'
+                ? undefined
+                : () => {
+                    void onBehavior(behavior);
+                },
+        };
+    }
+    return undefined;
+};
+export const mapSchemaAlert = (alert) => {
+    return alert
+        ? {
+            content: alert.markdown,
+            context: alert.context ? mapLegacyContext(alert.context) : 'neutral',
+            media: getDomainLayerMedia({ media: alert.media }),
+        }
+        : undefined;
+};

package/build/domain/types.js

@@ -0,0 +1 @@
+export {};

package/build/i18n/index.js

@@ -0,0 +1,40 @@
+import cs from './cs.json';
+import de from './de.json';
+import en from './en.json';
+import es from './es.json';
+import fr from './fr.json';
+import hu from './hu.json';
+import id from './id.json';
+import it from './it.json';
+import ja from './ja.json';
+import nl from './nl.json';
+import pl from './pl.json';
+import pt from './pt.json';
+import ro from './ro.json';
+import ru from './ru.json';
+import th from './th.json';
+import tr from './tr.json';
+import zhCN from './zh_CN.json';
+import zhHK from './zh_HK.json';
+const translations = {
+    cs,
+    en,
+    de,
+    es,
+    fr,
+    hu,
+    id,
+    it,
+    ja,
+    nl,
+    pl,
+    pt,
+    ro,
+    ru,
+    th,
+    tr,
+    zh: zhCN,
+    'zh-CN': zhCN,
+    'zh-HK': zhHK,
+};
+export default translations;

package/build/index.js

@@ -0,0 +1,9 @@
+export { makeHttpClient } from './common/makeHttpClient';
+export { default as translations } from './i18n';
+export { findRendererPropsByType } from './renderers/utils';
+export { useDynamicFlow } from './useDynamicFlow';
+export { useDynamicFlowModal } from './useDynamicFlowModal';
+export { DynamicFlowCore as DynamicFlow } from './DynamicFlowCore';
+export { eventNames } from './domain/features/eventNames';
+export { makeRequestCache } from './domain/features/prefetch/request-cache';
+export { getDynamicSubflowRenderer } from './renderers/subflow/getDynamicSubflowRenderer';

package/build/main.css

@@ -97,6 +97,13 @@
   }
 }
 
+.df-filters-container {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
 /* collapses and expands to the filters' natural height by animating a single grid row */
 .df-filters-collapsible {
   display: grid;
@@ -127,37 +134,93 @@
   }
 }
 
-.df-filters-container {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
 .df-filter-loader .np-chip {
-  background: linear-gradient(
-    -45deg,
-    var(--color-background-neutral) 40%,
-    var(--color-background-elevated) 50%,
-    var(--color-background-neutral) 60%
-  );
+  background: linear-gradient(-45deg,
+      var(--color-background-neutral) 40%,
+      var(--color-background-elevated) 50%,
+      var(--color-background-neutral) 60%);
   background-size: 300%;
   background-position-x: 100%;
   animation: shimmer 1s infinite linear;
   transition: background 200ms;
-  border-color: var(--color-border-neutral);
 }
 
-.df-filter-loader .np-chip > * {
+.df-filter-loader .np-chip>* {
   visibility: hidden;
 }
 
+/* v2 filter chips rest on a fainter border, leaving hover and press to Neptune,
+   scoped to the v2 filters as v1 shares the df-filters-container class */
+.df-filters-collapsible-content .np-chip:not(:hover, :active) {
+  border-color: var(--color-border-overlay);
+}
+
+/* selected chips keep the unselected fill, so only their border colour stands out,
+   except while loading, when every chip shares the unselected border */
+.df-filters-container:not(.df-filter-loader) .np-chip.df-chip--selected {
+  border-color: var(--color-interactive-accent);
+}
+
+.np-theme-personal .df-filters-container:not(.df-filter-loader) .np-chip.df-chip--selected:not(.disabled) {
+  border-color: var(--color-interactive-primary);
+}
+
+/* Neptune's hover and press styles don't depend on a click handler, so chips without one opt out */
+.df-filters-collapsible-content .np-chip.df-chip--static {
+  pointer-events: none;
+}
+
 @keyframes shimmer {
   to {
     background-position-x: 0%;
   }
 }
 
+/* the hint is stacked over the input by the input group's grid, lined up with the input's text */
+.df-search-hint {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-self: center;
+  min-width: 0;
+  margin-inline: var(--size-48);
+  overflow: hidden;
+  pointer-events: none;
+  color: var(--color-content-tertiary);
+}
+
+/* the prefix can end in a space, which a grid item would otherwise trim */
+.df-search-hint-prefix {
+  white-space: pre;
+}
+
+/* the words share one clipped line, so they appear to roll past each other */
+.df-search-hint-viewport {
+  display: grid;
+  overflow: hidden;
+}
+
+/* the words still to come wait above the line, the current one sits on it, and past ones drop below */
+.df-search-hint-word {
+  grid-area: 1 / 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  opacity: 0;
+  transform: translateY(-100%);
+  transition:
+    transform 0.5s cubic-bezier(0.35, 0, 0.35, 1),
+    opacity 0.8s cubic-bezier(0.35, 0, 0.35, 1);
+}
+
+.df-search-hint-word--current {
+  opacity: 1;
+  transform: none;
+}
+
+.df-search-hint-word--past {
+  transform: translateY(100%);
+}
+
 .df-columns-renderer-container {
   display: flex;
   gap: var(--size-4);
@@ -278,9 +341,45 @@
     width: 300px;
   }
 }
+/**
+ * FIXME: .static-spotlight is magic CSS to work around Neptune limitation
+ *   that a ListItem with Spotlight must have a control
+ */
+
+/* Hide the dummy button. */
+.static-spotlight .wds-list-item-control {
+    display: none;
+}
+
+/* Remove the clickable cursor and label interaction. */
+.static-spotlight .wds-list-item-view {
+    cursor: revert !important;
+    pointer-events: none;
+}
+
+/* Preserve real links/buttons in additional info or prompts. */
+.static-spotlight .wds-list-item-additional-info,
+.static-spotlight .wds-list-item-prompt {
+    pointer-events: auto;
+}
+
+/* Keep the resting background during hover and press. */
+.static-spotlight.wds-list-item-spotlight-active:not(.disabled):not(:disabled):is(:hover, :active) {
+    background-color: var(--color-background-neutral);
+}
+
+.static-spotlight.wds-list-item-spotlight-inactive:not(.disabled):not(:disabled):is(:hover, :active) {
+    background-color: color-mix(
+            in srgb,
+            var(--color-background-neutral) 25%,
+            transparent
+    );
+}
+
 .df-markdown> :last-child {
   margin-bottom: 0px;
 }
+
 .df-media-layout-avatar {
   display: flex;
 }

package/build/main.js

@@ -1822,7 +1822,7 @@ var toggleFilterOption = (state, filterIndex, optionIndex) => {
 // src/domain/components/collectionComponent/CollectionController.ts
 var createCollectionController = ({
   stack,
-  queryFunction,
+  collectionClient,
   trackEvent
 }) => {
   let requests = /* @__PURE__ */ new Map();
@@ -1868,7 +1868,7 @@ var createCollectionController = ({
     const { analytics, filters, search } = state;
     trackEvent(getEventName(mode, "Triggered"), analytics);
     try {
-      const response = await queryFunction({
+      const response = await collectionClient({
         searchParam: search == null ? void 0 : search.param,
         query: search == null ? void 0 : search.query,
         cursor: mode === "pagination" ? state.nextCursor : void 0,
@@ -2148,7 +2148,7 @@ var collectionLayoutToComponent = (uid, { analyticsId, control, initialState, ma
     );
   };
   const mapState = (state) => mapCollectionSpecToDomainState(state, mapperProps, mapLayout);
-  const queryFunction = getPerformCollectionQuery(httpClient, baseRequest, mapState);
+  const collectionClient = getPerformCollectionQuery(httpClient, baseRequest, mapState);
   const stack = createCollectionStack(
     uid,
     mapState(__spreadProps(__spreadValues({}, initialState), {
@@ -2156,7 +2156,7 @@ var collectionLayoutToComponent = (uid, { analyticsId, control, initialState, ma
     })),
     onComponentUpdate
   );
-  const controller = createCollectionController({ stack, queryFunction, trackEvent });
+  const controller = createCollectionController({ stack, collectionClient, trackEvent });
   const component = createCollectionComponent(
     {
       uid,
@@ -9141,6 +9141,7 @@ var collectionComponentToProps = (component, rendererMapperProps) => {
   const { stack } = component;
   return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "tags", "fork", "pop")), rendererMapperProps), {
     state: mapCollectionState(component, component.getActiveState(), rendererMapperProps),
+    onSearchChange: (query) => component.search(component.getActiveState(), query),
     depth: stack.length - 1
   });
 };
@@ -9160,7 +9161,6 @@ var mapCollectionState = (component, state, rendererMapperProps) => {
     afterSectionsProps,
     afterSections: afterSectionsProps.map(render),
     search: search ? __spreadProps(__spreadValues({}, pick(search, "title", "hint", "hints", "query")), {
-      onChange: (query) => component.search(component.getActiveState(), query),
       initialSections: search.initialSections ? mapSections(search.initialSections, rendererMapperProps) : void 0
     }) : void 0
   };

package/build/main.mjs

@@ -1791,7 +1791,7 @@ var toggleFilterOption = (state, filterIndex, optionIndex) => {
 // src/domain/components/collectionComponent/CollectionController.ts
 var createCollectionController = ({
   stack,
-  queryFunction,
+  collectionClient,
   trackEvent
 }) => {
   let requests = /* @__PURE__ */ new Map();
@@ -1837,7 +1837,7 @@ var createCollectionController = ({
     const { analytics, filters, search } = state;
     trackEvent(getEventName(mode, "Triggered"), analytics);
     try {
-      const response = await queryFunction({
+      const response = await collectionClient({
         searchParam: search == null ? void 0 : search.param,
         query: search == null ? void 0 : search.query,
         cursor: mode === "pagination" ? state.nextCursor : void 0,
@@ -2117,7 +2117,7 @@ var collectionLayoutToComponent = (uid, { analyticsId, control, initialState, ma
     );
   };
   const mapState = (state) => mapCollectionSpecToDomainState(state, mapperProps, mapLayout);
-  const queryFunction = getPerformCollectionQuery(httpClient, baseRequest, mapState);
+  const collectionClient = getPerformCollectionQuery(httpClient, baseRequest, mapState);
   const stack = createCollectionStack(
     uid,
     mapState(__spreadProps(__spreadValues({}, initialState), {
@@ -2125,7 +2125,7 @@ var collectionLayoutToComponent = (uid, { analyticsId, control, initialState, ma
     })),
     onComponentUpdate
   );
-  const controller = createCollectionController({ stack, queryFunction, trackEvent });
+  const controller = createCollectionController({ stack, collectionClient, trackEvent });
   const component = createCollectionComponent(
     {
       uid,
@@ -9112,6 +9112,7 @@ var collectionComponentToProps = (component, rendererMapperProps) => {
   const { stack } = component;
   return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "tags", "fork", "pop")), rendererMapperProps), {
     state: mapCollectionState(component, component.getActiveState(), rendererMapperProps),
+    onSearchChange: (query) => component.search(component.getActiveState(), query),
     depth: stack.length - 1
   });
 };
@@ -9131,7 +9132,6 @@ var mapCollectionState = (component, state, rendererMapperProps) => {
     afterSectionsProps,
     afterSections: afterSectionsProps.map(render),
     search: search ? __spreadProps(__spreadValues({}, pick(search, "title", "hint", "hints", "query")), {
-      onChange: (query) => component.search(component.getActiveState(), query),
       initialSections: search.initialSections ? mapSections(search.initialSections, rendererMapperProps) : void 0
     }) : void 0
   };

package/build/renderers/CoreContainerRenderer.js

@@ -0,0 +1,5 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const CoreContainerRenderer = {
+    canRenderType: 'container',
+    render: ({ children }) => _jsx(_Fragment, { children: children }),
+};

package/build/renderers/CoreRootRenderer.js

@@ -0,0 +1,12 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { findRendererPropsByType } from './utils';
+export const CoreRootRenderer = {
+    canRenderType: 'root',
+    render: ({ children, childrenProps, subflow }) => {
+        if ((subflow === null || subflow === void 0 ? void 0 : subflow.presentation.type) === 'push') {
+            return _jsx(_Fragment, { children: subflow.children });
+        }
+        const [stepProps] = findRendererPropsByType(childrenProps, 'step');
+        return (_jsxs("div", { id: stepProps === null || stepProps === void 0 ? void 0 : stepProps.id, className: "dynamic-flow-step", children: [children, (subflow === null || subflow === void 0 ? void 0 : subflow.presentation.type) === 'modal' ? subflow.children : undefined] }));
+    },
+};

package/build/renderers/EmptyLoadingStateRenderer.js

@@ -0,0 +1,5 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const EmptyLoadingStateRenderer = {
+    canRenderType: 'loading-state',
+    render: () => _jsx(_Fragment, {}),
+};

package/build/renderers/getRenderFunction.js

@@ -0,0 +1,24 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const getRenderFunction = (renderers) => {
+    function ComponentRenderer(props) {
+        const { type } = props;
+        if (type === 'hidden') {
+            return null;
+        }
+        const renderer = renderers.find(({ canRenderType, canRender = () => true }) => 
+        // once the type is matched, we know the props are of the correct type
+        canRenderType === type && canRender(props));
+        if (!renderer) {
+            throw new Error(`Could not find a renderer for ${type}`);
+        }
+        // if renderer defined, we know props are of the correct type
+        return renderer.render(props);
+    }
+    const render = (props) => {
+        if (!props) {
+            return _jsx(_Fragment, {});
+        }
+        return _jsx(ComponentRenderer, Object.assign({}, props), props.uid);
+    };
+    return render;
+};

package/build/renderers/getSchemaErrorMessageFunction.js

@@ -0,0 +1,111 @@
+import { formatDate } from '@transferwise/formatting';
+import errorMessages from '../common/messages/validation.messages';
+import genericErrorMessages from '../common/messages/generic-error.messages';
+import arrayErrorMessages from '../common/messages/validation.array.messages';
+import fileUploadMessages from '../common/messages/file-upload.messages';
+import multiFileUploadMessages from '../common/messages/multi-file-upload.messages';
+import downloadMessages from '../common/messages/download.messages';
+export function getSchemaErrorMessageFunction(formatMessage, locale) {
+    return (validationMessages) => createErrorMessageFunctions(validationMessages !== null && validationMessages !== void 0 ? validationMessages : {}, formatMessage, locale);
+}
+const createErrorMessageFunctions = (validationMessages, formatMessage, locale) => ({
+    minimum(minimum) {
+        var _a;
+        return ((_a = validationMessages.minimum) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.minimum, {
+            minimum,
+        }));
+    },
+    maximum(maximum) {
+        var _a;
+        return ((_a = validationMessages.maximum) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.maximum, {
+            maximum,
+        }));
+    },
+    minimumDate(minimumDate) {
+        var _a;
+        return ((_a = validationMessages.minimum) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.minimumDate, {
+            minimum: formatDate(new Date(minimumDate), locale, formatDateOptions),
+        }));
+    },
+    maximumDate(maximumDate) {
+        var _a;
+        return ((_a = validationMessages.maximum) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.maximumDate, {
+            maximum: formatDate(new Date(maximumDate), locale, formatDateOptions),
+        }));
+    },
+    invalidDate() {
+        var _a;
+        return (_a = validationMessages.invalidDate) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.patternDate);
+    },
+    minLength(minLength) {
+        var _a;
+        return ((_a = validationMessages.minLength) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.minLength, {
+            minLength,
+        }));
+    },
+    maxLength(maxLength) {
+        var _a;
+        return ((_a = validationMessages.maxLength) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.maxLength, {
+            maxLength,
+        }));
+    },
+    minItems(minItems) {
+        var _a;
+        return ((_a = validationMessages.minItems) !== null && _a !== void 0 ? _a : formatMessage(arrayErrorMessages.minItemsError, {
+            minItems,
+        }));
+    },
+    maxItems(maxItems) {
+        var _a;
+        return ((_a = validationMessages.maxItems) !== null && _a !== void 0 ? _a : formatMessage(arrayErrorMessages.maxItemsError, {
+            maxItems,
+        }));
+    },
+    minFiles(minItems) {
+        var _a;
+        return ((_a = validationMessages.minItems) !== null && _a !== void 0 ? _a : formatMessage(multiFileUploadMessages.minItemsError, {
+            minItems,
+        }));
+    },
+    maxFiles(maxItems) {
+        var _a;
+        return ((_a = validationMessages.maxItems) !== null && _a !== void 0 ? _a : formatMessage(multiFileUploadMessages.maxItemsError, {
+            maxItems,
+        }));
+    },
+    maxSize() {
+        var _a;
+        return (_a = validationMessages.maxSize) !== null && _a !== void 0 ? _a : formatMessage(fileUploadMessages.maxFileSizeError);
+    },
+    accepts() {
+        var _a;
+        return (_a = validationMessages.accepts) !== null && _a !== void 0 ? _a : formatMessage(fileUploadMessages.wrongFileTypeError);
+    },
+    pattern() {
+        var _a;
+        return (_a = validationMessages.pattern) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.pattern);
+    },
+    required() {
+        var _a;
+        return (_a = validationMessages.required) !== null && _a !== void 0 ? _a : formatMessage(errorMessages.required);
+    },
+    genericError() {
+        return formatMessage(genericErrorMessages.genericError);
+    },
+    genericErrorWithRetry() {
+        return formatMessage(genericErrorMessages.genericErrorRetryHint);
+    },
+    downloadStarted() {
+        return formatMessage(downloadMessages.downloadStarted);
+    },
+    downloadFailed() {
+        return formatMessage(downloadMessages.downloadFailed);
+    },
+    downloadSuccessful() {
+        return formatMessage(downloadMessages.downloadSuccessful);
+    },
+});
+const formatDateOptions = {
+    timeZone: 'UTC',
+    dateStyle: 'long',
+};

package/build/renderers/mappers/alertComponentToProps.js

@@ -0,0 +1,3 @@
+import { mapCallToActionOptional } from './utils/mapCallToAction';
+import { pick } from './utils/pick';
+export const alertComponentToProps = (component, rendererMapperProps) => (Object.assign(Object.assign(Object.assign({}, pick(component, 'uid', 'analyticsId', 'type', 'context', 'control', 'margin', 'markdown', 'media', 'tags', 'title')), { callToAction: mapCallToActionOptional(component.callToAction), onDismiss: component.dismiss, secondaryCallToAction: mapCallToActionOptional(component.secondaryCallToAction) }), rendererMapperProps));

package/build/renderers/mappers/allOfComponentToProps.js

@@ -0,0 +1,6 @@
+import { componentToRendererProps } from './componentToRendererProps';
+import { pick } from './utils/pick';
+export const allOfComponentToProps = (component, rendererMapperProps) => {
+    const childrenProps = component.components.map((c) => componentToRendererProps(c, rendererMapperProps));
+    return Object.assign(Object.assign(Object.assign({ type: 'form-section' }, pick(component, 'uid', 'analyticsId', 'control', 'description', 'help', 'media', 'tags', 'title')), rendererMapperProps), { children: childrenProps.map(rendererMapperProps.render), childrenProps });
+};

package/build/renderers/mappers/booleanInputComponentToProps.js

@@ -0,0 +1,3 @@
+import { inputComponentToProps } from './utils/inputComponentToProps';
+import { pick } from './utils/pick';
+export const booleanInputComponentToProps = (component, rendererMapperProps) => { var _a; return (Object.assign(Object.assign(Object.assign(Object.assign({}, inputComponentToProps(component, 'input-checkbox')), rendererMapperProps), pick(component, 'additionalText', 'supportingValues', 'inlineAlert')), { onChange: component.setValue, value: (_a = component.value) !== null && _a !== void 0 ? _a : false })); };

package/build/renderers/mappers/boxComponentToProps.js

@@ -0,0 +1,13 @@
+import { componentToRendererProps } from './componentToRendererProps';
+import { pick } from './utils/pick';
+export const boxComponentToProps = (component, rendererMapperProps) => {
+    const childrenProps = component.components.map((c) => componentToRendererProps(c, rendererMapperProps));
+    const { border, control } = component;
+    return Object.assign(Object.assign(Object.assign({}, pick(component, 'uid', 'analyticsId', 'type', 'control', 'width', 'margin', 'tags')), rendererMapperProps), { control: mapBoxControl({ border, control }), children: childrenProps.map(rendererMapperProps.render), childrenProps });
+};
+const mapBoxControl = ({ border, control, }) => {
+    if (border && control == null) {
+        return 'bordered';
+    }
+    return control;
+};

package/build/renderers/mappers/buttonComponentToProps.js

@@ -0,0 +1,4 @@
+import { pick } from './utils/pick';
+export const buttonComponentToProps = (component, rendererMapperProps) => {
+    return Object.assign(Object.assign(Object.assign({ type: 'button' }, pick(component, 'uid', 'analyticsId', 'title', 'control', 'context', 'margin', 'media', 'pinOrder', 'size', 'onClick', 'tags')), { disabled: component.disabled || rendererMapperProps.stepLoadingState !== 'idle' }), rendererMapperProps);
+};