react-cosmos-ui 6.0.0-alpha.0

package/dist/components/ValueInputTree/index.js

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

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

@@ -0,0 +1,16 @@
+import { FixtureElementId, FixtureId, FixtureStatePrimitiveValue, FixtureStateUnserializableValue, TreeNode } from 'react-cosmos-core';
+export type LeafValue = FixtureStatePrimitiveValue | FixtureStateUnserializableValue;
+export type ValueNodeData = {
+    type: 'collection';
+} | {
+    type: 'item';
+    value: LeafValue;
+};
+export type ValueNode = TreeNode<ValueNodeData>;
+type ValueTreeItemProps = {
+    indentLevel: number;
+};
+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

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+export const ValueTreeItem = styled.div `
+  padding: 0 0 0 ${props => getLeftPadding(props.indentLevel)}px;
+`;
+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/valueGroups.d.ts

@@ -0,0 +1,8 @@
+import { FixtureElementId, FixtureStateValues } from 'react-cosmos-core';
+interface FixtureStateValueGroup {
+    elementId: FixtureElementId;
+    values: FixtureStateValues;
+}
+export declare function hasFsValues(valueGroup: FixtureStateValueGroup): boolean;
+export declare function sortFsValueGroups<GroupType extends FixtureStateValueGroup>(valueGroups: GroupType[]): GroupType[];
+export {};

package/dist/components/ValueInputTree/valueGroups.js

@@ -0,0 +1,10 @@
+import { stringifyElementId } from './shared.js';
+export function hasFsValues(valueGroup) {
+    return Object.keys(valueGroup.values).length > 0;
+}
+export function sortFsValueGroups(valueGroups) {
+    // Sort by elementId
+    return valueGroups
+        .slice()
+        .sort((g1, g2) => stringifyElementId(g1.elementId).localeCompare(stringifyElementId(g2.elementId)));
+}

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

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

package/dist/components/ValueInputTree/valueTree.js

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

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

@@ -0,0 +1,7 @@
+import { FixtureElementId, FixtureId } from 'react-cosmos-core';
+import { TreeExpansion } from '../../shared/treeExpansion.js';
+export type FixtureExpansion = Record<string, void | TreeExpansion>;
+export type FixtureExpansionGroup = Record<string, void | FixtureExpansion>;
+export type OnElementExpansionChange = (elementId: FixtureElementId, treeExpansion: TreeExpansion) => unknown;
+export declare function getFixtureExpansion(groupExpansion: FixtureExpansionGroup, fixtureId: FixtureId): FixtureExpansion;
+export declare function updateElementExpansion(groupExpansion: FixtureExpansionGroup, fixtureId: FixtureId, elementId: FixtureElementId, treeExpansion: TreeExpansion): FixtureExpansionGroup;

package/dist/components/ValueInputTree/valueTreeExpansion.js

@@ -0,0 +1,16 @@
+import { clone, setWith } from 'lodash-es';
+import { stringifyElementId, stringifyFixtureId } from './shared.js';
+const DEFAULT_EXPANSION = {};
+export function getFixtureExpansion(groupExpansion, fixtureId) {
+    return groupExpansion[stringifyFixtureId(fixtureId)] || DEFAULT_EXPANSION;
+}
+export function updateElementExpansion(groupExpansion, fixtureId, elementId, treeExpansion) {
+    const valuePath = createElementExpansionPath(fixtureId, elementId);
+    // Inspired by https://github.com/lodash/lodash/issues/1696#issuecomment-328335502
+    return setWith(clone(groupExpansion), valuePath, treeExpansion, clone);
+}
+function createElementExpansionPath(fixtureId, elementId) {
+    const strFixtureId = stringifyFixtureId(fixtureId);
+    const strElementId = stringifyElementId(elementId);
+    return [strFixtureId, strElementId];
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+type Props = {
+    icon?: React.ReactNode;
+    title?: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+    selected?: boolean;
+    onClick?: () => unknown;
+};
+export declare function Button32({ icon, label, title, disabled, selected, onClick, }: Props): JSX.Element;
+export {};

package/dist/components/buttons/Button32.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { grey160, grey176, grey224, grey24, grey248, grey32, grey8, } from '../../style/colors.js';
+import { Label, StyledButton, StyledIcon } from './shared.js';
+export function Button32({ icon, label, title, disabled = false, selected = false, onClick, }) {
+    return (React.createElement(StyledButton, { bg: grey32, bgSelect: grey8, bgHover: grey24, color: grey224, colorSelect: grey248, title: title, selected: selected, disabled: disabled, onClick: onClick },
+        icon && (React.createElement(StyledIcon, { color: selected ? grey176 : grey160 }, icon)),
+        React.createElement(Label, null, label)));
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+type Props = {
+    icon?: React.ReactNode;
+    title?: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+    selected?: boolean;
+    onClick?: () => unknown;
+};
+export declare function Button8({ icon, label, title, disabled, selected, onClick, }: Props): JSX.Element;
+export {};

package/dist/components/buttons/Button8.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { grey144, grey176, grey216, grey24, grey248, grey32, grey8, } from '../../style/colors.js';
+import { Label, StyledButton, StyledIcon } from './shared.js';
+export function Button8({ icon, label, title, disabled = false, selected = false, onClick, }) {
+    return (React.createElement(StyledButton, { bg: grey8, bgSelect: grey32, bgHover: grey24, color: grey216, colorSelect: grey248, title: title, selected: selected, disabled: disabled, onClick: onClick },
+        icon && (React.createElement(StyledIcon, { color: selected ? grey176 : grey144 }, icon)),
+        React.createElement(Label, null, label)));
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+type Props = {
+    icon: React.ReactNode;
+    title: string;
+    disabled?: boolean;
+    selected?: boolean;
+    onClick?: () => unknown;
+};
+export declare function IconButton32({ icon, title, disabled, selected, onClick, }: Props): JSX.Element;
+export {};

package/dist/components/buttons/IconButton32.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { grey160, grey176, grey224, grey24, grey248, grey32, grey8, } from '../../style/colors.js';
+import { StyledButton, StyledIcon } from './shared.js';
+export function IconButton32({ icon, title, disabled = false, selected = false, onClick, }) {
+    return (React.createElement(StyledButton, { bg: grey32, bgSelect: grey8, bgHover: grey24, color: grey224, colorSelect: grey248, title: title, selected: selected, disabled: disabled, onClick: onClick },
+        React.createElement(StyledIcon, { color: selected ? grey176 : grey160 }, icon)));
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+type Props = {
+    icon: React.ReactNode;
+    title: string;
+    disabled?: boolean;
+    selected?: boolean;
+    onClick?: () => unknown;
+};
+export declare function IconButton8({ icon, title, disabled, selected, onClick, }: Props): JSX.Element;
+export {};

package/dist/components/buttons/IconButton8.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { grey144, grey176, grey216, grey24, grey248, grey32, grey8, } from '../../style/colors.js';
+import { StyledButton, StyledIcon } from './shared.js';
+export function IconButton8({ icon, title, disabled = false, selected = false, onClick, }) {
+    return (React.createElement(StyledButton, { bg: grey8, bgSelect: grey32, bgHover: grey24, color: grey216, colorSelect: grey248, title: title, selected: selected, disabled: disabled, onClick: onClick },
+        React.createElement(StyledIcon, { color: selected ? grey176 : grey144 }, icon)));
+}

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

@@ -0,0 +1,4 @@
+export { Button32 } from './Button32.js';
+export { Button8 } from './Button8.js';
+export { IconButton32 } from './IconButton32.js';
+export { IconButton8 } from './IconButton8.js';

package/dist/components/buttons/index.js

@@ -0,0 +1,4 @@
+export { Button32 } from './Button32.js';
+export { Button8 } from './Button8.js';
+export { IconButton32 } from './IconButton32.js';
+export { IconButton8 } from './IconButton8.js';

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

@@ -0,0 +1,15 @@
+type StyledButtonProps = {
+    bg: string;
+    bgSelect: string;
+    bgHover: string;
+    color: string;
+    colorSelect: string;
+    selected: boolean;
+    disabled: boolean;
+};
+export declare const StyledButton: import("styled-components").StyledComponent<"button", any, StyledButtonProps, never>;
+export declare const StyledIcon: import("styled-components").StyledComponent<"span", any, {
+    color: string;
+}, never>;
+export declare const Label: import("styled-components").StyledComponent<"span", any, {}, never>;
+export {};

package/dist/components/buttons/shared.js

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+import { blue } from '../../style/colors.js';
+import { quick } from '../../style/vars.js';
+export const StyledButton = styled.button `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 8px;
+  height: 32px;
+  border: 0;
+  border-radius: 3px;
+  background: ${props => (props.selected ? props.bgSelect : props.bg)};
+  color: ${props => (props.selected ? props.colorSelect : props.color)};
+  white-space: nowrap;
+  user-select: none;
+  outline: none;
+  transition: background ${quick}s, color ${quick}s, opacity ${quick}s;
+
+  :hover {
+    background: ${props => (props.selected ? props.bgSelect : props.bgHover)};
+  }
+
+  :focus {
+    box-shadow: 0 0 0.5px 1px ${blue};
+  }
+
+  :disabled {
+    background: ${props => (props.selected ? props.bgSelect : props.bg)};
+    cursor: default;
+    opacity: 0.5;
+  }
+
+  ::-moz-focus-inner {
+    border: 0;
+  }
+`;
+const iconSize = 16;
+export const StyledIcon = styled.span `
+  width: ${iconSize}px;
+  height: ${iconSize}px;
+  padding: 2px 0 0 0;
+  color: ${props => props.color};
+  transition: color ${quick}s;
+`;
+export const Label = styled.span `
+  padding-left: 6px;
+  line-height: 14px;
+
+  :first-child {
+    padding-left: 0;
+  }
+`;

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

@@ -0,0 +1,33 @@
+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 {};

package/dist/components/icons/index.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Icon } from '../Icon.js';
+export const ChevronLeftIcon = () => (React.createElement(Icon, null,
+    React.createElement("polyline", { points: "15 18 9 12 15 6" })));
+export const ChevronRightIcon = () => (React.createElement(Icon, null,
+    React.createElement("polyline", { points: "9 18 15 12 9 6" })));
+export const ChevronDownIcon = () => (React.createElement(Icon, null,
+    React.createElement("polyline", { points: "6 9 12 15 18 9" })));
+export const FolderIcon = () => (React.createElement(Icon, null,
+    React.createElement("path", { d: "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" })));
+export const XIcon = () => (React.createElement(Icon, null,
+    React.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    React.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })));
+export const XCircleIcon = () => (React.createElement(Icon, null,
+    React.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+    React.createElement("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+    React.createElement("line", { x1: "9", y1: "9", x2: "15", y2: "15" })));
+export const MaximizeIcon = () => (React.createElement(Icon, null,
+    React.createElement("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" })));
+export const SmartphoneIcon = () => (React.createElement(Icon, null,
+    React.createElement("rect", { x: "5", y: "2", width: "14", height: "20", rx: "2", ry: "2" }),
+    React.createElement("line", { x1: "12", y1: "18", x2: "12", y2: "18" })));
+export const Minimize2Icon = () => (React.createElement(Icon, null,
+    React.createElement("polyline", { points: "4 14 10 14 10 20" }),
+    React.createElement("polyline", { points: "20 10 14 10 14 4" }),
+    React.createElement("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
+    React.createElement("line", { x1: "3", y1: "21", x2: "10", y2: "14" })));
+export const RefreshCwIcon = () => (React.createElement(Icon, null,
+    React.createElement("polyline", { points: "23 4 23 10 17 10" }),
+    React.createElement("polyline", { points: "1 20 1 14 7 14" }),
+    React.createElement("path", { d: "M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" })));
+export const RefreshCcwIcon = (props) => (React.createElement(Icon, { ...props },
+    React.createElement("polyline", { points: "1 4 1 10 7 10" }),
+    React.createElement("polyline", { points: "23 20 23 14 17 14" }),
+    React.createElement("path", { d: "M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" })));
+export const HomeIcon = () => (React.createElement(Icon, null,
+    React.createElement("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
+    React.createElement("polyline", { points: "9 22 9 12 15 12 15 22" })));
+export const CastIcon = () => (React.createElement(Icon, null,
+    React.createElement("path", { d: "M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6" }),
+    React.createElement("line", { x1: "2", y1: "20", x2: "2", y2: "20" })));
+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,
+    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,
+    React.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+    React.createElement("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+    React.createElement("line", { x1: "12", y1: "16", x2: "12", y2: "16" })));
+export const InfoIcon = () => (React.createElement(Icon, null,
+    React.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+    React.createElement("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+    React.createElement("line", { x1: "12", y1: "8", x2: "12", y2: "8" })));
+export const LoaderIcon = () => (React.createElement(Icon, null,
+    React.createElement("line", { x1: "12", y1: "2", x2: "12", y2: "6" }),
+    React.createElement("line", { x1: "12", y1: "18", x2: "12", y2: "22" }),
+    React.createElement("line", { x1: "4.93", y1: "4.93", x2: "7.76", y2: "7.76" }),
+    React.createElement("line", { x1: "16.24", y1: "16.24", x2: "19.07", y2: "19.07" }),
+    React.createElement("line", { x1: "2", y1: "12", x2: "6", y2: "12" }),
+    React.createElement("line", { x1: "18", y1: "12", x2: "22", y2: "12" }),
+    React.createElement("line", { x1: "4.93", y1: "19.07", x2: "7.76", y2: "16.24" }),
+    React.createElement("line", { x1: "16.24", y1: "7.76", x2: "19.07", y2: "4.93" })));
+export const SlidersIcon = () => (React.createElement(Icon, null,
+    React.createElement("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
+    React.createElement("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
+    React.createElement("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
+    React.createElement("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
+    React.createElement("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
+    React.createElement("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
+    React.createElement("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
+    React.createElement("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
+    React.createElement("line", { x1: "17", y1: "16", x2: "23", y2: "16" })));
+export const CopyIcon = () => (React.createElement(Icon, null,
+    React.createElement("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+    React.createElement("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })));
+export const RotateCcwIcon = () => (React.createElement(Icon, null,
+    React.createElement("polyline", { points: "1 4 1 10 7 10" }),
+    React.createElement("path", { d: "M3.51 15a9 9 0 1 0 2.13-9.36L1 10" })));
+export const FileIcon = () => (React.createElement(Icon, null,
+    React.createElement("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
+    React.createElement("polyline", { points: "13 2 13 9 20 9" })));
+export const SearchIcon = () => (React.createElement(Icon, null,
+    React.createElement("circle", { cx: "11", cy: "11", r: "8" }),
+    React.createElement("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })));
+export const MenuIcon = () => (React.createElement(Icon, null,
+    React.createElement("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+    React.createElement("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+    React.createElement("line", { x1: "3", y1: "18", x2: "21", y2: "18" })));
+export const ExternalIcon = () => (React.createElement(Icon, null,
+    React.createElement("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+    React.createElement("polyline", { points: "15 3 21 3 21 9" }),
+    React.createElement("line", { x1: "10", y1: "14", x2: "21", y2: "3" })));
+export const HelpCircleIcon = () => (React.createElement(Icon, null,
+    React.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+    React.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+    React.createElement("line", { x1: "12", y1: "17", x2: "12", y2: "17" })));
+export const MinusSquareIcon = () => (React.createElement(Icon, null,
+    React.createElement("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+    React.createElement("line", { x1: "8", y1: "12", x2: "16", y2: "12" })));
+export const PlusSquareIcon = () => (React.createElement(Icon, null,
+    React.createElement("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+    React.createElement("line", { x1: "12", y1: "8", x2: "12", y2: "16" }),
+    React.createElement("line", { x1: "8", y1: "12", x2: "16", y2: "12" })));
+export const StarIcon = () => (React.createElement(Icon, null,
+    React.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })));

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

@@ -0,0 +1,3 @@
+export declare const ArtificialIntelligenceIllustration: ({ title, }: {
+    title: string;
+}) => JSX.Element;

package/dist/components/illustrations/ArtificialIntelligence.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import { screenGrey5, screenPrimary3 } from '../../style/colors.js';
+import { Illustration } from '../Illustration.js';
+export const ArtificialIntelligenceIllustration = ({ title, }) => (React.createElement(Illustration, { viewBox: "0 0 1028.53 752.52" },
+    React.createElement("defs", null,
+        React.createElement("linearGradient", { id: "b417a2e5-779f-434a-8a9b-5b809751130b", x1: "493.91", y1: "571.16", x2: "493.91", y2: "526.24", gradientUnits: "userSpaceOnUse" },
+            React.createElement("stop", { offset: "0", stopColor: "gray", stopOpacity: "0.25" }),
+            React.createElement("stop", { offset: "0.54", stopColor: "gray", stopOpacity: "0.12" }),
+            React.createElement("stop", { offset: "1", stopColor: "gray", stopOpacity: "0.1" })),
+        React.createElement("linearGradient", { id: "04db0182-19cc-4c2e-a103-750e5424fcaf", x1: "579.64", y1: "682.92", x2: "579.64", y2: "218.06", xlinkHref: "#b417a2e5-779f-434a-8a9b-5b809751130b" }),
+        React.createElement("linearGradient", { id: "497b2842-48f9-46b6-a092-cc1e43f49418", x1: "448.98", y1: "716.3", x2: "448.98", y2: "571.17", xlinkHref: "#b417a2e5-779f-434a-8a9b-5b809751130b" }),
+        React.createElement("linearGradient", { id: "fadd9628-c3f0-4493-ac03-d18d51c12264", x1: "533.65", y1: "716.3", x2: "533.65", y2: "571.17", xlinkHref: "#b417a2e5-779f-434a-8a9b-5b809751130b" })),
+    React.createElement("title", null, title),
+    React.createElement("ellipse", { cx: "512.26", cy: "706.43", rx: "256", ry: "43", fill: screenGrey5, opacity: "0.5" }),
+    React.createElement("g", { opacity: "0.45" },
+        React.createElement("path", { d: "M536.5,332.71a11.13,11.13,0,0,0,.1,1.44A11.1,11.1,0,0,1,536.5,332.71Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M665.42,301.82c0,.13,0,.25.06.38C665.46,302.07,665.44,301.95,665.42,301.82Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M665.15,300.55c0,.13.07.27.1.4C665.22,300.81,665.19,300.68,665.15,300.55Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M665.28,335.12c0,.22-.11.44-.17.65C665.18,335.56,665.23,335.34,665.28,335.12Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M665.46,334.07c0,.23-.06.47-.11.7C665.4,334.54,665.44,334.3,665.46,334.07Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M542.46,342.52a11.13,11.13,0,0,1-2.37-1.67A11.09,11.09,0,0,0,542.46,342.52Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M540,340.78a11.15,11.15,0,0,1-.94-1A11.11,11.11,0,0,0,540,340.78Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M730.25,552.17a11,11,0,0,0-.47-1.29A11,11,0,0,1,730.25,552.17Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M724.74,545.51a11.11,11.11,0,0,1,1.26.77A11.05,11.05,0,0,0,724.74,545.51Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M727.22,547.27a11.13,11.13,0,0,1,1.77,2.14A11.11,11.11,0,0,0,727.22,547.27Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M726,546.3a11.18,11.18,0,0,1,1.05.85A11.11,11.11,0,0,0,726,546.3Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M729.68,550.69a11,11,0,0,0-.55-1A11,11,0,0,1,729.68,550.69Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M730.55,553.54a11,11,0,0,0-.24-1.09A11,11,0,0,1,730.55,553.54Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M1064.2,492.88h-63.65a11.06,11.06,0,0,0,4.76-9.09V454.57a11.07,11.07,0,0,0-11.07-11.07H921a11.08,11.08,0,0,0,7.71-10.55V403.72a11.06,11.06,0,0,0-4.76-9.09h70.32a11.07,11.07,0,0,0,11.07-11.07V354.33a11.07,11.07,0,0,0-11.07-11.07H916a11.08,11.08,0,0,0,7.71-10.55V303.48a11.06,11.06,0,0,0-4.76-9.09h75.33a11.07,11.07,0,0,0,11.07-11.07V254.09A11.07,11.07,0,0,0,994.23,243H954.8a11.08,11.08,0,0,0,7.71-10.55V203.25a11.07,11.07,0,0,0-11.07-11.07H844.53a11.07,11.07,0,0,0-11.07,11.07,11.07,11.07,0,0,0-11.07-11.07H715.47a11.07,11.07,0,0,0-10,6.41,11.1,11.1,0,0,1,.21,2.16V230a11,11,0,0,1-1,4.65,11.05,11.05,0,0,0,3.85,6.42h27.46a11,11,0,0,1,7,2.51h12a11.08,11.08,0,0,0-7.71,10.55A11.1,11.1,0,0,0,747,252s0,.08,0,.12v29.22a11.06,11.06,0,0,1-.36,2.76,4,4,0,0,1,.48.61,11.16,11.16,0,0,0,.09-1.39,11,11,0,0,0,.19,1.91,3.27,3.27,0,0,1,.25,1.11,11.09,11.09,0,0,0,4.33,6.07h-9.52l.24-.19c-.88,0-1.78-.07-2.66-.08a2.46,2.46,0,0,1-.92-.19,11.06,11.06,0,0,1-3.18.47l-65.61,2a11.06,11.06,0,0,0-4.76,9.09v29.22a11.08,11.08,0,0,0,7.71,10.55l62.66.52a11.07,11.07,0,0,1,3.25.49,12.11,12.11,0,0,1,2.07.36l.16,0a11,11,0,0,0-1.91-.82h15.42a11.08,11.08,0,0,0-7.71,10.55,11.12,11.12,0,0,0-.17-1.92,2.46,2.46,0,0,1-.24.3,11.12,11.12,0,0,1,.21,2.14v29.22c0,1.36.2,1,.2-.52a11.06,11.06,0,0,0,4.76,9.09l39.09,1.25a11,11,0,0,1,3.92.73h9.41a11.12,11.12,0,0,0-3.83,4.68,11,11,0,0,1,1.57,5.66V434.2a11,11,0,0,1-.93,4.43,11.1,11.1,0,0,0,6.13,4.87H797.06a11,11,0,0,1-6,1.78H752.27a11.05,11.05,0,0,0-5.07,9.3c0-3.9-1.45,34.56-1.45,34.56,0,3.45,60.34,5,60.34,5a11,11,0,0,1,4.45.94,7.75,7.75,0,0,1,1.92-.16l-.06,0h9.52a11.06,11.06,0,0,0-4.76,9.09,11.09,11.09,0,0,0-.12-1.58c-.05.12-.11.24-.17.35a11.08,11.08,0,0,1,.29,2.48v28a11.07,11.07,0,0,0,11.07,11.07h-17a11,11,0,0,1-5.11,1.25H736.68a11.07,11.07,0,0,0-6,9.82v29.22a11.07,11.07,0,0,0,11.07,11.07H848.69a11.07,11.07,0,0,0,11.07-11.07,11.07,11.07,0,0,0,11.07,11.07H977.74a11.07,11.07,0,0,0,11.07-11.07V555.33a11.07,11.07,0,0,0-11.07-11.07h86.45a11.07,11.07,0,0,0,11.07-11.07V504A11.07,11.07,0,0,0,1064.2,492.88ZM799.37,294.39a11.06,11.06,0,0,0-4.76,9.09,11.06,11.06,0,0,0-4.76-9.09ZM786.9,343.26a11.08,11.08,0,0,0,7.71-10.55,11.08,11.08,0,0,0,7.71,10.55ZM825.74,243a11.08,11.08,0,0,0,7.71-10.55A11.08,11.08,0,0,0,841.16,243Zm34,312.31a11.07,11.07,0,0,0-11.07-11.07h22.15A11.07,11.07,0,0,0,859.76,555.33Zm11.73-62.45a11.06,11.06,0,0,0,4.76-9.09,11.06,11.06,0,0,0,4.76,9.09Zm4.76-38.32A11.08,11.08,0,0,0,868.55,444H884A11.08,11.08,0,0,0,876.25,454.57Zm-4.76-61.92a11.06,11.06,0,0,0,4.76-9.09,11.06,11.06,0,0,0,4.76,9.09Zm4.76-38.32a11.08,11.08,0,0,0-7.71-10.55H884A11.08,11.08,0,0,0,876.25,354.33Zm-4.76-61.92a11.06,11.06,0,0,0,4.76-9.09,11.06,11.06,0,0,0,4.76,9.09Zm4.76-38.32a11.08,11.08,0,0,0-7.71-10.55H884A11.08,11.08,0,0,0,876.25,254.09ZM951,494.86a11.06,11.06,0,0,0-4.76,9.09,11.06,11.06,0,0,0-4.76-9.09Zm-15.84,49.39a11.07,11.07,0,0,0,11.07-11.07,11.07,11.07,0,0,0,11.07,11.07Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M747.2,483.79", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M730.71,555.33a11.14,11.14,0,0,0-.1-1.41A11.11,11.11,0,0,1,730.71,555.33Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M665.56,332.71c0,.35,0,.7-.05,1C665.54,333.4,665.56,333.06,665.56,332.71Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M536.63,334.36a11,11,0,0,0,.28,1.32A11,11,0,0,1,536.63,334.36Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M412.7,399.65a2.52,2.52,0,0,1-.47-.56,2.7,2.7,0,0,1-.31-.92,22.36,22.36,0,0,0,0,2.28,11,11,0,0,1,.51,3.27,11,11,0,0,1,.49-3.19,4.58,4.58,0,0,1-.23-.77S412.7,399.69,412.7,399.65Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M564.27,192.17H457.36a11.07,11.07,0,0,0-11.07,11.07,11.07,11.07,0,0,0-11.07-11.07H328.31a11.07,11.07,0,0,0-11.07,11.07v29.22A11.08,11.08,0,0,0,324.94,243H242.06A11.07,11.07,0,0,0,231,254.09v29.22a11.06,11.06,0,0,0,4.76,9.09H160.41a11.07,11.07,0,0,0-11.07,11.07v29.22a11.07,11.07,0,0,0,11.07,11.07h78.28A11.08,11.08,0,0,0,231,354.33v29.22a11.06,11.06,0,0,0,4.76,9.09H165.43a11.07,11.07,0,0,0-11.07,11.07v29.22A11.07,11.07,0,0,0,165.43,444h73.26A11.08,11.08,0,0,0,231,454.57v29.22a11.07,11.07,0,0,0,11.07,11.07h63.65a11.06,11.06,0,0,0-4.76,9.09v29.22A11.07,11.07,0,0,0,312,544.25H225.57a11.07,11.07,0,0,0-11.07,11.07v29.22a11.07,11.07,0,0,0,11.07,11.07H332.47a11.07,11.07,0,0,0,11.07-11.07,11.07,11.07,0,0,0,11.07,11.07H461.53a11.07,11.07,0,0,0,11.07-11.07V555.33a11.07,11.07,0,0,0-6-9.82H443.58a11,11,0,0,1-5.11-1.25H418.93A11.07,11.07,0,0,0,430,533.18c0,4.82,2.51-28,2.51-28a11.07,11.07,0,0,1,11.07-11.07l40.75-1.25a11.15,11.15,0,0,0,2.93-3,11,11,0,0,1-.88-4.29V456.34a11,11,0,0,1,1.83-6.09,11.11,11.11,0,0,0-4.2-5H426a11,11,0,0,1-6-1.78H404.75a11.08,11.08,0,0,0,7.71-10.55l-.39-29c0-1.31-.07-2.46-.12-3.49a11.09,11.09,0,0,0-4.25-5.82h9.52l-.21.16c5.4-.31,67.07-3.93,72.09-8a8.7,8.7,0,0,1-.07-2.32,11.1,11.1,0,0,1-.14-1.68V353.6c0-.36,0-.72.05-1.07a11.09,11.09,0,0,0-7.56-8.75h13.48a11,11,0,0,1,5.11-1.25h30.57a11.06,11.06,0,0,0,6-9.82V303.48a11.06,11.06,0,0,0-4.76-9.09l-31.78-2c-5.38,0-8.95-2-6.11,0h-9.52a11.05,11.05,0,0,0,4.76-9,11.12,11.12,0,0,1-.2-2V252.11s0,0,0-.07a11.09,11.09,0,0,0-7.51-8.5H493a11,11,0,0,1,7-2.51h71.31a11,11,0,0,0,4.07-8.57V203.25A11.07,11.07,0,0,0,564.27,192.17ZM283.16,294.39a11.06,11.06,0,0,0-4.76,9.09,11.06,11.06,0,0,0-4.76-9.09Zm-4.76,38.32a11.08,11.08,0,0,0,7.71,10.55H270.69A11.08,11.08,0,0,0,278.39,332.71Zm9.77,61.92a11.06,11.06,0,0,0-4.76,9.09,11.06,11.06,0,0,0-4.76-9.09ZM275.7,443.49a11.08,11.08,0,0,0,7.71-10.55,11.08,11.08,0,0,0,7.71,10.55Zm136.51-149.1a11.06,11.06,0,0,0-4.76,9.09,11.06,11.06,0,0,0-4.76-9.09ZM343.55,555.33a11.07,11.07,0,0,0-11.07-11.07h22.15A11.07,11.07,0,0,0,343.55,555.33Zm11.73-62.45a11.06,11.06,0,0,0,4.76-9.09,11.06,11.06,0,0,0,4.76,9.09ZM360,454.57A11.08,11.08,0,0,0,352.33,444h15.42A11.08,11.08,0,0,0,360,454.57Zm-4.76-61.92a11.06,11.06,0,0,0,4.76-9.09,11.06,11.06,0,0,0,4.76,9.09ZM360,354.33a11.08,11.08,0,0,0-7.71-10.55h15.42A11.08,11.08,0,0,0,360,354.33Zm-4.76-61.92a11.06,11.06,0,0,0,4.76-9.09,11.06,11.06,0,0,0,4.76,9.09ZM360,254.09a11.08,11.08,0,0,0-7.71-10.55h15.42A11.08,11.08,0,0,0,360,254.09Zm39.7,89.16a11.08,11.08,0,0,0,7.71-10.55,11.08,11.08,0,0,0,7.71,10.55ZM438.58,243a11.08,11.08,0,0,0,7.71-10.55A11.08,11.08,0,0,0,454,243Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M540.14,295.29l.16-.14Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M539.41,296l-.16.18Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M538.48,297.18l.08-.11Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M537,335.9a11,11,0,0,0,.46,1.27A11,11,0,0,1,537,335.9Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M538.16,338.53a11.08,11.08,0,0,0,.82,1.14A11.06,11.06,0,0,1,538.16,338.53Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M537.5,337.28a11,11,0,0,0,.66,1.24A11,11,0,0,1,537.5,337.28Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M536.81,300.95c0-.14.07-.27.1-.4C536.87,300.68,536.84,300.81,536.81,300.95Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M537.18,299.7c0-.11.08-.22.12-.33C537.26,299.48,537.22,299.59,537.18,299.7Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M536.58,302.2c0-.13,0-.26.06-.38C536.62,301.95,536.6,302.07,536.58,302.2Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("path", { d: "M537.79,298.31l0,0Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+        React.createElement("rect", { x: "318.49", y: "192.17", width: "129.05", height: "51.37", rx: "8.84", ry: "8.84", transform: "translate(680.3 361.98) rotate(-180)", opacity: "0.1" }),
+        React.createElement("rect", { x: "704.4", y: "192.17", width: "129.05", height: "51.37", rx: "8.84", ry: "8.84", transform: "translate(1452.12 361.98) rotate(-180)", opacity: "0.1" }),
+        React.createElement("rect", { x: "876.05", y: "242.29", width: "129.05", height: "51.37", rx: "8.84", ry: "8.84", transform: "translate(1795.43 462.22) rotate(-180)", opacity: "0.1" }),
+        React.createElement("rect", { x: "665.56", y: "292.41", width: "129.05", height: "51.37", rx: "8.84", ry: "8.84", transform: "translate(1374.43 562.45) rotate(-180)", opacity: "0.1" }),
+        React.createElement("rect", { x: "876.05", y: "343.78", width: "129.05", height: "51.37", rx: "8.84", ry: "8.84", transform: "translate(1795.43 665.19) rotate(-180)", opacity: "0.1" }),
+        React.createElement("rect", { x: "876.05", y: "444.02", width: "129.05", height: "51.37", rx: "8.84", ry: "8.84", transform: "translate(1795.43 865.67) rotate(-180)", opacity: "0.1" }),
+        React.createElement("path", { d: "M938.16,494.14H825.23a8.06,8.06,0,0,0-7.74,5.8,5.15,5.15,0,0,1-.09,1.36,5.71,5.71,0,0,1-.23.77s0,.09,0,.13v35.25a8.06,8.06,0,0,0,8.06,8.06H938.16a8.06,8.06,0,0,0,8.06-8.06V502.2A8.06,8.06,0,0,0,938.16,494.14Z", transform: "translate(-85.73 -73.74)", opacity: "0.1" }),
+        React.createElement("rect", { x: "730.71", y: "544.25", width: "129.05", height: "51.37", rx: "8.84", ry: "8.84", transform: "translate(1504.74 1066.14) rotate(-180)", opacity: "0.1" }),
+        React.createElement("rect", { x: "359.84", y: "242.29", width: "129.05", height: "51.37", rx: "8.84", ry: "8.84", transform: "translate(762.99 462.22) rotate(-180)", opacity: "0.1" }),
+        React.createElement("rect", { x: "279.65", y: "292.41", width: "129.05", height: "51.37", rx: "8.84", ry: "8.84", transform: "translate(602.61 562.45) rotate(-180)", opacity: "0.1" }),
+        React.createElement("rect", { x: "230.78", y: "343.78", width: "129.05", height: "51.37", rx: "8.84", ry: "8.84", transform: "translate(504.88 665.19) rotate(-180)", opacity: "0.1" }),
+        React.createElement("rect", { x: "283.41", y: "393.9", width: "129.05", height: "51.37", rx: "8.84", ry: "8.84", transform: "translate(610.13 765.43) rotate(-180)", opacity: "0.1" }),
+        React.createElement("rect", { x: "230.78", y: "444.02", width: "129.05", height: "51.37", rx: "8.84", ry: "8.84", transform: "translate(504.88 865.67) rotate(-180)", opacity: "0.1" }),
+        React.createElement("rect", { x: "172.4", y: "494.19", width: "129.05", height: "51.37", rx: "8.84", ry: "8.84", transform: "translate(388.12 966.01) rotate(-180)", fill: screenPrimary3 }),
+        React.createElement("rect", { x: "925.92", y: "393.84", width: "129.05", height: "51.37", rx: "8.84", ry: "8.84", transform: "translate(1895.15 765.32) rotate(-180)", fill: screenPrimary3 }),
+        React.createElement("rect", { x: "920.44", y: "292.58", width: "129.05", height: "51.37", rx: "8.84", ry: "8.84", transform: "translate(1884.2 562.8) rotate(-180)", fill: screenPrimary3 }),
+        React.createElement("rect", { x: "985.21", y: "543.45", width: "129.05", height: "51.37", rx: "8.84", ry: "8.84", transform: "translate(2013.74 1064.54) rotate(-180)", fill: screenPrimary3 }),
+        React.createElement("rect", { x: "85.73", y: "544.36", width: "129.05", height: "51.37", rx: "8.84", ry: "8.84", transform: "translate(214.79 1066.36) rotate(-180)", fill: screenPrimary3 }),
+        React.createElement("rect", { x: "103.07", y: "443.11", width: "129.05", height: "51.37", rx: "8.84", ry: "8.84", transform: "translate(249.45 863.84) rotate(-180)", fill: screenPrimary3 }),
+        React.createElement("rect", { x: "103.07", y: "343.67", width: "129.05", height: "51.37", rx: "8.84", ry: "8.84", transform: "translate(249.45 664.97) rotate(-180)", fill: screenPrimary3 }),
+        React.createElement("rect", { x: "107.63", y: "242.41", width: "129.05", height: "51.37", rx: "8.84", ry: "8.84", transform: "translate(258.58 462.45) rotate(-180)", fill: screenPrimary3 }),
+        React.createElement("rect", { x: "107.63", y: "242.41", width: "129.05", height: "51.37", rx: "8.84", ry: "8.84", transform: "translate(258.58 462.45) rotate(-180)", opacity: "0.1" }),
+        React.createElement("rect", { x: "189.73", y: "192.24", width: "129.05", height: "51.37", rx: "8.84", ry: "8.84", transform: "translate(422.78 362.11) rotate(-180)", fill: screenPrimary3 }),
+        React.createElement("rect", { x: "302.2", y: "494.14", width: "129.05", height: "51.37", rx: "8.84", ry: "8.84", transform: "translate(647.72 965.9) rotate(-180)", opacity: "0.1" }),
+        React.createElement("rect", { x: "214.49", y: "544.25", width: "129.05", height: "51.37", rx: "8.84", ry: "8.84", transform: "translate(472.31 1066.14) rotate(-180)", opacity: "0.1" })),
+    React.createElement("polygon", { points: "552.66 540.06 571.66 540.06 571.66 528.29 571.66 526.24 416.16 526.24 416.16 528.29 416.16 540.06 435.16 540.06 435.16 553.89 404.06 553.89 404.06 571.16 583.76 571.16 583.76 553.89 552.66 553.89 552.66 540.06", fill: "url(#b417a2e5-779f-434a-8a9b-5b809751130b)" }),
+    React.createElement("path", { d: "M765.69,626.46h0c1.36-18.6.88-34.61-1-48.4-2.13-15.87-6.08-28.78-11.09-39.28-10-21-24.25-32.39-36.76-38.58a69.16,69.16,0,0,0-26.9-7.34,12.08,12.08,0,0,0-23.91-.05V461.75H600.37V444.47h88.48a10,10,0,0,0,10-10V343.9a10,10,0,0,0-10-10H655.26V244.62a13.48,13.48,0,0,0,7.93-12.28c0-.13,0-.26,0-.4s0-.26,0-.4a13.49,13.49,0,0,0-27,0c0,.13,0,.26,0,.4s0,.26,0,.4a13.48,13.48,0,0,0,7.14,11.9v89.65H518.81V244.24a13.48,13.48,0,0,0,7.14-11.9c0-.13,0-.26,0-.4s0-.26,0-.4a13.49,13.49,0,0,0-27,0c0,.13,0,.26,0,.4s0,.26,0,.4a13.48,13.48,0,0,0,7.93,12.28v89.26H470.43a10,10,0,0,0-10,10v90.56a10,10,0,0,0,10,10h88.48v17.28H493.25v25.46a12.07,12.07,0,0,0-2.61-4.35l-.29-.29a12.09,12.09,0,0,0-20.64,8.55v1.73s-12.42,0-27.27,7.35c-12.51,6.19-26.75,17.58-36.76,38.58-5,10.5-9,23.42-11.09,39.28-1.86,13.78-2.35,29.8-1,48.4-27.73,23,7,56.46,7,56.46,28.45,0,27.82-47.23,27.5-55.29h.14s-.08-.4-.2-1.14v0h0a176.9,176.9,0,0,1-1.71-39.9c.79-10.17,2.74-20.93,6.74-30.61a54.35,54.35,0,0,1,13.68-20.05,46.75,46.75,0,0,1,23-11.07v7.77a12.09,12.09,0,0,0,23.53,3.91V600H666V537.81a12.07,12.07,0,0,0,3.07,6.44l.33.35A12.09,12.09,0,0,0,690.08,536V524.92a46.62,46.62,0,0,1,22.46,11,54.35,54.35,0,0,1,13.68,20.05c4,9.69,5.94,20.44,6.74,30.61a176.9,176.9,0,0,1-1.71,39.9h0v0c-.12.74-.2,1.14-.2,1.14h.14c-.32,8.06-.95,55.29,27.5,55.29C758.69,682.92,793.42,649.48,765.69,626.46Z", transform: "translate(-85.73 -73.74)", fill: "url(#04db0182-19cc-4c2e-a103-750e5424fcaf)" }),
+    React.createElement("polygon", { points: "412.7 572.75 412.7 588.45 433.44 588.45 433.44 612.63 433.44 612.63 433.44 633.37 433.44 664.47 433.44 681.75 433.44 692.12 409.24 692.12 409.24 716.3 474.9 716.3 474.9 692.12 464.54 692.12 464.54 681.75 464.54 681.75 464.54 664.47 464.54 664.47 464.54 633.37 464.54 633.37 464.54 612.63 464.54 612.63 464.54 588.45 488.72 588.45 488.72 572.75 488.72 571.17 412.7 571.17 412.7 572.75", fill: "url(#497b2842-48f9-46b6-a092-cc1e43f49418)" }),
+    React.createElement("polygon", { points: "495.64 572.75 495.64 588.45 526.74 588.45 526.74 612.63 526.74 612.63 526.74 633.37 526.74 664.47 526.74 681.75 526.74 692.12 502.55 692.12 502.55 716.3 568.21 716.3 568.21 692.12 557.84 692.12 557.84 681.75 557.84 664.47 557.84 633.37 557.84 612.63 557.84 612.63 557.84 588.45 571.66 588.45 571.66 572.75 571.66 571.17 495.64 571.17 495.64 572.75", fill: "url(#fadd9628-c3f0-4493-ac03-d18d51c12264)" }),
+    React.createElement("rect", { x: "377.91", y: "264.74", width: "232.01", height: "107.6", rx: "12.97", ry: "12.97", fill: screenPrimary3 }),
+    React.createElement("rect", { x: "396.4", y: "355.83", width: "195.02", height: "2.02", opacity: "0.1" }),
+    React.createElement("rect", { x: "396.4", y: "281.55", width: "195.02", height: "73.97", opacity: "0.3" }),
+    React.createElement("circle", { cx: "441.79", cy: "320.08", r: "26.9", opacity: "0.1" }),
+    React.createElement("circle", { cx: "441.79", cy: "318.54", r: "26.9", fill: screenGrey5 }),
+    React.createElement("circle", { cx: "546.03", cy: "320.08", r: "26.9", opacity: "0.1" }),
+    React.createElement("circle", { cx: "546.03", cy: "318.54", r: "26.9", fill: screenGrey5 }),
+    React.createElement("rect", { x: "473.73", y: "372.34", width: "40.35", height: "23.54", fill: screenPrimary3 }),
+    React.createElement("rect", { x: "409.85", y: "389.15", width: "168.12", height: "134.5", fill: screenPrimary3 }),
+    React.createElement("polygon", { points: "569.57 523.65 569.57 537.1 551.07 537.1 551.07 550.55 436.74 550.55 436.74 537.1 418.26 537.1 418.26 523.65 569.57 523.65", fill: screenPrimary3 }),
+    React.createElement("polygon", { points: "569.57 523.65 569.57 537.1 551.07 537.1 551.07 550.55 436.74 550.55 436.74 537.1 418.26 537.1 418.26 523.65 569.57 523.65", opacity: "0.3" }),
+    React.createElement("rect", { x: "406.49", y: "550.55", width: "174.85", height: "16.81", fill: screenPrimary3 }),
+    React.createElement("rect", { x: "414.89", y: "567.37", width: "73.97", height: "16.81", fill: screenPrimary3 }),
+    React.createElement("rect", { x: "495.59", y: "567.37", width: "73.97", height: "16.81", fill: screenPrimary3 }),
+    React.createElement("rect", { x: "411.53", y: "685.05", width: "63.89", height: "23.54", fill: screenPrimary3 }),
+    React.createElement("polygon", { points: "435.07 607.71 435.07 627.89 435.07 658.15 435.07 674.96 435.07 685.05 465.33 685.05 465.33 674.96 465.33 658.15 465.33 627.89 465.33 607.71 465.33 584.17 435.07 584.17 435.07 607.71", fill: screenPrimary3 }),
+    React.createElement("polygon", { points: "525.85 584.17 525.85 607.71 525.85 627.89 525.85 658.15 525.85 674.96 525.85 685.05 556.12 685.05 556.12 674.96 556.12 658.15 556.12 627.89 556.12 607.71 556.12 584.17 525.85 584.17", fill: screenPrimary3 }),
+    React.createElement("rect", { x: "502.32", y: "685.05", width: "63.89", height: "23.54", fill: screenPrimary3 }),
+    React.createElement("path", { d: "M496.22,491.47v40.35c0,.3,0,.61,0,.9a11.77,11.77,0,0,1-23.5-.9V491.47a11.76,11.76,0,0,1,20.08-8.32l.28.29a11.72,11.72,0,0,1,3.13,7.13C496.2,490.86,496.22,491.17,496.22,491.47Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+    React.createElement("path", { d: "M687.1,494.83v40.36A11.76,11.76,0,0,1,667,543.51l-.32-.34a11.73,11.73,0,0,1-3.13-8V494.83a11.77,11.77,0,0,1,23.54,0Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+    React.createElement("path", { d: "M472.68,493.15v31.1A45.49,45.49,0,0,0,450.33,535,52.88,52.88,0,0,0,437,554.54c-3.89,9.42-5.78,19.89-6.55,29.79a170.32,170.32,0,0,0,1.86,40H398.7c-1.43-18.59-1-34.53.88-48.23,2.08-15.44,5.92-28,10.79-38.22,9.74-20.43,23.6-31.52,35.77-37.54C460.6,493.15,472.68,493.15,472.68,493.15Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+    React.createElement("path", { d: "M405.43,678.09s-33.79-32.53-6.81-54.93h33.51S435.69,678.09,405.43,678.09Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+    React.createElement("path", { d: "M405.43,678.09s-33.79-32.53-6.81-54.93h33.51S435.69,678.09,405.43,678.09Z", transform: "translate(-85.73 -73.74)", opacity: "0.3" }),
+    React.createElement("rect", { x: "436.75", y: "409.33", width: "114.32", height: "87.42", opacity: "0.3" }),
+    React.createElement("rect", { x: "435.07", y: "584.17", width: "30.26", height: "23.54", opacity: "0.3" }),
+    React.createElement("rect", { x: "435.07", y: "627.89", width: "30.26", height: "30.26", opacity: "0.3" }),
+    React.createElement("rect", { x: "435.07", y: "674.96", width: "30.26", height: "10.09", opacity: "0.3" }),
+    React.createElement("rect", { x: "525.85", y: "584.17", width: "30.26", height: "23.54", opacity: "0.3" }),
+    React.createElement("rect", { x: "525.85", y: "627.89", width: "30.26", height: "30.26", opacity: "0.3" }),
+    React.createElement("rect", { x: "525.85", y: "674.96", width: "30.26", height: "10.09", opacity: "0.3" }),
+    React.createElement("path", { d: "M472.68,493.15v31.1A45.49,45.49,0,0,0,450.33,535l-4.18-34.73C460.6,493.15,472.68,493.15,472.68,493.15Z", transform: "translate(-85.73 -73.74)", opacity: "0.3" }),
+    React.createElement("path", { d: "M437,554.54c-3.89,9.42-5.78,19.89-6.55,29.79l-30.88-8.27c2.08-15.44,5.92-28,10.79-38.22Z", transform: "translate(-85.73 -73.74)", opacity: "0.3" }),
+    React.createElement("path", { d: "M686.61,493.15v31.1A45.49,45.49,0,0,1,709,535a52.88,52.88,0,0,1,13.31,19.51c3.89,9.42,5.78,19.89,6.55,29.79a170.32,170.32,0,0,1-1.86,40h33.62c1.43-18.59,1-34.53-.88-48.23-2.08-15.44-5.92-28-10.79-38.22-9.74-20.43-23.6-31.52-35.77-37.54C698.69,493.15,686.61,493.15,686.61,493.15Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+    React.createElement("path", { d: "M753.86,678.09s33.79-32.53,6.81-54.93H727.15S723.6,678.09,753.86,678.09Z", transform: "translate(-85.73 -73.74)", fill: screenPrimary3 }),
+    React.createElement("path", { d: "M753.86,678.09s33.79-32.53,6.81-54.93H727.15S723.6,678.09,753.86,678.09Z", transform: "translate(-85.73 -73.74)", opacity: "0.3" }),
+    React.createElement("path", { d: "M686.61,493.15v31.1A45.49,45.49,0,0,1,709,535l4.18-34.73C698.69,493.15,686.61,493.15,686.61,493.15Z", transform: "translate(-85.73 -73.74)", opacity: "0.3" }),
+    React.createElement("path", { d: "M722.27,554.54c3.89,9.42,5.78,19.89,6.55,29.79l30.88-8.27c-2.08-15.44-5.92-28-10.79-38.22Z", transform: "translate(-85.73 -73.74)", opacity: "0.3" }),
+    React.createElement("rect", { x: "473.73", y: "372.34", width: "40.35", height: "2.79", opacity: "0.1" }),
+    React.createElement("path", { d: "M666.69,486.86v56.31a11.73,11.73,0,0,1-3.13-8V494.83A11.71,11.71,0,0,1,666.69,486.86Z", transform: "translate(-85.73 -73.74)", opacity: "0.1" }),
+    React.createElement("path", { d: "M496.18,490.57v42.15a11.72,11.72,0,0,1-3.13,7.13V483.44A11.72,11.72,0,0,1,496.18,490.57Z", transform: "translate(-85.73 -73.74)", opacity: "0.1" }),
+    React.createElement("rect", { x: "418.26", y: "523.65", width: "151.31", height: "1.99", opacity: "0.1" }),
+    React.createElement("rect", { x: "414.89", y: "567.37", width: "73.97", height: "1.54", opacity: "0.1" }),
+    React.createElement("rect", { x: "495.59", y: "567.37", width: "73.97", height: "1.54", opacity: "0.1" }),
+    React.createElement("rect", { x: "423.14", y: "165.17", width: "11.58", height: "99.58", fill: screenPrimary3 }),
+    React.createElement("rect", { x: "555.91", y: "165.17", width: "11.58", height: "99.58", fill: screenPrimary3 }),
+    React.createElement("circle", { cx: "428.55", cy: "165.94", r: "13.12", opacity: "0.1" }),
+    React.createElement("circle", { cx: "428.55", cy: "165.17", r: "13.12", fill: screenPrimary3 }),
+    React.createElement("circle", { cx: "562.09", cy: "165.94", r: "13.12", opacity: "0.1" }),
+    React.createElement("circle", { cx: "562.09", cy: "165.17", r: "13.12", fill: screenPrimary3 })));

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

@@ -0,0 +1,3 @@
+export declare const AstronautIllustration: ({ title }: {
+    title: string;
+}) => JSX.Element;