react-cosmos-ui 6.0.0-alpha.9 → 6.0.0-beta.10

package/dist/components/BaseSvg.d.ts

@@ -5,5 +5,5 @@ type Props = {
     children: SvgChildren;
     [attr: string]: unknown;
 };
-export declare function BaseSvg({ children, ...attrs }: Props): JSX.Element;
+export declare function BaseSvg({ children, ...attrs }: Props): React.JSX.Element;
 export {};

package/dist/components/Icon.d.ts

@@ -1,7 +1,11 @@
+import React from 'react';
 import { SvgChildren } from './BaseSvg.js';
-type IconProps = {
-    children: SvgChildren;
+export type IconProps = {
     size?: number | string;
+    strokeWidth?: number;
+};
+type Props = IconProps & {
+    children: SvgChildren;
 };
-export declare function Icon({ children, size }: IconProps): JSX.Element;
+export declare function Icon({ children, size, strokeWidth }: Props): React.JSX.Element;
 export {};

package/dist/components/Icon.js

@@ -1,5 +1,5 @@
 import React from 'react';
 import { BaseSvg } from './BaseSvg.js';
-export function Icon({ children, size = '100%' }) {
-    return (React.createElement(BaseSvg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }, children));
+export function Icon({ children, size = '100%', strokeWidth = 1.5 }) {
+    return (React.createElement(BaseSvg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }, children));
 }

package/dist/components/Illustration.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 import { SvgChildren } from './BaseSvg.js';
 type Props = {
     children: SvgChildren;
     viewBox: string;
     size?: number | string;
 };
-export declare function Illustration({ children, viewBox, size }: Props): JSX.Element;
+export declare function Illustration({ children, viewBox, size }: Props): React.JSX.Element;
 export {};

package/dist/components/KeyBox.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 type Props = {
     value: string;
     bgColor: string;
@@ -5,5 +6,5 @@ type Props = {
     size?: number;
     fontSize?: number;
 };
-export declare function KeyBox({ value, bgColor, textColor, size, fontSize, }: Props): JSX.Element;
+export declare function KeyBox({ value, bgColor, textColor, size, fontSize, }: Props): React.JSX.Element;
 export {};

package/dist/components/SidePanel.d.ts

@@ -1,10 +1,11 @@
+import React from 'react';
 export declare const SidePanelContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SidePanelHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 type TitleProps = {
     label: string;
     componentName?: string;
 };
-export declare function SidePanelTitle({ label, componentName }: TitleProps): JSX.Element;
+export declare function SidePanelTitle({ label, componentName }: TitleProps): React.JSX.Element;
 export declare const SidePanelActions: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SidePanelBody: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/dist/components/SidePanel.js

@@ -20,7 +20,7 @@ export const SidePanelHeader = styled.div `
 export function SidePanelTitle({ label, componentName }) {
     return (React.createElement(TitleContainer, null,
         React.createElement(TitleLabel, null, label),
-        typeof componentName === 'string' && (React.createElement(ComponentName, null, componentName ? componentName : React.createElement("em", null, "Unnamed")))));
+        typeof componentName === 'string' && (React.createElement(ComponentName, null, componentName ? componentName : `(anonymous)`))));
 }
 export const SidePanelActions = styled.div `
   display: flex;

package/dist/components/Space.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 type Props = {
     width: number;
 } | {
     height: number;
 };
-export declare function Space(props: Props): JSX.Element;
+export declare function Space(props: Props): React.JSX.Element;
 export {};

package/dist/components/TreeView.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { TreeNode } from 'react-cosmos-core';
 import { TreeExpansion } from '../shared/treeExpansion.js';
 type Props<Item> = {
@@ -15,5 +15,5 @@ type Props<Item> = {
         onToggle: () => unknown;
     }) => ReactNode;
 };
-export declare function TreeView<Item>({ node, name, parents, expansion, setExpansion, renderNode, }: Props<Item>): JSX.Element;
+export declare function TreeView<Item>({ node, name, parents, expansion, setExpansion, renderNode, }: Props<Item>): React.JSX.Element;
 export {};

package/dist/components/ValueInputTree/ExpandCollapseValues.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { FixtureStateValues } from 'react-cosmos-core';
 import { TreeExpansion } from '../../shared/treeExpansion.js';
 type Props = {
@@ -5,5 +6,5 @@ type Props = {
     expansion: TreeExpansion;
     setExpansion: (treeExpansion: TreeExpansion) => unknown;
 };
-export declare function ExpandCollapseValues({ values, expansion, setExpansion, }: Props): JSX.Element | null;
+export declare function ExpandCollapseValues({ values, expansion, setExpansion, }: Props): React.JSX.Element | null;
 export {};

package/dist/components/ValueInputTree/ValueInput/BooleanValueInput.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 type Props = {
     id: string;
     name: string;
     data: boolean;
     onChange: (data: boolean) => unknown;
 };
-export declare function BooleanValueInput({ id, name, data, onChange }: Props): JSX.Element;
+export declare function BooleanValueInput({ id, name, data, onChange }: Props): React.JSX.Element;
 export {};

package/dist/components/ValueInputTree/ValueInput/NullValueInput.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 type Props = {
     name: string;
 };
-export declare function NullValueInput({ name }: Props): JSX.Element;
+export declare function NullValueInput({ name }: Props): React.JSX.Element;
 export {};

package/dist/components/ValueInputTree/ValueInput/NumberValueInput.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 type Props = {
     id: string;
     name: string;
     data: number;
     onChange: (newValue: number) => unknown;
 };
-export declare function NumberValueInput({ id, name, data, onChange }: Props): JSX.Element;
+export declare function NumberValueInput({ id, name, data, onChange }: Props): React.JSX.Element;
 export {};

package/dist/components/ValueInputTree/ValueInput/StringValueInput.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 type Props = {
     id: string;
     name: string;
     data: string;
     onChange: (data: string) => unknown;
 };
-export declare function StringValueInput({ id, name, data, onChange }: Props): JSX.Element;
+export declare function StringValueInput({ id, name, data, onChange }: Props): React.JSX.Element;
 export {};

package/dist/components/ValueInputTree/ValueInput/UndefinedValueInput.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 type Props = {
     name: string;
 };
-export declare function UndefinedValueInput({ name }: Props): JSX.Element;
+export declare function UndefinedValueInput({ name }: Props): React.JSX.Element;
 export {};

package/dist/components/ValueInputTree/ValueInput/UnserializableValueInput.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 type Props = {
     name: string;
     data: string;
 };
-export declare function UnserializableValueInput({ name, data }: Props): JSX.Element;
+export declare function UnserializableValueInput({ name, data }: Props): React.JSX.Element;
 export {};

package/dist/components/ValueInputTree/ValueInput/ValueInput.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { PrimitiveData } from 'react-cosmos-core';
 import { LeafValue } from '../shared.js';
 type Props = {
@@ -7,5 +8,5 @@ type Props = {
     indentLevel: number;
     onChange: (data: PrimitiveData) => unknown;
 };
-export declare function ValueInput({ value, name, id, indentLevel, onChange }: Props): JSX.Element;
+export declare function ValueInput({ value, name, id, indentLevel, onChange }: Props): React.JSX.Element;
 export {};

package/dist/components/ValueInputTree/ValueInput/ValueInput.js

@@ -4,10 +4,10 @@ import { ValueTreeItem } from '../shared.js';
 import { BooleanValueInput } from './BooleanValueInput.js';
 import { NullValueInput } from './NullValueInput.js';
 import { NumberValueInput } from './NumberValueInput.js';
-import { ValueInputContainer } from './shared.js';
 import { StringValueInput } from './StringValueInput.js';
 import { UndefinedValueInput } from './UndefinedValueInput.js';
 import { UnserializableValueInput } from './UnserializableValueInput.js';
+import { ValueInputContainer } from './shared.js';
 export function ValueInput({ value, name, id, indentLevel, onChange }) {
     return (React.createElement(ValueInputSlot, { slotProps: { id, name, value, indentLevel, onChange } },
         React.createElement(ValueTreeItem, { indentLevel: indentLevel },

package/dist/components/ValueInputTree/ValueInputDir.d.ts

@@ -1,9 +1,11 @@
+import React from 'react';
 type Props = {
     name: string;
-    childNames: string[];
+    childrenText: string;
+    disabled: boolean;
     expanded: boolean;
     indentLevel: number;
     onToggle: () => unknown;
 };
-export declare function ValueInputDir({ name, childNames, expanded, indentLevel, onToggle, }: Props): JSX.Element;
+export declare function ValueInputDir({ name, childrenText, disabled, expanded, indentLevel, onToggle, }: Props): React.JSX.Element;
 export {};

package/dist/components/ValueInputTree/ValueInputDir.js

@@ -3,8 +3,7 @@ import styled from 'styled-components';
 import { blue, disabledColors, grey128, grey160, grey224, } from '../../style/colors.js';
 import { ChevronDownIcon, ChevronRightIcon } from '../icons/index.js';
 import { ValueTreeItem } from './shared.js';
-export function ValueInputDir({ name, childNames, expanded, indentLevel, onToggle, }) {
-    const disabled = childNames.length === 0;
+export function ValueInputDir({ name, childrenText, disabled, expanded, indentLevel, onToggle, }) {
     return (React.createElement(ValueTreeItem, { indentLevel: indentLevel },
         React.createElement(ButtonContainer, null,
             React.createElement(Button, { disabled: disabled, onClick: onToggle },
@@ -12,10 +11,7 @@ export function ValueInputDir({ name, childNames, expanded, indentLevel, onToggl
                     !disabled && (React.createElement(ChevronContainer, null, expanded ? React.createElement(ChevronDownIcon, null) : React.createElement(ChevronRightIcon, null))),
                     React.createElement(Text, null,
                         React.createElement(DirName, { disabled: disabled }, name),
-                        React.createElement(ChildrenInfo, null, getChildInfo(childNames))))))));
-}
-function getChildInfo(childNames) {
-    return childNames.length > 0 ? `{ ${childNames.join(', ')} }` : `{}`;
+                        React.createElement(ChildrenInfo, null, childrenText)))))));
 }
 const ButtonContainer = styled.div `
   padding: 2px 0;

package/dist/components/ValueInputTree/ValueInputTree.js

@@ -11,9 +11,16 @@ export const ValueInputTree = React.memo(function ValueInputTree({ id, values, e
     return (React.createElement(Container, null,
         React.createElement(TreeView, { node: rootNode, expansion: expansion, setExpansion: setExpansion, renderNode: ({ node, name, parents, expanded, onToggle }) => {
                 const { data, children } = node;
-                if (data.type === 'item')
+                if (data.type === 'item') {
                     return (React.createElement(ValueInput, { value: data.value, name: name, id: getInputId(id, parents, name), indentLevel: parents.length, onChange: newData => onValueChange(setValueAtPath(values, { type: 'primitive', data: newData }, getValuePath(name, parents))) }));
-                return (children && (React.createElement(ValueInputDir, { name: name, childNames: Object.keys(children), expanded: expanded, indentLevel: parents.length, onToggle: onToggle })));
+                }
+                if (children) {
+                    const childKeys = Object.keys(children);
+                    return (React.createElement(ValueInputDir, { name: name, childrenText: getChildrenText(childKeys, data.isArray), disabled: childKeys.length === 0, expanded: expanded, indentLevel: parents.length, onToggle: onToggle }));
+                }
+                else {
+                    return null;
+                }
             } })));
 });
 function getInputId(treeId, parents, name) {
@@ -26,6 +33,14 @@ function setValueAtPath(values, newValue, valuePath) {
     // Inspired by https://github.com/lodash/lodash/issues/1696#issuecomment-328335502
     return setWith(clone(values), valuePath, newValue, clone);
 }
+function getChildrenText(childKeys, isArray) {
+    if (childKeys.length > 0) {
+        return isArray ? `[ ${childKeys.length} ]` : `{ ${childKeys.join(', ')} }`;
+    }
+    else {
+        return isArray ? `[]` : `{}`;
+    }
+}
 const Container = styled.div `
   background: ${grey32};
   color: ${grey248};

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

@@ -1,4 +1,4 @@
-export { stringifyElementId, stringifyFixtureId } from './shared.js';
-export { hasFsValues, sortFsValueGroups } from './valueGroups.js';
 export { ValueInputTree } from './ValueInputTree.js';
-export { FixtureExpansion, FixtureExpansionGroup, getFixtureExpansion, OnElementExpansionChange, updateElementExpansion, } from './valueTreeExpansion.js';
+export { stringifyElementId } from './shared.js';
+export { hasFsValues, sortFsValueGroups } from './valueGroups.js';
+export { FixtureExpansion, FixtureExpansionGroup, OnElementExpansionChange, getFixtureExpansion, updateElementExpansion, } from './valueTreeExpansion.js';

package/dist/components/ValueInputTree/index.js

@@ -1,4 +1,4 @@
-export { stringifyElementId, stringifyFixtureId } from './shared.js';
-export { hasFsValues, sortFsValueGroups } from './valueGroups.js';
 export { ValueInputTree } from './ValueInputTree.js';
+export { stringifyElementId } from './shared.js';
+export { hasFsValues, sortFsValueGroups } from './valueGroups.js';
 export { getFixtureExpansion, updateElementExpansion, } from './valueTreeExpansion.js';

package/dist/components/ValueInputTree/shared.d.ts

@@ -1,7 +1,8 @@
-import { FixtureElementId, FixtureId, FixtureStatePrimitiveValue, FixtureStateUnserializableValue, TreeNode } from 'react-cosmos-core';
+import { FixtureElementId, FixtureStatePrimitiveValue, FixtureStateUnserializableValue, TreeNode } from 'react-cosmos-core';
 export type LeafValue = FixtureStatePrimitiveValue | FixtureStateUnserializableValue;
 export type ValueNodeData = {
     type: 'collection';
+    isArray: boolean;
 } | {
     type: 'item';
     value: LeafValue;
@@ -12,5 +13,4 @@ type ValueTreeItemProps = {
 };
 export declare const ValueTreeItem: import("styled-components").StyledComponent<"div", any, ValueTreeItemProps, never>;
 export declare function stringifyElementId(elementId: FixtureElementId): string;
-export declare function stringifyFixtureId(fixtureId: FixtureId): string;
 export {};

package/dist/components/ValueInputTree/shared.js

@@ -6,10 +6,6 @@ export function stringifyElementId(elementId) {
     const { decoratorId, elPath } = elementId;
     return elPath ? `${decoratorId}-${elPath}` : decoratorId;
 }
-export function stringifyFixtureId(fixtureId) {
-    const { path, name } = fixtureId;
-    return name ? `${path}-${name}` : path;
-}
 function getLeftPadding(depth) {
     return depth * 12;
 }

package/dist/components/ValueInputTree/valueTree.d.ts

@@ -1,3 +1,3 @@
 import { FixtureStateValues } from 'react-cosmos-core';
 import { ValueNode } from './shared.js';
-export declare function createValueTree(values: FixtureStateValues): ValueNode;
+export declare function createValueTree(values: FixtureStateValues, isArray?: boolean): ValueNode;

package/dist/components/ValueInputTree/valueTree.js

@@ -1,20 +1,25 @@
-export function createValueTree(values) {
+export function createValueTree(values, isArray = false) {
     const children = {};
     Object.keys(values).forEach(key => {
         const value = values[key];
         if (value.type === 'object') {
-            children[key] = createValueTree(value.values);
+            children[key] = createValueTree(value.values, false);
         }
         else if (value.type === 'array') {
             const objValues = {};
             value.values.forEach((v, idx) => {
                 objValues[idx] = v;
             });
-            children[key] = createValueTree(objValues);
+            children[key] = createValueTree(objValues, true);
         }
         else {
-            children[key] = { data: { type: 'item', value } };
+            children[key] = {
+                data: { type: 'item', value },
+            };
         }
     });
-    return { data: { type: 'collection' }, children };
+    return {
+        data: { type: 'collection', isArray },
+        children,
+    };
 }

package/dist/components/ValueInputTree/valueTreeExpansion.js

@@ -1,5 +1,6 @@
 import { clone, setWith } from 'lodash-es';
-import { stringifyElementId, stringifyFixtureId } from './shared.js';
+import { stringifyFixtureId, } from 'react-cosmos-core';
+import { stringifyElementId } from './shared.js';
 const DEFAULT_EXPANSION = {};
 export function getFixtureExpansion(groupExpansion, fixtureId) {
     return groupExpansion[stringifyFixtureId(fixtureId)] || DEFAULT_EXPANSION;

package/dist/components/buttons/Button32.d.ts

@@ -7,5 +7,5 @@ type Props = {
     selected?: boolean;
     onClick?: () => unknown;
 };
-export declare function Button32({ icon, label, title, disabled, selected, onClick, }: Props): JSX.Element;
+export declare function Button32({ icon, label, title, disabled, selected, onClick, }: Props): React.JSX.Element;
 export {};

package/dist/components/buttons/Button8.d.ts

@@ -7,5 +7,5 @@ type Props = {
     selected?: boolean;
     onClick?: () => unknown;
 };
-export declare function Button8({ icon, label, title, disabled, selected, onClick, }: Props): JSX.Element;
+export declare function Button8({ icon, label, title, disabled, selected, onClick, }: Props): React.JSX.Element;
 export {};

package/dist/components/buttons/IconButton32.d.ts

@@ -6,5 +6,5 @@ type Props = {
     selected?: boolean;
     onClick?: () => unknown;
 };
-export declare function IconButton32({ icon, title, disabled, selected, onClick, }: Props): JSX.Element;
+export declare function IconButton32({ icon, title, disabled, selected, onClick, }: Props): React.JSX.Element;
 export {};

package/dist/components/buttons/IconButton8.d.ts

@@ -6,5 +6,5 @@ type Props = {
     selected?: boolean;
     onClick?: () => unknown;
 };
-export declare function IconButton8({ icon, title, disabled, selected, onClick, }: Props): JSX.Element;
+export declare function IconButton8({ icon, title, disabled, selected, onClick, }: Props): React.JSX.Element;
 export {};

package/dist/components/buttons/shared.js

@@ -14,7 +14,10 @@ export const StyledButton = styled.button `
   white-space: nowrap;
   user-select: none;
   outline: none;
-  transition: background ${quick}s, color ${quick}s, opacity ${quick}s;
+  transition:
+    background ${quick}s,
+    color ${quick}s,
+    opacity ${quick}s;
 
   :hover {
     background: ${props => (props.selected ? props.bgSelect : props.bgHover)};

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

@@ -1,33 +1,31 @@
-type Props = {
-    size?: number;
-};
-export declare const ChevronLeftIcon: () => JSX.Element;
-export declare const ChevronRightIcon: () => JSX.Element;
-export declare const ChevronDownIcon: () => JSX.Element;
-export declare const FolderIcon: () => JSX.Element;
-export declare const XIcon: () => JSX.Element;
-export declare const XCircleIcon: () => JSX.Element;
-export declare const MaximizeIcon: () => JSX.Element;
-export declare const SmartphoneIcon: () => JSX.Element;
-export declare const Minimize2Icon: () => JSX.Element;
-export declare const RefreshCwIcon: () => JSX.Element;
-export declare const RefreshCcwIcon: (props: Props) => JSX.Element;
-export declare const HomeIcon: () => JSX.Element;
-export declare const CastIcon: () => JSX.Element;
-export declare const EditIcon: () => JSX.Element;
-export declare const CheckCircleIcon: () => JSX.Element;
-export declare const AlertCircleIcon: () => JSX.Element;
-export declare const InfoIcon: () => JSX.Element;
-export declare const LoaderIcon: () => JSX.Element;
-export declare const SlidersIcon: () => JSX.Element;
-export declare const CopyIcon: () => JSX.Element;
-export declare const RotateCcwIcon: () => JSX.Element;
-export declare const FileIcon: () => JSX.Element;
-export declare const SearchIcon: () => JSX.Element;
-export declare const MenuIcon: () => JSX.Element;
-export declare const ExternalIcon: () => JSX.Element;
-export declare const HelpCircleIcon: () => JSX.Element;
-export declare const MinusSquareIcon: () => JSX.Element;
-export declare const PlusSquareIcon: () => JSX.Element;
-export declare const StarIcon: () => JSX.Element;
-export {};
+import React from 'react';
+import { IconProps } from '../Icon.js';
+export declare const ChevronLeftIcon: () => React.JSX.Element;
+export declare const ChevronRightIcon: () => React.JSX.Element;
+export declare const ChevronDownIcon: () => React.JSX.Element;
+export declare const FolderIcon: () => React.JSX.Element;
+export declare const XIcon: () => React.JSX.Element;
+export declare const XCircleIcon: () => React.JSX.Element;
+export declare const MaximizeIcon: () => React.JSX.Element;
+export declare const SmartphoneIcon: () => React.JSX.Element;
+export declare const Minimize2Icon: () => React.JSX.Element;
+export declare const RefreshCwIcon: () => React.JSX.Element;
+export declare const RefreshCcwIcon: (props: IconProps) => React.JSX.Element;
+export declare const HomeIcon: () => React.JSX.Element;
+export declare const CastIcon: () => React.JSX.Element;
+export declare const EditIcon: () => React.JSX.Element;
+export declare const CheckCircleIcon: (props: IconProps) => React.JSX.Element;
+export declare const AlertCircleIcon: () => React.JSX.Element;
+export declare const InfoIcon: () => React.JSX.Element;
+export declare const LoaderIcon: () => React.JSX.Element;
+export declare const SlidersIcon: () => React.JSX.Element;
+export declare const CopyIcon: () => React.JSX.Element;
+export declare const RotateCcwIcon: () => React.JSX.Element;
+export declare const FileIcon: () => React.JSX.Element;
+export declare const SearchIcon: () => React.JSX.Element;
+export declare const MenuIcon: () => React.JSX.Element;
+export declare const ExternalIcon: () => React.JSX.Element;
+export declare const HelpCircleIcon: () => React.JSX.Element;
+export declare const MinusSquareIcon: () => React.JSX.Element;
+export declare const PlusSquareIcon: () => React.JSX.Element;
+export declare const StarIcon: () => React.JSX.Element;

package/dist/components/icons/index.js

@@ -42,7 +42,7 @@ export const CastIcon = () => (React.createElement(Icon, null,
 export const EditIcon = () => (React.createElement(Icon, null,
     React.createElement("path", { d: "M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34" }),
     React.createElement("polygon", { points: "18 2 22 6 12 16 8 16 8 12 18 2" })));
-export const CheckCircleIcon = () => (React.createElement(Icon, null,
+export const CheckCircleIcon = (props) => (React.createElement(Icon, { ...props },
     React.createElement("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
     React.createElement("polyline", { points: "22 4 12 14.01 9 11.01" })));
 export const AlertCircleIcon = () => (React.createElement(Icon, null,

package/dist/components/illustrations/ArtificialIntelligence.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare const ArtificialIntelligenceIllustration: ({ title, }: {
     title: string;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/dist/components/illustrations/Astronaut.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare const AstronautIllustration: ({ title }: {
     title: string;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/dist/components/illustrations/BlankCanvas.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare const BlankCanvasIllustration: ({ title }: {
     title: string;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/dist/components/inputs/NumberInput.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export type NumberInputStyles = {
     focusedColor: string;
     focusedBg: string;
@@ -11,5 +12,5 @@ type Props = {
     styles: NumberInputStyles;
     onChange: (newValue: number) => unknown;
 };
-export declare function NumberInput({ id, value, minValue, maxValue, styles, onChange, }: Props): JSX.Element;
+export declare function NumberInput({ id, value, minValue, maxValue, styles, onChange, }: Props): React.JSX.Element;
 export {};

package/dist/components/inputs/Select.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 type BaseOption = {
     value: string;
     label: string;
@@ -12,5 +13,5 @@ type Props<Option extends BaseOption> = {
     padding: number;
     onChange: (newValue: Option) => unknown;
 };
-export declare function Select<Option extends BaseOption>({ id, testId, options, value, color, height, padding, onChange, }: Props<Option>): JSX.Element;
+export declare function Select<Option extends BaseOption>({ id, testId, options, value, color, height, padding, onChange, }: Props<Option>): React.JSX.Element;
 export {};

package/dist/cosmos.decorator.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 declare const _default: ({ children }: {
     children: React.ReactNode;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default _default;

package/dist/cosmos.loadPlugins.js

@@ -1,17 +1,21 @@
 import { loadPlugins } from 'react-plugin';
 import './plugins/pluginEntry.js';
 import { DEFAULT_PLUGIN_CONFIG } from './shared/defaultPluginConfig.js';
+const rendererConfig = {
+    ...DEFAULT_PLUGIN_CONFIG,
+    core: {
+        projectId: 'testProjectId',
+        fixturesDir: '__fixtures__',
+        fixtureFileSuffix: 'fixture',
+        devServerOn: true,
+    },
+    rendererCore: {
+        fixtures: {},
+        rendererUrl: '/renderer.html',
+    },
+};
 // This file is required to run globally with side effects for the "inception"
 // fixture to work.
 loadPlugins({
-    config: {
-        ...DEFAULT_PLUGIN_CONFIG,
-        core: {
-            projectId: 'testProjectId',
-            fixturesDir: '__fixtures__',
-            fixtureFileSuffix: 'fixture',
-            devServerOn: true,
-            webRendererUrl: '/_renderer.html',
-        },
-    },
+    config: rendererConfig,
 });

package/dist/index.d.ts

@@ -3,7 +3,6 @@ export * from './components/icons/index.js';
 export * from './playgroundConfig.js';
 export * from './plugins/BuildNotifications/spec.js';
 export * from './plugins/ClassStatePanel/spec.js';
-export * from './plugins/ContentOverlay/spec.js';
 export * from './plugins/ControlPanel/spec.js';
 export * from './plugins/ControlSelect/spec.js';
 export * from './plugins/Core/spec.js';
@@ -33,4 +32,3 @@ export * from './slots/SidePanelRowSlot.js';
 export * from './slots/ValueInputSlot.js';
 export * from './style/colors.js';
 export * from './style/vars.js';
-export * from './testHelpers/pluginMocks.js';

package/dist/index.js

@@ -3,7 +3,6 @@ export * from './components/icons/index.js';
 export * from './playgroundConfig.js';
 export * from './plugins/BuildNotifications/spec.js';
 export * from './plugins/ClassStatePanel/spec.js';
-export * from './plugins/ContentOverlay/spec.js';
 export * from './plugins/ControlPanel/spec.js';
 export * from './plugins/ControlSelect/spec.js';
 export * from './plugins/Core/spec.js';
@@ -33,4 +32,3 @@ export * from './slots/SidePanelRowSlot.js';
 export * from './slots/ValueInputSlot.js';
 export * from './style/colors.js';
 export * from './style/vars.js';
-export * from './testHelpers/pluginMocks.js';