@imposium-hub/components 1.44.3 → 1.45.0

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

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import * as copy from '../../../constants/copy';
+import { BigLink, BigButton } from '../PublishWizard';
+import { ICON_DOWNLOAD, ICON_GLOBE, ICON_JS, ICON_PROJECT_DIAGRAM } from '../../../constants/icons';
+import { downloadSDKArchive } from '../../../utils/template-generator';
+import { getDemoURL } from '../../../utils/routing';
+import HRule from '../../h-rule/HRule';
+export const documentationLinks = [
+    {
+        key: 'js-sdk-link',
+        label: React.createElement("span", null,
+            ICON_JS,
+            "\u00A0",
+            copy.integration.js),
+        link: copy.integration.jsSdkLink
+    },
+    {
+        key: 'rest-link',
+        label: React.createElement("span", null,
+            ICON_PROJECT_DIAGRAM,
+            "\u00A0",
+            copy.integration.rest),
+        link: copy.integration.restLink
+    },
+];
+class WebpageHosted extends React.PureComponent {
+    constructor(props) {
+        super(props);
+    }
+    downloadSampleWebPage = () => {
+        const { story, compositionId, accessKey } = this.props;
+        const firstAct = this.getFirstAct(story);
+        let archiveName;
+        let sdkExampleBody;
+        if (story.id &&
+            story.name &&
+            typeof firstAct !== 'undefined' &&
+            firstAct.hasOwnProperty('inventory')) {
+            archiveName = story.name + copy.integration.sdkArchiveSuffix;
+            sdkExampleBody = {
+                storyId: story.id,
+                compositionId,
+                storyName: story.name,
+                accessToken: accessKey,
+                inventory: firstAct.inventory
+            };
+            downloadSDKArchive(archiveName, sdkExampleBody);
+        }
+    };
+    getFirstAct = (story) => {
+        for (const key in story.acts) {
+            if (story.acts.hasOwnProperty(key)) {
+                return story.acts[key];
+            }
+        }
+    };
+    linkToDemoPage() {
+        const { accessKey, compositionId, story: { id } } = this.props;
+        if (accessKey) {
+            const demoUrl = `${getDemoURL()}/${accessKey}/${id}/${compositionId}`;
+            window.open(demoUrl, '_blank');
+        }
+    }
+    render() {
+        const webPageOptions = [
+            {
+                label: React.createElement("span", null,
+                    ICON_GLOBE,
+                    "\u00A0",
+                    copy.publish.webPageHosted),
+                onClick: () => this.linkToDemoPage(),
+            },
+            {
+                label: React.createElement("span", null,
+                    ICON_DOWNLOAD,
+                    "\u00A0",
+                    copy.publish.sampleWebpage),
+                onClick: () => this.downloadSampleWebPage(),
+            },
+        ];
+        return (React.createElement("div", null,
+            React.createElement("h2", null, copy.publish.webpageTitle),
+            React.createElement(HRule, null),
+            React.createElement("p", null, copy.publish.webpageDesc),
+            React.createElement(HRule, null),
+            React.createElement("div", { className: 'link-wrapper' }, webPageOptions?.map((option, index) => {
+                return (React.createElement(BigButton, { key: index, label: option.label, onClick: () => option.onClick() }));
+            })),
+            React.createElement("br", null),
+            React.createElement("br", null),
+            React.createElement("h2", null, copy.integration.documentation),
+            React.createElement(HRule, null),
+            React.createElement("p", null, copy.integration.docParagraph),
+            React.createElement("div", { className: 'link-wrapper' }, documentationLinks?.map((link) => {
+                return (React.createElement(BigLink, { key: link.key, label: link.label, link: link.link }));
+            }))));
+    }
+}
+export default WebpageHosted;
+//# sourceMappingURL=WebpageHosted.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WebpageHosted.js","sourceRoot":"","sources":["../../../../../src/components/publish-wizard/publish/WebpageHosted.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,IAAI,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAC,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,oBAAoB,EAAC,MAAM,0BAA0B,CAAC;AAClG,OAAO,EAAC,kBAAkB,EAAkB,MAAM,mCAAmC,CAAC;AACtF,OAAO,EAAC,UAAU,EAAC,MAAM,wBAAwB,CAAC;AAClD,OAAO,KAAK,MAAM,oBAAoB,CAAC;AAQvC,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAC9B;QACI,GAAG,EAAE,aAAa;QAClB,KAAK,EAAG;YAAO,OAAO;;YAAQ,IAAI,CAAC,WAAW,CAAC,EAAE,CAAQ;QACzD,IAAI,EAAG,IAAI,CAAC,WAAW,CAAC,SAAS;KACpC;IACD;QACI,GAAG,EAAE,WAAW;QAChB,KAAK,EAAG;YAAO,oBAAoB;;YAAQ,IAAI,CAAC,WAAW,CAAC,IAAI,CAAQ;QACxE,IAAI,EAAG,IAAI,CAAC,WAAW,CAAC,QAAQ;KACnC;CACJ,CAAC;AAEF,MAAM,aAAc,SAAQ,KAAK,CAAC,aAAkC;IAChE,YAAY,KAAK;QACb,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAEO,qBAAqB,GAAG,GAAG,EAAE;QACjC,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACvD,MAAM,QAAQ,GAAS,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAC/C,IAAI,WAAoB,CAAC;QACzB,IAAI,cAAgC,CAAC;QACrC,IACI,KAAK,CAAC,EAAE;YACR,KAAK,CAAC,IAAI;YACV,OAAO,QAAQ,KAAK,WAAW;YAC/B,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC,EACtC;YACE,WAAW,GAAG,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC;YAC7D,cAAc,GAAG;gBACb,OAAO,EAAE,KAAK,CAAC,EAAE;gBACjB,aAAa;gBACb,SAAS,EAAE,KAAK,CAAC,IAAI;gBACrB,WAAW,EAAE,SAAS;gBACtB,SAAS,EAAE,QAAQ,CAAC,SAAS;aAChC,CAAC;YAEF,kBAAkB,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC;SACnD;IACL,CAAC,CAAA;IAEO,WAAW,GAAG,CAAC,KAAK,EAAQ,EAAE;QAElC,KAAK,MAAM,GAAG,IAAI,KAAK,CAAC,IAAI,EAAE;YAC1B,IAAI,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE;gBAChC,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aAC1B;SACJ;IACL,CAAC,CAAA;IAEO,cAAc;QAClB,MAAM,EAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,EAAC,EAAE,EAAC,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3D,IAAI,SAAS,EAAE;YACX,MAAM,OAAO,GAAG,GAAG,UAAU,EAAE,IAAI,SAAS,IAAI,EAAE,IAAI,aAAa,EAAE,CAAC;YACtE,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;SAClC;IACL,CAAC;IAEM,MAAM;QACT,MAAM,cAAc,GAAG;YACnB;gBACI,KAAK,EAAG;oBAAO,UAAU;;oBAAQ,IAAI,CAAC,OAAO,CAAC,aAAa,CAAQ;gBACnE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;aACvC;YACD;gBACI,KAAK,EAAG;oBAAO,aAAa;;oBAAQ,IAAI,CAAC,OAAO,CAAC,aAAa,CAAQ;gBACtE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE;aAC9C;SACJ,CAAC;QAEF,OAAO,CACH;YACI,gCAAK,IAAI,CAAC,OAAO,CAAC,YAAY,CAAM;YACpC,oBAAC,KAAK,OAAE;YACR,+BAAI,IAAI,CAAC,OAAO,CAAC,WAAW,CAAK;YACjC,oBAAC,KAAK,OAAE;YACR,6BAAK,SAAS,EAAG,cAAc,IAC1B,cAAc,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;gBACnC,OAAO,CACH,oBAAC,SAAS,IACN,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,GACjC,CACL,CAAC;YACN,CAAC,CAAC,CACA;YACN,+BAAK;YACL,+BAAK;YACL,gCAAK,IAAI,CAAC,WAAW,CAAC,aAAa,CAAM;YACzC,oBAAC,KAAK,OAAE;YACR,+BAAI,IAAI,CAAC,WAAW,CAAC,YAAY,CAAK;YACtC,6BAAK,SAAS,EAAG,cAAc,IAC1B,kBAAkB,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBAC9B,OAAO,CACH,oBAAC,OAAO,IACJ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAI,IAAI,CAAC,KAAK,EACnB,IAAI,EAAI,IAAI,CAAC,IAAI,GACnB,CACL,CAAC;YACN,CAAC,CAAC,CACA,CACJ,CACT,CAAC;IACN,CAAC;CACJ;AAED,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Section: (props: any) => JSX.Element;
+export default Section;

package/dist/esm/components/section/Section.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+const Section = (props) => {
+    const customClass = (typeof props.className === 'string') ? props.className : '';
+    const loader = (props.isLoading) ? React.createElement("div", { className: 'loading-bar' }) : null;
+    let titleMarkup = (React.createElement("div", { className: 'title' }, props.title));
+    if (props.hasOwnProperty('tabs') && Array.isArray(props.tabs)) {
+        titleMarkup = props.tabs.map((tabName, i) => (React.createElement("div", { key: i, className: `tab ${props.activeTabName === tabName ? 'active' : ''}`, onClick: () => props.selectTab(tabName, i) }, tabName)));
+    }
+    return (React.createElement("div", { className: `section ${customClass}` },
+        React.createElement("div", { className: 'section-header' },
+            titleMarkup,
+            React.createElement("div", { className: 'buttons' }, props.buttons)),
+        React.createElement("div", { className: 'section-content' }, props.children),
+        loader));
+};
+export default Section;
+//# sourceMappingURL=Section.js.map

package/dist/esm/components/section/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sourceRoot":"","sources":["../../../../src/components/section/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,OAAO,GAAG,CAAC,KAAK,EAAE,EAAE;IACtB,MAAM,WAAW,GAAY,CAAC,OAAO,KAAK,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1F,MAAM,MAAM,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAG,aAAa,GAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IAC3E,IAAI,WAAW,GAAiB,CAAC,6BAAK,SAAS,EAAG,OAAO,IAAE,KAAK,CAAC,KAAK,CAAO,CAAC,CAAC;IAE/E,IAAI,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;QAC3D,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,OAAgB,EAAE,CAAU,EAAE,EAAE,CAAC,CAC3D,6BACI,GAAG,EAAI,CAAC,EACR,SAAS,EAAI,OAAO,KAAK,CAAC,aAAa,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EACrE,OAAO,EAAI,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC,CAAC,IAC3C,OAAO,CACN,CACT,CAAC,CAAC;KACN;IAED,OAAO,CACH,6BAAK,SAAS,EAAE,WAAW,WAAW,EAAE;QACpC,6BAAK,SAAS,EAAC,gBAAgB;YAC1B,WAAW;YACZ,6BAAK,SAAS,EAAC,SAAS,IAAE,KAAK,CAAC,OAAO,CAAO,CAC5C;QACN,6BAAK,SAAS,EAAC,iBAAiB,IAC3B,KAAK,CAAC,QAAQ,CACb;QACL,MAAM,CACL,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: (props: any) => JSX.Element;
+};
+export default _default;
+export declare const defaultSection: () => JSX.Element;

package/dist/esm/components/section/Section.stories.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+import Section from './Section';
+import TextField from '../text-field/TextField';
+import NumberField from '../number-field/NumberField';
+import Button from '../button/Button';
+import ButtonMenu from '../button-menu/ButtonMenu';
+import ButtonMenuItem from '../button-menu/ButtonMenuItem';
+import Card from '../card/Card';
+import { ICON_COPY, ICON_BARS } from '../../constants/icons';
+export default {
+    title: 'Section',
+    component: Section
+};
+export const defaultSection = () => {
+    const menuItems = [
+        React.createElement(ButtonMenuItem, { key: 'duplicate', label: React.createElement("span", null,
+                ICON_COPY,
+                "\u00A0Button Duplicate Overlay"), onClick: action('CLICKED') }),
+        React.createElement(ButtonMenuItem, { key: 'delete', label: React.createElement("span", null,
+                ICON_COPY,
+                "\u00A0Button Duplicate Overlay"), onClick: action('CLICKED') })
+    ];
+    const menu = React.createElement(ButtonMenu, { position: 'left', items: menuItems, button: React.createElement(Button, { style: 'subtle' }, ICON_BARS) });
+    return (React.createElement(Section, { title: 'Section Title', buttons: menu },
+        React.createElement(Card, { title: 'Card', open: true, collapsable: false },
+            React.createElement(TextField, { label: 'TextField', tooltip: 'TOOLTIP', value: 'name', width: '33%', onChange: action('CLICKED') }),
+            React.createElement(NumberField, { label: 'NumberField', tooltip: 'TOOLTIP', width: '33%', readOnly: true, value: 1, onChange: action('CLICKED') })),
+        React.createElement(Card, { title: 'Card', open: true, collapsable: false },
+            React.createElement(TextField, { label: 'TextField', tooltip: 'TOOLTIP', value: 'name', width: '33%', onChange: action('CLICKED') }),
+            React.createElement(NumberField, { label: 'NumberField', tooltip: 'TOOLTIP', width: '33%', readOnly: true, value: 1, onChange: action('CLICKED') }))));
+};
+//# sourceMappingURL=Section.stories.js.map

package/dist/esm/components/section/Section.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.stories.js","sourceRoot":"","sources":["../../../../src/components/section/Section.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAChD,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,UAAU,MAAM,2BAA2B,CAAC;AACnD,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAC3D,OAAO,IAAI,MAAM,cAAc,CAAC;AAChC,OAAO,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,uBAAuB,CAAC;AAE3D,eAAe;IACX,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,OAAO;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IAE/B,MAAM,SAAS,GAAG;QACd,oBAAC,cAAc,IACX,GAAG,EAAG,WAAW,EACjB,KAAK,EAAI;gBAAO,SAAS;iDAAsC,EAC/D,OAAO,EAAI,MAAM,CAAC,SAAS,CAAC,GAAG;QACnC,oBAAC,cAAc,IACX,GAAG,EAAG,QAAQ,EACd,KAAK,EAAI;gBAAO,SAAS;iDAAsC,EAC/D,OAAO,EAAI,MAAM,CAAC,SAAS,CAAC,GAAG;KACtC,CAAC;IAEF,MAAM,IAAI,GAAG,oBAAC,UAAU,IACpB,QAAQ,EAAG,MAAM,EACjB,KAAK,EAAK,SAAS,EACnB,MAAM,EAAI,oBAAC,MAAM,IAAC,KAAK,EAAG,QAAQ,IACjC,SAAS,CACL,GAAG,CAAC;IAEb,OAAO,CACH,oBAAC,OAAO,IACJ,KAAK,EAAG,eAAe,EACvB,OAAO,EAAI,IAAI;QAEf,oBAAC,IAAI,IACD,KAAK,EAAG,MAAM,EACd,IAAI,EAAI,IAAI,EACZ,WAAW,EAAI,KAAK;YACpB,oBAAC,SAAS,IACN,KAAK,EAAI,WAAW,EACpB,OAAO,EAAI,SAAS,EACpB,KAAK,EAAI,MAAM,EACf,KAAK,EAAG,KAAK,EACb,QAAQ,EAAI,MAAM,CAAC,SAAS,CAAC,GAAG;YACpC,oBAAC,WAAW,IACR,KAAK,EAAI,aAAa,EACtB,OAAO,EAAI,SAAS,EACpB,KAAK,EAAG,KAAK,EACb,QAAQ,EAAI,IAAI,EAChB,KAAK,EAAI,CAAC,EACV,QAAQ,EAAI,MAAM,CAAC,SAAS,CAAC,GAC/B,CACC;QACP,oBAAC,IAAI,IACD,KAAK,EAAG,MAAM,EACd,IAAI,EAAI,IAAI,EACZ,WAAW,EAAI,KAAK;YACpB,oBAAC,SAAS,IACN,KAAK,EAAI,WAAW,EACpB,OAAO,EAAI,SAAS,EACpB,KAAK,EAAI,MAAM,EACf,KAAK,EAAG,KAAK,EACb,QAAQ,EAAI,MAAM,CAAC,SAAS,CAAC,GAAG;YACpC,oBAAC,WAAW,IACR,KAAK,EAAI,aAAa,EACtB,OAAO,EAAI,SAAS,EACpB,KAAK,EAAG,KAAK,EACb,QAAQ,EAAI,IAAI,EAChB,KAAK,EAAI,CAAC,EACV,QAAQ,EAAI,MAAM,CAAC,SAAS,CAAC,GAC/B,CACC,CACD,CACb,CAAC;AACN,CAAC,CAAC"}

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { IToolTipConfig } from '../Tooltip';
+interface ISelectFieldProps {
+    buttons?: any;
+    label?: string;
+    selectRef?: any;
+    options: any;
+    disable?: boolean;
+    disableFirst?: boolean;
+    tooltip?: IToolTipConfig | string;
+    placeholder?: string;
+    value: any;
+    width?: string | number;
+    onChange(e: any): void;
+    info?: string;
+    labelPosition?: string;
+    showCopy?: boolean;
+    onNotification?(e: any): void;
+    onError?(e: any): void;
+}
+declare class SelectField extends React.PureComponent<ISelectFieldProps> {
+    private evtHandlers;
+    constructor(props: any);
+    private copyToClipboard;
+    private onChange;
+    render(): JSX.Element;
+}
+export default SelectField;

package/dist/esm/components/select-field/SelectField.js

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import FieldWrapper from '../field-wrapper/FieldWrapper';
+import { ICON_CARET_DOWN, ICON_CLIPBOARD } from '../../constants/icons';
+import Button from '../button/Button';
+class SelectField extends React.PureComponent {
+    evtHandlers = {
+        copyToClipboard: (e) => this.copyToClipboard(e),
+    };
+    constructor(props) {
+        super(props);
+    }
+    copyToClipboard(e) {
+        const { onNotification, onError } = this.props;
+        navigator.clipboard.writeText(this.props.value).then(() => {
+            if (onNotification) {
+                onNotification('Copied to clipboard!');
+            }
+        }, () => {
+            if (onError) {
+                onError('Error copying to clipboard.');
+            }
+        });
+    }
+    onChange(e) {
+        // handle selects converting booleans to strings
+        let val = e.target.value;
+        if (val === 'true') {
+            val = true;
+        }
+        if (val === 'false') {
+            val = false;
+        }
+        this.props.onChange(val);
+    }
+    render() {
+        const { label, showCopy, options, value, width, buttons, selectRef, disable, tooltip, info, labelPosition, disableFirst } = this.props;
+        let opts = [];
+        const selectValue = (value === null || value === undefined) ? '' : value;
+        const caret = React.createElement("div", { key: 'caret', className: 'caret' }, ICON_CARET_DOWN);
+        let btns;
+        if (buttons) {
+            if (Array.isArray(buttons)) {
+                btns = [caret, ...buttons];
+            }
+            else {
+                btns = [caret, buttons];
+            }
+        }
+        else {
+            btns = [caret];
+        }
+        if (showCopy) {
+            btns.push(React.createElement(Button, { key: 'btn-copy', style: 'subtle', color: 'primary', tooltip: 'Copy to Clipboard', onClick: this.evtHandlers.copyToClipboard }, ICON_CLIPBOARD));
+        }
+        if (options) {
+            opts = options.map((option, i) => {
+                const disabled = (i === 0 && disableFirst || (option.disabled !== undefined && option.disabled)) ? true : false;
+                const optionValue = (option.value !== undefined) ? option.value : option;
+                const optionLabel = (option.label !== undefined) ? option.label : option;
+                return React.createElement("option", { disabled: disabled, key: `option-${optionValue}`, value: optionValue }, optionLabel);
+            });
+        }
+        return React.createElement(FieldWrapper, { customClass: 'select-field', label: label, tooltip: tooltip, buttons: btns, info: info, labelPosition: labelPosition, width: width },
+            React.createElement("select", { value: selectValue, onChange: (e) => this.onChange(e), ref: selectRef, disabled: disable }, opts));
+    }
+}
+export default SelectField;
+//# sourceMappingURL=SelectField.js.map

package/dist/esm/components/select-field/SelectField.js.map

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

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import SelectField from './SelectField';
+declare const _default: {
+    title: string;
+    components: typeof SelectField;
+};
+export default _default;
+export declare const defaultSelectField: () => JSX.Element;

package/dist/esm/components/select-field/SelectField.stories.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import SelectField from './SelectField';
+import { action } from '@storybook/addon-actions';
+export default {
+    title: 'SelectField',
+    components: SelectField
+};
+export const defaultSelectField = () => (React.createElement(SelectField, { label: 'Select Field', value: 'value', width: '50%', options: ['Option1', 'Option2'], onChange: action('CHANGED') }));
+//# sourceMappingURL=SelectField.stories.js.map

package/dist/esm/components/select-field/SelectField.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectField.stories.js","sourceRoot":"","sources":["../../../../src/components/select-field/SelectField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,eAAe;IACX,KAAK,EAAE,aAAa;IACpB,UAAU,EAAE,WAAW;CAC1B,CAAC;AAsBF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,CACpC,oBAAC,WAAW,IACR,KAAK,EAAI,cAAc,EACvB,KAAK,EAAI,OAAO,EAChB,KAAK,EAAG,KAAK,EACb,OAAO,EAAK,CAAC,SAAS,EAAE,SAAS,CAAC,EAClC,QAAQ,EAAI,MAAM,CAAC,SAAS,CAAC,GAAG,CACvC,CAAC"}

package/dist/esm/components/service-icon/ServiceIcon.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+interface IServiceIconProps {
+    iconName: string;
+    color?: string;
+}
+declare const ServiceIcon: React.FC<IServiceIconProps>;
+export default ServiceIcon;

package/dist/esm/components/service-icon/ServiceIcon.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faJsSquare } from '@fortawesome/free-brands-svg-icons/faJsSquare';
+import { faFilm } from '@fortawesome/free-solid-svg-icons/faFilm';
+import { faGavel } from '@fortawesome/free-solid-svg-icons/faGavel';
+import { faDatabase } from '@fortawesome/free-solid-svg-icons/faDatabase';
+import { faFileVideo } from '@fortawesome/free-solid-svg-icons/faFileVideo';
+import { faVideo } from '@fortawesome/free-solid-svg-icons/faVideo';
+import { faChartBar } from '@fortawesome/free-solid-svg-icons/faChartBar';
+import { faUsersCog } from '@fortawesome/free-solid-svg-icons/faUsersCog';
+import { faCogs } from '@fortawesome/free-solid-svg-icons/faCogs';
+import { faPlayCircle } from '@fortawesome/free-solid-svg-icons/faPlayCircle';
+import { faUserLock } from '@fortawesome/free-solid-svg-icons/faUserLock';
+import { faSitemap } from '@fortawesome/free-solid-svg-icons/faSitemap';
+import { faChartArea } from '@fortawesome/free-solid-svg-icons/faChartArea';
+import { faFileAlt } from '@fortawesome/free-solid-svg-icons/faFileAlt';
+const ServiceIcon = (p) => {
+    switch (p.iconName) {
+        case 'FaFilm':
+            return (React.createElement(FontAwesomeIcon, { icon: faFilm, color: p.color }));
+        case 'FaRegFileVideo':
+            return (React.createElement(FontAwesomeIcon, { icon: faFileVideo, color: p.color }));
+        case 'FaChartBar':
+            return (React.createElement(FontAwesomeIcon, { icon: faChartBar, color: p.color }));
+        case 'FaGavel':
+            return (React.createElement(FontAwesomeIcon, { icon: faGavel, color: p.color }));
+        case 'FaDatabase':
+            return (React.createElement(FontAwesomeIcon, { icon: faDatabase, color: p.color }));
+        case 'FaVideo':
+            return (React.createElement(FontAwesomeIcon, { icon: faVideo, color: p.color }));
+        case 'FaUsersCog':
+            return (React.createElement(FontAwesomeIcon, { icon: faUsersCog, color: p.color }));
+        case 'FaPlayCircle':
+            return (React.createElement(FontAwesomeIcon, { icon: faPlayCircle, color: p.color }));
+        case 'FaUserLock':
+            return (React.createElement(FontAwesomeIcon, { icon: faUserLock, color: p.color }));
+        case 'FaSiteMap':
+            return (React.createElement(FontAwesomeIcon, { icon: faSitemap, color: p.color }));
+        case 'FaFileAlt':
+            return (React.createElement(FontAwesomeIcon, { icon: faFileAlt, color: p.color }));
+        case 'FaChartArea':
+            return (React.createElement(FontAwesomeIcon, { icon: faChartArea, color: p.color }));
+        case 'FaCogs':
+            return (React.createElement(FontAwesomeIcon, { icon: faCogs }));
+        case 'FaJsSquare':
+            return (React.createElement(FontAwesomeIcon, { icon: faJsSquare }));
+        default:
+            return null;
+    }
+};
+export default ServiceIcon;
+//# sourceMappingURL=ServiceIcon.js.map

package/dist/esm/components/service-icon/ServiceIcon.js.map

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

package/dist/esm/components/service-icon/ServiceIcon.test.js

@@ -0,0 +1 @@
+//# sourceMappingURL=ServiceIcon.test.js.map

package/dist/esm/components/service-icon/ServiceIcon.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServiceIcon.test.js","sourceRoot":"","sources":["../../../../src/components/service-icon/ServiceIcon.test.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface IShortcutMenu {
+    shortcutCopyMap: any;
+    heading?: string;
+}
+export declare const ShortcutMenu: React.FC<IShortcutMenu>;

package/dist/esm/components/shortcut-menu/ShortcutMenu.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import HRule from '../h-rule/HRule';
+export const ShortcutMenu = ({ shortcutCopyMap, heading }) => {
+    const h = (heading) ? React.createElement(React.Fragment, null,
+        React.createElement("h3", null, heading),
+        React.createElement(HRule, null)) : null;
+    return (React.createElement("div", { className: 'shortcuts-menu' },
+        h,
+        React.createElement("table", null,
+            React.createElement("tbody", null, (Object.keys(shortcutCopyMap).map((key) => (React.createElement("tr", { className: 'shortcut', key: key },
+                React.createElement("td", { className: 'hotkey-cell' }, key),
+                React.createElement("td", { className: 'shortcut-desc' }, shortcutCopyMap[key])))))))));
+};
+//# sourceMappingURL=ShortcutMenu.js.map

package/dist/esm/components/shortcut-menu/ShortcutMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShortcutMenu.js","sourceRoot":"","sources":["../../../../src/components/shortcut-menu/ShortcutMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,MAAM,iBAAiB,CAAC;AAOpC,MAAM,CAAC,MAAM,YAAY,GAA6B,CAAC,EAAC,eAAe,EAAE,OAAO,EAAC,EAAE,EAAE;IAEjF,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAClB,gCAAK,OAAO,CAAM;QAClB,oBAAC,KAAK,OAAE,CACT,CAAC,CAAC,CAAC,IAAI,CAAC;IAEX,OAAO,CACH,6BAAK,SAAS,EAAG,gBAAgB;QAC5B,CAAC;QACF;YACI,mCAEQ,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC,GAAY,EAAE,EAAE,CAAC,CAChD,4BAAI,SAAS,EAAG,UAAU,EAAC,GAAG,EAAI,GAAG;gBACjC,4BAAI,SAAS,EAAG,aAAa,IAAE,GAAG,CAAM;gBACxC,4BAAI,SAAS,EAAG,eAAe,IAAE,eAAe,CAAC,GAAG,CAAC,CAAM,CAC1D,CACR,CAAC,CAAC,CAEH,CACJ,CACN,CACT,CAAC;AACN,CAAC,CAAC"}

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

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

package/dist/esm/components/shortcut-menu/ShortcutMenu.stories.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ShortcutMenu } from './ShortcutMenu';
+export default {
+    title: 'ShortcutMenu',
+    component: ShortcutMenu
+};
+const shortcuts = {
+    'Up': 'Select previous experience',
+    'Down': 'Select next experience',
+    'Left': 'Go to previous page',
+    'Right': 'Go to next page',
+    'Shift + R': 'Refresh current page'
+};
+export const defaultShortcutMenu = () => (React.createElement(ShortcutMenu, { shortcutCopyMap: shortcuts }));
+//# sourceMappingURL=ShortcutMenu.stories.js.map

package/dist/esm/components/shortcut-menu/ShortcutMenu.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShortcutMenu.stories.js","sourceRoot":"","sources":["../../../../src/components/shortcut-menu/ShortcutMenu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,eAAe;IACX,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,YAAY;CAC1B,CAAC;AAEF,MAAM,SAAS,GAAG;IACd,IAAI,EAAE,4BAA4B;IAClC,MAAM,EAAE,wBAAwB;IAChC,MAAM,EAAE,qBAAqB;IAC7B,OAAO,EAAE,iBAAiB;IAC1B,WAAW,EAAE,sBAAsB;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CACrC,oBAAC,YAAY,IAAC,eAAe,EAAI,SAAS,GAAI,CACjD,CAAC"}

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { IToolTipConfig } from '../Tooltip';
+interface ISliderFieldProps {
+    label?: string;
+    value: number;
+    width?: string | number;
+    min: number;
+    max: number;
+    step: number;
+    tooltip?: IToolTipConfig | string;
+    defaultValue: number;
+    onChange(e: any): void;
+    info?: string;
+    labelPosition?: string;
+}
+interface ISliderFieldState {
+    tempValue: number;
+}
+declare class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldState> {
+    private updateTimeout;
+    constructor(props: any);
+    componentWillUnmount(): void;
+    private updateValue;
+    private rangeInputChange;
+    private numberInputChange;
+    render(): JSX.Element;
+}
+export default SliderField;

package/dist/esm/components/slider-field/SliderField.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import FieldWrapper from '../field-wrapper/FieldWrapper';
+class SliderField extends React.PureComponent {
+    updateTimeout;
+    constructor(props) {
+        super(props);
+        this.state = {
+            tempValue: null
+        };
+    }
+    componentWillUnmount() {
+        clearTimeout(this.updateTimeout);
+    }
+    updateValue(val) {
+        this.props.onChange(val);
+    }
+    rangeInputChange(e) {
+        const inputVal = e.target.value;
+        const val = parseFloat(inputVal);
+        clearTimeout(this.updateTimeout);
+        this.setState({
+            tempValue: val
+        }, () => {
+            this.updateTimeout = setTimeout(() => {
+                this.updateValue(val);
+                this.setState({ tempValue: null });
+            }, 100);
+        });
+    }
+    numberInputChange(e) {
+        const { min, max } = this.props;
+        let inputValue = e.target.value;
+        inputValue = (inputValue === '') ? 0 : parseFloat(inputValue);
+        if (inputValue >= min && inputValue <= max) {
+            this.updateValue(inputValue);
+        }
+    }
+    render() {
+        const { label, width, min, max, step, defaultValue, value, tooltip, info, labelPosition } = this.props;
+        const { tempValue } = this.state;
+        const val = (tempValue !== null) ? tempValue : (value === null || value === undefined) ? defaultValue : value;
+        return React.createElement(FieldWrapper, { customClass: 'slider-field', label: label, tooltip: tooltip, info: info, labelPosition: labelPosition, width: width },
+            React.createElement("input", { onChange: (e) => this.rangeInputChange(e), type: 'range', min: min, max: max, value: val, step: step }),
+            React.createElement("input", { className: 'val', onChange: (e) => this.numberInputChange(e), type: 'number', value: val }));
+    }
+}
+export default SliderField;
+//# sourceMappingURL=SliderField.js.map

package/dist/esm/components/slider-field/SliderField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderField.js","sourceRoot":"","sources":["../../../../src/components/slider-field/SliderField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,YAAY,MAAM,+BAA+B,CAAC;AAqBzD,MAAM,WAAY,SAAQ,KAAK,CAAC,aAAmD;IAEvE,aAAa,CAAO;IAE5B,YAAY,KAAK;QAEb,KAAK,CAAC,KAAK,CAAC,CAAC;QAEb,IAAI,CAAC,KAAK,GAAG;YACT,SAAS,EAAE,IAAI;SAClB,CAAC;IACN,CAAC;IAEM,oBAAoB;QAEvB,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACrC,CAAC;IAEO,WAAW,CAAC,GAAG;QAEnB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,CAAC;IAEO,gBAAgB,CAAC,CAAC;QAEtB,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAChC,MAAM,GAAG,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC;QAEjC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAEjC,IAAI,CAAC,QAAQ,CAAC;YACV,SAAS,EAAE,GAAG;SACjB,EAAE,GAAG,EAAE;YACJ,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,GAAG,EAAE;gBACjC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;gBACtB,IAAI,CAAC,QAAQ,CAAC,EAAC,SAAS,EAAE,IAAI,EAAC,CAAC,CAAC;YACrC,CAAC,EAAE,GAAG,CAAC,CAAC;QACZ,CAAC,CAAC,CAAC;IACP,CAAC;IAEO,iBAAiB,CAAC,CAAC;QAEvB,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAChC,IAAI,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAChC,UAAU,GAAI,CAAC,UAAU,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;QAE/D,IAAI,UAAU,IAAI,GAAG,IAAI,UAAU,IAAI,GAAG,EAAE;YACxC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;SAChC;IACL,CAAC;IAEM,MAAM;QAET,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QACrG,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAEjC,MAAM,GAAG,GAAG,CAAC,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC;QAE9G,OAAO,oBAAC,YAAY,IAChB,WAAW,EAAG,cAAc,EAC5B,KAAK,EAAI,KAAK,EACd,OAAO,EAAI,OAAO,EAClB,IAAI,EAAI,IAAI,EACZ,aAAa,EAAI,aAAa,EAC9B,KAAK,EAAI,KAAK;YACd,+BACI,QAAQ,EAAI,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAC3C,IAAI,EAAE,OAAO,EACb,GAAG,EAAG,GAAG,EACT,GAAG,EAAI,GAAG,EACV,KAAK,EAAI,GAAG,EACZ,IAAI,EAAI,IAAI,GAAI;YAEpB,+BACI,SAAS,EAAG,KAAK,EACjB,QAAQ,EAAI,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAC5C,IAAI,EAAG,QAAQ,EACf,KAAK,EAAI,GAAG,GAAI,CACT,CAAC;IACpB,CAAC;CACJ;AAED,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import SliderField from './SliderField';
+declare const _default: {
+    title: string;
+    component: typeof SliderField;
+};
+export default _default;
+export declare const defaultSliderField: () => JSX.Element;

package/dist/esm/components/slider-field/SliderField.stories.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import SliderField from './SliderField';
+export default {
+    title: 'SliderField',
+    component: SliderField
+};
+export const defaultSliderField = () => {
+    const [sliderValue, setSliderValue] = React.useState(5);
+    const handleChange = (e) => {
+        setSliderValue(e.target.value);
+    };
+    return (React.createElement("div", { style: { width: '50%' } },
+        React.createElement(SliderField, { label: 'Slider Field', min: 0, max: 50, step: 1, value: sliderValue, defaultValue: 0, onChange: handleChange })));
+};
+//# sourceMappingURL=SliderField.stories.js.map

package/dist/esm/components/slider-field/SliderField.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderField.stories.js","sourceRoot":"","sources":["../../../../src/components/slider-field/SliderField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,WAAW,MAAM,eAAe,CAAC;AAGxC,eAAe;IACX,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,WAAW;CACzB,CAAC;AAoBF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACnC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAExD,MAAM,YAAY,GAAG,CAAC,CAAC,EAAE,EAAE;QACvB,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,OAAO,CACH,6BAAK,KAAK,EAAE,EAAC,KAAK,EAAE,KAAK,EAAC;QACtB,oBAAC,WAAW,IACR,KAAK,EAAI,cAAc,EACvB,GAAG,EAAI,CAAC,EACR,GAAG,EAAI,EAAE,EACT,IAAI,EAAI,CAAC,EACT,KAAK,EAAI,WAAW,EACpB,YAAY,EAAI,CAAC,EACjB,QAAQ,EAAI,YAAY,GAC1B,CACA,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/esm/components/spinner/Spinner.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const Spinner: React.FC;
+export default Spinner;

package/dist/esm/components/spinner/Spinner.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ICON_CIRCLE_NOTCH } from '../../constants/icons';
+const Spinner = () => {
+    return (React.createElement("div", { className: 'spinner' },
+        React.createElement("div", { className: 'icon' }, ICON_CIRCLE_NOTCH)));
+};
+export default Spinner;
+//# sourceMappingURL=Spinner.js.map

package/dist/esm/components/spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../../src/components/spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,MAAM,OAAO,GAAc,GAAG,EAAE;IAC5B,OAAO,CACH,6BAAK,SAAS,EAAG,SAAS;QACtB,6BAAK,SAAS,EAAG,MAAM,IAAE,iBAAiB,CAAO,CAC/C,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/esm/components/story-previewer/StoryPreviewer.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;