@enhanced-dom/slides 0.0.3 → 0.0.6

package/components/index.d.ts

@@ -1,3 +1,2 @@
 export * from './toc.component';
-export * from './component-wave.component';
-export * from './image-wave.component';
+export * from './shell';

package/components/index.js

@@ -1,3 +1,2 @@
 export * from './toc.component';
-export * from './component-wave.component';
-export * from './image-wave.component';
+export * from './shell';

package/{shell → components/shell}/header.component.d.ts

@@ -1,7 +1,5 @@
-/** @jsx jsx */
-import { jsx } from 'theme-ui';
 export declare const ShellHeader: ({ title, author, date }: {
     title: string;
     author: string;
     date: string;
-}) => jsx.JSX.Element;
+}) => import("theme-ui/jsx-runtime").JSX.Element;

package/components/shell/header.component.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { Themed } from 'theme-ui';
+import { SizeVariableNames, ColorVariableNames } from '../../theme';
+export const ShellHeader = ({ title, author, date }) => {
+    return (_jsxs("div", Object.assign({ sx: { position: 'relative' } }, { children: [_jsx("div", Object.assign({ sx: {
+                    position: ['static', 'absolute'],
+                    width: '100%',
+                    height: ['auto', '100%'],
+                    right: ['auto', SizeVariableNames.FULL_CONTENT_WIDTH],
+                    color: ['text', ColorVariableNames.LIGHT_TEXT],
+                } }, { children: _jsx("div", Object.assign({ sx: {
+                        float: ['none', 'right'],
+                        display: ['block', 'inline-block'],
+                        textAlign: ['left', 'right'],
+                    } }, { children: _jsx(Themed.h1, Object.assign({ sx: { paddingBottom: '80px' } }, { children: title }), void 0) }), void 0) }), void 0),
+            _jsx("div", { children: _jsxs(Themed.p, Object.assign({ sx: { paddingTop: 1 } }, { children: [_jsx(Themed.a, Object.assign({ href: "/", sx: { textDecoration: 'none', color: 'inherit', border: 'none' } }, { children: author }), void 0),
+                        _jsx("br", {}, void 0),
+                        _jsx("span", Object.assign({ sx: { fontSize: 1 } }, { children: date }), void 0)] }), void 0) }, void 0)] }), void 0));
+};

package/{shell → components/shell}/scroll-top/icon.component.d.ts

@@ -7,13 +7,6 @@ declare interface IconAttributes extends Omit<React.DetailedHTMLProps<React.HTML
     style?: React.CSSProperties;
     config: IconConfigType;
 }
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            ['enhanced-dom-icon']: IconAttributes;
-        }
-    }
-}
 export declare const Icon: import("react").ComponentType<IconAttributes> & {
     renderer: import("@enhanced-dom/icon").MultiIconRenderer;
 } & Record<string, AnalyserNode>;

package/{shell → components/shell}/scroll-top/icon.component.js

@@ -2,7 +2,7 @@ import { withReactAdapter } from '@enhanced-dom/react';
 import { IconWebComponent } from '@enhanced-dom/icon';
 import { FontawesomeIconRenderer } from '@enhanced-dom/fontawesome';
 IconWebComponent.addIconInterpreter('fa5', new FontawesomeIconRenderer());
+IconWebComponent.register();
 export const Icon = withReactAdapter({
     type: IconWebComponent,
-    name: 'enhanced-dom-icon',
 });

package/components/shell/scroll-top/scroll-top.component.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import React from 'react';
+import ReactCardFlip from 'react-card-flip';
+import { faArrowAltCircleUp } from '@fortawesome/free-regular-svg-icons';
+import * as styles from './scroll-top.style.pcss';
+import { Icon } from './icon.component';
+const getBodyScroll = () => {
+    return document.body.scrollTop !== 0 || document.documentElement.scrollTop !== 0;
+};
+const scrollToTop = () => {
+    if (getBodyScroll()) {
+        window.scrollBy(0, -50);
+        requestAnimationFrame(scrollToTop);
+    }
+};
+const scrollOnKey = (e) => {
+    if (e.altKey || e.shiftKey || e.ctrlKey || e.key !== 'Enter') {
+        return;
+    }
+    e.stopPropagation();
+    e.preventDefault();
+    scrollToTop();
+};
+export const ScrollTop = ({ children }) => {
+    const [isFlipped, setFlipped] = React.useState(false);
+    const showButton = React.useCallback(() => {
+        if (getBodyScroll()) {
+            setFlipped(true);
+        }
+    }, [setFlipped]);
+    const showFront = React.useCallback(() => {
+        setFlipped(false);
+    }, [setFlipped]);
+    const buttonContents = children ? (_jsxs(ReactCardFlip, Object.assign({ isFlipped: isFlipped, flipDirection: "horizontal" }, { children: [_jsx("div", { children: children }, void 0),
+            _jsx("div", Object.assign({ className: styles.brandingBack }, { children: _jsx(Icon, { config: { ...faArrowAltCircleUp, namespace: 'fa5' } }, void 0) }), void 0)] }), void 0)) : (_jsx("div", Object.assign({ className: styles.brandingBack }, { children: _jsx(Icon, { config: { ...faArrowAltCircleUp, namespace: 'fa5' } }, void 0) }), void 0));
+    return (_jsx("div", Object.assign({ className: styles.branding, tabIndex: 0, role: "button", onClick: scrollToTop, onFocus: showButton, onBlur: showFront, onMouseEnter: showButton, onMouseLeave: showFront, onKeyPress: scrollOnKey }, { children: buttonContents }), void 0));
+};

package/components/shell/scroll-top/scroll-top.style.pcss

@@ -0,0 +1,25 @@
+.branding {
+  width: 3rem;
+  height: 3rem;
+  position: fixed;
+  bottom: 2.5rem;
+  right: 2.5rem;
+  z-index: 1;
+  outline-color: #e2001a;
+  color: #e2001a;
+
+  > div {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  &-back {
+    background-color: transparent;
+    font-size: 2rem;
+    color: #e2001a;
+    cursor: pointer;
+  }
+}

package/{shell → components/shell}/shell.component.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 /** @jsxFrag React.Fragment */
 import { Theme } from 'theme-ui';
 import React from 'react';

package/components/shell/shell.component.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+/** @jsxFrag React.Fragment */
+import { Themed, ThemeProvider } from 'theme-ui';
+import { Global } from '@emotion/react';
+import React from 'react';
+import defaultTheme, { ColorVariableNames, SizeVariableNames } from '../../theme';
+import { ShellHeader } from './header.component';
+import { ScrollTop } from './scroll-top';
+const BrandingSlot = ({ children }) => {
+    return children || null;
+};
+const ContentsSlot = ({ children, ...rest }) => {
+    return (_jsxs(_Fragment, { children: [_jsx(ShellHeader, Object.assign({}, rest), void 0), children || null] }, void 0));
+};
+const getBranding = (children) => React.Children.toArray(children).find((item) => { var _a; return ((_a = item) === null || _a === void 0 ? void 0 : _a.type) === BrandingSlot; });
+const getContents = (children) => React.Children.toArray(children).find((item) => { var _a; return ((_a = item) === null || _a === void 0 ? void 0 : _a.type) === ContentsSlot; });
+export const Shell = ({ children, theme, }) => {
+    const branding = getBranding(children);
+    const contents = getContents(children);
+    return (_jsx(ThemeProvider, Object.assign({ theme: theme }, { children: _jsxs(Themed.root, Object.assign({ sx: {
+                display: 'flex',
+                width: '100vw',
+            } }, { children: [_jsx(Global, { styles: {
+                        body: { margin: 0, overflowX: 'hidden' },
+                    } }, void 0),
+                _jsx("aside", { sx: {
+                        bg: ColorVariableNames.DARK_BACKGROUND,
+                        color: ColorVariableNames.LIGHT_TEXT,
+                        width: [0, '40vw'],
+                        minHeight: '100vh',
+                    } }, void 0),
+                _jsx("div", Object.assign({ sx: { bg: ColorVariableNames.BACKGROUND, color: ColorVariableNames.TEXT, width: ['100vw', '60vw'] } }, { children: _jsxs("main", Object.assign({ sx: {
+                            py: [5, SizeVariableNames.TOP_MARGIN],
+                            pl: [0, SizeVariableNames.INNER_MARGIN],
+                            width: [SizeVariableNames.CONTENT, SizeVariableNames.CONTENT],
+                            maxWidth: ['80%', 'none'],
+                            mx: ['auto', 0],
+                        } }, { children: [contents, branding ? _jsx(ScrollTop, { children: branding }, void 0) : null] }), void 0) }), void 0)] }), void 0) }), void 0));
+};
+Shell.defaultProps = {
+    theme: defaultTheme,
+};
+Shell.Branding = BrandingSlot;
+Shell.Contents = ContentsSlot;

package/components/toc.component.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface TocItemProps {
     heading: string;
     to?: string;
@@ -7,9 +6,9 @@ interface TocItemProps {
 export declare const Toc: {
     ({ headings }: {
         headings: TocItemProps[];
-    }): JSX.Element;
+    }): import("theme-ui/jsx-runtime").JSX.Element;
     Heading: ({ heading }: {
         heading: string;
-    }) => JSX.Element;
+    }) => import("theme-ui/jsx-runtime").JSX.Element;
 };
 export {};

package/components/toc.component.js

@@ -1,14 +1,8 @@
-import React from 'react';
-const Heading = ({ heading }) => (React.createElement("h2", null,
-    heading,
-    React.createElement("a", { style: { display: 'none' }, id: heading.toLowerCase().replace(/\s/, '-') })));
+import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+const Heading = ({ heading }) => (_jsxs("h2", { children: [heading, _jsx("a", Object.assign({ href: `#${heading.toLowerCase().replace(/\s/, '-')}`, style: { display: 'none' }, id: heading.toLowerCase().replace(/\s/, '-') }, { children: '' }), void 0)] }, void 0));
 const TocItem = ({ heading, to, explanation }) => {
     const anchor = to !== null && to !== void 0 ? to : heading;
-    return (React.createElement("li", null,
-        React.createElement("a", { href: `#${anchor.toLowerCase().replace(/\s/, '-')}` },
-            React.createElement("em", null, heading)),
-        explanation ? ': ' : '',
-        explanation));
+    return (_jsxs("li", { children: [_jsx("a", Object.assign({ href: `#${anchor.toLowerCase().replace(/\s/, '-')}` }, { children: _jsx("em", { children: heading }, void 0) }), void 0), explanation ? ': ' : '', explanation] }, void 0));
 };
-export const Toc = ({ headings }) => (React.createElement("ul", null, headings.map((h, idx) => (React.createElement(TocItem, Object.assign({ key: idx }, h))))));
+export const Toc = ({ headings }) => (_jsx("ul", { children: headings.map((h, idx) => (_jsx(TocItem, Object.assign({}, h), idx))) }, void 0));
 Toc.Heading = Heading;

package/index.d.ts

@@ -1,3 +1,2 @@
-export * from './shell';
 export * from './components';
 export { default as defaultTheme } from './theme';

package/index.js

@@ -1,3 +1,2 @@
-export * from './shell';
 export * from './components';
 export { default as defaultTheme } from './theme';

package/package.json

@@ -1,47 +1,34 @@
-{
-  "name": "@enhanced-dom/slides",
-  "version": "0.0.3",
-  "description": "Basic building blocks for html slides",
-  "keywords": [],
-  "repository": "https://github.com/enhanced-dom/slides.git",
-  "license": "MIT",
-  "author": "CD9B4A105290E17E0948E021DF4105107C88693C59C0B891CCC08366C51AEA990902A6A156AC87D88A2FC41422A5E1C3C4071F251F19441C4516000EC25F87DF",
-  "main": "index.js",
-  "scripts": {
-    "package": "cd dist && npm pack",
-    "prebuild": "rimraf dist/*",
-    "build": "tsc -p ./tsconfig.json",
-    "postbuild": "copyfiles package.json LICENSE.md README.md dist && copyfiles -u 1 src/**/*.scss* dist",
-    "lint": "eslint src/** --fix --config eslint.config.js"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.4.0",
-    "@enhanced-dom/fontawesome": "^0.0.2",
-    "@enhanced-dom/icon": "^0.0.2",
-    "@enhanced-dom/react": "^0.0.2",
-    "@fontsource/montserrat": "^4.4.5",
-    "@fortawesome/free-regular-svg-icons": "^5.15.3",
-    "@fortawesome/free-solid-svg-icons": "^5.15.3",
-    "@theme-ui/typography": "^0.10.0",
-    "deepmerge": "^4.2.2",
-    "gatsby-theme-blog": "^3.0.0",
-    "gatsby-theme-waves": "^0.1.6",
-    "lodash.pick": "^4.4.0",
-    "react-card-flip": "^1.1.1",
-    "theme-ui": "^0.9.1",
-    "typography-theme-wordpress-2016": "^0.16.19"
-  },
-  "devDependencies": {
-    "@enhanced-dom/lint": "^0.0.3",
-    "@types/lodash.pick": "^4.4.6",
-    "@types/react": "^17.0.8",
-    "@types/react-dom": "^17.0.5",
-    "copyfiles": "2.4.1",
-    "rimraf": "3.0.2",
-    "typescript": "4.2.2"
-  },
-  "engines": {
-    "node": ">=14.17.0",
-    "npm": ">=8.0.0"
-  }
-}
+{
+  "name": "@enhanced-dom/slides",
+  "version": "0.0.6",
+  "description": "Basic building blocks for html slides",
+  "keywords": [],
+  "repository": "https://github.com/enhanced-dom/slides.git",
+  "license": "MIT",
+  "author": "CD9B4A105290E17E0948E021DF4105107C88693C59C0B891CCC08366C51AEA990902A6A156AC87D88A2FC41422A5E1C3C4071F251F19441C4516000EC25F87DF",
+  "main": "index.js",
+  "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@enhanced-dom/fontawesome": "^0.0.3",
+    "@enhanced-dom/gatsby-waves": "^0.0.1",
+    "@enhanced-dom/icon": "^0.0.4",
+    "@enhanced-dom/react": "^0.0.6",
+    "@fontsource/montserrat": "^4.5.10",
+    "@theme-ui/typography": "^0.14.5",
+    "deepmerge": "^4.2.2",
+    "lodash.pick": "^4.4.0",
+    "react-card-flip": "^1.1.1",
+    "typography-theme-wordpress-2016": "^0.16.19"
+  },
+  "devDependencies": {
+    "@enhanced-dom/lint": "^0.0.7",
+    "@enhanced-dom/webpack": "^0.0.7",
+    "@types/lodash.pick": "^4.4.6",
+    "@types/react": "^17.0.8",
+    "@types/react-dom": "^17.0.5"
+  },
+  "engines": {
+    "node": ">=14.17.0",
+    "npm": ">=8.0.0"
+  }
+}

package/theme.js

@@ -1,10 +1,10 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import { toTheme } from '@theme-ui/typography';
 import typography from 'typography-theme-wordpress-2016';
 import merge from 'deepmerge';
 import '@fontsource/montserrat';
 import pick from 'lodash.pick';
-// @ts-nocheck
-import blogTheme from 'gatsby-theme-blog/src/gatsby-plugin-theme-ui/components';
+import { blogTheme } from '@enhanced-dom/gatsby-waves';
 const typographyTheme = toTheme(typography);
 export var ColorVariableNames;
 (function (ColorVariableNames) {

package/components/component-wave.component.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { Wave } from './wave.component';
-export declare class ComponentWave extends Wave {
-    static Slot: ({ children }: {
-        children: any;
-    }) => any;
-    protected toColumns: (items: React.ReactElement[]) => [React.ReactElement<any, string | React.JSXElementConstructor<any>>[], React.ReactElement<any, string | React.JSXElementConstructor<any>>[]];
-}

package/components/component-wave.component.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import { Wave } from './wave.component';
-const ComponentWaveSlot = ({ children }) => {
-    return children || null;
-};
-export class ComponentWave extends Wave {
-    constructor() {
-        super(...arguments);
-        this.toColumns = (items) => {
-            const columns = Array(2)
-                .fill(null)
-                .map(() => []);
-            items.forEach((item) => {
-                const isComponentSlot = item.type && typeof item.type === typeof ComponentWaveSlot;
-                if (isComponentSlot) {
-                    columns[0].push(item);
-                    columns[1].push(React.createElement('div', {}, []));
-                }
-                else {
-                    const step = columns[0].length - 1;
-                    columns[1][step].props.children.push(item);
-                }
-            });
-            return columns;
-        };
-    }
-}
-ComponentWave.Slot = ComponentWaveSlot;

package/components/image-wave.component.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { Wave } from './wave.component';
-export declare class ImageWave extends Wave {
-    protected toColumns: (items: React.ReactElement[]) => [React.ReactElement<any, string | React.JSXElementConstructor<any>>[], React.ReactElement<any, string | React.JSXElementConstructor<any>>[]];
-}

package/components/image-wave.component.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import { Wave } from './wave.component';
-export class ImageWave extends Wave {
-    constructor() {
-        super(...arguments);
-        this.toColumns = (items) => {
-            const columns = Array(2)
-                .fill(null)
-                .map(() => []);
-            items.forEach((item) => {
-                const isImg = item.props && item.props.mdxType === 'img';
-                if (isImg) {
-                    const img = React.cloneElement(item, {
-                        style: { objectFit: 'contain', margin: 0 },
-                    });
-                    columns[0].push(img);
-                    columns[1].push(React.createElement('div', {}, []));
-                }
-                else {
-                    const step = columns[0].length - 1;
-                    columns[1][step].props.children.push(item);
-                }
-            });
-            return columns;
-        };
-    }
-}

package/components/wave.component.d.ts

@@ -1,10 +0,0 @@
-/** @jsx jsx */
-import { jsx } from 'theme-ui';
-import React from 'react';
-export declare abstract class Wave extends React.PureComponent<{
-    children: React.ReactNode;
-}> {
-    protected abstract toColumns: (children: React.ReactElement[]) => [React.ReactElement[], React.ReactElement[]];
-    private childrenToColumns;
-    render(): jsx.JSX.Element;
-}

package/components/wave.component.js

@@ -1,37 +0,0 @@
-/** @jsx jsx */
-import { jsx } from 'theme-ui';
-import React from 'react';
-import Scroller from 'gatsby-theme-waves/src/components/bar-scroller';
-import BaseWave from 'gatsby-theme-waves/src/components/wave';
-const Sticker = ({ progress = 0, steps, variant = 'default' }) => {
-    const currentStep = Math.round(progress);
-    const prev = steps[currentStep - 1];
-    const curr = steps[currentStep];
-    const next = steps[currentStep + 1];
-    return (jsx("div", { sx: {
-            variant: `styles.waves.${variant}.StickerContainer`,
-        } },
-        jsx("div", { sx: { variant: `styles.waves.${variant}.Sticker` } },
-            prev && (jsx("div", { sx: {
-                    variant: `styles.waves.${variant}.StickerStep`,
-                }, style: { opacity: Math.max(0, currentStep - progress) }, key: currentStep - 1 }, prev)),
-            jsx("div", { sx: {
-                    variant: `styles.waves.${variant}.StickerStep`,
-                }, style: { opacity: 1 - Math.abs(currentStep - progress) }, key: currentStep }, curr),
-            next && (jsx("div", { sx: {
-                    variant: `styles.waves.${variant}.StickerStep`,
-                }, style: { opacity: Math.max(0, progress - currentStep) }, key: currentStep + 1 }, next)))));
-};
-export class Wave extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this.childrenToColumns = (children) => {
-            const items = React.Children.toArray(children);
-            const columns = this.toColumns(items);
-            return columns;
-        };
-    }
-    render() {
-        return jsx(BaseWave, Object.assign({ columnComponents: [Sticker, Scroller], childrenToStepColumns: this.childrenToColumns }, this.props));
-    }
-}

package/shell/header.component.js

@@ -1,24 +0,0 @@
-/** @jsx jsx */
-import { Themed, jsx } from 'theme-ui';
-import { SizeVariableNames, ColorVariableNames } from '../theme';
-export const ShellHeader = ({ title, author, date }) => {
-    return (jsx("div", { sx: { position: 'relative' } },
-        jsx("div", { sx: {
-                position: ['static', 'absolute'],
-                width: '100%',
-                height: ['auto', '100%'],
-                right: ['auto', SizeVariableNames.FULL_CONTENT_WIDTH],
-                color: ['text', ColorVariableNames.LIGHT_TEXT],
-            } },
-            jsx("div", { sx: {
-                    float: ['none', 'right'],
-                    display: ['block', 'inline-block'],
-                    textAlign: ['left', 'right'],
-                } },
-                jsx(Themed.h1, { sx: { paddingBottom: '80px' } }, title))),
-        jsx("div", null,
-            jsx(Themed.p, { sx: { paddingTop: 1 } },
-                jsx(Themed.a, { href: "/", sx: { textDecoration: 'none', color: 'inherit', border: 'none' } }, author),
-                jsx("br", null),
-                jsx("span", { sx: { fontSize: 1 } }, date)))));
-};

package/shell/scroll-top/scroll-top.component.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import ReactCardFlip from 'react-card-flip';
-import { faArrowAltCircleUp } from '@fortawesome/free-regular-svg-icons';
-import * as styles from './scroll-top.style.scss';
-import { Icon } from './icon.component';
-const getBodyScroll = () => {
-    return document.body.scrollTop !== 0 || document.documentElement.scrollTop !== 0;
-};
-const scrollToTop = () => {
-    if (getBodyScroll()) {
-        window.scrollBy(0, -50);
-        requestAnimationFrame(scrollToTop);
-    }
-};
-export const ScrollTop = ({ children }) => {
-    const [isFlipped, setFlipped] = React.useState(false);
-    const showButton = () => {
-        if (getBodyScroll()) {
-            setFlipped(true);
-        }
-    };
-    const showFront = () => {
-        setFlipped(false);
-    };
-    const buttonContents = children ? (React.createElement(ReactCardFlip, { isFlipped: isFlipped, flipDirection: "horizontal" },
-        React.createElement("div", null, children),
-        React.createElement("div", { className: styles.brandingBack },
-            React.createElement(Icon, { config: { ...faArrowAltCircleUp, namespace: 'fa5' } })))) : (React.createElement("div", { className: styles.brandingBack },
-        React.createElement(Icon, { config: { ...faArrowAltCircleUp, namespace: 'fa5' } })));
-    return (React.createElement("div", { className: styles.branding, tabIndex: 0, role: "button", onClick: scrollToTop, onFocus: showButton, onBlur: showFront, onMouseEnter: showButton, onMouseLeave: showFront }, buttonContents));
-};

package/shell/scroll-top/scroll-top.style.scss

@@ -1,26 +0,0 @@
-.branding {
-    width: 3rem;
-    height: 3rem;
-    position: fixed;
-    bottom: 2.5rem;
-    right: 2.5rem;
-    z-index: 1;
-    outline-color: #e2001a;
-    color: #e2001a;
-
-    > div {
-        height: 100%;
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-    }
-    
-    &-back {
-        background-color: transparent;
-        font-size: 2rem;
-        color: #e2001a;
-        cursor: pointer;
-    }
-    
-}

package/shell/shell.component.js

@@ -1,51 +0,0 @@
-/** @jsx jsx */
-/** @jsxFrag React.Fragment */
-import { jsx, Themed, ThemeProvider } from 'theme-ui';
-import { Global } from '@emotion/react';
-import React from 'react';
-import defaultTheme, { ColorVariableNames, SizeVariableNames } from '../theme';
-import { ShellHeader } from './header.component';
-import { ScrollTop } from './scroll-top';
-const BrandingSlot = ({ children }) => {
-    return children || null;
-};
-const ContentsSlot = ({ children, ...rest }) => {
-    return (jsx(React.Fragment, null,
-        jsx(ShellHeader, Object.assign({}, rest)),
-        children || null));
-};
-const getBranding = (children) => React.Children.toArray(children).find((item) => { var _a; return ((_a = item) === null || _a === void 0 ? void 0 : _a.type) === BrandingSlot; });
-const getContents = (children) => React.Children.toArray(children).find((item) => { var _a; return ((_a = item) === null || _a === void 0 ? void 0 : _a.type) === ContentsSlot; });
-export const Shell = ({ children, theme, }) => {
-    const branding = getBranding(children);
-    const contents = getContents(children);
-    return (jsx(ThemeProvider, { theme: theme },
-        jsx(Themed.root, { sx: {
-                display: 'flex',
-                width: '100vw',
-            } },
-            jsx(Global, { styles: {
-                    body: { margin: 0, overflowX: 'hidden' },
-                } }),
-            jsx("aside", { sx: {
-                    bg: ColorVariableNames.DARK_BACKGROUND,
-                    color: ColorVariableNames.LIGHT_TEXT,
-                    width: [0, '40vw'],
-                    minHeight: '100vh',
-                } }),
-            jsx("div", { sx: { bg: ColorVariableNames.BACKGROUND, color: ColorVariableNames.TEXT, width: ['100vw', '60vw'] } },
-                jsx("main", { sx: {
-                        py: [5, SizeVariableNames.TOP_MARGIN],
-                        pl: [0, SizeVariableNames.INNER_MARGIN],
-                        width: [SizeVariableNames.CONTENT, SizeVariableNames.CONTENT],
-                        maxWidth: ['80%', 'none'],
-                        mx: ['auto', 0],
-                    } },
-                    contents,
-                    branding ? jsx(ScrollTop, null, branding) : null)))));
-};
-Shell.defaultProps = {
-    theme: defaultTheme,
-};
-Shell.Branding = BrandingSlot;
-Shell.Contents = ContentsSlot;