@imposium-hub/components 2.11.3-3 → 2.11.4

package/dist/esm/components/h-rule/HRule.stories.d.ts

@@ -1,7 +1,6 @@
-import * as React from 'react';
 declare const _default: {
     title: string;
-    component: (props: any) => React.JSX.Element;
+    component: (props: any) => JSX.Element;
 };
 export default _default;
-export declare const defaultHRule: () => React.JSX.Element;
+export declare const defaultHRule: () => JSX.Element;

package/dist/esm/components/header/ProjectDropdown.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 interface IProjectDropdownProps {
     position: any;
     api: any;
@@ -9,5 +8,5 @@ interface IProjectDropdownProps {
     setAccessData(data: any): void;
     onClose(): void;
 }
-export declare const ProjectDropdown: (props: IProjectDropdownProps) => React.JSX.Element;
+export declare const ProjectDropdown: (props: IProjectDropdownProps) => JSX.Element;
 export {};

package/dist/esm/components/list-field/ListField.d.ts

@@ -30,7 +30,7 @@ declare class ListField extends React.PureComponent<IListFieldProps, IListFieldS
     private inputChanged;
     private inputFocus;
     private submitOption;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
     renderButtons(): any[];
 }
 export default ListField;

package/dist/esm/components/list-field/ListField.stories.d.ts

@@ -1,8 +1,7 @@
-import * as React from 'react';
 import ListField from './ListField';
 declare const _default: {
     title: string;
     component: typeof ListField;
 };
 export default _default;
-export declare const defaultListFIeld: () => React.JSX.Element;
+export declare const defaultListFIeld: () => JSX.Element;

package/dist/esm/components/log-viewer/LogViewer.d.ts

@@ -16,6 +16,6 @@ declare class LogViewer extends React.PureComponent<ILogViewerProps, ILogViewerS
     private getJobLogs;
     componentDidMount(): void;
     componentDidUpdate(prevProps: any): void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default LogViewer;

package/dist/esm/components/media-variable-field/MediaVariableField.d.ts

@@ -22,6 +22,6 @@ declare class MediaVariableField extends React.PureComponent<IMediaVariableField
     onClick(): void;
     private renderClearButton;
     private onFileDrop;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default MediaVariableField;

package/dist/esm/components/modal/Modal.d.ts

@@ -14,6 +14,6 @@ declare class Modal extends React.PureComponent<IModalProps> {
     componentDidMount(): void;
     componentWillUnmount(): void;
     private onClose;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default Modal;

package/dist/esm/components/modal/Modal.stories.d.ts

@@ -1,8 +1,7 @@
-import * as React from 'react';
 import Modal from './Modal';
 declare const _default: {
     title: string;
     component: typeof Modal;
 };
 export default _default;
-export declare const defaultModal: () => React.JSX.Element;
+export declare const defaultModal: () => JSX.Element;

package/dist/esm/components/number-field/NumberField.d.ts

@@ -32,6 +32,6 @@ declare class NumberField extends React.PureComponent<INumberFieldProps, INumber
     private onSelectFocus;
     private onSelectBlur;
     private handleLabelDrag;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default NumberField;

package/dist/esm/components/number-field/NumberField.stories.d.ts

@@ -1,8 +1,7 @@
-import * as React from 'react';
 import NumberField from './NumberField';
 declare const _default: {
     title: string;
     component: typeof NumberField;
 };
 export default _default;
-export declare const defaultNumberField: () => React.JSX.Element;
+export declare const defaultNumberField: () => JSX.Element;

package/dist/esm/components/players/AudioPlayer.d.ts

@@ -12,6 +12,6 @@ declare class AudioPlayer extends React.PureComponent<IAudioPlayerProps, undefin
     private height;
     constructor(props: any);
     getAudioStyle(): any;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default AudioPlayer;

package/dist/esm/components/players/AudioPreview.d.ts

@@ -21,6 +21,6 @@ declare class AudioPreview extends React.PureComponent<IAudioPreviewProps, IAudi
     componentWillUnmount(): void;
     private detectOutsideClick;
     private onClose;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default AudioPreview;

package/dist/esm/components/players/ImagePlayer.d.ts

@@ -15,6 +15,6 @@ declare class ImagePlayer extends React.PureComponent<IImagePlayerProps, IImageP
     constructor(props: any);
     getImageStyle(): any;
     private metadataLoaded;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default ImagePlayer;

package/dist/esm/components/players/ImagePreview.d.ts

@@ -21,6 +21,6 @@ declare class ImagePreview extends React.PureComponent<IImagePreviewProps, IImag
     componentWillUnmount(): void;
     private detectOutsideClick;
     private onClose;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default ImagePreview;

package/dist/esm/components/players/ImageSequencePlayer.d.ts

@@ -15,6 +15,6 @@ declare class ImageSequencePlayer extends React.PureComponent<IImageSequencePlay
     constructor(props: any);
     getImageStyle(): any;
     private metadataLoaded;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default ImageSequencePlayer;

package/dist/esm/components/players/TemplatePlayer.d.ts

@@ -12,6 +12,6 @@ declare class TemplatePlayer extends React.PureComponent<ITemplatePlayerProps, u
     private height;
     constructor(props: any);
     getImageStyle(): any;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default TemplatePlayer;

package/dist/esm/components/players/VideoPlayer.d.ts

@@ -39,6 +39,6 @@ declare class VideoPlayer extends React.PureComponent<IVideoPlayerProps, IVideoP
     setTime(time: any): void;
     private metadataLoaded;
     private renderCustomControls;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default VideoPlayer;

package/dist/esm/components/players/VideoPreview.d.ts

@@ -21,6 +21,6 @@ declare class VideoPreview extends React.PureComponent<IVideoPreviewProps, IVide
     componentWillUnmount(): void;
     private detectOutsideClick;
     private onClose;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default VideoPreview;

package/dist/esm/components/publish-wizard/PublishWizard.d.ts

@@ -25,9 +25,9 @@ export declare const TabContent: React.FC;
 export declare const TabHeader: (props: {
     title: string;
     className?: StyleSheet | any;
-}) => React.JSX.Element;
+}) => JSX.Element;
 export declare const WizardError: (props: {
     title: string;
     description: string;
-}) => React.JSX.Element;
+}) => JSX.Element;
 export declare const BigLink: React.FC<IBigLinkProps>;

package/dist/esm/components/publish-wizard/publish/APIIntegration.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 declare class APIIntegration extends React.PureComponent {
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default APIIntegration;

package/dist/esm/components/publish-wizard/publish/CrMPublishCreativeSelectCell.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface ICrMPublishCreativeSelectCellProps {
+    cell: any;
+    onSelectChange: (creativeId: string, selected: boolean) => void;
+    selectedCreatives: string[];
+}
+export declare const CrMPublishCreativeSelectCell: React.FC<ICrMPublishCreativeSelectCellProps>;
+export {};

package/dist/esm/components/publish-wizard/publish/CrMPublishCreativeSelectCell.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import CheckboxField from '../../checkbox-field/CheckboxField';
+import { canBePublishedTo } from './CrMPublishUI';
+export const CrMPublishCreativeSelectCell = (props) => {
+    const { cell, onSelectChange, selectedCreatives } = props;
+    const creativeId = cell.row.original.creativeId;
+    const isSelected = selectedCreatives.includes(creativeId);
+    const showCheckbox = canBePublishedTo(cell.row.original.approvalStatus);
+    if (showCheckbox) {
+        return (React.createElement(CheckboxField, { label: '', propagate: false, value: isSelected, onChange: (selected) => (onSelectChange(creativeId, selected)) }));
+    }
+    else {
+        return null;
+    }
+};
+//# sourceMappingURL=CrMPublishCreativeSelectCell.js.map

package/dist/esm/components/publish-wizard/publish/CrMPublishCreativeSelectCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrMPublishCreativeSelectCell.js","sourceRoot":"","sources":["../../../../../src/components/publish-wizard/publish/CrMPublishCreativeSelectCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,aAAa,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AASlD,MAAM,CAAC,MAAM,4BAA4B,GAAiD,CAAC,KAAK,EAAE,EAAE;IAChG,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAC;IAC1D,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,UAAU,CAAC;IAChD,MAAM,UAAU,GAAG,iBAAiB,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;IACxE,IAAG,YAAY,EAAC,CAAC;QACb,OAAO,CACH,oBAAC,aAAa,IACV,KAAK,EAAC,EAAE,EACR,SAAS,EAAE,KAAK,EAChB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,CAAC,QAAQ,EAAC,EAAE,CAAA,CAAC,cAAc,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,GAC9D,CACL,CAAC;IACN,CAAC;SAAI,CAAC;QACF,OAAO,IAAI,CAAC;IAChB,CAAC;AACL,CAAC,CAAC"}

package/dist/esm/components/publish-wizard/publish/CrMPublishCreativeSelectHeader.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface ICrMPublishCreativeSelectHeaderProps {
+    onSelectChange: (selected: boolean) => void;
+    selectedCreatives: string[];
+    creativeConfig: any[];
+}
+export declare const CrMPublishCreativeSelectHeader: React.FC<ICrMPublishCreativeSelectHeaderProps>;
+export {};

package/dist/esm/components/publish-wizard/publish/CrMPublishCreativeSelectHeader.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import CheckboxField from '../../checkbox-field/CheckboxField';
+import { canBePublishedTo } from './CrMPublishUI';
+export const CrMPublishCreativeSelectHeader = (props) => {
+    const { onSelectChange, selectedCreatives, creativeConfig } = props;
+    const publishableCreatives = creativeConfig.filter(creative => canBePublishedTo(creative.approvalStatus));
+    const publishableCreativeIds = publishableCreatives.map(creative => creative.creativeId);
+    const allPublishableSelected = publishableCreativeIds.length > 0 &&
+        publishableCreativeIds.every(id => selectedCreatives.includes(id));
+    return (React.createElement(CheckboxField, { label: '', propagate: false, value: allPublishableSelected, onChange: (selected) => onSelectChange(selected) }));
+};
+//# sourceMappingURL=CrMPublishCreativeSelectHeader.js.map

package/dist/esm/components/publish-wizard/publish/CrMPublishCreativeSelectHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrMPublishCreativeSelectHeader.js","sourceRoot":"","sources":["../../../../../src/components/publish-wizard/publish/CrMPublishCreativeSelectHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,aAAa,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAQlD,MAAM,CAAC,MAAM,8BAA8B,GAAmD,CAAC,KAAK,EAAE,EAAE;IACpG,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEpE,MAAM,oBAAoB,GAAG,cAAc,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAC1D,gBAAgB,CAAC,QAAQ,CAAC,cAAc,CAAC,CAC5C,CAAC;IAEF,MAAM,sBAAsB,GAAG,oBAAoB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;IACzF,MAAM,sBAAsB,GAAG,sBAAsB,CAAC,MAAM,GAAG,CAAC;QAC5D,sBAAsB,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IAEvE,OAAO,CACH,oBAAC,aAAa,IACV,KAAK,EAAC,EAAE,EACR,SAAS,EAAE,KAAK,EAChB,KAAK,EAAE,sBAAsB,EAC7B,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,cAAc,CAAC,QAAQ,CAAC,GAClD,CACL,CAAC;AACN,CAAC,CAAC"}

package/dist/esm/components/publish-wizard/publish/CrMPublishNameCell.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+interface ICrMPublishNameCellProps {
+    cell: any;
+}
+export declare const CrMPublishNameCell: React.FC<ICrMPublishNameCellProps>;
+export {};

package/dist/esm/components/publish-wizard/publish/CrMPublishNameCell.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { renderTooltip, renderTooltipProps } from '../../Tooltip';
+import { canBePublishedTo } from './CrMPublishUI';
+import * as copy from '../../../constants/copy';
+export const CrMPublishNameCell = (props) => {
+    const { cell } = props;
+    const canBePublished = canBePublishedTo(cell.row.original.approvalStatus);
+    const tooltipId = `publish-name-${cell.row.original.creativeId}`;
+    if (canBePublished) {
+        return (React.createElement("div", { className: `crm-publish-name` }, cell.row.original.creativeName));
+    }
+    else {
+        return (React.createElement("div", { className: `crm-publish-name disabled`, ...renderTooltipProps(tooltipId, copy.publish.disabledCreativeTooltip) },
+            cell.row.original.creativeName,
+            renderTooltip(tooltipId, copy.publish.disabledCreativeTooltip)));
+    }
+};
+//# sourceMappingURL=CrMPublishNameCell.js.map

package/dist/esm/components/publish-wizard/publish/CrMPublishNameCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrMPublishNameCell.js","sourceRoot":"","sources":["../../../../../src/components/publish-wizard/publish/CrMPublishNameCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,IAAI,MAAM,yBAAyB,CAAC;AAMhD,MAAM,CAAC,MAAM,kBAAkB,GAAuC,CAAC,KAAK,EAAE,EAAE;IAC5E,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IACvB,MAAM,cAAc,GAAG,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;IAC1E,MAAM,SAAS,GAAG,gBAAgB,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IAEjE,IAAG,cAAc,EAAC,CAAC;QACf,OAAO,CACH,6BAAK,SAAS,EAAI,kBAAkB,IAC/B,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,YAAY,CAC7B,CACT,CAAC;IACN,CAAC;SAAI,CAAC;QACF,OAAO,CACH,6BAAK,SAAS,EAAI,2BAA2B,KAAM,kBAAkB,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,uBAAuB,CAAC;YACjH,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,YAAY;YAC9B,aAAa,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAC7D,CACT,CAAC;IACN,CAAC;AACL,CAAC,CAAC"}

package/dist/esm/components/publish-wizard/publish/CrMPublishPreviewCell.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface ICrMPublishPreviewCellProps {
+    cell: any;
+    crmBaseUrl: string;
+    creativeLibraryId: string;
+}
+export declare const CrMPublishPreviewCell: React.FC<ICrMPublishPreviewCellProps>;
+export {};

package/dist/esm/components/publish-wizard/publish/CrMPublishPreviewCell.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Button } from '../../..';
+import { ICON_EYE } from '../../../constants/icons';
+export const CrMPublishPreviewCell = (props) => {
+    const { cell, crmBaseUrl, creativeLibraryId } = props;
+    const creativeId = cell.row.original.creativeId;
+    const previewUrl = `${crmBaseUrl}/library/${creativeLibraryId}/creative/${creativeId}/versions/`;
+    return (React.createElement("a", { href: previewUrl, target: '_blank' },
+        React.createElement(Button, { style: 'subtle', size: 'small' }, ICON_EYE)));
+};
+//# sourceMappingURL=CrMPublishPreviewCell.js.map

package/dist/esm/components/publish-wizard/publish/CrMPublishPreviewCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrMPublishPreviewCell.js","sourceRoot":"","sources":["../../../../../src/components/publish-wizard/publish/CrMPublishPreviewCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAQpD,MAAM,CAAC,MAAM,qBAAqB,GAA0C,CAAC,KAAK,EAAE,EAAE;IAClF,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAC;IACtD,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,UAAU,CAAC;IAChD,MAAM,UAAU,GAAG,GAAG,UAAU,YAAY,iBAAiB,aAAa,UAAU,YAAY,CAAC;IAEjG,OAAO,CACH,2BAAG,IAAI,EAAI,UAAU,EAAE,MAAM,EAAC,QAAQ;QAClC,oBAAC,MAAM,IAAC,KAAK,EAAG,QAAQ,EAAC,IAAI,EAAC,OAAO,IAChC,QAAQ,CACJ,CACT,CACP,CAAC;AACN,CAAC,CAAC"}

package/dist/esm/components/publish-wizard/publish/CrMPublishStatusCell.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+interface ICrMPublishStatusCellProps {
+    cell: any;
+}
+export declare const CrMPublishStatusCell: React.FC<ICrMPublishStatusCellProps>;
+export {};

package/dist/esm/components/publish-wizard/publish/CrMPublishStatusCell.js

@@ -0,0 +1,6 @@
+import { CREATIVE_STATUS_LABELS } from '../../../constants/publish';
+export const CrMPublishStatusCell = (props) => {
+    const { cell } = props;
+    return (CREATIVE_STATUS_LABELS[cell.row.original.approvalStatus] || cell.row.original.approvalStatus);
+};
+//# sourceMappingURL=CrMPublishStatusCell.js.map

package/dist/esm/components/publish-wizard/publish/CrMPublishStatusCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrMPublishStatusCell.js","sourceRoot":"","sources":["../../../../../src/components/publish-wizard/publish/CrMPublishStatusCell.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAMpE,MAAM,CAAC,MAAM,oBAAoB,GAAyC,CAAC,KAAK,EAAE,EAAE;IAChF,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IACvB,OAAO,CAAC,sBAAsB,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;AAC1G,CAAC,CAAC"}

package/dist/esm/components/publish-wizard/publish/CrMPublishUI.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { IImposiumAPI } from '../../..';
+interface ICrmPublishUIProps {
+    publishing: boolean;
+    error: React.ReactNode;
+    api: IImposiumAPI;
+    creativeLibraryId: string;
+    projectId: string;
+    crmBaseUrl: string;
+    selectedCreatives: string[];
+    onUpdateSelectedCreatives: (selectedCreatives: any) => void;
+    onError: (error: string) => void;
+}
+export declare const CrMPublishUI: React.FC<ICrmPublishUIProps>;
+export declare const canBePublishedTo: (approvalStatus: string) => boolean;
+export {};

package/dist/esm/components/publish-wizard/publish/CrMPublishUI.js

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import * as copy from '../../../constants/copy';
+import { DataTable, HRule, Button, TextField } from '../../..';
+import { useEffect, useState, useCallback } from 'react';
+import { ICON_SEARCH } from '../../../constants/icons';
+import { CREATIVE_STATUSES_TO_PUBLISH } from '../../../constants/publish';
+import { CrMPublishStatusCell } from './CrMPublishStatusCell';
+import { CrMPublishPreviewCell } from './CrMPublishPreviewCell';
+import { CrMPublishNameCell } from './CrMPublishNameCell';
+import { CrMPublishCreativeSelectHeader } from './CrMPublishCreativeSelectHeader';
+import { CrMPublishCreativeSelectCell } from './CrMPublishCreativeSelectCell';
+export const CrMPublishUI = (props) => {
+    const { publishing, error, crmBaseUrl, creativeLibraryId, projectId, api, selectedCreatives, onUpdateSelectedCreatives } = props;
+    const [nameFilter, setNameFilter] = useState('');
+    const [creativeConfig, setCreativeConfig] = useState([]);
+    const nameSearch = React.createElement(TextField, { className: 'creative-name', buttons: [
+            React.createElement(Button, { key: 'btn-search', style: 'subtle', size: 'small' }, ICON_SEARCH)
+        ], width: '150px', value: nameFilter, onChange: (value) => setNameFilter(value) });
+    const onSelectChange = useCallback((creativeId, selected) => {
+        const previouslySelected = [...selectedCreatives];
+        if (selected) {
+            onUpdateSelectedCreatives([...previouslySelected, creativeId]);
+        }
+        else {
+            onUpdateSelectedCreatives(previouslySelected.filter(id => id !== creativeId));
+        }
+    }, [selectedCreatives, onUpdateSelectedCreatives]);
+    const onSelectAllChange = useCallback((selected) => {
+        if (selected) {
+            const publishableCreativeIds = creativeConfig
+                .filter(creative => canBePublishedTo(creative.approvalStatus))
+                .map(creative => creative.creativeId);
+            onUpdateSelectedCreatives(publishableCreativeIds);
+        }
+        else {
+            onUpdateSelectedCreatives([]);
+        }
+    }, [nameFilter, creativeConfig]);
+    const COLUMN_CONFIG = [
+        {
+            accessor: 'selected',
+            width: 25,
+            disableResize: true,
+            disableSortBy: true,
+            Header: () => React.createElement(CrMPublishCreativeSelectHeader, { onSelectChange: onSelectAllChange, selectedCreatives: selectedCreatives, creativeConfig: creativeConfig }),
+            Cell: (cell) => React.createElement(CrMPublishCreativeSelectCell, { cell: cell, onSelectChange: onSelectChange, selectedCreatives: selectedCreatives })
+        },
+        {
+            accessor: 'creativeName',
+            Header: 'Creative Name',
+            width: 250,
+            minWidth: 250,
+            maxWidth: 250,
+            disableSortBy: true,
+            Cell: (cell) => React.createElement(CrMPublishNameCell, { cell: cell }),
+            Search: nameSearch,
+        },
+        {
+            accessor: 'creativeId',
+            Header: 'ID',
+            width: 75,
+            minWidth: 75,
+            maxWidth: 75,
+            disableSortBy: true,
+        },
+        {
+            accessor: 'numberOfVersions',
+            Header: 'Versions',
+            width: 75,
+            minWidth: 75,
+            maxWidth: 75,
+            disableSortBy: true,
+        },
+        {
+            accessor: 'approvalStatus',
+            Header: 'Status',
+            width: 75,
+            minWidth: 75,
+            maxWidth: 75,
+            disableSortBy: true,
+            Cell: (cell) => React.createElement(CrMPublishStatusCell, { cell: cell })
+        },
+        {
+            accessor: 'preview',
+            Header: 'Preview',
+            width: 50,
+            minWidth: 50,
+            maxWidth: 50,
+            disableSortBy: true,
+            Cell: (cell) => React.createElement(CrMPublishPreviewCell, { cell: cell, crmBaseUrl: crmBaseUrl, creativeLibraryId: creativeLibraryId })
+        }
+    ];
+    useEffect(() => {
+        api.getCreativesLinkedToProject(projectId).then((res) => {
+            setCreativeConfig(res.creatives);
+        }).catch((err) => {
+            const msg = err.response?.data?.error || err.message;
+            const errorCopy = copy.publish.errorGettingCreatives.replace('{{ERR}}', msg);
+            props.onError(errorCopy);
+        });
+    }, []);
+    return (React.createElement("div", null,
+        React.createElement("h2", null, copy.publish.publishStepTitleFromCrM),
+        React.createElement(HRule, null),
+        React.createElement("p", null, publishing ? copy.publish.publishInProgress : ''),
+        React.createElement(DataTable, { showInterstitial: publishing, columns: COLUMN_CONFIG, data: nameFilter
+                ? creativeConfig.filter(creative => {
+                    return creative.creativeName.toLowerCase().includes(nameFilter.toLowerCase());
+                })
+                : creativeConfig, hidePaginator: true, itemsPerPage: 1000, tightRows: true }),
+        error && React.createElement("p", { className: 'publish-error' }, error)));
+};
+export const canBePublishedTo = (approvalStatus) => {
+    return CREATIVE_STATUSES_TO_PUBLISH.includes(approvalStatus);
+};
+//# sourceMappingURL=CrMPublishUI.js.map

package/dist/esm/components/publish-wizard/publish/CrMPublishUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrMPublishUI.js","sourceRoot":"","sources":["../../../../../src/components/publish-wizard/publish/CrMPublishUI.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/publish-wizard/publish/HubSpotFlow.d.ts

@@ -11,6 +11,6 @@ declare class HubSpotFlow extends React.PureComponent<IHubSpotFlowProps, undefin
     constructor(props: any);
     private createUrl;
     private getFirstAct;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default HubSpotFlow;

package/dist/esm/components/publish-wizard/publish/WebpageHosted.d.ts

@@ -6,7 +6,7 @@ interface IWebpageHostedProps {
 }
 export declare const documentationLinks: {
     key: string;
-    label: React.JSX.Element;
+    label: JSX.Element;
     link: string;
 }[];
 declare class WebpageHosted extends React.PureComponent<IWebpageHostedProps> {
@@ -14,6 +14,6 @@ declare class WebpageHosted extends React.PureComponent<IWebpageHostedProps> {
     private downloadSampleWebPage;
     private getFirstAct;
     private linkToDemoPage;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default WebpageHosted;

package/dist/esm/components/section/Section.d.ts

@@ -1,3 +1,2 @@
-import * as React from 'react';
-declare const Section: (props: any) => React.JSX.Element;
+declare const Section: (props: any) => JSX.Element;
 export default Section;

package/dist/esm/components/section/Section.stories.d.ts

@@ -1,7 +1,6 @@
-import * as React from 'react';
 declare const _default: {
     title: string;
-    component: (props: any) => React.JSX.Element;
+    component: (props: any) => JSX.Element;
 };
 export default _default;
-export declare const defaultSection: () => React.JSX.Element;
+export declare const defaultSection: () => JSX.Element;

package/dist/esm/components/select-field/SelectField.d.ts

@@ -24,6 +24,6 @@ declare class SelectField extends React.PureComponent<ISelectFieldProps> {
     constructor(props: any);
     private copyToClipboard;
     private onChange;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default SelectField;

package/dist/esm/components/select-field/SelectField.stories.d.ts

@@ -1,8 +1,7 @@
-import * as React from 'react';
 import SelectField from './SelectField';
 declare const _default: {
     title: string;
     components: typeof SelectField;
 };
 export default _default;
-export declare const defaultSelectField: () => React.JSX.Element;
+export declare const defaultSelectField: () => JSX.Element;

package/dist/esm/components/shortcut-menu/ShortcutMenu.stories.d.ts

@@ -1,7 +1,6 @@
-import * as React from 'react';
 declare const _default: {
     title: string;
     component: React.FC<import("./ShortcutMenu").IShortcutMenu>;
 };
 export default _default;
-export declare const defaultShortcutMenu: () => React.JSX.Element;
+export declare const defaultShortcutMenu: () => JSX.Element;

package/dist/esm/components/slider-field/SliderField.d.ts

@@ -26,6 +26,6 @@ declare class SliderField extends React.PureComponent<ISliderFieldProps, ISlider
     private rangeInputChange;
     private numberInputChange;
     private toggle;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default SliderField;

package/dist/esm/components/slider-field/SliderField.stories.d.ts

@@ -1,8 +1,7 @@
-import * as React from 'react';
 import SliderField from './SliderField';
 declare const _default: {
     title: string;
     component: typeof SliderField;
 };
 export default _default;
-export declare const defaultSliderField: () => React.JSX.Element;
+export declare const defaultSliderField: () => JSX.Element;

package/dist/esm/components/smpte-field/SMPTEField.d.ts

@@ -31,6 +31,6 @@ declare class SMPTEField extends React.PureComponent<ISMPTEFieldProps, ISMPTEFie
     private onChange;
     private setDuration;
     private SMTPEValidator;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default SMPTEField;

package/dist/esm/components/tabs/Tabs.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 export interface ITab {
     content?: any;
     key?: string;
@@ -7,7 +6,5 @@ export interface ITab {
     label: any;
     menuButtons?: JSX.Element;
 }
-declare const _default: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<any, "targetRef"> & {
-    targetRef?: any;
-}, "width">, "height">, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const _default: any;
 export default _default;

package/dist/esm/components/tabs/Tabs.stories.d.ts

@@ -1,9 +1,6 @@
-import * as React from 'react';
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<any, "targetRef"> & {
-        targetRef?: any;
-    }, "width">, "height">, "ref"> & React.RefAttributes<HTMLElement>>;
+    component: any;
 };
 export default _default;
-export declare const defaultTabs: () => React.JSX.Element;
+export declare const defaultTabs: () => JSX.Element;

package/dist/esm/components/tag/Tag.d.ts

@@ -1,10 +1,2 @@
-import * as React from 'react';
-interface ITagProps {
-    copy: string;
-    colorize?: boolean;
-    removeHandler?: (...args: any[]) => any;
-    onNotification?: (e: any) => void;
-    onError?: (e: any) => void;
-}
-declare const TagMemoized: React.NamedExoticComponent<ITagProps>;
+declare const TagMemoized: any;
 export default TagMemoized;